#фишка дня

Как сделать вывод консоли красивеньким?

Очень просто, использовать спецификаторы преобразования!

Прямо как sprintf в Си, ну как вы можете этого не знать?

Короче, всё внимание на иллюстрацию. Adobe настолько оборзели, что свой логотип даже вам в консоль пихают, если у вас получится открыть девтулзы на веб-версии Фотошопа.

А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX

Для тех, кто по ссылкам не ходит, сокращённая версия:

console.info(
  "%c %cAdobe %cPhotoshop Web%c  %c2023.20.0.0%c  %c1bba617e276",
  "padding-left: 36px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAPw==');"
)

Как можно догадаться, %c это спецификатор, указывающий, что сюда надо подставить CSS, переданный соответствующим аргументом.

Полный список спецификаторов есть на MDN.

Красота спасёт мир, котаны!

#console #js #sprintf

#фишка дня

Как сделать вывод консоли красивеньким?

Очень просто, использовать спецификаторы преобразования!

Прямо как sprintf в Си, ну как вы можете этого не знать?

Короче, всё внимание на иллюстрацию. Adobe настолько оборзели, что свой логотип даже вам в консоль пихают, если у вас получится открыть девтулзы на веб-версии Фотошопа.

А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX

Для тех, кто по ссылкам не ходит, сокращённая версия:

console.info(
  "%c %cAdobe %cPhotoshop Web%c  %c2023.20.0.0%c  %c1bba617e276",
  "padding-left: 36px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAPw==');"
)

Как можно догадаться, %c это спецификатор, указывающий, что сюда надо подставить CSS, переданный соответствующим аргументом.

Полный список спецификаторов есть на MDN.

Красота спасёт мир, котаны!

#console #js #sprintf #бородач