React 19 — новые хуки за 15 минут

Владилен Минин коротко демонстрирует useActionState, useOptimistic и улучшенный useDeferredValue, чтобы вы поняли, как ускорить UI без лишних перерендеров.

#react@tproger_web

Как сделать галерею обложек со Scroll-Driven анимацией

Отличная статья, в которой Эдди Османи показал, как сделать эффект галереи, как в iPod, используя современные возможности CSS. Подробнее: https://addyosmani.com/blog/coverflow/

#css

Относительные цвета в CSS

В CSS появился синтаксис, который позволяет динамически менять цвета в браузере без использования препроцессоров. Чтобы понять, как это работает, мы нашли интерактивное руководство, где все показано наглядно.

Посмотрите его и, возможно, вы сможете отказаться от препроцессоров в своих проектах:
https://ishadeed.com/article/css-relative-colors/

#css

Вот это действительно юзер френдли интерфейс

GSAP теперь доступна бесплатно

Популярная библиотека для создания анимаций в вебе получила очередное обновление и стала бесплатной для сообщества. Теперь и ядро либы, и все её платные плагины доступны каждому благодаря Webflow.

Все подробности в блоге команды GSAP: https://gsap.com/blog/3-13/

#новости #gsap

15 продвинутых приёмов TypeScript, о которых знают не все

Казалось бы, вы уверенно владеете TypeScript — аннотации, дженерики, утилитарные типы… Но язык прячет множество фишек, способных упростить код и сделать его безопаснее.

В этой статье вы найдете полезные трюки, которые пригодятся на продвинутых проектах.

#typescript@tproger_web #фронтенд@tproger_web

Расскажите про свой опыт поиска работы

Мы сейчас проводим исследование — хотим разобраться, как айтишники ищут работу: на что обращаете внимание в вакансии, что для вас точно красный флаг, а что — зеленая простыня. Мы хотим из первых уст узнать про все боли, подводные камни и нюансы рекрутинга в ИТ в 2025 году, поэтому просим вашей помощи — пройдите опрос, который займет у вас около 15 минут.

Давайте поможем компаниям и специалистам эффективнее и быстрее находить друг друга.

#опрос

curl-impersonate | Запросы к сайту, как от живого человека

Инструмент позволяет пользователям выполнять HTTP-запросы с использованием библиотеки curl, имитируя поведение различных браузеров и устройств. По заверениям создателей, умеет обходить ограничения и блокировщики веб-сайтов, направленные против автоматизированных систем.

Цена: бесплатно
Репозиторий проекта

@prog_tools

Container Queries: адаптивные компоненты без медиазапросов

Представьте карточку-виджет, которая сама подстраивается к ширине блоков сетки, не глядя на размеры экрана. Container Queries дают такую гибкость: элемент ориентируется на контейнер и меняет стили при порогах вроде @container (min-width: 40rem).

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

#фронтенд #css #адаптивность

Я: Зацени мои крутые проекты на GitHub

Также мои проекты:

Старожилы веб-разработки на месте? К вам вопрос

Споры про выбор инструмента для работы с фронтендом не утихают и никогда не утихнут. React, Vue, Svelte или какая-то ещё библиотека или фреймворк всегда будут иметь последователей.

Но что выбрать новичку? Вспомните себя. В начале пути столько всего нужно изучить и понять, что голова кружится. А тут ещё с каждой стороны летят противоположные советы и наставления.

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

#обсуждение

Милое объяснение оператора JOIN в SQL

Оператор JOIN в SQL — это инструмент, который помогает соединить данные из двух или более таблиц, если у них есть что-то общее, например, одинаковые значения в определённых столбцах (ID, названия и т. д.).

Держите ролик, где простыми словами объясняют работу этого оператора, а что самое главное — всё это наглядно и с котиками.

#sql #бд

Compound Component: избавляемся от props-drilling и получаем гибкий API

«Составной компонент» — паттерн, в котором родитель хранит состояние, а дочерние элементы свободно комбинируются без явной передачи пропов. В материале показан путь от обычного аккордеона с длинным списком props к контекст-ориентированной версии, где порядок и число подпроектов не ограничены. Плюсы, минусы, подводные камни — всё разобрано на живых примерах.

#фронтенд #react

Пятнашки на Vue

Полезный codepen-проект для тех, кто изучает Vue. Сможете не только изучить алгоритм игры, но и посмотреть, как это реализовано на фреймворке.

https://codepen.io/leemartin/pen/VwmdyNQ

#codepen #vue

Синтезатор в браузере: создаём музыкальный инструмент на Web Audio API

AudioContext, OscillatorNode и GainNode — всё, что нужно, чтобы браузер зазвучал. Этот пошаговый материал научит вас превращать вашу клавиатуру в мини-аккордеон: вы подготовите таблицу частот, подключите осцилляторы разной формы волн, пропишите обработчики keypress/keyup и настроите все в Svelte.

В итоге вы получите полноценный JavaScript-инструмент с открытым исходным кодом. Все подробности в статье.

#фронтенд #svelte

SOLID на фронтенд примерах

В этом плейлисте собраны 6 уроков по SOLID для фронтенд-разработчиков. Вы узнаете про принцип единственной ответственности, использование DIP, LSP, OCP и не только.

#solid@tproger_web #фронтенд@tproger_web

Матовое стекло следующего уровня с backdrop-filter в CSS

Для создания эффекта матового стекла на веб-сайте самый просто способ — использования filter: blur(). Но Джош Комо предлагает вариант с помощью backdrop-filter: blur(), ещё одного CSS-свойства, которое делает эффект круче.

В этой статье вы узнаете, чем оно отличается от классического свойства filter, как браузер вычисляет «то, что под элементом», какие эффекты (blur, brightness, contrast…) сочетаются между собой и где сегодня есть поддержка. В конце — интерактивная песочница: меняйте параметры и сразу видите результат.

#фронтенд #css

В гостях хорошо, а http://127.0.0.1 лучше

Без сборщика: подключаем JS-библиотеку напрямую

Чтобы притянуть стороннюю библиотеку в проект, не обязательно городить Webpack или Vite. Здесь разбираются три вида файлов, которые обычно лежат в npm-дистрибутиве: модули ES, «классические» глобальные переменные и CommonJS, способы находить нужный вариант в dist, писать компактный import map и подключать сложные модули даже без Node.

В довесок — чек-лист инструментов (esm.sh, download-esm, JSPM) и подсказки, как определить тип файла за пару секунд.

#фронтенд #javascript