HTML + CSS + JavaScript

Me, Talking About HTML5, Flash, and the Cloud as Part of the Isobar 50

Rob Larsen — Thu, 26 Aug 2010 14:17:53 +0000

What’s the Isobar 50? Glad you asked:

Got questions? Get answers!

Let’s face it. Marketing in the digital age is hard. Where will you put your efforts? How do you know it will pay off? The Isobar 50 is our list of the top 50 challenges that online marketers are grappling with today, and our recommendations for dealing with them. If you’re an online marketer, this is the place to get answers to your most pressing marketing and online business questions.

I provided answers for three of the questions and I even sound like I know what I’m talking about:

33. Will HTML5 replace Flash? from Isobar North America on Vimeo.

34. What’s the best way to present video? from Isobar North America on Vimeo.

35. How should I leverage cloud services? from Isobar North America on Vimeo.

It’s funny because this was shot with a Flip in a conference room. I’m so used to the incredible production facilities and pros at Cramer, it was strange to do something so incredibly lo-fi. Still the content is what matters and I don’t sound half bad…

How To Make a Web Site the Modern Way. Part 14: Formatting, Shorthand, Resets and Organization

Rob Larsen — Wed, 11 Aug 2010 18:18:43 +0000

We continue with our examination of CSS with some real basics- formatting, writing rules, organization and the like. Nothing groundbreaking, but the basics are important in any endeavor, so here they are.

Formatting

During development I format my CSS with selectors on one line and then each property on its own line. The declarations are indented 4 spaces. I like this style because my interest is always in the properties, not the selectors. I can find any selector I need with CTRL+F and then I can easily scan down the list of properties to do my business.

It looks like this:


#main article strong {
	font-weight:bold;
}
#text #main article blockquote {
	background:#efefef url(http://d1eucpngoftcha.cloudfront.net/_assets/styles/images/bq-bg.png) no-repeat;
	color:#600;
	font-style: italic;
	margin: 15px auto 30px auto;
	padding: 30px 30px 15px 75px;
}
#text #main article blockquote cite {
	color:#333;
	font-size:90%;
	font-style:normal;
}
#text #main article ul {
	font-size:14px;
	margin: auto auto 30px 15px;
}

Some people take that approach and indent related or child styles and additional 2 or 4 spaces. That allows for hierarchical scanning and organization and makes (for some people) an easier-to-read style sheet. That looks like this:


.post-list li a{
	color:#A8A8A8;
}
    .post-list li a:hover{
        color:#000;
        text-decoration:none;
     }
     .post-list li .author a, .post-list li .author a:hover{
         color:#F30;
       	 text-transform:uppercase;
     }

Other people like to scan the file for selectors, so they produce CSS with selectors and declarations on one line. I personally have a hard time with this style, but some people I know swear by it, so I present it here:


  #wrapper                        {width:800px; margin:0 auto;}
  #header                         {height:100px; position:relative;}
  #feature .post                  {width:490px; float:left;}
  #feature .link                  {width:195px; display:inline; margin:0 10px 0 0; float:right;}
  #footer                         {clear:both; font-size:93%; float:none;}
  #footer .wrapper                {float:none;}

Whatever style you use, it’s good practice to minify your CSS before pushing to production so that all the extra characters you pump into your sheets for ease-of-use as a developer don’t slow down the experience of your users.

Shorthand

There are two ways to approach many families of CSS properties: verbose and shorthand. Verbose properties look like this:


.verbose {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-style: italic;
    line-height: normal;
    font-weight: bold;
    color: #003333;
    background-color: #FFFFCC;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 20px;
}

Shorthand looks like this:


.shorthand {
    color: #003333;
    font: italic bold 12px/normal "Times New Roman", Times, serif;
    background: #ffffcc;
    padding: 5px 10px 15px 20px;
}

Once you’re used to it, shorthand is much faster to write and it takes up a lot less space. So… use shorthand. To get you started, here’s a fancy guide Dustin Diaz put together a few years ago. It’s out of date for newer properties, but it’s useful for the stuff you’re going to use every day.

One thing that’s super-useful to remember is the TRBL acronym which give the order of values in properties like margin and padding.

Reset Style Sheets

Much has been written about reset style sheets. I’m not going to add to the noise here. The point of them, simply, is to level the playing field across browsers so that you start from a common point when creating styles for your site or application.

I use one, and suggest you do too. As to which one, for a while I used a variation of Eric Meyer’s reset reloaded with the later addition of the following line in place for HTML5 sites to set proper display types for the new elements:


article,aside,canvas,figure,footer,header,hgroup,menu,nav,section,summary {
    display:block;
}

For my latest project we’re using this HTML5 Reset, which is based on Meyer’s sheet and adds several HTML5 enhancements.

I like it.

Organization

I organize my style sheets by area of the page, seriously influenced by the order in which I work on things.

The basic structure might look something like this:

_____________________
|   Copyright                |
------------------------
|   Common colors         |
------------------------
|   Reset Section          |
------------------------
|   Basic Typography     |
------------------------
|   #Header                 |
------------------------
|   #Content                |
------------------------
|   #SideBar                |
------------------------
|   #Footer                 |
------------------------
|   #Random Widgets    |
------------------------

I try to comment each section clearly and comment where appropriate outside of the sections to illustrate strange and wondrous constructions.

A small (production) snippet might look like this:


/* -------- COLORS ---------
lightest gray: efefef
light gray: ccc
medium gray: 999
darker gray: 666
darkest gray: 333
light blue links: 69F
body light blue links : 4B87C2
dark blue links : 036
visited: 306
red 930
--------------------------*/
/*reset section*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
ol, ul {
	list-style: none;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
footer, section, article, nav, header, aside, figure, dialog {
	display:block;
}
body {
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	color: #666;
	background-color:#ccc;
	padding-bottom:50px !important;
}
strong {
	font-weight:bold;
}
em {
	font-style:italic;
}
/*main div- holds the rest of the site*/
#container {
	margin: auto;
	width: 992px;
	background-color:#fff;
}
/*************header*****************/
#header {
	padding-top:20px auto auto 0;
	border-right:10px solid #fff;
	border-left:10px solid #fff;
	position:relative;
}
/*the anchor inside the h1*/
#container #header h1 a {
	text-decoration:none;
	color:#999;
	font: bold 30px Consolas, Inconsolata, "Lucida Console", Monaco, "Lucida Sans Typewriter", monospace;
}
#header h1 strong {
	color:#333;
	margin-right:-16px;
}
#header h1 em {
	color:#666;
	margin-right:-16px;
}
#header h1 a:hover {
	text-decoration:underline;
}
/*tagline*/
#respond, #container #header .title {
	font-size: 18px;
	color: #999;
	margin-top:10px auto 20px auto;
	font-style:italic;
}
/*end header*/
/************************main content area*****************/
/*overflow:auto clears floats like magic*/
#content {
	overflow:auto;
	border-right:10px solid #fff;
	border-left:10px solid #fff;
}
/*main copy area*/
#container #copy {
	width:600px;
	border:1px solid #999;
	padding: 16px 10px 16px 12px;
	float:left;
	-moz-border-radius: 12px; /* FF1+ */
	-webkit-border-radius: 12px; /* Saf3+, Chrome */
	border-radius: 12px; /* Opera 10.5, IE 9 */
	-moz-box-shadow: 0px 0px 8px #999; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 8px #999; /* Saf3.0+, Chrome */
	box-shadow: 0px 0px 8px #999; /* Opera 10.5, IE 9.0 */
	margin-bottom:20px;
}
/******************************/
/* AND SO ON                                   */
/******************************/

Again, it’s useful to minify your CSS to strip out all of those comments and all of that whitespace. Comments are good for development though, so be sure to use them.

and there you have it. some info on some very basic, but very important CSS practices. Next time we’ll start to look at common techniques.

Should be fun.

HTML5: What You Should Be Using Right Now

Rob Larsen — Mon, 09 Aug 2010 16:01:44 +0000

Continuing our examination of HTML5, this time we’ll take a slightly deeper look at the state of HTML5 support in browsers. We’ll step through several major features, examine the technical hurdles in place, identify the level of browser support and finally provide some recommendations on whether or not to pull the trigger with that shiny new feature.

New Semantic Elements

HTML5 has added many new semantic elements. These both codify existing, common patterns and offer new, meaningful ways mark up your content. So, for example, going forward, instead of using

we will now just use

. Some other examples (with definitions culled from the specification) include:

section

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

footer

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

nav

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

article

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

That’s far from a complete list, but it should serve to give you the flavor of what’s available.

Support

This is a curious case. If, by “support” we mean “doesn’t break anything” then the support here is broad. Using the HTML5 Shiv code snippet or the full blown Modernizr library every browser that matters supports the HTML5 elements. If you’re expecting user agents to do something interesting with your new elements, then the support level is much lower.

The Verdict

Do it. This very site is built using the new semantic elements and it’s the fourth such site I’ve built in the past year. I’m happy to report- I’m still standing. While there’s a slightly higher degree of difficulty and there’s less certainty around HTML5 best practices than exists for earlier flavors of HTML; the hands-on experience with the new elements is enough reason to start using them as soon as possible. All the tutorials in the world can’t stand up to using the new elements against your site and solving your own problems with them.

How-to

Pretty easy, really. To allow the styling of the new elements in Internet Explorer (other browsers automatically allow unknown elements to be styled), either include the HTML5 Shiv

This is a reasonable solution because you only have to encode and store one mp4 version of the video and it will cover pretty much any browser/OS combination that matters.

Additionally, outfits like BrightCove are working similar techniques into their platform work. Worth keeping in mind if you’re shopping for video solutions.

*Technically we have a third camp, as Google, with their Chrome browser, actually supports both.
**Hopefully everyone will come together under the WebM banner, since it solves both the patent and quality arguments of the two warring camps, but that’s for the future to decide.

Geolocation

Geolocation, a method of informing a website or web application of a user’s geographical location, isn’t “proper” HTML5, but it is of interest these days and is generally included as part of the informal specification, so I’m including it here.

Support

The new navigator.geolocation object is supported by Firefox 3.5+, Chrome 5.0+, Safari 5.0+, iPhone 3.0+ and Android 2.0+. Beyond that, using something like Google Gears, or even just the user’s IP address, it’s possible to get some location data using other sources. Here’s a quick demo using the YQL Geo Library. It should do something in pretty much any browser.

The Verdict

If you don’t need absolute precision for all users or then by all means, work some secondary geolocation features into your site or web application. You can do a reasonable job in a wide range of browsers. If you’re trying to get high quality location data then your options are a little more limited in the browser.

How-to

Using a library like geo.js or the previously mentioned YQL Geo Library smooths out the rough patches between the geolocation api itself and the various fallback methods. For a quick illustration of how easy it is to get basic data, here’s the entire script used in the above demo:


document.getElementById("geolocate").onclick= function() {
      yqlgeo.get('visitor',function(o){
			var result = document.getElementById("result");
			result.innerHTML += " " + o.place.name + "," + o.place.country.content +  " (" + o.place.centroid.latitude + "," + o.place.centroid.longitude + ")";
			result.style.display="block";
		}
	)
}

Not much to it, but using that you’ve got a friendly place name (which is provided by a yql service, not the geolocation api itself) and lat/long (the heart of the actual geolocation api). From there you’ve ready to spin a web of location-based wonder and amazement.

Looking to the future, using the actual underlying geolocation api isn’t much more verbose with the navigator.geolocation.getCurrentPosition providing a straightforward interface to the browser’s location data.

Web Storage

Web Storage is a method of storing data, in the form of name/value pairs, locally on a user’s machine. File this one under: not flashy, but super useful.

Support

Stunningly, the latest version of every major browser supports localStorage. You get 5MB of persistent storage across the board. For IE7 and IE6, if you really had to figure out a local storage solution, you could potentially leverage userData or Gears, both of which offer similar functionality.

The Verdict

With such broad support, it makes sense to start enhancing pages with localStorage. Saving trips to the server is always good, so storing more (non-sensitive*) data on the client side is going to be a positive for your users.

How-to

At the most basic level, there are three things you need to know about, setting items, getting items and the storage event.


//use modernizr to test for support
if (Modernizr.localstorage) {
    // window.localStorage is a go!
    function setGet(){
        //set some data. It's stored as a String, btw.
        localStorage.setItem("dharma.station.swan.status", "destroyed",);
        //get some data
        var swanStatus = localStorage.getItem("dharma.station.swan.status");
    }
    //we can also listen for storage events
    function omgStorage(){
        alert("someone stored something. Just though you should know.");
    }
window.addEventListener("storage", omgStorage, false);
}

PersistJS

PersistJS is an excellent, cross-browser interface to the fll spectrum of localStorage and related solutions. Providing a single interface to the W3C version, Internet Explorer’s, Gear’s and even Flash’s implementation, Persist is a solid solution for the current fragmented local storage landscape.

Here’s what a simple example of Persist looks like in action:


var store = new Persist.Store("MyData");store.set("MyName", "Rob Larsen")
store.get("MyData", function(ok,data){
	if(ok){
	    	console.log(data);
	   }
   })

*data is saved unencrypted on disk

Canvas

To quote the spec, Canvas is “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” It’s one of the most exciting of the new HTML5 features because it promises the ability to do really advanced graphics, games and visualizations right in the browser- without the aid of a plugin. Staying within the web standards stack we can now start to do some of the things we relied on Flash for up until now.

Support

The latest version of every browser but Internet Explorer supports Canvas natively. Thankfully, support for IE can be provided by the Explorercanvas library, a clever bit of coding that transforms Canvas methods into VML. The downside to that is, of course, speed. Performance for more complicated Canvas scripting is very slow on IE. This is especially true for animations and interactive elements. In addition there are several canvas features that simply don’t translate. Still, it’s a viable solution.

The Verdict

If you’re willing to sacrifice a little bit of speed in IE and aren’t pushing the boundaries of what Canvas is capable of, it’s pretty safe to start using Canvas right now. Explorercanvas works pretty well, and in browsers that support it natively, the experience can be great.

There are also concerns about accessibility, which is definitely something to keep in mind.

How-to

A proper how-to for the canvas element is beyond the scope of this article. In place of that here’s an extremely simple demo and some code that will hopefully illustrate basic concepts.

Here’s the demo. It converts a data table into a bar chart using some canvas methods.

Wow, that was fun.

Let’s look at the code.

The HTML is nothing special. The Canvas element just sits there until JavaScript brings it to life.

15	25	10	25	50

Here’s the JavaScript. Comments inline.


document.getElementById("canvas-controller").addEventListener("click", writeCanvas, false);

function writeCanvas(e){
//we need a reference to the canvas. Typical DOM stuff
    var canvas = document.getElementById("canvas-sample");
//Then we get the "context." It's the reference
//to the drawing surface itself.
var context = canvas.getContext("2d"); 
//get the data cells
    var tds = document.getElementById("data-table").getElementsByTagName("td");
//set up a list of colors
    var colors = ["#3366FF",
        "#6633FF",
        "#003DF5",
        "#002EB8",
        "#66FF33"
    ];
//Let's draw some grid lines
    for (var y = 0; y < canvas.offsetHeight; y += 10) {
//moveTo and lineTo are pretty clearly named functions.
//move the "point" to a new place
	    context.moveTo(0, y);
//and plot a line
    	context.lineTo(canvas.offsetWidth, y);
    }
//what's not clear is that running the above commands doesn't
//actually draw anything. These next two commands do.
//set a style for line "stroke"
    context.strokeStyle = "#ccc";
//and then call the function that makes the lines happen
    context.stroke();
//set a bunch of variables
    var basewidth, spacing, width, height, posx, posy;
//loop through
var i = tds.length;
	while (i--) {
//calculate a uniform "base" width for the bars
   	basewidth = canvas.offsetWidth/tds.length;
//set up some spacing
    	spacing = basewidth/4;
//calculate the actual width of the bars
    	width = basewidth - spacing;
//set up a height. This isn't actually to any scale.
//It just looked good 
    	height = parseInt(tds[i].innerHTML)*3;
//calculate the x position with some spacing between the bars
    	posx = (i * basewidth) + spacing/2;
//pin the bars to the bottom of the canvas
    	posy= canvas.offsetHeight-height;
//set the color
    	context.fillStyle = colors[i];
//and then fill it.
//The fillRect takes (x,y,width,height) as arguments
    	context.fillRect(posx, posy, width , height );
    }
//stop the clicks.
    e.preventDefault();
}

And that’s that.

Hopefully you’ve come away with a better understanding of the current support levels for HTML5. All in all, it’s really not that bad. The landscape is manageable for many of the newest technologies and if we can light a fire under Microsoft to release IE9 it’ll only get better.

So basically, pick your spots, understand the risks, and dive right in.

This post originally appeared on the Isobar North America blog

I’m Going to be Presenting at Design Camp Boston

Rob Larsen — Sun, 08 Aug 2010 14:04:59 +0000

I’m going to be presenting my Intro to CSS talk at Design Camp Boston on November 6, 2010. It’s at NERD. If you can’t make my Boston PHP Meetup version of the presentation, here’s your chance. Failing that, make sure to say hi if you’re there, because I’ll be around all day taking in the goodness.

How To Make a Web Site the Modern Way. Part 13: The Cascade/CSS Specificity

Rob Larsen — Mon, 26 Jul 2010 14:37:14 +0000

One of the most important things in CSS is understanding the way rules are inherited and applied in the browser. This is one of those things that many developers “get” intuitively but don’t necessarily understand at a granular level.

There’s actually an algorithm, so if you’re stumped, you can actually count it out. It works like this:

First, find all rules that apply to the target element/property. This will be some combination of browser default > style sheet default > targeted rules. One easy way to visualize this is to look at the “styles” tab in Firebug.

That view encompasses the latter two parts (style sheet default > targeted rules.) The first part (the browser default), is in effect an ancestor of the (otherwise, root) HTML element.

Once all the rules are gathered calculations are made to decide which ones are to be followed and which ones are to be discarded.That works like this:

Sort by explicit weight- ‘!important’ rules carry more weight than normal declarations.
Sort by origin: the author’s style sheets trump the browser default values.

Sort by specificity of selector. More specific selectors trump more general ones. The formula is as follows:

factor in any inline styles
count the number of ID attributes in the selector
the number of CLASS attributes in the selector
the number of tag names in the selector

Some examples:

Selector	# of INLINE RULES	# of IDS	#of CLASSES	# of TAGS	Specificity
LI	0	0	0	1	0,0,0,1
UL LI	0	0	0	2	0,0,0,2
DIV UL LI	0	0	0	3	0,0,0,3
DIV UL .red	0	0	1	2	0,0,1,2
#myLI	0	1	0	0	0,1,0,0
	1	0	0	0	1,0,0,0

Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

If two rules only impact one column, the higher number wins. If the selector cuts across more than one column, the biggest numbers in the farthest most left column wins. So, inline styles (which you should avoid) are more specific than an ID, which, in turn is more specific than a class, which itself will trump a tag. If you can wrap your head around these concepts, you’ll go a long way towards making sense of CSS and how the rules are applied.