Почему CSS @function ведёт себя как замыкание в JS
Если вы проектируете компоненты или библиотеки,
Обычно
Я бы сохранил паттерн для дизайн-систем: задаёте
Если вы проектируете компоненты или библиотеки,
@function может упростить API: кастомная CSS-функция видит переменные не только там, где определена, но и в точке вызова. Это похоже на замыкание — переменные из контекста вызова становятся доступны внутри функции.Обычно
--var наследуется вниз по DOM, а @function ломает эту привычку: при вызове она получает доступ ко всем переменным текущего контекста. В статье разбирают, как использовать это для тем, размеров и палитр без лишних аргументов.Я бы сохранил паттерн для дизайн-систем: задаёте
--theme и --size-1 на корне, а функция сама подхватывает их там, где вызвана. Меньше дублирования и меньше шанса забыть пробросить значение в параметры.👍2❤1
Forwarded from Точка входа в программирование
HTML научат обновлять часть страницы без JavaScript
Если вы учите веб-разработку, полезно понимать, как браузер получает страницу кусками. Сервер может сначала отправить шапку, потом боковое меню, а потом основной текст. Но если один блок тормозит на сервере, всё остальное ждёт его в очереди.
Сейчас это обходят фреймворки и библиотеки вроде HTMX с помощью JavaScript. Предложение в Chrome добавляет в сам HTML маркеры-заполнители: сервер сначала говорит «сюда потом придёт контент», а когда он готов, браузер подставляет его в нужное место — без скриптов.
Это не готово для настоящих сайтов, но помогает понять потоковую загрузку и частичные обновления изнутри. Разбор с примерами синтаксиса: откройте статью и найдите маркер-заполнитель — увидите, как HTML делится на «сейчас» и «потом».
Если вы учите веб-разработку, полезно понимать, как браузер получает страницу кусками. Сервер может сначала отправить шапку, потом боковое меню, а потом основной текст. Но если один блок тормозит на сервере, всё остальное ждёт его в очереди.
Сейчас это обходят фреймворки и библиотеки вроде HTMX с помощью JavaScript. Предложение в Chrome добавляет в сам HTML маркеры-заполнители: сервер сначала говорит «сюда потом придёт контент», а когда он готов, браузер подставляет его в нужное место — без скриптов.
Это не готово для настоящих сайтов, но помогает понять потоковую загрузку и частичные обновления изнутри. Разбор с примерами синтаксиса: откройте статью и найдите маркер-заполнитель — увидите, как HTML делится на «сейчас» и «потом».
👍3❤2
Как в Cloudflare шесть недель ловили баг в HTTP-библиотеке hyper
Если вы пишете веб-сервисы на Rust, я бы сохранил этот разбор. Команда Cloudflare Images перешла на прямое локальное соединение через Unix-сокеты, и большие изображения стали иногда возвращаться обрезанными: HTTP 200, но тело короче Content-Length. В логах тишина.
Причина оказалась в hyper. Цикл
Если вы пишете веб-сервисы на Rust, я бы сохранил этот разбор. Команда Cloudflare Images перешла на прямое локальное соединение через Unix-сокеты, и большие изображения стали иногда возвращаться обрезанными: HTTP 200, но тело короче Content-Length. В логах тишина.
Причина оказалась в hyper. Цикл
poll_loop отбрасывал результат poll_flush, даже когда тот возвращал Poll::Pending. Баг существовал в версиях 0.14.x, 1.7 и 1.8, но прежний посредник читал данные быстро, и он не проявлялся. Cloudflare исправили его за четыре строки кода: flush теперь выполняется перед shutdown.🔥3❤1
Как выбрать системного интегратора в 2026 году?
Выбор подрядчика — решение на несколько лет. Цена ошибки — суды или переписывание проекта с нуля. Не ошибиться всё-таки можно, если воспользоваться небольшим чек-листом для выбора подрядчика.
Например, не стоит сразу начинать долгосрочное сотрудничество, а проверить нового партнёра на небольшой задаче. Внимательно смотрите на сметы, обращайте внимание на прозрачность и качество коммуникаций, и не забудьте свериться с репутацией интегратора на рынке.
Всего критериев 12, обо всех подробно читайте в новом материале.
Выбор подрядчика — решение на несколько лет. Цена ошибки — суды или переписывание проекта с нуля. Не ошибиться всё-таки можно, если воспользоваться небольшим чек-листом для выбора подрядчика.
Например, не стоит сразу начинать долгосрочное сотрудничество, а проверить нового партнёра на небольшой задаче. Внимательно смотрите на сметы, обращайте внимание на прозрачность и качество коммуникаций, и не забудьте свериться с репутацией интегратора на рынке.
Всего критериев 12, обо всех подробно читайте в новом материале.
❤2👍1
Deno соберёт веб-приложение в десктоп
Если вам надоели тяжеловесные Electron-обёртки, Deno предлагает альтернативу. В мажорном релизе Deno добавит команды для сборки десктопа из TypeScript, Next.js, Astro, Fresh, TanStack Start или Vite SSR. Я бы сохранил: переносим веб-приложение в окно почти без лишних движений.
Главный поворот — нативный WebView вместо встроенного Chromium (CEF). Приложение на WebView в macOS весит около 68,5 МБ, а на CEF выходит 308,9 МБ и стартует медленнее. Меню, диалоги и уведомления уже есть, а вот диалог выбора файла и API буфера обмена пока нет, мобильную версию обещают позже.
В прод я бы это пока не нёс: нестабильно, и WebView на старых машинах может вести себя непредсказуемо. Но за развитием стоит следить.
Если вам надоели тяжеловесные Electron-обёртки, Deno предлагает альтернативу. В мажорном релизе Deno добавит команды для сборки десктопа из TypeScript, Next.js, Astro, Fresh, TanStack Start или Vite SSR. Я бы сохранил: переносим веб-приложение в окно почти без лишних движений.
Главный поворот — нативный WebView вместо встроенного Chromium (CEF). Приложение на WebView в macOS весит около 68,5 МБ, а на CEF выходит 308,9 МБ и стартует медленнее. Меню, диалоги и уведомления уже есть, а вот диалог выбора файла и API буфера обмена пока нет, мобильную версию обещают позже.
В прод я бы это пока не нёс: нестабильно, и WebView на старых машинах может вести себя непредсказуемо. Но за развитием стоит следить.
🔥4❤2
Conduit: API-шлюз с TypeScript-плагинами вместо redeploy
Если gateway на Go разрастается лапшой из префиксов, правка auth ведёт к новому деплою. Автор Conduit вынес эту боль в отдельный слой: Go занимается routing, proxying, CORS и SSRF-защитой, а логика авторизации, логирования и правил маршрутизации живёт в sandboxed Deno runtime как TypeScript-плагины.
Go и Deno общаются через Unix-сокет со strict snapshot-and-patch протоколом. Меняете файл плагина, сохраняете, и gateway не пересобирается. На хосте уживаются разные схемы доверия: HMAC-сессии для user/chat и JWT для admin с X-Gateway-Admin-заголовками.
Я бы сохранил: такое разделение редко даётся с первой итерации, а здесь оно разобрано на живом коде. Подробности и спорные решения пригодятся, если проектируете свою входную точку.
Если gateway на Go разрастается лапшой из префиксов, правка auth ведёт к новому деплою. Автор Conduit вынес эту боль в отдельный слой: Go занимается routing, proxying, CORS и SSRF-защитой, а логика авторизации, логирования и правил маршрутизации живёт в sandboxed Deno runtime как TypeScript-плагины.
Go и Deno общаются через Unix-сокет со strict snapshot-and-patch протоколом. Меняете файл плагина, сохраняете, и gateway не пересобирается. На хосте уживаются разные схемы доверия: HMAC-сессии для user/chat и JWT для admin с X-Gateway-Admin-заголовками.
Я бы сохранил: такое разделение редко даётся с первой итерации, а здесь оно разобрано на живом коде. Подробности и спорные решения пригодятся, если проектируете свою входную точку.
🤔3
Вашу фичу могут поломать костыли браузеров под крупные сайты
Если вы тестируете новую фичу только в Chrome и считаете, что этого достаточно — стоит пересмотреть. Safari и Firefox хранят в движках списки исключений для гигантов вроде TikTok, Netflix, Instagram, Facebook, X и Reddit: рендер, события и медиа там работают не так, как на обычных сайтах.
Firefox показывает их в
К чему это вам: если ваша фича использует embedы, видео, соцлогины или интеграции с такими доменами, поведение в Safari/Firefox может отличаться от Chrome. Разбор от Staff Engineer из Canva.
Если вы тестируете новую фичу только в Chrome и считаете, что этого достаточно — стоит пересмотреть. Safari и Firefox хранят в движках списки исключений для гигантов вроде TikTok, Netflix, Instagram, Facebook, X и Reddit: рендер, события и медиа там работают не так, как на обычных сайтах.
Firefox показывает их в
about:compat — инъекции CSS/JS, подмена user-agent и костыли под конкретный домен. У Safari это Quirks.cpp в WebKit: например, для Facebook, X и Reddit видео не ставится на паузу, когда уходит из вьюпорта, но остаётся в PiP.К чему это вам: если ваша фича использует embedы, видео, соцлогины или интеграции с такими доменами, поведение в Safari/Firefox может отличаться от Chrome. Разбор от Staff Engineer из Canva.
🤔3
Тестируйте Vue-компоненты в браузере, без Node и сборки
Мне давно не хватало лёгкого способа гонять фронтенд-тесты без тяжёлого Node-окружения. Playwright хорош, но новый процесс браузера на каждый тест и Node-оркестрация быстро утомляют. Автор jvns.ca пошёл другим путём: вместо отдельного браузера запускает интеграционные тесты Vue-компонентов прямо в открытой вкладке.
Взял QUnit, встроил тесты в страницу и получил кнопку для перезапуска одного теста. Это удобно, когда в тестах много сетевых запросов и отлаживать хочется по одному. Для проектов без сборки так можно проверить компоненты в реальном DOM, не поднимая отдельный браузер.
Если у вас небольшой Vue-проект без Node-сборки, я бы попробовал такую схему в QA перед релизом. Подробности в заметке.
Мне давно не хватало лёгкого способа гонять фронтенд-тесты без тяжёлого Node-окружения. Playwright хорош, но новый процесс браузера на каждый тест и Node-оркестрация быстро утомляют. Автор jvns.ca пошёл другим путём: вместо отдельного браузера запускает интеграционные тесты Vue-компонентов прямо в открытой вкладке.
Взял QUnit, встроил тесты в страницу и получил кнопку для перезапуска одного теста. Это удобно, когда в тестах много сетевых запросов и отлаживать хочется по одному. Для проектов без сборки так можно проверить компоненты в реальном DOM, не поднимая отдельный браузер.
Если у вас небольшой Vue-проект без Node-сборки, я бы попробовал такую схему в QA перед релизом. Подробности в заметке.
Julia Evans
Testing Vue components in the browser
Hello! One of my long term projects on here is figuring out how to write frontend Javascript without using Node or any other server JS runtime.
❤2👍1👎1
Аутсорс, инхаус или выделенная команда — что реально дешевле?
Спойлер: ставка разработчика вам этого не скажет. Сравнивать модели по ставке довольно бессмысленное занятие, потому что за низкими ставками прячутся найм, налоги, онбординг, простои, переделки и часы техлида. В смете их не видно, а в бюджете — ещё как.
Разбираемся, как считать настоящий TCO (полную стоимость владения) по трём моделям:
🔘 Инхаус — почему свой разработчик дороже оффера;
🔘 Аутсорс — за что вы платите маржу подрядчику;
🔘 Выделенные команды — почему «возьмём человека и ускоримся» работает не всегда.
Внутри — формулы для каждой модели и чек-лист из 3 пунктов, чтобы выбрать формат под свой проект.
Спойлер: ставка разработчика вам этого не скажет. Сравнивать модели по ставке довольно бессмысленное занятие, потому что за низкими ставками прячутся найм, налоги, онбординг, простои, переделки и часы техлида. В смете их не видно, а в бюджете — ещё как.
Разбираемся, как считать настоящий TCO (полную стоимость владения) по трём моделям:
Внутри — формулы для каждой модели и чек-лист из 3 пунктов, чтобы выбрать формат под свой проект.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
VPS vs VDS vs виртуальный хостинг: что выбрать в 2026
Часто сервер выбирают по цене, а потом упираются в нехватку ресурсов, гибкости или поддержки. И почти никто не знает главного: VPS и VDS — это в большинстве случаев одно и то же, разница только в названии. Реально выбор идёт между хостингом (провайдер всё настроил, но конфигурация ограничена) и изолированным сервером с root-доступом.
В подборке 6 провайдеров под разные сценарии: от старта на виртуальном хостинге за ~123 рубля в месяц до VPS с зарубежными локациями. Внутри реальные цены, лимиты, условия по бэкапам, тестовым периодам и подсказки как сделать правильный выбор для своего случая.
Часто сервер выбирают по цене, а потом упираются в нехватку ресурсов, гибкости или поддержки. И почти никто не знает главного: VPS и VDS — это в большинстве случаев одно и то же, разница только в названии. Реально выбор идёт между хостингом (провайдер всё настроил, но конфигурация ограничена) и изолированным сервером с root-доступом.
В подборке 6 провайдеров под разные сценарии: от старта на виртуальном хостинге за ~123 рубля в месяц до VPS с зарубежными локациями. Внутри реальные цены, лимиты, условия по бэкапам, тестовым периодам и подсказки как сделать правильный выбор для своего случая.
❤1
django-scroll-to-top: кнопка «наверх», которая не ломается в проде
Кнопка «наверх» кажется мелочью, пока в проде не всплывают cookie-баннер, чат поддержки, нижняя мобильная навигация и строгий CSP. Автор собрал типовые условия в Django-пакет
Без jQuery, CDN и обязательной сборки. Если JavaScript выключён, остаётся обычная ссылка в начало страницы. Если в ваших Django-проектах кнопку надоело таскать между шаблонами, я бы заглянул в разбор на Tproger.
Кнопка «наверх» кажется мелочью, пока в проде не всплывают cookie-баннер, чат поддержки, нижняя мобильная навигация и строгий CSP. Автор собрал типовые условия в Django-пакет
django-scroll-to-top: один template-тег, Django Admin, настройка цвета и положения через админку без правки шаблонов.Без jQuery, CDN и обязательной сборки. Если JavaScript выключён, остаётся обычная ссылка в начало страницы. Если в ваших Django-проектах кнопку надоело таскать между шаблонами, я бы заглянул в разбор на Tproger.
😁10❤2💩1
GoFrame — интерфейсы на Go через WASM
Если хотите React-подобные компоненты, но с Go-типами в браузере, посмотрите на GoFrame. В разработке участвовал наш подписчик, который и рассказал о нём. Экспериментальный фреймворк компилирует Go в WebAssembly и предлагает JSX-подобный синтаксис в файлах .gox. Пока это не замена React/Vue, а песочница для типобезопасного фронтенда. Авторы, кстати, просят фидбек. Так что не поскупитесь на комментарии.
Я сохранил ссылку, чтобы посмотреть на совмещение строгой типизации Go с компонентным рендерингом. Если экспериментируете с WASM, заходите. Вы бы написали фронтенд на Go?
Если хотите React-подобные компоненты, но с Go-типами в браузере, посмотрите на GoFrame. В разработке участвовал наш подписчик, который и рассказал о нём. Экспериментальный фреймворк компилирует Go в WebAssembly и предлагает JSX-подобный синтаксис в файлах .gox. Пока это не замена React/Vue, а песочница для типобезопасного фронтенда. Авторы, кстати, просят фидбек. Так что не поскупитесь на комментарии.
Я сохранил ссылку, чтобы посмотреть на совмещение строгой типизации Go с компонентным рендерингом. Если экспериментируете с WASM, заходите. Вы бы написали фронтенд на Go?
GitHub
GitHub - graybuton/goframe: Experimental Go-first browser/WASM framework with GOX markup and the goxc toolchain.
Experimental Go-first browser/WASM framework with GOX markup and the goxc toolchain. - graybuton/goframe
❤3👍3🔥2🤯1
Почему ваш пет-проект ещё не бизнес, а вы — не предприниматель
У каждого второго разработчика в столе лежит проект, который «вот-вот станет бизнесом». Осталось дописать пару фич — и дальше всё поедет само. Спойлер: не поедет. Разбираемся, где заканчивается код и начинается бизнес: почему всё стартует не с технологии, а с чужой проблемы, чем фаундер отличается от тимлида и почему рабочий сервис с первыми пользователями и MRR — это не бизнес, а промежуточный результат.
Простой тест: уйдите в отпуск на две недели, и если без вас всё встало — поздравляем, у вас пока не бизнес, а вы сами и есть главный «производственный ресурс».
Внутри ещё и про AR-очки на трамвайном заводе, которые зарубили сами рабочие: история о том, как ценность решения определяете не вы.
У каждого второго разработчика в столе лежит проект, который «вот-вот станет бизнесом». Осталось дописать пару фич — и дальше всё поедет само. Спойлер: не поедет. Разбираемся, где заканчивается код и начинается бизнес: почему всё стартует не с технологии, а с чужой проблемы, чем фаундер отличается от тимлида и почему рабочий сервис с первыми пользователями и MRR — это не бизнес, а промежуточный результат.
Простой тест: уйдите в отпуск на две недели, и если без вас всё встало — поздравляем, у вас пока не бизнес, а вы сами и есть главный «производственный ресурс».
Внутри ещё и про AR-очки на трамвайном заводе, которые зарубили сами рабочие: история о том, как ценность решения определяете не вы.
👎6❤2👍2
Каждый, кто работал с легаси, знает это чувство: код вроде бы живой, но каждая фича даётся всё тяжелее, а на вопрос «почему так долго?» хочется ответить «потому что там всё сложно». Вот только бизнесу это ничего не объясняет — «плохой код» звучит как внутренняя боль разработчиков, а не как аргумент.
Аргументировать необходимость рефакторинга на самом деле можно. Оказывается, надо просто перевести техдолг в деньги: сколько теряется каждый месяц из-за замедлившейся разработки и багов и за какой срок рефакторинг окупится. В новом материале разбираемся, как посчитать ROI рефакторинга и с какими аргументами идти к менеджменту.
Аргументировать необходимость рефакторинга на самом деле можно. Оказывается, надо просто перевести техдолг в деньги: сколько теряется каждый месяц из-за замедлившейся разработки и багов и за какой срок рефакторинг окупится. В новом материале разбираемся, как посчитать ROI рефакторинга и с какими аргументами идти к менеджменту.
❤3
Go + PostgreSQL: тормоза чаще в драйвере, чем в базе
Если ваш Go-бэкенд на Postgres лагает, причина может быть не в запросах, а в том, через что вы к базе обращаетесь. Старый
Но главное — пул соединений. Без лимитов Go легко завалит Postgres коннектами: настройте
На средних проектах разница в нагрузке на базу и DX заметна сразу.
В разборе на Dev.to найдёте примеры пула, подготовленных запросов и работы с NULL.
Если ваш Go-бэкенд на Postgres лагает, причина может быть не в запросах, а в том, через что вы к базе обращаетесь. Старый
lib/pq фактически заморожен: новых фич и оптимизаций не ждать. Для новых проектов берите pgx: он быстрее, активно поддерживается и работает с database/sql через pgx/stdlib.Но главное — пул соединений. Без лимитов Go легко завалит Postgres коннектами: настройте
SetMaxOpenConns(25), SetMaxIdleConns(5) и ConnMaxLifetime. В циклах используйте prepared statements, чтобы не парсить запросы заново, и сканируйте NULL в sql.NullString.На средних проектах разница в нагрузке на базу и DX заметна сразу.
В разборе на Dev.to найдёте примеры пула, подготовленных запросов и работы с NULL.
🔥5