Josef Richter

Helvetimail is here

Josef Richter — Sun, 13 Sep 2009 15:37:04 +0000

So you can finally grab the Helvetimail at josefrichter.com/helvetimail. This took a lot of time, because Gmail html, css and js are extremely messy. Does anyone know why?

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!

Helvetwitter to accompany Helvetireader and Helvetical

Josef Richter — Mon, 07 Sep 2009 12:37:09 +0000

Probably everyone, including me, likes Helvetireader and the new kid on the block, Helvetical. My despair with Twitter website as well as standalone clients, made me create a minimalist twitter client, using custom CSS and Fluid.

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!

Helvetireader 512px mac dock icon

Josef Richter — Sun, 23 Aug 2009 13:06:39 +0000

UPDATE: Helvetwitter is out! check www.josefrichter.com/helvetwitter

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.

IE6 no more. And IE7 and IE8…

Josef Richter — Tue, 18 Aug 2009 19:56:58 +0000

UPDATE: now with new Opera icon

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:

and here for the 470×50 version:

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

Probably the best typo in history

Josef Richter — Fri, 17 Jul 2009 15:52:18 +0000

Read this letter and try to spot an amazing typo. Click on the letter to enlarge it.

If you didn’t find it, click here: where is the typo?

CSS positioning with vertical spacers

Josef Richter — Wed, 08 Jul 2009 09:54:44 +0000

Making layouts in CSS is a real pain. To me it’s like cleaning toilet with a toothbrush – it can be done, you can even achieve great results, but you would probably choose different tool if you could… The community, including Eric Meyer and Shaun Inman obviously longs for a real layout system.

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.

Clear and re-fill form fields using jQuery

Josef Richter — Tue, 16 Jun 2009 22:36:09 +0000

This piece of code makes form fields more intelligent and usable. It clears the field on focus and if nothing is filled-in, it puts back the default value. There is a single line function MooTools

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!

Unexpected PC upgrade recommendation by PC World magazine

Josef Richter — Sun, 14 Jun 2009 12:09:40 +0000

Sweet photo taken somewhere in the US

best pc upgrades

What followers/following ratio can tell you about the Twitter user

Josef Richter — Sat, 30 May 2009 14:42:02 +0000

Even if you are a Twitter novice, you may already have noticed that the figures of “following” and “followers” for individual users vary considerably. There is actually quite a lot these figures can tell you about the user.

So what may help you get the basic feeling about the Twitterer are the absolute figures of followers & following as well as f/f ratio.

Based on these numbers, I categorize Twitterers as follows:

Hero – has plenty of followers (over 1000) and usually following just a few (high ratio). Example may be Jeffrey Zeldman with ratio of around 50. These people have so many followers, because they usually share useful stuff.

Celebrity – similarly to Hero, has plenty of followers (over 1000) and usually following just a few (high ratio). The difference is they share just useless junk. Example is Ashton Kutcher:

Rookie – is following several people but does not have many followers so far (ratio below 1). The other signs are (s)he usually has just a few updates, default twitter icon and background and a firts message like “Hello Twitter” or “Please follow me” . Nothing wrong with that, every Twitterer wnet thru this phase. Here is an example:

Stalker – follows thousands of people, hoping they will follow him in return, so that he can feed them with his marketing bulls*t. Example:

Friend – a person who has maybe some 100-200 followers and follows approximately the same number of people. These are the unknown soldiers of Twitter, like me. Example:

Exceptions – there are notable exceptions which do not fall within the above categories, despite the numbers may indicate so. An example would probably be Wordpress:

So whom to follow? I guess Heroes, Firends and Exceptions are the right choice. Generally, I am suspicious about anyone following more than 200 people. I think it’s almost impossible to follow more than 200 people, even if you just quickly scan first 3 words of the tweets.

What is your experience? Please share!

And of course:

Offline Gmail, Google Docs, Helvetireader, etc. using Fluid

Josef Richter — Tue, 26 May 2009 23:47:22 +0000

UPDATE: Helvetwitter is out! See www.josefrichter.com/helvetwitter

In a previous post, I was explaining how to enable Google Gears within Mozilla Prism to turn Gmail, Google Docs and other Google Applications into stand-alone offline applications, that may come useful e.g. when you are in plane or train.

You may know, that specifically for Mac, there is an alternative to Mozilla Prism, that is called Fluid. In principle, it is the same as Prism, i.e. “site specific browser”. It is just based on WebKit engine (like Safari) instead of Gecko engine (like Firefox).

In Prism, enabling Gears required a simple “hack”, changing the target application descriptor. I was quite surprised that in Fluid, this is not a problem. You just click the Offline link (at top right) in Gmail or Google Docs to activate Gears. You will be then redirected to Google Gears package download, which you need to install. Then you just restart Fluid applications and there you are! No problem, it just works.

It seems Fluid is much more configurable than Prism. For example, it nicely integrates with 1Password, which makes moving your favourite web applications under Fluid even easier.

What’s more, the Gmail icon (use the nice one I provided in previous post}, if placed in Dock, even shows the number of unread emails, just like Mail.app does!

Now the Helvetireader. Fluid makes it super easy to include user scripts. So here are the steps to be taken:

UPDATE: step 0. Download my new Helvetireader icon.

1. Create new Fluid app from Google Reader. Select to use the icon downloaded in step 0.

2. Download the helvetireader.user.js file.

3. In the newly created Google Reader Fluid app, click on the script icon on the top menu bar and select New Userscript…

4. Call it Helvetireader and you will get a Dashcode opened. Now copy all contents of helvetireader.user.js and paste it into this widow instead of the comment “// do yer thang!”. The result shall look like this:

5. Save & close & refresh Google Reader.

6. Activate the offline Gears mode.

Done! You should have one of the most beautiful, full fledget RSS reader around!

See a screenshot with offline Gmail, Google Docs and Helvetireader:

So if you are on Mac, your life is easier (as always ), if you go with Fluid. Enjoy!