Skip to content

Instantly share code, notes, and snippets.

@IAmJulianAcosta
Last active June 4, 2024 16:12
Show Gist options
  • Save IAmJulianAcosta/fb1813926c2fa3adefc0 to your computer and use it in GitHub Desktop.
Save IAmJulianAcosta/fb1813926c2fa3adefc0 to your computer and use it in GitHub Desktop.
/*
* © 2016 - Julián Acosta
* License: CC BY-SA 4.0 (http://creativecommons.org/licenses/by-sa/4.0/)
*
* Print your own logo in developer tools!
*
* Step 1: Convert your logo to ASCII text here: http://picascii.com (I used color output)
* Note: Is possible that you'll have to resize your photo in order to retain aspect ratio
* Step 2: Remove the <pre></pre> tag that is surrounding the generated code, replace with "[" and "]"
* Step 3: Run the following regexes (*DON'T ALTER THE ORDER*) in order to convert to JSON (Works in PHPStorm and Sublime Text 2):
* 3a: Find: '<\/span>' (without quotes)
* Replace: '<\/span>\n'
* 3b: Find: '<span style=\"(.*?)\"[^>]*>(.*?)<\/span>' (without quotes)
* Replace: '{ \"text\": \"$2\", \"style\": \"$1\ background-color: #FFF\"},'
* 3c: Find: '<span style=\"(.*?)\"[^>]*>(.*?)\n<\/span>\n' (without quotes)
* Replace: '{ \"text\": \"$2\\n\", \"style\": \"$1\ background-color: #FFF\"},' //(Note the escaped backslash)
* 3d: Replace last comma before closing \
* Note: background-color is used in firefox (background in console is light-gray)
* Step 4: Save your JSON file
*
* Voila!
*
* W̶A̶R̶N̶I̶N̶G̶:̶ ̶V̶e̶r̶y̶ ̶b̶i̶g̶ ̶i̶m̶a̶g̶e̶s̶ ̶w̶i̶l̶l̶ ̶s̶l̶o̶w̶ ̶d̶o̶w̶n̶ ̶y̶o̶u̶r̶ ̶s̶i̶t̶e̶,̶ ̶b̶e̶c̶a̶u̶s̶e̶̶c̶o̶n̶s̶o̶l̶e̶ ̶i̶s̶ ̶n̶o̶t̶ ̶o̶p̶t̶i̶m̶i̶z̶e̶d̶ ̶t̶o̶ ̶d̶o̶ ̶t̶h̶i̶s̶,̶
* s̶o̶ ̶t̶a̶k̶e̶ ̶t̶h̶i̶s̶ ̶i̶n̶ ̶m̶i̶n̶d̶ ̶w̶h̶e̶n̶ ̶y̶o̶u̶ ̶a̶r̶e̶ ̶u̶s̶i̶n̶g̶ ̶t̶h̶i̶s̶ ̶i̶n̶ ̶p̶r̶o̶d̶u̶c̶t̶i̶o̶n̶. It seems fixed by using JSON instead of
* hardcoding parameters in JS file.
*
*/
//Params that will be passed to console.log function
var params = [];
//String that will contain all the logo characters
var message = "";
//Request to our JSON file
var request = new XMLHttpRequest ();
request.overrideMimeType ("application/json");
request.open ('GET', 'http://example.com/converted-image.json', true); //Replace with URL to your JSON file
//Executed when request was made
request.onreadystatechange = function onJSONFileRead () {
//If request is sucessful
if (request.readyState == 4 && request.status == "200") {
//Parsing JSON file
var json = JSON.parse (request.responseText);
//Adding JSON entries to params array
for (var i = 0; i < json.length; i++) {
message += '%c' + json [i].text;
params.push (json [i].style);
}
//Adding string to first position of array
params.unshift (message);
//Using apply to pass params as array
console.log.apply (console, params);
//Some other nice things
console.log ("%cMade with %clove %cfrom 🇨🇴 by %cMandarinazul🍊 %c(specially this project)",
"background-color: #FFFFFF; color: #f7860b",
"background-color: #FFFFFF; color: #f40c65",
"background-color: #FFFFFF; color: #f7860b",
"background-color: #FFFFFF; color: #008ce2",
"background-color: #FFFFFF; color: #999");
console.log ("%c🌍Visit us! %chttps://mandarinazul.co🌍",
"background-color: #FFFFFF; color: #000",
"background-color: #FFFFFF; color: #008ce2");
}
};
request.send ();
//More console tricks: https://konklone.com/post/how-to-hack-the-developer-console-to-be-needlessly-interactive
@NinjaZMY
Copy link

NinjaZMY commented Jun 4, 2024

more context please, this is very much uncomplete

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment