Dare to Dream? » Web 2.0

Faster HTML and CSS – My Learnings!

Mayank Jain (makuchaku) — Thu, 12 Aug 2010 15:33:37 +0000

Faster HTML and CSS: Layout Engine Internals for Web Developers (@GoogleTechTalks)

I think I never cared about these – but the way David Baron from Mozilla describes these, I think I will now.
The points he was making started seeming so crucial that I jotted them down as if taking notes – something I never did with previous videos.

The things which I picked up from this video are…

From fetching the DOM over the wire to displaying it, following steps take place in order…
(1) Compute => (2) Compute Style => (3) Construct the DOM frame => (4) Layout => (5) Paint

The further Left (towards (1)) you push the browser’s rendering engine via your DOM/JS/CSS, the slower the browser would get.

Hence…

Use as specific CSS tags as possible. The more generic tag, the higher performance hit while searching the DOM. For example, a “#some-id {}” is way way faster than “body > div p {}” – as in the second tag, a larger portion of DOM is parsed to check which elements are affected by the selector. You push the browser to start from stage (2).

“:hover” style hits the browser pretty badly – as it pushes the browser back to stage (2). Coupled with the above mentioned CSS selectors problem, it can lead to real slow computation. Use it with CSS selectors which are very very specific in nature.

Programmatic scrolling of tags (some of which might have overflow property) via javascript – as that does not causes re-computation of style (stage 2). While if you do it with CSS magic, you push your browser back to stage (2).

Mozilla’s rendering tree, while building itself – does not takes any element with with CSS property “display:none” into account – it just skips it. So when this property is flipped, it triggers a full re-computation of the tree – which is expensive. However if we use the style “visibility:hidden” – the rendering tree picks up the related element while building itself. Hence when visibility is flipped, its much faster as there is no re-calculation of the rendering tree.

An old one – when javascripts are being downloaded, the browser stops itself from any other processing and waits for the script to download and execute (as script can modify the DOM anyhow it likes). During this time, the precious time is lost – which could have been used in downloading other content – like images, DOM, CSS, etc. Hence – keep the javascripts as further in the DOM as possible. Use caching is possible.

Learn more about speeding up your website at – Yahoo’s best practices (YSlow stuff) – some of which we regularly follow at AdoMado.com

OMG! Chrome-4.0 is nearly 59% and 76% faster than Firefox-3.7a1pre on my T61 (Ubuntu Jaunty) Okay, to start off – I really wanted Firefox to...
Getting around the dreaded Operation Aborted error in Internet Explorer with Ruby on Rails If you have ever experienced this… …you know how painful...

Related posts brought to you by Yet Another Related Posts Plugin.

Why being filtered for adult content?

Mayank Jain (makuchaku) — Wed, 28 Apr 2010 06:07:46 +0000

Ever since we implemented content filtering mechanisms at AdoMado, our own site was being blocked – and this made me heck curious – why??

Today morning, using Rubular (which is an excellent online regex tool) – I discovered the culprit.
And it couldn’t have been more hilarious )

Fixing this… )

PS – a valid bug.

AdoMado Employees Get Apple Laptop, Each !! Everyone who works at AdoMado puts in there 100%, so...
Something for the Ladies At AdoMado, we are always trying to improve the skewed...
AdoMado… the Next Phase!! Hey everyone!! Last week we embarked on the next phase...

Related posts brought to you by Yet Another Related Posts Plugin.

Programmer Happiness – onroad to Rails3

Mayank Jain (makuchaku) — Thu, 08 Oct 2009 14:25:50 +0000

Medium: www.vimeo.com
Link: www.vimeo.com

Rails 3 Update by Yehuda Katz from Wind City Rails 2009

You just can’t ignore his style of explaining things!

Location of Rubygems in Ubuntu Jaunty With Jaunty, the location of installed gems has been moved...

Related posts brought to you by Yet Another Related Posts Plugin.

An interesting problem to solve when migrating wordpress blog to a new URL

Mayank Jain (makuchaku) — Thu, 08 Oct 2009 00:05:58 +0000

Problem Scenario
I migrated my blog from makuchaku.info to makuchaku.in – and wanted everyone who was linking to my “.info” domain, automagically gets linked to my “.in” domain. Ofcourse, I cannot change all the possible places from where my .info blog is linked.

Challenges

I want “.in/” to be served when “.info/” is cliked
I want “.in/blog/this-is-a-post” to be served when “.info/blog/this-is-a-post” is clicked.

Ofcourse, Challenge 1 is very east and straight forward. Just put up a redirection at .info domain and you’r done. Challenge 2 is interesting.

Solution
Goto your theme editor (old wordpress blog) and edit the template for which you want to setup redirection. For me, it was all posts and all pages. Next, insert this javascript code at the top of template code…

Thats it. Now whenever you’ll hit http://makuchaku.info/blog/why-makuchaku – you will be redirected to http://makuchaku.in/blog/why-makuchaku – sweet!

Assumptions
This solution assumes that your new blog is a mirror replica of your old blog.

Please Digg this post if it helped. Thanks.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

OMG! Chrome-4.0 is nearly 59% and 76% faster than Firefox-3.7a1pre on my T61 (Ubuntu Jaunty)

Mayank Jain (makuchaku) — Sat, 03 Oct 2009 03:45:32 +0000

Okay, to start off – I really wanted Firefox to come on the top… I’ve been a dedicated firefox user ever since and simply love the product. The fact that it has addons for any conceivable functionality – makes it r0ck even more!

However, to my surprise Google’s Chrome beats it hands down when it comes to speed of the javascript engine each of the browser deploys. Google has V8 tucked under Chrome’s (v4.0.213.1) belt, while my shiny new (nightly updated) Mozilla Firefox Minefield 3.7a1pre has TraceMonkey.

So why am I this sad today? Well… check this out…

Peacekeeper JS test – Chrome was nearly 59% faster here!

SunSpider test – Chrome was almost 76% faster

Chrome vs Firefox – SunSpider test, merged view.

I purposely ran the tests in side-by-side browser windows, launching Firefox tests just about a second before the Chrome’s tests – and to my surprise, I could actually (visually) see Chrome finishing faster – it was that fast!
Afterall… 59% or 76% actually does seems a pretty huge boost, whatever functionality it might be in.

Here are by browser versions… (both are stock builds as provided by repositories/online).

and

Well… to me, this is healthy competition. Talk about the times when Chrome wasn’t there, Firefox used to make IE look timid. Come Chrome and now Firefox is doing the catch-up. Whoever wins, we – the end users – get the best of all the worlds.

That is like – have your cake & eat it too

However, I seriously hope that by the time Firefox 4.0 launches, its javascript engine is at par with Google Chrome’s.
And by the time Google Chrome matures, I wish it should start sporting the same plethora of addons as does Firefox.

From UI’s perspective, Chrome also packs an extra bit of punch, which I really like and would like to blog about. But thats for a later post.

How to install Firefox Addons on Minefield – Bleeding edge nightly builds for firefox Using Minefield – the nightly firefox build – and yet...
Howto fix slow and choppy flash/video on ThinkPad T61 running Ubuntu Jaunty Very recently, I upgraded from Ubuntu Intrepid to Ubuntu Jaunty...
Location of Rubygems in Ubuntu Jaunty With Jaunty, the location of installed gems has been moved...

Related posts brought to you by Yet Another Related Posts Plugin.

Authentication using Google Accounts for your Rails App

Mayank Jain (makuchaku) — Sun, 27 Sep 2009 20:02:15 +0000

The methodology is very simple.

Redirect the user to grant access to your app for a particular Google service.
Once access is granted, use the authentication token to retrieve information related to the user.

I demonstrate this with a very simple & idiotic Sinatra app which actually does nothing intelligent – apart from just outputting first 10 contacts from the user’s address book.

require ‘rubygems’
require ‘sinatra’
require "gdata"
client = GData::Client::Contacts.new
get "/" do
next_url = ‘http://127.0.0.1:4567/app’
secure = false
session = true
authsub_link = client.authsub_url(next_url, secure, session, nil)
redirect(authsub_link)
end
get ‘/app’ do
pp request.env
client.authsub_token = request.env["rack.request.query_hash"]["token"]
client.authsub_token = client.auth_handler.upgrade()
contacts = client.get("http://www.google.com/m8/feeds/contacts/default/full?max-results=5").to_xml
puts contacts
end

More information about using GData is available at http://code.google.com/apis/gdata/articles/gdata_on_rails.html

Example scenarios this can be used?

Allowing people to login into your app with their existing google account.
Accessing user data with user’s permission
Signing up for your app using Google account information

Happy Hacking!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.