Today is the wrap up of the initial web cycle. Last Tech Tuesday, I introduced Javascript as determining the behavior of a web page and interacting with HTML (the content of the page) and CSS (the look and feel). Now it makes sense to revisit the Web Browser, which needs to put all those pieces together to actually display the web page and let the user interact with it. By now it should come as no surprise that this is in fact quite a difficult job and that the web browser is a rather elaborate piece of software.
Most of us spend a big chunk of our day using a web browser and take it pretty much for granted that we can go to any URL and have the contents appear quickly. But as we have seen in a first step the web browser has to assemble all the pieces for the page, which generally involves many HTTP requests to retrieve different files containing various bits of HTML, CSS, Javascript and images. Once all the pieces are in place, the really tough part starts, which is figuring out what should actually be on the screen.
Why is this tough? Because everything interacts with everything else. Styles can be found mixed in with the HTML and in separate files and there can be multiple declarations that all need to be applied to the same element. Furthermore, the Javascript can dynamically change not just which styles should apply but can even add new HTML elements on-the-fly. Yes, the HTML that was retrieved from the web server can be changed by the Javascript. And of course once a new HTML element is introduced that needs to be styled too. And a styled HTML element can wind up pretty much anywhere on the page where it can (partially or completely) overlap other elements.
Once you start to look under the hood like that you get to a point where you realize that it’s a small miracle that any of this works at all. The combination of technologies is incredibly powerful but also incredibly messy behind the scenes. And given that complexity it should not come as a shock that pages often look slightly different in different browsers. Yes there are standards but those have been evolving and browser developers have to make choices when they implement these. It is infinitely easier to critique the particular choices made than to build a well working web browser.
To help deal with these cross-browser differences fortunately people have come up with so-called libraries and frameworks that mostly hide these issues from the designers and programmers building web pages. Recently some developers from Twitter have taken different frameworks and pulled them together into something called Bootstrap which brings together standardized pieces of HTML, CSS and Javascript (including the popular jQuery library) to make it easy to create beautiful and functional pages across not just different browsers but also different devices (computer, tablet, phone).
That’s it for our initial pass over the web cycle. Now I need to decide whether to tackle some more involved web topics, such as the Document Object Model or to return to more general computing topics. As always, suggestions are welcome!
