![[Перевод] Использование CSS-grid при проектировании пользовательских интерфейсов](https://habrastorage.org/getpro/habr/post_images/1e9/b66/a38/1e9b66a38ad811ee082d60449741fd82.jpg)
CSS-grid — это отличный инструмент для создания макетов страниц контентно-ориентированных сайтов, включающих в себя большие фрагменты текста и другие материалы. Кроме того, эта технология имеет огромное значение и для великого множества традиционных пользовательских интерфейсов веб-приложений. В материале, перевод которого мы сегодня публикуем, Джош Мариначчи рассказывает о том, как использовать CSS-grid для проектирования макетов страниц. Речь пойдёт о страницах, которые способны…
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее![[Перевод] Медиа-запросы в адаптивном дизайне 2018](https://habrastorage.org/webt/7t/zf/h9/7tzfh9w4ytsmfpda1knfeewk10i.jpeg)
В июле 2010 года я написала статью «Как использовать CSS3 медиа-запросы для создания мобильной версии вашего сайта» для журнала Smashing. Спустя почти восемь лет эта статья по-прежнему очень популярна. Я решила вернуться к этой теме, поскольку теперь у нас есть такие методы компоновки, как Flexbox и CSS Grid. В этой статье мы рассмотрим современные методы использования медиа-запросов в адаптивном дизайне, а также рассмотрим, что может произойти в будущем. Читать дальше →
Подробнее
Всем бобра! Переработали тут по заявкам слушателей программу курса по JavaScript: дописали смежные темы типа сборщиков, тестовых фреймворков плюс догнали чуток изучения подходов по ООП + SOLID, паттерны и ещё мелкие разные изменения. По этому поводу провели достаточно интересный открытый вебинар на тему «Особенности языка JavaScript», где Юрий Дворжецкий рассказывал и показывал (а ещё и спрашивал) основные отличия языка, идиомы JS. Как всегда ждём вопросы, пожелания, тапки.
Подробнее
Актуальны ли ещё угрозы XSS? Прошло около 20 лет с тех пор, как Cross Site Scripting (XSS) появился как вид атаки. С тех пор мы получили богатый опыт и знания, защита наших сайтов стала намного сложнее, а многочисленные фреймворки были призваны оберегать нас от ошибок. Но последние данные показывают совсем другую картину: в первых кварталах 2017 года количество сообщений об XSS-атаках и количество найденных уязвимостей выросло в несколько раз. В этом хабропосте мы расскажем, как страшно…
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее![[Из песочницы] Sublime Text 3 жив. (Настройка и работа)](https://habrastorage.org/webt/sf/t2/k9/sft2k9z5t86-jrginmxq0xkzp2s.jpeg)
Sublime Text 3 — кроссплатформенный текстовый редактор. Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно) Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале. 1. Установка программы и контроль за дополнениями (Package…
Подробнее
В этом году в преддверии весны, Кодабра совместно со школой «Летово» проводит конкурс, посвященный программированию, робототехнике и VR — «IT-герои». По этому замечательному поводу мы решили рассказать Хабру, кто же для нас самих является героем, на кого мы ориентируемся при обучении детей профессиям нового века, а перед кем снимаем шляпу за их вклад в популяризацию и развитие технологий. Эта статья будет посвящена выдающимся людям, повлиявшим на становление Web 2.0 и его победное шествие
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее![[Перевод] Современный CSS для динозавров](https://habrastorage.org/getpro/habr/post_images/3f2/b31/b73/3f2b31b737e0d84ea1c2dbb3deee748a.png)
— Двигать пиксели в CSS и так было трудно! А теперь мне говорят, насколько круто использовать несемантические названия классов, встроенные стили в HTML и даже писать стили CSS на JavaScript! [Вставь тут гифку из «Гриффинов»] — Ха! Иллюстрации из Dinosaur Comics Райана Норта Как ни странно, CSS считается одновременно одним из самых простых и одним из самых сложных языков для веб-разработчика. Определённо он достаточно прост в начале — вы определяете свойства стиля, значения для конкретных…
Подробнее
Доброго времени суток, дорогие хабрахабровцы! При создании адаптивной версии сайта, часто бывают ситуации, когда надо знать: поддерживает ли браузер пользователя hover, или нет. К примеру, выпадающее при наведении подменю, или же различные анимации, привязанные к событию hover — все это нужно только на ПК. На touch-устройствах поведение элементов должно меняться. Так как же задать определенные стили только для устройств с поддержкой hover на css, не забывая о кроссбраузерности? Читать дальше →
Подробнее![[Перевод] Веб-типографика: создаем таблицы для чтения, а не для красоты](https://habrastorage.org/webt/ha/6e/7w/ha6e7wihzowl45i1kmdkdo6ej6w.jpeg)
Наталия Шергина, фрилансер-редактор и студентка Нетологии, специально для блога перевела лонгрид Richard Rutter о типографике веб-таблиц. Хорошие дизайнеры не жалеют времени на типографику. Они тщательно подбирают шрифты, перебирают множество типографических шкал и скрупулезно применяют пробелы (white space) ради удобства пользователя. Затем появляется соблазн покреативить — и вот все мысли уже не о пользователе. Однако таблицы нужны в первую очередь, чтобы их читали и использовали, а не…
Подробнее