We recently added a little easter egg to Basedash which shows ASCII art of our logo, and a short message with links in the browser console.
I’ve seen a few other products do something similar, including Linear and Facebook:
One thing you might notice is that both of these examples apply styling to the console messages. Linear uses a monospace font (which is necessary for ASCII art to display properly), and Facebook changes the text size and color.
Here’s how you can do the same:
First, start with a standard console.log statement:
Then, add %c to the start of your string:
Finally, add a second parameter with some CSS:
The CSS from the second parameter is applied to everything after the %c. Most CSS properties that affect text work—you can see the full list on MDN.
You can also add multiple %c tags to apply different styles to different parts of your message. Each %c tag adds its own parameter to the console.log function call, like so:
Rad!
Some other ideas to try:
Check out the full MDN docs on styling console output here.
If you want to see the full Basedash console welcome message in action, sign up here and open your developer console.
Get to know what Basedash can do and how it changes traditional internal tools.
See a full app that connects to a Postgres database and external API made from scratch.