Липкие заголовки и полновысотные элементы: сложная комбинация

#почитать

Липкое (sticky) позиционирование - одна из тех функций CSS, которая довольно чувствительна и может быть сведена на нет множеством факторов. И вот один из этих факторов, который стоит добавить в ваш мысленный каталог: липкие элементы плохо работают, если им приходится вместе с другими элементами формировать общую высоту, например, 100vh. Филип Браунен объясняет, почему это происходит, и предлагает решение.
Недавно одна студентка попросила меня помочь с кажущейся простой задачей. Она работала над сайтом кофейни с липким заголовком и хотела, чтобы раздел с информацией о заведении располагался под этим заголовком и занимал оставшееся вертикальное пространство в окне просмотра.
Кажется, это должно быть довольно просто, не так ли? Я был уверен (читай: самоуверен), что решение этой задачи займёт всего пару минут, но оказалось, что она гораздо сложнее, чем я предполагал.

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

Способы разделения длительных задач в JavaScript

#почитать

Легко "уничтожить" пользовательский опыт, позволив длительной дорогой задаче захватить основной поток (main thread). Неважно, насколько сложным является приложение, цикл событий может выполнять только одну задачу за раз. Пока выполняется одна задача, другие ждут своей очереди. Как правило, задача выполняется настолько быстро, что пользователь ничего не замечает. Но так бывает не всегда.

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

Генераторы в 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.

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