Let’s take a quick look at what it takes to introduce typescript to your react-webpack applications and how you can get started.

If you use create-react-app

If you’re using create react app, Facebook has made it very simple to introduce typescript:

Rename the files you want to be able to use typescript in from src/foo.jsx to src/foo.tsx and restart your development server.

create-react-app will generate a tsconfig.json that you can modify to your liking as you get more experienced with Typescript. Type errors will be displayed in your console once your project has built, and it’s time to get to work!

If you manage your own webpack config

If you’re managing webpack yourself there’s a bit more work to do. First we install the essentials:

Now go into your webpack config file and add the following loaders for your .tsx files:

Remember to resolve your ts and tsx files:

It’s time to create a tsconfig.json file to your liking and start converting files again. If you want to convert everything at once your can run the following command from your terminal:

Modifying your tsconfig

Your tsconfig is an essential part of writing typescript as it modifies how strict the Typescript compiler is when compiling your code. To begin with it’s usually pretty sweet to have a tolerant compiler that lets you use the any type and allows you to have implicit values in your code, something like this should do the trick:

Remember to point the include section on all the entry points to your code.

Once you’re getting comfortable with typescript and have converted a larger part of your code it’s often beneficial to make your tsconfig stricter to ensure new code is written according to the standards you want. Some useful options that lead to strict validation are:

A full list of compiler options can be found here: https://www.typescriptlang.org/docs/handbook/compiler-options.html

And there we go! You should now be able to introduce typescript to your js-react application and gradually convert your code and adapt your config to fit your needs.

Introducing Typescript to your React / Webpack apps

Having unique passwords for every site and service presents us with the problem of remembering, or rather, storing our passwords in a safe but practical matter. How do we cope with hundreds of passwords?

We know that we should use strong, unique passwords for every site. How we construct a great password is a problem in it self, but when we have these passwords, how do we store them? How can we keep them safe, while at the same time have them available at short notice when we need to authenticate to a service?

The bad ways

There are some ways you should never store your passwords. You might read this and think it is self-explanatory, but it is far too common to find passwords stored like this.

Written on a post-it attached under the keyboard at work

PIN code for a bank card written on the card

Generally, having your password physically attached to the thing it unlocks is a bad idea, especially if access to the object is not totally under your control, or the consequence of losing it is great.

The better ways

So, after ripping the post-it from under your keyboard, what do you do? Well, a surprisingly low cost and easy solution is to just keep your passwords in a notebook. But wait, that sounds just as bad as having them under the keyboard, and worse, you just put all your eggs in one basket! Yeah, it is not a solution for everyone, but it has its merits. For your average not too tech-savvy friends or family members, the internet may be something that is used rarely, and mostly at home. Keeping your passwords written down at home is much more secure than reusing passwords. With strong passwords, any breach at a site you use can't hurt you. The only attack vector you need to secure against is someone breaking in and stealing your password book. A much simpler task!

The best way

But for most of us (and especially you who use your free time reading a security blog), password storage needs to be portable. Having a single hard copy of your passwords and carrying it around poses a greater risk, and is extremely impractical. What if you forget the book at home one day? Or worse, leave it at your favorite craft beer place? No, you need a password manager. This is a program that stores all your passwords securely, that can be backed up, and that can be synchronised across devices.

This is a step many security-minded people are hesitant to take. Moving your passwords into a cloud storage service seems like a bad idea. Well, it might be, but you should consider the alternative. Having weak passwords on all your accounts make them easy targets when account details leak, or sites are attacked. This happens all the time. Placing all your (encrypted) passwords in a cloud service like 1Password or Lastpass is like putting all your eggs in one basket, but they are guarded by people with a singular mission: Protecting eggs (well, passwords really, but you get the picture). If you need more convincing that this is a good idea, read the attached blog post from Troy Hunt.

All in all

Remembering unique passwords is an impossible task, so you need help. If you mainly use your computer at home, go with a little book to keep in your drawer. If you are a bit more active on the internet, the best gift you will get yourself this year is a password manager!

Secure password storage - for users

It’s Sunday and the perfect time to waste a few hours at another JavaScript game!

Elevators are exciting* and that is why Elevator Saga: The elevator programming game has the potential of consuming your entire afternoon. You play the game by creating an algorithm in JavaScript controlling elevators. The algorithm should transport people as efficiently as possible to beat challenges of increasing difficulty. You can easily get through the first few challenges with dumb solutions. However, beating all levels requires you to really bring out the big brains.

*Check out the The Hidden Science of Elevators from Popular Mechanics and I’ll guarantee that you'll agree with me.

16-Dec

Today's posts

Introducing Typescript to your React / Webpack apps

Secure password storage - for users

Up and down with JavaScript

Sign up for our newsletter

Join in the holiday cheer and count down to Christmas with us!