Pull to refresh
2
0
Vlad Afonin @mytecor

Джаваскриптизёр из я банка

Send message

Hono vs. H3 vs. HatTip vs. Elysia — современные замены Express для сервера (или без сервера)

Level of difficultyMedium
Reading time8 min
Views3.6K

H3 отмечает, что Express.js - старый и малоразвивающийся фреймворк, являющийся не оптимальным выбором для новых проектов из-за потенциальных проблем безопасности и утечек памяти, что, к слову, касается и Koa.

В нашей статье мы сделаем акцент на фреймворках, поддерживающих запуск service workers на серверной стороне и современный стандарт Fetch API, поскольку это позволяет им работать в бессерверных и Edge-окружениях, таких как Cloudflare Workers. Это, к слову, и причина, почему Fastify не будет рассматриваться в нашей статье, несмотря на эксперимент fastify-edge, который продолжался два года (кстати, была написана интересная статья о переходе от Node к средам рабочих процессов, с которой я рекомендую ознакомиться).

Worker Runtimes воплощают первоначальное обещание NodeJS: использование одного языка и возможность обмена кодом между клиентом и сервером. Однако на практике это не осуществилось, и API Node и браузеров пошли по разным путям. Worker Runtimes вновь объединяют эти возможности. Больше информации здесь.

Hono, H3, HatTip и Elysia - это современные фреймворки HTTP-серверов, также известные как промежуточные программы веб-сервера нового поколения. Они работают везде, на любом JS-рантайме, включая бессерверные и Edge-среды выполнения. Это означает, что они могут быть использованы не только на серверах Node.js. Кроме того, все они поддерживают TypeScript.

Далее мы поговорим о каждом их них по отдельности и сравним некоторые различия.

Все они поддерживают Web Fetch API (объекты Request/Response), но здесь я покажу их API, наиболее похожие на Express, чтобы было проще ориентироваться.

Читать далее
Total votes 7: ↑6 and ↓1+6
Comments1

О работе ПК на примере Windows 10 и клавиатуры ч. 1

Reading time16 min
Views111K
image

Меня зовут Андрей Артемьев, я работаю в Microsoft над ядром ОС Windows 10, ранее я работал над Windows 10x (WCOS), XBox, Windows Phone и Microsoft Edge. Я хочу популярно в образовательных целях рассказать о том как работает компьютер на примере клавиатурного ввода и Windows 10. Данный цикл статей рассчитан в первую очередь на студентов технических специальностей. Мы рассмотрим какой путь проходит информация о нажатой клавише от клавиатуры до отображения в Notepad.exe. В виду обширности и междисциплинарности темы в статьях могут быть неточности, о которых сообщайте в комментариях. Какая-то информация может быть устаревшей в виду скорости с которой развивается Windows.
Читать дальше →
Total votes 69: ↑62 and ↓7+71
Comments412

О работе ПК ч.3: От включения до полной загрузки Windows 10

Reading time20 min
Views106K
Мы продолжаем разбираться как работает ПК на примере клавиатуры и Windows 10. В этой статье поговорим о том как происходит единение софта и железа.

Старт системы


Полностью компьютер выключен когда он отключен от питания и конденсаторы на материнской плате разрядились. До эры смартфонов мобильные телефоны часто глючили и если перезагрузка не лечила проблему, то приходилось доставать батарею и ждать 10 секунд, потому что сбрасывалось программное состояние ОС, в то время как чипы на материнской плате и контроллеры устройств оставались активными сохраняя состояние, драйвера ОС к ним просто реконнектились. 10 секунд — время на разрядку конденсаторов, состояние чипов сбрасывается только при полном отключении.
Если же ПК подключен к розетке или батарее, то он находится в режиме Stand-By, это значит что по шине питания подаётся маленькое напряжения (5В) от которого запитываются некоторые чипы на материнке. Как минимум это системный контроллер, по сути это мини-компьютер запускающий большой компьютер. Получив уведомление о нажатии кнопки Power он просит блок питания/батарею подать больше напряжения и после инициализирует весь чип-сет, в том числе и процессор. Инициализация включает в себя перекачку кода и данных прошивки материнки (BIOS/UEFI) в оперативную память и настройку CPU на её исполнение.
Думать что кнопка Power это рубильник который подаёт электричество на CPU и тот начинает исполнять с заранее известного адреса прошивку BIOS неправильно. Возможно старые компьютеры так и работали. Кнопка включения находится на своей плате, вместе со светодиодами состояний и к материнке она подключается через специальный разъём. На картинке ниже видны контакты для кнопки Power, Reset, а также светодиодов с состоянием Power и чтения жёсткого диска. Нажатие кнопки включения переводится в сигнал на контакты материнки, откуда он достигает системный контроллер.

Читать дальше →
Total votes 33: ↑32 and ↓1+44
Comments57

Примитивы синхронизации в JavaScript: cемафоры и хоккей

Reading time12 min
Views10K

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

Читать далее
Total votes 9: ↑9 and ↓0+9
Comments7

GOST: швейцарский нож для туннелирования и обхода блокировок

Level of difficultyMedium
Reading time13 min
Views114K

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

Сегодня я расскажу о замечательном инструменте под названием GOST. Не пугайтесь, он не имеет никакого отношения к ГОСТ-шифрованию или чему-то подобному, на самом деле это Go Simple Tunnel. Он действительно simple (простой) в использовании и настройке, но при этом невероятно мощный, поскольку поддерживает огромное количество протоколов и транспортов, из которых вы при желании сможете построить самые упоротые и бронебойные комбинации, а именно...

Читать далее
Total votes 145: ↑142 and ↓3+174
Comments114

Настоящее предназначение OpenAI SORA: как и зачем симулировать «Матрицу» для ChatGPT

Level of difficultyMedium
Reading time41 min
Views103K

Ну что, уже успели прочитать восхищения небывалым качеством видео от нейросетки SORA у всех блогеров и новостных изданий? А теперь мы вам расскажем то, о чем не написал никто: чего на самом деле пытается добиться OpenAI с помощью этой модели, как связана генерация видео с самоездящими машинами и AGI, а также при чем здесь культовая «Матрица».

Войти в симуляцию →
Total votes 248: ↑244 and ↓4+281
Comments122

Серьги из матрицы светодиодов

Reading time7 min
Views10K

Изначально я представлял LED Industrial Piercing [перевод на Хабре] как проект, специально рассчитанный на использование светодиодов 0201. В конечном итоге они оказались совершенно не нужны. Светодиоды 0201 слишком малы! Очевидно, я должен был двинуться глубже, поэтому целью нового проекта стало размещение как можно большего их количества на поверхности серёжки-гвоздика.

Читать далее
Total votes 68: ↑67 and ↓1+93
Comments21

Мигрируем БД в продакшене без даунтайма

Reading time12 min
Views26K

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

Читать далее
Total votes 49: ↑48 and ↓1+57
Comments51

Условные выражения в CSS

Level of difficultyMedium
Reading time10 min
Views26K

Мне нравится думать о CSS как о языке дизайна с условными выражениями. На протяжении многих лет CSS был известен как способ стилизации веб-страниц. Однако сегодня этот язык эволюционировал настолько, что в нём уже есть правила условных выражений. Любопытно то, что эти правила реализуются не напрямую (например, в CSS всё ещё нет if/else).

Инструменты дизайна наподобие Figma, Sketch и Adobe XD сильно облегчили жизнь дизайнеров, однако им всё равно не хватает той гибкости, которая есть у CSS.

В этой статье я расскажу о некоторых возможностях CSS, которые мы используем каждый день, и покажу, насколько они условны. Кроме того, я приведу несколько примеров, в которых CSS гораздо мощнее, чем инструменты дизайна.
Читать дальше →
Total votes 48: ↑46 and ↓2+64
Comments4

Сам себе мобильный интернет. Запускаем базовую станцию стандарта 4G LTE

Level of difficultyHard
Reading time13 min
Views91K
Приветствую всех!

Я уже не раз рассказывал про то, как в домашних условиях поднять сотовые сети разных стандартов. Но всё же все они были уже весьма древними. Самое время замахнуться на кое-что поинтереснее — LTE.



Итак, в сегодняшней статье поговорим о том, что детально в нашем сообществе не описывал практически никто — о том, как запустить базовую станцию самого нового из поддерживаемых большинством телефонов этой страны стандартов. Поговорим об особенностях её работы и о трудностях, с которыми, возможно, придётся столкнуться при запуске. Традиционно будет много интересного.
Читать дальше →
Total votes 313: ↑312 and ↓1+368
Comments159

Личный прокси для чайников: универсальный обход цензуры с помощью VPS, 3X-UI, Reality/CDN и Warp

Level of difficultyMedium
Reading time27 min
Views171K

> С 10 апреля 2024, 3 месяца спустя,
> данная статья заблокирована РКН на территории РФ,
> но доступна с IP других стран, а также через веб-архив.

На фоне прошлогоднего обострения цензуры в РФ, статьи автора MiraclePTR стали глотком свободы для многих русскоязычных айтишников. Я же хочу приоткрыть дверь к свободной информации чуть шире и пригласить «не‑технарей» («чайников»), желающих поднять личный прокси‑сервер для обхода цензуры, но дезориентированных обилием информации или остановленных непонятной технической ошибкой.

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

Статья рассчитана на «чайников», не знакомых с предметной областью. Однако и люди «в теме» могут найти нечто полезное (например, чуть более простую настройку проксирования через CloudFlare без необходимости поднимать nginx на VPS).

Если у вас ещё нет личного прокси для обхода цензуры — это знак.

Читать далее
Total votes 102: ↑100 and ↓2+109
Comments292

Особенности проксирования через CDN/Websocket/gRPC для обхода блокировок

Level of difficultyMedium
Reading time15 min
Views81K

Эта статья — заключительная (наконец‑то!) из моего огромного цикла про недетектируемые инструменты для обхода блокировок. В предыдущих публикациях я упоминал, что клиенты и серверы XRay (форк V2Ray) и Sing‑box при использовании протоколов VLESS/VMess/Trojan могут работать через веб‑сокеты и gRPC, что позволяет подключаться к даже заблокированным Роскомнадзором прокси‑серверам через CDN (content delivery или content distribution network) и дает дополнительные преимущества. Сегодня мы поговорим об этом поподробнее.

Читать далее
Total votes 62: ↑60 and ↓2+76
Comments148

Что ты такое, dhclient?

Reading time19 min
Views46K

Сетевой стек Linux не прост даже на первый взгляд: приложение — в юзерспейсе, а всё, что после сокета, — в ядре операционки. И там тысяча реализаций TCP. Любое взаимодействие с сетью — системный вызов с переключением контекста в ядре.

Чтобы лишний раз не дёргать ядро прерываниями, придумали DMA — Direct Memory Access. И это дало жизнь классу софта с режимом работы kernel bypass: например при DPDK (Intel Data Plane Development Kit). Потом был BPF. А за ним — eBPF. 

Но даже помимо хаков работы с ядром есть такие штуки, как sk_buff, в которой хранятся метаданные всех миллионов протоколов. Есть NAPI (New API), которая призвана уменьшить число прерываний. Есть 100500 вариантов разных tables.

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

Начать погружение
Total votes 177: ↑176 and ↓1+221
Comments61

Event Loop в деталях

Level of difficultyMedium
Reading time7 min
Views68K

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

JS был спроектирован как однопоточный язык программирования. Это значит, что он может выполнять только одну операцию одновременно. Тем не менее у JavaScript есть такой механизм как Event Loop, который как раз и позволяет выполнять "асинхронные" операции. Почему "асинхронные" в кавычках? Да просто потому что JavaScript тоже выполняет их синхронно, асинхронности в самом JavaScript как таковой нет. Вперед под кат, будем разбираться)

Promise.then()
Total votes 23: ↑20 and ↓3+19
Comments13

Память в браузерах и в Node.js: ограничения, утечки и нестандартные оптимизации

Reading time32 min
Views44K

Интро: почему я написал эту статью


Меня зовут Виктор, я разрабатываю страницу результатов поиска Яндекса. Несмотря на внешнюю простоту, поисковая выдача — сложная штука: на каждый запрос генерируется своя уникальная страница, на которой в зависимости от запроса может присутствовать блок Картинок, Карты, Переводчик, видеоплеер и многие другие компоненты. Все они должны запускаться и работать в памяти обычных бюджетных телефонов, которые использует большинство наших пользователей. Браузерам должно хватать ресурсов, чтобы пользователь не видел вот такого:



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


Разрабатывая проект на JavaScript (TypeScript, ClojureScript или каком-то другом языке, транслируемом в JavaScript), мы привыкли создавать объекты, массивы, строки и вообще писать код, как будто память бесконечна. Это не так. Я расскажу о видах проблем с памятью, о том, какие ограничения мы часто забываем и как их можно преодолеть. В ответ браузеры и пользователи скажут вам спасибо.


Читать дальше →
Total votes 55: ↑55 and ↓0+55
Comments12

Знай свой JIT: ближе к машине

Reading time14 min
Views29K
До того, как написанный нами код будет исполнен, он проходит довольно долгий путь. Андрей Мелихов в своем докладе на РИТ++ 2018 разобрал каждый шаг на этом пути на примере движка V8. Заходите под кат, чтобы выяснить, что даёт нам глубокое понимание принципов работы компилятора и как сделать JavaScript код производительнее.



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

Спойлер: «Преждевременная оптимизация — корень всех бед», Дональд Кнут.



О спикере: Андрей Мелихов работает в компании Яндекс.Деньги, активно пишет на Node.js, а в браузере — меньше, поэтому ему ближе серверный JavaScript. Андрей поддерживает и развивает сообщество devShacht, заходите познакомиться на GitHub или Medium.
Читать дальше →
Total votes 54: ↑53 and ↓1+52
Comments9

Разработка WebGPU-приложений

Reading time12 min
Views26K
WebGPU — это один из современных API, предназначенных для работы с компьютерной графикой. Среди других подобных API можно отметить Vulkan, DirectX 12 и Metal. То, что в сфере веб-графики появляются подобные решения, даёт пользователям веб-приложений те же возможности, которые есть у пользователей обычных приложений. А именно, это повышение скорости работы программ благодаря использованию видеоускорителей, это сокращение числа проблем, вызываемых графическими драйверами, это появление новых возможностей веб-приложений. Подобные возможности могут опираться как на расширенные функции браузеров, так и на спецификацию.



Надо сказать, что сейчас разработка под WebGPU — это занятие не для слабонервных. Это — один из самых сложных графических API, доступных в вебе. Но неудобства, связанные с разработкой, сглаживает то, что применение WebGPU означает рост производительности, и то, что это — стандарт, а значит можно рассчитывать на то, что в будущем он никуда не денется. Обратите внимание на то, что спецификация WebGPU всё ещё находится в разработке. Поэтому то, о чём пойдёт речь ниже, со временем может измениться.

Здесь мы, осваивая возможности WebGPU, займёмся разработкой приложения Hello Triangle на TypeScript.

Вот репозиторий, в котором можно найти всё необходимое для начала работы с WebGPU.
Читать дальше →
Total votes 38: ↑38 and ↓0+38
Comments10

Несколько советов о том, как ускорить сборку Docker-образов. Например, до 30 секунд

Reading time11 min
Views30K

Прежде чем фича попадет на прод, в наше время сложных оркестраторов и CI/CD предстоит пройти долгий путь от коммита до тестов и доставки. Раньше можно было кинуть новые файлы по FTP (так больше никто не делает, верно?), и процесс «деплоя» занимал секунды. Теперь же надо создать merge request и ждать немалое время, пока фича доберётся до пользователей.


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


Читать дальше →
Total votes 45: ↑44 and ↓1+52
Comments33

TypeScript: разрабатываем WebAssembly-компилятор

Reading time13 min
Views5.7K



Привет, друзья!


Представляю вашему вниманию перевод этой замечательной статьи, в которой автор рассказывает о том, как разработать компилятор для WebAssembly на TypeScript.


Обратите внимание: мой вариант компилятора можно найти в этом репозитории, а поиграть с его кодом можно в этой песочнице.


Если вам это интересно, прошу под кат.

Читать дальше →
Total votes 12: ↑12 and ↓0+12
Comments1

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

Level of difficultyMedium
Reading time18 min
Views51K

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

Поговорим о технической стороне. Как повторить этот шедевр и можно ли обойтись без сервисов OpenAI, которые сложно оплатить в России? И главное — сколько придется инвестировать в виртуальную подругу.
Читать дальше →
Total votes 96: ↑91 and ↓5+111
Comments65

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity

Specialization

Frontend Developer, Fullstack Developer
Junior
JavaScript
React
TypeScript
Node.js
Webpack
Adaptive layout
Web development
Docker
Nginx
Redis