Обновить
512K+

JavaScript *

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

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

Создаем WCAG-доступный DatePicker на React: как Claude пишет основу, а мы доводим до ума

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

Привет, коллеги! Сегодня делимся историей, которая отлично показывает, как AI ускоряет старт, но человеческий опыт и внимание к деталям делают продукт по-настоящему крутым.

Недавно нам для одного из проектов понадобился DatePicker. Сам компонент под NDA, поэтому показать его не можем. Но чтобы поделиться процессом, мы специально для статьи собрали похожий концепт - с открытым кодом и возможностью потыкать вживую (ссылка ждет в конце).

Так вот, казалось бы, компонент простой, но мы решили не просто взять готовую библиотеку. Во-первых, хотелось понять «а как там внутри», а во-вторых - поставить себе планку: сделать его по-настоящему доступным по всем канонам WCAG. Ну и, конечно, не без эксперимента: «А что, если Claude напишет основу?»

Так началось наше приключение с созданием полностью доступного компонента выбора даты с использованием React и Typescript, следуя строгому паттерну WAI-ARIA APG «Date Picker Dialog»

Приготовьтесь к инсайтам, багам и победам!

Читать далее

Новости

Парадокс хэштега! #hashtag_paradox

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

Огромное число авторов используют хэштеги для пометки своих постов. А также для заголовков, вносят эту информацию на картинки, в инфографику для видео и всячески применяют для поиска.

Хочу рассказать о наблюдаемом мной парадоксе этой технологии с точки зрения IT и обычной жизни.

Этот термин состоит из конкатенации двух слов: hash и tag. Hash - это прежде всего понятие про уникальность с шифрованием.

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

Такие функции не всегда могут однозначно давать уникальные ответы в виде строк, поэтому существуют так называемые коллизии.

Короче, здесь главный приоритет - уникальность, "не как у других".

Тег, или тэг - это обозначение какой-то метки.

В HTML используются теги верстки, в разработке через систему контроля версий тегами помечали стабильную версию кода. tag-1.2.3

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

Читать далее

dc.send(file) не существует: что на самом деле нужно для передачи файла в браузере

Уровень сложностиСложный
Время на прочтение15 мин
Охват и читатели4.6K

dc.send(file) не означает, что файл уже доставлен. Между отправкой и реальной доставкой – буфер, relay, запись на диск, ACK, reconnect и потерянный после refresh File. Разбираю шесть production-проблем WebRTC-файлообмена, которые обычно остаются за пределами туториалов.

Читать далее

Baseline: март 2026 или самый насыщенный выпуск

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

В этом выпуске 12 фич, которые стали доступы повесеместно с хорошей поддержкой. От трёх фич я в полном воссторге.

Обзор на браузерные API, которые стали Widely available в марте 2026. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем.

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

Узнать, что можно применять в проде

Облако своими руками для расчета пространственных стержней методом конечных элементов на Node js, React js и Three js

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

В данной статье (а возможно цикле статей) речь пойдет о собственной разработке облачного SPA приложения по моделированию пространственных стержневых систем методом конечных элементов с численно-аналитическим решением для инженеров-проектировщиков в основе которого математическая модель Эйлера-Бернулли, вариационные принципы и итерационный метод сопряжённых градиентов применяемый для большеразмерных СЛАУ с разреженной матрицей жёсткости с одной стороны, и JavaScripts экосистема облака, выполненного в стеке Node js, Express js бэкенд части, и React js, MobX, Three js, glsl shaders фронтенд части с другой стороны. Отображение эпюр усилий в пространственных стержневых элементах реализовано на шейдерах vertexShader и fragmentShader. Это позволяет вычислять эпюры для каждого стержня на лету и выполнять отображение графиков (в общем случае полиномов 5 степени) в пространстве мгновенно.

Читать далее

Как я автоматизировал управление информацией и оптимизировал рабочие процессы. История Sapiens OS

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

Если вы ведете несколько проектов одновременно, вы знаете проблему управления информацией. Мысль пришла в голову — записал куда-то. Через месяц пытаешься вспомнить: где это было? Сохранил в папке где-то на компьютере? В заметках телефона? В рабочем чате или личных сообщениях?

Если не нашел — идея ушла. Или осталась, но найти её — отдельный квест и потеря времени, которое хотелось бы потратить с пользой, а не на поиски.

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

Изначально я пытался найти для себя идеальный инструмент. Notion, Obsidian, Evernote — ни один не решал мою задачу в комплексе: быстро сохранить мысль, не потерять её, а потом легко найти и связать с другими.

Поэтому я написал свою систему.

Статья — не «продажа курса» и не «уникальный продукт». Это описание того, как я решал свои задачи, какие решения принимал и что из этого вышло. Если вы тоже теряете время при поиске нужной информации — возможно, найдёте здесь что-то полезное.

Читать далее

Расширение для Chrome, которое спасает от рейдов на Twitch

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

Рассказываю, как создал расширение для Chrome, которое автоматически отменяет рейды на Twitch. Разбираю архитектуру на Manifest V3, логику обнаружения модальных окон через текстовый анализ и подводные камни при работе с динамическим DOM.

Читать далее

FiT календарь тренировок — финал трилогии пет-проекта

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

Год назад я опубликовал первую статью про разработку приложения календаря тренировок. Спустя 5 месяцев опубликовал рассказ о 10 обновлениях. Сейчас время финала истории - ещё 7 обновлений за 7 месяцев.

Сам регулярно пользуюсь приложением - оно добавляет мотивации заниматься спортом дальше, сохраняет график тренировок, следит за объемом выполненных упражнений. На текущий момент в приложении больше 150 зарегистрированных пользователей.

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

Исходный код

Приложение в RuStore

Веб-версия

Frontend: Typescript, Vitest, Vite, Vue, Tanstack Query, Vue I18n, Tauri

Backend: Typescript, Vitest, Esbuild, Fastify, Mongoose, MongoDB, Swagger

Читать далее

Сегодня мы построим свою локальную модель на смартфоне. С блэкджеком и WebUI

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

Недавно Apple подтвердила стратегическое партнерство с Google для интеграции ИИ Gemini в свои устройства.  Сегодня мы их опередим и поднимем свою LLM в Android-смартфоне. С блэкджеком и WebUI.

Читать далее

Pretext — библиотека, которая считает текстовую вёрстку в 500 раз быстрее браузера. Зачем это нужно и как работает

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

28 марта 2026 года инженер Midjourney Cheng Lou выложил в открытый доступ библиотеку, которая за неделю набрала почти 40 тысяч звёзд на GitHub. И имя ей — Pretext. Это движок текстовой верстки на чистом TypeScript, который полностью обходит DOM и браузерный layout рефлоу. За этим стоит вполне большая проблема и красивое решение.

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

Читать далее

WebSocket и SSE просто, для собеседований и не только

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

WebSocket vs SSE простым языком: двустороннее и однонаправленное соединение, как работает TCP и HTTP upgrade, и какие вопросы по этим темам чаще всего задают на собеседовании.

Читать далее

Frontend Status: свежий дайджест фронтенда и AI — 09.04.2026

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

Привет!

Это 12-й выпуск Frontend Status - дайджеста по фронтенд-разработке.

В этом выпуске:

📺 Крупные релизы и видео: Babylon.js 9.0 и доклад Таннера Линсли про TanStack Start.

🤖 AI в проде без розовых очков: как агенты «видят» веб, что не так с персонами в промптах и почему Cloudflare меняет подход к кэшу.

🛡️ Supply chain снова в фокусе: пауза bug bounty в Node.js, кейс с axios и практичные меры защиты зависимостей.

🎨 CSS-практика без магии: containment, sticky по осям, subgrid, dino game и «жидкие» анимации от Темани Афифа.

⚡ JavaScript/TypeScript: главное по JS 2026, новый JSIR от Google и утилиты для View Transitions.

🅰️ Angular-экосистема для AI-эпохи и не только: ngxtension, LLMs.txt в NG-ZORRO и MCP-страница в PrimeNG.

🌎 Веб-стандарты и браузеры: W3C про AI и голосовых агентов, JetStream 3 и MCP-коннектор в Opera Neon.

🖌️ UI/UX и доступность: WebAIM Million 2026, дизайн для людей с тревожностью и разборы про принципы дизайна.

…и многое другое.

Читать далее

Proxyman Scripts: как превратить прокси в инструмент автоматизации тестирования

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

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

В этот момент прокси-инструменты вроде Proxyman начинают играть совсем другую роль. Это уже не просто «посмотреть запросы», а полноценный слой управления трафиком.

Меня зовут Станислав, я Test-инженер в KODE, в этой статье разберу, как использовать Proxyman Scripts не как вспомогательную фичу, а как инструмент автоматизации тестирования.

Читать далее

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

Нормализация состояния в React через реестр сущностей: паттерн на Zustand с рекурсивным парсингом и мягкими удалениями

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

В этой статье я разберу паттерн Entity Registry — плоский реестр сущностей на базе Zustand, который автоматически нормализует любые ответы API, хранит данные в едином словаре по ID и обеспечивает точечный ре-рендер только тех компонентов, чьи данные действительно изменились. Отдельно разберём трюк с enumerable: false для мягких удалений — пожалуй, самую изящную часть паттерна.

Читать далее

Сайты стали слишком тяжёлыми

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

Помните времена, когда интернет был медленным, а страницы грузились почти мгновенно благодаря простой вёрстке? Это краткий, но суровый факт о росте веса сайтов: если в 2015 году средняя страница «весила» около 1.5 мегабайт, то сегодня средний вес веб-ресурса 2026 года часто превышает 6–8 МБ.

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

Уменьшить вес сайта

Главные игроки экосистемы JavaScript по состоянию на 2026 год

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

Ранее мы писали похожие статьи о CSS, но JavaScript заслуживает не меньшего внимания! Тем более что JavaScript лучше справляется с версионированием. Мы рассмотрим новые возможности самого языка, а также основные среды выполнения, фреймворки, библиотеки и инструменты.

Читать далее

От утилитарного Telegram-бота до полноценной PWA-панели управления VPS: эволюция проекта (v1.13.0 — v1.21.1)

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

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

В своих предыдущих статьях (раз, два, три) я рассказывал о зарождении идеи и первых шагах разработки Telegram-бота для управления серверами. То, что начиналось как простенький Python-скрипт для проверки uptime и перезагрузки парочки личных VPS, за последние месяцы обросло «мясом» и превратилось во взрослую экосистему с паттерном Agent-Server, своим WebUI, WAF и PWA.

Сегодня я хочу поделиться опытом, который я получил в процессе масштабного рефакторинга (от версии 1.13.0 до актуальной 1.21.x), рассказать о граблях, на которые я наступил при работе с памятью и сетью, и сравнить свой продукт с тем, что уже есть на рынке.

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

Читать далее

Обновления функциональности GigaIDE за март 2026

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

Закончился еще один месяц, а значит нам пора поделиться с Вами новостями о развитии GigaIDE. Ниже краткий обзор обновлений PRO-функционала GigaIDE, которые можно найти на нашем маркетплейсе. Обзор инкремента за февраль доступен по данной ссылке.

Читать далее

Как мы оптимизировали компоненты во фронтенде: работа с версиями и оптимизация процессов

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

Привет, Хабр! Меня зовут Василий Беляев. Я руководитель группы разработки по направлению фронтенда в ИТ-компании «Криптонит». В этой статье я расскажу про организацию работы с версиями и компонентами, оптимизацию рабочего процесса внутри команды, а также опишу несколько лайфхаков, которые мы применили.

Читать далее

Cruzo — минималистичный UI-фреймворк без лишней сложности

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

Иногда возникает странное ощущение, что фронтенд уже не про решение задач.
А про поддержание сложности.

Я в разработке ещё до AngularJS и React. Тогда всё было просто: HTML и немного JavaScript — и этого хватало даже для приложений с rich UI.

Потом пришли фреймворки.
Один из первых — AngularJS — и это был вау-эффект.
Ты больше не трогаешь DOM руками. Просто описываешь, что хочешь получить.

Потом: Flux, Redux, TypeScript, Angular 2+. Фронтенд в этот момент стал высокотехнологичным, но в то же время неприятным. Нужно писать кучу обслуживающего кода, не всегда понятно, как оно работает, возникают сложности с отладкой.

Ознакомиться с Cruzo
1
23 ...