It is soon Christmas, and you might get new shiny gadgets under your Christmas tree. Now it is important to install these new shiny gadgets securely.

Under your Christmas tree, you can find a new router, gaming console, smart lights or even a new smart fridge. These are all devices that can pose as a threat against your network security.

Entrance to the kingdom

First of all, the router. Either if you get a new router or you already have one, you should make sure it is secure. Most routers have a web interface, and if you are not familiar with it, you should consult your user manual to find it. The router will prompt you for a username and password, and if your username and password is the default username and password from the user manual, this is the first thing you should change.

When you are logged in, you should go to the firmware section, and look for updates. As we wrote about yesterday, it is important to update your software and dependencies when vulnerabilities are known, and the router is no exception.

Now you have an updated router, and the next to check is that the external web interface is turned off. This web interface should never be permanently open to the public. Vulnerabilities have been found in routers which can bypass the login page, and if such an vulnerability is found in your router, it will not impact you directly if your web interface is only available inside the network.

At last, Gibson Research Corporation have created a site called ShieldsUP!, where you can scan your network from the outside. This site can check for exposed ports, and especially if UPnP is exposed. As you may know, UPnP is used to automatically open ports if a device inside the network need it, but some routers have an vulnerability where the protocol can be initiated from the internet. This can open your network for attacks, and it is a wildly known vulnerability that attackers scan for.

Vulnerable gadgets

It is very possible that one of the presents under your Christmas tree is an internet connected gadget. Likely wrapped in beautiful paper, like a trojan horse(!)

New internet connected gadgets are introduced all the time, and the security in these devices are not always that good. In addition, not all devices have automatic updates, which can be a liability after a while.

One vulnerable device in your network can be enough to compromise everything. This is why some people put devices they do not trust in a separate network. If your router supports multiple networks, or you have a spare router, you should think about installing your new shiny internet connected light bulbs in another network than the computer where you log in to your bank.

It may sound like tin foil hat mentality, but as the world of internet connected devices have evolved, we need to take our precautions. If you do not separate your networks, you should be very careful and think about what you invite into your home.

You may give the keys to your internet connected door lock, to a trojan internet connected teddy bear!

Secure your local network

Most React apps use JSX - but how can you set up a JSX environment yourself?

JSX is a syntax extension to JavaScript, that's a funny blend between JavaScript and a templating language. It's what most developers use to create React apps, and if you're on day 23 of this React calendar, I'm pretty sure you've at least seen it before.

JSX isn't a part of JavaScript, though, so how can we make it compile in our browsers? This article will show you five ways to get there.

1: Fuck JSX 🖕

The first way to use JSX is to... not use it at all. You don't need JSX, and JSX doesn't need you. All JSX is, is syntactical sugar for React.createElement! In other words, this code snippet:

is compiled down to this:

(don't believe me? Check out and play with the REPL!)

You can write and ship this right away - no compilation needed. You can read more about this approach in the documentation!

2: Do it live! 🚢

If you're in a hurry, doing a workshop or for whatever reason don't have time to deal with setting up a build step for your app, there's actually a runtime build of Babel you can use if you want. You can add it by adding this line to your HTML:

Next, you'll have to write your script tags like this:

You can read more about this approach in the documentation too! (Pro-tip: Even if you're an experienced React developer, read the docs from top to bottom. They're really great!)

3: Use webpack! 👾

When you're done experimenting, you typically want something a bit more efficient than runtime compilation. That's why we end up using build tools like webpack.

webpack lets you use babel - a JavaScript transpilation tool - to turn your JSX into runnable JavaScript again. You can add it by adding the following to your webpack.config.js file:

Then you need to add a file called babel.config.js with the following as well:

There are great tutorials out there that details this process, if you're looking for that. Here's one!

4: Use parcel 📦

parcel is an alternative to webpack that comes with a lot more built in, and a lot less to set up. As a matter of fact, you don't have to set up anything at all! Just install parcel, run it, and ship your compiled code!

5: How about create-react-app? 🍿

If you can't be bothered to set up and maintain your own build pipeline, you shouldn't. Facebook has created its own boilerplate generator, create-react-app, that sets everything up for you.

You can read more about create-react-app on its website, or in last year's article on it!

5: Use HTM! ⛄️

If the entire concept of transpiling your code is putting you off - or if you're just about that next level shit, code miracle worker Jason Miller has got your back. He's built a 700 byte (!) framework that basically implements JSX inside template strings. It looks like this:

If you're about that build step life, you can even compile the entire library away! Now, that's pretty neat.

Have a merry JSXmas! 🎅

So now you know a ton of ways to use JSX. If you want, you can even use JSX to do completely ridiculous things!

I hope you've learned something, and that you use the correct approach for your next encounter with this beautiful syntax extension. Thanks for reading!

Do you even JSX bro?

All I want for Christmas is the great JavaScript sword 🎅

Christmas Eve is arriving any minute now. In Norway, this means wrapping the last presents, decorating the Christmas tree, watching all the Home Alone movies and eat loads of gingerbreads. In other words, this particular Sunday may be hectic, so make sure to take some time off with your favourite V60 coffee kit.

And if you do take this well deserved break after a year of coding, I have a great game to help you relax (of course packed with recreational coding exercises in JavaScript): WarriorJS. From their site:

"Legend tells of a legendary sword, forgotten in the ruins of an abandoned tower. Thousands of warriors have set off on a quest for the sword, whose bearer would become enlightened in the JavaScript language."



No matter if you are new to programming or a JavaScript guru, WarriorJS will put your skills to the test. Will you be the one to find The JavaScript Sword?

I sure know what I'll be doing on my time off this Christmas! Until recently, I had never been into text adventure games. However, a month ago, a student at the University of Oslo (thanks Jarle!) introduced me to this amazing JavaScript game.

The general idea is that you need to code your way through the world, fighting monsters and healing yourself to stay alive in an algorithmic fashion. All this in order to find the great, great JavaScript Sword. Let us know if you reach the leaderboard!

Remember, the best games you can play are JavaScript games.

Happy coding!

23-Dec

Today's posts

Secure your local network

Do you even JSX bro?

Last Sunday of Advent