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 для интерфейса: создаем компонент уведомления

#почитать

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

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

Создаем UI-Kit на React: пошаговое руководство по настройке

#почитать

Процесс настройки UI‑Kit на React — от установки зависимостей до сборки готового пакета. Ниже в статье вы прочитаете о полном цикле разработки: сборке, тестировании, линтинге и документации.

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

Именованные цвета в CSS

#почитать

Цвета в CSS можно задавать не только в форматах RGB, HEX или HSL, но и с помощью именованных цветов. Такие названия, как red, limegreen, blue или rebeccapurple, упрощают стилизацию, делая код более читаемым и интуитивным. Этот подход особенно полезен для быстрого прототипирования и учебных проектов.

Именованные цвета были введены в спецификации CSS1 (1996 год) и основаны на палитре X11, используемой в оконной системе UNIX. Названия вроде aliceblue, papayawhip или moccasin пришли именно из этой палитры. В CSS Color Level 4 (2022 год) стандарт закрепил 147 именованных цветов, включая transparent и currentcolor. Эти цвета поддерживаются во всех современных браузерах и могут использоваться для задания фона, текста, границ, теней и других свойств.

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

Визуализация: nth-child – как выбирать элементы на странице

#почитать

Давайте разберёмся с :nth-child(). Это встроенная возможность CSS, которая помогает выбрать элементы на странице по их порядку внутри какого-нибудь контейнера, например, списка или блока. Хочется выделить каждый второй элемент? Или, скажем, каждый третий, начиная с четвёртого? С :nth-child() это легко! Можно просто написать номер, чтобы взять, к примеру, пятый элемент, или использовать что-то вроде «чётные» или «каждые три», чтобы всё красиво стилизовать.

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

CSS interest-delay: умные задержки для лучшего UX

#почитать

CSS interest-delay — это как «не торопись» для интерфейсов. Позволяет браузеру ждать, пока пользователь действительно хочет что-то сделать, а не просто мимо прошёл. Свойство, которое решить кучу головной боли, но пока не работает нигде — но когда заработает, вы перестанете ругать выпадающие меню.

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

Хватит писать CSS с нуля: как Chakra UI экономит время и нервы разработчика

#почитать

В сфере фронтенд‑разработки каждый день приходится решать однотипные задачи: создавать и настраивать внешний вид компонентов, обеспечивать адаптивность и доступность UI без вреда для производительности. Чтобы избавить нас от этой рутины, были созданы библиотеки стилизации.
В данной статье мы рассмотрим одну из таких библиотек — Chakra UI V3 в связке с React, так как она не особо большая и проста в изучении. В разных библиотеках синтаксис может немного отличаться, но в основном они все решают одни и те же проблемы. Давайте разберёмся, как она способна помочь нам в разработке.

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

UUID в JavaScript: Полное руководство

#почитать

Генерация UUID — одна из тех фундаментальных задач, с которой сталкивается каждый разработчик. Universally Unique Identifier, или универсальный уникальный идентификатор, решает простую, но критически важную задачу: создание гарантированно уникального идентификатора.

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

Approximating contrast-color() With Other CSS Features

#почитать

The new contrast-color() function is not fully supported yet. But can we still implement it in a cross-browser friendly way using other new CSS features?

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

Даём возможность пользователям сайта самим менять размер блоков, потянув указателем мыши за край или угол

#почитать

В статье представлено всё необходимое, чтобы осуществить вынесенное в заголовок (плюс поддержка сенсорного ввода), а так же готовое open source решение, которое можно просто подключить и пользоваться.

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