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) — инструмент, который позволяет взглянуть на веб-разработку иначе. Он открывает возможности для выполнения сложных вычислений, запуска игр, виртуальных машин и приложений для анализа данных прямо в браузере. Все это — с высокой производительностью и кроссплатформенностью, от настольных компьютеров до мобильных устройств.

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

Алгебраические эффекты на Javascript

#почитать

Первоначально в этой статье я хотел рассказать об интересном подходе к построению программ, описанному в книге Sandy Maguire, Algebra-Driven Design. Подход позволяет строить программы на основе абстрактных математических структур и законов. Это позволяет разработать обобщенные подходы к их созданию и тестированию. Но потом я понял, что в этом мало смысла без объяснения, почему такой подход в принципе имеет право на существование. В книге для примеров используется Haskell - ленивый, чистый функциональный язык, имеющий мало отношения к языкам, которые широко применяются на практике. Распространено мнение, что приемы, используемые в Haskell, существуют в основном для преодоления его же недостатков и в других языках не нужны. Например, про монады пишут, что это оторванная от реальной жизни абстракция, которую не встретить в повседневной работе. Нет ничего более далекого от истины.

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

Работа с куки-файлами хуже сапёрного дела

#почитать

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

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

От первого байта до конверсии: большой гайд по ускорению сайта

#почитать

Быстрый сайт - что-то очень очевидное и простое - сайт загружается быстро и не зависает. “3 секунды ожидания и вы начинаете терять пользователей” - пожалуй это правило слышал любой веб-разработчик. Но это правило лишь вершина айсберга - как в вопросе причин потери клиентов, так и в реальном результате.

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

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

Интерактивные метки на изображении JS

#почитать

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

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

Липкие заголовки и полновысотные элементы: сложная комбинация

#почитать

Липкое (sticky) позиционирование - одна из тех функций CSS, которая довольно чувствительна и может быть сведена на нет множеством факторов. И вот один из этих факторов, который стоит добавить в ваш мысленный каталог: липкие элементы плохо работают, если им приходится вместе с другими элементами формировать общую высоту, например, 100vh. Филип Браунен объясняет, почему это происходит, и предлагает решение.
Недавно одна студентка попросила меня помочь с кажущейся простой задачей. Она работала над сайтом кофейни с липким заголовком и хотела, чтобы раздел с информацией о заведении располагался под этим заголовком и занимал оставшееся вертикальное пространство в окне просмотра.
Кажется, это должно быть довольно просто, не так ли? Я был уверен (читай: самоуверен), что решение этой задачи займёт всего пару минут, но оказалось, что она гораздо сложнее, чем я предполагал.

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