Tim Pietrusky

The rise of Browserhacks

Hugo Giraudel & myself (with contributions of the #4ae9b8 team) created Browserhacks, an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. But you should read Hugo's comprehensive article for a proper introduction.
hugogiraudel.com/2013/02/25/browserhacks/

It's all open source and you can fork it on GitHub.
github.com/4ae9b8/browserhacks

We are very proud of this project and it's awesome that so many people like it.
reddit.com/r/web_design

There are even people following @Browserhacks on twitter.
twitter.com/Browserhacks

And here it is: Hack what ever you want!
browserhacks.com

Browserhack has 3323 visitors today.

1/2 clock animation

It was a boring day and I had nothing to do. So I searched for unanswered questions on Stackoverflow. Yeah, even more boring. But I found this one:
stackoverflow.com/questions/14374092

A simple clockwise animation? This should be possible in CSS.

I tried and tried and tried... I hated everything and tried again. My solution? A 1/2 clock animation D: Can someone please help me?
codepen.io/TimPietrusky/pen/jqpog

Convert a random string to css color

Some time ago I found this interesting question on Stackoverflow:

Jeremy Goodell
Why do weird things in font color attribute produce real colors?

stackoverflow.com/questions/12939234

What does this mean?
Put a random string into a CSS color and the browser generates a color out of that.

So how does this work?
The author of the question provided a 5-step algorithm to convert a string into a hex color.

1. Change each non-hex character to a 0.
2. Add 0's to the string until its length is a multiple of 3.
3. Divide string into 3 equal parts.
4. While the length of the sub-strings is greater than 2, and all three of the sub-strings begin with a 0, remove the leading 0s from each string.
5. If the length of the sub-strings is still greater than 2, then truncate each substring to 2 characters.

You don't have to understand it, because I transformed these 5-steps into this:
randomstringtocsscolor.com

Fork me on GitHub.
github.com/TimPietrusky/randomstringtocsscolor

Inspiration is everywhere

Oh, what's this? A tweet by Francesco Trillini:
twitter.io/Francext/status/311594881292320770

Francesco Trillini
@TimPietrusky Just found it http://www.nimbletank.com 'n I want to share it with you. Try it on Chrome mobile. What else to say?!?!!!

That inspired me to create a creepy eye, which is build with a big box-shadow and a mousemove/touchmove event.
codepen.io/TimPietrusky/pen/eiAwb

Pro tip: Move the eye around!

Having fun.

Combine animation + box-shadow + filter + transform and you get a loading animation :D
codepen.io/TimPietrusky/pen/jFzGJ

Diary. I hate it.

I love Grumpy Cat, the grumpiest cat on the interwebs. That's why I have created a meme generator. Oh yes, that's true.
grumpycathatesyou.com

You can edit the meme (choose title, picture or font), save it and copy the URL of your browser bar to share the link with everyone.

Like every project this one is open source and you can fork it on GitHub.
github.com/TimPietrusky/grumpycathatesyou

33,254 unique people visited Browserhacks from March 1st until now.

Last & least

A friend gave me a screenshot and wrote: Can you please create the HTML/CSS for this? And yes, you can create your own style :D

Awesome! I had a lot of fun building this intranet administration interface for him.
codepen.io/TimPietrusky/pen/epcIx

It's full responsive and stuff :D