xhtml | css | Design

History of the Internet

2010-01-19T20:56:28Z

Extremely well animated and beautiful movie about the history of internet, this is UX at its top.

“History of the Internet” is an animated documentary explaining the inventions from time-sharing to filesharing, from Arpanet to Internet. The history is told using the PICOL icons on picol.org. You can already download a pre-release of all picol icons on blog.picol.org/pre-release-picol-icons

You can see the credits and more information on this movie on
lonja.de/motion/mo_history_internet.html

Woopra icons

2009-01-09T15:35:35Z

I use Woopra for my statistic needs on some of my sites. Really great software to keep up what’s happening on the site in real time. One thing I don’t like is the blurry desktop icon they use so I did a new one. As I’m a Mac geek nerd it’s of course important that it looks good. The icon has a width & height of 512px so now it clear & sharp.

I also included an ico file for your Window needs. I have not tested this on Window so let me know if it doesn’t work.

Download Woopra icon

My top lists for 2008

2008-12-31T15:59:13Z

Here are some of my lists for this year, a little bit of music, a little bit of photos and a little bit of statistics for my blog.

My favorite artists (according to last.fm)

1. Bruce Springsteen
2. Daft Punk
3. Tom Petty and the Heartbreakers
4. Stevie Wonder
5. Aretha Franklin
6. Duffy
7. Bob Marley
8. Wu-Tang Clan
9. Gnarls Barkley
10. Jay-Z

My favorite songs (according to last.fm)

1. Duffy – Serious
2. Storyhill – Storyhill – Give Up The Ghost
3. Daft Punk – Face To Face / Short Circuit
4. In Flames – The Mirror’s Truth
5. Aretha Franklin – Ain’t No Way
6. Isolation Years – Isolation Years – That’s All There Is
7. Daft Punk – Around The World / Harder, Better, Faster, Stronger
8. Ray Anderson Alligatory Band – Ray Anderson Alligatory Band – Drink & Blather
9. Juvelen – Juvelen – Watch Your Step
10. Daft Punk – The Prime Time Of Your Life / The

Songs I loved (according to last.fm)

1. The Smashing Pumpkins – We Only Come Out at Night – december 2008
2. Slayer – Eyes Of The Insane- september 2008
3. Justice – Newjack – september 2008
4. Stevie Wonder – If Your Love Cannot Be Moved (feat. Kim Burrell) – juli 2008
5. Jadakiss – Don of the Dons (Put de Ting P… – februari 2008
6. Obie Trice – Got Some Teeth – februari 2008
7. Gioacchino Rossini – William Tell Overture (abridged) – februari 2008
8. Musiq – Onenight – januari 2008
9. Pharoahe Monch – Desire Featuring Showtyme – januari 2008

Flickr

Photos posted to Flickr 2008: 126

35,927 veiws since I started using Flickr

Most viewed images since starting using Flickr


	design-makes-me-happy	4,359
	Swift dump	920
	statistics for jedisthlm.com	785
	Leker med spikpistolen	255
	Roger and Peter-Paul Koch	254
	Brittish dudes	221
	Elvis överst som vanligt	217
	Jens	194
	Boat in the canal	173
	Nya bordet	143

JediSthlm.com

18,723 visits
31,072 Pageviews
1.66 Pages/Visit
00:01:04 Avg. Time on Site

Most popular referrers

1. jankoatwarpspeed.com
2. libpng.org
3. sitepoint.com
4. images.google.com
5. juicystudio.com
6. robertnyman.com
7. icant.co.uk
8. en.wikipedia.org
9. stumbleupon.com
10. artzstudio.com

Most popular content

1. / (frontpage)
2. /2008/03/27/flexible-CSS-buttons/
3. /2005/01/25/khtml-on-windows/
4. /2004/10/13/gui-for-pngquant/
5. /2005/07/08/ie-min-width-position-fixed/
6. /2006/03/16/manfred-a-pngquant-GUI/
7. /2005/06/13/best-swedish-website/
8. /2005/11/14/google-analytics/
9. /2007/12/28/top-32-articles-you-must-have-read-2007/
10. /2005/03/17/more-on-colours/

External keywords (google)

1. IE min-width
2. khtml windows
3. konqueror for windows
4. pngquant
5. optgroup CSS
6. min-width IE
7. CSS optgroup
8. IE7 standalone
9. konqueror windows
10. coding fonts

The future of 24-timmarswebben

2008-12-22T10:05:10Z

In a few days (dec 31th) Verva, the Swedish Administrative Development Agency is closing down and together with them their guidelines about usability and accessibility, the 24-timmarswebben. This is is incredible sad, much work has been put into these guidelines and are used by many in the public sector.

Right now the guidelines has been moved to a new site by Peter Krantz, one of the authors behind the guidelines. This is a private intitative and all salutes to Peter.

So if you think that 24-timmarswebben is important, I’ve created a petition to save the guidelines. Please sign up and send the URL to anyone you know that think the guidelines should live on.

Access a local Mac server from Windows in Parallels

2008-12-13T11:25:07Z

I work on a mac, both at home and at work. When I work on my site chwisgi.com I work locally on a local webserver (MAMP). This is great as I can work on the site without the need to access the net, I can work off-line you could say. When done something I upload all may changes to the the net (production server). I use Coda which works nicely for my coding needs. To check that everything works I mostly see that it works in FireFox and Safari on Mac. When I want to check how the site behave in Windows and Explorer I have Parallels where I have installed Windows. The problem I had with Parallels was that I could not access the local webserver (MAMP) that I used on the Mac. So if I wanted to see how the site looked in Windows I had to publish my changes to the production server and then check it in Explorer. That is not good.

Let’s see if we can fix this! First some information about my network. The Mac is on the 192.168.1.x network range and the IP is 192.168.1.143. The Virtual Windows is on the 10.211.55.x network range which is default when installing Windows in Parallels. The local webserver (MAMP) is running on localhost and port 8888.

When I say that I cannot access the local web server it’s not really correct. It worked if I hit http://192.168.1.143:8888 in Explorer on Windows and look at static HTML pages. But when I have a more dynamic site it didn’t work. The thing is that my dynamic site uses the ‘localhost’ as the DNS name, so when I hit http://192.168.1.143:8888 it was directed to localhost:8888 which isn’t the correct place in Windows (but is on the Mac).

I tried to use the HOST file on Windows to map the 192.168.1.143:8888 to localhost:8888 but this didnt’t work. I tried to create an alias on my Mac in MAMP, this didn’t work for me either. I searched on the net and finally found a solution.

The solution is to setup a Port Redirection in Windows, this sound kind of geeky and probably is.

1. First download the Windows version of the modified version of Rinetd

2. Take the two files and put them in a folder like ‘rinetd’ and put the folder in the root of C:

3. Open up the rinetd.conf file and change the IP numbers to 127.0.0.1 8888 192.168.1.143 8888

The first number is the local IP number on the mac where you have your have your site running. This should not be changed.
The second is the port. If you are running the MAMP the default port is 8888, change if you have something else.
The third is the IP number of the mac. Open up your Network tools on mac note the IP number, for me it’s 192.168.1.143.
The fourth is the port number on the mac, just use the same as the first port number.

4. Now we just need to start the Rinetd server. What I did was to start a dos window by Start > Run > cmd

5. Drag the rinetd.exe file into the dos window and add -c for custom path to the conf file.

6. Drag the rinetd.conf to the dos window, you should now have something like:

C:\rinetd\rinetd.exe -c C:\rinetd\rinetd.conf

7. Hit enter, if it works the cursor just blinks, no success message here. Just leave the dos window open as long as your are testing.

8. Start Internet Explorer and hit http://localhost:8888 and your site on the mac will should be shown.

Here is a shot of Firefox in Mac, IE, FireFox and Chrome in Windows side by side.

Mission accomplished!

Greasemonkey & Nordea

2008-12-06T23:24:47Z

I was really impressed by the Helveticareader project, a Gresemonkey script that transforms the Google Reader into something that looks more nice. I’ve never used Greasemonkey scripts or userscripts as they also are called. Just to try it out I did some hacking on my own bank site, Nordea which I use quiet often.

The nice thing with user scripts is that you can insert your own code inte to the live site as you are using it. In my script I add a new CSS file (that are on my site). From the CSS file I can add a new design and layout of the Nordea site. As you can add stuff to the code I also added some HTML to the frontpage just to try it out. The welcome text is inserted by the userscript.

Userscripts are just normal javascript so if you are a javascript hacker this will be easy stuff for you. As this is my first shot don’t shot me. I’ve added some resources below if you find this interesting.

To use userscript you need

1. Download Firefox if you don’t already have it.

2. Install Greasemonkey plugin

3. Install my userscript

4. Visit nordea.se

So what do my userscript do with the Nordea site?

1. User a grid width of 960px instead of 740px

2. Use Helvetica (you need this installed on your computer)

3. Removes much of the visual clutter (head, navigation, search, related content, banners etc)

4. Maximize the width of the content.

5. Moves all your money to my account I wish, this script only works for the open public pages, not the eBanking service. Check the code if you don’t trust me.

Example of before and after

Resources about Greasemonkey / userscripts

1. http://helvetireader.com/

2. Greasemonkey tutorial

3. Userscripts.org

url(data:image/jpg;base64…)

2008-12-06T12:09:39Z

This cool stuff. Check out the CSS code below. Here they have added an image to the CSS file by encoding (base64) it directly into the CSS. This code was CTRL + C from the Helvetireader project. Believe that this works in most browsers except the infamous IE. There is some work done to fix this, check Dean Edwards site below. The good thing is that the images are in the same file as the CSS, no more broken images. The CSS can be gzipped so it should not be any bigger than separate files. The bad is that whenever you noeed to change the image you need to convert the new image. I’m not sure if there is any image programs like Photoshop that can save base64 file right away. Let me know if have any more information to this.

body {background: URL(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/
2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExM
cGxsbHCAgICAgICAgICD/2wBDAQcHBw0MDRgQEBgaFREVGiAgICAgICAgICAgICAgICA
gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICD/wAARCAFKABsDAREAAhEBAx
EB/8QAGQABAQEBAQEAAAAAAAAAAAAAAAECBAMI/8QAFxABAQEBAAAAAAAAAAAAAAAA
ABESE//EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/
9oADAMBAAIRAxEAPwD6pAAAAAAABAAAASgUCgUEAAABAAAASgUCgUAAAAGQAAAKBQ
KBQQAAAEAAABAAAASgUCgUEAAABAAAASgUCgUEAAABAAAAQAAAEoFAoFBAAAAQAAA
EoFAoFAAAABkAAACgUCgUEAAABAAAAQAAAEoFAoFBAAAAQAAAEoFAoFBAAAAQAAAEAA
AB47A2BsDYOboB0A6AdAc3QDoB0A6A5tgbA2BsGQAAAf/Z) left bottom
repeat-x !important;}

Here is example of my own picture that has been translated into base64, should work in most browsers except IE.

http://www.greywyvern.com/code/php/binary2base64
http://dean.edwards.name/weblog/2005/06/base64-IE/
http://helvetireader.com/

SIME08

2008-11-11T21:25:17Z

Tomorrow and Thursday is conference day. I’m having the opportunity to attend to the SIME08 conference that starts tomorrow. I have high hopes that it will be fun and inspiring. There are some big names that will be great to listen to like

* Michael J. Wolf (Author, former President MTV Networks)
* David Sifry (Founder of Technorati)
* Hans Rosling (Founder of Gapminder, professor at Karolinska Institutet)
* Joi Ito (CEO of Creative Commons, Chairman of Six Apart Japan etc.)
* Pelle Törnberg (former CEO Metro, former CEO MTG.)
* Lena K Samuelsson (Editor in Chief at Svenska Dagbladet)
* Net Jacobsson (Director of International Business Development at Facebook)

Hopefully it will be two nice days.

Just passed 100k of spam

2008-10-25T08:11:53Z

Just amazing to see that Akismet (my spamfilter) has caught over 100k of spam. Check out the graph of the past months.