Of Typography and web fonts

While coming up with one web page, I thought of using some good fonts to grab attention. So I started weighing my options.

1) You could either choose to host your own system fonts onto your web server. And use this to get it onto your web page

@font-face {

      font-family: "MyAwesomeFont";

      src: url("http://mywebsite.com/MyAwesomeFont.ttf");

}

body {

     font-family: " MyAwesomeFont ", serif

}

But this sounds very old and not trendy enough. We are in the age of clouds and CDN’s. Hosting static content on your server is passé.

2)      The next option is to make use of an online font library. Two big names here, “Typekit” by Adobe and “Google Web Fonts” by elgooG. Typekit being a paid service, I started diving into GWF.

Head over to http://www.google.com/fonts. Choose a couple of fonts you like, review your collection and start using them right away.

There are 3 ways to implement the chosen fonts onto your page.

1)      The standard approach by using <link href=””>

2)      Using @import url()

3)      Using Google WebFont Loader

You can find the actual code snippets for the above 3 methods on google.com/fonts.

After that you can have this(below) to get it working,

body {

     font-family: "MyAwesomeFont1", “MyAwesomeFont2”, Arail, serif

}

Always have a couple of fallback fonts on your font-family declaration. The order in which the fonts are declared here decides which font to use when the preceding font is not found. In this case, it will fall back to a system default serif font if none of the other 3 fonts are found.

The terms serif and sans-serif are not actual fonts as such, but refer to generic font families. This image should help you in case you’ve never heard of serif or sans-serif.

The great Steve Jobs learned typography. You can see that reflecting in the designs that apple has come up with. The i(Mac/ Pod/ Phone) are all built with quality in mind. The same reflects in their UI. Each app that gets published on iTunes undergoes a lot of quality control checks. For more info on these https://developer.apple.com/appstore/guidelines.html

Ok, so I was happy after all these awesome fonts on my page. But then connectivity started breaking down. The fonts were not getting loaded at just the right moment. The result, the browser shows the text initially in a default font and once the font is actually available (downloaded and ready) it swaps the font. What I just witnessed was a FOUT(Flash of Unstyled Text).

Stop this madness "Planned Obsolescence"

This past week Apple unveiled their flagship mobile phone, the iPhone 5. 

Specification wise nothing breathtaking.
I guess this release was just to prove that they too can follow a rapid release cycle.(Samsung comes up with a bunch of models every month)

But seriously, the rate at which a mobile phone goes obsolete is simply too much to handle.

Every company is now pushing for "Planned obsolescence". Leaving us consumers the jokers.

I still can't understand why "Siri" cannot run on an iPhone 3G. Let alone a 3G, even iPhone 4 users are left out without an obeying girlfriend. Basically it is a web service with voice handling capabilities. Why can it not run with older apple hardware? 

Not just Apple, there are many more. How long will these global giants keep fooling us!!

Do It Yourself – Making an URL Shortener

            URL Shorteners are nice little applications to have these days. Most webpages with content worth sharing have lengthy URLs. Twitter & Google have their own url shortening service. Tweets with URL’s on twitter are automatically shortened using their own service(t.co).

It’s no big deal to build one. Assuming you have a little bit of coding background, you should be getting your service running in no time. Else I recommend reading some basics on HTML, Server side processing, SQL queries. I will try to keep it as simple as possible. There’s always space for “YOUR” creative mind to step into action. I’ll leave that up to you.

Step1: Create a basic home page for your service. Something like Google URL Shortener . Let’s have a text box and a button. So the idea is, the user pastes his long url into the text box and hits the “Shorten URL” button.

Step2: At your server (any java based), capture the lengthy URL. For every request you receive you need to “GENERATE” an unique 6-8 alphanumeric characters. For the sake of simplicity let’s just start with 000001. For subsequent requests simply increment the previously generated number by 1(000002 and so on). Please be advised this is just to make this very simple. In reality you would be interested in using Base 36 encoding to generate your sequence. Head over to wikipedia's article on base 36 for some better idea at this generation strategy. This would make sure we make use of numbers 0-9 and characters a-z.

Step3: Save the mapping between the lengthy URL and shortened URL into a table. A typical DB entry will be something like

Id	Original_URL	Short_Code
1	http://en.wikipedia.org/wiki/Lamborghini_Aventador	000001

Step 4: You can now show the user the short code generated for the URL. It will be of the form

http://<yourdomain>/000001.

The idea is to have a very catchy & small domain name. That wraps up the generation.

Now when the user tries to access this short URL, another kind of request will need to be handled by your server. A reversal of the “generation strategy” mentioned above.

Step 1: From the DB table fetch the original URL.

Step 2: It wouldn’t make sense to display the original looooooong URL back on screen. Instead the user should be redirected to the Original_URL’s page.

“sendRedirect” method of “HttpServletResponse” interface is something to look at. Once a redirect request is served let’s just make sure we don’t overwhelm our server by having to serve the same redirection again and again. To do this make use of HTTP status codes 301(moved permanently) & 302(moved temporarily). The advantage is that these status codes are cached by browsers, so subsequent requests will be resolved locally. For further reading look into HTTP redirection codes.

If the above “ideal” approach seems to be too confusing at this point read this. Instead of server side redirection, simply send back the lengthy response to the user in the form of JSON or XML. Have a JavaScript function do this,

location.href= <original URL received from server>;

If your service seems to get very popular, you will at one point of time be stuck up with an awfully huge DB table. This will hamper your query's lookup time. You could also think about retention strategies for the URL's. Very old URL's could simple be disposed off. 

So there you have it, your very own URL shortener. 

Feel free to share your feedback. If you like my post I would love to hear from you.

Test

Hello World. :)