Feel free to donwload the PSDs at Android 4.0 Ice Cream Sandwich Photoshop PSD Startkit.

So I made this Safari 5 Extension which saves your favorites in your browser when you click the heart icon+link. It makes use of html5 localStorage. This means your favorites will be available to you every time you access dribbble.com, even upon browser restart, etc.

As you can see on the screenshot, you will get new ‘my favorites’ tab, which displays your favorites only. Each favorite also gets ‘remove’ link.

Try the extension yourself and please let me know any bugs. Thanks.

Download here

If you like Helvetimail, please see also my Helvetwitter.

Please use discussion under this blogpost to submit comments, report problems, etc. I am aware that Helvetimail is far from perfect and probably never will be, but I did what I could to make at least the basic functionality ok.

Thank you and enjoy!

Please click the icon to go to special Helvetwitter subpage.

This blogpost is mainly a support for Helvetwitter. If you are having some problems making it work, please check also my older blog posts here and here.

If you still have any problem, please leave a comment under this blogpost. Thank you!

If you are using Helvetireader, maybe incorporated into Fluid or Mozilla Prism, you might have been looking for a nice 512px icon. As I didn’t find any nice one, I decided to make one myself. So here is the result. Feel free to donwnload and share it (please include link to my blog if redistributing).

UPDATE: I made the icon a little bit smaller to better fit among others and to nicely accomodate the unread count.

just right-click and download the icon:

If you don’t know how to turn Helvetireader into stand alone desktop application, please see my older post.

You can change the application icon using Candybar, or just select the PNG icon file when creating new Fluid app.

You may have heard about the IE 6 no more initiative. It asks webmasters to put a banner on their page, which detects Internet Explorer 6 and suggests to download ‘a modern browser’ instead.

While I generally support the initiative, the banners are unusable for me. One of the browsers suggested is Internet Explorer 8. I would never ever dare to suggest anyone using any version of Internet Explorer made so far. So I made my version of the banner:

You are using a subprime browser

It may render this site incorrectly. Please upgrade to a modern web browser.

What’s different?

• It shows up to users of all versions of IE. Yes, including those with IE8.
• It suggests Opera instead of IE8, along with FIrefox, Safari and Chrome

I also changed the design a bit to be more minimalist. Feel free to grab the below code and put it on your website. The images are hosted here, so you don’t need to download them (but feel free to do so). You can also adjust the code to better match your website design.

I made two sizes of the banner: 640×75 and 470×50 (for this blog).

So here is the code for 640×75 banner:

<!--[if IE]>
	<div style="text-align: center; clear: both; height: 74px; padding-bottom: 1px; position: relative;">
  <div style="width: 620px; border: 1px solid #f0f0f0; background: #f0f0f0; margin: 0 auto; text-align: left; padding: 0 10px 0 10px; overflow: hidden; color: black;">
    <div style="width: 80px; float: left;"><img src="http://www.josefrichter.com/noie/warn_75.png" alt="Warning!"/></div>
    <div style="width: 300px; float: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;">
      <div style="font-size: 14px; font-weight: bold; margin-top: 12px; color: #c00;">You are using a subprime browser</div>
      <div style="font-size: 12px; margin-top: 2px; line-height: 16px; color: #666;">It may render this site incorrectly. <br />Please upgrade to a modern web browser.</div>
    </div>
		<div style="width: 60px; float: left;"><a href="http://www.google.com/chrome" target="_blank"><img src="http://www.josefrichter.com/noie/chrome_75.png" style="border: none;" alt="Get Google Chrome"/></a></div>
    <div style="width: 60px; float: left;"><a href="http://www.firefox.com" target="_blank"><img src="http://www.josefrichter.com/noie/firefox_75.png" style="border: none;" alt="Get Firefox"/></a></div>
    <div style="width: 60px; float: left;"><a href="http://www.apple.com/safari/download/" target="_blank"><img src="http://www.josefrichter.com/noie/safari_75.png" style="border: none;" alt="Get Safari"/></a></div>
		<div style="width: 60px; float: left;"><a href="http://www.opera.com/download" target="_blank"><img src="http://www.josefrichter.com/noie/opera_75.png" style="border: none;" alt="Get Opera"/></a></div>
  </div>
</div>
<![endif]-->

and here for the 470×50 version:

<!--[if IE]>
<div style="text-align: center; clear: both; height: 49px; padding-bottom: 1px; position: relative;">
	<div style="width: 450px; border: 1px solid #f0f0f0; background: #f0f0f0; margin: 0 auto; text-align: left; padding: 0 10px 0 10px; overflow: hidden; color: black;">
		<div style="width: 60px; float: left;">
			<img src="http://www.josefrichter.com/noie/warn_50.png" alt="Warning!">
		</div>
		<div style="width: 230px; float: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;">
			<div style="font-size: 11px; font-weight: bold; margin-top: 4px; color: #c00;">
				You are using a subprime browser
			</div>
			<div style="font-size: 10px; margin-top: 0px; line-height: 13px; color: #666;">
				It may render this site incorrectly. Please upgrade to a modern web browser.
			</div>
		</div>
		<div style="width: 40px; float: left;">
			<a href="http://www.google.com/chrome" target="_blank"><img style="border: none;" src="http://www.josefrichter.com/noie/chrome_50.png" alt="Get Google Chrome"></a>
		</div>
		<div style="width: 40px; float: left;">
			<a href="http://www.firefox.com" target="_blank"><img style="border: none;" src="http://www.josefrichter.com/noie/firefox_50.png" alt="Get Firefox"></a>
		</div>
		<div style="width: 40px; float: left;">
			<a href="http://www.apple.com/safari/download/" target="_blank"><img style="border: none;" src="http://www.josefrichter.com/noie/safari_50.png" alt="Get Safari"></a>
		</div>
		<div style="width: 40px; float: left;">
			<a href="http://www.opera.com/download" target="_blank"><img style="border: none;" src="http://www.josefrichter.com/noie/opera_50.png" alt="Get Opera"></a>
		</div>
	</div>
</div>
<![endif]-->

Please leave a comment if you like it. Thank you and enjoy!

Before we get one, if ever, everyone’s using various hacks. Here is mine – the vertical spacers. I use Blueprint or 960.gs for layout and horizontal positioning and supplement them with this easy piece of html+css. If you need lots of irregular vertical spacing, like me in the below screenshot with arrows where vertical spacing is needed, this might help.

So the code is really simple. First we define css classes:

.h10 {
	margin-top: 10px;
}

.h20 {
	margin-top: 20px;
}

.h50 {
	margin-top: 50px;
}

.h100 {
	margin-top: 100px;
}

hr {
	visibility: hidden;
	clear: both;
}

The usage in HTML may be as follows:

As you can see you can get various heights by combining the classes. Hardcore CSS proponents may say HTML shall not bear any formatting info. Well, this might be true, but in my view it’s pure theory. Most CSS frameworks breach this rule as well and as long as CSS is so bad for layouting, I don’t care.

Enjoy! If you have any suggestions how to develop this method please leave a comment. Thank you.

for this, but I used jQuery elsewhere on the web, so I needed jQuery solution. But couldn’t find any good one, so I put together my own.

The form can be seen in action at http://www.fofrem.info/objednat.html

Usage:

Just put the default text into alt attribute of the text field, like this:

For some reason, I couldn’t make it work by using value attribute. The if($(this).val()==$(this).attr("value")) part doesn’t work. Anyone knows why?

The script will do the rest. It is pretty obvious from the code how it works, even if you know little about jQuery.

Please don’t hesitate to leave a comment if you need more details. Enjoy!