GET CREATIVE AND STYLISH
Step Up Your Console Logs With These Tricks
All of you web developers out there. This one is for you.
It’s time to show your console.log() skills! Now, wait, I know what you're saying. Console? That’s for debugging. And your right. It is for debugging. That’s where the picture above comes in. Think outside the box. It can be used for different things as well.
1. ‘We’re hiring’ messages
Go ahead and use dev tools to see the console of this website — Medium. What do you see there? Logo, and we’re hiring message:
BBC News did it as well:
SoundCloud did a nice simple message:
2. To warn users about something
Like Facebook did, warning users if someone has told them to copy-paste something in the console, they could be hacked.
Google has one also:
3. Games
Everyone loves games. And if you're a good developer, you can build a game inside the console. Just like Google did:
If you want to know how to start playing it, here’s how:
- Go to the Google website.
- Search for: text adventure.
- Right-click the website and hit inspect.
- Click on the console tab.
- Type yes.
- Enjoy :).
4. Easter-eggs
Many websites have easter-eggs hidden in their console, whether it be a joke, phrase of the day, or a riddle.
Take a look at the TNW website:
Be a secret agent
Yep, you heard me! Intelligence agencies have been known for hiding Easter eggs and riddles on their website and console to recruit people. The Mossad and Shabak (Israel) did it. I’m sure other agencies did it as well.
Developer’s portfolios
No need to explain the why. It’s the same with npm packages. Some packages show a “hire me“ message for the developer that built them.
So, how do you style your console?
Well, I’m glad you asked. It’s time for some styling code :)
%C — it lets you style how the text appears in the console with CSS.
See how we use it in the code block below:
This code will give you this result:
Conclusion
Enjoy, and get creative!
