‼️Тест по 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/

Создаем React с нуля

Большая статья с собственной реализацией основных фич React: рендер, эффективное обновление DOM, хуки.

https://www.rob.directory/blog/react-from-scratch

Разбираемся с Record Type в TS

Создание, использование и отличие от Tuple.

https://www.sitepoint.com/typescript-record-type-comprehensive-guide/

Даты в JS скоро будут исправлены

Что не так с Date и как новый Temporal API упростит работу с датами в JS.

https://docs.timetime.in/blog/js-dates-finally-fixed/

Улучшаем производительность в аспекте шрифтов

Большое руководство по оптимизации загрузки и использованию шрифтов в веб-приложениях.

https://www.debugbear.com/blog/website-font-performance

CSS display: contents

Ахмад Шадид подробно рассказывает, что за новое свойство contents, как оно влияет на отображение содержимого и в каких случаях его удобно использовать.

https://ishadeed.com/article/display-contents/

Docker для начинающих

Быстрое введение за 1 час, для тех, кто еще не знаком с контейнеризацией.

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

Работа с буфером обмена

Как web clipboard сохраняет различные типы контента и как можно этим управлять.

https://alexharri.com/blog/clipboard

Next.js + Playwright. Как мы начали писать автотесты и что из этого вышло

Данила, фронтенд-тимлид компании KTS, делится опытом внедрения автотестов на одном из боевых проектов с NextJs 12: почему выбрали Playwright, детали разработки, интеграция с CI.

https://habr.com/ru/companies/kts/articles/843054/

Необычные приёмы отладки, которые браузер от вас скрывает

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

https://habr.com/ru/companies/ruvds/articles/842428/

Отправляем данные из приложения прямо в Google Sheet

Простая интеграция веб-приложений с Google Sheet без дополнительных прослоек.

https://dev.to/miracool/submitting-form-data-to-a-google-sheet-from-a-react-app-3o83