You're not a front-end developer until you've...

Прикольный quiz на тему: «Ты не фронтенд-разработчик, если не делал этого» 😄

Недавно один разработчик по имени Nic Chan осознал, что работает в веб-разработке уже 10 лет! (У меня, кстати, пока только 9 — ровно 9 лет 😂 вот в мае стукнуло)

По этому поводу он составил чеклист с кейсами, с которыми сталкивался за это время. Конечно, список не исчерпывающий, но забавно почитать и проверить себя: через что ты уже прошел, а что еще предстоит пережить.

Вот несколько пунктов (перевод ниже):

- Потратил три часа, пытаясь понять, откуда взялся горизонтальный скроллбар 😂
- Просили сдвинуть элемент на два пикселя вправо 🤣
- Уронил прод 😭

👉 Полный список: https://www.nicchan.me/blog/youre-not-a-front-end-developer-until-youve/

Ну и как вам подобный чеклист? Сколько у вас получилось совпадений?)

Недавно я столкнулась с одним кейсом: у человека было 6 лет опыта в веб-разработке, но при этом была сильная просадка в базовых знаниях.

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

Мне кажется что также нужно писать и о простых вещах. Да при желании эту информацию очень легко найти, но как говорится мало ли может кто-нибудь в данный момент искал ответ на этот вопрос)

Поэтому вашему вниманию 🥁🥁🥁

🚀 Debounce vs Throttle: в чём разница?

Представьте: у вас есть поисковая строка, которая отправляет запрос на сервер при каждом вводе. Если делать это на каждый input — будут лишние запросы и нагрузка.

Решение: debounce и throttle — два способа контролировать частоту вызова функции. Но в чём разница?

1. Debounce
- Как работает: это функция, которая «откладывает» вызов другой функции до того момента, когда с последнего вызова пройдёт определённое количество времени, то есть ждёт, пока действия прекратятся на N миллисекунд, и только потом вызывает функцию.
- Пример: Поиск, который срабатывает только после паузы в вводе (например, 500 мс).

2. Throttle
- Как работает: это функция, которая вызывает другую функцию, «пропуская» некоторые вызовы с определённой периодичностью, то есть позволяет вызывать функцию не чаще, чем раз в N миллисекунд.
- Пример: Обработчик скролла, который срабатывает раз в 100 мс (а не на каждый пиксель).

Главное отличие:
- Debounce — ждёт "тишины".
- Throttle — гарантирует вызов не чаще, чем нужно.

Ниже приведены примеры из доки с реализацией:

https://doka.guide/js/debounce/
https://doka.guide/js/throttle/

ECMAScript 2025 утвержден!

25 июня на 129-й Ассамблее Ecma International утвердили спецификацию ES2025 🎉
С полным списком изменений можно ознакомиться здесь:
🔗 https://2ality.com/2025/06/ecmanoscript-2025.html
https://socket.dev/blog/ecmanoscript-2025-finalized

Мне показались особенно интересными следующие нововведения:

🔹 `Promise.try()`
Упрощает работу с синхронным кодом в промис-цепочках

🔹 Новые методы у `Set`
union, intersection, difference, symmetricDifference, isSubsetOf, и другие.
🔥 Больше операций — меньше велосипедов и Array.from(set).filter().

🔹 Хелперы для итераторов
iterator.map(), .filter(), .drop(), .take(), .toArray() —
Удобно, читаемо и без промежуточных массивов.

🚀 Node.js 24: Your Next Big Frontend Upgrade?

Наткнулась на классную статью, где поднимается важный вопрос —
а почему мы вообще не обновляем Node.js вовремя? 🤔

Часто разработчики сидят, например, на 16-й ноде,
а потом резко перескакивают на 20-ю, минуя всё, что было между.

В статье https://thenewstack.io/node-js-24-your-next-big-frontend-upgrade/ Matteo Collina искренне негодует, почему многие до сих пор не обновились,
и напоминает, что обновления — это в первую очередь про безопасность
и доступ к реально полезным новым фичам)

📈 Node 12 (!) всё ещё скачивают миллионы раз в месяц…
И автор статьи явно не понимает, почему.

А вы что думаете?
🧩 Следите за новыми релизами Node? Обновляетесь? Или "и так работает — не трогаем"? 😅

Всем привет 👋
Кажется, в моем канале всё больше набирают популярность две темы:

1. Реальные кейсы из опыта
2. Объяснение фронтенд-тем простым языком

Ну что, погнали!
Сегодня вашему вниманию тема: FavIcon — что это за зверь такой?
Есть люди, которые ни разу не добавляли его к реальному сайту — давайте разбираться.

---

Что такое Favicon?

Favicon (сокращение от *favorite icon*) — это маленький значок, который отображается:

* во вкладках браузера рядом с названием сайта
* в закладках
* и даже в истории посещений

Своё название favicon получил от функции "Favorites" в старом Internet Explorer — сейчас это просто "Bookmarks" или закладки в большинстве браузеров.

---

Форматы favicon

🔹 ICO — favicon.ico
Формат ICO был разработан Microsoft и является самым универсальным.
Он позволяет хранить в одном файле несколько изображений разного размера (например, 16x16, 32x32 и 48x48 пикселей), что удобно для разных экранов.
✅ Поддерживается всеми браузерами
⚠️ Это единственный формат, который работает в IE5–IE10

🔹 PNG — favicon.png
Формат, к которому все привыкли — легко создать в любом графическом редакторе.
На современных экранах PNG-иконки зачастую выглядят чётче, чем ICO.
❌ Но не поддерживается старыми IE (версии 5–10)

🔹 SVG — favicon.noscript
SVG — это векторный формат, он лёгкий и масштабируется без потери качества.
Картинка остаётся чёткой на любом экране, и весит при этом очень мало.
❌ Пока поддерживается только в Chrome, Firefox и Opera

---

Какие размеры и как подключить?

🟡 Favicon должен быть квадратным.

* ICO: 16x16, 32x32, 48x48
* PNG: 16x16 и 32x32, но подойдут и любые другие квадратные размеры
* SVG: может быть любого размера — он масштабируется сам

📌 Чтобы подключить favicon к сайту, нужно добавить в <head> HTML:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

А сам файл положить рядом с index.html или указать путь вручную.

---

📚 Полезные ссылки:

* https://favicon.io/tutorials/what-is-a-favicon/
* https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#adding_custom_icons_to_your_site
* https://developer.mozilla.org/en-US/docs/Glossary/Favicon

🕰 How well do you know JavaScript's Date class?

Смотрите, какой смешной quiz я нашла про объект Date в JS — https://jsdate.wtf/ 🤯

Всего 28 вопросов — и это нужно иметь какую фантазию, чтобы придумать столько странностей? 😂

Советую пробежаться:
— чтобы посмеяться 😂
— расслабиться 🧘‍♀️ (хотя не знаю даже 😂)
— и, возможно, узнать что-то новое 💡

📌 Фишка: после каждого вопроса есть объяснение, почему ответ именно такой — так что это не просто развлечение, но и прокачка 🧠

🧙‍♀️ Little Red Riding Hood's Quest

Как-то я уже делилась сайтом, который стал Site of the Day на Awwwards 🏆
И вот — нашла ещё один очень клёвый проект! Зацените 👉
🔗 https://ai-quest.lusion.co/

Этот сайт тоже получил Site of the Day — 5 июля 2023 года
🔗 https://www.awwwards.com/sites/little-red-riding-hoods-quest

Это не просто сайт, а настоящий AI-powered мини-квест с потрясающей визуалкой, озвучкой и атмосферой.
🖼 Иллюстрации сгенерированы с помощью MidJourney + StableDiffusion
🗣 Озвучка — через ElevenLabs
💬 Сценарий — с помощью ChatGPT

Очень советую прогуляться по этой сказке 🌲✨

Генераторы в JavaScript
Ты тоже впервые узнал про генераторы, когда использовал redux-saga в проекте? 😅
И даже не подозревал, что генераторы — это встроенная фича самого JS?
Давай разбираться, что это такое и зачем они вообще нужны!

🔁 Генератор — это синтаксический сахар для создания итераторов, которые умеют не только next(), но ещё и throw() и return().

> 🧠 Генераторы появились в ES6. Их придумали, чтобы проще работать с ленивыми итерациями, асинхронным кодом и потоками данных. Они позволяют ставить выполнение на паузу и возобновлять — как будто у функции есть кнопка «продолжить» 🎮

📌 Как объявить генератор:

function* gen() {}
// можно и так:
function * gen() {}
function *gen() {}

📌 Как использовать:

function* gen() {
  yield 1
  yield 2
}

📌 yield* — делегирует выполнение другому генератору:

function* outer() {
  yield* inner()
}

📍 Главное отличие от обычной функции — можно приостанавливать выполнение и продолжать потом через .next()!

📌 Также есть .return() — завершает генерацию
📌 .throw() — завершает с ошибкой

---

🧩 Попробуем решить задачку:
https://bigfrontend.dev/quiz/generator-return

function* gen() {
  yield 1 
  try {
    yield 2
    yield 3
  } finally {
    yield 4
  }
  yield 5
}

const g = gen()
console.log(g.next().value)
console.log(g.next().value)
console.log(g.return(6).value)
console.log(g.next().value)
console.log(g.next().value)

Прежде чем посмотреть ответ выбери то что считаешь правильным в опросе ниже

1 // первый yield
2 // второй yield
4 // return вызывает finally
6 // значение из return()
undefined // генератор завершён

А если хочешь копнуть глубже — вот отличный разбор:
https://doka.guide/js/generators/

😅 Заметила такой парадокс: именно фронтендеры чаще всего слабо знают алгоритмы — а то и вовсе не знают.

🧠 Поэтому вот вам два отличных ресурса для визуализации алгоритмов — чтобы подтянуть или освежить знания:

1. 📘 Визуализации от Университета Сан-Франциско
https://www.cs.usfca.edu/~galles/visualization/Algorithms.html
Классические алгоритмы: сортировки, деревья, графы и т.д.

2. 💻 Алгоритмический тренажёр с пошаговым исполнением кода на JavaScript, Java и C++
https://algorithm-visualizer.org/
Можно видеть, как именно работает код — по шагам!

📌 Сохраняй, чтобы не гуглить в следующий раз "как работает быстрая сортировка".

🎯 Рубрика: Отвечаю на вопросы с собеседований

❓Почему margin между двумя блочными элементами не суммируется, а "схлопывается"?

📌 Потому что в CSS есть такое поведение, как collapsing margins — схлопывание вертикальных внешних отступов.

Когда margin-top одного элемента соприкасается с margin-bottom другого, они не складываются, а превращаются в один отступ, равный наибольшему из них.

➕ Что с отрицательными отступами?

Если есть и положительные, и отрицательные отступы, то итоговый размер схлопнутого отступа = наибольший положительный + наименьший отрицательный (по модулю).

Если все отступы отрицательные — берётся наименьший из них (то есть самый "глубокий" минус).

Нда. No comments

🧾 HTTP Code Cheatsheet

По опыту знаю, что большинство разработчиков отлично знают такие HTTP-коды:
200, 201, 204, 301, 400, 401, 403, 404, 429, 500, 502, 503.

Но на самом деле их гораздо больше 😎

📘 Нашла отличную статью на английском:
https://medium.com/@onix_react/http-code-cheatsheet-26c129a3c9a9

📙 И полезный ресурс на русском языке:
https://restapitutorial.ru/httpstatuscodes/
На сайте также можно почитать про проектирование REST API.

Всем привет!
Давайте подведем итоги за последние три месяца — что появилось в этом канале 👇

📌 ДАЙДЖЕСТ: МАЙ & ИЮНЬ & ИЮЛЬ

🎯От меня:
Советы как преуспеть разработчику - https://news.1rj.ru/str/frontenddevelopernews/29
Как мотивировать команду - https://news.1rj.ru/str/frontenddevelopernews/31
React-разминка - https://news.1rj.ru/str/frontenddevelopernews/32
А нужно ли вообще делить разработчиков на frontend и backend? - https://news.1rj.ru/str/frontenddevelopernews/35
Баг при использовании объекта URL - https://news.1rj.ru/str/frontenddevelopernews/44
Debounce vs Throttle: в чём разница? - https://news.1rj.ru/str/frontenddevelopernews/49
Что такое Favicon? - https://news.1rj.ru/str/frontenddevelopernews/52
Генераторы в JavaScript - https://news.1rj.ru/str/frontenddevelopernews/55
Почему margin между двумя блочными элементами не суммируется, а "схлопывается"? - https://news.1rj.ru/str/frontenddevelopernews/58


🗺 Frontend-новости:
ESLint теперь умеет проверять HTML! - https://news.1rj.ru/str/frontenddevelopernews/34
21 мая вышел свежий релиз Bun - https://news.1rj.ru/str/frontenddevelopernews/37
Google I/O 2025 - https://news.1rj.ru/str/frontenddevelopernews/38
v1.0.0 SDK от Google Gen AI для TypeScript/JavaScript! - https://news.1rj.ru/str/frontenddevelopernews/41
ECMAScript 2025 утвержден! - https://news.1rj.ru/str/frontenddevelopernews/50


🌐 Развлечения:
IGLOO INC - https://news.1rj.ru/str/frontenddevelopernews/36
You're not a front-end developer until you've... - https://news.1rj.ru/str/frontenddevelopernews/48
How well do you know JavaScript's Date class? - https://news.1rj.ru/str/frontenddevelopernews/53
Little Red Riding Hood's Quest - https://news.1rj.ru/str/frontenddevelopernews/54


📚 Статьи и видео:
Нефункциональные требования - https://news.1rj.ru/str/frontenddevelopernews/28
gRPC против REST: Как выбрать лучший подход к проектированию API - https://news.1rj.ru/str/frontenddevelopernews/30
Надёжное обнаружение блокировки third-party cookies в 2025 году - https://news.1rj.ru/str/frontenddevelopernews/43
Mastering Creational Design Patterns in JavaScript: экспертный гайд - https://news.1rj.ru/str/frontenddevelopernews/45
Node.js 24: Your Next Big Frontend Upgrade? - https://news.1rj.ru/str/frontenddevelopernews/51
Ресурсы для визуализации алгоритмов - https://news.1rj.ru/str/frontenddevelopernews/57
HTTP Code Cheatsheet - https://news.1rj.ru/str/frontenddevelopernews/60

#дайджест

🚀 Frontend Performance Checklist

📋 Нашла полезный чеклист по оптимизации фронтенда, где собраны способы ускорения работы сайта с точки зрения:

- HTML
- CSS
- JavaScript
- Обработки изображений
- Видео
- Шрифтов
- Хостинга / сервера

🔗 Статья: https://crystallize.com/blog/frontend-performance-checklist

🔍 Почему 0.1 + 0.2 !== 0.3 в JavaScript?

Всем привет! Сегодня разберёмся раз и навсегда, почему в JavaScript:

0.1 + 0.2 === 0.30000000000000004 // true

Кажется, что это баг в JS, но на самом деле — нет. JavaScript использует формат IEEE 754 double precision — это 64-битное представление чисел с плавающей точкой.

---

💡 Почему возникает ошибка?

Некоторые десятичные дроби, например 0.1 и 0.2, невозможно точно представить в двоичной системе. Они превращаются в бесконечные двоичные дроби.

---

📐 Как `0.1` представляется в двоичной системе?

Чтобы перевести дробную часть числа в двоичную систему, мы умножаем её на 2 и фиксируем целую часть результата. Вот шаги:

0.1 * 2 = 0.2   → 0  
0.2 * 2 = 0.4   → 0  
0.4 * 2 = 0.8   → 0  
0.8 * 2 = 1.6   → 1  
0.6 * 2 = 1.2   → 1  
0.2 * 2 = 0.4   → 0  
0.4 * 2 = 0.8   → 0  
0.8 * 2 = 1.6   → 1  
0.6 * 2 = 1.2   → 1  
... и так далее

🔁 В итоге мы получаем бесконечную периодическую двоичную дробь:

0.1₁₀ = 0.00011001100110011001100...₂

---

📦 Далее сдвигаем на 4 позиции. Почему?

Чтобы сохранить число в формате IEEE 754, его нужно записать в нормализованной форме:

1.значащие_биты × 2^экспонента

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

0.0001 10011001100110011...  
   ↓  
1.10011001100110011... × 2⁻⁴

То есть сдвигаем на 4 позиции влево, и поэтому экспонента = -4. Это и есть часть формата IEEE 754.

---

🧮 Что делает JavaScript?

Он берёт ближайшее возможное двоичное значение, которое можно представить в 64 битах:

1.1001100110011001100110011001100110011001100110011010 × 2⁻⁴

Это — ровно 52 бита точности, и последняя цифра округлена вверх.

Теперь, если пересчитать это значение обратно в десятичную форму, получится:

0.1000000000000000055511151231257827021181583404541015625

То есть 0.1 в JS — это не ровно 0.1, а немного больше. Проверка:

console.log(0.1.toPrecision(60))
// → '0.1000000000000000055511151231257827021181583404541015625'

---

📌 То же самое происходит с `0.2` — оно представляется как:

0.200000000000000011102230246251565404236316680908203125

Поэтому при сложении 0.1 + 0.2 мы получаем:

≈ 0.3000000000000000444...

А 0.3 в памяти — это другое приближённое значение, поэтому:

0.1 + 0.2 === 0.3 // false

---
Собственно говоря вот и вся магия 💫

📚 Кстати, про достоверные источники...

В универе на магистратуре в Англии нас всегда учили что все источники информации должны быть проверенными и надежными! Вот например Wikipedia вообще НЕ надежный источник информации 😂

И нам приходилось искать все эти проверенные статьи и мы гуглили не просто в Гугле а на https://scholar.google.com

Можете попробовать поискать информацию на https://scholar.google.com и вам выйдут только академические статьи.

🧩 React-хук для обработки событий клавиатуры

Возможно, вы уже видели этот хук — со мной им поделился коллега, и выглядит он действительно удобно 👇

👉 https://github.com/ArturJS/use-key-match

Правда жизни 🙊

Всем привет!
Недавно наткнулась на эту статью:
https://www.totaltypenoscript.com/how-to-create-an-npm-package

Решила пробежаться глазами, чтобы понять, что там есть интересного. И почему-то меня триггернули пункты 2.1 и 3.2.

Автор статьи предлагает вручную создать файлы package.json и tsconfig.json.
Не знаю, как у вас, но меня прям передёрнуло 🙃 Почему бы не предложить создать их командами:

npm init
tsc --init

Так они сразу создадутся с конфигами по умолчанию, и уже потом можно внести нужные изменения, объясняя при необходимости. А не просто копировать и вставлять код вручную. Понимаю что для своих пет проектов это удобнее и не нужно вносить кучу правок, но это же обучающий гайд.


А вы как думаете, стоит ли в таких гайдах предлагать команды или ручное создание файлов — норм вариант?

P.S. Сорри за душноту и занудство, но просто не смогла пройти мимо 😅

Announcing TypeScript 5.9

В продолжение предыдущего поста 🙂
Вышла новая версия TypeScript, и одной из фич стали изменения в команде tsc --init.
Теперь она создаёт более лаконичный и продуманный tsconfig.json — без горы комментариев и неиспользуемых опций. В файле остаются только действительно нужные настройки, плюс есть ссылка на документацию и автодополнение.

Ещё одна интересная новинка — отложенный импорт с помощью import defer:

import defer * as feature from "./some-feature.js";

// Модуль загрузится только при первом обращении к экспорту
feature.run();

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

Подробнее: https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-9/