Based on roadmap.sh
Content Index
- Useful links and Books
- Internet
- How does the internet work?
- What is HTTP?
- Browsers and how the work
- DNS and how it work?
- What is Domain Name?
- What is hosting?
- HTML
- Learn the basic
- Semantic HTML
- Forms and Validations
- Conventions and Best Practices
- Accessibility
- Basics of SEO
- CSS
- CSS Basics
- Making layouts
- Responsive Web Design
- JavaScript
- Syntax and Basic Constructs
- Learn DOM Manipulation
- Learn Fetch API / Ajax (XHR)
- Modern JavaScript - ES6+ and modular JavaScript
- JavaScript Concepts
- Time to Backend!
- OS and General Knowledge
- Terminal usage
- How OSs work in General
- Process Management
- Threads and Concurrency
- Basic Terminal Commands
- Memory Management
- Interprocess Communication
- I/O Management
- POSIX Basics
- Basic Networking Concepts
- Logic Algorithms Programming
- Learn a language
- Version Control Systems
- Basic Usage of Git
- Repo Hosting Services
- GitHub
- GitLab
- BitBucket
- Relational Databases
- PostgreSQL
- MySQL
- MariaDB
- MS SQL
- Oracle
- More about databases
- ORMs
- ACID
- Transactions
- N+1 Problem
- Database Normalization
- Database Indexes and how they work
- Data Replication
- Sharding Strategies
- CAP Theorem
- NoSQL Databases
- Document databases
- Document: MongoDB, Couch DB
- Column Databases: Cassandra
- Timeseries Databases: InfluxDB, TimescaleDB
- Realtime Databases: Firebase, RethinkDB
- Learn about APIs
- HATEOAS
- Open API Spec and Swagger
- Authentication
- JSON APIs
- SOAP
- gRPC
- Catching
- CDN (Content Delivery Network)
- Server Side
- Redis
- Memcached
- Client Side
- Back to Frontend!
- Web Security Knowledge
- Hashing Algorithms
- MD5 and why not to use it
- SHA Family
- scrypt
- bcrypt
- HTTPS
- Content Security Policy
- CORS
- SSL/TLS
- OWASP Security Risks
- Package Managers
- npm
- Yarn
- CSS Architecture
- BEM
- OOCSS
- SMACSS
- CSS Preprocessors
- Sass
- PostCSS
- Less
- Build tools
- Task runners
- npm Scripts
- Module bundlers
- Webpack
- esbuild
- Rollup
- Parcel
- Vite
- Linters formatters
- Prettier
- ESLint
- StandardJS
- Pick a Framework
- React
- Redux
- MobX
- Recoil
- Angular
- RxJS
- NgRx
- Vue.js
- Vuex
- Modern css
- Styled components
- CSS Modules
- Styled JSX
- Emotion
- Web components - Html templates
- Html templates
- Custom elements
- Shadow dom
- CSS Frameworks
- Bootstrap
- Bulma
- JS
- Tailwind CSS
- Chakra UI
- Material UI
- Radix UI
- Testing your apps
- Mocha
- Chai
- Ava
- Jasmine
- Jest
- React Testing Library
- Cypress
- Enzyme
- Type checkers
- TypeScript
- Flow
- Progressive Web Apps
- APIS
- Calculating Measuring and improving performance
- Performance
- Server Side Rendering (SSR)
- Next.js
- After.js
- Angular
- Universal
- Nuxt.js
- Graphql
- Apollo
- Relay Modern
- Static Site Generators
- Next.js
- Gatsby
- Vuepress
- Jekyll
- Hugo
- Gridsome
- Eleventy
- Mobile applications
- React Native
- NativeScript
- Flutter
- Ionic
- Desktop applications
- Electron
- Carlo
- Proton native
- Web Assembly
- Turning Back to the Backend!
- Testing
- Integration Testing
- Unit Testing
- Functional Testing
- CI/CD
- Design and Development Principles
- GOF Design Patterns
- Domain Driven Design
- Test Driven Development
- SOLID
- KISS
- YAGNI
- DRY
- Architectural Patterns
- Monolithic Apps
- Microservices
- SOA
- CQRS and Event Sourcing
- Serverless
- Search Engines
- Elasticsearch
- Solr
- Message Brokers
- RabbitMQ
- Kafka
- Containerization vs. Virtualization
- Docker
- rkt
- LXC
- GraphQL
- Apollo
- Relay Modern
- Graph Databases
- Neo4j
- WebSockets
- Web Servers
- Nginx
- Apache
- Caddy
- MS IIS
- Building for Scale
- Mitigation Strategies
- Understanding the Diff.
- Migration Strategies
- Horizontal vs Vertical Scaling
- Building with Observability in mind
- The lost thing in the Front!
- CMS
- Keep Learning!
YouTube
- CodeVault - Answers for developers
PT-BRCurso de Banco de Dados MySQLPT-BRCurso de Bases Numéricas (Binário, Octal, Hexadecimal)PT-BRCurso de Git e GitHub: grátis, prático e sem usar comandos no terminalPT-BRCurso de Lógica de ProgramaçãoPT-BRCurso de Programação C CompletoPT-BRCurso completo e atual de HTML5 e CSS3 - Módulo 1 de 5PT-BRCurso HTML5 e CSS3 - Módulo 2 de 5PT-BRCurso HTML5 e CSS3 - Módulo 3 de 5PT-BRCurso de Python 3 - Mundo 1: FundamentosPT-BRCurso de Python 3 - Mundo 2: Estruturas de ControlePT-BRCurso de Python 3 - Mundo 3: Estruturas CompostasPT-BRExercícios de Python 3
Books
PT-BRBACKES, André. Linguagem C. Completa e Descomplicada. 1ª Edição. Editora Elsevier, 2012. ISBN-10: 8535268553, ISBN-13: 978-8535268553.PT-BRJAMSA, Kris; KLANDER, Lars. Programando em C/C++ "A Bíblia": O Melhor Guia Para a Programação em C/C++. Editora Pearson, 1999. ISBN: 8534610258.- KERNIGHAN, Brian; RITCHIE, Dennis. C Programming Language. 2nd Edition. Prentice Hall publisher, 1988. ISBN-13: 978-0131103627, ISBN-10: 0131103628.
- FOWLER, Martin Fowler. Refactoring: Improving the Design of Existing Code. 2nd Edition. Addison Wesley publisher, 2019. ISBN-13: 978-0134757599, ISBN-10: 0134757599.
The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
HTTP is the TCP/IP based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.
Free Content
READ What is HTTP?
READ An overview of HTTP
READ Journey to HTTP/2
A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.
Free Content
READ How Browsers Work
READ Role of Rendering Engine in Browsers
The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system.
Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.
HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
Free Content
COURSE HTML Full Course - Build a Website Tutorial
COURSE HTML Tutorial for Beginners: HTML Crash Course
COURSE Codecademy - Learn HTML
COURSE Interactive HTML Course
Semantic element clearly describes its meaning to both the browser and the developer.
Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.
Learn to follow the best practices for writing maintainable and scalable HTML documents.
Web accessibility means that websites, tools, and technologies are designed and developed in such a way that people with disabilities can use them easily.
SEO or Search Engine Optimization is the technique used to optimize your website for better rankings on search engines such as Google, Bing etc.
Free Content
READ Google Search Central — SEO Docs
READ SEO Guide
READ SEO for Developers
WATCH Complete SEO Course for Beginners
WATCH SEO Expert Course
CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Free Content
READ Web.dev by Google — Learn CSS
READ freeCodeCamp — Responsive Web Design
COURSE [CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI&ab_channel=TraversyMedia "CSS Crash Course For Absolute Beginners
COURSE HTML and CSS Tutorial
COURSE CSS Masterclass - Tutorial & Course for Beginners
COURSE What The Flexbox!
COURSE Learn CSS | Codecademy
Free Content
READ freeCodeCamp — Responsive Web Design
COURSE CSS Crash Course For Absolute Beginners
COURSE HTML and CSS Tutorial
Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics:
Floats, Positioning, Display, Box Model, CSS Grid, Flex Box.
Free Content
READ Learn and Practice Flexbox
READ Game for learning CSS Grid
READ All about Floats
READ Positioning Types: How Do They Differ?
READ The Box Model
Responsive Web Designing is the technique to make your webpages look good on all screen sizes. There are certain techniques used to achieve that e.g. CSS media queries, percentage widths, min or max widths heights etc.
Free Content
JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
Free Content
READ W3Schools – JavaScript Tutorial
READ The Modern JavaScript Tutorial
WATCH JavaScript Crash Course for Beginners
WATCH Build a Netflix Landing Page Clone with HTML, CSS & JS
The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.
Free Content
READ What is the DOM?
READ JavaScript HTML DOM
READ JavaScript DOM
Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updaing the user profile or asynchronously fetch the list of searched products without reloading the page.
ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming language. It is the first major update to the language since ES5 which was standardized in 2009. You should look at the features introduced with ES6 and onwards.
Free Content
READ ES6 Tutorial
WATCH Learn Modern JavaScript in 1 Hour
WATCH JavaScript ES6, ES7, ES8
Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM and strict.
Free Content
READ JavaScript Hoisting
READ Event Bubbling and Capturing
READ Scope in JavaScript
READ Var, Let and Const — What's the difference?
READ Inheritance and Prototype Chain
Operating System is a program that manages a computer’s resources, especially the allocation of those resources among other programs. Typical resources include the central processing unit (CPU), computer memory, file storage, input/output (I/O) devices, and network connections.
Free Content
READ What is an operating system?
Terminals, also known as command lines or consoles, allow us to accomplish and automate tasks on a computer without the use of a graphical user interface.
Free Content
READ Command line crash course
COURSE Basic Terminal Usage - Cheat Sheet to make the command line EASY
Process management involves various tasks like creation, scheduling, termination of processes, and a deadlock. Process is a program that is under execution, which is an important part of modern-day operating systems. The OS must allocate resources that enable processes to share and exchange information. It also protects the resources of each process from other methods and allows synchronization among processes.
A thread is the smallest unit of processing that can be performed in an OS. In most modern operating systems, a thread exists within a process - that is, a single process may contain multiple threads.
Concurrency refers to the execution of multiple threads at the same time. It occurs in an operating system when multiple process threads are executing concurrently. These threads can interact with one another via shared memory or message passing. Concurrency results in resource sharing, which causes issues like deadlocks and resource scarcity. It aids with techniques such as process coordination, memory allocation, and execution schedule to maximize throughput.
Free Content
READ What’s the Diff: Programs, Processes and Threads
READ Concurrency in Operating System
WATCH Intro to Processes & Threads
grep, awk, sed, lsof, curl, wget, tail, head, less, find, ssh, kill
Working within the terminal is common practice for any Backend Developer and there are many commands and utilities that can help you achieve your tasks more efficiently.
The best way to learn these commands is to practice them in your own machine/environment. Specifically, these are related to Linux commands/utilities which are the most prevalent in the market.
To understand these commands, read through the manual pages by using man command e.g. man grep, man awk etc.
After enough exposure and practice to these commands, it will become easier to use these in practice
The term Memory can be defined as a collection of data in a specific format. It is used to store instructions and process data. The memory comprises a large array or group of words or bytes, each with its own location. The primary motive of a computer system is to execute programs. These programs, along with the information they access, should be in the main memory during execution. The CPU fetches instructions from memory according to the value of the program counter.
To achieve a degree of multiprogramming and proper utilization of memory, memory management is important. There are several memory management methods, reflecting various approaches, and the effectiveness of each algorithm depends on the situation.
Interprocess communication (IPC) refers specifically to the mechanisms an operating system provides to allow the processes to manage shared data
stdin, stdout, stderr, pipes
Make sure to learn its quirks. Core details about its runtime e.g. concurrency, memory model, etc.
- C
- C++
- Python
- Node.js
Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
Free Content
WATCH Version Control System Introduction
WATCH Git & GitHub Crash Course For Beginners
WATCH Learn Git in 20 Minutes
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Free Content
WATCH Version Control System Introduction
WATCH Git & GitHub Crash Course For Beginners
WATCH Learn Git in 20 Minutes
There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are.
Services Links
VISIT GitHub: Where the world builds software
GitHub is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
Services Links
READ GitHub: Quickstart
WATCH What is GitHub?
WATCH Git vs. GitHub: What's the difference?
GitLab is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
BitBucket is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
A relational database is a type of database that stores and provides access to data points that are related to one another. Relational databases store data in a series of tables. Interconnections between the tables are specified as foreign keys. A foreign key is a unique reference from one row in a relational table to another row in a table, which can be the same table but is most commonly a different table.
Free Content
READ Relational Databases
READ 51 Years of Relational Databases
WATCH Databases and SQL
PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance.
Free Content
OFFICIAL WEBSITE Official Website
READ What is PostgreSQL
MySQL is an incredibly popular open source relational database management system (RDBMS). MySQL can be used as a stand-alone client or in conjunction with other services to provide database connectivity. The M in LAMP stack stands for MySQL; that alone should provide an idea of its prevalence.
Free Content
MYSQL WEBSITE MySQL website
COURSE W3Schools - MySQL tutorial
COURSE MySQL tutorial for beginners
MariaDB server is a community developed fork of MySQL server. Started by core members of the original MySQL team, MariaDB actively works with outside developers to deliver the most featureful, stable, and sanely licensed open SQL server in the industry. MariaDB was created with the intention of being a more versatile, drop-in replacement version of MySQL
Free Content
MARIADB WEBSITE MariaDB website
READ MariaDB vs MySQL
COURSE W3Schools - MariaDB tutorial
MS SQL (or Microsoft SQL Server) is the Microsoft developed relational database management system (RDBMS). MS SQL uses the T-SQL (Transact-SQL) query language to interact with the relational databases. There are many different versions and editions available of MS SQL
Object-Relational Mapping (ORM) is a technique that lets you query and manipulate data from a database using an object-oriented paradigm. When talking about ORM, most people are referring to a library that implements the Object-Relational Mapping technique, hence the phrase "an ORM".
ACID are the four properties of any database system that help in making sure that we are able to perform the transactions in a reliable manner. It's an acronym which refers to the presence of four properties: atomicity, consistency, isolation and durability
Free Content
WATCH ACID Explained: Atomic, Consistent, Isolated & Durable
READ What is ACID Compliant Database?
READ What is ACID Compliance?: Atomicity, Consistency, Isolation
The N+1 query problem happens when your code executes N additional query statements to fetch the same data that could have been retrieved when executing the primary query.
CAP is an acronym that stands for Consistency, Availability and Partition Tolerance. According to CAP theorem, any distributed system can only guarantee two of the three properties at any point of time. You can't guarantee all three properties at once.
Free Content
WATCH What is CAP Theorem?
READ What is CAP Theorem?
NoSQL databases offer data storage and retrieval that is modelled differently to "traditional" relational databases. NoSQL databases typically focus more on horizontal scaling, eventual consistency, speed and flexibility and is used commonly for big data and real-time streaming applications. NoSQL is often described as a BASE system (Basically Available, Soft state, Eventual consistency) as opposed to SQL/relational which typically focus on ACID (Atomicity, Consistency, Isolation, Durability). Common NoSQL data structures include key-value pair, wide column, graph and document.
MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License (SSPL).
Free Content
OFFICIAL WEBSITE MongoDB Website
OFFICIAL DOCUMENTATION MongoDB Documentation
OFFICIAL COURSES Learning Path for MongoDB Developers
SANDBOX MongoDB Online Sandbox
HATEOAS is an acronym for Hypermedia As The Engine Of Application State, it's the concept that when sending information over a RESTful API the document received should contain everything the client needs in order to parse and use the data i.e they don't have to contact any other endpoint not explicitly mentioned within the Document
The OpenAPI Specification (OAS) defines a standard, language-agnostic interface to RESTful APIs which allows both humans and computers to discover and understand the capabilities of the service without access to source code, documentation, or through network traffic inspection. When properly defined, a consumer can understand and interact with the remote service with a minimal amount of implementation logic.
An OpenAPI definition can then be used by documentation generation tools to display the API, code generation tools to generate servers and clients in various programming languages, testing tools, and many other use cases.
Free Content
FRAMEWORK WEBSITE OpenAPI Specification Website
DEMO Open API Live Editor
WATCH OpenAPI 3.0: How to Design and Document APIs with the Latest OpenAPI Specification 3.0
COURSE Official training guide
JSON or JavaScript Object Notation is an encoding scheme that is designed to eliminate the need for an ad-hoc code for each application to communicate with servers that communicate in a defined way. JSON API module exposes an implementation for data stores and data structures, such as entity types, bundles, and fields.
A Content Delivery Network (CDN) service aims to provide high availability and performance improvements of websites. This is achieved with fast delivery of website assets and content typically via geographically closer endpoints to the client requests. Traditional commercial CDNs (Amazon CloudFront, Akamai, CloudFlare and Fastly) provide servers across the globe which can be used for this purpose. Serving assets and contents via a CDN reduces bandwidth on website hosting, provides an extra layer of caching to reduce potential outages and can improve website security as well
Free Content
READ CloudFlare - What is a CDN? | How do CDNs work?
READ Wikipedia - Content Delivery Network
WATCH What is Cloud CDN?
Web security refers to the protective measures taken by the developers to protect the web applications from threats that could affect the business.
Free Content
READ Why HTTPS Matters
READ Wikipedia - OWASP
READ OWASP Web Application Security Testing Checklist
READ OWASP Top 10 Security Risks
READ OWASP Cheatsheets
MD5 (Message-Digest Algorithm 5) is a hash function that is currently advised not to be used due to it's extensive vulnerabilities. It is still used as a checksum to verify data integrity.
bcrypt is a password hashing function, that has proven been proven reliable and secure since it's release in 1999.It has been implemented into most commonly-used programming languages.
HTTPS is a secure way to send data between a web server and a browser.
Free Content
READ What is HTTPS?
READ Why HTTPS Matters
READ Enabling HTTPS on Your Servers
Content Security Policy is a computer security standard introduced to prevent cross-site scripting, clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
OWASP or Open Web Application Security Project is an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security.
Free Content
READ Wikipedia - OWASP
READ OWASP Web Application Security Testing Checklist
READ OWASP Top 10 Security Risks
READ OWASP Cheatsheets
Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly.
Free Content
READ Modern JavaScript for Dinosaurs
READ An Absolute Beginner's Guide to Using npm
WATCH NPM tutorial for Beginners
WATCH NPM Crash Course
WATCH Yarn Crash Course
npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.
Yarn is a software packaging system developed in 2016 by Facebook for Node.js JavaScript runtime environment that provides speed, consistency, stability, and security as an alternative to npm (package manager).
CSS is notoriously difficult to manage in large, complex, rapidly-iterated systems. There are different ways of writing CSS that allows in writing more maintainable CSS.
Free Content
READ A Look at Some CSS Methodologies
OFFICIAL WEBSITE BEM Official Website
OFFICIAL WEBSITE OOCSS Official Website
OFFICIAL WEBSITE SMACSS Official Website
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
Free Content
OFFICIAL WEBSITE BEM Official Website
OFFICIAL DOCUMENTATION BEM Documentation
READ BEM 101
READ BEM Tutorials
As with any object-based coding method, the purpose of OOCSS or Object Oriented CSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.
SMACSS (pronounced “smacks”) is more style guide than rigid framework. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
CSS Preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations.
Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It lets you write maintainable CSS and provides features like variable, nesting, mixins, extension, functions, loops, conditionals and so on.
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.
This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.
npm scripts are the entries in the scripts field of the package.json file. The scripts field holds an object where you can specify various commands and scripts that you want to expose.
This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
Our current build tools for the web are 10-100x slower than they could be. The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
Parcel is a web application bundler, differentiated by its developer experience. It offers blazing-fast performance utilizing multicore processing and requires zero configuration.
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
Free Content
OFFICIAL WEBSITE Vite Website
DOCUMENTATION Vite Documentation
COURSE Vite Crash Course
This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.
Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, and more.
With ESLint you can impose the coding standard using a certain set of standalone rules.
Standardjs is a Style guide, with linter & automatic code fixer. It is a way to enforce consistent style in your project. It automatically formats code. Standard JS is a tool in the Code Review category of a tech stack.
Web frameworks are designed to write web applications. Frameworks are collections of libraries that aid in the development of a software product or website. Frameworks for web application development are collections of various tools. Frameworks vary in their capabilities and functions, depending on the tasks set. They define the structure, establish the rules, and provide the development tools required.
React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.
Free Content
FRAMEWORK WEBSITE React Website
COURSE The Beginner's Guide to React
COURSE React JS Course for Beginners
COURSE React Course - Beginner's Tutorial for React JavaScript Library [2022]
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
Free Content
READ Official Website
READ Official Getting Started to Redux
MobX is an open source state management tool. MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.
Recoil is a new state management library built by the Facebook team that simplifies global state management.
Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code.
Free Content
OFFICIAL WEBSITE RxJS Official Website
READ RxJS Angular Docs
WATCH RxJS Quick Start
COURSE RxJS Crash Course
NgRx is an open source library that provides reactive state management for your Angular applications
Free Content
OFFICIAL DOCS Official Documentation
WATCH Angular NgRx Redux Quick Start Tutorial
COURSE NgRx Course
Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.
Free Content
FRAMEWORK WEBSITE Vue.js Website
OFFICIAL DOCS Official Getting Started
COURSE Vue.js Course for Beginners
COURSE Vue.js Crash Course
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
CSS files in which all class names and animation names are scoped locally by default.
Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.
Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
CSS first frameworks which don't come with JavaScript framework components by default.
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
JS based and better to use with your framework based JavaScript applications.
CSS Framework that provides atomic CSS classes to help you style components e.g. flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Free Content
FRAMEWORK WEBSITE Tailwind Website
YOUTUBE CHANNEL Official Screencasts
WATCH Should You Use Tailwind CSS?
READ Tailwind CSS: An Introduction
COURSE Tailwind CSS Crash Course
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Free Content
OFFICIAL WEBSITE Chakra UI Website
OFFICIAL DOCS Chakra UI Official Getting Started
COURSE Build a Modern User Interface with Chakra UI
WATCH Official Getting Started Video
WATCH Chakra UI Crash Course
Material-UI is an open-source framework that features React components that implement Google’s Material Design.
An open-source UI component library for building high-quality, accessible design systems and web apps.
Learn the difference between Unit, Integration, and Functional tests and learn how to write them with the tools listed on the left. Before delivering your application to users, you need to be sure that your app meets the requirements it was designed for, and that it doesn't do any weird, unintended things (called 'bugs'). To accomplish this, we 'test' our applications in different ways.
Free Content
READ A comprehensive dive into software testing.
Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.
Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.
Ava is a JavaScript test runner. It utilizes the async I/O nature of Node and runs concurrent tests, thereby vastly decreasing your test times.
Free Resources
OFFICIAL REP Official Repository
READ Testing your Node.js applications with Ava.js
WATCH AVA Tutorial
Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. It provides utilities that can be used to run automated tests for both synchronous and asynchronous code.
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
Free Resources
WEBSITE Official Website
DOCS Official Docs for Deep Dives
HANDBOOK The TypeScript Handbook
READ TypeScript Tutorial
WATCH TypeScript for Beginners
Flow is a static type checker, designed to find type errors in JavaScript programs.
Progressive Web Apps (PWAs) are websites that are progressively enhanced to function like installed, native apps on supporting platforms, while functioning like regular websites on other browsers. Learn diferent Web APIs used in PWAs
- Storage;
- Web Sockets;
- Service Workers;
- Location;
- Notifications;
- Device Orientation;
- Payments;
- Credentials.
- PRPL Pattern;
- RAIL Model;
- Performance Metrics;
- Using Lighthouse;
- Using DevTools.
React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.
Free Resources
FRAMEWORK WEBSITE React Website
COURSE The Beginner's Guide to React
COURSE React JS Course for Beginners
COURSE React Course - Beginner's Tutorial for React JavaScript Library [2022]
Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
Free Resources
WEBSITE Official Website
DOCS Official Docs for Getting Started
WATCH Mastering Next.js
WATCH Next.js for Beginners - freeCodeCamp
HANDBOOK The Next.js Handbook — freeCodeCamp
After.js is an open-source JavaScript framework for developing SSR (Server Side Rendering) based applications. It is similar to the Next.js framework for server-rendered React apps but uses React Router instead of a folder structure based router like Next.js
Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.
Free Resources
FRAMEWORK WEBSITE Vue.js Website
OFFICIAL DOCS Official Getting Started
COURSE Vue.js Course for Beginners
COURSE Vue.js Crash Course
Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, Webpack and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.
Free Content
OFFICIAL WEBSITE Nuxt Website
DOCS Nuxt Docs
COURSE Get Started with Nuxt
COURSE Nuxt.js Fundamentals
READ Nuxt Tutorials
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
Free Content
READ The Fullstack Tutorial for GraphQL
COURSE GraphQL Tutorials
COURSE GraphQL Course for Beginners
Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions.
A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers.
Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
Free Resources
WEBSITE Official Website
DOCS Official Docs for Getting Started
WATCH Mastering Next.js
WATCH Next.js for Beginners - Full Course at freeCodeCamp YouTube Channel
HANDBOOK The Next.js Handbook — FreeCodeCamp
Gatsby is a React-based open source framework with performance, scalability and security built-in.
Nuxt.js is an open-source development framework built on top of Node.js enabling Vue based web applications functionalities such as server-side rendering and generating static websites.
Free Resources
WEBSITE Official Website
DOCS Official Docs for Getting Started
WATCH Mastering Nuxt.js
WATCH Vue.js for Beginners - Full Course at freeCodeCamp YouTube Channel
VuePress is composed of two parts: a minimalistic static site generator (opens new window)with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue’s own sub projects.
Free Resources
WEBSITE Official Website
DOCS Official Docs for Getting Started
WATCH Introduction to VuePress
Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.
Hugo is the world’s fastest static website engine. It’s written in Go (aka Golang) and developed by bep, spf13 and friends.
Gridsome is a Vue.js powered Jamstack framework for building static generated websites & apps that are fast by default.
Eleventy (11ty) is a simple to use, easy to customize, highly performant and powerful static site generator with a helpful set of plugins (e.g. navigation, build-time image transformations, cache assets). Pages can be built and written with a variety of template languages (HTML, Markdown, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug or JS template literals). But it also offers the possibility to dynamically create pages from local data or external sources that are compiled at build time. It has zero client-side JavaScript dependencies.
Free Content
WEBSITE Official Website
WATCH Introduction to Eleventy
READ A collection of 11ty starters, projects, plugins, and resources
React Native is a popular JavaScript-based mobile app framework that allows you to build natively-rendered mobile apps for iOS and Android. The framework lets you create an application for various platforms by using the same codebase.
Free Content
OFFICIAL WEBSITE Official Website
OFFICIAL DOCS Official Getting Started to React Native
NativeScript is an open source framework for creating native iOS and Android apps in Angular, TypeScript, or JavaScript.
Free Content
OFFICIAL WEBSITE Official Website
OFFICIAL DOCS Official Getting Started to NativeScript
Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android). Flutter consists of two important parts:
- An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
- A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs. To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years. Dart focuses on front-end development, and you can use it to create mobile and web applications. If you know a bit of programming, Dart is a typed object programming language. You can compare Dart's syntax to JavaScript.
Free Content
OFFICIAL WEBSITE Flutter Website
READ Flutter Tutorial
COURSE Flutter Tutorial for Beginners
READ Flutter Tutorial
Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript.
Free Content
OFFICIAL WEBSITE Official Website
OFFICIAL DOCS Official Getting Started to Ionic framework
Electron allows you to build cross-platform desktop applications with HTML, CSS, and Javascript/Typescript. It uses Chromium and Node.js, so essentially it is a "Browser" like application that is compatbile with Mac, Windows, and Linux.
Carlo is a headful Node app framework for building desktop applications.
Proton Native allows you to create desktop applications through a React syntax, on all platforms.
WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together. Web Assembly or WASM is the binary instructions generated from higher level languages such as Go, C, C++ or Rust. It is faster than JavaScript and WASM 1.0 has already shipped in the major browsers. W3C accepted it as an official standard at the end of 2019. It will still take quite some time to go mainstream though.
Free Content
OFFICIAL WEBSITE Official Website
OFFICIAL DOCS Official Getting Started to Web Assembly
A key to building software that meets requirements without defects is testing. Software testing helps developers know they are building the right software. When tests are run as part of the development process (often with continuous integration tools), they build confidence and prevent regressions in the code.
Integration testing a broad category of tests where multiple software modules are integrated and tested as a group. It is meant to test the interaction between multiple services, resources, or modules. For example, an API's interaction with a backend service, or a service with a database.
Unit testing is where individual units (modules, functions/methods, routines, etc.) of software are tested to ensure their correctness. This low-level testing ensures smaller components are functionally sound while taking the burden off of higher-level tests. Generally, a developer writes these tests during the development process and they are run as automated tests.
Functional testing is where software is tested to ensure functional requirements are met. Usually, it is a form of black box testing in which the tester has no understanding of the source code; testing is performed by providing input and comparing expected/actual output. It contrasts with non-functional testing, which includes performance, load, scalability, and penetration testing.
CI/CD (Continuous Integration/Continuous Deployment) is the practice of automating building, testing, and deployment of applications with the main goal of detecting issues early, and provide quicker releases to the production environment.
Design patterns are typical solutions to commonly occurring problems in software design. They can be broken into three categories:
- Creational Patterns for the creation of objects
- Structural Patterns to provide relationship between objects
- Behavioral Patterns to help define how objects interact
Test driven development (TDD) is the process of writing tests for software's requirements which will fail until the software is developed to meet those requirements. Once those tests pass, then the cycle repeats to refactor code or develop another feature/requirement. In theory, this ensures that software is written to meet requirements in the simplest form, and avoids code defects.
SOLID is a set of principles applied to object-oriented design (OOD) to create maintainable, understandable, and flexible code, while avoiding code smells and defects. The principles are:
- Single Responsibility
- Open/Closed
- Liskov Substitution
- Interface Segregation
- Dependency Inversion
Free Content
ORIGINAL PAPER Design Principles and Design Patterns
READ SOLID Principles
READ SOLID: The First 5 Principles of Object Oriented Design
Keep It Simple, Stupid (KISS) is a software design principle that states avoiding needless complexity is the best way to build software that is easier to maintain, understand, and contains fewer defects. A simple product that does a single thing well is better than a complex product that does many things poorly.
You Aren't Going to Need It (YAGNI) is a software design principle from the Extreme Programming (XP) framework that states when developing software, functionality or features should not be added until they are necessary. Within agile software development in general, requirements are always open to change; any extra functionality may end up being wasted time and resources.
Don't Repeat Yourself (DRY) is a software design principle which encourages developers to not repeat software patterns or code. DRY encourages code reusability, often in the form of methods, functions, or subroutines. When DRY is implemented successfully, developers are able to make one change to update many related elements while avoiding making changes to unrelated elements.
Monolithic architecture is a pattern in which an application handles requests, executes business logic, interacts with the database, and creates the HTML for the front end. In simpler terms, this one application does many things. It's inner components are highly coupled and deployed as one unit.
Microservice architecture is a pattern in which highly cohesive, loosely coupled services are separately developed, maintained, and deployed. Each component handles an individual function, and when combined, the application handles an overall business function.
SOA, or service-oriented architecture, defines a way to make software components reusable via service interfaces. These interfaces utilize common communication standards in such a way that they can be rapidly incorporated into new applications without having to perform deep integration each time.
Serverless is an architecture in which a developer builds and runs applications without provisioning or managing servers. With cloud computing/serverless, servers exist but are managed by the cloud provider. Resources are used as they are needed, on demand and often using auto scaling.
Elastic search at its core is a document-oriented search engine. It is a document based database that lets you INSERT, DELETE , RETRIEVE and even perform analytics on the saved records. But, Elastic Search is unlike any other general purpose database you have worked with, in the past. It's essentially a search engine and offers an arsenal of features you can use to retrieve the data stored in it, as per your search criteria. And that too, at lightning speeds.
Message brokers are an inter-application communication technology to help build a common integration mechanism to support cloud-native, microservices-based, serverless, and hybrid cloud architectures. Two of the most famous message brokers are RabbitMQ and Apache Kafka
With tens of thousands of users, RabbitMQ is one of the most popular open-source message brokers. RabbitMQ is lightweight and easy to deploy on-premises and in the cloud. It supports multiple messaging protocols. RabbitMQ can be deployed in distributed and federated configurations to meet high-scale, high-availability requirements.
Free Content
READ RabbitMQ Tutorials
WATCH RabbitMQ Tutorial - Message Queues and Distributed Systems
Apache Kafka is an open-source distributed event streaming platform used by thousands of companies for high-performance data pipelines, streaming analytics, data integration, and mission-critical applications.
Containers and virtual machines are the two most popular approaches to setting up a software infrastructure for your organization.
Docker is a platform for working with containerized applications. Among its features are a daemon and client for managing and interacting with containers, registries for storing images, and a desktop application to package all these features together.
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
Free Content
READ The Fullstack Tutorial for GraphQL
COURSE GraphQL Tutorials
COURSE GraphQL Course for Beginners
Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions.
Web sockets are defined as a two-way communication between the servers and the clients, which mean both the parties, communicate and exchange data at the same time. This protocol defines a full duplex communication from the ground up. Web sockets take a step forward in bringing desktop rich functionalities to the web browsers.
NGINX is a powerful web server and uses a non-threaded, event-driven architecture that enables it to outperform Apache if configured correctly. It can also do other important things, such as load balancing, HTTP caching, or be used as a reverse proxy.
Apache is a free, open-source HTTP server, available on many operating systems, but mainly used on Linux distributions. It is one of the most popular options for web developers, as it accounts for over 30% of all the websites, as estimated by W3Techs.
The Caddy web server is an extensible, cross-platform, open-source web server written in Go. It has some really nice features like automatic SSL/HTTPs and a really easy configuration file.
Free Content
OFFICIAL WEBSITE Official Website
WATCH Getting started with Caddy the HTTPS Web Server from scratch
Internet Information Services (IIS) for Windows® Server is a flexible, secure and manageable Web server for hosting anything on the Web.
General topics that you should learn and care about for the sustainability of the product.
- Graceful
- Degradation
- Throttling
- Backpressure
- Loadshifting
- Circuit Breaker
Instrument Monitoring Telemetry
- Instrumentation
- Monitoring
- Telemetry
Horizontal scaling is a change in the number of a resource. For example, increasing the number of virtual machines processing messages in a queue. Vertical scaling is a change in the size/power of a resource. For example, increasing the memory or disk space available to a machine. Scaling can be applied to databases, cloud resources, and other areas of computing.
WATCH System Design Basics: Horizontal vs. Vertical Scaling
WATCH System Design 101
READ Horizontal vs Vertical Scaling
READ Scaling In Databases
Metrics logging and other observable items that could help you in debugging and solving the issues when things go wrong
Content Management System