Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
https://andreasbm.github.io/web-skills/?compact

A visual overview of useful skills to learn as a web developer
https://andreasbm.github.io/web-skills/?compact
accessibility algorithms architecture backend build-tools css design frameworks html javascript pwa testing web-components
Last synced: 3 months ago
JSON representation
A visual overview of useful skills to learn as a web developer
Host: GitHub
URL: https://andreasbm.github.io/web-skills/?compact
Owner: andreasbm
License: other
Created: 2019-09-29T13:11:44.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-07-28T09:17:24.000Z (11 months ago)
Last Synced: 2024-02-06T05:11:23.168Z (5 months ago)
Topics: accessibility, algorithms, architecture, backend, build-tools, css, design, frameworks, html, javascript, pwa, testing, web-components
Language: JavaScript
Homepage: https://andreasbm.github.io/web-skills/
Size: 117 MB
Stars: 6,770
Watchers: 151
Forks: 652
Open Issues: 55
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Lists

awesome-web-dev-resources - Web Skills
awesome-frontend-resources - Web Skills - Visual overview of useful skills to learn as a web developer. (General <a name="general"></a>)
awesome-web-development - Web Skills
personal-awesome-list - Web Skills
README

        
Web Skills



	Web Skills is a visual overview of useful skills to learn as a web developer. Go to https://andreasbm.github.io/web-skills to check out the visual overview or scroll through this readme to get the overview as a list. If you like the project you are very welcome to become a stargazer 🤩

 



	

		

	






📖 Table of Contents




[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)

## ➤ Table of Contents

* [➤ FAQ](#-faq)

	* [What is Web Skills?](#what-is-web-skills)

	* [How did you choose the skills?](#how-did-you-choose-the-skills)

	* [How can I support you?](#how-can-i-support-you)

	* [How can I get involved?](#how-can-i-get-involved)

	* [How can I keep track of what skills I know?](#how-can-i-keep-track-of-what-skills-i-know)

	* [I am overwhelmed! Help me!](#i-am-overwhelmed-help-me)

	* [Why haven't you included XYZ Technology?](#why-havent-you-included-xyz-technology)

	* [What does the "experimental" banner mean?](#what-does-the-experimental-banner-mean)

	* [How can I get in contact with you?](#how-can-i-get-in-contact-with-you)

* [➤ Fundamentals](#-fundamentals)

	* [HTML](#html)

	* [Syntax](#syntax)

		* [Basic Tags](#basic-tags)

	* [Forms](#forms)

	* [SEO](#seo)

		* [Discoverable Content](#discoverable-content)

	* [Svg](#svg)

	* [Best Practices](#best-practices)

	* [CSS](#css)

	* [Syntax](#syntax-1)

	* [Selectors](#selectors)

		* [Specificity](#specificity)

		* [Pseudo Selectors](#pseudo-selectors)

	* [Box Model](#box-model)

		* [Margin Collapsing](#margin-collapsing)

	* [Colors](#colors)

	* [Calc](#calc)

	* [Layout](#layout)

		* [Flex](#flex)

		* [Grid](#grid)

	* [Transforms](#transforms)

		* [Animations](#animations)

	* [Responsive Design](#responsive-design)

		* [Media Queries](#media-queries)

		* [Relative Units](#relative-units)

		* [Images](#images)

	* [CSS Variables](#css-variables)

	* [Best Practices](#best-practices-1)

	* [Javascript](#javascript)

	* [Syntax](#syntax-2)

		* [Spread](#spread)

		* [Destructuring](#destructuring)

	* [DOM](#dom)

		* [DOM Manipulation](#dom-manipulation)

	* [Events](#events)

	* [Objects](#objects)

		* [Prototype](#prototype)

			* [Classes](#classes)

	* [Regex](#regex)

	* [Template Literals](#template-literals)

	* [Promises](#promises)

		* [Callbacks](#callbacks)

		* [Async/await](#asyncawait)

		* [Fetch](#fetch)

	* [Web Animations](#web-animations)

	* [Modules](#modules)

	* [Intl](#intl)

	* [Canvas](#canvas)

	* [Documentation](#documentation)

	* [Best Practices](#best-practices-2)

	* [The Browser](#the-browser)

	* [Standardization](#standardization)

		* [W3C](#w3c)

		* [TC39](#tc39)

		* [WHATWG](#whatwg)

		* [Specifications](#specifications)

	* [Browser Engines](#browser-engines)

		* [Webkit](#webkit)

		* [Blink](#blink)

		* [Gecko](#gecko)

	* [HTTP](#http)

	* [The Internet](#the-internet)

	* [Polyfills](#polyfills)

	* [Debugging](#debugging)

		* [Developer console](#developer-console)

* [➤ Accessibility](#-accessibility)

	* [The why](#the-why)

	* [Screen Readers](#screen-readers)

	* [Accessibility tree](#accessibility-tree)

		* [ARIA](#aria)

		* [Accessible HTML](#accessible-html)

			* [Alt text](#alt-text)

		* [Accessible CSS](#accessible-css)

	* [Accessible forms](#accessible-forms)

	* [UI States](#ui-states)

	* [Keyboard Accessibility](#keyboard-accessibility)

		* [Focus](#focus)

	* [Accessible Colors](#accessible-colors)

	* [Laws & Policies](#laws--policies)

		* [Audits](#audits)

* [➤ Web Components](#-web-components)

	* [Custom Elements](#custom-elements)

	* [HTML Templates](#html-templates)

	* [Shadow DOM](#shadow-dom)

		* [Shadow Parts](#shadow-parts)

		* [Slots](#slots)

	* [Best practices](#best-practices)

	* [Constructible Stylesheets](#constructible-stylesheets)

	* [Form Participation](#form-participation)

* [➤ Progressive Webapps](#-progressive-webapps)

	* [API's](#apis)

	* [Storage](#storage)

	* [Routing](#routing)

		* [History API](#history-api)

	* [Service Workers](#service-workers)

		* [Offline first](#offline-first)

		* [Push notifications](#push-notifications)

	* [Web App manifest](#web-app-manifest)

	* [Add to homescreen](#add-to-homescreen)

	* [Pointer Events](#pointer-events)

	* [Loading Performance](#loading-performance)

	* [App shell](#app-shell)

	* [Render-Blocking Resources](#render-blocking-resources)

	* [Compression](#compression)

	* [Performance metrics](#performance-metrics)

		* [Largest Contentful Paint](#largest-contentful-paint)

		* [Total Blocking Time](#total-blocking-time)

		* [Time to Interactive](#time-to-interactive)

	* [Lazy Loading](#lazy-loading)

		* [Dynamic Import](#dynamic-import)

		* [Offscreen images](#offscreen-images)

	* [Critical Request Chains](#critical-request-chains)

	* [Tree shaking](#tree-shaking)

	* [Codesplitting](#codesplitting)

	* [PRPL Pattern](#prpl-pattern)

	* [Resource Prioritization](#resource-prioritization)

	* [Caching](#caching)

	* [Rendering Performance](#rendering-performance)

	* [Rendering](#rendering)

	* [Event loop](#event-loop)

		* [Microtask](#microtask)

		* [Stack](#stack)

		* [Heap](#heap)

	* [RAIL Model](#rail-model)

		* [requestAnimationFrame](#requestanimationframe)

		* [requestIdleCallback](#requestidlecallback)

	* [Critical Rendering Path](#critical-rendering-path)

	* [The Pixel Pipeline](#the-pixel-pipeline)

		* [Style calculations](#style-calculations)

		* [Transforms](#transforms-1)

		* [Paint areas](#paint-areas)

		* [Layout Trashing](#layout-trashing)

		* [Layers](#layers)

		* [Debounce](#debounce)

	* [CSS Containment](#css-containment)

	* [Web Workers](#web-workers)

	* [Security](#security)

	* [HTTPS](#https)

	* [Browser Sandbox](#browser-sandbox)

	* [OWASP](#owasp)

		* [Cross-Site Scripting](#cross-site-scripting)

		* [Clickjacking](#clickjacking)

	* [Content Security Policy](#content-security-policy)

	* [Audits](#audits-1)

	* [Performance budgets](#performance-budgets)

	* [Lighthouse](#lighthouse)

	* [Chrome DevTools](#chrome-devtools)

* [➤ Build tools](#-build-tools)

	* [Package Managers](#package-managers)

		* [NPM](#npm)

		* [Yarn](#yarn)

	* [Module Bundlers](#module-bundlers)

		* [Rollup](#rollup)

		* [Webpack](#webpack)

		* [Parcel](#parcel)

		* [Snowpack](#snowpack)

	* [Linters and formatters](#linters-and-formatters)

		* [Prettier](#prettier)

		* [ESLint](#eslint)

	* [Task Runners](#task-runners)

		* [NPM Scripts](#npm-scripts)

	* [Transpilers](#transpilers)

		* [Babel](#babel)

		* [Typescript](#typescript)

	* [CSS Pre-processors](#css-pre-processors)

		* [SASS](#sass)

		* [PostCSS](#postcss)

	* [Node.js](#nodejs)

* [➤ Frameworks & Libraries](#-frameworks--libraries)

	* [lit-element](#lit-element)

	* [Vue](#vue)

	* [React](#react)

	* [Angular](#angular)

	* [Svelte](#svelte)

	* [Stencil](#stencil)

* [➤ Testing](#-testing)

	* [Testing Methodologies](#testing-methodologies)

		* [Unit Testing](#unit-testing)

		* [Integration Testing](#integration-testing)

		* [System Testing](#system-testing)

		* [Acceptance Testing](#acceptance-testing)

		* [Smoke Testing](#smoke-testing)

		* [Performance Testing](#performance-testing)

		* [Usability Testing](#usability-testing)

		* [White Box Testing](#white-box-testing)

		* [Black Box Testing](#black-box-testing)

		* [Automated Testing](#automated-testing)

		* [Manual Testing](#manual-testing)

	* [Continuous integration](#continuous-integration)

	* [A/B Testing](#ab-testing)

	* [Test Runners](#test-runners)

		* [Karma](#karma)

		* [Mocha](#mocha)

		* [Jasmine](#jasmine)

		* [Cypress](#cypress)

		* [Ava](#ava)

	* [Best Practices](#best-practices-3)

* [➤ Architecture & paradigms](#-architecture--paradigms)

	* [Paradigms](#paradigms)

	* [Programming Paradigms](#programming-paradigms)

	* [Object Oriented Programming](#object-oriented-programming)

		* [S.O.L.I.D](#solid)

	* [Functional programming](#functional-programming)

		* [Recursion](#recursion)

		* [Higher-Order Functions](#higher-order-functions)

		* [Currying](#currying)

		* [Monads](#monads)

	* [Architecture](#architecture)

	* [Design Patterns](#design-patterns)

		* [Singleton](#singleton)

		* [Observer](#observer)

		* [Prototype](#prototype-1)

		* [Bridge](#bridge)

		* [Proxy](#proxy)

		* [Chain of responsibility](#chain-of-responsibility)

		* [Constructor](#constructor)

	* [CSS Methodologies](#css-methodologies)

		* [BEM](#bem)

		* [SMACSS](#smacss)

		* [OOCSS](#oocss)

* [➤ Team Collaboration](#-team-collaboration)

	* [Version Control](#version-control)

	* [Git](#git)

		* [Github](#github)

		* [Bitbucket](#bitbucket)

	* [Management](#management)

	* [Agile Development](#agile-development)

		* [Scrum](#scrum)

		* [Kanban](#kanban)

	* [Waterfall Development](#waterfall-development)

	* [Test Driven Development](#test-driven-development)

* [➤ Design & UX](#-design--ux)

	* [Color Theory](#color-theory)

		* [Color Wheel](#color-wheel)

	* [Typography](#typography)

		* [Font Size](#font-size)

		* [Line Spacing](#line-spacing)

	* [C.R.A.P](#crap)

		* [Contrast](#contrast)

		* [Repetition](#repetition)

		* [Alignment](#alignment)

		* [Proximity](#proximity)

	* [Consistency](#consistency)

	* [Spacing](#spacing)

	* [Error Handling](#error-handling)

	* [Loading](#loading)

	* [The Golden Ratio](#the-golden-ratio)

	* [Mobile First](#mobile-first)

		* [Hit Targets](#hit-targets)

	* [Design Systems](#design-systems)

		* [Material Design](#material-design)

		* [Fluent Design](#fluent-design)

	* [Accessibility](#accessibility)

	* [Best Practices](#best-practices-4)

* [➤ The Modern Web](#-the-modern-web)

	* [Streams](#streams)

		* [Media Streams](#media-streams)

		* [Media Recorder](#media-recorder)

		* [Web RTC](#web-rtc)

		* [Screen Capture](#screen-capture)

		* [Generators](#generators)

	* [Speech Synthesis](#speech-synthesis)

	* [Web Sockets](#web-sockets)

	* [Geolocation](#geolocation)

	* [Device orientation & motion](#device-orientation--motion)

	* [Fullscreen](#fullscreen)

	* [Variable Fonts](#variable-fonts)

	* [HTTP/2](#http2)

	* [Payment Request API](#payment-request-api)

	* [Web Audio](#web-audio)

	* [Observers](#observers)

		* [Mutation Observer](#mutation-observer)

		* [Intersection Observer](#intersection-observer)

		* [Resize Observer](#resize-observer)

		* [Performance Observer](#performance-observer)

	* [Scrollsnapping](#scrollsnapping)

	* [Web Assembly](#web-assembly)

	* [Beacon](#beacon)

	* [Clipboard](#clipboard)

	* [Share](#share)

	* [Performance API](#performance-api)

	* [Gamepad API](#gamepad-api)

	* [Speech Recognition](#speech-recognition)

	* [Interaction Media Queries](#interaction-media-queries)

	* [Browser Extensions](#browser-extensions)

	* [Pointer Lock API](#pointer-lock-api)

	* [Picture In Picture](#picture-in-picture)

	* [Proxies](#proxies)

	* [Houdini](#houdini)

	* [Project Fugu](#project-fugu)

	* [Web Authentication API](#web-authentication-api)

		* [Credentials Manager API](#credentials-manager-api)

	* [Native File System](#native-file-system)

	* [Shape Detection](#shape-detection)

	* [Web Bluetooth](#web-bluetooth)

	* [Web USB](#web-usb)

	* [Web XR](#web-xr)

	* [Presentation](#presentation)

	* [Network Information API](#network-information-api)

* [➤ Algorithms & Data structures](#-algorithms--data-structures)

	* [Data structures](#data-structures)

	* [Arrays](#arrays)

	* [Queues & Stacks](#queues--stacks)

	* [Trees](#trees)

		* [Binary Indexed Tree](#binary-indexed-tree)

		* [Heap](#heap-1)

		* [Red-black Tree](#red-black-tree)

		* [Trie](#trie)

		* [K-D Tree](#k-d-tree)

	* [Hash Tables](#hash-tables)

	* [Linked Lists](#linked-lists)

	* [Graphs](#graphs)

	* [Analysis](#analysis)

	* [Time complexity](#time-complexity)

		* [Cost model](#cost-model)

		* [Order of Growth](#order-of-growth)

		* [Big O notation](#big-o-notation)

	* [Space Complexity](#space-complexity)

	* [Algorithms](#algorithms)

	* [Sorting](#sorting)

		* [Insertion Sort](#insertion-sort)

		* [Quicksort](#quicksort)

		* [Mergesort](#mergesort)

		* [Heapsort](#heapsort)

	* [Searching](#searching)

		* [Binary Search](#binary-search)

		* [Breadth First Search](#breadth-first-search)

		* [Depth First Search](#depth-first-search)

		* [Dijkstra's Algorithm](#dijkstras-algorithm)

		* [String Search](#string-search)

	* [Hashing](#hashing)

* [➤ Databases & Servers](#-databases--servers)

	* [Databases](#databases)

	* [Relational Databases](#relational-databases)

		* [SQL](#sql)

		* [MySQL](#mysql)

		* [PostgreSQL](#postgresql)

	* [Non-relational Databases](#non-relational-databases)

		* [Redis](#redis)

		* [MongoDB](#mongodb)

	* [Data Modelling](#data-modelling)

		* [ER Diagram](#er-diagram)

		* [Keys](#keys)

	* [Indexing](#indexing)

	* [Data Integrity](#data-integrity)

	* [Normalization](#normalization)

		* [Functional Dependencies](#functional-dependencies)

		* [Normal Forms](#normal-forms)

	* [Transactions](#transactions)

		* [ACID](#acid)

		* [Serializability](#serializability)

		* [Locks](#locks)

			* [Deadlocks](#deadlocks)

		* [Precedence graph](#precedence-graph)

	* [Servers](#servers)

	* [Architectural Models](#architectural-models)

		* [Client-Server](#client-server)

		* [Proxy Server](#proxy-server)

		* [Peer-To-Peer](#peer-to-peer)

	* [Middleware](#middleware)

	* [Request-Reply Protocol](#request-reply-protocol)

		* [UDP](#udp)

		* [TCP](#tcp)

	* [REST API](#rest-api)

		* [CRUD](#crud)

	* [Express](#express)

	* [GraphQL](#graphql)

	* [GNU/Linux](#gnulinux)

	* [Docker](#docker)

	* [SSH](#ssh)

* [➤ Contributors](#-contributors)

* [➤ License](#-license)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#faq)

## ➤ FAQ

### What is Web Skills?

Web Skills is a visual overview of useful skills to learn as a web developer. It is useful for people who just started learning about web development and for people who have been in the field for years and want to learn new things. As a beginner, I would encourage you not to see this website as the definitive list of what you need to know but as an example of what you can learn and where you can start. The skills are arranged in chronological order based on what learning path I recommend you to take but feel free to jump around freely.

### How did you choose the skills?

		

The skills are derived from a combination of 10 years of experience, a bachelor in software engineering and what I personally find to be the most useful to know on a day-to-day basis. Therefore, you'll notice that it's missing a lot of things. For example, I am not a PHP developer - because of this, PHP is not included. If you were a PHP developer, this overview would probably look a lot different.

### How can I support you?

I am spending my spare time building Web Skills for free because I want to help people get into web development. My motivation comes from people finding Web Skills useful, so if you like the project feel free to support me in any way you like! For example, you are more than welcome to become a [stargazer](https://github.com/andreasbm/web-skills/stargazers), share Web Skills with your friends and followers or create blog articles linking to Web Skills. If you want to, it will absolutely make my day if you [support me with a cup of coffee](https://www.buymeacoffee.com/AndreasMehlsen)! <3

### How can I get involved?

You are welcome to get involved in any way you like. If you want to, you can go to the [issues page](https://github.com/andreasbm/web-skills/issues) and help me fix the spelling, fix issues or suggest some new features. Any involvement is highly appreciated!

### How can I keep track of what skills I know?

If you scroll to the bottom of the page, you will find a button that says "Sign in with Google". If you click this button and sign in, you will be able to mark skills as completed.

### I am overwhelmed! Help me!

I totally understand if you are a bit overwhelmed by the amount of skills on the page – but I can assure you that this overview includes much, much more than most people will ever need to know. My main goal is to provide a visual overview of web development and make people hungry for learning more. One of the things I absolute love about being a developer is learning new skills. I think it is amazing to be in a field where you can do what you do for a lifetime and still learn something new! People cannot be an expert in every skill on this page so try to find what excites you the most and become really good at that.

### Why haven't you included XYZ Technology?

The skills are based on what I personally find to be the most useful on a day-to-day basis. If you think something really important is missing, you can always suggest it on the [issues page](https://github.com/andreasbm/web-skills/issues).

### What does the "experimental" banner mean?

When a skill is described as experimental, it means that the technology is immature and currently in the process of being added to the Web platform (or considered for addition). Think carefully before you start using experimental technology in any kind of production project. The definition used in Web Skills is based on the excellent definition used on [MDN](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental). You are very welcome to open an issue if you see a skill you believe should be marked as "experimental" or have the banner removed.

### How can I get in contact with you?

Reach out to me on Twitter at [@AndreasMehlsen](https://twitter.com/AndreasMehlsen) or take a look at [my website](https://andreasbm.github.io) if you want to learn more about what other projects I'm working on.

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#fundamentals)

## ➤ Fundamentals

### HTML

### Syntax

Learn the basics of HTML and get comfortable with it's syntax and main concepts.

* [ ] [ MDN - HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)

* [ ] [ MDN - Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML)

* [ ] [ Codecademy - Learn HTML](https://www.codecademy.com/learn/learn-html)

#### Basic Tags

Get familiar with the basic HTML tags

* [ ] [ MDN - HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

* [ ] [ Tutorialspoint - Basic HTML tags](https://www.tutorialspoint.com/html/html_basic_tags.htm)

* [ ] [ Elated - First 10 HTML tags](https://www.elated.com/first-10-html-tags/)

* [ ] [ W3Schools - HTML tags](https://www.w3schools.com/tags/ref_byfunc.asp)

### Forms

Learn how to design efficient forms, validating them effectively and keeping the user informed along the way.

* [ ] [ MDN - HTML forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms)

* [ ] [ Google Web - Forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms/)

* [ ] [ W3Schools - Forms](https://www.w3schools.com/html/html_forms.asp)

### SEO

Learn how to make your content search-friendly.

* [ ] [ web.dev - Discoverable](https://web.dev/discoverable)

* [ ] [ Google Search - Get Started](https://developers.google.com/search/docs/guides/get-started)

* [ ] [ Google Search - SEO basics](https://developers.google.com/search/docs/guides/javascript-seo-basics)

* [ ] [ web.dev - SEO audits](https://web.dev/lighthouse-seo)

#### Discoverable Content

Learn how to structure your HTML in a way that provides a rich experience when sharing it online.

* [ ] [ Google Web - Social Discovery](https://developers.google.com/web/fundamentals/discovery/social-discovery)

* [ ] [ Google Search - Search Features](https://developers.google.com/search/docs/guides/search-features)

* [ ] [ Google Search - Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data)

* [ ] [ web.dev - Easily discoverable](https://web.dev/discoverable)

### Svg

Learn how to work with SVG files to make graphics look crisp across all screen resolutions.

* [ ] [ MDN - Adding vector graphics to the Web](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)

* [ ] [ SVG on the web](https://svgontheweb.com/)

### Best Practices

Learn the best practices of writing HTML.

* [ ] [ MDN - HTML guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML)

* [ ] [ W3Schools - HTML Coding Conventions](https://www.w3schools.com/html/html5_syntax.asp)

### CSS

### Syntax

Learn the basics of CSS and get comfortable with it's syntax and main concepts.

* [ ] [ MDN - CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)

* [ ] [ W3Schools - CSS Tutorial](https://www.w3schools.com/css/default.asp)

* [ ] [ Supercharged - CSS Selectors](https://www.youtube.com/watch?v=IKho_xDKaLw)

* [ ] [ MDN - CSS first steps](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)

* [ ] [ MDN - CSS building blocks](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks)

* [ ] [ MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)

* [ ] [ MDN - CSS Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax)

### Selectors

Learn about CSS selectors and how to effeciently target DOM elements.

* [ ] [ MDN - CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)

* [ ] [ MDN - All selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

* [ ] [ CSS Tricks - Child and Sibling Selectors](https://css-tricks.com/child-and-sibling-selectors/)

* [ ] [ CSS Tricks - All Selectors](https://css-tricks.com/almanac/selectors/)

* [ ] [ W3Schools - CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)

#### Specificity

Learn what specificity means and how to use it when writing CSS.

* [ ] [ MDN - Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

* [ ] [ MDN - Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)

* [ ] [ dev.to - CSS Specificity](https://dev.to/emmawedekind/css-specificity-1kca)

* [ ] [ Specificity Calculator](https://specificity.keegan.st/)

* [ ] [ W3Schools - CSS Specificity](https://www.w3schools.com/css/css_specificity.asp)

#### Pseudo Selectors

Learn how to use pseudo selectors.

* [ ] [ MDN - Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)

* [ ] [ CSS Tricks - Meet the Pseudo Class Selectors](https://css-tricks.com/pseudo-class-selectors/)

* [ ] [ When do the :hover, :focus, and :active pseudo-classes apply?](https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/)

* [ ] [ W3Schools - CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)

* [ ] [ W3Schools - CSS Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)

### Box Model

Learn what the CSS box model means.

* [ ] [ MDN - Introduction to the CSS basic box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)

* [ ] [ MDN - The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)

* [ ] [ CSS Tricks - Inheriting box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)

#### Margin Collapsing

Learn about margin collapsing.

* [ ] [ MDN - Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)

* [ ] [ Margin Collapse in CSS: What, Why, and How](https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0)

* [ ] [ CSS Tricks - What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/)

* [ ] [ What's the Deal with Collapsible Margins?](https://bitsofco.de/collapsible-margins/)

* [ ] [ What’s the Deal with Margin Collapse?](https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/)

### Colors

Learn the different ways you can define colors in CSS.

* [ ] [ MDN - Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)

* [ ] [ MDN - ](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)

* [ ] [ W3Schools - CSS Colors](https://www.w3schools.com/css/css_colors.asp)

### Calc

Learn how to use the CSS calc function.

* [ ] [ MDN - Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)

* [ ] [ CSS Tricks - A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/)

### Layout

Learn the different layout types for web.

* [ ] [ Chrome Dev - Basic Layout](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/basic-layout)

* [ ] [ W3Schools - CSS Website Layout](https://www.w3schools.com/css/css_website_layout.asp)

* [ ] [ MDN - Document and website structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)

* [ ] [ MDN - CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)

#### Flex

Learn how to create layouts using flexbox.

* [ ] [ MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

* [ ] [ A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

* [ ] [ MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)

* [ ] [ Flexbox Froggy](https://flexboxfroggy.com/)

* [ ] [ Flexbox Defense](http://flexboxdefense.com)

#### Grid

Learn how to create layouts using CSS Grid.

* [ ] [ MDN - Grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)

* [ ] [ A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

* [ ] [ MDN - CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

* [ ] [ CSS Grid Garden](https://cssgridgarden.com/)

* [ ] [ Supercharged - CSS Grids](https://www.youtube.com/watch?v=AqwPrR7hklE)

### Transforms

Learn the different ways to transform elements through CSS.

* [ ] [ MDN - transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)

* [ ] [ CSS Tricks - Transform](https://css-tricks.com/almanac/properties/t/transform/)

#### Animations

Learn how to animate elements through CSS using keyframes.

* [ ] [ MDN - Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

* [ ] [ CSS Tricks - Animation](https://css-tricks.com/almanac/properties/a/animation/)

### Responsive Design

Learn how to make your website responsive so it works across different screen sizes.

* [ ] [ MDN - Responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)

* [ ] [ Responsive Web Design Fundamentals by Google](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)

* [ ] [ Google Dev - Responsive Design](https://developers.google.com/web/fundamentals/design-and-ux/responsive)

* [ ] [ Google Dev - UX Patterns](https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns)

* [ ] [ Google Dev - Responsive Content](https://developers.google.com/web/fundamentals/design-and-ux/responsive/content)

* [ ] [ Codelabs - Responsive Design](https://codelabs.developers.google.com/codelabs/pwa-responsive-design/index.html?index=..%2F..dev-pwa-training#0)

#### Media Queries

Learn how use media queries to build responsive layout.

* [ ] [ CSS Tricks - CSS Media Queries & Using Available Space](https://css-tricks.com/css-media-queries/)

* [ ] [ MDN - Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

* [ ] [ MDN - Using Media Queries for Accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)

#### Relative Units

Learn how to use relative units for properties such as font sizes and spacing.

* [ ] [ MDN - Sizing items in CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)

* [ ] [ MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)

* [ ] [ The CSS Workshop - Relative Units](https://thecssworkshop.com/lessons/relative-units)

* [ ] [ CSS Tricks - Fun with Viewport Units](https://css-tricks.com/fun-viewport-units/)

* [ ] [ dev.to - 15 CSS Relative units](https://dev.to/bytegasm/15-css-relative-units-how-many-do-you-know-em-rem-ex-cap-ch-ic-6m)

#### Images

Learn how to make images responsive, always showing the best possible version for the screen size.

* [ ] [ Google Devs - Responsive Images](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)

* [ ] [ MDN - Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

### CSS Variables

Learn how to define and use CSS variables.

* [ ] [ MDN - Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

* [ ] [ Google Devs - CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care)

* [ ] [ dev.to - CSS Quickies: CSS Variables](https://dev.to/lampewebdev/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily-1i0i)

* [ ] [ CSS Variables explained with 5 examples](https://codeburst.io/css-variables-explained-with-5-examples-84adaffaa5bd)

### Best Practices

Learn the best practices of writing CSS.

* [ ] [ MDN - CSS guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS)

* [ ] [ MDN - Organizing your CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)

* [ ] [ Speckyboy - Good and bad CSS practices](https://speckyboy.com/good-bad-css-practices/)

### Javascript

### Syntax

Learn the basics of Javascript and get comfortable with it's syntax and main concepts.

* [ ] [ MDN - Javascript First Steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps)

* [ ] [ MDN - Javascript Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

* [ ] [ MDN - Javascript Building Blocks](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks)

#### Spread

Learn how the spread syntax can help you when working with arrays.

* [ ] [ MDN - Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

* [ ] [ Freecodecamp - An introduction to Spread syntax](https://www.freecodecamp.org/news/an-introduction-to-spread-syntax-in-javascript-fba39595922c/)

* [ ] [ Object rest and spread properties](https://v8.dev/features/object-rest-spread)

#### Destructuring

Learn how destructuring can help you when working with objects.

* [ ] [ MDN - Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

* [ ] [ MDN - ES6 In Depth: Destructuring](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/)

* [ ] [ javascript.info - Destructuring assignment](https://javascript.info/destructuring-assignment)

### DOM

Learn how the HTML is represented as objects that comprise the structure and content of a document.

* [ ] [ MDN - DOM Introduction](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

* [ ] [ Freecodecamp - What's the DOM](https://www.freecodecamp.org/news/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d/)

* [ ] [ Introduction to the DOM](https://learn.co/lessons/introduction-to-the-dom)

* [ ] [ htmldom.dev](https://htmldom.dev/)

#### DOM Manipulation

Learn how to query HTML elements through Javascript and manipulate them.

* [ ] [ MDN - Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)

* [ ] [ Supercharged - querySelector](https://www.youtube.com/watch?v=s0vg_H9hBuU)

### Events

Learn how to dispatch and listen for events.

* [ ] [ MDN - Introduction to events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)

* [ ] [ MDN - Creating and triggering events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)

* [ ] [ Event Bubbling and Event Capturing in JavaScript](https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e)

* [ ] [ Freecodecamp - A simplified explanation of event propagation](https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/)

* [ ] [ JavaScript Events Explained](https://flaviocopes.com/javascript-events/)

* [ ] [ MDN - addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

* [ ] [ MDN - removeEventListener(](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)

* [ ] [ Event order](https://www.quirksmode.org/js/events_order.html)

### Objects

Learn how to create and use objects.

* [ ] [ MDN - Introducing JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects)

* [ ] [ MDN - Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

* [ ] [ javascript.info - Objects](https://javascript.info/object)

* [ ] [ MDN - this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

* [ ] [ W3Schools - The JavaScript this Keyword](https://www.w3schools.com/js/js_this.asp)

* [ ] [ MDN - bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)

* [ ] [ MDN - new operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)

* [ ] [ MDN - new.target](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target)

* [ ] [ Data Structures: Objects and Arrays](https://scotch.io/courses/10-need-to-know-javascript-concepts/data-structures-objects-and-arrays)

#### Prototype

Learn how to extend objects and functions through its prototype.

* [ ] [ The prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)

* [ ] [ Prototypes in JavaScript](https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b)

* [ ] [ dev.to - JavaScript Visualized: Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co)

##### Classes

Learn how to define and use classes. Get somewhat comfortable with some of the object oriented concepts such as inheritence and encapsulation.

* [ ] [ MDN - Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)

* [ ] [ Medium - ES6 Classes](https://medium.com/@luke_smaki/javascript-es6-classes-8a34b0a6720a)

* [ ] [ MDN - Inheritance](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)

* [ ] [ MDN - Object Oriented Programming](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)

* [ ] [ MDN - super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)

### Regex

Learn how to use regex to extract information from strings.

* [ ] [ MDN - Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)

* [ ] [ javascript.info - Regular expressions](https://javascript.info/regular-expressions)

* [ ] [ MDN - RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)

### Template Literals

Learn how template literals and tagged templates and help you manipulate strings.

* [ ] [ MDN - Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

* [ ] [ MDN - ES6 In Depth: Template strings](https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/)

* [ ] [ Google Devs - Getting Literal With ES6 Template Strings](https://developers.google.com/web/updates/2015/01/ES6-Template-Strings)

### Promises

Learn how to use promises and what asynchronous code means.

* [ ] [ Google Devs - JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)

* [ ] [ MDN - Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

* [ ] [ Master the JavaScript Interview: What is a Promise?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261)

#### Callbacks

Learn how to use callbacks and why they are not always a good idea.

* [ ] [ MDN - Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)

* [ ] [ JavaScript: What the heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)

* [ ] [ javascript.info - Callbacks](https://javascript.info/callbacks)

#### Async/await

Learn how to use the async and await keywords to make it easier to write asynchronous code.

* [ ] [ MDN - async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)

* [ ] [ Google Devs - Async functions](https://developers.google.com/web/fundamentals/primers/async-functions)

* [ ] [ javascript.info - Async/await](https://javascript.info/async-await)

#### Fetch

Learn how to use the fetch API to fetch data.

* [ ] [ Google Devs - Introduction to fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch)

* [ ] [ Google Devs - Networking](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/networking)

* [ ] [ Freecodecamp - Fetch practical guide](https://www.freecodecamp.org/news/a-practical-es6-guide-on-how-to-perform-http-requests-using-the-fetch-api-594c3d91a547/)

* [ ] [ MDN - CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

* [ ] [ Alligator - Fetch API](https://alligator.io/js/fetch-api/)

* [ ] [ Supercharged - Fetch](https://www.youtube.com/watch?v=GiI77ya60yk)

* [ ] [ Codelabs - Fetch ](https://codelabs.developers.google.com/codelabs/pwa-fetch/index.html?index=..%2F..dev-pwa-training#0)

### Web Animations

Learn how to use web animations to animate elements in the DOM.

* [ ] [ Google Devs - Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations)

* [ ] [ MDN - Using The Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)

* [ ] [ CSS Tricks - CSS Animations vs Web Animations API](https://css-tricks.com/css-animations-vs-web-animations-api/)

### Modules

Learn how to modularize your code into ES6 modules using the export and import keywords.

* [ ] [ MDN - Export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)

* [ ] [ MDN - Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)

* [ ] [ V8 - Modules](https://v8.dev/features/modules)

* [ ] [ Freecodecamp - A Practical guide to ES6 modules](https://www.freecodecamp.org/news/how-to-use-es6-modules-and-why-theyre-important-a9b20b480773/)

### Intl

Learn how to localize your website using the Intl API.

* [ ] [ MDN - Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)

* [ ] [ MDN - Date Time Format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)

* [ ] [ New Intl APIs in JavaScript](https://blog.bitsrc.io/new-intl-apis-in-javascript-c50dc89d2cf3)

### Canvas

Learn how to paint graphics onto a canvas.

* [ ] [ MDN - Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)

* [ ] [ MDN - Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)

* [ ] [ CSS Tricks - Manipulating Pixels Using Canvas](https://css-tricks.com/manipulating-pixels-using-canvas/)

### Documentation

Learn how to create good documentation and why it is important.

* [ ] [ Getting Started with JSDoc](https://jsdoc.app/about-getting-started.html)

* [ ] [ A beginner’s guide to writing documentation](https://www.writethedocs.org/guide/writing/beginners-guide-to-docs/)

* [ ] [ Write Good Documentation](https://hackernoon.com/write-good-documentation-6caffb9082b4)

* [ ] [ The power of jsDoc](https://dev.to/gmartigny/the-power-of-jsdoc-272d)

* [ ] [ Document your Javascript code with JSDoc](https://dev.to/paulasantamaria/document-your-javascript-code-with-jsdoc-2fbf)

### Best Practices

Learn the best practices of writing Javascript.

* [ ] [ MDN - JavaScript guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/JavaScript)

* [ ] [ Airbnb - JavaScript Style Guide](https://github.com/airbnb/javascript)

* [ ] [ Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwaldron/idiomatic.js/)

* [ ] [ 5 JavaScript Style Guides](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa)

* [ ] [ JavaScript Style Guide and Coding Conventions](https://www.w3schools.com/js/js_conventions.asp)

### The Browser

### Standardization

Learn why web standards are important and how new specifications are standardised.

* [ ] [ Wikipedia - Web Standards](https://en.wikipedia.org/wiki/Web_standards)

* [ ] [ What Are Web Standards?](https://www.elcom.com.au/resources/blog/web-standards)

* [ ] [ A Comprehensive Explanation of Web Standards](https://robertnyman.com/2007/05/21/what-are-web-standards-a-comprehensive-explanation-of-what-is-comprised-in-the-term/)

#### W3C

Learn what W3C are doing and how they are moving the web forward.

* [ ] [ W3C - About](https://www.w3.org/standards/about.html)

* [ ] [ W3C - Standards](https://www.w3.org/standards/)

* [ ] [ W3C - Process](http://webdiy.org/w3c/)

* [ ] [ Web Standards Guide](https://www.smashingmagazine.com/2019/01/web-standards-guide/)

* [ ] [ W3C - Groups](https://www.w3.org/community/groups/)

* [ ] [ The W3C At Twenty-Five](https://www.smashingmagazine.com/2019/10/happy-birthday-w3c/)

#### TC39

Learn what TC39 are doing and how they are moving the web forward.

* [ ] [ The TC39 process for ECMAScript features](https://2ality.com/2015/11/tc39-process.html)

* [ ] [ Github - TC39](https://github.com/tc39)

* [ ] [ Ecma International - Programme of work](https://www.ecma-international.org/memento/tc39.htm)

* [ ] [ Wikipedia - Ecma International](https://en.wikipedia.org/wiki/Ecma_International)

#### WHATWG

Learn what WHATWG are doing and how they are moving the web forward.

* [ ] [ WHATWG - FAQ](https://whatwg.org/faq)

* [ ] [ WHATWG - Standards](https://spec.whatwg.org/)

* [ ] [ MDN - WHATWG](https://developer.mozilla.org/en-US/docs/Glossary/WHATWG)

* [ ] [ W3C vs. WHATWG HTML5 Specs](https://dzone.com/articles/w3c-vs-whatwg-html5-specs)

* [ ] [ WHATWG - HTML](https://html.spec.whatwg.org/)

* [ ] [ Wikipedia - WHATWG](https://en.wikipedia.org/wiki/WHATWG)

#### Specifications

Learn how to read specifications developed by the standards committees.

* [ ] [ How to Read the ECMAScript Specification](https://timothygu.me/es-howto/)

* [ ] [ How to Read W3C Specs](https://alistapart.com/article/readspec/)

* [ ] [ Learning CSS by reading specs](https://www.chenhuijing.com/blog/learning-css-by-reading-specifications/)

* [ ] [ Understanding the CSS Specifications](https://www.w3.org/Style/CSS/read.en.html)

### Browser Engines

Learn what a browser engine is and get an overview of the browser landscape and market share.

* [ ] [ Medium - Browser Engines](https://medium.com/@jonbiro/browser-engines-chromium-v8-blink-gecko-webkit-98d6b0490968)

* [ ] [ Wikipedia - Comparison](https://en.wikipedia.org/wiki/Comparison_of_browser_engines)

* [ ] [ HTML5 Rocks - How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)

* [ ] [ Demystifying Browsers](https://textslashplain.com/2020/02/09/demystifying-browsers/)

#### Webkit

Learn about the Webkit browser engine.

* [ ] [ Webkit](https://webkit.org/)

#### Blink

Learn about the Blink browser engine.

* [ ] [ Blink](https://en.wikipedia.org/wiki/Blink_(browser_engine))

#### Gecko

Learn about the Gecko browser engine.

* [ ] [ Gecko](https://en.wikipedia.org/wiki/Gecko_(software))

### HTTP

Learn how data is distributed through the HTTP protocol.

* [ ] [ MDN - HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)

* [ ] [ MDN - HTTP Glossary](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)

* [ ] [ MDN - An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)

* [ ] [ Wikipedia - Hypertext Transfer Protocol](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)

### The Internet

Learn the basics of how the internet works.

* [ ] [ MDN - How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)

* [ ] [ Youtube - How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)

* [ ] [ Explain That Stuff - Internet](https://www.explainthatstuff.com/internet.html)

* [ ] [ Stanford - How Does the Internet Work?](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)

* [ ] [ How the Internet Works](https://blog.hubspot.com/marketing/how-the-internet-works)

### Polyfills

Learn how it is possible to use polyfills to increase the browser support for your website.

* [ ] [ MDN - Polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)

* [ ] [ Introduction To Polyfills & Their Usage](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-polyfills-their-usage-9cd6db4b1923)

* [ ] [ W3C - Polyfills and the evolution of the Web](https://www.w3.org/2001/tag/doc/polyfills/)

* [ ] [ Can I use](http://caniuse.com/)

### Debugging

Learn about the basics concepts of debugging.

* [ ] [ Google Devs - Inspect and Edit Pages and Styles](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/)

* [ ] [ MDN - Cross browser testing](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing)

* [ ] [ 5 things to remember for better debugging of your code](https://medium.com/dev-bits/5-things-to-remember-for-better-debugging-of-your-code-94b9bc3fb3df)

#### Developer console

Learn how to use the developer console to debug your code.

* [ ] [ MDN - Console](https://developer.mozilla.org/en-US/docs/Web/API/Console)

* [ ] [ Google Devs - Console API Reference](https://developers.google.com/web/tools/chrome-devtools/console/api)

* [ ] [ Google Devs - Get Started with Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/javascript)

* [ ] [ Google Devs - Console Utilities API Reference](https://developers.google.com/web/tools/chrome-devtools/console/utilities)

* [ ] [ MDN - Debugging CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS)

* [ ] [ MDN - Debugging HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)

* [ ] [ javascript.info - Debugging in Chrome](https://javascript.info/debugging-chrome)

* [ ] [ 14 JavaScript debugging tips](https://raygun.com/javascript-debugging-tips)

* [ ] [ The definitive guide to debugging JavaScript](https://flaviocopes.com/javascript-debugging/)

* [ ] [ Youtube - Chrome DevTools 101](https://www.youtube.com/watch?v=H0XScE08hy8)

* [ ] [ Chrome Devs - Quickly monitor events](https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel)

* [ ] [ Youtube - 14 Must Know Chrome Dev Tools Tricks](https://www.youtube.com/watch?v=xkzDaKwinA8)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#accessibility)

## ➤ Accessibility

### The why

Learn what accessibility is and why it is important.

* [ ] [ Google Devs - Accessibility Fundamentals](https://developers.google.com/web/fundamentals/accessibility/)

* [ ] [ A11ycasts with Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)

* [ ] [ Udacity - Chromevox Lite](http://udacity.github.io/ud891/lesson3-semantics-built-in/02-chromevox-lite/)

* [ ] [ Dev.to - Why Accessibility Matters](https://dev.to/lhoffmanwg1/why-accessibility-matters-39nl)

* [ ] [ Abilitynet - Why Accessibility Matters](https://www.abilitynet.org.uk/why-accessibility-matters)

* [ ] [ Udacity - Web Accessibility](https://www.udacity.com/course/web-accessibility--ud891)

* [ ] [ Youtube - Headings, Landmarks, and Tabs](https://www.youtube.com/watch?v=HE2R86EZPMA)

### Screen Readers

Learn about assistive technology such as screen readers that reads sections of the page aloud based on the current focus.

* [ ] [ The A11Y Project - Screen Reader Myths](https://a11yproject.com/posts/people-who-use-screen-readers-dont-use-javascript/)

* [ ] [ The A11Y Project - NVDA Screen Reader](https://a11yproject.com/posts/getting-started-with-nvda/)

* [ ] [ The A11Y Project - OS X Voiceover](https://a11yproject.com/posts/getting-started-with-voiceover/)

* [ ] [ Webaim - Screen Reader Survey](https://webaim.org/projects/screenreadersurvey7/)

### Accessibility tree

Learn about the accessibility tree and how assistive technology uses it.

* [ ] [ Google Devs - The Accessibility Tree](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree)

#### ARIA

Learn how to use ARIA descriptions an labels to help assistive technology understanding your website.

* [ ] [ Google Devs - ARIA Labels](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships)

* [ ] [ Google Devs - Hiding and updating content](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/hiding-and-updating-content)

* [ ] [ The A11Y Project - ARIA States](https://a11yproject.com/posts/ARIA-states/)

* [ ] [ The A11Y Project - ARIA Properties](https://a11yproject.com/posts/ARIA-properties/)

#### Accessible HTML

Learn how to write HTML in such as way that assistive technology better understands it.

* [ ] [ Google Devs - Introduction to Semantics](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/)

* [ ] [ MDN - Accessibility HTML](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)

* [ ] [ Webaim - Skip navigation](https://webaim.org/techniques/skipnav/)

* [ ] [ w3c - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)

* [ ] [ Freecodecamp - Semantic Elements](https://guide.freecodecamp.org/html/html5-semantic-elements/)

##### Alt text

Learn how to use the alt attribute to provide a useful text alternative to this image.

* [ ] [ Google Devs - Text Alternatives for Images](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/text-alternatives-for-images)

* [ ] [ Webaim - Accessible Images](https://webaim.org/techniques/images/)

* [ ] [ Webaim - Alternative text](https://webaim.org/techniques/alttext/)

#### Accessible CSS

Learn how to write CSS in such as way that assistive technology better understands it.

* [ ] [ Webaim - CSS](https://webaim.org/techniques/css/)

### Accessible forms

Learn how to build accessible forms that makes it usable to as many people as possible.

* [ ] [ Webaim - Forms](https://webaim.org/techniques/forms/)

* [ ] [ Itnext - Form Accessibility Gudie](https://itnext.io/form-accessibility-a-practical-guide-4062b7e2dd14)

### UI States

Learn how to make the state of each UI element clear.

* [ ] [ Google Devs - Accessible Styles](https://developers.google.com/web/fundamentals/accessibility/accessible-styles)

### Keyboard Accessibility

Learn how to make it easy for keyboard users to navigate your site.

* [ ] [ Webaim - Keyboard](https://webaim.org/techniques/keyboard/)

* [ ] [ Smashing Magazine - Web with just a keyboard](https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/)

#### Focus

Learn how to create a sensible tab order and how to make it easy for the users to locate the currently focused element.

* [ ] [ web.dev - Control focus with tabindex](https://web.dev/control-focus-with-tabindex/)

* [ ] [ Google Devs - Focus](https://developers.google.com/web/fundamentals/accessibility/focus/)

* [ ] [ Google Devs - Dom Order Matters](https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters)

* [ ] [ Google Devs - Using Tabindex](https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex)

* [ ] [ Google Devs - Track Focus](https://developers.google.com/web/tools/chrome-devtools/accessibility/focus)

* [ ] [ MDN - :focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)

* [ ] [ MDN - :focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)

### Accessible Colors

Learn how to select colors in such a way that users, including those with visual disabilities, can perceive the content on the page.

* [ ] [ Webaim - Contrast and Color](https://webaim.org/articles/contrast/)

* [ ] [ The A11Y Project - Check contrast](https://a11yproject.com/posts/check-contrast-with-mobile-device/)

* [ ] [ The A11Y Project - What is color contrast?](https://a11yproject.com/posts/what-is-color-contrast/)

* [ ] [ Designing accessible color systems](https://stripe.com/en-dk/blog/accessible-color-systems)

### Laws & Policies

Learn about the governmental policies related to web accessibility.

* [ ] [ W3C - Laws & Policies](https://www.w3.org/WAI/policies/)

* [ ] [ Webaim - Laws around the world](https://webaim.org/articles/laws/world/)

* [ ] [ Webaim - Section 508](https://webaim.org/standards/508/checklist)

* [ ] [ Webaim - WCAG 2 Checklist](https://webaim.org/standards/wcag/checklist)

* [ ] [ A11Y.dev - Lawsuits](https://a11y.dev/470-digital-accessibility-cases-were-filed-in-q3-2018/)

#### Audits

Learn how to conduct an accessibility review to improve the overall experience of using your site. Remember, good accessibility equals good UX!

* [ ] [ web.dev - Accessibility audits](https://web.dev/lighthouse-accessibility)

* [ ] [ Google Devs - How to review](https://developers.google.com/web/fundamentals/accessibility/how-to-review)

* [ ] [ Webaim - Accessibility Tools](https://webaim.org/articles/tools/)

* [ ] [ Google Devs - Accessibility Reference](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference)

* [ ] [ Webaim - Wave](http://wave.webaim.org/)

* [ ] [ Google Chrome - NoCoffee Extension](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)

* [ ] [ Digital A11Y - Accessibility Plugins](https://www.digitala11y.com/accessibility-plug-ins-ie-chrome-firefox-browsers/)

* [ ] [ Google Devs - Accessibility for teams](https://developers.google.com/web/fundamentals/accessibility/a11y-for-teams)

* [ ] [ WCAG 2.0 checklists](https://www.wuhcag.com/wcag-checklist/)

* [ ] [ How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#web-components)

## ➤ Web Components

### Custom Elements

Learn how to create new HTML tags with Custom Elements.

* [ ] [ Google Devs - Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements)

* [ ] [ MDN - Using Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)

* [ ] [ CSS Tricks - Creating a Custom Element from Scratch](https://css-tricks.com/creating-a-custom-element-from-scratch/)

* [ ] [ Javascript.info - Custom Elements](https://javascript.info/custom-elements)

* [ ] [ dev.to - An introduction to Custom Elements](https://dev.to/jamesrweb/an-introduction-to-custom-elements-5327)

* [ ] [ itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-i-custom-elements-4de6713cef9d)

* [ ] [ web.dev - Web Components](https://web.dev/web-components-io-2019/)

### HTML Templates

Learn how to use HTML templates to create flexible templates that can then be used to populate the Shadow DOM.

* [ ] [ MDN - Using Templates & Slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)

* [ ] [ Javascript.info - Template Element](https://javascript.info/template-element)

* [ ] [ MDN - The Content Template element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)

### Shadow DOM

Learn how to encapsulate your CSS using Shadow DOM.

* [ ] [ Google Devs - Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom)

* [ ] [ MDN - Using Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)

* [ ] [ MDN - Shadow Tree](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree)

* [ ] [ CSS Tricks - Encapsulating Style and Structure](https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/)

* [ ] [ itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-ii-shadow-dom-8d1d8e126332)

* [ ] [ Monica - Shadow DOM: fast and encapsulated styles](https://meowni.ca/posts/shadow-dom/)

#### Shadow Parts

Learn how to style the inside of a shadow tree from outside of that Shadow Tree by using Shadow Parts.

* [ ] [ Fergald - CSS Shadow ::part and ::theme](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md)

* [ ] [ MDN - ::part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)

* [ ] [ W3C - CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/)

* [ ] [ Monica - ::part and ::theme, an explainer](https://meowni.ca/posts/part-theme-explainer/)

* [ ] [ Youtube - CSS Shadow Parts](https://www.youtube.com/watch?v=yVrvOueeb3s)

* [ ] [ Chrome Status - ::part and ::theme](https://www.chromestatus.com/features/5763933658939392)

#### Slots

Learn how to compose Custom Elements by using slots.

* [ ] [ Alligator.io - Composing Custom Elements](https://alligator.io/web-components/composing-slots-named-slots/)

* [ ] [ Javascript.info - Slots Composition](https://javascript.info/slots-composition)

* [ ] [ MDN - HTML  element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)

* [ ] [ Component.kitchen - A history of the HTML slot element](https://component.kitchen/blog/posts/a-history-of-the-html-slot-element)

### Best practices

Get familiar with best practices when it comes to building Web Components.

* [ ] [ Google Devs - Custom Element Best Practices](https://developers.google.com/web/fundamentals/web-components/best-practices)

* [ ] [ Webcomponents.org - Web Components Best Practices](https://www.webcomponents.org/community/articles/web-components-best-practices)

* [ ] [ mateusortiz - Web Components the Right Way](https://github.com/mateusortiz/webcomponents-the-right-way)

* [ ] [ dev.to - Making Web Components for Different Contexts](https://dev.to/equinusocio/making-web-components-for-different-contexts-25ed)

### Constructible Stylesheets

Learn how the Constructible Stylesheets proposal enables reusable styles when using shadow dom.

* [ ] [ Google Devs - Constructable Stylesheets](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)

* [ ] [ W3C - Constructable Stylesheet Objects](https://wicg.github.io/construct-stylesheets/)

* [ ] [ dev.to - Why Would Anyone Use Constructible Stylesheets](https://dev.to/westbrook/why-would-anyone-use-constructible-stylesheets-anyways-19ng)

* [ ] [ Benjamin Farrel - Adopt a Design System](https://medium.com/swlh/adopt-a-design-system-inside-your-web-components-with-constructable-stylesheets-dd24649261e)

* [ ] [ WICG - Constructable Stylesheet Objects](https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md)

* [ ] [ Chrome Status - Constructible Stylesheets](https://www.chromestatus.com/feature/5394843094220800)

### Form Participation

Learn how the Form Participation API proposal enables elements, other than built-in form control elements, to participate in form submission and validation.

* [ ] [ Form Participation API Explained](https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit)

* [ ] [ Chrome Status - Form-associated custom elements](https://www.chromestatus.com/features/4708990554472448)

* [ ] [ web-platform-tests - Form Participation](https://github.com/web-platform-tests/wpt/tree/master/custom-elements/form-associated)

* [ ] [ Google Devs - Form-associated custom elements](https://developers.google.com/web/updates/2019/09/nic77#form-associated_custom_elements)

* [ ] [ web.dev - More capable form controls](https://web.dev/more-capable-form-controls/)

* [ ] [ W3C - Creating a form-associated custom element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#progressive-webapps)

## ➤ Progressive Webapps

### API's

### Storage

Learn how to store data for your web app.

* [ ] [ MDN - Storage](https://developer.mozilla.org/en-US/docs/Web/API/Storage_API)

* [ ] [ MDN - Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)

* [ ] [ MDN - Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)

* [ ] [ MDN - IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)

* [ ] [ Google Devs - View And Edit Local Storage](https://developers.google.com/web/tools/chrome-devtools/storage/localstorage)

* [ ] [ MDN - Client-side storage](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)

### Routing

Learn what routing means in single page applications.

* [ ] [ How Single-Page Applications Work](https://blog.pshrmn.com/how-single-page-applications-work/)

* [ ] [ Static Apps - Routing URLs in Static Web Apps](https://staticapps.org/articles/routing-urls-in-static-apps/)

* [ ] [ Routing With Single Page Applications or Client Side Routing](https://pennyforyourcode.com/tldr-routing-with-single-page-applications-or-client-side-routing-327626cdc5dd)

#### History API

Learn how to use the history API to add single page applicaiton routing to your web app.

* [ ] [ MDN - Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)

* [ ] [ MDN - History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)

* [ ] [ Single-page application routing in vanilla JavaScript](https://medium.com/@george.norberg/history-api-getting-started-36bfc82ddefc)

* [ ] [ CSS Tricks - Using the HTML5 History API](https://css-tricks.com/using-the-html5-history-api/)

* [ ] [ The History API](https://flaviocopes.com/history-api/)

* [ ] [ Google Devs - History API: Scroll Restoration](https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration)

* [ ] [ MDN - The Document Base URL element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)

### Service Workers

Learn how to register a service worker to provide a rich native-like experience.

* [ ] [ Google Devs - Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers)

* [ ] [ Google Devs - The Service Worker Lifecycle](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle)

* [ ] [ Google Devs - Service Worker Registration](https://developers.google.com/web/fundamentals/primers/service-workers/registration)

* [ ] [ MDN - Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)

* [ ] [ Google Devs - High-performance service worker loading](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading)

* [ ] [ Codelabs - Scripting the service worker](https://codelabs.developers.google.com/codelabs/pwa-scripting-the-service-worker/index.html?index=..%2F..dev-pwa-training#0)

* [ ] [ Codelabs - Caching files with the service worker](https://codelabs.developers.google.com/codelabs/pwa-caching-service-worker/index.html?index=..%2F..dev-pwa-training#0)

* [ ] [ Codelabs - Adding a Service Worker](https://developers.google.com/web/fundamentals/codelabs/offline)

* [ ] [ Google Devs - Debugging Service Workers](https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers)

* [ ] [ Caching best practices](https://jakearchibald.com/2016/caching-best-practices/)

#### Offline first

Learn how to make your web app working offline with an offline first approach.

* [ ] [ Google Devs - The Offline Cookbook](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook)

* [ ] [ Udacity - Offline Web Applications](https://www.udacity.com/course/offline-web-applications--ud899)

* [ ] [ Offline First](http://offlinefirst.org/)

* [ ] [ Google Devs - Offline UX Considerations](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux)

* [ ] [ Google Devs - Offline Storage for Progressive Web Apps](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa)

* [ ] [ Codelabs - Offline quickstart](https://codelabs.developers.google.com/codelabs/pwa-offline-quickstart/index.html?index=..%2F..dev-pwa-training#0)

* [ ] [ Codelabs - Adding a Service Worker and Offline into your Web App](https://codelabs.developers.google.com/codelabs/offline/index.html?index=..%2F..%2Findex#0)

* [ ] [ Supercharged - Offline Links](https://www.youtube.com/watch?v=7fnpsF9tMXc)

* [ ] [ MDN - Online and offline events](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events)

* [ ] [ MDN - Making PWAs work offline](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers)

#### Push notifications

Learn how to add push notifications to your web app.

* [ ] [ Google Devs - Adding Push Notifications to a Web App](https://developers.google.com/web/fundamentals/codelabs/push-notifications/)

* [ ] [ MDN - How to make PWAs re-engageable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push)

* [ ] [ MDN - Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)

### Web App manifest

Learn how to tell the browser about your web app and how it should behave when 'installed' by creating a web app manifest.

* [ ] [ Google Devs - Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/)

* [ ] [ web.dev - Add a web app manifest](https://web.dev/add-manifest/)

* [ ] [ W3C - Web App Manifest](https://www.w3.org/TR/appmanifest/)

* [ ] [ MDN - How to make PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs)

### Add to homescreen

Learn how to make your web app installable.

* [ ] [ web.dev - Installable](https://web.dev/installable)

* [ ] [ Google Devs - App Install Banners](https://developers.google.com/web/fundamentals/app-install-banners/)

* [ ] [ MDN - Add to Home screen](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen)

### Pointer Events

Learn how to handle inputs from pointing devices such as a mouse, pen/stylus or touch.

* [ ] [ MDN - Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)

* [ ] [ Google Devs - Add Touch to Your Site](https://developers.google.com/web/fundamentals/design-and-ux/input/touch)

* [ ] [ Google Devs - Pointing the Way Forward](https://developers.google.com/web/updates/2016/10/pointer-events)

* [ ] [ Google Devs - Touch Action Options](https://developers.google.com/web/updates/2016/10/touch-action)

* [ ] [ W3C - Pointer Events](https://www.w3.org/TR/pointerevents/)

### Loading Performance

### App shell

Learn how to use an app shell to provide an instant and reliable experience to users on repeat visits

* [ ] [ Google Devs - The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell)

* [ ] [ MDN - Architecture of an app](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/App_structure)

### Render-Blocking Resources

Learn about render-blocking resources and why they are bad for the user-experience.

* [ ] [ MDN - Render-blocking resources](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Loading#Render-blocking_resources)

* [ ] [ Google Devs - Render-Blocking Resources](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)

### Compression

Learn how to minimize the overall download size by optimizing and compressing resources.

* [ ] [ Google Devs - Optimizing Encoding and Transfer Size](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer)

* [ ] [ Google Devs - Replace Animated GIFs with Video](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/)

* [ ] [ Squoosh](https://squoosh.app/)

* [ ] [ Google Devs - Text Content](https://developers.google.com/web/fundamentals/performance/get-started/textcontent-3)

* [ ] [ Google Devs - Optimize Images](https://developers.google.com/web/tools/lighthouse/audits/optimize-images)

* [ ] [ web.dev - Reduce JavaScript execution time](https://web.dev/bootup-time/)

### Performance metrics

Learn why it is important to measure performance and which metrics you should prioritize.

* [ ] [ Google Devs - User-centric Performance Metrics](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics)

* [ ] [ Udacity - Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884)

* [ ] [ Udacity - Browser Rendering Optimization](https://www.udacity.com/course/browser-rendering-optimization--ud860)

#### Largest Contentful Paint

Learn about Largest Contentful Paint and how it impacts the overall performance.

* [ ] [ web.dev - Largest Contentful Paint](https://web.dev/lcp/)

* [ ] [ web.dev - Lighthouse Largest Contentful Paint](https://web.dev/lighthouse-largest-contentful-paint)

* [ ] [ Medium - New Performance Metric: What is Largest Contentful Paint?](https://medium.com/speedrank-app/new-performance-metric-what-is-largest-contentful-paint-dc784a497dd5)

#### Total Blocking Time

Learn about Total Blocking Time and how it impacts the overall performance.

* [ ] [ web.dev - First CPU Idle](https://web.dev/first-cpu-idle)

* [ ] [ Google Devs - Total Blocking Time](https://web.dev/tbt)

#### Time to Interactive

Learn about Time to Interactive and how it impacts the overall performance.

* [ ] [ web.dev - Total Blocking Time](https://web.dev/lighthouse-total-blocking-time/)

* [ ] [ Google Devs - Time to Interactive](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)

### Lazy Loading

Learn how to use lazy loading to lower the initial page payload and load time.

* [ ] [ Google Devs - Lazy Loading Images and Video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video)

* [ ] [ Addy Osmani - Lazy Loading Images](https://addyosmani.com/blog/lazy-loading/)

* [ ] [ web.dev - Native lazy-loading for the web](https://web.dev/native-lazy-loading/)

#### Dynamic Import

Learn how to use dynamic import to lazy load javascript.

* [ ] [ V8 - Dynamic import()](https://v8.dev/features/dynamic-import)

* [ ] [ JavaScript dynamic import() & export](https://medium.com/@WebReflection/javascript-dynamic-import-export-b0e8775a59d4)

* [ ] [ MDN - Dynamic Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports)

* [ ] [ TC39 - proposal-dynamic-import](https://github.com/tc39/proposal-dynamic-import)

#### Offscreen images

Learn why offscreen images increase the load time and how to avoid them by lazy loading images.

* [ ] [ web.dev - Defer offscreen images](https://web.dev/offscreen-images/)

* [ ] [ Google Devs - Properly Size Images](https://developers.google.com/web/tools/lighthouse/audits/oversized-images)

* [ ] [ web.dev - Native lazy-loading for the web](https://web.dev/native-lazy-loading)

* [ ] [ Addy Osmani - Native image lazy-loading for the web!](https://addyosmani.com/blog/lazy-loading/)

### Critical Request Chains

Learn about the critical request chains and how to find them in your web app.

* [ ] [ Google Devs - Critical Request Chains](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains)

* [ ] [ web.dev - Minimize critical requests depth](https://web.dev/critical-request-chains)

### Tree shaking

Learn how to use tree shaking to eliminate dead code.

* [ ] [ Google Devs - Reduce JavaScript Payloads](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking)

* [ ] [ How to Clean Up Your JavaScript](https://www.keycdn.com/blog/tree-shaking)

### Codesplitting

Learn about codesplitting an how dividing your code into multiple chunks makes your web app faster.

* [ ] [ Google Devs - Reduce JavaScript Payloads](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting)

* [ ] [ All you need to know about JavaScript code splitting](https://www.creativebloq.com/how-to/all-you-need-to-know-about-javascript-code-splitting)

### PRPL Pattern

Learn how to use the PRPL pattern to make web apps more performant.

* [ ] [ Google Devs - The PRPL Pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)

* [ ] [ Google Devs - JavaScript Start-up Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization)

* [ ] [ Ben Schwarz - Real world performance](https://building.calibreapp.com/beyond-the-bubble-real-world-performance-9c991dcd5342?gi=76804aa8f46e)

* [ ] [ The Cost of Javascript](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4)

### Resource Prioritization

Learn about resource prioritization and how to inform the browser about the importance of a resource.

* [ ] [ Google Devs - Resource Prioritization](https://developers.google.com/web/fundamentals/performance/resource-prioritization)

* [ ] [ Eliminating Roundtrips with Preconnect](https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/)

* [ ] [ Addy Osmani - Preload, Prefetch And Priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)

* [ ] [ web.dev - Preconnect to required origins](https://web.dev/uses-rel-preconnect/)

* [ ] [ Preload, prefetch and other  tags](https://3perf.com/blog/link-rels/)

### Caching

Learn about caching and how it can be uses to make web apps load faster.

* [ ] [ Google Devs - HTTP Caching](https://developers.google.com/web/fundamentals/performance/get-started/httpcaching-6)

* [ ] [ MDN - HTTP caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching)

### Rendering Performance

### Rendering

Learn about rendering, how a page is rendered and why it is important to keep your web app interactive and smooth running.

* [ ] [ Google Devs - Constructing the Object Model](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model)

* [ ] [ Google Devs - Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering)

* [ ] [ Google Devs - Render-tree Construction](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)

* [ ] [ Google Devs - Render Blocking CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css)

### Event loop

Learn about the event loop and how Javascript simulate like it’s running our commands in a multi-thread environment.

* [ ] [ Youtube - Jake Archibald: In The Loop](https://youtu.be/cCOL7MC4Pl0)

* [ ] [ Understanding JavaScript](https://medium.com/@muratcatal/understanding-javascript-heap-stack-event-loops-and-callback-queue-6fdec3cfe32e)

* [ ] [ JavaScript Event Loop Explained](https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4)

* [ ] [ Youtube - What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

* [ ] [ The JavaScript Event Loop](https://flaviocopes.com/javascript-event-loop/)

* [ ] [ dev.to - JavaScript Visualized: Event Loop](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)

#### Microtask

Learn about microtasks and the microtask queue.

* [ ] [ Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)

* [ ] [ MDN - Using microtasks in JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide)

* [ ] [ javascript.info - Microtasks and macrotasks](https://javascript.info/event-loop)

* [ ] [ javascript.info - Microtasks](https://javascript.info/microtask-queue)

#### Stack

Learn about the stack and how to investigate the staack trace when debugging.

* [ ] [ Javascript Stack Trade - Using it to debug](https://www.scalyr.com/blog/javascript-stack-trace-understanding-it-and-using-it-to-debug/)

* [ ] [ MDN - console.trace()](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace)

* [ ] [ V8 - Stack trace API](https://v8.dev/docs/stack-trace-api)

* [ ] [ Confused about Stack and Heap?](https://medium.com/fhinkel/confused-about-stack-and-heap-2cf3e6adb771)

#### Heap

Learn about the heap and how to investigate the heap snapshots when debugging.

* [ ] [ Google Devs - Memory Problems](https://developers.google.com/web/tools/chrome-devtools/memory-problems/)

* [ ] [ Google Devs - Memory Terminology](https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101)

* [ ] [ Google Devs - How to Record Heap Snapshots](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots)

* [ ] [ Confused about Stack and Heap?](https://medium.com/fhinkel/confused-about-stack-and-heap-2cf3e6adb771)

* [ ] [ Google Devs - How to Use the Allocation Profiler Tool](https://developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler)

### RAIL Model

Learn how to use the RAIL model to ensure a good user experience.

* [ ] [ Google Devs - RAIL](https://developers.google.com/web/fundamentals/performance/rail)

* [ ] [ Google Devs - Why Performance Matters](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)

* [ ] [ Google Devs - Get Started With Analyzing](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/)

* [ ] [ Google Devs - Animations and Performance](https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance)

* [ ] [ Google Devs - CSS Versus JavaScript Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript)

* [ ] [ Google Devs - Choosing the Right Easing](https://developers.google.com/web/fundamentals/design-and-ux/animations/choosing-the-right-easing)

* [ ] [ Google Devs - Animating Modal Views](https://developers.google.com/web/fundamentals/design-and-ux/animations/animating-modal-views)

* [ ] [ MDN - CSS and JavaScript animation performance](https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance)

* [ ] [ MDN - Performance fundamentals](https://developer.mozilla.org/en-US/docs/Web/Performance/Fundamentals)

* [ ] [ Youtube - Fast By Default](https://www.youtube.com/watch?v=_srJ7eHS3IM)

#### requestAnimationFrame

Learn how to use the requestAnimationFrame API to create butter-smooth animations.

* [ ] [ Google Devs - Optimize JavaScript Execution](https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution)

* [ ] [ MDN - requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

#### requestIdleCallback

Learn how to use the requestIdleCallback to defer heavy tasks.

* [ ] [ MDN - Background Tasks API](https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API)

* [ ] [ Google Dev - requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback?hl=en)

* [ ] [ MDN - requestIdleCallback()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)

### Critical Rendering Path

Learn about the critical rendering path and how to identify it.

* [ ] [ Google Devs - Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)

* [ ] [ MDN - Critical Rendering Path](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path)

* [ ] [ Understanding the critical rendering path](https://medium.com/@luisvieira_gmr/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a)

### The Pixel Pipeline

Learn about the five key points in the pixels-to-screen pipeline.

* [ ] [ Google Devs - The pixel pipeline](https://developers.google.com/web/fundamentals/performance/rendering#the_pixel_pipeline)

* [ ] [ Pixels are expensive](https://aerotwist.com/blog/pixels-are-expensive/)

* [ ] [ Google Devs - The Applied Science of Runtime Performance](https://www.youtube.com/watch?v=RCFQu0hK6bU)

* [ ] [ CSS Triggers](https://csstriggers.com/)

#### Style calculations

Learn how to optimize your CSS to avoid heavy style calculations.

* [ ] [ Google Devs - Style Calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations)

#### Transforms

Learn about transforms and how it is possible to avoid both layout and paint.

* [ ] [ Google Devs - Use transform and opacity for animations](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count#use_transform_and_opacity_changes_for_animations)

* [ ] [ Achieving 60 FPS Animations with CSS3](https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108)

* [ ] [ HTML5 Rocks - High Performance Animations](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)

#### Paint areas

Learn about paint areas and how it is possible to reduce them.

* [ ] [ Google Devs - Paint Areas](https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas)

* [ ] [ CSS Tricks - Browser painting](https://css-tricks.com/browser-painting-and-considerations-for-web-performance/)

* [ ] [ HTML5 Rocks - Avoiding Unnecessary Paints](https://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/)

#### Layout Trashing

Learn about layout trashing and how to avoid it.

* [ ] [ Google Devs - Layout Thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)

* [ ] [ Beware JavaScript Layout Thrashing!](https://blog.idrsolutions.com/2014/08/beware-javascript-layout-thrashing/)

* [ ] [ Layout thrashing cheatsheet](https://devhints.io/layout-thrashing)

#### Layers

Learn about layers and how to promote an element to another layer.

* [ ] [ Google Devs - Manage Layer Count](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count)

* [ ] [ HTML5 Rocks - Accelerated Rendering in Chrome](https://www.html5rocks.com/en/tutorials/speed/layers/)

* [ ] [ Layers and how to force them](https://dassur.ma/things/forcing-layers/)

#### Debounce

Learn how to debounce computationally expensive code to avoid blocking the UI.

* [ ] [ Google Devs - Debounce Your Input Handlers](https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers)

* [ ] [ What is Debouncing?](https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1)

* [ ] [ Level Up - Debounce in JavaScript](https://levelup.gitconnected.com/debounce-in-javascript-improve-your-applications-performance-5b01855e086)

### CSS Containment

Learn how to use CSS containment to improve the performance of your web app.

* [ ] [ Google Devs - CSS Containment](https://developers.google.com/web/updates/2016/06/css-containment)

* [ ] [ W3C - CSS Containment Module](https://www.w3.org/TR/css-contain-1/)

* [ ] [ An introduction to CSS Containment](https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/)

* [ ] [ MDN - Contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)

* [ ] [ CSS Tricks - CSS containment](https://css-tricks.com/css-containment/)

### Web Workers

Learn how to use web workers to run a script operation in a background thread separate from the main execution thread.

* [ ] [ MDN - Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)

* [ ] [ HTML5 Rocks - The Basics of Web Workers](https://www.html5rocks.com/en/tutorials/workers/basics/)

* [ ] [ When should you be using Web Workers?](https://dassur.ma/things/when-workers/)

### Security

### HTTPS

Learn about HTTPS and why a website should always be protected with HTTPS.

* [ ] [ Google Devs - Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)

* [ ] [ Google Devs - Enabling HTTPS on Your Servers](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https)

* [ ] [ Google Devs - Mixed Content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content)

* [ ] [ Youtube - Stories from the field](https://www.youtube.com/watch?v=GoXgl9r0Kjk)

### Browser Sandbox

Learn about the sandbox security mechanism and how it restricts the execution environment.

* [ ] [ web.dev - Browser sandbox](https://web.dev/browser-sandbox/)

* [ ] [ Wikipedia - Sandbox (computer security)](https://en.wikipedia.org/wiki/Sandbox_(computer_security))

* [ ] [ Howtogeek - Sandboxes Explained](https://www.howtogeek.com/169139/sandboxes-explained-how-theyre-already-protecting-you-and-how-to-sandbox-any-program/)

### OWASP

Learn about the OWASP organization and how they help with web application security.

* [ ] [ Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP)

* [ ] [ OWASP - About](https://www.owasp.org/index.php/About_The_Open_Web_Application_Security_Project)

* [ ] [ OWASP - OWASP Top 10](https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf)

* [ ] [ OWASP - Cheatsheets](https://cheatsheetseries.owasp.org/)

* [ ] [ Youtube - OWASP](https://www.youtube.com/user/OWASPGLOBAL)

* [ ] [ OWASP Top 10 Security Risks](https://blog.sucuri.net/2018/10/owasp-top-10-security-risks-part-i.html)

* [ ] [ Wikipedia - Web application security](https://en.wikipedia.org/wiki/Web_application_security)

#### Cross-Site Scripting

Learn about cross-site scripting and how it is possible mitigate these kind of attacks.

* [ ] [ MDN - Cross-site scripting](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting)

* [ ] [ OWASP - Cross-site Scripting (XSS)](https://www.owasp.org/index.php/Cross-site_Scripting_(XSS))

* [ ] [ OWASP - XSS Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)

* [ ] [ Excess XSS](https://excess-xss.com/)

#### Clickjacking

Learn about clickjacking and how it is possible to mitigate these kind of attacks.

* [ ] [ OWASP - Clickjacking](https://www.owasp.org/index.php/Clickjacking)

* [ ] [ Wikipedia - Clickjacking](https://en.wikipedia.org/wiki/Clickjacking)

* [ ] [ web.dev - Same-origin policy](https://web.dev/same-origin-policy/#how-to-prevent-clickjacking)

* [ ] [ OWASP - Clickjacking Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html)

### Content Security Policy

Learn about content security policy and how it can help to detect and mitigate certain types of attacks.

* [ ] [ MDN - Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)

* [ ] [ Google Devs - CSP](https://developers.google.com/web/fundamentals/security/csp)

### Audits

### Performance budgets

Learn about performance budgets and how you can create one for your web app.

* [ ] [ web.dev - Performance Budgets](https://web.dev/performance-budgets-101)

* [ ] [ Google Devs - Performance Budget](https://developers.google.com/web/tools/lighthouse/audits/budgets)

* [ ] [ Addy Osmani - Start Performance Budgeting](https://addyosmani.com/blog/performance-budgets/)

### Lighthouse

Learn about lighthouse and how it can be used to audit your web app.

* [ ] [ Google Devs - Lighthouse](https://developers.google.com/web/tools/lighthouse/)

* [ ] [ Youtube - Staying off the Rocks](https://www.youtube.com/watch?v=NoRYn6gOtVo)

* [ ] [ web.dev - Measure](https://web.dev/measure)

### Chrome DevTools

Learn about the Chrome DevTools and how it can be used to audit your web app.

* [ ] [ Google Devs - Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)

* [ ] [ Google Devs - Inspect animations](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations)

* [ ] [ Investigate animation performance with DevTools](https://calibreapp.com/blog/investigate-animation-performance-with-devtools/)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#build-tools)

## ➤ Build tools

### Package Managers

Learn about package managers and how they make managing dependencies easier.

* [ ] [ Freecodecamp - How JavaScript package managers work](https://www.freecodecamp.org/news/javascript-package-managers-101-9afd926add0a/)

* [ ] [ Guide to JavaScript frontend package managers](https://www.javascriptstuff.com/javascript-frontend-package-managers/)

#### NPM

Learn about NPM and how it can be used to manage dependencies.

* [ ] [ npmjs - About npm](https://docs.npmjs.com/about-npm/)

* [ ] [ npmjs - Getting started](https://docs.npmjs.com/getting-started/)

* [ ] [ Introduction to npm and basic npm commands](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-npm-and-basic-npm-commands-18aa16f69f6b)

* [ ] [ An Absolute Beginner's Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/)

#### Yarn

Learn about Yarn and how it can be used to manage dependencies.

* [ ] [ Yarnpkg - Getting Started](https://yarnpkg.com/en/docs/getting-started)

* [ ] [ Facebook Engineering - Yarn](https://engineering.fb.com/web/yarn-a-new-package-manager-for-javascript/)

### Module Bundlers

Learn about module bundler and how they can help bundling your code.

* [ ] [ dev.to - What is a module bundler?](https://dev.to/tanhauhau/what-is-module-bundler-and-how-does-it-work-3gp2)

* [ ] [ Freecodecamp - Let’s learn how module bundlers work](https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/)

* [ ] [ JavaScript Bundlers, a Comparison](https://medium.com/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364)

#### Rollup

Learn how you can use Rollup to bundle your code.

* [ ] [ Rollup - Introduction](https://rollupjs.org/guide/en/)

* [ ] [ How to Bundle JavaScript With Rollup](https://lengstorf.com/learn-rollup-js/)

#### Webpack

Learn how you can use Webpack to bundle your code.

* [ ] [ Webpack - Getting Started](https://webpack.js.org/guides/getting-started/)

* [ ] [ Webpack: A Gentle Introduction to the Module Bundler](https://auth0.com/blog/webpack-a-gentle-introduction/)

#### Parcel

Learn how you can use Parcel to bundle your code.

* [ ] [ Parcel - Getting Started](https://parceljs.org/getting_started.html)

* [ ] [ Parcel, a simpler webpack](https://flaviocopes.com/parcel/)

#### Snowpack

Learn how Snowpack can replace the traditional app bundler during development.

* [ ] [ Snowpack](https://www.snowpack.dev/)

* [ ] [ Snowpack - Quickstart](https://www.snowpack.dev/#quickstart)

* [ ] [ Github - Snowpack](https://github.com/pikapkg/snowpack)

* [ ] [ Pika - About](https://www.pika.dev/about/)

* [ ] [ A Future Without Webpack](https://www.pika.dev/blog/pika-web-a-future-without-webpack/)

### Linters and formatters

Learn how you can improve your code quality with linters and formatters.

* [ ] [ Improve Your JavaScript Code Quality With Linters](https://www.gistia.com/javascript-linters-formatter-prettier-eslint/)

* [ ] [ Why you should always use a Linter](https://medium.com/dailyjs/why-you-should-always-use-a-linter-and-or-pretty-formatter-bb5471115a76)

#### Prettier

Learn how you can use Prettier to format your code.

* [ ] [ Prettier - What is Prettier?](https://prettier.io/docs/en/index.html)

* [ ] [ Let the computer do the formatting](https://blog.bitsrc.io/let-the-computer-do-the-formatting-ddb799e8a068)

* [ ] [ Prettier - Playground](https://prettier.io/playground/)

* [ ] [ Prettier - Integrating with Linters](https://prettier.io/docs/en/integrating-with-linters.html)

#### ESLint

Learn how you can use ESLint to lint your code.

* [ ] [ Eslint - Getting Started](https://eslint.org/docs/user-guide/getting-started)

* [ ] [ Streamline Code Reviews with ESLint + Prettier](https://medium.com/javascript-scene/streamline-code-reviews-with-eslint-prettier-6fb817a6b51d)

* [ ] [ Prettier vs ESLint: What’s The Difference?](https://www.futurehosting.com/blog/prettier-vs-eslint-whats-the-difference/)

### Task Runners

Learn about task runners and how you can automate code execution.

* [ ] [ The Advantages of Using Task Runners](https://www.dbswebsite.com/blog/the-advantages-of-using-task-runners/)

* [ ] [ Being Productive With Task Runners](https://www.smashingmagazine.com/2016/06/harness-machines-productive-task-runners/)

#### NPM Scripts

Learn about NPM scripts and how you can run your own.

* [ ] [ CSS Tricks - Why npm Scripts?](https://css-tricks.com/why-npm-scripts/)

* [ ] [ Helpers and tips for npm run scripts](https://michael-kuehnel.de/tooling/2018/03/22/helpers-and-tips-for-npm-run-scripts.html)

### Transpilers

Learn what transpilers are and why we need them.

* [ ] [ Scotch - Javascript Transpilers](https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them)

* [ ] [ What JavaScript Programmers Need to Know about Transpilers](https://thenewstack.io/javascript-transpilers-need-know/)

* [ ] [ Wikipedia - Source-to-source compiler](https://en.wikipedia.org/wiki/Source-to-source_compiler)

#### Babel

Learn about Babel and how you can use it to transpile your code.

* [ ] [ Complete Babel 7 Guide for Beginners](https://medium.com/@onlykiosk/complete-babel-7-guide-for-beginners-in-2019-7dd78214c464)

* [ ] [ Babel - What is Babel?](https://babeljs.io/docs/en/)

* [ ] [ Babel - Usage Guide](https://babeljs.io/docs/en/usage)

* [ ] [ A Beginner’s Guide to Babel](https://www.sitepoint.com/babel-beginners-guide/)

* [ ] [ Moving to ES6 — Babel and Transpilers](https://hackernoon.com/moving-to-es6-babel-and-transpilers-337921c025b1)

#### Typescript

Learn how to use Typescript and how it can help making your code typesafe.

* [ ] [ Typescript - Documentation](http://www.typescriptlang.org/docs/home.html)

* [ ] [ Typescript: Why should one use i?](https://medium.com/tech-tajawal/typescript-why-should-one-use-it-a539faa92010)

* [ ] [ Why TypeScript is the best way to write Front-end in 2019](https://medium.com/@jtomaszewski/why-typescript-is-the-best-way-to-write-front-end-in-2019-feb855f9b164)

### CSS Pre-processors

Learn about CSS pre-processors and why we need them.

* [ ] [ MDN - CSS preprocessor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)

* [ ] [ Advantages of Using a Preprocessor](https://medium.com/swlh/advantages-of-using-a-preprocessor-sass-in-css-eb7310179944)

* [ ] [ Deconfusing Pre- and Post-processing](https://medium.com/@ddprrt/deconfusing-pre-and-post-processing-d68e3bd078a3)

#### SASS

Learn about SASS and how you can use it to simplify your styles.

* [ ] [ SASS - Guide](https://sass-lang.com/guide)

* [ ] [ 10 Reasons to Use a CSS Preprocessor in 2018](https://raygun.com/blog/10-reasons-css-preprocessor/)

#### PostCSS

Learn about PostCSS and how you can use its ecosystem of plugins to extend your CSS build pipeline.

* [ ] [ PostCSS](https://postcss.org/)

* [ ] [ What is PostCSS?](https://www.sitepoint.com/an-introduction-to-postcss/)

* [ ] [ Introduction to PostCSS](https://flaviocopes.com/postcss/)

* [ ] [ Getting started with PostCSS in 2019](https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/)

### Node.js

Learn how to use Node.js.

* [ ] [ Node.js](https://nodejs.org)

* [ ] [ Introduction to Node.js](https://nodejs.dev/)

* [ ] [ Node.js - Guides](https://nodejs.org/en/docs/guides/)

* [ ] [ W3Schools - Node.js tutorial](https://www.w3schools.com/nodejs/)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#frameworks--libraries)

## ➤ Frameworks & Libraries

### lit-element

Learn how to use lit-element for creating fast, lightweight web components.

* [ ] [ lit-element](https://lit-element.polymer-project.org/)

* [ ] [ Google Devs - Lightning-fast templates](https://developers.google.com/web/updates/2019/02/lit-element-and-lit-html)

* [ ] [ Vaadin - Creating a LitElement project](https://vaadin.com/tutorials/lit-element/starting-a-lit-element-project)

* [ ] [ dev.to - Web Components: from zero to hero, part three](https://dev.to/thepassle/web-components-from-zero-to-hero-part-three-3c5h)

### Vue

Learn about Vue and how you can use it for building web apps.

* [ ] [ Vue](https://vuejs.org/)

* [ ] [ Vue - CLI](https://cli.vuejs.org/)

* [ ] [ Getting Started with Vue](https://www.taniarascia.com/getting-started-with-vue/)

### React

Learn about React and how you can use it for building web apps.

* [ ] [ React](https://reactjs.org/)

* [ ] [ web.dev - React](https://web.dev/react)

* [ ] [ Getting Started with React](https://www.taniarascia.com/getting-started-with-react/)

### Angular

Learn about Angular and how you can use it for building web apps.

* [ ] [ Angular](https://angular.io/)

* [ ] [ web.dev - Angular](https://web.dev/angular)

* [ ] [ Angular - CLI](https://cli.angular.io/)

### Svelte

Learn about Svelte and how it can convert your component into highly efficient imperative code.

* [ ] [ Svelte](https://svelte.dev/)

* [ ] [ Github - Svelte FAQ](https://github.com/sveltejs/svelte/wiki/FAQ)

* [ ] [ Svelte - Rethinking reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity)

### Stencil

Learn how Stencil can be used for generating small, fast web components.

* [ ] [ Stencil](https://stenciljs.com/)

* [ ] [ Alligator - Getting Started With Stencil](https://alligator.io/stencil/getting-started/)

* [ ] [ How to Build Reusable Web Components Using Stenciljs](https://codeburst.io/how-to-build-web-components-using-stenciljs-afacc5451c2d)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#testing)

## ➤ Testing

### Testing Methodologies

Learn about various software testing methodologies and why it is important to test your code.

* [ ] [ Wikipedia - Software testing](https://en.wikipedia.org/wiki/Software_testing)

* [ ] [ Software Testing Methodologies](https://smartbear.com/learn/automated-testing/software-testing-methodologies/)

* [ ] [ Learn The Methods & Tools](https://www.inflectra.com/ideas/topic/testing-methodologies.aspx)

#### Unit Testing

Learn about unit testing and how it can be used to test individual units of code.

* [ ] [ Unit Testing Tutorial](https://www.guru99.com/unit-testing-guide.html)

* [ ] [ Wikipedia - Unit testing](https://en.wikipedia.org/wiki/Unit_testing)

* [ ] [ What is Unit Testing?](https://www.tutorialspoint.com/software_testing_dictionary/unit_testing.htm)

* [ ] [ The Arrange, Act and Assert (AAA) Pattern](https://medium.com/@pjbgf/title-testing-code-ocd-and-the-aaa-pattern-df453975ab80)

#### Integration Testing

Learn about integration testing and how it can be used to test modules as a group.

* [ ] [ Integration Testing Tutorial](https://www.guru99.com/integration-testing.html)

* [ ] [ What is Integration Testing?](https://www.tutorialspoint.com/software_testing_dictionary/integration_testing.htm)

* [ ] [ Integration Testing](http://softwaretestingfundamentals.com/integration-testing/)

#### System Testing

Learn about system testing and how it can be used to test the fully integrated software product.

* [ ] [ System Testing Tutorial](https://www.guru99.com/system-testing.html)

* [ ] [ What is System Testing?](https://www.tutorialspoint.com/software_testing_dictionary/system_testing.htm)

* [ ] [ System Testing](http://softwaretestingfundamentals.com/system-testing/)

#### Acceptance Testing

Learn about acceptance testing and how it can be used to test the software for acceptability

* [ ] [ What is User Acceptance Testing?](https://www.guru99.com/user-acceptance-testing.html)

* [ ] [ Acceptance Testing](http://softwaretestingfundamentals.com/acceptance-testing/)

* [ ] [ What is Acceptance Testing?](https://www.tutorialspoint.com/software_testing_dictionary/acceptance_testing.htm)

#### Smoke Testing

Learn about smoke testing and how it can be used to ensure that critical functionalities of the program are working fine.

* [ ] [ Sanity Testing Vs Smoke Testing](https://www.guru99.com/smoke-sanity-testing.html)

* [ ] [ Smoke Testing](http://softwaretestingfundamentals.com/smoke-testing/)

#### Performance Testing

Learn about performance testing and how it can be used to determine the responsiveness and stability of a program.

* [ ] [ Performance Testing Tutorial](https://www.guru99.com/performance-testing.html)

* [ ] [ Performance Testing](http://softwaretestingfundamentals.com/performance-testing/)

* [ ] [ Wikipedia - Software performance testing](https://en.wikipedia.org/wiki/Software_performance_testing)

#### Usability Testing

Learn about usability testing and how it can be used to determine if the system is easily usable for the end-user.

* [ ] [ What is Usability Testing?](https://www.guru99.com/usability-testing.html)

* [ ] [ Usability Testing](http://softwaretestingfundamentals.com/usability-testing/)

* [ ] [ Wikipedia - Usability testing](https://en.wikipedia.org/wiki/Usability_testing)

#### White Box Testing

Learn about white box testing and how it can be used to test the software's internal structure, design, and coding.

* [ ] [ What is White Box Testing?](https://www.guru99.com/white-box-testing.html)

* [ ] [ White Box Testing](http://softwaretestingfundamentals.com/white-box-testing/)

#### Black Box Testing

Learn about black box testing and how a test can be carried out without looking at the internal code.

* [ ] [ What is Black Box Testing?](https://www.guru99.com/black-box-testing.html)

* [ ] [ Black Box Testing](http://softwaretestingfundamentals.com/black-box-testing/)

#### Automated Testing

Learn about automated testing and when it should be applied.

* [ ] [ What is Automated Testing?](https://smartbear.com/learn/automated-testing/what-is-automated-testing/)

* [ ] [ Automated Testing Tutorial](https://www.guru99.com/automation-testing.html)

#### Manual Testing

Learn about manual testing and when it should be applied.

* [ ] [ Manual Testing Tutorial](https://www.guru99.com/manual-testing.html)

* [ ] [ Wikipedia - Manual Testing](https://en.wikipedia.org/wiki/Manual_testing)

* [ ] [ What is Manual Testing?](https://www.tutorialspoint.com/software_testing_dictionary/manual_testing.htm)

### Continuous integration

Learn about continuous integration and it can enable iterative software development.

* [ ] [ dev.to - Continuous Integration Explained](https://dev.to/markoa/continuous-integration-explained-59f9)

* [ ] [ Continuous Integration Tutorial](https://www.tutorialspoint.com/continuous_integration/index.htm)

* [ ] [ Wikipedia - Continuous integration](https://en.wikipedia.org/wiki/Continuous_integration)

### A/B Testing

Learn about A/B testing and how it can be used to optimize your web app.

* [ ] [ dev.to - A/B testing: introduction](https://dev.to/ice_lenor/ab-testing-introduction-3jpd)

* [ ] [ dev.to - When Not To A/B Test](https://dev.to/ice_lenor/when-not-to-ab-test-4cc7)

* [ ] [ A/B Testing](https://www.optimizely.com/optimization-glossary/ab-testing/)

* [ ] [ Wikipedia - A/B testing](https://en.wikipedia.org/wiki/A/B_testing)

### Test Runners

Learn about test runners and how they can help running tests.

* [ ] [ Classifications of Testing Software](https://amzotti.github.io/testing/2015/03/16/what-is-the-difference-between-a-test-runner-testing-framework-assertion-library-and-a-testing-plugin/)

* [ ] [ Udacity - Javascript Testing](https://www.udacity.com/course/javascript-testing--ud549)

* [ ] [ JavaScript Unit Testing Frameworks](https://www.guru99.com/javascript-unit-testing-frameworks.html)

#### Karma

Learn about the Karma test runner.

* [ ] [ Karma](https://karma-runner.github.io/latest/index.html)

* [ ] [ Getting started with Karma and Mocha](https://medium.com/@jazcodes/getting-started-with-karma-and-mocha-for-automated-browser-tests-5ebb6cd02edf)

#### Mocha

Learn about the Mocha testing framework.

* [ ] [ Mocha](https://mochajs.org/)

* [ ] [ A quick and complete guide to Mocha testing](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/)

* [ ] [ How to test JavaScript with Mocha](https://codeburst.io/how-to-test-javascript-with-mocha-the-basics-80132324752e)

#### Jasmine

Learn about the Jasmine testing frameworks.

* [ ] [ Jasmine](https://jasmine.github.io/)

* [ ] [ How to set up a testing environment with Jasmine and karma](https://medium.com/bb-tutorials-and-thoughts/javascript-how-to-set-up-a-testing-environment-with-jasmine-and-karma-58591dd39734)

#### Cypress

Learn how to use Cypress for end-to-end-testing.

* [ ] [ Cypress](https://www.cypress.io/)

* [ ] [ End-to-End Testing with Cypress](https://webdevstudios.com/2018/11/13/end-to-end-testing-with-cypress-io/)

#### Ava

Learn about the Ava test runner.

* [ ] [ Github - Ava](https://github.com/avajs/ava)

* [ ] [ A Fresh Take On JavaScript Testing](https://pusher.com/sessions/meetup/the-js-roundabout/ava-test-runner-a-fresh-take-on-javascript-testing-and-growing-an-open-source-project)

* [ ] [ Freecodecamp - How you can test your Node.js applications](https://www.freecodecamp.org/news/testing-your-nodejs-applications-with-ava-js-99e806a226a7/)

### Best Practices

Learn about the best practices when it comes to testing.

* [ ] [ Javascript Testing Best Practices](https://github.com/goldbergyoni/javascript-testing-best-practices)

* [ ] [ What are the best practices in software Testing?](https://www.quora.com/What-are-the-best-practices-in-software-Testing)

* [ ] [ 7 Software Testing Best Practices](https://www.qasymphony.com/blog/7-software-testing-best-practices/)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#architecture--paradigms)

## ➤ Architecture & paradigms

### Paradigms

### Programming Paradigms

Learn how programming languages can be categoried into different paraigmes based on their features.

* [ ] [ Wikipedia - Programming paradigm](https://en.wikipedia.org/wiki/Programming_paradigm)

* [ ] [ Introduction of Programming Paradigms](https://www.geeksforgeeks.org/introduction-of-programming-paradigms/)

* [ ] [ What Are JavaScript Programming Paradigms?](https://medium.com/javascript-in-plain-english/what-are-javascript-programming-paradigms-3ef0f576dfdb)

### Object Oriented Programming

Learn about object oriented programming and how objects can make your code easier to read and debug.

* [ ] [ MDN - Object-oriented JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)

* [ ] [ Freecodecamp - An introduction to Object-Oriented Programming](https://www.freecodecamp.org/news/an-introduction-to-object-oriented-programming-in-javascript-8900124e316a/)

* [ ] [ Introduction to Object Oriented Programming in JavaScript](https://www.geeksforgeeks.org/introduction-object-oriented-programming-javascript/)

#### S.O.L.I.D

Learn about the SOLID design pricinples that can make your code more understandable, flexible and maintainable.

* [ ] [ Wikipedia - SOLID](https://en.wikipedia.org/wiki/SOLID)

* [ ] [ S.O.L.I.D: The First 5 Principles of Object Oriented Design](https://scotch.io/bar-talk/s-o-l-i-d-the-first-five-principles-of-object-oriented-design)

* [ ] [ S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript](https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-oriented-design-with-javascript-790f6ac9b9fa)

### Functional programming

Learn about functional programming and how it can make your code easier to read and debug.

* [ ] [ An introduction to functional programming in JavaScript](https://opensource.com/article/17/6/functional-javascript)

* [ ] [ Functional Programming in JavaScript](https://codeburst.io/functional-programming-in-javascript-e57e7e28c0e5)

* [ ] [ The power of functional programming in Javascript](https://itnext.io/the-power-of-functional-programming-in-javascript-cc9797a42b60)

* [ ] [ An introduction to Functional Programming](https://flaviocopes.com/javascript-functional-programming/)

* [ ] [ dev.to - Basic Functional Programming Patterns in JavaScript](https://dev.to/nestedsoftware/basic-functional-programming-patterns-in-javascript-49p2)

* [ ] [ Functional-ish JavaScript](https://medium.com/@bluepnume/functional-ish-javascript-205c05d0ed08)

#### Recursion

Learn about recursion and when it can be used to make your code more readable.

* [ ] [ Learn and Understand Recursion in JavaScript](https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea)

* [ ] [ Understanding Recursion in JavaScript](https://medium.com/@zfrisch/understanding-recursion-in-javascript-992e96449e03)

* [ ] [ Freecodecamp - Recursion in JavaScript](https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f/)

* [ ] [ javascript.info - Recursion and stack](https://javascript.info/recursion)

#### Higher-Order Functions

Learn about higher-order functions and when it can be used to make your code more readable.

* [ ] [ Higher-Order Functions](https://www.sitepoint.com/higher-order-functions-javascript/)

* [ ] [ Freecodecamp - A quick intro to Higher-Order Functions](https://www.freecodecamp.org/news/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b/)

* [ ] [ Wikipedia - Higher-Order function](https://en.wikipedia.org/wiki/Higher-order_function)

* [ ] [ Understanding Higher-Order Functions in JavaScript](https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad)

#### Currying

Learn about currying and when it can be used to make your code more readable.

* [ ] [ dev.to - All you need to know about currying](https://dev.to/bettercodingacademy/functional-programming-all-you-need-to-know-about-currying-5k7)

* [ ] [ JavaScript: Currying and Partial Application](https://gideonpyzer.dev/blog/2017/01/14/javascript-currying-and-partial-application/)

* [ ] [ Curry and Function Composition](https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983)

* [ ] [ Wikipedia - Currying](https://en.wikipedia.org/wiki/Currying)

#### Monads

Learn about monads and when it can be used to make your code more readable.

* [ ] [ Youtube - Monad, FunFunFunction](https://www.youtube.com/watch?v=9QveBbn7t_c)

* [ ] [ Youtube - Functors, FunFunFunction ](https://www.youtube.com/watch?v=YLIH8TKbAh4)

* [ ] [ Functional JavaScript - Functors, Monads, and Promises](https://dev.to/joelnet/functional-javascript---functors-monads-and-promises-1pol)

* [ ] [ Wikipedia - Monad](https://en.wikipedia.org/wiki/Monad_(functional_programming))

* [ ] [ JavaScript Monads Made Simple](https://medium.com/javascript-scene/javascript-monads-made-simple-7856be57bfe8)

* [ ] [ Implementing JavaScript Functors and Monads](https://medium.com/front-end-weekly/implementing-javascript-functors-and-monads-a87b6a4b4d9a)

* [ ] [ MDN - Array.prototype.flatMap()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)

### Architecture

### Design Patterns

Learn how commonly occurring problems can be solved using design patterns.

* [ ] [ Wikipedia - Software design pattern](https://en.wikipedia.org/wiki/Software_design_pattern)

* [ ] [ The 7 Most Important Software Design Patterns](https://medium.com/educative/the-7-most-important-software-design-patterns-d60e546afb0e)

* [ ] [ Software Design Patterns](https://www.geeksforgeeks.org/software-design-patterns/)

* [ ] [ Design Patterns](https://refactoring.guru/design-patterns)

* [ ] [ JavaScript Design Patterns](https://www.dofactory.com/javascript/design-patterns)

* [ ] [ Design Patterns in TypeScript](https://github.com/torokmark/design_patterns_in_typescript)

#### Singleton

Learn about the singleton design pattern and when it should be used.

* [ ] [ Singleton Pattern](https://refactoring.guru/design-patterns/singleton)

* [ ] [ Singleton Example](https://www.dofactory.com/javascript/singleton-design-pattern)

* [ ] [ Wikipedia - Singleton Pattern](https://en.wikipedia.org/wiki/Singleton_pattern)

#### Observer

Learn about the observer design pattern and when it should be used.

* [ ] [ Observer Pattern](https://refactoring.guru/design-patterns/observer)

* [ ] [ Observer Example](https://www.dofactory.com/javascript/observer-design-pattern)

* [ ] [ Wikipedia - Observer Pattern](https://en.wikipedia.org/wiki/Observer_pattern)

#### Prototype

Learn about the prototype design pattern and when it should be used.

* [ ] [ Prototype Pattern](https://refactoring.guru/design-patterns/prototype)

* [ ] [ Prototype Example](https://www.dofactory.com/javascript/prototype-design-pattern)

* [ ] [ Wikipedia - Prototype pattern](https://en.wikipedia.org/wiki/Prototype_pattern)

#### Bridge

Learn about the bridge design pattern and when it should be used.

* [ ] [ Bridge Pattern](https://refactoring.guru/design-patterns/bridge)

* [ ] [ Bridge Example](https://www.dofactory.com/javascript/bridge-design-pattern)

* [ ] [ Wikipedia - Bridge pattern](https://en.wikipedia.org/wiki/Bridge_pattern)

#### Proxy

Learn about the proxy design pattern and when it should be used.

* [ ] [ Proxy Pattern](https://refactoring.guru/design-patterns/proxy)

* [ ] [ Proxy Example](https://www.dofactory.com/javascript/proxy-design-pattern)

* [ ] [ Wikipedia - Proxy pattern](https://en.wikipedia.org/wiki/Proxy_pattern)

#### Chain of responsibility

Learn about the chain of responsibility design pattern and when it should be used.

* [ ] [ Chain of Responsibility Pattern](https://refactoring.guru/design-patterns/chain-of-responsibility)

* [ ] [ Chain of Responsibility Example](https://www.dofactory.com/javascript/chain-of-responsibility-design-pattern)

* [ ] [ Wikipedia - Chain of responsibility](https://en.wikipedia.org/wiki/Chain-of-responsibility_pattern)

#### Constructor

Learn about the constructor design pattern and when it should be used.

* [ ] [ The Constructor Pattern](https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s01.html)

* [ ] [ Fundamental Object Design Patterns in JavaScript](https://medium.com/@severinperez/javascript-weekly-fundamental-object-design-patterns-31453f68427f)

* [ ] [ Difference between Constructor pattern and Prototype pattern](https://stackoverflow.com/questions/35057827/difference-between-constructor-pattern-and-prototype-pattern)

### CSS Methodologies

Learn how CSS can be structured using CSS methodologies.

* [ ] [ A Look at Some CSS Methodologies](https://www.webfx.com/blog/web-design/css-methodologies/)

* [ ] [ A web designer's guide to CSS methodologies](https://www.creativebloq.com/features/a-web-designers-guide-to-css-methodologies)

* [ ] [ Understanding CSS Writing Methodologies](https://www.hongkiat.com/blog/css-writing-methodologies/)

#### BEM

Learn about the BEM methodology and when it should be used.

* [ ] [ Get BEM](http://getbem.com/)

* [ ] [ CSS Tricks - BEM 101](https://css-tricks.com/bem-101/)

* [ ] [ What is BEM? And Why you should use it in your project.](https://medium.com/@dannyhuang_75970/what-is-bem-and-why-you-should-use-it-in-your-project-ab37c6d10b79)

#### SMACSS

Learn about the SMACSS methodology and when it should be used.

* [ ] [ SMACSS](http://smacss.com/)

* [ ] [ BEM vs SMACSS](https://www.sitepoint.com/bem-smacss-advice-from-developers/)

#### OOCSS

Learn about the OOCSS methodology and when it should be used.

* [ ] [ OOCSS](https://github.com/stubbornella/oocss/wiki)

* [ ] [ An Introduction To Object Oriented CSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)

* [ ] [ The Future of Writing CSS](https://www.keycdn.com/blog/oocss)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#team-collaboration)

## ➤ Team Collaboration

### Version Control

### Git

Learn about git and how it is used for version control.

* [ ] [ Learn Git Branching](https://learngitbranching.js.org/)

* [ ] [ Git Handbook](https://guides.github.com/introduction/git-handbook/)

* [ ] [ Github Cheatsheet](https://github.github.com/training-kit/downloads/github-git-cheat-sheet/)

* [ ] [ Visualizing Git](http://git-school.github.io/visualizing-git/)

* [ ] [ Codecademy - Learn Gitthis](https://www.codecademy.com/learn/learn-git)

* [ ] [ Git Hint](https://git-hint.netlify.com/)

#### Github

Learn how to use Github.

* [ ] [ What is GitHub?](https://guides.github.com/activities/hello-world/)

* [ ] [ GitHub Learning Lab](https://lab.github.com/)

* [ ] [ Wikipedia - Github](https://en.wikipedia.org/wiki/Github)

#### Bitbucket

Learn how to use Bitbucket.

* [ ] [ Wikipedia - Bitbucket](https://en.wikipedia.org/wiki/Bitbucket)

* [ ] [ Tutorial: Learn Bitbucket with Git](https://confluence.atlassian.com/bitbucket/tutorial-learn-bitbucket-with-git-759857287.html)

* [ ] [ Getting Started with Bitbucket for Version Control](https://www.tecmint.com/bitbucket-for-version-control/)

### Management

### Agile Development

Learn about agile development and when to use it.

* [ ] [ Wikipedia - Agile software development](https://en.wikipedia.org/wiki/Agile_software_development)

* [ ] [ What is agile methodology?](https://www.infoworld.com/article/3237508/what-is-agile-methodology-modern-software-development-explained.html)

* [ ] [ What is Agile Software Development?](https://www.visual-paradigm.com/scrum/what-is-agile-software-development/)

#### Scrum

Learn about scrum and when to use it.

* [ ] [ Scrum Tutorial](https://www.knowledgehut.com/tutorials/scrum-tutorial)

* [ ] [ Scrum - Overview](https://www.tutorialspoint.com/scrum/scrum_overview.htm)

#### Kanban

Learn about kanban and when to use it.

* [ ] [ Kanban Tutorial](https://www.tutorialspoint.com/kanban/kanban_introduction.htm)

* [ ] [ What is kanban?](https://www.atlassian.com/agile/kanban)

* [ ] [ Kanban Fundamentals](https://www.scrumhub.com/kanban-fundamentals/)

### Waterfall Development

Learn about waterfall development and when to use it.

* [ ] [ Waterfall Model](https://www.tutorialspoint.com/sdlc/sdlc_waterfall_model.htm)

* [ ] [ Waterfall vs. Agile](https://www.seguetech.com/waterfall-vs-agile-methodology/)

* [ ] [ Waterfall Model: What and when](https://airbrake.io/blog/sdlc/waterfall-model)

### Test Driven Development

Learn about test driven development and when to use it.

* [ ] [ Wikipedia - Test-driven development](https://en.wikipedia.org/wiki/Test-driven_development)

* [ ] [ Red, Green, Refactor](https://www.codecademy.com/articles/tdd-red-green-refactor)

* [ ] [ Freecodecamp - Test Driven Development](https://www.freecodecamp.org/news/test-driven-development-what-it-is-and-what-it-is-not-41fa6bca02a2/)

* [ ] [ TDD Changed My Life](https://medium.com/javascript-scene/tdd-changed-my-life-5af0ce099f80)

* [ ] [ dev.to - Test-driven development in JavaScript](https://dev.to/tomekbuszewski/test-driven-development-in-javascript-olg)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#design--ux)

## ➤ Design & UX

### Color Theory

Learn about color theory and how you can make your own color schemes.

* [ ] [ All you need to know about colors in UI Design](https://uxdesign.cc/all-you-need-to-know-about-colors-in-ui-design-theory-practice-235179712522)

* [ ] [ The Role of Color in UX](https://www.toptal.com/designers/ux/color-in-ux)

* [ ] [ 10 Questions of Color Theory](https://medium.muz.li/10-questions-of-color-theory-that-will-make-you-a-better-ux-designer-b5244c1341a6)

* [ ] [ Wikipedia - Color Theory](https://en.wikipedia.org/wiki/Color_theory)

* [ ] [ The Meaning of Color](https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/)

* [ ] [ 50 Gorgeous Color Schemes](https://visme.co/blog/website-color-schemes/)

#### Color Wheel

Learn how to use the color wheel when making a color scheme.

* [ ] [ Color Theory: Brief Guide For Designers](https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa)

* [ ] [ Color theory and the color wheel](https://www.canva.com/colors/color-wheel/)

* [ ] [ The fundamentals of understanding color theory](https://99designs.dk/blog/tips/the-7-step-guide-to-understanding-color-theory/)

* [ ] [ Adobe - Color wheel](https://color.adobe.com/)

### Typography

Learn about typography and how to describe fonts.

* [ ] [ Google - Understanding typography](https://material.io/design/typography/understanding-typography.html#type-classification)

* [ ] [ How to Understand Typography](https://www.howtogeek.com/howto/30065/how-to-understand-typography-like-a-professional-designer/)

* [ ] [ Typography Elements Everyone Needs to Understand](https://medium.com/gravitdesigner/typography-elements-everyone-needs-to-understand-5fdea82f470d)

* [ ] [ Youtube - 10 rules to help you rule type](https://www.youtube.com/watch?v=QrNi9FmdlxY)

* [ ] [ Font Design](https://www.canva.com/learn/font-design/)

* [ ] [ Typography Tutorial for Beginners](https://blog.hubspot.com/marketing/typography-terms-introduction)

* [ ] [ A Crash Course in Typography](https://www.jotform.com/blog/a-crash-course-in-typography-the-basics-of-type/)

* [ ] [ Type Classifications](https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications)

* [ ] [ Google Fonts](https://fonts.google.com/)

* [ ] [ 7 web typography rules](https://uxdesign.cc/7-web-typography-rules-27de68c60f6)

* [ ] [ 15 Best Practices To Excellent UI](https://medium.muz.li/typography-in-mobile-design-15-best-practices-to-excellent-ui-5eaf18280ad)

#### Font Size

Learn about font sizes and how to choose the right one.

* [ ] [ Type scale](https://type-scale.com/)

* [ ] [ The importance of font size](https://www.cardinalpath.com/the-importance-of-font-size/)

* [ ] [ Website font size: Size does matter](https://www.liveseysolar.com/website-font-size-size-does-matter/)

* [ ] [ CSS Tricks - font-size](https://css-tricks.com/almanac/properties/f/font-size/)

* [ ] [ CSS Tricks - Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/)

#### Line Spacing

Learn about line spacing and how to choose the right one.

* [ ] [ Best UX practices for line spacing](https://www.justinmind.com/blog/best-ux-practices-for-line-spacing/)

* [ ] [ Line spacing](https://practicaltypography.com/line-spacing.html)

* [ ] [ Why you should go big with line spacing](https://www.invisionapp.com/inside-design/line-spacing/)

* [ ] [ CSS Tricks - line-height](https://css-tricks.com/almanac/properties/l/line-height/)

### C.R.A.P

Learn how the C.R.A.P. design principles can help you point out the qualities (or flaws) in a design.

* [ ] [ Build Better User Experience](https://vwo.com/blog/crap-design-principles/)

* [ ] [ CRAP Principles](https://www.instructables.com/id/CRAP-principles/)

* [ ] [ The Non-Designer's Design Book](https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133966151)

* [ ] [ Youtube - The Non-Designers Design Book](https://www.youtube.com/watch?v=NZ3ryLUR8CI)

* [ ] [ How CRAP Will Make You a Better Designer](https://creativemarket.com/blog/how-crap-will-make-you-a-better-designer)

* [ ] [ The Big Four: Contrast, Repetition, Alignment, Proximity](https://www.presentationzen.com/chapter6_spread.pdf)

#### Contrast

Learn how the principles of contrast can help you when designing.

* [ ] [ Designing with contrast: 20 tips from a designer](https://www.canva.com/learn/contrasting-colors/)

* [ ] [ Contrast Design principle of Graphic Design](https://www.youtube.com/watch?v=r0SAPEw0ru4)

* [ ] [ Contrast In Design](https://www.designcontest.com/blog/contrast-in-design/)

* [ ] [ Fully understanding contrast in design](https://www.webdesignerdepot.com/2010/09/fully-understanding-contrast-in-design/)

#### Repetition

Learn how the principles of repetition can help you when designing.

* [ ] [ Repetition Design principle of Graphic Design](https://www.youtube.com/watch?v=u55BW6WBqVU)

* [ ] [ Repetition Principle of Design](https://254-online.com/repetition-principle-of-design/)

* [ ] [ Repetition, Pattern, and Rhythm](https://www.interaction-design.org/literature/article/repetition-pattern-and-rhythm)

* [ ] [ Repetition, principles of design](https://www.johnlovett.com/repetition)

* [ ] [ How to Use Repetition Effectively](https://www.edgee.net/the-principles-of-graphic-design-how-to-use-repetition-effectively/)

#### Alignment

Learn how the principles of alignment can help you when designing.

* [ ] [ Alignment Design principle of Graphic Design](https://www.youtube.com/watch?v=2kokQi9vb6E)

* [ ] [ Alignment Principle Of Design](https://254-online.com/alignment-principle-design/)

* [ ] [ The Art Of Alignment In Graphic Design](https://www.designmantic.com/blog/art-of-alignment-graphic-design/)

* [ ] [ Introduction to Alignment](https://uxengineer.com/principles-of-design/alignment/)

#### Proximity

Learn how the principles of proximity can help you when designing.

* [ ] [ Proximity Design principle of Graphic Design](https://www.youtube.com/watch?v=xUdqSiI_G8Y)

* [ ] [ How to Use Proximity Effectively](https://www.edgee.net/the-principles-of-graphic-design-how-to-use-proximity-effectively/)

* [ ] [ Proximity Principle Of Design](https://254-online.com/proximity-principle-design/)

* [ ] [ Gestalt Theory for UX Design: Principle of Proximity](https://uxplanet.org/gestalt-theory-for-ux-design-principle-of-proximity-e56b136d52d1)

* [ ] [ Principles of Design: Proximity](https://www.sitepoint.com/principles-of-design-proximity/)

### Consistency

Learn why consistency is one of the most important building-blocks in a design.

* [ ] [ Design principle: Consistency](https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f)

* [ ] [ Consistency, A Key Design Principle](https://blog.prototypr.io/consistency-a-key-design-principle-5d125469da8e)

* [ ] [ Consistency: MORE than what you think](https://www.interaction-design.org/literature/article/consistency-more-than-what-you-think)

* [ ] [ Principle of Consistency in User Interface Design](https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design)

* [ ] [ The value of consistent design](https://www.invisionapp.com/inside-design/consistent-design/)

### Spacing

Learn how to use space in your design.

* [ ] [ Space in Design Systems](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62)

* [ ] [ How to use spacing margin and spacing in design](https://visme.co/blog/how-to-properly-use-margins-and-spacing-in-design/)

* [ ] [ How To Use Space In Design](https://vanseodesign.com/web-design/design-space/)

* [ ] [ Importance of White Space in Design](https://blog.prototypr.io/importance-of-white-space-in-design-5a40c0e65bfd)

* [ ] [ Negative Space in Design](https://tubikstudio.com/negative-space-in-design-tips-and-best-practices-2/)

* [ ] [ How to Change Line Spacing in InDesign](https://www.shutterstock.com/support/article/how-to-change-line-spacing-in-indesign)

### Error Handling

Learn how to improve the user experience by handling errors in an intuitive way.

* [ ] [ Design an Error Handling System before you structure your App](https://medium.com/lattice-product-development/design-an-error-handling-system-before-you-structure-your-app-or-software-project-part-i-efe6a1674628)

* [ ] [ UI Error Handling](https://uimovement.com/tag/error-handling/)

* [ ] [ Creating Error Messages](https://uxdesign.cc/creating-error-messages-best-practice-in-ux-design-cda3be0f5e16)

### Loading

Learn how a loading state can improve the user experience.

* [ ] [ Everything you need to know about skeleton screens](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a)

* [ ] [ Engaging users with progressive loading in skeleton screen](https://uxdesign.cc/engaging-users-with-progressive-loading-in-skeleton-screen-335a4e287a55)

* [ ] [ Design and code responsive Skeleton Screens](https://marinaaisa.com/blog/design-and-code-skeletons-screens/)

* [ ] [ How to Speed Up Your UX with Skeleton Screens](https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/)

* [ ] [ A Bone to Pick with Skeleton Screens](https://www.viget.com/articles/a-bone-to-pick-with-skeleton-screens/)

* [ ] [ When to use loaders & empty states](https://uxdesign.cc/when-to-use-loaders-empty-states-ebd23cecc7d6)

* [ ] [ Empty/Loading State](https://www.uisources.com/pattern/empty-loading-state)

* [ ] [ When You Need to Show a Button’s Loading State](https://uxmovement.com/buttons/when-you-need-to-show-a-buttons-loading-state/)

* [ ] [ Stop Using Loading Spinner](https://blog.iamsuleiman.com/stop-using-loading-spinner-theres-something-better/)

### The Golden Ratio

Learn how the golden ratio can help you when choose measurements for your design.

* [ ] [ The Golden Ratio in Design](https://designshack.net/articles/layouts/golden-ratio-in-design/)

* [ ] [ A guide to the Golden Ratio for designers](https://www.invisionapp.com/inside-design/golden-ratio-designers/)

* [ ] [ What is the golden ratio](https://www.canva.com/learn/what-is-the-golden-ratio/)

* [ ] [ The Golden Ratio: A designer's guide](https://www.creativebloq.com/design/designers-guide-golden-ratio-12121546)

* [ ] [ Golden Ratio: What It Is And Why Should You Use It In Design](https://blog.prototypr.io/golden-ratio-what-it-is-and-why-should-you-use-it-in-design-7c3f43bcf98)

* [ ] [ Golden Ratio Typography (GRT) Calculator](https://grtcalculator.com/)

* [ ] [ How to Use the Golden Ratio](https://www.companyfolders.com/blog/golden-ratio-design-examples)

* [ ] [ Golden Ratio in Design](https://wpamelia.com/golden-ratio/)

* [ ] [ How To Use The Golden Ratio In Design](https://www.format.com/magazine/resources/design/golden-ratio-in-design)

### Mobile First

Learn about designing for mobile first and why it is important.

* [ ] [ Complete guide to mobile first design](https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/)

* [ ] [ What is Mobile First Design?](https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00)

* [ ] [ A Hands-On Guide to Mobile-First Responsive Design](https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/)

* [ ] [ Mobile First Design](https://designshack.net/articles/mobile/mobilefirst/)

#### Hit Targets

Learn about hit targets can why they should not be neglected.

* [ ] [ Finger-Friendly Design](https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/)

* [ ] [ Size matters! Accessibility and Touch Targets](https://medium.com/@zacdicko/size-matters-accessibility-and-touch-targets-56e942adc0cc)

* [ ] [ Optimal Size and Spacing for Mobile Buttons](https://uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/)

### Design Systems

Learn what design systems are and get familiar with some.

* [ ] [ A guide to design systems](https://www.invisionapp.com/inside-design/guide-to-design-systems/)

* [ ] [ What the heck is a design system?](https://uxdesign.cc/what-the-heck-is-a-design-system-c89a8ea73b0d)

* [ ] [ Everything you need to know about Design Systems](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969)

* [ ] [ What is a Design System?](https://medium.muz.li/what-is-a-design-system-1e43d19e7696)

* [ ] [ What's a Design System](https://dev.to/graphqleditor/what-s-design-system-and-why-you-need-one-31fh)

#### Material Design

Learn about material design and get familiar with the core principles.

* [ ] [ Google - Material Design](https://material.io/design/)

* [ ] [ Google - Material Components](https://material.io/components/)

* [ ] [ Google - Material Develop](https://material.io/develop/web/)

* [ ] [ Google - Material Tutorial](https://material.io/collections/developer-tutorials/#web)

* [ ] [ Wikipedia - Material Design](https://en.wikipedia.org/wiki/Material_Design)

#### Fluent Design

Learn about fluent design and get familiar with the core principles.

* [ ] [ Microsoft - Fluent Design System](https://www.microsoft.com/design/fluent/#/web)

* [ ] [ Microsoft - Fluent UI Toolkit](https://www.microsoft.com/design/fluent/toolkits/)

* [ ] [ Wikipedia - Fluent Design System](https://en.wikipedia.org/wiki/Fluent_Design_System)

* [ ] [ Fluent: Design Behind the Design](https://medium.com/microsoft-design/fluent-design-behind-the-design-973028062fcc)

* [ ] [ Iconic Icons: Designing the World of Windows](https://medium.com/microsoft-design/iconic-icons-designing-the-world-of-windows-5e70e25e5416)

* [ ] [ Evolving the Microsoft Fluent Design System](https://medium.com/microsoft-design/evolving-the-microsoft-fluent-design-system-9b37fb890c82)

### Accessibility

Learn how and why it is important to design for accessibility.

* [ ] [ Designing For Accessibility And Inclusion](https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/)

* [ ] [ Designing for accessibility is not that hard](https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94)

* [ ] [ Designing Accessible Experiences at Scale](https://theblog.adobe.com/accessibility-design-at-scale/)

* [ ] [ Material Design - Accessibility](https://material.io/design/usability/accessibility.html#)

* [ ] [ W3C - Designing for Web Accessibility](https://www.w3.org/WAI/tips/designing/)

* [ ] [ Accessibility in government](https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/)

* [ ] [ W3C - Visual Presentation](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)

### Best Practices

Learn about some of the best practices when designing.

* [ ] [ 13 Website Design Best Practices For 2019](https://www.quicksprout.com/website-design-best-practices/)

* [ ] [ Design Best Practices](https://medium.com/thinking-design/design-best-practices/home)

* [ ] [ Refactoring UI](https://refactoringui.com/)

* [ ] [ Refactoring UI | CSS Day 2019](https://www.youtube.com/watch?v=7Z9rrryIOC4)

* [ ] [ Dieter Ram' 10 principles for good design](https://www.3pillarglobal.com/insights/dieter-rams-10-principles-good-design)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#the-modern-web)

## ➤ The Modern Web

### Streams

Learn about streams and how they can help you effeciently transporting data.

* [ ] [ MDN - Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)

* [ ] [ MDN - Streams API concepts](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Concepts)

* [ ] [ Experimenting with the Streams API](https://deanhume.com/experimenting-with-the-streams-api/)

* [ ] [ WHATWG - Streams](https://streams.spec.whatwg.org/)

#### Media Streams

Learn about media streams and how it is possible to get a stream to device specific hardware such as the camera or microphone.

* [ ] [ MDN - Media Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API)

* [ ] [ MDN - Image Capture API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API)

* [ ] [ MDN - mediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)

* [ ] [ W3C - Media Capture and Streams](https://w3c.github.io/mediacapture-main/#dom-mediastream)

#### Media Recorder

Learn how to use the media recorder API to record media streams.

* [ ] [ MDN - MediaStream Recording API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)

* [ ] [ Media Recorder API Demo](https://addpipe.com/media-recorder-api-demo/)

* [ ] [ WTC - MediaStream Recording](https://www.w3.org/TR/mediastream-recording/)

* [ ] [ What Web Can Do Today - Recording Media](https://whatwebcando.today/recording.html)

#### Web RTC

Learn how to use Web RTC for establishing real-time communication.

* [ ] [ MDN - WebRTC API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)

* [ ] [ WebRTC - Getting Started](https://webrtc.org/start/)

* [ ] [ WebRTC samples](https://webrtc.github.io/samples/)

* [ ] [ Wikipedia - WebRTC](https://en.wikipedia.org/wiki/WebRTC)

* [ ] [ What Web Can Do Today - WebRTC](https://whatwebcando.today/realtime.html)

#### Screen Capture

Learn how to use the Screen Capture API for recording the screen.

* [ ] [ MDN - Screen Capture API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API)

* [ ] [ dev.to - Intro to Screen Capture API](https://dev.to/al_khovansky/intro-to-screen-capture-api-scanning-qr-codes-bgi)

* [ ] [ W3C - Screen Capture](https://www.w3.org/TR/screen-capture/)

#### Generators

Learn how to use generator functions to define iterative algorithms by writing functions whose execution is not continuous.

* [ ] [ MDN - Iterators and generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)

* [ ] [ Functional JavaScript - Streams](https://blog.jeremyfairbank.com/javascript/functional-javascript-streams-2/)

* [ ] [ Understanding Generators with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5)

* [ ] [ MDN - function*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)

* [ ] [ MDN - yield*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*)

* [ ] [ dev.to - JavaScript Visualized: Generators and Iterators](https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36)

* [ ] [ javascript.info - Generators](https://javascript.info/generators)

* [ ] [ Medium - A Simple Guide to Understanding Javascript Generators](https://medium.com/dailyjs/a-simple-guide-to-understanding-javascript-es6-generators-d1c350551950)

### Speech Synthesis

Learn how the speech synthesis API can help you converting text to speech.

* [ ] [ Google Devs - Web apps that talk](https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API)

* [ ] [ MDN - window.speechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis)

* [ ] [ MDN - SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)

* [ ] [ W3C - Web Speech API](https://w3c.github.io/speech-api)

* [ ] [ The Speech Synthesis API](https://flaviocopes.com/speech-synthesis-api/)

### Web Sockets

Learn about web sockets and how you can push data to your web app.

* [ ] [ MDN - Websockets API](https://developer.mozilla.org/en-US/docs/Web/API/Websockets_API)

* [ ] [ What are Web Sockets?](https://medium.com/@dominik.t/what-are-web-sockets-what-about-rest-apis-b9c15fd72aac)

* [ ] [ HTML5 Rocks - Introducing WebSockets](https://www.html5rocks.com/en/tutorials/websockets/basics/)

* [ ] [ WHATWG - Web sockets](https://html.spec.whatwg.org/multipage/web-sockets.html)

### Geolocation

Learn how to ask the user for permission to the location.

* [ ] [ MDN - Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)

* [ ] [ Alligrator - Using the Geolocation API](https://alligator.io/js/geolocation-api/)

* [ ] [ Google Maps Platform - Displaying User Position on Maps](https://developers.google.com/maps/documentation/javascript/geolocation)

* [ ] [ What Web Can Do Today - Geolocation](https://whatwebcando.today/geolocation.html)

### Device orientation & motion

Learn how to measure the orientation and motion of the device.

* [ ] [ MDN - Detecting device orientation](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation)

* [ ] [ W3C - DeviceOrientation Event Specification](https://www.w3.org/TR/orientation-event/)

* [ ] [ HTML5 Rocks - Introduction](https://www.html5rocks.com/en/tutorials/device/orientation/index.html)

* [ ] [ What Web Can Do Today - Device Position](https://whatwebcando.today/device-position.html)

* [ ] [ W3C - Generic Sensor API](https://www.w3.org/TR/generic-sensor/)

* [ ] [ MDN - Sensor APIs](https://developer.mozilla.org/en-US/docs/Web/API/Sensor_APIs)

* [ ] [ Google Devs - Sensors For The Web](https://developers.google.com/web/updates/2017/09/sensors-for-the-web)

### Fullscreen

Learn how to use the fullscreen API to give the user a more immersive experience when needed.

* [ ] [ MDN - Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)

* [ ] [ Google Devs - Let Your Content Do the Talking](https://developers.google.com/web/updates/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API)

* [ ] [ David Walsh - Fullscreen API](https://davidwalsh.name/fullscreen)

### Variable Fonts

Learn how to use variable fonts and how it is possible to customize fonts without the need for loading more.

* [ ] [ v-fonts](https://v-fonts.com/)

* [ ] [ MDN - Variable fonts guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)

* [ ] [ Google Devs - Introduction to variable fonts](https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts)

* [ ] [ Supercharged - Variable Fonts](https://www.youtube.com/watch?v=B42rUMdcB7c)

### HTTP/2

Learn about the faster and more convenient HTTP/2 protocol.

* [ ] [ Google Devs - Introduction to HTTP/2](https://developers.google.com/web/fundamentals/performance/http2/)

* [ ] [ Wikipedia - HTTP/2](https://en.wikipedia.org/wiki/HTTP/2)

* [ ] [ HTTP/2: the difference between HTTP/1.1](https://medium.com/@factoryhr/http-2-the-difference-between-http-1-1-benefits-and-how-to-use-it-38094fa0e95b)

* [ ] [ HTTP/2 - FAQ](https://http2.github.io/faq/)

* [ ] [ Why turning on HTTP/2 was a mistake](https://www.lucidchart.com/techblog/2019/04/10/why-turning-on-http2-was-a-mistake/)

### Payment Request API

Learn about the payment request API and how it can help monetize your web app.

* [ ] [ MDN - Payment Request API](https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API)

* [ ] [ Codelabs - Payment Request API](https://developers.google.com/web/fundamentals/codelabs/payment-request-api)

* [ ] [ What Web Can Do Today - Payments](https://whatwebcando.today/payments.html)

* [ ] [ W3C - Payment Request API](https://www.w3.org/TR/payment-request/)

* [ ] [ Google Devs - Introduction to the Payment Request API](https://developers.google.com/web/ilt/pwa/introduction-to-the-payment-request-api)

### Web Audio

Learn how to use the Web Audio API to add audio to your web app.

* [ ] [ MDN - Using the Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)

* [ ] [ MDN - Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)

* [ ] [ W3C - Web Audio API](https://www.w3.org/TR/webaudio/)

* [ ] [ HTML5 Rocks - Getting Started with Web Audio API](https://www.html5rocks.com/en/tutorials/webaudio/intro/)

* [ ] [ All You Need to Know About the Web Audio API](https://medium.com/better-programming/all-you-need-to-know-about-the-web-audio-api-3df170559378)

* [ ] [ Alligator - Your First Steps with the Web Audio API](https://alligator.io/js/first-steps-web-audio-api/)

### Observers

Learn about the observer pattern and get comfortable concepts such as subjects and observers.

* [ ] [ Javascript Observers and You](https://chromatichq.com/blog/javascript-observers-and-you)

* [ ] [ How to Use the Observable Pattern in JavaScript](https://webdevstudios.com/2019/02/19/observable-pattern-in-javascript/)

* [ ] [ Wikipedia - Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern)

* [ ] [ The Observer Pattern with Vanilla JavaScript](https://medium.com/@patrickackerman/the-observer-pattern-with-vanilla-javascript-8f85ea05eaa8)

#### Mutation Observer

Learn how to use the Mutation Observer API to get informed about changes to the DOM.

* [ ] [ MDN - MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)

* [ ] [ Listening to the DOM changes with MutationObserver](https://medium.com/@abbeal/listening-to-the-dom-changes-with-mutationobserver-b53a068a58d2)

* [ ] [ David Walsh - MutationObserver API](https://davidwalsh.name/mutationobserver-api)

* [ ] [ javascript.info - Mutation observer](https://javascript.info/mutation-observer)

* [ ] [ WHATWG - Mutation observers](https://dom.spec.whatwg.org/#mutation-observers)

#### Intersection Observer

Learn how to use the Intersection Observer API can help you detect when an element is visible on the screen.

* [ ] [ MDN - Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

* [ ] [ W3C - Intersection Observer](https://www.w3.org/TR/intersection-observer/)

* [ ] [ Google Devs - Trust is Good, Observation is Better](https://developers.google.com/web/updates/2019/02/intersectionobserver-v2)

* [ ] [ CSS Tricks - An Explanation of Intersection Observers](https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/)

* [ ] [ Understanding the Intersection Observer API in JavaScript](https://medium.com/better-programming/understanding-intersection-observer-api-in-javascript-bb1bf04b8081)

* [ ] [ CSS Tricks - A Few Functional Uses for Intersection Observer](https://css-tricks.com/a-few-functional-uses-for-intersection-observer-to-know-when-an-element-is-in-view/)

* [ ] [ google Devs - An event for CSS position:sticky](https://developers.google.com/web/updates/2017/09/sticky-headers)

#### Resize Observer

Learn how to use the Resize Observer API to get informed when the element resizes.

* [ ] [ MDN - Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)

* [ ] [ Google Devs - It’s Like document.onresize for Elements](https://developers.google.com/web/updates/2016/10/resizeobserver)

* [ ] [ Alligator - A Look at the Resize Observer JavaScript API](https://alligator.io/js/resize-observer/)

* [ ] [ David Walsh - Resize Observer](https://davidwalsh.name/resize-observer)

#### Performance Observer

Learn how the Performance Observer API can help you get information about the performance of your web app.

* [ ] [ MDN - Long Tasks API](https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API)

* [ ] [ MDN - PerformanceObserver](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)

* [ ] [ Google Devs - Efficient Access to Performance Data](https://developers.google.com/web/updates/2016/06/performance-observer)

### Scrollsnapping

Learn about the Scrollsnapping API and how it can help you provide an intuitive experience when scrolling.

* [ ] [ CSS Tricks - Practical CSS Scroll Snapping](https://css-tricks.com/practical-css-scroll-snapping/)

* [ ] [ CSS Tricks - Introducing CSS Scroll Snap Points](https://css-tricks.com/introducing-css-scroll-snap-points/)

* [ ] [ Google Devs - Well-Controlled Scrolling with CSS Scroll Snap](https://developers.google.com/web/updates/2018/07/css-scroll-snap)

* [ ] [ MDN - CSS Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap)

* [ ] [ The scroll-snap-* Properties](https://webkit.org/demos/scroll-snap/index.html)

### Web Assembly

Learn about Web Assembly and how it opens up the playing field for new types of web apps.

* [ ] [ MDN - WebAssembly Concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)

* [ ] [ MDN - WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)

* [ ] [ dev.to - Why the heck is everyone talking about WebAssembly?](https://dev.to/captainsafia/why-the-heck-is-everyone-talking-about-webassembly-455a)

* [ ] [ Introduction to Web Assembly](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-web-assembly-6cb6466a3478)

* [ ] [ Google Codelabs - An Introduction to Web Assembly](https://codelabs.developers.google.com/codelabs/web-assembly-intro/index.html#0)

* [ ] [ How We Used WebAssembly To Speed Up Our Web App By 20X](https://www.smashingmagazine.com/2019/04/webassembly-speed-web-app/)

* [ ] [ Google Devs - WebAssembly](https://developers.google.com/web/updates/2019/02/hotpath-with-wasm)

### Beacon

Learn how the Beacon API can help you send data to endpoints before the user closes the page.

* [ ] [ MDN - sendBeacon](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)

* [ ] [ MDN - Using the Beacon API](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API)

* [ ] [ Logging Activity With The Web Beacon API](https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/)

### Clipboard

Learn about the Clipboard API and how it can help you copy and paste data.

* [ ] [ MDN - Clipboard](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard)

* [ ] [ What Web Can Do Today - Clipboard (Copy & Paste)](https://whatwebcando.today/clipboard.html)

* [ ] [ Google Devs - Image Support for the Async Clipboard API](https://developers.google.com/web/updates/2019/07/image-support-for-async-clipboard)

### Share

Learn how the Web Share API can help users sharing your web app.

* [ ] [ MDN - Share](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)

* [ ] [ Google Devs - Introducing the Web Share API](https://developers.google.com/web/updates/2016/09/navigator-share)

* [ ] [ Google Devs - Registering as a Share Target](https://developers.google.com/web/updates/2018/12/web-share-target)

* [ ] [ CSS Tricks - How to Use the Web Share API](https://css-tricks.com/how-to-use-the-web-share-api/)

* [ ] [ The Web Share API](https://blog.arnellebalane.com/the-web-share-api-2cbb3e6cf007)

* [ ] [ dev.to - How to implement the Web Share API with a fallback](https://dev.to/daviddalbusco/how-to-implement-the-web-share-api-with-a-fallback-b3)

### Performance API

Learn about the Performance API and how it can help you monitor the performance of the device.

* [ ] [ MDN - Performance](https://developer.mozilla.org/en-US/docs/Web/API/Performance)

* [ ] [ MDN - performance.measure()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure)

* [ ] [ CSS Tricks - Breaking Down the Performance API](https://css-tricks.com/breaking-performance-api/)

* [ ] [ Google Devs - Assessing Loading Performance](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/)

* [ ] [ MDN - Performance Specifications](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API#Specifications)

* [ ] [ MDN - Performance Timeline](https://developer.mozilla.org/en-US/docs/Web/API/Performance_Timeline)

### Gamepad API

Learn how the Gamepad API can help you integrate with various controllers such as an x-box or playstation controller

* [ ] [ MDN - Using the Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)

* [ ] [ MDN - Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)

* [ ] [ luser - Gamepad Test](http://luser.github.io/gamepadtest/)

* [ ] [ MDN - Implementing controls using the Gamepad API](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API)

### Speech Recognition

Learn how to use the Speech Recognition API to analyze speech.

* [ ] [ MDN - Using the Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)

* [ ] [ David Walsh - JavaScript Speech Recognition](https://davidwalsh.name/speech-recognition)

* [ ] [ MDN - SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)

* [ ] [ MDN - Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)

* [ ] [ Github - web-speech-api](https://github.com/mdn/web-speech-api/)

* [ ] [ What Web Can Do Today - Speech Recognition](https://whatwebcando.today/speech-recognition.html)

### Interaction Media Queries

Learn how to use Interaction Media Queries to optimize the user experience for the specific type of device.

* [ ] [ Introducing CSS Interaction Media Queries](https://medium.com/@rossbulat/introducing-css-interaction-media-queries-38eea48f4221)

* [ ] [ MDN - Media features](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features)

* [ ] [ Touch Devices Should Not Be Judged By Their Size](https://css-tricks.com/touch-devices-not-judged-size/)

* [ ] [ Interaction Media Features and their potential](https://dev.opera.com/articles/media-features/)

* [ ] [ W3C - Interaction Media Features](https://www.w3.org/TR/mediaqueries-4/#mf-interaction)

* [ ] [ What Web Can Do Today - Pointing Device Adaptation](https://whatwebcando.today/pointer-adaptation.html)

### Browser Extensions

Learn how to build browser extensions to enhance the functionality of your browser.

* [ ] [ MDN - Browser Extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)

* [ ] [ Chrome - What are extensions?](https://developer.chrome.com/extensions)

* [ ] [ Chrome - Getting Started with Extensions](https://developer.chrome.com/extensions/getstarted)

* [ ] [ Youtube - Google Chrome Extensions](https://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B)

### Pointer Lock API

Learn how to use the Pointer Lock API to get the raw mouse movement and lock the target of mouse events to a single element.

* [ ] [ MDN - Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)

* [ ] [ W3C - Pointer Lock](https://www.w3.org/TR/pointerlock/)

* [ ] [ Use the Pointer Lock API to Restrict Mouse Movement](https://dzone.com/articles/html5-use-pointer-lock-api)

### Picture In Picture

Learn how to use the Picture-In-Picture API to watch videos in a floating window (always on top of other windows).

* [ ] [ Google Devs - Watch video using Picture-in-Picture](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)

* [ ] [ Picture-in-Picture Sample](https://googlechrome.github.io/samples/picture-in-picture/)

* [ ] [ CSS Tricks - An Introduction to Picture-in-Picture](https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/)

* [ ] [ dev.to - Implement Picture-in-Picture on the Web](https://dev.to/ananyaneogi/implement-picture-in-picture-on-the-web-17g8)

* [ ] [ Medium - How to use “picture in picture 📺” in JavaScript.](https://medium.com/@ashifa454/how-to-use-picture-in-picture-in-javascript-d315296c5800)

### Proxies

Learn how to use proxies to intercept certain operations and implement custom behaviors.

* [ ] [ MDN - Meta programming](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Meta_programming)

* [ ] [ MDN - Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)

* [ ] [ A practical guide to Javascript Proxy](https://blog.bitsrc.io/a-practical-guide-to-es6-proxy-229079c3c2f0?gi=92cd1f951006)

* [ ] [ Introducing Javascript ES6 Proxies](https://hackernoon.com/introducing-javascript-es6-proxies-1327419ab413)

* [ ] [ Medium - How to use JavaScript Proxies for Fun and Profit](https://medium.com/dailyjs/how-to-use-javascript-proxies-for-fun-and-profit-365579d4a9f8)

### Houdini

Learn about the Houdini project and get excited about the future of CSS.

* [ ] [ Google Devs - Houdini, Demystifying CSS](https://developers.google.com/web/updates/2016/05/houdini)

* [ ] [ web.dev - Smarter custom properties](https://web.dev/css-props-and-vals/)

* [ ] [ CSS Houdini Experiments](https://css-houdini.rocks/)

* [ ] [ Interactive Introduction to CSS Houdini](http://houdini.glitch.me/)

* [ ] [ W3C - CSS Houdini Wiki](https://github.com/w3c/css-houdini-drafts/wiki)

* [ ] [ Google Devs - Houdini's Animation Worklet](https://developers.google.com/web/updates/2018/10/animation-worklet)

### Project Fugu

Learn about Project Fugu project and get excited about the future of the Web.

* [ ] [ Our commitment to a more capable web](https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html)

* [ ] [ Web Capabilities (Fugu)](https://www.chromium.org/teams/web-capabilities-fugu)

* [ ] [ Chromium Bugs - Fugu](https://bugs.chromium.org/p/chromium/issues/list?q=proj-fugu)

* [ ] [ Google Devs - Unlocking new capabilities for the web](https://developers.google.com/web/updates/capabilities)

* [ ] [ Youtube - Unlocking New Capabilities for the Web](https://www.youtube.com/watch?v=GSiUzuB-PoI)

* [ ] [ Controlling Access to Powerful Web Platform Features](https://chromium.googlesource.com/chromium/src/+/f384207e04ad27f58287e972907f17ad66acc115/docs/security/permissions-for-powerful-web-platform-features.md)

### Web Authentication API

Learn how to use the Web Authentication API to provide a strong authentication with public key cryptography.

* [ ] [ MDN - Web Authentication API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API)

* [ ] [ W3C - Web Authentication: An API for accessing Public Key Credentials](https://www.w3.org/TR/webauthn-2/)

* [ ] [ Google Devs - Enabling Strong Authentication with WebAuthn](https://developers.google.com/web/updates/2018/05/webauthn)

* [ ] [ Introduction to Web Authentication: The New W3C Spec](https://auth0.com/blog/introduction-to-web-authentication/)

* [ ] [ Microsoft - Web Authentication and Windows Hello](https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/windows-integration/web-authentication)

* [ ] [ Web Authentication: What It Is and What It Means for Passwords](https://duo.com/blog/web-authentication-what-it-is-and-what-it-means-for-passwords)

#### Credentials Manager API

Learn about the Credentials Manager API proposal and how it can help authenticating users.

* [ ] [ MDN - Credential Management API](https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API)

* [ ] [ Google Devs - The Credential Management API](https://developers.google.com/web/fundamentals/security/credential-management)

* [ ] [ Google Devs - Sign in Users](https://developers.google.com/web/fundamentals/security/credential-management/retrieve-credentials)

* [ ] [ Google Devs - Save Credentials from Forms](https://developers.google.com/web/fundamentals/security/credential-management/save-forms)

* [ ] [ What Web Can Do Today - Credentials](https://whatwebcando.today/credentials.html)

### Native File System

Learn how the Native File System API proposal enables interacting with files on the user's local device.

* [ ] [ Google Devs - The Native File System API](https://developers.google.com/web/updates/2019/08/native-file-system)

* [ ] [ Github - Native File System](https://github.com/WICG/native-file-system/blob/master/EXPLAINER.md)

* [ ] [ W3C - Native File System](https://wicg.github.io/native-file-system/)

* [ ] [ Native File System Web API - Chromium Security Model](https://docs.google.com/document/d/1NJFd-EWdUlQ7wVzjqcgXewqC5nzv_qII4OvlDtK6SE8/edit#heading=h.7nki9mck5t64)

* [ ] [ Chromestatus - Native File System](https://www.chromestatus.com/feature/6284708426022912)

* [ ] [ W3C - File API](https://w3c.github.io/FileAPI/)

### Shape Detection

Learn how the Shape Detection API proposal can be use to detect shapes such as faces or barcodes in pictures.

* [ ] [ W3C - Accelerated Shape Detection in Images](https://wicg.github.io/shape-detection-api/)

* [ ] [ web.dev - A Picture is Worth a Thousand Words](https://web.dev/shape-detection/)

* [ ] [ Github - Shape Detection API Specification](https://github.com/WICG/shape-detection-api)

* [ ] [ Introduction to the Shape Detection API](https://blog.arnellebalane.com/introduction-to-the-shape-detection-api-e07425396861)

* [ ] [ Face detection using Shape Detection API](https://paul.kinlan.me/face-detection/)

### Web Bluetooth

Learn how the Web Bluetooth API proposal can be used to connect with nearby devices.

* [ ] [ MDN - Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API)

* [ ] [ Google Devs - Interact with Bluetooth devices](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web)

* [ ] [ What Web Can Do Today -	Bluetooth](https://whatwebcando.today/bluetooth.html)

* [ ] [ W3C - Web Bluetooth](https://webbluetoothcg.github.io/web-bluetooth/)

* [ ] [ Web Bluetooth Samples](https://googlechrome.github.io/samples/web-bluetooth/)

### Web USB

Learn the Web USB API proposal can be used to connect with hardware through a cable.

* [ ] [ MDN - USB](https://developer.mozilla.org/en-US/docs/Web/API/USB)

* [ ] [ WICG - Web USB](https://github.com/WICG/webusb)

* [ ] [ Google Devs - Access USB Devices on the Web](https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web)

* [ ] [ What Web Can Do Today -	Web USB](https://whatwebcando.today/usb.html)

### Web XR

Learn how to use Web XR API proposal for virtual- and augmented reality experiences.

* [ ] [ MDN - WebXR Device API](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)

* [ ] [ Google Devs - Welcome to the immersive web](https://developers.google.com/web/updates/2018/05/welcome-to-immersive)

* [ ] [ New API to Bring Augmented Reality to the Web](https://hacks.mozilla.org/2018/09/webxr/)

* [ ] [ W3C - WebXR Device API](https://immersive-web.github.io/webxr/)

### Presentation

Learn how the Presentation API proposal enables your web app to use the presentation display mode in the browser or at an external display device.

* [ ] [ MDN - Presentation API](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API)

* [ ] [ What Web Can Do Today - Presentation Features](https://whatwebcando.today/presentation.html)

* [ ] [ Google Devs - Present web pages to secondary attached displays](https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays)

* [ ] [ W3C - Presentation API](https://w3c.github.io/presentation-api)

### Network Information API

Learn how the Network Information API proposal can give you information about the state of the network.

* [ ] [ MDN - Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)

* [ ] [ Addy Osmani - Adaptive Serving](https://addyosmani.com/blog/adaptive-serving/)

* [ ] [ W3C - Network Information API](https://wicg.github.io/netinfo/)

* [ ] [ Network Information API Sample](https://googlechrome.github.io/samples/network-information/)

* [ ] [ What Web Can Do Today - Network Type & Speed](https://whatwebcando.today/network-type-speed.html)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#algorithms--data-structures)

## ➤ Algorithms & Data structures

### Data structures

### Arrays

Learn how and when arrays should be used.

* [ ] [ javascript.info - Arrays](https://javascript.info/array)

* [ ] [ Freecodecamp - Arrays, A Visual Introduction for Beginners](https://www.freecodecamp.org/news/data-structures-101-arrays-a-visual-introduction-for-beginners-7f013bcc355a/)

* [ ] [ Wikipedia - Array data structure](https://en.wikipedia.org/wiki/Array_data_structure)

* [ ] [ MDN - Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

### Queues & Stacks

Learn how and when queues and stacks should be used.

* [ ] [ Stacks and Queues](https://www.cs.cmu.edu/~adamchik/15-121/lectures/Stacks%20and%20Queues/Stacks%20and%20Queues.html)

* [ ] [ Difference between Stack and Queue Data Structures](https://www.geeksforgeeks.org/difference-between-stack-and-queue-data-structures/)

* [ ] [ Data Structures: Stacks & Queues](https://medium.com/@hitherejoe/data-structures-stacks-queues-a3b3591c8cb0)

* [ ] [ Stacks vs. Queues In JavaScript](https://dev.to/emmawedekind/stacks-vs-queues-in-javascript-4d1o)

### Trees

Learn how and when trees should be used.

* [ ] [ Wikipedia - Tree (data structure)](https://en.wikipedia.org/wiki/Tree_(data_structure))

* [ ] [ Freecodecamp - Everything you need to know about tree data structure](https://www.freecodecamp.org/news/all-you-need-to-know-about-tree-data-structures-bceacb85490c/)

* [ ] [ Data Structure and Algorithms - Tree](https://www.tutorialspoint.com/data_structures_algorithms/tree_data_structure.htm)

#### Binary Indexed Tree

Learn how and when binary indexed trees should be used.

* [ ] [ Wikipedia - Fenwick tree](https://en.wikipedia.org/wiki/Fenwick_tree)

* [ ] [ What is the intuition behind a binary indexed tree?](https://cs.stackexchange.com/questions/10538/bit-what-is-the-intuition-behind-a-binary-indexed-tree-and-how-was-it-thought-a)

* [ ] [ Binary Indexed Tree or Fenwick Tree](https://www.geeksforgeeks.org/binary-indexed-tree-or-fenwick-tree-2/)

* [ ] [ Fenwick Tree / Binary Indexed Tree](https://github.com/trekhleb/javascript-algorithms/tree/master/src/data-structures/tree/fenwick-tree)

* [ ] [ Youtube - Binary Indexed Tree](https://www.youtube.com/watch?v=CWDQJGaN1gY&index=18&t=0s&list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8)

* [ ] [ Github - fast-binary-indexed-tree-js](https://github.com/microsoft/fast-binary-indexed-tree-js)

#### Heap

Learn how and when heaps should be used.

* [ ] [ Wikipedia - Heap (data structure)](https://en.wikipedia.org/wiki/Heap_(data_structure))

* [ ] [ Tutorialspoint - Heap Data Structure](https://www.tutorialspoint.com/data_structures_algorithms/heap_data_structure.htm)

* [ ] [ Learning to Love Heaps](https://medium.com/basecs/learning-to-love-heaps-cef2b273a238)

* [ ] [ How to implement Heap Data structure in JavaScript](https://reactgo.com/javascript-heap-datastructure/)

* [ ] [ Youtube - Data Structures: Heaps](https://www.youtube.com/watch?v=t0Cq6tVNRBA&list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8&index=5)

#### Red-black Tree

Learn how and when red-black trees should be used.

* [ ] [ Wikipedia - Red–black tree](https://en.wikipedia.org/wiki/Red%E2%80%93black_tree)

* [ ] [ Painting Nodes Black With Red-Black Trees](https://dev.to/vaidehijoshi/painting-nodes-black-with-red-black-trees)

* [ ] [ Red-Black Tree](https://www.geeksforgeeks.org/red-black-tree-set-1-introduction-2/)

* [ ] [ Red Black Trees in JavaScript](https://medium.com/@julianknodt/red-black-trees-in-javascript-c20eec1d5d1c)

* [ ] [ Github - Red–Black Tree](https://github.com/trekhleb/javascript-algorithms/tree/master/src/data-structures/tree/red-black-tree)

#### Trie

Learn how and when tries should be used.

* [ ] [ Wikipedia - Trie](https://en.wikipedia.org/wiki/Trie)

* [ ] [ Trie (Insert and Search)](https://www.geeksforgeeks.org/trie-insert-and-search/)

* [ ] [ Trying to Understand Tries](https://medium.com/basecs/trying-to-understand-tries-3ec6bede0014)

* [ ] [ Trie, Datastructure](https://www.interviewcake.com/concept/java/trie)

* [ ] [ Youtube - Data Structures: Tries](https://www.youtube.com/watch?v=zIjfhVPRZCg&list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8&index=7)

* [ ] [ Practical Data Structures: Tries](https://hackernoon.com/practical-data-structures-for-frontend-applications-when-to-use-tries-5428a565eba4)

* [ ] [ Trie, visualization](https://www.cs.usfca.edu/~galles/visualization/Trie.html)

#### K-D Tree

Learn how and when K-D trees should be used.

* [ ] [ Wikipedia - k-d tree](https://en.wikipedia.org/wiki/K-d_tree)

* [ ] [ Github - k-d Tree JavaScript Library](https://github.com/ubilabs/kd-tree-javascript)

* [ ] [ kd-Trees](https://www.cs.cmu.edu/~ckingsf/bioinfo-lectures/kdtrees.pdf)

* [ ] [ Youtube - KD Tree Algorithm](https://www.youtube.com/watch?v=TLxWtXEbtFE)

### Hash Tables

Learn how and when hash tables should be used.

* [ ] [ Wikipedia - Hash table](https://en.wikipedia.org/wiki/Hash_table)

* [ ] [ Hash tables explained](https://yourbasic.org/algorithms/hash-tables-explained/)

* [ ] [ Basics of Hash Tables](https://www.hackerearth.com/practice/data-structures/hash-tables/basics-of-hash-tables/tutorial/)

* [ ] [ Javascript Hash Table](https://medium.com/@yanganif/javascript-hash-table-8878afceecbc)

* [ ] [ Objects and Hash Tables in Javascript](https://codeburst.io/objects-and-hash-tables-in-javascript-a472ad1940d9)

### Linked Lists

Learn how and when linked lists should be used.

* [ ] [ Wikipedia - Linked list](https://en.wikipedia.org/wiki/Linked_list)

* [ ] [ Introduction to Linked Lists](https://www.studytonight.com/data-structures/introduction-to-linked-list)

* [ ] [ Linked Lists in JavaScript](https://codeburst.io/linked-lists-in-javascript-es6-code-part-1-6dd349c3dcc3)

* [ ] [ The Little Guide of Linked List in JavaScript](https://hackernoon.com/the-little-guide-of-linked-list-in-javascript-9daf89b63b54)

### Graphs

Learn how and when graphs should be used.

* [ ] [ Wikipedia - Graph theory](https://en.wikipedia.org/wiki/Graph_theory)

* [ ] [ Implementation of Graph in JavaScript](https://www.geeksforgeeks.org/implementation-graph-javascript/)

* [ ] [ Graphs and Graph Algorithms](https://runestone.academy/runestone/books/published/pythonds/Graphs/Objectives.html)

* [ ] [ The Javascript Developer’s Guide to Graphs](https://hackernoon.com/the-javascript-developers-guide-to-graphs-and-detecting-cycles-in-them-96f4f619d563)

### Analysis

### Time complexity

Learn about time complexity and how it can be used to analyze an algorithm.

* [ ] [ Wikipedia - Time complexity](https://en.wikipedia.org/wiki/Time_complexity)

* [ ] [ Time Complexity of Algorithms](https://www.studytonight.com/data-structures/time-complexity-of-algorithms)

* [ ] [ Freecodecamp - An Introduction to Time Complexity](https://www.freecodecamp.org/news/time-complexity-of-algorithms/)

* [ ] [ 8 time complexities that every programmer should know](https://adrianmejia.com/most-popular-algorithms-time-complexity-every-programmer-should-know-free-online-tutorial-course/)

* [ ] [ Time Complexity Analysis in JavaScript](https://www.jenniferbland.com/time-complexity-analysis-in-javascript/)

* [ ] [ An intro to Algorithms](https://codeburst.io/algorithms-i-searching-and-sorting-algorithms-56497dbaef20)

#### Cost model

Learn how to setup a cost model for an algorithm.

* [ ] [ Wikipedia - Analysis of algorithms](https://en.wikipedia.org/wiki/Analysis_of_algorithms)

* [ ] [ Analysis of Algorithms](https://aofa.cs.princeton.edu/10analysis/)

* [ ] [ The cost of JavaScript in 2019](https://v8.dev/blog/cost-of-javascript-2019)

#### Order of Growth

Learn how to make an order-of-growth classification to classify the cost model.

* [ ] [ Quora - What is the meaning of 'order of growth'](https://www.quora.com/What-is-the-meaning-of-order-of-growth-in-algorithm-analysis-and-how-can-we-find-the-order-of-growth-of-given-algorithm)

* [ ] [ Orders of Growth](http://www.ccs.neu.edu/home/jaa/CS7800.12F/Information/Handouts/order.html)

* [ ] [ Coursera - Order-of-Growth Classifications](https://www.coursera.org/lecture/algorithms-part1/order-of-growth-classifications-Xk03a)

#### Big O notation

Learn how to use Big O notation to classify the time complexity of an algorithm.

* [ ] [ Wikipedia - Big O notation](https://en.wikipedia.org/wiki/Big_O_notation)

* [ ] [ Time Complexity/Big O Notation](https://medium.com/javascript-scene/time-complexity-big-o-notation-1a4310c3ee4b)

* [ ] [ Big O Notation in JavaScript](https://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b)

* [ ] [ Big O in JS: The basic that you need to know](https://medium.com/front-end-weekly/big-o-in-js-the-basic-that-you-need-to-know-a5abb45570fa)

* [ ] [ Big O in JavaScript](https://medium.com/@gmedina229/big-o-in-javascript-36ff67766051)

* [ ] [ dev.to - What is Big O Notation, and Why is it Useful?](https://dev.to/mattdmccarley/what-is-big-o-notation-and-why-is-it-useful-2b7l)

* [ ] [ dev.to - Big-O Notation Useful guide](https://dev.to/yashwanthambati/big-o-notation-complete-guide-226h)

### Space Complexity

Learn about space complexity and how it can be used to analyze an algorithm.

* [ ] [ Space Complexity of Algorithms](https://www.studytonight.com/data-structures/space-complexity-of-algorithms)

* [ ] [ Google Devs - Fix Memory Problems](https://developers.google.com/web/tools/chrome-devtools/memory-problems)

* [ ] [ Google Devs - Memory Terminology](https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101)

* [ ] [ Google Devs - How to Record Heap Snapshots](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots)

* [ ] [ Debugging Memory Leaks in JavaScript](https://medium.com/@sarahelson81/debugging-memory-leaks-in-javascript-ed6d0fa84b40)

* [ ] [ Wikipedia - Space complexity](https://en.wikipedia.org/wiki/Space_complexity)

* [ ] [ Space Complexity](http://exploreshaifali.github.io/2014/02/13/Space-Complexity/)

### Algorithms

### Sorting

Learn about the most important sorting algorithms and figure out what challenges there are involved with implementing one.

* [ ] [ A Guide To Sorting Algorithms in JavaScript](https://blog.bitsrc.io/a-guide-to-sorting-algorithms-in-javascript-5b32da4eae1e)

* [ ] [ dev.to - Sorting Algorithms with Javascript](https://dev.to/wangonya/sorting-algorithms-with-javascript-part-1-4aca)

* [ ] [ Introduction to Sorting](https://www.studytonight.com/data-structures/introduction-to-sorting)

* [ ] [ Implementing Sorting Algorithms in JavaScript](https://medium.com/@rwillt/implementing-sorting-algorithms-in-javascript-b08504cdf4a9)

* [ ] [ Algorithms – Sorting Algorithms in JavaScript](https://notlaura.com/day-6-algorithms-sorting-algorithms-in-javascript/)

#### Insertion Sort

Learn about the insertion sort algorithm.

* [ ] [ Wikipedia - Insertion sort](https://en.wikipedia.org/wiki/Insertion_sort)

* [ ] [ Insertion Sort](https://www.geeksforgeeks.org/insertion-sort/)

* [ ] [ Insertion Sort Algorithm](https://www.interviewbit.com/tutorial/insertion-sort-algorithm/)

* [ ] [ Insertion Sorting for Beginners in JS](https://dev.to/ryan_dunton/insertion-sorting-for-beginners-in-js------fkg)

* [ ] [ Algorithms: Insertion Sort in JavaScript](https://medium.com/dailyjs/insertion-sort-in-javascript-9c077844717a)

#### Quicksort

Learn about the quicksort algorithm.

* [ ] [ Wikipedia - Quicksort](https://en.wikipedia.org/wiki/Quicksort)

* [ ] [ A Quick Explanation of Quick Sort](https://medium.com/karuna-sehgal/a-quick-explanation-of-quick-sort-7d8e2563629b)

* [ ] [ QuickSort](https://www.geeksforgeeks.org/quick-sort/)

* [ ] [ Implementing Quicksort in JavaScript](https://medium.com/@Charles_Stover/implementing-quicksort-in-javascript-8044a8e2bf39)

* [ ] [ Computer science in JavaScript: Quicksort](https://humanwhocodes.com/blog/2012/11/27/computer-science-in-javascript-quicksort/)

#### Mergesort

Learn about the mergesort algorithm.

* [ ] [ Wikipedia - Merge sort](https://en.wikipedia.org/wiki/Merge_sort)

* [ ] [ Merge Sort Algorithm in JavaScript](https://medium.com/javascript-in-plain-english/javascript-merge-sort-3205891ac060)

* [ ] [ A Simplified Explanation of Merge Sort](https://medium.com/karuna-sehgal/a-simplified-explanation-of-merge-sort-77089fe03bb2)

* [ ] [ Overview of merge sort](https://www.khanacademy.org/computing/computer-science/algorithms/merge-sort/a/overview-of-merge-sort)

* [ ] [ Freecodecamp - The Merge Sort Algorithm Explained](https://www.freecodecamp.org/forum/t/the-merge-sort-algorithm-explained/16104)

#### Heapsort

Learn about the heapsort algorithm.

* [ ] [ Wikipedia - Heapsort](https://en.wikipedia.org/wiki/Heapsort)

* [ ] [ Heapify All The Things With Heap Sort](https://medium.com/basecs/heapify-all-the-things-with-heap-sort-55ee1c93af82)

* [ ] [ Heap Sort Algorithm](https://www.studytonight.com/data-structures/heap-sort)

* [ ] [ Heapsort Algorithm](https://www.interviewcake.com/concept/java/heapsort)

* [ ] [ Heap Sort](https://brilliant.org/wiki/heap-sort/)

### Searching

Learn about the most important searching algorithms and figure out what challenges there are involved with implementing one.

* [ ] [ Wikipedia - Search algorithm](https://en.wikipedia.org/wiki/Search_algorithm)

* [ ] [ Search Algorithms with ES6](https://github.com/Crizstian/data-structure-and-algorithms-with-ES6/tree/master/13-chapter-Searching-Algorithms)

* [ ] [ Introduction to Searching Algorithms](https://www.studytonight.com/data-structures/search-algorithms)

* [ ] [ Implement linear and binary search algorithms with Javascript](https://medium.com/employbl/implement-linear-and-binary-search-algorithms-with-javascript-2149997588f0)

* [ ] [ Searching Algorithms In Javascript](https://www.scriptonitejs.com/javascript-searching-algorithms/)

#### Binary Search

Learn about the binary search algorithm.

* [ ] [ Wikipedia - Binary search algorithm](https://en.wikipedia.org/wiki/Binary_search_algorithm)

* [ ] [ How to implement a Binary search algorithm](https://reactgo.com/binary-search-algorithm-javascript/)

* [ ] [ Binary Search](https://www.interviewbit.com/courses/programming/topics/binary-search/)

* [ ] [ What Is Binary Search, A Detailed Step-By-Step](https://medium.com/@jeffrey.allen.lewis/javascript-algorithms-explained-binary-search-25064b896470)

* [ ] [ Programming with JS: Binary Search](https://hackernoon.com/programming-with-js-binary-search-aaf86cef9cb3)

* [ ] [ Binary Search In JavaScript](https://www.geeksforgeeks.org/binary-search-in-javascript/)

#### Breadth First Search

Learn about the breadth first search algorithm.

* [ ] [ Wikipedia - Breadth-first search](https://en.wikipedia.org/wiki/Breadth-first_search)

* [ ] [ Breaking Down Breadth-First Search](https://medium.com/basecs/breaking-down-breadth-first-search-cebe696709d9)

* [ ] [ Breadth First Search in JavaScript](https://medium.com/dailyjs/breadth-first-search-in-javascript-e655cd824fa4)

* [ ] [ Github - Breadth-First Search (BFS)](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/graph/breadth-first-search)

* [ ] [ The Magician’s Guide to Algorithms](https://levelup.gitconnected.com/the-magicians-guide-to-algorithms-part-4-the-breadth-first-search-b800aec8ccf8)

#### Depth First Search

Learn about the depth first search algorithm.

* [ ] [ Wikipedia - Depth-first search](https://en.wikipedia.org/wiki/Depth-first_search)

* [ ] [ Depth First Search Algorithm](https://edgy.app/depth-first-search-algorithm-what-it-is-and-how-it-works)

* [ ] [ Depth first and breadth first search on trees](https://medium.com/employbl/depth-first-and-breadth-first-search-on-trees-in-javascript-58dcd6ff8de1)

* [ ] [ Breadth-first vs Depth-first Tree Traversal](https://medium.com/@kenny.hom27/breadth-first-vs-depth-first-tree-traversal-in-javascript-48df2ebfc6d1)

* [ ] [ Github - Depth-First Search (DFS)](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/graph/depth-first-search)

#### Dijkstra's Algorithm

Learn about dijkstra's algorithm.

* [ ] [ Wikipedia - Dijkstra's algorithm](https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm)

* [ ] [ Dijkstra’s algorithm](https://courses.cs.washington.edu/courses/cse373/16su/lectures/lecture15.pdf)

* [ ] [ How to implement Dijkstra’s Algorithm](https://hackernoon.com/how-to-implement-dijkstras-algorithm-in-javascript-abdfd1702d04)

* [ ] [ A Walkthrough of Dijkstra’s Algorithm](https://medium.com/@adriennetjohnson/a-walkthrough-of-dijkstras-algorithm-in-javascript-e94b74192026)

#### String Search

Learn about various algorithms for searching in strings.

* [ ] [ Wikipedia - String-searching algorithm](https://en.wikipedia.org/wiki/String-searching_algorithm)

* [ ] [ Boyer Moore String Search](https://ongspxm.github.io/blog/2017/05/boyer-moore-search/)

* [ ] [ Boyer–Moore string-search algorithm](https://en.wikipedia.org/wiki/Boyer%E2%80%93Moore_string-search_algorithm)

### Hashing

Learn about hashing algorithms.

* [ ] [ Wikipedia - Hash function](https://en.wikipedia.org/wiki/Hash_function)

* [ ] [ How Encryption Works](https://computer.howstuffworks.com/encryption5.htm)

* [ ] [ Cryptography for JavaScript: Hash Function](https://medium.com/@promentol/cryptography-for-javascript-node-js-developers-part-1-hash-function-86d119c7304)

* [ ] [ Github - hash.js](https://gist.github.com/iperelivskiy/4110988)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#databases--servers)

## ➤ Databases & Servers

### Databases

### Relational Databases

Learn about relational databases and how to use them.

* [ ] [ Wikipedia - Relational database](https://en.wikipedia.org/wiki/Relational_database)

* [ ] [ Relational database](https://searchdatamanagement.techtarget.com/definition/relational-database)

* [ ] [ Everything you need to know about (Relational) Databases](https://dev.to/lmolivera/everything-you-need-to-know-about-relational-databases-3ejl)

* [ ] [ What are relational databases?](https://computer.howstuffworks.com/question599.htm)

* [ ] [ What is a Relational Database Management System?](https://www.codecademy.com/articles/what-is-rdbms-sql)

#### SQL

Learn how to write SQL statements to communicate with a database.

* [ ] [ Learn SQL](https://www.codecademy.com/learn/learn-sql)

* [ ] [ Wikipedia - SQL](https://en.wikipedia.org/wiki/SQL)

* [ ] [ A beginners guide to SQL](https://learntocodewith.me/posts/sql-guide/)

* [ ] [ The Last SQL Guide for Data Analysis You’ll Ever Need](https://medium.com/better-programming/the-last-sql-guide-for-data-analysis-youll-ever-need-17ae10fa4a6f)

* [ ] [ SQL Tutorial](https://www.tutorialrepublic.com/sql-tutorial/)

#### MySQL

Learn about the open-source relational database management system called MySQL.

* [ ] [ MySQL](https://www.mysql.com/)

* [ ] [ Wikipedia - MySQL](https://en.wikipedia.org/wiki/MySQL)

* [ ] [ Tutorialspoint - MySQL Tutorial](https://www.tutorialspoint.com/mysql/index.htm)

* [ ] [ MySQL Definition](https://searchoracle.techtarget.com/definition/MySQL)

* [ ] [ Getting Started with MySQL](http://www.mysqltutorial.org/getting-started-with-mysql/)

#### PostgreSQL

Learn about the open-source relational database management system called PostgreSQL.

* [ ] [ PostgreSQL](https://www.postgresql.org/)

* [ ] [ Wikipedia - PostgreSQL](https://en.wikipedia.org/wiki/PostgreSQL)

* [ ] [ PostgreSQL Tutorial](http://www.postgresqltutorial.com/)

* [ ] [ Postgres Guide](http://postgresguide.com/)

### Non-relational Databases

Learn about non-relational databases and how to use them.

* [ ] [ What Is A Non Relational Database](https://www.mongodb.com/scale/what-is-a-non-relational-database)

* [ ] [ Wikipedia - NoSQL](https://en.wikipedia.org/wiki/NoSQL)

* [ ] [ dev.to - Relational SQL vs. Non-Relational NoSQL Databases](https://dev.to/trevoirwilliams/relational-sql-vs-non-relational-nosql-databases-hi5)

* [ ] [ Non-relational data and NoSQL](https://docs.microsoft.com/en-us/azure/architecture/data-guide/big-data/non-relational-data)

* [ ] [ Non-Relational Database](https://www.techopedia.com/definition/25218/non-relational-database)

#### Redis

Learn about the open-source non-relational database management system called Redis.

* [ ] [ Redis](https://redis.io/)

* [ ] [ Try Redis](http://try.redis.io/)

* [ ] [ Wikipedia - Redis](https://en.wikipedia.org/wiki/Redis)

* [ ] [ An introduction to Redis data types and abstractions](https://redis.io/topics/data-types-intro)

* [ ] [ Redis - Documentation](https://redis.io/documentation)

* [ ] [ Redis: What and Why?](https://codeburst.io/redis-what-and-why-d52b6829813)

* [ ] [ Tutorialspoint - Redis Tutorial](https://www.tutorialspoint.com/redis/index.htm)

#### MongoDB

Learn about the open-source non-relational database management system called MongoDB.

* [ ] [ MongoDB](https://www.mongodb.com/)

* [ ] [ MongoDB - Documentation](https://docs.mongodb.com/)

* [ ] [ MongoDB - University](https://university.mongodb.com/)

* [ ] [ Tutorialspoint - MongoDB Tutorial](https://www.tutorialspoint.com/mongodb/index.htm)

* [ ] [ Youtube - MongoDB In 30 Minutes](https://www.youtube.com/watch?v=pWbMrx5rVBE)

### Data Modelling

Learn how data modelling can help your database design.

* [ ] [ Chapter 5 Data Modelling](https://opentextbc.ca/dbdesign01/chapter/chapter-5-data-modelling/)

* [ ] [ Wikipedia - Database Model](https://en.wikipedia.org/wiki/Database_model)

* [ ] [ Wikipedia - Database Modelling](https://en.wikipedia.org/wiki/Data_modeling)

* [ ] [ What is Data Modelling?](https://www.guru99.com/data-modelling-conceptual-logical.html)

* [ ] [ Data Modeling Definition](https://searchdatamanagement.techtarget.com/definition/data-modeling)

#### ER Diagram

Learn how to model your data using ER diagrams.

* [ ] [ Tutorialspoint - DBMS, Data Models](https://www.tutorialspoint.com/dbms/dbms_data_models.htm)

* [ ] [ Entity Relationship Diagram](https://www.smartdraw.com/entity-relationship-diagram/)

* [ ] [ Youtube - Entity Relationship Diagram Tutorial](https://www.youtube.com/watch?v=QpdhBUYk7Kk)

* [ ] [ Wikipedia - Entity–relationship model](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model)

* [ ] [ Entity Relationship Diagram](https://beginnersbook.com/2015/04/e-r-model-in-dbms/)

#### Keys

Learn how to figure out what types of keys to use and where to use them.

* [ ] [ Introduction to Database Keys](https://www.studytonight.com/dbms/database-key.php)

* [ ] [ 7 Different Types of Database Keys](https://www.csestack.org/different-types-database-keys-example/)

* [ ] [ Database Management: Keys](https://databasemanagement.fandom.com/wiki/Relational_Database:_Keys)

* [ ] [ Database Keys](https://www.tutorialcup.com/dbms/keys.htm)

* [ ] [ Youtube - Database Keys](https://www.youtube.com/watch?v=yMYH0zP1m8U)

### Indexing

Learn how to use indexing to speed up your database.

* [ ] [ Indexing in Databases](https://www.geeksforgeeks.org/indexing-in-databases-set-1/)

* [ ] [ Wikipedia - Database index](https://en.wikipedia.org/wiki/Database_index)

* [ ] [ Database Indexes Explained](https://www.essentialsql.com/what-is-a-database-index/)

* [ ] [ Indexing in Databases with EXAMPLES](https://www.guru99.com/indexing-in-database.html)

* [ ] [ What Does Indexing Do?](https://chartio.com/learn/databases/how-does-indexing-work/)

* [ ] [ An in-depth look at Database Indexing](https://www.freecodecamp.org/news/database-indexing-at-a-glance-bb50809d48bd/)

* [ ] [ Indexing your database data — the easy way](https://medium.com/faun/explained-indexing-your-database-data-the-easy-way-3c7127ed36a)

### Data Integrity

Learn how to assure the accuracy and consistency of data.

* [ ] [ Wikipedia - Data Integrity](https://en.wikipedia.org/wiki/Data_integrity)

* [ ] [ What is Data Integrity and Why Is It Important?](https://www.talend.com/resources/what-is-data-integrity/)

* [ ] [ hat is Data Integrity?](https://digitalguardian.com/blog/what-data-integrity-data-protection-101)

* [ ] [ What is Data Integrity?](https://database.guide/what-is-data-integrity/)

* [ ] [ Data Integrity](https://www.tutorialcup.com/dbms/integrity.htm)

* [ ] [ Youtube - Database Design, Data Integrity](https://www.youtube.com/watch?v=1D_h-yFtQVo)

### Normalization

Learn how data normalization can help you decrease data redundancy and improve data integrity in your database.

* [ ] [ Wikipedia - Database normalization](https://en.wikipedia.org/wiki/Database_normalization)

* [ ] [ Database Normalization (Explained in Simple English)](https://www.essentialsql.com/get-ready-to-learn-sql-database-normalization-explained-in-simple-english/)

* [ ] [ What is Normalization?](https://www.guru99.com/database-normalization.html)

* [ ] [ Normal Forms in DBMS](https://www.geeksforgeeks.org/normal-forms-in-dbms/)

* [ ] [ Database normalization](https://searchsqlserver.techtarget.com/definition/normalization)

* [ ] [ Database Normalization Explained](https://towardsdatascience.com/database-normalization-explained-53e60a494495)

#### Functional Dependencies

Learn how to find functional dependencies to improve your database design.

* [ ] [ Full Functional Dependency in Database Normalization](https://www.lifewire.com/full-functional-dependency-1019753)

* [ ] [ Stackoverflow - Functional dependency and normalization](https://stackoverflow.com/questions/4199444/functional-dependency-and-normalization)

* [ ] [ Tutorialspoint - DBMS, Normalization](https://www.tutorialspoint.com/dbms/database_normalization.htm)

* [ ] [ Functional Dependencies and Normalization](http://www.ict.griffith.edu.au/~jw/normalization/assets/Functional%20Dependencies%20and%20Normalization.pdf)

* [ ] [ DBMS Functional Dependency](https://www.guru99.com/dbms-functional-dependency.html)

* [ ] [ Wikipedia - Armstrong's axioms](https://en.wikipedia.org/wiki/Armstrong%27s_axioms)

* [ ] [ Armstrong's Axioms in Functional Dependency](https://www.includehelp.com/dbms/armstrongs-axioms-in-functional-dependency.aspx)

#### Normal Forms

Learn how normal forms can help you normalize your database.

* [ ] [ Wikipedia - Normal forms](https://en.wikipedia.org/wiki/Database_normalization#Normal_forms)

* [ ] [ 1NF, 2NF, 3NF and BCNF in Database](https://beginnersbook.com/2015/05/normalization-in-dbms/)

* [ ] [ Chapter 12 Normalization](https://opentextbc.ca/dbdesign01/chapter/chapter-12-normalization/)

* [ ] [ Wikipedia - Boyce–Codd normal form](https://en.wikipedia.org/wiki/Boyce%E2%80%93Codd_normal_form)

* [ ] [ Boyce-Codd Normal Form (BCNF)](https://www.geeksforgeeks.org/boyce-codd-normal-form-bcnf/)

* [ ] [ Wikipedia - Third normal form](https://en.wikipedia.org/wiki/Third_normal_form)

### Transactions

Learn how transactions can group a set of database tasks into a single execution unit.

* [ ] [ Wikipedia - Database transaction](https://en.wikipedia.org/wiki/Database_transaction)

* [ ] [ Stackoverflow - What is a database transaction?](https://stackoverflow.com/questions/974596/what-is-a-database-transaction)

* [ ] [ Tutorialspoint - DBMS, Transaction](https://www.tutorialspoint.com/dbms/dbms_transaction.htm)

* [ ] [ Why do you need to know transactions?](http://db4beginners.com/blog/relationaldb-transaction/)

* [ ] [ SQL Transactions](https://www.geeksforgeeks.org/sql-transactions/)

#### ACID

Learn about the ACID properties of transactions.

* [ ] [ A beginner’s guide to ACID](https://vladmihalcea.com/a-beginners-guide-to-acid-and-database-transactions/)

* [ ] [ DBMS Transaction Management: ACID Properties](https://www.guru99.com/dbms-transaction-management.html)

* [ ] [ ACID Properties in DBMS](https://www.geeksforgeeks.org/acid-properties-in-dbms/)

* [ ] [ Wikipedia - ACID](https://en.wikipedia.org/wiki/ACID)

* [ ] [ ACID properties of transactions](https://www.ibm.com/support/knowledgecenter/en/SSGMCP_5.4.0/product-overview/acid.html)

* [ ] [ A Primer on ACID Transactions](https://blog.yugabyte.com/a-primer-on-acid-transactions/)

* [ ] [ Stackoverflow - How do ACID and database transactions work?](https://stackoverflow.com/questions/3740280/how-do-acid-and-database-transactions-work)

#### Serializability

Learn how to determine whether a schedule is serializable and leaves the database in a consistent state.

* [ ] [ Wikipedia - Serializability](https://en.wikipedia.org/wiki/Serializability)

* [ ] [ Transaction Serializability in DBMS](https://www.tutorialcup.com/dbms/transaction-serializability.htm)

* [ ] [ DBMS Serializability](https://beginnersbook.com/2018/12/dbms-serializability/)

* [ ] [ View Serializability in DBMS Transactions](https://www.geeksforgeeks.org/view-serializability-in-dbms-transactions/)

* [ ] [ Conflict Serializability in DBMS](https://www.geeksforgeeks.org/conflict-serializability-in-dbms/)

#### Locks

Learn about locks and when they should be used.

* [ ] [ Wikipedia - Record locking](https://en.wikipedia.org/wiki/Record_locking)

* [ ] [ Database Locking: What, why and how?](http://www.methodsandtools.com/archive/archive.php?id=83)

* [ ] [ A beginner’s guide to locking and lost updates](https://vladmihalcea.com/a-beginners-guide-to-database-locking-and-the-lost-update-phenomena/)

* [ ] [ Monitoring SQL Database Locks](https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/administration/monitor-database-locks)

* [ ] [ Implementation of Locking in DBMS](https://www.geeksforgeeks.org/implementation-of-locking-in-dbms/)

##### Deadlocks

Learn about deadlocks and why they should be avoided.

* [ ] [ Deadlock in DBMS](https://www.geeksforgeeks.org/deadlock-in-dbms/)

* [ ] [ Wikipedia - Deadlock](https://en.wikipedia.org/wiki/Deadlock)

* [ ] [ What is a Deadlock?](https://www.studytonight.com/operating-system/deadlocks)

* [ ] [ Oracle - Deadlocks](https://docs.oracle.com/javadb/10.8.3.0/devguide/cdevconcepts28436.html)

* [ ] [ Deadlock Definition](https://whatis.techtarget.com/definition/deadlock)

* [ ] [ Introduction to Deadlock](https://www.javatpoint.com/os-deadlocks-introduction)

* [ ] [ dev.to - Understanding SQL Server Deadlocks](https://dev.to/integerman/understanding-sql-server-deadlocks-2ej6)

#### Precedence graph

Learn how to create a precedence graph to test for conflict serializability of a schedule.

* [ ] [ Wikipedia - Precedence graph](https://en.wikipedia.org/wiki/Precedence_graph)

* [ ] [ Youtube - How to draw a precedence graph](https://www.youtube.com/watch?v=U3SHusK80q0)

* [ ] [ Precedence Graph to check Conflict Serializable Schedule](https://ashutoshtripathi.com/2017/04/15/how-to-check-conflict-serializability-using-precedence-graph-algorithm/)

* [ ] [ Testing for conflict serializablity](http://www.exploredatabase.com/2017/11/testing-for-conflict-serializablity-using-precedence-graph.html)

* [ ] [ Precedence Graph, DBMS](https://www.includehelp.com/dbms/precedence-graph.aspx)

### Servers

### Architectural Models

Learn about the fundamental architectural server models.

* [ ] [ Server Architecture](https://www.techopedia.com/definition/30262/server-architecture)

* [ ] [ Youtube - Architectural model](https://www.youtube.com/watch?v=SKtR7NVxYFA)

* [ ] [ Architectural Model](https://www.sciencedirect.com/topics/computer-science/architectural-model)

* [ ] [ Distributed Systems: Models and Design](http://www2.imm.dtu.dk/courses/02220/2018/L3/Models.pdf)

#### Client-Server

Learn about the client-server model.

* [ ] [ Wikipedia - Client-server model](https://en.wikipedia.org/wiki/Client%E2%80%93server_model)

* [ ] [ Client Server Architecture](https://cio-wiki.org/wiki/Client_Server_Architecture)

* [ ] [ Understanding What Client Server Architecture Is All About](https://freefeast.info/general-it-articles/client-server-architecture/)

* [ ] [ Wikipedia - Client-server](https://simple.wikipedia.org/wiki/Client-server)

* [ ] [ Client-server model (client-server architecture)](https://searchnetworking.techtarget.com/definition/client-server)

* [ ] [ Client-Server Model](https://www.techopedia.com/definition/18321/client-server-model)

* [ ] [ Learn more about Client-Server Model](https://www.sciencedirect.com/topics/computer-science/client-server-model)

#### Proxy Server

Learn about the proxy-server model.

* [ ] [ Wikipedia - Proxy Server](https://en.wikipedia.org/wiki/Proxy_server)

* [ ] [ Youtube - What is a Proxy Server?](https://www.youtube.com/watch?v=5cPIukqXe5w)

* [ ] [ What is a Proxy Server and How Does it Work?](https://www.varonis.com/blog/what-is-a-proxy-server/)

* [ ] [ Proxy Server Definition](https://whatis.techtarget.com/definition/proxy-server)

* [ ] [ What is a proxy server?](https://www.itpro.co.uk/server-storage/30246/what-is-a-proxy-server)

#### Peer-To-Peer

Learn about the peer-to-peer model.

* [ ] [ Wikipedia - Peer-to-peer](https://en.wikipedia.org/wiki/Peer-to-peer)

* [ ] [ Youtube - What is a Peer to Peer Network? ](https://www.youtube.com/watch?v=ie-qRQIQT4I)

* [ ] [ What's a Peer-to-Peer (P2P) Network?](https://www.computerworld.com/article/2588287/networking-peer-to-peer-network.html)

* [ ] [ Peer-to-peer (P2P)](https://searchnetworking.techtarget.com/definition/peer-to-peer)

* [ ] [ Make a P2P connection in 10 minutes](https://dev.to/carloslfu/make-a-p2p-connection-in-10-minutes-4b32)

### Middleware

Learn about middleware.

* [ ] [ Wikipedia - Middleware](https://en.wikipedia.org/wiki/Middleware)

* [ ] [ Middleware Definition](https://searchapparchitecture.techtarget.com/definition/middleware)

* [ ] [ Quora - Why is Middleware important?](https://www.quora.com/Why-is-Middleware-important)

* [ ] [ What is middleware?](https://www.redhat.com/en/topics/middleware/what-is-middleware)

* [ ] [ What is Middleware? Technology’s Go-to Middleman](https://www.talend.com/resources/what-is-middleware/)

### Request-Reply Protocol

Learn how computers communicate with eachother using the request-reply protocol.

* [ ] [ Wikipedia - Request Response](https://en.wikipedia.org/wiki/Request%E2%80%93response)

* [ ] [ Youtube - Event-Driven Architecture](https://www.youtube.com/watch?v=3bxAm3XIFmk)

* [ ] [ Request/Reply](https://solace.com/samples/solace-samples-jms/request-reply/)

* [ ] [ Enterprise Integration - Request-Reply](http://www.informit.com/articles/article.aspx?p=1398616&seqNum=4)

#### UDP

Learn about the UDP transport layer protocol.

* [ ] [ UDP (User Datagram Protocol)](https://searchnetworking.techtarget.com/definition/UDP-User-Datagram-Protocol)

* [ ] [ Wikipedia - User Datagram Protocol](https://en.wikipedia.org/wiki/User_Datagram_Protocol)

* [ ] [ User Datagram Protocol (UDP)](https://www.techopedia.com/definition/13460/user-datagram-protocol-udp)

* [ ] [ Youtube - Explained! UDP and TCP](https://www.youtube.com/watch?v=1LYqtkgtSPU)

* [ ] [ User Datagram Protocol](https://www.geeksforgeeks.org/user-datagram-protocol-udp/)

#### TCP

Learn about the TCP transport layer protocol.

* [ ] [ TCP (Transmission Control Protocol)](https://searchnetworking.techtarget.com/definition/TCP)

* [ ] [ Wikipedia - Transmission Control Protocol](https://en.wikipedia.org/wiki/Transmission_Control_Protocol)

* [ ] [ TCP/IP (Transmission Control Protocol/Internet Protocol)](https://searchnetworking.techtarget.com/definition/TCP-IP)

* [ ] [ Services and Segment structure in TCP](https://www.geeksforgeeks.org/services-and-segment-structure-in-tcp/)

* [ ] [ TCP and UDP in Transport Layer](https://www.geeksforgeeks.org/tcp-and-udp-in-transport-layer/)

### REST API

Learn how an API can be designed to be RESTful.

* [ ] [ Wikipeia - Representational state transfer](https://en.wikipedia.org/wiki/Representational_state_transfer)

* [ ] [ Learn REST: A RESTful Tutorial](https://www.restapitutorial.com/)

* [ ] [ Youtube - REST API concepts and examples](https://www.youtube.com/watch?v=7YcW25PHnAA)

* [ ] [ REST API Tutorial](https://restfulapi.net/)

* [ ] [ What is a REST API?](https://www.mulesoft.com/resources/api/what-is-rest-api-design)

#### CRUD

Learn about the CRUD operations.

* [ ] [ Wikipedia - Create, read, update and delete](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete)

* [ ] [ Codecademy - What is CRUD?](https://www.codecademy.com/articles/what-is-crud)

* [ ] [ What is the Difference between REST and CRUD?](https://www.bmc.com/blogs/rest-vs-crud-whats-the-difference/)

* [ ] [ Youtube - Introduction to CRUD Operations](https://www.youtube.com/watch?v=Lyi8SoVdkhM)

* [ ] [ REST was NEVER about CRUD](https://tyk.io/rest-never-crud/)

### Express

Learn about the Node.js web application framework called Express.

* [ ] [ Express](https://expressjs.com/)

* [ ] [ Tutorialspoint - Express Framework](https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm)

* [ ] [ Youtube - Express.js & Node.js Course for Beginners](https://www.youtube.com/watch?v=G8uL0lFFoN0)

* [ ] [ Understanding Node.js & Express.js fundamentals](https://medium.com/@LindaVivah/the-beginners-guide-understanding-node-js-express-js-fundamentals-e15493462be1)

* [ ] [ Wikipedia - Express.js](https://en.wikipedia.org/wiki/Express.js)

### GraphQL

Learn how to use the GraphQL query language.

* [ ] [ GraphQL](https://graphql.org/)

* [ ] [ Youtube - Introduction to GraphQL](https://www.youtube.com/watch?v=Y0lDGjwRYKw)

* [ ] [ Github - GraphQL Specification](https://github.com/graphql/graphql-spec)

* [ ] [ The Fullstack Tutorial for GraphQL](https://www.howtographql.com/)

### GNU/Linux

Learn about the GNU/Linux operating system

* [ ] [ Linux and the GNU System](https://www.gnu.org/gnu/linux-and-gnu.en.html)

* [ ] [ Wikipedia - GNU/Linux naming controversy](https://en.wikipedia.org/wiki/GNU/Linux_naming_controversy)

* [ ] [ What is GNU/Linux?](https://www.debian.org/releases/stable/amd64/ch01s02.en.html)

* [ ] [ GNU Linux](https://searchdatacenter.techtarget.com/definition/GNU-Linux)

### Docker

Learn how to use Docker.

* [ ] [ Docker](https://www.docker.com/)

* [ ] [ Wikipedia - Docker (software)](https://en.wikipedia.org/wiki/Docker_(software))

* [ ] [ Docker for beginners](https://docker-curriculum.com/)

* [ ] [ What is Docker?](https://opensource.com/resources/what-docker)

* [ ] [ Get Started, Part 1: Orientation and setup](https://docs.docker.com/get-started/)

### SSH

Learn how to use SSH and learn how to connect to a device using an SSH client.

* [ ] [ Wikipedia - Secure Shell](https://en.wikipedia.org/wiki/Secure_Shell)

* [ ] [ Secure Shell (SSH)](https://searchsecurity.techtarget.com/definition/Secure-Shell)

* [ ] [ SSH command in Linux with Examples](https://www.geeksforgeeks.org/ssh-command-in-linux-with-examples/)

* [ ] [ How to Establish a Connection Using SSH](https://help.ubnt.com/hc/en-us/articles/218850057-Intro-to-Networking-How-to-Establish-a-Connection-Using-SSH)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#contributors)

## ➤ Contributors

	

| [](https://twitter.com/andreasmehlsen) | [](https://github.com/andreasbm/readme/blob/master/CONTRIBUTING.md) |

|:--------------------------------------------------:|:--------------------------------------------------:|

| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/readme/blob/master/CONTRIBUTING.md) |

| 🔥                                               |                                                  |

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)

## ➤ License

	

Licensed under [MIT](https://opensource.org/licenses/MIT).