from flickr

from flickr

There might be a new ezeep Android app in the works

ezeep Android App Design | flickr

Can’t complain about the new ezeep office view

ezeep office view | flickr

Castle Garden | flickr

The problem with Photoshop is that what’s being created is actually a fiction. It somewhat resembles what the final product might look like, but it’s not real. Layout and typography decisions are made that often don’t translate accurately to HTML. We spend hours designing for a medium that’s interactive and responsive, but we start by producing mockups that are static and inflexible. If great design is not only aesthetics but also how it works, then it’s time to make development part of the creative process.

Go to source »
∞

from Instagram

from Instagram

from Instagram

from Instagram

from Instagram

I’m thrilled to announce that I’ll be joining the wonderful Berlin based startup ezeep as their new designer. I already had the chance to work with some very talented folks from the ezeep team and I can’t wait to see what awesome stuff we’ll come up with together.

This means I’m transitioning from solo freelancing & contract work to full time employment within a team. No bureaucracy, no invoicing, no joggling with many projects at the same time and no pyjama work dress anymore. Just pure design. And there’s this concept of so called weekends, where I’m not supposed to work. Crazy stuff.

from Instagram

It has been revealed the original iPhone was developed in a locked down building under the name “Project Purple”. Because of the secrecy involved, the team decorated the building with Fight Club references:

Forstall said that “on the front door of the Purple Dorm we put a sign up that said ‘Fight Club’… because the first rule of that project was to not talk about it outside those doors.”

If you don’t think this demands a wallpaper, you’re weird.

The full size I designed the wallpaper in is 3200x2048px. I don’t know why Apple uses 3200px as width for the default wallpapers in Mountain Lion but it seems a good width for now. And a height of 2048px makes this big size perfectly usable for the iPad 3 too.

Download

Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:

Download zip

• Desktop/rMBP/iPad 3 (3200×2048)
• Laptop/Nexus 7/Galaxy Nexus (1280×800)
• iPad (1024×1024)
• iPhone (640×960)

License

Project Purple by Matthias Kretschmann is licensed under a Creative Commons Attribution-Noncommercial 3.0 Germany License.

from Instagram

This film was a specific project to define how a particular type of satellite would move through space. Edward E. Zajac made, and narrated, the film, which is considered to be possibly the very first computer graphics film ever. Zajac programmed the calculations in FORTRAN, then used a program written by Zajac’s colleague, Frank Sinden, called ORBIT. The original computations were fed into the computer via punch cards [...]

Go to source »
∞

There’s this HTML element meant for marking up keyboard keys named <kbd>. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys.

The above picture might be blurry depending on the device you’re using so here’s a live rendered demo:

Light Dark iOS An dro id

They are completely styled with CSS3 so they’re sharp on all screens no matter how high the dpi. Have a look at the full demo or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you’re free to use it in any personal or commercial project.

Demo Download Github

Usage

CSS

Just drop in the kbdftw.css in your head:

<link rel="stylesheet" href="kbdfun.css">

If you want to use the Android key style, include roboto.css before:

<link rel="stylesheet" href="roboto.css">
<link rel="stylesheet" href="kbdfun.css">

You also need to add all the Roboto font files from assets/fonts to your project.

LESS

There’re some variables in the kbdfun.less file you can customize.

For the Android style, there’s roboto.less as include at the end. But the font files won’t load unless you uncomment the .font-roboto line in kbdftw.less. This is to make sure, users won’t download all the font files if you don’t use the Android style.

Markup

The default styling are light keys with Lucida Grande as font:

<kbd>Q</kbd>

becomes Q

Add a dark class to get the dark keys:

<kbd class="dark">Q</kbd>

becomes Q

Adding an ios or android class gives a replica of those system keys. Android uses three different colors on the default keyboard.

<kbd class="ios">Q</kbd>

becomes Q

<kbd class="android">Q</kbd>

becomes Q

<kbd class="android dark">Q</kbd>

becomes Q

<kbd class="android color">Q</kbd>

becomes Q

I've let the default display: inline intact so all padding on the kbd elements won't affect the line-height of the surrounding text. This leads to problems when you want to use them over multiple lines so just make them display: inline-block in this scenario.

Pro Tip: if you want to replicate all Mac keyboards after 2003 you have to get VAG rounded for the font.

Windows 8 and Internet Explorer 10 make it possible to pin your site to the Metro start screen as a new tile. The tile then is a bookmark to your site and you can control the icon and background color being used.

There was a great post about that in the H5BP issues section and Microsoft has a full explanation. It all comes down to this:

• create a 144x144px image with your logo/icon filling the whole canvas and a transparent background
• add two meta tags in the head of your site defining the image path and optionally the tile color
• as noted in the issue post, the image must be saved as a transparent 32bit PNG (“24bit” in Photoshop’s Save For Web dialogue) without running it through image optimisers like ImageOptim

While the size is the same as for the iPad 3 homescreen icon, I strongly suggest not using the apple-touch-icon for this. In fact, it might be best not using a full color image at all. Using a white monochrome version of your logo or icon will make your site’s tile blend in perfectly with the default Metro UI system tiles.

As an example, I just pushed the Metro tile image for kremalicious.com with those meta tags:

<meta name="msapplication-TileImage" content="/metro-tile.png"/>
<meta name="msapplication-TileColor" content="#015565"/>

When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen:

And this is how it looks like on the Windows 8 start screen:

As you can see, pinned sites always get a smaller, square tile. Sadly, the image somehow still gets resized which makes it really hard to create pixel perfect icons for it. It’s also not possible to horizontally center the image within it’s tile, placing the logo at the bottom of the image file ended up the same. That’s because the title can fill two rows.

And the image is only used on the start screen but not on the All apps screen where your site will get the default IE logo, at least with the defined background color:

The described behavior and screenshots are from the Windows 8 Consumer Preview and may change. I will update this article if there’s new stuff in the final version.

de Gennaro had been toying around with a scanned .gif version of the July 18th photo, using version one of Photoshop on his color Macintosh. The .gif format was only five years old at the time, but its efficient compression had made it the best way to edit color images without slowing PCs to a crawl.

The photo is quite horrible but so emblematic for a lot of stuff the web is used for today. As the article states, this was basically the beginning of fun on the web. But, although really not great, I don’t think Niépce’s photo was that horrible.

Go to source »
∞

People. 140-character messages. That’s Twitter.

So simple. So powerful. So fragile.

So leave it alone. We’re talking. Don’t interrupt.

But just rebuilding Twitter before it gets more “richer stories” and crammed by ads probably won’t help: We could build an open Twitter, but would anyone use it?

Go to source »
∞

Using a second unit, Steve Capps, one of Newton’s creators, showed how you could use it to order a pizza by moving topping icons onto a pie and then sending out a fax. In 1992, that was show-stopping stuff.

But instead of another Newton history article, this one is an interesting “hands-on assessment” of Apple’s first PDA. Almost 20 years after its release, Harry McCracken got himself a fully working MessagePad H1000 over eBay and tested it.

Would be interesting to know if the same could be done with an iPhone 4S or Galaxy Nexus in 2032. I doubt it.

Go to source »
∞

Files are abstraction layers around content that are necessary for interoperability. Without the notion of a File or other similar shared content abstraction, the ability to use different applications with the same information grinds to a halt, which hampers innovation and user experience.

A good example are all those note taking apps on iOS which usually only require plain text. When using Apple’s iCloud to sync their data, they lock your content into one app without any way to access this from another app. Compare that to apps using Dropbox for note syncing: I can throw as many apps I would like at my notes folder full of .txt files. The note app you’re using has some new quirks after the latest update? Just switch to another app. Apple’s iCloud syncing Notes.app having some new quirks after the latest update? Well, you and your content are doomed.

But the solution can’t be throwing a full file system at the user:

Now, I agree with Steve Jobs saying in 2005 that a full blow filesystem with folders and all the rest might not be necessary, but in every OS there needs to be at least some user-facing notion of a file, some system-wide agreed upon way to package content and send it between applications. Otherwise we’ll just end up with a few monolithic applications that do everything poorly.

Just applying the PC concept of a file system to post-PC devices, like Android and Dropbox did, makes only geeks happy but not the majority of users. While useful it’s still too abstract for most users. That’s why even Android kind of hides the file system, there’s no built in app to browse it directly. But at least Android has Intents, allowing users to send any data between different apps.

Apple already solved the problem of a file system being too abstract for users a long time ago, but without any app lock in. The Newton OS on MessagePads stored everything in object-oriented databases called soups. The “union soup” could be accessed by any app (“packages” to be exactly) on the system. Today, this is happening only rudimentarily on iOS, like when you start typing a recipient in Mail and it gets auto-completed from the Address Book data which obviously is only possible with Apple’s apps.

Soups took away the need of manual file management without cutting access to the content. iCloud needs to be the new soup.

Go to source »
∞

from Instagram

And it looks gorgeous. Here’s a detail screenshot of the admin area in 3.4 in full scale, taken on the iPad 3:

So if you’re a plugin developer you absolutely want to make sure to include retina assets for your plugin, like a double sized admin menu icon.

There’s just one problem: WordPress doesn’t include anything to make this easy for developers. The functions register_post_type() and add_menu_page() only allow you to define one image as menu icon which then gets inserted as img tag.

If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my WordPress icons template post or peek around in the github repository to see how this can be achieved.

And no, SVG for your icons are not the solution.

Digitally re-creating real materials and analog objects very quickly becomes aesthetics for aesthetics sake. It’s hard to believe that all but a minute percentage of Apple’s user base has a tan-suede–bound calendar or book of any sort, or anything else that looks remotely similar. Unfortunately, these are the characteristics of skeuomorphism that a vast majority of UI designers employ when they use this approach (see Blackberry’s Playbook). Ultimately, it encourages designers to become less critical and less inventive, which is detrimental to evolving new and improved solutions.

He argues skeuomorphism hinders designers in creating something truly innovative. Also, some good arguments on why Microsoft’s Metro interface isn’t the answer:

Sure, these graphic elements don’t use “superfluous” drop shadows and renderings, but they don’t really use space any more efficiently than many skeuomorphic iPhone apps. It is highly debatable whether they need to be as graphically dominant or whether the aesthetic form is purely driven by function. Metro’s graphic elements are largely abstracted representations of their function, so from a modernist point of view, it is interesting to think of what else could be stripped away to enhance their function.

Go to source »
∞

Photo on Instagram

Where are we at right now in terms of the best markup for using icon fonts? Let’s cover some options I think are currently the best. [...]

And our major goals here are:

1. As good of semantics as we can get
2. As little awkwardness for screen readers as possible

Spoiler: the key is to map the icons to the Private Use Area instead of “real” characters in the font files and injecting them with pseudo elements.

I’m using Font Awesome on this site which comes with icons mapped to PUA, so everything should be good for screen readers. Only concern to me are the quite ineffective CSS selectors like [class*=" icon-"] but this makes it nicely flexible.

Go to source »
∞

@Ofen- und Keramikmuseum Velten

Photo on Instagram

Recently, all of the ongoing discussion around responsive images just got real: a solution is currently being discussed with the WHATWG. And we’re in the thick of it now: we’re throwing around references to picture and img set; [...]

The markup pattern that gets selected stands to have a tremendous influence on how developers build websites in the future. Not just responsive or adaptive websites, either. All websites.

Naturally I’m in the picture camp, this just makes most sense to me.

Go to source »
∞

It is a case study of what can go wrong when a nimble, innovative startup gets gobbled up by a behemoth that doesn’t share its values. What happened to Flickr? The same thing that happened to so many other nimble, innovative startups who sold out for dollars and bandwidth: Yahoo.

As a year long Flickr user I’m just sad about this but hey, we got 500px which probably wouldn’t exist without Flickr’s decline.

Go to source »
∞

Comic Sans was NOT designed as a typeface but as a solution to a problem with the often overlooked part of a computer program’s interface, the typeface used to communicate the message.

There was no intention to include the font in other applications other than those designed for children when I designed Comic Sans. The inspiration came at the shock of seeing Times New Roman used in an inappropriate way.

He also has this presentation dubbed I hate Comic Sans (pdf)

Go to source »
∞

Here’s a template for designing your own icons for the admin area of WordPress including icons ready for Retina screens and some recommendations for the workflow of implementing these.

There are basically two scenarios where you really need custom icons for WordPress’ admin area: when creating custom post types and when creating option pages for a plugin/theme. No matter what case, at least 3 icons are needed if you want to get it right:

• two 16px icons for the admin menu, one non-colored and one colored icon for the hover state
• one 32px icon for the actual screen

And since the admin area gets constantly optimized for devices which happen to have high-dpi screens (like 3rd generation iPad’s Retina screen) it’s a very good idea to include double sized @2x assets for all the icons mentioned above.

So if you value quality and want pixel perfect icons in your admin area you need to create a total of 6 icon sizes.

The Template

I’ve put the template along with the implementation examples from the next section on github. You can just download the whole package right away:

Download Template & Code

GitHubDonate

Usage

The psd file in there has room for all the icon sizes mentioned above. As you can see, I’ve added an umbrella icon to better illustrate the various sizes. Turn on the “Icon Frames – White” layer to see the dimensions for each icon.

Additionally, I’ve added two shapes with base layer styles which resemble the default admin icon style. This is by no means a magic bullet to make every shape look exactly like a WordPress default icon. It’s just a starting point from where you can modify it for your own needs.

And because consistency is key, the default WordPress admin icon sprites are included as hidden layers for reference. Turn them on to make sure your own icon doesn’t look out of place.

The psd is sliced for multiple sprites. You’re of course encouraged to make only one sprite out of it, this just made it more universal for the following code examples. When you’re finished designing the icons just hide the background layers and use Save for Web in Photoshop to export the sliced areas. Running them through ImageOptim or something like that afterwards is a good idea.

Implementation, or: Ignore The Codex

While register_post_type() and add_menu_page() let you define a URL for an icon this doesn’t allow for controlling hover or @2x assets. That’s because this will put the icon as an img element into the menu as opposed to the icons for the built-in items (they’re css background images from sprites). Furthermore, WordPress will add a default opacity to all img elements in the admin menu, with 100% opacity only on hover.

So when using this template with all those icons, I suggest you use the following snippets in your functions.php instead. Yes, I’m telling you to ignore the codex. But this is the only way to get what we want:

• hover state consistent to WordPress default menu behavior
• control the display of the various image sizes for high-dpi devices with css media queries

So the following code just injects a stylesheet snippet into the <head> of all admin pages. This is a modification of Randy Jensen’s code idea.

You can always to refer to the inline commented versions of these snippets in the github repository.

Custom Post Type Icons

WordPress automatically puts an ID around your new menu item which contains the name of your custom post type (the $post_type parameter in register_post_type()). Just change this to your own post type name:

<?php
/**
 * Custom Post Type Icon for Admin Menu & Post Screen
 */
add_action( 'admin_head', 'custom_post_type_icon' );

function custom_post_type_icon() {
    ?>
    <style>
        /* Admin Menu - 16px */
        #menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
            background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important;
        }
		#menu-posts-YOUR_POSTTYPE_NAME:hover .wp-menu-image, #menu-posts-YOUR_POSTTYPE_NAME.wp-has-current-submenu .wp-menu-image {
            background-position: 6px -26px !important;
        }
        /* Post Screen - 32px */
        .icon32-posts-YOUR_POSTTYPE_NAME {
        	background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
        }
        @media
        only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (   min--moz-device-pixel-ratio: 1.5),
        only screen and (     -o-min-device-pixel-ratio: 3/2),
        only screen and (        min-device-pixel-ratio: 1.5),
        only screen and (                min-resolution: 1.5dppx) {
        	
        	/* Admin Menu - 16px @2x */
        	#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
        		background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
        		-webkit-background-size: 16px 48px;
        		-moz-background-size: 16px 48px;
        		background-size: 16px 48px;
        	}
        	/* Post Screen - 32px @2x */
        	.icon32-posts-YOUR_POSTTYPE_NAME {
        		background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
        		-webkit-background-size: 32px 32px;
        		-moz-background-size: 32px 32px;
        		background-size: 32px 32px;
        	}         
        }
    </style>
<?php } 

?>

Plugin And Theme Options Icons

The easiest way is to just use this markup on your option page before the page heading which is the default on all admin pages:

<div id="PLUGINNAME" class="icon32"></div>
<h2>My cool option page</h2>

This is the markup being addressed in the snippet block for option page icons. The icon32 class will make sure everything is aligned consistent to all other pages without redefining everything in css.

But since you control the whole markup of an option page there’s a much cleaner way without empty divs: just make the icon a background image of the page heading with some left padding applied and some fine tuning of height and line-height to get it consistent with other admin pages.

Putting your plugin or option page in the top level of the admin menu via add_menu_page() uses the same implementation as for custom post type icons, but with different IDs. And WordPress throws in a generic icon as a img element so we need to hide that to replace it with our background image.

So all this combined leads to this snippet:

<?php

/**
 * Option Page Icon for Admin Menu & Option Screen
 */
 
add_action( 'admin_head', 'option_page_icon' );

function option_page_icon() {
    ?>
    <style>
        /* Admin Menu - 16px 
           Use only if you put your plugin or option page in the top level via add_menu_page()
        */
        #toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
        	background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important;
        }
        /* We need to hide the generic.png img element inserted by default */
        #toplevel_page_PLUGINNAME-FILENAME .wp-menu-image img {
        	display: none;
        }
        #toplevel_page_PLUGINNAME-FILENAME:hover .wp-menu-image, #toplevel_page_PLUGINNAME-FILENAME.wp-has-current-submenu .wp-menu-image {
            background-position: 6px -26px !important;
        }
        
        /* Option Screen - 32px */
        #PLUGINNAME.icon32 {
        	background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
        }
       	
        @media
        only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (   min--moz-device-pixel-ratio: 1.5),
        only screen and (     -o-min-device-pixel-ratio: 3/2),
        only screen and (        min-device-pixel-ratio: 1.5),
        only screen and (                min-resolution: 1.5dppx) {
        	/* Admin Menu - 16px @2x
        	   Use only if you put your plugin or option page in the top level via add_menu_page()
        	*/
       		#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
       			background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
       			-webkit-background-size: 16px 48px;
       			-moz-background-size: 16px 48px;
       			background-size: 16px 48px;
       		} 
       		
       		/* Option Screen - 32px @2x */
       		#PLUGINNAME.icon32 {
       			background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
       			-webkit-background-size: 32px 32px;
       			-moz-background-size: 32px 32px;
       			background-size: 32px 32px;
       		}   
        }
    </style>
<?php } 

?>

Just replace the bits in the ID selectors with your stuff. If you have problems finding the correct ID selector just inspect element in the admin area.

Please note these snippets are just suggestions. I tried to make them as much universal as possible and tested them but depending on your project this could need adjustments. And obviously the css rules for high-dpi assets depend on a browser capable of CSS media queries but I guess all devices with such screens have modern browsers handling this.

But there are a lot of ways to improve on that:

• add these css rules to your own stylesheet if you’re using a custom admin area css file for your theme or plugin
• enqueue the snippets with wp_enqueue_style() and the admin_enqueue_scripts() action hook
• better yet, put them in a single stylesheet and enqueue them only on pages where they’re actually needed

License

All code snippets are under the GPL. The template psd is public domain, so you’re free to use and bundle this in any personal & commercial project without any requirements.

But if you’re super cool and want to catch some karma you place a link back to this release post (http://kremalicious.com/wp-icons-template) somewhere in your project or buy me some delicious coffee.

More Resources

If you need some inspiration for nicely consistent icons you should check out these great admin icons from Laura Kalbag.

And Julien Chaumond wrote a great piece, in his own words “less about the sizes, more about the style”. It’s a must-read: How to design a good native-looking WordPress Admin icon

It finally happened. After so many rejected revisions, so many pauses, so much coffee: kremalicious2 is here.

Reduction & Addition

Instead of a full site with the blog as one part, this is now a simple blog. No weird pages with subpages anymore. Just a blog with some topic archives.

The development process was and is a very agile one, so new features and changes will be incorporated as they happen. If it’s in the master branch, it’s live.

Mobile & Content First, Retinasized

The blog theme was designed from the inside out with a responsive, mobile first approach. I’ve gone from small screens first to bigger screens and started by designing the article single view before anything else. This is usually the moment where you may resize your browser window if you’re a design geek.

To make future maintenance a bit easier, I’m using the simple HS Responsive HTML/CSS framework I’ve recently created for a university but with some modifications. For instance, iPad users will get two different layouts in portrait and landscape mode easily by kind of misusing the iOS rotation scale bug and using a media query breakpoint of 769px. Yes, I know, this breaks the no-single-device-targeting approach but by now there’re more readers visiting this site from an iPad than with Internet Explorer or Linux so this seemed appropriate.

Typography

After much experimentation, all fonts (that is, those for texts) on this blog are now coming from TypeKit. The body text is set in Rooney Web from Jan Fromm which looks just gorgeous on Retina screens. All headings & buttons use Adobe’s Cronos Pro.

Sadly, Typekit only works in webkit based mobile browsers which is a real bummer. Sorry Firefox & Opera users on mobile devices.

Icons

All icons on the site are coming from the awesome icon font Font Awesome made by Dave Gandy. But the original font was missing some needed glyphs so I’m using a fork called Font Awesome More from Gregory Loucas (@gregoryLpaul). This makes things like changing icon colors so much easier but using icon fonts still has the problem of small icons not rendering super crisp, although font-smoothing: antialiased helps a bit.

CSS beats Images

The whole interface is mostly CSS based, only the logo typeface with the cloud and the body background texture are images. Embedded in the css file as data-URIs to save server requests. Those 2 images have their Retina sized equivalent on high-dpi devices (everything above factor of 1.5).

But even those @2x assets are just blurry when the user zooms into the interface. But with most interface elements being css or font based you can zoom in ridiculously without anything becoming blurry. That’s actually a scaled down full size screenshot of a zoom in on the 3rd generation iPad:

Needless to say this introduces new problems, especially for performance on mobile devices. As we know, current mobile devices and their browsers come into memory problems when told to render a lot of css box-shadows or css gradients. This all isn’t noticeable on Desktop devices or an iPad 1, but it’s quite noticeable in the Android stock browser on a Nexus S for instance.

For the content images I currently have no special technique in place except for WordPress creating a lot of different image sizes. And I make bad stuff like letting the browser resize bigger images on the fly. I value image quality over bandwidth savings and this way images look super crisp on high-dpi displays.

Fuck Yeah, WordPress

In the backend this is all still running on WordPress. For the WordPress theme I used roots as a starting point but reduced everything in it dramatically. And my theme includes numerous tricks to make my blogging life easier. Depending on the content type a lot of different featured image sizes are being generated in the background and displayed throughout the different views. For the link & photo posts I’m using WordPress’ built-in Post Formats feature, greatly enhanced by the Post Formats Admin UI from Alex King.

If you want to peek around in the theme files, you can head over to the kremalicious2 github repository:

kremalicious2 repository

The blog stream got more content types. Apart from normal posts, links and photos will be added to it.

Link posts

Link post means a short comment from me to a valuable or interesting resource where the post title is linked to the original source. I put them in topics just like all the other articles.

Photo posts

Photo posts are my new favorite: beside selected images from my Flickr and 500px profiles, they include automatic posting of my Instagram images. After being taken, a new Instagram image is posted immediately as a special styled photo post in this blog.

And I didn’t wanted to clutter the blog stream in times when there’re a lot of photo-only posts between text based posts.

So all photo posts which immediately follow one another are grouped together in a grid, nicely laid out by jQuery Masonry. I couldn’t figure out a way to make this filtering on the WordPress loop level for now so this grouping is done with jQuery after page load.

Topics

The navigational concept only includes filtering of the stream by topic and those categories are greatly reduced compared to before. Some topic pages are styled differently, like the goodies and the photos archives.

Dates are so 2004

I saw no reason to include a prominent date along with a post title. Besides, I use my blog posts in a more wiki-like style, adding to them and updating them long after they have been published. That’s why I’ve banned the date for a post to the very bottom of it. AI also removed all date references from the post URLs.

Comments

I’ve decided to keep this functionality intact but hide the whole comment section under each post by default. This is a compromise between those users seeing comments as interface clutter and those valuing comments in blogs. The whole comment section is even taken completely off the DOM on page load with jQuery’s detach(), only clicking/tapping the comment section heading will bring them back.

Subscriptions

RSS Feeds

The RSS feeds for posts and comments have been moved to Feedburner. You can just use kremalicious.com/feed/ or kremalicious.com/comments/feed/ or use the new Feedburner URLs:

Posts feed Comments feed

Currently it looks like Google has some problems recognizing kremalicious.com/feed as the replacement for www.kremalicious.com/feed so it may show you multiple entries if you search for it in Google Reader.

Twitter & Google+

I’ve created a special Twitter account where only posts from the blog get tweeted. So in case you think I’m blabbering too much over my personal Twitter account but still want to be one of the first to know about new blog posts on Twitter, this new Twitter account is the perfect solution. And the same goes for the new Google+ page:

@kremaliciouscom +kremalicious

Please be aware that it’s not possible to follow the Google+ profile link on mobile devices. But you can just search for kremalicious in your Google+ app.

The Twitter account or the RSS feed are also perfect for adding to Flipboard, all the new photo posts look amazing in Flipboard.

Google Currents

I’ve submitted the blog as a Google Currents Edition. If you’re using the Google Currents app for your reading pleasure, I would be happy if you subscribe to the kremalicious Edition over there:

kremalicious Currents Edition

And that’s it. If you find any quirks or bugs drop me a note in the comments, @kremalicious or file an issue on github.

Go to source »
∞

The truth is when working on mobile you should always look at the site analytics and make smart decisions based on what you find. If you find that your mobile users use the site in a significantly different way than desktop users, check out Nielsen’s guidelines and see which apply to you. And if you find that your mobile users are accessing the same content as desktop users then consider a responsive design.

Go to source »
∞

Go to source »
∞

This years winner, dubbed Photo Of The Year 2011, comes from Spanish photographer Samuel Aranda.

Go to source »
∞

from Instagram, posted with Instagrate to WordPress

Giving people the right to roam freely over publicly funded research will usher in a new era of academic discovery and collaboration

If you ever worked in an academic environment or just wanted to read some scientific studies, you probably know this is currently an outrageous mess, not only in the UK. Because most research gets published in very expensive journals and magazines, a huge amount of publicly paid academic research and its outcome can’t be accessed by the public.

So yes:

Moving from an era in which taxpayer-funded academic articles are stuck behind paywalls for much of their life to one in which they are available free of charge will not be easy.

But they basically have Jimmy Wales on board, so it looks like this isn’t just the usual politician jibber-jabber.

Go to source »
∞

We wanted to provide a real alternative to Adobe’s Photoshop or Fireworks and we believe we have succeeded. It’s an ambitious goal for sure but if you’ve been using Photoshop’s vector capabilities combined with Layer Styles, we think we may have something better.

Go to source »
∞

It turns out that one of the engineers liked my idea so much that he left the bar sometime past midnight, returned to the office and implemented the blink tag overnight. He was still there in the morning and quite proud of it.

Go to source »
∞

from Instagram, posted with Instagrate to WordPress

But this time it’s a bit complicated, let me explain.

Problem No. 1: Navigation Controls

The suggested top placement in the Android Design Guidelines was an answer to a typical Android specific problem: the very bottom of Android apps is reserved for on-screen navigation buttons, originally capacitative off-screen buttons. And those can get triggered accidentally when reaching tabs in a tab bar at the bottom of the screen. Let’s dub this problem no. 1.

Now I’m usually all for breaking the rules because that’s the only way innovation can happen. But this breaking needs to be thoroughly thought through and involves a deep understanding of the rules being broken. While a lot of iOS ports just use the bottom tab bar out of habit and non-thinking, Tim and the Instagram guys don’t fall in this camp.

Problem No. 2: Longer Screens

The usage of a bottom tab bar in Instagram for Android is an answer to a relatively new problem which isn’t incorporated in the Android Design Guidelines: bigger screens, or more precisely longer screens, make it very hard to reach tabs at the top of the screen when holding the device with one hand. When looking at all those new devices it seems clear screen sizes above 4″ are now the norm for Android. This is problem no. 2.

In my view it all comes down to balancing those 2 problems against each other and, as said on Twitter, Tim decided to value problem 2 over problem 1:

on the Galaxy Note it’s impossible to get to the tabs with one hand if they’re on top.

— Tim Van Damme (@maxvoltar) April 3, 2012

And I’m afraid he’s right: it’s just more important for users to reach the tabs with one hand than preventing them from accidently triggering the OS buttons. When an app has a tab bar it’s usually the main element to navigate inside an app so it’s crucial to reach those elements very fast. Also problem 1 is less of a problem on devices like the Galaxy Nexus with its on-screen buttons, they just don’t get triggered by accident so easily as those off-screen capacitive buttons.

A way out

So we really need to rethink this specific guideline but this doesn’t have to be just the decision between top or bottom placement of tabs.

There’s another way out to solve both problems: Combining scrollable & fixed tabs. This is already used by Google in ICS’s built-in Phone and People app (thanks Jake!). And Instagram for Android could have used the same fixed tabs on the top of the screen but combine them with a swipe left/right gesture to navigate between those tabs. (Per guideline a swipe view needs to get a corresponding scrollable, text-only tab bar)

Here’s a quick mockup:

Users wouldn’t have to reach for the tabs to change views and nobody would accidently trigger the OS buttons at the bottom. The active states of the current and new tab item could fade corresponding to the swiping, same goes for the title of the current view in the very top bar. Another way could have been to split action & navigation tabs like Guenther Beyer did in his mockup.

Photo on 500px | Photo on Flickr

Today I finally launched v2 of my personal site, still following the concept of a business card web site but with a portfolio added to it. You should totally have a look.

Who needs images anyway

One goal was to use as less images as possible. Yes, it would have been easier to just use images instead of like 10 box-shadows on one element but this wouldn’t have been any fun. And no matter what retina/high dpi devices come up next all interface elements will look just as sharp without any additional work.

Apart from the colored top background, the logo and the subtle background texture there’re no background images in use. All the other visuals were created with a lot of CSS3 & pseudo elements. Pseudo elements were the perfect technology so the markup doesn’t get cluttered with dozens of empty divs, spans etc. which would only serve a styling purpose.

All icons on the site are coming from an icon font (the wonderful IcoMoon) embedded with @font-face.

Mobile & Modern First

For the front-end development I’ve followed a mobile devices & modern browsers first approach. Therefore the site should look great on many different devices & screen sizes. As a starting point I used a combination of the 1140grid and 320 and up.

That’s of course all done by media queries with breakpoints at 600px, 768px and 992px. During my testing those rather weird values turned out to work best for this simple layout. The layout only changes at 600px & 768px, the 992px is just used for some different css animations. And yes, I’m aware of the irony targeting fixed values here although everything else uses relative values.

But it’s interesting to see how different the rendering of the site is in some mobile browsers. Here’re some unmodified screenshots of the site in various mobile browsers on iOS 5 & Android 4:

• iOS – Mobile Safari (iPhone 4S)
• iOS – Mobile Safari (iPad)
• Android – Android Browser (Nexus S)
• Android – Chrome beta (Nexus S)
• Android – Firefox (Nexus S)

Notice the weird banding of the gradients in Firefox. And Android either ignores the min-device-pixel-ratio media query altogether or has just problems with the background-size css property.

Animations

All animations were written as CSS animations/transitions first. So in modern browsers you can disable JavaScript without losing most of the animations. And those animations are buttery smooth because they’re hardware accelerated. You wouldn’t notice the difference between a CSS- and jQuery-based animation on a desktop device (except if you’re on a shitty netbook) but it makes a great difference on all those ARM devices. For not so cool browsers Modernizr & jQuery are kicking in to compensate for the lack of css animation support.

Except for the standard Android browser. Although the current version supports css transitions & animations it just wasn’t possible to animate something smoothly here. I suspect this is caused by all the portfolio images on one page. Many images on a site always let this Browser capitulate, even on Android 4.0. So I’m being totally bad here, sniff for that particular browser and disable the animations for it. Please address your anger towards Google for that. Or just use the Chrome beta which works perfectly fine with images on a website.

Interesting side note: while Webkit-based browsers are usually the best bet to fully render all the effects on the site, they still lack css-animating pseudo elements. That’s why the shine animation of the top plate on start and the drop shadow change of the social network “balls” are only smoothly animated in Firefox.

If you’re interested, here’re the non-minified versions of the main css file & javascript file.

The touch hover problem

A common pattern for stuff which can be revealed by hovering over something on desktop devices is to just make everything visible by default on touch devices. But I didn’t wanted to clutter the portfolio items by adding buttons/text links or whatever around them.

So this led to a problem for touch users because it isn’t immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough.

So I incorporated a visual hint for the other half: If a user on a touch device hasn’t tapped on an item yet a subtle touch indicator starts pulsating over each item after 30 seconds.

One More Thing

If you get bored, shake your Post-PC device. On Desktops, try entering Twitter’s first prototype SMS shortcode on the keyboard. Nuff’ said. (could be a bit rough at the moment, be warned)

Finally many thanks to all my beta testers, you greatly helped in finding all the small quirks so the site got more usable in the end.

If you’re interested in all the other components used on the site just open up the Colophon at the end of the site. And did I mention you should have a look?

http://matthiaskretschmann.com

Made a quick WordPress plugin which transforms the standard WordPress update & comment notification badges into iOS-styled ones.

The badges are CSS only (box shadows, gradients, pseudo elements, you name it) and were tested in current versions of Safari, Chrome & Firefox. It should degrade gracefully in older Browsers with some details missing like drop shadows or the highlight shine. If you care for how it’s done exactly, you can peek around in the css file on github.

The plugin is localized in english & german, which is only important for the settings page.

Download & Installation

You can just install the plugin via the automatic backend installer under Plugins > Add New, activate and enjoy the red badges.

Plugin Page Github Donate

The plugin is hosted on github and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:

1. Upload the badged plugin folder to the /wp-content/plugins/ directory
2. Activate the plugin through the Plugins menu in WordPress
3. Enjoy
4. (optional) Adjust options under Settings > Badged. Upon activation the plugin sets both options by default:

If you find any problems you can open an issue on Github or just drop me a line in the comments or on Twitter.

Version History

v0.3.6

• tested for WP 3.4
• settings page: Retina ready icon for high dpi devices, css only submit button
• updated german translation

v0.3.5

• IE 8 improvements: box shadow, light gradient through DXImageTransform filters (but no rounded corners, sorry)
• current versions of IE & Opera are now among the tested browsers
• updated settings page links

v0.3.4

• more descriptive readme and settings footer with links to blog post & github page
• updated translation

v0.3.2

• Make the plugin work if symlinked

v0.3

• initial beta release

v0.2

• added options to control whether the badges show up in admin menu or toolbar (default is both)

v0.1

• initial alpha release

The good thing is it looks really cool, the bad thing is I can’t use the screen anymore.

Photo on Flickr

dates ranging from 16th – 19th century

Photo on Flickr

Thanks Dad!

Photo on Flickr

Being a kid again and enjoying the package of a present (Thanks Dad!)

Photo on Flickr

Don’t know where to start outlining why this is an awesome geeky bag

Photo on Flickr

Be careful: your mind will get blown when you stare at it for too long. TMA-1 Action Figure from ThinkGeek

Photo on Flickr

Putting stuff under my coffee, iOS style. That’s the “Home Set” from iphoneappscoasters.com

Photo on Flickr

Must be socialist Helvetica or something

Photo on Flickr

Still needs a cut

Photo on Flickr

Burg Giebichenstein Hochschule für Kunst & Design Halle Jahresausstellung 2010, Campus Design

Photo on Flickr

The recent Futurama episode “Attack of the Killer App” mocked a phone and a company you probably all have heard of. I’ve made some wallpapers with the logo of MomCorp presented everywhere in this episode.

The wallpaper comes in four versions with two color variations and two text variations with Mom’s favorite tagline. Here’s an overview:

Download

You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:

Download v1.0 | zip

Lost in this gorgeous figure. East Indian Rosewood, FTW!

Photo on Flickr

So, what to do when everyone seem to release iPad icons but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here’s my take on the smaller sizes of an Apple iPad icon, called iPixelPad in the sizes 48px, 32px and 16px. Everything drawn pixel-perfect from scratch. Heck, even the wallpaper.

They also come in two different versions for each size: with a matte highlight shine and with a harder gloss.

And drawing the homescreen icons was quite funky and if you know the standard iPhone icons I bet you can guess what icons you can see here and in the icon files, at least in the 48px and 32px versions:

The homescreen icons pixels in the 16px version needed all more vivid colors to get them distinguishable from the wallpaper background so they’re a bit different from the other sizes. These are the times I wish I could modify just half a pixel.

Download

The icons come in various formats: iContainer, ICNS, ICO and PNG files for each size. Just click the following download button to grab the whole pack:

Download v1.0 | zip

License

iPixelPad by Matthias Kretschmann is licensed under a Creative Commons Attribution-Noncommercial 3.0 Germany License.

1. Activate The Feature

For whatever reason you first have to activate the feature with an entry in your theme’s functions.php file in order to get the Post Thumbnail box in the Editor.

So just open up your theme’s functions.php file in your favorite editor or create it if there’s no such file in your theme folder. Add this little code snippet to this file:

add_theme_support('post-thumbnails');

For backwards compatibility you should wrap this inside a function check for the new add_theme_support:

if ( function_exists( 'add_theme_support' ) ) 
  add_theme_support( 'post-thumbnails' );

This makes sure WordPress installation prior to 2.9 won’t get screwed up when using a theme with this new feature.

2. Add A Post Thumbnail To Your Post

After you’ve added the above mentioned code into your functions.php file there should be a new Post Thumbnail box in the WordPress editor view on the right side.

In this box click on the Set Thumbnail link and the usual Add Media dialogue will pop up where you can choose an image from your Media Library. At the end of the dialogue for the selected image there’s a new link beside the Insert into Post button called Use as thumbnail.

Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the Use as thumbnail link is missing in the dialogue which appears after uploading an image, it’s just there if you browse your Media Library.)

You can close the media dialogue now and you will see the image in the Post Thumbnail box:

3. Display The Post Thumbnail In Your Theme

Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your index.php file:

<?php the_post_thumbnail(); ?>

This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as:

<?php the_post_thumbnail('thumbnail'); ?>

But of course you can grab the other sizes WordPress automatically creates when you upload an image:

<?php 
  the_post_thumbnail('medium'); 
  the_post_thumbnail('large'); 
?>

(Note: Matt left a comment on WP Engineer stating he wouldn’t recommend using these named arguments but provided no explanation for it yet.)

The code will output a generic <img /> tag with a class of wp-post-image. Needless to say this is what you can select with css to style just the post thumbnails further:

.wp-post-image { border: 2px solid #ccc; } 

Custom Output

If you want to adjust the generated output of the <img /> tag you can do this by using some array stuff. So let’s say you want to have the post thumbnails to be 200x200px big and another class assigned to it, you can extend the template tag like so:

<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>

If you want to add more than one class you can do this like so:

<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?>

And you can add any attributes to the <img /> tag like a title, rel or an alt attribute. For accessibility reasons you should always add at least the alt-attribute:

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>

As for the title attribute this will be grabbed automatically from the entry you’ve made in your Media Library during the upload process but you even could override this too:

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>

Respect Media Settings

Finally if you want to respect the custom sizes you or your users have set under Settings > Media you can first grab those sizes with get_option function and then put it in the array:

<?php 
  $width = get_option('thumbnail_size_w');  // get the width of the thumbnail setting
  $height = get_option('thumbnail_size_h'); // get the height of the thumbnail setting
  the_post_thumbnail(array($width, $height), array('class' => 'alignleft')); 
?>

You can also detect the Media settings for the other sizes and whether the crop setting is active or not:

<?php 
  get_option('medium_size_w');  // Width of the medium size
  get_option('medium_size_h');  // Height of the medium size
  get_option('large_size_w');   // Width of the large size
  get_option('large_size_h');   // Height of the large size
  get_option('thumbnail_crop'); // Check for crop, On=1, Off=0 
?>

4. Make It Bulletproof (a.k.a. Backwards Compatible)

With the check in your functions.php at the beginning there’s already ensured old WordPress installations will just skip this feature. But there remains one problem and before you just go ahead and update your theme(s) think about it: the old content in your blog doesn’t have a post thumbnail assigned to it through this new feature. You don’t want to have you or your theme users update all their older articles, right? And if you already use some sort of post image hack there’s probably a special function in your theme which does that.

So it’s a pretty good idea to make this backwards compatible with some quick if else voodoo, code shamelessly adapted from WP-Recipes:

if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { 
  the_post_thumbnail(); 
} else { 
  $postimage = get_post_meta($post->ID, 'post-image', true); 
  if ($postimage) { 
    echo '<img src="'.$postimage.'" alt="" />';
  }
}

This first checks if the feature exists and if a post thumbnail was addd with this new feature. If it was, it simply returns the post thumbnail. If not, it falls back to whatever you’ve used in your theme before, the usual way is to check for and get the value of a special custom field named e.g. post-image and output it. You can add whatever you’ve used before inside the else statement. Et voilà, it’s nicely backwards compatible now, yay!

5. Resources And More Information

• WP Engineer: About WordPress Post Thumbnail
• WP Engineer: The Ultimative Guide For the_post_thumbnail In WordPress 2.9
• WP Recipes: WordPress 2.9 : Display post image with backward compatibility
• Justin Tadlock: Everything you need to know about WordPress 2.9’s post image feature
• Chris Harrison: Post Thumbnails in RSS Feeds
• Technosailor: 10 Things You Need to Know About WordPress 2.9

Well and that’s it. I would love to link to some smart WordPress Codex pages for these new template tags but at the time of this writing there simply isn’t anything in the Codex about this.

As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you’ve finished voting and making your next coffee or tea you could subscribe to my RSS-Feed, discuss this article or buy me my next coffee

Delibar from Shiny Frog is a delicious.com desktop client for OS X which sits in your menubar and gives you quick access to your bookmarks on delicious. But the default menubar icon and the other interface icons look quite disturbing so I’ve made these simple replacement icons for the Delibar interface.

Please Note: Shinyfrog released a refreshed version of Delibar which sports a nice and completely different UI. So using these icons here along with this new version is probably no good idea

Download

Just head over to my Goodies page or click the following download button and grab these replacement icons.

Download v1.0 | zip

Icon Usage

We’re going to replace the default app resources so you should do a backup of the Delibar app or just download a fresh copy from Shiny Frog if anything goes wrong or looks weird.

1. Close Delibar if it’s running
2. Ctrl + click or right-click on the Delibar app in your Applications folder and choose Show Package Contents
3. In the opened Finder window browse to Contents > Resources
4. Drag the contents of the Icon Resources folder from the download package into this place, replacing the current files
5. Start Delibar and enjoy!

Here’s a new desktop goodie for your pleasure. It’s a replacement dock icon for the popular Mac IM client Adium following the style of atebit’s excellent Tweetie for Mac icon.

While the Tweetie Mac icon (and it’s UI) was discussed quite controversial (which caused some very nice Tweetie replacement icons to appear, like here, here, here or here), I grew to like the style of it. But Adium beside Tweetie in the Dock just looked weird… (No offense, Adam ) So I redrew the whole icon and used Adium’s duck silhouette on it and made some obvious and subtle changes in comparison to the Tweetie icon. And thanks to Loren who kind of rubber-stamped this icon release.

The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16px and as an Adium dock icon package. This icon package uses some more icons (just 128px each) for the different states of Adium (online, offline, alert etc.) and includes the application icon too.

Download

Just head over to my Goodies page or click the following download button and grab this icon while it’s hot.

Download v1.0 | zip

Adium Icon Usage

Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium’s preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder.

The icon is free for your personal use and I hope you’ll enjoy it. If you do, don’t forget to spread the word via Twitter and all your other favorite social media sites.

Oh, and for best look and karma you should buy a license for Tweetie right away

Here’s a quick twitter icon for use on your websites which is kind of a by-product from one of my last projects. But I would consider it a waste to just bury this deep in my filesystem so I think it’s best I’m throwing this out to you.

This icon comes in various formats (PNG, ICNS, iContainer) and in 4 different sizes (128px, 48px, 32px, 16px) with each icon size redrawn (of course). Just head over to my Goodies page or click the following download button and grab these icons while they’re hot.

Download v1.0 | zip

Use them on any web project you like and/or convert them into a send to twitter link. Have fun!

These icons are free for all your personal and commercial projects following the Creative Commons Attribution-No Derivative Works 3.0 License. All I’m asking you is to link back to this URL if you use this twitter icon:

http://www.kremalicious.com/2009/06/twitter-crisp/

Twitter Crisp Icon by Matthias Kretschmann is licensed under a Creative Commons Attribution-No Derivative Works 3.0 License.

Ever wanted to include those sharing links to social or bookmarking sites so users can easily submit your content to these sites in a WordPress site or any other platform? Then you might have experienced a rather time consuming search odyssey to get those links. But fear no more! In this article I’ve provided a huge collection of all the links to your favorite social sites compiled in two handy Coda Clip files in a plain and a WordPress version. And the non-Coda users can download an html file with all the links included.

Additionally you’ll find a huge list within this article with the separated links in two versions for each site. And finally I’ve put together a quick tutorial for using buttons or icons with these links. This way you can easily add content submit/sharing links to your sites in no time.

Quick Navigation

• 1. Coda Clips Download
• • 1.1 Bonus: Coda Clips Icon
• 2. Usage
• • 2.1 Share Links
  • 2.2 Share Links (WordPress Edition)
• 3. Quick Tutorial For Using Icons With These Links
• • 3.1 Use The <img /> Tag Element
  • 3.2 Use CSS Background Images
• 4. HTML File Download And All The Links Separated
• 5. Please Jump Around, Then Spread The Word

1. Share Links Coda Clips Download

Also all links are plain html code and therefore the non-JavaScript versions of the various social sites’ submit capabilities. While most social/bookmark sites have some kind of tool section where they explain the use of their API near all of them want you to use JavaScript to access their API and submit your content to them through the use of a link on your website.

But I think you don’t want to load tons of scripts on your websites if you include links to tons of sharing sites. So mostly all links to submit your content to various social/bookmark sites can be realized in plain HTML as a generic a href link and that’s what is provided here.

To make this a bit more straightforward I provide these links compiled within two Coda Clip files for use with Panic’s Coda. While the first clip group contains all the plain link snippets the second group includes those snippets for use with WordPress. Just download and add them to your Coda Clips collection:

Download Share Links Coda Clips v1.0 | zip | 448kb

Included are a total of 40 share links per clip group for the following social/bookmark sites. This list uses the links provided in the Coda clips so you can test them out here with this article :

Delicious, StumbleUpon, Facebook, Twitter, Digg, Design Float, Reddit, Technorati, Yahoo Buzz, Newsvine, Magnolia, Google Bookmarks, FriendFeed, Blogmarks, MySpace, Script & Style, Blinklist, Slashdot, LinkedIn, Windows Live, Furl, Yahoo Bookmarks, Mixx, Propeller, Yigg, Mr Wong, Diigo, N4G, Current, Simpy, Oknotizie, Care2, Faves, Meneame, Fresqui, Funp, Kirtsy, Dealspl.us, Xanga, Sphinn

1.1 Bonus: Coda Clips Icon

There’s no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I’ve just made the 256px icon a bit sharper than the equivalent other coda file type icons.

If you download the above Coda Clip files this icon is already applied on the clip files but here’re just the icon files (icns, folder, iContainer, PNGs):

Download Coda Clips Icon v1.0 | zip | 834kb

2. Usage

Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it.

That’s because both collections have their placeholder selection (the ) located where the link text would be:

<a href="" title=""></a>

As you can see I’ve also included the link title value usually with the name of the specific social site. Also I’ve already encoded all the entities so there shouldn’t be any (X)HTML validation errors when using these links in your projects.

And depending on which collection you use additional steps need to be done:

2.1 Share Links

Everything you need to replace for yourself is written in capital letters:

YOUR URL
Here you have to provide the URL you want to have submitted when users use your share link.

YOUR TITLE
For all social sites this title has to be URL-encoded to work correctly. So be sure to replace everything like spaces, punctuation, etc. with their equivalent URL-encoding (e.g. %20 for a space). Here’s a reference for this.

Apart from that some sites allow you to add and submit more informations than just the URL and the title and those things are also written in capital letters. Also I’ve included some usage comments where necessary like in the Digg link.

2.2 Share Links (WordPress Edition)

The WordPress edition of these share link collection includes some WordPress php bits for dynamically creating the whole submit URL so there’s no need to manually edit most of the links. The WordPress template tags used are:

<?php the_permalink();?> to create the URL dynamically depending on the article under which you have included the share and submit links.

<?php the_title(); ?> to dynamically create the title which is used when your content gets submitted to one of the sites.

Anyway as I’ve said above some sites allow more to submit here and you’ll find this also in capital letters. You have to adjust them manually too.

3. Quick Tutorial For Using Icons With These Links

I’ve also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS:

3.1 Use The <img /> Tag Element

Just include an img element wrapped inside the link tag, like so:

<a href="http://del.icio.us/post?url=http://YOUR URL&amp;title=YOUR TITLE&amp;notes=YOUR NOTES" title="Save To Delicious"><img src="delicious.png" /> Delicious</a>

And if you want to just use an icon with no text use just an img element without providing any link text:

<a href="http://del.icio.us/post?url=http://YOUR URL&amp;title=YOUR TITLE&amp;notes=YOUR NOTES" title="Save To Delicious"><img src="delicious.png" /></a>

3.2 Use CSS Background Images

To me a more cleaner solution is to use the css background-image property to include the icon images. Just add a class or an id to every share link like so:

<a class="delicious" href="http://del.icio.us/post?url=http://YOUR URL&amp;title=YOUR TITLE&amp;notes=YOUR NOTES" title="Save To Delicious">Delicious</a>

And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won’t overlap the icons:

.delicious {
	background: url(delicious.png) no-repeat center center;
	padding-left: 20px;
}

If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon:

.delicious {
	width: 16px;
	height: 16px;
	background: url(delicious.png) no-repeat center center;
	text-indent: -999999px;
}

4. HTML File Download And All The Links Separated

Sadly Coda’s clips aren’t in a portable format (Panic guys, consider this is a feature request!) so here’s a comprehensive list for the non-Coda users of all the links included in the above Coda Clips with plain and the WordPress version for every site. This comes as a downloadable stripped-down HTML file (meaning there’s no HTML site structure included) and as a long list within in this article. First, here’s the HTML file download. Just open this locally in your browser or in your favorite editor:

Download Share Links HTML File v1.0 | zip | 104kb

And here’s the huge list with all the share links in case you quickly want to grab just one of them. But be warned that this is a huge list so this is hidden by default.

Just click the Toggle All Links button to reveal them and click it again to hide the whole list again. If you want to import one of these links into Coda you can just use the Coda Clips bookmarklet created by kyle, as he points out in the comments.

↓ Toggle All Links ↓

<!-- Digg This Link 

	Usage:
	--------------------------------------------------
	url		: URL-encode all strings as appropriate. 
			  For example: 
			  http%3A%2F%2Fyourwebsite%2Fyourstoryurl.html
			  Maximum length is 255 characters
	title	: Also URL-encode the story title
			  Maximum length 75 characters
	bodytext	: Also URL-encode the body text
			  Maximum length is 350 characters
	media	: default is news, choices are news, video or image
	topic	: only one category
-->
<a href="http://digg.com/submit?url=YOUR URL&
title=YOUR TITLE&
bodytext=YOUR DESCRIPTION&
media=NEWS, VIDEO or IMAGES&
topic=TOPIC&thumbnails=1" title="Digg This">Digg</a>

5. Please Jump Around, Then Spread The Word

If you ever wanted or had to include such sharing links manually in your sites and searched hours for those you should already have recognized the value of this article and if not already happened you can now jump around to express your enjoyment. After this you should immediately bookmark or share this site on your favorite social site. And while you’re at it I could use another coffee.

And that’s it. If you think there should be another site added feel free to post them in the comments or shoot me a note via my contact form. Also possible errors or any additions are much appreciated. If useful I will add your additions or more site links to the codaclips files and will update the article.

Also I would like to provide these links as Espresso snippets probably as part of the HTML-(or PHP?)-Sugar but this seems to be rather complicated at the moment. As soon as this becomes more straightforward I will add these to this article. But if you’re already advanced in creating Espresso sugars and would like to help me with this please contact me!

Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest Futurama movie Into The Wild Green Yonder. This pack includes 4 versions of the Planet Express ship whale oil indicator in 2 different sizes for desktop and iPhone use. Vivid pink Feminista versions included too

Here’re the details for the whole pack:

• 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560×1600)
• 2 iPhone versions with empty and full whale oil indicator (320×480)
• 2 Feminista versions high-rez widescreen desktop versions with empty and full whale oil indicator (2560×1600)
• 2 Feminista iPhone versions with empty and full whale oil indicator (320×480)
• Icon folder files for this wallpaper release

Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie

The whole wallpaper pack can be downloaded from the Goodies section on my website or via this button:

Download v1.0 | zip

As you can read in the sliding Colophon at the bottom of the site, it is written in valid XHTML 1.1 and CSS3 code and makes heavy use of jQuery. But, of course, it is fully functional without JavaScript enabled. Even the tab interface remains intact in such a case which is done by some PHP magic. Just the print and text-size buttons in the lower right will be gone without JavaScript. But that’s ok because their functionality can be implemented just with JavaScript anyway.

For your learning pleasure I’ve let my comments in my jQuery file intact and you’ll also find the sources for code-parts where I didn’t wanted to invent the wheel again. Although slightly modified by me, this includes the code for the vCard popup bubble when hovering over the header (by jqueryfordesigner.com) and the text-resizing function (from dev-tips.com) .

Browser Compatibility

But the sad thing I had to learn was that Internet Explorer 7 and Google Chrome have heavy problems with transparent images (PNG24 with alpha transparency to be exactly) which are faded in or out with JavaScript (or just jQuery?). They look great when just there but during fade they have a big bold border. Once the fade is done the border disappears. Weird!

That’s why some eye candy will not be displayed to Internet Explorer users (no big light spot and no hover effect on the header) and I hope Google will fix this soon. And following my own tradition Internet Explorer 6 and below users will get a big warning banner on top of the site.

For all other modern browsers beside those mentioned above the site should work well but you’ll get the best viewing experience with Safari, Firefox 3.1 or Opera (because of their text-shadow support).

If you find a bug or have any additions feel free to contact me, post them in the comments or throw me a note on Twitter.

Inspiration

With the concept of this little site I’ve kinda jumped on the bandwagon which obviously was started by Tim van Damme’s excellent small site under timvandamme.com.

I was just blown away by the smart concept when first seeing this site last year and immediately made some rough sketches and drafts for my own implementation of this concept. But sadly time was too short for a new personal side project so everything laid down until last week.

Another great version based on Tim’s concept was crafted by Mr. Foliage-O-Meter Rogie King under rogieking.com and there was also a nice little discussion about inspiration in Rogie’s blog after he had launched his site.

Finally I find it very interesting to compare the jQuery code of the three sites afterwards. We all have some sort of tab interface with fancy stuff going on when the tabs change. But we wrote three completely different versions of code for that purpose but all with the same JavaScript library. Oh mighty flexible jQuery!

More Business Card Style Sites

Icon- and UI-Designer Laurent Baumann

Interface-Designer Maximilian Schöning

Consultant & Blogger Aref Jdey (Design & Code by yours truly)

If you run such a site or know of other business card style sites, feel free to post them in the comments.

Time for some Mac Futurama crossover geekiness! In a fun watching process I’ve compiled a list of all the references to Apple’s Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running System 6, System 7 or OS 9 ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).

So the following screens from Futurama refer all to Macs available in or before 1999. Also you’ll find some nice links to downloadable Futurama stuff for your Mac at the end of this article. And may the lawyers of Twentieth Century Fox now please stop reading.

For orientation: I’ve followed the original four season production cycle and not Fox’s five seasons splitting. The “real” Season 5 are the recently released DVD movies/Episodes on Comedy Central.

• Season 1
• Season 2
• Season 3
• Season 4
• Season 5
• Futurama Stuff For Your Mac

All screens © 1999 by Twentieth Century Fox Film Corp.

Season 1

1ACV02 – The Series Has Landed

The moon farmer introduces his three robot daughters. One of them is named “Daisy May 128k” as a reference to the first Macintosh 128k.

1ACV05 – Fear Of A Bot Planet

Indeed the episode with the most Mac references. The Planet Express crew have to deliver a package to a planet settled by separatist robots. And guess what their favorite OS is?

The sound to start the daily human hunt is the Mac startup chime composed by Jim Reekes and first used in 1991 on the Macintosh Quadra 700. Maybe the Chime of Death would be more suitable for that.

The judge is a not so friendly Macintosh 128k with a classic Mac OS Finder face. It uses Mac OS interface elements while judging and freezing at it.

But the robots have some cool computer voodoo to get him back judging without the need of a restart.

This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the iMac G3 color flavors or the original iBook colors although there never was a yellow iMac (or iBook).

1ACV10 A Flight to Remember

The robot guy on the bar mixes sad Bender a drink out of Jägermeister and some Pennzoil product. He is named iZac as a reference to the Apple iMac or more generally for the “i”-brand. Beside that iZac is written in kind of the same font (variant of ITC Garamond, thanks Schoschie) as in Apple’s Think Different tagline and campaigns. Furthermore (but non-Mac related) iZac is also a reference to Isaac the bartender from the TV series love boat from 1977, as “yeah” pointed out in the comments. Thanks yeah!

1ACV11 Mars University

The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms.

1ACV12 – When Aliens Attack

The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer.

Season 2

2ACV09 A Bicyclops Built For Two

Bender choses a disguise while being in the Internet. He does this with a Mac style menu.

Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window.

2ACV15 The Problem With Popplers

Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it.

2ACV17 War Is The H-Word

Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands.

Season 3

3ACV04 The Luck Of The Fryrish

Again the crew searches the Internet with a classic Mac OS interface.

3ACV06 Bendless Love

The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar.

3ACV15 I Dated A Robot

Sure enough, Prof. Farnsworth’s blank robots are Mac formatted.

Billy starring the propaganda movie “I dated a robot!” downloads his Monroe-Bot with a classic Macintosh 128k.

Futurama 3ACV21 Future Stock

Planet Express is under new management of “that guy” from the 1980s. He shows the crew a new ad which is a parody of Apple’s legendary 1984 ad.

Season 4

4ACV06 Bender Should Not Be Allowed On TV

The president of the TV network (who seems to be just a plain non-Mac laptop), has some sort of QuickTime Player running on him.

4ACV08 Crimes Of The Hot

iZac again.

Season 5

5ACV01 Bender’s Big Score Part 1

Bender is infected by the Scammers’ obedience virus called iObey.

5ACV15 Into The Wild Green Yonder Part 4

The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there’s also Matt Groening’s head in the audience.

Futurama Stuff For Your Mac

Futurama Vol. 1-6
Amazing icons made by Iconfactory’s Gedeon Maheux. The recent Volume 6 release also comes with some nice wallpapers showing silhouettes of the Planet Express crew members. Vol.2, Vol.3, Vol.4, Vol.5, Vol.6
Also a search for Futurama in the freeware section on Iconfactory.com is always a good idea…

What If? Machine Terminal Icon
A nice icon intended as a Terminal replacement icon made by Mark Hawkins.

Futurama: Trash Replacement
A nice icon showing a big bucket of Fishy Joe’s Popplers. Made by Mark Hawkins too.

Futurama Random Quote Generator
A Dashboard widget for Mac OS X giving you random quotes from Futurama. Made by rawpixels.

Futurama Mars University Wallpaper
And there’s my Futurama Mars University Wallpaper for Desktop and iPhone available in the Goodies section on this website.

Futurama: Out Of Whale Oil Wallpaper Pack
And finally there’s my Futurama: Out Of Whale Oil Wallpaper pack for Desktop and iPhone also available in the Goodies section on this website. Vivid green and pink Feminista versions included.

And that’s it folks. Hope you enjoyed this fun article. If you know of more Mac or Apple references in Futurama or links to nice Futurama icons, wallpapers or application resources feel free to post them in the comments.

As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you’ve finished voting and making your next coffee or tea you could subscribe to my RSS-Feed, discuss this article or buy me my next coffee

Since my update to WordPress 2.7 I’m pretty much into all the new comments stuff. As I’ve written before, the comment functionality changed dramatically with WordPress 2.7. This makes writing a comments template much easier but if you used Worpress prior to 2.7 you have to change some things to work again. Beside other things this includes Gravatar styling and also adding different styling to comments from the author of an article. In this article I will show you how to realize the latter with WordPress 2.7 and above.

Let’s start by looking at the code to achieve styling of author comments prior to WordPress 2.7. On kremalicious.com I’ve used this code:

<li class="<?php if ($comment->comment_author_url == "http://www.kremalicious.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">
other comments code
	</li>

So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected WordPress added a new class ‘author’ to the <li> tag which we were able to style by adding a li.author to our css file:

li.author { css comes in here }

But with WordPress 2.7 these steps are needless because of the new function <?php wp_list_comments(); ?> which adds a class on author comments for itself!

If a comment from the author of an article is posted under this article, WordPress automatically adds the class ‘bypostauthor’ to the surrounding <li> tag. So all you have to do is adding a css style of li.bypostauthior to your css file or just renaming your old li.author class or whatever you used for this:

li.bypostauthor { css comes in here }

And that’s it for adding a different style to comments from the article author. Just add some css and there you go. Wonderful!

Even more

WordPress also has a special class for registered users of your site so you’re able to style their comments as well. For this just use the class ‘byuser’:

li.byuser { css comes in here }

All the various classes WordPress adds to comments are listed in the Codex page for enhanced comments display. And here’s a very nice grahical overview about everything WordPress 2.7 adds to comments.

Sure enough I’ve upgraded immediately when WordPress 2.7 was released. Among all the other things that changed in this new version the comments functions got a massive overhaul. But the new comment loop with the new function <?php wp_list_comments(); ?> lacks the ability to quickly set a custom default gravatar or avatar image. But with some help of the functions.php file we can set the default gravatar image in the Discussion settings in the WordPress backend.

Before WordPress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file:

<?php if(function_exists('get_avatar')) {
        echo get_avatar( $comment, $size = '70', $default = '<?php bloginfo('template_directory'); ?>/images/gravatar.png' );
} ?>

So we were able to set a path to our image we wanted to use as the default gravatar image. But with WordPress 2.7 we have the new function <?php wp_list_comments(); ?> which pretty much simplifies writing comment template code. Although it has a parameter for the avatar size it doesn’t have one for setting a custom image like before.

But we can use the functions.php file in your template directory and add some lines to it: (If you don’t have a functions.php file just create one.)

<?php  
function my_own_gravatar( $avatar_defaults ) {  
    $myavatar = get_bloginfo('template_directory') . '/images/gravatar.png';  
    $avatar_defaults[$myavatar] = 'GRAVATAR NAME DISPLAYED IN WORDPRESS';  
    return $avatar_defaults;  
}  
add_filter( 'avatar_defaults', 'my_own_gravatar' );   
?>

Just set a name for your custom Gravatar image to show up beside the image in the WordPress back-end. The code above assumes you have your custom default gravatar image inside a folder called images inside your template directory. Change it to your environment if neccessary. After that a new entry in the WordPress backend under Settings > Discussions will appear with the custom image specified:

And you can adjust the displayed size of the gravatar image by adding a parameter to <?php wp_list_comments(); ?> function in your comments.php file:

<?php wp_list_comments(array('avatar_size'=>70, )); ?>

And that’s it. As you would guess I pretty much prefer this way to adjust the gravatar image. But you’re free to write your custom comment callback function to exactly define the output of the comments. But it’s definitely too much if you just want to change the gravatar stuff.

I received quite a few mails in the last days from Aperture users asking for the best way to add your copyright information or any other so called watermark to your images in an Aperture 2 workflow. Especially new users to Aperture find it quite confusing why there isn’t something like a text brick in the Adjustments panel. So Aperture itself lacks the ability of quickly adding some lines of text to your images but nevertheless it has a watermarking feature.

In this article I will lay out every way I’ve found to add watermarks to your images in an Aperture 2 workflow and will discuss the advantages and disadvantages of each solution. The goal of this article is to give you a brief overview about the various ways you can add watermarks to your images so you can easily choose the best one for different needs. In short these are the possibilities:

1. The Aperture Way
2. The External Editor Way
3. The Plug-In Way
4. Conclusion

1. The Aperture Way

Aperture has built-in support for watermarking your images on export. But you have to create a watermark image in a bitmap graphic editor like Photoshop, Pixelmator or Acorn before you can start adding watermarks. But I’ve written a detailed article about how to use this feature of Aperture back in May 2008 named HowTo: Use high-quality watermarks in your images with Aperture 2.1. In short, you have to create your watermark image first and then define it in a new export preset. In the end all images exported with this preset will have your defined watermark image on them. If you want to watermark your images the Aperture way be sure to check out my tutorial.

This way is perfect if you want to watermark a lot of images at once or if your copyright info doesn’t change often. And this works with Aperture’s Web Journal or Web Page feature if you add a watermark image to the export presets for that. Also this works with any other export plug-in in Aperture which utilizes the export presets, like the FlickrExport plug-in. You just have to create e.g. a flickr export preset, define your watermark image there and chose it inside of FlickrExport from the export preset dropdown list.

Update 10/31/2008: Another advantage is the system wide integration of this feature. E.g. you can use Aperture’s built-in watermark feature in combination with an Automator workflow. Just create your export preset with a watermark enabled in Aperture. In Automator you can drag the Export Versions action from the Photo section to your workflow and chose the export preset you’ve created.

But adding some lines of text to just one image or different text to different images can be rather complex cause you have to create lots of different watermark images and export presets.

1.1 MobileMe Albums

For whatever reason Apple decided to not use the export presets for MobileMe Albums so you can’t watermark your images published through MobileMe Albums with this built-in feature. The only way to achieve this is to add the watermark outside of Aperture and reimport this image or you use an edit plug-in for this where your watermark will be rendered on the image.

But you can still use the Web Export Presets with a watermark defined when publishing an Aperture Web Page or a Web Journal through MobilMe.

2. The External Editor Way

Because of Aperture’s workflow design you’re always free to open up your image in your favorite external editor from within Aperture and add your copyright information and more to your image. Just add your favorite image editor in the Aperture preferences under the Export tab and set the file format you want to have.

Now you can just right click or ctrl + click on every image to open the context menu and choose Edit With whereas the first entry will be your external editor set in the preferences. Aperture will automatically render your image creating a new file and opens that up. Just add a new text layer in your external editor, type in your preferred text and save the file from there. Aperture will update with the changes accordingly.

Using this method gives you the most flexibility since you can add everything to your image and come back with it in Aperture. And if you use Photoshop and choose to use psd as external editor file format you can easily add all your non-destructive layers in Photoshop an Aperture will live render those layers. Opening the psd file again from within Aperture will give you all the editable layers you created earlier.

But since Aperture always creates a psd or tiff file for that you will end up with rather large file sizes even if you just add two letters in your external editor.

3. The Plug-In Way

3.1 Aperture BorderFX

Aperture BorderFX is an export plug-in for Aperture written by Reinhard Uebel which was available long before Aperture 2. This plug-in allows you to add borders but also titles and even more to images as you export them. The plug-in is free but the author asks for donations. In short this plug-in gives you the ability to create your watermark (and also borders) inside of the Aperture environment. You set all your output preferences inside of the plug-in window so it doesn’t use the Aperture export presets.

But it has some powerful features in terms of watermarking: It can read out some IPTC fields to use the text as your copyright text, it is capable of saving presets and you can open several images at once in the plug-in window. So it works similar to Aperture’s built-in watermarking feature but gives you full control over the watermark look without leaving Aperture.

This plug-in gives you a lot of flexibility about your watermark look without firing up a graphical editor like Photoshop. Also you’re not leaving a non-destructive workflow with this plug-in since all the changes are just rendered on your exported images. With the combination of using the plug-in presets and the capability of opening several images at once with the plug-in you can have different watermarks on different images very quickly.

But you can’t see your changes made in the plug-in on the images in your library. But Reinhard stated in his blog he’s working on an edit plug-in based on the new Aperture 2.1 SDK where the changes will be rendered (destructively) in a psd file.

3.2 Apple’s Borders & Titles Plug-In

With the release of Aperture 2.1 and its Edit Plug-In architecture Apple also released some sample plug-ins which aren’t included in Aperture (just the Dodge & Burn plug-in is). But you can easily download it from Apple’s Developer Connection website without registration for free.

This is also something I’ve covered earlier in my blog with a short article:
Quick Tip: Borders & Titles Plug-In for Aperture.

The functionality of this plug-in is rather rudimentary but it’s indeed the quickest way if you just want to add some lines of text to one particular image. But adding the same text on several images can be very frustrating since you can’t open more than one image at a time inside the plug-in window.

As with every Edit Plug-In every time you fire up an image with this plug-in Aperture will create a psd file and after hitting save in the plug-in your changes will be rendered destructively on this psd file. So there’s no way to go back here without creating a new psd file and starting again.

3.3 Impression For Aperture Plug-In

Impression is an Aperture Edit Plug-In from Blue Crowbar Software released in Sept. 2009. The developer claims it’s mainly targeted for those people who want to have a copy of their watermarked image within Aperture. Also there’s a nice blog post by the developer lining out why he thinks this plug-in beats Aperture’s builtin watermarks.

This plug-in is pretty powerful and probably the best choice for watermarking your images in Aperture through an Edit Plug-In workflow. Watermarking multiple photos at once is also possible and you can use existing PSD or PNG images as a watermark image as well as from a RTF text file. Apart from the functionality it also has a quite beautiful UI with the controls laying over your image.

4. Conclusion

So you see there are quite a few possibilities for adding watermarks in your Aperture workflow although the most comfortable solution, a brick in the adjustment panel for adding text or watermark images non-destructively isn’t there (yet?).

And, except for the export plug-ins, you will leave a non-destructive workflow since all your changes to the image are rendered in a psd or tiff file and any further adjustments in Aperture will also affect your watermark. Also there’s no way of going back with these solutions without creating a new psd file.

So to stay within a non-destructive workflow and to avoid unnecessary big file sizes you should try to use either Aperture’s built-in watermarking feature or Reinhard’s BorderFX plug-in in your workflow.

But if you want e.g. different text on just a few images and want to have your watermarked image within Aperture you should try using the Edit plug-ins or your external editor. Also if you don’t care about big file sizes for rather minor changes you can use the Edit plug-ins for watermarking although you’ll slightly leave Aperture’s non-destructive workflow design with this. This by the way is the case with all the Edit plug-ins. But that’s another story…

And that’s it folks. I hope this article helps you finding the right method for watermarking your images in an Aperture workflow. Feel free to post in the comments about your experiences or any additions you have. Also don’t forget to spread the word about this article on your favorite social bookmarking site.

I’ve just released my own coffee cup icon, enjoy:

• Desktop icons showing the fuel of most designers. Originally I’ve made the coffee cup for the donations button on my website earlier this year and now decided to release it as an icon.
• Mac + Win + Linux + iContainer
• Leopard ready (512×512)
• including 3 icons (Black + White version + obligatory folder icon)
• The Finest Coffee Cups – Most Incredible Coffee Icons On The Web

Download

Download v1.0 | zip

Now just get your next coffee, sit back and enjoy this little showcase. Just click on the images to get to the icon sources. At the end of the article you’ll find links to some nice high quality coffee tutorials. And remember you will have more control over time itself if you reach your 100th cup of coffee.

The Finest Coffee Cups

Please note that these icons are the property of their respective owners and you should always consult their copyright notice first before using these icons.

Coffee Cup icons by Susumu Yoshida

A bunch of colorful cups of coffee.

CoffeeCon icon by Vegrafik

A hyperrealistic icon from Vegrafik

Coffee Cup Icon by kremalicious

In a fit of megalomania I declared my icon as incredible and included it here. Originally I’ve made the coffee cup for the donations button on kremalicious.com.

Coffee folders from Agua Icons by David Lanham

The one and only Mac OS X system replacement icon set has some coffee folders too.

Kaffe! icon from World of Aqua 3 icon set by Dave Brasgalla

Coffee in a metal cup. Sadly Dave didn’t updated his World of Aqua icon pack with bigger sizes so it’s just 128px.

Starbucks coffee icon by Rok Benedik

Coffee folders from the Maji sets by Jonas Rask

Also Jonas used coffee as the metaphor for the work folder (supposedly) and made clear he likes very big coffee cups.

Espresso icon by MacRabbit

Does this application need any introduction? Although not released yet the new web-coding application from MacRabbit drew a lot of attention. The icon is one of the reasons for that.

Coffee folders from the Pry system sets by Jonas Rask

Another folder-combined-with-coffee icon by Jonas.

Coffee icons from Office Space icon set by VisualPharm

A glass coffee cup which is wildly used on the web. Created for Windows so the icons are just 256px in size.

The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz

An icon set made in collaboration between Alejandro Lopez & Sergio Ruiz with icons related to a coffee shop.

Espresso icon by Iiro Jäppinen

Coffee Wallpaper by Michael Flarup

Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would make a good one. The detail of the cup is stunning.

Bean icon by Laurent Baumann

Bean is a free word processor for Mac OS X and Laurent Baumann included a nice coffee cup in the application icon for it.

Have A Break icons by mat-u

Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 128px size maximum. Maybe you can persuade mat-u to update this icon with bigger sizes.

Java Application icons by Apple

Apple uses a nice coffee cup in their Java applications which can be found in the Utilities folder. Thanks to David for pointing this out.

Caffeine icon by Trevor Kay

Trevor Kay made the new icon for Caffeine. This application prevents your Mac from automatically going to sleep. Trevor also made some additional icons for Caffeine although the coffee cup looks pretty much the same as the one from Apple’s Java application icons.

Coffee and Tea icons by Kate England

Some comic style icons which deviate from the realism of all the other coffee icons. Sadly just available in 128px size.

Moon Coffee icon from Space: 1999 icon set by Dave Brasgalla

Dave made an icon set for the Iconfactory inspired by the classic sci-fi television series of the 70′s and included a Moon Coffee cup. Also just in 128px size.

Times Application Icon by Mikio Inose

Acrylic Software’s “new type of newsreader for Mac OS X Leopard” called Times uses a gorgeous icon made by Mikio Inose.

Do you love Cappuccino? by Creative 9 Design

One delicious full and one empty cappuccino cup re available in this icon set made by Creative 9 Design. Available just in 256px from their blog.

Cappuccino Framework Icon by Sofa

Not a coffee cup but also very coffee related is this awesome Cappuccino machine icon (although it shows an Espresso machine) made by Sofa for the Cappuccino framework.

Coffee Tutorials

Finally here’re some nice high quality tutorials for you to help you build your own coffee cup.

• Using Gradients to Make Light and Shadow – and a Coffee Cup!
  Collis from psdtuts made a nice tutorial with a similar perspective as found in my Coffee Cup Icon.
• Design A Coffee Mug Icon
  Photoshop tutorial by Andrew Houle for creating a coffee cup icon.
• Creating a Coffee Cup with Inkscape
  Peter Anglea with a nice vector tutorial using the open source vector app Inkscape.
• Amazing Photoshop Light Effect In 10 Steps
  Not an icon tutorial but Fabio Sasso achieves some awesome light effects combined with the coffee cup from the Office Space icon set.

Did you made or found another incredible coffee icon I’ve not mentioned here? Feel free to post them in the comments. Also don’t forget to spread the word about this article on digg, StumbleUpon or in any other form you like.

Show your geeky love for extraterrestrial universities! This is a simple Futurama tribute wallpaper displaying the logo of the Mars University as seen in the first season (1ACV11/S02E02). But I’ve modified it a bit to get it out of the 2D. Including one high-resolution desktop version for widescreen displays (2560×1600) and one iPhone version (320×480).

As usual you can grab the whole zip package from my Goodies page and have fun.

Download v1.0 | zip

… this used to be a nice entry-level Apple monitor (Apple Multiple Scan 20). However, it took more than 10 years ’til it refused to display red and green.

TechSpecs:
support.apple.com/kb/SP409
everymac.com/monitors/apple/multiple_scan/specs/multiple_…

Photo on Flickr

Google Chrome has a different UI-Design compared to other browsers especially regarding tabs. Google Chrome tabs will be on top of the address bar so every tab has its own address bar. Beside that every tab will run its own process to improve stability.

Using WebKit as its rendering engine, Google Chrome will have all the cool WebKit stuff included like CSS Gradients, CSS Masks and the CSS3 property text-shadow, which I’ve covered earlier in detail.

Google Chrome will be optimized for use with web applications and, instead of using WebKit’s new core JavaScript engine Squirrelfish, Google decided to use a new, multi-core processor optimized JavaScript virtual machine developed by the V8-team in Denmark.

More informations on the features leaked can be found in the Google Blogoscoped article or in the corresponding scanned comic.

Update: Google’s official blog was updated with informations about the new browser project. They say the first beta of Google Chrome will be released tomorrow just for Windows while versions for Mac OS X and Linux will follow soon.

Update 2: Google Chrome can now be downloaded for Windows from google.com/chrome. Google also posted a feature page for Chrome.

Update 3: Google Chrome seems to have problems with some of my transparent PNGs:

Update 4: There are some nice articles about various aspects of Chrome available in the web:

• Matt Cutts tries to prevent paranoia and explains when Google Chrome talk home.
• Gina from lifehacker.com dissects Google Chrome’s Full List of Special about: Pages.
• Google explains their priorities regarding different Platforms.
• The Chromium Developer Documentation is available too.
• And it seems Google cut out some features of WebKit like text-shadow.

The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 megapixels. Being Canons first DSLR with the new DIGIC 4 image processor the EOS 50D can burst 6.3 shots per second with improved image quality.

The “EOS Integrated Cleaning Systems” gets a new fluorine layer and now works in three steps to clean the sensor. With 35 metering zones and 9 cross type Autofocus zones the Autofocus specifications are the same as found in the EOS 40D.

The basic ISO range goes from 100 – 3200 while those values can be “boosted” to ISO 6400 and 12800. The integrated noise reduction can be adjusted in four grades. The LCD display is now 3 inches big with 920,000 pixels (VGA) with a Live View Mode.

The EOS 50D is prized at US$1399 (1299€) for just the body and it will be available as a kit with the EF 28-135 3.5-5.6 IS USM for US$1599.

If you’re interested in all the details and specifications have a look at Bob Atkins article about the official announcement of the EOS 50D.

Along with the EOS 50D Canon announced the EF-S 18-200 3.5-5.6 IS as a new lens. The lens is intended for use with an APS-C sized sensor and insists of 16 elements (UD-glass and aspherical lenses) arranged in 12 groups. As the name says the EF-S 18-200 3.5-5.6 IS comes with an image stabilizer but somehow misses an USM ring motor which is quite strange for a lens of a prize of US$699 (599€).

All the specifications for this new lens are available in an article by Bob Atkins too.

SlightlyPretentious announced its “Theming made easy”-application Architect is coming as a public beta next sunday (is it 08/31 or 09/07?) on Wednesday, September 3rd. Icon Designer Laurent Baumann already posted a new sweet application icon for this app a while ago and we can expect a nice and good looking solution for theming and customization in Leopard.

Head over to the Screencast and see Architect and its UI in action.

While Architect will help you customizing Leopards UI and building themes out of your modifications, Façade (Laurent’s icon of it) will help you switch (and manage?) the themes. But currently there’s no word on the SlightlyPretentious website about this application.

Slightly Pretentious made Architect available as a public beta while claiming Façade will be coming in october. But Façade already has its own nice website.

Update 02/17/2009:
Still no sight of Façade anywhere except the note of a Lead Developer change at Slightly Pretentious.

But meanwhile another theme manager was released: Magnifique, available as a free download.

A friend of mine asked me to craft an icon for his external hard drive case and I would like to share those with you too. These desktop icons show the the silver and black Icy Box external aluminium case with USB interface and are intended as a replacement for the generic external hard disk icon in Mac OS X Leopard.

As always these desktop icons are free for you personal and non-commercial use. All other usage of this copyrighted material require my written permission.

The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons from my Goodies page. Have fun!

Download v1.0 | zip

• Replacement icons for the silver and black Icy Box external aluminium case with USB interface
• Mac + Win + Linux + iContainer
• Leopard ready (512×512)
• including 7 icons with 2 Time Machine versions

So in this quick tutorial I will show you how to create an encrypted Aperture Vault by using Sparse Bundle Disk Images and by utilizing tools built into Mac OS X. All this can be done in two simple steps.

1. Create an encrypted disk image

First you have to create the encrypted disk image where the Aperture Vault will reside. So fire up Disk Utility from the Utilities folder inside your Applications folder or use Spotlight to open it.

Be sure there is no device or volume selected in the sidebar and click on the New Image icon in the toolbar. Set a file name of the disk image and the Volume Name (the name of the mounted disk image on your desktop). Change all the settings as seen in the following screenshot. Be sure to select sparse bundle disk image as the Image Format before changing the volume size. This way you can set a bigger volume size than your physical disk space available on your hard drive. After creation the disk image won’t be as big as you have set it with volume size. It will grow as you write files to it. For maximum security (but slower performance) select 256-bit AES encryption in the Encryption drop down menu:

Finally set the destination where you want to have the disk image created. To make it all mobile choose your mobile hard drive as destination. After clicking Create you will be asked to provide a password for encrypting the disk image. Be sure to click on the little key icon to use Mac OS X built in password generator. Generate a new extra long password. Type in your new password manually in the Verify field and be sure to check “Remember password in my keychain”. This is the only time you have to provide the password since it will be saved in your keychain after clicking OK.

Now your newly created sparse bundle disk image ahould be mounted on your desktop which is perfectly fine for the next step.

2. Create the Aperture Vault

Now go to Aperture, choose the Projects tab and click on the little gear wheel at the bottom of the sidebar and choose “Add Vault” from the opened menu.

In the opened dialogue select your mounted disk image under the devices section in your sidebar, give it a name and click Add.

The new Vault will be added to your Vault list and is now to ready to be updated.

Just click the little iSync-style arrow beside your Vault and the Vault be written to your encrypted disk image. When finished you can eject the disk image. It can now be mounted again just with the correct password which is stored in your keychain so won’t even recognize the encryption. Of course, when you try to mount this disk image on another mac you have to type in the password or import the entry from your keychain.

3. Conclusion

You see it’s pretty easy to use secure file encryption just for particular uses on a Mac. The disk image method also provides you with the ability to move the disk image file to another volume and mounting it from the new place without adding or changing the Aperture Vault inside Aperture.

Finally you can have more uses for encrypted disk images. As I’ve said in the introduction, my referenced Master images reside on my mobile hard drive too. And they are encrypted inside a sparse bundle disk image as well. So you get the idea that you can do a lot more with these encrypted disk images to quickly secure sensible data.

A while ago I’ve made a custom style for the blog on kremalicious.com and would like to share this style with you. The style is based on the colors used on kremalicious.com with a black background and light grey text on top of it. The links have the same blueish hover style as on my website:

Here’s how to apply the style for your blog preview in MarsEdit:

In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog where you want to have my style applied to and choose Edit Preview Template. The Preview Template editor should open where you can customize the style of the preview with the css instructions in the header.

Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I’ve also provided a txt file with the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>#weblogName#: #title#</title>
<style>
body {margin: 0; background-color: #000;}

a {color: #778caa; text-decoration: none;}

a:hover {background-color: #778caa; color: #000; text-shadow: 0px 1px 1px #ddd;}

#title { color: #778caa; background-color: #333; margin: 0; font: normal 2.1em "HelveticaNeue-UltraLight", Helvetica, sans-serif;}

#title a {display: block; position: relative; padding: 10px 20px;}

#title a:hover {text-shadow: 0px 1px 1px #B3B3B3;}

#content {font: 1em "Lucida Grande", Lucida, Verdana, sans-serif; color: #ddd; padding: 10px 20px;}

#meta {margin-top: 20px; padding: 5px; background-color: #333; -webkit-border-radius: 5px;}

#credit {font: italic 0.8em/12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-align: center; margin-top:20px;}
</style>
</head>
<body>

<div id="title">
<a href="#url#">#title#</a>
</div>

<div id="content">
#body#
#extended#

<div id="meta">
<b>url</b>  : <a href="#url#">#url#</a><br />
<b>tags</b> : #tags#
</div>
<div id="credit">
The Kremalicious MarsEdit Style<br />
<a href="http://www.kremalicious.com">www.kremalicious.com</a>
</div>
</div> <-- end content -->
</body>
</html>

Now click on Save Changes in the lower right corner of the window and there you have it.

Of course you are free to alter the style provided by me to fit your needs. If you have any additions to my provided code feel free to post them in the comments.

The results are just as amazing as they are with the Photoshop plug-in. But the Aperture plug-in uses a streamlined interface which differs from the photoshop version. But the functionality is the same.

You can download a trial version of Noise Ninja for Aperture (images are watermarked with a grid pattern when you save them) and give it a try. The Noise Ninja plug-in for Aperture is available as a part of the Pro Bundle (US$ 79.95) which includes the Photoshop and the Aperture plug-in. If you have an existing Pro Bundle license you can upgrade it for US$ 20 to include the Aperture plug-in license.

Interested in more Aperture plug-ins? Just have a look at my article First overview: Aperture 2.1 adjustment plugins have arrived to get an overview about what’s available at the moment or browse my blog by the Aperture plug-in tag. Additionally you can have a look at the brand new Apple website for all the Aperture plug-ins and ressources.

As you may know there’s a huge Internet censorship going on in China. Contrary to promises made by chinese authorities and the International Olympic Committee (IOC) this Internet censorship is active during the Olympic Games even in the international media centre. And the IOC shares the current ideas of censorship in China.

And as in every political system with totalitarian elements there’s a good chance you will meet some angry lackeys if you’re going to report about topics the chinese authorities don’t want you to report. But more important they will threat your sources if their identity gets revealed. So if you want to report about the water shortage in the villages around Beijing, the massive air pollution in Beijing or about all the forced resettlements going on in China you should consider some security precautions to protect you and your sources.

Especially there’s two things to do here: First you have to use technologies to circumvent firewalls. Second is to secure your connections and your communication to protect you and your sources.

And remember that you have to protect your Computer before arriving in China because websites like the Tor project are blocked in China.

Circumvent China’s great firewall and secure your connections

The easiest way to get around the firewall is to install Tor, Psiphon or Proxify to fog your IP address and your location. A better way would be using a VPN (Virtual Private Network) connection or an SSL tunnel. This way all of your internet connections are secure and encrypted. If you’re working for a bigger news agency there’s a good chance they have its own VPN and you can connect securely to that as well. Just ask your IT department for how to achieve this.

Secure your Communication

After you have secured your connection data you have to make sure your communication is secure as well to protect you and your sources.

E-Mail

If you use mails be sure to encrypt everything, your logins with SSL/TLS and the mails itself either with GPG/PGP or certificates.

Skype

Just don’t download Skype while being in China! If you want to use Skype be sure to download it outside of China. But remember that it’s not possible to secure your Skype chats and calls because they can’t be encrypted.

Chat

Here you should use encryption as well. Members of .Mac/MobileMe can have encrypted chats with iChat. For all the others there’s Off-The-Record Messaging (OTR) which can be used with every chat protocol out there.

Phone/Mobile

Reporters Without Borders advise to use different SIM cards especially if you’re going to contact “sensitive” people.

Secure your Computer and physical data

Even without any data or other communication going on with your computer there are some critical things to remember in terms of security.

Especially encrypting sensible data on your computer is always a good thing to do. On the Mac you can just activate FileVault. On Windows Vista you can activate Bitlocker and on Linux you can use TrueCrypt (which can be used on Mac and Windows too). This way sensible data (your contact lists!) are encrypted and can only be recovered with the appropriate password.

Another good hint is to use an EFI or BIOS password which has to be entered when you start your computer. But this alone won’t protect you that much because your hard drive can easily be removed and accessed. But if the hard drive is encrypted too you have relatively great security against chinese authorities.

If you want to know more about how to protect you and your sources be sure to check out these great resources:

Advice for foreign journalists covering human rights situation during Beijing Games (Reporters Without Borders)

Handbook for Bloggers and Cyber-Dissidents (Reporters Without Borders)

Reporters’ Guide to China (Foreign Correspondents Club of China)

Having fun with Aperture and Silver Efex Pro.

Photo on Flickr

I’ve searched for a simple way of disabling those feeds, plugins etc. stuff the WordPress Dashboard tries to fill but it seems you can’t disable these from the backend. But there’s a quick way for doing this which involves editing your /wp-admin/index-extra.php and uncomment some lines there. This will leave your Dashboard intact while it stops WordPress from connecting to various sources to screw your blog up when you just want to quickly write something.
So open your /wp-admin/index-extra.php file. It should look like this:

<?php
require_once('admin.php');
require( 'includes/dashboard.php' );
require_once (ABSPATH . WPINC . '/rss.php');
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
switch ( $_GET['jax'] ) {
case 'incominglinks' :
wp_dashboard_incoming_links_output();
break;
case 'devnews' :
wp_dashboard_rss_output( 'dashboard_primary' );
break;
case 'planetnews' :
wp_dashboard_secondary_output();
break;
case 'plugins' :
wp_dashboard_plugins_output();
break;
}
?>

Now just uncomment the lines so it looks like this (every line with two leading // is uncommented and therefore inactive):

<?php
require_once('admin.php');
require( 'includes/dashboard.php' );
// require_once (ABSPATH . WPINC . '/rss.php');
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
// switch ( $_GET['jax'] ) {
//
// case 'incominglinks' :
// wp_dashboard_incoming_links_output();
// break;
//
// case 'devnews' :
// wp_dashboard_rss_output( 'dashboard_primary' );
// break;
//
// case 'planetnews' :
// wp_dashboard_secondary_output();
// break;
//
// case 'plugins' :
// wp_dashboard_plugins_output();
// break;
//
// }
?>

And that’s it. Save the file on your server, log in to your WordPress backend and you should see your Dashboard with everything intact. It just won’t search for incoming links and all those other RSS sources anymore.

Remember that every update of WordPress will overwrite this file.

You can get a 15-day trial from Nik’s website. It can be purchased through Nik’s online store for US$199.95.

When the website detects an iPhone or iPod Touch it will automatically switch to another freshly created theme which is absolutely seamless to the user. This detection is done by the wonderful slim iPhone WordPress plug-in from ContentRobot which was slightly modified by me.

The theme itself makes heavy use of the -webkit-border-radius css option to display all the round corners. That’s why there are just four images at work in the whole theme which makes it load in no time even on EDGE connections. And because just the theme is switching all the content remain the same so you don’t have just a shortened mobile version of this website.

Beside that I’ve used some special html and css properties which are essential for the iPhone:

The Viewport

While Safari on iPhone will display all websites just fine it can happen that the initial viewport is too big so the text is too small to read. By setting a viewport meta tag you can exactly define the viewable dimensions of your website. Apple has some nice examples for understanding the importance of setting the Viewport in iPhone optimized websites.

The viewport can be larger or smaller than the visible area but I wanted my content to exactly fit the width of the iPhone and the goal was to make the text legible on first load. So here’s what I use for kremalicious{iPhone}:

<meta name="Viewport" content="maximum-scale=1.6,width=device-width" >

This code will let the user scale the content up to 1.6 times to the default view and the default width of the content is set to the width of the (iPhone) device.

Tap Color

There’s neither an active nor a hover state for links on the iPhone which makes sense on a touch interface although it would be much easier to just use a:active for the tap highlighting. Safari on the iPhone uses a special webkit property for that:

-webkit-tap-highlight-color: rgba(234,234,234,0.5);

Home Screen Icon

I’ve used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it’s a 160dpi screen). You really should use a bigger size than Apple’s recommendation in their iPhone HIG. You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section:

<link rel="apple-touch-icon" href="/i/apple-touch-icon.png" />

And finally many thanks to cschock for continuously testing my code voodoo soup even at late hours.

Resources for you to do the same and even more

• iWPhone by ContentRobot: The plug-in I use for kremalicious{iPhone}. It detects an iPhone or iPod Touch and switches to another simple theme. You can easily adjust the plugin to point it to your own theme.
• WPTouch – WordPress iPhonified: If you don’t want to digg into html, css and iPhone specific properties this plug-in will help you. Once activated it automatically switches to an iPhone like theme with lots of eyecandy. You can customize some colors and a lot of different icons all from the WordPress admin panel
• Tutorial: Building a website for the iPhone: Amazing tutorial for changing content based on the orientation of the iPhone or iPod Touch. Just browse their website with your iPhone or iPod Touch to see it in action.
• iPhone Native Looking Skin: Sort of a template based on css and javascript which simulates the iPhone UI. (Final look)
• Touching and Gesturing on the iPhone: Build your websites with some touch gesture features! Here’s the javascript code for it.

THE Apple resources for iPhone & Web Content

• Safari Web Content Guide for iPhone
• iPhone Human Interface Guidelines for Web Applications
• iPhone Human Interface Guidelines (free developer account required)

_

The PTLens plug-in from ePaperPress was available as a Photoshop plug-in in the past and is well known for its lens pincushion, barrel distortion, vignetting, chromatic aberration, and perspective correction abilities based on a lens model database similiar to Kekus’ LensFix CI plug-in.

While I love the plug-ins ability to correct perspectives the Aperture plug-in doesn’t work with RAW files(!), just with tiff and jpeg files which is one more way to compromise the way Aperture works (In my opinion the whole plug-in architecture of Aperture does that). And while I would love to show you the plug-ins user interface in Aperture PTLens refused to open either JPEG or TIFF files. So here’s just a screenshot of the standalone application:

So to me the PTLens plug-in for Aperture isn’t finished yet. But you can download a trial version from the plug-ins website.

The second plug-in recently released is the Jade plug-in from Datamind. Because of its speed also on consumer Macs, Aperture 2 became popular among amateur photographers too. Datamind targets it’s first Aperture plug-in Jade at this group. The former standalone application for Mac and Windows is now an Aperture adjustment plug-in for correcting your pictures colors, levels and exposure automatically with Dataminds own algorithm. And its user interface is very clean and uncluttered:

While I have to say Jade produces very reasonable results it lacks a lot of controls and fails with complicated pictures where Aperture’s adjustment controls wouldn’t. So I would say this plug-in would be better as an iPhoto plug-in. Do you really want a blown up photoshop or tiff file for every photo you’re going to correct in Aperture?

Nevertheless you can download a trial version of the plug-in from Dataminds website and you would have to pay either 19.99€ for home use or 49.99€ for Pro use. You can have alook at Dataminds very interesting explanation o the different license models.

Interested in more Aperture plug-ins? Just have a look at my article First overview: Aperture 2.1 adjustment plugins have arrived to get an overview about what’s available at the moment.

It all started with a move of my whole website to new and shiny servers with PHP 5 running by my host. I didn’t heard of any incompatibilities between the latest WordPress version running on PHP 5 and in fact WordPress loves to use PHP 5. But somehow I wasn’t able to update my site neither over http or ftp. Since I can contact my host admins directly (thank you jpBerlin/Heinlein-Support!) this problem was addressed rather quickly. They just neglected to tell me that the server address for login also changed (I should have think of this too). So all my changes were applied to my WordPress installation on the old server. Problem solved I thought.

But more problems appeared. The display of the newest and latest posts and the next post/previous post links at the end of every article didn’t work as they should. But not enough I wasn’t able to moderate any comments. Sigh. Looked like any sort of database problem and I started a lot of things. First I manually scanned all database entries for any wrong things but I couldn’t find anything suspicious. After that I dropped the whole database and imported my database dump but this didn’t solve the problems. My final step was to re-install everything so that WordPress creates the tables in the databse. And guess what: It didn’t work too!

Now it’s clear something with my code must be wrong, I thought. For displaying the latest posts in WordPress I use a pretty standard way which is described in the WordPress Codex:

<?php $postslist = get_posts('numberposts=5&order=DESC&orderby=post_date');
foreach ($postslist as $post) : setup_postdata($post); ?>
<ul>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span><?php the_date(); ?></span></li>
</ul>
<?php endforeach; ?>

This would get all recent posts sorted by their post_date entry in the (wp_posts) database table and style it as an unordered list with my preferred format. This code worked since the launch of kremalicious.com and I first used it to display the recent blog entries on my start page. But since i didn’t change anything in the code this couldn’t be caused by wrong code or something.

So finally I’ve decided to post a question describing my problems in the WordPress support forums and that finally didn’t solve my problems but now it was clear what caused this bad behavior: A bug in MySQL!

Now this makes sense! Beside the new PHP 5 version my host new server also included a new MySQL version which was affected by this bug. The bug in short: Every query with GROUP BY just ignores the subsequent ORDER BY clause. Yeah, I found it!

This bug affects all versions of MySQL since 5.0.50 and it seems there is no stable version available at the moment with the fix included (please correct me if I’m wrong!). So if you’re running WordPress on a server with one of these MySQL versions installed you should experience my problems as well if you’re using get_posts/orderby stuff.

Thankfully a commenter in the WordPress forums reminded me of a nice temporary solution to this mess until my host updates MySQL: using wp_get_archives for displaying the recent posts. But this won’t let me display the dates anymore:

<ul><?php wp_get_archives('type=postbypost&limit=5'); ?></ul>

Problem temporary solved!

The remaining problem is the wrong display of the next post/previous post links under every article (single.php). A commenter on my post in the WordPress forum states that this could be caused by different loops interfering with each other. But I can’t find anything wrong in my code with the loops and more important I didn’t change the code and it worked fine before the server move. Now the only thing I can do is to wait for my host updating the MySQL installation. Then I will see if this remaining problem is caused by MySQL too. But as always, if you have any suggestions feel free to post them in the comments.

A stone made head which can be twittled. Halle(Saale)/Germany. Heavy Color Adjustements in Aperture 2.1

Photo on flickr

With this DSLR Canon seems to open up a new class in their EOS system which is somehow below the former entry level cameras (XT/350D, XTi/400D) and the latest entry-level XSi/450D. It’s priced 200$ below Canons current or former entry-level DSLR XSi/450D and you can find a nice first review of this new DSLR over at Digital Photography Review.

Canon also introduced the new midrange Speedlite 430EX II, replacing the 430EX flash unit. This new Speedlite is now fully configurable with the Camera’s LCD menu and it got now a metal shoe. According to Canon the 430EX II also boasts 20% faster recycling times and is more silent while doing this. In Europe and in the USA the Speedlite should be available from the end of July.

The ApertureEdit plug-in is a bundle of 12 different modules for denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once and according to Human Software Edit offers more than 4000 professional effects. Just head over to the product page to see all effects and features this plugin bundle is capable of.

The whole bundle is priced at US$ 299.95 and it’s available from Human Software’s Online Shop. Or you can buy just one single plug-in too which will cost you US$ 69.95 for each. There’s a trial version available too and if you don’t want to mail Human Software for the trial version you can download it from MacUpdate.