Tweetbot and Readability join forces

When the best Twitter client and the best service dedicated to reading join forces then the sun of the interwebs shines a bit brighter.

Most advertisements hurt our eyes and distract us from reading. Right? Right.
Until advertisers find a better way to handle their business we have the prerogative to kill those ads. Not all of them, only the worst ones. (You decide what’s good and what’s bad anyway.)

Tweetbot is arguably the iPhone app that gets the most and the best of Twitter. Readability makes reading enjoyable again. The new version of Tweetbot embraces Readability and instead of sending us to a website referred in a tweet, it shows us the relevant Readability page.

Add to this the advantages of retina display and you get an outstanding reading experience. And that’s fantastic.

What do haters hate

You must have heard the famous “Haters gonna hate” moto. Lately, I’ve been thinking about it. And I wonder what do haters hate? Do they hate the idea/product/method or the people behind it?

I think it’s the latter. At least for most of them. To hate an idea is easier but it doesn’t fit the anger. You need a face to detest.

Let’s see a couple of examples.

• People don’t hate Apple as much as they hate fanboiz. You can’t easily argue against these products. It’s much more fulfilling to turn against Apple supporters. And if you hate enough these people it’s more convenient to move on to products or ideas or tactics developed by Apple.

• In my profession I see people express their resentfulness of responsive design, because it’s hot, not because it’s a bad method of creating websites. You can’t turn down the value of responsive design. And since you can’t punch a technique, you punch (anonymously of course) people.

People can’t live without enemies. Choosing carefully who you hate makes you a bit wiser. Hating less is better anyway.

No pain

Small repeated tasks or new easy ones save the day. We need them because they make us feel productive and capable of doing more. We need them because they pay the bills.

However they’re not enough. Actually, the series of such tasks is the reason we get stuck. One day we open our eyes and discover we’ve left behind.

In all my life I got better when I had to accomplish a tough task. Something hard to achieve, or something under pressure, or both.

So this is a note to self, a quite simple to do: add a difficult task, a real expedition to uknown waters every now and then.

Do you want to make a difference? I guess so. I can’t find an easier or more convienient way than the one I said before. Or as the old men say: “No pain, no gain”.

What Successful Products Teach Us About Web Design

This is the title of my article published today on Smashing Magazine.

In the the article I talk about some successful products and I try to see what makes them so. What can we derive from their success and how can we apply this knowledge to web design? In my opinion it all comes to three things:

• The ability of the designer
• Focusing on the scope
• Iterations

But I won’t tell you more. Go ahead and read it by yourself.

Thank you Smashing Magazine! It was wonderful experience working with you. I hope I’ll come back soon.

We are the explorers

This is the title of a beautiful talk given by Mr. Simon Collison.

In this talk Collison sees the big picture: What makes a craftsman? Why, we web designers, are we considered to be craftsmen? Is not setting goals a better approach than setting and trying to reach them? The particular talk was part of the wonderful Build web festival.

It’s quite rare to find such a theoretical and at the same time very deep approach. Don’t miss it.

The Ultimate Guide to Readable Web Typography

To take the most of The Ultimate Guide to Readable Web Typography you need two things: to love typography and to have at least half an hour to spend in order to read the article.

This is a quite long and complicated but rewarding article. As the title says, it promises to show us the ultimate way to Web typography and I think it does. A great resource.

Solitude and Leadership

To become a leader sounds irresistibly sweet. Too many people dream of becoming leaders but too few can make it. Why? Because they hate solitude, no matter what they say.

Leadership and solitude seem to be two contradictory notions but they are not. No, really.

Do yourself a favor and spend the next 30 minutes of your life reading Solitude and Leadership.

The position of the leader is ultimately an intensely solitary, even intensely lonely one. However many people you may consult, you are the one who has to make the hard decisions. And at such moments, all you really have is yourself.

Wishing you…

Our industry, just like every industry, needs good people, who work hard to evolve and to provide better services. We, web workers, define the future and a medium that changed everything and above all proved to be the most democratic platform of all times. Let’s not forget this.

Also, let’s not forget our humanism. Because behind those efficient but cold systems there’s always one or more human hearts that make this miracle active.

Dear readers, for 2012 I’m wishing you the best: to be healthy and open. To have a wandering mind. And tons of love. 

Spinning and fading out/in icons with CSS3

This is an experiment with CSS3 ingredients. What we want to achieve is a smooth spinning and fading out/in effect with two icons.

Both icons hold the same position. One of them stands below the other and it is opaque. The other is transparent. On rollover both start spinning and switch transparency in one second.

Take a look at the effect

Here comes the HTML code:

<h1>
	 <a href="#"><span class="logo"><img src="..." alt="" /></span></a>
	 <a href="#"><span class="logo_off"><img src="..." alt="" /></span></a>	
	</h1>
	

And here’s is the CSS code, which is more interesting.

	 h1{
	 width: 283px;
	 height: 283px;
	 -webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	 transition: all 1s linear;
	 position: relative;
	 text-align: left;
	   }

	h1:hover{
	 -webkit-transform: rotate(360deg);
	 -moz-transform: rotate(360deg);
	 -o-transform: rotate(360deg);
	 transform: rotate(360deg);
	}

	span.logo{
	 opacity: 1;
	 -webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	 transition: all 1s linear;   
	 position: absolute;
	 width: 283px;
	 height: 283px;
	}

	h1:hover span.logo{
	 opacity: 0;
	}

	span.logo_off{
	 opacity: 0;
	 webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	 transition: all 1s linear;   
	 position: absolute;
	 width: 283px;
	 height: 283px;        
	}

	h1:hover span.logo_off{
	 opacity: 1;
	}
	

Take a look at the effect

For h1 we define the size of the icons and the spinning, which is linear and lasts one second.

Both span tags include the icons. We also define a linear animation for one second, but this time it is about the fade out/fade in effect.

As I mentioned above this is just an experiment. If you have any simpler way to achieve the same result (no, without JavaScript please), do share your ideas in the comments below.

UPDATE: Firefox has an issue with the effect which breaks there. Add text-align: left; for h1 to pass it by.

The new series of 24 ways

It’s December! The best holidays of the year are one step closer but for web geeks it also means that the new episodes of 24 ways are also here.

I follow 24 ways from the very beginning and it never disappointed me.

Let’s quench our thirst for HTML & CSS another 24 times.