👩‍💻 Анонс 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 добавлена поддержка улучшенного «освещения на основе изображений» и «освещения области» для окружающего освещения и теней, дополнительный контроль над пайплайном рендеринга и новый облегчённый просмотрщик. Короткое демо смотрите выше ☝️

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

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

💬 Ну жиза ведь?

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

🐈‍⬛ Как взаимодействуют frontend и backend

Frontend и backend — это две основные части веб-приложений, которые взаимодействуют друг с другом для того, чтобы пользователи могли видеть и использовать сервисы.

➡️ Как это работает:

Представьте себе ресторан. Вы, как клиент, видите только то, что находитесь в зале (frontend). Вы можете выбрать блюда из меню и сделать заказ. Далее официант (клиентский запрос) передаёт этот заказ на кухню (backend). Кухня проверяет, есть ли все ингредиенты, готовит заказ и отправляет его обратно через официанта.

➡️ Пошаговое взаимодействие:

1. Запрос от клиента:

Когда вы, как пользователь, обращаетесь к веб-сайту, ваш браузер отправляет HTTP-запрос на сервер. Это может быть запрос данных, загрузка страницы, или выполнение какого-то действия (например, добавление товара в корзину).

2. Обработка запроса на сервере

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

3. Ответ от сервера

Сервер отправляет ответ в виде данных (например, в формате JSON или HTML), которые frontend отображает пользователю. Это может быть новая страница, сообщение об успешном выполнении действия или другие данные.

4. Передача данных по протоколу

Для обмена данными используется протокол HTTP или HTTPS. Для обеспечения безопасности передачи данных часто используется шифрование SSL/TLS.

🌀Frontend и backend работают в тесной связке, обеспечивая полноценную работу веб-приложений.

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

#буст