FrontEndDev

Ускоряем разметку - Emmet для React

Смотрим как встроенный помощник Emmet помогает быстрее писать разметку, будь то html или jsx в React.

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

MutationObserver для CSS

@bramus/style-observer позволяет повесить JS коллбек на изменение CSS свойств

https://www.bram.us/2024/08/31/introducing-bramus-style-observer-a-mutationobserver-for-css/

Text Diff на JavaScript

Простой инструмент для определения различий между строками, реализованный на JS

Демо | Github

Многопоточное программирование на Node.js с использованием Atomics

Павел Романов делится нюансами использования памяти при работе с worker_threads, и почему стоит использовать Atomics для более предсказуемых результатов.

https://pavel-romanov.com/multithreading-in-nodejs-using-atomics-for-safe-shared-memory-operations

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

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

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

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

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

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

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

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

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

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

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

https://alexharri.com/blog/clipboard

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

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

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

CSS display: contents

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vue & Vite Updates

Доклад с VueConf US 2024

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

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

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

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

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

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

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

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

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

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

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

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

https://explainshell.com/