Веб-страница - фронтенд бэкенд девопс

Ноль зависимостей и ноль сборки: что вышло из 59 утилит на голом JavaScript Автор Antigravity Tools поставил себе ограничение и выдержал его 59 раз подряд: без бэкенда на Node, без пакетов npm, без webpack, vite и parcel, без аналитики и куки. Только нативные браузерные API. Ограничение оказалось не эстетическим. Когда вы вставляете JWT в онлайновый декодер, токен уходит на чужой сервер, а когда прогоняете строку через онлайновый тестер регулярок, строку логируют. Здесь каждая операция выполняется во вкладке, потому что уходить ей просто некуда. Автор рассказывает, что из этого получилось и чего это стоило. Отдельно любопытно как аргумент в вечном споре, нужен ли тут фреймворк. #javascript

Чем заменить привычные npm-пакеты, когда сервис уезжает на Rust Тяжёлые сервисы на Node переписывают на Rust обычно ради двух вещей: предсказуемо низких задержек и счёта за инфраструктуру. Порт API с Express или Fastify на Axum, фоновый воркер, утилита для командной строки — механика везде одна. Спотыкаются не на языке, а сразу после Cargo.toml. В npm больше двух миллионов пакетов, в crates.io набор заметно меньше и устроен иначе, с упором на типобезопасность и контроль памяти. Прямого аналога часто нет, а искать замену каждому пакету по одному долго. Материал и есть та самая таблица соответствий для расхожих пакетов, плюс способ держать её под рукой прямо в VS Code.

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

ИИ-краулер видит вместо вашего сайта пустой div Откройте клиентски отрисованный сайт в браузере: всё на месте, герой отрисован, навигация работает. Теперь заберите тот же URL так, как это делает автомат, обычным GET без браузера и движка JavaScript. В ответе почти пусто: , пара тегов и никакого человеческого текста. Раньше с этим мирились. Теперь заметная доля клиентов на ваших URL это краулеры за ответами ИИ: GPTBot, ClaudeBot, PerplexityBot, Google-Extended и фетчеры, которые обслуживают режимы поиска в вебе и живые цитаты. Многие читают начальный HTML и на этом останавливаются. Если контент появляется только после бандла, для них его не существует. Разбор раскладывает начальный HTML на три состояния и помогает понять, в каком из них ваш сайт. Проверить себя можно одной командой curl прямо сейчас. #spa

Вынесли логику в кастомный хук и получили лишние перерисовки Инстинкт понятный: компонент оброс полусотней строк состояния и запросов, вы вытаскиваете это в аккуратный useDashboardFilters(), родитель худеет до десяти строк JSX. Выглядит как чистая победа. Ловушка в том, что кастомный хук это обычная функция. Компонент, который его вызывает, выполняет код хука как часть собственного рендера. Состояние вы не спрятали, а перенесли: любой useState внутри хука по-прежнему перерисовывает того, кто хук позвал. Я бы прошёлся по своим «чистым» хукам с этим текстом рядом, особенно там, где один хук зовут сразу несколько компонентов. Разбор показывает, как это выглядит в профайлере. #перформанс

У вас есть широта и долгота: что с ними делать, кроме метки на карте Пара чисел вроде 40.7128 и −74.0060 обычно заканчивается маркером на карте, и на этом всё. А достать из неё можно заметно больше: найти заведения рядом, определить город и район, посчитать расстояние до другой точки. Для новичка это удобная тренировка работы с внешним API: отправить запрос с координатами, получить JSON, разобрать его и показать результат. Заодно всплывают вещи, о которых туториалы обычно молчат: что делать, если сервис ничего не нашёл, и почему расстояние по прямой не равно расстоянию пешком. Разбор на JavaScript годится как основа для маленького проекта «что рядом со мной»: одна форма, один запрос, один список результатов. #javascript

Достаньте точный цвет пикселя из картинки прямо в браузере Задача звучит просто: есть скриншот или логотип, нужен точный HEX конкретного пикселя. Обычно за этим идут в графический редактор, хотя браузер умеет сам, и загружать картинку никуда не надо. Работает это через Canvas — элемент HTML, на котором можно рисовать и, что важнее, читать нарисованное по пикселям. Порядок такой: загрузить изображение, нарисовать его на canvas, забрать массив пикселей и достать нужный. В массиве каждый пиксель занимает четыре числа: красный, зелёный, синий и прозрачность. Упражнение хорошо тем, что за один маленький проект вы трогаете объект Image, события загрузки и типизированные массивы. Возьмите код примера и соберите пипетку, которая показывает цвет под курсором. #javascript

Подсветка фрагментов текста без единого лишнего span в разметке Люди страницу не читают, а сканируют, поэтому подсветка нужных кусков работает. В CSS для этого целое семейство псевдоэлементов: ::selection для выделенного мышью текста, ::target-text для перехода из поиска и самый гибкий из них, ::highlight(), который красит произвольный фрагмент по вашему выбору. Подкупает то, что оборачивать текст в разметку не надо: диапазон задаётся в JavaScript, а стили живут в CSS. В DOM не появляется ни одного лишнего узла, а значит, ничего не ломается ни в вёрстке, ни в доступности. Поддержка пока не везде, поэтому Сюнками Фафовора показывает, как включать это через progressive enhancement: браузер без поддержки просто не покрасит, и страница останется рабочей. #css

Каждая цепочка filter и map создаёт два лишних массива На маленьких списках это незаметно. На большом наборе данных, на генераторе, который отдаёт значения по запросу, или на потоке, где нужны первые несколько результатов, вы материализуете тысячи элементов и тут же их выбрасываете. Методы массивов жадные: выполняются сразу и возвращают новый полностью заполненный массив. Iterator helpers ленивые: тянут значения по одному и ровно столько, сколько попросили. Для потоков и бесконечных последовательностей это разница между работающим кодом и упавшей вкладкой. Приятная часть: это уже нативно, без библиотек, полифилов и шага сборки. Chrome 122, Firefox 131, Safari 18.2. Разбор с примерами. #javascript