Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
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
加入频道
Что выведет этот код?

💡 Подсказка:

Обратите внимание на тип значения внутри условия if и на то, существует ли переменная f вне тела условия.
Здесь используется функциональное выражение в if, а не вызов функции.

Правильный ответ:

Этот код выведет «1undefined».
В условном операторе мы описываем пустую функцию — function f() {}. С описанием всё в порядке, и функция определена корректно, поэтому мы получаем true, а значит — переходим к тому, что делает условный оператор. А вот там уже мы пытаемся получить тип объекта f, но проблема в том, что он определён в условии и не виден внутри фигурных скобок. Его область видимости — условие, которое мы уже проверили, и дальше эта функция нигде не видна, поэтому к единице добавляется сообщение, что переменная не определена.


👍 — если решил/а задачу правильно
🌚 — узнал/а новое

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🌚18👍11👏2🤔1
🔥 Конкурс: 30 000 ₽ за самую смешную IT-новость

Напоминаем о конкурсе «Библиотеки программиста»: напишите самую смешную версию реальной новости про технологии.

👾 Правила просты:
1. Берете настоящую новость из мира технологий.
2. Переписываете ее так, чтобы смеялись все.
3. Получаете деньги и славу.

🎁 Призы:
- 1 место: 30 000 ₽ + статус ведущего нового юмористического IT-канала
- 2 и 3 место: по 5 000 ₽ + вечный почет в IT-сообществе

🏆 Как будем оценивать:
Мы выложим новости всех участников в одном из наших телеграм-каналов. Те новости, которые наберут больше всего охвата, войдут в шорт-лист. Из шорт-листа подписчики и жюри выберут победителя.

📅 Сроки: прием новостей до 11 мая включительно

Для участия отправьте свою смешную новость в гугл-форму: https://forms.gle/6YShjgfiycfJ53LX8

Осталась неделя — ждем ваших новостей!
🥱1
🐹 Топ-вакансий для фронтендеров за неделю

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

Разработчик интерфейсов (Видеопоиск) — 250 000 —‍ 380 000 ₽, офис/гибрид (Москва/Санкт-Петербург)

Middle Backend/Full Stack JavaScript Developer — удаленно (США/Канада)

Middle Frontend-разработчик (React, Next.js) — от 150 000 до 250 000 ₽, офис (Тамбов)

Frontend Vue & Developer Middle++ — от 2000 до 2500 $, удаленно (ОАЭ)

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

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
🎮 Код из книги: Управление состоянием с помощью Signals в Angular

Проблема: В современных Angular-приложениях управление состоянием часто становится сложным и трудоёмким, особенно когда используются различные подходы, такие как NgRx или манипуляции с обычными переменными. Это может привести к трудностям в отслеживании изменений состояния и взаимодействии между компонентами.

Решение: Использование Signals — нового инструмента для управления состоянием, который упрощает реактивное программирование в Angular и улучшает производительность. Signals обеспечивают прямое отслеживание изменений состояния, что делает код более читаемым и эффективным.

Пример кода для простого счётчика с использованием Signals:


import { signal } from '@angular/core';

export const counterSignal = signal(0);

export function incrementCounter() {
counterSignal.update(count => count + 1);
}

export function decrementCounter() {
counterSignal.update(count => count - 1);
}


Преимущества:

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

➡️ Еще больше полезных книг — в нашем канале @progbook

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥1👏1
🚀 Bun 1.1 — самая быстрая среда для JavaScript

Альтернатива Node.js получила масштабное обновление:

— Теперь с поддержкой Windows

— bun serve стабилен — встроенный HTTP-сервер без Express

— Пакеты ставятся мгновенно: bun install быстрее npm в 30x

— Совместимость с Node API 95%+

— Встроенный bun test и JSX/TSX без конфигурации

В 2–3 раза быстрее Node.js по большинству метрик. Подходит для CI, SSR, микросервисов и фронта.

Установить можно через терминал:

curl -fsSL https://bun.sh/install | bash


🔗 Читать подробнее в официальном блоге

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🤔52
📌 Команда дня: animation-composition

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

Свойство animation-composition решает это:


.element {
animation: fade 2s, slide 2s;
animation-composition: add;
}


💡 Теперь fade и slide накладываются друг на друга, а не заменяют.

📍 Для чего это:

Чтобы не объединять всё в один @keyframes, не городить JS, и не терять голову от конфликтов.

Работает в Chrome, Firefox, и постепенно внедряется в остальное.

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18👏2
😬 Чек-лист безопасного рефакторинга

1️⃣ Оцените целесообразность:

• Чётко определите цель: зачем вы делаете рефакторинг?

• Оцените риски и возможные последствия

• Убедитесь, что изменения оправданы с точки зрения бизнеса

2️⃣ Изолируйте изменения:

• Не смешивайте рефакторинг с новой функциональностью

• Делайте маленькие и атомарные изменения

• Проводите отдельные код-ревью для каждого типа правок

3️⃣ Обеспечьте защиту тестами:

• Покройте ключевые сценарии интеграционными тестами

• Тесты должны проверять поведение, а не реализацию

• Убедитесь, что тесты проходят до и после изменений

4️⃣ Проверьте результат вручную:

• Обязательно визуально проверьте, что всё работает корректно

• Убедитесь, что поведение приложения не изменилось

5️⃣ Не надейтесь только на QA:

• Ручное тестирование не заменяет разработческую ответственность

• Проверяйте критичные участки лично

6️⃣ Избегайте масштабных коммитов:

• Разбивайте изменения на логически завершённые части

• Изменения должны быть понятны и легко отслеживаемы

7️⃣ Планируйте заранее:

• Трезво оцените объём и влияние работ

• Определите, какие участки кода требуют внимания в первую очередь

🔗 Источник

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍64🔥1
Вопросы подписчиков: какие инструменты использовать для бенчмаркинга JavaScript-кода

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

Вот что он пишет:

«Я хочу сравнить производительность разных реализаций в JavaScript. Какие инструменты для бенчмаркинга вы можете посоветовать? Что реально помогает понять, какой код работает быстрее?»


Что мы советуем:

📍 Для микротестов — используйте Benchmark.js или jsBench me.
📍 Для реального кода — performance now() в браузере и perf_hooks в Nodejs.

Важно: не увлекайтесь синтетикой, тестируйте на реальных сценариях.

💡 Какие бенчмаркинг-инструменты вы используете в своей практике? Делитесь в комментариях!

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

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍4🔥3
💡 Tier List технологий фронтенда — что выбрать сегодня и не пожалеть завтра

Кажется, все уже что-то выбирают: одни бегут за хайпом, другие держатся за проверенное. Но где середина? Это видео — попытка расставить всё по местам.

Что в видео:

📍 React, Vue, Svelte, Qwik, Solid.js, Astro, Next.js, Remix, Vite, Webpack и другие

📍 Дается оценка по критериям: актуальность, перспективы, применимость в проде

📍 Обсуждаются реальные тренды 2025 года и что из них стоит внимания

📍 В итоге формируется Tier List — от «обязательных» до «можно забыть»

🔗 Смотреть на YouTube

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥3
🧤 Грин-флаги в вакансиях: что отличает хорошего работодателя

Фронтендерам знакома боль: вакансии с мутными обязанностями, отсутствующим стеком и «гибким графиком», который на деле оборачивается круглосуточной доступностью.

В статье:

📍 Как распознать нормальную вакансию по формулировкам

📍 Что говорит о зрелости компании: от стажировки до собеседования

📍 Какие детали в описании стека и обязанностей — тревожный звоночек

📍 Почему четкость условий — не роскошь, а базовый грин-флаг

🔗 Читать на Proglib

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10😁5
🤯 Верстай, но с чувством вкуса: фронтендер или недодизайнер

«Фронтендер, не различающий padding и white space, — это как водитель автобуса, который путает педали. Вроде едет, но лучше бы не садился.»


Почему он должен шарить в дизайне:

🔘 Он ближе всех к пользователю. Если фронтенд — это лицо продукта, то он — его визажист.

🔘 Макет — это теория, браузер — практика. И только фронтендер видит, где фантазия дизайнера не выдерживает реальности DOM’а.

🔘 Чем меньше «просто сверстал», и больше подумал — тем меньше фидбэка и головной боли.

Почему он не обязан быть дизайнером:

Вы фронтендер, а не «один в поле воин». У вас уже есть JavaScript, сборка, баги, архитектура, ревью, дедлайны, CI/CD.

У каждого своя роль. Если дизайнер косячит, не значит, что ты — супергерой с Figma в обтягивающем костюме.

Настоящий UX — это ресёрчи, интервью, тесты. А не «давай кнопку синей сделаем, потому что красивее»

Фронтендер — это интерфейсный инженер или дизайнер по принуждению? Нужно ли уметь в Figma — или pull request важнее, чем композиция и контраст?

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱7👍2🔥1
💡 Что нового в веб-разработке: полезные техники и фичи HTML и CSS

📍 7 продвинутых HTML-трюков для улучшения веб-разработки

Наглядные примеры полезных элементов (<figure>, <details>, <dialog> и др.), повышающих семантику и интерактивность.

📍 Коллекция HTML/CSS лайфхаков

Советы по типографике, кликабельности, виртуальным клавиатурам и адаптивности интерфейсов.

📍 HTML и CSS ошибки, влияющие на доступность

Краткий гид по исправлению типовых недочётов, влияющих на восприятие контента пользователями с особыми потребностями.

📍 Магия CSS на практике: советы по вёрстке от гика

Полезные трюки: inset, стилизация без +, улучшение медиа-запросов и кнопок.

📍 CSS в 2025: какие фишки теперь доступны

Актуальные нововведения: вложенность, :user-valid, balance, расширенные возможности форматирования.

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
🔍 Пишем функцию для поиска анаграмм

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

💡 Уточнения:

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

— Возвращаемое значение — true или false.

Примеры:

📍 "Listen" и "Silent" → true

📍 "Astronomer" и "Moon starer" → true

📍 "OpenAI" и "iPenAO" → true

📍 "Example" и "Samples" → false

Пишите своё решение в комментариях ✏️

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
👚 Топ-вакансий для фронтендеров за неделю

Разработчик Javascript — от 150 000 ₽, удаленно (Москва)

Frontend developer (React) — от 180 000 до 250 000 ₽, удаленно (Москва)

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

Senior Frontend Developer — 4 200 —‍ 6 000 $, удаленно/помощь с релокацией (Грузия)

Frontend-developer — 120 000 - 200 000 ₽, удаленно (Москва)

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

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
🎮 Код из книги: Тестирование Angular-компонентов с использованием Jasmine и Karma

Проблема: при разработке Angular-приложений важно обеспечить высокое качество кода и стабильность функционала. Отсутствие автоматизированных тестов может привести к увеличению количества ошибок и снижению доверия к продукту.

Решение: в книге Mastering Angular Test-Driven Development автор предлагает внедрить практики тестирования с использованием Jasmine и Karma.

Пример теста для компонента PercentPipe, который форматирует числа в проценты:
import { PercentPipe } from './percent.pipe';

describe('PercentPipe', () => {
it('should create an instance', () => {
const pipe = new PercentPipe();
expect(pipe).toBeTruthy();
});
});


Преимущества:


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

➡️ Еще больше полезных книг — в нашем канале @progbook

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3👍1
🚀 Новые возможности в React: View Transitions и Activity API

Инструменты предназначены для улучшения взаимодействия с пользователем и оптимизации производительности веб-приложений.

🔄 View Transitions

Этот компонент упрощает добавление анимаций при изменении состояния UI. Он автоматически определяет, какие части интерфейса должны быть анимированы, и применяет соответствующие CSS-анимations.

Пример использования:


<ViewTransition>
<div>Контент с анимацией</div>
</ViewTransition>


Триггеры анимации:

startTransition(() => setState(...))
useDeferredValue(value)
<Suspense fallback={<Fallback />}>...</Suspense>


Настройка анимации:


::view-transition-old(*) {
animation: 300ms ease-out fade-out;
}
::view-transition-new(*) {
animation: 300ms ease-in fade-in;
}


Эти анимации используют новый API startViewTransition, доступный в большинстве современных браузеров.

🔎 Activity API

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

Пример использования:
анимации:

startTransition(() => setState(...))
useDeferredValue


Это позволяет React эффективно управлять рендерингом и минимизировать ненужные обновления DOM.

⚠️ Функции находятся на стадии эксперимента, и финальный API может измениться.

🔗 Источник

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4
👓 Как ускорить сборку с Webpack

Когда проект растёт, время сборки может стать серьёзной проблемой. Рассмотрим несколько методов для ускорения процесса с помощью Webpack.

1️⃣ Persistent Caching

Использование файлового кэша позволяет избегать повторной сборки неизменённых модулей.

Как настроить:
cache: {
type: 'filesystem',
}
➡️ WebPack не пересобирает всё с нуля, а использует кэшированные данные, что сокращает время сборки.


2️⃣ Tree Shaking

Удаление неиспользуемого кода, чтобы уменьшить размер бандла.

Как настроить:
optimization: {
usedExports: true,
}

➡️ Webpack отслеживает, какие части кода не используются, и исключает их из финальной сборки.

3️⃣ Module Federation

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

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

Как настроить:
cache: {
type: 'filesystem',
}
➡️
 WebPack не 

➡️ Модульная загрузка помогает минимизировать размер бандлов и ускоряет загрузку.

4️⃣ Минификация с Terser

Минификация и сжатие JavaScript-кода для уменьшения его размера.

Как настроить:
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
}

➡️ Сжатие кода уменьшает его объём и ускоряет загрузку.

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6👏1
Как сгенерировать пользовательский путь из PRD

Один из эффективных подходов — использование ChatGPT для генерации пользовательских путей на основе документации продукта.

Промпт:

Generate a user flow based on this PRD. Describe the pages, features, and major states.

Почему это полезно:

➡️ Позволяет быстро перейти от концепции к визуальному представлению интерфейса.

➡️ Помогает организовать мысли и определить основные компоненты интерфейса.

➡️ Подходит для различных проектов и технологий.

🔗 Этот подход был подробно описан в обсуждении на Reddit, где участники делились своими методами использования AI для ускорения разработки.

Пример использования:

Представим, что у нас есть PRD для приложения по доставке еды:

Generate a user flow based on this PRD: An app that allows users to order food from local restaurants, track delivery in real-time, and provide feedback after receiving the order.

ChatGPT предоставит описание пользовательского пути, включая страницы, функции и основные состояния.

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥1😁1