💡 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 работают в тесной связке, обеспечивая полноценную работу веб-приложений.

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

#буст

😎 «Вайб-кодинг»: почему доверить свой проект ИИ – это кринж

Новый тренд среди разработчиков — «вайб-кодинг». Это когда ты не продумываешь архитектуру, не пишешь руками, а просто даёшь задание ИИ и ждёшь, что он всё сам сделает. Быстро, магически… и с кучей подводных камней.
⠀
Что в статье:

😗 Как «вайб-кодинг» реально работает (или не работает);

😗 Какие ошибки делают даже самые продвинутые модели;

😗 Почему проект, собранный ИИ, чаще всего выглядит как полуфабрикат.
⠀
Это не нытьё про «машины нас заменят», а здравый взгляд на технологии без розовых очков.
⠀
👉 Читайте статью, обсуждайте, спорьте

🚀 Быстрая очистка localStorage: для тех, кто дебажит по 100 раз в день

Тестируешь авторизацию, сбрасываешь флаг «прошёл онбордин»— localStorage быстро забивается хламом. Вот как
чистить его без лишних кликов:

⏭ Через консоль

Универсальный способ для любого браузера:

localStorage.clear()

• Открой DevTools (F12)

• Перейди на вкладку Console

• Вбей команду — и всё, память чиста.

⏭ Chrome DevTools

• F12 → вкладка Application

• Слева: Local Storage → нужный домен

• ПКМ → Clear

⏭ Firefox DevTools

• F12 → вкладка Storage

• Local Storage → домен

• ПКМ → Delete All

⏭ Быстро с хоткеем (через расширение)

Если задолбался каждый раз лазить в DevTools — поставь Clear Local Storage

• По умолчанию:

Alt + Shift + L (Windows/Linux)
Cmd + Shift + L (Mac)

Грязный localStorage — частая причина бага. Чисти в один клик или шорткат — и дебажь спокойно 🫡

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

#буст

🔄🚀 Express vs Fastify: какой фреймворк следует использовать в 2025 году

В мире backend-разработки всё меняется, и то, что работало в 2015, может тормозить твой проект в 2025. Express уже давно стал классикой, но стоит ли держаться за него, когда на горизонте есть Fastify — молодой, быстрый и модульный?

➡️ Что в статье:

• Что такое Express и Fastify, в чём разница

• Какой фреймворк быстрее и почему

• Где проще настраивать архитектуру

• Что лучше подходит для масштабируемых проектов

• У кого сильнее сообщество и экосистема

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

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

🌟

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

#развлекалово