14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Когда в последний раз вы трогали свои сиксели?
Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.
Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.
📌 Что это такое?
Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.
Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.
Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!
🖼 Как смотреть картинки в терминале?
👉 Самый простой способ — lsix, это ls, но для миниатюр:
brew install lsix # macOS
sudo apt install lsix # Debian/Ubuntu Linux
А дальше просто запускаем:lsix
и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.
🔄 Конвертация изображений
Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:brew install libsixel
img2sixel myimage.png
А если у вас установлен ImageMagick, можно делать так:convert myimage.png sixel:- #
Конвертирует и сразу выводит в терминал.
Если уже есть картинка в формате sixel, можно вывести её простым cat.
❓ Поддержка в эмуляторах терминала
Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/
Сразу скажу, что стандартный терминал в macOS — не умеет.
Очевидно, формат прекрасно подходит для разгого рода диаграмм и дашбордов.
В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄
#console #images #бородач
#заметка дня
А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?
Ведь это должно раздражать посетителей, мешает менеджерам паролей, как встроенным в браузер, так и системным и сторонним.
Задумывались ли вы вообще, зачем это надо?
Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!
И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.
Какова цель любого проекта? Набрать пользовательскую базу. Ну и удержать её. В итоге нам нужно, как минимум, увести посетителя на регистрацию. И тут начинается веселье...
Огромное число пользователей не видят разницы между Sign In и Sign Up. Ещё больше — боятся слова регистрация, Register here и так далее. А кто-то — просто забывает, что у них уже есть аккаунт!
Ситуация:
1. Перейти к созданию аккаунта
2. Введите адрес электронной почты
3. Ошибка: у вас уже есть аккаунт.
4. Перейти на страницу входа.
5. Снова введите адрес электронной почты.
6. Возможно, вы забыли пароль?
...и так далее.
Кстати, это Цукерберг описывал несколько лет назад. Забавно, что нынче у них снова и почта и пароль вместе. Рост прекратился?
А если вы строите веб-приложение для корпоративных клиентов — возможно, у вас SAML/SSO через одного из провайдеров. И в простейшем случае это Google, Facebook, VK, Microsoft, Apple — далее везде. Ну и вы начинаете ставить кнопки. Итого, поле и 4-5 кнопок. И в какой-то момент пользователь забудет, через что он вообще входил. Что-то опять ну такое...
А если показать и почту, и пароль — то SSO-пользователи просто введут свой пароль от корпоративного аккаунта. Знаем, проходили.
Вот и получается, что многие растущие (помним про Facebook?) сервисы предпочитают предложить посетителю ввести свою почту, а уже потом — разные ветки процесса входа. Либо SSO, либо пароль, либо — код на почту, либо Passkey.
Нормальным менеджерам паролей, кстати, всё равно. Тот же 1Password отлично справляется.
А какой у вас опыт, котаны?
#sso #saml #signin #ux #бородач
Недавно на Кинопоиске вышел цикл интервью «Истории Яндекса». Это архив воспоминаний бывших и текущих сотрудников, которые развивают компанию. Я глянул пару эпизодов и больше всего мне зашло интервью Сергея Крупина, руководителя направления общей инфраструктуры дата-центров.
Сергей проработал в Яндексе 14 лет и застал сразу несколько исторических эпох компании. Столь длительный путь в одном месте, по его словам, связан не только с интересными задачами и проектами, но и с внутренним кругом общения, который разделяет его ценности.
Тот случай, когда работа становится чем-то большим. Ты идешь туда не потому что «надо», а за атмосферой и людьми, с которыми тебе комфортно. И такой подход я разделяю: никакие бонусы, ДМС и прочие плюшки не смогут дать ощущение, что ты на своём месте.
Замечу, что это не классическая документалка, а спокойный формат с честными разговорами о работе и жизни в бигтехе. Отлично подойдет для фонового прослушивания.
#инструмент дня
Вчера на Future Frontend (а вот, кстати, стрим на сегодня) деврелы Google представляли новые и неизвестные возможности Chrome DevTools.
Конечно же, почти вся презентация была посвящена AI, но они мельком напомнили о Workspaces (рабочих пространствах, средах).
Короче говоря, можно редактировать код своего проекта прямо в девтулзах. А учитывая, что девтулзы — штука мощная, да ещё и отладчик под рукой — идея становится весьма привлекательной.
Но настраивать Workspace — задача довольно раздражающая. Вот бы они создавались автоматически при дев-сборке...
Так можно же! Ну или вот, чуть более подробная дока из сорсов.
Короче, суть в чём. Создаём файл .well-known/appspecific/com.chrome.devtools.json:{
"workspace": {
"root": "/home/user/awesome-project",
"uuid": "53b029bb-c989-4dca-969b-835fecec3717"
}
}
Ну, в общем, всё! Девтулзы распознают конфигурацию и позволят редактировать проект прямо в браузере. Что, повторю, сильно удобнее, чем кажется.
Особенно если ты умеешь пользоваться отладчиком.
Кстати, в будущем релизе Bun это будет включено по умолчанию для dev-среды.
А если хочется попробовать прямо сейчас, есть официальный плагин для Vite и пример его использования.
В Chrome 137 все нужные флаги уже включены по-умолчанию, кстати.
#devtools #workspace
Прошел вайб-чек от команды Яндекс Вертикалей, кажется, мне пора в отпуск. Какие у вас результаты?
🆖 перейти в бота
#заметка дня
А где это я сегодня? А я сегодня на конференции Future Frontend 2025!
Было бы странно, если бы я был на 2024…
https://futurefrontend.com/schedule/
Возможно, буду вести некое подобие трансляции по ходу дня. А пока — завтрак, знакомство с будущими коллегами и ожидание старта.
Бейджик отражает уже устаревшую информацию.
Из мерча — банное полотенце! Потому что афтепати будет в сауне. Кстати, в 2021 году тоже давали. Но похуже :)
Как всегда, доверь разработчику настройку стриминга — и ничего не выйдет, все ждут 🫠
#futurefrontend
#заметка дня
Быть в отпуске, который никак заранее не планировал, а в конце которого — полная смена работы (и даже отчасти деятельности: из продукта в дизайн-систему) — штука довольно тяжёлая.
С одной стороны, на работу ходить не надо. С другой — нужно как-то себя развлекать!
Зато, наконец, появилось время добить пульт на Flutter и запустить его на телефоне.
Не без проблем, конечно. И с Android, и с iOS.
Если с Android всё более-менее понятно — старая конфигурация, мелкие баги, — то с iOS…
Симулятор против реальности
iOS на симуляторе и iOS на реальном устройстве — это две совершенно разные iOS.
Нам никто не обещал полноценной эмуляции. Да, симулятор упрощает вход в разработку. Но почему бы не предупреждать разработчиков, что потом всё пойдёт не так?
Хотя, признаюсь, в половине случаев виноват сам.
Например, приложение падало при поиске телевизоров, который у меня реализован через SSDP (Service Discovery Protocol). Это работает через мультикаст (multicast) — а это уже отдельный мир.
Оказывается:
- Мультикаст — это отдельное разрешение, scope.
- Его нужно объявлять в конфигураци приложения.
- Потом — проходить модерацию в App Store.
Более того, нужно заранее уведомить Apple и получить соответствующий сертификат ещё до начала разработки.
И всё это — только если у тебя есть разработческий аккаунт за $99 в год. Без него — даже не пробуй.
А симулятор? Он позволяет всё. Мультикаст работает без проблем. Никаких предупреждений. Всё как по маслу — пока не ставишь приложение на свой собственный iPhone.
Решения
Окей. Я решил:
- Оставлю поиск включённых телевизоров на более дружелюбных ОС.
- Добавлю fallback — диалог ручного ввода IP-адреса телевизора.
Это помогло.
Но тут всплыла новая проблема — Wake-On-LAN не работает.
Хотя он должен работать даже по Wi-Fi: ваши «умные» устройства де-факто никогда не выключаются. Но я забыл, что у телефона две сети — Wi-Fi и сотовая. А вещать нужно в Wi-Fi.
Когда я начал фильтровать интерфейсы по ключевым словам (например, en на iOS/macOS или wlan на Android/Linux), всё наконец заработало.
SSDP без мультикаста?
И тут меня осенило: а можно ли использовать SSDP без мультикаста — через broadcast?
Ответ — да! Достаточно:
- Изменить IP шлюза.
- Отключить присоединение к мультикаст-группе.
Поиск устройств заработал. Никаких разрешений от Apple не нужно. Всё прекрасно!
Даже пока не надо тратить сотку...
Хотя ручное добавление по IP я всё равно оставил — на всякий случай.
Кстати, на эмуляторе Android ни SSDP, ни WebSockets — пока не работают... Вот вам и минус мультиплатформенной разработки — приходится разбираться в нюансах вообще всего.
Зато на iOS, macOS, Linux и Windows теперь всё просто прекрасно.
#flutter #ios
#codepen дня
Признавайтесь, кто в TikTok часы проводит за скроллингом ленты?
Но я вообще не за тем пришёл. Меня их прелоадер заинтересовал. Яркий пример режима смешивания цветов со слоями ниже, mix-blend-mode: multiply.
Без него анимация была бы совсем простой: https://codepen.io/frontendcorn/pen/poWZObX
Кстати, прекрасная статья есть с примерами: https://web.dev/learn/css/blend-modes/
А тут разобрана вся их математика: https://www.w3.org/TR/compositing-1/
А тут вся математика разобрана еще более подробно: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
И перевод от Ильи Стрельцына: https://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html
А самое забавное, что с видео это тоже работает: https://codepen.io/jcoulterdesign/pen/QagxgJ
#css #mixblendmode #бородач
#новость дня
Яндекс подвел итоги программы грантов в опенсорсе
https://habr.com/ru/companies/yandex/articles/909186/
У компании действует грантовая программа уже второй год, куда могут податься независимые разрабы и получить финансирование для развития своих проектов.
Из интересных проектов:
1. IronOS — открытая прошивка, добавляющая паяльникам профессиональные фичи вроде термопрофилей. Раньше такие функции были только в дорогом проф оборудовании, а теперь можно апгрейднуть и бюджетное устройство. Что делает паяльное дело доступнее.
2. sqruff — линтер на Rust для проверки крупных объемов SQL-кода с высокой производительностью. Знаю, что SQL-линтеры вроде SQLFluff сильно тормозят на больших базах. И если у чуваков наконец-то получилось решить эту проблему — можно только поаплодировать.
3. js-dos — эмулятор для DOS-программ, позволяющий запускать их онлайн. Включая ретро-игры. В планах команды также улучшить 3D-графику и добавить мультиплеер через WebRTC. Может, благодаря ему, молодое поколение освоит классику, на которой мы выросли.
На самом деле, компания уже давно вкладывается в опенсорс — взять те же CatBoost и YTsaurus.
Как мне кажется, инициатива достойная. Опенсорсу поддержка никогда лишней не бывает. Это позволяет создавать общими усилиями прорывные решения.
#инструмент дня
Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.
Но насколько проще было бы, если появился бы симулятор происходящего под капотом. И ведь такой есть!
И называется он git-sim, вот так вот буквально.
Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.
Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim
И на GitHub проекта: https://github.com/initialcommit-com/git-sim
Очень уютная штука.
#git #sim #tool #бородач
#статья дня
Фича-флаги: фронтенд против бэкенда — где провести линию раздела?
Сегодняшняя статья от ConfigCat — отличный разбор того, как по-разному работают feature flags в клиенте и на сервере.
Если ты не в курсе:
фича-флаг — это переключатель, который позволяет включать или отключать части функциональности без выката новой версии. Прекрасный способ тестировать, экспериментировать и чинить баги на лету.
Фронтенд-флаги
Плюсы:
— моментальные изменения, удобны для UX-экспериментов
— не требуют изменений на сервере
Минусы:
— логика доступна в клиенте (а значит и пользователю)
— сложно скрыть саму фичу, даже если она выключена
— возможны баги при сбоях SDK
Да ладно, кому нужны исходники вашего SPA...
Бэкенд-флаги
Плюсы:
— безопасно: логика и флаги не видны снаружи
— удобно управлять доступом, ролями, регионами и т.п.
Минусы:
— отклик медленнее
— нужна координация между фронтом и бэком
— UI не всегда знает, что делать с отключённой фичей
Автор также говорит о гибридном подходе, который позволяет совместить лучшее из двух миров: контроль на бэке, адаптация интерфейса на фронте.
В статье всё по делу, с примерами и выводами:
https://configcat.com/blog/2025/05/08/frontend-vs-backend-feature-flags/
#feature #dev
#статья дня
Я знаю, знаю — вас всех уже достали различные реализации Doom.
Тут дум, там дум, а на байкале не дум.
И точно так же я прекрасно знаю, как вам надоели все эти #codepen'ы дня в стиле «вы только посмотрите, Мона Лиза на одном div'е», которые являются эксплуатацией линейных и радиальных градиентов и часто вообще делаются через формулы в Excel: группы пикселей конвертируются в колор-стопы градиентов.
Формулы в экселе... погодите. Если что-то можно описать формулой, значит, это что-то можно и автоматизировать?
Сюрприз-сюрприз! Можно. И вот тут начинается абсолютная дичь. Подбираемся к статье дня!
Итак, есть такой проект: WASM DOOM. Это просто движок, на его выходе — canvas. И что делает безумный автор статьи дня?
Правильно, рендерит холст в CSS-градиенты! Вот, собственно, и статья: https://dev.to/grahamthedev/doomrendered-using-a-single-div-and-css-1fal?
А вот прямая ссылка «на поиграть»: https://grahamthe.dev/demos/doom/
Кажется, на этом разговоры о Моне Лизе в одном DIV'е можно заканчивать.
#css #doom
#инструмент дня
Вот вы такие посмеялись надо мной, когда я предложил сделать генератор кривых в CSS aka функция clip-path shape() из SVG, а это уже реальность!
напоминаю, в чём суть беседы: /channel/htmlshit/3603
Из этого:
M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z
clip-path: shape(from 97.54% 10.91%,curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,close);
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
✔️ Как научиться отвлекаться от работы и отдыхать?
✔️ Как совместить кучу рабочих задач и время с семьей?
✔️ Как справиться с прокрастинацией?
✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: /channel/+dxOw8jPgF8Y2NWUy
#codepen дня
Просыпайся, страна! Minecraft подвезли...
...на CSS!
Подвезли-то давно, но завирусилось только сейчас: https://benjaminaster.com/css-minecraft/
CodePen: https://codepen.io/Benjamin_Aster/pen/gOKwpOd
GitHub: https://github.com/BenjaminAster/CSS-Minecraft
Я не так давно посмотрел серию видео о разработке Minecraft для 8- и 16-битных консолей и даже для калькуляторов, но даже после этого — версия на HTML+CSS повергла в культурный шок.
Скриптов на странице, кстати, нет. Даже поворот — это сочетание псевдокласса :active и animation-play-state!
Дичь совершенная.
#css #minecraft
#ссылка дня
Кто хотел красивых анимированных иконок без обязательств?
🙋 Я точно хотел!
Итак, вашему вниманию иконки от Дмитро Товстокорого: https://icons.pqoqubbw.dev/
Анимированные при помощи библиотеки motion SVG с MIT-лицензией, что может быть прекраснее?
Давайте немного насладимся воем на болотах о том, что ещё одна библиотека анимации в проект нам не нужна.
Ну и никто не мешает вдохновиться и реализовать своё, с использованием своих инструментов, ведь правда?
К слову, библиотека Motion выросла из инструмента Framer, а их уж новичками никак не назовёшь. Так что вполне себе проверена в бою.
Берём, котаны?
#icons #svg #animation #бородач
#игра дня
Давненько не было чего-то необычного.
Впрочем, если вы не фанат Dwarf Fortress, конечно.
Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать.
Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.
Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память for (var i = 0; i < ...), будет ощущение, что вы просто продолжаете работу, только теперь в компании ASCII-графики и странного профессора.
🎮 https://untrustedgame.com/ 📂 https://github.com/AlexNisnevich/untrusted
#game #js
#заметка дня
Пожалуй, лучший доклад дня: распознавание жестов комбинацией Gemini и Tensorflow.js
Секция с демо была просто потрясающей. Не просто «я написала промпт и вызвала апи», а еще и с какими проблемами пришлось столкнуться по пути. И почему просто нельзя было обойтись одним только Tensorflow.js
Переходите на стрим и смотрите. Это стоит того!
Впрочем, следующий доклад о генерации многослойного эмбиента тоже весьма крутой. Как минимум, как демонстрация возможностей Cursor :)
#futurefrontend
#стрим дня
Я же совсем забыл докинуть ссылки на стрим! Он, к слову, бесплатный.
Стрим на сегодня: https://www.youtube.com/live/rWqIEWStdkA
На офсайте есть и ссылка на завтра, но мне же завтра тоже надо что-то запостить, верно?
Только что вот закончился доклад Георгиоса Диамантополуса (греческие фамилии очень крутые, согласитесь?) из секции Work-Life Balance о том, как наше тело реагирует на сидячую работу. Очень подробный и убедительный.
Присоединяйтесь!
#futurefrontend
#фишка дня
Что раздражает больше, чем незагрузившаяся картинка?
Правильно, дефолтное оформление этих самых картинок!
В Firefox просто будет alt-текст, Chrome ещё добавит какую-то убогую иконку из девяностых... ну такое.
Что же делать?
А решение простое: когда картинка не загрузилась, её контейнер подчиняется основным блочным правилам, а значит, на него можно набросить псевдоэлементы!
Чтобы было понятно, что конкретно не загрузилось — стоит ещё и attr(alt) докинуть.
img::after {
content: "Image of " attr(alt) "\A is not found 😞";
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
background: #eee;
border: 2px dashed;
white-space: pre-wrap;
color: #AA0000;
}
br использован: \A + pre-wrap.::before, а ::after? Да потому что Firefox занимает ::before под отображение alt и некоторые средства доступности могут этим пользоваться.
Яндекс проведет второй Young Con — фестиваль для всех, кто интересуется IT, уже работает в сфере или только планирует.
В этом году фест соберет 8 000 гостей, включая опытных и начинающих специалистов, студентов и школьников 9-11 классов. На главной сцене планируется более 20 докладов от экспертов компании, которые поделятся советами по построению карьеры. Одним из приглашенных спикеров станет Ян Топлес — автор и ведущий популярного образовательного блога на YouTube. Вечером можно будет отдохнуть под хип-хоп Feduk и послушать поп-рок от Доры.
Главная тема феста — карьерный буст. На протяжении всего дня можно будет пообщаться с рекрутерами и инженерами, посетить воркшопы и пробные собеседования, а еще узнать больше про технологии и сервисы Яндекса на специальных стендах. Там же пройдет финал «Баттла вузов» — студенческого турнира по программированию с призом в 1 млн рублей.
Young Con пройдет 25 июня на сцене Live Арена в Москве. Подаем заявку на участие уже сейчас и подписываемся на канал фестиваля.
На видео — вайб первого Young Con.
#молния дня
IT-Incubator, почти единственное 5-звёздочное образование фронтов и бэкендеров на JS, которое реально трудоустраивает программеров на миддлов, впервые в этом году проводит розыгрыш своих образовательных программ:
1. курс "Основы Frontend с нуля" или скидка 300 EUR на основные программы до трудоустройства
2. сертификат на 160 евро для оплаты основных программ до трудоустройства
3. сертификат на 50 евро на полный пакет интенсивов, чтобы создать 4 приложения для своего портфолио: сайт, 1 приложение, 1 игру и интернет-магазин или оплату основных курсов до трудоустройства
4. фирменный рюкзак от IT-Incubator
Весьма интересное предложение от школы, которая готовит сильных разработчиков.
Кликайте сюда, чтобы участвовать в розыгрыше
Реклама
ТОО "ТачиТэк" БИН 230540018463
erid 2VtzqxFotYk
#заметка дня
Когда-то в среде разработчиков на Drupal CMS была популярна идея «зелёной разработки».
До массового гринвошинга было ещё лет 15, так что речь не совсем про экологию.
Это подход, при котором вместо установки десятков сторонних модулей (хотя в этом Drupal был ну очень хорош) и написания собственного кода, проект строился на базе уже имеющихся в ядре инструментов и проверенных, широко используемых решений.
Такой подход считался правильным не только с точки зрения производительности и безопасности, но и как способ сделать сайт легче, понятнее и проще в поддержке. Обновления ядра не стоили буквально ничего.
Он требовал вдумчивости, внимания к API и знания возможностей платформы, зато давал в ответ устойчивость и долговечность.
Сегодня, несмотря на смену технологий, этот принцип остаётся актуальным. Он проявляется, например, в отказе от зависимости на множество сторонних пакетов в пользу более простых, понятных решений. Особенно хорошо это видно в разработке на современных фреймворках и экосистемах.
Идея та же: если проблему можно решить на базе уже существующего API, без лишних зависимостей — это, как правило, и быстрее, и надёжнее.
С появлением нейросетей и их интеграции в рабочие процессы, этот подход получил новое обоснование. Модели вроде ChatGPT гораздо лучше справляются с генерацией и объяснением кода, если он опирается на известные, хорошо документированные API и стандартные структуры.
Стоит лишь использовать малоизвестную библиотеку с нестабильной документацией — и ИИ начинает фантазировать, выдавая неточные или устаревшие решения. Чем ближе код к «ядру» платформы, тем проще его понять, модифицировать и дополнить — как человеку, так и машине.
Вот опять я всуну свой пульт на Flutter: нужно было определить широковещательный IP-адрес в локальной сети. Чтобы это сделать, нужно было рассчитать маску подсети для Wake-on-Lan, проще говоря, включения телевизора по сети.
Казалось бы, можно просто найти библиотеку, но они все избыточны. В итоге я написал нужные функции с нуля. Это заняло 10 минут и дало результат, который точно соответствует задаче. Более того — нейросеть отлично помогла, потому что код простой, прямолинейный и не зависит от внешних факторов.
Аналогичным образом в мусорку полетели зависимости для кастомных модалок и шторок.
Нейросети в очередной раз подчёркивают важную мысль: библиотеки хороши тогда, когда они полностью закрывают задачу. Если же приходится обходить, дописывать или разбираться, почему не работает, — это сигнал, что стоит подумать, действительно ли нужна эта зависимость.
В таких случаях библиотека должна быть почти идеальной: хорошая архитектура, понятный интерфейс, живое сообщество, ясная документация и внятная поддержка. Иначе — лучше без неё.
В итоге идея зелёной разработки — это не про отказ от всего стороннего, а про осознанный выбор и уважение к инструменту, с которым работаешь. И если раньше это помогало делать сайты стабильнее, то сегодня это ещё и делает твою работу совместимой с ИИ-помощниками, проще для ревью, и готовой к масштабированию.
Мнения, котаны?
#gpt #chatgpt #green
#заметка дня
Сейчас многое в воздухе напоминает времена, когда можно было запустить сайт или мобильное приложение с минимальными усилиями — и оно начинало жить. Просто потому, что закрывало понятную задачу. Без идеального кода, без идеального интерфейса. Главное — идея.
У меня был опыт запуска конструктора надгробий. Да, звучит так себе, но на старте всё работало — живой завод, заказы, настроенный фронт. Потом было продолжение — конструкторы футболок, зеркал, чего угодно. Но дальше MVP дело не пошло: выгорел, закопался в полировке, перегорел на этапе реализации. И в какой-то момент понял: если нет простого пути от идеи до пользы — всё, конец.
При этом я видел, как совсем неотполированные, страшные внешне продукты отлично зарабатывали. Их делали не разработчики, и явно не для разработчиков. Но они решали задачу — и этого хватало, чтобы пользователи и деньги нашлись.
Сейчас похоже происходит с ИИ. Alex Four (Гик-культура и Русское IT за границей) хорошо сформулировал, что мы снова в моменте, когда технологии стали достаточно доступными, чтобы быстро воплощать идеи. Причём без необходимости сразу собирать команду. Идея по-прежнему главное — а ИИ скорее ускоряет путь от задумки до работающего прототипа. Не заменяет, но помогает докрутить, попробовать, запустить.
Это не продлится вечно, но пока — время делать.
#заметка дня
Перед вами две иллюстрации. Видео мы обсудим сейчас, а графики — в заключении, идёт?
Итак, на видео представлен пример очередного формата передачи идей моушен-дизайна в приложениях и браузерах! И имя ему — Lava.
И, неожиданно, он снова от AirBnb!
Почему снова? Если вы помните, Lottie — тоже их инициатива. А это почти промышленный стандарт, даже ваши анимированные стикеры в телеге — это Lottie.
А вот Duolingo использует Rive.
Так зачем же AirBnb понадобился очередной формат?
Ну, ответ, на самом деле, довольно простой: сложные, неотличимые от растровых, векторные изображения занимают очень много вычислительных ресурсов. Каждый, кто делал видеостикеры в телеге это знает. Ещё и весят несколько тонн.
Плюс, стыковка кадров для отображения разных состояний — в векторе намного сложнее, поэтому анимации или возвращаются сначала в исходное положение, или аниматоры прибегают к разным трюкам.
Почему же нельзя было выбрать какой-то из существующих видеоформатов? Ответ очевиден: поддержка альфа-канала в видео браузерами всё ещё на зачаточном уровне, обходные манёвры очень дороги. Ну и видео всё же немного иную задачу решают, кадры на лету в них тоже подменить довольно непросто.
Подробнее об этом можно почитать в твите от одного из авторов формата.
Кстати, что же такое этот формат?
На самом деле, это довольно сложный AVIF-спрайт, работа с которым описана в JSON. Откуда мы это знаем, ведь формат не открыт?
Ну, всё, что попадает в веб, становится в той или иной мере открытым! Вот и инициатива по реверс-инжинирингу LAVA подъехала: https://github.com/AlexStrNik/OpenLava/tree/main
Кому интересно, посмотрите. Там есть даже попытка конвертации из lava в webm :)
Теперь к графику цен стоков, вторая иллюстрация.
Жёлтый — это Booking.com. Синий — AirBnb. Nuff said.
При этом, миру разработки, а особенно фронтенду, AirBnb дал столько, что никакому Букингу и не снилось. Но... бизнес и благотворительность — вещи разные.
Хочется пожелать удачи AirBnb, чтобы они выбрались из круга общественного давления и репутации и продолжили радовать нас крутыми инструментами.
#transparent #video #lava
Здесь разрабы не просто двигают кнопки и лутают деньги, а создают шедевры!
Я Никита — frontend-разработчик, любящий свою работу. Я приглашаю тебя в свой канал о фронтенде с душой Frontend For The Soul с вдохновляющим комьюнити, фичами, которых нет в других источниках, регулярными трендовыми идеями и книгами.
Здесь каждый пиксель имеет душу. Присоединяйся — @frontendforthesoul
#codepen дня
Кому в детстве нравилось крутить в руках всякие цепочки и кисточки для велосипедов?
Сегодня ваш шанс вспомнить то самое чувство!
Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)
Тут: https://codepen.io/donotfold/pen/ZYYYJRV
Работает в Chrome и Safari TP.
Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.
#css #scroll #animation
#статья дня
...ну и #инструмент дня к ней заодно.
Где-то с месяц назад в блоге Chrome появилась интересная запись, посвящённая... каруселям изображений в CSS
Которые почему-то в русскоязычном пространстве все с чьей-то подачи называют слайдерами...
И на самом деле, это не самодеятельность Chrome! Это целый новый черновик спецификации: CSS Overflow Module 5.
Из интересного:
- кнопки пред-след aka ::scroll-button
- маркеры слайдов и страниц aka ::scroll-marker
- автоматическая разбивка на страницы
- выделение активного слайда и затенение остальных
Естественно, поддерживается пока только в Chrome со 135 версии и прочих Blink-браузерах.
Но выглядит интересно! Собственно, обещанный конструктор: https://chrome.dev/carousel-configurator/
Учитывая, что карусели изображений подходят только для, хм, изображений и ни один нормальный дизайнер в здравом уме не станет запихивать в карусели важную информацию (её не увидят, это факт), внедрение этой функциональности в браузеры чтобы перестать подгружать сотни килобайт скриптов выглядит разумно.
Ну и фоллбек до обычной прилепленной прокрутки aka scroll snap никто не отменял.
Ваши мысли, котаны? Имеет смысл ждать это в Safari и Firefox?
#css #scroll #gallery #carousel
⚡ Новые каналы с вакансиями и стажировками для джунов
В этих каналах публикуются все свежие вакансии и стажировки
🔺 ВАКАНСИИ
Горячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов.
👉 ПОДПИСАТЬСЯ
🔺СТАЖИРОВКИ
Стажировки для начинающих специалистов в IT независимо от возраста!
👉 ПОДПИСАТЬСЯ
🔺IT interns
Свежие стажировки для junior специалистов в топовых компании России и мира
👉 ПОДПИСАТЬСЯ
🔺Junojobs
Вакансии и стажировки для junior-разработчиков на удалёнке.
👉 ПОДПИСАТЬСЯ
🔺БИГТЕХ
Junior вакансии и стажировки в крупнейших IT-компаниях мира: NVidia, Apple, T-банк, Яндекс, Google и т. д.
👉 ПОДПИСАТЬСЯ
🔺Ква инженер - QA junior
Отборные джун вакансии и стажировки для QA, тестировщиков.
👉 ПОДПИСАТЬСЯ
