Manually screened commercial gallery provocative map + response web development artifact

Today's two cool stations, one is a special emphasis on the story behind the picture can be a commercial library "provocative map", the other is able to help developers test different devices, the Web page content adaptation is the correct expansion of Plug-ins, a quality win, a practical proud, to collect!

It's a provocative picture.

The provocative pictures are a free commercial gallery produced by the team of the provocative bears, and their home also has a product called " Provocative repair Map ", we have introduced before, repair the picture than the ordinary mobile phone software professional, operating than professional revision software simple, but also a few domestic support curve function of the mobile phone app, as for the web version of the powerful, here is not much to repeat, directly to see the new gallery of their launch.

The introduction of the website has two bright spots, one is all the pictures using COO agreement, no matter who can download the original image of free commercial, the other is the artificial selection mechanism, now most of the free gallery pictures of the quality is uneven, the introduction of this function is really attractive, and according to small, The team also has the late master @ His mountain eye sits, the quality can pack the ticket.

The site is now open, only the essence of the January 2016 image, we can slide the mouse to see:

The bottom left of the picture is the author's message, click to go directly to the photographer's microblog, in the middle of the text part of the story behind the picture, which is different from the other galleries of the most features, you can see the photographer's mood/shooting process/reason/thinking and so on, very suitable for photography enthusiasts.

The lower left is the shooting equipment/location/and large map links, here is a small suggestion, if can be like Lofter, plus the aperture size of the filming of God Horse, will not let photography enthusiasts learn more?

If you fancy a picture, click on "single link" can see the big picture, the picture right below there are download the original image of the button:

Due to the new opening of the site soon, the number of pictures is limited, so the team is also constantly soliciting new works, if you are interested, enter the site and click "Submit Pictures" can be uploaded.

You can also click on the "Mail subscription", and each month you can receive a manual selection of high-quality picture material.

Responsive Web Design Tester

(Google browser to take a ladder to download)

Today's development web site not only to take into account the different browsers, but also to meet in the computer, tablets and mobile devices all sizes of the screen can be correctly displayed, the most commonly used technology is responsive web design (responsive web designs, RWD). Technical details I do not introduce more, but I would like to recommend a very practical development tool, so that you can easily simulate the browser, switch different types of equipment, to help test the Adaptive Web page design is able to correctly display content.

Responsive Web Design Tester is a browser extension that supports Google Chrome, Firefox, and Opera, and is easy to use, and can quickly switch to the type of action device to simulate, including Android phones, Nexu The S tablet computer, BlackBerry, Kindle Fire, IPad and IPhone can also be customized to customize the resolution of the device to be tested according to the developer's requirements.

Because we can't get so many devices. The actual test page display situation, by responsive Web design Tester will be able to simulate the browser into a variety of action device resolution, the actual test page display effect.

I used to use the User-agent switcher function to customize the browser user Agent, but this method is not so useful, but also often Chelai cut is very inconvenient, using the responsive Web design Tester thoroughly solve the problem of development , allowing developers to make changes to the Web page more handy.

Step 1

After the browser installs responsive Web design Tester, click the button to display the main function of the tool, and from "select device" Select the type of device name to test the emulation.

You can see that the responsive Web design Tester preset offers about 24 types of devices, including familiar HTC one, Nexus 7, BlackBerry, Kindle Fire, ipad, ipad Pro, ipad Mini and the IPhone.

Note that each device has two options, namely, a banner (landscape) and an upright (portrait). It also simulates the different resolution of a mobile or tablet computer when it is upright or sideways.

Step 2

Try to choose the Upright "iphone 6 (s) to simulate browsing the style of the optimal network, responsive WEB design Tester will open a window in the browser to the appropriate size.

In particular, in the test I found that the page was loaded correctly into the action version of the page, which also means that the responsive Web design Tester not only adjust the window resolution, but also the User Agent has been modified!

Next I use "ipad" to simulate the effect of browsing the web, this time using a banner device, you can see that the page can still be displayed correctly within the resolution range, which is the aforementioned use of the "responsive web Design" advantage.

Step 3

Of course, the test environment may vary according to each individual's situation, and the built-in action device type does not necessarily match every developer. Okay responsive Web design Tester built-in option setting allows us to freely adjust the type and resolution of the device to be emulated and to edit the group to manage more devices, very powerful!

Three reasons to be worth a try:

Support Google Chrome, Firefox, Opera three big browsers

Built-in 24 kinds of tablet computers, mobile devices, free to adjust setting options

In addition to adjusting the resolution, also switch the User Agent to achieve the most correct simulation effect

Category:

• PS Getting Started Tutorial