Обновить
292.71

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

View Transitions API

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели16K

Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!

Читать далее

Я ненавижу React

Время на прочтение8 мин
Охват и читатели20K

Да, я его действительно ненавижу. Мне кажется, что команда React'а презирает разработчиков, и я презираю их в ответ. Все их решения направлены на то, чтобы сделать разработку сложнее, медленнее и непредсказуемее. На сегодняшний день они даже умудрились сломать работу JavaScript. Уму непостижимо, почему им это сходит с рук.

Читать далее

Ссылочный тип данных в JavaScript: ключ к эффективному коду

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели13K

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

Привет, Хабр! Меня зовут Александр Дудукало, я автор базового курса по JavaScript.  В этой статье я простыми словами расскажу, как работают ссылки, почему это важно знать и как правильно копировать объекты.

Читать далее

Хватит это терпеть: как я написал Telegram-бота для VPS, который не бесит

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели11K

Всем привет! Меня, как и многих здесь, в какой-то момент достало. Достало логиниться по SSH, чтобы проверить htop. Достало запускать Termius на телефоне, чтобы сделать sudo reboot зависшему инстансу. Достало ставить тяжелые веб-панели, которые жрут ресурсы и открывают лишний порт, только ради того, чтобы посмотреть загрузку диска.

Я админю несколько VPS. На одних крутятся пет-проекты, на других — сайты, на третьих — кастомные сетевые приложения для транспортировки данных. Мне нужен был инструмент, который:

Читать далее

Создание интерактивного макета. Упаковка кругов в квадрат и прямоугольник. Жадный алгоритм

Уровень сложностиСредний
Время на прочтение19 мин
Охват и читатели6.2K

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

Читать далее

Почему Google Таблицы лучше Excel для частного инвестора, и при чем здесь Apps Script

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели10K

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

Однако механическая работа со временем утомляет, а возможности Excel для автоматизации онлайн получения котировок ограничены. Google Таблицы решают эту проблему: это изначально облачный инструмент. Чтобы получить актуальную цену акций, достаточно одной формулы.

В этой статье мы разберём, как Google Таблицы могут дать инвестору больше свободы. Я покажу на примерах, как с помощью встроенных инструментов и простых гугл скриптов (Google Apps Script) превратить таблицу в полноценную платформу для анализа и автоматизации вашего портфеля. А ещё разберем получение котировок в обоих инструментах.

Читать далее

URLPattern — pattern matching, который мы ждали

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели7.7K

Привет, Хабр! На связи снова Сергей, ведущий фронтенд-разработчик из Центрального университета. В последнее время я преисполнился URL и опять хочу про него рассказать. 

В прошлой статье я рассказал о том, почему неправильно использовать URL API для валидации ссылок. В этот раз буду использовать инструменты по назначению. Речь пойдет про новый URLPattern API для сопоставления URL с шаблонами, который позволит валидировать ссылки без головной боли.

Читать далее

Числовой тип данных с плавающей точкой float IEEE 754

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели12K

Как устроен формат кодирования с плавающей точкой, что он из себя представляют и где может использоваться.

Читать далее

Я мигрировал свой монорепозиторий на Bun — вот мой честный отзыв

Время на прочтение2 мин
Охват и читатели12K

Недавно я перенёс Intlayer (решение для i18n) — монорепозиторий, состоящий из нескольких приложений (Next.js, Vite, React, design-system и т. д.) — с pnpm на Bun.

Кратко (TL;DR): если бы я знал заранее, я бы, вероятно, не делал этого.
Я думал, что это займёт пару часов. В итоге ушло около 20 часов.

Меня привлекло обещание «всё в одном» и впечатляющие показатели производительности.
Я попробовал, я собрал — всё билдилось молниеносно, круто.
Затем я сделал коммит… и столкнулся с первой проблемой.

Читать далее

Как я полюбил LESS и с его помощью добавил в CSS статическую типизацию на основе венгерской нотации (часть 3)

Время на прочтение44 мин
Охват и читатели7.4K

В первой части я рассказывал об основах CSS-препроцессора LESS: переменных, миксинах, и некоторых полезных приёмах. Во второй — про автоматическую проверку файлов с картинками и генерацию CSS из них же прямо в процессе компиляции, про то, как сделать изображения адаптивными, про миксины в роли функций и про основы написания LESS-плагинов на Javascript'е (они сильно расширяют базовые возможности LESS).

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

В процессе же поговорим о разных тонкостях написания миксинов, которые могут быть полезны.

Добро пожаловать под кат!

Читать далее

Препарируем signal: непростой примитив

Уровень сложностиСредний
Время на прочтение17 мин
Охват и читатели8.4K

Всем привет! Меня зовут Кулаев Сергей, я — Angular-разработчик в ПСБ. В этой статье я поделюсь с вами внутренним устройством примитива signal (сигнал). В Angular уже достаточно давно появилась возможность обрабатывать изменения данных через этот примитив, и большинству людей он уже знаком, но мало кто понимает, как он устроен под капотом. В ходе статьи мы разберём, что из себя представляет сигнал, в каких библиотеках он встречается, а также напишем свою собственную наивную реализацию сигнала и на её основе детально разберём принцип его работы. Статья будет полезна тем, кто при изучении технологий любит построить свой «велосипед», чтобы разобраться, как это работает на пальцах.

Читать далее

Bricks: от идеи до UI за 60 секунд

Уровень сложностиСредний
Время на прочтение19 мин
Охват и читатели6K

Привет! Я — Дмитрий Гусев, Frontend-разработчик в команде Bricks в кластере Core Services в Авито, в статье подробно рассказываю, как и зачем мы внедрили механизм предварительного просмотра проектируемого интерфейса в реальном времени прямо в админку Bricks: зачем это понадобилось, как всё устроено под капотом и с какими неожиданностями столкнулись по пути.

Предварительно просмотреть!

Настройка Express 5 для продакшна в 2025 году. Часть 2

Уровень сложностиСредний
Время на прочтение29 мин
Охват и читатели8.2K

Эта статья поможет вам создать приложение Express 5 с поддержкой TypeScript.

Вы настроите готовый к продакшну проект с помощью различных инструментов для линтинга, тестирования и проверки типов. В случае, если вы новичок в REST API, не волнуйтесь, эта статья также включает объяснения основных концепций, которые следует знать, таких как маршрутизация (роутинг) и аутентификация.

Настоятельно рекомендую писать код вместе со мной. Мы будем использовать подход "Разработка через тестирование" (test-driven development, TDD) для создания REST API, который может стать основой вашего следующего приложения Express.

Читать далее

Ближайшие события

Обзор Cursor 1.7: Пишем to-do приложение с ИИ-агентом

Время на прочтение6 мин
Охват и читатели15K

Привет, Хабр! Представьте у вас есть идея для небольшого приложения.  Вы начинаете продумывать его структуру и реализацию. Перед вами предстает ворох проблем; прописать разметку, стили, логику, отладить баги. Эти задачи могут вызвать затруднения у начинающих программистов и предпринимателей.  А что если бы у вас был персональный ассистент, который не просто подсказывает код, а сам пишет его по вашим инструкциям на естественном языке?

Читать далее

Собрать звуковую спектрограмму на React и MobX

Уровень сложностиСредний
Время на прочтение26 мин
Охват и читатели7.1K

Привет!

Я Таня, фронтенд-разработчик в KTS и студент магистратуры МГТУ им. Баумана. На одном из недавних проектов я работала над интересной фичей — визуальным представлением аудиоданных, a.k.a. звуковой спектрограммой. Казалось бы, штука нехитрая: кто не видел график, прыгающий в такт с музыкой на разных частотах? Он есть в любом секвенсоре, на любом диджейском пульте и даже в динамическом островке последних айфонов.

Однако задача оказалась нетривиальной, поскольку для целей проекта мне нужно было разработать звуковую спектрограмму на React и MobX в особом дизайне. Подробных разборов этой темы и готовых решений я не нашла, поэтому в процессе пришлось самостоятельно разобраться с кучей тонкостей и нюансов. Результат можете посмотреть по ссылке.

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

Читать далее

Упаковка проекта с большой анимацией в один HTML файл или как кодировка Windows-1251 избавила от лишних 52МБ

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели18K

Поделюсь с вами необычным опытом разработки упаковщика проекта с большой анимационной сценой в один независимый HTML файл, который может воспроизводиться в любом браузере без интернета и веб-сервера.

Читать далее

[Пятничное] Я сломал русский язык. Теперь ваша очередь

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели12K

Все вокруг стараются сделать мир лучше, пишут редакторы, используют нейросети. Скука! Я решил пойти другим путём и создал "Лабораторию Абсурда" — которая намеренно и с особым цинизмом превращает любой осмысленный текст в лингвистический бред.

Не спорю, существуют и другие генераторы бреда, но я дарю вам 50 (или что-то около того) разных способов издевательства над текстом и здравым смыслом! Никаких рекламных баннеров, только ванильный JS и словари на тысячи слов, только хардкор!

Читать далее

Кеширование Lottie-анимаций с помощью Service Worker

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели6.2K

Всем привет!
Меня зовут Прокошкин Леонид, я Frontend-разработчик в компании DDPlanet.

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

В проекте было около 30 Lottie-анимаций, некоторые весили ~100 KB, и нам нужно было оптимизировать их загрузку.

Как снизить трафик и нагрузку? Правильно - кеширование. Мы выбрали кеширование на стороне Service Worker.

Читать далее

QR-код по запросу: знакомство с QRious

Время на прочтение4 мин
Охват и читатели7.6K

Недавно мне понадобилось реализовать автоматическую генерацию QR для личного проекта. Идея простая: пользователь нажимает на кнопку «Пригласить друга», а небольшая функция на JavaScript закидывает в буфер обмена реферальную ссылку.

Все было бы хорошо, но нужно было добавить попап с QR-кодом, который при сканировании перекидывает по ранее полученной ссылке. И так как писать собственное решение было сомнительной идеей, пришлось использовать библиотеку — QRious. В этой статье расскажу, как с ней работать.

Читать далее

URLPattern API как «роутер без фреймворка» (браузер + Node 24)

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели4.7K

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

URLPattern дорос до того, чтобы его можно было использовать как нормальный «роутер без фреймворка». В браузерах API уже поддерживается широким набором движков, а в Node 24 он доступен глобально без импортов. Один и тот же паттерн можно матчить и в Service Worker, и в HTTP-сервере на Node.

URLPattern — это примитив платформы для сопоставления URLам по удобному паттерну. Он матчится по компонентам: protocol, hostname, port, pathname, search, hash. Есть test и exec, named groups и опции вроде ignoreCase. Важный плюс в том, что у нас есть одинаковая семантика в браузере и в рантаймах, которые его тащат из той же спеки.

В Node 24 объект доступен глобально, как URL, без require('node:url'). Сам класс появился в 23.8, в 24-й ветке он отмечен как experimental, но доступ из коробки.

По поддержке в браузерах ситуация здоровая. По Can I use, URLPattern работает в актуальных ветках Chrome, Firefox, Safari, Edge, включая мобильные.

Изучить пример