Будни разработчика
14.6K subscribers
1.18K photos
338 videos
7 files
2.02K links
Блог Lead JS-разработчика из Хельсинки
Автор: @bekharsky

По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://yangx.top/it_adv

Чат: https://yangx.top/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
加入频道
#заметка дня
#chrome #devtools #console

Чтобы скопировать вывод консоли, например, ответ сервера – не нужно делать JSON.stringify(response) перед выводом в лог.

Достаточно кликнуть правой кнопкой мыши по данным, и выбрать “Store as global variable”. В ответ получим название временной переменной (temp1, temp2 и так далее).

Дальше просто пишем в консоль copy(temp1) и бам – данные попадают в буфер обмена, откуда уже их можно вставить в свои моки.
#фишка дня

Если вам знаком не только JavaScript, а ещё один из языков C-семейства (привет, родной универ), то наверняка вы использовали библиотечную функцию printf:

printf (“It’s %d %s", 10, "here!");

Занимается она тем, что выводит форматирует передаваемые ей аргументы согласно заданному правилу. Нужно вывести целое десятичное число? Указываете %d. Строку? %s. На простом языке – это плейсхолдеры.

Так вот, наша любимая консоль тоже поддерживает подобные спецификаторы формата!

%s - строка
%i or %d - целое число (будет преобразовано)
%f - число с плавающей запятой
%o - выводит элемент DOM
%O - выводит JS-объект


И вишенка на торте: %c позволяет передать CSS выводимому тексту! В формате инлайн-стилей.

#printf #console #js
#библиотека дня

Вам надо выводить картинки в консоль браузера? Вот и мне нет.

Вру, были пара моментов, когда прям хотелось бы. Например, секвентальная загрузка для прелоадеров. Ещё и холст отлаживать было бы удобно... Ну давайте к делу.

Короче, все (надеюсь) знают, что логи в консоли можно не только форматировать ключами, но и стилизовать: console.log("%c[message]", [style rules]). Так вот, background-image тоже можно...

Вот и весь секрет этой библиотеки: https://github.com/adriancooney/console.image

Правда, автор не остановился и сделал генератор мемов заодно, console.meme :)

#devtools #console #img
🔥11👍4
#фишка дня

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

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

Прямо как 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
👍10
#инструмент дня

Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!

Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.

Большинство повторяет заученные когда-то команды и сочетания

sudo rm -rf /*, например

Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/

И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂

#console #shell #bash
👍137
#фишка дня

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

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

Прямо как 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 #бородач
👍154
#инструмент дня

Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!

Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.

Большинство повторяет заученные когда-то команды и сочетания

sudo rm -rf /*, например

Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/

И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂

#console #shell #bash #бородач
11
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня

Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?

И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.

И решение на самом деле очевидно! Засирать консоль браузера!

Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!

А секрет прост: консоль браузера поддерживает 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")`
);


Вы любите простыню кода в сообщениях, я знаю :)

Статья на тему: https://frontendmasters.com/blog/console-delight/

Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV

Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)

Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/

#css #svg #devtools #console #fun
19👍3
Media is too big
VIEW IN TELEGRAM
Когда в последний раз вы трогали свои сиксели?

Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.

Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.

📌 Что это такое?

Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.

Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.

Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!

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

👉 Самый простой способ — lsix, это ls, но для миниатюр:

brew install lsix # macOS
sudo apt install lsix # Debian/Ubuntu Linux


А дальше просто запускаем:

lsix

и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.

🔄 Конвертация изображений

Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:

brew install libsixel
img2sixel myimage.png


А если у вас установлен ImageMagick, можно делать так:

convert myimage.png sixel:- #

Конвертирует и сразу выводит в терминал.

Если уже есть картинка в формате sixel, можно вывести её простым cat.

Поддержка в эмуляторах терминала

Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/

Сразу скажу, что стандартный терминал в macOS — не умеет.

Очевидно, формат прекрасно подходит для разгого рода диаграмм и дашбордов.

В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄

#console #images
👍123
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня

Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?

И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.

И решение на самом деле очевидно! Засирать консоль браузера!

Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!

А секрет прост: консоль браузера поддерживает 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")`
);


Вы любите простыню кода в сообщениях, я знаю :)

Статья на тему: https://frontendmasters.com/blog/console-delight/

Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV

Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)

Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/

#css #svg #devtools #console #fun #бородач
👍185🤩2
Media is too big
VIEW IN TELEGRAM
Когда в последний раз вы трогали свои сиксели?

Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.

Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.

📌 Что это такое?

Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.

Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.

Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!

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

👉 Самый простой способ — lsix, это ls, но для миниатюр:

brew install lsix # macOS
sudo apt install lsix # Debian/Ubuntu Linux


А дальше просто запускаем:

lsix

и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.

🔄 Конвертация изображений

Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:

brew install libsixel
img2sixel myimage.png


А если у вас установлен ImageMagick, можно делать так:

convert myimage.png sixel:- #

Конвертирует и сразу выводит в терминал.

Если уже есть картинка в формате sixel, можно вывести её простым cat.

Поддержка в эмуляторах терминала

Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/

Сразу скажу, что стандартный терминал в macOS — не умеет.

Очевидно, формат прекрасно подходит для разгого рода диаграмм и дашбордов.

В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄

#console #images #бородач
1👍124🤩1