Обновить
256K+

JavaScript *

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

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

Компилятор WebAssembly, который помещается в один твит

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

▍ Введение


Наш первый «компилятор WebAssembly в твите» имел длину 269 байт; с тех пор мы смогли снизить её всего до 192 байтов.

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

let c=(b,l)=>WebAssembly.instantiate(new Int8Array(
[,97,115,109,1,,,,1,5,1,96,,1,127,3,2,1,,7,4,1,,,,10,
l=(b=b.split` `.flatMap(t=>t>-1?[65,t]:107+'-*/'.indexOf(t)))
.length+4,1,l-2,,...b,11]))

А вот пример его использования:

(await c('11 11 1 - + 4 * 2 /')).instance.exports['']()

Но это не просто хитрый трюк — если вы начнёте разбираться, как работает этот код, то на удивление много узнаете о WebAssembly! В этом посте мы объясним, как это всё работает, пошагово деобфусцируя код.
Читать дальше →

Веб-приложения будущего: что нужно знать о WebAssembly

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


Часто при разговоре о веб-разработке на ум приходят JavaScript и различные фреймворки. Но что, если бы веб-приложения могли запускаться с той же производительностью, что и нативные, а разработчики могли бы писать их на Rust, C++ или Go? Вот тут-то на сцену и выходит WebAssembly (Wasm) — инструмент, который позволяет взглянуть на веб-разработку иначе. Он открывает возможности для выполнения сложных вычислений, запуска игр, виртуальных машин и приложений для анализа данных прямо в браузере. Все это — с высокой производительностью и кроссплатформенностью, от настольных компьютеров до мобильных устройств.

В этой статье разберемся, как работает WebAssembly, чем он привлекает разработчиков и какие проблемы решает. Вы узнаете, почему его активно поддерживают такие компании, как Google, Unity и Unreal Engine, и какие перспективы открывает Wasm для будущего веб-разработки. Подробности под катом!
Читать дальше →

Сколько памяти ест ваша вкладка

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

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

Меня зовут Антон Непша. Я работаю в Сбере, разрабатываю сайт СберБанк Онлайн и веду Telegram-канал Антон Непша.js. Недавно я выступил на HolyJS с докладом о том, сколько ресурсов потребляют наши сайты, как эти ресурсы распределяются, где хранятся, и как связать информацию о них из снимка памяти с конкретным местом в своём коде.

Если смотреть видео вам удобнее, то доклад есть на YouTube и ВК Видео. В статье вас ждёт текстовый вариант и ссылки на используемые материалы:

Читать далее

Дополненная реальность в Web: какие библиотеки актуальны в 2025?

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

Привет! Я Света, фронтенд-разработчик в отделе рекламных спецпроектов в KTS.

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

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

Если вы ищете способы внедрить AR в свои проекты, эта статья поможет вам сориентироваться и составить общее представление о возможностях соответствующих библиотек.

Читать далее

Современные способы переключения контента

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



Тот, у кого из всех инструментов есть только молоток, склонен на любую проблему смотреть, как на гвоздь.
Абрахам Маслоу

Мы склонны использовать знакомые решения. Когда речь заходит о переключении контента, мы обычно используем свойства display: none или opacity: 0 с добавлением JavaScript. Однако современный веб стремительно развивается, и, возможно, настало время рассмотреть другие подходы к переключению контента — узнать, какие нативные API на сегодняшний день поддерживаются, их достоинства и недостатки, а также некоторые нюансы, о которых мы могли и не подозревать (включая псевдоэлементы и другие малоизвестные вещи).

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

PGlite — полноценный Postgres-сервер на WASM. Работает прямо в браузере и Node.js

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

Безумные штуки иногда можно найти в интернете. Листая 2024 JavaScript rising stars (https://risingstars.js.org/2024/en#section-all) обнаружил там удивительного зверя - Postgres скомпилированный через emcc в WASM версию, и допиленный до состояния, когда его можно запустить внутри JS-процесса (браузер/Node.js/Bun/etc).

Как он устроен, как им пользоваться, и, самое главное, зачем? Добро пожаловать под кат :)

Поехали!

Почему текстовые форматы не идеальны в разработке: пример на JSON

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

JSON - наш повседневный помощник, но вместе с другими текстовыми форматами он может преподнести неприятные сюрпризы: потеря точности чисел, громоздкие файлы, путаница с датами. Рассказываю, как этих проблем избежать и повысить эффективность с помощью стриминга в Node.js, а также MessagePack и Protobuf. Узнайте, где подводные камни и как их обходить на практике!

Если хотите понять, в чём именно проблема на иллюстрации, загляните в статью — там всё разобрано :-)

Читать далее

Performance и оптимизация TypeScript-типов в больших проектах

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

Узнайте, почему большие TypeScript-проекты начинают "захлёбываться" от рекурсивных типов и обилия импортов, и как с помощью правильной структуры монорепы, настройки tsconfig и диагностики ускорить время компиляции и работу IDE. Рассматриваем инструменты, параллельную сборку, оптимизацию рекурсивных типов и прочие техники, которые помогут сохранить ваш проект быстрым и удобным.

Читать далее

Почему джуны путаются в асинхронном коде (и как научиться с ним работать)

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

Асинхронный код часто становится камнем преткновения для начинающих разработчиков. Почему функции выполняются не в том порядке, зачем нужны промисы, и что делает async/await? В статье я простыми словами объясняю:

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

Если асинхронность вызывает больше вопросов, чем ответов, загляните в статью - там всё по шагам. 🙂

Читать далее

Как сделать ёлку, если ты Unicode

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

Поздравляю Хабр и Хаброжителей с Новым 2025 годом! Несколькими годами ранее я писал о том, как сделать ёлку из функций, в этот раз сказ пойдёт о ёлке из Unicode символов. Ограничение - должна быть музыка, а результат должен помещаться в QR код.

Читать далее

Фронт без бэка: как мы сумели собрать тысячу форм в одну систему и не потерять рассудок

Время на прочтение9 мин
Охват и читатели12K
Когда три года назад в июле к нам пришли с просьбой сделать фронтенд для маленькой системы документооборота, мы оценили задачу в полгода… ТЗ принесли на создание более 1000 разных форм. Обещанные нами полгода перестали казаться спокойными.

Через пару недель к задаче добавились две крупные системы на 1С и ещё несколько в разработке, с бэкендами на С++ и Java. Объём работы стал выглядеть неподъёмно. Плюс основное требование — всё должно быть в едином интерфейсе. Так мы поняли, что нужно браться за универсальное решение, которое «скушает» любой бэкенд.

image
Импортозамещённый JSON

Эта история о том, как команда из 16 человек разработала Атом.Форму — продукт, который уже работает для шести крупных систем в «Росатоме», и их количество постоянно растёт. А срок создания фронта теперь занимает 2–3 недели для маленьких и несколько месяцев для развесистых систем.
Читать дальше →

Создаем Hamster Kombat почти с нуля. Практика по Vue 3 и Telegram Mini Apps

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

Привет, Хабр! В этой статье-инструкции вы узнаете, как с нуля сделать свою собственную Telegram-тапалку на современном стеке. Важный дисклеймер: тапалка, кликер и прочее — это всего лишь форма. Цель статьи — дать всеобъемлющий практикум по современному стеку и деплою проектов в облако.

Внутри статьи — полноценный Serverless-подход, разработка бота на Node и полный цикл создания FE-приложения. А еще комментарии по архитектурным и тактическим решениям, чтобы вы прокачали уровень программирования и насмотренности. Подробности под катом!
Читать дальше →

Парольная защита статичной HTML-страницы на JS

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


Обычно парольная защита производится через веб-сервер, который проверяет пароль и выдаёт контент. Стандартный способ: .htaccess и htpasswd. Но что, если нужно выложить зашифрованную веб-страницу и файлы на публичном хостинге, где у нас нет контроля над сервером? Эту проблему решают инструменты StatiCrypt и Portable Secret.

Для шифрования HTML перед публикацией StatiCrypt использует AES-256 и WebCrypto, а расшифровка происходит с помощью ввода пароля в браузере на стороне клиента, как показано в демо (пароль test).

StatiCrypt генерирует статическую страницу, которую можно безопасно заливать на любой хостинг, в том числе бесплатный сторонний хостинг, такой как GitHub Pages.
Читать дальше →

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

Чистая архитектура фронтенд приложений. Часть первая

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

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

Читать

Как мы превратили рутинную работу в удовольствие: история создания плагина для Р7-Офиса

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

Многие компании продолжают активно использовать Excel и язык макросов VBA для обработки и анализа данных. Однако с переходом на отечественные офисные решения (например, Р7-Офис) появилась необходимость в разработке новых инструментов обработки данных на JavaScript. 

В ЛАНИТ мы помогаем клиентам осуществить переход на Р7-Офис и создаем макросы, которые ранее использовались в Excel. Во время этого процесса наши разработчики внимательно анализировали запросы пользователей и выявили несколько общих трендов, на основе которых и был разработан наш плагин Аналитика.

Читать далее

Бесплатное обучение фулстек-разработке веб-сервиса с нуля по видео-урокам с исходным кодом и поддержкой

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

TLDR. Я примерно год создавал курс из 141 урока. Курс получился хороший, все кто проходят рады и пишут положительные отзывы. Я пытался его продавать, в лучшем случае у меня получалось отбивать рекламу в ноль. Короче, я хороший разработчик, я хорошо доношу материал, но я плохой маркетолог. Все эти таргреты, ретаргеты, воронки, шморонки — тоска унылая. Мне гораздо веселее и понятнее заработать на создании и запуске IT-продуктов, чему я и учу в этом учебнике. Так что пишу эту статью, чтобы сообщить вам о существовании моего курса и предложить всем желающим абсолютно бесплатно получить от него пользу 🙂

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

Читать далее

Ultimatum — еще один форк хромиума, с претензией…

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

image


Добрый день! Меня зовут Тимур и я программист.


Сегодня я хочу сделать настоящий анонс своей сборки chromium — Ultimatum. Он умеет уже достаточно много что бы гордо носить свое собственное имя.


В прошлой своей статье я рассказал о том как пробросил в js прямой доступ до http кеша и объяснил для чего я это делаю. Статья завершилась со словами что я еще вернусь со своим антидетект браузером. Я вернулся и это немного больше чем антидетект браузер.


Если коротко — Ultimatum уже помножил на ноль такие техники трекинга как hsts-pinning, favicons cache и вообще использование многих других кешей в трекинге. А также! Теперь можно поставить расширение с любого сайта, не только со сторов гугля, оперы или микрософта (с них кстати тоже можно — со всех!). А еще! Можно перехватывать сетевые запросы и подменять их полностью! Ну и так далее и тому подобное.


А теперь более подробно и более спокойно.

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

Базовое программирование, или Почему джуны не могут пройти к нам собеседование

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

Я – начальник отдела разработки небольшой государственной компании, и в последнее время мне снова пришлось провести несколько десятков созвонов-собеседований, с которых мне удалось отобрать только одного человека. О том, почему выпускники скиллбоксов присылают резюме пачками, но выхлоп от обучения собственных юристов компании оказывается выше, чем от собеседований по вакансии – эта статья.

Важно при этом отметить, что я считаю себя достаточно адекватным собеседующим. Я практически не задаю лично-специфичных вопросов (моя часть – техническое собеседование, и мы с него начинаем); отвечаю всем кандидатам, чтобы сразу было понятно, рассматриваем мы их или нет; стараюсь построить собеседование так, чтобы на него не уходило больше полутора часов; не спрашиваю про красно-черные деревья и знание алгоритмов; и вообще имею достаточно четкие критерии для оценки собеседуемых, которые и попытаюсь для вас обосновать.

Читать далее

Как сделать анимацию разными способами: CSS, WebP, Canvas, Lottie, Spine и секвенции

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

Привет! Меня зовут Даша, я фронтенд-разработчик отдела спецпроектов в KTS.

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

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

Читать далее

Слабоумие и отвага: как найти ликвидные облигации с доходностью до 40% и ежемесячными фиксированными выплатами

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

Что может быть привлекательнее депозита в Сбербанке под 21%? Видимо только депозит в ВТБ под 24%. А еще можно рассмотреть облигации с доходностью до 40% и ежемесячной выплатой купонов. Посмотрим, что они предлагают и какие существуют риски.

В статье будем искать такие варианты при помощи скрипта поиска ликвидных облигаций, который выложен на GitHub.

Вообще покупки высокодоходных облигаций с низким рейтингом (ВДО) на фоне роста ключевой ставки Центрального банка Российской Федерации – задача не для слабонервных. Высокие процентные ставки означают повышенный риск дефолта, особенно для эмитентов ВДО.

Ищем %