Хотите расти как разработчик и найти крутую работу? Не протирайте штаны — займитесь Open Source проектами. Так легче всего попасть в лучшие команды разработчиков и положить себе в резюме настоящий проект, вместо нелепых «примеров кода». Но найти подходящий проект для участия сложно. Начинаются лень и отговорки, а за ними — отсутствие профессионального роста, критики по-настоящему крутых программистов, уныние и застой.
На Cult of Martians мы собираем интересные задачи для современных веб-программистов. Можно выбрать подходящую по сложности, продолжительности и специализации. Задачи не выдуманы «из воздуха» — каждая решает насущную проблему, и решить ее можно через создание нового Open Source проекта или улучшение существующего. Решайте задачи, прокачивайтесь, присылайте решение на оценку. Лучших могут пригласить к себе на работу компании, программистам которых понравится ваше решен ие.
Для новичков, задача на неделю
Autoprefixer умеет вставлять префиксы Grid Layout для Internet Explorer. Поддерживается даже grid-template-areas
.
Но, в некоторых случаях, префиксы для grid-template-areas
в медиа-выражении могут быть вставлены не в том месте. Нужно изменить логику.
Польза: указать в резюме коммит в известный проект.
Сейчас для кода
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"a b"
"c d";
}
@media (min-width: 600px) {
.grid {
grid-template-areas: "a b c d";
}
}
.grid__cell--a {
grid-area: a;
}
Autoprefixer сгенерирует:
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"a b"
"c d";
}
@media (min-width: 600px) {
.grid {
grid-template-areas: "a b c d";
}
.grid__cell--a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
}
.grid__cell--a {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
}
В итоге, код будет работать неправильно, так как второй .grid__cell--a
(вне @media
) перезапишет значение первого. Правильный вариант:
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"a b"
"c d";
}
@media (min-width: 600px) {
.grid {
grid-template-areas: "a b c d";
}
}
.grid__cell--a {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
}
@media (min-width: 600px) {
.grid__cell--a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
}
test/cases/grid-template-*
.insertAreas
.