Почувствуйте силу

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

На тёмной стороне

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

Автор статьи «The Complete Guide to the Dark Mode Toggle» даёт простые советы, как правильно внедрить тёмную тему.. Основную и дополнительную палитры нужно подобрать таким образом, чтобы обеспечить хорошую контрастность. Цвета фиксируются в CSS, а само переключение реализуется через функцию на JavaScript. В качестве визуального элемента для переключения можно использовать иконки Луны и Солнца. Это будет интуитивно понятным способом. Хорошим тоном будет сохранить выбранную цветовую схему в локальном хранилище пользователя.

Иногда действия пользователя можно предугадать. Например, если он установил в своей операционной системе тёмную тему по умолчанию. Тогда не стоит напрягать его выбором. Здесь поможет мультимедийная функция CSS refers-color-scheme. Она сработает как в большинстве десктопных, так и в мобильных браузерах.

Находим битые ссылки

Пока веб-сайт маленький, отслеживать неработающие ссылки легко. Но когда страниц много, делать всё вручную нецелесообразно. Нужен инструмент, который автоматически сканирует каждую страницу на наличие ссылок. Причём не только в тегах <a href>, но и в других элементах. Из этой идеи вырос небольшой проект linkinator, упрощающий жизнь frontend-разработчикам.

Работает на уже опубликованных в сети и локальных сайтах. Поддерживаются перенаправления, абсолютные и относительные ссылки. Регулярками можно исключать файлы из сканирования, а markdown-файлы обрабатываются без транспиляции. Примечательно, что этот инструмент можно легко встроить в процессы CI/CD. Для Github Actions даже была создана отдельная утилита linkinator-action.

Просканировать можно любой сторонний сайт. Есть возможность вывести результаты сканирования в JSON или CSV-файл для дальнейшего использования. Инструмент можно использовать не только напрямую, но и через HTTP_PROXY/HTTPS_PROXY, задав соответствующие переменные среды.

Next.js как Middleware

У фреймворка Next.js есть и поклонники, и хейтеры. Создание SPA или же статических веб-сайтов — основная задача, которую Next.js успешно решает. Но что, если мы посмотрим чуть глубже? С 12-ой версии фреймворка появилась функция Vercel Edge. Она выполняет код до того, как запрос будет выполнен. Появляется возможность делать на базе входящего запроса разные приятные мелочи — rewrite, redirect, добавление заголовков и установку cookies.

Vercel Edge — некое подобие маршрутов API Vercel, но использующие бессерверный подход. Это удобно, ведь код можно размещать в CDN, максимально близко к конечному пользователю. Для использования создайте файл middleware.ts в корневой директории проекта. Его содержимое будет исполняться до загрузки каждой страницы, файла или маршрута API на веб-сайте. В некоторых случаях требуется, чтобы middleware отрабатывало только на конкретных страницах. Можно или прописать требуемые страницы в config или сделать простейший сопоставитель.

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

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

8-битная ностальгия

В завершении нашего дайджеста предлагаем немного отойти от серьёзных вещей и позабавиться. Уверены, что большинство наших читателей хотя бы раз в жизни сталкивались с играми на NES. Возможности по отрисовке графики на 8-битных игровых консолях были крайне ограничены. Так что пиксельный стиль графики и интерфейсов был скорее вынужденной мерой, чем желанием разработчиков.

А если сделать веб-сайт с интерфейсом 8-битной игровой приставки? Легко — есть классный проект NES.css, который справится с этой задачей. Фреймворк содержит множество элементов, которые имитируют знакомую с детства пиксельную графику. В нём нет строгой аутентичности, это скорее погружение в атмосферу старых пиксельных игр.

Создатель проекта родился в Японии и придерживался двух принципов — простота и минимализм. На тот момент он только изучал возможности CSS и создание своего собственного фреймворка помогло ему изучить CSS в простой игровой форме. Возьмите на заметку такой метод обучения.

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

Конкурсы для разработчиков

Митапы

Вакансии