Adding “Readability” to your web site easily.

Daniel Matthews — Thu, 02 Apr 2009 17:50:51 +0000

Reading through twitter I stumbled across this tweet from Clearleft's Jeremy Keith. He mentioned a bookmarklet that adds readability to your site through removing distracting elements and increasing text size.

So i thought...well, why can't i add this bookmarklet to my site?, in case people want to read the articles that I've written without visual distraction. So I did, and you can see it on any of the single post pages on my site.

It's really simple, just go to the Arc90 Readability Bookmarklet Generator and pick your settings, then right click on the bookmarklet, and select "copy link" or "copy link address", then all you have to do is set up a div with the text of your choice in it:

Make This Post More Readable

And set up some style rules in your CSS file for that DIV:

 #readability {
background-image: url(images/readability.png);
background-position: 12px left;
background-repeat: no-repeat;
padding: 5px 5px 5px 24px;
}

And then simply paste in the link from the bookmarklet into the 'href' field of your link:

javascript:(function(){readStyle='style-novel';readSize='size-large';readMargin='margin-medium';_readability_script=document.createElement('SCRIPT');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(_readability_script);_readability_css=document.createElement('LINK');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_css);_readability_print_css=document.createElement('LINK');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);})();

And you're done! don't forget to download the book icon (if you want it) from here, the icon is from the awesome famfamfam silk icon set. Don't forget to adjust the path to it in the CSS I gave you.

And the results speak for themselves, here is an article from the guardian before using readability:

And After:

So there! now your posts are more readable there's no excuse not to be writing top-notch content! Don't forget that you can style this to look like whatever you want! Enjoy...

A Note On Browser Compatibility

I can't see anything on the official website with regard to this, but i'd assume that it's fairly exclusive to modern browsers, and in the case of the IE's you should probably see it working with IE7+, but i can't verify that. But it should be fine in your Safari's, your Firefox's and your google Chrome's, as well as any other browser that is up to date.

jQuery – Javascript For The Rest Of Us

Daniel Matthews — Fri, 27 Feb 2009 16:09:59 +0000

jQuery is a freely available, extremely extensible library of javascript actions, effects and more, and is written with it’s own API of sorts, that means that instead of writing lots and lots of standard javascript code, you can use a shorthand version that reduces the time you spend writing code, but produces some awesome effects.

The best part is that it works tightly with CSS, so if you’re a designer, you already have about 80% of the skills needed to program actions in jQuery!

Why jQuery?

Because it’s probably the most widely used and widely extended javascript library around, a lot of people seem to know it, so support is usually not far away, and in my personal opinion, i think it’s the most intuitive to designers.

Ready?

Ok then, let’s get started...

Firstly, copy the below code into a blank HTML document, this is the basic page structure that we’re going to work with, and a little bit of CSS in the head section to control what certain elements on the page look like.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> jQuery! Show The Paragraph | Manipulate The CSS | Reset Everything

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

You’ll notice there are two paragraph elements, both have a class name “ourParagraph” applied to them, which is why they look the same, but the top one has an ID attribute as well, more about why later.

Remember to save your HTML file in the root folder of your site, and make sure the path to jQuery is correct in the script tag.

Including jQuery on your site...

You’ll need to head over to the jQuery web site and download the latest release, don’t worry too much about the compression options, just use the default setting (production).

Then you’ll need to place jQuery either in the root folder of your site, or in a “js” or “javascript” folder, i’ve chosen the former. You then insert this snippet of code into the top of your page:

Of course, the “src” path will depend on where you chose to store your jQuery file, so adjust accordingly.

(Document).Ready?

The first thing I'm going to go over is using the document ready function. This checks to see if the DOM is loaded and ready to be played with using javascript.

$(document).ready(function() {
/* Anything you want to happen when you load the page goes here */
});

Then inside this little command, you can tell the script to hide any elements with the class of “ourParagraph” (which we have two of). You do this by looking for elements similar to the way you would with CSS:

$(document).ready(function() {
/* Tell it to hide any elements with a class of “ourParagraph” */
$(“.ourParagraph”).hide();
});

Now refresh your page, you should see the two brown-backgrounded paragraphs dissapear, if it works, congratulations, you just wrote some jQuery, if not, make sure that you’ve typed everything correctly (don’t copy and paste or it’ll never stick in your head!), and also check that you’ve included your jQuery library file correctly, and that it’s in the right place.

Now let’s just take a look at what we just did...

// We said “when the page is ready to be manipulated:
$(document).ready(
// Do this:
function () {
// Take this element:
$(“.ourParagraph”)
// And Hide it:
.hide();
// Then we close up the loose ends:
});

There, simple. And this is the style of coding for most of jQuery’s effects and interactions with your page.

Let’s get the paragraph back...

Notice there’s a link element in there with a class of “showParagraph”? well we’re going to use that class to tell jQuery to show the paragraphs again when the link is clicked. So, inside you’re document ready function, insert this code:

$(“.showParagraph”).click(function() {
$(“.ourParagraph”).show();
});

This is simply doing the opposite of our .hide() piece of code, but doing it only when we click the link, not straight away when the document is ready. You should now be able to refresh the page, click the “show the paragraph” link, and they will both pop into view.

Note that the link elements in our page have a value of href=”#”, this is the most basic way of creating a link that doesn’t navigate to any page when clicked on, but can still be used to manipulate things with javascript.

Adjusting CSS, without refreshing the page!

This is one of the coolest features of jQuery is it’s shorthand for adjusting CSS properties of page elements. We’re going to target a specific element in the page, one of the paragraphs, which is why i attached an ID to one of them.

/* when you click the  with the class “manipulateCSS”... */
$(“.manipulateCSS”).click(function() {
/*Target the paragraph with ID “main” and adjust the following CSS properties */
$("#main").css({'background-color' : 'red', 'width' : '200px'});
/* Close up the loose ends */
});

This will adjust one of the paragraphs’ widths and background colour. Refresh your page and see for yourself! You should see the first paragraph element turn red and get thinner.

The possibilities for this interaction are endless! you can adjust where things are on the page, change their typography, and make things bigger, all from one command in jQuery.

Now to reset everything...

Just quickly, as a final piece of functionality to this tutorial, combine the two pieces of code from before to create a simple reset function that will hide the paragraphs and reset the CSS of the manipulated paragraph back to what it was before:

/* When we click the link with class “reset” */
$(".reset").click(function() {
/* Hide the paragraphs */
$(".ourParagraph").hide();
/* Reset the css back to normal */
$(".ourParagraph").css({'background-color' : '#d3b287', 'width' : '500px'});
/* close up the loose ends */
});

There we go, refresh your page and click through the links in order, and you get a nice sequence of events. Hidden, show, manipulate, reset.

So that pretty much wraps up this very basic tutorial on using jQuery, remember to head over to the jQuery website where they have a lot of great tutorials, and you can also read the documentation, in which you’ll find the effects, which are the most fun part of jQuery

So enjoy, and please let me know how I could improve this tutorial, constructive criticism only please.

You can download the files for this tutorial here

Amazing Coder » JavaScript