Что такое микро и макро задачи в JavaScript?

В JavaScript задачи делятся на микрозадачи и макрозадачи, которые обрабатываются в цикле событий (Event Loop). Микрозадачи (например, обработчики Promise.then(), process.nextTick() в Node.js и MutationObserver) имеют высокий приоритет и выполняются сразу после текущего кода, до перерисовки страницы. Они добавляются в специальную очередь микрозадач и обрабатываются перед любыми операциями.

Макрозадачи (например, setTimeout, setInterval, requestAnimationFrame, а также события ввода и сетевые запросы) помещаются в основную очередь событий и выполняются только после того, как все микрозадачи обработаны. Эти задачи запускаются позже, между циклами перерисовки страницы.

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

Made in HTML/CSS

Margin и padding в CSS: как сразу сделать грамотно

Статья посвящена разъяснению ключевых отличий между свойствами margin и padding в CSS, а также предоставляет практические рекомендации для их использования в веб-дизайне.

Разбираемся в ключевых отличиях между этими важнейшими свойствами, а также знакомимся с трюками, чтобы UI / UX вашего сайта стал еще круче и грамотнее.

🌐 Читать статью

Made in HTML/CSS

В чем разница между sessionStorage и localStorage?

Разница между sessionStorage и localStorage заключается в следующем:

Время хранения данных. LocalStorage сохраняет данные на неопределённый срок, пока пользователь или скрипт явно не удалит их. SessionStorage сохраняет данные только на время текущей сессии (вкладки или окна браузера).

Область видимости. Данные в localStorage доступны во всех вкладках и окнах одного и того же домена. Данные в sessionStorage доступны только в текущей вкладке или окне.

Применение. LocalStorage используется для хранения данных, которые должны сохраняться между сессиями, таких как настройки пользователя или данные корзины покупок. SessionStorage применяется для хранения временных данных, которые нужны только в течение текущей сессии

Made in HTML/CSS

5 HTML-атрибутов для улучшения пользовательского опыта и SEO

Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм – все, что нужно современному разработчику

🌐 Читать статью

Made in HTML/CSS

Что такое BEM?

BEM (Блок, Элемент, Модификатор) — это методология веб-разработки, которая предлагает структурированный подход к созданию интерфейсов путем их разделения на независимые компоненты. Основные понятия БЭМ:

Блок — независимая часть интерфейса, которая может использоваться повторно в разных местах проекта (например, кнопка, меню, карточка товара).

Элемент — часть блока, которая не может существовать отдельно от своего родителя (например, пункт меню внутри блока меню).

Модификатор — флаг, который изменяет внешний вид или поведение блока или элемента (например, активная кнопка или кнопка с прозрачным фоном).

БЭМ позволяет разрабатывать масштабируемые и поддерживаемые проекты, упрощает повторное использование кода и делает его более понятным для других разработчиков.

Made in HTML/CSS

px to rem - плагин для VS Code, позволяющий конвертировать значения из пикселей (px) в относительные единицы (rem) и наоборот прямо в редакторе кода, что полезно для веб-разработчиков при создании адаптивного дизайна

Made in HTML/CSS

Проект с интерактивными элементами

Этот CSS-код создает стильную веб-страницу с шестью карточками, каждая из которых имеет уникальную тень. Каждая карточка имеет фиксированные размеры, закруглённые углы и белый фон. Текст на карточках отображается с градиентным эффектом, а при наведении курсора на карточку, её тень меняется.

Таким образом, этот проект показывает, как можно использовать современные CSS-технологии, такие как переменные, Flexbox и Grid, чтобы создать адаптивный и интерактивный дизайн.

Made in HTML/CSS

Функция "debounce" ограничивает частоту вызовов другой функции, гарантируя её выполнение только после периода неактивности заданной длительности. Это особенно полезно для обработки событий, которые срабатывают часто, таких как изменение размера окна или ввод текста.

Например, при использовании "debounce" с событием "resize", функция будет вызвана лишь после того, как пользователь прекратит изменять размер окна на определённое время (200 мс в примере). Это снижает нагрузку на систему и повышает производительность, так как исключает избыточные вызовы функции.

Made in HTML/CSS

Функция "throttle" ограничивает частоту выполнения другой функции, гарантируя её вызов не чаще одного раза за заданный период времени. Это особенно полезно для обработки событий, которые происходят часто, таких как прокрутка страницы или изменение размера окна. В отличие от "debounce", "throttle" выполняет функцию регулярно через фиксированные интервалы, если событие продолжает срабатывать.

Например, при использовании "throttle" с событием "scroll", функция будет вызываться только один раз каждые 200 мс, даже если событие срабатывает гораздо чаще. Это снижает нагрузку на систему и повышает производительность, сохраняя отзывчивость интерфейса.

Полезная статья о том, как добавлять иконки из Figma на сторонний сайт 4мя способами. Также присутствует видео для тех, кто любит визуальную демонстрацию.

Как дополнение, разбираются положительные и отрицательные стороны каждого способа

🌐 Читать статью

Made in HTML/CSS

Что такое ECMAScript?

ECMAScript (ES) представляет собой стандарт, который определяет язык программирования JavaScript. Он описывает синтаксис, типы данных, структуры управления, операторы и другие основные элементы языка.

Например, стандарт ECMAScript 2015 (ES6) привнес множество новых возможностей в язык, таких как стрелочные функции, классы, блочная область видимости переменных let и const, деструктуризация, шаблонные строки и многое другое. В дальнейших версиях стандарта были добавлены дополнительные функции, такие как async/await для управления асинхронным кодом, операторы распространения (spread operator) и рест (rest operator), улучшенные методы массивов и многое другое.

Made in HTML/CSS

WebStorm оптимизирован для кодирования с HTML, CSS, Node.js, JS, другими известными технологиями, связанными с JavaScript.

К его мощным функциям относятся автозавершение кода, выявление багов, оперативная навигация по коду, объединение с контролем версий, в Git, GitHub.

Made in HTML/CSS

Чем отличаются JavaScript и ECMAScript?

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

- Ecma International : организация, создающая стандарты для технологий.
- ECMA-262 : стандарт, изданный Ecma International, который описывает спецификацию языка программирования
- ECMAScript : это сам язык программирования, описанный в стандарте ECMA-262.
- JavaScript : реализация языка ECMAScript, созданная компанией Netscape (ныне Mozilla) и используемая в браузерах.

🌐 Читать статью

Made in HTML/CSS