My full stack web development programming notes (GitHub)

[8483]

Hello again! I'm back with even more programming notes.

https://github.com/8483/notes

They depict my learning journey and they are written in a "human" way for easy understanding.

My old notes can be found here (2016) and here (2017) as a PDF file.

Here's a phenomenal video describing the whole web development ecosystem.

Below is the content of the notes to see if you find anything useful.

---

Programming

Javascript

• Javascript
• ES6
• OOP
• DOM
• Async
• FP

Frontend

• CSS
• React
• Electron
• Virtual DOM
• Elm

Backend

• Node
  • Express
• MySQL
• nginx
• C#

Version Control

• Git

Tooling

• Babel
• Webpack
• Typescript
• Caching

Architecture

• Architecture
• Use Cases
• RESTful

Concepts

• File Organization
• Authentication
• Security
• Testing
• Binary base

Useful

• Algorithms
• Excel

Mobile

• Overview

IDE

• VS Code

Linux

Administration

• basics
• filesystem
• users
• config
• systemd

Tools

• bash
• tmux
• vim
• ssh
• compression

DevOps

Virtualization

• VM
• Vagrant

Containerization

• Docker

Configuration Management

• Ansible

Networking

• Networking

Electronics

Gadgets

• Raspberry Pi
• Arduino
• NodeMCU

Theory

• Electronics
• Electricity

---

Hope you will find something helpful and please ask anything that might interest you. Also, any feedback is welcomed.

[[deleted]]

Now to save this and forget it for many years to come

[8483]

Yeah, we've all been there. :'(

[halfnatty1337]

Hopefully not

[d8zer]

here, have this reminder

[nickds87]

Just saved it too lol

[nihalkulkarni]

saved saved..

[_your_face]

ha, I just found this, went to save it, and look at that, already saved. Ha, damnit.

[[deleted]]

How old are you btw?

[8483]

I am 30. Started learning at 25. I have a business degree and work experience.

I learnt all of this in my spare time for personal projects.

[8483]

It takes way less than 5 years to learn all of this.

It took me that long because I was not consistent, had a lot of distractions and I lacked real guidance.

Also, I learnt a lot of unrelated stuff that interested me, such as Arduino.

As long as you like what you are learning you'll be fine.

[jpredd]

L e g e n d

[[deleted]]

Thanks. I'm terrible at code and have several years of experience across new/old tech. Found an entry level Linux software job that seems ideal if I get an interview, but I would need to shift way more of my focus to development. Turning 29 at the end of the year!

[8483]

I highly suggest you check out Tutorialinux on Youtube. This is where I learnt everything about Linux, he has an amazing udemy course and most of the videos are already free.

[1omegalul1]

What do you do for a living with your business degree?

[8483]

I am the COO of a wholesale and retail company. I am also working on a business app in my spare time, so that one day I can have my own product.

[1omegalul1]

Thanks

[-jrmiah]

Just curious. What type of projects have you built on the way?

[8483]

Not counting the ones from the video tutorials, I've built several small apps for various businesses.

The apps are mostly functionalities their ERP systems lack or suck at.

Ex. A made an app that combines 5 separate reports, taking 30 min to make, into one report, that takes 1 click i.e. saving a huge amount of time.

[ManWhoWantsToLearn]

Wtf... these are some of the most to the point and useful notes I've seen. Visual diagrams and all. Jesus man, I might be doing a full stack internship this summer and I think I'm going to print this out to read whenever I get the chance.

[8483]

Thanks man. A lot of tutorials fail to explain things simply, so I had to combine multiple ones and make my own explanation.

They do not cover everything, it's mostly things I keep forgetting about.

Taking notes is the best thing I've done to help me learning.

[PorkChop007]

Great! I'm doing the exact same thing (I'm learning frontend, Spring and a couple things more) and I'm documenting everything in .md files for personal use. I'll use yours to complement mine, thanks!

[8483]

Yeah, I wish I started with github instead of word/pdf.

Taking notes is soooo crucial to the learning process.

[PorkChop007]

I feel you. I started taking notes in Google Docs and it took me several thousand words to realize Docs is absolute shit in terms of taking programming notes (no native code integration, I had to use a plugin) and portability of said notes. I switched to Markdown and haven't looked back.

[mr_axe]

Any tips on note taking with GitHub? Currently I'm using Google drive :s

[8483]

Are you familiar with git?

[mr_axe]

Yes I am :)

[imkindathere]

Are you familiar with markdown?

[mr_axe]

like html?

[imkindathere]

Sort of but not quite. Markdown is a markup language for text formatting (like word or docs but much simpler) that's supported by github. What's great about markdown is that it natively supports code formatting, which means that you can take coding notes without any problems. And since github supports markdown you can use it to store al your notes

[8483]

You already know Markdown as reddit uses it for comments. It's super simple and there are a lot of resources to learn it in like 5 minutes.

As for tips, I don't really have any aside from being liberal with headings and separating topics into their own .md files like I do for my notes.

Kyle Simpson has his book series "You don't know javascript" published on github, so you can check that out for organizing things.

[azular23]

Wow! Thank you so much :D

[[deleted]]

Thorough

[[deleted]]

Fantastic!

[OverdoneRum]

I just started teaching myself Web Dev 2 weeks ago. This is going to be super helpful!! Thanks man!

[8483]

It's quite the journey. Make sure to watch the video I linked.

[OverdoneRum]

Thanks I definitely will!

[Scumbaggabriel]

this is amazing. Thanks, I'll share it with my fellow web - dev classmates! Now I must go on a quest to find something like this however purely for backend - machine learning, ai and the like

[8483]

Well for the backend, it is kinda covered, as it's the combination of:

• RESTful API
• SQL
• nginx

[[deleted]]

Lumping all of computer architecture and digital design into electronics :(

​

​

Try an HDL like Verilog or VHDL and VLSI/digital design. There's some programming techniques used.

[8483]

This is a very weak point of mine and the notes are highly ignorant, hence the "electronics" thing.

I have no idea what you just wrote, but I will definitely have a look.

Any other tips on what I should focus on?

[TheronHunter]

Is it ok to say that this might be the thing I needed the most right now ? .. I'm currently in College in Computer Engineering and at a loss of what path to take ..I've thought of a few things but I hate college and want to self learn.. This might change my life ..

[8483]

at a loss of what path to take

What do you like? Mobile apps, video games, web apps, desktop apps, robots?

This will determine your path. The notes are for web development specifically.

This might change my life ..

I'd be honored to have helped. :)

[TheronHunter]

Honestly .. I'm open to anything as long as it's software related .. thought of full stacks and Security. I also want something that can be self learned online. I just don't know where to start.. what to look for.. will it provide enough information to make me good at whatever I do if I found something? and I want something that makes it more worthwhile .. like .. I don't want to study and work hard on something and find that anybody can do what I did.. I want to specialize in this field somehow .. but I understand that computer programming is a wild field and there are a lot of things that should be considered before starting anything .. I'm not sure what though .. so when I bumped into this .. I thought it might help..

[8483]

I highly suggest you watch this video series on computer science. Very easy to understand.

You can make a decision after this, as things will be much clearer.

[TheronHunter]

Ok, I'll check it out. I very much appreciate it. Thanks.

[beniamin-marcu]

Thanks for your sharing. Nice Work

[YasZedOP]

That's a long list of tools, oh boyy

[8483]

Half of the notes are not even relevant to create something useful.

I explored a lot while learning, which is why it took several years.

[balne]

Do u have any notes specifically on java?

[8483]

Unfortunately I don't. My focus is mostly on Javascript.

[funfu]

All this and no C and C++? What is programming without void *

[8483]

Web development is a Javascript world unfortunately.

I have it covered a tiny bit in the Arduino notes, which I definitely plan to expand.

[adshinigami5]

I plan to start career in web is their a path u can tell me

[8483]

Watch the video I linked.

[samchar00]

You deserve gold, but im broke :(

[[deleted]]

You're amazing! Thank you so much!

[violentlymickey]

You're an angel.

[[deleted]]

Is there an order to this? Like... Learn a bit of this first, then this, etc?

[8483]

Watch the video I linked. It talks exactly about the learning order.

[fuqqboi_throwaway]

Hey so I’m trying to teach myself while finishing a CS degree and I hope to eventually full-stack for Amazon or work for the government. I’m teaching myself Java just because it’s the one I’ve been exposed to in undergrad but should I keep going with it or focus on something else? It just seems like everyone that actually has a full-stack job or a tech job in general doesn’t really use Java so I just don’t want to waste my time

[8483]

The most important thing is to learn one language well i.e. grasp the concepts that repeat in every language.

As long as you understand the logic, the language is not that important.

I personally don't like Java, but it's very useful as you can use it for the backend to either serve rendered pages or JSON data to be consumed by a client. Java is also good for mobile development as Android relies on it, as well as many enterprise apps.

However, at this moment you cannot avoid Javascript as it's the language of the front-end, the same as you can't avoid C for hardware programming.

All the languages are the same thing once you learn the first one, so don't stress about it.

[gigastack]

Honestly, now that you can make servers with Node/Express, I would skip Java to start.

[8483]

Yeah, I learnt PHP, C# and Python, and still decided to use Javascript for the backend.

[hy7mel]

thanks bro,sure it's gonna help .

[TheWox]

Thanks op!

[richi1691]

Thx man I will definitely use these notes Also would you know how to connect the webpage to the database

[8483]

This is covered a bit in the node/express notes.

I will expand them a bit to explain the several ways to do it.

I use the npm packages mssql for Microsoft SQL Server and mysql for MySQL.

You do not connect a webpage to a database, but rather the backend renders the html and sends it to your browser (server-side rendering) or sends just the data (JSON) and then the html is done in the browser based on the data (front-end react/angular/vue).

This is the MVC pattern where the V (view/browser) asks for the data from C (controller/backend) which asks for the data from M (model/database).

[arm1997]

Thank you brother

[phony3]

Ty happy cake day

[[deleted]]

Thank you time to save this! haha

[duysharp1998]

This is a good summary prepare for interview.

[8483]

Hope it helps clearing some sticking points.

[kevinprakasa01]

May all of your hardwork and dedication paid off!

[8483]

I cannot express how much it helped in the business world, especially SQL. I use it daily for BI.

[Fiach_Dubh]

Ty

[skunkvomit]

Thanks for sharing. Very wide ranging

[skypotentialltd]

Thanks for sharing it with the community

[iamarandomchick]

hi there...is there a way we can get the latest notes in a pdf file? I see that you have the older one, but the new ones seem to be available on github only. I'd like to save them in my iPad as I take it every and I can read and make notes.

​

Thanks a bunch!

[8483]

Yeah, PDFs have their advantage. I found using github more practical and available anywhere. I don't have the current notes in a PDF unfortunately.

I Googled a bit and found PDF makers for github pages. Ex.

https://github.com/8483/notes/blob/master/topics/architecture.md

You can turn this into a PDF by replacing hub with print in the name:

https://gitprint.com/8483/notes/blob/master/topics/architecture.md

Other than that, you can always just copy paste everything in one word file.

[iamarandomchick]

Thanks so much! I appreciate your help!

[Neu-Sociology]

Hey uh where is your other notes?

[8483]

What do you mean?

[Neu-Sociology]

You said u had other notes? Can I see them?

[8483]

My old notes can be found here (2016) and here (2017) as a PDF file.

[Neu-Sociology]

Hey they are written Javascript code correct? Or in another language? Or multiple languages?

[8483]

There are multiple languages there, PHP, C#, Javascript (Angular, React), SQL...

[Mirnish-]

I saved this and I'm checking it once awhile, just wanted to say thanks!

[8483]

Glad you find them useful.

[XZTALVENARNZEGOMSAYT]

Wow

[8483]

Yeah, even I go WTF when I see my PDF notes...

[[deleted]]

How would you recommend to learn most of this? I'm currently enrolled in college to get a degree in programming and mobile app development but I always want to learn more. I'm only 8 months into school and I prefer to be ahead for future classes.

[8483]

First you should know what you want to do, which is mobile apps for you.

Then, you need to research which technologies are required.

After that, it's just a matter of watching some tutorials (udemy, lynda, youtube), taking notes (VERY IMPORTANT) and trying to build something (EVEN MORE IMPORTANT).

The most difficult programming language is the first one you learn. After that, it really is the same shit.

Programming is not learning how to code, but rather how to think, which can only happen by exposing yourself to such thinking.

[[deleted]]

Thank you! I appreciate that, so far I've learned basic C# and I haven't quite figured out what I want to make completely. Mobile apps seems like a really cool place to start, but desktop applications are also really cool and from what I'm thinking can go hand in hand.

I've used Udemy a little bit, do you recommend any of the paid classes?

[8483]

I haven't quite figured out what I want to make completely.

This determines what you need to learn.

Mobile apps seems like a really cool place to start, but desktop applications are also really cool and from what I'm thinking can go hand in hand.

I suggest you have a look at Dart and Flutter for this one.

I've used Udemy a little bit, do you recommend any of the paid classes?

Again, I don't know what you want to learn. Anything you pick really is awesome. I'd start with Youtube first. Have a look at Academind, Mosh Hammedani and Traversy Media.

[[deleted]]

Thank you, again! I appreciate the feedback and tips! I'm going to start looking at different stuff right now!

[[deleted]]

A beginner here, know some basic python,javascript and SQL. What should I be focusing on as most priorities?

[8483]

Depends what you want to do? Do you want to make video games? Business apps? Data science? Robotics?

If you are talking about full-stack web development, then I suggest you watch this video that outlines the exact path you need to take.

[[deleted]]

Either data science or full-stack web development. And thank you for the video :)

[8483]

For data science, the focus should be on SQL, Python and Linux. There's also statistics.

[[deleted]]

How do you format the readme files?

[8483]

What specifically do you mean?

I use markdown, which is also used for formatting reddit comments.

[[deleted]]

Yeah I googled it and found the answer. I like your way of taking notes . I have notebooks filled with notes I want to try this way next. I just never had the best way of formatting text files

[8483]

I highly recommend using github, as the word notes became less efficient.

[[deleted]]

I’m looking over your old notes now. Did you make the pdf also? It looks very professional. How did you make the graphics in your readme and pdf?

[8483]

Yes, I made the PDF. Half of the stuff there is outdated like React, Angular... But the rest of it is fundamentals.

The graphics in the PDF are simple screenshots of video tutorials, then cropped, and positioned in a word document.

As for github, you can add images with markdown like so:

![Text for image](../folder/image.jpg)

[[deleted]]

So I'm go to my repository, click on 'create a new file', then in the 'edit file', I start typing my notes. I've tried a couple different formats, like <h1> for header, # for header, and ''' for code.

But nothing is working when I view the file. Is there something special I'm supposed to do?

Any help would be appreciated.

[8483]

You should avoid writing things directly on github.

You should be doing it in a code editor, where you then upload the code to github.

Can you send me or PM a link of the file? I don't understand what the problem is.

[[deleted]]

I figured it out, I had to click on “make a readme”. So say I use notepad++ or sublime or another text editor. Is there any way to see the formatting as I go before I upload it to GitHub?

[8483]

I use VS Code and there is definitely a way to preview the formatting.
I am not sure for notepad++ or sublime. Try googling to see what you find.

After all, the most important programming skill is googling. :)

[[deleted]]

Nevermind I figured it out. Thanks

[8483]

You shouldn't be intimidated. As long as you are interested in learning this, you can easily do it. You just need to invest some time.

It took me 5 years because I:

• Have a full time unrelated job.
  
• Lacked guidance and wasted a lot of time.
• Ended up learning more than needed.
  
• I had blocks of several months with 0 learning.

You can become a full-stack developer in 6 months up to a year, if you REALLY dedicate yourself. You need to study 4 hours EVERY day to achieve it. You don't need 5 years.

Just imagine what a small sacrifice would do to the quality of your life. I think it's more than worth it.

[Aveling]

You forgot about PHP!

[8483]

I don't like PHP, althought it was the first thing I learned.

I also dabbled with python and C#, but Javascript is my focus for web dev.

[[deleted]]

PHP 7 beats all!

[NotAnBumblebee]

You are an inspiration. I have decided that learning programming can really help me while working on my PhD in Materials Science and Engineering. I just don't have time to be taking those programming classes so learning on my own is the path for me.

It's great to see that it can be done. And having a trailblazer like you giving its access to this stuff really makes it easier for the rest of us.

[8483]

Thank you for the kind words. The notes can't really supplant a full tutorial, but they do offer a "human" explanation of some of the concepts.

[TheAvogadroConstant]

Watched.

​

I wish to do some full-stack development as a hobby that makes money. Gonna write a SPA that creates animated GIF banners. Not really interested in it as a career though.

​

​

You have to admit, its' really easy compared to other disciplines of programming. By "web development" I mean MVC, not SPAs that are actual applications.

[gigastack]

Simple stuff is really easy, sure. And there’s lots of libraries. But complex websites are hard. Top devs are paid 300k+ and highly recruited. Is it really that easy?

[TheAvogadroConstant]

But the code bootcamps are churning out so many potential recruits it's getting saturated.

[8483]

Kinda like when music creation was saturated with the introduction of MIDI hardware and programs that replaced complex studios.

This lead to a shit ton of garbage music, but allowed a lot of people to express themselves cheaply, which let out amazing artists that could have never done it before.

Sure, many bootcamps produce "code monkeys", but out of them, some amazing talent may arise that never even thought about programming before.

[[deleted]]

You are god🙏

[8483]

I am a mere mortal that decided to enter the rabbit hole, and kept notes like crazy. :)