Kamran Ahmed
2 years ago
parent
471f6348f1
commit
88aa7e4024
48 changed files with 4483 additions and 49 deletions
File diff suppressed because one or more lines are too long
@ -1 +1,11 @@ |
|||||||
# Html |
# HTML |
||||||
|
|
||||||
|
HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [W3Schools: Learn HTML](https://www.w3schools.com/html/html_intro.asp) |
||||||
|
- [Codecademy - Learn HTML](https://www.codecademy.com/learn/learn-html) |
||||||
|
- [Interactive HTML Course](https://github.com/denysdovhan/learnyouhtml) |
||||||
|
- [HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg) |
||||||
|
- [HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU) |
||||||
|
|||||||
@ -1 +1,15 @@ |
|||||||
# Css |
# CSS |
||||||
|
|
||||||
|
CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [W3Schools — Learn CSS](https://www.w3schools.com/css/) |
||||||
|
- [freeCodeCamp — Responsive Web Design](https://www.freecodecamp.org/learn/2022/responsive-web-design) |
||||||
|
- [Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/building-your-first-web-page/) |
||||||
|
- [What The Flexbox!](https://flexbox.io/) |
||||||
|
- [Learn CSS | Codecademy](https://www.codecademy.com/learn/learn-css) |
||||||
|
- [Learn Intermediate CSS | Codecademy](https://www.codecademy.com/learn/learn-intermediate-css) |
||||||
|
- [CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI) |
||||||
|
- [HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w) |
||||||
|
- [CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA) |
||||||
|
|||||||
@ -1 +1,19 @@ |
|||||||
# Checkpoint static websites |
# Checkpoint |
||||||
|
|
||||||
|
Now that you have learnt HTML and CSS, you should be able to build static webpages. I recommend you to build as many test projects at each yellow step of the roadmap as possible to solidify what you learn. |
||||||
|
|
||||||
|
The practice that I used to follow when I was learning was this: |
||||||
|
|
||||||
|
- While you are watching a course or reading a book, make sure to code along with the instructor/author — pause the video at regular intervals and code what you are being taught. |
||||||
|
- Search on YouTube and watch a few project based tutorials on the topic that you are learning. Apart from coding along with the instructor: |
||||||
|
- Try to build the same project at least 2 to 3 times on your own without looking at the video. If you get stuck, refer to the section of the video where the instructor builds that part of the project. |
||||||
|
- Build something else that is similar to the project that you just built. For example, if you just built a todo app, try to build a notes app or a reminder app. |
||||||
|
|
||||||
|
## Project Ideas |
||||||
|
|
||||||
|
Now that you have learnt HTML and CSS, here are a few ideas for you to build: |
||||||
|
|
||||||
|
- Try to copy the design of a website that you like. |
||||||
|
- Here is a [simple blog design in figma](https://www.figma.com/file/nh0V05z3NB87ue9v5PcO3R/writings.dev?type=design&node-id=0%3A1&t=2iQplaIojU3ydAfW-1) that you can try to copy. |
||||||
|
- Or try to rebuild the [webpages of this website](https://cs.fyi/). |
||||||
|
- Take some inspiration from [personal portfolios of others](https://astro.build/showcase/) and build your own personal portfolio |
||||||
|
|||||||
@ -1 +1,13 @@ |
|||||||
# Javascript |
# JavaScript |
||||||
|
|
||||||
|
JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/) |
||||||
|
- [The Modern JavaScript Tutorial](https://javascript.info/) |
||||||
|
- [Exploring JS: JavaScript books for programmers](https://exploringjs.com/) |
||||||
|
- [JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2) |
||||||
|
- [Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk) |
||||||
|
|
||||||
|
We also have this [JavaScript roadmap](/javascript). You don't need to follow it right now, just learn from some courses and revisit the roadmap later in your journey. |
||||||
|
|||||||
@ -1 +1,18 @@ |
|||||||
# Checkpoint interactivity |
# Checkpoint |
||||||
|
|
||||||
|
At this point you should be able to add interactivity to your web pages using JavaScript. You should make sure that you have learnt the following: |
||||||
|
|
||||||
|
- Know about variables, loops, data types, conditionals, functions. |
||||||
|
- Know about arrays and objects and different ways to access their data. |
||||||
|
- Know how to select DOM elements. |
||||||
|
- Add event listeners to DOM elements (e.g. click, focus, form submission). |
||||||
|
- Use JavaScript to add and remove DOM elements |
||||||
|
- Add and remove classes from DOM elements |
||||||
|
- Use JavaScript to make HTTP requests to external APIs (i.e. `fetch`) |
||||||
|
- Use JavaScript to store data in the browser's local storage |
||||||
|
|
||||||
|
Here are few ideas to practice your skills: |
||||||
|
|
||||||
|
- Create a simple to-do list app that allows users to search, add, edit, and delete items. Use local storage to store the data. |
||||||
|
- Create a simple webpage where user can put in anyone's GitHub username and see their profile information. You can use GitHub's API to fetch the data. For example, here is the [sample URL to fetch my data](https://api.github.com/users/kamranahmedse). Make sure to add validation and error handling. |
||||||
|
- Create a basic calculator app that allows users to perform basic arithmetic operations. |
||||||
|
|||||||
@ -1 +1,11 @@ |
|||||||
# Npm |
# npm |
||||||
|
|
||||||
|
npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html) |
||||||
|
- [An Absolute Beginners Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/) |
||||||
|
- [How to NPM](https://github.com/workshopper/how-to-npm) |
||||||
|
- [NPM tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y) |
||||||
|
- [NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0) |
||||||
|
|||||||
@ -1 +1,10 @@ |
|||||||
# External packages |
# Checkpoint |
||||||
|
|
||||||
|
At this point, you should be able to install and use external packages using `npm`. You probably know about [npmjs.com](https://npmjs.com/) where you can search for packages and read their documentation. You should also be familiar with the `package.json` file and how to use it to manage your project dependencies. |
||||||
|
|
||||||
|
You don't need to get into the module bundlers and build tools just yet. Just make sure that you are able to use the dependencies installed in the `node_modules` folder using simple link and script tags in your HTML. |
||||||
|
|
||||||
|
Regarding projects, here are a few ideas that you can try: |
||||||
|
|
||||||
|
- Create a simple webpage that shows the current time of user. You can use use [dayjs](https://day.js.org/) to get the current time and display it on the page. Here is the [sample design for homepage](https://i.imgur.com/yGIMGkr.png). |
||||||
|
- Install the [micromodal](https://micromodal.vercel.app/#introduction) library. Create a button on the page clicking which should open a modal and let the user select a timezone from a dropdown. Once the user selects a timezone, the modal should close and the time on the page should be updated to show the time in the selected timezone. Here is the [sample design for the modal](https://imgur.com/a/vFY6Sdl). |
||||||
|
|||||||
@ -1 +1,9 @@ |
|||||||
# Git |
# Git |
||||||
|
|
||||||
|
[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc) |
||||||
|
- [Learn Git with Tutorials, News and Tips - Atlassian](https://www.atlassian.com/git) |
||||||
|
- [Git Cheat Sheet](https://cs.fyi/guide/git-cheatsheet) |
||||||
|
|||||||
@ -1 +1,13 @@ |
|||||||
# Github |
# GitHub |
||||||
|
|
||||||
|
GitHub is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [GitHub Website](https://github.com) |
||||||
|
- [GitHub Documentation](https://docs.github.com/en/get-started/quickstart) |
||||||
|
- [How to Use Git in a Professional Dev Team](https://ooloo.io/project/github-flow) |
||||||
|
- [What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E) |
||||||
|
- [Git vs. GitHub: Whats the difference?](https://www.youtube.com/watch?v=wpISo9TNjfU) |
||||||
|
- [Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk) |
||||||
|
- [Git and GitHub - CS50 Beyond 2019](https://www.youtube.com/watch?v=eulnSXkhE7I) |
||||||
|
|||||||
@ -1 +1,10 @@ |
|||||||
# Collaborative work |
# Checkpoint |
||||||
|
|
||||||
|
Now that you have learnt git and GitHub you should be ready to work with others. You should now setup your GitHub profile and push all the projects that you have built so far to your GitHub profile. Here are some of my recommendations for your GitHub profile: |
||||||
|
|
||||||
|
- Keep the repository names lowercase and use hyphens to separate words e.g. `todo-app` instead of `TodoApp` or `Todo-App`. |
||||||
|
- Add a `README.md` file to each repository that you create. This file should contain a description of the project. Put some effort into the readme and make sure it clearly details what the project is about and how anyone can run it locally. |
||||||
|
- Add snapshots of your project to the readme file so that anyone can see what the project looks like without having to run it locally. |
||||||
|
- Add a `LICENSE` file to each repository that you create. This file should contain the license that you want to use for the project. You can use [choosealicense.com](https://choosealicense.com/) to help you choose a license. |
||||||
|
|
||||||
|
You can have a look at [my GitHub profile](https://github.com/kamranahmedse) and see how I have structured my repositories and how [some of my readme files look like](https://github.com/kamranahmedse/aws-cost-cli). |
||||||
|
|||||||
@ -1 +1,11 @@ |
|||||||
# Tailwind |
# Tailwind CSS |
||||||
|
|
||||||
|
CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [Tailwind Website](https://tailwindcss.com) |
||||||
|
- [Tailwind CSS Full Course for Beginners](https://www.youtube.com/watch?v=lCxcTsOHrjo) |
||||||
|
- [Tailwind CSS Crash Course](https://www.youtube.com/watch?v=UBOj6rqRUME) |
||||||
|
- [Should You Use Tailwind CSS?](https://www.youtube.com/watch?v=hdGsFpZ0J2E) |
||||||
|
- [Official Screencasts](https://www.youtube.com/c/TailwindLabs/videos) |
||||||
|
|||||||
@ -1 +1,13 @@ |
|||||||
# React |
# React |
||||||
|
|
||||||
|
React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [Visit Dedicated React Roadmap](/react) |
||||||
|
- [React Website](https://reactjs.org/) |
||||||
|
- [Official Getting Started](https://reactjs.org/tutorial/tutorial.html) |
||||||
|
- [The Beginners Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react) |
||||||
|
- [React JS Course for Beginners](https://www.youtube.com/watch?v=nTeuhbP7wdE) |
||||||
|
- [React Course - Beginners Tutorial for React](https://www.youtube.com/watch?v=bMknfKXIFA8) |
||||||
|
- [Understanding Reacts UI Rendering Process](https://www.youtube.com/watch?v=i793Qm6kv3U) |
||||||
|
|||||||
@ -1 +1,17 @@ |
|||||||
# Frontend apps |
# Checkpoint |
||||||
|
|
||||||
|
At this point you should be able to build a complete frontend application including: |
||||||
|
|
||||||
|
- Structuring your webpages with HTML |
||||||
|
- Styling your webpages with CSS |
||||||
|
- Adding interactivity to your webpages with JavaScript |
||||||
|
- Using the DOM API to manipulate your webpages |
||||||
|
- Using the Fetch API to make HTTP requests |
||||||
|
- Understand promises and use `async`/`await` syntax to write asynchronous code |
||||||
|
- Installing and using external libraries with npm |
||||||
|
- Version controlling your code with Git |
||||||
|
- Pushing your code to GitHub |
||||||
|
|
||||||
|
If you decided to skip React and Tailwind for now, that is fine also but you should be able to build a complete frontend application using vanilla HTML, CSS, and JavaScript. However, keep in mind that the modern frontend applications are mostly built with frameworks like React, Vue, and Angular. So, you should learn at least one of them at any point of time. |
||||||
|
|
||||||
|
This marks the end of frontend basics that you needed, we will now be moving to the backend development. While you continue with the backend development, know that there is more to frontend development and remember to checkout the [frontend roadmap](/frontend) later in your journey. |
||||||
|
|||||||
@ -1 +1,10 @@ |
|||||||
# Nodejs |
# Node.js |
||||||
|
|
||||||
|
Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project! Node.js runs the V8 JavaScript engine, Google Chrome's core, outside the browser. This allows Node.js to be very performant. A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [Official Website](https://nodejs.org/en/about/) |
||||||
|
- [Learn Node.js — Official Website](https://nodejs.dev/en/learn/) |
||||||
|
- [Node.JS Introduction](https://www.w3schools.com/nodejs/nodejs_intro.asp) |
||||||
|
- [Node.js and Express.js Full Course](https://www.youtube.com/watch?v=Oe421EPjeBE) |
||||||
|
|||||||
@ -1 +1,19 @@ |
|||||||
# Cli apps |
# Checkpoint |
||||||
|
|
||||||
|
At this point you should be able to build CLI applications using Node.js or whatever backend programming language you picked. |
||||||
|
|
||||||
|
You should be able to build a CLI application that can: |
||||||
|
|
||||||
|
- Read and write files |
||||||
|
- Parse command line arguments |
||||||
|
- Make HTTP requests |
||||||
|
- Parse JSON |
||||||
|
- Use a third-party library (e.g. a library for parsing CSV files) |
||||||
|
- Use a third-party API |
||||||
|
|
||||||
|
Here are some ideas for CLI applications you can build: |
||||||
|
|
||||||
|
- Create a CLI application that takes a URL and a CSS selector arguments and prints the text content of the element that matches the selector. **Hint** you can use [cheerio](https://github.com/cheeriojs/cheerio) |
||||||
|
- An application that takes optionally takes two dates and prints the most starred GitHub projects in that date range. **Hint** you can use [GitHub's search API](https://developer.github.com/v3/search/#search-repositories) |
||||||
|
- Bulk rename files in a directory. **Hint** you can use [fs](https://nodejs.org/api/fs.html) and [path](https://nodejs.org/api/path.html) |
||||||
|
- Write a CLI application that takes a path as input and compresses all the images in that directory. It should accept an option for output path; if the output path is not given it should compress images in place otherwise write the compressed images to the output path. **Hint** you can use [sharp](https://github.com/lovell/sharp). |
||||||
|
|||||||
@ -1 +1,11 @@ |
|||||||
# Postgresql |
# PostgreSQL |
||||||
|
|
||||||
|
PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [Visit Dedicated PostgreSQL DBA Roadmap](/postgresql-dba) |
||||||
|
- [Official Website](https://www.postgresql.org/) |
||||||
|
- [Learn PostgreSQL - Full Tutorial for Beginners](https://www.postgresqltutorial.com/) |
||||||
|
- [Learn PostgreSQL Tutorial - Full Course for Beginners](https://www.youtube.com/watch?v=qw--VYLpxG4) |
||||||
|
- [Postgres tutorial for Beginners](https://www.youtube.com/watch?v=eMIxuk0nOkU) |
||||||
|
|||||||
@ -1 +1,13 @@ |
|||||||
# Crud |
# Checkpoint |
||||||
|
|
||||||
|
**CRUD** stands for **Create, Read, Update, and Delete**. These are the four basic operations you can perform on any data when working with web applications, databases, and APIs. |
||||||
|
|
||||||
|
Now that you know about programming language and the databases, you should be able to build a simple CLI application that interacts with database. We haven't talked about the APIs yet but you don't need an API to practice CRUD operations. Here are some of the CLI applications you can build to practice CRUD operations: |
||||||
|
|
||||||
|
- A simple todo list application for the CLI with the following options: |
||||||
|
- `--new` to add a new todo item |
||||||
|
- `--list [all|pending|done]` to list the todo items |
||||||
|
- `--done [id]` to update a todo item |
||||||
|
- `--delete [id]` to delete a todo item |
||||||
|
- `--help` to list all the available options |
||||||
|
- `--version` to print the version of the application |
||||||
|
|||||||
@ -1 +1,10 @@ |
|||||||
# Restful apis |
# REST |
||||||
|
|
||||||
|
REST, or REpresentational State Transfer, is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [What is REST?](https://www.codecademy.com/article/what-is-rest) |
||||||
|
- [What is a REST API?](https://www.redhat.com/en/topics/api/what-is-a-rest-api) |
||||||
|
- [Roy Fieldings dissertation chapter, Representational State Transfer (REST)](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) |
||||||
|
- [Learn REST: A RESTful Tutorial](https://restapitutorial.com/) |
||||||
|
|||||||
@ -1 +1,12 @@ |
|||||||
# Jwt auth |
# JWT |
||||||
|
|
||||||
|
JWT stands for JSON Web Token is a token-based encryption open standard/methodology that is used to transfer information securely as a JSON object. Clients and Servers use JWT to securely share information, with the JWT containing encoded JSON objects and claims. JWT tokens are designed to be compact, safe to use within URLs, and ideal for SSO contexts. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [jwt.io Website](https://jwt.io/) |
||||||
|
- [Introduction to JSON Web Tokens](https://jwt.io/introduction) |
||||||
|
- [What is JWT?](https://www.akana.com/blog/what-is-jwt) |
||||||
|
- [What Is JWT and Why Should You Use JWT](https://www.youtube.com/watch?v=7Q17ubqLfaM) |
||||||
|
- [What is JWT? JSON Web Token Explained](https://www.youtube.com/watch?v=926mknSW9Lo) |
||||||
|
- [JWT Authentication Tutorial - Node.js](https://www.youtube.com/watch?v=mbsmsi7l3r4) |
||||||
|
|||||||
@ -1 +1,9 @@ |
|||||||
# Redis |
# Redis |
||||||
|
|
||||||
|
Redis is an open source (BSD licensed), in-memory **data structure store** used as a database, cache, message broker, and streaming engine. Redis provides data structures such as [strings](https://redis.io/topics/data-types-intro#strings), [hashes](https://redis.io/topics/data-types-intro#hashes), [lists](https://redis.io/topics/data-types-intro#lists), [sets](https://redis.io/topics/data-types-intro#sets), [sorted sets](https://redis.io/topics/data-types-intro#sorted-sets) with range queries, [bitmaps](https://redis.io/topics/data-types-intro#bitmaps), [hyperloglogs](https://redis.io/topics/data-types-intro#hyperloglogs), [geospatial indexes](https://redis.io/commands/geoadd), and [streams](https://redis.io/topics/streams-intro). Redis has built-in [replication](https://redis.io/topics/replication), [Lua scripting](https://redis.io/commands/eval), [LRU eviction](https://redis.io/topics/lru-cache), [transactions](https://redis.io/topics/transactions), and different levels of [on-disk persistence](https://redis.io/topics/persistence), and provides high availability via [Redis Sentinel](https://redis.io/topics/sentinel) and automatic partitioning with [Redis Cluster](https://redis.io/topics/cluster-tutorial). |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [Redis Website](https://redis.io/) |
||||||
|
- [Redis in 100 Seconds](https://www.youtube.com/watch?v=G1rOthIU-uo) |
||||||
|
- [Redis Caching in Node.js](https://www.youtube.com/watch?v=oaJq1mQ3dFI) |
||||||
|
|||||||
@ -1 +1,15 @@ |
|||||||
# Complete app |
# Checkpoint |
||||||
|
|
||||||
|
At this point, you should have everything that you need to build a complete application that: |
||||||
|
|
||||||
|
- Has a responsive frontend that users can interact with |
||||||
|
- Has a backend API that is secured with JWT authentication |
||||||
|
- Has a database that stores data |
||||||
|
|
||||||
|
At this point you should practice building as much as you can on your own to solidify your knowledge. If you need inspiration, here are some ideas: |
||||||
|
|
||||||
|
- Build a simple blogging application where users can register, login, setup their blog and write posts. |
||||||
|
- A single page site builder where users can pick a template, modify it and publish it. **Hint** you will need filesystem to store the design templates. Template files will have placeholders that you will need to replace with user data. |
||||||
|
- Build a simple e-commerce application which will have two types of users i.e. **Sellers** who can: Register as Seller, Login, Setup their store, Add products, Edit products, Delete products, View Received Orders, Update Order Status (Pending, Shipped, Delivered), **Buyers** who can register, Login, Browse products by all sellers, Add products to cart, Checkout, View order history, View order status, Cancel order, View seller profile, View seller products |
||||||
|
|
||||||
|
These are just some ideas to get you started. You can build anything you want. The goal is to practice building a complete application from scratch. |
||||||
|
|||||||
@ -1 +1,10 @@ |
|||||||
# Linux basics |
# Linux / Unix |
||||||
|
|
||||||
|
Knowledge of UNIX is a must for almost all kind of development as most of the codes that you write is most likely going to be finally deployed on a UNIX/Linux machine. Linux has been the backbone of the free and open source software movement, providing a simple and elegant operating system for almost all your needs. |
||||||
|
|
||||||
|
Visit the following resources to learn more: |
||||||
|
|
||||||
|
- [Linux Operating System - Crash Course](https://www.youtube.com/watch?v=ROjZy1WbCIA) |
||||||
|
- [Coursera - Unix Courses](https://www.coursera.org/courses?query=unix) |
||||||
|
- [Linux Basics](https://dev.to/rudrakshi99/linux-basics-2onj) |
||||||
|
- [Unix / Linux Tutorial](https://www.tutorialspoint.com/unix/index.htm) |
||||||
|
|||||||
@ -1 +1,7 @@ |
|||||||
# Ec2 |
# EC2 |
||||||
|
|
||||||
|
Amazon Elastic Compute Cloud (EC2) is a web service that provides resizable compute capacity in the form of virtual servers, known as instances. With EC2, you can quickly scale your infrastructure up or down as your computing requirements change. This service effectively reduces the time required to obtain and boot new server instances, allowing you to easily adjust capacity according to the needs of your application. |
||||||
|
|
||||||
|
- [Deploy Node App on AWS EC2](https://youtu.be/oHAQ3TzUTro) |
||||||
|
- [Up and Running with AWS EC2](https://cs.fyi/guide/up-and-running-with-aws-ec2) |
||||||
|
- [EC2 Essentials](https://cloudcasts.io/course/ec2-essentials) |
||||||
|
|||||||
@ -1 +1,7 @@ |
|||||||
# Vpc |
# VPC |
||||||
|
|
||||||
|
VPC stands for **Virtual Private Cloud** and is an essential service provided by AWS that allows you to create a private, isolated section within the AWS cloud, where you can define your own virtual network. It offers a more secure and controlled environment, enabling you to easily launch and manage your resources within your personal network. |
||||||
|
|
||||||
|
- [AWS VPC & Subnets For Beginners](https://youtu.be/TUTqYEZZUdc) |
||||||
|
- [Up and Running with AWS VPC](https://cs.fyi/guide/up-and-running-with-aws-vpc) |
||||||
|
- [VPC Basics](https://cloudcasts.io/course/vpc-basics) |
||||||
|
|||||||
@ -0,0 +1,7 @@ |
|||||||
|
# Route53 |
||||||
|
|
||||||
|
[Route53](https://aws.amazon.com/route53/) is AWS's Domain Name System (DNS) service that plays a critical role in connecting user requests to your web application or other resources within your infrastructure. With Route53, you can easily manage domains, redirect traffic, and configure domain-related settings. It has several advantages, including high availability, low latency, and integration with other AWS resources. |
||||||
|
|
||||||
|
- [Amazon Route 53](https://www.youtube.com/watch?v=RGWgfhZByAI) |
||||||
|
- [AWS Route 53 Domain Name](https://www.youtube.com/watch?v=jDz4j_kkyLA) |
||||||
|
- [DNS with AWS Route 53](https://www.youtube.com/watch?v=yRIY7BJohfo&t=2s) |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
# SES |
||||||
|
|
||||||
|
Amazon SES (Simple Email Service) is a scalable, flexible, and cost-effective cloud-based email service that is specifically designed for developers, marketers, and businesses to send and receive marketing, transactional, and notification emails. SES is useful, especially when you need to send a large volume of emails, as it offers high deliverability, reliability, and ease of use. |
||||||
|
|
||||||
|
- [Contact Form Submission With AWS SES](https://www.youtube.com/watch?v=HiHflLTqiwU) |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
# S3 |
||||||
|
|
||||||
|
S3 is a service that allows you to store files in the cloud. It's a simple service that you can use to store files and serve them to your users. |
||||||
|
|
||||||
|
- [Upload Images to S3 from Node Back End](https://www.youtube.com/watch?v=NZElg91l_ms) |
||||||
|
- [S3 Bucket Hosting a Static Website](https://www.youtube.com/watch?v=RoY3ekCCxKc&list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M) |
||||||
@ -1 +1,22 @@ |
|||||||
# Basic aws services |
# Basic AWS Services |
||||||
|
|
||||||
|
AWS has several services but you don't need to know all of them. Here are the most common ones that you can get started with: |
||||||
|
|
||||||
|
- [EC2](https://aws.amazon.com/ec2/) - Virtual machines in the cloud |
||||||
|
- [VPC](https://aws.amazon.com/vpc/) - Virtual private cloud |
||||||
|
- [S3](https://aws.amazon.com/s3/) - Object storage |
||||||
|
- [Route 53](https://aws.amazon.com/route53/) - DNS |
||||||
|
- [SES](https://aws.amazon.com/ses/) - Email sending |
||||||
|
|
||||||
|
Here are some of the resources to get you started: |
||||||
|
|
||||||
|
- [Deploy Node App on AWS EC2](https://youtu.be/oHAQ3TzUTro) |
||||||
|
- [AWS VPC & Subnets For Beginners](https://youtu.be/TUTqYEZZUdc) |
||||||
|
- [Up and Running with AWS VPC](https://cs.fyi/guide/up-and-running-with-aws-vpc) |
||||||
|
- [Up and Running with AWS EC2](https://cs.fyi/guide/up-and-running-with-aws-ec2) |
||||||
|
- [VPC Basics](https://cloudcasts.io/course/vpc-basics) |
||||||
|
- [EC2 Essentials](https://cloudcasts.io/course/ec2-essentials) |
||||||
|
- [Sam Meech-Ward's AWS Videos](https://www.youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M) |
||||||
|
- [DNS with AWS Route 53](https://www.youtube.com/watch?v=yRIY7BJohfo) |
||||||
|
- [Upload Images to S3 from Node Back End](https://www.youtube.com/watch?v=NZElg91l_ms) |
||||||
|
- [S3 Bucket Hosting a Static Website](https://www.youtube.com/watch?v=RoY3ekCCxKc&list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M) |
||||||
|
|||||||
@ -1 +1,19 @@ |
|||||||
# Deployment |
# Deployment |
||||||
|
|
||||||
|
Now that you know the basics of AWS, you should be able to deploy your application to AWS. You don't need to use al the AWS services, here is what you can probably get started with: |
||||||
|
|
||||||
|
- Setup an EC2 instance using any AMI (e.g. latest version of Ubuntu) |
||||||
|
- SSH into the EC2 instance using the key pair you created |
||||||
|
- Install Node.js on the EC2 instance |
||||||
|
- Install Git on the EC2 instance |
||||||
|
- Clone your application from GitHub |
||||||
|
- Install and configure database on the EC2 instance (e.g. PostgreSQL) |
||||||
|
- Make sure that the security group of the EC2 instance allows HTTP and HTTPS traffic |
||||||
|
- Try to access your application using the public IP address of the EC2 instance |
||||||
|
- Purchase or setup a domain name using Route53 (or any other domain name provider) and point it to the public IP address of the EC2 instance |
||||||
|
- Setup HTTPs using [certbot](https://roadmap.sh/guides/setup-and-auto-renew-ssl-certificates) |
||||||
|
- And voilla! You have deployed your application to AWS! |
||||||
|
|
||||||
|
If you get stuck, here is a video that shows how to deploy a Node.js application to AWS EC2: |
||||||
|
|
||||||
|
- [Deploy Node App on AWS EC2](https://youtu.be/oHAQ3TzUTro) |
||||||
|
|||||||
@ -1 +1,17 @@ |
|||||||
# Monit |
# Monit |
||||||
|
|
||||||
|
When it comes to monitoring the health of your applications, there are several different options available. My favorite monitoring stack is Prometheus and Grafana, but it can be a bit overwhelming to set up and configure. If you're looking for a simpler solution, **Monit** is a great alternative that can be utilized to monitor and manage system resources such as services, processes, files, directories, devices, and network connections, making your application more reliable and resilient to issues like crashes, unresponsiveness, or resource exhaustion. |
||||||
|
|
||||||
|
Some of the key features of Monit are: |
||||||
|
|
||||||
|
- **Automatic Recovery:** Monit can automatically restart a service or process if it fails, making your application more resistant to unexpected issues. |
||||||
|
- **Alert Notifications:** Monit can send email notifications when a problem is detected or when a certain condition is met, keeping you informed about the health of your application. |
||||||
|
- **Event Logging:** All events detected by Monit are stored in a log for easy troubleshooting and analysis. |
||||||
|
- **Resource Limit Monitoring:** Monit can monitor the resource utilization (CPU, memory, network, etc.) of a process or service and take action if a specific limit is exceeded. |
||||||
|
- **Flexible Configuration:** Monit uses a simple, human-readable configuration syntax that allows you to tailor its behavior to your needs. |
||||||
|
- **Web Interface:** Monit provides a built-in web interface for remotely monitoring your application's status and manage services. |
||||||
|
|
||||||
|
Have a look at the following resources to learn more about Monit: |
||||||
|
|
||||||
|
- [Monit - Opensource Self Healing Server Monitoring](https://www.youtube.com/watch?v=3cA5lNje1Ow) |
||||||
|
- [Monit documentation](https://mmonit.com/monit/documentation/) |
||||||
|
|||||||
@ -1 +1,46 @@ |
|||||||
|
# Checkpoint — Monitoring |
||||||
|
|
||||||
# Monitoring |
# Monitoring |
||||||
|
|
||||||
|
Monitoring is a crucial aspect of maintaining a healthy and well-performing full stack application. As a full stack developer, you need to understand and implement various monitoring tools and techniques to ensure the smooth functioning of your application throughout its life cycle. |
||||||
|
|
||||||
|
In this section, we'll cover the following topics: |
||||||
|
|
||||||
|
## Importance of Monitoring |
||||||
|
|
||||||
|
Monitoring helps you to: |
||||||
|
|
||||||
|
- Detect and fix issues before they affect users and result in system downtime. |
||||||
|
- Optimize performance and resource usage. |
||||||
|
- Predict and scale for future growth by identifying trends and predicting traffic spikes. |
||||||
|
- Ensure security by identifying weak spots and tracking malicious activities. |
||||||
|
|
||||||
|
## Monitoring Tools |
||||||
|
|
||||||
|
There are various monitoring tools available, and it's essential to choose the right one based on your specific needs. Some popular monitoring tools include: |
||||||
|
|
||||||
|
- **Infrastructure Monitoring** (e.g., [Nagios](https://www.nagios.org/), [Zabbix](https://www.zabbix.com/), [Prometheus](https://prometheus.io/)) |
||||||
|
- **Application Performance Monitoring (APM)** (e.g., [New Relic](https://newrelic.com/), [Dynatrace](https://www.dynatrace.com/), [AppDynamics](https://www.appdynamics.com/)) |
||||||
|
- **Log Management** (e.g., [Elastic Stack](https://www.elastic.co/), [Graylog](https://www.graylog.org/), [Loggly](https://www.loggly.com/)) |
||||||
|
- **Error Tracking** (e.g., [Sentry](https://sentry.io/), [Rollbar](https://rollbar.com/), [Airbrake](https://airbrake.io/)) |
||||||
|
|
||||||
|
## Key Metrics to Monitor |
||||||
|
|
||||||
|
When monitoring your full stack application, make sure to track the following key metrics: |
||||||
|
|
||||||
|
- **Availability:** Percentage of time the system is operational and accessible. |
||||||
|
- **Response Time:** Time taken by the system to respond to a user request. |
||||||
|
- **Throughput:** Number of requests processed by the system per unit of time. |
||||||
|
- **Error Rate:** The frequency of errors occurring in the system. |
||||||
|
- **Resource Utilization:** Percentage of system resources (CPU, memory, disk, etc.) being used. |
||||||
|
|
||||||
|
## Monitoring Best Practices |
||||||
|
|
||||||
|
Follow these best practices to ensure effective monitoring and smooth functioning of your application: |
||||||
|
|
||||||
|
1. **Establish Goals:** Define measurable objectives based on your business requirements and use them to set performance thresholds. |
||||||
|
2. **Monitor Across Different Levels:** Monitor at the infrastructure, application, and individual user levels to get a complete view of your system's performance. |
||||||
|
3. **Set Up Alerts:** Configure alerts for when critical thresholds are breached, ensuring you can react promptly and minimize downtime. |
||||||
|
4. **Analyze and Optimize:** Regularly review monitoring data to identify trends and areas of improvement, and then make necessary changes to enhance your application's performance. |
||||||
|
|
||||||
|
Implementing robust monitoring solutions in your full stack application helps ensure it remains reliable, available, and secure while providing valuable insights to optimize performance and scalability for future growth. |
||||||
@ -1 +1,8 @@ |
|||||||
# Github actions |
# Github Actions |
||||||
|
|
||||||
|
GitHub Actions is a workflow automation tool provided by GitHub that can be used to automate various tasks in the app development process. |
||||||
|
|
||||||
|
- [Github Actions](https://github.com/features/actions) |
||||||
|
- [Github Actions Documentation](https://docs.github.com/en/actions) |
||||||
|
- [5 Ways to DevOps-ify your App](https://www.youtube.com/watch?v=eB0nUzAI7M8) |
||||||
|
- [DevOps CI/CD Explained in 100 Seconds](https://www.youtube.com/watch?v=scEDHsr3APg) |
||||||
|
|||||||
@ -1 +1,10 @@ |
|||||||
# Ci cd |
# Checkpoint — CI / CD |
||||||
|
|
||||||
|
Now that you have the infrastructure setup, it's time to automate the deployment process. This is where CI / CD comes in. If you don't know what CI/CD are, you should watch [DevOps CI/CD Explained in 100 Seconds](https://www.youtube.com/watch?v=scEDHsr3APg). |
||||||
|
|
||||||
|
The next step at this point is to implement CI/CD for your application using GitHub actions. Setup a GitHub action that, whenever you push to master, will automatically: |
||||||
|
|
||||||
|
- Run your tests (ignore this step if you haven't learnt it yet) |
||||||
|
- Deploy your application to AWS |
||||||
|
|
||||||
|
Regarding the deployment to AWS you can use `rsync` to copy the files to the server. |
||||||
|
|||||||
@ -1 +1,5 @@ |
|||||||
# Ansible |
# Ansible |
||||||
|
|
||||||
|
Ansible is an open-source automation tool that simplifies complex software management, deployment, and configuration processes. It helps automate day-to-day IT tasks by defining them as simple, human-readable YAML files (called 'playbooks') that can be shared and understood easily by the whole team. |
||||||
|
|
||||||
|
> —— In Progress —— |
||||||
|
|||||||
@ -1 +1,3 @@ |
|||||||
# Automation |
# Checkpoint |
||||||
|
|
||||||
|
> —— In Progress —— |
||||||
|
|||||||
@ -1 +1,5 @@ |
|||||||
# Terraform |
# Terraform |
||||||
|
|
||||||
|
Terraform is an open-source infrastructure as code (IaC) tool that allows you to define, provision, and manage cloud infrastructure in a declarative manner. It is developed by HashiCorp and is written in the Go programming language. Terraform supports multiple cloud providers such as AWS, Google Cloud, Microsoft Azure, and many others. It uses a configuration language called HashiCorp Configuration Language (HCL) to write infrastructure definitions, and it maintains the state of your infrastructure in a state file. |
||||||
|
|
||||||
|
> —— In Progress —— |
||||||
|
|||||||
@ -1 +1,3 @@ |
|||||||
# Infrastructure |
# Checkpoint |
||||||
|
|
||||||
|
> —— In Progress —— |
||||||
|
|||||||
@ -1 +0,0 @@ |
|||||||
# Vpc |
|
||||||
@ -1 +0,0 @@ |
|||||||
# Route53 |
|
||||||
@ -1 +0,0 @@ |
|||||||
# Ses |
|
||||||
@ -1 +0,0 @@ |
|||||||
# Ba1sic aws services |
|
||||||
@ -1 +0,0 @@ |
|||||||
# |
|
||||||
Loading…
Reference in new issue