Category Archives: webdev

HTML5 Up and Running

HTML5 Up and RunningHTML5 Up and Running is Mark Pilgrim's book on HTML5. The entire text of the book is also available at DiveintoHTML5.org. Just like the other books written by Mark (Dive into Python, Greasemonkey Hacks), this book will serve as a very comprehensive introduction to the topic.

The book begins with history of HTML specification starting from conversations on www-talk mailing lists to formation of W3C and to WHAT Working Group. Then it moves on to Feature Detection, high level view of new features - canvas, video, Storage, Web Workers, Geolocation. The next chapter is a dive into details of the Document elements, new semantic elements. The next few chapters cover in detail each of the new features - Canvas, Video & Audio, Geolocation, Local Storage, Offline applications, Form semantics, Microdata. Each of these later chapters can be read stand-alone without depending on others.

There are some open source projects mentioned in the book - Modernizr for HTML5 feature detection, geo.js for smoothing out differences over gelolocation APIs. These pointers should be of great value to developers.

The book website is itself a great study in HTML5 with its very detailed attention to live examples, typography. Great work by Mark once again and kudos to O'Reilly for allowing full version (which is in fact more up-to-date than the printed book) online and also for selling the ebook in DRM free formats!

Disclaimer: I am writing this post as a part of Blogger Review program. I am not being paid to write this review. But I received the ebook free for doing this.

First impressions on Google Wave

I was really looking forward to get a chance to play with Google Wave. If you have not heard about this, Google is experimenting with a new means of communication and collaboration (to destroy any remains of your unused time!). Watch the video of the demo from Google IO conference to get a feel for the technology.

The catch line is - How would email be if it is designed today ?

Being Google, they are fairly open about the entire technology.Google Wave is a collection of several components which work in concert to bring us this amazing way to collaborate and communicate. There is the wave server (which hosts the waves. Google provides an implementation and others are free to implement it in their own control), federation protocol (which is open specifications protocol and allows the servers to talk to each other), the client (typically your web browser which you use to interact with the wave server, but there is a sample text client and emacs based client in development as well!), the gadgets (small pieces of code that are embedded in documents and provide rich look and feel and additional functionality to the wave) and the robots (robot participants in the wave which can do cool things like correct spelling as you type, syntax highlight code while it is being pasted in the wave, translate language etc.)

I have spent some time in developing a robot called Nokar (meaning assistant or servant in Marathi/Hindi) which can do several things when invited to a conversation - Insert images based on specified keywords, translate text between a set of 20 languages among some other geeky functions. The intention was to learn about the robot protocol. I also created some pages which use the embed API. This allows any web page to embed a wave conversation (or a subset of it). I am also going to experiment with the Gadgets in the next few weeks. I will try to document my process in next few posts.

opml to csv converter

This is a first step in being able to make all  my  planets    configurable from anywhere. The following ruby script parses the opml file specified on the command line and generates a comma separated file with XML feed URL and feed title. In case of nested outline elements, it just picks the elements which actually have xmlUrl attribute (this will flatten the opml hierarchy which is used by google reader - for implementing labels and bloglines - for implementing folders)

require 'csv'
require "rexml/document"
include REXML
if ARGV.length >=1
fname = ARGV[0]
else
fname = "opml.xml"
end

doc = Document.new File.new(fname)
CSV.open('csvfile.csv', 'w') do |writer|
doc.elements.each("//outline[@type='rss']") {|element|
writer < <  [element.attribute("xmlUrl").value, element.attribute("text").value]
}
end

django unicode integration: fix for venus djando template

I just upgraded django tree which recently merged in the unicode support. This immediately broke django templates for venus. Here is what you need to change in planet/shell/dj.py to account for new django changes:

43c43,46
< f.write(t.render(context)) --- > ss = t.render(context)
> if isinstance(ss,unicode):
> ss=ss.encode('utf-8')
> f.write(ss)

This is probably due to render returning unicode strings which need to be converted to byte-streams.

Update: I found out that my changes broke it for people using older version of django. I have updated the patch above to account for that.

Dear Lazyweb

I am looking for a flash media player which can play audio/video content in browser. I am currently using del.icio.us's playtagger for now, but it is limited to mp3 only (I had to change the code a little bit to prevent it from adding multiple inclusions - my changed code is here) and it does not allow rewind/forward.

I also looked at this post which suggests using google video player, which would be nice as it could then also play video files, but it consumes a lot of real estate on the pages. There is also this website mentioned which is nicer but that player is bigger than I want too... And it is probably not a fair use as it is undocumented use...

I also checked out the odeo player, which is nice but you need to host the files on odeo, which is a no-no.

Here are my requirements for this with a scorecard for Playtagger and Google:

  • Easy to use. No need to add tag soup for each file. (Del.icio.us + Google -)
  • Small size on the page (need to collapse the buttons until user clicks on play button) (Del.icio.us + Google -)
  • Ability to rewind/fast forward (Del.icio.us - Google +)
  • Play different media formats (mp3/wav/ogg/avi/mpeg video, possibly realmedia) (Del.icio.us - Google +)

Any suggestions ?

Thanks!

Fix maharashtratimes.com font problems on firefox

Maharshtratimes.com (or maharashtratimes.indiatimes.com) is a marathi news website using unicode fonts. But it does not display correctly on firefox browser. The problem is because of a single HTML div which uses justified font style. It displays correctly on IE (which is why it is not getting fixed) - this could be because of firefox's buggy implementation of "align: justify" or that IE simply ignores that style (likely).

Anyway, here is a javascript one liner that you can bookmark and once the page is loaded, click on it to fix your font problem.

Fix Ma. Ta. -- Drag this link to your bookmarks.

I tried to create a greasemonkey script to do this automatically, but it's not working for some reason...

Update: Apparently it *is* a mozilla/firefox bug open for 4+ years. See here and here.

Update2: Here is a greasemonkey script by Saravana Kumar to fix this issue. Caution: you might want to change the included domains carefully (it by default runs on all http and https sites!)

Update3: Here is my greasemonkey script specific for maharashtratimes. Enjoy!

Update4: (2009-02-16) The original site seems to have removed this style attribute now. So the above post is now only for posterity.

Check if a site is phishing site.

Here is the updated bookmarklet: Phishy? (tested on firefox 2.0 only!)

1. Drag this link to your bookmark. This checks if the site you are currently on is a phishing site.
2. Drag this link to your bookmark. This prompts for a URL and checks if it is a phising site.

Uses phishtank's check URL API.

If this does not work try turning debug to true above if you want to see the encoding.

Update: This still uses the GET method for checking the URL. Phishtank recommends using the POST interface (which will remove limitations on URL length: base64 inflates the length by 33%). Implementing that would need some kind of xmlhttprequest hackery. Stay tuned...

Update2: I got the AJAX bookmarklet ready, (thanks!)but it hits the infamous "uncaught exception: Permission denied to call method XMLHttpRequest.open" bug. i.e. you cannot do cross-domain xmlhttprequests. To solve that I think I need to convince PhishTank to host the javascript code, so the bookmarklet will insert a hidden iframe into the current page which will load the javascript from phishtank page, which will eventually make xmlhttprequest to phistank and display the result back. Are you listening PhishTank ?

Update3: Thanks to "till" who commented below, here is the bookmarklet using the POST method so now the solution will also work for really long URLs. Till's solution is good, but it makes users trust his site (in addition to phishtank). So basically user has to trust that he is not trying to filter the results being presented..

I have also merged the two earlier bookmarklets so that the current site location will be autopopulated in the prompt, so that user can easily change it if he wants to check a URL different from the one he currently is on.

Yahoo Geocoding in ruby…

Find lattitude and longitude of any address

Yahoo just released a new beta of their maps webservice. Here is a small ruby script (inspired by Rasmus's PHP code ) that I wrote that returns Lattitude, Longitude of the address provided...

require 'open-uri'
require "rexml/document"
include REXML
url='http://api.local.yahoo.com/MapsService/V1/geocode?appid=yahoomap.rb&location='
puts 'Enter Location: '
address=gets
address=URI.escape(address)
result=URI(url+address).read
doc = Document.new result
r=doc.elements["/ResultSet/Result"]
print "Precision: ", r.attributes["precision"],"\n"
r.children.each { |c| print c.name, " : ",c.text,"\n"}

Update: Here is a link to the script in github or to the .

Django middleware

In the django project settings there is a key called MIDDLEWARE_CLASSES which is a tuple of strings implementing the middleware methods. Django base handler (TBD explain what this class does) reads this setting and initializes three of its own attributes: _request_middleware, _view_middleware and _response_middleware. It goes through the list of middleware classes instantiates each of them and adds the bound method process_request to the _request_middleware attribute, process_view method to view_middleware and process_reponse method to _response middleware.

If the middleware class method returns something (indicating that it has taken some action), the basehandler get_response method returns immediately. Otherwise it proceeds further.

There are 4 middleware classes built in:

  • AdminUserRequired middleware class implements the process_view method and silently returns if the user in the request is logged in and is a valid admin user. Otherwise it returns login page with appropriate error message.
  • CommonMiddleware implements process_view and process_response methods. process_view rejects forbidden user-agents and prepends URL with www and appends trailing slash if desired. process_response checks if there is a matching flat file present that can be sent for 404's and can also send email note to managers about broken links. process_response also manages ETags
  • CacheMiddleware implements process_request to check pages (not containing any query string) against cache. process_response adds pages to cache as needed.
  • XViewMiddleware (used internally for documentation) implements process_view and attaches 'X-View' header to internal HEAD requests.

Update: 10/14/2005. There are some updates to the middleware that ships with django and is now "officially" documented here.

django decorators

Django framework has used some design patterns. There is a directory called decorator which currently has two decorators: (decorator is just a method which dynamically adds additional functionality to original method depending on the situation)

  • funcA = login_required(funcA)
    This replaces the funcA with a function which checks if the user is logged in and calls original function if the user is indeed logged in and redirects the anonymous users to login page.
  • funcB=cache_page(funcB,cache_timeout,key_prefix)
    The original function is changed to look into the cached pages.

Getting to know the django web framework

I was just about to abandon python and join the ruby camp to be able to use the wonderful rails framework for web application development. (They do have very good documentation and impressive video demo which you should check out!) But then came the announcement of Django. I really like the python language and feel that I can understand someone else's python code, (though ruby looks equally fascinating). I read through the tutorials and checked out the svn repository and worked with the tutorials. This framework looks easy to use and seemingly makes your application portable enough to use any of the underlying database backends (postgresql, mysql, sqlite) and webservers (apache, lighthttpd, twistedweb etc). The initial few days after the announcement, there were very hectic updates on the code and documentation front (with support for sqlite backend , standalone server and new tutorial and documentation about generic views and form fields coming in a matter of a couple of days). This has now gradually slowed down.

I decided to write a sample application (rebate tracking) and immediately hit some issues. I am trying to make the user registration and login/logout part work, but am not following how that is hooked into the framework. The users added with admin interface do not get recognized by the authentication code. Tried IRC help, but haven't been able to get anyone who can help. I am studying the code right now. I am going to look closely into the decorator and middleware code now. I will write about my progress here.