The old days

It was on these forums that the experts hung out. I was always amazed over the amount of answers I got there and one day I wanted to be a person who gave answers as well. I always tried to see if there was some small question that I could maybe help out with but usually I hardly understood the problem good enough to even give a hint to a possible solution.
Times changed. I went to school to become a pro in the area and when activity got low I stopped hanging out on the forums. Instead I started to go to friends or colleagues for feedback.

A new place for the cool people

A couple of months back I heard of something called Forrst. My rss-feeds were buzzing about it and appearantly it seemed to be a very cool place to hang out on for developers and designers. That is if you were cool as well. It was invitation only. I filled out the application form but thought that since I’m not Chris Coyier on CSS-tricks or Ryan Carson from Carsonified my chances were zero. I was simply not cool enough. Dang it!
I gave up. No invite was coming. Then I started to follow the buzz on Twitter. Turns out people were having invites to give away to us less fortunate. (I still thought it was all about coolness…) I started to answering these people and after a while I got the following tweet:
“@kolombiken I like your portfolio, send me your email address and I’ll give you an invite.”
Do I need to tell you I was happy?

You should apply

Forrst was, is, exactly as I imagined it to be and more. So many talented and passionate people all in one place. You are able to upload snaps of your design or code. Ask questions, share links and the best part: get lots of feedback! It was just like in the old days on my forums but with a much better interface.
So let me just tell you this: If you are a designer or developer or both and you have a true passion for the web. Forrst’s the place to be! Fill out their application form today.

Uhm yea, right, sending in applications doesn’t work? Well, turns out I was wrong on that one. Some weeks after I was invited I got an email in my inbox. It was an official invite to join Forrst.

/Ida

Ps. For you Forrsters I’m kolombiken.

ColorBox

• jQuery 1.3 and up
• Size: Less than 9KB
• My personal favourite. Very light weight, Utilizes jQuery and has a very well formed CSS.
• Get ColorBox

ShadowBox

• Works Standalone but supports both jQuery or MooTools
• Size: 1,2 Mb (full package)
• Works with both MooTools, jQuery and by itself. It is very configurable and has a well documented API. Unfortunately this ubiquity shows on the file size.
• Get ShadowBox

Slimbox 2

• Library: jQuery
• Size: 4 Kb
• As seen above, extremely light weight. It also has a little sister running MooTools for those in favor of that, also at 4kb.
• Get SlimBox 2

FancyBox

• Library: jQuery
• Size: 366 Kb
• For all you fancy pants mac people. Nice easing effects and transitions
• Get FancyBox

FaceBox

• Library: jQuery 1.2.1 and up
• Size: 7.1KB
• If you ever need a face bookish modal box it doesn’t get much better than this.
• Get FaceBox

There are obviously a lot more JavaScript modal boxes out there but these are our favourites. You may also consider writing your own modal box. The benefits are that your modal box will be custom tailored for the project and you get exactly the behavior you’re after. On the down side it can be a bit time consuming.

Do you have a favourite? Tell us in the comments!

Why would I need to convert?

• You are tired of using entities for foreign characters. Hate using things like this ŵ (← very common character… uhm… )
• You are going to merge your web site with another website. (Which has a different encoding.)
• You want to write in more languages. (I’m talking about languages as in the languages people speak NOT programming languages.)
• When generating emails and sending data you have problems with weird signs.
• You are mad because ISO-8859-1 doesn’t contain an euro sign (€). (Isn’t that quite funny? I mean it’s encoding especially suited for the west of europe. Yea, yea € I know. But still.)

There are more reasons. Feel free to add those in the comments.

The biggest reasons “back in the days” to use ISO-8859-1 was that it had slightly better support in older user agents. Well those old agents are pretty much gone by now. Who still uses Netscape 4? Hands up! Anyone? Well, that’s what I thought.
All in all UTF-8 is, in the long run, more fit for the future.

Don’t go to hell

So what do I mean by “Encoding Hell”. Well those who has been there know what I mean. It’s when you just switch encoding without properly converting your data and you end up with letters looking sÃ¥ här (that’s the word “så här” meaning “like this” in swedish.) I got this nasty letters by opening a file with UTF-8 encoding in my text editor using ISO-8859-1. And guess what? Opening with the right encoding doesn’t switch the letters back. They are stuck looking nasty. I’m in hell!

Well this was only one file and sure you can change the letters manually or by using some fancy search/replace-command. But think about if you made this mistake with hundreds or thousands of files? Not nice. Big hell!

Do it right from the beginning

The best thing is to avoid Encoding Hell all together. Choose the right encoding from start and you are safe.
But if you must change. First thing. Be careful! If you are careful you will save time. Make up a converting-encoding-plan first so you know exactly what you are doing. Just don’t start testing. My advice is to always start with a backup. Backup everything you want to convert. If you have a database connected to your webpages don’t forget to back up that one as well.

Converting your files

Don’t even think of converting your files by using your text editor. It usually turns out nasty. There are tools to help us out with this. You can use the terminal/the command prompt to convert things. Me, myself, I have tried out “Encoding Master” which I think is simply brilliant. Easy to understand and it converted everything very nicely. It’s also supported by both PC and Mac.
Don’t forget to add/change the encoding in the headers of the webpages too.
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">

Converting your database

Be careful here. Don’t start adding UTF-8 encoded data into your old database. Make sure it’s converted and pretty first. Otherwise you might end up with a messy mix and bang! You are back in hell!
To change the encoding of your database you must change the encoding of everything. The database itself. Every table in the database and every column that includes some sort of text-value. I’m talking about data of type: char, varchar, tinytext, text, mediumtext and longtext.
Since I lately been working with PHP and MySQL the following will apply to them. If you are working in other languages and other databases you probably need to do some further research to see what is the right methods to use.

To change the databse itself use the following query:
ALTER DATABASE my_database charset=utf8;
To change a table use :
ALTER TABLE my_table charset=utf8;
To change a column in a table use:
ALTER TABLE my_table MODIFY my_column TEXT CHARACTER SET utf8;

Make sure everything in there uses the character set utf8 and collation utf8_unicode_ci. Ok?

Encoding in PHP

If you are coding in PHP you might have problems with the MySQL and PHP talking UTF-8 language. Solution to this which worked for me was to send the following query:
SET NAMES 'utf8' COLLATE 'utf8_unicode_ci'; This must be done right after connecting to the database.

From Simon comes this handy tip to those of you who are using MySQLI together with UTF-8:
(With error-handling included as a bonus…)

$mysqli = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD,
DB_DATABASE);
if(mysqli_connect_error()){
throw new Exception('Connection failed
due to the following error: '.$error);
}
if (!$mysqli->set_charset("utf8")){
printf("Error loading character set utf8: %s\n",
$mysqli->error);
}

It could also be a good idea to add the code below to the beginning of the PHP-files.
mb_language('uni');
mb_internal_encoding('UTF-8');

Last but not Least…

Always research carefully before changing your encoding. Especially if you are a converting-virgin and are changing the encoding for the first time. Never rely solely on one tutorial. Not even this one which, I need to admit, is not covering everything. This is pretty general info. Hey, you can write a book about encoding and the struggles with converting. So remember to look around. Ask people. Start with a backup. Always. And, again, be careful!

Happy Encoding!

/Ida

So what is it?

It’s an easy way of storing and sharing files online. It works like this: Go to getdropbox.com and download the thing. After installation you will have a folder where you can just “drop” the stuff you want to share or store. If you’re not at your own computer or if you got several of them.. ehm.. several computers I mean.. you got two choices. You can either download Dropbox to your other computer or simply use their website to access your “dropped files”.

Why do I need it?

There is a number of reasons why this might be useful to you. I’ll give you three good reasons.

1. You use more than one computer and are dead tired of moving all your files from one computer to the other.

2. You work in a project and you need to share files with the other members in the project. Ok, now some of you will say: “That problem is already solved. I got subversion.” Well, it’s not always great to check out things that is one GB+. (Just talking out of experience) So if you got a lot of big files I think Dropbox could be a great compliment to your subversion-stuff.

3. You are working with a client who think attaching things like a document to an email is a super-complicated process for which they need your support, by phone or in person, to do (every time!). They probably would find it a lot easier if you simply told them to ” just put all the files you want to give me in this folder”.

What’s the bad stuff?

Dropbox is free as long as you don’t feel the need to share more than 2GB. If you do you need to pay up. And yea, a thing to watch out for. If your computer doesn’t have a lot of space or are old and slow remember to unshare the folders you don’t need so your computer doesn’t end up in a bad state.

There was once this phrase: “Drop it like it’s hot.” I’ve heard they changed it now to “Drop it like it’s Dropbox”.

“IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.”

You can download IETester at http://www.my-debugbar.com/wiki/IETester/HomePage

What do I do if I can’t see flash on my site with IETester?:

We’ve noticed that if you run Vista on your machine you must run IETester as administrator to be able to view flash.

List of modern browsers

Firefox
Safari
Opera
Chrome
Internet Explorer 7
Internet Explorer 8

The use of dummy text and especially lorem ipsum-text is widely spread. Never heard of lorem ipsum before? Well here’s a explanation of the whole thing stolen from Wikipedia.

In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout. Substituting dummy text for meaningful content is called “greeking”, as in, “to greek the text”.

(Source: Wikipedia)

Why?

There are several good reasons to use a dummy-text. It’s a good way to check your layout. To write “bla bla bla…” or just the word “text” repeatedly just isn’t good enough. First of all no real text use only one word repeatedly and because of that your text-elements will look all weird. Secondly, while “bla bla…” might work for sketching on a page about your best friend’s hamster’s baby it gives a very unprofessional impression when used on a design for a real paying client.

How?

There are several tools to help you out with your dummy-text so even if you are dead tired of lorem ipsum there is no need to despair.

lipsum.com
This page has been around for years and nowadays they also offer mock banners in different sizes. Html-tags are not included in the text.

lorem2.com
Simple and lucid. Offers short and long paragraphs, lists with long and short items. They also offer a Spanish version. Bad thing might be that it’s not customizable and no html-tags are included.

www.lorem-ipsum.info
Offers lorem ipsum in a variety of languages. You can also download a complete xhtml-document with your text of choice. It’s not as simple as lorem2.com and feels, at least to me, a bit outdated.

html-ipsum.com
This page was released a couple of months ago and offers a variety of text with html-tags included. Great for all of you who found it very annoying to always add html-tags to the text generated at lipsum.com.

www.malevole.com
Are you tired of the ’latin’ stuff and want some plain English these to pages got it. No html-tags included. Sorry people.

Dummy Lipsum for Firefox
Nice and simple plugin where you can choose if you want to have plain text or include html-tags.

loremipscream.com
Wow! This is a really cool idea that makes the use of dummy text fun. No html-tags are included but who cares when they have stuff like reconstituted _why-quotes and randomly generated emo song lyrics?
Kudos for the forged identity-flavour (aka soylent cream). That one is really useful!

I have been searching for a swedish “lorem ipsum”-page but haven’t found one. Does anybody know if a page like that exists?

Ps. Can somebody please buy this cup for me?

A web-based application for making presentations, beautiful user interface with a lot of functionality. It’s powered by javascript.

For the designer, creating wallpapers is a great way to perfect your craft and create images specifically for different environments from desktops and laptops to mobile phones and MP3 players. What we see everyday can affect our mood and state of mind, enhance your desktop with a wallpaper creation from desktopography and feel the essence of nature and the outdoor existence on your computer. Bring tranquility to your desktop, feel the wilderness and give your background a breath of fresh air..

Check it out: Desktopography 2008

Fancy Zoom

• Focused on the smoothest, most polished zooming animation possible
• Automatically scales images from any image link, with no HTML changes
• Preloads full-size images in the background on link mouseover
• No resource-heavy Javascript libraries — 100% coded from scratch to zoom
• Draws a nice drop shadow under the full-size image to offset it from the page
• Uses Safari 3’s “box-shadow” feature to draw the drop shadow natively, no images required
• Requires only two new lines of code in your HTML
• Tested and works with Safari, Firefox, IE7, and IE6. (Looks better in modern browsers.)

You can get it here: Fancy Zoom

Highslide

• No plugins like Flash or Java required.
• Popup blockers are no problem. The content expands within the active browser window.
• Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
• Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.

You can get it here: Highslide