Inspection & History

There is too much information for any one person to know right away in development and coding. Luckily though, developers tend to be a helpful group with many resources to assist those getting started, and a community that is willing to answer questions about problems.

If (when) you have been using the issues tab on the GitHub repo for this course, you will already recognize the importance of having a strong community to ask questions within.

There are a number of additional resources that you should start to take advantage of, in addition to your classmates and instructors.

Snooping on Other People’s Source Code

One invaluable resource for web developers is the ability to look at the code for websites you visit. Browsers get code from servers, which means you can look at this code to try and inspect how someone else might have solved a problem.

During Workshops, you are expected to look at each other’s codes as Peer Reviewers, looking for errors and code choices.

Chrome

In Chrome, if you right click, you can select “inspect” which will bring up the Chrome developer tools to the right.

You can use the “Elements” tab, to see source code, as well as the matching highlighted element in the actual page (as described below in Safari). You can also select the “Source” tab to see the raw course code files. Again, these allow you to see the code that creates the page your are viewing. Example of Inspecting Code in Chrome

Firefox

You can do the same thing in Firefox as Chrome. Simply right click in the page you want to see the code for, and select either “View Page Source”, which loads the file in a separate tab, or “Inspect Element”, which open up a more complete set of developer tools. Firefox developer tools

Safari

To inspect code in Safari, you first need to make it so you can see the developer tools. To do this:

  1. Open preferences (cmd + ,),
  2. Go to the advanced tab,
  3. Select “Show Develop menu in menu bar”. Example of how to turn on develop menu

This will cause a tab to appear in your menu bar. You can now select this menu tab, then select “Show Page Source”. Example of how to pull up page source in safari

This will bring up a separate window/tab where you can navigate around all of the resources sent over to your browser for the specific web page.

You can also select the “Elements” tab from within this window. This alternative view of the code allows you to see where each html element is in the displayed page. As you move your mouse through the code, various parts of the page will highlight, representing the current element in the code you are inspecting.

The Wayback Machine and Internet of Yesteryear

Google as a snail-mail service The Wayback Machine allows you to see what certain websites looked like at different points in history. This may not be the best resource for learning how to code a website, but it does allow you to get a sense for how a company may have viewed their brand over time, how the web used to look, or retrieve information from the past that is no longer live. It’s also the coolest way to spend a Saturday night.

The resource is the Internet Archives Wayback Machine.

For example, lets look at the history of www.umt.edu. At the moment I took this picture, the page tells us, there have been 2024 snap shots taken of this site since the Internet archive began. Dating from Feb. 19, 1997 to Feb. 1, 2017. View of Internet Archive for umt.edu

I am going to select the year 2000, and the date June 16th, 2000. Showing how to use the site

That shows us what the University of Montana’s main site looked like at that moment in history. Definitely has a retro feel now, especially with that logo graphic. UMT Site from June 16th, 2000

Some other great examples include;

{ TODO: }

  1. Using a web browser of your choosing, please inspect the source code for a website you find particularly interesting.
  2. Explore two sites and how they have evolved over their history on the web. One of these sites needs to have a pre-2000 presence, while the other one should be an contemporary artist you admire today.
  3. Add in the README you just created, and write about this “snooping” experience in your weekly report.

Previous section:
Next section: