Category Archives: News

Revamped Readability Rewards Writers [Updated]

Readability, a browser tool which isolates the text on a webpage making it easier to read, has announced it’s moving beyond its humble beginnings to become a “full-fledged reading platform.” Readability will now offer iOS apps and, more importantly, it’s no longer a free tool.

The new Readability will cost you a minimum of $5 a month, with 70 percent of that fee going directly to the writers and publishers whose sites you visit.

Readability and similar tools, like Apple’s Safari 5 web browser have been criticized for cutting into publishers’ bottom line by eliminating online advertisements. The new non-free Readability is at least in part a way to address this concern. As readers, most people want a clean, distraction-free reading experience. At the same time no one wants to deprive their favorite websites of the income necessary to keep the site going. Readability’s new pricing plan is an attempt to find some common ground and keep everyone happy.

Not only does the new Readability give readers an option to hide ads and view a more readable page (which they may well be doing anyway), it provides a new source of income for the site. Even better, that additional revenue comes from the actual content, rather than simply the ads surrounding the content.

Ironically, in testing the new Readability, I realized that most sites I read regularly already have clean designs, nice typography and uncluttered layouts — sites that don’t really need Readability. But the new payment system can help those sites too. Readability’s payment system turns the service into something more than just a reformatting tool — it’s a bit like a roving micropayments system, handing out money to sites you enjoy.

Here’s how it works: The minimum fee is $5 a month, though Readability encourages you to spend more if you can afford it. The money is then split up between articles where you use Readability. Visit only one site and it will get all of your money; visit several dozen and each will see only a few pennies unless you up your monthly payment. You can use the Readability web interface to see where your money is going. It’s like micropayments, but all the transaction details are handled behind the scenes by Readability.

Of course you aren’t just paying the writers and publishers. Thirty percent of your monthly fee money goes to Readability, which has some new browser extensions, web badges, an API and some nice looking (though as-yet-unapproved) iOS apps built around the popular Instapaper.

The Instapaper contribution means that in addition to the “Read Now” button, which gives you a more readable version of the current article, there’s also a new “Read Later” button. Read Later works just like it does in Instapaper, saving the article to your account for when you have more time to read. Unfortunately, right now there’s no way to actually integrate your Instapaper account with Readability.

The “Read Now” and “Read Later” buttons can come from either the Readability browser extension, bookmarklet or from the site itself using a new embedded button (there’s also an API for more sophisticated integration).

Despite the integration tools and new payment system, it’s unlikely most sites will ever get rich from Readability. Of course it’s unlikely most sites are making much from Google Ads either, and it certainly never hurts to have another form of income, even if it is measured in pennies.

[Update: For those worried that Readability is no longer free at all, we should note that you can keep using the bookmarklets and browser extensions without paying for the service.]

View Mode Switch

A layout switch with two viewing modes: grid and list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.

The HTML

<div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-grid">
	<div class="cbp-vm-options">
		<a href="#" class="cbp-vm-icon cbp-vm-grid cbp-vm-selected" data-view="cbp-vm-view-grid">Grid View</a>
		<a href="#" class="cbp-vm-icon cbp-vm-list" data-view="cbp-vm-view-list">List View</a>
	</div>
	<ul>
		<li>
			<a class="cbp-vm-image" href="#"><img src="images/1.png"></a>
			<h3 class="cbp-vm-title">Silver beet</h3>
			<div class="cbp-vm-price">$19.90</div>
			<div class="cbp-vm-details">
				Silver beet shallot wakame tomatillo salsify mung bean beetroot groundnut.
			</div>
			<a class="cbp-vm-icon cbp-vm-add" href="#">Add to cart</a>
		</li>
		<li>
			<!--  ... -->
		</li>
		<!--  ... -->
	</ul>
</div>

The CSS

@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/fontawesome/fontawesome.eot');
	src:url('../fonts/fontawesome/fontawesome.eot?#iefix') format('embedded-opentype'),
		url('../fonts/fontawesome/fontawesome.woff') format('woff'),
		url('../fonts/fontawesome/fontawesome.ttf') format('truetype'),
		url('../fonts/fontawesome/fontawesome.svg#fontawesome') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Main container */
.cbp-vm-switcher {
	padding: 20px;
	border: 3px solid #47a3da;
}

/* options/select wrapper with switch anchors */
.cbp-vm-options {
	text-align: right;
	padding-bottom: 10px;
	border-bottom: 3px solid #47a3da;
}

.cbp-vm-options a {
	display: inline-block;
	width: 40px;
	height: 40px;
	overflow: hidden;
	white-space: nowrap;
	color: #d0d0d0;
	margin: 2px;
}

.cbp-vm-options a:hover,
.cbp-vm-options a.cbp-vm-selected {
	color: #47a3da;
}

.cbp-vm-options a:before {
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 30px;
	text-align: center;
	display: inline-block;
}

/* General style of switch items' list */

.cbp-vm-switcher ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Clear eventual floats */
.cbp-vm-switcher ul:before, 
.cbp-vm-switcher ul:after { 
	content: " "; 
	display: table; 
}

.cbp-vm-switcher ul:after { 
	clear: both; 
}

.cbp-vm-switcher ul li {
	display: block;
	position: relative;
}

.cbp-vm-image {
	display: block;
	margin: 0 auto;
}

.cbp-vm-image img {
	display: inline-block;
	max-width: 100%;
}

.cbp-vm-title {
	margin: 0;
	padding: 0;
}

.cbp-vm-price {
	color: #c0c0c0;
}

.cbp-vm-add {
	color: #fff;
	background: #47a3da;
	padding: 10px 20px;
	border-radius: 2px;
	margin: 20px 0 0;
	display: inline-block;
	transition: background 0.2s;
}

.cbp-vm-add:hover {
	color: #fff;
	background: #02639d;
}

.cbp-vm-add:before {
	margin-right: 5px;
}

/* Common icon styles */
.cbp-vm-icon:before {
	font-family: 'fontawesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.cbp-vm-grid:before {
	content: "\f00a";
}

.cbp-vm-list:before {
	content: "\f00b";
}

.cbp-vm-add:before {
	content: "\f055";
}

/* Individual view mode styles */

/* Large grid view */
.cbp-vm-view-grid ul {
	text-align: center;
}

.cbp-vm-view-grid ul li {
	width: 33%;
	text-align: center;
	padding: 25px;
	margin: 20px 0 0;
	display: inline-block;
	min-height: 420px;
	vertical-align: top;
}

.cbp-vm-view-grid .cbp-vm-title {
	font-size: 2em;
}

.cbp-vm-view-grid .cbp-vm-details {
	max-width: 300px;
	min-height: 70px;
	margin: 0 auto;
} 

.cbp-vm-view-grid .cbp-vm-price {
	margin: 10px 0;
	font-size: 1.5em;
}


/* List view */
.cbp-vm-view-list li {
	padding: 20px 0;
	white-space: nowrap;
}

.cbp-vm-view-list .cbp-vm-image,
.cbp-vm-view-list .cbp-vm-title,
.cbp-vm-view-list .cbp-vm-details,
.cbp-vm-view-list .cbp-vm-price,
.cbp-vm-view-list .cbp-vm-add {
	display: inline-block;
	vertical-align: middle;
}

.cbp-vm-view-list .cbp-vm-image {
	width: 10%;
}

.cbp-vm-view-list .cbp-vm-title {
	font-size: 1.3em;
	padding: 0 10px;
	white-space: normal;
	width: 23%;
}

.cbp-vm-view-list .cbp-vm-price {
	font-size: 1.3em;
	width: 10%;
}

.cbp-vm-view-list .cbp-vm-details {
	width: 40%;
	padding: 0 15px;
	overflow: hidden;
	white-space: normal;
}

.cbp-vm-view-list .cbp-vm-add {
	margin: 0;
}

@media screen and (max-width: 66.7em) {
	.cbp-vm-view-list .cbp-vm-details  {
		width: 30%;
	}
} 

@media screen and (max-width: 57em) {
	.cbp-vm-view-grid ul li {
		width: 49%;
	}
}

@media screen and (max-width: 47.375em) {
	.cbp-vm-view-list .cbp-vm-image {
		width: 20%;
	}

	.cbp-vm-view-list .cbp-vm-title {
		width: auto;
	}

	.cbp-vm-view-list .cbp-vm-details  {
		display: block;
		width: 100%;
		margin: 10px 0;
	}

	.cbp-vm-view-list .cbp-vm-add  {
		margin: 10px;
	}
}

@media screen and (max-width: 40.125em) {
	.cbp-vm-view-grid ul li {
		width: 100%;
	}
}

The JavaScript

/**
 * cbpViewModeSwitch.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
(function() {

	var container = document.getElementById( 'cbp-vm' ),
		optionSwitch = Array.prototype.slice.call( container.querySelectorAll( 'div.cbp-vm-options > a' ) );

	function init() {
		optionSwitch.forEach( function( el, i ) {
			el.addEventListener( 'click', function( ev ) {
				ev.preventDefault();
				_switch( this );
			}, false );
		} );
	}

	function _switch( opt ) {
		// remove other view classes and any any selected option
		optionSwitch.forEach(function(el) { 
			classie.remove( container, el.getAttribute( 'data-view' ) );
			classie.remove( el, 'cbp-vm-selected' );
		});
		// add the view class for this option
		classie.add( container, opt.getAttribute( 'data-view' ) );
		// this option stays selected
		classie.add( opt, 'cbp-vm-selected' );
	}

	init();

})();

6 Useful jQuery 1.4 Resources

Celebrating jQuery 4th birthday, the jQuery team has released jQuery 1.4 today!
The new release is packed with new features, enhancements and performance increases. So, in order to spread jQuery 1.4 awareness, I’ve compiled a list of 6 useful jQuery 1.4 resources to help you get familiar with the new version.

The jQuery team is also accepting donations and giving free jQuery eBooks for those who donate more than $20.

1. jQuery 1.4 Released

This article was made to announce the release of jQuery 1.4 and to celebrate jQuery 4th birthday. Here they’ll give you a quick tour some of the things that have been changed or added and how to use them properly.

2. The 15 New jQuery 1.4 Features you Must Know

Right after the release of jQuery 1.4, net.tutsplus.com has released a tutorial about some of the new features. In this tutorial, James Padolsey goes through 15 new features of jQuery 1,4 and explains how to use every single one of them.

3. How jQuery 1.4 Fixed Live Methods

In this article Neeraj goes through some of the events that were not supported by live methods in jQuery 1.3.2 like blur, focus, mouseenter, mouseleave, change and submit and how they were fixed by the jQuery team for the release of jQuery 1.4.

4. jQuery 1.4 Improves Code and Solves IE Issues

The guys over at dzone.com go through the steps the jQuery team took in order to make its code less complex and the issues jQuery 1.3.2 had with event bubbling in internet explorer.

5. Easing in jQuery 1.4

James Padolsey explains how to make use of the possibility of defining an easier function for each property that you’re animating in jQuery 1.4.

6. jQuery 1.4 API Cheat Sheet

A cheat sheet for the latest release of jQuery that is available in html, pdf and jpeg.

12 Recently Released Free WordPress Themes Released Worth Checking Out

Free WordPress themes are being created and released to public all the time but the fact is that the majority of them are pretty awful. Below I’ve compiled a list of what I consider to be 12 free high quality WordPress themes that you should definitely check out.

1. Smashing Multimedia (demo)
This theme was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This WordPress Theme comes with layered PSD source files, a visual help guide and is fully localized ready for you to translate it into your target language.

Smashing Multimedia

2. Quality Control (demo)
Quality Control is a free theme that turns any WP installation into a help desk ticketing system. It includes everything you’d expect in a ticketing system, including milestones, statuses, categories, and the ability for users to create tickets.

Quality Control

3. Article Directory WordPress Theme (demo)
This theme turns your wordpress installation into an article directory.

Article Directory

4. Businezz  (demo)
Businezz is a simple, corporate-style WP theme from Blog Oh Blog. It includes a number of customization options, including a slideshow, testimonials, and company news in the sidebar.

Businezz

5. Bueno (demo)
Bueno is a clean, minimalistic design created by WooThemes.com. It uses a grid-based design, has integrated banner ad management, widgetized sidebar and 7 different color schemes. Also, the theme is packaged wth a .po file for easy theme integration.

Bueno

6. Ulap Theme (demo)
Ulap is a very minimalistic 4 column theme with static sidebars.

Ulap Theme

7. Manifest (demo)
The goal with Manifest was to create a clean and streamlined theme that focused on the content and not the distractions. It utilizes a single column, 500 pixel wide layout. No sidebars. No widgets.

Manifest

8. Venera (demo)

Venera

9. Irresistible (demo)
For a unique personal blog look and feel, check out the free Irresistible theme from the folks at Woo Themes. It features dedicated spots for your photos, videos, and events lifestream along with your typical blog content. Featuring a nice, clean layout, this theme offers something a bit different from your typical 3-column blog design.

irresistable

10. WPESP Portfolio
WPESP Portfolio is a minimalist theme designed primarily for artists, photographers, designers, and others who need more of a portfolio showcase for their work. It combines the benefits of easy and frequent updates with the layout and user interface conducive to browsing visual works.

WPESP Portfolio

11. Gallery (demo)
The showcase-style WordPress theme Gallery is built on the Thematic framework and was designed specifically for Smashing Magazine readers. Another great theme for a portfolio or other visual showcase, Gallery is a highly flexible and customizable theme that supports widescreen video embedding with the installation of a free plug-in.

Gallery

12. Snapshot (demo)
A great theme for shutterbugs and photoblogs, Snapshot from Woo Themes can also be put to use as a portfolio or design gallery. It also comes with three unique color schemes to choose from as well as options for switching between photoblog and portfolio use.

Snapshot

 

jQuery Image Cropper with Uploader

Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want to show how to integrate the class.upload and uploadify with the Jcrop script.

The idea is that the user uploads a picture,  selects which area to crop and saves it under a specific directory.
The process then creates two images, one 100×100 and a thumbnail of 50×50. You can easly change the script to create the amount of pictures and sizes you need!

The example here is limited to .jpg images and no more than 800 kb. If you want to add more file types and increase the size, you can configure it when you call the uploadify script (index.php):

'fileExt'         : '*.jpg',
'sizeLimit'      : '819200',//max size bytes - 800kb

and in upload.php:

$handle->file_max_size = '819200'; // max size

Note that an usual error is due to the configuration of the “memory_limit” in php.ini. You should increase this value if you expect to upload larger images.