Библиотека фронтендера | 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
加入频道
📢 Ты уже пробовал пройти AI-собеседование? Если нет, вот ещё одно напоминание от нас 🤗

Сейчас на рынке много вакансий, но как найти ту самую, которая идеально подойдёт тебе по навыкам, условиям и зарплате?

Просто загрузи своё резюме
Пройди интервью с нейро-рекрутером от Сбера (всего 15 минут!)
Получай лучшие предложения без бесконечных звонков и ожидания откликов

💡 Алгоритмы анализируют твой опыт и подбирают вакансии, которые подходят на 98% — так что ты точно не потратишь время зря.

Работа мечты может быть на расстоянии одного клика. Попробуешь? 😉

🔗 https://clc.to/GkOTTA
CSS-советы, которые сэкономят вам время

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

1️⃣ Используйте CSS-переменные
:root {
--primary-color: #3498db;
--padding: 10px;
}

button {
background-color: var(--primary-color);
padding: var(--padding);
}


2️⃣ Адаптивная типографика с clamp()
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}


3️⃣ Используйте :not()
button:not(.disabled) {
background-color: green;
cursor: pointer;
}


4️⃣ Оптимизируйте производительность с will-change
.card {
will-change: transform, opacity;
}


5️⃣ Используйте calc() для гибких размеров
.container {
width: calc(100% - 50px);
}


➡️ Больше советов в статье
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥 Как работает Redux и когда его использовать

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

📌 Как работает Redux

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

1️⃣ Store — централизованное место, где хранятся все данные приложения.

2️⃣ Actions — описывают, что должно измениться (например, "Добавить товар в корзину").

3️⃣ Reducers — чистые функции, которые принимают текущее состояние и действие, возвращая обновленное состояние.

4️⃣ Dispatch — отправляет actions в store, вызывая соответствующие редьюсеры.

Пример простой схемы:
Компонент → Dispatch(Action) → Reducer → Store обновляется → UI обновляется

📌 Когда использовать Redux

• Состояние сложно управляется через props/state.

• Данные нужно шарить между множеством компонентов.

• Важно предсказуемое поведение и отладка

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

Eсли состояние локальное и несложное, Context API или Zustand могут быть более простыми альтернативами.

➡️ Подробнее про Redux
Please open Telegram to view this post
VIEW IN TELEGRAM
🎙 460-й выпуск подкаста «Веб-стандарты»

Кого слушаем:
Андрей Мелихов, Алексей Симоненко, Никита Дубко.

⏱️ Таймкоды:
00:01:23 Create React App точно всё
00:18:54 Системные шрифты
00:33:30 Правильный сервер на Node.js
00:49:13 Как сжать весь npm
01:06:31 Вы не поняли Electron

▶️ Сайт подкаста

#подкасты #новости
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥 Standard Schema: общий интерфейс для библиотек схем/валидации

Создатели Zod, Valibot и ArkType представили фантастический пример сотрудничества по определению общего интерфейса для использования библиотек схем JavaScript и TypeScript.

➡️ standardschema.dev — шаг к лучшей совместимости в TypeScript
Please open Telegram to view this post
VIEW IN TELEGRAM
💡 Форматирование даты в JavaScript

Шпаргалка для фронтенд-разработчика.

#javascript #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Документальный фильм про Angular от Honeypot

Док от создателей фантастических фильмов про Node.js и Ruby on Rails представляет собой свежую историю о взлётах и падениях популярного фреймворка Angular (ранее известного как AngularJS) с участием настоящих звёзд JavaScript.

🍿 Смотреть полностью

#новости
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Какие вебинары вам действительно нужны?

Привет! 👋

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

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

Заполнение займет всего пару минут, а нам это очень поможет! Спасибо, что участвуете в нашем развитии! 💙

👉 Пройти опрос
Git Cherry-pick 🆚 Merge 🆚 Rebase

Наглядная шпаргалка для разработчика.

👩‍💻 Источник
Please open Telegram to view this post
VIEW IN TELEGRAM
🧑‍💻 Как создать фавикон в 2025 году: три файла, которые подойдут большинству потребностей

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

➡️ Читать гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
🧑‍💻 Vite с TypeScript

Если вы создали проект React на основе JavaScript с помощью Vite и хотите перейти на TypeScript, в мини-гайде описаны основные шаги:

1️⃣ Установка TypeScript и зависимостей.
2️⃣ Создание файлов конфигурации TypeScript.
3️⃣ Переименование файлов и модификация index.html.
4️⃣ Настройка ESLint для TypeScript.
Please open Telegram to view this post
VIEW IN TELEGRAM
📈 Plotly — JavaScript-библиотека для построения графиков

Высокоуровневая декларативная библиотека для построения графиков, созданная на основе D3 и stack.gl, с более чем 40 типами графиков, включая 3D-графики, статистические графики и SVG-карты.

Библиотека активно поддерживается. В представленной недавно версии 3.0.0 устранены устаревшие функции, исправлены ошибки и выполнен переход на esbuild.

💻 GitHub
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👨‍💻 Создание слайдера с наклонным содержимым и эффектом наведения: гайд для фронтенд-разработчика

Автор использует возможности HTML и CSS (+ немного Sass для упрощения), включая grid, clip-path, :has(), вложенность и другие интересные элементы CSS, чтобы всё это работало вместе.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Простой способ создания нового контекста наложения в CSS

Шпаргалка для фронтенд-разработчика.

#css #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
🎙 461-й выпуск подкаста «Веб-стандарты»

Кого слушаем:
Полина Гуртовая, Алексей Симоненко, Андрей Мелихов.

⏱️ Таймкоды:
00:00:59 Chrome 133
00:23:43 Firefox 135
00:30:44 Deno против Oracle
00:39:13 Медленный URLPattern
00:51:48 GitHub Copilot
01:06:14 Дырка в Vitest
01:13:47 Ответы на вопросы

▶️ Сайт подкаста

#подкасты #новости
Please open Telegram to view this post
VIEW IN TELEGRAM
🌐 Сколько памяти ест ваша вкладка

При разработке веб-приложений не все задумываются о том, сколько памяти потребляет их код. О производительности наших сайтов мы вспоминаем гораздо чаще. К тому же, не каждому разработчику интересно «экономить на спичках». Разве может наш код на языке JavaScript требовать много памяти? «Много» — это вообще сколько? 100 мегабайт — это много?

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

👉 Читать текстовую версию доклада
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🤔 Какой WYSIWYG-редактор выбрать в 2025 году?

Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get. Речь идет о типе редакторов, отображающих создаваемый контент в том виде, в котором он по итогу будет размещен на странице или в приложении, без необходимости делать дополнительные преобразования и обработку данных.

Под катом — обзор нескольких популярных редакторов: Tiptap, BlockNote, Lexical, Slate, ProseMirror, Quill, Plate, Remirror, Editor.js, CKEditor, TinyMCE.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
🖼️ Миграция на строгий TypeScript: путь и собственное решение команды Selectel

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

Из-за выключенных проверок в коде накопилось большое количество использований any, а также отсутствующих проверок на null. Это две основные проблемы, которые не позволяют единовременно пройтись по всей кодовой базе и за раз исправить все ошибки, возникающие при включении строгих проверок.

Если вам знакома эта проблема, то статья для вас. Максим Овчарик, ведущий фронтенд-разработчик в Selectel, делится опытом миграции кода на строгий режим TypeScript.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
😳 Если бы языки программирования были девушками

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

Мы заглянули в Тиндер разработчика и нашли там JavaScript. Как вам? 😏

Еще больше прекрасных дам языков программирования — в нашем канале Библиотека программиста.

Свайпайте и выбирайте свой мэтч ❤️