Isaac Keyet » Tutorials

Review Of Chosr, A “Quicksilver” Startpage

Isaac Keyet — Thu, 30 Oct 2008 19:27:36 +0000

This was news to me. I stumbled across this article about Chosr, a web based command like interface that works just like Quicksilver. (Read more about Quicksilver here.) The idea is that as soon as you open a new tab in your browser, the startpage (Chosr) appears and lets you type in what you want to do next. This alleviates the problem of always changing input medium (keyboard/mouse), and you can do more just using the keyboard.

Let’s take an example. You are watching the election closely, and want to see his latest ad that aired on several TV stations yesterday. Normally you would open a new tab, move your cursor to the address field, click, type in “youtube.com”, wait for it to load, move your cursor to the search field, type in “obama ad”, press enter and wait for the search results, click your preferred video, wait for it to load, then watch it. (I’m fully aware that there are several other ways to speed up this process, I’m using search keywords myself, for instance.)

If you were using Chosr though, you would do the following. Open up a new tab, type in “obama ad”, tab to the next box, type youtube, hit enter to load the list of results, then enter again to play the video. A much faster process, just because you don’t have to go back and forth from the keyboard and the mouse.

You don’t even have to sign up to give it a test run. Just go to www.chosr.com and take it for a spin! They also have a bunch of tremendous videos that teach you about the possibilities of the startpage interface.

Mac OS X Mail Problem: Attached Images Show Up Embedded In Outlook & Other Clients

Isaac Keyet — Sat, 06 Sep 2008 15:10:54 +0000

I’ve had this problem for a while, that Mac OS X Mail (the native mail client in OS X) sends emails that other email clients don’t recognize as attachments, but as embedded pictures. This has been really frustrating, because if I’m sending an image to a client that needs to be saved on the client’s computer, he or she is unable to do so because the image is not a “real attachment”.

So, here are the facts: Wether an image is embedded in the email or not, it’s still an attachment. Thus, OS X Mail does nothing wrong when it embeds the image, other clients simply doesn’t want to understand that it’s still an attachment. The clients (read: “Outlook”) offer no way to save the image other than to right click it inside the email, but that only generates a .bmp that’s scaled down to the email size in pixel width.

Please note that it doesn’t matter if you click the Attachment button in the main taskbar or simply drag the images to the email body.

The solution:
The reason my images were getting embedded was because I was using some signatures with colors in them. As soon as you set the font, a color or similar, Mail turns the email into a “Rich Text” email, which basically means it’s a HTML email. So when you attach images to such an email, Mail generates an tag for that image, thus embedding it into the email itself. You can avoid this easily by just using Plain Text emails (see screenshot).

You can also try to simply don’t use any formatting in the email, including your signature.

Hope this helps.

Tips on Using the Outline CSS Property

Isaac Keyet — Thu, 10 Apr 2008 04:35:03 +0000

Part 2 out of 2 (Part 1)

The only time a web designer notices the Outline property is when you want to disable it, and you’re wondering how to do so or if it’s even possible. But you can actually use the property to do very clever things.

At a first glance, the Border and the Outline property look very much alike. They share the same rule structure, and they both put a border around any object you want. But there are two fundamental differences.

1. When the browser calculates the width of a floated object, it takes into account Width, Padding and Border.

Notice how setting a border adds to the total width, while the outline doesn’t.

2. Since borders take up space, you can have problem aligning elements on a webpage using borders. However if you use an outline instead, the “border” will just be a layer on top of the image and won’t push your element anywhere. Notice how the second image’s inside border still lines up with the text.

This is very useful for registration processes, if you want to show a field that needs to be corrected: Instead of applying a border and having the textfield move X amount of pixels horizontally you can apply an outline!

How to use Outline, examples

Example:
.classNameHere {
outline: 1px solid #000000;
}
Example 2:
.classNameHere {
outline: 2px dotted #FF66CC;
}

I hope you enjoyed this little introduction to the Outline CSS property!

Get perfect Web 2.0 16×16px icons quickly!

Isaac Keyet — Thu, 20 Mar 2008 01:13:38 +0000

Recently I faced the problem of either creating my own 16 square pixel icons, or use others. I started looking into how other services have solved the problem, and I realized after looking at Socialthing! that the best solution is also the most obvious and simple one: Just import the site’s own favicons!

Here are some examples of great 16×16 icons from well known sites:

Facebook:
Last.fm:
CNN:
Yahoo!:
Twitter:

Almost all bigger sites out there have a favicon, so to find and download an icon just do the following:

Enter root web adress in your browsers adress field: http://www.sitename.com
Apply /favicon.ico to the adress, like so: http://www.sitename.com/favicon.ico
Hit Enter to go to the adress, and there you are. This is the perfect 16px icon for the website you’ve entered!

border: 1px solid; magic!

Isaac Keyet — Wed, 17 Oct 2007 02:26:07 +0000

I don’t know if this is common knowledge among webdesigners, but this was all new for me. If you don’t select a color for a border, just say “border: 1px solid;” (for example) it will inherit the color of the current object. I’ve checked this in Firefox 2 and Opera 9, and it really works here.

Very interesting, at least I think so..

Flash Movie Controls – Play/Pause Button

Isaac Keyet — Thu, 04 Oct 2007 22:01:28 +0000

I’m not very experienced in Flash. I can do basic movies with tweens, some playback buttons and maybe one or two animations, but that’s pretty much it. For a recent project however, I had to do a pause button.

Now this might seem like an easy task, but it isnt. A pause button must both pause and play the video. I looked around the web for some easy solutions, but couldn’t come up with anything useful (although I’m sure there are guides for it out there, I just didn’t look hard enough..). This is what I came up with:

How to create a Play/Pause button in Flash

1. Create a movieclip called “playpause”. Put this movieclip anywhere in your main movie.
2. Create a button in this movieclips first frame, call this button “pause”.
3. Now go to frame two, create a keyframe and another button, call this one “play”.
4. Create another layer, call this layer “script”. Put the marker in the first frame and open Frame Actions. Type in “stop();”. Create another keyframe, and do the same thing again.
5. The buttons need some actionscripting too to be able to work. They need to both make the other button display and to play and pause our movie, which is the main target. I found a way to do this really easily. Click the button “pause”, and open Button Actions. Then type in:

on (release) { gotoAndStop(2); _parent.stop(); }

The first line displays the play button, the other one pauses the main movie. Select the other button, “play”, and type in:

on (release) { gotoAndStop(1); _parent.play(); }

Save the document, press Command+Enter (PC: CTRL+Enter) and make sure it works.

I hope you found the guide useful! Please leave a comment below and let me know what you thought.