Обновить
207.9

JavaScript *

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

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

Как я прокачал английский до B2 в США, разработав своё языковое приложение

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

После переезда в США мой английский был на уровне A1. Вместо курсов и приложений я решил создать собственный языковой тренажёр и заодно прокачать себя как fullstack-разработчика. В статье рассказываю как я парсил словари, получил бан, внедрил геймификацию и достиг уровня B2 за год.

Читать далее

Тайная жизнь домашних V8: как движок JavaScript оптимизирует твой код

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров5.4K

Всем привет. Меня зовут Виктор Степанов, я frontend chapter lead на платформе СберТеха GitVerse. Хочу рассказать про внутреннюю «механику» V8 и показать, как писать более быстрый код. Поехали!

Читать далее

Большие данные для карт в реальном времени. Inception

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

Возникла необходимость зафиксировать опыт с последнего проекта по прокачке производительности картографического сервиса. Так сказать, чтобы 2 раза не вставать при передаче опыта. И начнём с постановки, чтобы сразу определиться с аудиторией, кому мимо, а кому больше узнать как "прожевывать" и отображать на UI от 100К объектов в секунду и не лагать. Ну а кто-то вообще не в танке про картографические сервисы и хочет "на борт".

Что вас ждёт по катом.

1. MapTiler/Maplibre - картографический провайдер и UI фрэймворк для работы с ним.

2. Создание своих слоёв данных на карте.

3. Рендеринг большого объёма данных на WebGL/WebGPU. Начнём от 100К.

4. Оптимизация рендеринга с ручной подготовкой буферов для GPU.

5. Обновление данных слоя в realtime. Начнём молотить от 1M объектов.

6. Сериализация данных в ArrayBuffer для передачи напрямую в GPU.

Прокачать перформанс

HTML Builder: визуальный конструктор HTML-структур на Vue 3

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

HTML Builder — визуальный конструктор HTML-структур с drag-and-drop интерфейсом для библиотеки @vue-dnd-kit/components!

🔹 HTML Builder позволяет создавать HTML-структуры без написания кода
🔹 Включает рабочую область, палитру компонентов, дерево элементов и панель настроек
🔹 Сейчас это ранняя бета с минимальным функционалом, но уже можно оценить концепцию
Идеально подходит для создания прототипов и визуальных редакторов CMS.

🔗 Демо: https://zizigy.github.io/html-builder/
🔗 GitHub: https://github.com/ZiZIGY/html-builder

Ищу обратную связь по UI/UX и функциональности. Какие фичи хотели бы видеть? Что можно улучшить в интерфейсе? И тд тп.

Читать далее

Темная магия JavaScript: Укрощаем неявное приведение типов

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

Привет, Хабр! У каждого JS-разработчика есть своя история. История о том, как он впервые встретился с этим. Сидишь, пишешь код, всё логично, всё под контролем. И тут, чтобы проверить одну мелочь, открываешь консоль и из чистого любопытства пишешь:

[] + {} // Получаешь: "[object Object]"
// Хм, ладно, массив привел себя к строке, а объект стал... объектом. Логично.

{} + [] // Получаешь... 0 ???
// ЧТО?!

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

Разобраться с этим!

Telegram Web съел 30% моего 16-ядерного процессора. Расследование странного поведения, или Призрак майнера в браузере

Время на прочтение9 мин
Количество просмотров23K

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

О, нука че там

Наводим порядок в загрузке данных Angular с помощью резолверов

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

Всем привет! Сегодня хочу разобрать кейс, с которым сталкивается почти каждый Angular-разработчик на существующем проекте.

Часто в компонентах можно встретить такой код:

Читать далее

Настройка Jest и React Testing Library: пошаговое руководство для React и Next.js проектов

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

В данной статье мы подробно рассмотрим процесс настройки среды unit-тестирования веб-приложений на базе React и Next.js с использованием Jest и React Testing Library. Мы расскажем об установке необходимых зависимостей, создании конфигурационных файлов, настройке Babel и TypeScript, подключении SCSS и SVG, а также организации структуры проекта. Особое внимание уделено специфике настройки Jest в среде Next.js. Материал будет полезен для frontend-разработчиков и команд разработки, которые работают с React или Next.js проектами и хотят внедрить качественное unit-тестирование. 

Читать далее

От хаоса к порядку: Как Peakline превратился в профессиональный инструмент за неделю

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

Неделя назад мой проект был "швейцарским ножом в картонной коробке". Сегодня это настоящая платформа с PWA, AI-анализом по зонам, системой защиты от ботов, отслеживанием износа снаряжения, прогнозом погоды для маршрутов и детальной аналитикой клубов. Рассказываю, что изменилось под капотом и почему это важно.

Читать далее

Сам ты вайб-кодер

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

Кажется, мы окончательно запутались в терминах.

За последнюю неделю меня назвали вайб-кодером раз 20. Не то, чтобы меня это как-то оскорбляло, каюсь, пишу код в Cursor, но просто... Это ведь не так - просто по определению. Похожие чувства я испытывал, когда хакатонами стали называть любые мероприятия с кодингом, а их участников - хакерами. Но язык - штука живая, и писать душную статью о том, как мы все неправильно юзаем термины - точно не то, на что я хочу убить вечер воскресенья.

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

Читать далее

Кликджекинг по двойному щелчку. Новый приём обманного UI

Время на прочтение4 мин
Количество просмотров4K


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

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

Однако несколько месяцев назад в Сети впервые замечены случаи кликджекинга по двойному щелчку. Вредоносные действия выполняются в промежутке между первым и вторым кликами незаметно для жертвы. Более продвинутая версия атаки работает практически на всех сайтах и в любых браузерах.
Читать дальше →

Представляю @vue-dnd-kit/components: Готовые компоненты для быстрой разработки интерфейсов с перетаскиванием

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

Представляю vue-dnd-kit/components — готовые компоненты для быстрой разработки drag & drop интерфейсов в Vue 3!

📋 Сортируемые таблицы
📊 Канбан-доски
🌳 Древовидные структуры
🧩 Интерактивные дашборды

CLI работает как shadcn/ui — компоненты клонируются в ваш проект, давая полный контроль над кодом. Проект в активной разработке, но уже готов к использованию!

Готовые компоненты: Table, Kanban, Tree, Dashboard.

Статус: бета, API может изменяться. Подходит для прототипов и активной разработки.

Читать далее

Как создать простое API? Express + Prisma

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров2.3K

Эта статья поможет вам быстро написать API, используя Express и Prisma). Для этого вам понадобятся базовые знания работы с Node.js и понимания разработки реляционных баз данных

Читать далее

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

Разработка LLM моделей для обновления кода приложений на более высокие версии фреймворков или языков программирования

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

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

Читать далее

Мой первый боевой проект: FSD, TanStack и как мы это дружили

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

Тут я расскажу о том, как я впервые с нуля поднимал проект на React, используя связку FSD, TanStack Router, TanStack Query и Effector — и как мы всё это далее подружили подружили или нет 🙂.

Сразу оговорюсь:
Проектом занимается команда, но архитектурный старт, выбор технологий и базовая структура — легли на меня. Это был мой первый опыт в такой роли: отвечать не просто за компоненты или страницы, а за фундамент проекта.
А так же, это моя первая статья. Не претендую на истину в последней инстанции, но надеюсь, кому‑то мой опыт будет полезен и палками бить сильно не будете.

Читать далее

Я устал от ограничений Strava и написал свой «швейцарский нож» для анализа тренировок на Python и FastAPI

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

Всем привет! Я — разработчик и велосипедист, которому надоели ограничения Strava. Знакомы боли: GPS‑треки с «телепортами», платный анализ по зонам и неудобная загрузка сегментов на Garmin? Я решил исправить это и написал свой «швейцарский нож» для анализа тренировок.

Под катом — история создания pet‑проекта Peakline на Python, FastAPI и Vanilla JS. Расскажу, как устроен продвинутый FIT‑генератор для гонок с «призраком», как визуализировать исправление «сломанных» GPX‑треков и как заставить график и карту работать в связке. Поделюсь фрагментами кода, архитектурными решениями и подводными камнями при работе с API Strava.

Узнать, как это сделано

Русскоязычные LLM для вызова инструментов, переводов и финансовой аналитики

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров3.4K

🧠 Русскоязычные LLM для вызова инструментов, переводов и финансовой аналитики

Подборка моделей, которые действительно позволяют отказаться от OpenAI и вести разработку в закрытом контуре без подключения к интернету 🔌

Читать далее

Как я делал автопуть для игры на Phaser (TypeScript)

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

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

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

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

Для решения такой задачи мне понадобился алгоритм, как и для всех задач где есть работа с поиском чего либо. В моём случает мне не нужно было диагональное перемещение поэтому я использовал алгоритм A*.

БУ, испугался, не бойся, я друг, я тебя...

Vue 3: Почему ref() — это новая ссылка, а reactive() — обёртка?

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

Если вы работаете с Vue 3, вы точно сталкивались с ref() и reactive(). Обе функции из Composition API делают значения реактивными — но делают это по-разному. И хотя документация Vue чётко указывает, что использовать в каком случае, она редко объясняет, почему это важно и что может пойти не так, если использовать не тот инструмент.

Вот ссылки на официальную документацию — на всякий случай:

Читать далее

Как переносить «висячие» слова на следующую строку с помощью JavaScript

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

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

Читать далее

Вклад авторов