Source Code Excursion

  • SumoMe

 

I have no doubt that most people have some interest in how web applications work or simply websites. They do get the fact that someone has to design it. They also get that it needs something called hosting to be online. Unfortunately the words don’t reveal much beyond that. This may be one of the reasons behind the lack of satisfaction with paying for the services web designers/developers provide.

By the way it takes different sets of skills to be either of the two, they are not necessarily one and the same. For now they are!

Let me try and show you a little something I think is powerful and easily accessible to you, yet has had little meaning to you until now.

As with all the articles I write, I try to ignore that this is trivial stuff for those tech savvy web people and explain this for the non-developer type of audience. So then, the source code for a website looks something like this.

source code example

And, it reveals a lot about what went into making a web page to look the way it does. Such as:

  • The author

You may be interested in knowing who the real author/s of the website content. Let’s take WordPress for example. WordPress is made up of different components that come together seamlessly to provide a web experience with useful functionality.

It brings together different plugins from different authors and all of this works together seamlessly behind the scenes.

  • The technology

As a “very curious web surfer”, you may also be interested in the technology behind it all. Look no further than the source code. In our image above where it says wp-content, wp tells us that this particular website is a WordPress CMS. If you were very impressed by the experience you got while visiting it, it may just convince you to make a switch.

  • Themes

Let’s say now you have made the decision to try WordPress for your next website. You also remember that it probably uses some type of theme. You can find out the name of the theme from the source code again. This particular WordPress website uses “air-balloon-lite.”

  • Responsiveness

A good theme must be responsive. What this means is that it should be able to look good no matter what device it is viewed in. It has to scale to the viewing window of a device, such as a mobile phone, tablet, desktop and what have you. The line <meta name=”viewport” content=”width=device-width, initial-scale=1″> defines just that.

Phew!

That was a lot.

There is a lot more stuff behind the scenes. If you were impressed by a plugin used on the website you can quickly find out it’s name by doing a little more research on the source code. When in the Chrome browser you can Right-click on the plugin from the front end of the website and go to the “Inspect” menu item.

Finally, just how can we view this source code? There are two ways:

  • Right-click on the page and select “view page source”
  • On the keyboard, click F12

 

There are many fun things you can do with the source code from the front end which I speak about in the article #CSS Tricks ” How to remove the Obstructing ‘sign-in block’ on a Facebook page without actually signing in”

Go ahead and explore!