Анимируем React приложение с Framer Motion

Короткий курс по анимации на примере приложения со списком.

https://egghead.io/lessons/react-create-micro-interactions-with-framer-motion-gesture-props

npm audit

Что такое npm audit и как фиксить проблемы с уязвимостями, которые мы видим в консоли после установки.

https://www.niraj.life/blog/understanding-npm-audit-fixing-vulnerabilities-nodejs/

Улучшенная работа вложенного CSS с CSSNestedDeclarations

В спецификацию добавлены некоторые улучшения работы вложенных конструкций CSS, которые делают работу селекторов более предсказуемой.

https://web.dev/blog/css-nesting-cssnesteddeclarations?hl=en

Вписываем текст во всю ширину строки

Интересный трюк, позволяющий подогнать размер шрифта для полного заполнения текста

https://frontendmasters.com/blog/edge-to-edge-text/

Геймдев на JavaScript

Туториал по созданию Sonic Runner с использованием библиотеки Kaplay.

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

Способы улучшить показатели Core Web Vitals

Советы по улучшению показателей INP, CLS и LCP.

https://web.dev/articles/top-cwv

Как отключить ECH для вашего домена на Cloudflare

Если ваш сайт на Cloudflare перестал работать без VPN, то все дело в технологии Encrypted Client Hello, которую включил Cloudflare. Ее можно отключить на платных тарифах в админке, а в бесплатных только если ты хакер.

Сначала проверяем домен на предмет работы ECH так:
https://dns.google/resolve?name=[ВАШ_ДОМЕН]&type=HTTPS

У меня в ответе видно, что включен {"name":"jem-space.ru.","type":65,"TTL":300,"data":"1 . alpn=h3,h2 ipv4hint=188.114.96.1,188.114.97.1 ech=AEX+DQBBHQAgACAhjyy/+kI2j...."}

Идем в https://dash.cloudflare.com/profile/api-tokens и копируем свой Global API Key.
На странице домена внизу справа копируем Zone ID.

Отключаем ECH запросом curl (или постман)

curl -X PATCH "https://api.cloudflare.com/client/v4/zones/{ID_ZONE}/settings/ech" \
     -H "X-Auth-Email: {ACCOUNT_EMAIL}" \
     -H "X-Auth-Key: {GLOBAL_API_KEY}" \
     -H "Content-Type:application/json" --data '{"id":"ech","value":"off"}'

Источник https://habr.com/ru/articles/856602/

Интерактивное руководство по CSS Transitions

Подробный гайд по CSS Transitions от Josh W. Comeau с примерами, которые можно потыкать.

https://www.joshwcomeau.com/animation/css-transitions/

WebView-приложения. Время гибридных технологий

Андрей Симонов в своем докладе рассказывает, почему появление гибридов — это естественная эволюция, что они дадут разработчику и бизнесу.

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

CSS трюки с использованием одного градиента

CSS cинтаксис градиентов относительно сложный и в нем легко можно запутаться, если делать сложные вещи. Посмотрим на простых примерах, что можно сделать с использованием лишь 1 градиента.

https://css-tricks.com/css-tricks-that-use-only-one-gradient/

ResizeObserver API

ResizeObserver API — инструмент JavaScript для отслеживания изменений размеров HTML-элементов, полезный при работе с адаптивными и динамическими интерфейсами. Туториал, показывающий как создать экземпляр ResizeObserver, наблюдать за элементами и управлять событиями изменения размера.

https://blog.logrocket.com/how-to-use-the-resizeobserver-api-a-tutorial-with-examples/

10 советов по SEO для разработчиков

Приемы и трюки для улучшения SEO ваших приложений. Использование SSR, оптимизация метаданных, управление ленивой загрузкой, создание описательных URL и добавление структурированных данных.

https://thenewstack.io/top-10-javascript-seo-tricks-every-developer-should-know/

Современный CSS reset

Обычно базовые стили кочуют у разработчиков из проекта в проект. Что могло поменяться с течением времени? Josh Comeau делится своим набором стилей и тем, что в нем изменилось за последнее время.

https://www.joshwcomeau.com/css/custom-css-reset/

Разбираемся с процессом рендеринга в браузере

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

https://abhisaha.com/blog/exploring-browser-rendering-process