We'll take a broad look at front-end & software development in 2023. To understand what to expect and learn, this page also serves as the notes I took and learned, to land my dream job.

Internet

How Internet Work?

The internet is a network of networks. A network is a groupd of computers or other devices which are connected to each other using a set of standardized protocols (IP and TCP — Transmission Control Protocol).

Data is sent and received in this network of networks, and it is broken down into smaller packages while sending to the receivers.

• Packet: A small unit of data that is transmitted over the internet.

• Router: A device that directs packets of data between different networks.

• IP Address: A unique identifier assigned to each device on a network, used to route data to the correct destination.

• Domain Name: A human-readable name that is used to identify a website, such as google.com.

• DNS: The Domain Name System is responsible for translating domain names into IP addresses.

• HTTP: The Hypertext Transfer Protocol is used to transfer data between a client (such as a web browser) and a server (such as a website).

• HTTPS: An encrypted version of HTTP that is used to provide secure communication between a client and server.SSL/TLS: The Secure Sockets Layer and Transport Layer Security protocols are used to provide secure communication over the internet.

What is HTTP?

HTTP (HyperText Transfer Protocol) is a protocol used to transmit data over the internet. It is the foundation of data communication for the World Wide Web (WWW). HTTP defines how messages are formatted and transmitted, and what actions web servers and browsers should take in response to various commands.

Browsers & How They Work

A web browser is a software application that allows users to access and navigate the World Wide Web. The primary function of a web browser is to retrieve web pages and display them on the user's device (computer, tablet, or smartphone).

Here are the basic steps that occur when a user types a web address into a browser:

1. The browser sends an HTTP request to the web server hosting the website.

2. The web server receives the request and responds with an HTTP response containing the requested webpage's data.

3. The browser receives the response and begins to render the webpage, parsing the HTML, CSS, and JavaScript files to display the page's content and structure.

4. The browser may also request additional resources, such as images, videos, or scripts, to enhance the webpage's functionality or appearance.

5. The browser renders the complete webpage and presents it to the user.

DNS & How They Work

DNS (Domain Name System) is a system that translates domain names, such as example.com, into IP addresses, such as 192.0.2.1. This allows users to access websites using human-readable domain names rather than having to remember IP addresses.

Here's how DNS works:

1. A user enters a domain name into their web browser, such as example.com.

2. The browser sends a request to the user's ISP (Internet Service Provider) or a DNS resolver to resolve the domain name into an IP address.

3. The resolver checks its cache to see if it has a record of the IP address associated with the domain name. If it does, it returns the IP address to the browser. If not, it queries other DNS servers to find the IP address.

4. The resolver sends a recursive query to the root DNS server, which responds with the address of the top-level domain (TLD) server for the domain name's TLD (.com in this example).

5. The resolver sends a query to the TLD server, which responds with the address of the authoritative DNS server for the domain name (the DNS server responsible for managing the domain name's DNS records).

6. The resolver sends a query to the authoritative DNS server, which responds with the IP address associated with the domain name.

7. The resolver caches the IP address and returns it to the user's browser, which then sends an HTTP request to the web server hosting the website.

What is Domain Name?

A domain name is a unique, human-readable name used to identify a website or other online resource on the internet. Domain names are used to replace complex IP addresses, which are the actual numerical addresses that computers use to locate websites and other resources on the internet.

A domain name is made up of two main parts: the top-level domain (TLD) and the second-level domain. The TLD is the last part of the domain name, such as .com, .org, or .net. The second-level domain is the part of the domain name that comes before the TLD, such as google.com or amazon.com.

What is Hosting?

Web hosting is a service that allows individuals and organizations to make their website accessible on the internet. Websites are hosted on servers, which are powerful computers that store and transmit website data to users who request it through their web browsers.

When a website is hosted, the website owner rents space on a server and pays a hosting company to manage and maintain the server. The hosting company provides the hardware, software, and infrastructure needed to keep the website up and running, as well as the necessary security and backup measures.

There are several types of web hosting, including:

1. Shared hosting: In shared hosting, multiple websites are hosted on the same server, sharing the server's resources such as storage, bandwidth, and processing power.

2. VPS hosting: In VPS (Virtual Private Server) hosting, a physical server is partitioned into multiple virtual servers, each of which acts as a dedicated server with its own resources.

3. Dedicated hosting: In dedicated hosting, a website is hosted on a dedicated server that is not shared with any other websites, providing maximum control and customization.

4. Cloud hosting: In cloud hosting, a website is hosted on a network of interconnected servers, providing high scalability and reliability.

HTML / CSS

• Writing Semantic HTML

• Forms & Validations

• Conventions & Best Practices

• Accessibility

• SEO Basics

• CSS Basics

• CSS Layouts (Float, Positioning, Display, Box Model, Flex, Grids)

• CSS Responsive

JavaScript

• JS Syntax

• DOM Manipulation

• Fetch API

• AJAX

• ES6+

• Hoisting, Event Bubbling, Scope, Prototype

Versional Control

• GitHub

• Git

Web Security

• HTTPS

• CORS

• Content Security Policy

Package Managers

• npm

• yarn

CSS Architecture & Preprocessors

• BEM

• Sass

• PostCSS

Build Tools

Linters & Formatters

• Prettiers

• ESLint

Task Runners

• npm scripts

Module Bundlers

• Vite

• Webpack

• esbuild

Framework

• React.js

• Angular

• Vue.js

ReactJS

CLI Tools

• Vite

• Create React App

Components

• Functional Components

• JSX

• Props & State

• Conditional Rendering

• Components Composition

Hooks

• Basic Hooks: useState & useEffect

• useCallback

• useRef

• useMemo

• useReducer

• useContext

• Custom Hooks

Rendering

• Component Life Cycle

• Lists & Keys

• Render Props

• Refs

• Events

• High Order Components (HOC)

Routing & Routers

• React Router

State Management

• Redux / Toolkit

• Zustand

• Context

Styling

• Styled Components

• CSS Modules

• Tailwind

• Material UI

Working with API

GrapQL

• Apollo

REST

• SWR

• react-query

• Axios

Testing

• Jest

• Vitest

• React Testing Library

Frameworks

• Next.js

• Remix

Forms

• React Hook Form

Advanced

• Suspense

• Portal

• Error Boundaries

• Fiber Architecture

Mobile

• React Native

Modern CSS

• Styled Components

• CSS Modules

CSS Frameworks

• Tailwind

Testing

• Jest

• Cypress

• React Testing Library

Authentication

• JWT

• OAuth

• SSO

• Basic Auth

• Session Auth

Type Checkers (2023+)

• TypeScript

Progressive Web Apps (PWA)

• Storage

• Web Sockets

• Server Sent Events

• Server Workers

Performance Best Practices

• PRPL Pattern

• RAIL Model

• Performance Metrics

• Lighthouse & DevTools

Server Side Rendering (SSR)

• React.js → Next.js or Remix

Static Side Generators (SSG)

• Astro

• Eleventy

• GastbyJS

GraphQL

• Apollo

Mobile Dev

• React Native

• Flutter

Desktop Dev

• Electron

Next Step: Full Stack

• TypeScript

• Node.js