📌 От прототипа до класса: как устроено наследование в JS

Как JavaScript находит методы, кто у кого что наследует и зачем нужен extends. 5 статей, которые расставят всё по полочкам.

1. Прототипное наследование

Подробно рассказывает про механизм [[Prototype]], цепочку прототипов и делегирование свойств через proto.

2. Наследование классов

Разбирает синтаксис class и extends, эффективность и подводные камни ES6-наследования.

3. Prototypal Inheritance Explained

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

4. 7 способов реализации наследования в JavaScript

Обзор альтернатив и техник: от Object.create до работы со ссылочными типами, плюсы и минусы каждого подхода.

5. MDN: Inheritance & the prototype chain

Официальная документация MDN: простое объяснение чего искать JavaScript при обращении к свойству, как работает цепочка наследования.

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

#resource_drop

⭐️ CSS: sibling-index() — stagger-анимации без JS

css.card {
  transition: opacity .3s ease;
  transition-delay: calc(sibling-index() * 100ms);

  @starting-style {
    opacity: 0;
  }
}

Каждый элемент знает свою позицию среди соседей → автоматический stagger.

🔜 Когда использовать:

— появление списков карточек
— меню, таймлайны
— простые sequence-анимации

🔜 Когда не подходит:

— старые браузеры
— сложная логика (условия, пересчёты)

⚠️ Experimental / syntax может измениться
Chrome 130+, Safari 18+
Firefox — в планах

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

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

#readme #css

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

#code_challenge #js

😎 undefined trезвости

Как ваш первый рабочий день?

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

#pixel_pause

🔥 Class Components → Hooks

В новом React коде классы считаются легаси-подходом. Они не запрещены, но в новых компонентах и при плановом рефакторинге рекомендуется использовать функциональные компоненты с хуками.

🔴 Почему это имеет смысл:

— меньше шаблонного кода (constructor, bind)

— проще читать и поддерживать

— корректно работает с современными фичами React

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

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

#hot_fix

📎 Шпаргалка по Set в JavaScript

union, intersection, difference, isSubsetOf и другие методы уже давно в языке, но до сих пор используются редко. Чаще по привычке — массивы, фильтры и ручная логика.

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

Если работаете с наборами данных — Set должен быть базовым инструментом.

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

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

#readme

👁 Что нового в Chrome DevTools 144

В 144-й версии DevTools без революций, но с точечными улучшениями, которые реально упрощают отладку:

🟣 Request Conditions
Network request blocking переименовали и прокачали — теперь можно троттлить отдельные запросы, а не весь Network целиком. Удобно для edge-кейсов и нестабильных API.

🟣 DevTools MCP server 0.12.1
Появился auto connection: можно подключиться к уже открытому браузерному сеансу и продолжить отладку с того же места. Меньше ресетов — быстрее дебаг.

🟣 Шрифты
@font-face и @font-feature-values теперь редактируются прямо в Styles. Без прыжков между панелями.

🟣 Adopted stylesheets
В Elements теперь видно adopted stylesheets под shadow roots и document root. Полезно, если стили «не применяются и непонятно почему».

🔗 Источник

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

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

#release_digest

⚠️ sort() ломает state (тихий баг)

const sorted = data.sort(byDate);

На вид — нормально.

На деле:

• sort() мутирует data
• ссылка на массив не меняется
• React / Zustand / Redux не видят изменений
• UI начинает вести себя случайно

ℹ️ Почему это происходит:

sort() — in-place операция. Она меняет существующий массив, а не создаёт новый.

Как делать безопасно:

🟣 Современный способ (ES2023)

const sorted = data.toSorted(byDate);

🟣 toSorted() поддерживается:

Chrome 110+, Safari 16+, Firefox 115+

🟣 Для старых браузеров работает везде:

const sorted = [...data].sort(byDate);

🟣 Если нужен deep copy

const sorted = structuredClone(data).sort(byDate);

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

#hotfix #js

🎼 Что нового в WebGPU

Chrome 144 продолжает аккуратно прокачивать WebGPU: меньше костылей, больше прямого контроля над GPU.

🈶 WGSL: subgroup_id и num_subgroups

Появился доступ к ID сабгруппы и их количеству внутри workgroup.
Раньше это приходилось восстанавливать через атомики — теперь есть нативные built-in. Основа для более эффективных compute-шейдеров и тонкой работы с памятью.

🈶 WGSL: uniform_buffer_standard_layout

Uniform-буферы больше не требуют 16-байтных паддингов.
Можно шарить одинаковые структуры между uniform и storage buffers без лишних полей и @align.

🈶 WebGPU на Linux

Начался постепенный rollout: сначала Intel Gen12+, дальше планируют AMD и NVIDIA.
Под капотом — WebGPU через Vulkan, Chromium остаётся на OpenGL.

🈶 Быстрее writeBuffer() и writeTexture()

Оптимизации дали до 2× прироста производительности при копировании данных. Важно для стриминга и real-time графики.

🈶 Dawn / Android

Вышла alpha Kotlin-биндингов WebGPU через Jetpack (androidx.webgpu).
Современный GPU-API без боли OpenGL и сложности Vulkan.

🔗 Источник

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

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

#release_digest