Генераторы в JavaScript: yield, синтаксис, примеры

#почитать

Генераторы – это мощная и гибкая функция в JavaScript, которая позволяет управлять выполнением кода и возвращать значения поэтапно. Они отличаются от обычных функций тем, что их выполнение можно приостанавливать и возобновлять в любое время. Это делает генераторы особенно полезными для работы с последовательностями данных, потоками или асинхронными задачами.
Главная особенность генераторов – их способность «помнить» свое состояние между вызовами. Когда вы вызываете генератор, он не выполняется сразу целиком, как обычная функция, а возвращает специальный объект-итератор. Этот объект управляется методом next(), который каждый раз продолжает выполнение генератора до следующей точки остановки, определенной ключевым словом yield.

⏱Читать статью

▫️Собеседование React

#посмотреть

В этом видео показываю пример моего реального собеседования на позицию Senior Front-End разработчика. После данного интервью я получил оффер на 400k

⏱Смотреть на YouTube ⏱️45 минут

20 приемов TypeScript, которые должен знать каждый разработчик

#почитать

Многие разработчики знают основы TypeScript, но знание некоторых приемов может сделать ваш код более эффективным, чистым и поддерживаемым.

⏱Читать статью

Faux Containers in CSS Grids

#почитать

Containers! Where would we be without them? All our menu items and body copy and button text, all loose and adrift in our viewports… un-contained! Chaos!!
Then again, if we wrap everything in a box, our layouts become rather… boxy. A little boring, maybe?
So sometimes for emphasis, visual interest or plain ol’ fun, we’ll let certain elements break out of their container.

⏱Читать статью

AbortController в JavaScript

#почитать

AbortController в JS — инструмент, который позволяет отменять асинхронные операции в любой момент. Разберёмся, как он работает, где пригодится и какие у него есть проблемы.

⏱Читать статью

Reimagining Fluid Typography

#почитать

For many years, it has been ‘best practice’ to use relative units (especially em and rem) for sizing text. That’s great! But after playing around with my user preferences, I think we can improve on the common approaches.

⏱Читать статью

Ultimatum — еще один форк хромиума, с претензией

#почитать

Если коротко — Ultimatum уже помножил на ноль такие техники трекинга как hsts-pinning, favicons cache и вообще использование многих других кешей в трекинге. А также! Теперь можно поставить расширение с любого сайта, не только со сторов гугля, оперы или микрософта (с них кстати тоже можно — со всех!). А еще! Можно перехватывать сетевые запросы и подменять их полностью! Ну и так далее и тому подобное.

⏱Читать статью

Использование Proxy и Reflect для создания реактивных объектов в JavaScript

#почитать

Proxy — это встроенный объект в JavaScript, который позволяет создавать обертки для объектов и перехватывать стандартные операции с ними, такие как: доступ к свойствам, их изменение, удаление и другие. Это мощный инструмент, который можно использовать для реализации различных паттернов, например, для создания реактивных объектов, создания ленивая инициализации свойств, проверки прав доступа и выполнения других задач.

⏱Читать статью

Почему в target="_blank" нижнее подчеркивание?

#почитать

Вы когда-нибудь задумывались, зачем нужно подчеркивание в target="_blank", чтобы открыть ссылку в новой вкладке?
До появления HTML5 разработчики использовали <frameset> для SPA-подобной функциональности, разделяя окно на несколько фреймов, каждый из которых имел свое уникальное имя. Например, левый фрейм мог быть name="sidebar", а правый - name="content".
При нажатии на ссылку браузеру нужно было знать, в какой фрейм загружать содержимое. Вот тут-то и пригодился атрибут target.

⏱Читать статью

tabs-broadcast — библиотека для синхронизации вкладок

#почитать

tabs-broadcast — это открытая библиотека JavaScript, предназначенная для удобной коммуникации между вкладками браузера в одном приложении. Она решает распространенную проблему: как синхронизировать состояние и события между несколькими вкладками без лишних запросов к серверу и без сложных обходных путей. С помощью этой библиотеки разработчики могут организовать обмен сообщениями между вкладками так, будто это единое приложение, обеспечивая согласованность данных и оптимизируя нагрузку.

⏱Читать статью

Кастомные хуки в React

#почитать

React хуки произвели революцию в том, как мы пишем компоненты, особенно новые хуки из 19 версии для форм. Но помимо встроенных хуков, мы можем создавать собственные, чтобы переиспользовать логику между компонентами.

⏱Читать статью

ТОП-15 UI-библиотек для React в 2025 году

#почитать

Подробный обзор популярных UI-библиотек для React: от Material UI до Park UI. Сравнение возможностей, статистика использования, ключевые особенности каждой библиотеки.

⏱Читать статью

HTML & CSS for a One-Time Password Input

#почитать

You know those One Time Password inputs? The UI is typically 4 or 6 numbers with individual inputs. Just from today…

⏱Читать статью

Предзагрузка отзывчивых изображений

#почитать

Отзывчивые изображения и предзагрузка не очень хорошо сочетаются друг с другом. Когда используются отзывчивые изображения, браузер принимает разумные решения о том, какое изображение загрузить, основываясь на характеристиках устройства. Но перед тем, как эти решения будут приняты, должна произойти предварительная загрузка. Давайте узнаем, как сделать так, чтобы они работали вместе.

⏱Читать

Понимая реактивные системы: производные, эффекты и оптимизация

#почитать

С этой статьи я начну цикл материалов, посвященных базовым концепциям реактивности, основанных на идеях и примерах, которые подробно изложил автор SolidJS, Райан Карниато (Ryan Carniato), в своем блоге. Наша цель — разобрать фундаментальные принципы, лежащие в основе реактивных систем, и показать их применимость в различных контекстах.

⏱Читать статью

Дзен и публикация картинок

#почитать

Я - фуллстек-разработчик, который специализируется на проектах, со значительным уклоном в R&D. Мне часто бывает нужно публиковать побочные артефакты своей работы, такие как веб-страницы с документацией, техническими статьями, интерактивные демо, прототипы и эксперименты, какие-то промо-страницы и так далее. Естественно, все это должно быть проиллюстрировано скриншотами интерфейсов, диаграммами, различными примерами рендеров и прочими фотками котиков.
При этом, я предпочитаю подходы и практики, которые минимизируют переключения контекстов и разрастание количества сущностей, с которыми приходится взаимодействовать. Это позволяет мне быть более эффективным. Доки и статьи я пишу прямо в IDE, в формате markdown, храню их в git. Сборка и публикация в веб, происходит автоматически, через git-хуки и экшены. Это делает совместную работу с коллегами-технарями комфортной, а наши общие бизнес-процессы - более легковесными. В идеале, я хочу, чтобы картинки тоже были частью такого дзена. Но...

⏱Читать статью

Глубокое погружение в работу с таймерами в React

#почитать

При реализации таймеров в React важно учитывать:

Очистку ресурсов при размонтировании компонента
Корректную работу с замыканиями
Обработку изменений состояния компонента

⏱Читать статью

Fast & Smooth Third-Party Web Fonts

#почитать

If you're loading fonts from a popular third party provider like Google Fonts or Typekit, the stylesheet link-based loading snippets they offer are not great from a performance perspective. Like any ordinary stylesheet, they block page rendering while they are loading, and for all that delay, the CSS you get merely contains font-face definitions for fonts that may be subsequently downloaded if they're used in that page. These steps add up and can make it hard to keep sites rendering quickly.

⏱Читать статью

15 полезных JavaScript сниппетов на все случаи жизни

#почитать

Начинающим разработчикам часто приходится искать быстрые решения для типичных задач, таких как копирование текста в буфер обмена, обработка URL-параметров или управление элементами DOM. В этой статье мы собрали 15 полезных JavaScript сниппетов, которые помогут значительно упростить работу и ускорить разработку: эти небольшие, но эффективные фрагменты кода пригодятся почти в любом проекте.

⏱Читать статью

Эксперимент: Автоматическое включение View Transitions с MutationObserver

#почитать

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.

⏱Читать

navigator.clipboard — Новый асинхронный Clipboard API в JavaScript

#почитать

Копирование и вставка текста, изображений и файлов с помощью нового API navigator.clipboard

⏱Читать