Merge pull request #105 from kremalicious/feature/lint-updates

markdownlint all the things
2024-06-30 05:31:56 +02:00 · 2018-11-19 02:03:03 +01:00 · 2018-11-19 02:03:03 +01:00 · 80a81abdcc
commit 80a81abdcc
parent 942553bab5 ac2b7f19a1
56 changed files with 269 additions and 704 deletions
--- a/content/photos/2012-03-04-relaxing-cat.md
+++ b/content/photos/2012-03-04-relaxing-cat.md
@ -10,5 +10,3 @@ date: 2012-03-04 08:00:32+00:00
 tags:
 - sitamun
 ---
-
-
--- a/content/photos/2012-04-03-skeletor.md
+++ b/content/photos/2012-04-03-skeletor.md
@ -3,9 +3,5 @@ type: photo

 title: Skeletor
 image: ../media/6313cc1e7db611e180c9123138016265_7.jpg
-author: Matthias Kretschmann
-
 date: 2012-04-03 17:56:49+00:00
 ---
-
-
--- a/content/photos/2012-04-03-train-station-leipzig.md
+++ b/content/photos/2012-04-03-train-station-leipzig.md
@ -3,9 +3,5 @@ type: photo

 title: Train Station Leipzig
 image: ../media/de2ac24c7db911e1b9f1123138140926_7.jpg
-author: Matthias Kretschmann
-
 date: 2012-04-03 18:21:44+00:00
 ---
-
-
--- a/content/photos/2012-04-05-current-sushi-status.md
+++ b/content/photos/2012-04-05-current-sushi-status.md
@ -3,9 +3,6 @@ type: photo

 title: Current Sushi Status
 image: ../media/aff38e2c7f5311e1b10e123138105d6b_7.jpg
-author: Matthias Kretschmann

 date: 2012-04-05 19:15:20+00:00
 ---
-
-
--- a/content/photos/2012-04-07-buna.md
+++ b/content/photos/2012-04-07-buna.md
@ -3,9 +3,5 @@ type: photo

 title: Buna
 image: ../media/44af28f2805b11e18cf91231380fd29b_7.jpg
-author: Matthias Kretschmann
-
 date: 2012-04-07 02:42:08+00:00
 ---
-
-
--- a/content/photos/2012-04-07-cat-enjoying-a-good-ipad-game.md
+++ b/content/photos/2012-04-07-cat-enjoying-a-good-ipad-game.md
@ -6,6 +6,7 @@ image: ../media/7838011c80ce11e19e4a12313813ffc0_7.jpg
 author: Matthias Kretschmann

 date: 2012-04-07 16:26:46+00:00
+
+tags:
+- sitamun
 ---
-
-
--- a/content/photos/2012-04-07-ipad-porn.md
+++ b/content/photos/2012-04-07-ipad-porn.md
@ -3,11 +3,7 @@ type: photo

 title: iPad Porn
 image: ../media/97a44d6080b711e181bd12313817987b_7.jpg
-author: Matthias Kretschmann
-
 date: 2012-04-07 13:43:00+00:00

 coinhive: true
 ---
-
-
--- a/content/photos/2012-04-07-opera.md
+++ b/content/photos/2012-04-07-opera.md
@ -7,5 +7,3 @@ author: Matthias Kretschmann

 date: 2012-04-07 15:50:15+00:00
 ---
-
-
--- a/content/photos/2012-04-08-common-kitchen-decoration.md
+++ b/content/photos/2012-04-08-common-kitchen-decoration.md
@ -7,5 +7,3 @@ author: Matthias Kretschmann

 date: 2012-04-08 19:29:33+00:00
 ---
-
-
--- a/content/photos/2012-04-08-graffiti-old-school-style.md
+++ b/content/photos/2012-04-08-graffiti-old-school-style.md
@ -8,4 +8,4 @@ author: Matthias Kretschmann
 date: 2012-04-08 20:14:49+00:00
 ---

-from [Instagram](http://instagr.am), posted with [Instagrate to WordPress](http://www.polevaultweb.com/plugins/instagrate-to-wordpress/)
+from [Instagram](http://instagr.am)
--- a/content/photos/2012-05-03-antique-chrome.md
+++ b/content/photos/2012-05-03-antique-chrome.md
@ -8,5 +8,4 @@ author: Matthias Kretschmann
 date: 2012-05-03 15:55:15+00:00
 ---

-from [Instagram](http://instagr.am), posted with [Instagrate to WordPress](http://www.polevaultweb.com/plugins/instagrate-to-wordpress/)
-
+from [Instagram](http://instagr.am)
--- a/content/photos/2012-07-20-mmmmh-coffee.md
+++ b/content/photos/2012-07-20-mmmmh-coffee.md
@ -9,4 +9,3 @@ date: 2012-07-20 11:02:30+00:00
 ---

 from Instagram
-
--- a/content/photos/2012-08-08-amazingly-early.md
+++ b/content/photos/2012-08-08-amazingly-early.md
@ -9,4 +9,3 @@ date: 2012-08-08 04:11:48+00:00
 ---

 from Instagram
-
--- a/content/photos/2012-08-25-so-much-room.md
+++ b/content/photos/2012-08-25-so-much-room.md
@ -9,4 +9,3 @@ date: 2012-08-25 10:50:58+00:00
 ---

 from Instagram
-
--- a/content/photos/2012-09-07-huge-station-is-huge.md
+++ b/content/photos/2012-09-07-huge-station-is-huge.md
@ -3,10 +3,7 @@ type: photo

 title: Huge station is huge
 image: ../media/619b3900f92911e1a31922000a1cddf1_7.jpg
-author: Matthias Kretschmann
-
 date: 2012-09-07 20:19:52+00:00
 ---

 from Instagram
-
--- a/content/photos/2012-09-10-subway-firefox.md
+++ b/content/photos/2012-09-10-subway-firefox.md
@ -9,4 +9,3 @@ date: 2012-09-10 18:22:46+00:00
 ---

 from Instagram
-
--- a/content/photos/2012-09-12-sweet-typography.md
+++ b/content/photos/2012-09-12-sweet-typography.md
@ -9,4 +9,3 @@ date: 2012-09-12 10:38:36+00:00
 ---

 from Instagram
-
--- a/content/photos/2012-09-14-bvg-dos.md
+++ b/content/photos/2012-09-14-bvg-dos.md
@ -3,10 +3,8 @@ type: photo

 title: BVG DOS
 image: ../media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg
-author: Matthias Kretschmann

 date: 2012-09-14 18:24:29+00:00
 ---

 from Instagram
-
--- a/content/photos/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md
+++ b/content/photos/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md
@ -1,8 +1,8 @@
 ---
 type: photo
+
 title: That moment when your childhood toys hang painted in a gallery
 image: ../media/Monstrum_Gameboy_Catherine_Kaleel.jpg
-author: Matthias Kretschmann
 ---

 Seen at [SUPERSAMPLE - Pixels at an Exhibition](http://www.supersample.de) 2015 in Berlin.
@ -10,6 +10,6 @@ Seen at [SUPERSAMPLE - Pixels at an Exhibition](http://www.supersample.de) 2015
 [Instagram](https://instagram.com/p/10_nFWNSvA/)

 > [Catherine Kaleel: Monstrum Gameboy](http://catherinekaleel.com/artwork/3250054_Monstrum_Gameboy.html)
-  2013
-  Oil on Maple Panel
-  4' x 5'
+> 2013
+> Oil on Maple Panel
+> 4' x 5'
--- a/content/photos/2017-07-09-orphaned-elephant-with-friend.md
+++ b/content/photos/2017-07-09-orphaned-elephant-with-friend.md
@ -2,7 +2,6 @@
 type: photo
 title: Orphaned elephant with friend
 image: 2017-07-09-orphaned-elephant-with-friend.jpg
-author: Matthias Kretschmann
 date: 2017-07-09 09:41:37.771378000 +02:00
 ---

--- a/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md
+++ b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md
@ -2,8 +2,6 @@
 type: post

 title: Adjustment Tool Guide for Aperture 1.5.2
-author: Matthias Kretschmann
-
 date: 2007-03-01 20:50:32+00:00

 tags:
--- a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
+++ b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
@ -48,7 +48,7 @@ text-shadow on Apple.com

 Utilizing text-shadow to simulate engraved or stenciled text is widely used on websites. Apple did it everywhere in Mac OS X not just since Leopard (just look at the titlebars). So if you design a website for Mac users you can increase the sexyness of your website, because this particular usage of text-shadow integrates very well with the overall look of Mac OS X. I will explain how to achieve this engraved-text-on-metal effect later on in this article.

-## 2. Which browsers support it?
+## 2. Which browsers support it

 In fact, text-shadow is not a new property since it was first defined with [CSS2 in 1998](http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props) but it was just implemented by the KHTML/WebKit-folks. But it's available in [Safari](http://www.apple.com/safari/) since version 1.1 (2003), in [Konqueror](http://www.konqueror.org/features/browser.php) since version 3.4 (I believe, not sure) and [Opera](http://www.opera.com/) 9.5. Furthermore it's also supported by [Firefox](http://www.mozilla.com/en-US/firefox/firefox.html) 3.1/3.5 and finally [Google Chrome](http://www.google.com/chrome) 2 adds full support for the text-shadow property after they had stripped this from the first version of Chrome.

@ -58,7 +58,7 @@ But with Safari 3.1, the beta release of Opera 9.5, Firefox 3.1 and Google Chrom

 But wait, regarding Safari on Mac OS X there's one more (bad) thing to remember. The Mac OS X 10.5.2 update [resulted in minor changes of the WebKit text-shadow rendering](http://www.islayer.com/blog/?p=255). It seems that with this update text-shadow is finally rendered correctly as WebKit added one extra pixel to the shadow offset on 10.4.11 and 10.5.1.

-## 3. Any chance of cross-browser compatibility?
+## 3. Any chance of cross-browser compatibility

 So the major browser Internet Explorer doesn't support it yet but just don't count on Internet Explorer. I guess they are happy with [coding their own non-standard version of CSS for IE9](http://blogs.msdn.com/ie/archive/2008/04/01/announcing-css-2012.aspx) and making shadows with those [DXImageTransform.Microsoft.Shadow-stuff](<http://msdn2.microsoft.com/en-us/library/ms532985(VS.85).aspx>) which in the end just [looks horrible](http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/). So even IE 9 won't have it included.

@ -80,10 +80,10 @@ p {

 The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:

-1.  value = The X-ccordinate
-2.  value = The Y-coordinate
-3.  value = The blur radius
-4.  value = The color of the shadow
+1. value = The X-ccordinate
+2. value = The Y-coordinate
+3. value = The blur radius
+4. value = The color of the shadow

 Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontically (first value) and placing the shadow below the text vertically (second value).

--- a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md
+++ b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md
@ -2,8 +2,6 @@
 type: post

 title: Apple releases plugin-SDK for Aperture 2.1
-author: Matthias Kretschmann
-
 date: 2008-04-22 05:58:41+00:00

 tags:
--- a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
+++ b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
@ -45,7 +45,7 @@ Leopard included a new version of Preview, the pdf and image-viewing application

 But the best thing with the new Image Capture is the feature of setting the bit depth of the scanner to 16 bits. This was just possible before through the Canon software ScanGear in Photoshop.

-### Scanning right into Apple Aperture?
+### Scanning right into Apple Aperture

 ![Aperture Scanning](../media/aperturescan.png)

--- a/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md
+++ b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md
@ -2,7 +2,6 @@
 type: post

 title: 'HowTo: Use high-quality watermarks in your images with Aperture 2.1'
-author: Matthias Kretschmann
 image: ../media/watermark_aperture.jpg

 date: 2008-05-07 03:27:25+00:00
@ -22,10 +21,10 @@ Since version 1.0 Aperture is able to render images on export with a graphic ove

 The steps for this magic involves 4 simple steps:

-1.  Create a watermark image in Photoshop
-2.  Render different sizes of the watermark image
-3.  Define the watermark image inside an export preset in Aperture
-4.  Make even more...
+1. Create a watermark image in Photoshop
+2. Render different sizes of the watermark image
+3. Define the watermark image inside an export preset in Aperture
+4. Make even more...

 ## 1. Create a watermark image in Photoshop

@ -109,7 +108,7 @@ Or use a subtle colorful spectrum:

 ![Aperture Watermark example v3](../media/watermarkexample_v3.jpg)

-## 4. Make even more...
+## 4. Make even more

 You can also use this feature to add borders or a whole new style to your images without the use of a plugin like [BorderFX](http://web.mac.com/reinharduebel/BorderFX/).

--- a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md
+++ b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md
@ -22,8 +22,6 @@ There are already some lists like this available on the web and they are always

 A handy dropdown icon with the most common create tasks you can do in Aperture 2. This causes Aperture 2 to have a delightful clean toolbar by default.

-
-
 ## 14. Skimming through your projects

 [![Skimming](../media/aperture15_2.png)](../media/aperture15_2.png)
@ -54,8 +52,6 @@ The behavior of double clicking on images can now be set in Aperture's preferenc

 The photobook layout capabilities of Aperture became much powerful with version 2. Now you can create your own book templates where you have much freedom for lay-outing it. In fact you have a powerful Desktop Publishing Program built right into Aperture. Be sure to listen to the [Inside Aperture Podcast about the book layout tool in Aperture](http://digitalmedia.oreilly.com/2008/05/06/aperture-layout-application-schorr.html).

-
-
 ## 9. The V- and W-cycle

 [![HUD](../media/aperture15_8.png)](../media/aperture15_8.png)
@ -64,8 +60,6 @@ By pressing V on your keyboard you can quickly cycle through different viewer mo

 By pressing W on your keyboard you can cycle through the tabbed Inspector on the left and quickly access either your Projects, Metadata or the Adjustments.

-
-
 ## 8. The tabbed Inspector/HUD

 [![HUD](../media/aperture15_7.png)](../media/aperture15_7.png)
--- a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md
+++ b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md
@ -19,8 +19,6 @@ coinhive: true

 ## Dfx digital filters plugin from Tiffen

-
-
 The first one is the [Dfx digital filters plug-in from Tiffen](http://www.tiffen.com/products.html?tablename=dfx) which was already available as an image editing plugin for Photoshop on Windows and Mac. It's an award winning set of [94 individual filters](http://www.tiffen.com/dfx_filter_effects_ig.html) for adjusting and altering your images in Aperture 2.1 and above.

 [![Tiffen Dfx digital filters plugin Tiffen](../media/tiffen_aperture.jpg)](../media/tiffen_aperture.jpg)
@ -45,7 +43,6 @@ Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/aper

 [![Ozone 2.5](../media/dft-ozone_ui.jpg)](../media/dft-ozone_ui.jpg)

-
 All plugins are available now and can be [purchased fom the Digital Film Tools website](http://www.digitalfilmtools.com/buy/home.php?cat=38) as a Super Bundle with all three plugins included for US$ 175 or separately for US$ 50 (Light and Ozone) or US$ 120 (Power Stroke). There are also trial versions for the [Power Stroke](http://www.digitalfilmtools.com/powerstroke/media.htm), [Light](http://www.digitalfilmtools.com/light/media.htm) and [Ozone](http://www.digitalfilmtools.com/ozone/media.htm) plugin available from DFT's website which will watermark the edited images in demo mode.

 ## Nik Viveza
@ -114,7 +111,7 @@ Tiffen website
 [www.tiffen.com](http://www.tiffen.com)

 Digital Film Tools website
-[www.digitalfilmtools.com ](http://www.digitalfilmtools.com)
+[www.digitalfilmtools.com](http://www.digitalfilmtools.com)

 Nik Software website
 [www.niksoftware.com](http://www.niksoftware.com)
--- a/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md
+++ b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md
@ -2,8 +2,6 @@
 type: post

 title: Image Trends releases Fisheye-Hemi plug-in for Apple Aperture
-author: Matthias Kretschmann
-
 date: 2008-05-19 13:05:23+00:00

 tags:
@ -17,11 +15,11 @@ tags:

 From the press release:

-> Photographers can now easily preserve a normal view of people by not distorting their faces and bodies, as the plug-in straightens vertical lines. Fisheye-Hemi Plug-In uses almost all of the pixel data in that view with no loss of image resolution while displaying the intended composition and framing better than other un-warping programs. 
+> Photographers can now easily preserve a normal view of people by not distorting their faces and bodies, as the plug-in straightens vertical lines. Fisheye-Hemi Plug-In uses almost all of the pixel data in that view with no loss of image resolution while displaying the intended composition and framing better than other un-warping programs.

 If you're interested in how the plugin works there's [a cool in-depth explanation from the guys at Image Trends on their website](http://www.imagetrendsinc.com/products/specpage_hemi.asp).

 The Fisheye-Hemi plugin is the first plugin from Image Trends coming for Apple's Aperture. Image Trends' president and CEO Dan Sullivan says that the other plugins [PearlyWhite](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) and [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) are expected to be released within the next 60 days while some mysterious "other products" will follow them too. The plugin costs US$ 29.95 and if you want the plugin for Aperture and Photoshop you get a 50% discount. There's also a free trial version of the plugin available.

-  * [Plugin website](http://www.imagetrendsinc.com/products/prodpage_hemi.asp)
-  * [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/)
+* [Plugin website](http://www.imagetrendsinc.com/products/prodpage_hemi.asp)
+* [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/)
--- a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md
+++ b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md
@ -4,7 +4,6 @@ type: post
 title: Niépce's Camera Obscura And The History Of The First Photograph
 image: ../media/Teaser-Camera-Obscura-Icons.jpg
 download: ../media/niepces_camera_obscura_by_kremalicious.zip
-author: Matthias Kretschmann

 date: 2008-06-03 14:34:03+00:00

--- a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
+++ b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
@ -2,7 +2,6 @@
 type: post

 title: 'HowTo: Make Ubuntu A Perfect Mac File Server And Time Machine Volume'
-author: Matthias Kretschmann
 image: ../media/ubuntu_mac_feature.jpg

 date: 2008-06-19 03:08:11+00:00
@ -45,7 +44,15 @@ Here are the steps involved in setting up your Ubuntu box as a Mac file server:
 - [5. Configure Avahi and advertise services](#5-configure-avahi-and-advertise-services)
 - [6. Configure Time Machine](#6-configure-time-machine)
 - [7. Conclusion, Problems and more informations](#7-conclusion-problems-and-more-informations)
+  - [Problems with creating the backup disk image](#problems-with-creating-the-backup-disk-image)
+  - [Firewall Settings](#firewall-settings)
+- ["Connection Failed"](#connection-failed)
+  - [-5014 error](#-5014-error)
+  - [Time Machine Full System Restore](#time-machine-full-system-restore)
+  - [Netatalk backup disk reaching maximum capacity](#netatalk-backup-disk-reaching-maximum-capacity)
+  - [More Articles](#more-articles)
 - [8. Downloading and using the Server Display Icons](#8-downloading-and-using-the-server-display-icons)
+  - [How to use the icons](#how-to-use-the-icons)
 - [9. Translations Of This Article](#9-translations-of-this-article)

 ## 1. Modify and install Netatalk
--- a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md
+++ b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md
@ -2,8 +2,6 @@
 type: post

 title: Enjoy Kremalicious{iPhone}
-author: Matthias Kretschmann
-
 date: 2008-07-11 00:20:22+00:00

 tags:
@ -11,7 +9,9 @@ tags:
 - wordpress
 ---

-![](../media/kremaliciousiphone_thumb.png)I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?
+![kremalicious iPhone](../media/kremaliciousiphone_thumb.png)
+
+I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?

 <!-- more -->

@ -53,21 +53,20 @@ And finally many thanks to [cschock](http://www.cschock.de) for continuously tes

 ## Resources for you to do the same and even more

-  * [iWPhone by ContentRobot](http://iwphone.contentrobot.com/): 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.
+* [iWPhone by ContentRobot](http://iwphone.contentrobot.com/): 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](http://www.bravenewcode.com/wptouch/): 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
+* [WPTouch - Wordpress iPhonified](http://www.bravenewcode.com/wptouch/): 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](http://www.engageinteractive.co.uk/blog/2008/06/19/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.
+* [Tutorial: Building a website for the iPhone](http://www.engageinteractive.co.uk/blog/2008/06/19/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](http://ajaxian.com/archives/iphone-native-looking-skin): Sort of a template based on css and javascript which simulates the iPhone UI. ([Final look](http://joehewitt.com/files/iphone/navigation.html))
-
-  * [Touching and Gesturing on the iPhone](http://ajaxian.com/archives/iphone-native-looking-skin): Build your websites with some touch gesture features! Here's the javascript code for it.
+* [iPhone Native Looking Skin](http://ajaxian.com/archives/iphone-native-looking-skin): Sort of a template based on css and javascript which simulates the iPhone UI. ([Final look](http://joehewitt.com/files/iphone/navigation.html))

+* [Touching and Gesturing on the iPhone](http://ajaxian.com/archives/iphone-native-looking-skin): 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](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/Introduction/chapter_1_section_1.html)
+* [Safari Web Content Guide for iPhone](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/Introduction/chapter_1_section_1.html)

-  * [iPhone Human Interface Guidelines for Web Applications](http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG/Introduction/chapter_1_section_1.html)
+* [iPhone Human Interface Guidelines for Web Applications](http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG/Introduction/chapter_1_section_1.html)

-  * [iPhone Human Interface Guidelines](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/chapter_1_section_1.html) (free developer account required)
+* [iPhone Human Interface Guidelines](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/chapter_1_section_1.html) (free developer account required)
--- a/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md
+++ b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md
@ -2,15 +2,13 @@
 type: post

 title: Tips for Journalists Reporting From China
-author: Matthias Kretschmann
-
+image: jingjing_chacha_kremalicious.jpg
 date: 2008-08-03 17:10:25+00:00

 tags:
 - photography
 ---

-![Jingjing and Chacha are watching you](../media/jingjing_chacha_kremalicious.jpg)
 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](http://news.bbc.co.uk/2/hi/asia-pacific/7532338.stm). And the [IOC shares the current ideas of censorship in China](http://www.rsf.org/article.php3?id_article=26461).

 <!-- more -->
@ -25,63 +23,36 @@ And remember that you have to protect your Computer _before_ arriving in China b

 The easiest way to get around the firewall is to install [Tor](http://www.torproject.org), [Psiphon](http://psiphon.civisec.org/) or [Proxify](https://proxify.com/) 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)](http://en.wikipedia.org/wiki/Off-the-Record_Messaging) which can be [used with every chat protocol out there](http://www.cypherpunks.ca/otr/).

-
-
 ## 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)](http://www.rsf.org/article.php3?id_article=27991)
-
-[Handbook for Bloggers and Cyber-Dissidents (Reporters Without Borders)](http://www.rsf.org./IMG/pdf/guide_gb_md.pdf)
-
-[Reporters’ Guide to China (Foreign Correspondents Club of China)](http://www.rsf.org/IMG/pdf/Guide_FCCC.pdf)
+- [Advice for foreign journalists covering human rights situation during Beijing Games (Reporters Without Borders)](http://www.rsf.org/article.php3?id_article=27991)
+- [Handbook for Bloggers and Cyber-Dissidents (Reporters Without Borders)](http://www.rsf.org./IMG/pdf/guide_gb_md.pdf)
+- [Reporters’ Guide to China (Foreign Correspondents Club of China)](http://www.rsf.org/IMG/pdf/Guide_FCCC.pdf)
--- a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md
+++ b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md
@ -27,7 +27,7 @@ First you have to create the encrypted disk image where the Aperture Vault will

 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:

-![](../media/securevault3.png)
+![secure vault](../media/securevault3.png)

 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.

@ -37,15 +37,15 @@ Now your newly created sparse bundle disk image ahould be mounted on your deskto

 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.

-![](../media/securevault2.png)
+![secure vault 2](../media/securevault2.png)

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

-![](../media/securevault4.png)
+![secure vault 3](../media/securevault4.png)

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

-![](../media/securevault5.png)
+![secure vault 4](../media/securevault5.png)

 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.

--- a/content/posts/2008-08-26-icy-box-icons.md
+++ b/content/posts/2008-08-26-icy-box-icons.md
@ -4,7 +4,6 @@ type: post
 title: Icy Box Icons
 image: ../media/Teaser-Icy-Box.jpg
 download: ../media/icybox_by_kremalicious.zip
-author: Matthias Kretschmann

 date: 2008-08-26 19:16:38+00:00

@ -26,9 +25,9 @@ The whole package includes 7 icons either packed in a nice tagged iContainer for
    <a class="icon-download" href="../media/icybox_by_kremalicious.zip">Download Icy Box Icons <span>zip</span></a>
 </p>

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

 [![Icy Box Icons](../media/icybox_teaser2_small.png)](../media/icybox_teaser2.jpg)
--- a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md
+++ b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md
@ -2,7 +2,6 @@
 type: post

 title: 'A New Browser Is Coming: Google Chrome'
-author: Matthias Kretschmann
 image: ../media/googlechrome.png

 date: 2008-09-01 20:40:38+00:00
@ -32,8 +31,8 @@ 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](http://www.mattcutts.com/blog/google-chrome-communication/).
-  * Gina from lifehacker.com dissects [Google Chrome's Full List of Special about: Pages](http://lifehacker.com/5045164/).
-  * Google [explains their priorities regarding different Platforms](http://googlemac.blogspot.com/2008/09/platforms-and-priorities.html).
-  * The [Chromium Developer Documentation](http://dev.chromium.org/Home) is available too.
-  * And it seems Google [cut out some features of WebKit like text-shadow](http://www.flickr.com/photos/kurafire/2822606444/).
+* Matt Cutts tries to prevent paranoia and [explains when Google Chrome talk home](http://www.mattcutts.com/blog/google-chrome-communication/).
+* Gina from lifehacker.com dissects [Google Chrome's Full List of Special about: Pages](http://lifehacker.com/5045164/).
+* Google [explains their priorities regarding different Platforms](http://googlemac.blogspot.com/2008/09/platforms-and-priorities.html).
+* The [Chromium Developer Documentation](http://dev.chromium.org/Home) is available too.
+* And it seems Google [cut out some features of WebKit like text-shadow](http://www.flickr.com/photos/kurafire/2822606444/).
--- a/content/posts/2008-10-23-coffee-cup-icon.md
+++ b/content/posts/2008-10-23-coffee-cup-icon.md
@ -15,11 +15,11 @@ tags:

 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 (512x512)
-  * including 3 icons (Black + White version + obligatory folder icon)
-  * [The Finest Coffee Cups - Most Incredible Coffee Icons On The Web](http://www.kremalicious.com/2008/10/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/)
+* 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 (512x512)
+* including 3 icons (Black + White version + obligatory folder icon)
+* [The Finest Coffee Cups - Most Incredible Coffee Icons On The Web](/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/)

 ## Download

--- a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md
+++ b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md
@ -31,200 +31,131 @@ A hyperrealistic icon from Vegrafik

 [![CoffeeCon icon by Vegrafik](../media/coffee-showcase-vegrafik.png)](http://macthemes2.net/forum/viewtopic.php?id=16789993)

-
-
 ## 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 Cup Icon by kremalicious](../media/coffee-showcase-kretschmann.png)](/coffee-cup-icon)

-
-
 ## Coffee folders from Agua Icons by David Lanham

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

 [![Coffee folders from Agua Icons by David Lanham](../media/coffee-showcase-lanham.png)](http://dlanham.com/art/agua/)

-
-
 ## 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.

 [![Kaffe! icon from World of Aqua 3 icon set by Dave Brasgalla](../media/coffee-showcase-brasgalla.png)](http://iconfactory.com/freeware/preview/woa3)

-
-
 ## Starbucks coffee icon by Rok Benedik

-
 [![Starbucks coffee icon by Benedik](../media/coffee-showcase-benedik.png)](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293)

-
-
 ## 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.

 [![Coffee folders from the Maji sets by Jonas Rask](../media/coffee-showcase-rask1.png)](http://www.jonasraskdesign.com/medias/medias.html)

-
-
 ## 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.

 [![Espresso icon by MacRabbit](../media/coffee-showcase-macrabbit.png)](http://macrabbit.com/espresso/)

 ## Coffee folders from the Pry system sets by Jonas Rask

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

 [![Coffee folders from the Pry system sets by Jonas Rask](../media/coffee-showcase-rask2.png)](http://www.jonasraskdesign.com/medias/medias.html)

-
-
 ## Coffee icons from Office Space icon set by VisualPharm

-
 A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps) on the web. Created for Windows so the icons are just 256px in size.

 [![Coffee icons from Office Space icon set by VisualPharm](../media/coffee-showcase-visualpharm.png)](http://www.visualpharm.com/office_space.html)

-
-
 ## The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz

-
 An icon set made in collaboration between [Alejandro Lopez](http://www.dimensionofdeskmod.net/medias/) & [Sergio Ruiz](http://www.camtessadesign.com/descargas/ver/the_coffee_shop) with icons related to a coffee shop.

 [![The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz](../media/coffee-showcase-lopezruiz.png)](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309)

-
-
 ## Espresso icon by Iiro Jäppinen

-
 [![Espresso icon by Iiro Jäppinen](../media/coffee-showcase-jaeppinen.png)](http://iirojappinen.com/medias.html)

-
-
 ## 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.

 [![Coffee Wallpaper by Michael Flarup](../media/coffee-showcase-flarup.png)](http://pixelresort.com/wallpapers/)

-
-
 ## 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.

 [![Bean icon by Laurent Baumann](../media/coffee-showcase-baumann.png)](http://www.bean-osx.com/Bean.html)

-
-
 ## 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.](http://www.mat-u.com/)

 [![Have A Break icons by mat-u](../media/coffee-showcase-matu.png)](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598)

-
-
 ## 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](http://dlanham.com/) for pointing this out.

 ![Java Application icons by Apple](../media/coffee-showcase-apple.png)

-
-
 ## 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](http://God-X.deviantart.com/art/Caffeine-Replacement-Icons-75619389) although the coffee cup looks pretty much the same as the one from Apple's Java application icons.

 [![Caffeine icon by Trevor Kay](../media/coffee-showcase-kaycaffeine.png)](http://lightheadsw.com/caffeine/)

-
-
 ## 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.

 [![Coffee and Tea icons by Kate England](../media/coffee-showcase-england.png)](http://iconfactory.com/freeware/preview/cofe)

-
-
 ## 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.

 [![Moon Coffee icon from Space: 1999 icon set by Dave Brasgalla](../media/coffee-showcase-brasgalla2.png)](http://iconfactory.com/freeware/preview/1999)

-
-
 ## Times Application Icon by Mikio Inose

-
 Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times](http://www.acrylicapps.com/times/) uses a gorgeous icon made by Mikio Inose.

 [![Times Application Icon by Mikio Inose](../media/coffee-showcase-times.png)](http://www.mikworks.com/clientwork/times/)

-
-
 ## 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](http://www.c9-d.com/blog/view/63).

 [![Do you love Cappuccino? by Creative 9 Design](../media/coffee-showcase-lovecappu.png)](http://www.c9-d.com/blog/view/63)

-
-
 ## 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](http://www.madebysofa.com) for the Cappuccino framework.

 [![Cappuccino Framework Icon by Sofa](../media/coffee-showcase-cappuccinosofa.png)](http://cappuccino.org/)

-
-
-
 ## Coffee Tutorials

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

-  * ![](../media/coffee-showcase-tut-psdtuts.png)[Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/)
-Collis from [psdtuts](http://psdtuts.com) made a nice tutorial with a similar perspective as found in [my Coffee Cup Icon](http://www.kremalicious.com/goodies/).
-
-  * ![](../media/coffee-showcase-tut-houle.png)[Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/)
-Photoshop tutorial by Andrew Houle for creating a coffee cup icon.
-
-  * ![](../media/coffee-showcase-tut-vectuts.png)[Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/)
-Peter Anglea with a nice vector tutorial using the open source vector app Inkscape.
-
-  * ![](../media/coffee-showcase-tut-abduzeedo.png)[Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-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](http://www.visualpharm.com/office_space.html).
-
-
-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](http://digg.com/design/The_Finest_Coffee_Most_Incredible_Coffee_Icons_On_The_Web), [StumbleUpon](http://www.stumbleupon.com/url/www.kremalicious.com/2008/10/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/) or in any other form you like.
+* ![Using Gradients to Make Light and Shadow - and a Coffee Cup](../media/coffee-showcase-tut-psdtuts.png)
+  [Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/): Collis from [psdtuts](http://psdtuts.com) made a nice tutorial with a similar perspective as found in [my Coffee Cup Icon](http://www.kremalicious.com/goodies/).
+* ![Design A Coffee Mug Icon](../media/coffee-showcase-tut-houle.png)
+  [Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/): Photoshop tutorial by Andrew Houle for creating a coffee cup icon.
+* ![Creating a Coffee Cup with Inkscape](../media/coffee-showcase-tut-vectuts.png)
+  [Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/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](../media/coffee-showcase-tut-abduzeedo.png)
+  [Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-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](http://www.visualpharm.com/office_space.html).
--- a/content/posts/2009-01-05-the-mac-in-futurama.md
+++ b/content/posts/2009-01-05-the-mac-in-futurama.md
@ -2,10 +2,8 @@
 type: post

 title: The Mac in Futurama
-author: Matthias Kretschmann
-date: 2009-01-05 03:14:45+00:00
-
 image: ../media/futurama-mac-teaser.png
+date: 2009-01-05 03:14:45+00:00

 tags:
  - design
@ -34,7 +32,7 @@ The moon farmer introduces his three robot daughters. One of them is named "Dais

 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](http://musicthing.blogspot.com/2005/05/tiny-music-makers-pt-4-mac-startup.html) composed by [Jim Reekes ](http://en.wikipedia.org/wiki/Jim_Reekes) and first used in 1991 on the [Macintosh Quadra 700](http://en.wikipedia.org/wiki/Macintosh_Quadra_700). Maybe the [Chime of Death](http://en.wikipedia.org/wiki/Chimes_of_Death) would be more suitable for that.
+The sound to start the daily human hunt is the [Mac startup chime](http://musicthing.blogspot.com/2005/05/tiny-music-makers-pt-4-mac-startup.html) composed by [Jim Reekes](http://en.wikipedia.org/wiki/Jim_Reekes) and first used in 1991 on the [Macintosh Quadra 700](http://en.wikipedia.org/wiki/Macintosh_Quadra_700). Maybe the [Chime of Death](http://en.wikipedia.org/wiki/Chimes_of_Death) would be more suitable for that.
 ![Mac startup chime](../media/futurama-mac-02.png)

 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.
--- a/content/posts/2009-02-17-out-of-whale-oil.md
+++ b/content/posts/2009-02-17-out-of-whale-oil.md
@ -4,7 +4,6 @@ type: post
 title: We Are Out Of Whale Oil
 image: ../media/Teaser-Out-Of-Whale-Oil.jpg
 download: ../media/out-of-whale-oil-wall-by-kremalicious.zip
-author: Matthias Kretschmann

 date: 2009-02-17 20:11:55+00:00

@ -23,11 +22,11 @@ Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest F

 ![Futurama: Out Of Whale Oil Wallpaper Detail](../media/out_of_whale_oil_detail.png)Here're the details for the whole pack:

-  * 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
-  * 2 iPhone versions with empty and full whale oil indicator (320x480)
-  * 2 Feminista versions high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
-  * 2 Feminista iPhone versions with empty and full whale oil indicator (320x480)
-  * Icon folder files for this wallpaper release
+* 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
+* 2 iPhone versions with empty and full whale oil indicator (320x480)
+* 2 Feminista versions high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
+* 2 Feminista iPhone versions with empty and full whale oil indicator (320x480)
+* Icon folder files for this wallpaper release

 [![Futurama: Out Of Whale Oil Wallpaper Pack by kremalicious](../media/out-of-whale-oil-overview.png)](http://www.kremalicious.com/goodies/#wall)

--- a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
+++ b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
@ -1,13 +1,12 @@
 ---
 type: post

-title: Ultimate Share Link Bonanza For Coda, Wordpress And Everything Else
+title: Ultimate Share Link Bonanza For Coda, WordPress And Everything Else
 download: ../media/share-link-bonanza-coda-clips.zip
-author: Matthias Kretschmann

 date: 2009-03-29 23:12:15+00:00

-category: 
+category:
 tags:
  - design
  - goodies
@ -22,7 +21,6 @@ Ever wanted to include those sharing links to social or bookmarking sites so use

 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.

-
 <!-- more -->

 ## Share Links Coda Clips Download
@ -84,7 +82,6 @@ Apart from that some sites allow you to add and submit more informations than ju

 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

 ![Tutorial icon by kremalicious](../media/tutorial-icon.png)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:
@ -103,12 +100,8 @@ And if you want to just use an icon with no text use just an img element without
 <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:

 ```html
@ -117,7 +110,6 @@ To me a more cleaner solution is to use the css background-image property to inc

 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:

-
 ```css
 .delicious {
    background: url(delicious.png) no-repeat center center;
@ -125,7 +117,6 @@ And in your CSS select this class and style it with a background image. Assuming
 }
 ```

-
 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:

 ```css
@ -155,526 +146,336 @@ Just click the Toggle All Links button to reveal them and click it again to hide
 `<a href="http://del.icio.us/post?url=http://YOUR URL&amp;title=YOUR TITLE&amp;notes=YOUR NOTES" title="Save To Delicious"></a>`

 **Wordpress**
-`<a href="http://del.icio.us/post?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>&amp;notes=YOUR NOTES" title="Save To Delicious"></a>
-`
+`<a href="http://del.icio.us/post?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>&amp;notes=YOUR NOTES" title="Save To Delicious"></a>`

 ## StumbleUpon

-
-
 **Plain**
 `<a href="http://www.stumbleupon.com/submit?url=http://YOUR URL&amp;title=YOUR TITLE" title="Stumble It!">StumbleUpon</a>`

 **Wordpress**
 `<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Stumble It!">StumbleUpon</a>`

-
-
 ## Facebook

-
-
 **Plain**
 `<a href="http://www.facebook.com/sharer.php?u=http://YOUR URL?t=YOUR TITLE" title="Share On Facebook">Facebook</a>`

 **Wordpress**
 `<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>?t=<?php the_title(); ?>" title="Share On Facebook">Facebook</a>`

-
-
 ## Twitter

-
-
 **Plain**
 `<a href="http://twitter.com/home?status=YOUR MESSAGE ALONG WITH YOUR URL" title="Tweet This">Twitter</a>`

 **Wordpress**
 `<a href="http://twitter.com/home?status=YOUR MESSAGE <?php the_title(); ?> <?php the_permalink();?>" title="Tweet This">Twitter</a>`

-
-
 ## Digg

+### Plain

-
-**Plain**
-
-
+```html
    <code class="html"><!-- 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
+      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></code>
-
-
+```

 **Wordpress**
 `<a href="http://digg.com/submit?url=<?php the_permalink();?>&title=<?php the_title(); ?>&amp;bodytext=YOUR DESCRIPTION&amp;media=NEWS, VIDEO or IMAGES&amp;topic=TOPIC&amp;thumbnails=1" title="Digg This">Digg</a>`

-
-
-
 ## Design Float

-
-
 **Plain**
 `<a href="http://www.designfloat.com/submit.php?url=http://YOUR URL&amp;title=YOUR TITLE" title="Float This!">Design Float</a>`

 **Wordpress**
 `<a href="http://www.designfloat.com/submit.php?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Float This!">Design Float</a>`

-
-
 ## Reddit

-
-
 **Plain**
 `<a href="http://www.reddit.com/submit?url=http://YOUR URL&amp;title=YOUR TITLE" title="Reddit">Reddit</a>`

 **Wordpress**
 `<a href="http://www.reddit.com/submit?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Reddit">Reddit</a>`

-
-
-
 ## Technorati

-
-
 **Plain**
 `<a href="http://www.technorati.com/faves/?add=http://YOUR URL" title="Technorati">Technorati</a>`

 **Wordpress**
 `<a href="http://www.technorati.com/faves/?add=<?php the_permalink();?>" title="Technorati">Technorati</a>`

-
-
-
 ## Yahoo Buzz

-
-
 **Plain**
 `<a href="http://buzz.yahoo.com/submit/?submitUrl=http://YOUR URL&amp;submitHeadline=YOUR TITLE" title="Buzz Up!">Yahoo Buzz</a>`

 **Wordpress**
 `<a href="http://buzz.yahoo.com/submit/?submitUrl=<?php the_permalink();?>&amp;submitHeadline=<?php the_title(); ?>" title="Buzz Up!">Yahoo Buzz</a>`

-
-
-
 ## Newsvine

-
-
 **Plain**
 `<a href="http://www.newsvine.com/_tools/seed&amp;save?u=http://YOUR URL&amp;h=YOUR TITLE" title="Newsvine">Newsvine</a>`

 **Wordpress**
 `<a href="http://www.newsvine.com/_tools/seed&amp;save?u=<?php the_permalink();?>&amp;h=<?php the_title(); ?>" title="Newsvine">Newsvine</a>`

-
-
-
 ## Magnolia

-
-
 **Plain**
 `<a href="http://ma.gnolia.com/bookmarklet/add?url=http://YOUR URL&amp;title=YOUR TITLE" title="Magnolia">Magnolia</a>`

 **Wordpress**
 `<a href="http://ma.gnolia.com/bookmarklet/add?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Magnolia">Magnolia</a>`

-
-
-
 ## Google Bookmarks

-
-
 **Plain**
 `<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=http://YOUR URL&amp;title=YOUR TITLE" title="Save To Google Bookmarks">Google Bookmarks</a>`

 **Wordpress**
 `<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Save To Google Bookmarks">Google Bookmarks</a>`

-
-
-
 ## FriendFeed

-
-
 **Plain**
 `<a href="http://friendfeed.com/share?url=http://YOUR URL&amp;title=YOUR TITLE" title="Share ON FriendFeed">FriendFeed</a>`

 **Wordpress**
 `<a href="http://friendfeed.com/share?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Share ON FriendFeed">FriendFeed</a>`

-
-
-
 ## Blogmarks

-
-
 **Plain**
 `<a href="http://blogmarks.net/my/new.php?mini=1&amp;url=http://YOUR URL&amp;title=YOUR TITLE" title="Save To Blogmarks">Blogmarks</a>`

 **Wordpress**
 `<a href="http://blogmarks.net/my/new.php?mini=1&amp;url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Save To Blogmarks">Blogmarks</a>`

-
-
-
 ## MySpace

-
-
 **Plain**
 `<a href="http://www.myspace.com/Modules/PostTo/Pages/?l=3&amp;u=http://YOUR URL&amp;t=YOUR TITLE&amp;c=YOUR COMMENT" title="MySpace">MySpace</a>`

 **Wordpress**
 `<a href="http://www.myspace.com/Modules/PostTo/Pages/?l=3&amp;u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>&amp;c=YOUR COMMENT" title="MySpace">MySpace</a>`

-
-
-
 ## Script & Style

-
-
 **Plain**
 `<a href="http://scriptandstyle.com/submit?url=http://>YOUR URL&amp;title=YOUR TITLE" title="Script &amp; Style">Script & Style</a>`

 **Wordpress**
 `<a href="http://scriptandstyle.com/submit?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Script &amp; Style">Script & Style</a>`

-
-
-
 ## Blinklist

-
-
 **Plain**
 `<a href="http://blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=http://YOUR URL&amp;Title=YOUR TITLE" title="Blinklist">Blinklist</a>`

 **Wordpress**
 `<a href="http://blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=<?php the_permalink();?>&amp;Title=<?php the_title(); ?>" title="Blinklist">Blinklist</a>`

-
-
-
 ## Slashdot

-
-
 **Plain**
 `<a href="http://slashdot.org/bookmark.pl?url=http://YOUR URL&amp;title=YOUR TITLE" title="Slashdot">Slashdot</a>`

 **Wordpress**
 `<a href="http://slashdot.org/bookmark.pl?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Slashdot">Slashdot</a>`

-
-
-
 ## LinkedIn

-
-
 **Plain**
 `<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://YOUR URL&amp;title=YOUR TITLE&amp;summary=YOUR SUMMARY&amp;source=" title="LinkedIn">LinkedIn</a>`

 **Wordpress**
 `<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>&amp;summary=YOUR SUMMARY&amp;source=" title="LinkedIn">LinkedIn</a>`

-
-
-
 ## Windows Live

-
-
 **Plain**
 `<a href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;mkt=en-us&amp;url=http://YOUR URL&amp;title=YOUR TITLE&amp;top=1" title="Windows Live">Windows Live</a>`

 **Wordpress**
 `<a href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;mkt=en-us&amp;url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>&amp;top=1" title="Windows Live">Windows Live</a>`

-
-
-
 ## Furl

-
-
 **Plain**
 `<a href="http://furl.net/storeIt.jsp?u=http://YOUR URL&amp;t=YOUR TITLE" title="Furl">Furl</a>`

 **Wordpress**
 `<a href="http://furl.net/storeIt.jsp?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Furl">Furl</a>`

-
-
-
 ## Yahoo Bookmarks

-
-
 **Plain**
 `<a href="http://bookmarks.yahoo.com/toolbar/savebm?opener=tb&amp;u=http://YOUR URL&amp;t=YOUR TILE" title="Yahoo! Bookmarks">Yahoo Bookmarks</a>`

 **Wordpress**
 `<a href="http://bookmarks.yahoo.com/toolbar/savebm?opener=tb&amp;u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Yahoo! Bookmarks">Yahoo Bookmarks</a>`

-
-
-
 ## Mixx

-
-
 **Plain**
 `<a href="http://www.mixx.com/submit?page_url=http://YOUR URL" title="Mixx">Mixx</a>`

 **Wordpress**
 `<a href="http://www.mixx.com/submit?page_url=<?php the_permalink();?>" title="Mixx">Mixx</a>`

-
-
-
 ## Propeller

-
-
 **Plain**
 `<a href="http://www.propeller.com/submit/?U=http://YOUR URL&amp;T=YOUR TITLE" title="Propeller">Propeller</a>`

 **Wordpress**
 `<a href="http://www.propeller.com/submit/?U=<?php the_permalink();?>&amp;T=<?php the_title(); ?>" title="Propeller">Propeller</a>`

-
-
-
 ## Yigg

-
-
 **Plain**
 `<a href="http://www.yigg.de/neu?exturl=http://YOUR URL&amp;exttitle=YOUR TITLE" title="Yigg">Yigg</a>`

 **Wordpress**
 `<a href="http://www.yigg.de/neu?exturl=<?php the_permalink();?>&amp;exttitle=<?php the_title(); ?>" title="Yigg">Yigg</a>`

-
-
-
 ## Mr Wong

-
-
 **Plain**
 `<a href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=http://YOUR URL&amp;bm_description=YOUR TITLE" title="Mr Wong">Mr Wong</a>`

 **Wordpress**
 `<a href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=<?php the_permalink();?>&amp;bm_description=<?php the_title(); ?>" title="Mr Wong">Mr Wong</a>`

-
-
-
 ## Diigo

-
-
 **Plain**
 `<a href="http://secure.diigo.com/post?url=http://YOUR URL&amp;title=YOUR TITLE" title="Diigo">Diigo</a>`

 **Wordpress**
 `<a href="http://secure.diigo.com/post?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Diigo">Diigo</a>`

-
-
-
 ## N4G

-
-
 **Plain**
 `<a href="http://www.n4g.com/tips.aspx?url=http://YOUR URL&amp;title=YOUR TITLE" title="N4G">N4G</a>`

 **Wordpress**
 `<a href="http://www.n4g.com/tips.aspx?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="N4G">N4G</a>`

-
-
-
 ## Current

-
-
 **Plain**
 `<a href="http://current.com/clipper.htm?url=http://YOUR URL&amp;title=YOUR TITLE&amp;src=st" title="Current">Current</a>`

 **Wordpress**
 `<a href="http://current.com/clipper.htm?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>&amp;src=st" title="Current">Current</a>`

-
-
-
 ## Simpy

-
-
 **Plain**
 `<a href="http://www.simpy.com/simpy/LinkAdd.do?href=http://YOUR URL&amp;title=YOUR TITLE" title="Simpy">Simpy</a>`

 **Wordpress**
 `<a href="http://www.simpy.com/simpy/LinkAdd.do?href=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Simpy">Simpy</a>`

-
-
-
 ## Oknotizie

-
-
 **Plain**
 `<a href="http://oknotizie.alice.it/post?url=http://YOUR URL&amp;title=YOUR TITLE" title="Oknotizie">Oknotizie</a>`

 **Wordpress**
 `<a href="http://oknotizie.alice.it/post?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Oknotizie">Oknotizie</a>`

-
-
-
 ## Care2

-
-
 **Plain**
 `<a href="http://www.care2.com/news/compose?share[link_url]=http://YOUR URL&amp;share[title]=YOUR TITLE" title="Care2">Care2</a>`

 **Wordpress**
 `<a href="http://www.care2.com/news/compose?share[link_url]=<?php the_permalink();?>&amp;share[title]=<?php the_title(); ?>" title="Care2">Care2</a>`

-
-
-
 ## Faves

-
-
 **Plain**
 `<a href="http://www.faves.com/Authoring.aspx?u=http://YOUR URL&amp;t=YOUR TITLE" title="Faves">Faves</a>`

 **Wordpress**
 `<a href="http://www.faves.com/Authoring.aspx?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Faves">Faves</a>`

-
-
-
 ## Meneame

-
-
 **Plain**
 `<a href="http://meneame.net/submit.php?url=http://YOUR URL" title="Meneame">Meneame</a>`

 **Wordpress**
 `<a href="http://meneame.net/submit.php?url=<?php the_permalink();?>" title="Meneame">Meneame</a>`

-
-
-
 ## Fresqui

-
-
 **Plain**
 `<a href="http://ocio.fresqui.com/post?url=http://YOUR URL&amp;title=YOUR TITLE" title="Fresqui">Fresqui</a>`

 **Wordpress**
 `<a href="http://ocio.fresqui.com/post?url=<?php the_permalink();?>&amp;title=<?php the_title(); ?>" title="Fresqui">Fresqui</a>`

-
-
-
 ## Funp

-
-
 **Plain**
 `<a href="http://funp.com/pages/submit/add.php?title=YOUR TITLE&amp;url=http://YOUR URL&amp;via=tools" title="Funp">Funp</a>`

 **Wordpress**
 `<a href="http://funp.com/pages/submit/add.php?title=<?php the_title(); ?>&amp;url=<?php the_permalink();?>&amp;via=tools" title="Funp">Funp</a>`

-
-
-
 ## Kirtsy

-
-
 **Plain**
 `<a href="http://www.kirtsy.com/submit.php?url=http://YOUR URL" title="Kirtsy">Kirtsy</a>`

 **Wordpress**
 `<a href="http://www.kirtsy.com/submit.php?url=<?php the_permalink();?>" title="Kirtsy">Kirtsy</a>`

-
-
-
 ## Dealspl.us

-
-
 **Plain**
 `<a href="http://dealspl.us/add.php?ibm=1&amp;url=http://YOUR URL" title="Dealspl.us">Dealspl.us</a>`

 **Wordpress**
 `<a href="http://dealspl.us/add.php?ibm=1&amp;url=<?php the_permalink();?>" title="Dealspl.us">Dealspl.us</a>`

-
-
-
 ## Xanga

-
-
 **Plain**
 `<a href="http://www.xanga.com/private/editorx.aspx?t=YOUR TITLE&amp;u=http://YOUR URL&amp;s=" title="Xanga">Xanga</a>`

 **Wordpress**
 `<a href="http://www.xanga.com/private/editorx.aspx?t=<?php the_title(); ?>&amp;u=<?php the_permalink();?>&amp;s=" title="Xanga">Xanga</a>`

-
-
-
 ## Sphinn

-
-
 **Plain**
 `<a href="http://sphinn.com/submit.php?url=http://YOUR URL" title="Sphinn">Sphinn</a>`

@ -687,6 +488,4 @@ Just click the Toggle All Links button to reveal them and click it again to hide

 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](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=krema%40jpberlin%2ede&item_name=kremalicious%2ecom%20%2d%20Buy%20me%20a%20coffee%20or%20two%20or%20three%20or%20more&no_shipping=1&return=http%3a%2f%2fwww%2ekremalicious%2ecom%2fthank%2dyou%2f&tax=0&currency_code=EUR&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8).

-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](http://www.kremalicious.com/about/contact). 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](http://macrabbit.com/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!](http://www.kremalicious.com/about/contact)
+And that's it.
--- a/content/posts/2009-06-24-adiumeetie.md
+++ b/content/posts/2009-06-24-adiumeetie.md
@ -4,7 +4,6 @@ type: post
 title: Adiumeetie. Tweetie Style Adium Icon
 image: ../media/Teaser-Adiumeetie.jpg
 download: ../media/adiumeetie-by-kremalicious.zip
-author: Matthias Kretschmann

 date: 2009-06-24 21:00:38+00:00

@ -24,7 +23,6 @@ The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16

 ![Adiumeetie States](../media/Adiumeetie-Teaser-AdiumIcon.png)

-
 ## Download

 Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab this icon while it's hot.
--- a/content/posts/2009-12-17-wordpress-post-thumbnails.md
+++ b/content/posts/2009-12-17-wordpress-post-thumbnails.md
@ -2,7 +2,6 @@
 type: post

 title: Using The New Post Thumbnail Feature In WordPress 2.9
-author: Matthias Kretschmann

 date: 2009-12-17 04:00:21+00:00

@ -44,7 +43,6 @@ This makes sure WordPress installation prior to 2.9 won't get screwed up when us

 ## 2. Add A Post Thumbnail To Your Post

-
 ![Add Post Thumbnail](../media/wordpress-thumbnail-2.png)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_.
@ -55,10 +53,8 @@ You can close the media dialogue now and you will see the image in the Post Thum

 ![Post Thumbnail added](../media/wordpress-thumbnail-4.png)

-
 ## 3. Display The Post Thumbnail In Your Theme

-
 ![Add to theme](../media/wordpress-thumbnail-5.png)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
@ -85,10 +81,8 @@ _(Note: Matt [left a comment on WP Engineer](http://wpengineer.com/the-ultimativ
 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:
 [css].wp-post-image { border: 2px solid #ccc; } [/css]

-
 ### 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
@ -113,11 +107,8 @@ As for the title attribute this will be grabbed automatically from the entry you
 <?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](http://codex.wordpress.org/Function_Reference/get_option) and then put it in the array:

 ```php
@ -141,11 +132,8 @@ You can also detect the Media settings for the other sizes and whether the crop
 ?>
 ```

-
-
 ## 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](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility):
@ -163,33 +151,19 @@ if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {

 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](http://wpengineer.com/about-wordpress-post-thumbnail/)
-
-
 * WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/)
-
-
 * WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility)
-
-
 * Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature)
-
-
 * Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/)
-
-
 * Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/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.

-
 <a href="http://krlc.us/givecoffee">![Oh no!](../media/coffee-cup-empty.png)</a>

-
 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](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee.

 ## Article Updates
--- a/content/posts/2010-02-04-ipixelpad.md
+++ b/content/posts/2010-02-04-ipixelpad.md
@ -4,13 +4,13 @@ type: post
 title: iPixelPad - Tongue Twisting But Crisp iPad Icons
 image: ../media/Teaser-iPixelPad.png
 download: ../media/ipixelpad_by_kremalicious.zip
-author: Matthias Kretschmann
-
 date: 2010-02-04 15:21:42+00:00
- 
+
 tags:
 - goodies
 - icon
+- ios
+- ipad

 coinhive: true
 ---
@ -35,6 +35,5 @@ The icons come in various formats: iContainer, ICNS, ICO and PNG files for each

 ## License

-
 [![Creative Commons License](http://i.creativecommons.org/l/by-nc/3.0/de/88x31.png)](http://creativecommons.org/licenses/by-nc/3.0/de/)
 iPixelPad by [Matthias Kretschmann](http://kremalicious.com) is licensed under a [Creative Commons Attribution-Noncommercial 3.0 Germany License](http://creativecommons.org/licenses/by-nc/3.0/de/).
--- a/content/posts/2011-12-15-badged.md
+++ b/content/posts/2011-12-15-badged.md
@ -3,7 +3,6 @@ type: post

 title: Badged - iOS Style Notification Badges for WordPress
 image: ../media/Badged-Teaser-kremalicious@2x.png
-author: Matthias Kretschmann
 updated: 2014-10-11 07:56:46+00:00

 date: 2011-12-15 07:56:46+00:00
@ -11,6 +10,7 @@ date: 2011-12-15 07:56:46+00:00
 tags:
 - goodies
 - wordpress
+- ios

 coinhive: true
 ---
@ -38,63 +38,61 @@ The plugin is hosted on GitHub and will always be mirrored in the WordPress plug
 3. Enjoy
 4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default:

-![](../media/badged-settings.png)
+![Badged settings](../media/badged-settings.png)

 If you find any problems you can [open an issue on GitHub](https://github.com/kremalicious/Badged/issues) or just drop me a line in the comments or on [Twitter](http://twitter.com/kremalicious).

 ## Version History

-**v1.0.1**
+### v1.0.1

-  * tested for WP 4.0
-  * Spanish translation, muchas gracias to Andrew Kurtis from [webhostinghub.com](http://www.webhostinghub.com)
-  * don't style comments badge with 0 comments
-  * improved styles
-  * admin settings page fixes
-  * plugin icon and updated banner & screenshots
+* tested for WP 4.0
+* Spanish translation, muchas gracias to Andrew Kurtis from [webhostinghub.com](http://www.webhostinghub.com)
+* don't style comments badge with 0 comments
+* improved styles
+* admin settings page fixes
+* plugin icon and updated banner & screenshots

-**v1.0.0**
+### v1.0.0

-  * new default style based on iOS 7
-  * new setting to switch back to pre-iOS 7 style
-  * rewritten from the ground up based on Tom McFarlin’s excellent WordPress Plugin Boilerplate
-  * settings through WordPress Settings API
-  * Retina banner for WordPress plugin repository listing
-  * drop IE 8 support (still present in pre-iOS 7 style)
-  * using Grunt for optimized images and minified css
-  * confusing and ridiculous version number jump
+* new default style based on iOS 7
+* new setting to switch back to pre-iOS 7 style
+* rewritten from the ground up based on Tom McFarlin’s excellent WordPress Plugin Boilerplate
+* settings through WordPress Settings API
+* Retina banner for WordPress plugin repository listing
+* drop IE 8 support (still present in pre-iOS 7 style)
+* using Grunt for optimized images and minified css
+* confusing and ridiculous version number jump

-**v0.3.6**
+### v0.3.6

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

-**v0.3.5**
+### 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
+* 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

-**v0.3.4**
+* more descriptive readme and settings footer with links to blog post & github page
+* updated translation

-  * more descriptive readme and settings footer with links to blog post & github page
-  * updated translation
+### v0.3.2

-**v0.3.2**
+* Make the plugin work if symlinked

-  * Make the plugin work if symlinked
+### v0.3

-**v0.3**
+* initial beta release

-  * initial beta release
+### v0.2

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

-**v0.2**
+### v0.1

-  * added options to control whether the badges show up in admin menu or toolbar (default is both)
-
-**v0.1**
-
-  * initial alpha release
+* initial alpha release
--- a/content/posts/2012-02-26-mk-v2.md
+++ b/content/posts/2012-02-26-mk-v2.md
@ -3,7 +3,6 @@ type: post

 title: Personal Site v2
 image: ../media/mkv2.jpg
-author: Matthias Kretschmann

 date: 2012-02-26 21:29:54+00:00

@ -17,50 +16,34 @@ Today I finally launched v2 of my personal site, still following the concept of

 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.

-![](../media/mkv2-detail.png)
+![MK v2 detail](../media/mkv2-detail.png)

 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](http://keyamoon.com/icomoon)) embedded with @font-face.

-![](../media/mkv2-balls.jpg)
-
+![MK v2 balls](../media/mkv2-balls.jpg)

 ## 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](http://cssgrid.net) and [320 and up](http://www.stuffandnonsense.co.uk/projects/320andup/).

-![](../media/mkv2-responsivelayouts.jpg)
+![MK v2 responsive layout](../media/mkv2-responsivelayouts.jpg)

 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)](../media/mkv2-iphone.png)
-
-
-  * [iOS - Mobile Safari (iPad)](../media/mkv2-ipad.png)
-
-
-  * [Android - Android Browser (Nexus S)](../media/mkv2-android.png)
-
-
-  * [Android - Chrome beta (Nexus S)](../media/mkv2-android-chrome.png)
-
-
-  * [Android - Firefox (Nexus S)](../media/mkv2-android-firefox.png)
-
+* [iOS - Mobile Safari (iPhone 4S)](../media/mkv2-iphone.png)
+* [iOS - Mobile Safari (iPad)](../media/mkv2-ipad.png)
+* [Android - Android Browser (Nexus S)](../media/mkv2-android.png)
+* [Android - Chrome beta (Nexus S)](../media/mkv2-android-chrome.png)
+* [Android - Firefox (Nexus S)](../media/mkv2-android-firefox.png)

 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](http://www.modernizr.com/) & [jQuery](http://jquery.com/) 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](https://market.android.com/details?id=com.android.chrome) which works perfectly fine with images on a website.
@ -69,22 +52,20 @@ Interesting side note: while Webkit-based browsers are usually the best bet to f

 If you're interested, here're the non-minified versions of the main [css file](http://matthiaskretschmann.com/style/css/style.css) & [javascript file](http://matthiaskretschmann.com/style/js/script.js).

-
 ## The touch hover problem

-
-![](../media/mkv2-portfolio-overlay.jpg)
+![MK v2 overlay](../media/mkv2-portfolio-overlay.jpg)

 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.

-![](../media/mkv2-ipad-touchindicator.jpg) 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.
+![MK v2 touch indicator](../media/mkv2-ipad-touchindicator.jpg)
+
+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.
--- a/content/posts/2012-04-04-android-tab-conundrum.md
+++ b/content/posts/2012-04-04-android-tab-conundrum.md
@ -3,8 +3,6 @@ type: post

 title: The Android Tab Bar Conundrum. Again.
 image: ../media/tabs_overview.png
-
-author: Matthias Kretschmann
 date: 2012-04-04 14:24:30+00:00

 tags:
@ -18,7 +16,7 @@ Most obviously in the form of the app's main navigation tabs which Instagram fo

 ## Problem No. 1: Navigation Controls

-![](../media/android-navigation-buttons.png)
+![Android Navigation Buttons](../media/android-navigation-buttons.png)

 The suggested [top placement in the Android Design Guidelines](http://developer.android.com/design/building-blocks/tabs.html) 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.

@ -26,7 +24,7 @@ Now I'm usually all for breaking the rules because that's the only way innovatio

 ## Problem No. 2: Longer Screens

-![](../media/android-galaxy-note.png)
+![Galaxy Note](../media/android-galaxy-note.png)

 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.

@ -46,6 +44,6 @@ There's another way out to solve both problems: Combining scrollable & fixed tab

 Here's a quick mockup:

-![](../media/Instagram-Swipe.png)
+![Instagram swipe](../media/Instagram-Swipe.png)

 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](https://plus.google.com/109726284197282147930/posts/5McKooqNnnd).
--- a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md
+++ b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md
@ -3,19 +3,15 @@ type: link

 title: The origins of the <blink> tag
 linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag
-author: Matthias Kretschmann

 date: 2012-04-20 08:48:46+00:00

 tags:
 - design
 - history
+- html
 ---

 Funny story from [Lou Montulli](http://www.montulli.org/lou), who is the credited inventor of the <blink> tag. As suspected of generations of web designers, it involved a bar and much alcohol:

 > 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.
-
-
-
-
--- a/content/posts/2012-04-30-announcing-sketch2.md
+++ b/content/posts/2012-04-30-announcing-sketch2.md
@ -3,18 +3,14 @@ type: link

 title: Announcing Sketch 2.0
 linkurl: http://www.bohemiancoding.com/about/blog/announcing-sketch-2-0/
-author: Matthias Kretschmann

 date: 2012-04-30 12:37:05+00:00

 tags:
 - design
+- sketch
 ---

 Remarkable update to Bohemian Coding's [Sketch](http://bohemiancoding.com/sketch) app. It's like Photoshop but with only the UI design related features included:

 > 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.
-
-
-
-
--- a/content/posts/2012-05-14-welcome-to-kremalicious2.md
+++ b/content/posts/2012-05-14-welcome-to-kremalicious2.md
@ -28,32 +28,32 @@ To make future maintenance a bit easier, I’m using the simple [HS Responsive

 ## Typography

-![](../media/kremalicious2-typography.jpg)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](http://www.janfromm.de/typefaces/rooney/overview/) from [Jan Fromm](https://twitter.com/janfromm) which looks just gorgeous on Retina screens. All headings & buttons use Adobe's [Cronos Pro](https://typekit.com/fonts/cronos-pro).
+![kremalicious2 typography](../media/kremalicious2-typography.jpg)
+
+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](http://www.janfromm.de/typefaces/rooney/overview/) from [Jan Fromm](https://twitter.com/janfromm) which looks just gorgeous on Retina screens. All headings & buttons use Adobe's [Cronos Pro](https://typekit.com/fonts/cronos-pro).

 Sadly, Typekit [only works in webkit based mobile browsers](http://help.typekit.com/customer/portal/articles/6786) which is a real bummer. Sorry Firefox & Opera users on mobile devices.

 ## Icons

-![](../media/kremalicious2-topicicons.jpg)All icons on the site are coming from the awesome icon font [Font Awesome](http://fortawesome.github.com/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](http://gregoryloucas.github.com/Font-Awesome-More/) from Gregory Loucas ([@gregoryLpaul](https://twitter.com/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.
+![kremalicious2 icons](../media/kremalicious2-topicicons.jpg)

+All icons on the site are coming from the awesome icon font [Font Awesome](http://fortawesome.github.com/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](http://gregoryloucas.github.com/Font-Awesome-More/) from Gregory Loucas ([@gregoryLpaul](https://twitter.com/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:

-![](../media/kremaliciouscom-iPad-3.jpg)
+![kremalicious2 iPad 3](../media/kremaliciouscom-iPad-3.jpg)

 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](http://www.rootstheme.com/) 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](http://alexking.org/blog/2011/10/25/wordpress-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:
@ -62,57 +62,44 @@ If you want to peek around in the theme files, you can head over to the kremalic

 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

-
-![](../media/kremalicious2-photoposts.jpg)
+![kremalicious2 photo posts](../media/kremalicious2-photoposts.jpg)

 [Photo posts](/photos) 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.

-![](../media/kremalicious2-photogrid.jpg)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.
+![kremalicious2 photo grid](../media/kremalicious2-photogrid.jpg)
+
+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](http://masonry.desandro.com/). 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](/goodies) and the [photos](/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](http://feeds.feedburner.com/kremalicious) [Comments feed](http://feeds.feedburner.com/kremalicious_comments)
+The RSS feeds for posts and comments have been moved to Feedburner. You can just use kremalicious.com/feed.xml.

 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](https://twitter.com/kremalicious) 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](https://twitter.com/kremaliciouscom) [+kremalicious](https://plus.google.com/100015950464424503954)
@ -121,10 +108,8 @@ Please be aware that it’s not possible to follow the Google+ profile link on m

 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](https://www.google.com/producer/editions/CAowx93oAQ/kremalicious)
--- a/content/posts/2012-05-15-wp-icons-template.md
+++ b/content/posts/2012-05-15-wp-icons-template.md
@ -3,7 +3,6 @@ type: post

 title: WordPress Admin Icons Template
 image: ../media/kremalicious-Teaser-WP-Icon-Template.png
-author: Matthias Kretschmann

 date: 2012-05-15 16:00:44+00:00

@ -24,8 +23,8 @@ Here’s a template for designing your own icons for the admin area of WordPress

 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
+* 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.

@ -33,7 +32,7 @@ So if you value quality and want pixel perfect icons in your admin area you need

 ## The Template

-![](../media/WordPress-Admin-Icons-Template-Filled.png)
+![WordPress Admin Icons Template](../media/WordPress-Admin-Icons-Template-Filled.png)

 I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:

@ -57,8 +56,8 @@ While `register_post_type()` and `add_menu_page()` let you define a URL for an i

 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
+* 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](http://randyjensenonline.com/thoughts/wordpress-custom-post-type-fugue-icons/).

@ -68,7 +67,6 @@ You can always refer to the inline commented versions of these snippets in the [

 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
 <?php
 /**
@ -77,44 +75,43 @@ WordPress automatically puts an ID around your new menu item which contains the
 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) {
+  ?>
+  <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: ../media/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: ../media/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>
+      /* Admin Menu - 16px @2x */
+      #menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
+        background-image: ../media/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: ../media/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 }
-
 ?>
 ```

@ -145,52 +142,52 @@ So all this combined leads to this snippet:
 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()
+  ?>
+  <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: 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;
+          background-image: ../media/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 */
+        /* Option Screen - 32px @2x */
        #PLUGINNAME.icon32 {
-            background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
+          background-image: ../media/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;
        }
-
-        @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: ../media/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: ../media/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>
+    }
+  </style>
 <?php }

 ?>
@ -204,9 +201,9 @@ Please note these snippets are just suggestions. I tried to make them as much un

 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
+* 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

@ -218,4 +215,4 @@ But if you’re super cool and want to catch some karma you place a link back to

 If you need some inspiration for nicely consistent icons you should check out [these great admin icons from Laura Kalbag](http://laurakalbag.com/wordpress-admin-icons/).

-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](http://julien-c.fr/2012/07/wordpress-admin-icons/)
+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](http://julien-c.fr/2012/07/wordpress-admin-icons/).
--- a/content/posts/2012-05-21-why-comic-sans.md
+++ b/content/posts/2012-05-21-why-comic-sans.md
@ -15,7 +15,6 @@ tags:
 The creator of Comic Sans, Vincent Connare, [revealing the irony of it](http://www.connare.com/whycomic.htm):

 > 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)](http://www.connare.com/ihatecomic.pdf)
--- a/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md
+++ b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md
@ -2,7 +2,7 @@
 type: post

 title: Retina icons in WordPress 3.4
-author: Matthias Kretschmann
+image: ../media/wp34_retina_icons.png

 date: 2012-06-13 19:01:20+00:00

@ -15,14 +15,12 @@ coinhive: true

 Apart from a nicely responsive admin area, WordPress 3.4 now [includes retina assets](http://core.trac.wordpress.org/ticket/20293) for all the icons in the admin area to make them look crisp on devices with high-dpi screens like the iPhone or iPad 3, most flagship Android devices and of course the new ÜberMacBookPro.

-And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in full scale, taken on the iPad 3:
-
-![](../media/wp34_retina_icons.png)
-
 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.

-[![](../media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)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](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.
+![kremalicious-Teaser-WP-Icon-Template](../media/kremalicious-Teaser-WP-Icon-Template.png)
+
+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](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.

 And no, [SVG for your icons are not the solution](http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html).
--- a/content/posts/2013-07-13-enterprise-software-sucks.md
+++ b/content/posts/2013-07-13-enterprise-software-sucks.md
@ -2,7 +2,6 @@
 type: post

 title: Enterprise Software Sucks
-author: Matthias Kretschmann
 date: 2013-07-13 13:19:44+00:00

 tags:
@ -44,7 +43,7 @@ While being human and friendly sounds like a no-brainer, in the corporate softwa

 Creating this layer of delight on top of the functional layers is especially crucial in printing. Good design helps making users more forgiving about errors no matter who’s responsible for them. Printers – the little autistic beings they are – just tend to not work from time to time, and a failing device immediately reflects back on our service. If that’s the case the least we can do is make the experience beautiful.

-![](../media/buddha-printer.png)
+![Buddha printer](../media/buddha-printer.png)

 Paired with helpful and to-the-point copy, this creates a friendly and unifying atmosphere across the whole product, ranging from the web to native apps on Mac, Windows, iOS and Android.

--- a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md
+++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md
@ -22,12 +22,10 @@ There are many reasons you might want to browse anonymously which can be accompl

 I'm using macOS High Sierra (10.13) for the following instructions but it should work on almost any macOS version.

-## Table of Contents
-
 - [Tor Browser](#tor-browser)
 - [Install Tor](#install-tor)
 - [Set network proxy settings via System Preferences](#set-network-proxy-settings-via-system-preferences)
- [All in one go: start Tor &amp; set network proxy settings automatically](#all-in-one-go-start-tor-set-network-proxy-settings-automatically)
+- [All in one go: start Tor & set network proxy settings automatically](#all-in-one-go-start-tor--set-network-proxy-settings-automatically)
 - [Non-standard apps](#non-standard-apps)

 ---
@ -71,8 +69,8 @@ In order for all your system traffic being routed through Tor you need to adjust
 You can do this under *System Preferences > Network* by creating a specific Tor network location for it:

 1. From Location dropdown at the top, select *Edit Locations...*
-1. Create a new location by hitting the plus button and name it *Tor*. Hitting Done will select the new location which is now ready to be configured.
-1. Go to *Advanced > Proxies* and activate *SOCKS Proxy* and add those values:
+2. Create a new location by hitting the plus button and name it *Tor*. Hitting Done will select the new location which is now ready to be configured.
+3. Go to *Advanced > Proxies* and activate *SOCKS Proxy* and add those values:

 - *SOCKS proxy server*: `localhost`
 - *Port*: `9050`
@ -149,4 +147,3 @@ Always [check](https://check.torproject.org) your Tor connection with whatever a

 - *SOCKS proxy server*: `localhost`
 - *Port*: `9050`
-
--- a/package.json
+++ b/package.json
@ -13,15 +13,15 @@
    "rename:scrypt": "sed -i -e 's|./build/Release/scrypt|scrypt|g' node_modules/scrypt/index.js",
    "copy": "cp -R content/media/ public",
    "format": "run-p format:js format:css format:md format:yaml",
-    "format:js": "prettier-eslint --write 'src/**/*.{js,jsx}'",
-    "format:css": "prettier-stylelint --write",
-    "format:md": "prettier --write \"**/*.md\" --no-semi",
+    "format:js": "prettier --write '**/*.{js,jsx}'",
+    "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
+    "format:md": "prettier --write '**/*.md'",
    "format:yaml": "prettier --write \"**/*.y?(a)ml\"",
-    "lint:js": "eslint --ext .js,.jsx .",
+    "lint:js": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .js,.jsx .",
    "lint:css": "stylelint ./src/**/*.{css,scss}",
-    "lint:md": "markdownlint \"**/*.md\"",
-    "lint:yaml": "prettier --list-different \"**/*.y?(a)ml\"",
-    "lint": "run-p --continue-on-error lint:js lint:css lint:yaml",
+    "lint:md": "markdownlint './**/*.{md,markdown}' --ignore './{node_modules,public,.cache,.git}/**/*'",
+    "lint:yaml": "prettier '**/*.{yml,yaml}' --list-different",
+    "lint": "run-p --continue-on-error lint:js lint:css lint:yaml lint:md",
    "test": "npm run lint",
    "deploy": "./scripts/deploy.sh",
    "new": "babel-node ./scripts/new.js"
@ -94,7 +94,6 @@
    "npm-run-all": "^4.1.3",
    "ora": "^3.0.0",
    "prettier": "^1.15.2",
-    "prettier-eslint-cli": "^4.7.1",
    "prettier-stylelint": "^0.4.2",
    "stylelint": "^9.8.0",
    "stylelint-config-css-modules": "^1.3.0",
--- a/src/pages/styleguide/index.md
+++ b/src/pages/styleguide/index.md
@ -5,6 +5,8 @@ title: Style Guide
 sitemap: false
 ---

+<!-- markdownlint-disable -->
+
 The main page title of this guide is an `h1` element.

 ## Colors