Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js – Telegram

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

@frontendproglib

22.6K subscribers

2.4K photos

146 videos

38 files

4.8K links

Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4

About

Blog

Apps

Platform

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

22.6K subscribers

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

💧

📈

Как сделать гидратацию в React 19 по настоящему эффективной

До выхода React 19 процесс гидратации оставлял желать лучшего: проблемы с производительностью, избыточное выполнение JavaScript и задержки в интерактивности тормозили создание быстрых и отзывчивых приложений.

В статье рассказывается про то, как:

1️⃣ Новые подходы в React 19 изменяют процесс гидратации

2️⃣ Выборочная и прогрессивная гидратация позволяют ускорить взаимодействие с пользователем

3️⃣ Потоковый серверный рендеринг с Suspense снижает нагрузку на клиент

4️⃣Серверные компоненты устраняют необходимость в гидратации для статических частей интерфейса.

Как новые возможности React 19 помогут вам создавать быстрее загружающиеся и более отзывчивые приложения, читаем по ссылке ⬇️

Статья

🔗

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

Please open Telegram to view this post

VIEW IN TELEGRAM

❤9⚡2🔥2

12.8K views18:02

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

This media is not supported in your browser

VIEW IN TELEGRAM

💭 Документация у него в голове

🐸

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

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

Please open Telegram to view this post

VIEW IN TELEGRAM

😁20👍2

2.55K views09:00

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🐸

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

#междусобойчик

Please open Telegram to view this post

VIEW IN TELEGRAM

🥱3👍2🔥1

2.47K views13:01

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Твой выбор ⤵️

Anonymous Poll

🔥6👍1

608 voters2.69K views13:01

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Вот что тебе говорят боги сборки и ветра из продакшна (открывай одну картинку) 😰

🐸

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

#междусобойчик

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

😁14🔥2🥱2

3.1K views13:01

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🚬

TypeScript вне учебников: продвинутая подборка для тех, кто уже в теме

1️⃣

15 Advanced TypeScript Tips and Tricks You Might Not Know

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

2️⃣

Thoughts on State Management Libraries in the React Compiler Era

Обзор изменений в управлении состоянием с приходом React Compiler и как это влияет на необходимость использования сторонних библиотек.

3️⃣

Zod: TypeScript-first Schema Validation

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

🐸

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

#свежак

Please open Telegram to view this post

VIEW IN TELEGRAM

❤5

3.01K views13:00

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🌸

Вопросы с собеседований: что такое замыкания (closures)

Замыкание — это функция, которая «запоминает» свою лексическую среду, даже когда она выполняется за пределами этой среды. Замыкания позволяют функции доступ к переменным, которые были объявлены в её внешнем контексте.

На фото функция inner сохраняет ссылку на переменную count из функции outer, создавая замыкание.

🐸

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

#междусобойчик

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9❤3⚡1😢1

3.02K views07:04

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

😳

Топ-вакансий для фронтендеров за неделю

Frontend Developer — удаленка/Офис (Москва/Санкт-Петербург)

Frontend Developer (Vue.js) — от 250 000 ₽, удаленно (Москва)

Разработчик JS (Middle) — от 150 000 ₽ до 300 000 ₽, удаленно (Казань)

Frontend-разработчик — офис (Санкт-Петербург)

Frontend-разработчик — 180 000 - 190 000 ₽, удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

🐸

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

#свежак

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥3👍2👏1

2.88K views18:04

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🔧

Как устранить FOUC

FOUC (Flash of Unstyled Content) — это кратковременное отображение неоформленного HTML перед применением CSS, что может негативно сказаться на пользовательском опыте.

Почему возникает:

📍 Асинхронная загрузка стилей.

📍 Динамические изменения DOM через JavaScript до полной загрузки стилей.

📍 Использование async или defer при подключении скриптов, что может привести к несогласованности в порядке загрузки ресурсов.

Как устранить:

1️⃣ Предзагружаем критичные стили

<link rel="preload" href="/styles/main.css" as="style">

2️⃣ Встраиваем Critical CSS прямо в HTML

<style>
  body { margin: 0; font-family: system-ui; }
</style>

Таким образом, мы обеспечиваем мгновенное появление базового оформления без скачков.

3️⃣ Минимизируем блокировки рендера

• Добавляем defer к скриптам
• Переносим второстепенные стили вниз
• Избавляемся от лишних <link> в <head>

4️⃣ Оптимизируем изображения

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

5️⃣ Переходим на SSR

Используем серверный рендеринг (Next.js, Astro и др.), чтобы отправлять уже отрендеренную страницу, а не заставлять браузер гадать, как это должно выглядеть.

💡Следуя приведённым рекомендациям, вы сможете обеспечить плавное и профессиональное отображение вашего веб-приложения с самого начала.

🐸

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

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

❤11👍4🔥2

2.7K views07:03

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Когда сроки горят, а разработчиков не хватает

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

Решение проблемы — задействовать дополнительные ресурсы на аутсорсе или аутстаффе. Например, обратиться в Proglib. Да-да, мы запустили свою студию веб-разработки!

Что мы предлагаем:

• Опытные специалисты для аутстаффа (frontend, backend, DevOps, UI/UX, PM, BA)

• Полноценная разработка проектов под ключ

• Гибкое масштабирование команды под потребности клиента

• Прозрачная коммуникация и регулярная отчетность

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

Заполните форму, чтобы ускорить свою разработку 👉 https://forms.yandex.ru/u/67e548a4eb614622efa0bcb2/

👍5🥱5🔥1👏1

2.82K views12:00

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🚫💻 Топ-10 ошибок эволюции интернета: что бы разработчики удалили из современного веба

Сегодняшний интернет — это не только мемы и котики, но и автозапуск видео, всплывающие окна, перегруженный JavaScript, странные архитектурные решения прошлого.

В статье разбираем:

➡️ Какие элементы веба вызывают наибольшую боль у разработчиков

➡️ Почему соцсети, реклама и куки заслуживают изгнания

➡️ Как ошибки типа referer и злоупотребление WordPress превратились в технический долг

➡️ Что бы изменили в JavaScript, если бы можно было откатить всё назад

➡️ Идеи для нового, более логичного и безопасного интернета

Мечты о «перезапуске» веба с чистого листа — это не фантастика, а повод задуматься: а не пора ли нам пересмотреть старые решения?

🔗

Читаем статью по ссылке

🐸

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5🔥2

9K views18:02

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🔍

Инструмент недели: Lighthouse — карманный инспектор сайта

Если бы у сайтов был техосмотр — Lighthouse был бы тем самым инспектором с линейкой и скептическим выражением лица. Но вместо «у вас тормоза» он говорит «у вас LCP 4.5 сек».

Зачем нужен:

📍

Проверка производительности:

замеряет, насколько быстро твой сайт появляется, становится интерактивным и не убивает пользователя скелетонами на 10 секунд.

📍

SEO и доступность:

проверяет базовые требования поисковой оптимизации: наличие заголовков, мета-описания, канонических ссылок, индексации и пр.

📍

PWA-анализ:

для прогрессивных веб-приложений Lighthouse проводит полный аудит, включая работу оффлайн, наличие manifest.json и service worker.

📍

Профиль UX как на ладони:

проверяет безопасность, использование современных API, корректность HTTPS, ошибки в консоли и другие важные аспекты качества веб-приложения.

Как использовать:

1️⃣ Открываем сайт в Chrome, жмём F12 → вкладка Lighthouse

2️⃣ Настраиваем параметры: мобильный/десктоп, какие категории проверять

3️⃣ Жмём «Generate report» и наблюдаем, как твоё творение превращается в 4 цветных кружка

А если хочется как профи:

• Устанавливаем Lighthouse CLI:

npm install -g lighthouse

• И запускаем тест прямо из терминала:

lighthouse https://example.com --view

• Можно даже засунуть это в CI и отгонять плохие коммиты до релиза.

📍

Полезные материалы:

— Lighthouse Docs от Google
— Сравнение Lighthouse и PageSpeed Insights

🐸

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

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥9👍3⚡2

2.8K views07:02

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

This media is not supported in your browser

VIEW IN TELEGRAM

У кого не так, счастливые вы люди.. 😳

🐸

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

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5🔥1

2.79K views18:03

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🐏

Апрельские выпуски подкаста PodRocket

1️⃣

Put your database in the browser – с Ben Holmes

Бен Холмс из Warp рассказывает о local-first веб-приложениях — идее, где база данных живёт прямо в браузере.

➡️ Обсуждаются преимущества подхода (низкая задержка, автономность, скорость), технологии вроде SQLite в браузере, WebAssembly, IndexedDB, CRDTs и его собственный движок SimpleSyncEngine.

2️⃣

Ghostty – с Mitchell Hashimoto

Создатель HashiCorp представляет Ghostty — новый терминал, переосмысляющий классический UX.

➡️ Под капотом — libghosty, архитектура кроссплатформенная, с фичами вроде quake-style dropdown, ускоренной рендерингом и расширяемостью. Ghostty подаётся как терминал для современных текстовых интерфейсов.

3️⃣

Vite, frontend tooling & the future – с Evan You

Эван Ю (создатель Vue и Vite) обсуждает эволюцию фронтенд-инструментов: от Vite к VitePlus — новой унифицированной сборочной системе.

➡️ Поднимаются темы Nitro, мульти-рантайм, влияние ИИ и стремление упростить девелоперские пайплайны.

🐸

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

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

👏4❤2👍1👾1

2.81K viewsedited 07:00

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🦔

Лучшие материалы по фронтенду в одной подборке

Собрали топовые материалы, которые наши подписчики сохраняют чаще всего.

Эту подборку мы будем регулярно пополнять, поэтому сохраняйте тонну пользы, чтобы не потерять!

1. Как оживить веб-страницу: находки от автора курса по анимации

2. Робин Лорд создал интерактивную браузерную игру для изучения HTML и CSS

3. Селекторы CSS на практике

4. Визуализация JavaScript: Event Loop, Task Queue и Microtask Queue

5. Одна React-задача, демонстрирующая ключевые навыки на собеседовании

6. CSS-селектор, о котором вы могли не знать

7. React пора сдать в музей: почему популярный фреймворк устарел и чем его заменить

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4

2.86K views18:04

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🌸

WebGPU — графический апгрейд вашего фронтенда

Видели где-то упоминание WebGPU и думали: «Это вообще нужно?» Давайте разберёмся вместе — без скучных теорий, только самое важное и реальные кейсы.

Почему все говорят про WebGPU:

🐁WebGPU даёт браузеру почти тот же уровень доступа к GPU, что и нативным приложениям. Забудьте про огрехи WebGL — теперь можно рендерить сложные 3D-сцены, запускать ML-задачи и серьёзные физические симуляции прямо на клиенте.

Основные понятия, которые пригодятся

🔷 Буферы и шейдеры: поначалу звучит страшно, но на деле это просто набор инструкций для GPU.

🔷 Пайплайны и команды: полный контроль над каждым этапом рендеринга — никакой «чёрной магии».

С чего начать:

➡️

Библиотеки-обёртки:

— wgpu для Rust-энтузиастов

— Babylon.js с экспериментальной поддержкой WebGPU

— Трио Three.js + WebGPU-рендерер

➡️ Песочницы: запускайте примеры прямо в CodeSandbox или в официальных демках GPUWeb.

Реальные кейсы использования:

🔷 Интерактивные 3D-карты и инфографика

🔷 ML-инференс в браузере — без прокаченного бэкенда

🔷 Прототипы игр с плавной физикой и анимациями

Что вы уже пробовали на WebGPU? ✏️ Пишите в комментариях, скидывайте репозитории и гифки — давайте вместе поднимем уровень фронтенда!

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

🐸

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

#междусобойчик

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4👾2🔥1

2.85K viewsedited 20:01