Вы не знаете CSS. Мои вопросы о CSS с ответами, ч.2

#почитать

Есть ли разница в работе псевдо-классов :focus-within и :has(:focus-visible)?

⏱Читать статью

Друзья! Сегодня мы рекомендуем супер-полезные каналы с еженедельными дайджестами полезных материалов по тестированию и проджект-менеджменту

Подпишитесь и будьте в курсе последних новостей и видео в индустрии. Всего 1-2 поста в неделю и у вас есть все, что вышло за неделю.

🟡QA Live 🚩 тестирование ПО

🟡PM Live 🚩 проджект и продакт менеджмент

Создать App одним промтом

#почитать

Мы все уже слышали про сотни промтов, которые могут создать полноценный App, и что скоро разработчики будут не нужны.
Но давайте попробуем сделать не то чтобы App, а просто интерактивную страничку.
Предположим, что я не умею кодить и даже не знаю html. Мы засечём время и посчитаем количество запросов, которые у меня уйдут на получение рабочей интерактивной html-странички.
Затем попробуем извлечь из нейросети тот самый заветный один промт, который сможет воссоздать такую же страничку с нуля.
Будем делать страничку, отображающую Leadership Development Framework от Гарварда. Это что-то вроде пирамиды Маслоу, только про развитие лидера. Я выбрал её, потому что сейчас как раз занимаюсь этим вопросом.

⏱Читать статью

20 приемов TypeScript, которые должен знать каждый разработчик

#почитать

Многие разработчики знают основы TypeScript, но знание некоторых приемов может сделать ваш код более эффективным, чистым и поддерживаемым.

⏱Читать статью

Анимация по любой траектории с offset-path

#почитать

У вас же было такое, что ждёте курьера или доставку, а их всё нет и нет? Заходите сайт, обновляете статус, а там «В пути» и больше никакой информации. У нас вот было много раз.
В хороших случаях курьера рисуют прямо на карте, и показывают, где он едет, где проехал, и прямо анимацией можно всё рассмотреть.

⏱Читать статью

Резервные значения пользовательских свойств CSS

#почитать

Браузер не знает, является ли значение CSS переменной валидным, пока переменная не будет разрешена, а к тому времени её обработает каскад и отбросит возможные резервные значения.

⏱Читать статью

Интерактивные метки на изображении JS

#почитать

Хочу поделиться своим скриптом, который позволяет создавать адаптивные изображения с интерактивными метками.
Скрипт по умолчанию поддерживает до 50 меток на изображении.

⏱Читать статью

Regex стали лучше - История и будущее регулярных выражений в JavaScript

#почитать

Современные регулярные выражения JavaScript прошли долгий путь со времени своего появления. И они могут стать потрясающим средством поиска и замены текста, хотя у них до сих пор репутация сложного для написания и понимания инструмента.
И особенно это актуально для среды JavaScript, где регулярные выражения много лет оставались в тени, будучи сравнительно менее мощными по сравнению с их более современными аналогами в PCRE, Perl, .NET, Java, Ruby, C++ и Python. Но, наконец, те времена прошли.
В этой статье я расскажу об истории улучшений регулярных выражений в JavaScript (спойлер: ES2018 и ES2024 серьезно изменили правила игры), покажу примеры современных регулярных выражений в действии, познакомлю вас с облегчённой библиотекой JavaScript, которая позволяет JavaScript конкурировать с другими современными инструментами регулярных выражений или превосходить их, и в конце предложу обзор активно обсуждаемых предложений, которые позволят улучшить регулярные выражения в будущих версиях JavaScript (некоторые из них уже работают в вашем браузере сегодня).

⏱Читать статью

Создание глубины и движения: пошаговое руководство по созданию эффекта параллакса

#почитать

Создание визуально привлекательного сайта — это не только о ярких цветах и типографике. Сегодня это также о создании захватывающих пользовательских впечатлений, которые увлекают пользователей при прокрутке страницы. Один из самых эффективных способов достичь этого — использование эффекта параллакса, при котором элементы перемещаются с разной скоростью, создавая ощущение глубины и движения.
С помощью продуманного подхода и небольшого количества JavaScript вы можете легко добавить этот эффект на свой сайт, сделав его более динамичным и увлекательным.
В этой статье мы шаг за шагом рассмотрим, как интегрировать пользовательский эффект параллакса на ваш сайт. Будь то создание богатой функциональностью целевой страницы или улучшение элементов повествования, этот метод оживит ваш сайт. Давайте начнем.

⏱Читать статью

Настройка Jest и React Testing Library: пошаговое руководство для React и Next.js проектов

#почитать

В этой статье мы подробно рассмотрим процесс настройки среды unit-тестирования веб-приложений на базе React и Next.js с использованием Jest и React Testing Library. Расскажем об установке необходимых зависимостей, создании конфигурационных файлов, настройке Babel и TypeScript, подключении SCSS и SVG, а также организации структуры проекта. Особое внимание уделено специфике настройки Jest в среде Next.js. Материал будет полезен для frontend-разработчиков и команд разработки, которые работают с React или Next.js проектами и хотят внедрить качественное unit-тестирование.

⏱Читать статью

Формат шрифтов COLRv1 для цветных глифов

#почитать

COLRv1 — это формат шрифтов, который позволяет вставлять в шрифты многоцветные глифы. Он расширяет предыдущую версию COLRv0, добавляя поддержку градиентов, трансформаций и режимов смешивания.

⏱Читать статью

Управление разрывами в многостолбцовых CSS макетах

#почитать

Колонные макеты с помощью свойств или column-count позволяют раскладывать контент в несколько колонок. Свойства break-after, break-before и break-inside` управляют тем, где происходит разрыв колонок — чтобы убрать нежелательные переносы или задать точку начала или конца колонок.

⏱Читать статью

Практическое руководство по иконкам в веб-проектах

#почитать

Узнайте, как создать собственный шрифт с иконками из SVG-файлов и интегрировать его в Angular-проект с помощью Fantasticon.

⏱Читать статью

Функции в CSS?

#почитать

Очень нужный дисклеймер: Теперь в CSS мы (вроде как) можем использовать функции! Я знаю, это не самое приятное чувство - закончить читать о новой фиче только для того, чтобы автор сказал: "И, надеюсь, мы увидим её через пару лет". К счастью, прямо сейчас вы можете попробовать (неполную) версию функций CSS в Chrome Canary с экспериментальным флагом, хотя кто знает, когда мы сможем использовать на рабочем сайте.

⏱Читать статью

Каскадные слои CSS vs БЭМ vs утилитарные классы: управление специфичностью

#почитать

CSS бывает непредсказуемым — и зачастую виновата именно специфичность. Автор статьи объясняет, почему ваши стили могут вести себя неожиданным образом и почему лучше разобраться в специфичности, чем полагаться на флаги !important.
CSS — штука дикая, реально дикая. И хитрая. Но давайте поговорим конкретно о специфичности.
При написании CSS практически невозможно избежать разочарования, когда стили применяются не так, как ожидалось — это особенность специфичности. Вы применили стиль, он сработал, а позже пытаетесь переопределить его другим стилем и... ничего, он вас игнорирует. Опять же, дело в специфичности.
Да, есть вариант прибегнуть к флагу !important, однако, как и все разработчики до нас, мы знаем, что это рискованно и нежелательно. Гораздо лучше разобраться в механике специфичности, чтобы потом не сражаться с расставленными кругом флагами важности.

⏱Читать статью

ChatGPT vs Гик. Сможет ли AI заменить опытного верстальщика?

#почитать

Моя подруга постоянно читает новости о том, что искусственный интеллект заменит какую-то профессию. Тестировщик, программист, дизайнер, писатель и т. д. А сможет ли он заменить опытного верстальщика?
Мне стало интересно, сможет ли ChatGPT написать код, как я. Чтобы мог сказать: «Да, вот это мы допускаем в продакшен».
Добиваться этой цели я буду на примере нескольких популярных паттернов. Я уверен, что фронтендеры постоянно верстают их из проекта в проект. Ещё я честно признаюсь, что у меня мало опыта работы с такими системами. Я новичок. Так что тоже учитывайте это при чтении.

⏱Читать статью

Итак, вы хотите отказаться от пре- и постпроцессоров CSS

#почитать

Разбираем, можно ли в 2025 году отказаться от Sass и PostCSS в пользу нативного CSS, Lightning CSS и Tailwind. Плюсы и минусы современных инструментов.

⏱Читать статью