You are currently browsing the archives for the Tutorial category


Compiling nginx 1.4.0 With SPDY on CentOS 6

Just a few days ago, the latest version of nginx at 1.4.0 was released to the public. The version bump adds a lot of new capabilities for your web stack. The most interesting for me was support for SPDY 2 protocol.

Excerpts from Chromium SPDY’s page reads below:

As part of the “Let’s make the web faster” initiative, we are experimenting with alternative protocols to help reduce the latency of web pages. One of these experiments is SPDY (pronounced “SPeeDY”), an application-layer protocol for transporting content over the web, designed specifically for minimal latency.  In addition to a specification of the protocol, we have developed a SPDY-enabled Google Chrome browser and open-source web server. In lab tests, we have compared the performance of these applications over HTTP and SPDY, and have observed up to 64% reductions in page load times in SPDY. We hope to engage the open source community to contribute ideas, feedback, code, and test results, to make SPDY the next-generation application protocol for a faster web.

In order for SPDY to work, one will need an SSL certificate and OpenSSL 1.0.1c at least to compile and run a website successfully with nginx. SPDY needs NPN enabled with OpenSSL and CentOS only provides 1.0.0. According to a blog post here, we can just add a repo to get OpenSSL to work nicely.

Here are the steps needed to compile nginx with SPDY support:
$ rpm -ivh --nosignature http://rpm.axivo.com/redhat/axivo-release-6-1.noarch.rpm
$ yum --enablerepo=axivo update openssl
$ cd /opt/src
$ wget http://nginx.org/download/nginx-1.4.0.tar.gz
$ tar xfz nginx-1.4.0.tar.gz
$ cd nginx-1.4.0
$ ./configure --with-pcre --with-http_ssl_module --with-http_spdy_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_stub_status_module --prefix=/usr/local/nginx
$ make -j4
$ make install

Now that the steps above are through, it’s time enable SPDY with your websites assuming that you already have a working nginx configuration with SSL enabled. It’s actually really simple, the full explanation is located at nginx’s SPDY documentation.

server {
listen 443 ssl spdy;
ssl_certificate server.crt;
ssl_certificate_key server.key;
...
}

Now test your website at spdycheck.org to see if your SPDY implementation is successful. Cheers!

[Techtorial] Responsive With Zurb Foundation & HTML5

Responsive techniques with websites have been around for a while now. Not many websites here in Indonesia are responsive. Being responsive for me is out of necessity, mobile web traffic is increasing very rapidly and being responsive is the next logical step despite already having a mobile web. It will look good with search engines too :)

Zurb Foundation is one of a handful collection of frontend Responsive frameworks out there. However, to get your website to be really resilient, you should start from the server side. There’s a slide show here by Yiibu covering all the aspects why being responsive starts from the server side part. Keep in mind that frontend Responsive frameworks does not actually help with optimizing the images your clients will download nor do it will strip HTML fragments that shouldn’t be included, it simply hides them with CSS, but with some clever JavaScript, you could take them off from DOM but then again that’s more work for handsets with minimum CPU power.

To get into perspective, by making your website Responsive, you start Mobile First. Why? Because mobile version is considered as the lowest fidelity in terms of the Information Architecture and also from a visual point of view. By doing this, you can actually devise a scale of priority and get to know your products/features deeper. If you’re still not sure, you can always A/B test it.

For the purpose of this Techtorial, we’re going to build a simple news reader application for my friend‘s Tech Blog DailySocial.net. We’re going to extract contents using only frontend technologies, JavaScript to be exact. There will be no caching (persistency) at all, you are welcomed to fork and do your own implementation, you could try to persist by using Local Storage or even cookies (beware of the 4 KB limit for this).

Before going through, these are the things you will need for later:

  1. Zurb Foundation 3.0
  2. Code editor, Smultron will suffice for Mac users
  3. Some HTML5 Knowledge
  4. Github repository for the source code in this tutorial is available here

We’re gonna start by building the layout. Every layout elements in Foundation is made up of grids. Every row, there are 12 columns with a default gutter size of 30 pixels. The interesting part of Foundation 3.0 is that now it provides mobile columns. Mobile columns spans 4 columns and it will be really useful in cases like when on the Desktop the first column is 4 columns wide, the second is 8 columns while on the mobile version you’d want it to be equally divided columns. You can create your own custom Foundation by the way.

Starting up we want a layout with a website name at the top, articles at the belly, sidebar on the right and some fancy notes for the footer.

You can see how easy it is to do the columns. Of course, it’s just a single row occupying the whole width. Let’s make it more interesting by dividing into 2 belly columns consisting of the articles and a sidebar.

When you resize your browser, the layout will automagically be adjusted with the screen resolution. Looking the code above, I encourage you to hack the left column by adding a mobile-three class and a mobile-one class on the right. The behaviour of the layout changes by persisting the sidebar to always be on the right. Doesn’t look good right? Revert it.

Now the footer is done and you’ve got a working layout that is responsive and ready for some JavaScript manipulations.

The data source comes from DailySocial’s JSONP endpoint. If you don’t know what JSONP is, there’s a good reading about it here. Because of the nature of JSONP, all we gotta do is just create a callback function in JavaScript and include a script from DailySocial’s JSONP endpoint after your callback function is declared.

We’re done! So quick and painless to finish this Techtorial right? There are a lot of improvements in store for this DailySocial reader. On the next tutorial, we’re gonna cache our JSON into the browser’s Local Storage. So for now, have fun with the codes!

Rooting and Installing Custom ROM on S-ON HTC Sensation

At the moment, I’m doing some weekend project coding in Android and since a Galaxy Tab does not qualify as a phone, I switched gadget. An iPhone for an HTC Sensation with my uncle. One thing I quickly miss is iPhone’s Retina Display, however the performance of the Sensation is sensational compared to my iPhone. Was happy until the battery keeps on dying out too soon. I figured HTC Sense played a big part, so I went hunting to get a Sense-less ROM.

The HTC Sensation I have on me is already running Ice Cream Sandwich, was updated OTA. This is good news for me because from some readings here, virgin ROMs are easy to be rooted. For the sake of clarity, here are some links that you’d find most useful in doing the we’re about to do.

  • Stock ROMs to revert back to factory defaults, here.
  • HTC Sensation/XE/4G AIO Tool (Windows based), here.
  • Virtuous Inquisition ROM, here.
  • Fastboot, just Google this.

Because we’re rooting and installing Custom ROMs with S-ON, there is a limitation on what is possible and what is not. First of all, you can only use ROMs that are based on HTC firmwares meaning that you CANNOT use ROMs that are coming from AOSP, CyanogenMod or any of those sort. However, there are some tricks you can try but I’m not responsible for any wrongdoings.

Before anything else, you should root and install a custom recovery. If you’re lucky enough to have your hboot version less then 1.18 then you should go ahead and visit Revolutionary.io, follow the steps there and you even get S-OFF and therefore the limitation in the previous paragraph does not apply to you. However if you’re not that lucky, use the AIO tool from the links above and run it to root your device.

You could actually do S-OFF with the AIO tool BUT you’d have to do it my meddling with some hardware. Since this is a borrowed unit, I’m not doing it. Now that you have root and custom recovery installed, you can go ahead and install a ROM.

  1. Download an HTC based ROM like the one I put above at the links section.
  2. Copy the ROM to the root directory of your device’s SD Card.
  3. Turn off the device.
  4. Unplug the battery and replug after a few seconds.
  5. Hold down Volume Down + Power buttons until it shows a white screen.
  6. Press Volume Down to select RECOVERY.
  7. Once you’re in the Custom Recovery, choose Install from a ZIP
  8. Select the ZIP file you downloaded earlier.
  9. Confirm the ROM installation
  10. Next you must Wipe Data and Wipe Cache + Dalvik

Now for the next part, since we’re still S-ON, the ROM script to overwrite boot.img will not work, it’s still protected by the device. What you can do now is to repeat steps 3 to 5 above. In your laptop/computer, unzip the ROM’s zip file and copy the file boot.img from kernel/pyramid/boot.img to somewhere you’re comfortable.

  1. On the device, select FASTBOOT by pressing the Power Button.
  2. If your device is properly connected with your laptop, the device will say FASTBOOT USB.
  3. Open up a terminal and do fastboot flash boot /path/to/boot.img
  4. Restart the device by doing fastboot reboot

Now you have an S-ON device with a custom ROM :)

Easy DNS Names for Virtual Hosts in Mac OS X

I got tired of manually inserting lines into my /etc/hosts file and decided to look for other solutions. The DD-WRT router has a DNSMAsq feature in which I list domains that are supposed to be internal domains to be resolved to its local IP. I still have to insert lines but now it’s more organized and better than seeing mumbo jumbo in your hosts file.

Here are my steps:
Error when loading gists from http://gist.github.com/.


photo of Batista Batista R Harahap [email protected]
Jl. Bango II/29C, Pondok Labu
Cilandak , DKI Jakarta , 12450 Indonesia
62817847023

This hCard created with the hCard creator.