Запись шагов через DevTools

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

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

Тестирование приложений с Cypress

Большой туториал по e2e тестированию с Cypress

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

Введение в CSS Grid для новичков

Основы Grid разметки с простыми примерами использования.

https://www.sitepoint.com/introduction-css-grid-layout-module/

WebAssembly

Александр Коротаев рассказывает, как и для чего можно использовать WebAssembly, и можно ли писать WebAssembly на TypeScript.

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

The virtual keyboard API

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

https://ishadeed.com/article/virtual-keyboard-api/

381 выпуск Веб Стандартов

Затронули Firefox 116, новую математику в CSS, Style Queries и еще несколько тем.

https://web-standards.ru/podcast/381/

Микро-фронтенд

Краткий курс для тех, кто не работал с микро-фронтами.

https://www.youtube.com/watch?v=lKKsjpH09dU&ab_channel=freeCodeCamp.org

Новые единицы измерения viewport

Статья о динамических единицах и какую проблему они решают на мобильных устройствах.

https://ishadeed.com/article/new-viewport-units/

patch-package

Инструмент, позволяющий пропатчить код библиотек из node_modules (когда другие варианты уже невозможны), сделать патч изменений и применять его на postinstall.

https://www.npmjs.com/package/patch-package

Как браузер рендерит страницы

Краткое описание процесса с важными аспектами.

https://doka.guide/tools/how-the-browser-creates-pages/

Оптимизация анимаций элементов

Как правильно с точки зрения браузера анимировать элементы на странице, чтобы кулеры ноутбука не свистели.

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

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

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

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-интерфейс для класса

⭐️◽️◽️◽️◽️

📖Читать