Как подключить нестандартные шрифты?

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

https://htmlacademy.ru/blog/html/fonts-loading

Откладываем загрузку некритического CSS

Практический пример оптимизации загрузки страницы с разделением критического и некритического CSS.

https://web.dev/defer-non-critical-css/

Репозиторий с решенными frontend проблемами

Алгоритмические задачи, задачи на верстку и React c объяснением

https://github.com/pinglu85/BFEdevSolutions

База SQL для начинающих

Frontend разработчикам для расширения кругозора короткий ликбез по SQL.

https://youtu.be/5sG9kmXYsKU

#ruvds_статьи #css

Ох уж эти CSS-переменные

Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом.

⭐️⭐️◽️◽️◽️

📖Читать

Трюки при работе с SVG

SVG предоставляет довольно гибкий API для реализации интересных анимаций и эффектов в вебе. Вот несколько примеров, которые помогут вам в этом разобраться.

https://blog.codepen.io/2023/08/28/chris-corner-even-more-svg-tricks/

Полиморфизм на TypeScript

Примеры полиморфизма из реального проекта с реализацией на TS. Лайвкодинг сессия от Ивана Горбунова.

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

#ruvds_статьи #typescript

Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса

⭐️◽️◽️◽️◽️

📖Читать

Quokka - JS playground в вашем редакторе

Расширение для вашей IDE, которое позволяет быстро запустить и отдебажить ваш код.

https://quokkajs.com/

Как prefetch помог Terra ускорить показатели LCP и скорость загрузки

Короткая заметка с реализацией способа загрузки контента

https://web.dev/terra-prefetching-case-study/

CSS методологии

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

https://www.arekibo.com/blog/popular-css-methodologies-for-scaling-web-projects/

Как React 18 улучшает производительность приложения

Новые возможности React: конкурентный рендеринг, интерфейс переходов, серверные компоненты и кеширование.

https://my-js.org/blog/react-18/

Друзья! С Днем Программиста! 🎉🎉

В честь праздника держите подборку анимаций для модальных окон 😉

https://codepen.io/designcouch/pen/obvKxm

4 типа покрытия кода тестами

Статья о том, какие бывают метрики покрытия тестами, какую вам стоит выбрать, и в чем отличие code coverage от test coverage.

https://web.dev/ta-code-coverage/

#javascript #node.js

Релиз Bun 1.0 (новый runtime для JavaScript )

Представляем Bun версии 1.0.Bun — это быстрый и универсальный набор инструментов для запуска, сборки, тестирования и отладки JavaScript и TypeScript кода (от одного файла до fullstack-приложения). Сегодня Bun стабилен и готов к продакшену.

⭐️⭐️◽️◽️◽️

📖Читать

Hover анимация для гридовых элементов

Очередной эффект для оживления контента.

Демо | Github

https://tympanus.net/codrops/2023/09/13/grid-item-hover-effect/

Новые фичи JS в грядущем EcmaScript 2023

Удобные функции по работе с массивами и датами, а также поддержка декораторов и еще несколько фич.

https://thenewstack.io/the-new-javascript-features-coming-in-ecmascript-2023/

#html #css

Как HTML и CSS влияют на доступность

⭐️⭐️◽️◽️◽️

📖Читать

Что нового в веб анимации?

Google I/O 2023

https://youtu.be/oDcb3fvtETs