Будни разработчика: блог лид JS

#инструмент дня Очень жаль, что у меня не было под рукой этого сайта в бытность студентом. А ещё, поскольку иных способов отбирать джунов, кроме как третировать их алгоритмами на собесе, толком и нет, важно самому их понимать как никогда. Итак, встречайте: Ссылка скрыта Прекрасный проект по визуализации алгоритмов. От брутфорса и сортировки до динамического, будь оно неладно, программирования. Приглашаю накидать в комментариях подобных проектов. #algorithms #cs #visualizations #бородач

#статья дня У Джоша Комо вышел разбор squash and stretch — старого анимационного приёма, который нормально работает и в интерфейсах. Суть простая: объект во время движения немного растягивается, а при остановке или ударе — сжимается. Из-за этого движение выглядит не таким механическим. В интерфейсах это можно использовать совсем незаметно. Например, при наведении стрелка не только удлиняется, но ещё чуть меняет форму: .arrow { transition: transform 200ms; } .button:hover .arrow { transform: scaleX(1.15) scaleY(0.9); } Особенно хорошо это работает с пружинной анимацией вместо обычного easing. Но выкручивать эффект сильно не стоит: тогда кнопка уже начинает вести себя как желе. Ну а сама статья тут: Squash and Stretch #animation #tutorial

#фишка и #статья дня Надоело проигрывать битву z-index? Используй BFG от CSS: infinity. Ладно, кроме шуток (хотя я и не шутил). С помощью infinity можно гарантировать верно скруглённые углы на прямоугольниках, мы с вами уже рассматривали алгоритм для веба и Flutter: Ссылка скрыта Вместо border-radius: 9999px; ...пишем: border-radius: calc(infinity * 1px); А ещё в CSS общепринятое «если что-то поделить на ноль, получится бесконечность» вполне себе закреплено на практике: calc(infinity) = calc(1 / 0) calc(1px / 0) = calc(infinity * 1px) Учителя вторых классов будут нами явно недовольны. В общем, читаем статью и погружаемся в бесконечность и далее: Ссылка скрыта #css #infinity #math #бородач

#заметка дня Одно из моих любимых применений ИИ-агентов и ИИ вообще, это разработка под закрытые, ограниченные и легаси-платформы. Например, NES/Dendy, PalmOS, Rockbox для iPod или... телевизор. Да-да, стоит себе в комнате телевизор на Tizen, вроде и можно на него приложения ставить — а нечего. Стриминги да и только. Ну да, может и есть в магазине пара игр, но там какое-то невозможное количество рекламы. А иногда хочется просто позалипать в условный тетрис, 2048, сокобан, арканоид — на большом экране и без возни с эмуляторами. Да даже приставку запускать в лом. Штош, приступаем к работе! Одна из самых сложных задач — это тулинг. В случае Tizen OS он давно не обновлялся, эмулятор вообще не работает под современными маками, половина бинарников — под Intel-машины. Установка и настройка всего этого, выбор подходящих версий SDK и закрепление документации жрут какое-то невероятное количество контекста. После же начинается классическая проблема. Да, игры известные и ничего нового я пока не привношу, кода в сети полно. Но именно по этой причине ИИ пишет какую-то совершеннейшую неоптимизированную дичь. Да и я тоже не особо в курсе, как пишутся игровые движки, потому пришлось повозиться. Но мы дошли от стабильных 3 кадров в секунду при перерисовке всего экрана разом до стабильных ограниченных сверху 50! C эффектами шейдеров и звуком :) Врубаешь звук, и всё падает с 50 кадров до 25. Кто ж знал, что надо держать аудиоконтекст прогретым и запускать звуки только по событию, а не всегда держать в процессе :) В общем, подробности последуют. Пишется это всё на C++ c таргетом в NaCl (говорю же, старый ТВ), WebAssembly и Cocoa (macOS, на илюстрации). Очень хотелось выжать максимум из платформы. Оставайтесь на связи, дальше будет больше :) Исходники и релиз тоже попозже. #tizen #nacl #webassembly

#релиз дня TypeScript 7.0 доехал до stable: тот самый компилятор на Go теперь ставится обычным npm install -D typescript. Пресс-релиз: Ссылка скрыта Языковых изменений по сравнению с TypeScript 6 почти нет: главный смысл релиза — новый нативный компилятор. Microsoft обещает примерно 8–12x ускорение именно для TypeScript-компилятора на больших проектах. В их бенчмарках VS Code проверяется за 10.6 секунды вместо 125.7, Sentry — за 15.7 вместо 139.8, Playwright — за 1.47 вместо 12.8. Памяти тоже обычно уходит меньше. Но это не значит, что весь ваш build внезапно стал в десять раз быстрее. Ускорили tsc, type-checking и language server. А рядом всё ещё живут бандлер, тесты, линтеры, генераторы, typedoc, typescript-eslint и всякая обвязка, которая как раз может сломаться первой. Но есть скучная часть, из-за которой лучше не обновлять это пятничным вечером. Зелёный tsc --noEmit ещё не значит, что миграция зелёная. Сам код может типизироваться нормально, а вот вокруг него внезапно начнёт трещать обвязка: старые опции в tsconfig, тулзы, которые лезут в Compiler API, генераторы схем, typedoc, ts-morph, typescript-eslint с type-aware правилами, кастомные трансформеры и прочая инженерная живность. Microsoft прямо пишет: в TypeScript 7.0 нового API ещё нет, он ожидается в 7.1, причём будет другим. Для переходного периода предлагается держать рядом TypeScript 6 через @typescript/typescript6, чтобы tsc уже был быстрым, а инструменты, которым нужен старый API, пока жили на старой версии. Так что новость хорошая, но миграция не уровня «npm update и пошли пить кофе». Сначала grep по tsconfig на старые флаги, потом проверка всего, что импортирует typescript, потом уже tsc --noEmit, build и тесты. Особенно если у вас монорепа, decorators/metadata, Nest/TypeORM/MikroORM или самописный codegen. TypeScript стал сильно быстрее, а твоя миграция — нет. #typescript

Проект от подписчика! Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать. Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать! Всем привет! Меня зовут Влад. Хочу поделиться историей создания своего iOS-приложения «Мои зубы: дневник». В конце 2025 года, работая HTML-верстальщиком, я остался без работы и решил перейти в разработку, начав изучать React. Вместо учебных задач придумал собственный pet-проект - стоматологический дневник. Идея появилась из собственного опыта. Из-за частых переездов информация о лечении зубов постоянно терялась и со временем забывалась. Тогда решил совместить обучение с решением собственной проблемы. Так появилась первая веб-версия с минимальным интерфейсом и базовым функционалом заметок. По сути, это был полигон для экспериментов, на котором я закреплял полученные знания о новой технологии. Но постепенно проект начал увлекать меня все больше. Я придумывал новые функции, улучшал интерфейс и в какой-то момент поймал себя на мысли, что хочу довести его до состояния настоящего продукта, причем в формате мобильного приложения. Разработка мобильной версии потребовала разобраться не только с React Native, но и глубже погрузиться в UI/UX, адаптацию интерфейса и пользовательский опыт. Для ускорения миграции и разработки активно использовал Codex. Больше всего переживал за публикацию в App Store, но модерация прошла с первой попытки менее чем за сутки. Немного о технической стороне проекта. Приложение построено по принципу Local First: все основные данные хранятся на устройстве пользователя, поэтому регистрация не требуется. Для резервного копирования используется iCloud. С точки зрения функциональности это уже не просто заметки. Дневник поддерживает ведение нескольких профилей, детскую и взрослую схемы зубов, позволяет вести записи не только по зубам, но и по полости рта, деснам, брекетам, капам, протезам и пластинкам. Также есть напоминания, экспорт стоматологической карты в PDF, учет расходов с экспортом в CSV, поддержка нескольких языков и множество настроек для персонализации. Сейчас продолжаю развивать проект в свободное время. Теперь, когда публикация первой версии позади, начинается не менее интересный этап - продвижение и поиск первых пользователей. Буду очень благодарен за установку, отзыв в App Store или обратную связь. Спасибо всем, кто решит поддержать проект !🫶🏻 App Store: Ссылка скрыта

#инструмент дня После Scratch в обучении программированию часто начинается пробел. Сначала ребёнок собирает игру из блоков: персонаж ходит, говорит, что-то собирает. Всё живое и понятное. А потом ему внезапно дают VS Code, JavaScript, Canvas, npm и объясняют, что теперь надо быть взрослым. Roblox Studio и Minecraft MakeCode этот пробел частично закрывают, но по-своему. Они хорошо отвечают на вопрос «зачем мне вообще кодить»: чтобы сделать свой мир, карту, режим, предмет или механику. Но как следующий шаг после Scratch они не всегда мягкие. Roblox Studio быстро превращается в отдельную IDE с Luau, сценой, объектами и клиент-серверной моделью. Minecraft — в редстоун, команды, datapacks, моды и свою специфическую экосистему. Odyc.js интересен тем, что он меньше. Это маленький JavaScript-движок для пиксельных narrative games: карта, персонаж, диалоги, звуки, взаимодействия. Игру можно собрать буквально в одном файле, без большого геймдев-цирка и обряда посвящения через инфраструктуру. У него есть песочница, где можно сразу ковырять игру в браузере. Для обучения это хороший масштаб: уже не блоки, но ещё не Unity. Ребёнок пишет настоящий код, видит объекты, строки, координаты, условия и события — и всё это сразу превращается не в абстрактный прямоугольник, а в комнату, дверь, ключ, NPC и диалог. Scratch учит: программирование — это поведение. Minecraft и Roblox показывают: кодом можно менять миры. Odyc аккуратно вставляется между ними: теперь то же самое, но буквами — и пока в масштабе, который можно удержать в голове. #game #js

#игра дня Среда — это маленькая пятница! Время сыграть в... Carmageddon! Его как Никита Аксёнов портировал в браузер :) Точнее, не оригинальную игру, а движок Deathrace, целью которого является реверс-инжиниринг оригинального движка. Естественно, чтобы играть локально нужны ассеты игры, но по ссылке — всё работает прекрасно: Ссылка скрыта В отличие от нативного Carmageddon, управление тут перенесено на стрелки, а не работает на Numpad. Я всё ещё помню, насколько это было ублюдочно. Я стар. Я суперстар. Жаль, мультиплеер не пашет пока :) #game #old

#уязвимость дня У браузеров новый жанр: сайт может косвенно смотреть, что вы делаете на компьютере, по задержкам SSD. Исследователи из Graz University of Technology показали атаку FROST. Схема примерно такая: сайт заводит себе большой файл в локальном хранилище браузера через Origin Private File System и постоянно читает его маленькими кусками. Пока SSD занят только этим — задержки одни. Открыли другой сайт или приложение — нагрузка на диск изменилась, задержки тоже. По этим микросдвигам можно попытаться понять, что ещё запущено на компьютере. В эксперименте сайты угадывались примерно с точностью 89%, приложения — около 96%. Отдельно хороша реакция браузеров. По пересказу Ars Technica и Tom’s Hardware, Google не считает fingerprinting уязвимостью безопасности. Apple, судя по статье, отправила в сторону будущих privacy-защит. Mozilla проблему признала, но фикса пока нет. Получилось как обычно: API добавляли для нормальных вещей — локального хранения, офлайн-работы, быстрых приложений. А потом выяснилось, что из этого же API можно собрать ещё один датчик состояния машины. Закрывать лишние вкладки теперь можно не из-за RAM, а для своей же приватности. #ssd #vulnerability