This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together. In the Analects of Confucius, Duke Ling of Wei, Zigong asked for benevolence. Confucius said that to do his work well, he must sharpen his tools first. In daily development or note-writing, we often use gadgets to help us make quick decisions, such as capturing and formatting JSON, quickly validating a re as expected, testing kit returns (LoDash), surveying third-party package NPM usage, and so on. These are scenarios where we just want to get the results we want quickly and don’t want to take too much time. Today, I will share the common tools of favorites with the wave, hoping to help those in need.

Tool post

1.RegexrA quick tool to help you analyze and edit regular expressions

2,SemverDependency package version management

NPM Semver version range Calculator, version format: major version number. Second version number. Revision number. Quick check for version confirmation during package delivery and installation.

3,BundlephobiaView size analysis of packages like NPM and installation packages

Bundlephobia lets you understand the performance cost ofnpm install ing a new npm package before it becomes a part of your bundle. Analyze size, compositions and exports

  • Analyze package size by uploading package.json

  • Query a single package or similar package

4,AST ExplorerAst syntax tree, the front end is a good tool for compiling plug-ins

5,RunkitIt is convenient to run the Node package online and quickly verify some tool return values, such aslodash

6,Rraw.ioCharting is a free online charting tool that can be used to edit workflow, BPM, ORG Charts, UML, ER charts, Network Topologies, etc.

7,ExcalidrawOnline drawing handwriting style has Chinese font 👇

ajietextd.github.io/

Eight,CarbonBeautiful code generation image tool (doesn’t look familiar)

9,Npm TrendsNPM multi-packet comparison trend

9.1,Google Trends

9.2,Baidu index

10,StatcounterBrowser, resolution, version and other statistics support bar line map view, then do compatibility and PM pull sharp device

11,PlaceholderImage placeholder service text size and color can be defined by URL

Via.placeholder.com/300.png/09f… Show as follows:

12,BrowseHappyPrompt the user to download if the browser version is low

13,LogomakrAs long as you dare to think of a minute to help you implement a custom Logo

14,RisingStarsThe front end is changing so fast, let’s look at the community NPM pack activity, ZX is the first surprise.

15,NpmsNPM package multiple latitude analysis comprehensive scoring, pick which one at a glance

16,WxeditorMake your own SVG image and follow the waveThe front show

17,JsonJson packet capture analysis or mock is still convenient

18,Ali vector iconNotes, powerpoint, etc

19,StateofjsFor front-end state analysis, see react and VUE salary distributions

20,ScreensizViewport size of mobile phone and tablet computer equipment, mobile terminal is commonly used to check.

21,CaniuseProperty compatible, do old project compatible browser will use

22,UnicodeQuick lookup of a character corresponding to include Unicode

23,SchemastoreMany jsonSchemas are aggregated, such as package.json

Json.schemastore.org/package.jso…

24,PatorjkGenerate ASCII character paintings online

25,SwaggerAllow interface descriptions to be visualized quickly

26,QuicktypeOne-click conversion of JSON data to the corresponding programming language is convenient for native mock test environment data

Learning article

1.How does the browser workThe front end is a must-see

2,Learning roadmapBoth the front and back ends

3,FreecodecampFree learning site especially data visualization etc

4,Javascript InfoJs learn a good website

5,Clean JsJs code concise way

6,ChecklistFront-end pre-development checklist

7,React TsReact and TS combine practices

Eight,TypescriptTs tutorial

9,ZooTeam Government cloud teamJs basic algorithm