As someone who started out doing JavaScript in the 1990s, I’ve been through the dark ages of debugging. Alerts, logging application data into DOM elements, etc. After having been through all that doom, I’m clearly a fan of console.log. I use it all the time. I bet you do too. It’s super useful.
The one downside? Leaving calls to console.log into code that’s being tested (as in, QA) or is destined for production (as in, emergency bug fix.) With Firebug or a similar tool running, you’re fine. Without it?
Well, I leaked it earlier this week, so I might as well get started.
Welcome to How to Make a Web Site the Modern Way, a blog series outlining, to the best of my ability. how to build an HTML page using today’s best practices. The focus won’t be on specific coding techniques, although there will be some of that, it will be on how the pieces fit together. Without experience, it’s tough to know how the pieces of a web page fit together in the best way. I’ve got some of that experience and I’d like to share it with people. So at the end of all of this, I’m hoping this series will serve as a one stop shop for people looking to understand the big picture.
First up: The Anatomy of an HTML Page .
Some basic principles:
Fast: I want pages to be as fast as possible by default.
Findable: This isn’t really the same as SEO, but it’s kind of like a cousin to it. I want to make pages spiderable, human scannable, computer readable and generally information rich.
Standards compliant: I’m not a standards zealot, but I try my best to follow web standards wherever possible.
Accessible: I try to make pages as accessible as possible.
Usable: Usability is a deep topic, but there are things you can do, by default that will enhance the usability of your site.
Intuitive: I want developers to look at the stuff I do and say “hey, that makes sense.” I also want it to make sense to me when I return to it in six months
Breakable: Which is a funny way of saying “graceful degradation,” a concept that colors a lot of what I try to do. The idea being- if something’s going to break, or not work as expected, make sure that it’s not totally screwed up
I got a new machine at work yesterday and in the process of building the thing out and getting it ready to actually work with, I came up with a list of the tools and utilities I use on a regular basis. Not the big stuff (Dreamweaver, Fireworks, Photoshop, etc.) The stuff that fills in the cracks that the big tools don’t cover. Thinking such a list might be useful for other folks, I added a couple of online services that I can’t live without and am now sharing the highlights of the list with the world.
As you could probably guess since Performance is one of the six site categories around here, I’m a fan of WebPageTest. You can imagine my reaction to the news that page load videos are now available from the service.
One of the things we like to look at is what a page looks like when it is loading, particularly if you are comparing a before and after or multiple sites to each other. This is particularly helpful when talking to the business about performance and sometimes the raw load times don’t adequately represent the user experience.
Up until now this has been a pretty manual process where we screen record a video while loading a site then load it up into Premiere and stitch it together.
Starting today, you can have WebPagetest record a video of a page load directly. It’s still in a pretty rough form and it’s going to be a while before it’ll be ready for the masses but what is there is already pretty powerful and extremely flexible.
Very cool. I can think of two or three presentations where video of page load would have been super useful and will definitely find a use for the feature in the near future.
