One of the most important responsibilities of front-end developers is to convert UI drawings into actual usable pages. The degree of restoration of the renderings determines the satisfaction of UI and PM to a large extent

Under normal circumstances, after getting the design draft, lazy point may directly look at the software open, naked eye distance is open, responsible point will open PS or more formal Photoshop, trying to be accurate to PX, these two methods have advantages and disadvantages, the former degree of reduction probability is worrying, the latter time consumption, can blind eyes, In the end are not necessarily able to pass the designer’s pixel eye

I reached, just the enthusiasm and good at range to the naked eye, as long as it’s not hard to die at pixel level difference, so completely enough for a job, but it is the unforeseen, the company’s design department has recently stepped up to the design draft reduction degree of delicate, cause I am with the frequency of the oscillating between designer line pull litre, gradually exhausted, after carefully, not a long-term solution, He decided to tackle the problem at its root

uipx-chrome-plugin

Naked eye ranging and PS measurement have advantages and disadvantages, it is best to abandon the dregs and combine the advantages of the two together, the advantage of naked eye ranging is short and fast, disadvantages is not accurate enough, PS ranging is accurate enough, the disadvantage is too slow, hit the schedule of demand is too late, so need to do both fast and accurate

So, wouldn’t that solve the above problem if we moved the manuscript from Photoshop to the page under development, plus some necessary auxiliary capabilities, such as ranging?

Under normal circumstances, whether the development of THE PC side of the page or the mobile side of the page, we are used to debugging in the PC browser, since it is a browser, then I first think of the browser extension plug-in

This plugin should have the following features:

  • The difference in the location and size of elements between a measurement design and a page restoration, similar toPSThe ruler is easy to adjust
  • The first is to facilitate the comparison of differences, and the second is for a pixel, after its inverse and set the transparency as0.5After the pixels are mixed and overlapped, the synthesized color will turn gray, which is a very intuitive factor to judge whether the pixels are the same
  • Diaphaneity adjustment is a convenient contrast difference, the second is auxiliary reverse phase
  • Drag and drop UI design draft is still easy to compare differences
  • Position tweaks complement the drag-and-drop UI design
  • For example, for a piece of design, if its background is white, then in contrast, the white background can be completely transparent processing, only exposing the main element, eliminate the interference of non-essential elements

So, you can start with the renderings:

Once you have the requirements, once you have the design, the implementation is simple

This Chrome extension is divided into three parts

popup

The page that appears when you click on the extension icon in the upper right corner of your browser

This page is a presentation layer, integrating the above mentioned function points and responding to user actions, mainly page rendering and event registration

content

Code injected into the actual development page in response to the popup action

Canvas is the most convenient way for the front end to operate pictures. By drawing the design draft on canvas, the function points mentioned above can be easily realized

This script will append a Canvas element to the page, which will carry the design and implement function points such as inversion and transparency

background

This script is used as a data cache, because popup has a very short life cycle, it is generated when it is displayed and destroyed when it is destroyed. Variable values cannot be stored for a long time, so they need to be stored indirectly through this script

Plug-in operation is to rely on these three parts of mutual communication to complete, the core code is very simple, I will not say more, interested in their own look, source address

uipx-webpack-plugin

Because uIPx-Chrome-Plugin is a Chrome extension plug-in, it cannot be used in mobile terminal, which is almost all the scenarios I develop now, so it is a little inconvenient. Although generally speaking, mobile terminal development is also completed under the simulation of Chrome mobile devices. Uipx-chrome-plugin is a webpack plugin, which can be directly expressed by reference to vconsole-webpack-plugin

The principle is basically the same as uIPx-Chrome-Plugin, but the platform API is different. In addition, this plugin is completely injected through JS, so it can not write HTML directly like uIPx-Chrome-plugin, but this is very easy to solve

The plugin has been released to NPM and can be downloaded directly. The source code has also been uploaded to Github for those interested

summary

The two plug-in code level is easy, but it also can solve practical problems, the wheels can be made in building a, in addition, the wheel code peace business code difference is larger, more can reflect a person’s coding levels and styles, without the shackles of the business and when writing code to have bigger play space, can yet be regarded as introspection what as a way to