Fonts for Web & Blog

Fonts on the web
Originally there was only a limited set of fonts available to website builders. Even now, the fonts readily available in a web browser differ per platform. Even those that do not aim at advanced typography want to have some control over their fonts, for both 'titles' and 'content'

CSS font stack
To overcome the problem of differences in available fonts in various web browsers, css allows a web designer to define a 'stack' of multiple font-families. The browser simply use the first font that is available. The downsides of course are: 1) still a limited set of fonts available, and 2) your page will look different in every browser, especially when using less supported fonts.

Text as image
For titles (ie non-changing pieces of text), one can present text as an image. These images are created upfront in an image editor. This allows you to use every font you can find. Even nowadays this is still often done for titles and such, but has 2 downsides: 1) Google only indexes text, 2) inflexible: for every change in text or font you have to go back to your image editor.

Custom fonts
Nowadays, it is also possible to add custom fonts to your website. This functionality is available in 'most browsers'. This may sound discouraging, but as a web designer, this is often the best you'll get anyway and because of font stacking (see above), it is really easy to present a very practical alternative.

Options
For those who want to do stuff manually, I gladly refer to this post. As often, there's workarounds needed to increase the spread of browsers that will understand you. In such cases, it is nice to make use of frameworks that do this for you.

Google font API
Google font API is such a framework. It is accompanied by a set of freely available font directory. All you have to do is include a css file from Google's server, and you can use the font in your css font definitions as any other font:

<link href="http://fonts.googleapis.com/css?family=Font+Name" rel="stylesheet" type="text/css">

You can define multiple font families (ie 'fonts'), as well as font styles (such as regular, bold, italic, bold-italic).

Blogger fonts
Let's look at Blogger, then Wordpress.com. Blogger enables you to change HTML and CSS, so you are free to go. I realized along the way, though, that Blogger makes it even easier! In the template editor, under 'advanced' you can not only select 'commonly' used web fonts such as Arial and Georgia, but also all (?) available free fonts from the Google font directory. Awsome!

Wordpress and TypeKit
Here we go. Wordpress.com. Here I even needed it more, because I haven't found a way to increase my font size without paying for custom css. TypeKit is really well integrated into Wordpress. The tool itself is quite nice, but due the the degrees of freedom it wants to offer you, quite complex. If you want to stick to 'free', you are limited to 2 fonts and 1 website. For me it was enough to test things.

You have to subscribe to TypeKit, and enter your TypeKit id in your Wordpress dashboard. Then you can use the TypeKit website to select a font and css tags the font should be attached to (if you are lucky, and the template you chose is already in the list, TypeKit does a lot of the work for you). If you publish and wait (they say it may take a few minutes), you should see the changes applied to your blog.

So, although you are limited when keeping it free, it is possible to use TypeKit to change fonts to non-web fonts in Wordpress. In practice however, I found this quite tedious, and previewing is not an option, due to the delay after pressing the publishing button.

Closing remarks
So all together, you can add 'custom' fonts to your webpage, or blog. In Blogger it is super easy, in free Wordpress.com unpractical but doable using TypeKit. Google font API is your friend if you have your own website. Realize however that a full font, including different styles and with extended character sets can become quite big files. Adding 4 fonts to your page can really add up. So be selective in which styles, characters and fonts you really need.

OpenSocial

While working on my tiny my-2do gadget I came across something called OpenSocial. I had maybe once heard something about it but otherwise I had now idea what it was. I decided to dive into it a little for my own knowledge, and write about it here for others' knowledge.

API's
As you might have noticed, many social websites, such as LinkedIn, Facebook, etc, enable third parties to develop applications for their site. These applications can integrate into the social-ness of the website (ie get friends list and stuff) via so called API's (Application Programming Interfaces). The problem was that each site used their own API's, so unless they had too much time on their hand programmers had to choose.

OpenSocial: Open, Social, StandardOpenSocial is pushed forward by Google, but is for the web, not just for Google. It enables (web) developers to build applications for all social sites (that adapt to OpenSocial) at once. The developer now only has to learn about the OpenSocial API's to make an application work on all platforms.

Who's in?< Opensocial.org shows a list of social sites that are exposing the OpenSocial API's to developers. Interesting names are LinkedIn, MySpace, Hyves, iGoogle, Orkut. The big name that is missing obviously: Facebook, although apparently there is some adapter software you can use to run your OpenSocial app on Facebook as well.

Hit?
I could not find a video about OpenSocial itself that was less than 2 years old. Maybe this is because the original videos are still relevant enough? Also a lot of webpages discussing OpenSocial are of comparable age. Also, in the beginning, security issues came up.

Alive?
Is OpenSocial still alive? Yes, I think it still is! For instance MySpace announced this month it will be providing an OpenSocial .Net container and keep on supporting OpenSocial.

Interesting?
Yes, OpenSocial is interesting, at least for me, because you can reach a lot of people as a developer, and you can make use of existing platforms and libraries. Furthermore, the main techniques you have to know for OpenSocial are HTML and JavaScript. Check.

My-2do

I wanted a todo list on my blog, that I could edit, and others could see, as a 'gadget'. I decided to make one myself. I won't give any details, that would become a multi-page tutorial, but I'll show you which components / platforms / techniques I used so you can for yourself decide what's out there.

Google Gadgets
Blogger's layout is very flexible. You can add gadgets (in my language, Blogger calls them widgets), made by Google, third parties, or yourself. These are defined / built like any other gadget for iGoogle. That was interesting for me for two reasons:

1. Because of this there exists a lot of documentation already, from Google itself and probably also in communities on the web. Auto-didactic as I am, this can make or break a project!
2. I could extrapolate my efforts to other Blogger as well as iGoogle users. Not a necessity but definitely an extra motivation: the effort / learning investment opens up a lot of new opportunities.

XML + http-request

Gadgets are defined as an XML file. You can host them with Google (I learned that afterwards) but I hosted it somewhere else. The XML file contains information for the user-settings dialog, as well as the HTML of the gadget itself. You can spice this up with JavaScript, including access to dedicated libraries from Google (for example to get the current blog's posts). I decided to host the app itself at Google's App Engine. Because of that, the XML was quite simple: just an empty DIV and a few lines of JavaScript that used 'gadgets.io.makeRequest' to fetch the list from App Engine.

App Engine

App Engine is 'part' of the gadget system, it was just my choice for making the server-side part of the application. I could have just as well installed a LAMP stack (Linux - Apache - MySQL - PHP) on my home server and host it from there. App Engine however offers a bunch of free resources and can scale up very easily. The main reason however is that I am currently learning App Engine.

I use Java (GAE/J) and decided to try out JDO persistence this time. Although others say JDO and JPA are comparable, I think there is more documentation for JDO available. Oh, I use Eclipse as my IDE, together with Google App Engine plugin, it makes life on App Engine a lot easier.

To get things rolling even faster, I decided to use the Google account login feature of App Engine. This means that I don't have to worry about the user system. 

Structure

Currently the whole system is very basic: one applet to edit your todo list (there's one list per email address), another applet that exposes your todo list to the outside world behind a 'custom' url. This url was first baked into the xml. That's stupid of course so I rewired it so the todo list ID is configurable by the user. 

Feature stuff

There's more to do: styling the edit page, making edits possible from within the blog (as long as you are logged in), multiple todo lists, styling the todo list, marketing, earning money, selling out, buying an Alfa Romeo Giulietta. :-D

Where?

Okay you want to be a beta beta beta test beta test test tester? Here's how to implement:

- Go to my-2do.appspot.com (and log in with your Google Account)

- Add items to your list

- Copy the ID to the clipboard

- Go to blogger, add gadget, use your own, paste this URL: http://hosting.gmodules.com/ig/gadgets/file/107797948841842070898/my-2do.xml

- Done

Let me know if this doesn't work or if you have cool feature requests :-D

MySql grants

So today I wanted to see what is going on in my MySql database GRANT-wise. There's a function ('SHOW GRANTS') for that, but this it requires a specific user@host. This is convenient if you huge grant-tables of course. However I just wanted to understand the GRANT0-system better and set up only a few privileges.

On the internetz I found something that gives you ALL privileges for ALL users. In 1 line. Since it didn't work I rewrote it and post it here:

mysql -uUSERNAME -pPASSWORD -B -N -e "SELECT user, host FROM mysql.user" | sed 's,\t,"@",g;s,^,show grants for ",g;s,$,";,g;' | mysql -uUSERNAME -pPASSWORD -B -N | sed 's,$,;,g'

Copy and paste at your convenience, run directly from your bash shell command line. Leave/modify -u and / or -p as you wish. And for a bonus, here's how you get a list of all users@hosts:

mysql -uUSERNAME -pPASSWORD -e "select Host, User, Password from mysql.user"

That is all.

DNS stuff

DNS
To get your internet data back and forth over the internet, you'll need the IP address of the other system. Since we humans are not so good with numbers (apart from a few idiot savants maybe), we use host-names, such as www.google.com. DNS services connect host names to IP addresses and vice versa (this is not a one-on-one relationship! One IP address can serve many websites, but the reverse is also possible, having multiple IP's for a single website can be an important fail-safe).

Google Apps / Sites / App Engine
The other day I reserved a domain name and wanted to connect it to Google Apps / Sites / App Engine. This requires CNAME records in the DNS, while the webhost I chose sadly only allowed the A-records to be changed. Ehh, what?

Well, it's rather complicated, but let's have a try.

CNAME and A records
The default case: a DNS lookup (to translate blah.example.com) will start at your DNS provider, the A-record is retrieved (there's only 1 A record for example.com). This yields an IP4 address which leads to the computer that is actually serving your website.

However when a CNAME (canonical name, the host name where this entry is an alias for) is found, the DNS lookup will start over from there. Yes, this can be another host name.

So, with a CNAME record for blah.example.com that contains 'ghs.google.com', a query for blah.example.com will lead to another query for ghs.google.com. This yields an A-record IP address (or yet another CNAME of course). The final IP address will be used to make the actual web request. In this web request, the original host name will also be mentioned. This way the webserver (which obviously serves many sites) knows what page to serve you.

The Trick
But if you know this IP-address, you might just as well use this as your A-record. This can easily be done using ping:

> ping ghs.google.com
PING ghs.l.google.com (74.125.77.121) 56(84) bytes of data.
..

There you go. Put this as the A-record and you can use Google Apps and/or Google App Engine for your entire domain. Note that you can not have CNAME's for your domain-without-subdomain (ie example.com), but this hard-coded A-record IP address does point *.example.com AND example.com to Google.

Drawback
The drawback of course, comes when Google changes the IP of ghs.google.com, in which case the A record trick will fail. Furthermore, you can only do this for your entire domain, not just a single subdomain.

Irrelevant
In the end, I found out that Google Apps -> Google Sites has a footer that you can not remove and for now I only wanted to host a simple page. Since App Engine has some delay for the first request (after a period without any requests from any visitors) I moved away from google to 000webhost. For this I only had to change the A record.

Note that changing DNS stuff, due to it's decentralized nature, can take up to 24 hours...so be patient!

Googlify your life

Although Google is still mainly known as THE search engine of the web, it offers tons of other services as well. For free. Some of them are quite known as well, such as Gmail and Google Calander, although not all of them are a heavily associated to Google and are brands on their own, such as YouTube and Blogger.

Here's the things that Google does for me, besides serving search results, ads and YouTube videos:

Gmail + Gmail Calander + Contacts + Syncing

Recently I found myself switching a lot between my home desktop computer, my laptop and my computer at work, and on each, between Windows and Ubuntu. You know you're doing something wrong if you have to reboot into windows to access this or that email, or when you brought your laptop for holiday but have to copy your friend's email addresses from your phone's address list.

So I switched to Gmail. This is the first time in my life I'm changing my email address, and I'm taking at least a year for the transition. I have a symbian phone (Nokia E71) and although it's crappy compared to the iPhones and Androids on Steroids it does support Google's sync. This allowed me to transfer my contacts and calander to Google and keep them synchronized from now on.

I set up POP-import so Gmail checks my old email account for me and places these mails in a seperate folder, to ease the transition. Next I transfered 13k mails from Outlook to Gmail. I did it the easy way:

1. Set up IMAP access in Google
2. Connect to the IMAP account from Outlook
3. Drag your email folders from local to Gmail (you might have to play a little bit first with folder names and labeling depening on your demands)
4. Wait (> overnight in my case :-D)

So now I have my all my contacts, all my email and all my calander items on every computer that has internet access. And I can search them...fast! Without having to hear the heart-breaking sounds of my harddisk crunching away when indexes are being rebuilt.

Google Docs

It's not Office, it's not even OpenOffice. But as long as you have internet, it's there. I have a few documents / spreadsheets that I have to access from different places, such as technical notes on a system that I have to read and change on location. For this purpose, Google Docs has proven to be very useful to me.

Blogger + Google Analytics

Having a Gmail account, setting up a blog at Blogger is quite easy. A well placed JavaScript script enables me to use Google Analytics to give me statistics. Google Analytics can do a lot more, by the way. It is a powerful tool for any webmaster.

AppEngine

AppEngine is amazing. I have recently started to use it to built web applications. In Java (it also supports Python, which appears to actually be more popular). And they are fully scalable. I admit it hase quite a learning curve, partly because it doesn't use SQL but Google's Bigtable. But I think it's worth it, although I have to see how it holds when going live. It's free as long as you don't exceed your quota's. But unlike your regular php-mysql site hosted at randomcheaphost.com it can handle heavy traffic bursts very well (same holds true long term traffic increases by the way).

Google Apps

I think the naming is confusing, Google AppEngine (appspot.com) vs Google Apps, but once you get the difference it's fine. Google Apps is Google-for-your-company (< 40 accounts is free, so personal use is deffinately an ooption). Google tools such as Docs and Gmail are accessed / addressed with name@yourdomain.com and different tools can be added (or blocked). You can also link an exsiting URL to Google Apps, although you have to change DNS records for that.

If you want to link your own URL to your AppEngine application, you can not go around Google Apps. That's how I use it at the moment, but it won't be long before I will be reading email sent to name@mycompany.nl via Gmail.

There's a lot more that Google offers, but at the moment I don't need it.

Maybe later.

Java RegEx

Here's some code to get started with Java regular expression (RegEx) quickly...

// Import usefull stuff (needed for option 2)
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class Indexer {
 
 public static void main(String[] args) {
  
  // This is the pattern we are going to use: [A-Z]*\\s?(\\d+)
  // 
  // Explained:
  //  First note: \\ is used to generate one '\' (escaping) 
  //   [A-Z] any capital letter
  //   * (0 or more times)
  //   \s white space (ie tab, space)
  //   ? (0 or 1 time)
  //   \d numerical digit
  //   + one or more times
  //   Note: (/d+) means: capture this part separately

  // Option 1: Going right in
  if (   "ABC123".matches( "[A-Z]*\\s?(\\d+)" ) ) 
   System.out.println( "'ABC123' matches!" ); 
  if (   "ABC 123".matches( "[A-Z]*\\s?(\\d+)" ) ) 
   System.out.println( "'ABC 123' matches as well!" );
  if ( ! "ABC  123".matches( "[A-Z]*\\s?(\\d+)" ) ) 
   System.out.println( "'ABC  123' doesn't!" );
  if ( ! "ABC 123X".matches( "[A-Z]*\\s?(\\d+)" ) ) 
   System.out.println( "'ABC 123X' doesn't!" );

  // Option 2: faster and more versatile

  // Pre-compile the regular expression pattern
  Pattern myPattern = Pattern.compile( "[A-Z]*\\s?(\\d+)" );
  
  // Match it
  Matcher myMatcher = myPattern.matcher( "ABC123" );
  if ( myMatcher.find() ) System.out.println( "Match!" );

  // Get the parts out that you want, note: it's a String!
  String number = myMatcher.group( 1 );
  
  // Use it as a string
  System.out.println( "Captured: " + number );
  
  // Or parse it to integer
  int i = Integer.parseInt( myMatcher.group(1) );
  System.out.println("Parsed to int and added one: " + ( i + 1 ));
  
 }
 
}

JavaScript timing

So you quickly want to know how long a piece JavaScript takes to execute? And you want to know it now? Here's a simple way to do it. You will get a popup with the amount of milliseconds your piece of code took.

var start = new Date().getTime();
// Your blazingly fast JaveScript code goes here
alert(new Date().getTime() - start);

Remember that everything else your computer is doing (in and outside of the browser) will influence this. Keep that in mind and don't focus on every millisecond change between runs.