Cross-browser buttons with CSS3 and Sass

Using CSS3 isn’t quite as easy as it should be. Lots of advanced functionality requires using vendor prefixes which easily bloats your stylesheet with repetitive properties.

One solution to this is using Sass. Especially Sass mixins and color functions can radically reduce the amount of code you need to write. Combine that with CSS3Pie to add IE support and you have quite elegant solution for making cross-browser supported CSS.

Making buttons

Here’s one way of making nice looking buttons with pure CSS3. Rounded borders and gradient can be added this way with no extra markup or images.

Enable CSS3Pie support

@mixin pie //using CSS3Pie for IE support behavior: url(/PIE.htc) .pie @include pie

On a side note, if you want to serve PIE.htc with app engine add this to your app.yaml:
- url: /PIE.htc static_files: media/css/PIE.htc mime_type: text/x-component upload: media/css/PIE.htc

Sub mixin for gradients

@mixin vertical-gradient($bgcolor1, $bgcolor2, $bgcolor3, $bgcolor4) // cross browser mixin for gradients @extend .pie background: $bgcolor1 background: -moz-linear-gradient(0% 100% 90deg, $bgcolor1 0%, $bgcolor2 50%, $bgcolor3 50%, $bgcolor4 100%) background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, $bgcolor4), color-stop(0.5, $bgcolor3), color-stop(0 ...

App Engine helpers for ZSH

Here are some zsh helpers for Google App Engine will save you lot of typing in the long run. I’ve extendend the oh-my-zsh project with my own plugin for Google App Engine, but you can easily just add these to your .zshrc.

Uploading app

To use this alias you need to define GAE_EMAIL and GAE_PASS in your .zshrc. This saves you typing them in the first time.
alias gaeup="echo $GAE_PASS|$GAE_SDK/appcfg.py update . --email=$GAE_EMAIL --passin"

Helpers for bulkloader

Using bulkloader to download/restore multiple entities can be painful with all the manual steps. This helper is for downloading raw entity data from a live site for given Kind. Usage: gaebulkdl Kind app_id. Note: the _ah/remote_api is default for Python SDK 1.3.8 builtins.
function gaebulkdl() { echo $GAE_PASS|$GAE_SDK/bulkloader.py --dump --kind $1 --filename=$1.bin \ --url=http://$2.appspot.com/_ah/remote_api --email=$GAE_EMAIL --passin }

This function is for restoring downloaded data. Usage: gaebulkup Kind localhost.fi:8080 app_id email password
function gaebulkup() { echo $5|$GAE_SDK/bulkloader.py --restore --kind=$1 --filename=$1.bin \ --url=http://$2/_ah/remote_api --app_id=$3 --email=$4 --passin }

Markup-enabled Notational Velocity

Christian Tietze has done great job forking Notational Velocity to support previewing markup using Textile, Markdown or MultiMarkdown. You can also export text as html, in case your blog engine doesn’t support these markup formats. It’s now my favorite tool for editing blog posts. Good job!

Programmer's keyboard layout

True hacker makes his own keyboard!

Well, maybe not. But many international keyboard layouts suck for programming. For example with Finnish keyboard you have to type Alt + Shift + 8 to get }. Now that’s a pain to type gazillion times a day.

To increase my productivity, I decided to create my own keyboard layout using Ukelele OSX app. First I was considering using Dvorak or its programmer’s variant, but then I realized it would have its issues with VIM key mappings and having to relearn everything would require a lot of practicing. So instead I based mine on the Finnish layout.

ml-keyboard

As you can see I’ve replaced all dead keys with something useful, and also I’m using å for {, since I hardly ever write Swedish. If I really need it, I can get it with Alt+å. I’ve also mapped my caps lock to esc using PCKeyboardHack, which makes VIM much more pleasurable to use.

With shift pressed it’s much like Finnish keyboard without shift with some additional Django and ZSH helpers.

See the result in GitHub or clone the layout git clone git@github.com:mikkolehtinen/ml-keyboard.git and copy ml-keyboard.keylayout to /Library/Keyboard ...

Improving Kindle3 experience

I just received my new Kindle3 from Amazon. So far it seems like a great device for the price (150 EUR shipped to Finland, including all expenses). The screen is great, battery lasts long and size and weight are good for e-reader. The UI is still clumsy and feels very outdated, but with a little tweaking, it does the job. First things I did was:

Basics

When reading PDFs use Aa key to change zoom level, contrast and screen orientation. I’m reading most of PDF files horizontally, which gives you nice zoom for smaller font sizes. Most often I prefer to convert PDF to mobi using Calibre (see below)

Calibre for e-book syncing

Calibre for managing and syncing your e-books. It seems to be buggy in the newest release (calibre-0.7.20), but old releases can be found from SourceForge.
To convert a pdf to a mobibook, run:
/Applications/calibre.app/Contents/Resources/loaders/ebook-convert input-filename.pdf output-filename.mobi

Ephemera

Ephemera gives you two-way Instapaper.com sync for your ebook reader without Whispernet traffic fees. However, with Kindle3 it’s probably easiest to either download new articles through Instapaper website or even easier to order updates by e-mail.

Start ...

Fork me on GitHub