#фишка дня
Шоковый контент!
Вам, наверное, известно, что WebView — это когда в нативном приложении рендерится веб-приложение. И что такое точно есть в Android.
Я знал, что в Windows тоже применяется, знал, что в iOS вполне. Но не представлял, что даже официальные приложения Apple в macOS этим промышляют.
Если есть WebView-виджет, значит, есть и возможность его отладки?
Таки да! Следите за руками. Идём в терминал:
И вуаля — смотрим исходники того, что вам поставляет Apple и наслаждаемся.
Как по мне, весьма неожиданно. Поражает, насколько Apple поменяла свои правила интерфейсов, что даже встроенные web-части смотрятся настолько хорошо и нативно в контексте десктоп-приложения.
#macos #apple #webkit
Шоковый контент!
Вам, наверное, известно, что WebView — это когда в нативном приложении рендерится веб-приложение. И что такое точно есть в Android.
Я знал, что в Windows тоже применяется, знал, что в iOS вполне. Но не представлял, что даже официальные приложения Apple в macOS этим промышляют.
Если есть WebView-виджет, значит, есть и возможность его отладки?
Таки да! Следите за руками. Идём в терминал:
defaults write NSGlobalDomain WebKitDeveloperExtras -bool true
defaults write -g WebKitDeveloperExtras -bool YES
И вуаля — смотрим исходники того, что вам поставляет Apple и наслаждаемся.
Как по мне, весьма неожиданно. Поражает, насколько Apple поменяла свои правила интерфейсов, что даже встроенные web-части смотрятся настолько хорошо и нативно в контексте десктоп-приложения.
#macos #apple #webkit
🔥4👍3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Наверное, вы и так уже в курсе, но я решил написать.
Всем (хочется верить) известная песочница CodeSandbox расширила свои возможности от простой песочницы чуть сложнее CodePen до полноценного средства разработки и управления проектами от начала и до конца: https://codesandbox.io/post/announcing-codesandbox-projects
Теперь это не просто прототипирование!
Разрабатывайте где угодно, как угодно и на любом устройстве. Для iOS-устройств есть нативное приложение.
Ну и на видео для привлечения внимания показан процесс интеграции с VSCode. И думаю, больше интеграций последует.
Ну и на закуску напоминаю, что это те ребята, кто сделал адресные шорткаты вроде https://react.new/
#sandbox #project #tool #deploy
Наверное, вы и так уже в курсе, но я решил написать.
Всем (хочется верить) известная песочница CodeSandbox расширила свои возможности от простой песочницы чуть сложнее CodePen до полноценного средства разработки и управления проектами от начала и до конца: https://codesandbox.io/post/announcing-codesandbox-projects
Теперь это не просто прототипирование!
Разрабатывайте где угодно, как угодно и на любом устройстве. Для iOS-устройств есть нативное приложение.
Ну и на видео для привлечения внимания показан процесс интеграции с VSCode. И думаю, больше интеграций последует.
Ну и на закуску напоминаю, что это те ребята, кто сделал адресные шорткаты вроде https://react.new/
#sandbox #project #tool #deploy
👍8
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Что-то захотелось мне вам на ночь глядя дать нашпигованной няшноты.
Итак, собственно, милая (это определение автора, не надо на меня так смотреть!) солнечная система:
Demo: https://codepen.io/manz/pen/rNpeEoz
Repo: https://github.com/ManzDev/twitch-solar-system/
Demo GitHub: https://manzdev.github.io/twitch-solar-system/
Twitch Making-of: https://www.twitch.tv/videos/1430488082
Twitter: https://twitter.com/Manz
Что же в ней крутого?
Ну, это демо — на веб-компонентах. Их там семь штук плюс одно изображение (звёздное небо).
Для обучения и понимания, как работают веб-компоненты — залетает сходу.
#css #webcomponents #js
Что-то захотелось мне вам на ночь глядя дать нашпигованной няшноты.
Итак, собственно, милая (это определение автора, не надо на меня так смотреть!) солнечная система:
Demo: https://codepen.io/manz/pen/rNpeEoz
Repo: https://github.com/ManzDev/twitch-solar-system/
Demo GitHub: https://manzdev.github.io/twitch-solar-system/
Twitch Making-of: https://www.twitch.tv/videos/1430488082
Twitter: https://twitter.com/Manz
Что же в ней крутого?
Ну, это демо — на веб-компонентах. Их там семь штук плюс одно изображение (звёздное небо).
Для обучения и понимания, как работают веб-компоненты — залетает сходу.
#css #webcomponents #js
❤14👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Очень жаль, что у меня не было под рукой этого сайта в бытность студентом.
Итак, встречайте: https://algorithm-visualizer.org/
У ребят что-то с сертификатом, но сути дела не меняет: прекрасный проект по визуализации алгоритмов. От брутфорса и сортировки до динамического, будь оно неладно, программирования.
Приглашаю накидать в комментариях подобных проектов.
#algorithms #cs #visualizations
Очень жаль, что у меня не было под рукой этого сайта в бытность студентом.
Итак, встречайте: https://algorithm-visualizer.org/
У ребят что-то с сертификатом, но сути дела не меняет: прекрасный проект по визуализации алгоритмов. От брутфорса и сортировки до динамического, будь оно неладно, программирования.
Приглашаю накидать в комментариях подобных проектов.
#algorithms #cs #visualizations
👍12
#инструмент дня
Что-то пробило меня не тему визуализации всяческих полезностей. Алгоритмы уже можем, давайте что-нибудь ещё.
Как насчёт регулярных выражений? Там тоже есть что показать. Да и многие (я в том числе) гораздо проще воспринимают графическое решение задачи, нежели аналитическое.
Смотрим: https://regex-vis.com/
Ну согласитесь, не правда ли (?<first>^1$)|(?<second>^YES$)|(\s{2}) на КДПВ выглядит гораздо понятнее?
#regex #js #visualization
Что-то пробило меня не тему визуализации всяческих полезностей. Алгоритмы уже можем, давайте что-нибудь ещё.
Как насчёт регулярных выражений? Там тоже есть что показать. Да и многие (я в том числе) гораздо проще воспринимают графическое решение задачи, нежели аналитическое.
Смотрим: https://regex-vis.com/
Ну согласитесь, не правда ли (?<first>^1$)|(?<second>^YES$)|(\s{2}) на КДПВ выглядит гораздо понятнее?
#regex #js #visualization
🔥10👍3
#статья дня
Чтобы разбавить инструменты, коих сотни, давайте возьмём статью. Впрочем, она тоже о визуализации.
А конкретно, о визуализации вашей JavaScript-сборки (бандла), что поставляется в браузер: Lighthouse Treemap.
Знакомое название? Lighthouse — стандарт де-факто для измерения производительности сайтов и веб-приложений и анализа способов её улучшения.
А Treemap, собственно, это его часть. Показывает из чего ваша сборка состоит, что позволит проанализировать наиболее тяжёлые её части и сделать выводы о том, как поступить: разбить на части (чанки) или заменить.
Итак, статья: https://sia.codes/posts/lighthouse-treemap/
TL;DR
Открыли DevTools, запустили анализ проекта. После прохождения анализа появится кнопка View Treemap. Жамкаем и анализируем.
Заодно нелишним будет вспомнить Statoscope и Webpack Bundle Analyzer.
Пользуемся, наслаждаемся. Неделя визуализации продолжается!
#devtools #chrome
Чтобы разбавить инструменты, коих сотни, давайте возьмём статью. Впрочем, она тоже о визуализации.
А конкретно, о визуализации вашей JavaScript-сборки (бандла), что поставляется в браузер: Lighthouse Treemap.
Знакомое название? Lighthouse — стандарт де-факто для измерения производительности сайтов и веб-приложений и анализа способов её улучшения.
А Treemap, собственно, это его часть. Показывает из чего ваша сборка состоит, что позволит проанализировать наиболее тяжёлые её части и сделать выводы о том, как поступить: разбить на части (чанки) или заменить.
Итак, статья: https://sia.codes/posts/lighthouse-treemap/
TL;DR
Открыли DevTools, запустили анализ проекта. После прохождения анализа появится кнопка View Treemap. Жамкаем и анализируем.
Заодно нелишним будет вспомнить Statoscope и Webpack Bundle Analyzer.
Пользуемся, наслаждаемся. Неделя визуализации продолжается!
#devtools #chrome
🔥7👍1
#шпаргалка дня
Уникальное предложение в рамках недели визуализации!
Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg
Такая себе пирамида Маслоу, но для обсуждения качества кода. От базовых вещей (но не опускаясь до того, что можно сделать автоматически) до того, что сделает ваш код действительно красивым.
#pr #process #work
Уникальное предложение в рамках недели визуализации!
Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg
Такая себе пирамида Маслоу, но для обсуждения качества кода. От базовых вещей (но не опускаясь до того, что можно сделать автоматически) до того, что сделает ваш код действительно красивым.
#pr #process #work
👍6
✅ Новый формат получения IT специальности - Буткемп. Что это такое?
Буткемп — методика, которую использовали в лагерях для подготовки солдат. Чтобы стать полноценным бойцом, в обычных условиях новобранцу нужно 3-4 года. В условиях Bootcamp такого результата достигали за 4 месяца. Эффективность методики обоснована тем, что на период кемпа человек полностью погружается в процесс обучения и быстрей воспринимает информацию. Сейчас этот метод обучения активно используют в Гарварде, IT-компаниях, бизнес-проектах и образовательных программах.
Для обучения IT специальностям (прежде всего программирование) формат начали использовать в 2011 году в США. Он быстро доказал свою эффективность и стал популярным. К примеру, за 2020 год IT буткемпы выпустили 24975 американцев. Для стран бывшего СССР, это новый формат.
В 2018 году в России открылся первый - Эльбрус Буткемп. С тех пор его выпускниками стали 752 человека. 93% из них нашло работу в течение 3 месяцев после выпуска.
Буткемп работает как оффлайн (Москва и Санкт-Петербург), так и онлайн.
Подробнее о формате Буткемп можно узнать на мероприятии в ближайший вторник
Буткемп — методика, которую использовали в лагерях для подготовки солдат. Чтобы стать полноценным бойцом, в обычных условиях новобранцу нужно 3-4 года. В условиях Bootcamp такого результата достигали за 4 месяца. Эффективность методики обоснована тем, что на период кемпа человек полностью погружается в процесс обучения и быстрей воспринимает информацию. Сейчас этот метод обучения активно используют в Гарварде, IT-компаниях, бизнес-проектах и образовательных программах.
Для обучения IT специальностям (прежде всего программирование) формат начали использовать в 2011 году в США. Он быстро доказал свою эффективность и стал популярным. К примеру, за 2020 год IT буткемпы выпустили 24975 американцев. Для стран бывшего СССР, это новый формат.
В 2018 году в России открылся первый - Эльбрус Буткемп. С тех пор его выпускниками стали 752 человека. 93% из них нашло работу в течение 3 месяцев после выпуска.
Буткемп работает как оффлайн (Москва и Санкт-Петербург), так и онлайн.
Подробнее о формате Буткемп можно узнать на мероприятии в ближайший вторник
👍5
#библиотека дня
А на сегодня, чтобы разбавить тему, но не опускаться до банальных библиотек построения диаграм, возьмём инструмент, близкий к корпоративным задачам.
easyData — библиотека, позволяющая вставить на сайт данные из сервисов Google: Analytics, Sheets, Search Console и в целом любых других.
Установка и использование максимально простые (главное не забыть ограничить действия ключа API в Google-консоли), пара строк кода — и вот у вас на руках SEO-панель управления :)
Есть и обучающее видео: https://youtu.be/5BvarQdBtFk?list=PLl1gkwYU90QkjQyRJijEbpouyFOUNv7MW
#seo #google #sheets #dashboard
А на сегодня, чтобы разбавить тему, но не опускаться до банальных библиотек построения диаграм, возьмём инструмент, близкий к корпоративным задачам.
easyData — библиотека, позволяющая вставить на сайт данные из сервисов Google: Analytics, Sheets, Search Console и в целом любых других.
Установка и использование максимально простые (главное не забыть ограничить действия ключа API в Google-консоли), пара строк кода — и вот у вас на руках SEO-панель управления :)
Есть и обучающее видео: https://youtu.be/5BvarQdBtFk?list=PLl1gkwYU90QkjQyRJijEbpouyFOUNv7MW
#seo #google #sheets #dashboard
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
It’s-a me, Mario!
Немного расслабимся и взглянем на прекрасно выполненную 3D-голову Mario, следящую за курсором: https://codepen.io/ivorjetski/pen/abEBjKN
Дикий объём работы, конечно. И ни строчки JS.
Слежение как всегда сделано кучей раскиданных hover-якорей.
Бонус! Ссылка на видео процесса создания: https://www.youtube.com/watch?v=GWyod2tkTxI
#css #3d #art
It’s-a me, Mario!
Немного расслабимся и взглянем на прекрасно выполненную 3D-голову Mario, следящую за курсором: https://codepen.io/ivorjetski/pen/abEBjKN
Дикий объём работы, конечно. И ни строчки JS.
Слежение как всегда сделано кучей раскиданных hover-якорей.
Бонус! Ссылка на видео процесса создания: https://www.youtube.com/watch?v=GWyod2tkTxI
#css #3d #art
🔥12👎2
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Чота мало было тулзов для визуализации алгоритмов, давайте ещё одну.
https://visualgo.net/en
Не Visual Go, мелкомягкие тут ни при чём, а VisuAlgo. Ну фантазия так работает у парней. Точнее, у профессора CS из Сингапура, потому и языки там — английский, китайский и индонезийский.
Т. е. реально настоящий обучающий инструмент. С вводными, заданиями, примерами кода. Что ещё нужно? :)
#algorithms #cs #visualization
Чота мало было тулзов для визуализации алгоритмов, давайте ещё одну.
https://visualgo.net/en
Не Visual Go, мелкомягкие тут ни при чём, а VisuAlgo. Ну фантазия так работает у парней. Точнее, у профессора CS из Сингапура, потому и языки там — английский, китайский и индонезийский.
Т. е. реально настоящий обучающий инструмент. С вводными, заданиями, примерами кода. Что ещё нужно? :)
#algorithms #cs #visualization
👍7
#статья дня
Есть такой скандально известный в HR-кругах iOS-разработчик: Антон Назаров.
Чем же он скандально известен? Ну, например, своей концепцией осознанной меркантильности.
Короче говоря, он работает на двух работах одновременно и не стесняется этого. Попутно объясняя, как же важно не привязываться к работе эмоционально.
Не так давно был скандал с его участием: одна из конференций приняла доклад по этой самой осознанной меркантильности, но поскольку спонсоры мягко говоря охренели от темы, доклад так и не был выпущен на видео.
Но я вот что принёс сегодня: статью о том, что волк не лев, но в цирке… ой, простите. Статья о волчистости в айти: https://boosty.to/m0rtymerr/posts/082000b6-c390-4d08-96b4-00c07d049d9c?share=post_link
А если точнее, о расчётливом подходе к получению желаемого.
TL;DR будь наглым.
Почитать полезно, мне по жизни чуток подобного не хватает.
#hr #work #cv
Есть такой скандально известный в HR-кругах iOS-разработчик: Антон Назаров.
Чем же он скандально известен? Ну, например, своей концепцией осознанной меркантильности.
Короче говоря, он работает на двух работах одновременно и не стесняется этого. Попутно объясняя, как же важно не привязываться к работе эмоционально.
Не так давно был скандал с его участием: одна из конференций приняла доклад по этой самой осознанной меркантильности, но поскольку спонсоры мягко говоря охренели от темы, доклад так и не был выпущен на видео.
Но я вот что принёс сегодня: статью о том, что волк не лев, но в цирке… ой, простите. Статья о волчистости в айти: https://boosty.to/m0rtymerr/posts/082000b6-c390-4d08-96b4-00c07d049d9c?share=post_link
А если точнее, о расчётливом подходе к получению желаемого.
TL;DR будь наглым.
Почитать полезно, мне по жизни чуток подобного не хватает.
#hr #work #cv
boosty.to
Волчистость в IT - Осознанная Меркантильность | Антон Назаров
В этой статьей ты узнаешь обо всех минусах осторожно расчетливого подхода к деланию дел. Мы поговорим о влиянии мемасов про волков на твой жизненный успех. И введем баззворд волчистость, ты же любишь щегольнуть новым словом? Омежка подход Кто-то заходит…
👍13👎1
#фишка дня
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html
🔥24👍6🤔2💩1
#статья дня
Любите ли вы Markdown так, как люблю его я?
Даже диаграммы составляю в текстовом виде, как многие мои читатели уже знают: https://t.me/htmlshit/913
Терпеть не могу WYSIWYG с первых дней использования компьютера. Никогда не работает так, как надо, и один хрен никто не знает, как правильно использовать стили и контекст. Что-то не то нажал, и вот у тебя весь документ курсивом. А визивиг-редакторы на сайтах это вообще источник бесконечной боли: мусорная разметка, незакрытые теги, инлайн-стили…
Хотя кому-то проще и на кнопочку В нажать, да… но не суть.
Поэтому я крайне обрадовался новости, что и в Google Docs теперь официально появляется возможность писать Markdown: https://www.theverge.com/2022/3/29/23002138/google-docs-markdown-support-formatting-update
Всё есть текст. Всё будет текст.
#google #markdown
Любите ли вы Markdown так, как люблю его я?
Даже диаграммы составляю в текстовом виде, как многие мои читатели уже знают: https://t.me/htmlshit/913
Терпеть не могу WYSIWYG с первых дней использования компьютера. Никогда не работает так, как надо, и один хрен никто не знает, как правильно использовать стили и контекст. Что-то не то нажал, и вот у тебя весь документ курсивом. А визивиг-редакторы на сайтах это вообще источник бесконечной боли: мусорная разметка, незакрытые теги, инлайн-стили…
Хотя кому-то проще и на кнопочку В нажать, да… но не суть.
Поэтому я крайне обрадовался новости, что и в Google Docs теперь официально появляется возможность писать Markdown: https://www.theverge.com/2022/3/29/23002138/google-docs-markdown-support-formatting-update
Всё есть текст. Всё будет текст.
#google #markdown
🔥6👍2
#codepen дня
Хотите фотографической точности? Их есть у меня.
Более ювелирной работы с тенями я не нашёл. Поделитесь?
https://codepen.io/ivorjetski/pen/xMJoYO
#shadow #picture
Хотите фотографической точности? Их есть у меня.
Более ювелирной работы с тенями я не нашёл. Поделитесь?
https://codepen.io/ivorjetski/pen/xMJoYO
#shadow #picture
🤯7👍4
#инструмент дня
Тема генерации градиентов буквально неисчерпаема. Вот подъехал ещё инструмент: https://components.ai/gradient/rfx04toi2Bx4GLUxPpdV
Создать любое число последовательностей и наложений, включая радиальные, добавить текст, сохранить для будущего использования — всё есть.
Удобный предпросмотр и экспорт в React-компоненты наличествуют.
#gradient #css #tool
Тема генерации градиентов буквально неисчерпаема. Вот подъехал ещё инструмент: https://components.ai/gradient/rfx04toi2Bx4GLUxPpdV
Создать любое число последовательностей и наложений, включая радиальные, добавить текст, сохранить для будущего использования — всё есть.
Удобный предпросмотр и экспорт в React-компоненты наличествуют.
#gradient #css #tool
👍9❤5
#тред дня
На прошлой неделе сайт правительства Соединённого Королевства — gov.uk — отказался от jQuery.
Т. о. они выкинули 32 кб минимизированного и сжатого кода, который надо не только скачать, но и обработать.
Какие же результаты? Давайте глянем.
Собственно, вот тред: https://twitter.com/TheRealNooshu/status/1509487050122276864
Вот версия для чтения поудобней: https://threadreaderapp.com/thread/1509487050122276864.html
TL;DR
Снижение нагрузки на CPU от 3% до 10% что положительно сказалось на UX пользователей с мобильных устройств.
#js #seo #performance
На прошлой неделе сайт правительства Соединённого Королевства — gov.uk — отказался от jQuery.
Т. о. они выкинули 32 кб минимизированного и сжатого кода, который надо не только скачать, но и обработать.
Какие же результаты? Давайте глянем.
Собственно, вот тред: https://twitter.com/TheRealNooshu/status/1509487050122276864
Вот версия для чтения поудобней: https://threadreaderapp.com/thread/1509487050122276864.html
TL;DR
Снижение нагрузки на CPU от 3% до 10% что положительно сказалось на UX пользователей с мобильных устройств.
#js #seo #performance
🔥12👍1
#фишка дня
Хотите расположить текст вдоль контура (кривой)?
Да без проблем! Смотрим КДПВ. Поддержка только в Chrome!
Ладно-ладно, вот вам демо: http://codepen.io/t_afif/full/eYEQbmg
#css #path #svg
Хотите расположить текст вдоль контура (кривой)?
Да без проблем! Смотрим КДПВ. Поддержка только в Chrome!
Ладно-ладно, вот вам демо: http://codepen.io/t_afif/full/eYEQbmg
#css #path #svg
😁14
#инструмент дня
Я довольно часто выкладываю посты, где КДПВ является кусок кода. Вся рубрика #фишка дня этим питается.
Тут я соберу ссылки на различные сервисы для создания подобных скриншотов. А вы дополните. Поехали:
https://ray.so/
https://carbon.now.sh/
https://codezen.rishimohan.me/
http://codeimg.io/
Что меня забавляет в этой группе — все по-умолчанию делают скриншот в стиле macOS. Зачем? Пёс его знает. Красивое.
https://codeimg.io/
Прелесть этой утилиты — предопределённые размеры изображения под разные соцсети.
https://codekeep.io/
Это, скорее, хранилище сниппетов, нежели инструмент создания скриншотов.
Ну и немного расширений для VS Code:
https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
https://marketplace.visualstudio.com/items?itemName=robertz.code-snapshot
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
Пост был бы неполон без http://codephoto.ru/
С этим сервисом вас ни в один чат не пустят :)
Миру нужна красота.
Я довольно часто выкладываю посты, где КДПВ является кусок кода. Вся рубрика #фишка дня этим питается.
Тут я соберу ссылки на различные сервисы для создания подобных скриншотов. А вы дополните. Поехали:
https://ray.so/
https://carbon.now.sh/
https://codezen.rishimohan.me/
http://codeimg.io/
Что меня забавляет в этой группе — все по-умолчанию делают скриншот в стиле macOS. Зачем? Пёс его знает. Красивое.
https://codeimg.io/
Прелесть этой утилиты — предопределённые размеры изображения под разные соцсети.
https://codekeep.io/
Это, скорее, хранилище сниппетов, нежели инструмент создания скриншотов.
Ну и немного расширений для VS Code:
https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
https://marketplace.visualstudio.com/items?itemName=robertz.code-snapshot
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
Пост был бы неполон без http://codephoto.ru/
С этим сервисом вас ни в один чат не пустят :)
Миру нужна красота.
🔥5
#codepen дня
Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.
Так вот.
Прелесть этой сетки логотипов в том, что она удивительным образом сбалансирована. Недостаточно просто взять и сделать все изображения одной ширины или одной высоты. Тут думать надо.
И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO
Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.
Думаю, стоит попробовать на базе этого кода сделать расширение для Figma…
А то часто встречаю весьма халтурный подход.
#js #grid #img
Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.
Так вот.
Прелесть этой сетки логотипов в том, что она удивительным образом сбалансирована. Недостаточно просто взять и сделать все изображения одной ширины или одной высоты. Тут думать надо.
И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO
Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.
Думаю, стоит попробовать на базе этого кода сделать расширение для Figma…
А то часто встречаю весьма халтурный подход.
#js #grid #img
👍8🤩1