Почувствуйте силу
![Почувствуйте силу](/sites/default/files/styles/card_s/public/2022-07/frontend_07.png?itok=jYkhh-z6)
Код читая, разработчиками написанный другими, свои навыки улучшаете вы. Сконцентрированную в дайджесте мудрость изучая, постигнете Светлой стороны Силу. Не мешкая в путь отправляйтесь.
На тёмной стороне
Тёмные цветовые схемы стали трендом. Пользователи отмечают, что это удобнее для глаз в ночное время. Кто-то даже в шутку отмечает, что это буквально спасает его брак. Научные исследования не столь радужны в своих выводах. Темный текст на светлом фоне обеспечивает лучшее восприятие. Несмотря на такую неоднозначность, внедрение 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-компаниях берут курс на геймификацию достижений сотрудников. И такой стиль хорошо вписывается в эту концепцию.
Конкурсы для разработчиков
Frontend Quiz
до 23 августа 2022
Предлагаем проверить себя в нашем новом квизе по Frontend-разработке.
Его составляли наши опытные разработчики, так что придётся хорошо подумать. Внутри 10 вопросов и несколько вариантов ответов, из которых лишь один правильный.
Среди всех, набравших не менее 9 правильных ответов мы разыграем приз — Яндекс Станцию. Счастливчика определит генератор случайных чисел в прямом эфире на нашем Youtube.
Митапы
Frontend Meetup
19:00 - Online
Рады сообщить, что мы запланировали проведение Frontend Meetup. Его программа формируется, но регистрация уже открыта. Детальная информация о мероприятии будет опубликована позже, следите за наши новостями.
Если у вас есть что рассказать и вы хотите стать спикером, то пишите на почту andy@evrone.com.
Вакансии
Evrone
Мы открыты для новых Frontend-разработчиков. В Evrone можно работать удалённо с первого дня, мы поддерживаем и оплачиваем участие в Open-source проектах, а расти в грейдах можно с помощью честной системы проверки навыков и менторства.