Обновить
512K+

JavaScript *

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

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

TTF-DOOM: как я запустил 3D-рейкастер внутри TrueType-шрифта

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

Каждый, кто хоть раз заглядывал на Hacker News или r/ItRunsDoom, знает традицию: DOOM должен работать на всём. PDF-файлы, SQL-запросы, кишечные бактерии, тест на беременность - список бесконечен, и каждый новый порт абсурднее предыдущего

Но я задался вопросом: а можно ли запустить DOOM внутри шрифта?

Оказалось, что можно. И вот как.

Читать далее

Tokenmaxxing: Новый тренд в бигтехах в 2026 году

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

Пока вы работаете, ваш коллега уже сжёг 210 миллиардов токенов за неделю. Это 33 Википедии. Он не написал ни строчки в продакшн — но возглавил корпоративный лидерборд и получил звание «Token Legend».

Токенмаксинг (tokenmaxxing) — это практика, при которой сотрудники компаний соревнуются за максимальное потребление токенов, превращая сам факт использования ИИ-инструментов в показатель производительности.

Рассмотрим откуда пошел термин, почему люди соревнуются и причем тут Performance Review в FAANG.

Читать дальше

Мобильное приложение DogPlanner. Перезагрузка…

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

Давайте немножечко поговорим о творчестве в целом, создании собственных проектов в принципе, и дальнейшем развитии мобильного приложения для домашних питомцев DogPlanner (доступно в Google PlayRuStore и других известных площадках) в частности. Мы уже говорили, что когда человек начинает заниматься каким-либо собственным проектом, он не задумывается насколько это занятие может растянуться. Мы сейчас говорим не о бизнес проекте, в котором изначально чётко описываются цель и средства её достижения, определяется команда и сроки, и поехали... Нет.

Читать далее

Я написал собственный язык программирования на Node.js — и вот что из этого вышло

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

Привет, Хабр! Меня зовут SlywerX, я студент 3 курса кафедры Программной инженерии МТУ (Алматы) и fullstack-разработчик. Несколько месяцев назад я задался вопросом: а как вообще работают языки программирования изнутри? Лучший способ разобраться — написать свой. Так появился SWX (Shadow Web eXploit) — скриптовый язык на базе Node.js с собственным синтаксисом, криптографией и даже HTML-рендерингом.

Сейчас SWX на версии 7.0.0. В этой статье расскажу как всё устроено, что было сложно и зачем это вообще нужно было делать.

Читать далее

Утечки памяти в замыканиях JavaScript

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

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

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

Что за неочевидные ссылки?

Зная эти паттерны ты решишь 60% задач на собеседовании

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

Простые, но мощные паттерны для JavaScript: научитесь выбирать подходящий паттерн перед решением задачи и ускорьте своё решение алгоритмических задач.

Читать далее

Playwright: E2E‑тесты на JavaScript, которые не флакуют

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

Playwright — фреймворк от Microsoft для E2E-тестирования — был построен с нуля, чтобы решить именно эту проблемкую. В нем есть автоматические ожидания, изоляция через Browser Contexts и встроенный тест-раннер. Разберём, чем он отличается от Selenium и Cypress, и как писать тесты, которые не падают от ветра.

Читать далее

Идеальный Store в Pinia (Vue)

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

Если спустя время у вас происходило такое, что компонент-стор разрастался, а каждое добавление или исправление логики уже пугало, то эта статья для вас.

Сегодня я не буду читать лекций. Просто поделюсь тем, как сам дошел до более-менее устойчивого подхода после того, как неоднократно рефакторил чужие сторы и ловил себя на мысли: «Зачем я это трогал?». Возможно, где-то я буду неправ, возможно, в вашем проекте это не взлетит. Я не напрашиваюсь в учителя, просто фиксирую опыт, чтобы не наступать на одни и те же грабли.

Читать далее

Pomodoro Music, или свой Pomodoro-таймер для музыки без вайб-кодинга и приложений

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

Привет, Habr!

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

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

Сотни уловок и ухищрений, секретных техник концентрации и полноразмерные наушники с активным шумоподалениям привзваны помагать мне выходить в астрал входить в состояния потока и укладыватся в дедлайны.

Идея этой статьи родилась из коментария одного комментария @Xregn к статье Как меньше отвлекаться и прокрастинировать..., где ребята обсуждали идею Pomodoro-таймера для spotify.

Идея проста: заводишь таймер и влючаешь музыку, по истечении времени музыка должна встать на стоп. Супер, если можно слушать музыку с ноута, чтобы не переключать наушники с телефона на ноут и обратно, когда бегаешь по созвонам.

Читать далее

Как получить палитру доминирующих цветов из изображения

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

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

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

Читать далее

NextAuth + Django JWT без второй авторизации и ручного хаоса токенов

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

Во многих fullstack-проектах на Next.js и Django авторизация разваливается в одном и том же месте. На фронте удобно использовать NextAuth, потому что он закрывает формы входа, OAuth, серверную сессию и клиентские хуки. На бэкенде хочется иметь обычный JWT-контур на Django REST Framework, чтобы защищать API, работать с access и refresh токенами и не привязывать бизнес-логику к фронту. В итоге часто получается неприятная схема: пользователь логинится через NextAuth, потом отдельно логинится в Django, потом где-то вручную перекладываются токены, а через пару недель вся эта связка начинает ломаться на refresh, logout и OAuth.

Что делаем. Пользователь проходит один вход на фронте, а дальше фронт уже работает с токенами Django как с единственным источником доступа к API. Без второй формы входа, без ручного хранения access token в localStorage, без отдельного костыля под Google OAuth.

Разберем рабочую схему, в которой NextAuth отвечает за пользовательскую сессию на фронте, а Django остается владельцем API-авторизации и выдает JWT. На credentials-входе NextAuth сразу получает access и refresh от Django. На Google OAuth фронт сначала пускает пользователя через провайдера, потом синхронизирует его с Django и тоже получает пару токенов. После этого все запросы идут через один axios-клиент, который сам подставляет access token, сам обновляет его через refresh и сам завершает сессию, если refresh уже недействителен.

Читать далее

Модальные окна в React: архитектура управления для сложных интерфейсов

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

Модальные окна — один из самых недооценённых слоёв UI-архитектуры. Формы, подтверждения, панели действий — в любом крупном проекте их десятки. И почти в каждом проекте их управление со временем превращается в хаос.

Не потому что разработчики ленивые. А потому что модалки обманчиво просты. useState(false) — и готово. Пока модалка одна, в одном месте, с одним набором данных — проблем нет.

Читать далее

Учительская рутина: как я автоматизировал Дневник.ру

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

Я учитель информатики. Одна из самых раздражающих частей работы — не уроки и не подготовка, а заполнение Дневник.ру. Копировать, вставлять, копировать, вставлять — урок за уроком. Я сделал для себя небольшой инструмент, который это упрощает. И заодно хочу спросить сообщество про вторую боль — проверку домашнего задания. Как бы вы это решали?

Читать далее

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

Мой AI-агент рапортовал 83 успешных действия. Реальных было 16

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

В дашборде было 83 успешных engagement’а. В аналитике X — 16 настоящих ответов. Пять к одному. Неделю я этого не замечал.

Контекст: у меня автономный AI-агент, который пишет комментарии в X (Twitter) от имени клиентов. Находит релевантные треды, генерирует ответ, публикует через браузер. Без моего участия. Ну, предполагается что без моего участия.

Читать далее

Как мы подружили фронтенд с четырьмя платформами и сократили время разработки в два раза

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

Если у вас одна платформа, фронтенд работает стабильно и предсказуемо. Но стоит добавить десктоп, мобильное приложение, PWA — и простая логика превращается в гору if-ов.

Меня зовут Денис Кондратьев, я фронтенд-разработчик Точка Банк. В статье расскажу, как мы интегрировали наш мессенджер на четыре разные платформы (браузер, Electron, Capacitor, PWA) и сократили время адаптации новых фич в три раза.

Читать далее

FocusMind: Возвращение. Как я переосмыслил «легкий Notion» и свои ошибки

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

Всем привет! Около года назад я публиковал здесь свои первые шаги в разработке — прототип редактора заметок. Тогда я получил много фидбека: и позитивного (+7 кармы), и критического. Признаю, второй мой пост был излишне эмоциональным и малоинформативным. Я сделал выводы, подтянул навыки и готов показать, во что вырос мой проект FocusMind.

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

Космическо-лунный дизайн: Тёмная тема, которая не давит на глаза при долгой работе.

Скорость: Никаких тяжелых фреймворков, тормозящих загрузку. Приложение стартует мгновенно.

Локальность: База данных на JSON-сервере. Ваши мысли принадлежат вам и доступны даже без интернета (Offline-first).

Адаптивность: Я полностью переработал навигацию. На десктопе — удобное боковое меню, на мобильных и планшетах — отзывчивый «бургер».

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

Что дальше? Мой план — за 5 месяцев довести FocusMind до идеального MVP. Впереди переход на IndexedDB для работы с огромными массивами данных и внедрение PWA.Буду рад, если вы заглянете в обновленный прототип FocusMind и дадите технический совет. Особенно интересует ваше мнение по реализации синхронизации локальных данных.

Читать далее

Как я поднял AmneziaWG 2.0 на роутере ASUS: DPI, GeoIP и веб-интерфейс

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

Когда VPN на телефоне уже не спасает, а DPI провайдера научился резать WireGuard за секунды, приходит время переносить обфускацию на роутер. В этой статье расскажу, как я сделал полноценный аддон для Asuswrt-Merlin с веб-интерфейсом, выборочной маршрутизацией и поддержкой AmneziaWG 2.0. И почему пришлось отказаться от kernel module.

Проблема:

У меня ASUS GT-AX11000 с прошивкой Asuswrt-Merlin. Обычный WireGuard на роутере через встроенный клиент Merlin работает, но провайдер его видит и режет. AmneziaWG решает эту проблему за счёт обфускации, DPI не может отличить трафик от обычного UDP.

На телефоне и ПК есть клиент Amnezia VPN, и там всё работает. Но есть нюанс...

Читать далее

Что всё таки не так с веб компонентами

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

Господа, продолжаем разбиратся в тонкостях веб компонент. Сделал тут бенч - сравнениe фреймворков ( $mol/lit/symbiot ) по todomcv. Вроде говорим об одном, а бенч о другом, разве не так ? Ан-нет, что бы разобраться с веб компонентами нужны фреймворки которые ставят их во главу угла, те, кто "сделал на них ставку".

Вот что мне удалось понять:

Первое. Память: 124 байта на веб-компонент, и 16 байт на JS object. Разница на порядок, это много, и без виртуализации интерфейс скорее всего будет лагать

Что не так то опять ?)

Оживляем UI на мобилках с Sensor API

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

Речь пойдёт о реализации реакции веб-интерфейса на наклон устройства, смещение бликов, теней, для придания ему таким образом интерактивности и объёма.

Device Orientation API существует уже давно. Мобильные устройства с гироскопом стали пожалуй основным окном для приложений и сайтов. Всевозможные эффекты "блеска" / градиентов в дизайне встречаются регулярно, тренд на эмоциональный дизайн и кажется пора это всё объединить!
И ведь Apple выкатили эту фишку в liquid glass! Но... лично по моему мнению, как-то не "дожали" или она померкла на фоне других нововведений... а жаль, я считаю реакцию ui на положение устройства гораздо более перспективной темой чем новая прозрачность с крутой физикой преломлений которую тут же все побежали повторять. В отличии от преломления фона, адекватная реакция на наклон устройства это не графон ради графона, а микро‑взаимодействие дающее ощущение контроля, отзывчивости, даже "живости" интерфейса. Ведь даже если пользователь не тапает по экрану - он очень даже взаимодействует с интерфейсом(смотрит/читает) и слегка "покачивает" телефон в руке, и UI на эти микродвижения уже чуть-чуть отвечает, маленькая физика (свет/тень/глубина), как будто элементы не нарисованы, а существуют как объекты... Ну это моё субъективное восприятие... тут есть похожие мысли про роль микровзаимодействий и баланс эмоций.
Знаю что некоторых людей "лишние" анимации наоборот нервируют, или даже "укачивают", чтож... прекрасно что для них есть опция reduce-motion, для меня такой замечательной обратной опции "сделать красиво" нет )))
Если всё ещё не понятно о чём я, можете глянуть это видео:

Блеск!

Как правильно называть маршруты в Vue Router: два простых правила, которые спасут ваш проект

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

Как правильно называть маршруты в Vue Router: два простых правила, которые спасут ваш проект:

1. Первое правило: всегда задавайте name

2. Второе правило: храните имена в enum (или константном объекте)

Читать далее