⚛️ Простые приемы для фронтенд-разработчика

React.js — мощная библиотека для создания пользовательских интерфейсов, но многие начинающие разработчики не используют его на полную силу. В этой статье разберем 5 полезных хаков, которые помогут вам писать более чистый, производительный и удобный в поддержке код.

🔗 Читать статью
🔗 Зеркало

🐸 Библиотека фронтендера #свежак

👩‍💻 Как добавить типы в конфигурации

Typeconf — инструмент для типизированной работы с конфигурациями, который позволяет:

🔵 Определять схему конфигурации с помощью TypeSpec.
🔵 Устанавливать значения конфигурации в TypeScript и генерировать валидный JSON-файл, готовый к использованию в сервисе.
🔵 На стороне сервиса автоматически получать типизированный интерфейс конфигурации, чтобы исключить ошибки при чтении JSON.

🔥 Зачем использовать Typeconf?

🔵 Конфигурации как код — управление через TypeScript.
🔵 Удобное повторное использование конфигов между проектами (через NPM).
🔵 Идеально подходит для CI/CD, pre-commit хуков и других автоматизированных процессов.
🔵 Прост в интеграции — можно внедрить в существующую кодовую базу.

🐸 Библиотека фронтендера #свежак

💡 Две строки CSS, которые сделают любой блочный элемент изменяемым по размеру

С помощью всего двух CSS-свойств — resize и overflow — можно позволить пользователю изменять размер (ширину/высоту) любого блочного элемента на странице:

p, div, th {
  resize: horizontal;  /* или vertical, both, none */
  overflow: auto;       /* важно: не должно быть visible */
}

🔗 Источник

🐸 Библиотека фронтендера #буст

👩‍💻 Анонс Motion для Vue

Motion — популярная и мощная библиотека анимации, которая чаще всего ассоциируется с React, теперь появилась новая версия Vue, и ее функциональность тоже полностью реализована.

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

<template>
  <motion.div
    :initial="{ opacity: 0, scale: 0 }"
    :animate="{ opacity: 1, scale: 1 }"
  />
</template>

🔗 Подробнее

🐸 Библиотека фронтендера #буст

👨🏻‍💻 Исследование IT-аудитории Proglib 2025: зарплаты, технологии, профессии

Кто такой современный разработчик в 2025 году? Актуальное исследование портрета IT-специалистов: зарплаты, технологии, специализации и демография разработчиков.

➡️ Вся статистика и детали — здесь

Библиотека программиста #свежак

💬 Единоборства? Ваши варианты 👇

🐸 Библиотека фронтендера #междусобойчик

🎧 467-й выпуск подкаста «Веб-стандарты»

Кого слушаем: Юлия Миоцен, Никита Дубко, Алексей Симоненко, Вадим Макеев.

⏱️ Таймкоды:

00:01:00 Дэшборд веб-платформы
00:11:54 Бэкпорт require(esm) в Node.js 20
00:31:26 Рамки в сетках
00:55:47 Всего 14 SVG-фильтров
01:17:33 Styled-components всё
01:37:31 Подчёркивание ссылок
01:58:40 Ответы на вопросы

▶️ Сайт подкаста

🐸 Библиотека фронтендера #буст

💡 Copy styles в действии

С помощью данной фичи Chrome DevTools можно быстро скопировать все CSS-стили (включая inline, external, inherited), применённые к конкретному HTML-элементу.

🔗 Источник

🐸 Библиотека фронтендера #буст

💬 Нет, ну а как еще подтвердить?

🐸 Библиотека фронтендера #развлекалово

TypeScript 🆚 JavaScript

Еще в 2023 году вышла статья Ditching TypeScript for JavaScript, где автор делится опытом отказа от TS в пользу JS. Он утверждает, что TypeScript решает проблемы, которых у него никогда не было, а в реальности часто усложняет процесс разработки — особенно в маленьких командах или библиотеках.

💬 А что вы думаете по этому поводу?

🐸 Библиотека фронтендера #междусобойчик

🔥 Дайджест новостей за неделю: свежие анонсы и ключевые обновления во фронтенд-разработке

⭕️ Элемент <select> теперь можно настраивать с помощью CSS: теперь есть доступный стандартизированный способ создания настраиваемых элементов <select> — благодаря appearance: base-select.

⭕️ Поддержка логических сокращений в CSS: рабочая группа CSS недавно решила добавить сокращение для установки ширины и высоты элемента.

⭕️ Оформление пробелов: новый способ рисования разделителей в CSS. Kevin Babbitt, Principal Software Engineer, объясняет принципы оформления пробелов в CSS и представляет новое предложение, над которым работает команда для добавления и расширения возможностей тонкой настройки оформления пробелов.

⭕️ Fancy Components: растущая библиотека готовых к использованию анимированных компонентов React — включает в себя множество компонентов для создания различных текстовых анимаций, а также компоненты для фона, анимации, связанной с физикой, SVG-фильтры и многое другое.

⭕️ Вот что нового в WebGPU в Chrome 135, включая экспериментальное тестирование WebXR.

⭕️ Сравните, как ведущие мировые сайты в различных нишах ранжируются по показателям производительности Core Web Vitals.

⭕️ Если вам когда-нибудь понадобится вдохновение в области типографики, Fonts In Use — хороший архив с примерами использования в реальном мире.

⭕️ Parvus 3.0 — доступный лайтбокс без зависимостей. Пример на CodePen.

🐸 Библиотека фронтендера #свежак

💡 Простая шпаргалка для фронтенд-разработчика

Object.freeze — метод JavaScript, который возвращает объект с readonly свойствами в TypeScript.

as const — полностью фича TypeScript, которая позволяет добиться глубокой неизменяемости через проверку типов (без семантики на уровне выполнения).

🔗 Источник

🐸 Библиотека фронтендера #буст

🫠 Причины и способы устранения утечек памяти в JavaScript

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

🔗 Читать статью
🔗 Зеркало

👾 Babylon.js 8.0 — один из самых мощных, красивых, простых и открытых 3D-движков веб-рендеринга на JavaScript

В версии 8.0 добавлена поддержка улучшенного «освещения на основе изображений» и «освещения области» для окружающего освещения и теней, дополнительный контроль над пайплайном рендеринга и новый облегчённый просмотрщик. Короткое демо смотрите выше ☝️

🔗 Читать анонс

🐸 Библиотека фронтендера #буст