Connect With WRD
feed via e-mail
feed via e-mail

Google has released a new tool, named Google Web Designer, for creating interactive HTML5 sites and ads.

It is a modern WYSIWYG where you don’t need to dive into the code but use the features to get the output and the tools are mostly design-oriented.

However, the code generated is always there and it can be edited or tweaked and the result is displayed automatically.

Google Web Designer

The tool comes with ready-to-use settings for designing Google-powered ads (DocubleClick, AdMob) that will work on any device.

There are built-in components like 360 or carousel galleries, YouTube video embedding and more.

A timeline exists for animations and anything can be drawn with a pen tool (not limited to shapes).

Google Web Designer is currently in beta status and it is available for both Windows + Mac.

Caching and compression of every kb served has a huge effect on site performance.

Image Cache is a lightweight PHP class that compresses, moves, and caches the image in the user’s browser.

PHP Image Cache

After that, it returns the new source of the image to be printed in an image tag which results in a serious gain on load time.

The class works by simply setting options like the directory, the base URL, etc. and calling a compress function for each image.

Keypress is a JavaScript library for capturing keyboard inputs and manipulating them flexibly.

It can be used for simple cases (like if “x” is pressed, trigger a function) and more advanced scenarios like creating combos of any type.

The library has callbacks for keyup + keydown events, an option exists for capturing the input only once and much more.

Keypress

PACE is a JavaScript library for adding good-looking loading bars to any website with ease.

There are multiple loading effects: YouTube-like, corner indicator, page fill and more.

PACE.js

It requires very less effort; simply insert the JavaScript file with the selected theme and PACE works automatically for page load and ajax requests.

The library doesn’t require any JS frameworks and can, optionally, be tweaked manually.

FireShell is an open source framework for quickly creating a front-end boilerplate and workflows.

It comes with an HTML5 boilerplate (baseline HTML5 features, DNS prefetching, responsive meta) and Sass (with pre-setup files and folders).

FireShell

Grunt.js is used for compiling Sass, concatenating JavaScript files, connecting to a localhost server and live file reloads + injection.

Also, FireShell includes popular libraries like jQuery, Moderniz, HTML5 Shiv and Google Analytics code.

Are you planning to sell something online or, maybe, you are already selling (an icon set, app, theme, book, etc.).

Stand to Make is a free web-based tool that helps calculating potential earnings.

Stand to Make

It has a list of popular payment providers with a comparison of their fees. The app simply asks the user:

  • product price,
  • estimated sales numbers,
  • and payment provider.

After that, it auto-calculates the daily, weekly, monthly and annual earnings (+payment fees).

There are various jQuery-powered solutions for creating tabs quickly and easily.

Tabslet is another alternative for the task and has support for multiple handy features.

jQuery Tabs Plugin - Tabslet

It simply converts an unordered list into a tabbed interface and has callbacks on major events (when the tab is clicked or the tab content is loaded).

Also, tabs can be rotated automatically on given intervals and their content can be displayed with an animation.

Solo is a free project management application that is built with freelancers in mind.

It is self-hosted, created with PHP and uses MySQL for storing the data.

The application has a slick interface where a single user (limited to a user) can create any number of projects + tasks and bind them with clients.

Free Project Management Tool - Solo

Tasks can be easily searched, reordered with drag ‘n’ drops and files can be attached to them.

File uploader is also powerful, it can handle multiple files and has inline file previews.

There is a project calendar to view tasks quickly, an activity stream shows all the footprint of yours and a timer helps you keep track of the time spent for each task/project/client.

When using text over images, if the image is random, the text can become unreadable once the text + image colors are similar.

BackgroundCheck is a small JavaScript library for preventing such issues by auto-changing the style of the element to a darker or lighter one.

BackgroundCheck

Once an element overlaps an image, it adds  .background--dark or .background--light classes to it. And, creating the related styles for each class would be enough.

It is possible to limit the functionality to only selected images, define the dark/light threshold and more.

There are lots of possible design scenarios for a WordPress theme: “how a post will look with a featured image or embedded tweet”, “will lists with x depth fit well”.. and more.

WP Test is a free-to-use test data for WordPress that can be installed to find out “how the theme will behave with different content types”.

WP Test

The data is available as XML (+ the images) and it can be imported to a “test installation” with the help of a plugin.

After that, we can simply see the tests as posts and decide if things are ok or not.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com