Fresh Resources for Web Designers and Developers (November 2013)
This series has completed a full run of 12 months thanks to your support. So far, you know the drill, but if you aren’t familiar with this series, we feature great resources that help make designers and developers with their work. Do check out our earlier ones here if you haven’t already.
For this November 2013 round, we’re looking at tools that let you embed images into CSS code, implement shortcut keys to your website, name your PSD layers in batches, and let you check your sites on multiple devices.
Onward to the tools!
Daturi
Daturi is no longer in service.
We can attach images in CSS using background property and specify the URL that points to the image. On some occasions, it is better to embed the image in CSS, which can be done by converting the image into Base64 code. Daturi allows you to do so quickly. Simply drag your image on the website and hit the Convert to Base64 Code button.
KeyPress
Have you ever wanted to add keyboard shortcuts or key combos to your website? Take Facebook as an example; hit L to like or unlike, ? to search, 1 to go to the homepage. If you want to implement a similar idea onto your website, you can use Keypress, a JavaScript library for capturing keyboard input.
GhostLab
Today, building websites can be a real challenge as there are too many devices with different dimensions and requirements to cater to. Testing it on as many devices as possible is a real pain. Ghostlab is a Mac app you can use to test your website synchronously on multiple mobile devices, phones or tablets. When you scroll, click, or reload the page, it will reflect on other connected devices as well.
RulersGuide
RulerGuides is a JavaScript library to build a ruler on a website and add guidelines to it. It is similar to Photoshop, where we can create guidelines by clicking on the ruler and dragging it anywhere on the canvas. It also provides some hotkeys for toggling the rulers and saving or clearing the guides. Check out the demo for an inside look.
Group Layer Renaming
According to Photoshop Etiquette, you must have a name for every layer in your PSDs. Unnamed layers can drive a designer insane. But, having to rename piles of layers is also a tedious job. So, if this is something you frequently do, you can utilize this Photoshop script that allows naming PSD layers in groups.
GenerateWP
GenerateWP is a web tool for generating WordPress API with the latest standard. There are 17 APIs that we can create with this tool, including Taxonomy, Post Type, Post Status, Shortcode, and Sidebar.
