/web-dev-links

List of useful link for web developer

List of useful links for Web developer (Updatable)


I excluded some obvious things from this list, but if you see anything wrong or missing, please file an issue or make a PR πŸ‘


πŸ”₯ - Strongly recommended

πŸ‘€ - Recommend to watch

πŸ’ͺ - Complicated library, which requires a lot of additional time to explore documentation and all features

πŸ“Ή - Video


Table of Contents

Expand Table of Contents

Disclaimer ⛔️

No Hello - Don't say just hello in chat πŸ‡·πŸ‡Ί πŸ”₯

No Meta - Don't ask meta questions in chat πŸ‡·πŸ‡Ί πŸ”₯

Development environment and tools

VS Code shortcuts MacOS, VS Code shortcuts Windows, VS Code shortcuts Linux - VSCode shortcuts for making your work faster (Attention to sections: Rich languages editing, Multi-cursor and selection, Navigation) πŸ”₯

Emmet - Write your HTML/CSS faster with Emmet (built-in VSCode) πŸ”₯

Eslint/Prettier - Keep your code clean with Eslint, Prettier

Eslint+Prettier+Husky for TS - Eslint+Prettier+Husky for TypeScript project πŸ”₯

My config files - List of my config files for different tools (ESlint, prettier, etc) πŸ‘€

Tools

Image Optimizer - Optimize you assets! (png, jpg)

SVG Optimizer - Although optimize SVG!

Online Markdown Editor - Nice and convenient online Markdown editor

Box Shadow Generator - Box-shadow generator and also another css-tools

JSON Diff - JSON difference

VSCode Extensions

HTML + CSS

HTML Reference , CSS Reference - Good reference books for HTML and CSS πŸ‡·πŸ‡Ί πŸ”₯

HTML/CSS courses - Short courses about basics of HTML/CSS πŸ‡·πŸ‡Ί πŸ‘€

Flexbox

Guide to Flexbox - A complete guide to flexbox by CSS Tricks πŸ”₯

Grid

Guide to grid - A complete guide to grid by CSS Tricks πŸ”₯

Grid basics πŸ“Ή - CSS Grid basics in 45 minutes by Wes Bos πŸ”₯

Playlist about CSS Grid πŸ“Ή - CSS grid on practise, use-cases by Wes Bos πŸ”₯

JavaScript

Learn Javascript - Learn β€œdocumentation” about JS. You can find almost all needful information about JS here πŸ‡·πŸ‡Ί πŸ”₯ πŸ’ͺ

Arrays methods - Good article about useful arrays methods, theire difference, etc πŸ‡·πŸ‡Ί πŸ”₯

EventLoop talk πŸ“Ή - Video about how EventLoop works by Jake Archibald πŸ‡·πŸ‡Ί πŸ”₯

EventLoop and tasks queues - Article about EventLoop, micro/macro tasks by Jake Archibald πŸ”₯

Utility JS-functions - List of utility-functions written on vanilla JS (have analogs from libs such as lodash, ramda) πŸ”₯

Lodash - Utility library with a lot of useful functions (Not recommending to use it now and suggesting to replace it by ES6 analogs)

Ramda - Utility functional library with a lot of useful functions

WEB ecosystem

Fetch API - Fetch API

Axios - Axios πŸ”₯

WebStorage API - WebStorage API (localStorage, sessionStorage) by Flavio Copes

Cookies - Cookies by Flavio Copes

JWT - JSON WEB Token (JWT) by Flavio Copes

HTTP status-codes - List of HTTP status codes and their purposes πŸ‡·πŸ‡Ί πŸ‘€

Websockets - Websockets by Flavio Copes πŸ‘€

Chrome Devtools Introduction - Chrome Devtools Introduction by Flavio Copes

Chrome DevTools Tips - Chrome DevTools Tips by Flavio Copes

Cookies vs localStorage - cookies vs localStorage for storing JWT-token πŸ‘€

Observers in JavaScript - Observers in JavaScript. What and why we need them? πŸ‘€

Web Performance - Optimizing JS, CSS, HTTP, images & fonts πŸ”₯

Git

Git Guide - The complete Git guide by Flavio Copes πŸ‘€

Git How To - Interactive Git course πŸ‡·πŸ‡Ί πŸ”₯

Git Cheatsheat - Git cheatsheat by Github πŸ‡·πŸ‡Ί πŸ‘€

Git Flight rules - FAQ for Git πŸ‡·πŸ‡Ί πŸ‘€

GitKraken - The best GUI git-client, with great documentation πŸ”₯

React

Component Lifecycle - Component Lifecycle diagramm πŸ‘€

SetState is async - Update your state wisely. For class-based πŸ‘€

Guide to useEffect - A complete guide to useEffect by Dan Abramov πŸ‘€

Thinking in hooks - Thinking in React Hooks by Amelia Wattenberger πŸ”₯

List of custom hooks - List of custom react hooks πŸ”₯

Library of custom hooks - Library of custom hooks πŸ”₯

React.memo, useMemo, useCallback πŸ“Ή - Good explanation of React.memo, useMemo, useCallback by Ben Awad πŸ‘€

Hooks FAQ - Answers on popular questions about hooks πŸ‘€

React Best Practices - Opinionated Software Design, Architecture & Best Practices in React by Alex Kondov πŸ”₯

React ecosystem libraries

Clsx - util-lib for dynamic classname changing. Lighter version of classnames

Fast Deep Compare - The fastest deep equal comparison for React. Very quick general-purpose deep comparison, too. Great for React.memo and shouldComponentUpdate.

React Hook Form - Awesome form-manager on hooks (has new approach rather than formik, react-final-form, redux-form) πŸ”₯ πŸ’ͺ

React Select - Advanced select with multiselect, autocomplete, async and creatable support πŸ”₯ πŸ’ͺ

Downshift - Autocomplete, combobox, dropdown (with more low-level API than in react-select) πŸ’ͺ

React Table - Create complicated, extandable tables. Library provides API for logic, not UI part πŸ’ͺ

React Query - Library for data-fetching (similar to Apollo client) πŸ”₯ πŸ’ͺ

React Toastify - Library for pop-up notifications πŸ‘€

React-Redux-Toastr - Library for pop-up notifications (deep Redux integration)

React Input Mask - Input mask

React Number Format - Format number inside input. Also input mask πŸ‘€

React Datepicker - Simple datepicker

React DayPicker - Simple range datepicker

React Dates - List of datepickers from AirBnB (range, single datepickers)

React PDF - Create PDF in React

Nivo Rocks - Library for creating charts

Highcharts - Complex library-wrapper for creating complicated charts πŸ’ͺ

React Window - Render large lists (virtualization) πŸ’ͺ

React Content Loader - Preview loader for content (Skeleton)

React Grid Layout - A draggable and resizable grid layout πŸ’ͺ

React Use - List of custom hooks combined into one package πŸ‘€

React Beautiful Dnd - Library for Drag and Drop

React Dnd - Library for Drag and Drop (with more low-level API than in react-beautiful-dnd) πŸ’ͺ

React Admin - A Framework for building admin applications on Material UI πŸ‘€

React Ranger - range and multi-range sliders πŸ‘€

React Compound Slider - range and multi-range sliders #2 πŸ’ͺ

Awesome React Links - A large collection of links for React ecosystem (included some links above) πŸ”₯ πŸš€ βš›οΈ

Redux

Redux in real life - Basics about redux, redux thunk/saga πŸ‡·πŸ‡Ί πŸ”₯

Redux Saga - Redux-saga on practice. Comparison with redux-thunk πŸ‡·πŸ‡Ί πŸ‘€

Context API vs Stage Management - Talk about Context API vs State management aka Redux πŸ‡·πŸ‡Ί πŸ‘€

Computing derived data - Redux selectors. ReSelect πŸ‘€

Immutable updating store - Immutable update patterns. Immer, immutabilitty-helper πŸ‘€

Normalizing store - Normalizing state shape. Normalizr πŸ‘€

Redux ecosystem libraries

Redux Toolkit - Toolset for Redux, which reduces boilerplate code πŸ”₯

Redux Ecosystem - addons and libs around Redux

Redux Ecosystem Links - A large list of useful links with addons, modules, utilites for redux ecosystem πŸ‘€ πŸš€ βš›οΈ

TypeScript

Utility Types - Utility TS types. Record, Pick, Omit, Partial, Required, etc πŸ”₯

React+TS cheatsheet - React Typescript Cheatsheet, how to use TS with React properly πŸ”₯

Typescript Advanced πŸ“Ή - Typescript Advanced crash course by Vladilen Minin πŸ‘€

React+TS tutorial πŸ“Ή - React+TS tutorial by Ben Awad πŸ‘€

GraphQL (frontend)

Types-safe React Hooks - Generating typed react hooks based on GraphQL schema using GraphQL code generator πŸ”₯

GraphQL Talks - A lot of useful info, articles, talks about GraphQL and ecosystem by Pavel Chertorogov πŸ‡·πŸ‡Ί πŸ‘€

Testing

Guide to testing React #1 - Full Guide to Testing JavaScript & React with Jest, React Testing Library, Cypress πŸ”₯

Guide to testing React #2 - Shortly about testing React πŸ‡ΊπŸ‡¦ πŸ‘€

Guide to testing React #3 - Testing React components with Jest/Enzyme, what and how πŸ‡ΊπŸ‡¦ πŸ‘€

Backend

NodeJS

Bulletproof NodeJS - Good NodeJS architecture. πŸ‡ΊπŸ‡¦ πŸ”₯ Original article link here

Node Best Practices - NodeJS latest best practices πŸ”₯

Authentication - Authentication. Session, tokens. Video reference

Http errors - Create HTTP errors easily πŸ‘€

ExpressJS

Express Validator - Validate input data from request πŸ”₯

Swagger-UI Express - Generate Swagger documentation πŸ‘€

GraphQL (backend)

GraphQL Talks - A lot of useful info, articles, talks about GraphQL and ecosystem by Pavel Chertorogov πŸ‡·πŸ‡Ί πŸ‘€

GraphQL Schema Design - A set of tips/rules how to design GraphQL schema by Pavel Chertorogov πŸ‡·πŸ‡Ί πŸ”₯

TypeGraphQL - A framework for GraphQL API in Node.js. (Awesome combination with TypeORM) πŸ”₯

List of videos about TypeORM+TypeGraphQL stack by Ben Awad: πŸ”₯

ORM

Mongoose - MongoDB ORM πŸ‘€

Mongoose plugins - Mongoose plugins (pagination, populate, etc) πŸ‘€

TypeORM - Great ORM used with TypeScript (supports MySQL / MariaDB / Postgres / SQLite / MongoDB) πŸ”₯