explore

Setting up your environment

Hi new applicant, welcome to the tryout module of HackYourFuture! Here we will explain how to set up all the tools that you will need for this module as well as the main curriculum should you get accepted.

Agenda

We’ll discuss the following points:

• How do I communicate with everybody? Use communication tool Slack
• Where do I write my code? Inside a code editor called Visual Studio Code

How do I communicate with everybody? Use Slack

Slack is an application that allows us to communicate with others through (video) chat and is really easy to use. It’s used in a lot of tech companies so in order for you to get familiar we’re going to use it as well! You will get an invitation to our Slack workspace as a guest as soon as this module officially starts so you have access to the help channel to ask questions if you need it. Of course you are free to already start this module on your own before then.

Please download the app for on your computer:

• macOS
• Windows
• Linux

And if you really can’t go without your phone, you can also get it for mobile:

• App store
• Google Play

When it’s all installed it’s time to get into it! First try out the demo:

• Slack Demo

Important things to note is to:

• Make use of threads to isolate discussions. You can do this by hovering over the message you want to reply to and clicking on reply in thread.
• When pasting your code, format it to make it easier to read by using the ` your code ` syntax. Note that this is the backtick key, not the single quote key.
• You will have access to our slack for a limited time while you go through the module

Done? This is optional, but for those who are curious:

• Cheat sheet for basics and shortcuts
• How to format your messages in Slack

Where do I write my code? That depends…

In the end we will all write code in Visual Studio Code, but as a beginner it can be a bit intimidating so there are many alternatives you can use for this module. In the end it is up to you to decide which way you find most comfortable.

For beginners!

Codepen

CodePen is an online code editor and development environment that allows you to write and experiment with HTML, CSS, and JavaScript. It provides a live preview of the code as you type so it is great for playing around with some code when building a website.

JSTutor

JSTutor is an online code editor that also can visualise the execution of the code which will help when initially learning JavaScript. So whenever you are doing pure JavaScript work we suggest using this website.

For if you already know some things

Visual Studio Code

Technically speaking, you can write code for the web in any application that allows you to write and save plain text files (such as Notepad or TextEdit). However a code editor is a tool specifically designed for editing code. Depending on the programming language, the code editor highlights special keywords, gives suggestions to some extent, adds automatic indentation and sometimes has an integrated command line interface (more on that in the next section) as well.

While your code editor does the basic job of allowing you to write code, it can always be improved to make our lives as developers easier. In this video you’ll get a great introduction on all the features. His code is python, so don’t worry about understanding the code, it is about how to navigate the visual studio code environment.

Currently, Visual Studio Code is one of the top code editors on the market. As such, we have chosen it has our default code editor to use. Click the following link to download it:

• Visual Studio Code

Improving our code editor

We can always improve what we have, including our code editor! We can add extensions to make our programming life much easier. The most important extension to have is Prettier as it formats your code automatically to the way that pretty much every professional developer formats their code. This is the first part of clean code that is extremely important but not very exciting so we will keep reminding you throughout the curriculum ;).

It is best to have Prettier set up that it formats your code whenever you save a file so that you don’t have to remember to do this. Follow this article to get that set up.

For more specific information on how to setup your editor:

• VSCode Tips

Finished?

Are you finished with setting up? Nice job!!! If you feel ready to start with your journey into web development, click here.