Как уменьшить боль от this в классах javascript

#почитать

На службе была поставлена задача подготовить и передать клиенту js-библиотеку, которая состояла из несколько классов. Каких-то особых трудностей не ожидалось, поскольку библиотека использовалась в нашей конторе уже не один год и была тщательно оттестирована.

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

Но одна вещь останавливала меня — часть методов ключевого класса для обращения к другим свойствам и функциям своего класса использовала this. Кайл Симпсон удачно назвал такие методы this-aware functions. И неправильный вызов этих функций мог создать проблемы для разработчиков клиента.

⏱Читать

Гиф в 2025 году

#почитать

Вам нужно автовоспроизводящееся зацикленное видео без звука? В разговорной речи именно такое значение имеет слово «гифка». Слово прижилось, но сам формат изображения уже древний и устаревший. Существует множество способов добиться такого результата, но ясно одно: больше нет причин использовать громоздкий формат .gif.

⏱Читать

Теперь CSS функция attr() поддерживает типы

#почитать

CSS функция attr() позволяет извлечь значение атрибута выбранного HTML элемента и использовать его в качестве значения CSS свойства.

⏱Читать

Безопасное взаимодействие с API: от ошибок к стабильности

#почитать

Каждый frontend-разработчик сталкивался с ошибкой вида TypeError: Cannot read property 'name' of undefined. Это часть целого класса ошибок в JavaScript, возникающих из-за несоответствия фактического формата данных ожидаемому. Расскажу, как избавиться от подобных проблем и добиться стабильности, внедрив три ключевых шага: API-слой, Backend-for-Frontend (BFF) и проверку с помощью Zod.

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

Popover = hint

#почитать

API Popover, представленный в Chrome 114, позволяет создавать доступные плавающие пользовательские интерфейсы, такие как меню и всплывающие подсказки. По умолчанию popover="auto" управляет функциями отключения лёгкого закрытия и управления фокусом, не требуя дополнительных сценариев, как описано в разделе Знакомство с API Popover. При открытии поповера с popover="auto" все остальные безпредковые поповеры с popover="auto" будут закрыты, что обеспечивает эргономичность API, который делает наиболее разумные вещи.

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

Кнопки с несколькими состояниями

#почитать

Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.

⏱Читать

Node.js — асинхронность по умолчанию

#почитать

Среда Node.js асинхронна по своей природе и эта особенность, позволяет реализовывать приложения с высокой степенью параллелизма, способных обрабатывать множество запросов одновременно. Весь этот параллелизм, однопоточен, а значит не будет возникать проблем с отладкой и синхронизацией, множества исполняемых потоков. Таким образом мы получаем параллелизм, присущий другим языкам (Java, C#), но никак не можем угодить в состояние гонки (race condition), так как вся работа происходит в одном потоке. И при этом, среда Node.js крайне экономна в вопросе оперативной памяти!

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

Всё, что нужно знать о работе с API в JavaScript: пошаговый разбор

#почитать

Работа с API — это основа веб-разработки. Если вы хотите получать данные с сервера, отправлять информацию или взаимодействовать с внешними сервисами (например, картами Google, платёжными системами или погодными сервисами), вам не обойтись без этого навыка. Разберём работу с API на практике: от базовых запросов до обработки ошибок и аутентификации.

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

Что может сломать CSS свойство aspect-ratio

#почитать

В CSS есть свойство aspect-ratio, которое получило полную поддержку примерно в 2021 году. Это свойство дает гораздо лучший дизайнерский результат, чем принудительное изменение размеров. При использовании элементов вроде <video> задача "Мне нужен здесь квадрат" или "Мне нужен размер 16:9" - это вполне разумные требования к дизайну. Особенно в нестабильной среде адаптивной верстки, когда вы намеренно стараетесь не думать о точных размерах, потому что знаете, что они могут измениться.

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

7 способов реализовать наследование в JS

#почитать

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

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

Regex стала лучше - История и будущее регулярных выражений в JavaScript

#почитать

В стандарте ECMAScript 3, принятом в 1999 году, в язык JavaScript были добавлены регулярные выражения, вдохновлённые Perl. Несмотря на то, что там было достаточно всего необходимого, чтобы сделать регулярные выражения довольно полезными (и в основном совместимыми с другими языками), тогда уже были некоторые существенные недостатки. И пока JavaScript ждал 10 лет до выхода следующей стандартизированной версии ES5, другие языки программирования и реализации регулярных выражений добавили полезные функции, которые сделали их регулярные выражения более мощными и читаемыми.
Но это было тогда.
А вы знали, что почти в каждой новой версии JavaScript есть как минимум небольшие улучшения и для регулярных выражений?

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

Советы начинающим разработчикам

#почитать

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

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

Обзор наследования в JavaScript

#почитать

В JavaScript наследование является важным способом повторного использования кода и управления сложными объектными отношениями. Благодаря модели, основанной на прототипах, в JavaScript существует несколько шаблонов наследования, обладающих уникальными преимуществами. Давайте рассмотрим эти техники и поймём, когда какая из них наиболее эффективна.

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

Разворачиваем микрофронты на Next.js

#почитать

По бизнес-требованиям нам нужно было реализовать админ-панель. У нас в компании много проектов с частым обновлением контента. А ещё много команд, которые хотят не только пользоваться фича-тоглами, справочниками и другим общедоступным функционалом, но и встраивать что-то своё.
Такую админ-панель можно было бы развернуть через NPM-модули и раздать всем разработчикам доступы к пакетам. Но мы решили пойти другим путём — создать единую админ-панель, куда команды могли бы встраивать свои части функционала. Так и появилась идея с микрофронтами. У нас получился один проект, с которым могут работать все разработчики — это позволило масштабировать разработку и разделить зоны ответственности, но об этом дальше.

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

Простой интернет-магазин на HTML, CSS, JS с отправкой данных на почту

#почитать

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

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

▫️Собеседование сеньора фронтендера

#посмотреть

Вопросы на собеседование по React, javascript, frontend.

⏱Смотреть на YouTube ⏱️1 час

Веб-приложения будущего: что нужно знать о WebAssembly

#почитать

Часто при разговоре о веб-разработке на ум приходят JavaScript и различные фреймворки. Но что, если бы веб-приложения могли запускаться с той же производительностью, что и нативные, а разработчики могли бы писать их на Rust, C++ или Go? Вот тут-то на сцену и выходит WebAssembly (Wasm) — инструмент, который позволяет взглянуть на веб-разработку иначе. Он открывает возможности для выполнения сложных вычислений, запуска игр, виртуальных машин и приложений для анализа данных прямо в браузере. Все это — с высокой производительностью и кроссплатформенностью, от настольных компьютеров до мобильных устройств.

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