headphono.us » Webdevelopment

HTML5 Primer and Comprehensive List of Features

Pras Sarkar — Sat, 17 Apr 2010 19:49:04 +0000

It’s hard to escape the recent chatter about HTML5 all over the development blogs. But it’s also hard to keep up with all the changes in HTML5. That’s where @edr’s amazingly concise and comprehensive list of HTML5 features comes in handy. If you’ve ever asked the question “What is HTML5?” or ever wanted to gain an overall understanding of HTML5 and what the changes mean for developers, this slide deck is essential for you.

Here’s a quick summary for those who don’t have the 10 mins to go through the slides:

HTML5 ~= HTML + CSS + Javascript APIs

HTML

CSS

JS APIs

Introduction to Message Queues and RabbitMQ

Pras Sarkar — Mon, 06 Jul 2009 20:52:56 +0000

Incase you’re not familiar with the advantages of message queues in web applications, they allow you to (among other things) offload tasks and processes that may be initiated by users interacting with your application but the results of which need not return back to the user synchronously. E.g. a user submits an e-commerce order, the application captures the order and returns a confirmation to the user. As an offline (to the user) process, the order is processed, fulfilled from existing inventory and marked to be shipped out. Each of these steps would consume a message (from a queue) and after their task is complete, if necessary, add a message to the queue for the next process to consume. The use cases for message queues aren’t limited to user initiated events, and have general applications in most systems.

Traditionally, message queues have been implemented in enterprise systems as large-scale “message queue middle tier” deployments. Most of these are provided by the big boys (read big investment) such as IBM, Tibco, etc. and usually require a dedicated team of engineers to integrate (though this has changed lately). However, there weren’t really any independent or open source solutions ready for production use until the emergence of RabbitMQ – an Open Source Enterprise Messaging Broker.

RabbitMQ is built on the foundations of Erlang and implements AMQP – an emerging standard of high performance messaging. It is based on a proven platform, is interoperable and offers low latency and good throughput. I’ve been hearing good things lately about it, specifically about the ease-of-setup (packaged EC2 server configs), performance and scalability, numerous protocol bindings and integration frameworks, etc.

This Google Tech Talk video (embedded below) explains the goals of RabbitMQ, their internal architecture (and decisions behind their design) and their work so far:

Here are the slides:

What seems most interesting is that RabbitMQ seems to be the first real step towards open sourcing the messaging middleware, which traditionally has suffered from vendor lock-in. Since it’s a $1 billion industry, I don’t quite expect the vendors to take this lying down. So either they will compete by lowering client costs, provide better support, or offer more managed integrations, or open source products will win the critical mass game by getting most small business/startups to adopt rapidly (similar to MySQL). In either case, it should be interesting to watch what RabbitMQ has started.

A natural extension message queues is where many processes consume a message from the queue (i.e. Publish/Subscribe pattern). PubSub is great for broadcasting messages to a variety of consuming processes. E.g. In the e-commerce order placement example above, once the credit card processing is complete, the message could be broadcasted to a variety of processes down the pipeline (order fulfillment, inventory update, shipping tracking, etc.). Fortunately, LShift has implemented a PubSub layer on top of RabbitMQ.

With the growing use of cloud computing services like Amazon Web Services, web developers are going to have start thinking more enterprisy (if that’s a word?). If you’re a web developer, what are your thoughts? If you’re a web developer who is already thinking in this direction (good for you!), how has your design/architecture process changed from the early days of web development?

July 6, 2009 Update: Thanks to @andrewgleave who linked to this presentation which goes more in-depth about AMQP, PubSub and RabbitMQ.

Friend Finder on Mash

Pras Sarkar — Tue, 23 Oct 2007 03:16:12 +0000

You should’ve heard of Mash by now, if not, get out of your cubbyhole and check out the latest social network offering from Yahoo!

The social network aspect isn’t new, but what is new is the fluid free-for-all profile mashing. Mash lets you change your friends’ profiles – whether its content styling changes or adding modules. Luckily, for those who are paranoid about having their precious profiles tampered with, you can turn off the feature.

Caution: Shameless plug from this point on.

Way back in August (I think), a few of us – Vinay Kakade, Ashwinder Ahluwalia and myself – got together to throw together a quick hack called “Discovr” for hack day. This hack demonstrated some of the powerful abilities to analyze your friends network and bring forth some possible connections (suggestions). It highlighted possible profiles that seemed highly likely to be your friend (but weren’t on your friend list already). Make sense? Anyway, we ended winning the “Most Promising” award for that hack day and we took this approach forward to Mash.

“Discovr” was born in Mash as the “Friend Finder v2″ module and after a few technical issues, we were up and running. At the time of this writing, we’re slowly inching up to almost a 1000 users, and the feedback that we’ve received so far has been very positive. Since Mash is lacking (for now) the ability to directly search for your friends, Friend Finder becomes very useful in finding these hidden connections in your organically growing network of friends. We surface these deep hidden connections and suggest these friends to you. Taking it one step further, once you add the module to someone else’s profile (whether they are your friend or not), it shows your friend recommendations through that person’s network of friends (this is a really cool aspect which needs a post of its own).

Check out the “Friend Finder v2″ module on Mash and hit me up if you have any feedback.

Profiles on Mash: Pras Sarkar, Vinay Kakade, Ashwinder Ahluwalia, Ramana Yerneni

ZendCon 07 – Day 2 (Afternoon update)

Pras Sarkar — Wed, 10 Oct 2007 21:36:24 +0000

The Joel Spolsky keynote was one of the most engaging, interesting and downright hilarious presentations I’ve heard this year. He really knows how to talk to the crowd. A few suggestions from Joel on creating great software:

Make people happy
Think about emotions
Obsess over aesthetics

Joel is right – developers don’t necessarily want to think about beautifying their applications. Developers largely work on the middle-tier and supporting backends, and like everyone, they have an underlying desire for their work to be observed and appreciated. If the ’skin’ of the application garners all the attention, developers might feel slighted, and their kickass software go unappreciated.

But it’s important to think about beautifying the application as an enhancement to the great product. Imagine it as if you’re working hard to restore a great relic automobile. You work tirelessly to juice up the engine and get the transmission just right. But the paint job that you add to it is equally important and you shouldn’t hold back making it shine – REALLY shine. After all, hardly anyone’s going to listen to the roaring engine if they don’t even notice your shiny car rolling in.

’nuff said. Now to go get some caffeine.

ZendCon 07 – Day 2

Pras Sarkar — Wed, 10 Oct 2007 18:14:45 +0000

Second day here at the ZendCon 07, and no session better than Eli White’s PHP Features You Didn’t Know Existed to start off the day. PHP developers who’ve been coding for a number of years (some 10 years or more) were scoffing at the idea that Eli would present anything new or ‘undiscovered’. But there wasn’t a cough in the packed room as Eli presented rarely-used hidden gems in the PHP language. The applause at the end surely put any scoffism to rest.

I can’t list all the neat stuff that Eli covered, but something that caught my attention was the topic of closing connections early. I’ve been trying to find an elegant way to solve this problem for a personal project and this might just be the way to do it. Here’s some rough code (more specific code examples to come later):

ignore_user_abort(true); header("Connection: close"); header("Content-Length: ", mb_strlen($response)); echo $response; flush();

The ignore_user_abort(true) function basically lets your script continue execution even though the user might have hit the STOP button in his browser, or the connection between the user and your script got disconnected, etc. This neat code above lets you return a quick response (great for Ajax button clicks) so that you can update client side – keeping your site fast and responsive – while your script chugs along server side.

More updates coming up today, but don’t forget to come to the PHP Nightclub event (starts at 8pm) and check out the Yahoo! gang. Btw, the event is open to all, so there’s no excuse to miss it!

Blogging from ZendCon 07

Pras Sarkar — Wed, 10 Oct 2007 06:17:19 +0000

The first day of Zend Con was pretty interesting. I wasn’t able to attend all the sessions, but the notable ones were Terry Chay’s The Internet is an Ogre: Finding Art in the Software Architecture (hilarious guy), Ben Ramsey’s Give Your Site A Boost With memcache, and Eli White’s High Performance PHP & MySQL Scaling Techniques (standing room only).

These types of sessions make conferences interesting and a learning experience (and ultimately worth spending your time at). Even though a lot of material might be common knowledge (covered in books, papers, online articles), it’s always important to get a sense of validation when you see their presentations with live data and hear comments from the audience about possible problems and gotchas.

Of course, no conference is complete without the odd product placement presentations (I’m looking at you IBM and Adobe) but as long as they keep their presentations geared towards providing solutions rather than forcing you to buy into their solution, I’m all for it.

If you’re at ZendCon 07, make sure to drop by the Yahoo! booth in the reception area where I’ll be handing out purple tote bags and chatting about the interesting things we do at Yahoo! (and Yahoo! Research in particular).

Spyjax baby, we know where you’ve been

Pras Sarkar — Fri, 01 Jun 2007 22:22:48 +0000

Now this is clever. Using a simple concept of checking the color of links and on the assumption that visited links are a different color than unvisited ones, you can find out all the URLs in your client’s browser history. Now that’s not invasion of privacy…its just a clever hack

Read all about Spyjax. Thanks Pedro!

How to load your site faster: HTTP Compression

Pras Sarkar — Tue, 08 May 2007 04:49:56 +0000

In this series, we take a look at how to reduce load times across your site. The first part of the series tackles one of the most important techniques which usually proves to drastically reduce your load times. Usually it’s not enough to use HTTP Compression alone (best results when coupled with smart caching), but I’ve seen anywhere between 40%-80% speed increases.

So how is it done? Well, two different ways, depending on your Apache version and configuration options. To check what version you’re running (for the folks who use a hosted solution), try this on any unix shell:

$> curl -I http://headphono.us HTTP/1.1 200 OK Date: Wed, 02 May 2007 02:49:22 GMT Server: Apache/1.3.37 (Unix) mod_throttle/3.1.2 DAV/1.0.3 mod_fastcgi/2.4.2 mod_gzip/1.3.26.1a PHP/4.4.4 mod_ssl/2.8.22 OpenSSL/0.9.7e X-Pingback: http://headphono.us/xmlrpc.php X-Powered-By: PHP/5.2.1 Content-Type: text/html; charset="UTF-8"

As you can see, I’m using Apache 1.3.37 (yes, thats a very 1337 version). You can also see that my Apache has been compiled using mod_gzip — which is exactly what I need. Follow the directions below depending on the version you’re running.

If you’re using Apache 1.3, you’ll need mod_gzip. I won’t get into the process of recompiling/installing Apache with mod_gzip, but look around and you’ll find lots of places that explain it. From this point on, I’m assuming you have mod_gzip already.

You’ll want to edit either the .htaccess file (per directory on your server) or the httpd.conf file for a global Apache configuration. I usually like to edit my .htaccess files so that I can move my directories across servers and they maintain the compression settings.

The following explicitly states the following:

All text files (text/css, text/javascript, text/html, etc.) will be compressed.
All javascript application files (that aren’t text/javascript) will also be compressed.
All images (which are usually compressed already) need not be compressed.
All PDF documents need not be compressed.

mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_exclude mime ^image/.*$ mod_gzip_item_exclude mime ^application/pdf$

If you’re using Apache 2.x, you’ll need to use mod_deflate. Again, I won’t get into the complexities of recompiling Apache with mod_deflate (see here for that info).

To turn on mod_deflate:

SetOutputFilter DEFLATE

To explicitly exclude files from being gzipped, add the following for every type of file you want to exclude:

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

But if you want to explicitly include the files:

AddOutputFilterByType DEFLATE text/* AddOutputFilterByType DEFLATE application/ms* application/vnd* application/postscript

You can even turn on gzip compression for certain directories:

AddEncoding x-gzip .gz AddType application/x-javascript .gz AddOutputFilter DEFLATE js

So only javascript files in the subdirectory “js” would be compressed.

Now if you wanted to get real funky (and you should), you’ll want to be aware and compress according to the browser clients that can handle HTTP compression. You can tweak compression by limiting them to certain browsers:

# Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html


# Netscape 4.06-4.08 have some more problems

BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine

# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48 # the above regex won't work. You can use the following # workaround to get the desired effect: BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

This should be a pretty basic (if very brief) introduction to HTTP compression. I highly suggest the further reading below, and really fine tuning your Apache settings to get the best results. Using Firefox plugins like Firebug also help analyze and debug your settings to make sure your gzip compression is working and is being effective.

How to load your site faster: Introduction

Pras Sarkar — Mon, 30 Apr 2007 04:00:46 +0000

Given my recent obsession with optimizing website load times recently, I felt the need to share my research findings. There are more ways than flavors at a gellato store, but fear not, I’ll try to condense them into a consumable chunk in the next few series of posts.

Here’s a rough breakdown of what I intend to explore:

HTTP Compression
Application level caching (PHP)
Client side requests optimization
Non-vital scripts optimization
Client side caching (i.e. browser caching)

There’s a lot of neat tips and tricks out there, and I’ll try to post as much code and/or scripts that I can. I’ve used tactics from all the above topics in real world applications that I’ve been developing and the results have been very encouraging. On one particular site, using a combination of #1,#2 and #3, I went from an initial load time of 3.6 secs to 455ms (87% decrease).

Stay tuned for some good stuff.

OSX Terminal: Solve the “Connection reset by peer” problem

Pras Sarkar — Fri, 21 Jul 2006 03:30:30 +0000

I finally got tired of getting timed out of my server while using Terminal and/or iTerm. Luckily, the fix was easier and less complicated than I imagined. It was a system-wide ssh config fix. Try the following:

1. sudo emacs /etc/ssh_config 2. add a new line "ServerAliveInterval 60" 3. save and exit

That should do it. The next time you ssh (using either Terminal or iTerm), you’ll be sending ‘Keep Alive’ packets every 60 seconds if the client doesn’t receive anything from the server. Optionally, if you have sysadmin access to the server you’re connecting to, you can add

"ClientAliveInterval 60"

in the same location server side.