Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
* © 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
@IAmJulianAcosta

This comment has been minimized.

Copy link
Owner Author

commented Feb 5, 2016

Preview:

browser-in-logo

@iamjaime

This comment has been minimized.

Copy link

commented Feb 24, 2018

no funciona.....tira un error de json

@kinduff

This comment has been minimized.

Copy link

commented Mar 4, 2018

@iamjaime en la linea 39 dice que tienes que reemplazar por tu propio JSON

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.