Monthly Archives: January 2013

Font scaling

PX vs EM? Neither!!! Heard of REM?

I’m starting a new project at my client and we have really been given almost complete free reign over what technology and styles we want to use. it’s lovely.

The one consequence of it however is that you have to make all the decisions on what tools and styles you are going to use… and if you choose poorly you can only blame yourself.

Scouring the web for the latest and greatest on best practices, I came along this CSS genius which talks about the most obscure metric you-never-heard-of. rem.

The problem with PX is that pixels don’t resize well on old browsers and containers don’t grow well.

The problem with EM as a CSS measurement is that if you have a child item with EM with an EM on the parent, the child will either shrink or grow as you nest more deeply. There are simple hacks for it, but I’ve never been happy with them.

What is nice about REM is that it works just like EM, but the scaled size doesn’t reapply as your child items nest further down.. they use the root element’s (usually html) size as a baseline and scale off that. Everyone wins!

Here is a cool hack/example:

html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

Read this amazing article for more info over at snook.ca

NOTE: You can also do some cool font vertical rhythm tricks if you’re using Sass, but that is for another post, another day.

Make it yourself!

HOW TO : Setup your own freaking personal WordPress server!

Muhahaha!The fact that you are reading this means I did it. I finally got off my bum.. stopped using my crappy Tumblr blog and worked out how to use Linux, SSH, Amazon EC2 and how to change my own DNS. It took all of my free time when I wasn’t looking after my baby to get it going, but it was worth it because now I have complete control!!!

Muhahaha!!

Simple Steps:

  1. Setup the server.
  2. Write this post for the next person.

More Detailed Steps:

Now, you can make your own Linux image, and then install your WordPress on it, but why bother?

Install a Bitnami-made WordPress image on Amazon’s Elastic Compute Cloud

  1. Go to http://bitnami.org/stack/wordpress#cloudImage and scroll down to the “Amazon machine images”
  2. Click on an Ubuntu 64-bit EBS link.. you can use either single site which is a touch easier, or multisite (like I did) which I felt was built ready for what I wanted.
  3. Select a T1 Micro-sized machine, and Launch Instance (you could request a launch instance, but it’s more complicated)
  4. Keep clicking Continue until you get to the screen that talks about Key Pairs. If you already have a key pair generated, select the one you want. If not, generate a new one.
  5. When setting up security groups, make one that can accept incoming connections on ports: 22 (SSH), 3389 (RDP), 5900 (VNC), 80 (HTTP), 8080 (HTTP alt)
  6. Click Launch!
  7. Wait for it to boot and the State to change to “Running”.. then click on it and scroll down and copy the Public DNS address
  8. Paste the public DNS value into your web browser and navigate to it. If everything went right, a web page should show!

Connect to it!

  1. Download your Key Pair file from Amazon. Mine is called Linux.pem. This file is your password file. You won’t be typing in a password, you will be supplying this file.
  2. In a terminal window (OSX), change to the directory you downloaded your Linux.pem file and type chmod 600 Linux.pem (This will allow this file to be used)
  3. Now connect to your remote machine with ssh -i Linux.pem bitnami@xxxxxx (where xxxxxx is the Public DNS). If you want to stop having to specify your Linux.pem file.. consider having a look at this article.


RSA pem key - blurred

Storing my pem key file in my keychain to mount a filesystem with SSH

My problem is that I’m not very go at vi Editor šŸ™

I used to be ok at it, but really, for now, I’m rubbish at it.

I figured there had to be some lovely program that would mount my remote machine’s drive via SSH… AND THERE IS!

So i’m trying ExpanDrive‘s 30 day trial for their program that will reliably mount and re-mount remote file systems.

Their #1 issue so far is that their documentation is pretty sucky.
Their #2 issue is that it’s not obvious how to connect to a filesystem via SSH when you have to use a .pem file.

Thanks to this StackOverflow article, I found out I can add my Linux.pem key to my keychain.

  1. type ssh-add -K /path/to/private/key/file.pem
  2. In ExpanDrive, create a connection to your server with your login and leave the password field blank. Your pem passphrase will be read from the keychain.
  3. In terminal, you can now connect via SSH with ssh bitnami@yourdomain.com without having to specify the location of your pem file (previously ssh -i path/to/Linux.pem bitnami@yourdomain.com)
Configuration dialog for ExpanDrive

Configuration dialog for ExpanDrive

When my 30 day trial ends, I may play around with using Cyberduck or OXFUSE or sshfs-gui.

OSX Transmit

I had a license to the program TransmitĀ and I tried it out and it is AMAZING at connecting to SFTP resources, and mounting them as local drives and synchronization. Ā Get it! Ā I can’t recommend it enough!

UPDATE

I almost lost my Linux.pem key! This would have been an epic screw up, but fortunately I remembered that I have a backup of the file on Dropbox. Unfortunately dropbox also strips off unix permissions, and ssh requires the pem key to have a permission of 400 (not public).

When I tried connecting with a file that was “too open” i got the following

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for 'Linux.pem' are too open.
It is recommended that your private key files are NOT accessible by others.
This private key will be ignored.
bad permissions: ignore key: Linux.pem
Permission denied (publickey).

The solution?

Make the file less “open”… to do this one need only type:
chmod 400 Linux.pem

Changing Multisite WordPress to a New Domain

After initially setting up a Bitnami WordPress server on Amazons EC2 .. I used Amazons Route 53 DNS to point to my new web server.

However once I set up my domain, WordPress was complaining about

Registration has been disabled.

with a URL of:

wp-signup.php

I realized that my site was configured to its original name, and needed to be re-configured to the new domain.

According to BitNami WordPress Multisite – BitNami documentation….

$ sudo /opt/bitnami/apps/wordpress/updateip --machine_hostname mydomain.com

This tool automatically updates the WordPress domain with the machine IP address at boot time. If you have customized your domain name, you should rename it, for example using the following command:

$ sudo mv /opt/bitnami/apps/wordpress/updateip /opt/bitnami/apps/wordpress/updateip.backup

Courier Prime sample

Write screenplays? Courier Prime.

It seems thatĀ justĀ because a couple of people fel like it, the 50+ year old Courier font has been revamped with a strong eye to not changing its dimensions but only to changing its legibility.

http://johnaugust.com/2013/introducing-courier-prime

I have been working on my own nefarious serif font.. but I’m not sure the world is ready for it yet!

Developing with Courier Prime

I have been using this font as my coding font for the past few months, and have found it to be a quite agreeable monospaced font. Other devs have noticed I’m using a different font, so it must be a bit of a departure from common mono fonts.

Installing wget on OSX

My parents have a dynamic website that hasn’t been updated in about 3 years. So IĀ figured it was time to host their site on a less expensive static host… but first I had to download their static webpages!

I had heard wget was the program to use for that, but its not a standard OSX command line tool, so I found an excellent article to build it on my own machine.

http://thomashunter.name/blog/install-wget-on-os-x-lion/

Once I got that working i downloaded a static version of their dynamic site with the following
wget -m -pĀ http://www.site.com/