VisezTrance

Generating a unique identifier

2010-08-03T22:31:42Z

Generating a unique string value is a fairly common idiom. I always thought the fastest/easiest way to do so was by merging a timestamp with a random value. Not really unique, but fairly close nevertheless.
Yet, there's better way by using UUID which provides a more reliable unique identifier. Most languages either have it build in or there's a library available.

For example, in php I could use the build in uniqid() function:

print uniqid();
> "4c5896b421e54"

or in ruby with the help of the uuid gem:

UUID.generate
> "73f93750-817b-012d-5ea3-00242165bf55"

Visual bookmarks with mywebsit.es

2010-06-26T13:39:35Z

I'm happy to announce mywebsit.es, a visual bookmarks directory. It's similar to opera's quick dial or chrome's thumbnail start page but has a larger degree of flexibility. By using open id it shouldn't take more than 10 seconds to create an account.

From a technical standpoint it combines a qt webkit ruby class that's being called through xvfb by a sinatra app which acts as an api. This api is being called by a rails application that manages the actual bookmarks and saved screenshots.

I would appreciate it if you would try it out.

Timing out

2010-04-30T20:40:44Z

I was running a rake task that launched a third party proprietary binary that handled some files. The process was usually fast, lasting about two or three seconds per file although sometimes it would just lock up and become unresponsive while still pegging the cpu at 100%.

While I love a good challenge, there are times when a battle proven solution is preferable.

Fortunetly for me, there was a *nix command named timeout, that did exactly what I was looking for.

The following would kill a running command with signal 9 (the equivalent of powering off the computer) if it runs longer than 30 seconds:

timeout --signal=9 30s /some/command

Suffice to say, that I was so pleased of this solution that I'm going to use it everytime I can.

A slight warning - the timeout command is provided by the coreutils package. While it was avaiable in Fedora, it wasn't on the staging machine I deployed it to, running CentOS. I did managed to get it working (without any problems) using the binary from my desktop machine.

Rails flash upload using active record session store

2009-12-13T13:56:06Z

In one of the projects I had been working on, I needed to upload a file with flash. Unfortunately flash doesn't pass any session information to the upload request, so it never got passed the authentication filter set up in the application controller.
The obvious solution was to pass the necessary session information along with the requested url as a get param. Rails 2.x+ uses a cookie based session store, which I wasn't too found of, as it meant I had to pass the entire session.

So I switched to an active record store to pass only the session id (request.session_options[:id]):

rake db:sessions:create

Then added the following to the environment.rb file:

config.action_controller.session_store = :active_record_store

And in the controller where the upload took place:

prepend_before_filter :create_session_from_params, :only => [:my_flash_upload_method]

def my_flash_upload_method
# save file for the logged in user
end

private

def create_session_from_params
session_data = ActiveRecord::SessionStore::Session.find_by_session_id(params[:sid]).data
session_data.each{ |k,v| session[k] = v }
end

And that's it. I can now read the session information as if it's a normal request.

Mysql connection encoding in php

2009-10-18T17:04:06Z

Do you have a php website powered by a mysql database that doesn't render your utf8 characters properly?

Changed the table encoding from the default latin1 to utf8 and it's still not working?

Well, you have to change the mysql connection encoding as well:

mysql_query("SET NAMES 'utf8'");

Run this after connecting to the database.

A defensive approach on integrating api based widgets

2009-09-20T23:29:23Z

It's pretty common these days to integrate widgets from several sources and aggregate them to your website.
In an ideal world you would simply parse your api response(an xml for example) and display it on your page.

While this doesn't include javascript widgets, these are some thoughts I gathered which may prove useful:

Always cache
Cache the api response or the page fragment being rendered, otherwise your website will load slowly. It's not only about speed, but most api providers request this. So while you may get away without caching for a while, you may find your self banned after a traffic spike.

Make sure you write the code efficient
While I consider this a newbies tip, I wouldn't had mentioned it if I had not encounterd it.

Never do this:

foreach(getFeedContent() as $entry) {
// display code
}

At each iteration the server would try to fetch and parse the feed.
So at a basic level you should have something in the lines of:

$entries = getFeedContent();
foreach($entries as $entry) {
// display code
}

Don't assume that you'll get a valid response
Sometimes your provider may send you an invalid/blank response. If this is happening often make sure you check its integrity before caching it. This way you won't be stuck with an empty section in your page for the period the page has been cached. Additionally make sure this check is done inside your actual code as well so that you don't display the affected section or at least have it degrade to a nice custom error message.

Protect your layout
If you have images inside your response and intend to use them, scale them to a predefined maximum size and store them on your server. If they always have fixed proportions make sure that they actually stay fixed by adding the width and height attributes. This will also keep the page elements size constant, avoiding the erratic text rearrangement while the page loads.

If your widgets are user driven - be it latest comments or what your cat twitted it's always a good idea to hide long words.
So when someone writes Hellooooooo (and multiply that "o" ten fold), simply use: "overflow: hidden" on your text container. To add a touch of finesse because everyone loves IE, use "overflow: ellipsis" in it's conditional stylesheet.

Escape outputted text
From a security standpoint it's good to escape everything you output on the page (where possible).
From a w3c compliance standpoint your code may not always validate. For example: http://website.org/?param=x¶m2=y; & should be escaped into & Or you may have something more serious such as an unclosed tag, yet it's very unlikely.

Hopefully this advice will leave your widgets to a boring yet stable experience.

Simple gnome process completion monitoring

2009-08-18T00:53:07Z

Sometimes I run a command on my machine which may take quite some time until completion. I used to check out its status in the terminal I launched it from periodically. Yet there's an easier way by queueing a message via notify-send or something more obtrusive with zenity.

sleep 5 && notify-send "Finished task"

sleep 15 && zenity --info --text="Finished long task"

You may take it literally as well, but sleep is obviously my time consuming task.

Creating a static website with XSLT

2009-07-25T17:51:07Z

A static website usually has a common layout and unique content across pages. Changing the layout means changing every page - and it does happen, perhaps you have to add a javascript tracking code or correct a minor typo - a daunting task for something so trivial. It's really no wonder that most developers use SSI or php includes to ease this task.
I'm going to show you an alternate way of separating your content from the actual layout without using any server side code, by using XSLT.
Before venturing any further, here is what you should know:

Pros:
- No server side coding. Just copy the code on any server and it will work. Your server will still have to display the proper index file though (index.xml).
- It's fast. Especially if you're running a server that handles static files very fast such as lighttpd or nginx

Cons:
- SEO impaired. It's xml so it's easier to parse, yet it will probably rank lower because the XSL code may not be properly parsed by all search engines
- limited to browsers that support XSLT. Unless you are concerned about Links or Konqueror this is a non issue. Major browsers that support it include: Firefox, IE6+, Safari, Chrome, Opera

If you're still with me let's begin.

Create an xml file named index.xml. Paste the following code:

Welcome.

This is the default home page.

The content tag represents the unique code that it will change from page to page while the actual layout will be handled by the xsl file defined on the second row.

Create a file named layout.xsl and paste the following code:

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" />











My Website





              Home




              About




              Contact














Lorem ipsum dolor sit. © 2009

Look over the xsl output statement. It's set to html in order for the browsers to render the xml file as an html; additionaly we set a doctype. This is particulary important for Internet Explorer. Omitting the doctype will trigger quirks mode.
Inside the content div we get the actual page content. You probably noticed the use of the "copy-of" element. The difference between it and "value-of" is that it copies the entire node, preserving the html tags inside, unlike the latter.

Let's style the page.

* {
margin: 0;
padding: 0;
}

a {
color: #00f;
}

ul li {
list-style-type: none;
}

body {
background-color: #fff;
font-family: arial, sans-serif;
line-height: 18px;
font-size: 12px;
color: #333;
}

#container {
width: 940px;
margin: 20px auto;
padding: 15px 10px;
border: 1px solid #ccc;
background-color: #eee;
}

#container #header h1 {
    font-size: 50px;
    margin: 10px 0 30px 0;
}
#container #header ul.navigation li {
    display: inline;
}
    #container #header ul.navigation li a {
      display: block;
      float: left;
      padding: 10px;
      border: 1px solid #000;
      margin-right: 10px;
      text-decoration: none;
      color: #000;
    }
    #container #header ul.navigation li a:hover,
    #container #header ul.navigation li a.selected {
      background-color: #fff;
    }

#container #content {
    clear: left;
    padding: 30px 0;
}

#container #footer {
    font-style: oblique;
}

As it turns out static layouts are not that static. The page title should change across pages, and the navigation menu should highlight the current page item.

Inside our index.xml file, we'll add these properties. I'm assigning them as attributes, but these could had very well been tags.

Next, back in our xsl file, inside the head tags add the title:

<xsl:value-of select="page/@title"/>

For the menu we'll have to add the selected class for current navigation item:

        selected

      Home




        selected

      About




        selected

      Contact

Create the about.xml and contact.xml files by using the index.xml file.

This wraps it up.

- The final result
- Download files

While this approach does have it's fair share of downsides I think it's an interesting way of code separation that may be worth taking a closer look.

Alternate favicon with a non IE comment tag

2009-07-14T23:23:27Z

Quite often I look at the html source of some of the websites I visit. Last night I found this interesting snippet while browsing Deviantart:

A brilliant use of the non IE comment tag, forcing browsers that support it to use an alternate higher quality png image while degrading gracefully to a generic ico file.

Returning an nginx status code

2009-04-28T23:11:54Z

I really grew tired of having an old rss feed hit 404s on my website. From what I've read the best way to retire it is to respond with a 410 message, and the program that makes all those requests will stop, in theory any way.
I've added the following lines in my nginx conf:

location ~ / {
if ($uri ~ "/my/old/url") {
return 410;
}
..
}

To make it prettier, I also added:

error_page 410 /410.html

The syntax is a bit odd though, because the 410 ("It's gone") is not an http error code.
You can add additional codes such as 502 (bad gateway) or 503 (service not available) and style them to your hearts content.

Divide et impera - using IDs to define code sections

2009-04-06T21:13:37Z

This happened to everyone at least once when working on a large application - a minor change to a stylesheet can break the layout on one or more pages. What's worse is that this usually goes unnoticed until the website hits production.
I think this is happening mostly because the bug affects only a seldom accessed page or a specific browser, the page is different from what the frontend developer envisioned (zero length text, variable picture width, etc) or a mixture of these issues.
You can easily avoid this situation by using inline styles as they affect just the current page, but then again it really defeats the advantage of an external stylesheet. Some CSS frameworks can ease the use of styling markup, but what would be really nice is not to touch the html at all if possible.
Since CSS doesn't have namespaces you can use an id as a point of reference.

For example in order to target the fieldsets and legend tags only on the contact page, you have something like this:

#contact-page-wrapper fieldset {
..
}

#contact-page-wrapper fieldset legend {
..
}

Every class name is similar to a global variable. When you have thousands and thousands of lines of css, name clashes occur but cascaded selectors with a parent id can easily prevent this.
Placing an id on the container of the page (ex. the body tag) is a reliable method to target a specific page. For extra points, move that code into its own stylesheet and have a function dynamically load it.

While I'm sure you dear reader are thinking "I'm master over my own code", it's always nice to allow others add a line or two, while you're enjoying your much earned vacation without worrying about them breaking anything :-)

Fixing the png color mismatch on mac os x

2009-02-06T09:11:26Z

When it comes down to work, most of the times I get my graphics from a talented designer that worked on a mac. If the files happen to be in the PNG image format things get slightly confusing. Mac OS X will render the images using the color profile they got stored, actually png gamma correction would be more exact. This is not immediately apparent because at a glance the files may look identical but using the pngs over a CSS background color often reveals an unpleasant sight on the mac, especially on Safari.
To prevent such a color mismatch either use a different image format or strip the png gamma correction. In the case of the latter, pngcrush does a pretty good job.
I was pleasantly surprised that I could install it with ease on Fedora ("yum install -y pngcrush"). To use it run:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB \

Removing that unnecessary meta data will also save you a few KBs, which is quite useful regardless if you have any problems with pngs or not.

Nginx rewrite to a different domain

2009-01-25T22:14:15Z

A few days ago I've received an email from someone regarding my earlier post on Nginx subdomain rewrites with some questions on rewriting to a different domain. For example each request on subdomain.domain1.com to be forwarded as a request to subdomain.domain2.com.
The rewrite module wasn't meant for such requests, just having a string starting with "http://" will trigger a redirection. The problem can be solved however, by proxying the request to the appropriate domain:

location / {
if ($host ~* "^(.+)\.domain1\.com$") {
proxy_pass http://$1.domain2.com;
}
proxy_redirect off;
# Some other code..
}

Avoiding Linux wireless problems

2009-01-06T22:31:52Z

If you happen to shop for a notebook or just a plain wireless card to use Linux with, you should really take in mind that connecting to an access point doesn't really mean that your device is working properly.

You may have been blessed with at least one of the following issues:

Crippling slow transfer rate. Forget about copying a 700MB file, or stream a movie to your PS3. It will be painful.

Latency spikes. It's likely to affect you only if you're playing a fast paced multiplayer game. The problem is that once in a while packages arrive too slow, or get lost on their way, even with full signal strength. Usually setting a higher fragmentation rate will alleviate this problem, yet this is not the case.

Failure to use encryption. I think this is what everyone gets sore about - can't use WEP or/and WPA encryption.

Internet sharing. People can't connect directly to your wireless computer. Take in mind that your hardware may simply not have this feature at all.

Having this said, I strongly believe that the best deal is to buy a notebook with quality wireless Linux drivers. Over optimistic hardware reviews are simply misleading and should really be read with a grain of salt - I'm actually going to assume that you're googleing the information.

Dynamic subdomains with Nginx

2008-12-13T15:32:52Z

I had to implement dynamic subdomains for a large Ruby On Rails application we had been developing. While the most straightforward way of doing this is to code the functionality within your application, I decided on trying a different approach by doing everything server side.
For example, each time I access http://daniel.myapp.com, this would send a request to the rails instance that may look like http://myapp.com/profiles/daniel. On the other hand other static resources such as stylesheets and images, must still point to their original locations.
On Nginx my code resembled this:

location / {
set $subdomain "";
set $subdomain_root "";
set $doit "";
if ($host ~* "^(.+)\.myapp\.com$") {
    set $subdomain $1;
    set $subdomain_root "/profiles/$subdomain";
    set $doit TR;
}
if (!-f $request_filename) {
    set $doit "${doit}UE";
}
if ($doit = TRUE) {
    rewrite ^(.*)$ $subdomain_root$1;
    break;
}
# root ..
# proxy_set_header ..
# etc..
}

The $doit thing is just a hack meant to allow multiple if conditions on Nginx.