Как стать автором
Обновить
143.27

JavaScript *

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

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

От клика до железа: хроника одного запроса. Часть 1

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

Увлекались ли вы когда-нибудь задачей так сильно, что полностью выпадали из жизни? Я — да. Писал код, разбирался с нюансами, тестировал, переделывал, снова тестировал… В какой-то момент мой друг, давно не слышавший обо мне, решил узнать, куда я пропал. Мы созвонились, и я рассказал, чем занимаюсь. Он послушал, усмехнулся: «Как же хорошо, что я выбрал бэкенд-разработку».

На самом деле ничего сверхъестественного в этой задаче не было. Но и простой её тоже не назовёшь — архитектура сложилась под влиянием множества ограничений: браузер не может напрямую запускать exe-файл, бэкенд не имеет доступа к локальному оборудованию, а взаимодействие между всеми этими частями нужно было выстроить чётко и последовательно.

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

В этой статье я расскажу, как построить такую связку с помощью механизма Native Messaging: от интерфейса в браузере до запуска локального exe. Разберём архитектуру, покажу, какие задачи решает этот подход, и напишем рабочий пример — расширение, которое сможет общаться с программой на C.

Так что устраивайтесь поудобнее и давайте разбираться.

Читать далее

Я знаю, что ты думал в прошлый дейлик

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

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

Читать далее

Chotto UI — набор компонентов для чатов на Vue3

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

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

так ли это? посмотрим.

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

Читать далее

React Reconciliation: скрытый механизм, управляющий компонентами

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



❯ Механизм согласования


В моих предыдущих статьях (1, 2) я подробно рассматривал, как работает React.memo, а также делился более эффективными подходами к оптимизации производительности с помощью компоновки. Однако для глубокого понимания работы React необходимо разобраться в основном механизме, лежащем в основе всех этих оптимизаций – алгоритме согласования (reconciliation).


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

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

Создаем с помощью LLM игру Super Mario, нет, лучше Super Habrio

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

В предыдущей статье мы за 2 шага создали с помощью LLM игру для браузера «Шарики», Lenes (Color Lines).

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

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

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

В результате визуальное оформление, качество кода, его логичность и структура — всё на высоком уровне.

Читать далее

Почему запрет на переключение вкладок не спасает онлайн-тесты от списывания

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

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

Читать далее

Создаем картотеку людей в Obsidian максимально лениво или «Тронул мышку — проиграл»

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

Я уже писал на Хабре статью, что такое СДВГ и как он влияет на жизнь. Жизнь с СДВГ создаёт свои трудности и я (как имеющий этот синдром) ненавижу и максимально стараюсь избегать любую рутину.

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

Поэтому я сделал для себя кучу шаблонов заметок, которые очень быстро заполняются по правилу игры «Тронул мышку — проиграл». Эти шаблоны сильно облегчили мою жизнь и одним таким шаблоном я и хочу поделиться.

Читать далее

Бумер, джуниор и нейросеть

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

Настало время... интересных историй. Про то, как я заказал сайт и что из этого вышло. Спойлер — человек не справился, а нейросетка — да

Читать далее

Как я попала во фронтенд, не имея айтишного образования: честный рассказ Насти Егоровой

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

Можно ли стать фронтендером, если выучился на экономиста, не сломаться на скучных задачах и не соврать в резюме — и при этом ещё кайфовать от работы? Разбираемся, как выглядит реальный путь в IT: с неопределённости в 11 классе, через SEO и маркетинг — к конференциям, курсам и YouTube‑каналу. Без глянца и мотивационных штампов — только честная история, как оно бывает на самом деле.

Эта статья — текстовый вариант выпуска подкаста Girls&Code с DevRel Skillbox Машей Даровской. Гостья — Анастасия Егорова, эксперт Skillbox по фронтенду, спикер конференции Holy JS, автор телеграм‑канала «Код и кофе» и youtube‑канала @cosyfrontendnastia с полезным контентом для джунов.

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

Читать далее

Знакомство с Web Locks API

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

Представьте оживлённый перекрёсток без светофоров и знаков приоритета. Машины едут в разных направлениях, кто-то пытается проскочить первым, кто-то резко тормозит. Рано или поздно это приведёт к аварии.

Примерно так же работают современные веб-приложения: множество вкладок, фоновых процессов и асинхронных операций конкурируют за общие ресурсы, будь то отправка запроса к API, определение очередности какого-то действия или синхронизация состояния.

Долгое время разработчики обходились кустарными решениями — флагами в localStorage, хитрыми setInterval и т.д. Но с появлением Web Locks API у нас наконец появился стандартный способ расставить приоритеты в этом хаосе.

Web Lock API — это механизм, позволяющий скриптам, находящимся в рамках одного orign, блокировать доступ к ресурсу, удерживать блокировку пока выполняется необходимый код, а затем разблокировать ресурс, чтобы другие части программы могли получить к нему доступ.

Читать далее

WebAssembly голыми руками

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

WebAssembly являясь (относительно) молодой технологией уже довольно распространён в индустрии.

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

Информации же по работе с самим WebAssembly и написанию кода непосредственно на нем в сети крайне мало, а в рунете и подавно, что я и попробую исправить под катом.

Читать далее

Как создать Telegram bot для проверки электронной подписи

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

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

На практике часто возникает задача: проверить ЭП быстро, удобно и без запуска сложного backend-сервиса. И здесь на помощь приходят no-code и low-code инструменты.

В этой статье мы покажем, как реализовать проверку электронной подписи документов.

Читать далее

Разрабатываем PWA. Полная инструкция по работе с Web App Manifest и Service Worker

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

Привет! Меня зовут Сергей Васильев, я фронтенд-разработчик в AGIMA. Наша команда часто работает с PWA — прогрессивными веб-приложениями. Они стали особо популярны в последние три года, когда из-за санкций некоторым корпорациям пришлось отказаться от мобильных приложений. Но и раньше многие компании с интересом смотрели на это решение.

Ниже расскажу, как сделать из обычного веб-приложения прогрессивное: вместе настроим Web App Manifest и Service Worker. Если вам еще не доводилось работать с PWA — текст точно для вас.

Читать далее

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

Книга: «Создание фронтенд-фреймворка с нуля»

Время на прочтение3 мин
Количество просмотров4.5K
Привет, Хаброжители!

Мы используем фронтенд-фреймворки каждый день. А понимаем ли мы, что происходит там, под капотом? Книга Анхеля Солы Орбайсеты «Создание фронтенд-фреймворка с нуля» предлагает уникальный подход к изучению этой темы — через практическое создание собственного фреймворка. Автор убежден, что лучший способ понять принципы работы фреймворков — самостоятельно реализовать их ключевые механизмы.
Читать дальше →

@teqfw/di: Coding JavaScript like a Java boss

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

Эта статья для тех, кто, как и я, хочет программировать на JavaScript в Java-стиле. Для тех, кто находит вдохновение в балансе между строгой архитектурной дисциплиной Java и творческой свободой JavaScript. Ранее я уже публиковал "философию" своей платформы TeqFW, а также инструкции для LLM (раз, два) по оформлению es-модулей в приложениях, написанных в стиле TeqFW. На этот раз я делюсь инструкцией для LLM по использованию внедрения зависимостей в таких приложениях.

Для тех, кто не совсем понимает, что значит "программировать на JavaScript в Java-стиле", приведу рабочий пример — это Node.js-утилита @flancer64/smtp-logger. Она сохраняет в базу данных все email'ы, которые Postfix отправляет наружу. Мне как раз понадобился такой функционал — и я реализовал его в стиле TeqFW: с явным управлением зависимостями и строгой модульной структурой.

Под катом - пример JS-кода в Java-стиле.

Читать далее

Охота за 100% покрытием: как собрать все метрики воедино в монорепозитории Nx

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

Работая с монорепозиториями на Nx, часто возникает необходимость получить единый отчёт о покрытии кода. Однако по умолчанию каждый проект генерирует отдельный файл, что затрудняет анализ. В этой статье расскажем, как с помощью nyc-merge объединить все отчёты в один.

Читать далее

Как я вуз автоматизировал. Штурм веба

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

Здравствуйте.

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

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

Читать далее

Reconciliation в React, обновления виртуального DOM: что это и как работает под капотом простыми словами

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

Привет, меня зовут Дмитрий, я React-разработчик и в статье хочу снова рассмотреть тему, которая у всех на слуху, однако «подкапотной» информации по ней не так много. Всем известно, что React обновляет компоненты, когда это необходимо, но как это происходит на самом деле, «под капотом»? Давайте разберемся вместе — что мне удалось узнать.

Читать далее

Плавность как фича: сравниваем фреймворки по анимации UI на реальных кейсах

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

UI-анимации — это не только про красоту, но и про восприятие, структуру и даже скорость. В этой статье рассматриваются популярные фреймворки для создания анимаций в интерфейсах: CSS, Framer Motion, GSAP и Motion One. Сравнение проводится на реальных кейсах с кодом, примерами и субъективным мнением, где каждый инструмент показывает свои сильные и слабые стороны. В конце — небольшие выводы и неожиданные результаты.

Читать далее

Как я oauth proxy навайбокодил

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

Чем хорош TRMNL — так это возможностью выводить что-то своё за считанные минуты.

Но сервер позволяет только простые GET и POST запросы, то есть в лоб OAuth2 не реализуешь. Оно и понятно: они не очень хотят хранить данные авторизации для всех.

Но всегда можно обойтись малой кровью: например, бесплатным CloudFlare.

Только повайбкодить придётся

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