45 шорткатов для VS Code

Улучшаем продуктивность при работе с VS Code (все, конечно, не запомните, но хоть какие-то из 45 вам приглянутся).

https://www.sitepoint.com/visual-studio-code-keyboard-shortcuts/

Релиз Storybook 8.2

Что нового: хуки, портативные стори, онбординг.

Подробнее по ссылке: https://storybook.js.org/blog/storybook-8-2/

Набор инструментов для веб разработки

Большая подборка инструментов для разработки, разбитая на категории: UI киты, библиотеки для анимации, расширения для Chrome, иконки и многое другое.

https://surffers.notion.site/surffers/The-Best-Web-Development-Tools-2cf90734ead54d748edaf706120728d8

True Myth

TS библиотека с type-safe обертками и утилитарными функциями для обработки ситуаций, когда у вас нет значений в переменной, и обработки успешных или ошибочных результатов выполнения.

https://github.com/true-myth/true-myth

Советы по CSS

Профессиональные советы как с популярными, так и с малоизвестными решениями по работе с CSS.

https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU

Что нового в ECMAScript 2024

▫️Улучшенная работа с unicode
▫️Atomics.waitAsync
▫️Расширяемые ArrayBuffer
▫️Promise.withResolvers

Подробнее:
https://pawelgrzybek.com/whats-new-in-ecmascript-2024/

Пишем в буфер обмена с помощью JS

Основы работы с Clipboard API и некоторые нюансы его использования.

https://frontendmasters.com/blog/writing-to-the-clipboard-in-javascript/

Настраиваем деплой приложений с Dokku

Dokku - это мини-Heroku, который можно установить на свой сервер и удобно деплоить приложения командой git push.
В статье — пошаговый туториал по установке, первоначальной настройке и конфигурации приложений для деплоя.

https://jem-space.ru/dokku-deploy/

10 консольных команд, необходимых для разработчика

Grep, cat, tail и ещё несколько команд, которые повышают удобство и скорость разработки.

https://www.trevorlasn.com/blog/10-essential-terminal-commands-every-developer-should-know

Кастомный слайдер с использованием API привязки позиционирования

Пошаговый туториал по созданию слайдера на основе современных фич CSS: Anchor Positioning API и Scroll-Driven Animation.

https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/

‼️Тест по React JS от OTUS

— Ответьте на 30 вопросов и проверьте, насколько хорошо вы знаете язык.
Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js по спец. цене!

👉ПРОЙТИ ТЕСТ - https://vk.cc/czSWZI

Курс доступен в рассрочку.

❇️ Пройдите тест и получите:
✔️ Живое общение с экспертами
✔️Получите видео-курс по Git в подарок
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+
✔️ Скидку на прохождение онлайн курса «React.js Developer»

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

CSS Grid Areas

Свежий взгляд на CSS grid template areas и как использовать их потенциал по максимуму. Интерактивное руководство.

https://ishadeed.com/article/css-grid-area/

Telegram Mini App. Как создать Web App с нуля

Туториал по созданию веб-приложения для Telegram и работе с Telegram API.

https://habr.com/ru/companies/amvera/articles/838180/

Мониторим показатели Web Vitals с web-vitals.js

Показатели CLS, INP и LCP теперь можно удобно отслеживать в консоли без необходимости запускать Lighthouse!

https://www.debugbear.com/blog/core-web-vitals-js

Консольные команды для чайников

Хотите быть адептом терминала, но не понимаете что делают те или иные команды?
Держите сайт, который помогает разобраться с консолью, объясняя, что делает команда и значение каждого флага или опции в ней.

https://explainshell.com/

Как оптимизировать ваше приложение еще до того как оно загрузилось?

О сетевых взаимодействиях, которые происходят во время запросов — какие и как их можно ускорить.

https://blog.sentry.io/how-to-make-your-web-page-faster-before-it-even-loads/

Диалоговое окно с анимацией на показ и скрытие

Простое демо с нативной поддержкой входных и выходных анимаций.

https://frontendmasters.com/blog/the-dialog-element-with-entry-and-exit-animations/

Объясняем, как работают генераторы в JS (сложно)

Глубокое погружение в одну из малоиспользуемых фич JS — генераторы.

https://www.reactsquad.io/blog/understanding-generators-in-javascript

Vue & Vite Updates

Доклад с VueConf US 2024

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

Sticky хедер + элементы на всю высоту: хитрая комбинация

Sticky-позиционирование не всегда надежное, и может быть нарушено многими факторами.
Вот небольшой разбор, как можно сделать его более стабильным, если вам нужно использовать разметку с заголовком и элементами на всю страницу.

https://www.smashingmagazine.com/2024/09/sticky-headers-full-height-elements-tricky-combination/