View Source

December 7, 2023

I am rereading Dan Cederholm’s Twenty Bit I Learned About Making Websites. So much of the book resonates with me. I began my journey as a webcraftsman about the same time as Dan. All of his stories contain elements of things that are very familiar to me. I could probably write a post about each chapter of his book because there is a story from my own life to tell.

In Chapter 2, Dan talks about viewing the source code of a website in the browser. That was one of the great things about designing and building stuff on the Web. When you came across something clever, you could look behind the curtains and see how it was done.

When I first started building websites, it was almost all HTML. Layout was achieved with tables and spacer GIFs. Styling was achieved using HTML attributes like bgcolor, text, and link. The <font> element allowed you to add color, size, and face to your text–this was before CSS was more widely adopted.

All that information could be accessed using ‘view source’ in the browser. As Dan pointed out in his chapter, this was an amazing thing. You could learn to build a website from the website itself. You could pull things apart as you sought to understand them.

It was and still is a very unique thing that you will not find in other professions. I learned a lot of techniques by looking behind the code as I came across interesting layouts or graphic effects.

As helpful as view source was in the early days of building for the Web, Firebug took things to a new level when it appeared in 2006.

Firebug was the first tool to allow you to inspect and edit HTML and CSS elements in the browser. Unlike ‘view source’, Firebug allowed you to see the relationship between the HMTL and CSS. Firebug was the precursor to the dev tools we know and love today.

Firebug helped fuel my learning with CSS because I could add and change properties on a page and immediately see the result. I still use that superpower in dev tools today. You can test-drive new things before writing them in your code. And you could dissect other people’s inventive solutions using the tool.

Firebug was also the first tool that helped with debugging. It was a huge step forward and became the backbone of all the modern dev tools we use today.

I remember seeing a really cool shadowing effect on a blockquote on the redesign of the Boston Globe site in 2011. (Yes, that is the redesign that put responsive design on the map.) Using Firebug, I was able to dissect how they had achieved this effect using pseudo elements generated by ::before and ::after and transforms to give more depth to the shadow and ‘bending’ effect on the box.

This is just one example of how Firebug helped me to learn from someone else by taking me behind the code so that I could dissect the cunning techniques used by the Filament Group team.

One of the great things today is that we can still learn from other sites regardless of how they are built. Because regardless of the framework or build tools, the code is still compiled into HMTL and CSS and we can use dev tools or view source to see behind the curtain.

There is one thing I find challenging today. I have trouble following CSS that use custom properties. I wish that dev tools would allow you to view the “compiled” code (like Codepen allows you to do with Sass or HAML). It is hard for me to follow along when I just see a bunch of variables and then have to hunt down what the variables are. It looks like a lot of gibberish to me.

It is even more difficult when developers are using different variables in mathematical functions. Sometimes I just wish I could see the simple compiled code so that I could begin to dissect what is going on.

I am not sure if anyone else find this a challenge. Maybe it is just me and the fact that I am an old man. 🙂

Postscript

This post is part of my attempt to post something every day for a month. I was inspired by Michelle Barker, who recently participated in National Blog Posting Month.

I am writing this post from Murray, Kentucky. I am feeling a bit nostalgic because the last time I stayed at this hotel, I wrote two blog posts, LGND and Me: Celebrating Five Years and Front of the front-end developer. It is fun to be able to be back here writing more posts during this unique challenge in my writing journey.