Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.8K subscribers
2.74K photos
187 videos
41 files
5.09K links
Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
📱 Как UI/UX заставляет скроллить часами

TikTok — это не просто платформа для видео, а настоящий мастер-класс по удержанию внимания.

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

🈁 Разбираем, как UX создаёт привычку и вовлекает пользователей, карточка за карточкой.

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

#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👏1
📞 Апдейты недели

На этой неделе официальных громких релизов почти нет, но есть несколько моментов, на которые стоит обратить внимание:

📪 Node.js v24 → Active LTS

♍️ Node.js 24, выпущенный в мае 2025, с 28 октября 2025 официально стал Active LTS.

♍️ Стабильная версия для серверной части и сборки фронтенд-приложений.

🔥 Разобраться глубже поможет курс «Архитектуры и шаблоны проектирования» (−40%)

📪 SurveyJS v2.3.13

♍️ Возможность задавать индивидуальные схемы нумерации вопросов для каждой страницы и динамических панелей.

♍️ Опция полностью убрать Property Grid из интерфейса Survey Creator (removeSidebar = true).

♍️ Обновления применимы для Angular, React, Vue.js и plain JS

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰5👍1🔥1
😎 WebAssembly под капотом

Что стоит знать о том, как бинарный формат превращается в машинный код и общается с JS.

WebAssembly: короткий обзор ассемблера для веба

Как устроен Wasm, чем отличается от JS и почему браузеры так его любят.

WebAssembly в 2025: зачем знать даже новичку

Актуальный взгляд на роль Wasm в экосистеме веба и его будущее.

Прогресс WebAssembly и будущее веба

Разбор внутренностей: компиляция через LLVM, оптимизации, сравнение с asm.js.

Постигаем WebAssembly, рисуя кривую дракона

Креативный разбор с визуализацией и кодом — идеально для практического понимания.

🎥 HolyJS 2024 — На чём сегодня писать для WebAssembly?

Доклад с примерами на Rust, Go и AssemblyScript.

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

#under_hood #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰6
🧪 Unit-тесты vs QA протестирует

Когда ответственность встречается с делегированием — рождается главный миф разработки.

🟣 Unit-тесты

— Баги находятся на этапе разработки
— Быстрый feedback loop
— Рефакторинг без страха
— Разработчик = ответственность за качество

🟣 QA протестирует

— Быстрее пишу код без тестов
— QA всё равно найдёт баги
— "Я же не тестировщик"
— Баги уходят в прод, но это не моя вина

💭 А в вашей компании есть правило «нет тестов — нет мержа»? Или «работает — не трогай»?

Голосуем реакциями:

👍 — Пишу unit-тесты перед коммитом
❤️ — Тесты есть, но не всегда
🤔 — QA справится, они для этого есть
🔥 — Продакшн и есть тестовая среда

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

#code_battle
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥8🤔84🥰1
🖍 Все используют em, но пора перейти на lh

Обычно мы пишем:


p + p { margin-top: 1em; }


Но em завязан на размер шрифта, а не на высоту строки.
В итоге при изменении line-height вертикальный ритм ломается.

💡 Решение — lh и rlh:


p + p {
margin-block-start: 1lh;
}


1lh = текущая высота строки элемента.

1rlh = высота строки корневого элемента (root line height).

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

🔤 Поддержка: Chrome 108+, Safari 16.4+, Firefox 111+

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

#readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
10🥰3🔥2
🌪 JS, который ломает мозг #1

Кажется, const защищает данные. Но это не так.

🔶 Что делает const

Фиксирует ссылку на значение, а не само значение. По спецификации (ECMAScript §13.3.1.1), переменная, объявленная через const, не может быть переназначена.


const user = { name: "Alex" };
user = {}; // TypeError


🔶 Но можно менять внутренности объекта

user.name = "Bob"; // работает


Сам объект остаётся в памяти по той же ссылке.

🔶 Как зафиксировать структуру

Object.freeze(user);
user.name = "Carol"; // не изменится


const защищает ссылку, а не содержимое.
Чтобы зафиксировать данные — используйте Object.freeze() или иммутабельные копии ({...obj}).

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

#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱87🥰2👍1
💡 JavaScript-разминка

Что вернёт код на картинке выше ⬆️

Массив вроде есть, но что хранится в array[0]…

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

#code_battle
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱11🥰5👍1
⚙️ React Compiler теперь можно выключить прямо в функции

Новая директива — "use no memo" — отключает оптимизацию React Compiler.

Полезно, если что-то ломается после включения компилятора или нужно быстро изолировать баг.


function MyComponent() {
"use no memo";
// ...
}


Как работает:

— Полностью исключает функцию из оптимизации.

— Срабатывает даже при режиме all.

— Аналог — "use no forget".

Важно:

— Должна стоять первой в функции.

— Только одинарные или двойные кавычки (не бэктики).

— Временное решение, не постоянный паттерн.

А вы уже пробовали React Compiler:

❤️ — Да, работает быстро
👍 — Пока изучаю

🔗 Ссылка на документацию

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

#readme #react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍95😢3🥰2🥱2
⚡️ Next.js вернул молниеносную клиентскую навигацию

После выхода React Server Components в Next 15 разработчики жаловались — клиентская навигация стала ощущаться тяжелее.

Теперь Vercel исправил это: в игру вступили Cache Components — новая система частичного предрендера и умного префетча.

➡️ В карточках — что именно изменилось под капотом и как Next снова стал “snappy”.

📎 Оригинал статьи

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

#under_hood #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4🥰2😢1
This media is not supported in your browser
VIEW IN TELEGRAM
📱 Chrome теперь сам переводит интерфейсы

Google тихо вкатил в Chrome 143 локальные AI-возможности: теперь браузер умеет распознавать язык и переводить текст прямо на устройстве, без внешних сервисов.

🔤 Всё — на Next.js 16 + React 19, без единого запроса к серверу.

🔥 Как это работает:

— LanguageDetector мгновенно определяет язык текста локально.

— Translator создаёт пару “source → target” и переводит прямо в браузере.

— При первом запуске модель (1–2 ГБ) скачивается один раз и кешируется.

— Весь процесс — полностью приватный и офлайн.

📎 Читать подробнее

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥9👍42
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Мок-бэкенд за 30 секунд

Когда фронт уже готов, а сервера ещё нет — выручает n:point. Он работает как мок-бэкенд: сохраняете JSON, получаете API.

🆚 Что умеет:

— Принимает JSON и выдаёт ссылку как API

— Проверяет структуру и поддерживает CORS

— Позволяет менять данные и работать вместе

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


fetch('https://api.npoint.io/your-id')
.then(res => res.json())
.then(data => console.log(data))


🆚 Когда спасает:

— Прототипы, демо, pet-проекты
— Моки и конфиги, когда Firebase — перебор

💡 Меняйте данные в браузере — фронт подхватит обновления.

📎 Ссылка на инструмент

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥62👍2
🔥 Четыре способа «нарисовать» страницу

Каждый влияет на скорость, SEO и даже на то, видит ли пользователь хоть что-то, пока грузится JS.

➡️ В одной серии карточек мы разложили всё по полочкам:

— как браузер решает, кто рендерит страницу — он или сервер;

— почему CSR «просыпается» с белого экрана;

— где SSG выигрывает даже у SSR;

— и как Next.js позволяет комбинировать стратегии в одном проекте.

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

#blueprint
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM