To do a good job, he must sharpen his tools.

The front-end tool

The document

  • Devdocs: Online API documentation required for front-end development
  • Miniprogram: small program API documentation, small program development necessary

icon

  • Iconfont: Very complete SVG vector icon
  • Css. gg: icon of a pure CSS implementation

color

  • Flattastic Pro Color Palette
  • Picular: The Google of color matching

layout

  • css grid generator:gridGrid generator

animation

  • Animista: An encyclopedia of ready-made animations
  • Perspective Playground: 3D transform visualization
  • Cubic-bezier.com: Slow function visualization

graphics

  • fancy-border-radius: Automatically generatedborder-radiusgraphics
  • clippy: Automatically generatedclip-pathgraphics

shadow

  • shadows:box-shadowSubmissive shadow generator

The gradient

  • Webgradients: A collection of gradients
  • Gradientfinder: Extracts gradientness from images

SVG

  • Url-encoder for SVG: Used to create inline SVG
  • SVG Filters: Used to create SVG Filters
  • SVG Gradient Map Filter: Used to create an SVG Filter for an image
  • SVGOMG: Optimizes SVG size
  • SVG Path Editor: Visually edit SVG paths

A filter

  • Filter Generator: Generates the corresponding Filter effect based on the color

other

  • Three. js Editor: an online editor for three.js
  • Loremipsum: text placeholder
  • Picsum: image placeholder
  • Carbon: Turns snippets of code into beautiful images for sharing
  • Onlineimagetool: batch compress images
  • Squoosh: lossless compression of images
  • Waifu2x: Lossless image enlargement
  • Remove. bg: Removes the background of the picture
  • Json2ts: Converts JSON to TS declaration files
  • QRBTF: Art QR code generation
  • Undraw: Fine vector illustration
  • Blobs: BloB pattern generation
  • Which key: Queries the number corresponding to the keyboard key
  • Font-face Generator: Converts font files into code
  • Css-tricks: Many useful CSS tools
  • Caniuse: compatibility query