markdown 我在网上工作的首选资源。

Posted 2021-05-06

<details>
  <summary>Table of contents</summary>

- [General resources](#general-resources)
- [CSS](#css)
  - [CSS-in-JS](#css-in-js)
- [JavaScript](#javascript)
  - [Framework agnostic packages](#framework-agnostic-packages)
    - [General utilities](#general-utilities)
    - [Async](#async)
    - [Node](#node)
    - [Responsive](#responsive)
    - [Media and Images](#media-and-images)
    - [Date](#date)
    - [Scrolling](#scrolling)
    - [Carousels](#carousels)
    - [Web workers](#web-workers)
    - [Immutable](#immutable)
    - [Typography](#typography)
    - [Polyfills](#polyfills)
  - [React](#react)
    - [React-specific libs:](#react-specific-libs)
    - [State management](#state-management)
    - [Server-rendered React](#server-rendered-react)
    - [Static site generators](#static-site-generators)
  - [Microservices/Serverless](#microservices-serverless)
  - [Code bundlers](#code-bundlers)
- [Design Systems](#design-systems)
- [Testing](#testing)
- [Progressive Web Apps](#progressive-web-apps)
- [Code Sandboxes](#code-sandboxes)
- [APIs](#apis)
- [HTML](#html)
- [SVG](#svg)
- [Conversions and unicode](#conversions-and-unicode)
- [Tooling](#tooling)
  - [Package management and publishing](#package-management-and-publishing)
  - [Commit hooks](#commit-hooks)
  - [Code formatting and linting](#code-formatting-and-linting)
- [Features and feature detection](#features-and-feature-detection)
- [Performance](#performance)
  - [Performance testing and monitoring](#performance-testing-and-monitoring)
- [Accessibility (A11y)](#accessibility-a11y)
  - [A11y tools and resources:](#a11y-tools-and-resources)
    - [A11y Chrome extensions](#a11y-chrome-extensions)
    - [A11y Sketch plugins](#a11y-sketch-plugins)
- [DevOps](#devops)
  - [Continuous integration](#continuous-integration)
  - [Hosting](#hosting)
  - [Domains](#domains)
- [Design](#design)
  - [Typography](#typography)
- [Programming fonts](#programming-fonts)
- [Responsive](#responsive)
- [Inspiration](#inspiration)
- [Learning](#learning)
- [SEO](#seo)
- [Animation](#animation)
- [Regular expressions](#regular-expressions)

</details>

# General resources

- [Devdocs.io](http://devdocs.io/) - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++…
- [DevHints](https://devhints.io/) - cheatsheets for many web technologies
- [Carbon](<https://carbon.now.sh/?bg=rgba(171,%20184,%20195,%201)&t=seti&l=auto&ds=true&wc=true&wa=true&pv=32px&ph=32px&ln=false>) - use this to share images of your code in presentations etc
- [Shields.io](https://shields.io/) - ![](https://img.shields.io/badge/add-flare-green.svg?style=flat-square) to your documentation/readmes
- [JSON generator](https://next.json-generator.com/) - generate a lot of custom JSON for your app/site
- [JSON Editor Online](https://jsoneditoronline.org/) - view/edit JSON in a better format

# CSS

- [CSS Tricks "Complete Guide to Flexbox"](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [CSS Tricks "Complete Guide to Grid"](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Cubic bezier curve creator](http://cubic-bezier.com/#.17,.67,.83,.67)
- [Ceaser](http://matthewlein.com/ceaser/) - Cubic bezier curve generator
- [CSS Triggers](https://csstriggers.com/) - find out what CSS properties trigger Paint/Layout/Composite renders
- [Fluid-responsive font-size calculator](https://websemantics.uk/tools/responsive-font-calculator/) - To scale typography smoothly across viewport widths.
- [Browserhacks](http://browserhacks.com/) - Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs
- [Absolute centering](https://codepen.io/shshaw/full/gEiDt) - useful techniques for absolute centering in CSS

## CSS-in-JS

- [Emotion](http://emotion.sh/) - CSS-in-JS library
- [styled-components](https://styled-components.com) - CSS-in-JS for React
  - `yarn add styled-components` / `npm i -S styled-components`
- [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Design system framework for modern front-end projects
  - `yarn add design-system-utils` / `npm i -S design-system-utils`
- [polished](https://polished.js.org/) - A lightweight toolset for writing styles in JavaScript
- [styled-by](https://github.com/brunobertolini/styled-by) Simple and powerful lib to handle styled props in your components

# JavaScript

Use [Bundlephobia](https://bundlephobia.com/) to see the cost of any npm packages

Use [Snyk](https://snyk.io) to find any security vulnerabilities for any npm package. Search their database here: `https://snyk.io/vuln/npm:{package}` e.g. https://snyk.io/vuln/npm:react

## Useful JS links

- [JS module import/export syntax](https://stackoverflow.com/a/34842087/91359)

## Framework agnostic packages

### General utilities

- [Lodash](https://lodash.com) - A modern JavaScript utility library delivering modularity, performance & extras.
  - `yarn add lodash` / `npm i -S lodash`
- [Just](https://github.com/angus-c/just) - A library of dependency-free utilities that do just do one thing (like Lodash but smaller)
  - Install each util independently
  - Read the [tradeoffs document](https://github.com/angus-c/just/blob/master/TRADEOFFS.md) to see if Lodash is better
- [auto-bind](https://github.com/sindresorhus/auto-bind) - Automatically bind methods to their class instance
  - `yarn add auto-bind` / `npm i -S auto-bind`
- [object-get](https://github.com/75lb/object-get) - Access nested property values at any depth with a simple expression
  - `yarn add object-get` / `npm i -S object-get`
- [liteready](https://github.com/nicbell/liteready) - A lightweight DOM ready.
  - `yarn add lite-ready` / `npm i -S lite-ready`
- [passport](https://github.com/jaredhanson/passport) - Simple, unobtrusive authentication for Node.js
  - `yarn add passport` / `npm i -S passport`
- [attach.js](http://nicbell.github.io/attach.js/) - Attach.js removes dependancy on messy CSS selectors when attaching JavaScript to the page. Very useful for non-React/Angular/SPA projects
  - `yarn add attach.js` / `npm i -S attach.js`
- [gator](https://github.com/ccampbell/gator) - Gator is a Javascript event delegation library
  - `yarn add gator` / `npm i -S gator`
- [get-size](https://github.com/desandro/get-size) - Get the size of elements
  - `yarn add get-size` / `npm i -S get-size`
- [length.js](https://github.com/appalaszynski/length.js) - Library for length units conversion
  - `yarn add length.js` / `npm i -S length.js`
- [action-outside](https://github.com/saschageyer/action-outside) - Invoke a callback function when clicked or tabbed outside one or multiple DOM elements
  - `yarn add action-outside` / `npm i -S action-outside`
- [select-dom](https://github.com/bfred-it/select-dom) - Lightweight `querySelector`/`All` wrapper that outputs an Array
  - `yarn add select-dom` / `npm i -S select-dom`
- [memoizee](https://github.com/medikoo/memoizee) - Complete memoize/cache solution for JavaScript
  - `yarn add memoizee` / `npm i -S memoizee`
- [memoize-one: A memoization library which only remembers the latest invocation](https://github.com/alexreardon/memoize-one)
- [kind-of](https://github.com/jonschlinkert/kind-of) - Get the native JavaScript type of a value, fast.
  - `yarn add kind-of` / `npm i -S kind-of`
- [iterare: Array methods + ES6 Iterators =](https://github.com/felixfbecker/iterare)
  - `yarn add iterare` / `npm i -S iterare`
  - `yarn add mergestate` / `npm i -S mergestate`
- [eases: a grab-bag of modular easing equations](https://github.com/mattdesl/eases)
- [normalizr: Normalizes nested JSON according to a schema](https://github.com/paularmstrong/normalizr)
- [lazy-value: Create a lazily evaluated value](https://github.com/sindresorhus/lazy-value)
- [mitt: