Вопросы и ответы для собеседования на позицию frontend-разработчик. Часть 2 / Хабр
https://habr.com/ru/articles/785596/

Скрытые возможности элемента <input>

https://habr.com/ru/companies/ruvds/articles/785690/

Альтернатива live-server

Мне часто нужно запустить какую-нибудь html-страничку на мини-сервере, чтобы и айфреймы в ней работали нормально, и по локальной сети пошарить (с телефона открыть). И обычно я для этого использую npm-пакет live-server. Запускаешь npx live-server, ждёшь минуту скачивания зависимостей, профит. Или ставишь глобально, чтобы ждать минуту всего один раз.

Недавно увидел тред в твиттере, где искали альтернативу. И оказалось, ждать целую минуту не обязательно. Есть неплохой пакет servor, который умеет почти то же самое, npx servor работает почти мгновенно, для моих задач подходит полностью.

Оба пакета, если что, давно не обновляются на github, но это не делает их устаревшими: свою работу выполняют отлично.

https://github.com/lukejacksonn/servor
https://github.com/tapio/live-server

Когда система подтормаживает, разобраться поможет:

ps aux --sort=-%cpu | grep -m 11 -v 'whoami'
Этой командой получим список из 10 (не ваших) процессов, которые больше всего нагружают процессор.

Либо можем получить весь список процессов, которые были запущены не вами:
ps aux | grep -v 'whoami'

Так смотрим список самых загруженных (в более читаемом виде):
ps -eo pid,ppid,%mem,%cpu,comm --sort=-%cpu | head

Разборка в Шторме

https://habr.com/ru/articles/784256/

Nginx: шпаргалка / Хабр
https://habr.com/ru/articles/789360/

3D эффекты для изображений

Как добавить сияние, изменить перспективу и поворот для изображений при помощи CSS.

https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/

12 современных возможностей CSS, качественно улучшающих DX или UX одной строкой кода → https://moderncss.dev/12-modern-css-one-line-upgrades

Alt-тексты для псевдоэлементов.

Общеизвестно, что псевдоэлементы не видны для скринридеров. Однако с недавнего времени это не совсем так.

В свойстве content через слэш можно написать текст, который окажется в дереве доступности и будет озвучет при прочтении документа.

Демо и больше подробностей в заметке: https://ru.ariarzer.dev/2024/notes/pseudo-alt/

​​👤«Подождите, не успеваю записывать код …». Я слушал это пару лет и в итоге написал раздатчик изменений кода для студентов

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

Читать...

​​👤Почему PASETO лучше для аутентификации, чем JWT

В этой статье мы рассмотрим PASETO — токен, который был разработан для замены JWT.

Читать...

2023 JavaScript Rising Stars

Есть такой проект, в котором уже восьмой раз собираются тренды из мира JavaScript по анализу звёздочек на GitHub за последние 12 месяцев. И в этом году снова интересные результаты.

- Среди всех проектов победил shadcn/ui — библиотека React-компонентов со стилизацией на Tailwind CSS.
- На втором месте Bun — тулкит для всего, который в сентябре прошлого года был залайкан неприличное количество раз. В 2022 году он был вообще на первом месте.
- На 3 и 4 месте утилиты для рисования и вайтбординга в браузере Excalidraw и tldraw.
- Среди фронтенд-фреймворков выделяется htmx — программирование на html-атрибутах. Пока только второе место, но React догоняет уверенно.
- В бэкенде всё ещё впереди всех Next.js, несмотря на все интриги и критику сообщества.
- В мобильной разработке лидирует Expo. Про него не слышал, но он смог совсем чуть-чуть, но всё же обогнать React Native по звёздочкам. В 2022 году он был далеко на втором месте.
- Для стилизации самое большое количество звёздочек у Tailwind CSS.
- Для тестирования большинство людей выбирают Playwright.
- Появилась отдельная категория для AI-библиотек.
- Пропала категория GraphQL, уже не в тренде.

Видно, что многие инструменты как были популярные несколько лет назад, так и остаются популярными. Однозначно на количество звёздочек влияет маркетинг — можно сопоставить на графиках резкие скачки и громкие анонсы. И круто, что появляются новые хайповые библиотеки — это в любом случае полезно для рынка.

https://risingstars.js.org/2023/en

Подсветка кода на странице при помощи Custom Highlight API

Если вы встраивали показ кода на страницы своих сервисов, то скорее всего приходилось прикручивать и подсветку этого кода, чтобы были красивые цвета у разных наборов токенов, как в любимом IDE. Для этого есть много готовых библиотек, так что сложности особой нет. Но все эти библиотеки сейчас создают большое количество span с набором классов для стилизации.

Брамус показывает, как можно применять современный Custom Highlight API, чтобы не создавать span для стилизации в принципе. Это такая апишка, которая уже работает в Chrome 105 и Safari 17.2. И она позволяет при помощи JavaScript разбивать текстовые узлы на набор параметризированных токенов. Как это делать в JS, лучше смотреть в самой статье. Но зато в CSS всё становится сильно приятнее:

::highlight(important) {
    color: red;
    font-weight: bold;
}

::highlight(attr) {
    color: violet;
}

Имена хайлайтов как раз задаются в JS.

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

https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/

Интерактивный гайд по :has()

Ахмад Шадид в очередной раз выдал супер-подробный гайд. На этот раз про то, как работает родительский селектор :has(), с полезными примерами.

Что можно подсмотреть:
- Как правильно делать boolean-логику на основе has().
- Как радикально менять разметку на основе количества вложенных элементов (например, когда мало карточек — растягивать их на всю ширину, а когда много — рисовать плотно и колонками).
- Как делать фолбеки, если какого-то элемента нет (например, когда картинка товара есть — рисуем картинку, а когда нет — заранее подготовленный placeholder).
- Как изменять размеры контейнера на основе его содержимого (для маленьких виджетов резервировать поменьше места на сам контейнер в раскладке, для больших — побольше).
- Как сделать всплывашки и попапы, которые не перекрывают друг друга (очень хороший пример про GDPR-баннер и иконку чата с поддержкой, которые на большом количестве сайтов друг другу мешают).
- Как научить панель управления с кнопками визуально реагировать на наличие особенных кнопок внутри.
- Как сделать зависимые друг от друга инпуты (например, если значение select требует уточнения, рисуем инпут для этого уточнения).
- И многое другое.

Примеры из списка сразу хочется сделать на каком-нибудь React: затащить на клиент логику показа компонента в зависимости от пропсов, перерендерить при необходимости. Но в этом и огромное преимущество :has() — ему не нужны фреймворки. При помощи этого селектора и дисциплины в именовании классов можно творить самые настоящие «умные» компоненты без единой строчки JavaScript. А это и меньший клиентский бандл, и меньшее количество ререндерингов.

Напоминаю, что не стоит забывать про старые браузеры, которые в :has() пока не умеют. Но если ваш проект работает с вечнозелёными браузерами, то уже можно внедрять: https://caniuse.com/css-has.

https://ishadeed.com/article/css-has-guide/

Ретро-гейминг на Pico Pi: создаём свою Dendy / Хабр
https://habr.com/ru/articles/796987/

На собесе – соловей, на работе – бармалей. Почему на собеседовании кандидат один, а на деле – другой? / Хабр
https://habr.com/ru/articles/797699/

React, Vite and TypeScript: Get started in under 2 minutes

https://blog.nrwl.io/react-vite-and-typescript-get-started-in-under-2-minutes-3bd5cd836175

Collections are coo

https://nerdy.dev/collections-are-coo

Draw SVG rope using JavaScript

https://muffinman.io/blog/draw-svg-rope-using-javascript/