#заметка дня
Сейчас многое в воздухе напоминает времена, когда можно было запустить сайт или мобильное приложение с минимальными усилиями — и оно начинало жить. Просто потому, что закрывало понятную задачу. Без идеального кода, без идеального интерфейса. Главное — идея.
У меня был опыт запуска конструктора надгробий. Да, звучит так себе, но на старте всё работало — живой завод, заказы, настроенный фронт. Потом было продолжение — конструкторы футболок, зеркал, чего угодно. Но дальше MVP дело не пошло: выгорел, закопался в полировке, перегорел на этапе реализации. И в какой-то момент понял: если нет простого пути от идеи до пользы — всё, конец.
При этом я видел, как совсем неотполированные, страшные внешне продукты отлично зарабатывали. Их делали не разработчики, и явно не для разработчиков. Но они решали задачу — и этого хватало, чтобы пользователи и деньги нашлись.
Сейчас похоже происходит с ИИ. Alex Four (Гик-культура и Русское IT за границей) хорошо сформулировал, что мы снова в моменте, когда технологии стали достаточно доступными, чтобы быстро воплощать идеи. Причём без необходимости сразу собирать команду. Идея по-прежнему главное — а ИИ скорее ускоряет путь от задумки до работающего прототипа. Не заменяет, но помогает докрутить, попробовать, запустить.
Это не продлится вечно, но пока — время делать.
Сейчас многое в воздухе напоминает времена, когда можно было запустить сайт или мобильное приложение с минимальными усилиями — и оно начинало жить. Просто потому, что закрывало понятную задачу. Без идеального кода, без идеального интерфейса. Главное — идея.
У меня был опыт запуска конструктора надгробий. Да, звучит так себе, но на старте всё работало — живой завод, заказы, настроенный фронт. Потом было продолжение — конструкторы футболок, зеркал, чего угодно. Но дальше MVP дело не пошло: выгорел, закопался в полировке, перегорел на этапе реализации. И в какой-то момент понял: если нет простого пути от идеи до пользы — всё, конец.
При этом я видел, как совсем неотполированные, страшные внешне продукты отлично зарабатывали. Их делали не разработчики, и явно не для разработчиков. Но они решали задачу — и этого хватало, чтобы пользователи и деньги нашлись.
Сейчас похоже происходит с ИИ. Alex Four (Гик-культура и Русское IT за границей) хорошо сформулировал, что мы снова в моменте, когда технологии стали достаточно доступными, чтобы быстро воплощать идеи. Причём без необходимости сразу собирать команду. Идея по-прежнему главное — а ИИ скорее ускоряет путь от задумки до работающего прототипа. Не заменяет, но помогает докрутить, попробовать, запустить.
Это не продлится вечно, но пока — время делать.
#инструмент дня
Разобраться в концепциях 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 #бородач
Разобраться в концепциях 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 #бородач
#заметка дня
Когда-то в среде разработчиков на Drupal CMS была популярна идея «зелёной разработки».
До массового гринвошинга было ещё лет 15, так что речь не совсем про экологию.
Это подход, при котором вместо установки десятков сторонних модулей (хотя в этом Drupal был ну очень хорош) и написания собственного кода, проект строился на базе уже имеющихся в ядре инструментов и проверенных, широко используемых решений.
Такой подход считался правильным не только с точки зрения производительности и безопасности, но и как способ сделать сайт легче, понятнее и проще в поддержке. Обновления ядра не стоили буквально ничего.
Он требовал вдумчивости, внимания к API и знания возможностей платформы, зато давал в ответ устойчивость и долговечность.
Сегодня, несмотря на смену технологий, этот принцип остаётся актуальным. Он проявляется, например, в отказе от зависимости на множество сторонних пакетов в пользу более простых, понятных решений. Особенно хорошо это видно в разработке на современных фреймворках и экосистемах.
Идея та же: если проблему можно решить на базе уже существующего API, без лишних зависимостей — это, как правило, и быстрее, и надёжнее.
С появлением нейросетей и их интеграции в рабочие процессы, этот подход получил новое обоснование. Модели вроде ChatGPT гораздо лучше справляются с генерацией и объяснением кода, если он опирается на известные, хорошо документированные API и стандартные структуры.
Стоит лишь использовать малоизвестную библиотеку с нестабильной документацией — и ИИ начинает фантазировать, выдавая неточные или устаревшие решения. Чем ближе код к «ядру» платформы, тем проще его понять, модифицировать и дополнить — как человеку, так и машине.
Вот опять я всуну свой пульт на Flutter: нужно было определить широковещательный IP-адрес в локальной сети. Чтобы это сделать, нужно было рассчитать маску подсети для Wake-on-Lan, проще говоря, включения телевизора по сети.
Казалось бы, можно просто найти библиотеку, но они все избыточны. В итоге я написал нужные функции с нуля. Это заняло 10 минут и дало результат, который точно соответствует задаче. Более того — нейросеть отлично помогла, потому что код простой, прямолинейный и не зависит от внешних факторов.
Аналогичным образом в мусорку полетели зависимости для кастомных модалок и шторок.
Нейросети в очередной раз подчёркивают важную мысль: библиотеки хороши тогда, когда они полностью закрывают задачу. Если же приходится обходить, дописывать или разбираться, почему не работает, — это сигнал, что стоит подумать, действительно ли нужна эта зависимость.
В таких случаях библиотека должна быть почти идеальной: хорошая архитектура, понятный интерфейс, живое сообщество, ясная документация и внятная поддержка. Иначе — лучше без неё.
В итоге идея зелёной разработки — это не про отказ от всего стороннего, а про осознанный выбор и уважение к инструменту, с которым работаешь. И если раньше это помогало делать сайты стабильнее, то сегодня это ещё и делает твою работу совместимой с ИИ-помощниками, проще для ревью, и готовой к масштабированию.
Мнения, котаны?
#gpt #chatgpt #green
Когда-то в среде разработчиков на Drupal CMS была популярна идея «зелёной разработки».
До массового гринвошинга было ещё лет 15, так что речь не совсем про экологию.
Это подход, при котором вместо установки десятков сторонних модулей (хотя в этом Drupal был ну очень хорош) и написания собственного кода, проект строился на базе уже имеющихся в ядре инструментов и проверенных, широко используемых решений.
Такой подход считался правильным не только с точки зрения производительности и безопасности, но и как способ сделать сайт легче, понятнее и проще в поддержке. Обновления ядра не стоили буквально ничего.
Он требовал вдумчивости, внимания к API и знания возможностей платформы, зато давал в ответ устойчивость и долговечность.
Сегодня, несмотря на смену технологий, этот принцип остаётся актуальным. Он проявляется, например, в отказе от зависимости на множество сторонних пакетов в пользу более простых, понятных решений. Особенно хорошо это видно в разработке на современных фреймворках и экосистемах.
Идея та же: если проблему можно решить на базе уже существующего API, без лишних зависимостей — это, как правило, и быстрее, и надёжнее.
С появлением нейросетей и их интеграции в рабочие процессы, этот подход получил новое обоснование. Модели вроде ChatGPT гораздо лучше справляются с генерацией и объяснением кода, если он опирается на известные, хорошо документированные API и стандартные структуры.
Стоит лишь использовать малоизвестную библиотеку с нестабильной документацией — и ИИ начинает фантазировать, выдавая неточные или устаревшие решения. Чем ближе код к «ядру» платформы, тем проще его понять, модифицировать и дополнить — как человеку, так и машине.
Вот опять я всуну свой пульт на Flutter: нужно было определить широковещательный IP-адрес в локальной сети. Чтобы это сделать, нужно было рассчитать маску подсети для Wake-on-Lan, проще говоря, включения телевизора по сети.
Казалось бы, можно просто найти библиотеку, но они все избыточны. В итоге я написал нужные функции с нуля. Это заняло 10 минут и дало результат, который точно соответствует задаче. Более того — нейросеть отлично помогла, потому что код простой, прямолинейный и не зависит от внешних факторов.
Аналогичным образом в мусорку полетели зависимости для кастомных модалок и шторок.
Нейросети в очередной раз подчёркивают важную мысль: библиотеки хороши тогда, когда они полностью закрывают задачу. Если же приходится обходить, дописывать или разбираться, почему не работает, — это сигнал, что стоит подумать, действительно ли нужна эта зависимость.
В таких случаях библиотека должна быть почти идеальной: хорошая архитектура, понятный интерфейс, живое сообщество, ясная документация и внятная поддержка. Иначе — лучше без неё.
В итоге идея зелёной разработки — это не про отказ от всего стороннего, а про осознанный выбор и уважение к инструменту, с которым работаешь. И если раньше это помогало делать сайты стабильнее, то сегодня это ещё и делает твою работу совместимой с ИИ-помощниками, проще для ревью, и готовой к масштабированию.
Мнения, котаны?
#gpt #chatgpt #green
#новость дня
Яндекс подвел итоги программы грантов в опенсорсе
https://habr.com/ru/companies/yandex/articles/909186/
У компании действует грантовая программа уже второй год, куда могут податься независимые разрабы и получить финансирование для развития своих проектов.
Из интересных проектов:
1. IronOS — открытая прошивка, добавляющая паяльникам профессиональные фичи вроде термопрофилей. Раньше такие функции были только в дорогом проф оборудовании, а теперь можно апгрейднуть и бюджетное устройство. Что делает паяльное дело доступнее.
2. sqruff — линтер на Rust для проверки крупных объемов SQL-кода с высокой производительностью. Знаю, что SQL-линтеры вроде SQLFluff сильно тормозят на больших базах. И если у чуваков наконец-то получилось решить эту проблему — можно только поаплодировать.
3. js-dos — эмулятор для DOS-программ, позволяющий запускать их онлайн. Включая ретро-игры. В планах команды также улучшить 3D-графику и добавить мультиплеер через WebRTC. Может, благодаря ему, молодое поколение освоит классику, на которой мы выросли.
На самом деле, компания уже давно вкладывается в опенсорс — взять те же CatBoost и YTsaurus.
Как мне кажется, инициатива достойная. Опенсорсу поддержка никогда лишней не бывает. Это позволяет создавать общими усилиями прорывные решения.
Яндекс подвел итоги программы грантов в опенсорсе
https://habr.com/ru/companies/yandex/articles/909186/
У компании действует грантовая программа уже второй год, куда могут податься независимые разрабы и получить финансирование для развития своих проектов.
Из интересных проектов:
1. IronOS — открытая прошивка, добавляющая паяльникам профессиональные фичи вроде термопрофилей. Раньше такие функции были только в дорогом проф оборудовании, а теперь можно апгрейднуть и бюджетное устройство. Что делает паяльное дело доступнее.
2. sqruff — линтер на Rust для проверки крупных объемов SQL-кода с высокой производительностью. Знаю, что SQL-линтеры вроде SQLFluff сильно тормозят на больших базах. И если у чуваков наконец-то получилось решить эту проблему — можно только поаплодировать.
3. js-dos — эмулятор для DOS-программ, позволяющий запускать их онлайн. Включая ретро-игры. В планах команды также улучшить 3D-графику и добавить мультиплеер через WebRTC. Может, благодаря ему, молодое поколение освоит классику, на которой мы выросли.
На самом деле, компания уже давно вкладывается в опенсорс — взять те же CatBoost и YTsaurus.
Как мне кажется, инициатива достойная. Опенсорсу поддержка никогда лишней не бывает. Это позволяет создавать общими усилиями прорывные решения.
Хабр
SQL-линтер на Rust, HTML-минификатор для .NET и эмулятор DOS в браузере: кто получил гранты Yandex Open Source
В конце октября мы анонсировали продление программы грантов от Yandex Open Source для поддержки проектов независимых разработчиков. Пришло время подвести итоги и рассказать...
This media is not supported in your browser
VIEW IN TELEGRAM
#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 #бородач
Признавайтесь, кто в 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 #бородач
Media is too big
VIEW IN TELEGRAM
#заметка дня
Быть в отпуске, который никак заранее не планировал, а в конце которого — полная смена работы (и даже отчасти деятельности: из продукта в дизайн-систему) — штука довольно тяжёлая.
С одной стороны, на работу ходить не надо. С другой — нужно как-то себя развлекать!
Зато, наконец, появилось время добить пульт на 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
Быть в отпуске, который никак заранее не планировал, а в конце которого — полная смена работы (и даже отчасти деятельности: из продукта в дизайн-систему) — штука довольно тяжёлая.
С одной стороны, на работу ходить не надо. С другой — нужно как-то себя развлекать!
Зато, наконец, появилось время добить пульт на 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
#фишка дня
Что раздражает больше, чем незагрузившаяся картинка?
Правильно, дефолтное оформление этих самых картинок!
В Firefox просто будет alt-текст, Chrome ещё добавит какую-то убогую иконку из девяностых... ну такое.
Что же делать?
А решение простое: когда картинка не загрузилась, её контейнер подчиняется основным блочным правилам, а значит, на него можно набросить псевдоэлементы!
Чтобы было понятно, что конкретно не загрузилось — стоит ещё и
К слову, обратите внимание на пример: https://codepen.io/alinaki/pen/qEdEZOK
Там ещё и старый трюк с переводом строк без использования
Кстати, почему не
Оформляйте картинки правильно, котаны!
#css #img
Что раздражает больше, чем незагрузившаяся картинка?
Правильно, дефолтное оформление этих самых картинок!
В 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;
}
К слову, обратите внимание на пример: https://codepen.io/alinaki/pen/qEdEZOK
Там ещё и старый трюк с переводом строк без использования
br использован: \A + pre-wrap.Кстати, почему не
::before, а ::after? Да потому что Firefox занимает ::before под отображение alt и некоторые средства доступности могут этим пользоваться.Оформляйте картинки правильно, котаны!
#css #img
#заметка дня
А где это я сегодня? А я сегодня на конференции Future Frontend 2025!
Было бы странно, если бы я был на 2024…
https://futurefrontend.com/schedule/
Возможно, буду вести некое подобие трансляции по ходу дня. А пока — завтрак, знакомство с будущими коллегами и ожидание старта.
Бейджик отражает уже устаревшую информацию.
Из мерча — банное полотенце! Потому что афтепати будет в сауне. Кстати, в 2021 году тоже давали. Но похуже :)
Как всегда, доверь разработчику настройку стриминга — и ничего не выйдет, все ждут 🫠
#futurefrontend
А где это я сегодня? А я сегодня на конференции Future Frontend 2025!
Было бы странно, если бы я был на 2024…
https://futurefrontend.com/schedule/
Возможно, буду вести некое подобие трансляции по ходу дня. А пока — завтрак, знакомство с будущими коллегами и ожидание старта.
Бейджик отражает уже устаревшую информацию.
Из мерча — банное полотенце! Потому что афтепати будет в сауне. Кстати, в 2021 году тоже давали. Но похуже :)
Как всегда, доверь разработчику настройку стриминга — и ничего не выйдет, все ждут 🫠
#futurefrontend
#стрим дня
Я же совсем забыл докинуть ссылки на стрим! Он, к слову, бесплатный.
Стрим на сегодня: https://www.youtube.com/live/rWqIEWStdkA
На офсайте есть и ссылка на завтра, но мне же завтра тоже надо что-то запостить, верно?
Только что вот закончился доклад Георгиоса Диамантополуса (греческие фамилии очень крутые, согласитесь?) из секции Work-Life Balance о том, как наше тело реагирует на сидячую работу. Очень подробный и убедительный.
Присоединяйтесь!
#futurefrontend
Я же совсем забыл докинуть ссылки на стрим! Он, к слову, бесплатный.
Стрим на сегодня: https://www.youtube.com/live/rWqIEWStdkA
На офсайте есть и ссылка на завтра, но мне же завтра тоже надо что-то запостить, верно?
Только что вот закончился доклад Георгиоса Диамантополуса (греческие фамилии очень крутые, согласитесь?) из секции Work-Life Balance о том, как наше тело реагирует на сидячую работу. Очень подробный и убедительный.
Присоединяйтесь!
#futurefrontend
YouTube
Future Frontend 2025 conference - Day 1
Schedule: https://futurefrontend.com/2025/schedule/#2025-05-27-tuesday-conference (GMT+3)
Silver sponsors: Smartly, Wunderdog, Alma Media, Backscreen
Bronzer sponsor: Wonna
Silver sponsors: Smartly, Wunderdog, Alma Media, Backscreen
Bronzer sponsor: Wonna
Прошел вайб-чек от команды Яндекс Вертикалей, кажется, мне пора в отпуск. Какие у вас результаты?
🆖 перейти в бота
Please open Telegram to view this post
VIEW IN TELEGRAM
#заметка дня
Пожалуй, лучший доклад дня: распознавание жестов комбинацией Gemini и Tensorflow.js
Секция с демо была просто потрясающей. Не просто «я написала промпт и вызвала апи», а еще и с какими проблемами пришлось столкнуться по пути. И почему просто нельзя было обойтись одним только Tensorflow.js
Переходите на стрим и смотрите. Это стоит того!
Впрочем, следующий доклад о генерации многослойного эмбиента тоже весьма крутой. Как минимум, как демонстрация возможностей Cursor :)
#futurefrontend
Пожалуй, лучший доклад дня: распознавание жестов комбинацией Gemini и Tensorflow.js
Секция с демо была просто потрясающей. Не просто «я написала промпт и вызвала апи», а еще и с какими проблемами пришлось столкнуться по пути. И почему просто нельзя было обойтись одним только Tensorflow.js
Переходите на стрим и смотрите. Это стоит того!
Впрочем, следующий доклад о генерации многослойного эмбиента тоже весьма крутой. Как минимум, как демонстрация возможностей Cursor :)
#futurefrontend
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Вчера на Future Frontend (а вот, кстати, стрим на сегодня) деврелы Google представляли новые и неизвестные возможности Chrome DevTools.
Конечно же, почти вся презентация была посвящена AI, но они мельком напомнили о Workspaces (рабочих пространствах, средах).
Короче говоря, можно редактировать код своего проекта прямо в девтулзах. А учитывая, что девтулзы — штука мощная, да ещё и отладчик под рукой — идея становится весьма привлекательной.
Но настраивать Workspace — задача довольно раздражающая. Вот бы они создавались автоматически при дев-сборке...
Так можно же! Ну или вот, чуть более подробная дока из сорсов.
Короче, суть в чём. Создаём файл
Ну, в общем, всё! Девтулзы распознают конфигурацию и позволят редактировать проект прямо в браузере. Что, повторю, сильно удобнее, чем кажется.
Особенно если ты умеешь пользоваться отладчиком.
Кстати, в будущем релизе Bun это будет включено по умолчанию для dev-среды.
А если хочется попробовать прямо сейчас, есть официальный плагин для Vite и пример его использования.
В Chrome 137 все нужные флаги уже включены по-умолчанию, кстати.
#devtools #workspace
Вчера на 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
#игра дня
Давненько не было чего-то необычного.
Впрочем, если вы не фанат Dwarf Fortress, конечно.
Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать.
Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.
Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память
🎮 https://untrustedgame.com/ 📂 https://github.com/AlexNisnevich/untrusted
#game #js
Давненько не было чего-то необычного.
Впрочем, если вы не фанат Dwarf Fortress, конечно.
Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать.
Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.
Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память
for (var i = 0; i < ...), будет ощущение, что вы просто продолжаете работу, только теперь в компании ASCII-графики и странного профессора.🎮 https://untrustedgame.com/ 📂 https://github.com/AlexNisnevich/untrusted
#game #js
Media is too big
VIEW IN TELEGRAM
Недавно на Кинопоиске вышел цикл интервью «Истории Яндекса». Это архив воспоминаний бывших и текущих сотрудников, которые развивают компанию. Я глянул пару эпизодов и больше всего мне зашло интервью Сергея Крупина, руководителя направления общей инфраструктуры дата-центров.
Сергей проработал в Яндексе 14 лет и застал сразу несколько исторических эпох компании. Столь длительный путь в одном месте, по его словам, связан не только с интересными задачами и проектами, но и с внутренним кругом общения, который разделяет его ценности.
Тот случай, когда работа становится чем-то большим. Ты идешь туда не потому что «надо», а за атмосферой и людьми, с которыми тебе комфортно. И такой подход я разделяю: никакие бонусы, ДМС и прочие плюшки не смогут дать ощущение, что ты на своём месте.
Замечу, что это не классическая документалка, а спокойный формат с честными разговорами о работе и жизни в бигтехе. Отлично подойдет для фонового прослушивания.
Сергей проработал в Яндексе 14 лет и застал сразу несколько исторических эпох компании. Столь длительный путь в одном месте, по его словам, связан не только с интересными задачами и проектами, но и с внутренним кругом общения, который разделяет его ценности.
Тот случай, когда работа становится чем-то большим. Ты идешь туда не потому что «надо», а за атмосферой и людьми, с которыми тебе комфортно. И такой подход я разделяю: никакие бонусы, ДМС и прочие плюшки не смогут дать ощущение, что ты на своём месте.
Замечу, что это не классическая документалка, а спокойный формат с честными разговорами о работе и жизни в бигтехе. Отлично подойдет для фонового прослушивания.
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня
Кто хотел красивых анимированных иконок без обязательств?
🙋 Я точно хотел!
Итак, вашему вниманию иконки от Дмитро Товстокорого: https://icons.pqoqubbw.dev/
Анимированные при помощи библиотеки motion SVG с MIT-лицензией, что может быть прекраснее?
Давайте немного насладимся воем на болотах о том, что ещё одна библиотека анимации в проект нам не нужна.
Ну и никто не мешает вдохновиться и реализовать своё, с использованием своих инструментов, ведь правда?
К слову, библиотека Motion выросла из инструмента Framer, а их уж новичками никак не назовёшь. Так что вполне себе проверена в бою.
Берём, котаны?
#icons #svg #animation #бородач
Кто хотел красивых анимированных иконок без обязательств?
🙋 Я точно хотел!
Итак, вашему вниманию иконки от Дмитро Товстокорого: https://icons.pqoqubbw.dev/
Анимированные при помощи библиотеки motion SVG с MIT-лицензией, что может быть прекраснее?
Давайте немного насладимся воем на болотах о том, что ещё одна библиотека анимации в проект нам не нужна.
Ну и никто не мешает вдохновиться и реализовать своё, с использованием своих инструментов, ведь правда?
К слову, библиотека Motion выросла из инструмента Framer, а их уж новичками никак не назовёшь. Так что вполне себе проверена в бою.
Берём, котаны?
#icons #svg #animation #бородач
#заметка дня
А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?
Ведь это должно раздражать посетителей, мешает менеджерам паролей, как встроенным в браузер, так и системным и сторонним.
Задумывались ли вы вообще, зачем это надо?
Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!
И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.
Какова цель любого проекта? Набрать пользовательскую базу. Ну и удержать её. В итоге нам нужно, как минимум, увести посетителя на регистрацию. И тут начинается веселье...
Огромное число пользователей не видят разницы между 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 #бородач
А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?
Ведь это должно раздражать посетителей, мешает менеджерам паролей, как встроенным в браузер, так и системным и сторонним.
Задумывались ли вы вообще, зачем это надо?
Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!
И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.
Какова цель любого проекта? Набрать пользовательскую базу. Ну и удержать её. В итоге нам нужно, как минимум, увести посетителя на регистрацию. И тут начинается веселье...
Огромное число пользователей не видят разницы между 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 #бородач
This media is not supported in your browser
VIEW IN TELEGRAM
#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 и
Дичь совершенная.
#css #minecraft
Просыпайся, страна! 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
Media is too big
VIEW IN TELEGRAM
Когда в последний раз вы трогали свои сиксели?
Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.
Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.
📌 Что это такое?
Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.
Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.
Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!
🖼 Как смотреть картинки в терминале?
👉 Самый простой способ —
А дальше просто запускаем:
и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.
🔄 Конвертация изображений
Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:
А если у вас установлен ImageMagick, можно делать так:
Конвертирует и сразу выводит в терминал.
Если уже есть картинка в формате sixel, можно вывести её простым
❓ Поддержка в эмуляторах терминала
Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/
Сразу скажу, что стандартный терминал в macOS — не умеет.
Очевидно, формат прекрасно подходит для разгого рода диаграмм и дашбордов.
В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄
#console #images #бородач
Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.
Узнал случайно, когда смотрел видео про 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 #бородач
#совет дня
Расскажу о других авторских каналах, на которые советую подписаться — собрал их в одну папку.
В них пишут, как начать кодить, вырасти в грейде и попасть на работу мечты. А еще делятся опытом и советами, которые помогут наработать новые навыки и трудоустроиться.
Будет полезно как джунам, так и сеньорам — https://www.tg-me.com/addlist/0FHgy1y1yZgxMDc6
Расскажу о других авторских каналах, на которые советую подписаться — собрал их в одну папку.
В них пишут, как начать кодить, вырасти в грейде и попасть на работу мечты. А еще делятся опытом и советами, которые помогут наработать новые навыки и трудоустроиться.
Будет полезно как джунам, так и сеньорам — https://www.tg-me.com/addlist/0FHgy1y1yZgxMDc6
#статья дня
Дэн наше всё Абрамов недавно написал статью о новом способе передачи данных с сервера — Progressive JSON. Это не просто использование курсоров для пагинации, как в том же JSON:API, а настоящий поток данных, где структура JSON передаётся частями, по мере её готовности.
Вообще, много пишет последнее время. Это хорошо!
Зачем нужно? Собственно, для работы React Server Components в том числа!
Пример такого потока:
Видите заглушку $1? Позже — в том же потоке! — приходит следующий кусок:
На стороне клиента это будет выглядеть как:
Комментарии в статье подгружаются по мере их поступления, и клиент может начать отображать контент сразу, даже если не все данные ещё доступны. Этот подход позволяет эффективно загружать и рендерить сложные интерфейсы, улучшая отзывчивость приложения.
Если вам интересна тема оптимизации загрузки данных, стоит прочитать статью Дэна: Progressive JSON.
А, или посмотреть в формате видеоподкаста! Тут: https://www.youtube.com/watch?v=MaMQLNBZz64
#react #json #rsc
Дэн наше всё Абрамов недавно написал статью о новом способе передачи данных с сервера — Progressive JSON. Это не просто использование курсоров для пагинации, как в том же JSON:API, а настоящий поток данных, где структура JSON передаётся частями, по мере её готовности.
Вообще, много пишет последнее время. Это хорошо!
Зачем нужно? Собственно, для работы React Server Components в том числа!
Пример такого потока:
{
"header": "Welcome to my blog",
"post": "$1",
"footer": "Hope you like it"
}
Видите заглушку $1? Позже — в том же потоке! — приходит следующий кусок:
/* $1 */
{
"content": "This is my article",
"comments": "$2"
}
На стороне клиента это будет выглядеть как:
{
"header": "Welcome to my blog",
"post": {
"content": "This is my article",
"comments": new Promise(/* ... not yet resolved ... */),
},
"footer": "Hope you like it"
}
Комментарии в статье подгружаются по мере их поступления, и клиент может начать отображать контент сразу, даже если не все данные ещё доступны. Этот подход позволяет эффективно загружать и рендерить сложные интерфейсы, улучшая отзывчивость приложения.
Если вам интересна тема оптимизации загрузки данных, стоит прочитать статью Дэна: Progressive JSON.
А, или посмотреть в формате видеоподкаста! Тут: https://www.youtube.com/watch?v=MaMQLNBZz64
#react #json #rsc