#фишка дня от Гарри Робертса aka csswizardry.com
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить:
Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило
Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img #бородач
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
shape-outside.Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить:
shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило
shape-margin, без него текст начинает прилипать к объекту.Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img #бородач
#статья дня
Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://www.tg-me.com/htmlshit/1580
Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.
А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)
Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?
Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d
Ну, точнее, линейная алгебра.
Есть перевод на русский: https://habr.com/ru/articles/870462/
Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.
#svg #math #matrix #transform #бородач
Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://www.tg-me.com/htmlshit/1580
Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.
А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)
Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?
Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d
Ну, точнее, линейная алгебра.
Есть перевод на русский: https://habr.com/ru/articles/870462/
Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.
#svg #math #matrix #transform #бородач
#странное дня
Странное чувство. После 5.5 лет работы в компании Supermetrics, я принял решение уйти.
И сегодня — первый день моего месячного отпуска, после которого я уже не вернусь в столь знакомый офис 😭
Причины ухода разные, но давайте сведём их к более высокой зарплате и остановимся на этом.
Куда я ухожу — расскажу через месяц.
А поговорить я хочу вот о чём. Чисто технически, описание канала будет теперь неверным, поскольку ухожу я на позицию ниже. С техлида на обычного сеньора.
И добровольное понижение позиции начинает встречаться в сети всё чаще.
Почему это происходит?
— Желание вернуться к инженерной работе.
Управленческая роль — это митинги, процессы и координация. Разработка при этом часто уходит на второй план.
— Смена технологии или направления.
Если переходишь в другую сферу — разумно указать должность, которая соответствует реальному уровню в новом контексте.
— Меньше ответственности — меньше стресса.
Иногда хочется просто делать свою работу хорошо, без постоянного напряжения и необходимости принимать управленческие решения.
— Интерес к самому продукту или команде.
Ради сильной команды или интересного проекта можно пожертвовать тайтлом. Это не редкость.
— Релокация или выход на международный рынок.
Не все должности адекватно транслируются между странами. То, что называлось «тимлидом» здесь, может восприниматься совсем иначе там.
— Ожидания и реальность.
В своей веб-студии ты можешь быть C-level. Но на собеседовании в продуктовую компанию такой титул скорее вызовет недоумение и завышенные ожидания — как у HR, так и у будущих коллег. Иногда честнее и полезнее прийти в новую команду без лишнего шума.
Такие решения не стоит воспринимать как «шаг назад». Это адаптация.
Но очень важно — изучать компанию, куда идёшь. Понимать её культуру, ожидания и структуру. Не везде звания означают одно и то же.
Волкам, конечно, не понять, да и цель у них другая. Но мы здесь не за трофеями. Мы — за работой, в которой есть смысл.
#life #work #balance
Странное чувство. После 5.5 лет работы в компании Supermetrics, я принял решение уйти.
И сегодня — первый день моего месячного отпуска, после которого я уже не вернусь в столь знакомый офис 😭
Причины ухода разные, но давайте сведём их к более высокой зарплате и остановимся на этом.
Куда я ухожу — расскажу через месяц.
А поговорить я хочу вот о чём. Чисто технически, описание канала будет теперь неверным, поскольку ухожу я на позицию ниже. С техлида на обычного сеньора.
И добровольное понижение позиции начинает встречаться в сети всё чаще.
Почему это происходит?
— Желание вернуться к инженерной работе.
Управленческая роль — это митинги, процессы и координация. Разработка при этом часто уходит на второй план.
— Смена технологии или направления.
Если переходишь в другую сферу — разумно указать должность, которая соответствует реальному уровню в новом контексте.
— Меньше ответственности — меньше стресса.
Иногда хочется просто делать свою работу хорошо, без постоянного напряжения и необходимости принимать управленческие решения.
— Интерес к самому продукту или команде.
Ради сильной команды или интересного проекта можно пожертвовать тайтлом. Это не редкость.
— Релокация или выход на международный рынок.
Не все должности адекватно транслируются между странами. То, что называлось «тимлидом» здесь, может восприниматься совсем иначе там.
— Ожидания и реальность.
В своей веб-студии ты можешь быть C-level. Но на собеседовании в продуктовую компанию такой титул скорее вызовет недоумение и завышенные ожидания — как у HR, так и у будущих коллег. Иногда честнее и полезнее прийти в новую команду без лишнего шума.
Такие решения не стоит воспринимать как «шаг назад». Это адаптация.
Но очень важно — изучать компанию, куда идёшь. Понимать её культуру, ожидания и структуру. Не везде звания означают одно и то же.
Волкам, конечно, не понять, да и цель у них другая. Но мы здесь не за трофеями. Мы — за работой, в которой есть смысл.
#life #work #balance
Media is too big
VIEW IN TELEGRAM
#инструмент дня
Так вышло, что в своей карьере я умудрился поработать в компании, которая хотела сделать стримы на веб-сайте своей основной фишкой. С тех пор HLS, RTP и nginx-rtmp-plugin были моими друзьями.
Но возможности по микшированию видео, звука и изображений прямо на веб-странице тогда были весьма ограничены или просто сложны. Работали через OBS, хотя даже он был в весьма зачаточном состоянии.
Но сегодня я наткнулся на нечто прекрасное: https://compositor.live/
Это набор React-компонентов и медиасервер, который позволяет стримить видео и микшировать несколько потоков, управляя ими как обычными компонентами и элементами страницы!
Можно построить нечто аналогичное Google Meet за считанные дни.
Вырезать зелёный экран, добавить текст, поменять видео местами, наложить блупер — всё на месте. Напоминает react-three-fiber по своей сути.
#react #video #mixer #media #stream #бородач
Так вышло, что в своей карьере я умудрился поработать в компании, которая хотела сделать стримы на веб-сайте своей основной фишкой. С тех пор HLS, RTP и nginx-rtmp-plugin были моими друзьями.
Но возможности по микшированию видео, звука и изображений прямо на веб-странице тогда были весьма ограничены или просто сложны. Работали через OBS, хотя даже он был в весьма зачаточном состоянии.
Но сегодня я наткнулся на нечто прекрасное: https://compositor.live/
Это набор React-компонентов и медиасервер, который позволяет стримить видео и микшировать несколько потоков, управляя ими как обычными компонентами и элементами страницы!
Можно построить нечто аналогичное Google Meet за считанные дни.
Вырезать зелёный экран, добавить текст, поменять видео местами, наложить блупер — всё на месте. Напоминает react-three-fiber по своей сути.
#react #video #mixer #media #stream #бородач
#фишка дня
С трудом понимаю, как эта штука прошла мимо меня. Претендует на очередное переосмысление иконок в вёрстке! Туда, к картинкам, SVG в HTML, SVG в CSS, символам...
И я о функции CSS shape(). Для
Например, треугольник будет выглядеть так:
Выглядит просто? Ну так это потому что и определения простые. Вы только посмотрите, что сделали в CodePen (в смысле, в компании) для демонстрации мощи функции: https://codepen.io/t_afif/pen/JoovLam
Если честно, я пока не видел конверторов SVG в shape(), но уверен, они должны появиться.
Или это отличный шанс кому-нибудь блеснуть знаниями!
Впрочем, в Firefox пока поддержки нет :(
#css #shape #svg
С трудом понимаю, как эта штука прошла мимо меня. Претендует на очередное переосмысление иконок в вёрстке! Туда, к картинкам, SVG в HTML, SVG в CSS, символам...
И я о функции CSS shape(). Для
clip-path.Например, треугольник будет выглядеть так:
.shape1 {
clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
}Выглядит просто? Ну так это потому что и определения простые. Вы только посмотрите, что сделали в CodePen (в смысле, в компании) для демонстрации мощи функции: https://codepen.io/t_afif/pen/JoovLam
Если честно, я пока не видел конверторов SVG в shape(), но уверен, они должны появиться.
Или это отличный шанс кому-нибудь блеснуть знаниями!
Впрочем, в Firefox пока поддержки нет :(
#css #shape #svg
Media is too big
VIEW IN TELEGRAM
#статья дня
...ну и #инструмент дня к ней заодно.
Где-то с месяц назад в блоге 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
...ну и #инструмент дня к ней заодно.
Где-то с месяц назад в блоге 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
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Кому в детстве нравилось крутить в руках всякие цепочки и кисточки для велосипедов?
Сегодня ваш шанс вспомнить то самое чувство!
Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)
Тут: https://codepen.io/donotfold/pen/ZYYYJRV
Работает в Chrome и Safari TP.
Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.
#css #scroll #animation
Кому в детстве нравилось крутить в руках всякие цепочки и кисточки для велосипедов?
Сегодня ваш шанс вспомнить то самое чувство!
Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)
Тут: https://codepen.io/donotfold/pen/ZYYYJRV
Работает в Chrome и Safari TP.
Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.
#css #scroll #animation
#инструмент дня
Вот вы такие посмеялись надо мной, когда я предложил сделать генератор кривых в CSS aka функция
напоминаю, в чём суть беседы: https://www.tg-me.com/htmlshit/3603
Из этого:
нужно сделать это:
Я знаю, вы любите простыню кода в постах!
так вот, Темани Афиф, автор уже известного вам проекта CSS Shape взял и сделал!
А не просто клоуна поставил, слыш ты
Пруф: https://css-generators.com/svg-to-css/
Да, поддерживается только одна кривая aka path aka атрибут d, но каков эффект!
Там, кстати, довольно сложные примеры есть. Одна кривая совсем не означает что-то непрерывное: перо же можно поднимать и опускать по координатам.
Как вам такой поворот, котаны?
#svg #css #shape #clip
Вот вы такие посмеялись надо мной, когда я предложил сделать генератор кривых в CSS aka функция
clip-path shape() из SVG, а это уже реальность!напоминаю, в чём суть беседы: https://www.tg-me.com/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);
Я знаю, вы любите простыню кода в постах!
так вот, Темани Афиф, автор уже известного вам проекта CSS Shape взял и сделал!
А не просто клоуна поставил, слыш ты
Пруф: https://css-generators.com/svg-to-css/
Да, поддерживается только одна кривая aka path aka атрибут d, но каков эффект!
Там, кстати, довольно сложные примеры есть. Одна кривая совсем не означает что-то непрерывное: перо же можно поднимать и опускать по координатам.
Как вам такой поворот, котаны?
#svg #css #shape #clip
Media is too big
VIEW IN TELEGRAM
#статья дня
Я знаю, знаю — вас всех уже достали различные реализации 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
Я знаю, знаю — вас всех уже достали различные реализации 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
#заметка дня
Перед вами две иллюстрации. Видео мы обсудим сейчас, а графики — в заключении, идёт?
Итак, на видео представлен пример очередного формата передачи идей моушен-дизайна в приложениях и браузерах! И имя ему — 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
Перед вами две иллюстрации. Видео мы обсудим сейчас, а графики — в заключении, идёт?
Итак, на видео представлен пример очередного формата передачи идей моушен-дизайна в приложениях и браузерах! И имя ему — 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
#статья дня
Фича-флаги: фронтенд против бэкенда — где провести линию раздела?
Сегодняшняя статья от ConfigCat — отличный разбор того, как по-разному работают feature flags в клиенте и на сервере.
Если ты не в курсе:
фича-флаг — это переключатель, который позволяет включать или отключать части функциональности без выката новой версии. Прекрасный способ тестировать, экспериментировать и чинить баги на лету.
Фронтенд-флаги
Плюсы:
— моментальные изменения, удобны для UX-экспериментов
— не требуют изменений на сервере
Минусы:
— логика доступна в клиенте (а значит и пользователю)
— сложно скрыть саму фичу, даже если она выключена
— возможны баги при сбоях SDK
Да ладно, кому нужны исходники вашего SPA...
Бэкенд-флаги
Плюсы:
— безопасно: логика и флаги не видны снаружи
— удобно управлять доступом, ролями, регионами и т.п.
Минусы:
— отклик медленнее
— нужна координация между фронтом и бэком
— UI не всегда знает, что делать с отключённой фичей
Автор также говорит о гибридном подходе, который позволяет совместить лучшее из двух миров: контроль на бэке, адаптация интерфейса на фронте.
В статье всё по делу, с примерами и выводами:
https://configcat.com/blog/2025/05/08/frontend-vs-backend-feature-flags/
#feature #dev
Фича-флаги: фронтенд против бэкенда — где провести линию раздела?
Сегодняшняя статья от ConfigCat — отличный разбор того, как по-разному работают feature flags в клиенте и на сервере.
Если ты не в курсе:
фича-флаг — это переключатель, который позволяет включать или отключать части функциональности без выката новой версии. Прекрасный способ тестировать, экспериментировать и чинить баги на лету.
Фронтенд-флаги
Плюсы:
— моментальные изменения, удобны для UX-экспериментов
— не требуют изменений на сервере
Минусы:
— логика доступна в клиенте (а значит и пользователю)
— сложно скрыть саму фичу, даже если она выключена
— возможны баги при сбоях SDK
Да ладно, кому нужны исходники вашего SPA...
Бэкенд-флаги
Плюсы:
— безопасно: логика и флаги не видны снаружи
— удобно управлять доступом, ролями, регионами и т.п.
Минусы:
— отклик медленнее
— нужна координация между фронтом и бэком
— UI не всегда знает, что делать с отключённой фичей
Автор также говорит о гибридном подходе, который позволяет совместить лучшее из двух миров: контроль на бэке, адаптация интерфейса на фронте.
В статье всё по делу, с примерами и выводами:
https://configcat.com/blog/2025/05/08/frontend-vs-backend-feature-flags/
#feature #dev
#заметка дня
Сейчас многое в воздухе напоминает времена, когда можно было запустить сайт или мобильное приложение с минимальными усилиями — и оно начинало жить. Просто потому, что закрывало понятную задачу. Без идеального кода, без идеального интерфейса. Главное — идея.
У меня был опыт запуска конструктора надгробий. Да, звучит так себе, но на старте всё работало — живой завод, заказы, настроенный фронт. Потом было продолжение — конструкторы футболок, зеркал, чего угодно. Но дальше 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