A lot of you are building out your HTML sites and using Bootstrap to manage the basic CSS. Bootstrap is an “HTML and CSS Framework” which just means that it provides you with a handful of really useful pre-defined CSS classes and definitions that you can use to make a good looking, responsive website.
Bootstrap has a great getting started walk through on their website. You can be forgiven for thinking that the way to get started with a new tool is to follow their “getting started” instructions, but you’d be wrong. For our purposes, you probably don’t want to download a thing. Weird, right?
Not really. Here’s a story about how the internet works. When you load a webpage, there are usually a ton of links out to other files — CSS files, JavaScript files, images — that your browser also has to load to display the page properly. But your browser is pretty smart and when it encounters a file it has already downloaded once, it doesn’t just download it again. First it looks at the size and modification date of the copy in your browsers cache. It sends a wee message back to the server: “Hey, I have a copy of fancy_face.png that is 54.65KB, last modified on March 10 at 10:48 AM. You gave it to me last week. This file you want me to download — is it actually different?” and if the file is the same size and was last edited on the same day, at the same time, you don’t have to download it again. That can shave milliseconds off your download time. But milliseconds add up.
So when you’re using a standard file that lots of other people are also using it is much more efficient to get that file from a Content Delivery Network or CDN. Dave Ward has a nice post that goes into a lot more detail on why a CDN is a good thing for jQuery.
As a bonus, it is much easier to grab an HTML template that pulls in Bootstrap’s CSS (and JS if you need it) from a CDN, just in general. In fact, here’s a template.
You’ll notice something else about that template, though: it doesn’t work if you just put it on your desktop and view it in a browser. That’s because the calls to the CDN, on lines 10 and 13 are using what are called “protocol relative URLs” — the value for the href attribute doesn’t specify whether the URL is http or https. If you’re viewing the page over a web browser, the page itself has a protocol, and the href value inherits that protocol from the page. If I view the page at http://bl.ocks.org/amandabee/raw/ed311bf7d808f8295321/, the browser looks to http://netdna.bootstrapcdn.com… for the CSS files. From an https site, it would look to https://netdna.boostrapcdn.com.
But when you view a site locally — on your own computer — you should be able to see in the URL that your “protocol” isn’t “http” or “https,” it’s “file” and by definition, “file” is only looking on your own computer for files. There are some easy work-arounds:
+ On your own copy on your desktop, just ad http: to the two CDN calls (again, lines 10 and 13). If that doesn’t work, copy your whole HTML file into Debian Pastebin and send me the URL. We’ll figure it out.
+ Launch a mini web server. From the terminal, move to the directory your HTML files live in and run python -m SimpleHTTPServer. Note: the module name (SimpleHTTPServer) is case sensitive. That will work on Mac OSX or Linux. I don’t know what Windows users do. Your HTML files will be visible at http://0.0.0.0:8000/. You can only reach that URL from your own computer, and only as long as SimpleHTTPServer is running, but it will let you test your work. Neat, huh?
As ever, if you’re stuck or have questions, don’t hesitate to ask.
