Fun with Console object

#javascript #console #devtool

The Console object provides access to the browser's debugging console (e.g., the Web Console in Firefox). The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.
Console - Web API at MDN

Below is a list of some features that you might not know about the Console object:

1.Clear the console

Use console.clear() to simply clear your output.

2.Styling output

You can use "%c" directive to apply css style for the ouput

   console.log('%c Make console greate again!', 'font-size:50px; background:red;')

3.Display tabular data

Use console.table(object) to display the provided object as a table.

Let's try:

persons = [ { name: 'Hien Vuong', city: 'Ho Chi Minh' }, { name: 'Donald Trump', city: 'New York' }]

console.table(persons)

4.Grouping together

Use console.group(message) and console.groupEnd() to group all logs to a dropdown list.

Let's try with the above persons object

persons.forEach(p => {
    console.group(); 
    console.log(`This is ${p.name}`);
    console.log(`He comes from ${p.city}`);
    console.groupEnd();
});

Happy Coding!

Originally posted on my blog here

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.