/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) 🔥