pasz.nl/blog

Things you can say to Siri

Pascal Altena — Mon, 07 Nov 2011 20:12:30 +0000

The list at TUAW is pretty extensive but here are more things you can say to Siri:

Texting/e-mailing people

“Tell my brother and my girlfriend I’m late”

So you can text/mail multiple people at once, isn’t that cool?

After dictating a message:

“Change it to I’ll be right there”

Changes the message.

“Add I hope”

Adds a sentence to the message.

Calender

“What’s on my agenda one month from now?”

Shows you what’s on your calender one month from now.

Alarms

“Wake me in 20 minutes”

OK, this kind of is on TUAW’s list (“Wake me up in 8 hours”) but this one is great for taking short naps!

Reminders

“Remind me in 10 minutes to close the windows”

Creates a reminder with a due moment ten minutes from now.

“Show me all my reminders”

Shows you a list of all your reminders

“Show me my reminders for wednesday”

Not sure when I would use this.

Wolfram Alpha

“How many calories in one chocolate bar and two bananas”

I’m stunned.

Notes

“Show me all my notes”

Shows you a list of all your notes.

Metal band Next Waste Dimension quits, releases album for free

Pascal Altena — Sat, 20 Aug 2011 07:03:56 +0000

Alas, my good friends of Next Waste Dimension decided to quit.

The band released two albums. Both of these were mixed by me. I very much enjoyed working with this band because they are talented musicians, great songwriters and above all: cool, smart dudes!

Download “Signal To Noise” for free

As a kind of parting gift to the world, the band releases their latest album as a free download on their website. Go here and download Next Waste Dimension’s “Signal To Noise” full length album for free! (be sure to check out their awesome cover of Prodigy’s “No Good”)

New bands

So did they stop making music completely? Far from it! Rikkert (vocalist, guitarist) sings in Schwarzblut (fans of VNV Nation, Qntal, Skinny Puppy etc. should definitely check these guys out). Niels Achtereekte now performs his super human bass playing magic in Vitamin14 (If you like Faith No More, Primus, Mr. Bungle and similar artists, you’ll *LOVE* these guys!). Drummer Jorik drums in a brand new band, soon to be announced to the world! Live member and VJ artist Jeroen showcases his work on his YouTube channel.

My brother is a freelancing, web designing, front end coding and music making genius!

Pascal Altena — Thu, 11 Aug 2011 09:14:55 +0000

My brother quit his job at Clockwork after five years of work on awesome stuff like the Wehkamp website (one of the biggest mailorder companies in The Netherlands), a TV guide UI for Philips TV’s and a lot more. Before that, he worked another 5+ years at several other websites makin’ companies.

He also writes for a popular Dutch webzine for web professionals.

You’ll find his portfolio at www.carstenaltena.nl/creeert/.

Rock star

And, well, he’s a rock star. He played, recorded and toured with a few very popular metal bands. He now plays guitar in Make Waves (if you like Incubus, Queens of the Stone Age, Porcupine Tree or similar stuff, you should definitely check them out!).

His stuff gets played on major radio and tv broadcasters. He composes and arranges string parts for Miss Montreal, Arthur Adam, Lorrainville and a lot more artists.

Check out his music at www.carstenaltena.nl/componeert/.

Cool Mac OS X Lion tips and tricks

Pascal Altena — Thu, 21 Jul 2011 09:23:51 +0000

In this post I’ll list some of the really cool new features Mac OS X Lion has. It is by no means a complete list of all the features, it’s just the ones that I find extremely useful. I’ll add more when I learn new OS X Lion tricks!

Multi-touch gestures

OS X Lion should definitely be used with a trackpad. Right now, it’s all about the gestures for me! Snow Leopard did a great job but Lion really shines here. Most Mac owners have a MacBook so most have that covered. If you use a desktop Mac (iMac, Mac Mini, Mac Pro), do yourself a favor and get a Magic Trackpad and get used to using it.

Why use a trackpad?

Because learning the gestures will greatly speed up things and generally make your life on your Mac a lot easier. They’re easier to remember than key combinations and the location of keys.

Some of the gestures I use

Three finger swipe up

This will show Mission Control.

Three finger swipe left to right and vice versa

Slide between the different screens (Desktops, Dashboard, full screen apps). I love how you can take a little “peak” to another screen. Just slide and hold. You have to try it out to know what I mean by this.

Two finger slide up/down

Scrolling up and down in documents. You probably already knew this one . I’m still getting used to the reversed scrolling thing I must admit.

Two finger slide left to right and vice versa

In Safari, it’s the gesture for going back/forward in history.

In iCal in week mode, you slide from week to week. In month and year mode, the calendar page flips vertically (nice animation). In day mode, you go back and forth a day (no cool animation there though!).

A lot more apps support this gesture. Just try it.

Four finger pinch (thumb + three fingers)

This gesture will show you Launchpad. This gesture feels kinda weird to me… I don’t think I’ll use it much because I use Launchbard to launch my apps.

Spreading four fingers apart (thumb + three fingers)

Shows your desktop. This used to be a three finger swipe down in Snow Leopard. Not sure why they changed this. A three finger swipe down does nothing in OS X Lion.

Two finger double tap

Zooms in on webpages and PDF documents and probably other apps.

Two finger pinch

Zoom in/out in images, webpages, PDF documents, just like on the iPhone/iPad/iPod Touch!

Three finger double tap on a word

Shows a dictionary definition.

Other features

Hold a key to insert accented characters

With Lion, you don’t have to dig around in the Special Characters window to type and è or and ü or whatever, you just hold a letter and an iOS style balloon with accented characters pops up!

Geeks

Pascal Altena — Mon, 18 Jul 2011 08:01:39 +0000

Marco Arment (Instapaper), in Build and Analyse #33 (slightly paraphrased):

To me, a geek is somebody who cares more than average people care about something.

I like that. Nothing about computers or D&D in there. This definition will stand the test of time. It also means that most people are geeks. Almost each individual I know, has something he or she cares about more than most people.

Sparrow mail

Pascal Altena — Sun, 10 Jul 2011 20:22:51 +0000

The past few weeks I’ve been testdriving Sparrow mail as my new mail client.

Some of the features that got me interested:

A georgeous, clean and uncluttered user interface that looks much like the Twitter for Mac interface, which I find very pretty and easy to use.
Gmail key shortcuts (“a” to reply, “e” to archive etc), very quick and easy
It supports multitouch gestures. I find that using Apple’s Magic Trackpad instead of a mouse makes using a computer a much smoother and more enjoyable experience, so I love this feature.
Multiple accounts. I have a few.
A unified inbox so I can see the incoming of all my accounts in one place.

There are some other neat features, for example it show the Facebook profile pictures next to the messages so I can quickly see who wrote the e-mail and has a Gmail style conversation view.

I have some gripes though

The undo feature doesn’t (always?) work yet, it seems. For example, when I accidentily archive a mail and want to undo to move it back to the inbox, I can’t do a simple Command + Z. Which brings us to my second gripe: If I want to move that accidentily archived message back to my inbox, I have to click the left lower corner “Labels” button and then, in the dropdown menu click on the Archive button, then locate the mail and right click it and choose “Move to Incoming”. Even worse, the Labels dropdown won’t work if the unified inbox is selected, so I first have to click the account to do this. Often I can’t remember in which account it was archived… Aaargh. Very annoying and a lot of mouse clicking. There are buttons for Sent messages and Drafts etc but not for the Archive. Why is that? There should be an Archive button there!

Update: Dominique Leca, one of the Sparrow developers, tweeted that undo is coming so they are aware of the undo problem!

Still…

Beside the two gripes I have, the interface and user experience is really amazing so I will keep using it. Sparrow is a very new app so I’m sure they’ll fix these little bugs and annoyances in the (hopefully near) future.

Want to try it?

Buy it. A few weeks back, you could try out a free version called Sparrow Lite but it seems like it is pulled from the App store. Not sure why they did this. Luckily the full Sparrow app only costs $9.99.

The Sparrow GUI compared to Postbox and Mail.app

To give you an idea of how clean and uncluttered the Sparrow GUI is compared to other Mail apps, check these screenshots (I blurred out some parts for security reasons):

Sparrow

Postbox

Mail.app

At least to me, Sparrow looks way prettier and cleaner!

Search smarter with Google

Pascal Altena — Sat, 18 Jun 2011 10:51:11 +0000

The basics

First, if you don’t already know most of them: learn the basics. A quick rundown (all search phrases look like this):

Search exact phrases with double quotation marks

"we're in bat country" is more specific than we're in bat country and will (hopefully) show you more relevant results.

Search within a site with site:

Googling bat country site:imdb.com will only search within imdb.com.

Exclude keywords by using a minus sign

Googling bat country -"Avenged Sevenfold" and all the pages that are about Avenged Sevenfold’s song “bat country” are excluded from the results. Notice the double quotation marks around “Avenged Sevenfold”. You can leave those out of course, but it adds more specificity.

Use the asterix sign to fill in blanks

For instance, you know how a line from a movie started and ended, but don’t know what goes in the middle. Try Googling don't stop * bat country and google will actually show the entire quote in bold in the search result pages.

Exclude synonyms with the plus sign

By default, Google will also search for synonyms and alternative spelling. While it’s a nice feature, sometimes you want to be very specific. Google +batcountry and it won’t search for “bat country” (with a space between the two words).

Using the OR operator

Google bat OR country will show you pages containing “bat” but not “country” and vice versa.

The “Tools and Filters” sidebar

I have lot of geeky, tech savvy friends, but for some reason I almost never see them using Google’s fantastic “Tools and Filters” sidebar. Read about it in detail.

The filters

At the moment of writing, Google let’s you search specifically for images, videos, news articles, shop pages, books (sometimes even inside books!) locations, weblogs/magazines, realtime content (Twitter and more), discussions on forums and articles, recipes and patents.

An example

Say we want to know what people are saying about this new mail application called Sparrow.

Before we start using the side bar, maybe we should first think about which search phrase to use. Just Googling sparrow will give us a lot of pages about birds and pirates. So we could Google sparrow mail to narrow it down a bit. We could go a step further and search for sparrow mail -bird -pirates but that might be a bit of overkill .

So, we have our Tools and Filters sidebar set to Everything Let’s choose Discussions (click More to expand the list of options). I get this (your search results may vary):

Google presents us with pages that are on discussion forums and blog posts with comments on them.

We could narrow the search results down further by using the tools that are under the list of filters. For instance, if we only want recently created/updated pages, we click the Past 24 hours under the Any time heading.

Each filter has different tool. I suggest you try them out for yourself!

Sooo…

I hope these tips are useful to you. If you have any suggestions of questions, please leave them in the comments!

Highly optimized images for the web in 3 steps

Pascal Altena — Thu, 09 Jun 2011 22:20:04 +0000

I used to think that image optimization for the web meant: “minimizing the image file weight in bytes without degrading the image quality to an unacceptable level, by using compression”. While this is certainly an important part of image optimization, there’s more to optimizing images for the web.

In this article, I’ll cover the techniques I use to make images load fast on a webpage.

Why optimize images for the web?

With more and more people having a broadband connection in their homes one might be temped to think there’s no real need to optimize image on websites. But consider this:

Mobile internet usage is increasing. It’s pretty fast, and will get a lot faster. But still it’s not as fast as most broadband connections. Especially HTTP requests take longer on 3G or slower networks.
Faster loading pages get a higher PageRank in Google
A faster loading page adds to a much better user experience and increases conversion rates.
It reduces bandwidth use, which can save you money if you run a high traffic website. Even a few kilobytes shaved of an image could potentially save you gigabytes of traffic (and money) each month.

Three steps to faster loading, lighter images for the web

Change the image content. Busy, colorful and detailed images are harder to compress. If possible, we could change the content of an image to make it more “compressor friendly”.
Reduce the number of image files you have to export. Less files means less HTTP requests. Each of which introduce a slight delay.
Choose the right file format and settings and export the images.

Let’s look at them in detail.

Step 1: Changing the image content

This isn’t something you can always do of course. For instance, for a museum site, you wouldn’t remove a few characters from a picture of Rembrandt’s “The Night Watch” just to make it compress better.

If a bitmap with a gradient is slightly grainy, chances are the image will not compress well.

Left, kinda grainy, it’s 10k. Right, no grain. 6k. Most people won’t even see the difference! So denoising or painting over bits in an image can really help. It will change the image slightly, but usually this isn’t a problem. In fact, often the image will look better!

Step 2: Reducing the number of HTTP requests

Here are several ways to reduce the amount of HTTP requests for images.
If you know more, please let me know!

Google’s sprite image

Use sprites

A sprite is one big bitmap file containing different design elements for the design of a page. Using CSS background-position, width, height and overflow properties the right part of the bitmap can be shown at the right place. Only one HTTP request is needed instead of one per every design element, eliminating a lot of delay. A good example is the image you see here on the right.

Read Smashing Magazine’s great article on using sprites in web development.

Here’s a fantastic web app for creating a sprite images + css with just a few clicks!

Embed images in HTML or CSS with inline images

Another way to get the number of HTTP requests down is to use inline images. The image data is embedded in the HTML or CSS, so no additional HTTP request is needed.

From the Wikipedia page:


CSS
ul.checklist  li.complete { margin-left: 20px; background:
  url('data:image/png;base64,↵
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/↵

//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U↵

g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat; }

Don’t use images at all

There are a lot of cases where you actually don’t need images. With technologies like Webfonts, SVG, CSS3 (rounded corners, gradients, box-shadow, text-shadow etc) it’s much easier to create good looking buttons and headings, all without images.

Most modern browsers support these technologies. Let the design of elements styled with these new technologies “gracefully degrade” in older, less capable browsers.

Read about webfonts.
The CSS3 Generator is a really useful tool.
Smashing Magazine’s article on CSS3 buttons (uses some bitmaps though).
CSS3 Gradient Buttons.

Photoshop & Fireworks

Chances are you either use Photoshop’s Save for Web feature or Fireworks’ Optimize panel and Export function to create your image for the web. Now I’m not going to do an extensive comparison test between Photoshop but I’ll tell you what gives Fireworks the edge:

1. Selective JPEG quality

In Fireworks, there’s a feature called Selective JPEG, with wich you can mask a certain area which can have a different quality setting than the rest. For instance, you could use a lower quality setting for a blurry background while using a higher quality setting for the detailed foreground, all in the same bitmap file.

2. Alpha transparent PNG8 files

Photoshop can only do 1 bit transparent PNG8 files. If you want an alpha transparent PNG, you have to use PNG24 in Photoshop. In most cases, saving a design element as PNG8 with alpha transparency insteads of PNG24 with alpha transparency can result in smaller files while maintaining the same appearance.

Differences in JPEG quality settings

It’s important to know that the quality settings differ in Photoshop and Fireworks. For some reason, exporting a JPEG in Fireworks at, say, 60% quality compresses the image a lot more than Photoshop Save for web 60%. Fireworks will give you a smaller file, but it has more visible artifacts and fringing too.

Also, for some reason a PNG24 exported with Fireworks is a bit larger in file size compared to a PNG24 created with Save for Web in Photoshop.

Step 3: Choosing the right file format and settings

Finding out which type of image format you should use is often more and art than a science. For the web, you basically can choose between JPEG, PNG and GIF. There are more options, but these aren’t supported by only a few browsers.

JPEG (lossy) or PNG/GIF (lossless)?

The rule of thumb is: Jpeg (lossy) for photographic material, gif/png (lossless) for text and graphics. If your image needs to have transparent bits, JPEG is out.

Still, I do recommend you experiment. For instance, in some rare cases saving text+graphics as jpeg at high quality settings gave virtually the same appearance (practically invisible artifacts and fringing) while having a much smaller file size. A good example of this are the large images in my portfolio (click on the photo frames). Most of them are high quality JPEGs, which look virtually identical to the PNG24 versions I had saved earlier. The only real difference was that the JPEGs were up to 200kb smaller!

Alternatives to JPEG

Jpeg2000 and JPEG XR, WebP are all alternatives for Jpeg. Since browser support for these formats isn’t too great I won’t discuss them here.

PNG8 or GIF?

Both GIF and PNG8 give you a maximum of 256 colors. I found that in 99% of the cases, PNG8 is a better choice than GIF in terms of file size. PNG also supports alpha transparency whereas GIF only supports 1 bits transparency (no translucent pixels, just on or off).

That said, Photoshop and Fireworks do allow you to save a lossy GIF which in some cases can give GIF the edge. Further, I could mention AnimGIF, but we buried that ancient bit of internet history next to the marquee and blink tag, right? . aPNG and MNG can do the same thing but browser support is lacking.

Compressing further

There are actually some ways to make the files that Photoshop and Firework or other similar software produce even smaller. Programs like PNGout, PNGcrush, OptiPNG, AdvPNG, JPEGOtim, Jpegtran and Gifsicle all do a great job at stripping out non essential bits and compressing even further, without a loss in quality.

I use ImageOptim, which is a GUI for the programs I just mentioned. It actually runs the same file through all these separate programs. Often it shaves of up to 40% off PNG files, sometimes even more! You’ll see smaller improvements in JPEGS, usually around 2 – 5%.

Wrapping up

Taking the time to do these optimizations can really pay off. I’ve seen cases where the image folder nearly was half its original weight, with a lot less files in it.

If you know of more ways to optimize images for the web, I’d like to hear them from you!