I updated my Menubar Icons for Mac OSX Lion 10.7.3:
• Apple logo is back!
• Airport icon fixed (seems that Apple likes to change location without any sense)
• Cloud.app and Droplr.app updated

Download here

From now on, you can access all my stuff from my official repo http://repo.andreafedi.net in cydia :). I also made a simple but nice homepage which “explains” how to add the repo. Just follow the steps! Enjoy!

I recently added to my ‘thoughts’ section of my site a button, for each post, which let you ‘tweet’ the article from your twitter profile. It is very useful to spread the world my little ‘thought’, if you like obviously. It just saves you the annoyance of copy and paste the url… Come on it’s a ‘tweet’ button, you know what it’s for.

Some of you asked me why my Menubar Icons Pack available for download on my site is not compatible with Mac OS X Lion 10.7.2. Here is explained: the SArtFile.bin which changes the apple logo in the menubar created bugs and problems in the interface, since Apple changed in 10.7.2. I tried to update the SArtFile.bin for .2 but I couldn’t figure out with this problem. If you want to use my menubar icons on .2 download it here (it won’t change the Apple logo).

When I had to put my logo somewhere in my site, I wanted it to be beautiful. I didn’t like just a .png greatly made in Photoshop, which could be enough for someone (a lot on the net), but I wanted something perfect, which does not look crappy or pixelated at any resolution. I started coding with css a simple circle, since my logo is made up by it too:

#logo { width: 70px; height: 70px; -webkit-border-radius: 35px }

This is really simple and uses -border-radius to obtain a circle (just put width = height = 2 x radius).
At this point, I had to put inside the circle my initials (an) drawn in Illustrator, rejecting the .png format. I tried .pdf, but i obtained a buggy thing, so I opted for .svg.

Then, I used css:

#logo { width: 70px; height: 70px; -webkit-border-radius: 35px; display: inline-block; float: left; margin-right: 10px; background: url(logo.svg) #33373e }

The final result is a completely vector logo, which makes me happy every time I resize the page of Safari with my multitouch trackpad.

I really enjoyed coding the 404 error page of my site. I used CSS 3 animations, JQuery inputs and HTML of course. First of all, i wanted to code an “impressive” error page, in order to replace the crappy default one. The page consist of a big element in the middle of the screen representing the error code, a very short description of what is gone wrong and a funny animation in the background showing ones and zeros scrolling and sliding.

How did I make them?

Well, i started taking in consideration and admireing the idzr.org error page, which is just awesome. I studied the code and i understood how they made it. The key was CSS 3 animations, on which most of my website animations are based. So, I thought what I could create with them and I was inspired by the matrix code replacing the letters with all one and zeros.

I started coding:

<a id="wrapper" href="http://andreafedi.net">
<p id="error">404</p>
<p id="errordescr">You are looking for something that <strong>does not exist</strong></p>
</a>

with this style:

#wrapper {height: 300px; left: 50%; margin-left: -300px; margin-top: -150px; position: absolute; text-align: center; top: 50%; width: 600px;}
a, p {font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-style: normal; text-decoration: none; color: #9a9eab;}
#errordescr {font-size: 20px; text-shadow: 0 0px 20px rgb(255, 255, 255);}
#error {font-size: 200px; height: 200px; margin-bottom: 30px; margin-top: 0px; text-shadow: 0 0px 20px rgb(255, 255, 255);}

and then I added the zeros and the ones:

<div id="sliders">
<p class="scrolling">0110001101101111011011100110011101110010011000010111010001110101011011000110000101110100011010010110111101101110011100110010110000100000011110010110111101110101001000000110100001100001011101100110010100100000011001100110111101110101011011100110010000100000011000010110111000100000011001010110000101110011011101000110010101110010001000000110010101100111011001110010000100100001</p>
</div>

with the style:

.scrolling {-webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); -moz-animation-direction: alternate; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); opacity: 0.1; margin: 0px; position: relative;}
#sliders {position: fixed; height: 800px; top: 50%; margin-top: -411px; font-size: 40px;}

What does the first line refers to? It is a -webkit-animation: the first says that my animation X has an alternate direction, the second that it goes forever and the third the function, the “rule” which X has to follow. What is this X animation? Well, the animation is choosen randomly by this script:

var classes = ['scr1', 'scr2', 'scr3', 'scr4', 'scr5', 'scr6'];
$('#sliders p').each(function(i) {$(this).addClass(classes[Math.floor(Math.random()*classes.length)]);});
var klasses = ['scr11', 'scr12', 'scr13', 'scr14'];
$('#sliders p').each(function(i) {$(this).addClass(klasses[Math.floor(Math.random()*klasses.length)]);});

This adds two type of class to my paragraph of zeros and ones, more specifically these classes:

.scr1 { -webkit-animation-name: slidein; -webkit-animation-duration: 15s }
.scr2 { -webkit-animation-name: slideout; -webkit-animation-duration: 15s }
.scr3 { -webkit-animation-name: slidein; -webkit-animation-duration: 17s }
.scr4 { -webkit-animation-name: slideout; -webkit-animation-duration: 20s }
.scr5 { -webkit-animation-name: slidein; -webkit-animation-duration: 25s }
.scr6 { -webkit-animation-name: slideout; -webkit-animation-duration: 30s }
.scr11 { -webkit-animation-delay: -3s; -moz-animation-delay: -3s; opacity: 0.2; }
.scr12 { -webkit-animation-delay: -2s; -moz-animation-delay: -2s; opacity: 0.15; }
.scr13 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; opacity: 0.08; }
.scr14 { -webkit-animation-delay: -1s; -moz-animation-delay: -1s; }

Which, in fact, tell the strings (0101011…) to follow two animations, called “slide in” and “slideout”, to have an opacity from the beginning and to delay the start of the animation. This is why some strings are lighter than other.
Finally, these are the animations:

@-webkit-keyframes slidein {0% {left: -50%;} 100% { left: 0%;}}
@-webkit-keyframes slideout {100% {left: -50%;}0% {left: 0%;}}

Using keyframes animations, they say: when time is at 0%, set the distance from left -50%, when the time is at 100% (the time in sec is told by -animation-duration) set the distance from left 0%. You can define intermediate steps (10%, 76%…) too.
This for a single string, how about all of these numbers? Just clone and insert after the paragraph, one or two times:

$('#sliders p').clone().insertAfter("#sliders p")

Finally, I added a similar animation that allow the strings to move up and down:

@-moz-keyframes slidedown {0% {top: -20%;}100% {bottom: 20%;}}
#sliders { position: fixed; width: auto; height: 800px; top: 50%; margin-top: -411px; font-size: 40px; -webkit-animation-name: slidedown; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 20s ; -webkit-animation-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); }

Cool, javascript free and funny.