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

#почитать

Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью 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. Филип Браунен объясняет, почему это происходит, и предлагает решение.
Недавно одна студентка попросила меня помочь с кажущейся простой задачей. Она работала над сайтом кофейни с липким заголовком и хотела, чтобы раздел с информацией о заведении располагался под этим заголовком и занимал оставшееся вертикальное пространство в окне просмотра.
Кажется, это должно быть довольно просто, не так ли? Я был уверен (читай: самоуверен), что решение этой задачи займёт всего пару минут, но оказалось, что она гораздо сложнее, чем я предполагал.

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

Способы разделения длительных задач в JavaScript

#почитать

Легко "уничтожить" пользовательский опыт, позволив длительной дорогой задаче захватить основной поток (main thread). Неважно, насколько сложным является приложение, цикл событий может выполнять только одну задачу за раз. Пока выполняется одна задача, другие ждут своей очереди. Как правило, задача выполняется настолько быстро, что пользователь ничего не замечает. Но так бывает не всегда.

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