Getting Creative With HTML Dialog

#почитать

Любите вы их или не любите, но независимо от того, показываете ли вы оповещение, сообщение или подписываетесь на рассылку, диалоговые окна привлекают внимание к определенному фрагменту контента, не отправляя человека на другую страницу. В прошлом диалоговые окна использовали сочетание разделения, ARIA и JavaScript. Но элемент HTML dialog сделал их более доступными и стилизуемыми бесчисленными способами.
Как же вы можете вывести дизайн диалоговых окон за рамки шаблонов и фреймворков? Как придать им стиль, чтобы они отражали визуальную индивидуальность бренда и помогали рассказывать его истории? Вот как я делаю это в CSS, используя ::backdrop, backdrop-filter и анимацию.

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

Адаптивная flex-сетка на CSS: разбираем реализацию на атомы

#почитать

Наверное, каждый, кто сталкивался с frontend`ом, хотя бы раз использовал адаптивную flex-сетку на N-ном количестве колонок. В данной статье мы не станем рассматривать область применения такого подхода, его плюсы и минусы, а разберем теорию и напишем собственное решение, с брейкпоинтами и настраиваемым спейсингом!
Данная статья, в первую очередь, будет полезна новичкам, однако надеюсь, что и опытные хабровчане найдут в ней что-то интересное. Для упрощения жизни, будем использовать SCSS, продублировав CSS «под спойлер».

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

Вы не знаете 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 с экспериментальным флагом, хотя кто знает, когда мы сможем использовать на рабочем сайте.

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