Смотрите как красиво 😍 Мои глаза, уши, голова просто отдыхают смотря на это 😍

https://www.igloo.inc/

Этот сайт был отмечен наградой Site of the Day на Awwwards в 2024 году за выдающийся UX/UI и использование 3D-анимаций, WebGL и интерактивных элементов .
https://www.awwwards.com/sites/igloo-inc

Знаете, в чём профит ведения Telegram-канала?

В том, что я стала буквально одержима новостями из мира фронтенда — и не только 😅 Всё время хочется что-то читать, листать, шерить… Но, к сожалению, мусора в инфополе очень много.

Читаешь статью и думаешь: *в чём суть? где ценность? зачем я вообще это прочитала?..*
И всё чаще ловлю себя на мысли, что про это писать не стоит, а вот то — вообще откровенное 🤦‍♀️
Да, аудитория у меня пока маленькая, но даже перед вами я чувствую ответственность — делиться только тем, что действительно полезно и интересно.

Так вот к чему я всё это...

🧵 Недавно, в поисках чего-то нового, наткнулась на вот эту статью:
👉 https://bun.sh/blog/bun-v1.2.14

📦 21 мая вышел свежий релиз Bun — и, к своему стыду (а может и нет 😅), вообще про него не слышала 🤣
А он, оказывается, реально крутая штука:

— пакетный менеджер
— сборщик
— рантайм для JS и TS
— и даже встроенный тест-раннер 🤯

Что за чудо-инструмент 😂

А вы уже пробовали Bun в продакшене или пилили с ним пет-проекты?
Поделитесь опытом — очень интересно! 💬

Всем привет!

Как многие из вас знают, на прошлой неделе прошла конференция Google I/O 2025, где представили множество интересных новинок. Одна из них — новые возможности CSS для создания каруселей без JavaScript!

✨ Что появилось в Chrome 135:

🔹 ::scroll-marker() — добавляет интерактивные маркеры прокрутки, которые позволяют пользователям легко ориентироваться и переходить к нужному слайду.

🔹 ::scroll-button() — создаёт встроенные кнопки прокрутки прямо средствами CSS. Никакого JS — всё работает «из коробки».

💡 Эти новые псевдоэлементы позволяют создавать карусели с минимальным количеством кода.
Например, в Pinterest смогли сократить реализацию карусели с 2000 строк JavaScript до 200 строк CSS!
🔗 https://developer.chrome.com/blog/web-at-io25

📚 Подробнее с примерами, есть даже демки на codepen:
https://developer.chrome.com/blog/carousels-with-css

⚠️ А как насчёт кроссбраузерности?
На данный момент эти фичи поддерживаются только в Chrome 135+. Пока что для продакшена стоит использовать с осторожностью и предусматривать fallback'и.

Почему мне так смешно 🤣🤣🤣

Сайт отзывчивый, но есть нюанс

@ithumor

Вы уже видели?

🚀 Вчера вышла версия v1.0.0 SDK от Google Gen AI для TypeScript/JavaScript!

Вот что нового:

✨ Поддерживаются:

* Live API — стриминг ответов в реальном времени
* MCP (Multi-turn Chat Prompting)
* TTS (Text-to-Speech)
* Модели генерации изображений и видео
* Интеграция с Gemini API и Vertex AI

📦 Установка:

npm install @google-genai

📘 Официальная документация:
https://googleapis.github.io/js-genai/release_docs/index.html

Надёжное обнаружение блокировки third-party cookies в 2025 году

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

Из-за неконсистентности браузеров блокировку сторонних кук не всегда легко выявить.

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

🔗 https://www.smashingmagazine.com/2025/05/reliably-detecting-third-party-cookie-blocking-2025/

Всем привет!

Сегодня — по горячим следам — хочу разобрать одну проблему, на которую я уже натыкалась как минимум пару раз 😅 Причём код изначально писала не я даже — ко мне просто приходили и говорили: "ничего не работает!"

Думаю, многие из вас знакомы с объектом URL. Подробнее можно почитать здесь:
https://developer.mozilla.org/ru/docs/Web/API/URL/URL

Сигнатура конструктора:
new URL(url, [base])

❗️И вот тут важно быть внимательным — особенно к тому, есть ли слэш `/` в конце base или нет.
Но не только это!

Сравните:

new URL('/clients', 'https://hostname/base').toString(); 
// 👉 https://hostname/clients (куда делся base?)

new URL('clients', 'https://hostname/base').toString();
// 👉 https://hostname/clients (тоже самое)

new URL('/clients', 'https://hostname/base/').toString(); 
// 👉 https://hostname/clients (и тут его нету)

Но! Если написать вот так:

new URL('clients', 'https://hostname/base/').toString();
// 👉 https://hostname/base/clients ✅

📌 Почему так происходит?

Поведение зависит сразу от двух вещей:

1. Заканчивается ли base на /
2. Начинается ли url с /

Если url начинается с /, он считается абсолютным путём от корня хоста, и весь путь из base будет проигнорирован — даже если base заканчивается слэшем.

Поэтому:

* '**/clients**' → абсолютный путь, затирает всё из base кроме хоста
* '**clients**' → относительный путь, добавляется к base если путь в base заканчивается со /

---

🧠 Вывод:

* Один / в начале или конце может полностью изменить итоговую ссылку!

---

📚 Подробнее о том, какие есть свойства у объекта URL, можно почитать здесь:
https://htmlacademy.ru/blog/js/url

Mastering Creational Design Patterns in JavaScript: экспертный гайд

Всем привет!
Нашла отличную статью про порождающие паттерны проектирования в JavaScript — https://jsdev.space/creational-design-patterns/.

Статья без воды и легко читается. Обычно подобные материалы ориентированы на Java, но здесь всё — на JavaScript 🙌

В ней вы найдёте примеры таких порождающих паттернов, как:

* Singleton (Одиночка)
* Prototype (Прототип)
* Factory (Фабрика)
* Builder (Строитель)

Очень рекомендую к прочтению, особенно если хотите систематизировать знания по паттернам в JS 💡

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