Делегирование событий в JavaScript: когда обычного всплытия недостаточно

По мере роста фронтенд-приложений управление пользовательскими взаимодействиями становится все более важным. Добавление обработчика событий на каждый интерактивный элемент — плохая практика: это усложняет код, увеличивает расход памяти и снижает производительность. Здесь на помощь приходит делегирование событий (event delegation).

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

#javascript

Деструктуризация в JavaScript

Деструктуризация — это удобный инструмент получения данныхв JS. Он позволяет «распаковывать» сразу много значений из массивов или объектов во множество переменных. Это, например, активно используется в React-хуках.

Простейший пример:

const timers = [10, 20, 30];
const [first, second, third] = timers;

Здесь мы одной строкой задаем значения из массива сразу трём переменным — first, second, third.

Подробнее о возможностях и фишках деструктуризации можно прочитать в этой статье.

#javascript #основы

Современный способ разработки серверов на JS

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

Но сегодня существует более современный способ создания сервера, которому не нужно привязываться к сокету. О нём в этой статье.

#nodejs #javascript #бэкенд

Вам больше не нужен JavaScript

И не потому, что вы будете писать на другом языке. Просто сегодня CSS и HTML могут заменить значительную часть JS-кода. Здесь собраны интересные решения CSS, которые сегодня отлично работают и освобождают вас от необходимости подтягивать различные JS-файлы.

Подробнее.

#фронтенд #безопасность #javascript #css

Практика JavaScript: делаем целый сайт за 2 часа с нуля

Ловите полезный двухчасовой курс по созданию сайта с JavaScript, где вы:

— напишите с нуля приложение, которое сможете добавить в портфолио;
— научитесь настраивать рабочее окружение;
— поймёте зачем на самом деле нужны классы в JavaScript);
— разберётесь как принципы SOLID помогают писать расширяемый и поддерживаемый код;
— поработаете над оптимизацией приложения;
— задеплоите приложение на хостинг и сделаете многое другое.

Видео взято с YouTube, поэтому если предпочитаете смотреть там, то вот ссылка: youtu.be/0ViiJ8qTCFM

#видео #курс #javascript

JavaScript, отдохни! Делаем интерактивные вещи на HTML и CSS

Продолжаем делиться современными возможностями HTML и JS. Здесь собрали ещё пачку кейсов, где вы можете сократить количество JS-кода и облегчить свой сайт.

#javascript #html #css

Кто есть кто: Обратные вызовы, промисы и асинхронные функции

В JavaScript есть темы, которые могут сложно поддаваться пониманию. В этой статье речь как раз пойдёт о таких.

Что это вообще такое? В каких случаях используются? Как работают? Каков их внутренний механизм? В этой статье вы раз и навсегда разберёте суть этих процессов.

#javascript

JavaScript на блокчейне: как язык браузера стал сердцем Web3

Казалось бы, JavaScript и блокчейн — вещи из разных миров: один создавался для кнопок на веб-страницах, другой — для распределённых систем и шифрования. Но именно JavaScript оказался ключом, который открыл Web3 для миллионов разработчиков.

Здесь мы разбираемся, как язык фронтенда постепенно взял под контроль децентрализованный интернет — от кошельков до нод и смарт-контрактов.

#web3 #javascript

Учимся работать с DOM в JS

Урок для начинающих, который поможет вам разобраться, как работать с элементами DOM-дерева в JavaScript. За полчаса вы пройдёте 26 упражнений, где вы научитесь:

— создавать и удалять элементы на нашей странице;
— динамически создавать HTML-разметку;
— добавлять классы к элементам;
— использовать обработчики событий на созданных элементах
и многому другому.

Смотреть можно здесь или на YouTube.

#видео #javascript #начинающим

Как с помощью JavaScript убрать ботов, чтобы A/B-тесты были точнее

Боты сильно могут искажать реальные данные в любой сфере — будь то каналы в Telegram (знаю по себе) или статистика сайта. Поэтому важно иметь возможность исключить этих ботов из общей выборки.

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

#javascript

Только посмотрите, что творит эта библиотека

TypeGPU — это модульный и открытый набор инструментов для WebGPU с расширенным выводом типов и возможностью писать шейдеры на TypeScript. То есть вы можете использовать возможности GPU для вашего сайта, не погружаясь в нюансы низкоуровневого API.

Ключевая фишка — директива 'use gpu', которая компилирует JS в WSGL для запуска на графическом процессоре.

Подробнее о библиотеке можно почитать здесь.

#javascript #typescript #библиотека

Как лучше делать отладку код JavaScript в Chrome DevTools

Поиск и исправление ошибок в JS может быть весьма ресурсозатратным мероприятием. Новичкам этот процесс может показаться неподъёмным камнем.

Но только до знакомства с отладкой в инструментах разработчика, встроенных в браузер. О ней вы узнаете в этой статье. Причём не о привычной всем console.log(), а куда более эффективных способах.

#javascript #qa

Для JavaScript появился ещё один движок

Создал его разработчик полностью в соло. Движок называется Brimstone и написан полностью на Rust.

Несмотря на небольшой вес, Brimstone очень быстрый и на 97% реализует спецификацию ECMAScript, что позволяет использовать его практически с любым кодом. Представляет собой виртуальную машину на основе байт-кода с современной сборкой мусора, собранную по образцу V8.

Такой движок отлично подойдёт для какого-нибудь WebView, где требуется легковесный движок. Подробнее можно прочитать на странице проекта. Там же лежит инструкция по установке.

#javascript

Кстати, пока искал информацию про Brimstone, обнаружил сайт с каталогом JavaScript-движков

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

Полезно, если есть необходимость выбирать движок для проекта.

Зоопарк движков можно изучить по ссылке: https://zoo.js.org/

#javascript

This is JavaScript: методы объектов и контекст «this»

Полезная статья для новичков в JavaScript. С this вам так или иначе предстоит столкнуться во время разработки, поэтому нужно уметь с ним работать и понимать его. Тут вы узнаете про методы объектов и их отличия от функций, как this помогает работать с данными объекта внутри методов и получите полезные советы.

#javascript #основы

Разбираемся, как работает цикл событий в JS

Event Loop Visualizer — очень удобная песочница, в которой можно посмотреть, как работает цикл событий и асинхронный код. Просто берёте готовый или вставляете свой, запускаете его и смотрите, что происходит в очереди вызовов, цикле, API-запросах и так далее.

Причём вы также можете попробовать угадать в каком порядке будет выполнен код. Для этого есть отдельное окошко.

Пробуем тут.

#javascript

Перестаньте использовать JavaScript для решения проблем с CSS

Недостаток знаний подталкивает людей к чрезмерному усложнению, и рано или поздно это сказывается на производительности. Например, content-visibility: auto. Он делает то же, что и React-Window, без использования JavaScript и с минимальным весом пакета. Та же история с современными единицами измерения области просмотра (dvh, svh, lvh), которые позволяют избавиться от window.innerHeight в коде. Обе функции получили 90 % глобальной поддержки в 2024 году. Тем не менее мы по-прежнему используем JavaScript в силу привычки.

Эта статья призвана исправить это и показать, что вам не нужно столько JS-кода, как вы привыкли.

#javascript #css

Создаём портфолио в формате 2D-игры на JavaScript

Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.

Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom

#javascript

Полезная библиотека для понимания работы JS

js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

@tproger_web #javascript #инструменты

Новогодний генератор снежинок на JS

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

Посмотреть принцип работы кода можно на странице проекта.

#codepen #javascript