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

#pixel_pause

🖍 Все используют 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

🌪 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

💡 JavaScript-разминка

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

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

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

#code_battle

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

#pixel_pause

⚙️ React Compiler теперь можно выключить прямо в функции

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

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

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

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

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

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

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

⏺ Важно:

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

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

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

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

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

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

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

#readme #react

📱 Chrome теперь сам переводит интерфейсы

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

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

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

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

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

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

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

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

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

#read_watch

⚡️ Мок-бэкенд за 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