view-source explorers welcome

Ana wrote about her path in learning parts of web development through reading websites’ sources through the browser and seeing how others have built their sites. My experience is very similar. She also writes about how modern web development with Javascript frameworks and code optimising and minification has made this more difficult in the recent years.

I’m glad the developer tools have become so good that we can still extract some aspects to learn from. I use the CSS panes of the dev tools all the time as I aim to learn how different sites have been styled.

We can do better though, especially with handcrafted artisan websites. For quite a while, I’ve added little comments in the HTML for all those web adventurers participating in the view-source exploration and wanting to learn more. I’ve also chosen to not minimise all the assets because I want them to be human-readable at the expense of a few extra kilos of Javascript.

If you’re not familiar with the concept, you can view the source code of the website (like this one!) by right clicking on the page and selecting View page source.

I picked up the idea of adding comments for the explorer (instead of the developer building the site) from James’ great blog post 100 things you can do on your personal website:

Leave comments in your HTML so people can understand how different templates on your site work. For example, you could annotate your head tag so people looking at the code know what different meta tags do. Remember, someone may be view-sourceing your website who has never made a website before!

I encourage you to do the same!

Let’s build websites that are source-readable by humans and let’s help people learn how to build websites. I believe it will also help us build websites that are using the correct semantic HTML elements, are more accessible and are not just div soup.