Understanding Source Code

3 Dollar Bill

Hello,

I'm looking to dive into Web Development, by trying to understand source code on some websites

Currently looking at http://www.initiafy.com/

Anyone know what IDE was used to generate the below CSS files or what plugin they relate to?

<link media="screen" rel="stylesheet" type="text/css" href="//assets.initiafy.com/assets/css/wt5.global.v1.0.48.gz.css">

<link media="screen" rel="stylesheet" type="text/css" href="//assets.initiafy.com/assets/css/wt5.home.v1.0.48.gz.css">

Thanks

TommyKnocker

What makes you think that a specific IDE or plugin was used? This is just minimised CSS. This is done to speed up page loading and it simply removed all unnecessary comments and white space from the CSS file.

You could code this yourself in any editor. Write out you CSS as normal and then when you are finished, just remove any comments and white space so all your CSS rules end up on one line. Keep the readable copy for when you have to edit and make changes, but load the minimised version into your webpage.

There are also a number of online minimisers where you can paste in your regular CSS and it will give you the minimised version. You can do the same thing with your HTML and Java script/J-Query.

See this link for more information.

3 Dollar Bill

Thanks TommyKnocker

Excuse my ignorance on the subject, the thing that threw me was the version on the filename for the CSS so just assumed it was part of some plugin from github

TommyKnocker

3 Dollar Bill wrote: »

Thanks TommyKnocker

Excuse my ignorance on the subject, the thing that threw me was the version on the filename for the CSS so just assumed it was part of some plugin from github

There is no ignorance to excuse. I only came across minimised code myself recently. Apparently one of the things Google ranks sites on is how fast they load and minimising your code is supposed to help in this regard as well as improving the user experience.

S.M.B.

There's a few methods being used here to improve performance as TommyKnocker has suggested.

[HTML]<link media="screen" rel="stylesheet" type="text/css" href="//assets.initiafy.com/assets/css/global.css">

<link media="screen" rel="stylesheet" type="text/css" href="//assets.initiafy.com/assets/css/home.css">[/HTML]

versus

[HTML]<link media="screen" rel="stylesheet" type="text/css" href="//assets.initiafy.com/assets/css/wt5.global.v1.0.48.gz.css">

<link media="screen" rel="stylesheet" type="text/css" href="//assets.initiafy.com/assets/css/wt5.home.v1.0.48.gz.css">[/HTML]

There's little to no need to worry about this stuff until you've mastered the basic development side of things.

The CSS files are minimized as TommyKnocker has explained.

The CSS and JS has also been gzipped which compresses the files thus reducing their size even further. Some code on the server is more than likely serving these versions if the browser supports it, hence the .gz.css and not just .css.

The version numbers are used for whats called cache busting. The CSS and JS files are set to expire in 2018 so when you revisit the site your browser will not try to download the CSS or JS again. When some development work has been done on the site the developers will either manually or automatically up the version number (eg 1.0.49) so when any user visits the site they will now download the newly named file and this will be used until the next version and so on and so forth.

Again, no need to worry about this stuff. I just thought I'd give a brief and very simplified version as to what parts of the code might appear different to the examples you'll be going through during the early days of your learning.

3 Dollar Bill

Thanks S.M.B.

That puts the mind to ease, very informative. As you said, I'll not worry about that until I have built a working site with the basic knowledge that I have