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 решение, которое можно просто подключить и пользоваться.

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

Ещё один лайфхак

#почитать

Кто-то знает и пользуется, а кому-то, возможно, короткая статья освежит в памяти этот лайфхак. Я так пользуюсь постоянно.
Допустим на сайте есть форма авторизации. А на форме есть поле ввода пароля. И пароль на сайте сохранён в браузере, и подставляется автоматически, и отображается спецсимволами. И, возможно, на этом сайте сохранены несколько данных для ввода, или вы сомневаетесь, что там сохранено, или ошибка, или любые другие варианты…
Хорошо, если в поле ввода пароля есть стандартная кнопка «Отобразить пароль»，и можно посмотреть, что подставляется в поле ввода пароля.

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

Как начать работать с Nuxt UI - библиотекой компонентов для Vue и Nuxt

#почитать

Недавно UI-библиотека Nuxt UI получила серьёзное обновление — версию Nuxt UI 4. Это принесло два больших изменения. Во-первых, теперь можно использовать Nuxt UI не только с Nuxt, но и с Vue напрямую. Во-вторых, все ранее платные возможности (Pro-компоненты, стартовые шаблоны и Figma UI Kit) теперь полностью бесплатны.
Всё это хороший повод разобраться, как же устроена Nuxt UI, в чём её преимущества и как начать с ней работать.

Недавно UI-библиотека Nuxt UI получила серьёзное обновление — версию Nuxt UI 4. Это принесло два больших изменения. Во-первых, теперь можно использовать Nuxt UI не только с Nuxt, но и с Vue напрямую. Во-вторых, все ранее платные возможности (Pro-компоненты, стартовые шаблоны и Figma UI Kit) теперь полностью бесплатны.
Всё это хороший повод разобраться, как же устроена Nuxt UI, в чём её преимущества и как начать с ней работать.

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

Революция вырезов

#почитать

Пару лет назад в CSS произошла тихая революция, вызвавшая тектонический сдвиг в разработке интерфейсов. Вкратце — нам разрешили «сверлить» настоящие дырки в блоках.
Создание блоков с вырезами всегда было трудоёмким, даже для вырезов простейшей формы. Фронтендеры годами тренировались мысленно рассекать блоки на части: прямоугольничек для контента, прямоугольничек для выреза и ещё парочка рядом с ним. И вдруг парадигма поменялась...
Простые вырезы теперь делаются в десять раз быстрее. Одной строчкой кода. Да, надо менять мышление и забывать про нарезку блоков. И как же это приятно!
В статье мы сверстаем карточку с круглым вырезом двумя способами: традиционно‑дедовским и современным. Затем сравним объём кода, простоту и гибкость получившихся реализаций. И порадуемся, что будущее уже наступило!

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

Document PiP vs window.open

#почитать

Сегодня я хотел бы провести небольшой исторический экскурс и объяснить, почему Document Picture-in-Picture — это не просто способ отображать видео в формате «картинка в картинке», а новое и любопытное API, которое потенциально может заменить привычный всем window.open.
Возможность выводить видео в режиме PiP появилась еще в сентябре 2018 года в Chrome 69. С тех пор прошло более семи лет активного тестирования и развития. В 2019 году подобный механизм появился в Safari, а к 2020-му — и в Firefox.
Теперь, когда почти каждый браузер умеет открывать видео в отдельном плавающем окне, возникает логичный вопрос: могут ли браузеры с той же легкостью открывать в отдельном окне интерактивный HTML-контент, а не только видео? И если да, то каким образом?

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

Отправиться на тот цвет: CSS Color 4. Как добавить яркие краски в серые веб-будни

#почитать

Поведаю о цветовых пространствах спецификации CSS Color 4, объясню их уникальность и специфику, расскажу о сценариях применения и плюсах, которые можно от этого получить.
Пропустим классическое вступление про устройство глаза, светочувствительные палочки и колбочки (там ничего нового, свежих релизов не было).

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

Заменяем JS обычным HTML

#почитать

Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS!
Но время идёт, функции HTML и CSS расширяются, поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS.
Я ничего не имею против JS, но у него есть иные задачи, кроме как управление аккордеонами и внеэкранными меню навигации... Кроме того, JS нужно скачивать, распаковывать, обрабатывать, после чего он ещё часто тратит память на мониторинг и поддержку фич. Если мы сможем перенести какую-то функциональность JS в нативный HTML или CSS, тогда пользователям придётся скачивать меньше данных, а оставшийся JS сможет уделить внимание более важным задачам, с которыми (пока) не справляются HTML и CSS.

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

Как мы перестали бояться тьмы (и сделали её удобной)

#почитать

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

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

Creating Scroll-Based Animations in Full view()

#почитать

It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.

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

Мне этот Chrome DevTools теперь абсолютно понятен

#почитать

Если вы думаете, что Chrome DevTools нужны только для того, чтобы посмотреть на ошибку в консоли или скопировать путь к элементу, вы используете лишь малую часть их возможностей. На самом деле, это рабочая среда, которая должна быть открыта у фронтенд-разработчика постоянно. С её помощью можно не только искать баги, но и проектировать интерфейсы, тестировать поведение на разных устройствах, анализировать производительность и вносить правки в код прямо из браузера.
Этот гайд поможет вам перестать воспринимать DevTools, как панель для отладки и начать использовать их как основной инструмент для ежедневной работы.

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

Как создать плавные анимации в CSS с cubic-bezier() — руководство с примерами

#почитать

Когда вы задаёте анимацию или переход в CSS, свойства изменяются нелинейно: сначала медленно, потом быстрее, в конце снова замедляются. Это поведение называется интерполяцией и определяется так называемой функцией ускорения (или «easing function»). По умолчанию браузеры используют значения вроде ease, ease-in, ease-out и linear. Но если вам нужен более тонкий контроль над тем, как именно свойство изменяется во времени, пригодится функция cubic-bezier().

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

Как сделать кнопку «Скопировать» на странице

#почитать

Наверняка вы сто раз видели кнопку Скопировать, например, возле блоков кода в любимой нейронке, чтобы быстро их скопипастить. Давайте разберемся, как самостоятельно сделать такую же (кнопку, а не нейронку).

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

Scrollytelling on Steroids With Scroll-State Queries

#почитать

Unconvinced of the value of scrollytelling? Alright, skeptic, let’s first warm up with some common use cases for scroll-based styling.

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

HTML и CSS антипаттерны

#почитать

При обучении разным языкам программирования всегда есть практики, которым не рекомендуется следовать. Это очень сильно помогает разработчикам избегать ошибок.
Только по какой-то причине сложно найти антипаттерны по языкам HTML и CSS. Может, потому что они не языки программирования?
В общем, у меня появилось желание это исправить. Я собрал несколько примеров, которые лично отношу к антипаттернам. Возможно, это субъективно, но надеюсь, что нет.

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

Митапы — это, конечно, круто и полезно. Но что может быть лучше открытой дискуссии с коллегами о наболевшем? ☑

AvitoTech тут зовёт на классный ивент для фронтендеров. Обещают полтора часа дискуссий на самые разные темы: от роста фронтенд-инженера в тимлида до ванильного JS. И вишенка на торте — афтерпати на веранде ☄

Всё пройдёт вечером 19 мая, так что погода не должна подкачать. Регистрация, кстати, по ссылке.

Равномерное размещение блоков разных размеров

#почитать

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

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