От CSS до Canvas и звука: анимируем что угодно с GSAP

#почитать

GSAP – одна из самых популярных JavaScript-библиотек для создания анимаций. Её используют как новички, так и опытные front-end-разработчики. В этой статье я хочу рассмотреть несколько примеров ее применения – от самых простых до менее очевидных.

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

Infinite Pixels

#почитать

By which I mean, if I hand a browser values that are effectively infinite by way of theinfinity keyword, it will necessarily end up clamping to something finite, thus revealing how far it’s able or willing to go for that property.

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

Типографика в дизайне: как текст может сделать ваш сайт эффективным

#почитать

Текст — это не просто набор букв. Это мощный инструмент, который влияет на восприятие дизайна, удобство чтения и даже доверие пользователей. Хотите, чтобы ваш сайт или печатные материалы выглядели профессионально? Тогда давайте разберём основы типографики простыми словами.

В данной статье разберем:

- Важность подбора правильного шрифта
- Как выбрать шрифты?
- Где искать шрифты?
- Размер и расстояние – основа удобства
- Контраст и цвет текста
- Ошибки, которые портят типографику и как их избежать

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

CSS функция min() и адаптивность сайта

#почитать

Что было во всем этом интересного конкретно для нас, так это то, как в этой статье демонстрируется сложность определения размера разных вещей. В CSS мы ограничены абсолютными и относительными единицами измерения, поэтому мы либо придерживаемся определенного размера (например, px), либо вычисляем размер на основе размера, объявленного для другого элемента (например, %, em, rem, vw, vh и так далее). И то, и другое сопряжено с компромиссами, так что не похоже, что существует "правильный" способ действий - все зависит от контекста элемента, - и уклон в какую-либо одну сторону этого не исправит.
В связи с этим мы решили провести собственный эксперимент, но вместо контейнерных единиц измерения мы взяли CSS функцию min(). Почему? Во-первых, мы можем задать функции в качестве аргумента любой нужный нам тип единицы измерения, что делает подход более гибким, чем работа только с одним типом единиц измерения. Но настоящая причина была в том, что нам было интересно изучить этот вопрос.

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

Обходим CSP nonce через дисковый кеш браузера

#почитать

Эта статья описывает изощренную технику обхода Content Security Policy (CSP) на основе nonce-значений через эксплуатацию механизмов кеширования браузера. Автор демонстрирует, как комбинация CSS-инъекций, CSRF-атак и особенностей работы bfcache и дискового кеша может привести к выполнению произвольного JavaScript-кода даже при наличии строгой CSP.

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

<details name>: эксклюзивные аккордеоны на чистом HTML (+ стили через :has())

#почитать

За последний год HTML получил деталь, которая меняет привычные «аккордеоны». У <details> появился атрибут name, и этим всё сказано: теперь эксклюзивные аккордеоны можно сделать без строчек JavaScript, а стили и поведение дочистить через :has(). Поддержка стала широкой, а старые практики на дивчиках и ролях можно оставить для случаев, когда действительно нужна сложная логика.

В HTML у нас давно есть пара <details>/<summary>. Браузер сам рисует disclosure-виджет, умеет разворачивать содержимое, бережно обращается с фокусом и клавиатурой. Сейчас поверх этого добавился name, который превращает набор из нескольких <details> в группу, открываешь одно и закрываются остальные из той же группы. Если в группе вы отметили несколько элементов open в исходнике, браузер оставит открытым первый по порядку.

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

«Великолепный» CSS. Коллекция странностей CSS, на которые я потратил кучу времени

#почитать

CSS часто преподносит сюрпризы, способные запутать даже опытных разработчиков. Я понимаю их раздражение. Тут всё закономерно.

Однако, несмотря на потраченные нервы, мне нравится CSS. Именно поэтому мне хочется, чтобы разработчики тратили меньше времени на борьбу с ним. С этой целью я собрал ряд не самых очевидных моментов, которые в своё время ставили в тупик меня и моих коллег.

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

Аудит дизайна сайта: как выявить слабые места и улучшить пользовательский опыт

#почитать

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

В этой статье разберём:
- Что такое аудит дизайна и зачем он нужен?
- Как провести аудит самостоятельно: пошаговая инструкция
- Основные ошибки дизайна и способы их исправления
- Инструменты для проверки юзабилити и визуальной привлекательности

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

An Interactive Guide to SVG Paths

#почитать

The SVG <path> element is notoriously tricky. When I first encountered it, I found it totally inscrutable. Its syntax isn’t quite as bad as Regex, but it has the same sort of “what on earth?” vibes.

At the same time, <path> elements are also incredibly useful. They’re the only way to create curved shapes in SVG, beyond full ellipses. And once you get the hang of it, they’re actually quite a lot of fun to use!

In this blog post, we’ll cover all of the basic commands, including the infamous arc command. I’ll help you build an intuition for how they work, and show you some cool stuff you can do with them!

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

🪐 Новые вакансии фронтендеров

🚀 Frontend-разработчик (Vanilla JS) в NDA (хайлоад-проект), 200 000 - 300 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-razrabotchik-vanilla-js-high-load-nda-hajload-proekt-11c5f387

🚀 Frontend Developer в NDA (проект iGaming), 320 000 - 400 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-developer-nda-proekt-igaming-ff48b78e

🚀 Frontend Developer в Олдис, 50 000 - 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-developer-oldis-c4225f3f

🚀 React Frontend разработчик в NDA (SaaS-сервисы), 60 000 - 130 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/react-frontend-razrabotchik-nda-saas-servisy-e79628d4

🚀 Frontend разработчик (react) в NDA (Криптокошелек), 280 000 - 400 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-razrabotchik-react-nda-kriptokoshelek-1bc75b7a

🚀 Fullstack Engineer в NDA (MVP разработка), oт 300 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/fullstack-engineer-nda-mvp-razrabotka-b0ddbed3

🚀 React разработчик в NDA (ИТ-проекты), 50 000 - 90 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/react-razrabotchik-nda-it-proekty-60da4a53

🚀 Senior Frontend (React JS / Next JS) в Sprut Gaming, oт 200 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/senior-frontend-react-js-next-js-sprut-gaming-7293ee8e

🚀 FullStack-разработчик в INTOP, 120 000 - 180 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/fullstack-razrabotchik-intop-3d72702b

Больше вакансий фронтендеров здесь ⤵️
https://jobrocket.ru/ru?page=1&categories=frontend

Практическое руководство по современным CSS-цветам

#почитать

С учётом того, сколько инструментов для работы с цветами появилось в CSS, браузер сегодня позволяет выполнять с цветами больше операций, чем многие графические редакторы. Это открывает широкий спектр новых сценариев и подходов к работе с цветом прямо в коде.

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

Отладка с помощью сил древнего зла

#почитать

Глубоко в пучинах спецификации HTML дремлет давно забытый ужасный зверь. Представьте себе узел DOM настолько могучий, что он может изменять тип содержимого разных частей документа. HTML-элемент, который заставляет парсер трепетать и замолкать, и которого не остановить даже его собственным тегом.
Мудрецы из W3C стараются держать информацию об этом ужасе подальше от взора простых смертных, чтобы избавить их от угрозы его безумия. Они советуют нам не использовать имя магического тега, призывающего это древнее зло.
Но мы сегодня, естественно, поступим наоборот и заглянем в глубины элемента <plaintext>, чтобы узнать, какие занятные вещи с его помощью можно делать.

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

Chrome DevTools — не панацея. Что умеет Firefox

#почитать

Бьюсь об заклад вы привыкли к инструментам разработчика в Chrome. Ежедневная проверка вёрстки, просмотр логов или анализ загрузку страницы делается на автопилоте. Но что если есть альтернатива, которая в некоторых моментах работает иначе и часто даже лучше?
Инструменты разработчика в Firefox создавались отдельно и имеют свою историю. Их команда не ставила задачу сделать копию Chrome. Вместо этого они сфокусировались на своих идеях о том, как сделать отладку более наглядной. В результате некоторые вещи там реализованы более прямолинейно и понятно. Конечно, не всё идеально, и у Chrome есть свои преимущества. Об этом сегодня и поговорим.
В этой статье мы посмотрим на Firefox DevTools в деталях. Отойдем от банальных соревнований в стиле «у кого DevTools длиннее». Вместо этого разберем, в каких ситуациях панель Firefox может сэкономить вам время, а в каких всё же удобнее остаться в Chrome. Откроем для себя несколько приёмов, которые можно добавить в свою ежедневную работу, независимо от браузера.

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

Фиксим залипающий hover на мобильных устройствах

#почитать

Залипающий hover на мобильных устройствах – частый баг. Раньше мы решали это просто плагином PostCSS Hover Media Feature, он оборачивает все псевдоклассы :hover в медиазапрос @media (hover: hover) {}. Так мы проверяли поддержку hover и отключали его на мобилках. Но во время тестирования одного проекта оказалось, что на некоторых устройствах hover продолжает залипать.

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

Подборка кнопок с CodePen для ваших проектов

#почитать

Правильно говорят, что лучший способ чему-то научиться — подсмотреть у тех, кто умеет. Поэтому принесли вам подборку с CodePen, в которой хорошие разработчики делают интересные штуки и делятся ими со всеми. В этом выпуске — интерфейсы на CSS и React.

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

Как строить переиспользуемые фронтенд-компоненты: пример кнопки лайк

#почитать

Когда проект становится больше, неизбежно появляется вопрос: как писать интерфейс так, чтобы потом не переписывать одно и то же десятки раз?

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

IT-курсы по веб-разработке не ведут к навыку создания готовых веб-приложений

#почитать

Учебная программа веб-разработке в современных курсах не обучает делать веб-продукты.

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

JavaScript для интерфейса: создаем компонент уведомления

#почитать

Эта статья — про то, как спокойно и осознанно писать код интерфейса. Не быстро, не «в лоб», а так, чтобы через полгода в него было не страшно вернуться.

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