Как я сделал свою сборку Gulp для быстрой, лёгкой и приятной вёрстки

Как я сделал свою сборку Gulp для быстрой, лёгкой и приятной вёрстки

Серьёзно и профессионально я начал заниматься вёрсткой в 2019 году, хотя до этого интересовался данной темой как любитель. Поэтому новичком мне себя назвать сложно, но и профессионалом с опытом 5+ лет я тоже не являюсь.Тем не менее, я успел познакомиться со сборщиком Gulp, его плагинами и сделал для себя хорошую, как по мне, сборку для работы. О её возможностях сегодня и расскажу. Читать далее

Подробнее
[Перевод] 25 лет CSS

[Перевод] 25 лет CSS

Первые заметки по CSS. Это было утро вторника, 7 мая, когда я сидел в конференц-зале Амбруази CNIT в Париже, Франция, и мои мысли поразила перспективная веб-технология под названием «Cascading Style Sheets», 25 лет назад. На тот момент я работал чуть более двух лет Вебмастером в Case Western Reserve University, и хотя я знал о верстке с помощью таблиц, я не хотел использовать этот подход для основного сайта кампуса. Все эти таблички казались… неправильными. Но все же, у меня не было

Подробнее
Дайджест свежих материалов из мира фронтенда за последнюю неделю №469 (24 — 30 мая 2021)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №469 (24 — 30 мая 2021)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →

Подробнее
[Перевод] 3 способа визуального извлечения данных с помощью JavaScript

[Перевод] 3 способа визуального извлечения данных с помощью JavaScript

К старту курса о Frontend-разработке мы решили поделиться переводом небольшого обзора визуальных атак, позволяющих получать закрытую информацию о пользователе вне зависимости от того, применяется ли правило ограничения домена. Некоторые из обсуждаемых уязвимостей закрыты, но развитие технологий веба порождает новые вариации старых атак. Читать далее

Подробнее
Дайджест свежих материалов из мира фронтенда за последнюю неделю №468 (17 — 23 мая 2021)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №468 (17 — 23 мая 2021)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →

Подробнее
[Перевод] Взгляд на Tailwind CSS

[Перевод] Взгляд на Tailwind CSS

В этом году я видел много шумихи вокруг популярного фреймворка CSS, Tailwind CSS. И подумал, что поделюсь некоторыми мыслями и опасениями по поводу этого фреймворка UI. Я приобрёл небольшой опыт написания CSS с подходом utility-first (полезность прежде всего), когда начал свою карьеру в разработке интерфейсов, несколько лет назад. К старту курса о Frontend-разработке делимся статьёй, автор которой решил, возможно, несколько изменить то, как воспринимается Tailwind, рассказать как о…

Подробнее
Трюки CSS, которые сделают из вас ниндзя верстки

Трюки CSS, которые сделают из вас ниндзя верстки

Сегодня я хочу рассказать вам о нескольких CSS-свойствах и значениях, которые редко упоминаются в специальной литературе, но, на мой вгляд, представляют определенный интерес с точки зрения скорости и качества разработки веб-интерфейсов. Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и…

Подробнее
Дайджест свежих материалов из мира фронтенда за последнюю неделю №467 (10 — 16 мая 2021)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №467 (10 — 16 мая 2021)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →

Подробнее
[Перевод] Инструменты для аудита CSS

[Перевод] Инструменты для аудита CSS

Аудит (здесь и далее слово «аудит» употребляется в значении «оценка качества») CSS не относится к повседневным задачам при разработке веб-приложений, но иногда приходится этим заниматься. Это может быть частью процесса определения критического CSS, удаления неиспользуемых селекторов, улучшения доступности, когда все цвета в кодовой базе оцениваются на предмет контрастности, и т.д. Существуют некоторые инструменты, облегчающие выполнение указанных задач. Но давайте начнем с того, что

Подробнее
[Перевод] Сравнение производительности CSS и CSS-in-JS в реальном мире

[Перевод] Сравнение производительности CSS и CSS-in-JS в реальном мире

Технология CSS-in-JS заняла прочное место среди инструментов фронтенд-разработки. И возникает ощущение, что CSS-in-JS-тренд в ближайшем будущем лишь усилится. Особенно — в мире React. Например, в исследовании State of CSS, проведённом в 2020 году, приняли участие 11492 человека. Лишь 14,3% из них не слышали о Styled Components (о ведущей CSS-in-JS-библиотеке). А вот пользовались этой библиотекой более 40% участников исследования. Мне уже давно хотелось найти серьёзный материал,

Подробнее
[Перевод] CSS – строго типизированный язык программирования

[Перевод] CSS – строго типизированный язык программирования

Один из способов классификации языков программирования – то, на сколько они сильно или слабо типизированы. В данном случае под «типизированный» подразумевается, известны ли переменные в момент компиляции. Хорошим примером будет сценарий, когда целочисленная 1 складывается со строкой, содержащей «1». Строка, содержащая целое число, могла быть непреднамеренно собрана из сложного набора логики с большим количеством движущихся частей. Она также могла быть намеренно составлена из одного

Подробнее
[Перевод] Переход к «Meta GSAP»: поиски «идеальной» бесконечной прокрутки

[Перевод] Переход к «Meta GSAP»: поиски «идеальной» бесконечной прокрутки

Уже послезавтра, 14 мая, стартует новый поток курса Python для веб-разработки, поэтому мы решили поделиться переводом о не совсем очевидной, но интересной области разработки сайтов — анимации анимации. Автор не просто даёт готовый рецепт, но шаг за шагом показывает, как сделать анимацию прокрутки плавной и приятной. Эта статья больше о концепции, которая поможет вам по-другому взглянуть на вашу анимацию. Так случилось, что этот конкретный пример демонстрирует бесконечную прокрутку, в

Подробнее