JavaScript *

Эта статья предназначена в первую очередь для веб-разработчиков. Я не являюсь экспертом в области сетей, администрирования или DevOps, поэтому представленный материал не углубляется в сетевые аспекты.

Из любопытства, я как то задался вопросом практического использования разных номеров портов: что они означают для разработчиков, почему используются определенные порты, и какие приложения чаще всего запускаются на них. Цель статьи — пролить немного света на эти “магические” циферки с точки зрения их прикладного применения веб-разработчиками.

Исторически приложения на Node.js (например, с использованием фреймворков Nest.js или Express) и Webpack по умолчанию запускаются на 3000 порту, если не вносить изменения в базовую конфигурацию. Vite, напротив, изначально использует порт 5173. Это может быть связано с отсылкой к названию "Vite" (если подключить немного воображения).

С технической точки зрения нет разницы, на каком порту запускать локальный сервер для разработки — это может быть 1050, 10900 или любой другой. Главное, чтобы порт был:

Приветствуют читателей Хабра. Меня зовут Олег Иванов, последние пару лет являюсь фронтенд-разработчиком в ит-компании WMT Group. На разных этапах работы я сталкивался с , нашел способ упросить . В этой статье не будет серьёзных рассуждений, глобальных задач и историй успеха. Скандалов, интриг и расследований из глобального ит-мира тоже не планируется.

Вместо этого мы напишем функцию-счётчика на JavaScript. Несколько раз, причём всякий раз по-разному с пользой.

Казалось бы, задача простейшая, даже старый-добрый to-do list куда сложнее и заковыристее. Предложение написать функцию-счётчика на собеседованиях уже классика, которая делается на автомате. Уверен, что большинство опытных воинов фронтенда либо помнят традиционное решение, либо по памяти накатают его в течение 30 секунд. Традиционно эту задачу решают замыканием. Однако, почему именно им? А если попробовать сделать это как-то иначе? Я попробовал и реализовал счётчик несколькими разными (подчас неочевидными) способами, попутно спросив совета у нейросетей, а также подключив тяжёлую артиллерию в лице Babel, TypeScript и даже WebAssembly. Давайте посмотрим, что получилось!

Привет! Меня зовут Александр, я фронтенд‑разработчик в Точке. Моя команда занимается разработкой «системы построения интерфейсов» aka UI‑кита. В статье расскажу, как мы решали вопрос выгрузки многоцветных логотипов в формате SVG из Figma и добавления к ним поддержки тёмной темы.

В последнее время большинство громких новостей в экосистеме React связаны с Server Components, Server Actions и в целом с Server Side Rendering и Next.js.

И вот вопрос, который беспокоил меня лично — что будет с уже созданными за последние 10 лет Single Page Applications на React? Неужели пора о них забыть? Действительно ли команда разработчиков React теперь занимается развитием только лишь SSR, или всё же в мире SPA тоже происходят обновления и они тоже развиваются?

Я решил взглянуть на список изменений в React 19 через призму применимости этих изменений к SPA. Вот что я отметил.

Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.

Эта статья поможет вам разобраться, почему возникают такие трудности, и покажет, как правильно интегрировать CSS‑фреймворки в Angular. Мы рассмотрим ключевые проблемы, разберем их решения и реализуем стильное, реактивное поле ввода с применением лучших практик Angular.

Привет, React-энтузиаст! Случалось ли тебе писать логику для форм, где нужно не только обработать кучу полей, но и синхронизировать их с асинхронными действиями (запросы, загрузка данных, показ успеха или ошибок)? Если да, то, возможно, ты уже слышал об экспериментальном хуке useFormState в React. Однако на смену ему пришёл более мощный инструмент - useActionState. В статье обсуждается, почему прежний подход ушёл на пенсию, чем хорош новый, и как он может упростить жизнь каждому фронтенд-разработчику.

Дисклеймер: хотел создать скромный пост, а не статью, но не справился с управлением новым редактором. А старый редактор не поддерживает посты.

Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).

Вероятно каждый программист или компания, сталкивались с мыслями о своей крутости или хотя бы крутости своих алгоритмов 😎. Разумеется, в этом случае может возникнуть соответствующее нежелание делиться разработками с широкой аудиторией. Данная проблема минимизируется переносом части кода на сервер (если речь идёт о клиент-серверных приложениях). Однако, такой подход не всегда применим, и порой обстоятельства вынуждают нас оставлять чувствительные участки кода прямо на виду.

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

Всемирная паутина (WWW) — это не просто набор веб‑страниц, это революция, изменившая наше восприятие информации и общения. С момента своего появления в начале 1990-х годов WWW кардинально трансформировала мир, открыв новые горизонты для бизнеса, образования и повседневной жизни. История веб пестрит взлетами, падениями и уходами в крайности, но здесь мы пройдемся только по самым ярким моментам! Следить за эволюцией технологии, которая навсегда изменила наше общество, мы будем глазами фронтенд‑разработчика.

Всем привет! На связи Spectr и рубрика «Что читают наши разработчики». Сегодня разберем оптимизацию функциональных компонентов за счет мемоизации функций обратного вызова с помощью useCallback().

Независимо от того, начинающий вы разработчик React или хотите углубить свои знания, это руководство предоставит вам полезную информацию о useCallback(), включая его синтаксис, применение, распространенные случаи использования и лучшие практики. Мы также сравним его с другим хуком — useMemo()

Я ненавижу код бенчмаркинга, как и любой другой человек. Гораздо веселее притвориться, что твоё кэширование значения увеличило производительность на 1000%, чем проверять это тестами. Увы, бенчмаркинг JavaScript по-прежнему необходим, особенно потому, что JavaScript используется (когда не должен?) во всё более чувствительных к производительности приложениях. К сожалению, из-за множества базовых архитектурных решений языка, JavaScript никак не упрощает выполнение бенчмаркинга.

Асинхронное программирование — это тема, которая часто вызывает трудности у новичков JS. Неопытные разработчики сталкиваются со множеством вопросов, связанных с обработкой параллельных операций, управлением потоками данных и «адом коллбэков». Тем не менее, понимание и освоение асинхронности является важным шагом на пути к эффективной разработке современных веб-приложений. В этой статье разберем основные инструменты, такие как промисы и async/await, и покажем, как они могут облегчить обработку данных в фоновом режиме и повысить читаемость кода.

Привет, Хабр! Меня зовут Олег Волков, я ведущий frontend-разработчик IBS. В этой статье я хочу поделиться выжимкой из книги Кайла Симпсона «Вы не знаете JS. Асинхронная обработка & оптимизация». Лично мне она открыла глаза. Уверен, что другие JS-специалисты найдут ее не менее полезной!

Ничто так не бесит при изучении новых пакетов/библиотек, как неработающие примеры из официальной документации. До последнего не веришь, что авторы библиотеки так лоханулись с исходниками примеров. Считаешь, что программисты потратили кучу своего времени на разработку, тестирование и продвижение пакета. И что они не могли выложить неработающие примеры. А если примеры не работают, то значит что-то не так у тебя. То ли VPN новый глючит, то ли антивирус душит библиотеку, то ли устаревшие версии какого-то ПО/драйверов/библиотек конфликтуют. В данной статье рассказывается о моем опыте делания рабочим примера npm пакета 'csrf-csrf' из официальной документации.

Кому нужно срочно - вот github с исходниками: https://github.com/korvintaG/csrf-csrf_demo. Важно - обращайте внимание на комментарии, особенно те, в которых много звездочек.

Всем привет! У платформы МТС Exolve есть сообщество, которое часто делится полезными гайдами от прокачки серверов до создания своих приложений. Наиболее интересные и подробные продолжаем размещать в нашем хабе.

В этом гайде пользователь на простом примере рассматривает, как с помощью микроконтроллера NodeMCU (ESP8266) и кнопки отправлять SMS через HTTP POST-запросы. Это полезно для создания различных IoT-устройств — мониторинга и умных домов.

Привет, Хабр!

Когда дело доходит до коллекций данных в JavaScript, большинство разработчиков сразу вспоминают про массивы, объекты, Map или Set. Но есть и другие, менее известные структуры данных, которые можно назвать «инструментами для особых случаев» — это WeakMap и WeakSet.

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

Однако их область применения не ограничивается только управлением памятью.

Привет, друзья!

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

Сегодня мы поговорим об алгоритмах для работы со строками и поиска.

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

Интересно? Тогда прошу под кат.

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

Сложно переоценить пользу JS, который делает сайты интерактивными, удобными и современными. В то же время опасность, которая в нем таится, обычно ускользает от внимания. Эта статья — попытка заглянуть монстру в глаза.