FrontEndDev

Насколько потолстел JavaScript к 2024 году?

Интересная статистика по популярным сайтам и их отношению к оптимизации JS бандлов. Выяснилось, что Pornhub больше всех задумывается о скорости загрузки.

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

Tailwind vs. Semantic CSS

Сравниваем 2 сайта с похожим дизайном: один на Tailwind, второй - с семантическим CSS.
Исследование показывает основные проблемы Tailwind, которые стоит учитывать при выборе способа стилизации.

https://nuejs.org/blog/tailwind-vs-semantic-css/

Техники переноса слов

О возможностях переноса слов с помощью CSS и HTML.

https://adrianroselli.com/2024/02/techniques-to-break-words.html

Типизация для Redux Toolkit

Михаил Непомнящий на примере показывает, как можно типизировать работу со стором в Redux Toolkit.

https://www.youtube.com/watch?v=uRlh6-tHWEE

А вы не задумывались, почему пакет is-number в npm имеет большое число скачиваний?

Немного аналитики, или почему не стоит доверять большим цифрам на страницах npm для принятия решения об установке того или иного пакета.

https://shubhamjain.co/2024/02/29/why-is-number-package-have-59m-downloads/

Разбираемся с StyleX — одним из новых подходов к написанию стилей.

Обзор различных техник по работе с CSS и как StyleX может быть полезен на вашем проекте.

https://blog.logrocket.com/exploring-stylex-new-generation-styling-libraries/

Capo.js: улучшаем перформанс вашего приложения за 5 минут

Capo.js — инструмент, который проверяет разметку в head и сортирует элементы для улучшения скорости загрузки приложения.

Конечно, не стоит доверять ему на 100%, но, как минимум, покажет вам возможные варианты для оптимизации.

https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/

JavaScript по запросу: как Qwik отличается от React Hydration

Различные подходы в решении проблемы доставки JS приложений: Qwik vs React Hydration

https://thenewstack.io/javascript-on-demand-how-qwik-differs-from-react-hydration/

React + SignalDB

Как работает SignalDB и как интегрировать реактивную клиентскую базу данных с React.

https://blog.logrocket.com/using-signaldb-react/

HTML streaming

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

https://aralroca.com/blog/html-node-streaming

Играемся с бесконечностью в CSS

О том, как можно использовать значение infinity и в какие максимальные значения его интерпретируют браузеры.

https://codersblock.com/blog/playing-with-infinity-in-css/

Чистая архитектура React приложения

Одна из возможных реализаций подхода чистой архитектуры для React + Redux приложения. Данный подход позволяет изменять/заменять любые модули с минимальными затратами, однако требует дополнительной работы при реализации.

https://github.com/eduardomoroni/react-clean-architecture

Работе с селектором :has

Интерактивное руководство от Ахмада Шадида.

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

Лучший способ отцентровать div

Обзор методик центрирования элементов на странице (лучший выбирать вам).

https://www.joshwcomeau.com/css/center-a-div/

Front-End Architecture 101 - Nir Kaufman @ ReactNYC

Доклад про архитектуру front end проектов: о том, с чего стоит начинать разработку и почему библиотеки и технологии не так важны при реализации.

https://www.youtube.com/watch?v=o8THlN8hgcw

Итак, вы думаете, что знаете Git? Часть вторая: новое в Git

О новых фичах в Git и их применении.

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

Что такое CSS Motion Path

Как анимировать элементы по траектории с CSS Motion Path.

https://www.letsbuildui.dev/articles/what-is-css-motion-path/

Как отобразить радар-чарты в вебе

Создаем удобные и переиспользуемые компоненты для отображения данных в виде радар-чартов.

https://www.smashingmagazine.com/2024/02/draw-radar-charts-web/

Появление WebGL изображений при скролле

Эффект обратной пикселизации изображений при скролле с использованием WebGL и GSAP

https://tympanus.net/codrops/2024/02/07/on-scroll-revealing-webgl-image-explorations/

Демо | GitHub