FrontEndDev

CSS content-visibility

Одна из оптимизаций производительности, которую вы, возможно, упустили.

https://www.trevorlasn.com/blog/css-content-visibility

3 наиболее необходимых CSS фич для таблиц

Дарин Сеннефф рассказывает о UX таблиц с точки зрения стилизации и тех фичах, которых ему не хватает в нативной реализации таблиц, предлагая свои решения для этого.

https://www.darins.page/articles/my-3-most-wanted-css-table-features

От медленного к быстрому

Используем JS Performance API для анализа и оптимизации веб приложений.

https://www.trevorlasn.com/blog/performance-web-api-in-javascript

Preload, prefetch, preconnect...

Атрибуты загрузки ресурсов: как они работают и как влияют на скорость работы и загрузки приложений.

https://habr.com/ru/articles/445264/

Импортируем JS библиотеки без сборщиков

Джулия Эванс рассказывает о том, как в современной экосистеме фронтенд разработки обойтись без сборщиков (если у вас небольшой проект/вам лень/вы любите трудности и не любите сон): 3 типа файлов, которые предлагают вам библиотеки и как с ними работать.

https://jvns.ca/blog/2024/11/18/how-to-import-a-javascript-library/

Копаем глубже в Feature-Sliced Design

Александр Моргунов кратко разбирает FSD, делится опытом его использования и раскрывает некоторые моменты, не описанные в его документации. А также отвечает на главный вопрос: нужен вам FSD или нет?

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

Адвент календарь по TS

25 задачек по TypeScript чтобы скрасить ваш декабрь 😁

https://www.adventofts.com/

Эксперимент: автоматический запуск View Transitions с помощью MutationObserver

Интересный подход и реализация переходов для создания более приятного и плавного интерфейса.

https://www.bram.us/2024/11/25/experiment-automatically-triggered-view-transitions-with-mutationobserver

Стилизуем рамки элементов с background-clip: border-area

Как работает новое свойство background-clip: border-area, доступное пока только в Safari 18.2, и чем оно отличает от border-image.

https://webkit.org/blog/16214/background-clip-border-area/

Введение в TanStack Router

Посмотрим на что способен TanStack Router и его основные фичи. Простые примеры: объявление роутов, работа с параметрами url, вложенные лейауты.

https://frontendmasters.com/blog/introducing-tanstack-router/

Ищем перфоманс проблемы в React приложениях

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

https://github.com/aidenybai/react-scan#readme

Новый релиз кандидат - TypeScript 5.7

Улучшенная работа со Strict Null Checks, улучшения безопасности типов при работе с enum, добавлен утилитарный тип NoInfer и еще несколько улучшений новой версии TS

https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/

Генерируем моковые запросы/ответы

Mocky — онлайн сервис для создания моков. Настраиваете параметры ответа, в том числе и заголовки и получаете url по которому можно делать запросы. Удобно, если не настроены локальные моки и нужно быстро что-то проверить.

https://designer.mocky.io/

Анимация добавления в корзину

Очередной необычный эффект для сайта с товарами.

Github | Демо

https://tympanus.net/codrops/2024/11/21/from-product-to-cart-adding-guiding-animations-to-the-shopping-experience/

Использование ссылок с атрибутом ping

Новые возможности в привычных элементах — <a ping="url">, или как трекать действия пользователей без счетчиков.

https://jsdev.space/html-ping-attribute/

Пишем свой аккордеон (музыкальный инструмент) на JavaScript

О том, как работать с WebAudio API и создавать звуки программно на JS.

https://www.taniarascia.com/musical-instrument-web-audio-api/

Как на самом деле работает position: sticky в CSS

Разбираемся, почему часто position: sticky работает не так, как ожидает разработчик.

https://web-standards.ru/articles/position-sticky/

Лучшие практики по работе с Context API в React приложении

Михаил Непомнящий рассказывает как оптимизировать React приложение при работе с Context API.

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

Простое введение в Container Queries

Прошло уже несколько лет с тех пор, как Container Queries стали доступны в браузерах. Но мало кто их использует в своей разработке, потому что они не так просты, как Media Queries. Разберем их по полочкам, чтобы вы могли смело использовать их в работе.

https://www.joshwcomeau.com/css/container-queries-introduction/

15 советов и трюков по TypeScript

Небольшая подборка примеров продвинутого использования TS.

https://dev.to/mattlewandowski93/15-advanced-typescript-tips-and-tricks-you-might-not-know-12kk