m
/
blog
mirror of https://github.com/kremalicious/blog.git
1
0
Fork 0
Code

all posts back to 2011 done

This commit is contained in:
Matthias Kretschmann 2013-11-19 23:21:19 +01:00
parent 536a0832d6
commit 5a1ab30c18
57 changed files with 484 additions and 665 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Gruntfile.js
View File

@ -43,7 +43,8 @@ module.exports = function(grunt){
less: {
production: {
files: {
'<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css' : '<%= config.src %>/<%= config.assets.less %>/kremalicious3.less'
'<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css' : '<%= config.src %>/<%= config.assets.less %>/kremalicious3.less',
'<%= config.site %>/<%= config.assets.css %>/poststyle-2300.min.css' : '<%= config.src %>/<%= config.assets.less %>/poststyle-2300.less'
},
},
},
@ -61,7 +62,8 @@ module.exports = function(grunt){
cssmin: {
production: {
files: {
'<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css': ['<%= config.site %>/<%= config.assets.css %>/*.css']
'<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css': ['<%= config.site %>/<%= config.assets.css %>/*.css'],
'<%= config.site %>/<%= config.assets.css %>/poststyle-2300.min.css': ['<%= config.site %>/<%= config.assets.css %>/poststyle-2300.min.css']
}
}
},

3
_src/_layouts/base.html
View File

@ -38,6 +38,9 @@
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="/assets/css/kremalicious3.min.css">
{% if page.style %}
<link rel="stylesheet" href="/assets/css/{{ page.style }}">
{% endif %}
<script data-cfasync="false" src="//use.typekit.com/msu4qap.js"></script>
<script data-cfasync="false">try{Typekit.load();}catch(e){}</script>

9
_src/_layouts/post.html
View File

@ -9,7 +9,7 @@ layout: base
<section class="entry-content">
{% if page.image %}
<img src="/media/{{ page.image }}" />
<img class="teaser" src="/media/{{ page.image }}" />
{% endif %}
{{ content }}
@ -22,6 +22,11 @@ layout: base
{% endfor %}
</p>
<p class="byline author vcard source-org"><span class="by">by</span> <a class="fn" rel="author" href="/about/">{{ page.author }}</a></p>
<p class="time">{{ page.date | date_to_string }} <span class="modtime"></span></p>
<div class="time">
<p>{{ page.date | date_to_string }}</p>
{% if page.moddate %}
<p class="modtime">updated: {{ page.moddate | date_to_string }}</p>
{% endif %}
</div>
</footer>
</article>

BIN
_src/_media/Badged-Teaser-kremalicious.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

34
_src/_posts/2009-12-17-wordpress-post-thumbnails.markdown
View File

@ -23,10 +23,10 @@ tags:
![Add WordPress Post Thumbnail Support To Theme](/media/wordpress-thumbnail-1.png)For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor.
So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file:
[php]add_theme_support('post-thumbnails');[/php]
{% highlight php %}add_theme_support('post-thumbnails');{% endhighlight %}
For backwards compatibility you should wrap this inside a function check for the new add_theme_support:
[php]if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );[/php]
{% highlight php %}if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );{% endhighlight %}
This makes sure WordPress installation prior to 2.9 won't get screwed up when using a theme with this new feature.
@ -48,17 +48,17 @@ You can close the media dialogue now and you will see the image in the Post Thum
![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]<?php the_post_thumbnail(); ?>[/php]
{% highlight php %}<?php the_post_thumbnail(); ?>{% endhighlight %}
This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as:
[php]<?php the_post_thumbnail('thumbnail'); ?>[/php]
{% highlight php %}<?php the_post_thumbnail('thumbnail'); ?>{% endhighlight %}
But of course you can grab the other sizes WordPress automatically creates when you upload an image:
[php]<?php
{% highlight php %}<?php
the_post_thumbnail('medium');
the_post_thumbnail('large');
?>[/php]
?>{% endhighlight %}
_(Note: Matt [left a comment on WP Engineer](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/#comment-3053) stating he wouldn't recommend using these named arguments but provided no explanation for it yet.)_
The code will output a generic `<img />` tag with a class of wp-post-image. Needless to say this is what you can select with css to style just the post thumbnails further:
@ -69,19 +69,19 @@ The code will output a generic `<img />` tag with a class of wp-post-image. Need
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]<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>[/php]
{% highlight php %}<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>{% endhighlight %}
If you want to add more than one class you can do this like so:
[php]<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?>[/php]
{% highlight php %}<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?>{% endhighlight %}
And you can add any attributes to the <img /> tag like a title, rel or an alt attribute. For accessibility reasons you should always add at least the alt-attribute:
[php]<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>[/php]
{% highlight php %}<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>{% endhighlight %}
As for the title attribute this will be grabbed automatically from the entry you've made in your Media Library during the upload process but you even could override this too:
[php]<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>[/php]
{% highlight php %}<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>{% endhighlight %}
@ -90,21 +90,21 @@ As for the title attribute this will be grabbed automatically from the entry you
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]<?php
{% highlight php %}<?php
$width = get_option('thumbnail_size_w'); // get the width of the thumbnail setting
$height = get_option('thumbnail_size_h'); // get the height of the thumbnail setting
the_post_thumbnail(array($width, $height), array('class' => 'alignleft'));
?>[/php]
?>{% endhighlight %}
You can also detect the Media settings for the other sizes and whether the crop setting is active or not:
[php]<?php
{% highlight php %}<?php
get_option('medium_size_w'); // Width of the medium size
get_option('medium_size_h'); // Height of the medium size
get_option('large_size_w'); // Width of the large size
get_option('large_size_h'); // Height of the large size
get_option('thumbnail_crop'); // Check for crop, On=1, Off=0
?>[/php]
?>{% endhighlight %}
@ -115,14 +115,14 @@ With the check in your functions.php at the beginning there's already ensured ol
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):
[php]if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
{% highlight php %}if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
the_post_thumbnail();
} else {
$postimage = get_post_meta($post->ID, 'post-image', true);
if ($postimage) {
echo '<img src="'.$postimage.'" alt="" />';
}
}[/php]
}{% endhighlight %}
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!

11
_src/_posts/2011-01-08-enjoying-paper.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2011-01-08 15:43:14+00:00
layout: post
slug: enjoying-paper
layout: image
title: Enjoying Paper
image: Enjoying-Paper.jpg
author: Matthias Kretschmann
date: 2011-01-08 15:43:14+00:00
wordpress_id: 1867
categories:
- photos

11
_src/_posts/2011-01-08-glowing-star-inside.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2011-01-08 15:45:26+00:00
layout: post
slug: glowing-star-inside
layout: image
title: Glowing Star Inside
image: Glowing-Star-Inside.jpg
author: Matthias Kretschmann
date: 2011-01-08 15:45:26+00:00
wordpress_id: 1870
categories:
- photos

11
_src/_posts/2011-01-18-historic-flood-levels.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2011-01-18 15:40:12+00:00
layout: post
slug: historic-flood-levels
layout: image
title: Historic Flood Levels
image: Historic-Flood-Levels.jpg
author: Matthias Kretschmann
date: 2011-01-18 15:40:12+00:00
wordpress_id: 1864
categories:
- photos

11
_src/_posts/2011-10-11-broken-nexus-s-screen.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2011-10-11 14:37:06+00:00
layout: post
slug: broken-nexus-s-screen
layout: image
title: Broken Nexus S Screen
image: Broken-Nexus-S-Screen.jpg
author: Matthias Kretschmann
date: 2011-10-11 14:37:06+00:00
wordpress_id: 1861
categories:
- photos

89
_src/_posts/2011-12-15-badged.markdown
View File

@ -1,10 +1,12 @@
---
author: Matthias Kretschmann
comments: true
date: 2011-12-15 07:56:46+00:00
layout: post
slug: badged
title: Badged - iOS Style Notification Badges for WordPress
image: Badged-Teaser-kremalicious.png
author: Matthias Kretschmann
moddate: 2013-11-10 07:56:46+00:00
date: 2011-12-15 07:56:46+00:00
wordpress_id: 1468
categories:
- goodies
@ -12,123 +14,78 @@ categories:
Made a quick WordPress plugin which transforms the standard WordPress update & comment notification badges into iOS-styled ones.
<!-- more -->
Badged transforms the standard WordPress update & comment notification badges into iOS-styled ones. Upon activation it automatically replaces the badge styles in the admin menu and the admin bar. An optional settings page allows to control whether the badges show up as the new default iOS style or styled as pre-iOS 7 badges.
The badges are CSS only (box shadows, gradients, pseudo elements, you name it) and were tested in current versions of Safari, Chrome & Firefox. It should degrade gracefully in older Browsers with some details missing like drop shadows or the highlight shine. If you care for how it's done exactly, you can peek around in the [css file on github](https://github.com/kremalicious/Badged/blob/master/css/badged-menu.css).
The badges are CSS only (box shadows, gradients, pseudo elements, you name it) and were tested in current versions of Safari, Chrome, Firefox and Internet Explorer. If you care for how it’s done exactly, you can peek around in the [repository on github](https://github.com/kremalicious/Badged/).
The plugin is localized in english & german, which is only important for the settings page.
## Download & Installation
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
[Plugin Page](http://wordpress.org/extend/plugins/badged) [Github](https://github.com/kremalicious/Badged) [Donate](http://krlc.us/givecoffee)
<p class="clearfix">
<a href="http://wordpress.org/extend/plugins/badged" class="btn btn-primary btn-block icon-wordpress-alt col2">Plugin Page</a>
<a class="btn btn-primary btn-block icon-github-alt col2" href="https://github.com/kremalicious/Badged">GitHub</a>
<a href="http://krlc.us/givecoffee" class="icon-heart btn btn-block col2">Donate</a>
</p>
The plugin is hosted on github and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:
1. Upload the badged plugin folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the _Plugins_ menu in WordPress
3. Enjoy
4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default:
![](/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.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
**v0.3.6**
* tested for WP 3.4
* settings page: Retina ready icon for high dpi devices, css only submit button
* updated german translation
**v0.3.5**
* IE 8 improvements: box shadow, light gradient through DXImageTransform filters (but no rounded corners, sorry)
* current versions of IE & Opera are now among the tested browsers
* updated settings page links
**v0.3.4**
* more descriptive readme and settings footer with links to blog post & github page
* updated translation
**v0.3.2**
* Make the plugin work if symlinked
**v0.3**
* initial beta release
**v0.2**
* added options to control whether the badges show up in admin menu or toolbar (default is both)
**v0.1**
* initial alpha release

13
_src/_posts/2012-02-26-mk-v2.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-02-26 21:29:54+00:00
layout: post
slug: mk-v2
title: Personal Site v2
image: mkv2.jpg
author: Matthias Kretschmann
date: 2012-02-26 21:29:54+00:00
wordpress_id: 1506
categories:
- personal
@ -12,12 +13,8 @@ categories:
Today I finally launched v2 of my personal site, still following the concept of a business card web site but with a portfolio added to it. You should totally [have a look](http://matthiaskretschmann.com).
<!-- more -->
## Who needs images anyway
One goal was to use as less images as possible. Yes, it would have been easier to just use images instead of like 10 box-shadows on one element but this wouldn't have been any fun. And no matter what retina/high dpi devices come up next all interface elements will look just as sharp without any additional work.
![](/media/mkv2-detail.png)

12
_src/_posts/2012-03-04-relaxing-cat.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-03-04 08:00:32+00:00
layout: post
slug: relaxing-cat
layout: image
title: Relaxing Cat
image: 7f9397a265d811e1b9f1123138140926_7.jpg
author: Matthias Kretschmann
date: 2012-03-04 08:00:32+00:00
wordpress_id: 1729
categories:
- photos
@ -12,6 +13,7 @@ post_format:
- Image
tags:
- instagram
- sitamun
---

11
_src/_posts/2012-04-03-blaue-turme.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-03 12:41:01+00:00
layout: post
slug: blaue-turme
layout: image
title: Blaue Türme
image: Blaue-Türme-1.jpg
author: Matthias Kretschmann
date: 2012-04-03 12:41:01+00:00
wordpress_id: 1753
categories:
- photos

11
_src/_posts/2012-04-03-skeletor.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-03 17:56:49+00:00
layout: post
slug: skeletor
layout: image
title: Skeletor
image: 6313cc1e7db611e180c9123138016265_7.jpg
author: Matthias Kretschmann
date: 2012-04-03 17:56:49+00:00
wordpress_id: 1745
categories:
- photos

11
_src/_posts/2012-04-03-train-station-leipzig.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-03 18:21:44+00:00
layout: post
slug: train-station-leipzig
layout: image
title: Train Station Leipzig
image: de2ac24c7db911e1b9f1123138140926_7.jpg
author: Matthias Kretschmann
date: 2012-04-03 18:21:44+00:00
wordpress_id: 1747
categories:
- photos

2
_src/_posts/2012-04-04-android-tab-conundrum.markdown
View File

@ -10,7 +10,7 @@ categories:
- design
---
![](/media/tabs_overview-540x103.png)
![](/media/tabs_overview.png)
With [Instagram for Android](https://play.google.com/store/apps/details?id=com.instagram.android&hl=en) there's once again an app getting ported to Android from iOS which doesn't follow the platform specific guidelines with a lot of elements. Most obviously in the form of the app's main navigation tabs which Instagram for Android puts at the bottom as opposed to Google's suggested placement of tabs at the top as part of the action bar. Now smart Android designers [chime in and call foul](https://plus.google.com/109726284197282147930/posts/5McKooqNnnd) for this Android Design Guideline violation [as others](http://www.androiduipatterns.com/2011/07/tabs-top-or-bottom.html) and [I have done](http://exquisitedroid.com/cardcloud/) in the past with other apps.
But this time it's a bit complicated, let me explain.

11
_src/_posts/2012-04-05-current-sushi-status.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-05 19:15:20+00:00
layout: post
slug: current-sushi-status
layout: image
title: Current Sushi Status
image: aff38e2c7f5311e1b10e123138105d6b_7.jpg
author: Matthias Kretschmann
date: 2012-04-05 19:15:20+00:00
wordpress_id: 1731
categories:
- photos

11
_src/_posts/2012-04-07-buna.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-07 02:42:08+00:00
layout: post
slug: buna
layout: image
title: Buna
image: 44af28f2805b11e18cf91231380fd29b_7.jpg
author: Matthias Kretschmann
date: 2012-04-07 02:42:08+00:00
wordpress_id: 1733
categories:
- photos

11
_src/_posts/2012-04-07-cat-enjoying-a-good-ipad-game.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-07 16:26:46+00:00
layout: post
slug: cat-enjoying-a-good-ipad-game
layout: image
title: Cat enjoying a good iPad game
image: 7838011c80ce11e19e4a12313813ffc0_7.jpg
author: Matthias Kretschmann
date: 2012-04-07 16:26:46+00:00
wordpress_id: 1739
categories:
- photos

11
_src/_posts/2012-04-07-ipad-porn.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-07 13:43:00+00:00
layout: post
slug: ipad-porn
layout: image
title: iPad Porn
image: 97a44d6080b711e181bd12313817987b_7.jpg
author: Matthias Kretschmann
date: 2012-04-07 13:43:00+00:00
wordpress_id: 1735
categories:
- photos

11
_src/_posts/2012-04-07-opera.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-07 15:50:15+00:00
layout: post
slug: opera
layout: image
title: Opera
image: 5df6e0a280c911e1a87612313804ec91_7.jpg
author: Matthias Kretschmann
date: 2012-04-07 15:50:15+00:00
wordpress_id: 1737
categories:
- photos

11
_src/_posts/2012-04-08-common-kitchen-decoration.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-08 19:29:33+00:00
layout: post
slug: common-kitchen-decoration
layout: image
title: Common kitchen decoration
image: 2ba6eeba81b111e1989612313815112c_7.jpg
author: Matthias Kretschmann
date: 2012-04-08 19:29:33+00:00
wordpress_id: 1741
categories:
- photos

11
_src/_posts/2012-04-08-graffiti-old-school-style.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-08 20:14:49+00:00
layout: post
slug: graffiti-old-school-style
layout: image
title: Graffiti, old school style
image: 7e2b28f881b711e1af7612313813f8e8_7.jpg
author: Matthias Kretschmann
date: 2012-04-08 20:14:49+00:00
wordpress_id: 1743
categories:
- photos

14
_src/_posts/2012-04-20-the-origins-of-the-blink-tag.markdown
View File

@ -1,10 +1,11 @@
---
layout: link
title: The origins of the &lt;blink&gt; tag
linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag
author: Matthias Kretschmann
comments: true
date: 2012-04-20 08:48:46+00:00
layout: post
slug: the-origins-of-the-blink-tag
title: The origins of the blink tag
wordpress_id: 1712
categories:
- design
@ -16,10 +17,7 @@ tags:
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.
> 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.

13
_src/_posts/2012-04-30-announcing-sketch2.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-04-30 12:37:05+00:00
layout: post
slug: announcing-sketch2
layout: 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
wordpress_id: 1950
categories:
- design
@ -14,8 +15,6 @@ post_format:
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.

18
_src/_posts/2012-05-02-a-call-foropen-free-access-to-academic-research.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-02 03:12:40+00:00
layout: post
slug: a-call-foropen-free-access-to-academic-research
layout: link
title: A call for open, free access to academic research
linkurl: http://www.guardian.co.uk/commentisfree/2012/may/01/open-free-access-academic-research
author: Matthias Kretschmann
date: 2012-05-02 03:12:40+00:00
wordpress_id: 1989
categories:
- links
@ -14,19 +15,12 @@ post_format:
David Willetts, a minister of state for universities and science in the UK, is calling for more open access in academics:
> Giving people the right to roam freely over publicly funded research will usher in a new era of academic discovery and collaboration
If you ever worked in an academic environment or just wanted to read some scientific studies, you probably know this is currently an outrageous mess, not only in the UK. Because most research gets published in very expensive journals and magazines, a huge amount of publicly paid academic research and its outcome can't be accessed by the public.
So yes:
> Moving from an era in which taxpayer-funded academic articles are stuck behind paywalls for much of their life to one in which they are available free of charge will not be easy.
But they basically [have Jimmy Wales on board](http://www.guardian.co.uk/technology/2012/may/01/wikipedia-research-jimmy-wales-online), so it looks like this isn't just the usual politician jibber-jabber.

11
_src/_posts/2012-05-03-antique-chrome.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-03 15:55:15+00:00
layout: post
slug: antique-chrome
layout: image
title: Antique Chrome
image: 5fc688aa953811e180c9123138016265_7.jpg
author: Matthias Kretschmann
date: 2012-05-03 15:55:15+00:00
wordpress_id: 1996
categories:
- photos

11
_src/_posts/2012-05-04-world-press-photo-2012.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-04 13:12:54+00:00
layout: post
slug: world-press-photo-2012
layout: link
title: World Press Photo 2012
linkurl: http://www.worldpressphoto.org/gallery/2012-world-press-photo
author: Matthias Kretschmann
date: 2012-05-04 13:12:54+00:00
wordpress_id: 1997
categories:
- photography

11
_src/_posts/2012-05-09-media-query-asset-downloading-results.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-09 09:48:19+00:00
layout: post
slug: media-query-asset-downloading-results
layout: link
title: Media Query & Asset Downloading Results
linkurl: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
author: Matthias Kretschmann
date: 2012-05-09 09:48:19+00:00
wordpress_id: 2019
categories:
- design

12
_src/_posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-12 13:19:02+00:00
layout: post
slug: nielsen-vs-clark-theyre-both-wrong
layout: link
title: Nielsen vs Clark – they're both wrong
linkurl: http://netmagazine.com/opinions/nielsen-vs-clark-theyre-both-wrong
author: Matthias Kretschmann
date: 2012-05-12 13:19:02+00:00
wordpress_id: 2024
categories:
- design
@ -17,5 +18,4 @@ tags:
Great middle ground arguments from Jason Mark in this recent controversy about mobile web experiences:
> The truth is when working on mobile you should always look at the site analytics and make smart decisions based on what you find. If you find that your mobile users use the site in a significantly different way than desktop users, check out Nielsen's guidelines and see which apply to you. And if you find that your mobile users are accessing the same content as desktop users then consider a responsive design.

11
_src/_posts/2012-05-12-which-responsive-images-solution-should-you-use.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-12 17:52:53+00:00
layout: post
slug: which-responsive-images-solution-should-you-use
layout: link
title: Which responsive images solution should you use?
linkurl: http://css-tricks.com/which-responsive-images-solution-should-you-use/
author: Matthias Kretschmann
date: 2012-05-12 17:52:53+00:00
wordpress_id: 2041
categories:
- design

29
_src/_posts/2012-05-14-welcome-to-kremalicious2.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-14 19:33:22+00:00
layout: post
slug: welcome-to-kremalicious2
title: Welcome to kremalicious2
image: kremalicious2-teaser.jpg
author: Matthias Kretschmann
date: 2012-05-14 19:33:22+00:00
wordpress_id: 1920
categories:
- personal
@ -12,39 +13,26 @@ categories:
It finally happened. After so many rejected revisions, so many pauses, so much coffee: kremalicious2 is here.
<!-- more -->
## Reduction & Addition
Instead of a full site with the blog as one part, this is now a simple blog. No weird pages with subpages anymore. Just a blog with some topic archives.
The development process was and is a very agile one, so new features and changes will be incorporated as they happen. If it's in the [master branch](https://github.com/kremalicious/kremalicious2), it's live.
## Mobile & Content First, Retinasized
The blog theme was designed from the inside out with a [responsive](http://www.alistapart.com/articles/responsive-web-design/), [mobile first](http://www.lukew.com/ff/entry.asp?933) approach. I’ve gone from small screens first to bigger screens and started by designing the article single view before anything else. This is usually the moment where you may resize your browser window if you're a design geek.
To make future maintenance a bit easier, I’m using the simple [HS Responsive](http://kremalicious.github.com/hsresponsive/) HTML/CSS framework I’ve recently created for a university but with some modifications. For instance, iPad users will get two different layouts in portrait and landscape mode easily by kind of misusing the iOS rotation scale bug and using a media query breakpoint of 769px. Yes, I know, this breaks the no-single-device-targeting approach but by now there’re more readers visiting this site from an iPad than with Internet Explorer or Linux so this seemed appropriate.
## Typography
![](/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.
@ -74,18 +62,15 @@ 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)
[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.
@ -112,12 +97,8 @@ I saw no reason to include a prominent date along with a post title. Besides, I
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

93
_src/_posts/2012-05-15-wp-icons-template.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-15 16:00:44+00:00
layout: post
slug: wp-icons-template
title: WordPress Admin Icons Template
image: kremalicious-Teaser-WP-Icon-Template.png
author: Matthias Kretschmann
date: 2012-05-15 16:00:44+00:00
wordpress_id: 2043
categories:
- design
@ -17,46 +18,28 @@ tags:
Here’s a template for designing your own icons for the admin area of WordPress including icons ready for Retina screens and some recommendations for the workflow of implementing these.
<!-- more -->
There are basically two scenarios where you really need custom icons for WordPress’ admin area: when creating custom post types and when creating option pages for a plugin/theme. No matter what case, at least 3 icons are needed if you want to get it right:
* two 16px icons for the admin menu, one non-colored and one colored icon for the hover state
* one 32px icon for the actual screen
And since the admin area gets constantly optimized for devices which happen to have high-dpi screens (like 3rd generation iPad’s Retina screen) it’s a very good idea to include double sized @2x assets for all the icons mentioned above.
So if you value quality and want pixel perfect icons in your admin area you need to create a total of 6 icon sizes.
## The Template
![](/media/WordPress-Admin-Icons-Template-Filled-540x405.png)
![](/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:
[Download Template & Code](https://github.com/kremalicious/wp-icons-template/zipball/master)
[GitHub](https://github.com/kremalicious/wp-icons-template)[Donate](http://krlc.us/givecoffee)
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon-download-alt">Download Template &amp; Code</a>
<a href="https://github.com/kremalicious/wp-icons-template" class="icon-github btn">GitHub</a>
<a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
### Usage
The psd file in there has room for all the icon sizes mentioned above. As you can see, I’ve added an umbrella icon to better illustrate the various sizes. Turn on the “Icon Frames - White” layer to see the dimensions for each icon.
Additionally, I’ve added two shapes with base layer styles which resemble the default admin icon style. This is by no means a magic bullet to make every shape look exactly like a WordPress default icon. It’s just a starting point from where you can modify it for your own needs.
@ -65,34 +48,26 @@ And because consistency is key, the default WordPress admin icon sprites are inc
The psd is sliced for multiple sprites. You’re of course encouraged to make only one sprite out of it, this just made it more universal for the following code examples. When you’re finished designing the icons just hide the background layers and use Save for Web in Photoshop to export the sliced areas. Running them through ImageOptim or something like that afterwards is a good idea.
## Implementation, or: Ignore The Codex
While `register_post_type()` and `add_menu_page()` let you define a URL for an icon this doesn’t allow for controlling hover or @2x assets. That’s because this will put the icon as an `img` element into the menu as opposed to the icons for the built-in items (they’re css background images from sprites). Furthermore, WordPress will add a default opacity to all img elements in the admin menu, with 100% opacity only on hover.
So when using this template with all those icons, I suggest you use the following snippets in your functions.php instead. Yes, I’m telling you to ignore the codex. But this is the only way to get what we want:
* hover state consistent to WordPress default menu behavior
* control the display of the various image sizes for high-dpi devices with css media queries
So the following code just injects a stylesheet snippet into the `<head>` of all admin pages. This is a modification of [Randy Jensen’s code idea](http://randyjensenonline.com/thoughts/wordpress-custom-post-type-fugue-icons/).
You can always to refer to the inline commented versions of these snippets in the [github repository](https://github.com/kremalicious/wp-icons-template).
You can always refer to the inline commented versions of these snippets in the [github repository](https://github.com/kremalicious/wp-icons-template).
### Custom Post Type Icons
WordPress automatically puts an ID around your new menu item which contains the name of your custom post type (the $post_type parameter in `register_post_type()`). Just change this to your own post type name:
[php gutter="true"]<?php
{% highlight php %}
<?php
/**
* Custom Post Type Icon for Admin Menu & Post Screen
*/
@ -137,18 +112,16 @@ function custom_post_type_icon() {
</style>
<?php }
?>[/php]
?>
{% endhighlight %}
### Plugin And Theme Options Icons
The easiest way is to just use this markup on your option page before the page heading which is the default on all admin pages:
[html]<div id="PLUGINNAME" class="icon32"></div>
<h2>My cool option page</h2>[/html]
{% highlight html %}<div id="PLUGINNAME" class="icon32"></div>
<h2>My cool option page</h2>{% endhighlight %}
This is the markup being addressed in the snippet block for option page icons. The `icon32` class will make sure everything is aligned consistent to all other pages without redefining everything in css.
@ -158,7 +131,9 @@ Putting your plugin or option page in the top level of the admin menu via `add_m
So all this combined leads to this snippet:
[php gutter="true"]<?php
{% highlight php %}
<?php
/**
* Option Page Icon for Admin Menu & Option Screen
@ -215,50 +190,30 @@ function option_page_icon() {
</style>
<?php }
?>[/php]
?>
{% endhighlight %}
Just replace the bits in the ID selectors with your stuff. If you have problems finding the correct ID selector just inspect element in the admin area.
* * *
Please note these snippets are just suggestions. I tried to make them as much universal as possible and tested them but depending on your project this could need adjustments. And obviously the css rules for high-dpi assets depend on a browser capable of CSS media queries but I guess all devices with such screens have modern browsers handling this.
But there are a lot of ways to improve on that:
* add these css rules to your own stylesheet if you’re using a custom admin area css file for your theme or plugin
* enqueue the snippets with `wp_enqueue_style()` and the `admin_enqueue_scripts()` action hook
* better yet, put them in a single stylesheet and enqueue them only on pages where they’re actually needed
## License
All code snippets are under the [GPL](http://opensource.org/licenses/gpl-3.0.html). The template psd is public domain, so you’re free to use and bundle this in any personal & commercial project without any requirements.
But if you’re super cool and want to catch some karma you place a link back to this release post ([http://kremalicious.com/wp-icons-template](http://kremalicious.com/wp-icons-template)) somewhere in your project or [buy me some delicious coffee](http://krlc.us/givecoffee).
## More Resources
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/)

22
_src/_posts/2012-05-21-why-comic-sans.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-21 21:18:17+00:00
layout: post
slug: why-comic-sans
layout: link
title: Why Comic Sans?
linkurl: http://www.connare.com/whycomic.htm
author: Matthias Kretschmann
date: 2012-05-21 21:18:17+00:00
wordpress_id: 2120
categories:
- design
@ -16,15 +17,8 @@ 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.
>
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.
> 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)

15
_src/_posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-22 01:00:03+00:00
layout: post
slug: how-yahoo-killed-flickr-and-lost-the-internet
layout: link
title: How Yahoo Killed Flickr and Lost the Internet
linkurl: http://gizmodo.com/5910223/how-yahoo-killed-flickr-and-lost-the-internet
author: Matthias Kretschmann
date: 2012-05-22 01:00:03+00:00
wordpress_id: 2125
categories:
- photography
@ -14,10 +15,6 @@ post_format:
Great insight article into what and how exactly Yahoo managed to screw this up.
> It is a case study of what can go wrong when a nimble, innovative startup gets gobbled up by a behemoth that doesn't share its values. What happened to Flickr? The same thing that happened to so many other nimble, innovative startups who sold out for dollars and bandwidth: Yahoo.
As a year long Flickr user I'm just sad about this but hey, we got [500px](http://500px.com/kremalicious) which probably wouldn't exist without Flickr's decline.

15
_src/_posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-22 06:23:26+00:00
layout: post
slug: responsive-images-and-web-standards-at-the-turning-point
layout: link
title: Responsive Images and Web Standards at the Turning Point
linkurl: http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
author: Matthias Kretschmann
date: 2012-05-22 06:23:26+00:00
wordpress_id: 2133
categories:
- design
@ -18,12 +19,8 @@ tags:
Good overview about the patterns currently being discussed:
> Recently, all of the ongoing discussion around responsive images just got real: a solution is currently being discussed with the WHATWG. And we’re in the thick of it now: we’re throwing around references to `picture` and `img set`; [...]
The markup pattern that gets selected stands to have a tremendous influence on how developers build websites in the future. Not just responsive or adaptive websites, either. All websites.
Naturally I'm in the `picture` camp, this just makes most sense to me.

11
_src/_posts/2012-05-23-like-modern-heating-only-more-badass.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-23 14:23:38+00:00
layout: post
slug: like-modern-heating-only-more-badass
layout: image
title: Like modern heating only more badass
image: 41b5a454a43811e1989612313815112c_7.jpeg
author: Matthias Kretschmann
date: 2012-05-23 14:23:38+00:00
wordpress_id: 2142
categories:
- photos

24
_src/_posts/2012-05-26-html-for-icon-font-usage.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-26 05:13:58+00:00
layout: post
slug: html-for-icon-font-usage
layout: link
title: HTML for Icon Font Usage
linkurl: http://css-tricks.com/html-for-icon-font-usage/
author: Matthias Kretschmann
date: 2012-05-26 05:13:58+00:00
wordpress_id: 2154
categories:
- design
@ -14,25 +15,12 @@ post_format:
Chris Coyier on an accessible implementation for icon fonts:
> Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best. [...]
And our major goals here are:
>
>
> 1. As good of semantics as we can get
>
> 2. As little awkwardness for screen readers as possible
>
Spoiler: the key is to map the icons to the _Private Use Area_ instead of "real" characters in the font files and injecting them with pseudo elements.

11
_src/_posts/2012-05-27-balloon.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-05-27 17:16:11+00:00
layout: post
slug: balloon
layout: image
title: Balloon
image: 690fe368a81911e1b2fe1231380205bf_7.jpg
author: Matthias Kretschmann
date: 2012-05-27 17:16:11+00:00
wordpress_id: 2167
categories:
- photos

21
_src/_posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-06-05 16:25:56+00:00
layout: post
slug: can-we-please-move-past-apples-silly-faux-real-uis
layout: link
title: Can We Please Move Past Apple's Silly, Faux-Real UIs?
linkurl: http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis
author: Matthias Kretschmann
date: 2012-06-05 16:25:56+00:00
wordpress_id: 2187
categories:
- design
@ -14,18 +15,8 @@ post_format:
Much has been written about the good and bad of skeuomorphism. Tom Hobbs wrote a [great piece](http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis) putting everything together.
> Digitally re-creating real materials and analog objects very quickly becomes aesthetics for aesthetics sake. It’s hard to believe that all but a minute percentage of Apple’s user base has a tan-suede–bound calendar or book of any sort, or anything else that looks remotely similar. Unfortunately, these are the characteristics of skeuomorphism that a vast majority of UI designers employ when they use this approach (see Blackberry’s Playbook). Ultimately, it encourages designers to become less critical and less inventive, which is detrimental to evolving new and improved solutions.
He argues skeuomorphism hinders designers in creating something truly innovative. Also, some good arguments on why Microsoft's Metro interface isn't the answer:
> Sure, these graphic elements don’t use “superfluous” drop shadows and renderings, but they don’t really use space any more efficiently than many skeuomorphic iPhone apps. It is highly debatable whether they need to be as graphically dominant or whether the aesthetic form is purely driven by function. Metro’s graphic elements are largely abstracted representations of their function, so from a modernist point of view, it is interesting to think of what else could be stripped away to enhance their function.

11
_src/_posts/2012-06-13-retina-icons-in-wordpress-3-4.markdown
View File

@ -1,10 +1,10 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-06-13 19:01:20+00:00
layout: post
slug: retina-icons-in-wordpress-3-4
title: Retina icons in WordPress 3.4
author: Matthias Kretschmann
date: 2012-06-13 19:01:20+00:00
wordpress_id: 2195
categories:
- design
@ -18,11 +18,10 @@ And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in fu
![](/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-150x150.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.
[![](/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.
And no, [SVG for your icons are not the solution](http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html).

11
_src/_posts/2012-06-27-typography-window.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-06-27 01:29:13+00:00
layout: post
slug: typography-window
layout: image
title: Typography window
image: 80a136dabff711e188131231381b5c25_7.jpg
author: Matthias Kretschmann
date: 2012-06-27 01:29:13+00:00
wordpress_id: 2215
categories:
- photos

54
_src/_posts/2012-06-30-why-files-exist.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-06-30 18:17:33+00:00
layout: post
slug: why-files-exist
layout: link
title: Why Files exist
linkurl: http://blog.filepicker.io/post/26157006600/why-files-exist
author: Matthias Kretschmann
date: 2012-06-30 18:17:33+00:00
wordpress_id: 2219
categories:
- design
@ -14,59 +15,16 @@ post_format:
[This](http://blog.filepicker.io/post/26157006600/why-files-exist) has been said many times, but it bears repeating:
>
>
> Files are abstraction layers around content that are necessary for interoperability. Without the notion of a File or other similar shared content abstraction, the ability to use different applications with the same information grinds to a halt, which hampers innovation and user experience.
>
>
A good example are all those note taking apps on iOS which usually only require plain text. When using Apple's iCloud to sync their data, they lock your content into one app without any way to access this from another app. Compare that to apps using Dropbox for note syncing: I can throw as many apps I would like at my notes folder full of .txt files. The note app you're using has some new quirks after the latest update? Just switch to another app. Apple's iCloud syncing Notes.app having some new quirks after the latest update? Well, you and your content are doomed.
But the solution can't be throwing a full file system at the user:
>
>
> Now, I agree with Steve Jobs [saying in 2005](http://tech.fortune.cnn.com/2012/06/06/steve-jobs-why-is-the-file-system-the-face-of-the-os/) that a full blow filesystem with folders and all the rest might not be necessary, but in every OS there needs to be at least some user-facing notion of a file, some system-wide agreed upon way to package content and send it between applications. Otherwise we’ll just end up with a few monolithic applications that do everything poorly.
>
>
Just applying the PC concept of a file system to post-PC devices, like Android and Dropbox did, makes only geeks happy but not the majority of users. While useful it's still too abstract for most users. That's why even Android kind of hides the file system, there's no built in app to browse it directly. But at least Android has [Intents](http://developer.android.com/guide/components/intents-filters.html), allowing users to send any data between different apps.
Apple already solved the problem of a file system being too abstract for users a long time ago, but without any app lock in. The [Newton OS on MessagePads](http://en.wikipedia.org/wiki/Newton_(platform)) stored everything in object-oriented databases called [soups](http://www.canicula.com/newton/prog/soups.htm). The "union soup" could be accessed by any app ("packages" to be exactly) on the system. Today, this is happening only rudimentarily on iOS, like when you start typing a recipient in Mail and it gets auto-completed from the Address Book data which obviously is only possible with Apple's apps.
Soups took away the need of manual file management without cutting access to the content. iCloud needs to be the new soup.

15
_src/_posts/2012-07-04-newton-reconsidered.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-07-04 01:19:17+00:00
layout: post
slug: newton-reconsidered
layout: link
title: Newton, Reconsidered
linkurl: http://techland.time.com/2012/06/01/newton-reconsidered/
author: Matthias Kretschmann
date: 2012-07-04 01:19:17+00:00
wordpress_id: 2239
categories:
- design
@ -17,12 +18,8 @@ tags:
Skeuomorphism on mobile devices has come a long way:
> Using a second unit, Steve Capps, one of Newton’s creators, showed how you could use it to order a pizza by moving topping icons onto a pie and then sending out a fax. In 1992, that was show-stopping stuff.
But instead of another Newton history article, this one is an interesting "hands-on assessment" of Apple's first PDA. Almost 20 years after its release, Harry McCracken got himself a fully working MessagePad H1000 over eBay and tested it.
Would be interesting to know if the same could be done with an iPhone 4S or Galaxy Nexus in 2032. I doubt it.

15
_src/_posts/2012-07-07-what-makes-twitter-twitter.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-07-07 08:18:58+00:00
layout: post
slug: what-makes-twitter-twitter
layout: link
title: What makes Twitter Twitter?
linkurl: http://alt.adrianshort.co.uk/blog/2012/06/30/what-makes-twitter-twitter/
author: Matthias Kretschmann
date: 2012-07-07 08:18:58+00:00
wordpress_id: 2252
categories:
- links
@ -14,14 +15,10 @@ post_format:
Couldn't agree more:
> People. 140-character messages. That’s Twitter.
So simple. So powerful. So fragile.
So leave it alone. We’re talking. Don’t interrupt.
But just rebuilding Twitter before it gets more "richer stories" and crammed by ads probably won't help: [We could build an open Twitter, but would anyone use it?](http://gigaom.com/2012/07/04/we-could-build-an-open-twitter-but-would-anyone-use-it/)

15
_src/_posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-07-11 21:00:07+00:00
layout: post
slug: crossdressing-compression-and-colliders-the-first-photo-on-the-web
layout: link
title: 'Crossdressing, Compression and Colliders: The First Photo on the Web'
linkurl: http://motherboard.vice.com/2012/7/10/crossdressing-compression-and-colliders-the-first-photo-on-the-web
author: Matthias Kretschmann
date: 2012-07-11 21:00:07+00:00
wordpress_id: 2261
categories:
- photography
@ -16,10 +17,6 @@ tags:
Great piece about the first photo on the web, not only interesting from a technical point of view:
> de Gennaro had been toying around with a scanned .gif version of the July 18th photo, using version one of Photoshop on his color Macintosh. The .gif format was only five years old at the time, but its efficient compression had made it the best way to edit color images without slowing PCs to a crawl.
The photo is quite horrible but so emblematic for a lot of stuff the web is used for today. As the article states, this was basically the beginning of fun on the web. But, although really not great, I don't think [Niépce's photo](/niepces-camera-obscura-and-the-history-of-the-first-photograph/) was that horrible.

43
_src/_posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.markdown
View File

@ -1,10 +1,10 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-07-15 16:19:55+00:00
layout: post
slug: add-your-web-site-to-the-windows-8-metro-ui
title: Add your web site to the Windows 8 Metro UI
image: kremalicious-Teaser-Metro-Tile.jpg
author: Matthias Kretschmann
date: 2012-07-15 16:19:55+00:00
wordpress_id: 2269
categories:
- design
@ -15,52 +15,25 @@ tags:
Windows 8 and Internet Explorer 10 make it possible to pin your site to the Metro start screen as a new tile. The tile then is a bookmark to your site and you can control the icon and background color being used.
There was a great [post](https://github.com/h5bp/html5-boilerplate/issues/1136) about that in the H5BP issues section and Microsoft has a [full explanation](https://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx). It all comes down to this:
<!-- more -->
* create a 144x144px image with your logo/icon filling the whole canvas and a transparent background
* add two `meta` tags in the `head` of your site defining the image path and optionally the tile color
* as noted in the [issue post](https://github.com/h5bp/html5-boilerplate/issues/1136), the image must be saved as a transparent 32bit PNG ("24bit" in Photoshop's Save For Web dialogue) without running it through image optimisers like [ImageOptim](http://imageoptim.com)
While the size is the same as for the iPad 3 homescreen icon, I strongly suggest not using the apple-touch-icon for this. In fact, it might be best not using a full color image at all. Using a white monochrome version of your logo or icon will make your site's tile blend in perfectly with the default Metro UI system tiles.
As an example, I just [pushed](https://github.com/kremalicious/kremalicious2/commit/4c7e215f4abecde4385028767b633be1278f277e) the Metro [tile image](/metro-tile.png) for kremalicious.com with those `meta` tags:
[html]<meta name="msapplication-TileImage" content="/metro-tile.png"/>
{% highlight html %}
<meta name="msapplication-TileImage" content="/metro-tile.png"/>
<meta name="msapplication-TileColor" content="#015565"/>
[/html]
{% endhighlight %}
When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen:
![](/media/Windows-8-Metro-tile-kremalicious.png)
And this is how it looks like on the Windows 8 start screen:

124
_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.markdown
View File

@ -1,10 +1,12 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-07-16 14:36:58+00:00
layout: post
slug: using-kbd-for-fun-and-profit
title: Using <kbd> for fun and profit
title: Using &lt;kbd&gt; for fun and profit
image: kremalicious-kbdfun-teaser.png
style: poststyle-2300.min.css
author: Matthias Kretschmann
date: 2012-07-16 14:36:58+00:00
wordpress_id: 2300
categories:
- design
@ -13,142 +15,58 @@ categories:
There's this HTML element meant for marking up keyboard keys named `<kbd>`. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys.
<!-- more -->
The above picture might be blurry depending on the device you're using so here's a live rendered demo:
Light Dark iOS An dro id
<kbd>Light</kbd> <kbd class="dark">Dark</kbd> <kbd class="ios">iOS</kbd> <kbd class="android">An</kbd> <kbd class="android dark">dro</kbd> <kbd class="android color">id</kbd>
They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
[Demo](http://lab.kremalicious.com/kbdfun/) [Download](https://github.com/kremalicious/kbdfun/zipball/master) [Github](https://github.com/kremalicious/kbdfun/)
<a class="btn btn-primary" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
<a class="btn btn-primary icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a>
<a class="btn icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
## Usage
### CSS
Just drop in the kbdftw.css in your `head`:
[html]<link rel="stylesheet" href="kbdfun.css">[/html]
{% highlight html %}<link rel="stylesheet" href="kbdfun.css">{% endhighlight %}
If you want to use the Android key style, include roboto.css before:
[html]<link rel="stylesheet" href="roboto.css">
<link rel="stylesheet" href="kbdfun.css">[/html]`
{% highlight html %}<link rel="stylesheet" href="roboto.css">
<link rel="stylesheet" href="kbdfun.css">{% endhighlight %}
You also need to add all the Roboto font files from assets/fonts to your project.
### LESS
There're some variables in the kbdfun.less file you can customize.
For the Android style, there's roboto.less as include at the end. But the font files won't load unless you uncomment the .font-roboto line in kbdftw.less. This is to make sure, users won't download all the font files if you don't use the Android style.
### Markup
The default styling are light keys with Lucida Grande as font:
[html]<kbd>Q</kbd>[/html] becomes Q
{% highlight html %}<kbd>Q</kbd>{% endhighlight %} becomes <kbd>Q</kbd>
Add a dark class to get the dark keys:
[html]<kbd class="dark">Q</kbd>[/html] becomes Q
{% highlight html %}<kbd class="dark">Q</kbd>{% endhighlight %} becomes <kbd class="dark">Q</kbd>
Adding an ios or android class gives a replica of those system keys. Android uses three different colors on the default keyboard.
{% highlight html %}<kbd class="ios">Q</kbd>{% endhighlight %} becomes <kbd class="ios">Q</kbd>
{% highlight html %}<kbd class="android">Q</kbd>{% endhighlight %} becomes <kbd class="android">Q</kbd>
{% highlight html %}<kbd class="android dark">Q</kbd>{% endhighlight %} becomes <kbd class="android dark">Q</kbd>
[html]<kbd class="ios">Q</kbd>[/html] becomes Q
[html]<kbd class="android">Q</kbd>[/html] becomes Q
[html]<kbd class="android dark">Q</kbd>[/html] becomes Q
[html]<kbd class="android color">Q</kbd>[/html] becomes Q
{% highlight html %}<kbd class="android color">Q</kbd>{% endhighlight %} becomes <kbd class="android color">Q</kbd>
I've let the default `display: inline` intact so all padding on the `kbd` elements won't affect the line-height of the surrounding text. This leads to problems when you want to use them over multiple lines so just make them `display: inline-block` in this scenario.
Pro Tip: if you want to replicate all Mac keyboards after 2003 you have to get VAG rounded for the font.
Pro Tip: if you want to replicate all Mac keyboards after 2003 you have to get VAG rounded for the font.

13
_src/_posts/2012-07-19-first-computer-generated-graphics-film-from-1963.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-07-19 12:30:56+00:00
layout: post
slug: first-computer-generated-graphics-film-from-1963
layout: link
title: First computer generated graphics film from 1963
linkurl: http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film
author: Matthias Kretschmann
date: 2012-07-19 12:30:56+00:00
wordpress_id: 2336
categories:
- design
@ -16,8 +17,6 @@ tags:
From the [AT&T; Archives](http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film):
> This film was a specific project to define how a particular type of satellite would move through space. Edward E. Zajac made, and narrated, the film, which is considered to be possibly the very first computer graphics film ever. Zajac programmed the calculations in FORTRAN, then used a program written by Zajac's colleague, Frank Sinden, called ORBIT. The original computations were fed into the computer via punch cards [...]

11
_src/_posts/2012-07-20-mmmmh-coffee.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-07-20 11:02:30+00:00
layout: post
slug: mmmmh-coffee
layout: image
title: Mmmmh, Coffee
image: 66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg
author: Matthias Kretschmann
date: 2012-07-20 11:02:30+00:00
wordpress_id: 2345
categories:
- photos

35
_src/_posts/2012-08-07-projectpurple.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-08-07 13:15:44+00:00
layout: post
slug: projectpurple
title: Project Purple
image: Teaser-Project-Purple.png
author: Matthias Kretschmann
date: 2012-08-07 13:15:44+00:00
wordpress_id: 2350
categories:
- goodies
@ -14,54 +15,32 @@ tags:
---
It [has been revealed](http://www.theverge.com/2012/8/3/3218846/schiller-forstall-fight-club-day-three-apple-samsung-trial/in/2971889) the original iPhone was developed in a locked down building under the name "Project Purple". Because of the secrecy involved, the team decorated the building with [Fight Club](http://www.imdb.com/title/tt0137523/) references:
> Forstall said that "on the front door of the Purple Dorm we put a sign up that said 'Fight Club'... because the first rule of that project was to not talk about it outside those doors."
If you don't think this demands a wallpaper, you're weird.
<!-- more -->
![](/media/project-purple-nexus-kremalicious-960x600.png)
![](/media/project-purple-nexus-kremalicious.png)
The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple uses 3200px as width for the default wallpapers in Mountain Lion but it seems a good width for now. And a height of 2048px makes this big size perfectly usable for the iPad 3 too.
![](/media/Project-Purple-Dribbble.png)
## Download
Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:
[download_button]
<a class="btn btn-block icon-download-alt" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
* [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
* [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png)
* [iPad (1024x1024)](/media/project-purple-ipad-kremalicious.png)
* [iPhone (640x960)](/media/project-purple-iphone4-kremalicious.png)
## License
![Creative Commons License](http://i.creativecommons.org/l/by-nc/3.0/de/88x31.png)Project Purple 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/).

11
_src/_posts/2012-08-08-amazingly-early.markdown
View File

@ -1,10 +1,11 @@
---
author: Matthias Kretschmann
comments: true
date: 2012-08-08 04:11:48+00:00
layout: post
slug: amazingly-early
layout: image
title: Amazingly early
image: 2ca7a094e10f11e1868c12313817a130_7.jpg
author: Matthias Kretschmann
date: 2012-08-08 04:11:48+00:00
wordpress_id: 2384
categories:
- photos

8
_src/assets/less/content.less
View File

@ -22,7 +22,7 @@
// post content
.entry-content {
h1, h2, h3, h4 {
h1, h2 {
.heading-band;
}
}
@ -75,6 +75,8 @@
color: @text-color-light;
font-size: @font-size-mini;
p { margin-bottom: 0; }
@media @breakpoint2 {
text-align: right;
}
@ -100,6 +102,10 @@
a { margin-right: 1em }
}
.modtime {
}
// LINK POST
/////////////////////////////////////

5
_src/assets/less/media.less
View File

@ -31,6 +31,11 @@ a.linkedImage img {
border-color: @link-color-hover;
}
.teaser {
margin-top: @line-height-computed*1.5;
margin-bottom: @line-height-computed*1.5;
}
// WORDPRESS MEDIA
/////////////////////////////////////

102
_src/assets/less/poststyle-2300.less Normal file
View File

@ -0,0 +1,102 @@
/*
KBDFUN
*/
/* Le kbd
---------------------- */
kbd {
font-size: 18px;
color: #444444;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 1em;
text-shadow: 0 1px 0 #fff;
display: inline;
padding: .3em .55em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #bbb;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#00000000', GradientType=0);
box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc;
}
kbd.dark {
color: #eeeeee;
text-shadow: 0 -1px 0 #000000;
border-color: #000;
background-color: #4d4c4c;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.5)), color-stop(80%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=0);
box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727;
}
kbd.ios {
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
color: #000;
border-color: rgba(0, 0, 0, 0.6);
border-top-color: rgba(0, 0, 0, 0.4);
background-color: ##b7b7bc;
background-image: -moz-linear-gradient(top, #efeff0, #b7b7bc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#efeff0), to(#b7b7bc));
background-image: -webkit-linear-gradient(top, #efeff0, #b7b7bc);
background-image: -o-linear-gradient(top, #efeff0, #b7b7bc);
background-image: linear-gradient(top, #efeff0, #b7b7bc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffefeff0', endColorstr='#ffb7b7bc', GradientType=0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
}
kbd.android {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
text-shadow: none;
padding: .3em;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #5e5e5e;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686;
}
kbd.android.dark {
background: #222222;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050;
}
kbd.android.color {
background: #083c5b;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b;
}
@font-face {
font-family: 'RobotoRegular';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

10
_src/assets/less/typography.less
View File

@ -39,11 +39,11 @@ h1,h2,h3,h4,h5,h6,
}
h1,
h2,
h3 {
h2 {
margin-top: @line-height-computed*2;
margin-bottom: @line-height-computed*2;
}
h3,
h4,
h5,
h6 {
@ -111,6 +111,12 @@ em {
font-style: italic;
}
hr {
border: 0;
.divider-bottom;
margin-bottom: @line-height-computed*2
}
// QUOTES
/////////////////////////////////////

2
_src/index.html
View File

@ -49,7 +49,7 @@ title: Home
{% if post.image %}
<a href="{{ post.url }}">
<img src="/media/{{ post.image }}" />
<img class="teaser" src="/media/{{ post.image }}" />
</a>
{% endif %}