Обновить

Фронтенд

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

Сделал сыну тренажёр слепой печати, потому что существующие показались ему скучными

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

Этой осенью сын пошёл в пятый класс, и я заметил странную вещь: со смартфоном он на «ты», а за обычной клавиатурой теряется. Мы попробовали несколько тренажёров слепой печати, но ему быстро стало скучно — и я решил сделать свой.

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

Читать далее

Новости

10 браузерных API, заменяющих библиотеки, которые я раньше все время устанавливал

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

10 браузерных API, заменяющих пакеты NPM и плагины jQuery: dialog, popover, переходы отображения (view transitions), structuredClone, groupBy и Temporal с заметками о поддержке.

Читать далее

Книга из переписки без сервера: canvas, jsPDF и брошюра для печати прямо в браузере

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

Мы делаем пет‑проект «Чатограмма», который считает статистику переписки: кто пишет первым, кто быстрее отвечает, в какие часы вы на связи. С первого дня у него одно жёсткое правило: файл с перепиской не уходит на сервер. Всё считается в браузере пользователя, а сервер не видит ни одного сообщения — не потому, что обещает не смотреть, а потому, что сообщения до него физически не доходят.

Потом понадобилась подарочная книга: PDF формата A5, где самые яркие моменты переписки собраны по главам — с чего всё началось, первое «мы с тобой», лучшие моменты каждого года, общий словарь, квиз «Кто это написал?». Плюс вариант для печати дома брошюрой: A4, сложить пополам, скрепить степлером.

И здесь правило «ничего на сервер» перестаёт быть бесплатным. Книгу обычно верстают на сервере: headless Chrome, LaTeX, что угодно с нормальными шрифтами и без ограничений по памяти. У нас всё это должно работать на телефоне, в том числе на iPhone, в том числе во встроенном браузере мессенджера. Ниже — как это устроено и на какие грабли мы наступили.

Читать далее

О том, как я написал свой стейт‑менеджер

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

Хочу посвятить эту статью погружению в разные возможности обновления данных в JS и React, раскрыв это на примере своей библиотеки "nexus-state". Поделюсь подробными примерами, мотивацией и расскажу, для чего вообще нужны стейт-менеджеры и как они работают. При написании примеров я постараюсь максимально просто объяснить суть и не буду затрагивать тему типизации.

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

Морские карты S-57 в браузере: открытый парсер на TypeScript и что в нём сломали и починили первые пользователи

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

Причалы на обложке складываются в S-57, а в коде слева спрятаны две строки. Кто первый расшифрует, пишите в комментарии.

Читать далее

Поиск по миллиону товаров на JavaScript: когда сжатый индекс проигрывает массиву

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

На миллионе синтетических записей в Node.js сжатый индекс обогнал простое пересечение массивов примерно в пять раз — на запросах «редкое + частое». Но перебор редких кандидатов на Uint32Array оказался ещё вдвое быстрее. А поток postings на 9 МиБ удерживал в памяти весь файл на 137 МиБ из-за одной строки с subarray.

Читать далее

Наводишь на слово в субтитрах — видишь перевод: расширение на встроенном ИИ Chrome

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

Я учу английский по сериалам. Смотрю с английскими субтитрами, и каждое незнакомое слово — это пауза, alt‑tab, переводчик, обратно. К десятой паузе за серию хочется просто включить русские сабы и сдаться.

Есть Language Reactor и похожие сервисы, но у них жёсткий список площадок: Netflix, YouTube — и всё. Каждый стриминг рисует субтитры своим способом, и под каждый нужен отдельный парсер. А я смотрю где придётся.

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

Читать далее

Переводчик в браузере, который учит слова: встроенный Translator API Chrome, свой ИИ‑ключ и интервальные повторения

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

Было популярное китайское расширение Dadda Translate (达达划词翻译): выделяешь слово, получаешь перевод, сохраняешь в словарик, и слово потом всплывает уведомлением, пока не запомнится. Оно перестало работать: API Sogou и Shanbay, на которых держался перевод, изменились или исчезли. К тому же оно было только для Chrome и только для пары английский → китайский.

Я переписал его с нуля. Получился WordToast для Firefox, Chrome и Edge (GitHub). Он переводит на язык браузера, умеет работать полностью на устройстве и объяснять слово в контексте через ваш собственный ИИ-ключ. В статье расскажу о трёх технических частях:

Как это устроено

Vue: Shared Composable vs Pinia

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

Обсудим: composable, sharedComposable, pinia. Попробуем понять: а нужно ли вообще управлять состоянием? что значит управлять? кто должен управлять? и Какие существуют подводные камни в управлении состоянием. Методы и идеи их преодоления. Готовые библиотеки или примеры кода для использования.

Контекст статьи — PWA, в других контекстах тоже будет работать, но это не точно.

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

Читать далее

LLM уверенно называет шахматные ходы, которых на доске нет. Как я проверяю каждый ее ответ кодом

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

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

Читать далее

Python Tkinter: как перестать бояться Canvas и начать рисовать интерфейсы

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

Обычно такие статьи начинаются с банальных вопросов по типу «Что такое интерфейс», «Что такое разработка», «Что такое проектирование». Суть в том, что это не так важно в рамках данной статьи, и к тому же без того интуитивно понятно. Интуитивно понятно также, как и должен быть понятен хороший пользовательский интерфейс!

Из экономики можно подчерпнуть то, что существует три типа реализации продукта/модели взаимодействия на рынке: от бизнеса к бизнесу, от бизнеса к потребителю и от потребителя к потребителю (последнее – допустим, доски объявлений, тот же Авито). По части ПО мы имеем нечто похожее: от программиста к программисту, от программиста к пользователю, от пользователя к пользователю. Например, когда одни программисты создают библиотеку или новый усовершенствованный ЯП – они нацелены прежде всего на аудиторию программистов. А если идёт разработка ПО для создания и редактирования графических объектов (тот же Photoshop) – то главной аудиторией является пользователь в самом широком смысле этого слова. От пользователя к пользователю же – это когда один юзер отправляет другому программу на Visual Basic для анализа чего бы то ни было в Excel (либо других таблицах).

Проблема какая, прежде всего: мы любим, когда всё видно, существует логика, последовательность, в общем – когда ПО напоминает больше музыкальный инструмент, а не набор функций (последнее примемлемо только для библиотек Python – но даже они соревнуются в понятности между собой). В общем, никому не нужен инструмент, которым непонятно, как пользоваться. И если в связке программист-программисту это не так страшно (хотя неприятно, те же IDE штука полезная), то создание ПО для массового пользователя без интерфейса – это означает создание ПО, которое не откроют никогда. Ваш автомобиль может быть шикарен в большинстве своём, но если человек не понимает, как открыть дверь и где там вообще руль – это провал. А если вы вдобавок выдадите ему вместо объяснений 200-ти страничный документ – провал вдвойне, опять же, если речь про классического потребителя.

Читать далее

1700 строк JS и ни одного видеофайла: как ИИ-агент снимает кино на Canvas и рендерит его в MP4

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

В этом минутном фильме нет ни одной картинки, видеофайла или сэмпла. Огонь, гравюру, 3D-сферу, пиксельную игру и музыку рисует и синтезирует один HTML-файл на 1700 строк, и написал его ИИ-агент. Без правил тот же агент выдаёт унылую заставку: синий фон, неон, всё ползёт линейно. Разбираю, что это меняет: кадр как чистая функция draw(ctx, t), рендер в MP4 без единого рывка и агент, который сам проверяет фильм по таймкодам.

Читать далее

Удалить что угодно со страницы одним кликом: как устроен «пипеточный» блокировщик на Manifest V3

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

Бывает, что блокировщик рекламы не справляется: всплывающее окно подписки, баннер «мы используем cookies», чат-виджет в углу, липкая шапка на пол-экрана. Для этого было маленькое расширение ekill: жмёшь кнопку, наводишь на элемент, кликаешь — элемент исчез. Оно не обновлялось с 2019 года и перестало работать в Chrome, когда Google отключил Manifest V2.

Я переписал его под Manifest V3 для Firefox, Chrome и Edge. Получился SkullClick (GitHub). Задача кажется тривиальной, но у неё неожиданно много граней:

Разберём по порядку

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

Кризис идентичности, или как Vue-разработчик мигрировал enterprise-проект на Angular 18

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

Всем привет! Меня зовут Павел Барсуков, я frontend-разработчик в компании «Программный Продукт».

Основной мой стек – Vue, Nuxt и все рядом лежащее. Angular до недавнего времени я видел в основном в курсах на Youtube, пару раз на фрилансе, где особо с ним не взаимодействовал, и в мемах про исключительность Angular разработчиков и очень частые обновления версий. И тем не менее, мне была поставлена задача мигрировать проект со старой версии на более новую, и я взялся за это.

Погружаемся

Заметки в своём GitHub без сервера: как я оживил BatNoter и написал синхронизацию на Git Data API

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

Мне давно нравится идея хранить заметки обычными Markdown-файлами в своём репозитории на GitHub. Файлы остаются твоими, их можно открыть на github.com или в любом редакторе, а история изменений достаётся даром: это просто коммиты.

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

Я переписал его так, чтобы сервер был не нужен вовсе. Получился Notewing: браузер сам ходит в GitHub API, изменения копятся офлайн и отправляются одним коммитом, а конфликтующие правки не теряются. В статье расскажу, как устроена синхронизация через Git Data API, где были подводные камни и как всё это тестировать, не трогая настоящий GitHub.

Как устроена синхронизация

От localStorage к HttpOnly Cookie. Как меняется архитектура авторизации в SPA

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

В большинстве SPA-авторизация до сих пор строится вокруг JWT, localStorage и заголовка Authorization. Такой подход прост и удобен, но он заставляет клиентское приложение самостоятельно управлять credential и пользовательской сессией.

В этой статье разберём, что меняется при переходе на HttpOnly Cookie и серверные сессии: как браузер хранит и отправляет Cookie, зачем нужны HttpOnly, Secure, SameSite, Domain и Path, и почему вместе с Cookie приходится по-новому смотреть на CSRF и CORS.

Отдельно разберём разницу между JWT и session ID внутри Cookie, а в практической части посмотрим, как такая архитектура меняет React-приложение с Axios и MobX.

Читать далее

Инвентаризация активов ИТ‑инфраструктуры для ИБ: как собрать перечень и поддерживать его в актуальном состоянии?

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

В большой компании картина почти всегда одинаковая. Систем много, а ответа на вопрос, что у нас есть и где это лежит, нет. SIEM пишет события. Мониторинг опрашивает узлы и строит графики, и в нем же кто-то пытается вести инвентаризацию, потому что хосты уже заведены. ITSM знает заявки и согласованные сервисы. Рядом лежат локальные базы, выросшие исторически, и файл Excel на чьем-то диске. Его все считают временным, пока он на полгода не становится единственным источником правды.

ИБ в этой картине оказывается в странной позиции. Защищать формально надо все. Но что именно входит в это «все», целиком не назовет никто. Когда случается инцидент или проверка, вместо расследования начинается аудит инфраструктуры с нуля. Кто владелец, какой контур, какой адрес, отвечает ли узел, почему туннель настроен на оборудовании, но отсутствует в учете. Атакующие или просто беспорядок в процессах заставляют службу безопасности заниматься инвентаризацией всего подряд. Это дорого, поздно и почти всегда неполно.

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

Читать далее

Калькулятор плитки: фото вместо цвета и 3D, который наконец не бесит

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

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

Перед самим 3D - то, что допилил ещё раньше в очереди. Теперь можно загружать фото плитки, чтобы не смотреть на однотипные прямоугольники одного цвета. Есть кнопка «применить ко всем комнатам». Если у вас, скажем, санузел и кухня одной плиткой идут, не надо грузить фото дважды. Так же теперь можно выбирать цвет швов, а то они были всегда одного цвета, и картинка порой сливалась.

Читать далее

Производительность React‑приложений: от лишних ререндеров до виртуализации списков

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

Производительность React-приложения редко ломается из-за одной “тяжёлой” функции. На практике проблемы накапливаются постепенно: компонент начинает ререндериться чаще, чем нужно, состояние оказывается поднято слишком высоко, в useEffect появляется лишняя работа, а список из нескольких тысяч элементов начинает заметно влиять на интерфейс.

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

Читать далее

Как я спроектировал офлайн‑приложение для заметок под будущую синхронизацию — и собрал лендинг без единой сборки

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

Полгода назад я в одиночку начал делать Nookly — локальное приложение для заметок на Flutter: страницы, блочный редактор, таблицы с канбан-видом, полнотекстовый поиск. Ключевое требование с самого начала: всё работает офлайн, данные не покидают устройство. В этом посте — не про сам продукт, а про два инженерных решения, которые могут быть полезны: как спроектировать схему БД так, чтобы синхронизация потом не потребовала переписывания половины кода, и как собрать лендинг вообще без шага сборки.

Читать далее
1
23 ...