We sometimes need to display a shorter version of a text/content so that it fits to the layout as expected (like the "read more" links shown for truncated content).

Cutter.js is a JavaScript class that allows us to accomplish this on the client-side without losing markup.

The class cuts the content to the number of requested words and if needed puts a link to open the full content again and, if wanted, places a link to open the full content.

It is a standalone + lightweight resource (1.5kb gzipped) and works cross-browser.

Box of Bundles is a fresh website featuring a set of creative design resources that are available for free.

The bundle contains items like various vector UI elements, icons, templates (website, mobile, e-mail), CSS3 buttons and more.

They are designed by different designers around the world (you can submit new items for the next month's bundle as well) and free to be used in personal and commercial projects.

Today, the development toolkit of many web designers/developers consist of the features that come with HTML5, CSS3 and probably jQuery.

The talented team at IconShock has created a set of web technologies icons exclusively for WRD readers with items from this kit and Ruby on Rails (considering the ease it provides).

There are 24 icons which come in transparent PNG and completely layered AI files.

Hope that they can add a visual beauty to your designs when referring to these technologies and they are free to be used in both personal + commercial projects (icons can not be redistributed without permission).

Designer: Iconshock

Icons are created by the guys of Iconshock, with more than 350 icon sets on its stock, the same designers of the fantastic free bundles for WP lovers behind WordPressThemeShock and the design blog WebDesignShock.

For anyone with design and HTML/CSS development expertise, creating a website from scratch is all about creativity as, usually, there is no technology to get stuck at.

However, for designers (and non-designers) without HTML/CSS experience, converting a design into a fully-functional website is pretty hard.

IM-Creator is a drag 'n' drop website creator that eases the process of building a HTML website so easy. And, they are giving away 3 "lifetime" licenses to WRD readers.

The application has a set of ready-to-use and stylish templates to choose from where they can be used as a base and customized with custom images + content just by selecting /editing each item.

Another option is to start with a blank page which is the way to go if you have a JPG/PNG mockup and want to slice + position each item accordingly.

Here are some of the templates offered (click each to preview):

There are lots of elements that can be inserted into web pages like images, videos, image galleries, slideshows or contact forms.

Also, various widgets can be instantly integrated including Twitter feeds, Google Maps, SoundCloud, Tumblr blogs and more.

If you are not a web designer and/or prejudiced on web-based website creators, give IM-Creator a chance and you'll probably be impressed with the simplicity.

How to join the giveaway?

In order to win one of the "lifetime" licenses (normally priced: $95/annual), just comment to this post and winners will be selected with the query below randomly on 21 Feb 2012 (1 week later).

SELECT * FROM wp_comments WHERE comment_post_id=2829 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to everyone.

The winners

Here are the lucky WRD readers:

• Ali DHIBI (comment #517562)
• chris (comment #516825)
• Paul Becker (comment #517111)

Congratulations and thanks to everyone for joining.

If you have (or somehow controlling) multiple websites built with WordPress, than you know the difficulty of managing all of them.

WordPress releases a new version regularly and websites built with it needs to be up-to-date to stay secure, the same goes with the plugins and the need to remember all passwords.

ManageWP is a hosted service that offers a platform for managing any number of WordPress blogs under the same admin interface.

About the giveaway: They are giving away 2 annual Business accounts to WRD readers and details can be found at the bottom of the post.

Besides the ability to switch between websites with a click, the service can bulk update the sites with the new WordPress versions, plugins and themes.

Also, it is possible to install new plugins or themes to multiple websites at the same time.

There is a good chance that each website gets a hosting switch every few years which is a time-consuming process. What if we need to move many WordPress blogs to this new account? Ouch! But, as you guess, ManageWP can also handle this; it can clone a website from one domain to another.

One of the best features is its integrated backup. You can schedule backups to make sure that all your websites have recent copies when needed. It also monitors the uptime of your websites via the integration with the free uptime monitoring service: Uptime Robot.

The service brings a similar beauty for the publishing part: you can post an entry to multiple sites, manage the blogroll links or add users, all in bulk.

ManageWP has a free plan that allow controlling up to 3 websites and bigger packages exist (which would be a good fit for anyone/web agency with many WP websites).

How to join the giveaway?

2 annual Business accounts are being given away and, in order to get a chance to win one:

• suggest a new feature for ManageWP in the comments
  

and winners will be selected by ManageWP from the 2 best entries on 17 Feb 2012 (8 days later).

Good luck to all.

The winners

ManageWP has selected the winners and here they are:

• Alejandro Carrillo – for "a custom dashboard widget in all the sites within my ManageWP account,
  which I can update with whatever html content that I want" (comment #514381)
• Erika – for "pdf to download to help with getting started" (comment #513396)

Congratulations and thanks to everyone for joining.

bgStretcher is a jQuery plugin that proportionally resizes the background-image to fill the entire viewport.

It can be used with a single image just for the resizing feature or multiple images as a slideshow.

The slideshow can be browsed with pagination and prev-next buttons besides the autoplay and there are multiple transition types offered.

Further customization is possible by defining the slideshow speed, delay between each item and sequence mode (in an order or randomly).

Also, methods exist for playing and pausing it from any custom events.

As people who are designing/developing and/or managing web projects, we usually pay a lot of importance to metrics and their trends -website statistics, Twitter follower numbers, the number of sales of a product and so- to better analyze if things are performing as expected.

All these data are usually behind different applications/interfaces; Google Analytics keeps the stats, the number of comments are in the WordPress admin, leads can be viewed from SalesForce or invoices are in Freshbooks. And, there can be some others like the data in custom apps.

Logging into each of them to get a snapshot of everything usually takes a lot of time. And, this is what Cyfe is about.

Cyfe is a hosted dashboard with a simple and good-looking interface that allows us to view any data from a single place.

It has a pretty good number of ready-to-use widgets that can pull data from popular applications like Google products (Analytics, Adsense, FeedBurner, Gmail), MailChimp, Twitter, Facebook, SeoMOZ, Alexa, Zendesk, SalesForce and more.

Also, it has support for data from custom sources including a CSV file (hosted in a URL or uploaded directly), HTML, image or RSS.

Such an ability is so good as we can easily auto-generate CSV files with the data to be visualized using the scripting language we prefer (like "sales from the project x" and "new sign-ups from the project y") and let Cyfe grab + display the data. Or, we can provide the URL of the chart image generated in our own web application and it is displayed like an iframe.

The application has multiple charting options (line, area, bar, pie) so it is possible to view each custom metric with the one that fits the best.

Cyfe is not a single dashboard app and any number of tabs can be created which is handy for creating groups and collecting the widgets of each project under its own dashboard  which is good if you are viewing a pretty high number of widgets.

Widgets can be positioned by drag 'n' drops just like iGoogle to create the order we want. And, we can upload our own logo for a more custom look.

Also, the application can be reached from any device (desktop, tablet, mobile) and things will work smoothly.

It comes with a free plan that includes 5 widgets that will be enough for many and plans with more widgets exist.

IconShock, the icon design company behind many popular icon sets, is now sharing a huge set for Android designers/developers.

Android Icons Set consists of 15,000 items styled with the Android's design guidelines and probably the most complete set for the platform.

There are 600 completely unique items while the rest are the addons (like "add file, edit file, delete file") which is great to have the necessary action icons when needed.

It is free to be used in personal projects (free version includes 3 sizes: 24*24px, 32*32px, 48*48px).

P.S. They also have a similar iPhone icons set.

WordPress, as most of us experience, is so strong and flexible. It is hard to think of a website that can't be brought to life with it.

Besides this power, it is still simple which is great. This simplicity sometimes ends up in some non-existing features which would actually be nice if they were available when needed -seems like the definition of plugins: )-.

As a designer/developer who spend lots of time with WordPress, I want to share a list of plugins which I use for almost every WordPress setup and they end up saving lots of time.

First of all, of course, I'll begin with a shameless self-promotion. The first plugin (Reporteur) is developed by me but I assure you that it fits the title of this post perfectly (else, I'm sure that the editor would probably remove it without even me knowing).

Oh, I'm also going to include the author's names, especially for avoiding mix-ups. There are many plugins so closely named but so far apart on features, usefulness and quality.

Reporteur

It is a simple Google Analytics reporting tool.

If you want to get your information right in the WordPress admin instead of going to the Google Analytics website, this is for you.

The plugin gives a basic information about your website (which were useful enough for my family and friends who forced and tortured me to create this plugin).
Author: stildv

Google Analytics for WordPress

This is a stable Google Analytics code including plugin.

We all know that, things work by just copy-pasting the Analytics code to the footer. Or was it better to the header? And how do we track outgoing link clicks or downloads?

Well, with this plugin, you don't need to worry about all that.
Author: Joost de Valk

Read the rest of this entry »

Mimicking the interactions offline is always popular in the world of computers.

Page-flips are one of the most popular ones of them in web design. They are implemented very successfully in Flash, many websites, documents, magazines are being created/published each day.

With the capabilities of new web technologies, we can also expect them to be accomplished using only HTML, CSS and JavaScript (remember "20 Things I Learned"? It is also open source).

There are several easy-to-use jQuery plugins that offer a good page-flip experience and help creating book-like interfaces. Here they are:

Turn.js

A jQuery plugin that has lovely and smooth page flip transitions.

The first page acts as the cover and the rest can be browsed by simply turning the pages from any desired corner.

Turn.js is only 15kb, works on mobile & tablet browsers as well and makes use hardware acceleration.

jPageFlip

jPageFlip is a highly customizable jQuery plugin for book-like interfaces.

It can -optionally- flip pages on mouse clicks and has support for transparent + semi-transparent image files.

P.S. The plugin performs better on WebKit browsers.

Read the rest of this entry »