Event loop для чайников: простыми словами о сложном механизме браузера

Event Loop — механизм, который управляет асинхронными операциями в JavaScript. Он позволяет обрабатывать задачи, не блокируя основной поток выполнения программы.

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

Верстка адаптивного сайта с HTML, CSS и JS

Отличное видео для тех, кто учится верстать. В этом видеоукроке вы узнаете, как верстать различные элементы сайта, создавать анимации и добиться адаптива.

Можно смотреть прямо тут, либо перейти на страницу автора.

#урок #фронтенд

Анимация глича для текста при наведении cоздана на чистом CSS. Посмотреть код и попробовать проект можно по ссылке:

https://codepen.io/oscar-jite/pen/yLwoeLE

#codepen

Современный Drag and Drop в React с помощью dndkit: создаем перетаскиваемое меню

DnD Kit — это удобная библиотека для создания функциональности drag-n-drop в React-приложениях. У нас на сайте появилась статья, в которой на понятных примерах показаны ключевые возможности библиотеки.

#react #dragndrop

Поэтому мы собрали их для вас! Разумеется, с ответами и пояснениями

Проверьте готовы ли вы к позиции мидла вместе с TeamLead Frontend Developer: https://tprg.ru/4tpo

#собеседвоание #js #json #css

Интерактивный гайд по CRDT

Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.

В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.

https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

#typescript #crdt

Чистая архитектура фронтенд приложений

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

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

https://habr.com/ru/articles/868058/

#фронтенд

Бедолага фронтендер(

@ithumor

Что такое AJAX и как он работает?

AJAX — технология, которая изменяет подход к созданию динамичных веб-приложений Она позволяет загружать данные асинхронно, что делает использование веб-страниц более комфортным и быстрым.

Здесь вы сможете узнать, как работают её основные компоненты, и какие преимущества она предоставляет разработчикам и пользователям.

#ajax

Сохраняем шпаргалку по HTTP-ответам

Как правильно изучать бэкенд-разработку

В этом видео вы разберетесь во всем, что касается Backend-разработки:

— рассмотрите наиболее используемые языки программирования и фреймворки;
— поймете какие языки используются в банках и ином энтерпрайзе, а какие в более скромных проектах;
— а также пройдетесь по списку вспомогательных в разработке технологий вроде баз данных, брокеров сообщений и систем виртуализации и контейнеризации.

#видео #бэкенд

Как упростить работу с React при помощи useLoaderData

Традиционный подход с использованием useState и useEffect для получения данных в React часто приводит к проблемам. Загвоздка заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению.

Вместо этого можно использовать хук useLoaderData из React Router. Он позволяет вынести логику загрузки данных в отдельную функцию-загрузчик. Это упрощает код, позволяет отделить логику загрузки от отображения и избавляет от необходимости отслеживать состояние загрузки.

Подробнее о том, как настроить useLoaderData: https://nuancesprog.ru/p/18962/

#react

Знакомство с Koa

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

В этой статье вы сможете ближе познакомиться с ним и посмотреть ключевые особенности.

#koajs #бэкенд

Что такое прототипные методы в JavaScript

Давайте сегодня разберем одну из ключевых концепций в JavaScript — прототипные методы. Что это такое и какую роль они играют в нашем коде?

В JavaScript каждое значение имеет прототип — объект, от которого оно «унаследует» свойства и методы. Это позволяет создавать структуры, которые могут делиться функциональностью. Прототипы помогают избежать дублирования кода и облегчить его поддержку.

Как работают прототипные методы?

Когда мы создаем объект, он может использовать методы, определенные в его прототипе. Например, у всех объектов, созданных на основе Array, есть общие методы, такие как .push() и .pop(). Эти методы определены в Array.prototype. Если вы не знаете, что такое prototype, подумайте о нем как о шаблоне для создания объектов.

Давайте рассмотрим простой пример. Мы создадим конструктор для объекта Person и добавим метод greet в его прототип:

function Person(name) {
    this.name = name;
}
// Добавляем метод greet в прототип Person
Person.prototype.greet = function() {
    console.log(`Привет, меня зовут ${this.name}!`);
};
// Создаем нового человека
const alice = new Person('Алиса');
const bob = new Person('Боб');
// Вызываем метод greet
alice.greet(); // Привет, меня зовут Алиса!
bob.greet();   // Привет, меня зовут Боб!

В этом примере метод greet не дублируется для каждого отдельного объекта, а хранится в прототипе. Это экономит память и делает код более организованным.

Использование прототипов полезно по нескольким причинам:

1. Экономия памяти. Методы хранятся в одном месте, а не копируются в каждый объект.
2. Упрощение кода. Легче добавлять, изменять и удалять методы.
3. Наследование. Можно создавать иерархии объектов, где один объект наследует свойства и методы другого.

Если у вас есть вопросы или хотите обсудить тему подробнее, пишите в комментариях!

#простымисловами

NPM внедрил «Автообновление всех зависимостей» — теперь npm install всегда ставит последние версии

Команда NPM объявила о запуске новой функции AutoUpdate, которая автоматически обновляет все зависимости до последних версий при каждом выполнении npm install. Теперь, вместо установки версий, указанных в package-lock.json, NPM будет скачивать самые актуальные релизы всех пакетов. Разработчики называют это шагом к «более динамичной и современной экосистеме».

По словам представителя NPM Марка Сандерсона, новая функция решает проблему устаревших зависимостей:

«Разработчики слишком редко обновляют пакеты, что ведёт к уязвимостям и техническому долгу. Теперь экосистема всегда будет на передовой.»

Функция уже включена по умолчанию в последней версии NPM и распространяется с Node.js 22. Пока что автообновление ещё можно отключить, но скоро такую возможность уберут. В NPM считают, что это замотивирует разработчиков пакетов уделять больше внимания совместимости разных версий.

#новости #npm