Level Up Your Frontend Developer Portfolio using these Console APIs
Every developer wants to make their portfolio look awesome, unique, and eye-appealing to attract potential clients or employers.
We as developers are constantly learning and evolving our knowledge and skill-set. This is where a portfolio site comes in handy. A good portfolio site not only shows off your work, but also lets you provide information on what you have done, how you did it, and whom you did it for.
Recently, I came across a post mentioning the screenshot of Akshay Saini’s portfolio where he had used console log() API to log some messages as shown below.
I found it very different and immediately rushed myself to the encyclopedia for web developers, MDN Web Docs.
There I found this section about console APIs. After a thorough reading of this section, I found the %c directive which is used to apply CSS properties on the console output.
And here’s how I put all this together, if you wanna see in action go to my portfolio Deepak Kumar (dazzlerkumar.tech) and press f12.
Code for first line is as follow,
Let me explain how to apply inline CSS, text/object after the %c directive will be styled using the CSS parameter.
I’ve used an array of styles via a variable blackBackground but you can simply pass the CSS styles in a string as a parameter. For example,
While in the second log, I used an object directive ( %o ) to log my details.
The third parameter of console.log is an object { name : "Deepak Kumar", age: "21", occupation: "Frontend Developer"} .
And the third log is same as the first one with different CSS styles.
You can refer to MDN Web Docs for other console APIs such as .table() , .count() , .error() and .warn() .
If you’ve learned something new after reading this blog please give a clap and share :).
