Andy Wenk

Aug 30

How Browsers Work Article (Tali Garsiel)

Moin Moin,

I recently read the super awesome article “How Browsers Work” here:

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Paul Irish cleaned up the original article written by Tali Garsiel, an Israeli developer. You can find her article here:

http://taligarsiel.com/Projects/howbrowserswork1.htm

I strongly recommend all people who develop software for the web to read this article. It provides a great look behind the scenes of how browsers work. The topics are:

_ the rendering engine - processing the HTML document
_ the parser with it’s lexical and syntax analysis - the lexer (tokenizer) creating tokens and the parser constructing the pars-tree by applying syntax rules
_ the HTML parser based on a DTD
_ the resulting DOM-tree after parsing HTML
_ the parsing algorithm of the HTML Parser
_ the tokenization algorithm
_ the tree construction algorithm creating elements of the resulting DOM-tree and each of it’s token
_ CSS parsing
_ render tree construction
_ creating the layout (or reflow) out of the render tree
_ the painting process - display the content elements by traversing the created render-tree
_ the CSS2 visual model

This is a lot of stuff and actually I am reading the article the second time. Imho the biggest benefit of studying the article is the deeper understanding how all the components of a browser work together to present the resulting website.

Here are some links I extracted for further reading.

_ The webkit rendering engine used by Chrome and Safari browsers: http://www.webkit.org/

_ context free grammar:
http://en.wikipedia.org/wiki/Context-free_grammar

_ Flex parser generator:
http://en.wikipedia.org/wiki/Flex_lexical_analyser

_ Bison parser generator:
http://www.gnu.org/software/bison/

_ HTML5 specification:
http://dev.w3.org/html5/spec/Overview.html

_ WHATWG community working on HTML:
http://www.whatwg.org/

_ parsing HTML:
http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html

_ HTML syntax:
http://www.w3.org/TR/html5/syntax.html#html-parser

_ CSS2:
http://www.w3.org/TR/CSS2/

_ CSS specification:
http://www.w3.org/TR/CSS2/grammar.html

_ CSS2 box-model:
http://www.w3.org/TR/CSS2/box.html

Some of the links are kind of lame to read in a way but still very interesting for digging deeper.

I hope you enjoy reading the article the same way I do.

Cheers

Andy

Apr 04

git - squashing commits

Moin Moin,

because I can’t fuckin’ remember this cool git feature, I have to write it down shortly.

Let’s say you have some commits made to a specific branch. Firing git log could return something like this:

commit dfc1aa75553b796e94a0927575721f8b1938e53a
Author: Andreas Wenk 
Date:   Mon Apr 4 11:44:50 2011

    fourth line

commit 873a784e13b8d333f17ba805260cdd275ec962b2
Author: Andreas Wenk 
Date:   Mon Apr 4 11:44:10 2011

    third line

commit fe1eb9eab73062256bc1e6131826c8698c090f70
Author: Andreas Wenk 
Date:   Mon Apr 4 11:43:34 2011

    second line

commit f3ea5367b7c20334b5844b5eabb450374db57501
Author: Andreas Wenk 
Date:   Mon Apr 4 11:43:00 2011

    first line

Now these commits are kind of the same and I decide to put some of them into one commit to not flooding the git log history. The command you’re looking for is git rebase -i

The target is to make one commit out of the three newest commits. git-rebase needs one commit point, after which the operations shall be done. So what we write is:
git rebase -i e2148eac05
The resulting output is:
pick fe1eb9e second line
pick 873a784 third line
pick dfc1aa7 fourth line

# Rebase f3ea536..dfc1aa7 onto f3ea536
#
# Commands:
#  p, pick = use commit
#  r, reword = use commit, but edit the commit message
#  e, edit = use commit, but stop for amending
#  s, squash = use commit, but meld into previous commit
#  f, fixup = like "squash", but discard this commit's log message
#
# If you remove a line here THAT COMMIT WILL BE LOST.
# However, if you remove everything, the rebase will be aborted.
#
The first thing you should recognize is that the commit history is in reverse order. So the oldest is on top. Now we wanna squash these three commits to one. git-rebase offers some commands you can put in front of each commit line. What we need is s for squash or f for fixup. The commands are slightly different. squash will not discard the commit but meld it into the previous one. Let’s do it:
pick fe1eb9e second line
s 873a784 third line
s dfc1aa7 fourth line

# Rebase f3ea536..dfc1aa7 onto f3ea536
#
# Commands:
#  p, pick = use commit
#  r, reword = use commit, but edit the commit message
#  e, edit = use commit, but stop for amending
#  s, squash = use commit, but meld into previous commit
#  f, fixup = like "squash", but discard this commit's log message
#
# If you remove a line here THAT COMMIT WILL BE LOST.
# However, if you remove everything, the rebase will be aborted.
#

Here, we tell git, that the commit fe1eb9e is the one we wanna keep. You could also use another one. After saving this file git is providing another view:

# This is a combination of 3 commits.
# The first commit's message is:
second line

# This is the 2nd commit message:

third line

# This is the 3rd commit message:

fourth line

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# Not currently on any branch.
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
# modified:   test
#

Now, you have the opportunity to change the commit message. Use your fantasy to write a meaningful commit message. E.g:

# This is a combination of 3 commits.
squashing togehter three commits 

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# Not currently on any branch.
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
# modified:   test
#

Yeah - very meaningful ;-). Now save the file and git will do the work for you:

$ git rebase -i f3ea5367b7
[detached HEAD a17cc44] squashing togehter three commits
 1 files changed, 6 insertions(+), 1 deletions(-)
Successfully rebased and updated refs/heads/master.

And finally git log is telling us:

commit a17cc448869b0b092601f59da76970e1dd8e94e7
Author: Andreas Wenk 
Date:   Mon Apr 4 11:43:34 2011

    squashing togehter three commits

commit f3ea5367b7c20334b5844b5eabb450374db57501
Author: Andreas Wenk 
Date:   Mon Apr 4 11:43:00 2011

    first line

Important note: this is a real powerful tool for manipulating the commit history. So you should think before doing. Especially when pushing the changed commits to an origin master where other people have worked on. Probably you will be told, that the pushing is rejected and you will have to use —force. This can imply damage …

Happy squashing!

Mar 07

plain text transforming with pandoc and markdown

Moin Moin,

actually we are writing a CouchDB book. Today I was starting to read the whole book and make some notes which todo’s we have. I was thinking how I write them down - means in which format. No question that it will be a plain text format anyway.

I decided to use markdown because it’s really simple and easy to transform. Yes transform because of three reasons:

So how to transform the markdown. There is a really powerfull programm called pandoc written by John MacFarlane. pandoc is able to transform from various plain text formats to various other formats. E.g it’s easy to transform markdown to HTML.

As a Mac OS X user I was first looking in homebrew if there is a package - unfortunately there isn’t yet. So I had to use MacPorts. Be sure to update the ports tree because pandoc is changing rapidly. So use sudo port selfupdate, sudo port upgrade outdated and then sudo port install pandoc.

So after having installed pandoc the usecase is quite simple illustrated. I have a simple textfile called TODO.md with some content. The first target is to create a html file. The creation process is as easy as this:

$ pandoc -s -t html -5 -f markdown -o TODO.html TODO.md

The options are:

Well the result is really good. Try it yourself.

Well the next target is to create a PDF file. So therefor, a detour over LaTex is required. But don’t worry, it’s dead simple because pandoc is shipped with a program called markdown2pdf. Assuming you have LaTex installed, take these steps:

$ markdown2pdf TODO.md -o TODO.pdf

Wow - the result is a PDF TODO.pdf. Cool isn’t it?

Cheers

Andy

Feb 02

I love my Mac and iPad but …

… I hate fucking iTunes. This bullshit software is just annoying me and makes me absolutely angry.

The usability is simply crap and what really made me nuts was the fact, that I did not find a - “Mac makes it simple” - way to move purchased Apps from the iPad to the Mac.

Ok - connecting the iPad to the MBP opens iTunes. And the ipad is mounted. So far so good. And I can see everything on the iPad. Cool. But why the fuck is it not possible to drag, let’s say, two or three apps and move them to iTunes? I don’t get it!

Noooooo - please right click the iPad in the left menu and choose “Transfer Purchases”. Apple - come on. Why are you doing such a lousy job? This is just the biggest bullshit I experienced with iTunes - beside the other bullshit with this software.

Dec 29

CouchDB article in Entwickler Magazin 1.2011 

Moin Moin,

I wrote another article about CouchDB. This time for the German Entwickler Magazin. I am showing the basic functionality for using map / reduce.

entwickler-magazin.de issue 1.2011

All the best for 2011!

Cheers

Andy