«Хватит писать try/catch вокруг fetch: история о том, как я устал ловить ошибки»

Этот мем смешной, пока не осознаешь, что в реальных проектах мы именно так и поступаем. Только заворачиваем не весь код сразу, а каждый HTTP-запрос по отдельности.

Пишешь fetch и рефлекторно добавляешь try/catch. Где-то словил TypeError, где-то таймаут, где-то сервер вернул 500. В итоге половина кода превращается в кашу проверок, а другая половина — в обработчики ошибок. Но проблема не в том, что мы ловим ошибки. Проблема в том, что fetch заставляет нас их ловить везде и всегда.

Библиотека safe-fetch решает эту проблема. Её задача проста: убрать try/catch из проектов навсегда. Как это работает и какие плюсы дает — в материале.

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

Делегирование событий в 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 #инструменты