Why is Console.log everybody's favourite?

Do you remember that time when you wrote that piece of flawless code, which just ran perfectly and had no weird behaviour? Me neither. The truth is: stuff breaks. All the time. So it would be incredibly helpful if we could have some way of outputting stuff as it runs. Wait … we have? Sweet!

What does the console say?

You probably already know about our trusty little helper console and his friend log. Want to print something to the console? Throw a console.log in there! Easy peasy.

But did you know that console is a really popular guy and has lots of other friends? They're tired of log getting all the attention, so let's get to know them too!

Warnings and errors

warn and error are log's cousins. They're both similar to log, but have their own personalities and a bit more flare. warn is fond of yellow and also puts a warning icon next to what you want to output. Pretty neat if you want something to stand out, like a warning!

error is even more dramatic, preferring to output messages like errors, in classic oh-no-red and with a handy stack trace from where it was called. Jam it inside an if-clause to make sure those naughty variables aren't undefined, or contain any values they shouldn't.

Assertions

If you like that scary red color, you could also ask assert to help. assert is rogue vigilante who roots out falsehoods wherever it finds them. If you give it a boolean expression, it'll let you know straight away if it evaluates to false, by kicking it in the shins and outputting the supersecret message you agreed on.

Counting

Another quirky comrade is count. count is like an obsessive version of log. It'll output what you give it, but it always keeps track of how many times that particular output has been printed. Also, because it's kind of a show off, it will tell you what that number is. Every. Darn. Time.

Tables

Do you like magic? Of course you do. Who doesn't? table is a bit of a magician. You give it some data and it'll transmogrify that data straight into a table, all McGonagall style. It doesn't even care if the data is an array or an object – it does both! This bad boy can fit so much data in it.

Groups

With all these console possibilities, it might get a bit hard to follow, right? Wrong! The grouping gang has your back. Just put anything in between group and groupEnd, and they'll make sure any console output in there gets grouped together. Are you a bit of a minimalist? Use groupCollapsed instead of group and you won't believe what happens next: the group output is collapsed by default!

Timing

The last of console's buddies we'll meet today is time and timeEnd. They're a couple of speed freaks and love to check how fast your code is. Put time in front, to bellow “START”, and timeEnd at the end, to yell “STOP”. Then they'll work out how good you did, and present your time in tiny milliseconds. What a time to be alive.

… and those who must not be named

Now you know the gang! … Well, not all of them. Some are a bit shy, but if you head over to their home I'm sure they'll introduce themselves.

Bonus round!

Do you want your console to look a bit extra? Hit a string up with a %c and pass some CSS to make your output look all kinds of fancy!

Merry middle of December y'all!

Console Candy

Prop drilling can be a good thing, and it can be a bad thing. Thankfully, there are better ways to do it with the Context API.

In React, data is passed from parent to child with the help of props. This works fine most of the time. However, it can be cumbersome in certain situations where props are required by many components within an application. Svein Petter spends most of his days working for an international company that supports multiple languages. Various translations are required through the application in many different components.

Context provides a way to easily share values, like translations, between components without explicitly passing props from parent to child. This is useful for values that are considered global such as themes, translations or data about an authenticated user.

In this article, we will show you three different ways to use the context API and display your favourite reindeer.

React.createContext

This method is used to create the context. It returns an object that contains a Provider and a Consumer. When React renders a component that consumes this context the value is read from the nearest matching Provider above in the component tree.

It is possible, and often desirable, to have multiple contexts in your React application.

Context.Provider

Above we mentioned that the object returned from React.createContext() contains a Provider. The Provider is the source of truth and allows consuming components to read the context value and subscribe to changes. It accepts a value prop that is used to specify the value of the Provider.

When the value of the Provider changes, all the descendant consuming components will re-render. Hence, the descendant consumers are updated even when an ancestor decide not to re-render.

Context.Consumer

The context object also contains a Consumer. The Consumer is a component that lets you subscribe to context changes. As you can see below it requires a function as its child, and the context value can be retrieved by utilizing the render prop pattern. The context value is given as an argument to this function (the child component) and is equal to the value prop of the nearest matching Provider component.

this.context

If you're using a class component and only need values from a single context, you can assign the contextType class property to your class. This allows you to read the value from this.context and you don't need to write RandomContext.Consumer in your render method.

HOCs to the rescue

Let's be honest. Repeatedly writing <RandomContext.Consumer>and using the render props pattern isn't much better than passing props around your application. To avoid this you can create a higher order component (HOC) that assigns the desired values from the context to your component.

Awesome! Now we can enhance our component with withReindeer, and name and speed will be available as props.

To play around with a working example of the snippets in this article, smash the button below.

Rudolph the Red-Nosed Reindeer. 🎵 🎅

Three different ways to use Context

How the browser and the webserver can join forces to protect both the user and the webserver: Enter security headers!

Security headers are HTTP response headers that deal with security related concerns. When a user visits your webpage, these headers tell the browser how to interact with the webserver. There are several HTTP response headers that can be defined as security headers. Some of the most common security headers have already been mentioned in previous articles, like Content Security Policy headers and headers related to CORS. Let's have a look at some of the other common security headers.

HTTP Strict Transport Security (HSTS)

The HSTS header tells the browser that it should never connect to the specified webpage without using HTTPS. Without this header it may be possible for an attacker to redirect the traffic to an unencrypted connection. This will allow the attacker to listen to the traffic that should have been encrypted, and the attacker may even be able to steal the user's cookies. It is highly recommended to use the HSTS header.

X-XSS-Protection

A few days ago we wrote about XSS and how to avoid this attack by escaping all special characters that could be HTML from user input. Most modern browsers also has a built in filter to make themselves less vulnerable for XSS attacks, and you can activate this XSS filter by sending the X-XSS-Protection header. The filter will sanitize the webpage or stop the webpage from being loaded if it suspects an XSS attack. However, this filter is an addition to the XSS protection and should not be relied on as an alternative to escape input and sanitize your output.

X-Frame-Options

Clickjacking is one of the classic attacks where the user thinks they are clicking on something innocent, like the Like button on Facebook, but where an attacker has placed some transparent iframe on top of this button so that the user actually clicks on that instead. The X-Frame-Options header lets you disable the possibility to load the page in an iframe, or to allow it as an iframe only in the same origin or specific URLs. Today this header is more or less replaced by CSP.

HTTP Public Key Pinning Extension (HPKP)

Public key pinning means that the first time a browser visits your webpage, you tell it through the Public-Key-Pins header which TLS certificate it should expect whenever it visits this page in the future. The idea behind this is to prevent attackers from impersonating a legitimate website if the attackers somehow can get hold of a fake certificate or if the certificate authority has been compromised. Unfortunately, pinning the certificate like this can also lock out your users if you lose your private key and have to change the certificate. And if an attacker manages to pin their certificate to your website, then you are really in trouble..! Because of the risks associated with public key pinning, and the fact that very few dare to use it, Chrome is removing the support for this header, and you should not use it anymore.

Expect-CT

As public key pinning has proved itself a less than ideal solution to the problem with fake certificates and compromised certificate authorities, a new mechanism for detecting certificate problems is about to enter the field: The Certificate Transparency Project. This projects provides a publicly available log of all valid certificates. By sending the Expect-CT header you tell the browser to check your certificate against this log.

Verifying security headers

There are a lot of headers out there, and it's easy to forget some of them. If your website is publicly available you can check your security headers by using securityheaders.com. This is a free tool created by Scott Helme, and it rates your webpage and provides helpful advice when it comes to security headers.

15-Dec

Today's posts

Console Candy

Three different ways to use Context

Security headers