I develop 18 commonly used efficiency tools

The following are the tools commonly used by Shanyue in development, all of which are collected in my weekly. In addition, I am also developing more developer treasure chest that is suitable for me. Readers can provide more comments.

Shanyue Weekly (Github: shfshanyue/weekly), weekly records about front-end open source tools, excellent articles, major library version release records, etc. Published every Monday, the subscription platform is as follows, welcome to subscribe.

• Subscription website: https://weekly.shanyue.tech
• Subscribe to Github: shfshanyue/weekly

1, Web Developer browser plug-in

A browser plug-in for web developers, which can do more in-depth operations for the website, such as

1. Ban Javascript
2. Prohibit CSS
3. Show all pictures on the page
4. ...

2, Emmet: Web Developer's

Efficient front-end development tool, you can quickly write and modify HTML/CSS in Vue/React, and supports multiple editors, such as the popular VSCode.

Its biggest function is to convert the CSS style abbreviation into HTML. For example, input #page>(#header>ul#nav>li*4>a)+(#content>h1{Hello world}+p)+#footer and press the Tab key to automatically generate the following HTML

<div id="page">
  <div id="header">
    <ul id="nav">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div>
  <div id="content">
    <h1>Hello world</h1>
    <p></p>
  </div>
  <div id="footer"></div>
</div>

The expanded abbreviation above is called Expand Abbreviation . In addition, it has more detailed functions, which are called Action

1. Remove the outermost label
2. Package selected label
3. ...

• repo: emmetio/emmet
• npm: emmet

3、 URL-encoder for SVG

Convert SVG to DataURI and embed it in CSS style

4、 Svg Viewer

Visualize SVG, and support image compression, conversion to React/RN components, conversion to png format images, etc.

5, svg-term-cli: Record terminal operations as SVG animation

A software based on asciinema, written in javascript. Record terminal actions as svg animation

$ cat demo.cast | svg-term > demo.svg

• repo: marionebl/svg-term-cli
• npm: svg-term-cli

6, asciinema: terminal motion recording software

A tool software written in python that can record animations of terminal operation commands and can be played online. With the help of third-party tools, it can be converted into gif animation or svg animation.

Use the following two lines of commands to quickly start recording the terminal.

$ brew install asciinema

$ asciinema rec

• repo: asciinema/asciinema

7, Prettier Playground: Any language code format

Prettier is an excellent code formatting tool

8, Chrome Platform Status: Overview of the new features of the Chrome release

List each of the new features of Chrome, the current stable version and the release date of the next version, etc.

9, cssffects: A variety of super practical CSS animations

Collect a variety of CSS animations, most of which are various hover effects, loading animations, etc., implemented in pure CSS. Collection for the occasional need when designing a website independently.

• repo: emilkowalski/css-effects-snippets

10、 SVG Wave Generator

Randomly generate a wave SVG, which can adjust the degree of jaggedness and twists, etc., and can be saved as SVG/PNG/JPG

11, Explain Shell: Illustrates the interpretation of each parameter of any command line

It can be called the best auxiliary artifact for learning and writing shells. Entering any linux command will point out the interpretation of each parameter one by one. PIPE nested and complex commands can also be parsed.

12, Browser Logos: Browser Logo with high resolution resolution

This is a Github repository, you can directly quote the address to find the logo of any browser with high resolution.

If it is slow to quote Github address, you can try CDN

13, User Agents: Everything about UA

Has a large number of UA databases and related functions

• Get UA on any platform (Mac/Windows/Android)
• Get any Spider/Crawer UA (Baidu/Google/Bing)
• Randomly generate UA
• Resolvable UA

14, risingstars: 2020 Javascript star project

In 2021, the most popular frameworks and peripheral products in each JS ecosystem, such as the React ecosystem, Vue ecosystem, GraphQL ecosystem, build tool ecosystem, etc.

15, Lorem Picsum: A random picture of a specified size API

https://picsum.photos/200/200 will randomly take a picture of the specified size from Unsplash

• repo: DMarby/picsum-photos

16, bestofjs: Discover the best framework and library for Javascript

Here are the most popular libraries in JS ecology, refreshed and recommended in real time, and can be subscribed every week

• repo: ritz078/transform

17, TableConvert: Regarding the two-way conversion of tables and arbitrary formats

Supports conversion between Excel, URL, HTML, Markdown, CSV, JSON, LaTeX, SQL, MediaWiki and other arbitrary formats

18, transform: arbitrary format conversion of programming language

Support various code conversion tools, SVG, JSON, TS, GraphQL, CSS, SQL, as long as you can think of it here. JSON can be converted into more than a dozen code formats.

• repo: ritz078/transform