⇤ На главнуюСова рассылает выпуск #18
Всем приятного дня! Я уверен, что вы ждали этот выпуск. В этот раз я собрал весьма мясную подборку о самых разных аспектах frontend разработки.
С удовольствием буду выпускать подборки потрясающих статей для Вас регулярно, но сейчас я ищу новую работу, где могу применить свои навыки на практике, а также продаю квартиру, что отнимает довольно много сил и времени.
Приятного чтения 🧡
Качественные полосы прокрутки на новейшем CSS 🇺🇸
Сложно реализовать качественное отображение полос прокрутки. Не всем дизайнерам нравятся стандартные полосы, особенно на windows, поэтому их часто перерисовывают. А фронтендерам остается только подключать библиотеки на js эмулирующие scrollbar.
Не стоит делать этого! Познакомьте дизайнеров с этой статьёй и вместе изучите возможности стандартной стилизации полос прокрутки. Ведь иначе можно легко сломать жизнь пользователям iOS, Android, macOS, так как на этих устройства у прокрутки страницы есть особое поведение, которое сторонние библиотеки повторить не могут.
Сначала пишите документацию, а потом код 🇺🇸
Любой проект стоит начинать с написания документации, это позволит сразу обнаружить проблемы продвижения проекта, разработки множества его фич и сразу же получить фидбек до вложения тонны своих усилий.
Как сделать любое приложение похожим на macOS 🇺🇸
Что отличает веб от настольных приложений? Как ведут себя ссылки, кнопки, чем отличаются состояния hover/active/focus. Это особенно актуально для Electron-разработчиков.
Оптимизация рендеринга concurrent mode 🇺🇸
В React 18 появился concurrent-рендеринг. В этой статье автор погрузится в 3D-визуализацию и расскажет, как шаг за шагом оптимизировать производительность с помощью concurrent-рендеринга React 18.
Вышел Fastify v4 GA 🇺🇸
Спустя два года активной разработки выходит 4 версия веб-сервера. Из интересных нововведений:
- композиция обработчиков ошибок
- pino логгер был обновлен и теперь не требует отдельного процесса, хотя и умеет в потоки
- типы для валидаторов ajv выводятся из inline-описания, что сильно упрощает декларацию схем для тела запроса
- холодный запуск fastify теперь быстрее на 150%
- роутер
find-my-wayтакже был ускорен - сигнатура listen потеряла много разных форматов
CSS Containment Module Level 3 🇺🇸
Container-queries на самом деле гораздо функциональнее, чем просто отслеживание размеров родительского элемента. Можно повесить media-query на определенные свойства родителя, например display: grid. Тред с примерами.
Как выбирать между media и container queries 🇺🇸
Чтобы точно закрепить понимание container queries необходимо четко разделять области, где полезны одни и вредны другие.
Еще рекомендую почитать статью на ishadeed.com об этом.
Учим CSS — padding-block 🇺🇸
Наверняка вам часто приходится писать padding-top: 10px; padding-bottom: 10px.
Теперь ваши страдания могут быть уменьшены: padding-block: 10px. Рекомендую посмотреть документацию на MDN, ведь поддержка есть во всех браузерах кроме IE, который более не поддерживается Microsoft.
Fresh 1.0 🇺🇸
Полноценный fullstack фреймворк предлагает несколько нестандартных особенностей пользователям: в браузер не отсылается javascript по умолчанию, при этом нет этапа сборки, в браузере рендерятся только интерактивные компоненты, остальное пререндерится и присылается с сервера, конечно же всё это на платформе Deno.
Как открыть истину, помогая своему оппоненту 🇺🇸
Наверняка вы человек у которого есть работа в команде, а значит вам точно приходилось договариваться с людьми и в процессе возникали эмоции, когда один коллега пытался переубедить другого. Но ведь мы работаем не для убеждений друг друга, а для поиска правды и более уместных подходов в проекте.
Статья расскажет, как понять собеседника и выявить “истину” помогая оппоненту в его точке зрения. На удивление есть пошаговая инструкция, хоть и не стоит воспринимать ее как догму.
Делай хорошо и будет хорошо 🇺🇸
Хорошо описанные коммиты в вашем репозитории — это фактически ключ к поддерживаемому проекту в команде. Github предлагает пересмотреть своё отношение к именованию коммитов в проекте. Эту статью точно стоит прочитать самому и предложить изучить подход в своей команде. Давайте сделаем жизнь своих коллег проще!
Примитивные типы в TypeScript не так сложны 🇺🇸
Довольно часто в Telegram чатах я вижу, как разработчики даже хорошо знакомые с системой типов TypeScript фрустрируют и просто двигают ключевые слова влево-вправо пока не заработает. Эта статья определенно поможет всем использующим TypeScript лучше понимать основы его системы типов. Для многих будет открытием, что any и unknown имеют принципиально разный смысл и поведение. В большинстве случаев нельзя заменить unknown на any без потери типизации или вывода типов.
Можно ознакомиться с этой статьей, если будет недостаточно.
Самые экстремальные примеры на TypeScript 🇺🇸
Как мы помним, система типов в TypeScript является тьюринг-полной, что означает, что на ней можно реализовать буквально любой алгоритм/программу, что и на JavaScript. Если вы рискнете открыть ссылку ниже, то увидите несколько примеров таких программ чисто на типах: 4-битная виртуальная машина, поиск самого короткого пути в лабиринте, sql-движок базы данных, парсер и интерпретатор TypeScript и другое!
Алгоритмы которые нужно знать перед интервью 🇺🇸
Если вы как и я интересуетесь System Design, то вам стоит прокачать свои знания перед тем как проходить собеседования на позицию System Design Engineer.
От себя добавлю youtube канал на русском языке, рассказывающий о Frontend System Design — youtube.com/c/FrontEndEngineer
Как сделать потрясающие градиенты на CSS 🇺🇸
Градиент выше выглядит достаточно понятно и привычно, простой переход от желтого к синему. Но стоит обратить внимание на некую серую зону в середине градиента и этот переход уже не кажется таким привлекательным, он выглядит грязно и неопрятно. Чтобы понять как исправить подобные проблемы, необходимо погрузиться в устройство градиентов и научиться собирать их на высшем уровне.
Как и зачем типизировать CSS-переменные?
Вы когда-нибудь слышали о типах данных в CSS? Так вот, css-custom-properties тоже имеют тип, из-за отсутствия которого, некоторые приемы могут не работать вообще. В данной статье София рассказывает, как можно анимировать фоновый цвет блоков, в том числе и градиенты.
Новая волна управления состоянием на React 🇺🇸
Очень часто разработчики задают вопрос “Да зачем мне вообще этот стейт-менеджер?!”, разумеется это из-за полного непонимания какие проблемы решают СТМ.
Из некоторых задач хочется сразу отметить, с помощью СТМ можно:
- читать данные из любого места дерева компонентов не смотря на вложенность
- оптимизировать рендеринг, за счет вынесения логики расчета значений за пределы цикла рендеринга
- радикально упростить код компонента, оставив в нем только UI-логику, остальное оставив независимым от процесса рендеринга
Прощай useEffect 🇺🇸🖥
Самое большое разочарование, о котором я слышу регулярно в экосистеме React — появление хуков. Но ведь это просто инструмент и всегда встает вопрос о том, как его использовать и на поверку оказывается, что проблема разумеется в людях, которые используют инструмент не правильно.
В дополнение к статье выше, это видео поможет развеять основные страхи и неприязнь к хукам в React. Главное, что хочется сказать перед просмотром: выносите свою бизнес-логику из компонентов и из React-хуков тоже, используйте подходящие для этого менеджеры состояний и/или бизнес-логики. Но конечно же, только если у вас на фронтенде есть бизнес-логика.
А обо всем остальном вам расскажет Дэвид!