14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
💳Как платить за Spotify, Cursor, ChatGPT и другие любимые подписки?▫️
Если ты читаешь это, скорее всего, у тебя уже была проблема: надо оплатить подписку или купить иностранный софт, а российскую карту не принимают.
Mirocard решает это за пару минут:
Это сервис, где можно выпустить виртуальную карту, пополнить рублями через СБП🏦 и платить за:
- Midjourney
- ChatGPT
- Figma
- ElevenLabs
- Claude
- Netflix
- Spotify и еще сотни подписок 💎
По промокоду HTML50 выпуск карты со скидкой 50%
#компонент дня
Bramus сделал <hic-pageflip> — натуральное перелистывание страниц с загибами, тенями и всей этой физикой бумажной книжки. Сам эффект давно можно было сделать на Canvas/WebGL, проблема была в другом: содержимое страницы превращалось, по сути, в картинку. Прощай выделение текста, ссылки, accessibility и нормальный DOM.
Вот: https://www.bram.us/2026/09/02/html-in-canvas-pageflip/
Кстати, лет шесть назад уже был пост о подобном эффекте, прелесть той статьи — разложена вся геометрия: /channel/htmlshit/400
Но там не 3D, там clip-path и динамические тени.
А тут используется экспериментальный HTML-in-Canvas API: браузер умеет отрисовывать настоящий HTML через Canvas/WebGL, при этом исходные элементы остаются живыми DOM-элементами. Поэтому текст можно выделять, ссылки нажимаются, скринридеры продолжают видеть содержимое — а сверху на всё это можно навесить настоящее 3D-деформирование страницы.
Удобно? Не то слово!
Пока, правда, это работает в Chrome за флагом canvas-draw-element, а сам API ещё меняется. Но направление очень интересное. Нет никаких сомнений, что это попрёт за пределы экспериментов.
В лучших традициях Macromedia Flash!
#canvas #html #webgl #webgpu
🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер
3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
Что делать с петабайтами данных в MinIO, если разработка хранилища остановлена?
MinIO прекратил активную разработку — продукт зафиксирован в текущем состоянии, патчи безопасности рассматриваются в индивидуальном порядке, обновления не тестируются. Для компаний, у которых на MinIO (или другом open-source S3-хранилище) хранятся петабайты данных, это уже не гипотетический риск, а вопрос времени.
3 сентября показываем на практике, как перенести данные из устаревшего хранилища в другое S3-совместимое — без остановки сервиса.
В программе:
🔹 что переносится: объекты, версии, ACL, bucket-policy, lifecycle, теги, ссылки
🔹 техническое переключение с минимальным окном смены endpoint и параллельной работой на обоих хранилищах
🔹 поведение при сбоях синхронизации — перенос с точки останова, а не с нуля
🔹 демо: от подключения источника до полного переключения трафика
Для DevOps- и SRE-инженеров, ИТ-директоров и всех, кому остановка сервиса недопустима даже на время миграции.
📅 3 сентября, 16:00 мск
Регистрация
#заметка дня
Каким бы современным ни был ваш фронтенд, у крупного клиента между браузером и интернетом вполне может стоять Zscaler — корпоративная система безопасности, через которую компании прогоняют веб-трафик сотрудников, фильтруют его и инспектируют HTTPS.
С TLS inspection он фактически работает как MITM-прокси: расшифровывает трафик, проверяет его и устанавливает новое соединение до вашего сервера. В результате ваши красивые предположения про HTTP/2, multiplexing и долгоживущие соединения внезапно превращаются в тупую очередь.
У Zscaler HTTP/2 зависит от настроек, а некоторые функции вообще откатывают трафик на HTTP/1.1. WebSocket тоже проходит через отдельные политики и ограничения.
И вот вы ищете баг во фронтенде, потому что «у банка всё тормозит», а проблема в том, что где-то между вашим кодом и пользователем сидит корпоративный прокси и молча превращает 2026 год обратно в 2012-й.
А потом тикет всё равно прилетит вам.
#bug #http
Что будет с разработкой после первого поколения AI-инструментов
5 сентября Яндекс проведёт deep tech night — конференцию о технологических вызовах, с которыми индустрия сталкивается в эпоху AI. Не столько о самих нейросетях, сколько о том, как из-за них меняются архитектура, инфраструктура, продукты и работа разработчиков.
В программе много полезных докладов. Например, Мо Гавдат, бывший Chief Business Officer Google X, представит свой взгляд на то, как генеративные модели могут изменить разработку ПО, инженерные команды и саму роль разработчика.
Из технической части мне особенно интересны два доклада:
— «Облако в эпоху AI: архитектура платформы для гибридных агентов» Василия Ершова. Про то, как агент собирается из модели, инструментов и среды и как обеспечить ему долгоживущую сессию поверх короткоживущих компонентов. Хороший переход от разговоров об агентах к их реальному устройству.
— «Влияние трендов развития нейросетей на архитектуру NPU и инференс-фреймворки» Егора Филимонова, лидера команды ускорения инференса на NPU в SGLang. Интересно посмотреть, как требования моделей меняют не только софт, но и железо под ним.
Ещё будут доклады про переход рекомендательных систем от классического ML к генеративным моделям, инфраструктуру RL-обучения и Physical AI — автономные системы, которые принимают решения уже не в чате, а в физическом мире. В параллельной программе заявлены кейсы про превращение Алисы из поиска в агента, AI как управляющий слой Яндекс Лавки, измерение реальной продуктивности разработчиков с AI и построение MLOps в условиях Zero Data Access.
Для подключения к трансляции нужно зарегистрироваться: участники смогут задать вопросы экспертам и после мероприятия получить записи всех докладов, включая те, что не попали в трансляцию.
Подробная программа и регистрация — здесь.
#фишка дня
Применяя position: sticky к заголовку таблицы, мы получам прекрасную и понятную реализацию прилипшего заголовка.
Вот только есть одна проблема: последняя строка таблицы при скролле скрывается под этим самым заголовком и выглядит это, ну, странно. Особенно в случае, когда в таблице не просто текст, а условия сравнения, изображения и так далее.
А решение простое!
Добавляем margin-bottom на thead размером во всю высоту строки:
margin-bottom: calc(1lh + 20px);
1lh — это буквально единица измерения, позволяющая обратиться к значению интерлиньяжа, aka высоте строки. Ну а складывать удавов с попугаями мы умели всегда.
Проект от подписчика!
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Всем привет, меня зовут Николай и я алкоголик фронтенд-разработчик уже более 10 лет. Последние года два под влиянием тенденций, да и просто из интереса, начал внедрять ИИ-решения в свою работу и повседневную жизнь.
Этот канал я читаю уже несколько лет и с интересом слежу за тем, что Сергей выкладывает из найденного и личного. Недавно у него начали появляться истории от подписчиков, и я думаю, что это очень круто, так как платформа показывает самые свежие тенденции и позволяет не «верстать в стол», а что-то показать группе единомышленников.
Недавно на канале появился пост от подписчика, который также собрал своего бота, занимающегося финансами и планированием. Я подумал, что это очень похоже на то, что я недавно сделал для себя и продолжаю развивать. В общем, решил, что это отличная возможность показать, что я сделал, и, возможно, получить полезные комментарии.
Итак, представляю вашему вниманию Personal Finance AI Accountant - бот, сборка моделей и просто умница.
Начался этот проект в рамках 5-дневного интенсива от Google и Kaggle как Capstone Project (ссылка на проект). За идею взял решение своей боли - учёта финансов для семьи и бизнеса. Бот создан с использованием Google ADK 2.0 (Graph Workflow) и семейства Gemini (разные модели под разные задачи для экономии).
За последний месяц этот прототип превратился в приложение, которое я ежедневно активно тестирую.
В настоящее время оно уже поддерживает:
- регистрацию расходов в виде текста, голосовых сообщений, чеков и PDF-файлов;
- сверку банковских выписок и текущих трат (загружаешь выписку за месяц, бот ищет то, что не внесено, и вносит);
- автоматическое сохранение чеков на Google Диск;
- поддержку групп (семейная или бизнес);
- автоматическую классификацию по категориям;
- интерфейс в Telegram;
- интеграцию с Google Drive и Google Sheets;
- интерактивную информационную панель;
- поддержка двух валют - EUR и USD (живу в Германии, поэтому ориентация на Европу);
- английский, немецкий, украинский и русский языки.
Одна из функций, которой я особенно горжусь, - это подход, при котором приоритет отдаётся конфиденциальности - чеки хранятся в вашем личном Google Диске, финансовые отчёты - в ваших личных Таблицах Google, и вы всегда сохраняете полный контроль над своими данными.
Следующим важным этапом станет внедрение модуля, который будет помогать организовывать налоговые вычеты в течение всего года, а также отдельный веб-интерфейс, интеграция с WhatsApp и более точные финансовые аналитические данные. Сейчас вся авторизация идёт через Telegram.
В настоящее время я ищу несколько бета-тестеров (не из РФ). Если вы хотите опробовать приложение Personal Finance AI Accountant - пишите в личку.
Любите ли вы шрифтовые лонгриды так же, как люблю их я? Тут про один шрифт — текста на хороший журнал и 600 фотографий.
В 2007 году Марцин Вихари впервые приехал в Нью-Йорк и фотографировал там все шрифты, которые положено любить: Helvetica, Akzidenz Grotesk, Gotham. Один он при этом вообще не заметил — хотя тот был буквально вокруг.
Спустя десять лет Вихари обратил внимание на странные буквы на старых клавиатурах. Квадратные, местами почти детские: чудная Q, слишком широкие P и R, странные цифры. Он попытался выяснить, что это за шрифт. Сервисы распознавания давали разные ответы, скачать его было негде, а редкие упоминания называли его Gorton.
А потом Gorton начал попадаться в других местах.
На пароме. В национальном парке. На домофоне. На крышке уличного оборудования. В лифте. У стоматолога. В переулке.
И тут уже стало интересно: что это вообще за шрифт и почему он везде?
Первая разгадка нашлась довольно быстро. Gorton оказался шрифтом для гравировальных станков: буквы вырезались фрезой по шаблону, поэтому все линии одинаковой толщины, окончания круглые, а острых углов почти нет. В каталоге производителя он нашёл Gorton Normal 1952 года. Потом каталог 1935-го. Потом 1925-го. Потом — 1902-го.
Казалось бы, расследование закончено.
Но дальше выяснилось, что Gorton встречается там, где ничего не гравировали: напечатанным на бумаге, нарисованным краской на металле. Потом обнаружились его родственники в системах технического черчения, трафаретах, Letraset, военных стандартах и ранних компьютерных шрифтах. Gorton оказался на локомотивах, подлодках, истребителях, атомных объектах и клавишах компьютера Apollo.
А ещё позже Вихари увидел его в Австралии — только немного другим. И это вывело расследование на новый след: оказалось, что история начинается не с американской Gorton Machine Company, как он думал годами, а ещё раньше и на другом континенте — с британского производителя объективов Taylor, Taylor & Hobson, который в 1894 году придумал машину для гравировки надписей на линзах и алфавит для неё.
К этому моменту автор уже семь лет был одержим Gorton. А в Нью-Йорке в итоге прошёл больше ста миль и сделал тысячи фотографий одного-единственного шрифта.
В общем, это не столько статья про шрифт, сколько очень медленно раскручивающийся детектив о наборе букв, который вроде бы никто специально не замечал — а он больше века подписывал весь физический мир вокруг нас.
The hardest working font in Manhattan
Почитайте, или хотя бы посмотрите. Пост, как минимум, полон приятных глазу фотографий городской среды, а уж количество способов нанесения шрифты на материалы не поддаётся никакому осмыслению.
#font #article
#игра дня
Давненько не было чего-то необычного.
Впрочем, если вы не фанат Dwarf Fortress, конечно.
Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать.
Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.
Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память for (var i = 0; i < ...), будет ощущение, что вы просто продолжаете работу, только теперь в компании ASCII-графики и странного профессора.
🎮 https://untrustedgame.com/ 📂 https://github.com/AlexNisnevich/untrusted
#game #js #бородач
#фишка дня
Каждому смотрящему сериалы известно, что один из самых лучших способов сделать текст субтитров видимым на практически любом фоне — это добавить инверсную обводку.
Белый контур для чёрного текста, чёрный — для белого (внезапно).
Есть ли что-то подобное в CSS? Ну, конечно, есть! Как минимум, можно бросить тень aka text-shadow. Правда, синтаксис не очень интуитивный да и выглядит иногда странненько.
Какие ещё варианты? SVG text, очевидно, но там свои нюансы с доступностью и стилями.
И есть ещё! -webkit-text-stroke-color
Несмотря на префикс, Firefox тоже его поддерживает (спорное решение, но уж как есть).
Вот только как всегда есть нюанс. По-умолчанию, обводка будет нарисована перед слоем с текстом. Это очевидно, если понимать разницу между штрихом (stroke) и обводкой (outline), но всё же.
Поэтому paint-order: stroke нам в помощь! Таким образом, штрих будет отрисован первым, натуральным образом превратившись в обводку (при достаточной толщине, конечно же):
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: var(--stroke);
paint-order: stroke;
#статья дня
Прекрасный рефрешер знаний по таблицам от Мишель Баркер: https://piccalil.li/blog/styling-tables-the-modern-css-way/
Таблицы получили много незаслуженного хейта из-за лихих нулевых. Мобильные устройства тоже не добавили удобства, в итоге многие положили болт на семантику и начали верстать таблицы гридами. Во имя чего — непонятно.
А люди потом в эксель не могли ничего скопировать.
Но вместе с этим, ничего более универсального для двумерного представления данных пока не придумали, поэтому имеет смысл обновить знания по существующим фишкам и посмотреть, нет ли чего нового.
Статья хороша тем, что посвящена не трюкам, а просто сводит воедино базу по доступности и удобству. Да, sticky columns там тоже описываются.
Ну и тут уместно напомнить о моём тейке про доступные таблицы: /channel/htmlshit/2981
#css #table #бородач
#статья дня
Я тут в нашем продукте всё пытаюсь сделать идеальные всплывающие уведомления, aka тосты.
Потому что выскакивают, как хлеб из тостера.
Поначалу они были сугубо императивные, вызвали уведомление вручную, вручную же скрыли все разом или по некому id. Потом я решил объединить уведомления и некоторые виды модальных окон (например, подтверждение или отмену действия).
Параллельно я начал переписывать императивные уведомления на React, потому что на тот момент приложение стало гибридным. Получалось вроде неплохо. Но в какой-то момент...
В какой-то момент я на полную познал, что такое гипотеза Чёрной Королевы (забавно, что в английском языке — Красной Королевы). В простейшем варианте она звучит так: "Нужно бежать, чтобы оставаться на месте". Непомерно много усилий требуется, чтобы лишь чуть-чуть двигаться вперёд.
В мире разработки она же значит, что на один закрытый баг — получаешь пятнадцать новых :)
Да, пришло время признать, что я со своей реализацией уведомлений зашёл в тупик, и надо смотреть в сторону альтернатив.
И тут попадается нечто прекрасное, компонент Sonner: https://emilkowal.ski/ui/building-a-toast-component
И сразу ссылка на репозиторий: https://github.com/emilkowalski/sonner
Статья буквально на острие взаимодействия CSS и JS, объяснены принципы построения анимаций на CSS-переменных и управления ими из React-приложения.
Сами же тосты реализованы на простой шине событий, что весьма надёжно.
В общем, я ещё свой поиск идеальной реализации не завершил, но Sonner — максимально к ней близок.
#react #toasts #notification #animation #бородач
#инструмент дня
Вы, наверное, уже наслышаны от обладателей айфонов про AirDrop и дикпики.
Кроме шуток, передать файлы по локальной сети между двумя своими устройствами должно быть максимально просто же! Без ковыряний в Network Discovery, настроек Samba и так далее.
И такое решение есть, даже с открытым кодом: LocalSend.
Сайт: https://localsend.org/
Написано на Dart и Flutter, работает на всех разумно доступных платформах: Windows, Linux, MacOS, Android, iOS.
Не опирается на один протокол, а перебирает все доступные и даже может запустить свой собственный сервер по необходимости. В крайнем случае, можно донастроить.
Никаких облаков, всё по локальной сети.
Поддержка нескольких получателей, поддержка буфера обмена.
В общем, если у вас дома зоопарк устройств и пока не хватило времени настроить что-то иное, или лучше Samba вы ничего в жизни не видели — вот это самое то.
#flutter #localsend #airdrop #network #бородач
#инструмент дня
Вчера писал про try и в последний момент засомневался, какую картинку поставить к посту. В итоге сдался и прилепил нейрослоп.
А можно было просто открыть Boron.
Это редактор скриншотов терминала. Вставляешь туда настоящий вывод консоли — вместе с ANSI-цветами — и дальше можно уже нормально собрать картинку: поменять тему, фон, размер окна, поправить текст, перекрасить отдельные куски и вообще привести всё в аккуратный вид.
Причём редактируется именно содержимое терминала, а не картинка поверх картинки. Можно выделять текст, печатать свой, менять цвета отдельных фрагментов. Есть даже прямоугольное выделение через Alt/⌥ — удобно, например, чтобы перекрасить целую колонку таблицы или кусок вывода tree.
Boron сам отличает команды от вывода: строки с $, ❯, > или ➜ делает ярче, остальное немного приглушает. Тем сейчас восемь: от VS Code Dark+ и Dracula до Tokyo Night, Nord и Catppuccin.
На выходе PNG, SVG, JPEG или WebP, плюс картинку можно сразу скопировать в clipboard.
Но самая интересная функция — всё нарисованное можно скопировать обратно как настоящий терминальный текст: plain text, ANSI escape sequences или код на chalk. То есть можно не только оформить существующий вывод, но и мышкой набросать, как должен выглядеть CLI, а потом забрать это обратно в код.
В общем, вчера вместо нейрослопа можно было просто красиво снять try в работе. Видимо, Boron попался мне примерно на сутки позже, чем нужно.
boron.sh
GitHub
#tool #terminal
#статья дня
Один из самых популярных вопросов на технических собеседованиях: «Что происходит после того, как вы ввели URL в браузере и нажали Enter?»
Хорош он тем, что начать можно с «ну, DNS → HTTP → страница», а закончить где-нибудь глубоко в TCP, TLS, системных вызовах, планировщике ОС и внутренностях рантайма. По глубине ответа довольно быстро становится понятно, насколько человек вообще представляет себе весь стек целиком.
200ms — очень хорошая интерактивная версия ответа на этот вопрос.
Авторы берут один HTTP-запрос и проводят его через примерно 200 миллисекунд жизни: DNS, TCP, TLS, ядро ОС, Node.js, event loop, Postgres — и затем обратно к клиенту.
Причём это не просто очередной огромный лонгрид со схемами. Статья сделана как интерактивное путешествие: запрос буквально двигается по системе, а ты шаг за шагом смотришь, куда он попал, что там происходит и почему.
Есть, правда, и небольшой перегиб: местами авторы ныряют в детали уже буквально до уровня железа вашего телефона — что именно делает процессор, память и всё вокруг. Для понимания веб-разработки это далеко не всегда необходимо, но материал от этого скорее выигрывает: появляется ощущение, что ты реально проваливаешься через весь стек слой за слоем.
В общем, отличный способ освежить в голове тот самый собеседовательный вопрос, только не в виде заученного ответа на пять минут, а нормально, со вкусом.
https://200ms.thenodebook.com/
#web #interview #request
#заметка дня
В CSS Fonts Level 5 обсуждают <meta name="text-scale">. Его появление связано с тем, что системная настройка размера текста на мобильных устройствах сейчас не гарантирует увеличение текста в вебе.
Пользователь увеличивает шрифт в настройках ОС, приложения подхватывают это предпочтение, а браузерам пофигу.
На Android Firefox учитывает системный масштаб текста, а Chrome — нет; на iOS Dynamic Type не применяется к обычным страницам в Safari. В результате сайт может выглядеть нормально при стандартных настройках, но оставаться практически недоступным для человека, который рассчитывает на увеличенный системный текст.<meta name="text-scale" content="scale"> должен дать странице способ явно поддержать это предпочтение. Браузер включает пользовательский text scale factor в базовый размер шрифта, а дальше масштабирование естественно распространяется через CSS: rem следует за новым базовым размером, тогда как px остаётся фиксированным.
Отсюда и практическое последствие: чем больше типографика и размеры компонентов завязаны на относительные единицы, тем лучше интерфейс адаптируется к пользовательскому масштабу. А жёсткие размеры, ограниченная высота и другие предположения о том, сколько места займёт текст, начинают проявляться обрезанием контента и горизонтальным скроллом.
Manuel Matuzović протестировал proposal на своём сайте и подробно описал результат: https://www.matuzo.at/blog/2026/text-scaling-meta-tag
Proposal: https://drafts.csswg.org/css-fonts-5/#text-scale-meta
#css #font #scale
#статья дня
В сервисах коротких видео очень популярен формат, подобный моему "#фишка дня".
И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта oldstyle nums (на иллюстрации).
Так вот, к чему это. Я подумал, что раз есть подобное свойство, значит их должно быть много и они должны быть как-то стандартизированы...
И, да! Это всё называется OpenType Features и их просто какое-то невозможное количество!
Лигатуры, маленькие заглавные буквы, цифры в старом стиле, моноширинные цифры, надстрочные и подстрочные символы, половинная ширина...
И вот к самой статье, она от Adobe и посвящена синтаксису свойств OpenType в CSS: https://helpx.adobe.com/fonts/using/open-type-syntax.html
Есть на русском: https://helpx.adobe.com/ru/fonts/using/open-type-syntax.html
Очень крутая и полная, с прекрасными иллюстрациями и примерами конкретных шрифтовых наборов.
Всем st, котаны!
#opentype #font #features #бородач
#ссылка дня
Ну, кто тут пишет плохо неподдерживаемо? Признавайтесь.
Can’t Maintain показывает два варианта API и предлагает выбрать тот, за который будущие разработчики скажут спасибо. loading или isLoading, набор булевых пропсов или один variant, отдельные обработчики или нормальная композиция — всего 10 вопросов за игру, после каждого есть объяснение.
Кроме игры внутри лежит вполне приличный справочник: 117 паттернов про именование, controlled/uncontrolled-компоненты, render props, discriminated unions, доступность и React 19. Не все ответы стоит принимать за закон, но как повод проверить собственные привычки — отлично.
А если зайдёт формат, у автора есть целая серия: такие же тренажёры по TypeScript, адаптивной вёрстке, Git, тестированию, API, SEO и UX. В сумме почти тысяча задач, всё бесплатно и с открытым исходным кодом.
#education
#фишка дня
Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?
Использовать кастомные цитаты!
Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md
Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.
Пример синтаксиса:
> [!NOTE]
> Заметка о выпуске
#codepen дня
Можно ли при помощи SVG-фильтров, не прибегая к помощи теней, экструдировать текст?
Экструзия — процесс выдавливания, как в 3D-принтере.
И да, можно! Как всегда, Ана Тюдор с прекрасным решением. На сей раз, кстати, у решения нет багов на HDR-экранах 😅 Всё отображается как надо.
Кодпен: https://codepen.io/thebabydino/pen/yLmxePV
Выглядит потрясно. Матрица экструзии там отдельная песня, конечно.
#svg #filter #бородач
#такое дня
Хороший вопрос, конечно, помнит ли Apple что иконка Safari означала компас для навигации по вебу, но это, наверное, уже неважно. В 27 версии их ОС будет так.
После просмотра этого комикса развидеть разваливающуюся стрелочку уже невозможно :)
Реддит.
#заметка дня
Делаю дома мелкий ремонт и поймал себя на забавной аналогии с разработкой.
Когда на двери начинает откалываться краска, снять только тот кусок, который уже сам отвалился, обычно недостаточно. Берёшь шпатель и проходишься по краям того, что с виду ещё кажется нормальным. Где-то краска держится крепко, а где-то следом отходит ещё сантиметр, потом ещё десять. Значит, этот слой уже был частью повреждения — просто ещё не выглядел повреждённым.
С багами часто так же. Очень легко принять первое заметное проявление проблемы за её настоящую границу.
Допустим, пользователь дважды нажал «Оплатить» и получил два заказа. Самый очевидный фикс — задизейблить кнопку после первого клика. Исходный сценарий больше не воспроизводится, и формально баг можно закрывать. Но это примерно как закрасить только то место, где старая краска уже успела отвалиться.
Куда полезнее чуть пройтись по краям: что будет, если отправить то же действие из двух вкладок? Если клиент после таймаута повторит запрос? Если два одинаковых запроса придут на backend почти одновременно?
Как тут не вспомнить некоторых разработчиков, которые просто скажут: «Нефиг делать два заказа, проблема пользователя».
Если каждый из этих сценариев вскрывает новую проблему, значит дело было не в кнопке. Настоящая граница дефекта глубже: операция должна быть идемпотентной — повтор одного и того же запроса не должен приводить к повторному выполнению действия.
Это не значит, что при каждом сколе нужно сдирать всю дверь до дерева. В какой-то момент шпатель упирается в слой, который действительно держится, и там можно остановиться.
Иногда самое полезное, что можно сделать с багом перед тем, как его чинить, — сначала сделать его немного больше.
#dev #work
#заметка дня
Новости для Java-, Kotlin- и Scala-разработчиков: 29 августа в Москве пройдет JVM Day — конференция для разработчиков, архитекторов и тимлидов от Т-Банка.
Из спикеров конференции – Андрей Кулешов, который поделится последними новостями в области Java, Антон Курако объяснит, как красивые показатели могут ввести в заблуждение, а Сергей Петрелевич разберет Mechanical Sympathy и подходы к ускорению Spring Boot-приложений. На конфе также будет аллея продуктов, где можно потыкать демки фреймворка Kora для Java и Kotlin, AI-native-платформы SourceCraft и мультиязычной OpenIDE.
После докладов пройдет вечеринка во дворе штаб-квартиры Т-Банка с играми на Sega, ИТ-квизом и диджей-сетом на виниле.
Зарегистрироваться на конфу можно тут: https://meetup.tbank.ru/conference/jvm-day/.
Если вы собираетесь на конференцию, дайте знать в комментах. Так будет проще найтись и пойти вместе.
#ai #performance #java #jvm
Проект от подписчика!
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Всем привет! Меня зовут Василий, я разработчик из Хельсинки. В свободное время занимаюсь проектами на стыке веба, C++ и криптографии. Один из них это AmethystXMR: https://amethystxmr.github.io/
Это браузерный Monero-кошелёк: нативный C++ код Monero собран в WebAssembly, а вокруг него сделан интерфейс на React. Ключи остаются у пользователя в браузере, там же приложение сканирует блокчейн и формирует транзакции.
На скриншоте кошелёк называется [object Promise] - это не баг, а мое чувство юмора: люблю вписывать в формы значения вроде undefined, null, NaN, Invalid Date, ReferenceError, TypeError, [object Object], Cannot read properties of undefined. Смешно же.
AmethystXMR полностью рабочий: можно создать или восстановить кошелёк, отправлять и получать XMR, подключаться к своей ноде, использовать QR-коды. Можно запускать и в Tor Browser, в том числе с onion-нодами.
Еще есть поддержка multisig. В Monero он устроен довольно интересно и не совсем так как в Bitcoin. Я рассказывал об этом на MoneroKon, а по мотивам доклада вышел подробный пост со схемами:
https://coin.space/how-does-monero-xmr-multisig-work
Недавно еще разбирался с неприятным багом: платеж отображался как потерянный, хотя в итоге оказалось, что деньги никуда не пропали. Всю историю расследования и того, как удалось найти проблему, описал здесь:
https://www.reddit.com/r/MoneroMeansMoney/comments/1v5dsx2/the_story_of_a_lost_and_found_payment/
Еще с MoneroKon есть запись моего второго доклада - про Lightning Network:
https://www.youtube.com/watch?v=obFwB_KA7pk
Исходники проекта:
https://github.com/amethystxmr/amethystxmr.github.io
Если появятся какие-то вопросы по проекту, WebAssembly, Monero или докладам - спрашивайте, отвечу.
#история дня
30 лет назад вышел Internet Explorer 3.0.
13 августа 1996 года появилась версия для Windows, а 8 января 1997 — для Mac OS (да-да, она тогда не macOS называлась). Было же время...
Что же такого в нём примечательного?
Ну, помимо того, что это первый IE с легендарной вселяющей ужас во всех верстальщиков иконкой, это ещё и первый браузер вообще с поддержкой CSS.
В то время CSS использовался чтобы помечать посещенные ссылки фиолетовым.
Эта самая поддержка была даже по тем скромным меркам неполной. Microsoft, впрочем, надолго решила продолжать в том же духе.
А ещё была своя реализация JavaScript: JScript. И предлагалась поддержка VBScript... я свой первый веб-проект на нём писал, не особенно содрогаясь.
Работал браузер на 386 с Windows 3.1, требовал от 4 MB оперативной памяти, 12 MB — если хотелось Java 🤯
Посмотреть скриншоты и видео можно в музее веб-дизайна: https://www.webdesignmuseum.org/old-software/web-browsers/internet-explorer-3-0
Взгрустнулось, котаны? 😅
#css #ie #history
#видео дня
Если фамилия Корольковой вам ничего не говорит, то её шрифты почти наверняка говорят.
Александра Королькова — шрифтовой и книжный дизайнер, арт-директор Paratype, автор «Живой типографики» и один из авторов PT Sans, PT Serif, Circe и других известных гарнитур.
А вот её свежая лекция — «Шрифтовая магия»:
https://www.youtube.com/watch?v=76P5P9agcHc
Королькова показывает нестандартную вариативность, оптические размеры, то, как один шрифт может буквально «переодеваться» под разные задачи, разбирает внимание к мелким деталям и всякие странные штуки, которые вообще можно зашить внутрь шрифта. А потом отдельно доходит до более практичного вопроса: что из всего этого реально полезно дизайнеру в повседневной работе и где это можно попробовать бесплатно.
И заодно несколько ссылок по теме из архива канала:
— бесплатная «Живая типографика»
— оптическое выравнивание
— минус и дефис
#video #fonts #talk
#тред дня
Забытое воровство из X!
Лонгрид от Димы Рожкова: «Собес — не место для советов». Сразу ссылку, ну и копия.
Спасти компанию за 5 минут
Ваши вопросы к представителям компании на собеседовании - очень важный этап. Он же может стать решающим. Я как то на собеседовании в Мету на менеджера спросил могу ли я уволить всю команду в один день и нанять новую. В те далекие долэйофные годы следующего этапа не последовало. Это был один из вопросов Бугаенко "на менедждера", в Лондон я переезжать не планировал поэтому ради прикола решил спросить. Один раз живем.
Так вот. По следам треда @beshkenadze решил написать, что стоит спрашивать, а какие вопросы стоит задавать когда уже пройдете испытательный срок.
Во-первых: совершенно точно нужно задавать вопросы! Особенно если вы идете на сеньорную позицию. Если у вас нет вопросов - это очень плохой сигнал:
• Вы читали про компанию и ее бизнес?
• Вам совсем не важно как с кем и с чем вы будете работать?
• Ничего не хотите добавить к своим ответам?
Что точно не стоит спрашивать
Давать непрошеные советы и критиковать выбор людей. Даже если мягко. Во-первых у тебя околонулевой контекст. Даже если ты изначально спросил какая у них платформа (хороший вопрос), а потом начинаешь критивовать и сокрушаться, что они все выбрали не правильно. Тебе скорее всего ответили прямым ответом: У нас технология Х. У тебя нет необходимых данных, метрик и причин почему у них так. И за одну минуту ответа ты не сможешь открыть тупым глаза на их ошибки и заработать авторитет. Но ты можешь показать, что ты с порога несогласен. Начинаешь давать советы неразобравшись. Зачем тебя брать если ты уже недоволен с чем тебе придется работать?
На собеседовании ты продаёшь не только экспертизу, но и предсказуемость. Компания (особенно если это уже работающий бизнес, а не совсем зелёный стартап) хочет понять:
• Ты сможешь встроиться в существующую систему?
• Ты будешь решать их проблемы или создавать новые?
• Ты уважаешь чужой контекст или сразу начинаешь мерить всё своей меркой?
Критиковать само собеседовение тоже не стоит. Особенно в лицо людям, которые к дизайну собеседования не имеют отношения. Как например спрашивать, пишут ли программисты алгоритмы каждый день на работе? Кому что кроме своей раздражительности ты этим вопросом хочешь показать? Особенно если ты НЕ МОЖЕШЬ решить задачу.
Что стоит спрашивать
На собесе ты исследователь и дипломат. Молчать совершенно точно нельзя, а задавать качественные вопросы, которые показывают сеньорность.
Если ты молчишь и только киваешь, ты выглядишь как исполнитель, а не как человек, который будет влиять на архитектуру. Хороший баланс — задавать вопросы, которые раскрывают ситуацию, а не оценивают её.
1. Про нагрузку и масштаб «Какая сейчас нагрузка? Какие планы по росту на год-два?»
2. Про текущие боли «Какие самые болезненные проблемы прямо сейчас в инфре/деплое/костах?»
3. Про структуру команды «Как устроена команда? Кто принимает архитектурные решения? Как выглядит процесс изменений?»
4. Про бизнес-контекст «Какие требования бизнеса сейчас важнее всего: скорость фич, косты, надёжность?»
5. Про квалификацию и процессы «Какой уровень экспертизы в команде по платформе/куберу/терраформу?»
6. Про историю развития «Это первая версия системы? Как бы выглядела идеальная система для этой задачи? Какие риски в текущей архитектуре вы видите?»
7. Можно урвать эти 5 минут и наоборот уточнить свой ответ, если вы осознали, что что-то недосказали. Этой возможностью вообще довольно редко пользуются.
Самый сильный сигнал сеньорности — это когда ты: задаёшь точные вопросы; демонстрируешь, что понимаешь компромиссы; оставляешь пространство для того, что у них могут быть на все веские причины о которых тебе не рассказали.
На собеседовании твоя главная задача — собрать максимум информации и показать, как ты думаешь, а не «спасти» компанию от страшной ошибки за 5 минут.
А уже после офера (или испытательного срока), когда ты внутри и у тебя есть полный контекст и выстроены отношения блядь, — можно и нужно спорить, отстаивать свою точку зрения.
#cv #interview #собеседование #x
Есть довольно простая ловушка: чем больше у тебя ответственности, тем легче перепутать количество работы с движением вперёд.
Когда задач мало, всё понятно. Сделал — молодец. А потом появляется продукт, команда, маркетинг, несколько направлений роста, операционка, и почти любая задача начинает выглядеть важной. В итоге проблема уже не в том, как всё успеть, а в том, что из этого вообще не надо делать.
У Константина Сухачева есть несколько хороших текстов ровно про это.
Например, про стратегию как отказ. Не в смысле очередного «умей говорить нет», а буквально: если компания выбрала направление, остальные хорошие возможности тоже приходится сознательно хоронить. Иначе стратегия превращается просто в список пожеланий.
Рядом — тема фокуса и постоянного переключения. Можно весь день быть занятым, отвечать, решать, созваниваться и даже чувствовать себя очень продуктивным. Но если каждые полчаса меняется контекст, к вечеру часто оказывается, что ничего действительно важного далеко не уехало.
С управлением примерно та же неприятная механика. Хороший менеджмент — это далеко не всегда про мотивацию и развитие людей. Иногда это про отказ, увольнение, смену структуры или признание, что человек отлично работает, но находится не на своём месте.
Мне в целом нравится такой взгляд на бизнес: не через отдельные инструменты и «хаки роста», а через выбор, ограничения и цену решений.
Если это близко, можно начать с текстов про стратегию и отказ, про фокус и про цену управления. Остальное уже рядом.
#инструмент дня
У меня регулярно есть код, который вроде бы не проект. Проверить библиотеку, накидать PoC, воспроизвести баг, попробовать какой-нибудь API, проверить идею на десяти строках.
Обычно всё это заканчивается одинаково: test, test2, tmp, new-test, какая-нибудь папка на Desktop, ещё одна в /tmp, а через пару недель уже непонятно, где именно лежал тот эксперимент, который внезапно понадобился снова.
Для этого есть try.
Идея простая: все такие одноразовые штуки живут в одной директории, по умолчанию ~/src/tries. Когда создаёшь новую, try добавляет дату:2026-08-07-redis-pool
Потом достаточно написать:try redis
и получишь fuzzy search по всем своим экспериментам. Он ещё учитывает, насколько недавно ты открывал директорию, поэтому свежие штуки поднимаются выше.
Если ничего подходящего нет, из того же интерфейса можно сразу создать новую папку. То есть try одновременно заменяет мне кусок из mkdir, cd, find и попыток вспомнить, как я назвал папку три недели назад.
Короче, можно посмотреть интерактивную презентацию: https://asciinema.org/a/ve8AXBaPhkKz40YbqPTlVjqgs
Ещё полезная штука:try .
Если запустить это внутри git-репозитория, он создаст для текущего репо отдельный worktree в tries. Нормальный вариант для «хочу быстро что-то попробовать, но текущую рабочую копию трогать не хочу».
Можно и сразу клонировать чужой репозиторий туда же:try https://github.com/foo/bar.git
А если какой-то такой эксперимент внезапно вырос во что-то настоящее, его можно перенести из tries в обычные проекты. try уберёт дату из имени, перенесёт директорию, а на старом месте оставит симлинк, чтобы старый путь не умер.
В общем, штука довольно узкая, но хорошо попадает в конкретную проблему: временный код почему-то почти никогда не оказывается временным.
Написана на Ruby, ставится через gem или Homebrew.
https://github.com/tobi/try
#experiment #tool