Создание формы для донатов

Пример реализации формы на React + Express и интеграции ее с платежной системой Stripe.

https://dev.to/wra-sol/building-a-reactexpress-stripe-donation-form-2pek

Лучшие практики по созданию форм логина и регистрации

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

https://web.dev/sign-in-form-best-practices/

Воссоздаем Youtube Ambient Mode эффект

Туториал по реализации эффекта светящейся рамки для видео.

https://smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/

Flexer

Визуальный CSS Flexbox конфигуратор. Отличный способ разобраться с flexbox для начинающих.

https://www.flexer.dev/

CSS GridGarden

Игра, которая пошагово рассказывает о том, как работать с CSS Grid. 28 уровней, которые сделают из тебя знатока гридов ☺️

https://cssgridgarden.com/#ru

CSS Masking

Большой гайд по работе с CSS масками.

https://blog.codepen.io/2023/07/31/chris-corner-clever-css-ideas-explanations/

Front-end. Вопросы на собеседовании

Разбор вопросов про ФП и ООП, Gitflow, DI, агрегацию и композицию.

https://www.youtube.com/watch?v=hJDqYohmzL8&

#ruvds_статьи #javascript

Явное управление ресурсами: пробуем новую фичу JavaScript и TypeScript

⭐️⭐️◽️◽️◽️

📖Читать

CSS и доступность

Подстраиваем стиль приложения под предпочтения пользователя. О медиа фичах и их статусе внедрения, которые помогут сделать ваше приложение более доступным.

https://www.smashingmagazine.com/2023/08/css-accessibility-inclusion-user-choice/

Запись шагов через 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