m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-13 16:45:14 +01:00
Code

lead paragraph for all posts, remove more tag usage

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-06-12 18:12:05 +02:00
parent 85c86104e6
commit 2ede3f1917
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
33 changed files with 71 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_src/_assets/styl/_kremalicious/buttons.styl
View File

@ -42,6 +42,9 @@ a.btn
text-transform: uppercase
box-shadow: 0 1px 3px alpha($brand-grey-light, .1), inset 0 1px 0 rgba(255,255,255,.7)
@media $screen-sm
max-width: 20rem
&:hover,
&:focus
outline: 0
@ -153,7 +156,7 @@ a.btn-primary
.content-download
@extend .grid, .grid--gutters
text-align: center
display: block
margin-top: 0
@ -164,7 +167,10 @@ a.btn-primary
a
@extend .btn, .grid__col
margin: $gutter-space 0 0 $gutter-space
display: block
&:only-child
margin-left: auto
margin-right: auto
span
font-size: $font-size-mini

1
_src/_assets/styl/_kremalicious/code.styl
View File

@ -30,7 +30,6 @@ kbd
box-shadow: inset 0 1px 0 rgba(#fff, .4)
pre
@extend .breakoutviewport
display: block
padding: 0
margin-bottom: $spacer

18
_src/_assets/styl/_kremalicious/content.styl
View File

@ -38,6 +38,16 @@
&:before
@extend .hide
// Post Header
/////////////////////////////////////
.entry-header
.page-single &
@media $screen-md
breakoutviewport()
// Post Title
/////////////////////////////////////
@ -51,6 +61,14 @@
@extend .h3
// Post Lead
/////////////////////////////////////
.entry-lead
@extend .large, .bold, .textcenter
color: $brand-grey
// Post/photo teaser
/////////////////////////////////////

3
_src/_assets/styl/_kremalicious/typography.styl
View File

@ -232,6 +232,9 @@ hr
border-right: 0
margin-bottom: ($spacer*2)
.large
font-size: $font-size-large
.small
font-size: $font-size-small

2
_src/_assets/styl/_kremalicious/variables.styl
View File

@ -44,7 +44,7 @@ $font-size-root = 18px
$font-size-root-lg = 20px
$font-size-base = 1rem
$font-size-large = 1.35rem
$font-size-large = 1.2rem
$font-size-small = 0.8rem
$font-size-mini = 0.6rem

12
_src/_includes/articles.html
View File

@ -2,7 +2,7 @@
{% if post.layout == "link" %}
<article class="hentry format-link">
<header>
<header class="entry-header">
<h1 class="entry-title">
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
{{ post.title | titlecase }}
@ -15,7 +15,7 @@
</header>
<section class="entry-content">
{{ post.content | markdownify }}
{{ post.content }}
<p>
<a class="more-link" href="{{ post.linkurl }}">Go to source
<svg class="icon icon-entypo icon-entypo-forward">
@ -49,7 +49,7 @@
{% else %}
<article class="hentry format-post">
<header>
<header class="entry-header">
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
</header>
@ -64,11 +64,7 @@
{% capture has_more %}{{ post.content | has_excerpt }}{% endcapture %}
{% unless post.categories contains "goodies" and page.path contains "goodies" %}
{% if has_more == 'true' %}
{{ post.content | post.excerpt | excerpt | markdownify }}
{% else %}
{{ post.excerpt | markdownify }}
{% endif %}
{{ post.excerpt }}
{% endunless %}
{% if post.categories contains "goodies" and page.path contains "goodies" %}

2
_src/_layouts/base.html
View File

@ -10,7 +10,7 @@
<section role="document" class="site__document">
<div class="site__content">
<div class="container">
{{ content }}
{{ content | condense_spaces }}
</div>
</div>
</section>

2
_src/_layouts/page.html
View File

@ -14,7 +14,7 @@ layout: base
{% picture {{ page.image }} class="teaser" %}
{% endif %}
{{ content | condense_spaces }}
{{ content }}
</section>
</article>

7
_src/_layouts/post.html
View File

@ -5,8 +5,11 @@ layout: base
<section role="main" id="main" class="page-single">
<article class="hentry format-post">
<header>
<header class="entry-header">
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
<div class="entry-lead">
{{ page.excerpt }}
</div>
</header>
<section class="entry-content">
@ -16,7 +19,7 @@ layout: base
</figure>
{% endif %}
{{ content }}
{{ content | remove: page.excerpt }}
</section>
{% include actions.html %}

8
_src/_posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md
View File

@ -5,7 +5,7 @@ author: Matthias Kretschmann
date: 2007-06-11 18:44:28+00:00
wordpress_id: 1563
category: photography
tags:
tags:
- tutorial
- osx
published: true
@ -14,12 +14,10 @@ redirect_from:
- /2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/
---
**UPDATE: I wrote a follow up article describing how to use this scanner with the newest Mac operating system Leopard. Feel free to head over to this article to get the freshest facts about using this scanner with Mac OS X:
[Using the CanoScan LiDE 500F scanner with Mac OS X Leopard](/using-the-canoscan-lide-500f-with-mac-os-x-leopard/)**
At the end of last year I watched out for a new scanner and the CanoScan LiDE 500f from Canon was the choice. But finding a suitable driver wasn't that simple cause everywhere around was only the horribly old PowerPC-driver. As long as I had my old G4 in the house it wasn't that problem. But at this time all Macs were already Intel-powered and also my new MacBook which replaced the G4 was Intel-Powered and i had a problem.
<!-- more -->
**UPDATE: I wrote a follow up article describing how to use this scanner with the newest Mac operating system Leopard. Feel free to head over to this article to get the freshest facts about using this scanner with Mac OS X:
[Using the CanoScan LiDE 500F scanner with Mac OS X Leopard](/using-the-canoscan-lide-500f-with-mac-os-x-leopard/)**
So there were two choices for using the scanner on an Intel-Mac: installing the PowerPC-driver and using [VueScan](http://www.hamrick.com/) for scanning. But, man, was that slow! And i couldn't get the 16bit per channel scanning to function, which is an essential function for me. Also they want to have 40$ for this app, which isn't that much but after spending money for the scanner and for Photoshop I didn't want to buy another component for using the scanner. On the other hand you could use the [Preview.app](http://www.apple.com/macosx/features/pdf/) built into MAC OS X with Image > Import Image. But this last solution only offers rudimentary functions for scanning. Good to scan a document but not for scanning photos in high quality and for archive purposes. And nevertheless none of these solutions worked for scanning directly in the new Adobe Photoshop CS3.

2
_src/_posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
View File

@ -21,8 +21,6 @@ Because it's included in Safari since version 1.1(!) Mac users should be aware o
This article describes how text-shadow works, what you can do with it and which browsers currently support it. At the end of this article I've made up some examples and provide a list of useful resources.
<!-- more -->
Here's an overview of the headlines in this article. As you can see it's rather complex and long. Be sure to get a delicious fresh cup of coffee or tea before reading on:
1. What text-shadow is good for

6
_src/_posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
View File

@ -13,11 +13,7 @@ tags:
- osx
---
![Canon CanoScan LiDE 500F](/media/canoscanlide500f.jpg)A while ago I [wrote about my problems](http://www.kremalicious.com/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available.
But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system.
<!-- more -->
![Canon CanoScan LiDE 500F](/media/canoscanlide500f.jpg)A while ago I [wrote about my problems](http://www.kremalicious.com/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available. But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system.
# Finding and downloading the new driver 11.2.5.0X

6
_src/_posts/2008-05-05-scan-images-directly-into-apple-aperture.md
View File

@ -13,11 +13,9 @@ tags:
- osx
---
![Aperture Scanning](/media/aperturescan.png)Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation.
![Aperture Scanning](/media/aperturescan.png)Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps.
In the Image Capture scan window you can define an automatic task which will follow the scan process. It defaults to Preview meaning that the scanned image will open as a new Preview document after the scan. But we can make the images import to Aperture after the scan just with tools which are build into Mac OS X and come with every Mac (besides Aperture). So here's what you can do to scan directly into Aperture in 3 simple steps.
<!-- more -->
In the Image Capture scan window you can define an automatic task which will follow the scan process. It defaults to Preview meaning that the scanned image will open as a new Preview document after the scan. But we can make the images import to Aperture after the scan just with tools which are build into Mac OS X and come with every Mac (besides Aperture).
# 1. Make an Automator action

6
_src/_posts/2008-05-07-high-quality-watermarks-with-aperture.md
View File

@ -17,11 +17,9 @@ redirect_from:
- /2008/05/high-quality-watermarks-with-aperture/
---
Since version 1.0 Aperture is able to render images on export with a graphic overlay on top of them called watermark. This feature of Apple's Aperture can give you a chance to make stealing your web-published pictures a bit harder.
Since version 1.0 Aperture is able to render images on export with a graphic overlay on top of them called watermark. This feature of Apple's Aperture can give you a chance to make stealing your web-published pictures a bit harder. So let's see how we can make Aperture automatically render watermarks on our images during export. In this article we will make a watermark with a transparent background and add some text on top of it.
So let's see how we can make Aperture automatically render watermarks on our images during export. In this article we will make a watermark with a transparent background and add some text on top of it. The steps for this magic involves 4 simple steps:
<!-- more -->
The steps for this magic involves 4 simple steps:
1. Create a watermark image in Photoshop
2. Render different sizes of the watermark image

2
_src/_posts/2008-05-07-the-15-best-new-features-of-aperture-2.md
View File

@ -15,8 +15,6 @@ tags:
There are already some lists like this available on the web and they are always very subjective so I thought I should add my subjective list too. While Aperture was released I was coding this website and had not much time for writing about it. So although a bit late here is my absolutely biased list of my favorite 15 new features included in Apple's Aperture since version 2.0. It's in a nice countdown order ending with the best new feature (to me) at the bottom. Just click on the little screenshots to smoothly zoom to the full version of them.
<!-- more -->
# 15. The "New" toolbar icon
[![New toolbar icon](/media/aperture15_1.png)](/media/aperture15_1.png)

9
_src/_posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md
View File

@ -3,6 +3,7 @@ layout: post
title: 'Showcasing the CSS Parallax Effect: 12+1 Creative Usages'
author: Matthias Kretschmann
image: parallax-visualization_big.png
date: 2008-05-22 20:01:12+00:00
wordpress_id: 59
@ -16,9 +17,9 @@ redirect_from:
- /2008/05/showcasing-the-css-parallax-effect-12-creative-usages/
---
[![The kremalicious Parallax](/media/parallax-visualization.png)](/media/parallax-visualization_big.png)
Been so in love with the parallax effect that I have to post another article about it. It's time for a first showcase of websites using this effect. At the end of this article you'll find some tutorials for making this effect too.
Been so in love with the parallax effect that I have to post another article about it. For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](http://scifipedia.scifi.com/index.php/Parallax_(DC)).
For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](http://scifipedia.scifi.com/index.php/Parallax_(DC)).
I mean [Parallax Scrolling](http://en.wikipedia.org/wiki/Parallax_scrolling) which is a technique often used in good ol' arcade and video games like [Moon Patrol](http://en.wikipedia.org/wiki/Moon_Patrol) or [Sonic the Hedgehog](http://en.wikipedia.org/wiki/Sonic_the_Hedgehog_%28video_game%29). In such 2D games parallax scrolling was used to create an illusion of three dimensional depth.
@ -26,10 +27,6 @@ Since our operating systems are mainly 2D too we can use this pseudo 3D techniqu
But with the rise of CSS this technique can now be done without the use of flash as [Alex Walker](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/) and [Paul Annett](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax) discovered. You see we are now very close to the [Atari](http://en.wikipedia.org/wiki/Atari) with Web-Design.
So it's time for a first showcase of websites using this effect. At the end of this article you'll find some tutorials for making this effect too. And as you can see there's a parallax effect in the header of this website too so I will not include myself in this showcase list ;-)
<!-- more -->
So here are the examples. Just start clicking, resizing and goggling!
# Examples

2
_src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
View File

@ -23,8 +23,6 @@ redirect_from:
For quite some time I use my Ubuntu machine as a file and backup server for all Macs in my network which is perfectly accessible from the Finder in Mac OS X. There are some instructions available in the web for this task but all failed in my case so I wrote my own tutorial with all the steps needed for it to work properly.
<!-- more -->
<div class="alert alert-info">
<p>This article is very old and has been rendered obsolete for OS X 10.9 Mavericks and above. Apple uses v2 of the Samba protocol, dubbed SMB2 for file sharing by default now, which includes many technical advantages over AFP. On Ubuntu, the Samba package can be <a href="https://www.andyibanez.com/making-linux-file-server-interacts-os-x-mavericks/">easily installed and configured</a> to provide connectivity between Ubuntu und Mac OS X out of the box.</p>
<p>You should follow the steps in the following article only if you want to setup a Mac with an OS X version below 10.9. or you are absolutely sure you want to use AFP for file sharing.</p>

2
_src/_posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md
View File

@ -16,8 +16,6 @@ tags:
It all started with a move of my whole website to new and shiny servers with PHP 5 running by my host. I didn't heard of any incompatibilities between the latest Wordpress version running on PHP 5 and in fact Wordpress loves to use PHP 5. But somehow I wasn't able to update my site neither over http or ftp. Since I can contact my host admins directly ([thank you jpBerlin/Heinlein-Support!](http://www.jpberlin.de/)) this problem was addressed rather quickly. They just neglected to tell me that the server address for login also changed (I should have think of this too). So all my changes were applied to my Wordpress installation on the old server. Problem solved I thought.
<!-- more -->
But more problems appeared. The display of the newest and latest posts and the next post/previous post links at the end of every article didn't work as they should. But not enough I wasn't able to moderate any comments. Sigh. Looked like any sort of database problem and I started a lot of things. First I manually scanned all database entries for any wrong things but I couldn't find anything suspicious. After that I dropped the whole database and imported my database dump but this didn't solve the problems. My final step was to re-install everything so that Wordpress creates the tables in the databse. And guess what: It didn't work too!
Now it's clear something with my code must be wrong, I thought. For displaying the latest posts in Wordpress I use a pretty standard way which is [described in the Wordpress Codex](http://codex.wordpress.org/Template_Tags/get_posts):

6
_src/_posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md
View File

@ -12,12 +12,12 @@ tags:
- aperture
---
![image](/media/aperture-plugin128.png)Last week two new image editing plug-ins were announced for Aperture 2.1: The PTLens plug-in for correcting barrel distortion, vignetting, chromatic aberration, and perspective and the Jade plug-in for automatic correction of color, levels and exposure.
Last week two new image editing plug-ins were announced for Aperture 2.1: The PTLens plug-in for correcting barrel distortion, vignetting, chromatic aberration, and perspective and the Jade plug-in for automatic correction of color, levels and exposure.
![image](/media/aperture-plugin128.png)
The [PTLens plug-in](http://epaperpress.com/ptlens/) from [ePaperPress](http://epaperpress.com/) was available as a Photoshop plug-in in the past and is well known for its lens pincushion, barrel distortion, vignetting, chromatic aberration, and perspective correction abilities based on a lens model database similiar to [Kekus' LensFix CI plug-in](http://www.kekus.com/software/plugin.html).
<!-- more -->
While I love the plug-ins ability to correct perspectives the Aperture plug-in doesn't work with RAW files(!), just with tiff and jpeg files which is one more way to compromise the way Aperture works (In my opinion the whole plug-in architecture of Aperture does that). And while I would love to show you the plug-ins user interface in Aperture PTLens refused to open either JPEG or TIFF files. So here's just a screenshot of the standalone application:
[![PTLens UI](/media/ptlens_ui_thumb.jpg)](/media/ptlens_ui.png)

3
_src/_posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md
View File

@ -17,9 +17,8 @@ tags:
![Wordpress Logo by kremalicious](/media/wordpress-logo.png)Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute.
I've searched for a simple way of disabling those feeds, plugins etc. stuff the Wordpress Dashboard tries to fill but it seems you can't disable these from the backend. But there's a quick way for doing this which involves editing your /wp-admin/index-extra.php and uncomment some lines there. This will leave your Dashboard intact while it stops Wordpress from connecting to various sources to screw your blog up when you just want to quickly write something.
<!-- more -->
So open your /wp-admin/index-extra.php file. It should look like this:
So open your `/wp-admin/index-extra.php` file. It should look like this:
{% highlight php %}
<?php

6
_src/_posts/2008-08-03-tips-for-journalists-reporting-from-china.md
View File

@ -15,9 +15,6 @@ As you may know there's a huge Internet censorship going on in China. Contrary t
And as in every political system with totalitarian elements there's a good chance you will meet some angry lackeys if you're going to report about topics the chinese authorities don't want you to report. But more important they will threat your sources if their identity gets revealed. So if you want to report about [the water shortage in the villages around Beijing](http://www.voanews.com/english/2008-06-27-voa10.cfm), the [massive air pollution in Beijing](http://english.chosun.com/w21data/html/news/200807/200807300031.html) or about all the forced resettlements going on in China you should consider some security precautions to protect you and your sources.
<!-- more -->
Especially there's two things to do here: First you have to use technologies to circumvent firewalls. Second is to secure your connections and your communication to protect you and your sources.
And remember that you have to protect your Computer _before_ arriving in China because websites like the [Tor project](http://www.torproject.org) are blocked in China.
@ -48,7 +45,7 @@ If you use mails be sure to encrypt everything, your logins with SSL/TLS **and**
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.
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.
@ -86,4 +83,3 @@ If you want to know more about how to protect you and your sources be sure to ch
[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)

3
_src/_posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md
View File

@ -17,9 +17,6 @@ tags:
So in this quick tutorial I will show you how to create an encrypted Aperture Vault by using Sparse Bundle Disk Images and by utilizing tools built into Mac OS X. All this can be done in two simple steps.
<!-- more -->
## 1. Create an encrypted disk image
First you have to create the encrypted disk image where the Aperture Vault will reside. So fire up Disk Utility from the Utilities folder inside your Applications folder or use Spotlight to open it.

2
_src/_posts/2008-08-22-the-kremalicious-marsedit-style.md
View File

@ -14,8 +14,6 @@ categories:
A while ago I've made a custom style for the blog on kremalicious.com and would like to share this style with you. The style is based on the colors used on kremalicious.com with a black background and light grey text on top of it. The links have the same blueish hover style as on my website:
<!-- more -->
[![The Kremalicious MarsEdit Style](/media/marsedit_kremalicious_big.png)](/media/marsedit_kremalicious_big.png)
Here's how to apply the style for your blog preview in MarsEdit:

5
_src/_posts/2008-09-01-a-new-browser-is-coming-google-chrome.md
View File

@ -3,6 +3,7 @@ layout: post
title: 'A New Browser Is Coming: Google Chrome'
author: Matthias Kretschmann
image: googlechrome.png
date: 2008-09-01 20:40:38+00:00
wordpress_id: 197
@ -13,12 +14,10 @@ tags:
- google
---
![Google Chrome](/media/googlechrome.png)Today some informations about Google's new open source browser called Google Chrome came up. First published as a comic on [Blogoscoped.com](http://blogoscoped.com/google-chrome/) and [confirmed by Kara Swisher](http://kara.allthingsd.com/20080901/google-ignites-a-new-browser-war-with-microsoft-by-unveiling-one-of-its-own/), Google Chrome will be a [WebKit](http://webkit.org/)-based browser with a new JavaScript Virtual Machine called V8 and with [Google Gears](http://gears.google.com/) included.
Today some informations about Google's new open source browser called Google Chrome came up. First published as a comic on [Blogoscoped.com](http://blogoscoped.com/google-chrome/) and [confirmed by Kara Swisher](http://kara.allthingsd.com/20080901/google-ignites-a-new-browser-war-with-microsoft-by-unveiling-one-of-its-own/), Google Chrome will be a [WebKit](http://webkit.org/)-based browser with a new JavaScript Virtual Machine called V8 and with [Google Gears](http://gears.google.com/) included.
Google Chrome has a different UI-Design compared to other browsers especially regarding tabs. Google Chrome tabs will be on top of the address bar so every tab has its own address bar. Beside that every tab will run its own process to improve stability.
<!-- more -->
Using WebKit as its rendering engine, Google Chrome will have all the cool WebKit stuff included like [CSS Gradients](http://www.kremalicious.com/2008/04/webkit-team-introduced-css-based-gradients/), [CSS Masks](http://www.kremalicious.com/2008/04/more-awesomeness-from-the-webkit-team-css-masks/) and the CSS3 property text-shadow, which [I've covered earlier in detail](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/).
Google Chrome will be optimized for use with web applications and, instead of using [WebKit's new core JavaScript engine Squirrelfish](http://webkit.org/blog/189/announcing-squirrelfish/), Google decided to use a new, multi-core processor optimized JavaScript virtual machine developed by the V8-team in Denmark.

5
_src/_posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md
View File

@ -3,6 +3,7 @@ layout: post
title: The Finest Coffee Cups - Most Incredible Coffee Icons On The Web
author: Matthias Kretschmann
image: coffee-cup-icon-kremalicious.png
date: 2008-10-23 02:23:39+00:00
wordpress_id: 277
@ -10,12 +11,10 @@ categories:
- design
---
![Coffee Cup Icon by kremalicious](/media/coffee-cup-icon-kremalicious.png)In this article I present you the finest icons of the fuel of a lot of designers and students (and other people too) available on the web. I've just released [my own coffee cup icon](/coffee-cup-icon) but this beverage seem to have inspired a lot of other beautiful icons especially for Mac OS X.
In this article I present you the finest icons of the fuel of a lot of designers and students (and other people too) available on the web. I've just released [my own coffee cup icon](/coffee-cup-icon) but this beverage seem to have inspired a lot of other beautiful icons especially for Mac OS X.
Now just get your next coffee, sit back and enjoy this little showcase. Just click on the images to get to the icon sources. At the end of the article you'll find links to some nice high quality coffee tutorials. And remember you will have more control over time itself if you [reach your 100th cup of coffee](http://en.wikipedia.org/wiki/Three_Hundred_Big_Boys).
<!-- more -->
## The Finest Coffee Cups
Please note that these icons are the property of their respective owners and you should always consult their copyright notice first before using these icons.

2
_src/_posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md
View File

@ -20,8 +20,6 @@ I received quite a few mails in the last days from Aperture users asking for the
In this article I will lay out every way I've found to add watermarks to your images in an Aperture 2 workflow and will discuss the advantages and disadvantages of each solution. The goal of this article is to give you a brief overview about the various ways you can add watermarks to your images so you can easily choose the best one for different needs. In short these are the possibilities:
<!-- more -->
## 1. The Aperture Way

4
_src/_posts/2009-01-05-the-mac-in-futurama.md
View File

@ -17,9 +17,7 @@ wordpress_id: 440
Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).
So the following screens from Futurama refer all to Macs available in or before 1999. Also you'll find some nice links to downloadable Futurama stuff for your Mac at the end of this article. And may the lawyers of Twentieth Century Fox now please stop reading.
<!-- more -->
The following screens from Futurama refer all to Macs available in or before 1999. Also you'll find some nice links to downloadable Futurama stuff for your Mac at the end of this article. And may the lawyers of Twentieth Century Fox now please stop reading.
For orientation: I've followed the original four season production cycle and not Fox's five seasons splitting. The "real" Season 5 are the recently released DVD movies/Episodes on Comedy Central.

2
_src/_posts/2010-07-03-momcorp.md
View File

@ -14,7 +14,7 @@ tags:
- futurama
---
The recent Futurama episode "[Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App)" mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
The recent Futurama episode [Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App) mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview:

11
_src/_posts/2012-04-04-android-tab-conundrum.md
View File

@ -5,6 +5,8 @@ date: 2012-04-04 14:24:30+00:00
layout: post
slug: android-tab-conundrum
title: The Android Tab Bar Conundrum. Again.
image: tabs_overview.png
wordpress_id: 1556
categories:
@ -13,14 +15,9 @@ tags:
- android
---
![](/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.
<!-- more -->
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. But this time it's a bit complicated, let me explain.
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.
## Problem No. 1: Navigation Controls

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

@ -19,8 +19,6 @@ And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in fu
![](/media/wp34_retina_icons.png)
<!-- more -->
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.

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

@ -20,8 +20,6 @@ Windows 8 and Internet Explorer 10 make it possible to pin your site to the Metr
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)

7
_src/_posts/2012-08-07-projectpurple.md
View File

@ -14,13 +14,12 @@ tags:
- wallpaper
---
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.
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. If you don't think this demands a wallpaper, you're weird.
<!-- more -->
> 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."
![](/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.

8
_src/_posts/2015-09-13-css-app-store-badges.md
View File

@ -13,13 +13,7 @@ tags:
- svg
---
The badges provided by all app store providers just don't play well together with their varying typography and different sizing. Only Apple provides a proper SVG source for their badge, Google doesn’t even provide a retina bitmap asset.
On top of that, using svg or png assets makes localization a pain unless you want to manage multiple assets per language.
So let's make them all visually unified, infinitely scalable, with pure text for easier localization and some web interaction styles. And while we’re at it: different sizes with the same markup by using some modifier classes.
<!-- more -->
The badges provided by all app store providers just don't play well together with their varying typography and different sizing. So let's make them all visually unified, infinitely scalable, with pure text for easier localization and some web interaction styles. And while we’re at it: different sizes with the same markup by using some modifier classes.
<p class="content-download">
<a class="btn-primary icon-eye" href="https://lab.kremalicious.com/appstorebadges/">Demo</a>