As a front-end engineer, I have encountered and collected many useful tools in the past few years, so I would like to share them with you.

  • Browser plug-in
  • System application
  • Online tools

Ps: Actually, there are some good tools or projects on Github, I will catch up when I have time. (Actually, I’m too lazy to do it

Browser plug-in

I use Chrome, Firefox users please search.

Google Access Assistant

You know, you can’t access the Chrome App Store without it. To download the plugin, go to the Chrome App Store. Endless loop?? That’s impossible. I found something that looks like the website. PS: Thanks to Big Brother Gao, he told me about this plugin.

Petal page collection tool

I used it a long time ago, so you can hide beautiful pictures on Petal.com. But I only use it as a screenshot tool

Baidu Capsule

Do not want to see baidu search putian hospitals and other garbage advertising how to do? With this. However, the principle of a software should be every time to clear cookies, prevent Baidu to record your search records, so every time you use Baidu products need to login. But it doesn’t matter, I generally do not use Baidu products.

Advertising Terminator [highly recommended]

Essential software, do not want to see those at sideshow, sad disease crazy, unsightly advertising how to do? With this.

Webtime Tracker

A plugin for logging time spent on a website. Check mine.

OneTab

The computer can free up some memory when it runs low.

Octotree [Highly recommended]

Development essential, look at GitHub projects without layer by layer into the point.

Evernote Web Clipper

Evernote clipping, evernote users can try, one key favorites web page.

Dark Reader

Our knowledge sharing platform is so difficult to use, dare not speak and want to hack it? With this.

Axure RP Extension for Chrome

Axure exports interactive accessible prototype diagrams that cannot be opened in a browser, which is a helper tool.

Google translate

Best use of web page translation software, English residue necessary.

tip

You can close the plugin in the extension, or right-click and choose To hide it from Chrome.

System application

Evernote: Cross-platform note-taking app Kindle: cross-platform ebook reading XMind: Mind Mapping

PxCook

PSD query tool, design UI map without annotation, the front end can directly use the tool to obtain the page element size, text information, color color value and even CSS style code.

PicGo

Focus on the following bed tool. Due to the particularity of Markdown, pictures and other files cannot be directly added into the document, so pictures can only be added in the form of external links. I have used many map bed tools before, each with its own advantages and disadvantages, but the one I found today is super easy to use. All the pictures in this article are using this tool. When using the best with a reliable CND service website, I choose seven cattle, free enough.

Online tools

Online applications.

  • Google translation
  • ECMAScript browser support
  • Can I use, browser compatibility query
  • Online code tool
  • Making ICO ICONS
  • Browser Market Share
  • A tool for drawing flow charts

In JS= =with= = =The difference between

For reference only, use === as much as possible.

The compressed image

Long time ago favorite tool, if there are no gradients or shadows in the image, compression efficiency is excellent.

Image generation tool

Mock friends, which control url parameters to generate images of different sizes.

HTTP request assistance tool

Like a mock, you configure the HTTP response body yourself and get the UTL for ajax requests.

Homebrew

MacOS software package management tool, command line interface. Some software does not provide the version of macOS system, you can use this tool to install.

Emoje at git commit time

Like the picture below, very geeky.

MSDN

Six or seven years old website, download Windows or Office software used.

Open source software domestic mirror

A lot of software is on foreign servers, so it’s slow to download. There are many mirror websites in China, you can search by yourself. Here is a summary article.

The command line

For those of you who don’t know, There are PowerShell command-line tools for Windows, as well as Treminal, which was just released a few days ago. Try it yourself. I haven’t used it before. ^_^

iconfont

Save what’s important for last.

Consider a scenario where a user replaces an icon in the system. The previous process was:

  1. What kind of icon did the customer tell you needed
  2. You transfer the requirement to the design
  3. The designer understands the requirements and gives you an icon
  4. You put it in the system and wait for the user to confirm. If it doesn’t pass, start from Step 2

You can see a lot of problems: the design gets a “secondary” requirement and if the user doesn’t pass it, the design may not be on the project and will have to wait a long time.

For such small needs, you can find some ICONS on this website and adjust them around the user. After optimizing the process, it looks like this:

  1. What kind of icon did the customer tell you needed
  2. You understand the requirements, find an icon from the website and put it into the system
  3. You put it in the system and wait for the user to confirm. If it does not pass, you will know the user’s satisfaction through CSS control adjustment on site.

We’ve probably used all of the above in our development team, but here’s one you probably haven’t.

Consider a scenario: after designing a UI document, it is necessary to cut out all the images in the PSD. Several images may be cut out according to different resolutions and different states.

  • user-icon.png
  • user-icon-hover.png
  • user-icon_x2.png
  • user-icon-hover_x2.png
  • .

A better approach (which I’ve already used in a production environment, so you can rest assured) is:

  1. Create a project on the site (pictured)
  2. Set the front-end add as the project collaborator
  3. After designing the UI draft, find the corresponding icon from the website (you can upload it yourself if you can’t find it) and add it into the project
  4. The front end can be seen from the website with ICONS added by the designer (you can also add your own)
  5. The front end can generate an online icon library as required, or download it locally and add it to the project

Do you have any good tools?

Let us know in the comments section.