Orientation Day

Welcome to Natan Coding School 😎

SO…

The topics we’ll cover will generally fall into 2 categories:

1. Stuff you need to get in a company
2. Stuff you need to do your job in that company

Dedicated 20% of your time for the first category and 80% for the second.

Recommended Languages

• JavaScript

  Learn this first if you wanna do frontend/fullstack. If a company wants anything web-based, they have to use JS.

• TypeScript

  JavaScript is full of flaws, but this language makes up for it. Learn this alongside JavaScript.

• Bash

  a.k.a “Learn how to use the terminal”.

• Python

  I use this + bash to automate a lot of things. A lot of companies are also using this as their backend. (Google, Meta, Spotify, Dropbox)

• Go

  If you wanna go do backend or if your server needs to scale to 10k daily users, learn this. Very popular and might be even more popular with Web Assembly. (Twitch, Netflix, Uber, Discord, Gojek)

• Rust

  Gaining popularity. Super fast + super secured. Used in Web3 stuff and also Web Assembly. A bit confusing to learn if you’re a beginner, but super future-proof. (Netflix, Meta, Discord, Figma)

Recommended Front-end Frameworks

• React

  This is my favourite and most companies (not Google) are using this, which means that you’ll have an easier time looking for jobs, but also means that you’ll have way stronger competitions. Some companies using React: Meta, Twitch, MejaKita, Netflix, HereToShare, Amazon, Twitter.

• Vue

  People say if React is not the most popular, Vue will probably the most popular. I had a quite pleasant time using this at work 2 years ago. Some companies using Vue: Adobe, Apple, Xiaomi, 9GAG, Nintendo.

• Svelte

  Rising in popularity and was voted most loved framework in 2022. Some companies using Svelte: Spotify, Stack Overflow, Chess.com, The New York Times.

• Solid

  New framework. Came out in 2021. A lot of potential.

Recommended Rendering Frameworks

These are built on top of front-end frameworks. You’ll probably be using one of these instead of plain front-end frameworks if you’re building interactive apps.

• Next (React)

  I’ve been using this for around 3 years and is my favourite for sure. The team behind Next is probably one of the few teams who advocate the use of bleeding edge, so you’ll see really cool (and fast) patches/updates to Next. Some companies using this: Twitch, Github, Netflix, Hulu, HereToShare, Airbnb, Uber, Notion.

• Remix (React)

  This one has a cool data-loading pattern which is a bit different than Next. Not as popular as Next, but it’s getting there. Recently acquired by Shopify. So if you want a job there, learn this???

• Nuxt (Vue)

  Vue’s version of Next. A bit behind on features compared to Next, but still really damn good. Companies using Nuxt: TikTok, Ecosia, NASA, Stack Overflow

• Astro

  This one is another favourite of mine. If you want to build static sites (blogs, portfolio, etc) Astro is perfect. Astro allows you to “bring your own front-end framework”. You can use React, Vue, Svelte, or just plain JS. This website is built using Astro (fun fact wow).

• SvelteKit (Svelte)

  Svelte’s thingy.

Tools

• Git + Github/Gitlab/Bitbucket

  Learn git. You can’t go without it once you learn to use it. Then host these projects on github/gitlab/bitbucket. Also, learn common collaboration workflows.

• Your terminal of choice

  Most of the tools you’re gonna use later works way better in the terminal. You’re gonna be constantly interacting with it, so if you can survive with just your browser + terminal, you’re golden.

• Editor

  • VSCode

    The most popular and most supported editor out there. A shit ton of great plugins to make you productive, and super customizable in general.

  • Neovim

    Terminal-based editor. If you’re gonna be renting servers from AWS, GCP, Digital Ocean, or whatever provider, a terminal-based is gonna come SUPER HANDY. This is what I use and what I’m most familiar with. I don’t recommend it if you’re still getting your feet wet, but I highly recommend this as you become more familiar with code. After switching to Neovim from VSCode, I code way faster.

  • Microsoft Word

    Ye.

Operating System

If you’re using Windows to code, you’re basically setting the difficulty to HARD. It should be fine to start with, but anything code-related will just work in Linux or Mac. If you’re currenly using Windows and are not using any Adobe products or you just don’t game much, switching to Linux will make you have an easier time running your programs. You can even start off using Linux in a virtual machine so you don’t have to leave Windows. And Mac is great if you can afford it. Most companies will give you a Mac when you join (even Microsoft).

Recommended paths and how to get good fast

Path

JavaScript + TypeScript → Git → HTML + CSS → React.js → Vercel/Netlify → Express.js → PostgreSQL → Digital Ocean/Vultr/AWS/GCP/some host → Next.js → Get fullstack job.

OR if you want to super-scale, learn Go instead of Express.js, and if Go is not enough, learn Rust.

Get good fast

You need to get good at translating logic to code. Do practice problems every day for a month and you’ll be great at it. Then, learn to build stuff with it. It should take 1 month to get good at frontend and another month to get good at backend. In total, you can probably build apps all by yourself if you go at it for 3 months straight. The hardest part in all this is starting, and the 2nd hardest part is maintaining the momentum once you started.

Please note when I say “1 month”, I mean 30 consecutive days. It will not count if you do something like: 5 day streak → 5 day break → 4 days streak → 2 weeks break → 7 day streak → 3 days break. You should take breaks, but it should probably be a 2-day break max.

It’s actually fine if you do a lot of breaks, but it will take a lot longer to get good. The people at the top who codes every day will have days where they don’t feel like doing anything, but they still do. You need a little bit of motivation, but more importantly, you need discipline.

Your roadmap should look something like this:

1. Start off in JavaScript and be decent at it. Once you understand functions, arrays, sets, objects, and maps; learn TypeScript by changing your JavaScript files to end in .ts instead of .js and try to make all the red lines disappear. If you use a good editor, it should tell you exactly how you should get rid of those lines. (2 weeks)

2. Once you’re comfortable in JavaScript, learn HTML and CSS. It should be quite a bit easier than JavaScript. Learn flexbox and grid for layouts, and learn common element attributes like padding, margin, position, etc. Once you kinda get it, practice by copying simple websites. Make sure it’s an exact match. Copy 1-2 websites a day for a week, and then you’ll be comfortable. (1 week)

3. Learn a JavaScript frontend framework (like React, Vue, Svelte, or Solid) to make your website interactive. Learn how to fetch data from an API. Copy more complicated websites. By copying complicated website, you’re forced to learn some technique you didn’t have to use when copying simple ones. (1 month)

4. Learn to make your own API. Learn to integrate a database to “save”/persist data and then integrating this API with your frontend. (1 month)

5. Build and ship every day. Iterate over your app. What can you improve? What is something that you know now that can be useful last month? If your app is done, think of something else. What problems do I face daily that I can make an app for? Do any of my friends have problems they face daily that I can make an app for?

You might have a lot of ideas for projects, but try your best to finish them one by one. 2 complete projects is better than 12 nearly complete projects. You should also make sure that you set good goals. Avoid goals that have a vague line between complete and incomplete (e.g “be a good engineer”, “learn react”), and make goals that have deliverables (e.g “get a job at netflix”, “build a todo app in react”).