Хотите расти как разработчик и найти крутую работу? Не протирайте штаны — займитесь 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
.