{Carrer web log}

HTML5 Mini Template

Wednesday, August 25, 2010 { 3 Comments }

Three interesting projects emerged this month.

Chris Coyier called them :

Papa bear: HTML5 Boilerplate
Mama bear: HTML5 Reset
Baby bear: HTML5 site template

There are HTML5 starting point templates. The main differences are what external libraries they include.

My approach is to start with less stuff and then gradually upgrade.

So inspired by Papa, Mama and Baby Bear I created HTML5 Mini Template (Mama Bear is pregnant):

It uses:

• CSS Mini Reset


• Bulletproof CSS3 media queries


• Hartija – CSS Print Framework


• All project is about 4 kb.

So you have freedom to put your favorite JS library, your fonts and everything else. This project will work only with the browsers who support HTML5. If you want to make it work in the older browsers you should put some extra divs inside the HTML5.

Download HTML5 Mini Template on GitHub

GReadable - readability bookmarklet for Google Reader

Friday, August 20, 2010 { 3 Comments }

My friend Mirko suggested me that it would be nice if I can extend my readability project ClipR for better Google Reader support . ClipR works well with Google Reader but is not very user-friendly because you must refresh the browser for every Google Reader article.

So I decided to copy the typography from ClipR and to make completely new bookmarklet only for Google Reader.

So what basically GReadable does is expanding the article reading area inserting bigger more readable monitor optimized . You can learn more about the typography used on my previous post about ClipR typography .

Here how the text will look like before and after inside Google Reader:

Before


After


The text example is taken from Smashing Magazine article The Web Design Community Offers Advice To Beginners

Here is the bookmarklet:

GReadable   - Drag the link to your browser bookmark toolbar, then go to Google Reader page and click it.

All Google Reader articles will be modified and they will stay modified until you don’t exit or refresh Google Reader page.

I also made greasemonkey script install it here.

I will appreciate your thoughts and suggestions. Please comment.

TweetThisPage - bookmarklet for fast twitter posting

Friday, August 13, 2010 { 1 Comments }

Yesterday Twitter introduced the official (Tweet) Button and new API.

I was eager to try the new API and I build right away new Bookmarklet who can help you fast posting to Twitter from any web page.
How this works?

Install the bookmarklet


TweetThisPage - Drag the link to your browser bookmark toolbar


When you click the bookmarklet it will automatically open new browser window and put the page HTML Title and the link (the link will get shorten by official Twitter shortener) . If you select any text from the page it will insert the selected page and avoid inserting the HTML Title.

And that is it.

When should you use it?

When the web page or the blog doesn’t have tweet button and you want to avoid copy pasting the title and url.

Here are some screenshots, I used Daring Fireball blog like an example:

With no text selected:


With text selected:


Here is also the source code from the bookmarklet:

(function () {
     
var l,t,s,D = document;
l = encodeURIComponent(location.href);
t = encodeURIComponent(D.title);
s = encodeURIComponent(D.getSelection());

if(s.length != 0)
{window.open('http://twitter.com/share?text='+s+'&url='+l,'', 'width=533,height=232,toolbar=1,resizable=0'); }
else
{window.open('http://twitter.com/share?text='+t+'&url='+l, '', 'width=533,height=232,toolbar=1,resizable=0'); }
 
})()

You don’t know what bookmarklet is here is Wikipedia link.

I hope that you will find this tool useful.