8 песочниц в браузере без Docker: как мы изолировали выполнение кода на клиенте

Как дать пользователю выполнять JavaScript, Python и SQL прямо в браузере и не пожалеть? Разбираем восемь песочниц: Web Worker для JS, Pyodide для Python, SQL.js для SQLite, iframe sandbox для HTML/CSS, DOMPurify для Markdown, самописный эмулятор Bash. Никаких Docker-контейнеров — только клиент.

https://habr.com/ru/articles/1051752/

#разработка #песочница #изоляция_кода #web_worker #webassembly #pyodide #sql #безопасность

8 песочниц в браузере без Docker: как мы изолировали выполнение кода на клиенте

Когда мы начинали работать над проектом, нам очень хотелось сделать интерактивные песочницы для кода — такие, в которых можно быстро проверить JavaScript-сниппет, прогнать SQL-запрос или...

Хабр

Lighthouse 100 / 100: как мы повесили GTM, GA4, Яндекс.Метрику и Clarity на статический сайт — и не уронили скорость

Когда маркетологи хотят всё: сырые данные в GA4, запись сессий в Метрике, хитмапы в Clarity и при этом «Lighthouse 100» в PageSpeed Insights — приходится изобретать. Расскажу, как мы это сделали на небольшом проекте и во что это обошлось по времени и нервам. Проект — нишевый агрегатор российских хостинг-провайдеров. Более 120 страниц в sitemap, 31 статья, десятки категорий услуг, живые цены, сравнения. Стек: Astro 6 + Strapi 5 + Tailwind 4, плюс Partytown, PostgreSQL, Nginx и обычный VPS на Ubuntu. Сайт собирается в статику во время билда, никакого SSR в рантайме нет. На desktop — Lighthouse 100 / 100 / 100 / 100. На mobile с жёстким throttling (4x slow CPU) — 99 / 100 / 100 / 100. В реальных условиях и по Chrome UX Report — 100 везде. LCP на desktop — 0,5 секунды, на mobile throttled — 1,7 секунды. CLS — ноль. TBT — 10 ms на мобильном и 0 ms на десктопе.

https://habr.com/ru/articles/1042228/

#Astro #Strapi #Tailwind_CSS #Partytown #Lighthouse #Core_Web_Vitals #Web_Worker #GTM #performance #SSG

Lighthouse 100 / 100: как мы повесили GTM, GA4, Яндекс.Метрику и Clarity на статический сайт — и не уронили скорость

Когда маркетологи хотят всё: сырые данные в GA4, запись сессий в Метрике, хитмапы в Clarity и при этом «Lighthouse 100» в PageSpeed Insights — приходится изобретать. Расскажу, как мы это сделали на...

Хабр

От favicon до криптографии: как мы уместили 167 рабочих инструментов в одном сервисе

Мы были двумя 16-летними студентами колледжа, чья программа безнадёжно отставала от индустрии. Пока на парах проходили технологии пятилетней давности, реальный мир уже жил в экосистеме React, Next.js и WebAssembly. Пришлось учиться самим — по вечерам разбирая современный стек и споря об архитектуре. Эта тяга сподвигла нас создавать не абстрактные проекты для портфолио, а реально полезные инструменты, которыми хочется пользоваться каждый день. Так четыре года назад родился наш проект — 167 утилит и 8 интерактивных песочниц в одном сервисе. Форматтеры, конвертеры, генераторы паролей и UUID, DevOps-конфиги, шпаргалки и песочницы для Python, SQL и Bash. Всё сделали прямо в браузере, без сервера. Рассказываем как это было.

https://habr.com/ru/articles/1041510/

#инструменты_для_разработчиков #песочницы_в_браузере #форматтеры_кода #WebAssembly #CodeMirror #Nextjs #Web_Worker

От favicon до криптографии: как мы уместили 167 рабочих инструментов в одном сервисе

Мы с Алексеем были двумя молодыми и неопытными 16-летними парнями и познакомились на первом курсе колледжа. Программа колледжа, в котором мы учились, не успевала за индустрией. Это факт, с которым мы...

Хабр