Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
23.1K subscribers
2.22K photos
126 videos
38 files
4.65K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
🎭 Dev Memes: 1 апреля, а баги всё те же

Сегодня день официально разрешённого троллинга — и мы не могли пройти мимо. Собрали подборку мемов для Фронтендеров, которые вызывают лёгкое желание уволиться.

👉 Всё это — из нашего мемного канала «Библиотека IT-мемов»

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🫠 Причины и способы устранения утечек памяти в JavaScript

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

🔗 Читать статью
🔗 Зеркало
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
👾 Babylon.js 8.0 — один из самых мощных, красивых, простых и открытых 3D-движков веб-рендеринга на JavaScript

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

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

🐸 Библиотека фронтендера #буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🤖 Создание простого ragdoll симулятора

Пример промпта для Claude Sonnet 3.7 и Grok3:

Create a ragdoll physics simulation using Matter.js and HTML5 Canvas in JavaScript. The simulation features a stick-figure-like humanoid composed of rigid bodies connected by joints, standing on a flat surface. When a force is applied, the ragdoll falls, tumbles, and reacts realistically to gravity and obstacles. Implement mouse interactions to push the ragdoll, a reset button, and a slow-motion mode for detailed physics observation


⚡️ Как вам? Делитесь в комментариях👇

🐸 Библиотека фронтендера #буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🐈‍⬛ Как взаимодействуют frontend и backend

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
😎 «Вайб-кодинг»: почему доверить свой проект ИИ – это кринж

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

Что в статье:

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

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

😗 Почему проект, собранный ИИ, чаще всего выглядит как полуфабрикат.

Это не нытьё про «машины нас заменят», а здравый взгляд на технологии без розовых очков.

👉 Читайте статью, обсуждайте, спорьте
Please open Telegram to view this post
VIEW IN TELEGRAM
🚀 Быстрая очистка 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 — частая причина бага. Чисти в один клик или шорткат — и дебажь спокойно 🫡

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔄🚀 Express vs Fastify: какой фреймворк следует использовать в 2025 году

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

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

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

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

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

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

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

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

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
🥺 Фронтендеры, угадайте ситуацию

Подсказка: три слоя вёрстки, один клик — и всё летит в тартарары.

Что это за баг, который не правится ни руками, ни молитвой?

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🗞 Апдейт недели: что обновилось в мире

Собрали для вас ключевые новости, чтобы вы были в курсе самых важных событий:

➡️ Тенденции фронтенд-разработки в 2025 году: согласно статье на DEV Community, в 2025 году ожидаются значительные изменения в фронтенд-разработке, включая интеграцию искусственного интеллекта, использование no-code решений, улучшение пользовательского опыта и устойчивую разработку.

➡️ Обновления в Svelte и SvelteKit: в апреле 2025 года команда Svelte анонсировала несколько минорных релизов для SvelteKit и самого Svelte. Среди нововведений — опция idPrefix для функции render, улучшающая генерацию идентификаторов при наличии нескольких экземпляров Svelte на странице.

➡️ Конференция HolyJS 2025 Spring: 7–8 апреля в Москве и онлайн пройдет конференция HolyJS 2025 Spring, посвященная JavaScript.

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
🔍 Задачка на внимательность

На фото — код популярной функции debounce, которую часто просят реализовать на собеседованиях в 2025 году. Но в этом коде есть ошибки, которые могут привести к неожиданному поведению.

Твоя задача: найти и объяснить ошибки. Сколько багов ты насчитаешь 👀

Подсказка: подумай про замыкания, setTimeout, контекст вызова и потери данных.

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🟡🍰 Использование круговых диаграмм — это не конец света

Круговые диаграммы любят за простоту и визуальную красоту. Но в сообществе аналитиков и дизайнеров они считаются чуть ли не табу. Почему так — и стоит ли их совсем избегать?

➡️ В этой статье разбираемся — когда круговые диаграммы реально работают, а когда лучше заменить их на гистограмму или что-то поумнее.
📣 Программисты, нужен ваш совет

Пилим крутую подборку ноутов для кодеров в 2025-м и хотим собрать реальный фидбек от тех, кто в теме!

Какой ноут спасает вас в кодинге и почему?

Расскажите все:

Что за зверь (модель, начинка)

Где жмет и где радует в ежедневной работе

На какие фишки смотреть при выборе

Как вам с ним живется

Топовые советы попадут в нашу статью. Сделаем годный гайд, который реально поможет коллегам!

Делитесь в комментах ⬇️

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
Фронтендеры!

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

➡️Поддержать канал: https://yangx.top/boost/frontendproglib
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Метрики эффективности сотрудника

В каждой команде бывают специалисты, чья ценность не укладывается в привычные метрики продуктивности. Они редко в топе по количеству закрытых задач, но именно их вклад критически важен для общего результата.

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

Иногда стоит пересмотреть, как мы оцениваем эффективность. Потому что не все цифры отражают суть.

🔗 Подробности в статье

🐸 Библиотека джависта
Please open Telegram to view this post
VIEW IN TELEGRAM