Skip to content
Felix Notes

Web Development Foundations

  • Introduction
    • Types of WebDev
      • Frontend
        • Presentation of content
        • UI elements: navbar, etc.
        • HTML, CSS, JavaScript, and relevant frameworks
      • Backend
        • Stores and serves program data to ensure frontend has what it needs
        • Java, Python, Ruby, etc to work with data
      • Full-stack
        • Work with both front and back ends
  • Prerequisites
    • Computers
      • Hardware
        • Any part that has a physical structure
      • Software
        • Any set of instructions telling the hardware what to do and how to do it
      • Types of computers
        • Desktops, laptops, tablets, etc
        • A server is a computer that serves up information to other computers on a network
    • Operating system
      • Most important software for a computer
      • Manages central processing unit (CPU), memory and storage for simultaneously running processes, as well as all other software and hardware
      • Allows for human-computer communication
      • Three most common: Windows, macOS, Linux
      • Open-source vs. proprietary software
        • Modified and distributed by anyone around the world // Modified only by the company that owns it
      • Most servers run Linux because its ease to customize
    • Application
      • A type of software that performs specific tasks
    • Open-source software
      • Public collaboration fix bugs, adds features, improve performance within a short amount of time
    • The Web - The Internet is the hardware that allows many networks to talk to each other - The World Wide Web is a service built on top of the infrastructure, Internet, and arranges, accesses, and addresses data, web pages, services - Router: routes information, make sure that a message sent from a given computer arrives at the right destination computer - Connecting two computers requires one cable, 10 computers 45 cables. With routers, only 10 cables and a router with 10 plugs - Because routers are themselves computers, can connect routers to routers → Scalability - Modem: connects our network to the telephone infrastructure (which is already built to connect you with anyone in the world), turns network info into info manageable by the telephone infrastructure and vice versa - Internet Service Provider (ISP): a company that manages special routers that are all linked together and can access other ISPs’ routers

ISPs

  • Internet Protocol (IP) address: unique identifier for any computer connected to a network
    • For example: 192.168.2.10
    • To make it human readable, alias IP address with a domain name
    • For example: google.com → 142.250.190.78
  • The Web: consists of some computers called Web servers that can send messages intelligible to web browsers

Internet

  • Servers: computers connected directly to the Internet, can communicate with each other
    • Web pages are files on the server’s hard drive
  • Clients: computers not connected directly to the Internet, but through an ISP

How Internet works

  • Packets: whenever info travels through the Internet, computers break it into smaller pieces, called packets. When they reach the destination, the pieces are reassembled
  • Web page, website, web server, and search engine
    • Web page: A document that can be displayed in a web browser
      • Written in HTML
      • Embeds a variety of different types of resources
        • Style information - a page’s look-and-feel
        • Scripts - adds interactivity
        • Media - images, sounds, and videos
    • Website: a collection of web pages that are grouped or connected
      • All linked web pages share a unique domain name
    • Web server: A computer that hosts one or more websites on the Internet
      • Sends any web page from the website it is hosting to user’s browser on request
    • Hosting: all the web pages and their supporting files are available on that computer
    • Search engine: A web service/website that helps find other web pages from other websites
    • Browser: a piece of software that retrieves and displays web pages
  • How the web works
    • Clients make requests to servers, to which the servers give responses
      • When accessing a webpage, a copy of the webpage is downloaded from the server onto the client to be displayed in its browser
    • Transmission Control Protocol and Internet Protocol (TCP/IP): communication protocols that define how data should travel across the Internet
    • Domain Name System (DNS): address book for websites
    • Hyper Text Transfer Protocol (HTTP): application protocol that defines a language for clients and servers to speak to each other
    • Component files: A website is made up of many different files
      • Code files: HTML, CSS, JavaScript, etc
      • Assets: images, music, video, Word docs, PDFs, etc
    • Type a web address into the browser - The browser (if fails to find the domain in the local DNS cache) goes to the DNS server and finds the real IP address of the server hosting the website - The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client - This message and all other data is sent using TCP/IP - The request includes - A URL identifying the target server and resource - A method that defines the required action - GET, POST, HEAD, PUT, DELETE - Additional info will be encoded as - URL parameters - POST data - Client-side cookies - If the server approves of the request, the server sends the client a “200 OK” message and starts sending packets - The browser assembles packets into the web page and displays it

Typical web app architecture

Request-response cycle

  • Order in which component files are parsed
    • The browser parses the HTML file, leading it to recognize any <link>-element references to external CSS stylesheets and <script>-element references JavaScript scripts
    • The browser sends requests back to the server for any CSS and JavaScript files found. From those, it parses the CSS and JavaScript
    • The browser generates an in-memory DOM tree from the parsed HTML, an in-memory CSSOM structure from the parsed CSS, and compiles and executes the parsed JavaScript
      • Compilation: makes sure that the source code follows the syntax
      • Execution: the code which has been converted to binary code will be executed to run the application
    • As the browser is doing the above step, a visual representation of the page is displayed, and the user can interact with it
  • Command Line Basics
    • Shell: a program that reads commands and runs other programs
    • The Unix shell is both a command-line interface (CLI) and a scripting language
      • Most popular Unix shell is Bash
    • Commands
      • ls: listing
      • pwd: print working directory
      • cd: change directory
      • mkdir [path]: make directory
      • touch: create a file without any content
      • rm: remove
      • mv: move → rename file
      • cp [old] [new]: copy
      • *: wildcard, matches zero or more characters
      • ?: matches exactly one character
      • wc: word count (# of lines, words, and characters in files)
      • cat: concatenate → send the content of file to the screen
      • less: displays a screenful of the file, forward with spacebar, back one by pressing b, press q to quit
      • sort -n: sort the contents of a file
      • echo: prints text
      • command > [file]: writes output to file
      • command >> [file]: append output to file if file exists
      • head/tail: shows the first/last few lines of a file
      • [first] | [second]: pipe, the output of the command on the left will be used as the input to the command on the right
      • filter: single-purpose programs
    • Files & directories - / is the root directory - .. is the parent dir of the working dir - . is the current working dir - Filename extensions indicate a characteristic of the file contents or its intended use - Files contain bytes
  • Git
    • Version control system
      • Records differences in the files and folders
      • Keeps a historical record of each save
      • Allows pushing projects to GitHub, Bitbucket, Beanstalk, or GitLab
    • Git works on local machine, while GitHub is a remote storage facility on the web for all your coding projects
    • Unlike delta-based VC, Git thinks of data as a stream of snapshots
      • A commit is a snapshot of files in the version-controlled directory at that point in time
    • Git has three main stages files can reside in - Modified: File changed, have not committed to database - Staged: Marked a modified file in its current version to go into your next commit snapshot - Committed: Data stored in local DB

git

  • Best practices
    • Atomic commits: one-feature changes to program
      • Leverage these to make meaningful commit messages
  • Version Control
    • Local VCS (Version Control System): Keep patch sets (difference between files) in a special format on disk
    • Centralized VCS: Has a single server containing all the versioned files, and a number of clients that check out files from the server
      • Risk losing everything if server down
    • Distributed VCS: Clients also mirror the repository fully
  • Branches: allow repo to hold multiple versions at once
    • Feature branches: Add each feature to project using dedicated branches, keep finished features in main
    • Make new branch: git branch <branch_name>
    • Change to new branch: git checkout <branch_name>
      • E.g: change back to main branch → git checkout main
      • Checkout in a new branch git checkout -b <branch_name>
    • See all branches: git branch
    • Bring commits to main branch: git merge <branch_name>
    • Sames lines in a file can be changed by two different branches → merge conflict
    • Delete branch - git branch -d <branch_name> (already merged into main) - git branch -D <branch_name> (not merged into main)
  • HTML and CSS
    • HTML is raw data that a webpage is built out of (all the text, links, cards, lists, and buttons), puts info on a webpage
    • CSS adds style to those plain elements, positions information, gives color, changes the font, makes it look great
    • HTML and CSS are not programming languages because they are not used to program logic, JavaScript is though
    • JavaScript changes CSS and HTML elements after the site has been loaded, makes site more interactive
    • HTML
      • HTML elements are pieces of content wrapped in tags
        • <p>content</p>
      • There are self-closing tags or empty elements that don’t wrap any content
        • <br /> or <br>
      • index.html contains the homepage of our websites. Web servers will by default look for an index.html page when users land
      • Headings <h1> to <h6>, paragraphs <p>
      • Use <strong> (bold) and <em> (italics) tags over <b> and <i> because they add semantics
      • Unordered lists <ul> & <li>, ordered lists <ol> & <li>
      • Anchor element <a> → creates a link
      • An empty container <div>
      • An HTML attribute
        • Gives additional info to an HTML element
        • Goes in the element’s opening tag
        • Made up of two parts
          • A name
          • A value
      • Links
        • Absolute links protocol://domain/path
        • Relative links: links to other pages within our own website
        • Convention: have index.html at root dir and all other HTML files in their own dir
      • Images <img> is self-closing
        • Uses a src attribute to the location of the image file
        • alt attribute for alternative text
        • 4 main formats on the web: jpg, gif, png, svg
          • jpg for detailed photos
          • gif for simple animations
          • png for diagrams and icons
          • svg are like better png, but takes space
      • Data attributes: user-defined HTML attributes
    • Seven rules of a Git commit message
      • Separate subject from body with a blank line
      • Limit the subject line to 50 characters
      • Capitalize the subject line
      • Do not end the subject line with a period
      • Use the imperative mood in the subject line
      • Wrap the body at 72 characters
      • Use the body to explain what and why vs. how
    • CSS - CSS is made up of rules. Below is the composition of rules

CSS selector

  • Selectors: HTML elements to which CSS rules apply
    • Universal selector *
    • Type selector: name of element
    • Class selectors: all elements with the given class → .<class name>
      • Class: an attribute you place on an HTML element
      • An object can have many classes, a class can contain many elements
    • ID selectors: similar → #<id>
      • An element can only have one ID
    • Grouping selector: comma-separated list of selectors
    • Chaining selector: no separation list
      • Selects any element that has all the chained elements/attributes
      • Cannot chain >1 type selector since an element can’t be two different types at once
    • Descendant combinator: single space between selectors (ancestor & child selectors)
      • Select elements with the child class if it has ancestor as its ancestor class, no matter how deep
    • Direct child selector: larger sign, only 1 level deep
      • parent > child
  • Properties
    • color, background-color
    • font-family, font-size, font-weight, text-align
      • Best practice: include a list of comma-separated fonts, since browser will look until it finds a supported one
    • height, width
      • Best practice: include both for <img> elements, to prevent delayed shifting of content
  • Cascade: determines which rules actually get applied (Specificity → Inheritance → Rule order)
    • Specificity: A CSS declaration that is more specific will take precedence over less specific ones, triggers when there are conflicting declarations on the same element
      • Order of specificity: Inline styles > ID selectors > class selectors > type selectors > *
    • Inheritance: certain CSS properties (color, font-size, font-family,etc.) that apply to both an element and its descendants
    • Rule Order: the rule last defined wins
  • Adding CSS to HTML
    • External CSS: inside HTML’s <head>
      • <link rel=“stylesheet” href=“styles.css”>
      • rel attribute: relationship between linked resource and original document
    • Internal (embedded CSS): place all rules inside <style>, which then be placed inside <head>
    • Inline CSS: style as HTML attribute
  • Inspecting HTML and CSS
    • Chrome Dev Tools: F12 or Inspect Element
      • Can test styles directly in Inspector
    • Panels
      • Elements: View and change the DOM and CSS
      • Console: View messages and run JavaScript
      • Sources: Debug JavaScript, persist changes made in DevTools across page reloads, save and run snippets of JavaScript, and save changes that you make in DevTools to disk
      • Network: View and debug network activity
      • Performance: Find ways to improve load and runtime performance
      • Memory
      • Application: Inspect all resources that are loaded
      • Security
      • Community
  • HTML vs DOM
    • When you use a web browser to request a page, the server returns HTML, the browser parses the HTML and creates a tree of objects, or nodes

HTML

HTML

  • DOM tree represents the page’s content
  • Suppose JavaScript make changes to the nodes, the DOM becomes different than the HTML
  • HTML represents the initial page content, the DOM represents current page content
  • The box model
    • Everything on a web page is a rectangular box

Box model

  • Margin collapses between two neighboring elements, the larger one will be used
  • Standard box model
    • If a box is given an inline-size and a block-size attributes, this defines the inline-size and block-size of the content box. Padding and border is then added to get the total size taken by the box (margin is not counted)
  • The alternative box model
    • Any width is the width of the visible box
    • Turn on using box-sizing: border-box
    • Best practice: use in universal selector/use on the <html> element and set all other elements to inherit that value
  • Margin
    • Control all at once using margin, or individually using, margin-top, -bottom, -left, -right
    • Negative margin causes this element to overlap others
    • Two positive margins combine into one (max)
    • Two negative margins collapse (min)
    • If one is negative, its value will be subtracted from the total
    • A value of auto tells the browser to define the margin for you, useful for horizontal centering if there is a predefined width
  • Border
    • border-width, border-style, border-color
  • Padding
    • Cannot have negative padding
  • Block vs Inline
    • display: block
      • Stacked atop each other, each starting a new line
    • display: inline
      • Do not start on a new line
      • Best practice: no extra padding or margin on inline elements
      • In practice, flexbox > inline-block
    • display: inline-block
      • Width, height, padding are respected, does not break onto new line
  • Divs & Spans
    • Unlike semantically meaningful elements, divs and spans have no meaning. They are just boxes
    • Usage
      • “Hook” elements to target for styling with CSS
      • Group related elements under one parent for correct positioning
    • Div
      • block-level by default
      • Divide the page into different blocks and apply styling to those blocks
    • Span
      • Inline-level by default
      • Group text content and inline HTML elements
      • Should only be used when no other semantic HTML element is appropriate
  • Normal flow
    • How elements are laid out if no CSS
    • block-level element’s content fills the available inline space and grows along the block dimension
    • inline-level elements have the same size as their content. - Height and width cannot be set, unless display: block; or display: inline-block;
  • Flexbox
    • A way to arrange items into rows or columns
    • Flex container: any element that has display: flex
    • Flex item: any element that lives directly inside a flex container
    • Any item can be both (nesting)
    • Shorthand properties: CSS properties that set values of multiple other CSS properties simultaneously
    • flex shorthand for flex-grow (1), flex-shrink (1), flex-basis (auto)
    • flex-grow: growth factor for flex item
      • 1 to make elements grow evenly
    • flex-shrink: only applied if the size of all flex items is larger than their parent container
      • 0 to keep certain elements from shrinking
    • flex-basis: sets the initial size of a flex item along the main axis of the flex container (see below)
    • Keyword values for flex
      • initial: sized to width and height properties, shrinks to minimum size to fit container, does not absorb free space
      • auto: sized to width and height properties, grows to absorb free space in flex container
      • none: sized to width and height properties, inflexible
    • Can think of them like this
      • flex-grow, -shrink, -basis → max, min, ideal size
    • flex-wrap: wrap → if flex items can’t fit in the same space, they will break onto a new line
    • There are 2 axes of a flex container, horizontal (row) or vertical (column)
      • flex-direction: column (or row)
    • Alignment - justify-content → flex container property, aligns items across the main axis - flex-start (default) - flex-end - center - space-around: equal (half-size) space on right and left of each item - space-between: equal space between each item - space-evenly: equal (full-size) space around each item - align-items → align items across the cross axis - flex-start: line items up at the start of the flex container - flex-end - stretch (default): flex items stretch to the height of the flex container - center - align-self → align an individual flex item on the cross axis - align-content → controls space between flex lines on the cross axis - gap, column-gap, row-gap → create gaps or gutters between flex items
  • JavaScript
    • JS is written in C++
    • Similar to CSS, there is internal JS (<script>) and external JS
    • console.log() → print something to the developer console in browser
    • alert() → browser alert
    • Create variable: let statement — camelCase
    • Create constants: const statement
      • UPPER_UNDERSCORED_CASE for constants known prior to execution
      • camelCase for constants calculated in run-time, during the execution
    • JavaScript numbers are always 64-bit floating point
    • Add a number and a string → concatenation
    • Add a string and a number → concatenation
    • JS converts strings to numbers in all numeric operations, except +
    • NaN: Not a Number — isNaN() — is of type number
    • Infinity — returned when you calculate a number outside possible range — is number
    • Strict equality operator (===) vs. equality operator (==)
      • Different types → false
      • Both objects are false, return true if refer to same object (identity)
      • == converts to same type before comparing
    • Unary operator: operator that has a single operand <> binary operator <> ternary operator (three operands)
    • Unary + does nothing to numbers, but convert other types to numbers
    • Assignment = returns a value
      • x = value writes the value to x and returns it
    • Prefix form increments and then returns, postfix returns then increments
    • let statement returns undefined, which is 0 when converted to number
    • JavaScript is dynamically typed (interpreter assigns variables a type at runtime based on the variable’s value at the time). Variable types can change
    • Doing math is safe in JS, in that it won’t return runtime error (NaN result)
    • Scripting language: is a programming language that manipulates an existing system. Scripting languages are usually interpreted at runtime rather than compiled.
      • JavaScript is the scripting language for Web browsers
    • 3 types of quotes
      • Double and single quotes are the same
      • Backticks allow for embedding values and expressions into a string by wrapping in ${...} (evaluated then concatenated)
    • null: “value unknown”
    • undefined: “value is not assigned”
    • 8 basic data types in JS
      • 7 primitive data types
        • number
        • bigint
        • string
        • boolean
        • null
        • undefined
        • symbol
      • 1 non-primitive
        • object
    • JS is zero-indexed
    • OR (||) finds the first truthy value and returns it
    • AND (&&) finds the first falsy value and returns it
    • ? — conditional operator
      • result = condition ? valueTrue : valueFalse
    • Best practice: log messages to the Console to make sure JS is working as expected
    • The console is a REPL (real-eval-print loop)
    • Functions
      • function funcName (<params>) {<funcBody>}
      • (function () ) → anonymous functions
      • (params) => → alternative form, arrow functions
      • Functions can have default parameters, like in Python
      • A function expression is created when the execution reaches it, while function declaration can be called earlier than its definition
    • Call stack (LIFO principle)
      • The way JS engine keep tracks of its place in code and manage execution contexts
        • Global execution context
        • Function execution contexts
      • Whenever a function is called, the JS engine creates a function execution context for the function, pushes it on top of the call stack, and starts executing
      • When it completes, the engine pops it off the call stack and resumes the execution where it left off
      • The call stack has a fixed size, number of execution contexts > stack size → stack overflow
      • JS is single-threaded → has only one call stack
      • The JS engine executes code from top to bottom, line by line → synchronous
      • Asynchronous: the JS engine can execute other tasks while waiting for another task to be completed → use an event loop
    • Like Python, there is a class of Error and instances of it are thrown when run-time error occurs
    • Common practice: declare arrays with const
    • Test-driven development: writing automated tests that describe how code should work before actually writing
    • JS arrays
      • Looping through arrays
        • for loop
        • forEach function
          • Array.forEach() takes in a function and applies that function for each item in the array
          • Takes single-parameter function
      • Add elements: push()
      • Arrays with named indexes are called associate arrays (hashes/dictionaries)
      • JS does not support arrays with named indexes
      • push(), pop(), shift(), unshift()
      • concat(), splice(), slice()
    • Looping
      • for…of loop
      • map(), filter() → takes single-parameter functions
      • break, continue
      • while, do…while
  • DOM (Document Object Model): tree-like representation of the contents of a webpage
    • Targeting nodes with selectors
      • CSS-style selectors
      • Relational selectors
        • firstElementChild
        • lastElementChild
        • previousElementSibling
    • Query selectors
      • element.querySelector(selector) returns a reference to the first match of the selector
      • element.querySelectorAll(selectors) returns a “nodelist” containing references to all of the matches of the selectors
        • nodelist != array
        • Can convert nodelist into an array
          • Array.from()
          • The spread operator (…) takes everything out of an iterable and put them in an array
    • Element creation
      • document.createElement(tagName, [options])
      • Creates a new element of type tagName in memory (does not put into the DOM yet)
    • Append elements
      • parentNode.appendChild(childNode) appends childNode as the last child of parentNode
      • parentNode.insertBefore(newNode, referenceNode) inserts newNode into parentNode before referenceNode
    • Remove elements
      • parentNode.removeChild(child) removes child from parentNode on the DOM and returns a reference to child
    • Altering elements
      • When you have reference to an element, that can be used to alter its properties
      • kebab-case CSS rule in JS → camelCase (background-color → backgroundColor OR [‘background-color’])
    • Adding inline style
    • Editing attributes
    • Adding text content
      • element.textContent = "";
      • Creates a text node and inserts it in element
    • Adding HTML content
      • element.innerHTML = "";
      • Renders the HTML inside element
    • textContent is preferable for adding text since innerHTML can be leveraged for JS injection
    • Standard practice: toggle a CSS style > adding/removing inline CSS
    • JS is run whenever the script tag in encountered in HTML → to manipulate DOM, put defer in script tag if using external JS
    • Dynamic event handling
      • Attach functions’ attributes directly in HTML elements
      • Set on_event_ property on the DOM object in JS
      • Attach event listeners to the nodes in JS
    • Attaching listeners to groups of nodes by iterating through the nodelist returned by querySelectorAll(‘selector’)
    • Bubbling: When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors (Bottom-up)
    • Capturing

Event capturing

  • Array methods
    • sort, map, reduce, filter, find, findIndex, some, every
  • JS objects
    • Associate arrays (key:value instead of index:value) with special features
    • Property keys must be strings or symbols
    • Values can be of any type
    • Accessing properties
      • Dot notation
        • obj.property
      • Square brackets notation
        • obj[“property”]
      • Square brackets allow taking the key from a variable
        • obj[varWithKey]
    • Additional operators
      • Deletion
        • delete obj.prop
      • Check existence
        • “key” in obj
      • Iterate the keys of an object
        • for (let key in obj)
      • Constructors
        • new <ConstructorName>()
        • Create constructors like defining new functions
        • Constructors name are MixedCased
  • Problem solving
    • Understand the problem: write it down, explain it, draw diagrams
    • Plan: Ask questions about the expected I/O
    • Pseudocode: Write out the program logic in natural language
    • Divide and Conquer: identify subproblems and start coding
  • Node.js
    • A JS runtime environment that allows you to run JS outside of your web browser
    • nvm (Node Version Manager)
    • npm (Node Package Manager)
    • To run Node console, open Terminal and type node
  • Back-End
    • Popular server-side languages are PHP, C#, Ruby, Python and Java
    • JavaScript is used to communicate with the back-end (usually through APIs) for more advanced functionality
    • Most front-end development teams choose a framework or set of libraries that make it easier and more scalable to build a new web app (Angular, React, etc.)
    • Back-end development involves working with applications, databases, and servers to handle the application logic and data management
    • Back-end developers build APIs that front-end developers can use to integrate the client-side with the server-side
    • Back-end developers also need to interact with database management systems like PostgreSQL, SQL Server, or MySQL
    • Web applications and databases are deployed on a server (Apache or NGINX), which provides the computing resources, data storage and other capabilities for running the app
    • Back-end developers usually choose a framework as a starting point (Django, Flask). Frameworks offer the basic capabilities for accepting HTTP requests, building web page templates, and more
    • Popular web tech stacks include
      • MEAN: MongoDB, Express, Angular, and Node
      • LAMP: Linux, Apache, MySQL, and PHP/Python
      • JAMstack: JavaScript, APIs, and Markup
  • Back-End Web Architecture
    • Clients: anything that sends requests to the back-end
      • Often browsers making requests for HTML and JS code that will be executed to display websites
      • Mobile application
      • An application running on another server
      • Web-enabled smart appliance
      • …
    • Back-end: the technology required to process the incoming request and generate and send the response to the client
      • Server: the computer that receives requests
        • Apache
        • NGINX
      • App: listens for requests, retrieves information from the database, and sends a response
      • Database: used to organize and persist data
        • MySQL
        • PostgreSQL
        • MongoDB
    • Server: a computer that listens for incoming requests
    • App: contains logic about how to respond to various requests based on the HTTP verb and the URI (Uniform Resource Identifier). The pair is called a route and matching them based on a request is called routing
      • Middleware: any code that executes between the server receiving a request and sending a response
      • Each route can have one or many handler functions (some of them called middleware) that are executed whenever a request to that route (HTTP verb and URI) is matched
    • API (Application Programming Interface): a collection of methods of communication between different software components
      • ~ a contract (the interface) between the application offering it and other items
      • In webdev, an API is a set of code features (methods, properties, events, and URLs, etc.) that a developer can use for interacting with browser components, other software/hardware, or third-party websites/services
  • Frameworks: provide a common structure to reuse the code provided
    • 3 categories (front-end, back-end, and UI frameworks)
      • UI frameworks: help create professional-looking web applications
        • Bootstrap
        • Materialize
        • Foundation
        • Semantic UI
        • Grommet
      • Frontend frameworks: mostly in JS, for organizing functionality, interactivity of website
        • Vue
        • AngularJS
        • Angular 2+
        • React
        • Ember
      • Backend frameworks: writing application backends
        • Spring MVC
        • Django
        • Flask
        • Ruby on Rails
        • Meteor
        • Express
    • MVC (Model-View-Controller) separation principles
    • Pick a framework based on the needs of the website
      • Simple (e.g: CMS software…): landing pages and simple online stores → out-of-the-box solutions
      • Mid-level: apps for large ecommerce stores and enterprises → frameworks
      • Complex: social networks, large ecommerce marketplaces, fintech software → tech stack
    • Features
      • Work directly with HTTP requests and responses
      • Route requests to the appropriate handler
      • Make it easy to access data in the request
      • Abstract and simplify database access
      • Rendering data
  • Web development ecosystems
    • HTML, CSS, JS → building blocks
    • CSS frameworks → saves time styling layouts
      • Tailwind
      • Bootstrap
    • UI design principles
      • Figma
    • Tools & utilities
      • Git & GitHub
      • Browser Dev Tools
      • npm
      • markdown
      • Editor/IDE extensions
      • HTTP clients
        • Axios, Postman, curl
    • Front-end deployment
      • Netlify
      • Vercel
      • GitHub Pages
    • Front-end tooling → bundlers and more stuff
      • Webpack
      • Parcel
      • Vite
    • Front-end frameworks → Organized code
      • React
        • Create React App
        • React Router
        • JSX
        • Context API
        • Hooks
        • NextJS, Remix
        • Gatsby
      • Vue
      • Angular
    • TypeScript → static type
    • UI Kits → Pre-defined styled-components
      • React
        • Styled Components
        • Material UI
        • React Bootstrap
    • Testing
      • Unit test
      • Integration test
      • E2E test
      • Performance test
    • Web APIs
      • Canvas, GeoLocation, Speech, Audio & Video, Web RTC, Local Storage
    • Full stack frameworks (SSR)
      • SSR, SEO, performance, simplicity
      • NextJS
      • Remix
      • NuxtJS
    • Static Site Generators (SSG)
      • Astro
      • Gatsby
      • Jekyll
    • Headless CMS
      • Admin area to create content without being bound to a specific frontend
      • Output JSON, so you can fetch data and use a custom front-end/UI
      • Great solution for clients that want to be able to update and add their own content
      • Strapi
      • Sanity.io
      • Keystone
    • Jamstack
      • Architectural approach to building websites with JS, APIs & Markup
      • Emphasizes the use of SSG, SSR, headless CMS, serverless functions
      • Jamstack websites
    • Visualization
      • Motion UI
      • Framer
      • Three.js
      • GSAP
    • Server-side language
      • Node.js
      • Python
      • C#
      • PHP
    • Server-side frameworks → Create APIs, microservices, or full applications using templating engines, interacting with DBs, authentication
      • Node.js
        • Express
        • Fastify
        • NestJS
        • Adonis
      • Python
        • Django
        • Flask
        • Fast API
      • Java
        • Spring
        • Struts
        • Blade
      • C#
        • ASP.NET MVC
      • Rust
        • Rocket
    • Relational DBs vs NoSQL DBs

Relational DBs vs NoSQL DBs

  • Relational DBMS
    • PostgreSQL
    • MySQL
    • Oracle
    • MS SQL
  • NoSQL DBMS
    • MongoDB
    • Cassandra
    • Couchbase
    • DynamoDB
  • Serverless/Cloud DBs
    • MongoDB Atlas
    • Firebase
    • Supabase
    • FaunaDB
  • File-based DBs
    • SQLite
    • .md files
    • H2 DB
    • Redis
  • Object Relational Mapper (ORMs) — interact with data from within your code without SQL queries, independence of DB implementation
    • Prisma
    • Mongoose
    • Sequelize
    • SQLAlchemy
  • API architectural styles
    • REST API
      • Representational state transfer
      • Traditional client-server model
      • Much more common
      • Uses specific HTTP methods and endpoints
      • Fetches all or nothing
    • GraphQL
      • Query language and runtime for APIs
      • Allows client to specify the data they want
      • Improved performance
      • One /graphql endpoint
      • Use a client such as Apollo
  • Authentication
    • Sessions & Cookies
    • JSON Web Tokens
    • OAuth
    • Third party services
    • Other related topics
      • Password hashing, two-factor auth, protecting routes
  • Backend/Fullstack deployment
    • PaaS
    • Cloud hosting
  • DevOps skills
    • Terminal/Linux commands
    • Web servers
      • NGINX, Apache configuration
    • Containerization & Virtualization
      • Docker, Kubernetes
    • Assets & File Storage
      • Cloudinary, Amazon S3
    • CI/CD
      • Jenkins, Travis CI, CircleCI
    • Infrastructure as Code (IaC)
      • Terraform, CloudFormation, Pulumi
  • Mobile development
    • React Native
    • Flutter
    • Ionic
    • Xamarin
  • PWAs
    • Leverage modern web technologies such as responsive design, service workers, HTTPS to bring a native app experience
  • Desktop apps
    • Electron
    • NW.js
    • Tkinter
    • Native
  • Web Assembly