14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#вопрос дня
Что произойдёт, когда я нажму на кнопку?
Сначала ответ, а потом можно пройти по ссылке. Проверьте себя :)
Песочница: https://codesandbox.io/p/sandbox/twilight-glitter-vtqsf2
Ну и не стесняйтесь писать в комментарии, что вы думаете по поводу. Пусть у нас будет вот такая суббота.
Этот вопрос я на собеседовании вчера задавал. Эмоции были смешанные.
#react #interview
#инструмент дня
На видео — не высокохудожественный глитч, а результат работы очередного нового рендер-трекера для React: React Scan.
Очевидно, натравленный на Твиттер
Репозиторий: https://github.com/aidenybai/react-scan
Чем хорош: не нужно кодить! Ну, если только ты сам не хочешь :)
Импортируем перед реактом и просто запускаем анализ:
import { scan } from 'react-scan'; // import this BEFORE react
import React from 'react';
scan({
enabled: true,
log: true, // logs render info to console (default: false)
clearLog: false, // clears the console per group of renders (default: false)
});
#фишка дня
Как заполнить фон целым количеством, например, кружочков или цветков?
Ну вдруг вы работаете в Маримекко
Очень просто! Используем background-repeat: space.
Работает аналогично флексовому space-between
И пример от Аны Тюдор: https://codepen.io/thebabydino/pen/RwXvryZ
#css #background #fill
👀 IT-профессия, которую вы захотите освоить
Вы могли слышать про фулстек-разработчиков — эти специалисты создают сайты «под ключ». То есть разрабатывают и видимую часть, и всю серверную логику. Работодатели таких любят, ведь они могут заменить сразу нескольких специалистов. И зарплата соответствует. В среднем 200 000 рублей, по данным «Хабр Карьеры».
Вы можете освоить специальность на онлайн-курсе Skillbox «Фулстек-разработчик на JavaScript». За время обучения вы создадите больше 58 проектов от реальных заказчиков из разных сфер бизнеса. Редко у кого из новичков бывает такое портфолио!
Конечно, сложно понять, подходит тебе профессия или нет, когда ничего про неё толком не знаешь. Предлагаем узнать — пройти первые уроки бесплатно. Переходите по ссылке, оставляйте заявку, и мы откроем тестовый доступ: https://epic.st/eWpsPa?erid=2Vtzqv8PV8y
Черная пятница! Скидки до 60% +3 курса в подарок!
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
#заметка дня
Я подумал, раз уж выкатил выше видео с пультом на Flutter, почему бы не рассказать о процессе создания некоторых элементов оттуда.
Чтобы не напрягать всех лишний раз, примеры будут на JavaScript и Canvas. Ну, вдруг кому-то пригодится нечто похожее.
Да и выглядит такой код чуток попроще, чем на CustomPainter во Flutter (хотя по факту-то тоже просто холст).
Итак, для пульта я решил сделать D-pad (он же джойстик или directional pad). На моём пульте он состоит из кольца с четырьмя кнопками и центральной кнопки.
Чаще всего, d-pad-ом назыают всем известную крестовину, которая не всегда обладает центральной кнопкой.
Проще всего достичь такого эффекта, разделив весь круг на четыре сектора. Каждый сектор — это дуга, занимающая угол
90°. Чтобы они визуально отделялись, добавляем контуры между дугами, а поверх всего накладываем центральный круг — он становится кнопкой.
Для корректного размещения делим полный угол 360° на количество дуг — четыре — и задаём начальный угол сдвига -45°. Он нужен, чтобы первый сектор смотрел строго вверх. А то а чо он.
В результате получаем симметричный D-pad, где каждый сегмент и центр выделены визуально: https://codepen.io/alinaki/pen/oNKmxNe?editors=0010
Ладно, ладно. Это на бумаге кажется, что всё действительно просто. На деле же я жёстко тупил.
1. Я не очень понимал, как обрабатывать клики, поэтому думал в сторону пяти отдельных элементов. А значит, об уравнении арки.
2. Потом я никак не мог врубиться, как же мне сделать отступы одинаковой ширины. Мысль, что это просто контур, граница, вообще не сразу мне в голову пришла.
3. Вроде, в школе учат, как определять, попала ли точка в контур, заданный неким уравнением, но вспоминаешь это тоже далеко не сразу.
В следующих постах расскажу, как решил уравнение в пункте 3, добавив подсветку нужного сегмента при нажатии.
Не переключайтесь, котаны!
#canvas #paint #remote
#инструмент дня
Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.
Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.
И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).
И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/
Я, честно, не считаю вручную акцентированный градиент настолько лучше автоматически созданного по контрасту, но для основных, идейных изображений, наверняка кому-то пригодится.
Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.
#gradient #tool #mesh
Представьте, у вас есть продукт — например, сервис для управления задачами или приложение для планирования бюджета. Он уже на рынке, у него есть пользователи, но что-то мешает им активно и регулярно пользоваться. На этом этапе необходим продакт-менеджер — стратег и креативщик, который сможет вывести продукт на новый уровень, сделав его более привлекательным и удобным для пользователей.
Продакт-менеджер — это специалист, который решает, как должно выглядеть и работать приложение, чтобы его хотелось использовать снова и снова. Он анализирует данные, изучает поведение пользователей и на основе этого вносит улучшения, добавляя нужные функции и делая продукт удобным и полезным.
Курс по продакт-менеджменту от Яндекс Практикума подходит и начинающим продактам, и тем, кто приходит из смежных сфер — маркетинга, проектного управления или IT-предпринимательства. Он поможет систематизировать знания и научиться планировать развитие продукта так, чтобы повышать его вовлеченность и удовлетворять запросы пользователей.
Программа курса охватывает все ключевые этапы продакт-менеджмента: от анализа метрик и выявления проблем до построения стратегии роста и управления продуктом на разных этапах. Студенты учатся на практических кейсах, приближенных к задачам IT-компаний, и формируют портфолио из трех проектов. На каждом этапе они получают обратную связь от опытных продакт-менеджеров, что позволяет быстрее вникнуть в профессию и избежать типичных ошибок.
Для тех, кто хочет научиться управлять продуктом и сделать его интересным и удобным для пользователей, этот курс — отличный способ получить практические навыки и уверенность в своих силах.
Попробуйте бесплатную вводную часть курса, чтобы понять, подходит ли вам профессия. Переходите по ссылке и пройдите первую бесплатную тему до 30 ноября и получите промокод на скидку 20%.
#ссылка дня
Воскресная тема для тех, кому за!
Не так давно разработчики WinAmp решили выложить его код в открытый доступ. По пути несколько раз облажавшись и заодно открыв код, который им не принадлежал :)
Ну и под совершенно неуклюжей лицензией, которая не разрешала буквально ничего.
Но раз винамп снова оказался в сфере наших новостей, представляю вашему вниманию каталог скинов для него! Гордого и всё же непобеждённого.
Каждый скин — шедевр своего времени, выверенный до пикселя.
https://skins.webamp.org/
Скины можно попробовать тут же в проигрывателе WebAmp, который является визуальным и функциональным клоном того самого.
Открытый код, кстати! Кому нужна работа с аудио в том числе — рекомендую к ознакомлению.
#history #winamp #music #audio
#заметка дня
Часто приходится делать таблицы в GitHub Markdown? Тогда лови это знание, пригодится.
Списки и контейнеры не могут и не должны отображаться внутри таблиц, набранных "палочками" (||). Палочки — только для текстового контента, для данных. Точка.
Нужен табличный, кхрм, макет (ну список изменений там запихать) – используй HTML таблицы.
Но есть нюанс.
Чтобы правильно использовать Markdown внутри HTML-таблиц, нужно этот самый контент с двух сторон обложить переводами строки, вот так:<td>_markdown_ **тут**</td>
...и будет норм.
#markdown #бородач
Две недели онлайн-лекций по IT от топовых спикеров из Яндекс, VK, YADRO, Самолет, Т-банк!
Институт прикладных компьютерных наук ИТМО с 11-21 проводит онлайн-лекторий, где вы сможете:
– Разобраться в аспектах разработки HL-систем, LLVM-бэкенда для RISC-V архитектуры
– Узнать о возможных проблемах при создании своей ChatGPT
– На примерах погрузиться в аспекты процесса разработки IT-продукта
– Понять, чем на практике полезны продолжения из теории языков программирования
– Получить гайдлайны по исследованиям в области биоинформатики и Computer Science
Переходите на сайт, чтобы узнать подробности и зарегистрироваться.
Реклама. Университет ИТМО ИНН:7813045547
#проверка дня
Я обратил внимание, что уже в который раз рекламка канала про фронтенд в картинках набирает какое-то нереальное количество положительных реакций.
Чтобы проверить, не боты ли это набегают, давайте проведём эксперимент :)
Впрочем, это частично подтверждается тем, что вам всем нравится формат #фишка дня.
Вот есть такой прекрасный Твиттер-аккаунт CSS Weekly и сегодня на нём вышла подборка про логические свойства CSS, которые вы видите на иллюстрациях.
Поделитесь, пожалуйста, своими мыслями на тему. Нравится ли вам такой формат больше, чем текстовый, и почему?
Очень интересно ваше мнение и, естественно, мне надо понимать, пробовать ли в такой формат самому.
#инструмент дня
Вы, наверное, уже наслышаны от обладателей айфонов про AirDrop и дикпики.
Кроме шуток, передать файлы по локальной сети между двумя своими устройствами должно быть максимально просто же! Без ковыряний в Network Discovery, настроек Samba и так далее.
И такое решение есть, даже с открытым кодом: LocalSend.
Сайт: https://localsend.org/
Написано на Dart и Flutter, работает на всех разумно доступных платформах: Windows, Linux, MacOS, Android, iOS.
Не опирается на один протокол, а перебирает все доступные и даже может запустить свой собственный сервер по необходимости. В крайнем случае, можно донастроить.
Никаких облаков, всё по локальной сети.
Поддержка нескольких получателей, поддержка буфера обмена.
В общем, если у вас дома зоопарк устройств и пока не хватило времени настроить что-то иное, или лучше Samba вы ничего в жизни не видели — вот это самое то.
Мне особенно импонирует Flutter. Я недавно вернулся к разработке своего пульта и это всё ещё очень приятный экспириенс.
#flutter #localsend #airdrop #network
Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.
Присоединяйтесь: @FrontendPortal
#codepen дня
Можно ли при помощи SVG-фильтров, не прибегая к помощи теней, экструдировать текст?
Экструзия — процесс выдавливания, как в 3D-принтере.
И да, можно! Как всегда, Ана Тюдор с прекрасным решением. На сей раз, кстати, у решения нет багов на HDR-экранах 😅 Всё отображается как надо.
Кодпен: https://codepen.io/thebabydino/pen/yLmxePV
Выглядит потрясно. Матрица экструзии там отдельная песня, конечно.
P. S. В Telegram практически отсутствует нативная раскрутка, авторам каналов приходится покупать рекламу или надеяться на внешние источники.
Инструмент похожих каналов не всегда помогает.
Но есть папки! И тема сегодняшней папки — IT-архитектура, тимлидство и фронтенд. Как минимум, на пять я уже давно подписан :)
Добавляйте папку, помогите развитию крутых каналов. /channel/addlist/Pk3F9xr4il5lZTc6
А если кто из админов желает в подборки, пишите сюда.
#инструмент дня
Этого следовало ожидать и оно свершилось!
Дамы и господа, без лишних слов: библиотека и конструктор анимаций для Tailwind — Motion.
Сходу ссылка: https://rombo.co/tailwind/#animator
Казалось бы, бери да используй CSS-анимации, но... тут уж как есть. Думаю, работающим с тейлвиндом людям должно быть удобно, да и для конструкторов самое то.
Но, кроме шуток, инструмент и правда довольно оригинальный и подход к построению его интерфейса мне очень зашёл.
#css #tailwind #motion #animation #ui
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
#ссылка дня
Паскаля Витьелло и его очередная пачка Tailwind+React UI компонентов возвращается!
Давайте вспоминат: поля ввода, кнопки, чекбоксы, переключатели и радиокнопки.
Что на очереди? Правильно, выпадающие списки!
И опять 50, куда ж без этого.
Часть нативные, часть — shadcdn. К сожалению, без комбобоксов :( Потому, берём в руки react-downshift...
Ссылка: https://originui.com/selects
Как обычно, shadcn и Tailwind, без сюрпризов. Вдохновляемся, котаны?
#tailwind #shadcn #react #ui
#статья дня
Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже пищу от восторга.
Хочется выделить хотя бы недели две только на изучение нужной математики.
Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.
Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.
И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe
Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.
Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.
Это настоящий подарок.
#webgl #glsl #shaders
Как построить облако с нуля? Узнайте от разработчиков новой облачной платформы MWS.
MWS запускает реалити-проект Building the Cloud о создании новой публичной облачной платформы. В прямом эфире наши эксперты и инженеры раскрывают закулисье облачной разработки, делятся уникальным опытом и отвечают на вопросы.
В первом выпуске расскажем о сердце облака — сервисе Compute.
О чём поговорим:
● Зачем мы строим новое публичное облако MWS
● Как устроена архитектура сервиса Compute в новой платформе MWS
● Что происходит «под капотом» облака, когда создаётся виртуальная машина
● Расскажем о планах и роудмапе новой платформы
Приглашаем разработчиков и профессионалов облачного рынка! Задайте свои вопросы разработчикам нового облака MWS и узнайте всё из первых рук.
📅 Дата: 20 ноября 2024, 11:00
👉 Регистрируйтесь сейчас, чтобы не пропустить эфир
#молния дня
Срочно нужно ваше мнение! Куда пихать эмодзи: в коммиты, переменные или комментарии? 👴
#видео дня
Вы думали, я забыл?
Я тут каким-то чудом выкроил время, подолбился в геометрию, документацию и ChatGPT и таки довёл свой ТВ-пульт на #Flutter до вида, в котором за него уже не стыдно.
Теперь навернуть ещё фичей, отшлифовать настройки и в продакшен, котаны!
Подумываю ввести воскресную рубрику о разработке на Flutter и для не-веба вообще, чтобы получилось некое обещание.
Надо? :)
Присоединяйтесь к III Международному Технологическому Форуму THE TRENDS!
Дата: 13-14 ноября 2024 года
Место: IRRI LOFT, Дербеневская набережная 7, строение 31, Москва
————————————
THE TRENDS - это
⚡️ Главное событие индустрии высоких технологий, объединяющее более 4500 участников и более 80 спикеров.
Гости: визионеры, инноваторы, лидеры мнений, предприниматели и топ-менеджеры из IT, AI и Blockchain секторов, представители СМИ и креативной индустрии.
Форум проходит при поддержке
генерального
спонсора JJO
-
сервис для индексного инвестирования в рынок криптовалют. JJO - это S&P 500 в мире децентрализованной экономики.
#такое дня
Тут такое дело, наткнулся на пост в, простите, 𝕏, цитирую: "Айти сообщество может сколько угодно переобуваться в прыжке, переименовывая мастеры в мейны и блэклисты в блоклисты, но в CSS всё ещё есть именованный цвет indianred, и это цвет кожи индейцев".
Давайте чуть разберёмся, вот пример использования: https://codepen.io/alinaki/pen/abPWmNy
Я специально не стал выносить его в иллюстрацию, чтобы каждый себе сам его представил.
Кажется, уже сходу можно догадаться, что это что угодно, но не цвет кожи. На самом деле, он и к индейцам отношения никакого не имеет 🫠
Это цвет почвы, богатой латеритом. В Индии!
Не знаю, зачем я в этот прекрасный вечер вынудил вас открыть форточку, но уж очень захотелось поделиться.
Впрочем, фирма Crayola, когда-то придумавшая восковые мелки, переименовала Indian Red в ореховый ровно по вышеозначенной причине...
А, ну пост был бы неполон без ссылки на обсуждение рабочей группы CSSWG, как раз об этом: https://github.com/w3c/csswg-drafts/issues/5284
Комментарии там очень интересно почитать, на самом деле. Про статистику использования там тоже есть. И про Навахо
#css #color #indianred #бородач
#новость дня
Итак, мы писали Джаваскрипт в браузере, в консоли, на серверах, на микроконтроллерах, в играх, в кофеварках, в аудиоплеерах, телевизорах, в макросах офисных пакетов, в NoSQL базах данных...
Но до сих пор не писали его в хранимых процедурах MySQL!
Встречайте: JavaScript Stored Programs in MySQL. И соответствующий пост в блоге Oracle: https://blogs.oracle.com/mysql/post/introducing-javascript-support-in-mysql
Зачем? Ну для разных целей:
1. Извлечение данных, очевидно
2. Форматирование
3. Примерный поиск
4. Валидация данных
5. Собственные алгоритмы сжатия, сериализации и десериализации данных
Пример:
CREATE FUNCTION gcd_js (a INT, b INT) RETURNS INT
LANGUAGE JAVASCRIPT AS $$
let [x, y] = [Math.abs(a), Math.abs(b)];
while(y) [x, y] = [y, x % y];
return x;
$$;
Если вы еще не в курсе, что Tesla ищет хоббитов, видео в нейросетях можно генерировать бесплатно, и появилась новая бесплатная нейросеть для создания изображений, которая уже наделала много шума, то вам срочно нужно подписаться на канал Завезли фичей!
На канале «Завезли фичей!» вы найдете всё: свежие новости, ИИ-инструменты, подробные обзоры и эксклюзивные инсайды, которыми не поделятся другие авторы.
Внутри — много постов про разработки, инновации, фичи и нейросети, которые уже сегодня трансформируют жизни и бизнесы. Это реальный шанс быть в курсе всего самого важного и интересного.
Подписывайтесь прямо сейчас - t.me/zavezlifichey.
#фишка дня
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, так база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event #бородач
#инструмент дня
Я, конечно, прошу прощения за неожиданную иллюстрацию к посту, но у меня примерно сейчас такие вот ощущения от либы, про которую хочу рассказать :)
И называется она, какая неожиданность, cigs.
Ну, буквально: 🚬 cigs
Сразу ссылка: https://github.com/cigs-tech/cigs
Итак, что же она делает.
А она позволяет задавать вопросы по заданной Zod-схеме обычным человеческим языком используя OpenAI-токены!
Короче, ещё более просто. Описываешь некую схему объекта, а потом спрашиваешь у системы: "А какой там любимый цвет у Джона?". И получишь ответ!
Пример:
function getUserCompliment(username: string) {
const colorMap = {
"Alice": "blue",
"Bob": "green",
"Charlie": "red",
};
return {
color: colorMap[input.username as keyof typeof colorMap] || "unknown",
};
}
const userInfoSchema = z.object({
username: z.string(),
});
// Define a cig to get a user's favorite color
const getFavoriteColor = cig("getFavoriteColor", userInfoSchema)
.handler(async (input) => {
// Simulated database lookup
return getUserCompliment(input.username);
});
// Usage example
(async () => {
try {
const result = await getFavoriteColor.run(
"What is the favorite color of Alice",
); // { color: 'blue' }
console.log(result);
const result2 = await getFavoriteColor.run(
"What is the favorite color of Susan",
); // { color: 'unknown' }
console.log(result2);
// You can also call that function with the specified input
const result3 = await getFavoriteColor.run({ username: "Alice" }); // { color: 'blue' }
console.log(result3);
// Expected output: { username: 'alice', favoriteColor: 'blue', compliment: 'You have great taste!' }
} catch (error) {
console.error("Error:", error);
}
})();
Превращайте лиды в клиентов без лишних усилий c помощью LeadPlan
LeadPlan – сервис для создания эффективных поп-апов и виджетов без программирования, который поможет:
- собрать базу для рассылок;
- сегментировать аудиторию;
- настраивать стратегии показа виджетов;
- выбирать моменты, когда посетителю действительно требуется помощь в принятии решения о покупке;
- передавать данные в сервисы email-рассылок с готовыми интеграциями;передавать данные по вебхукам.
LeadPlan – это:
✅ просто: создавайте формы за пару минут, даже если вы раньше этого не делали;
✅ профессионально: режим тонкой настройки для создания индивидуального дизайна;
✅ наглядно: отслеживайте ключевые показатели работы виджетов;
✅ эффективно: проводите A/B-тесты гипотез и выбирайте рабочие стратегии.
➡️ Попробуйте LeadPlan бесплатно прямо сейчас!
Реклама. ООО "ПИСЬМО". ИНН 7811602601.
#статья дня
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
console.info(
'%c ',
`padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);