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

🤩 Библиотеки, которые JavaScript уже умеет заменять

Некоторые привычные npm-пакеты сегодня можно не устанавливать — нужная функциональность уже есть в JS и Web API:

url-parse     → new URL()
left-pad      → ''.padStart()
lodash.last   → arr.at(-1)
uuid          → crypto.randomUUID()
deepclone     → structuredClone()
numeral       → Intl.NumberFormat()
moment        → Intl.DateTimeFormat()
lodash.get    → obj?.prop?.subprop
query-string  → URLSearchParams()

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

📍 Навигация: [Вакансии]

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

#readme

💡 Vue.js: не усложняйте v-bind

В Vue часто можно встретить такой код:

<UserCard :user="user" :config="config" />

🔴 На первый взгляд кажется, что :user="user" и :config="config" избыточны. Но здесь двоеточие — это сокращение для v-bind:

<UserCard v-bind:user="user" v-bind:config="config" />

🔴 При этом Vue позволяет сократить запись ещё сильнее, если имя пропса совпадает с именем переменной:

<UserCard :user :config />

То есть Vue сам понимает, что нужно передать значения переменных user и config в одноимённые props.

Мелочь, но в компонентах с большим количеством props заметно чище.

📍 Навигация: [Вакансии]

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

#hotfix

🤔 Вопрос с собеседования

Что выведет этот код?

❤️ — 0 1 2
🔥 — 3 3 3
👍 — 0 0 0

👇 Правильный ответ (нажми, чтобы прочитать):

🔘 Будет:

3
3
3

var имеет function scope, поэтому все три callback замыкаются на одну и ту же переменную i. К моменту выполнения setTimeout цикл уже закончился, а i равен 3.

🔘 Если заменить var на let:

for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}

получим 0 1 2, потому что let создаёт отдельную binding-переменную для каждой итерации.

📍 Навигация: [Вакансии]

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

#career_merge

🤩 А что, если написать свой текстовый редактор?

«VS Code слишком тяжёлый. Сделаю свой редактор!»

— примерно так начался эксперимент одного разработчика.

🔘 Первый вариант — всё рисовать через <canvas>. Курсор, текст, подсветка строки, ввод с клавиатуры — работает. Но почти всё приходится реализовывать самостоятельно:

canvas.addEventListener("pointerdown", positionCursor);
document.addEventListener("keydown", moveCursor);

И быстро выясняется проблема: canvas ничего не знает о тексте. Нет нормального выделения, undo/redo, скроллинга и доступности.

🔘 Тогда появляется идея использовать contenteditable:

<div
  contenteditable="plaintext-only"
  autocapitalize="off"
  autocorrect="off"
  spellcheck="false"
  translate="no">
</div>

Браузер сразу берёт на себя выделение текста, историю изменений и часть accessibility. Но на больших текстах производительность становится непредсказуемой.

🔘 Поэтому следующий кандидат — обычный <textarea>:

<textarea
  autocapitalize="off"
  autocorrect="off"
  spellcheck="false">
</textarea>

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

📍 А потом начинается самое интересное: Unicode.

"🍋‍🟩".length;
// 5

[..."🍋‍🟩"].length;
// 3

const segmenter = new Intl.Segmenter("en", {
  granularity: "grapheme"
});

[...segmenter.segment("🍋‍🟩")].length;
// 1

Один визуальный символ может состоять из нескольких UTF-16 code units и нескольких Unicode code points.

В итоге автор получил редактор, который выглядит примерно на 90% готовым, но имеет лишь 1% возможностей настоящего редактора.
И именно оставшиеся 10% — выделение, виртуализация, подсветка, табуляция, скроллинг, Unicode и accessibility — превращают «простой текстовый редактор» в огромный проект.

📍 Навигация: [Вакансии]

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

#under_hood

🐱 SQL на котиках

JOIN — это способ соединить данные из разных таблиц по общему полю.

В видео разбирают:

— разницу между INNER и LEFT JOIN
— почему строки могут «пропадать»
— как формируется итоговый результат
Подойдёт новичкам, тем, кто путается в JOIN, и всем, кто хочет перестать писать запросы вслепую.

📍 Навигация: [Вакансии]

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

#read_watch #sql

🤩 Для поворота необязательно считать градусы. В CSS есть единица turn: 1 turn = полный оборот = 360°.

Например, 0.5turn — это 180°, а 2turn — два полных оборота.

Особенно удобно, когда значение превышает 360°.

📍 Навигация: [Вакансии]

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

#readme

💡 Container Queries в действии

Медиазапросы смотрят на размер viewport, а Container Queries — на размер самого контейнера.

📍 В примере кнопка меняет своё содержимое в зависимости от доступного пространства: если контейнер становится слишком узким, текст ADD TO CART скрывается, а иконка корзины остаётся.

@container (max-width: 200px) {
  .button-text {
    display: none;
  }
}

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

📍 Навигация: [Вакансии]

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

#readme

✨ React Bits — 165+ готовых анимаций для React

Библиотека с копипаст-готовыми компонентами для тех случаев, когда хочется добавить интерфейсу немного магии, но писать анимацию с нуля лень:

→ текстовые анимации и эффекты
→ интерактивные UI-компоненты
→ анимированные фоны
→ эффекты для изображений и видео
→ версии для JS/TS и CSS/Tailwind

Компоненты можно устанавливать через CLI или просто забрать исходный код и адаптировать под свой проект. Есть и дополнительные инструменты: Background Studio, Shape Magic и Texture Lab — для создания фонов, SVG и визуальных эффектов.

🔗 GitHub

📍 Навигация: [Вакансии]

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

#stack

✅ Правильный ответ: ❤️ 1

Почему: все три вызова используют значение count из текущего рендера. При count = 0 каждый вызов фактически планирует обновление до 1.

Если заменить на:

setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);

тогда результатом будет 3.

📍 Навигация: [Вакансии]

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

#code_challenge

Что выведет код?

🔥 — 3
❤️ — 1
🥰 — 2
🤔 — ошибка

📍 Навигация: [Вакансии]

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

#code_challenge

😮 Visual Types: типизация через картинки

Вместо чтения про "Union type позволяет переменной быть одним из нескольких типов" — видишь схему, и всё сразу понятно.

Что покрывает:

🔤 Примитивы, объекты, массивы, Union/Intersection типы, дженерики — все базовые концепции. Полезно для начинающих в TypeScript или тех, кто запутался в терминологии.

🔗 Ссылка на гид

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

#readme #ts

📍 Навигация: [Вакансии]

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

#pixel_pause

🔥 — 1 2 5 3 4
❤️ — 1 2 3 5 4
🥰 — 1 2 5 4 3
🤔 — 1 5 2 3 4

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

#code_challenge #js

🚀 В новой версии браузера сразу несколько полезных изменений для веб-интерфейсов:

🔵 autocorrect теперь можно контролировать прямо через HTML — для input, textarea и contenteditable.

🔵OpaqueRange позволяет работать с выделенными участками текста внутри input и textarea. Например, для подсветки текста, inline-подсказок и popover.

🔵Reference Target улучшает работу ARIA-ссылок с Shadow DOM — label, aria-labelledby и другие ID-ссылки теперь могут обращаться к элементам внутри компонента.

🔵CPU Performance API позволяет определить производительный класс устройства и адаптировать интерфейс под его возможности.

🔵Connection Allowlists дают возможность ограничивать внешние endpoint’ы, к которым страница может обращаться через Fetch и другие Web API.

🔵WebGPU получил управление размером subgroup в compute shader — особенно интересно для тяжёлых вычислений и AI-задач.

И ещё несколько изменений для PWA, WebGPU, медиа и безопасности.

🔗 Источник

📍 Навигация: [Вакансии]

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

#release_digest

📚 Читаете ли вы техническую литературу, чтобы прокачать свои навыки?

❤️ — да, постоянно читаю
👍 — иногда читаю
👾 — почти не обращаюсь к книгам, получаю знания из других источников

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

Больше полезных книг — у нас в канале @progbook 📍

📍 Навигация: [Вакансии]

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

#career_merge

⭐️ Как JavaScript исполняется под капотом V8

Вы пишите let x = 1 + 2, а под капотом V8 уже строит синтаксическое дерево, генерирует байт-код и думает, стоит ли компилировать это в машинный код.

Что в карточках:

— Как V8 парсит и интерпретирует код
— Что делает TurboFan и зачем нужен байт-код
— Как работает сборка мусора
— И почему порядок добавления свойств в объект — это не мелочь
Если хотите писать реально быстрый JS, нужно понимать, как его читает движок.

🔗 Читать статью

📍 Навигация: [Вакансии]

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

#under_hood