HTML + CSS + JavaScript » Web

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…

I’m Going to Enjoy Writing Code for Internet Explorer 9 (I Can’t Believe I Just Typed Those Words)

Rob Larsen — Wed, 30 Jun 2010 21:33:25 +0000

In case you missed it the latest Internet Explorer 9 Platform Preview is out and it’s a thing of beauty. It added Canvas support so the first thing I did was run it through some demo code. It’s faster than Chrome. Visibly faster. No benchmarks needed. It’s such an incredible difference from the current Internet Explorer family which are many times slower than the good browsers out there.

The good news doesn’t stop there. There’s actual standards support.

PPK enthuses:

In the past few days I’ve been revising the CSS compatibility table with information about the latest crop of browsers. There’s no doubt about it: this is IE9’s show. It just supports nearly everything. No hassle, no buts.

And then enthuses some more:

Well, I’ve revised the DOM CSS and the DOM CSS OM tables, too, and IE9 continues its march. It supports the standards!

Let’s be more specific. The following methods or properties were not supported by IE8 or lower, but are supported by IE9:

getComputedStyle()

cssRules[] (in addition to the proprietary rules[])

deleteRule() and insertRule() (in addition to the proprietary addRule() and removeRule())

innerWidth/Height and pageX/YOffset (!!!). Ever since the Browser Wars IE has refused to support these originally Netscape-proprietary properties, but IE9 supports them.

pageX/Y (!!!). Back in 2002 I complained that IE didn’t give us the opportunity to read out the coordinates of a click event relative to the HTML document. Now IE9 finally gives us what we need.

He’s not the only one enthusing:

The big news is that IE9pre3 has (almost) full support for ES5. By “full support”, I mean that it implements majority of new API, such as Object.create, Object.defineProperty, String.prototype.trim, Array.isArray, Date.now, and many other additions. As of now, IE9 implements the largest number of new methods; even more than latest Chrome, Safari and Firefox. Unbelievable, isn’t it?

I know people hate Microsoft. I know Internet Explorer (especially 6) has caused a lot of pain over the past few years. I get it. Thing is, a lot of people still use IE as their main browser, so seeing movement like this towards standards and performance by the Internet Explorer team gets me excited for the future.

In Case You Missed It:

Rob Larsen — Fri, 07 May 2010 02:38:37 +0000

I started doing some writing for Isobar/Molecular.

My first post:

An Introduction to HTML5

HTML5 is the latest version of the language that serves as the foundation of the web. It’s the first major revision in over 10 years and as it’s gotten closer to its final form and more and more browsers begin to implement its features it’s become a source of intense interest and contention in the technology community. This article hopes to explain the realities of HTML5, dispel a couple of myths and shine some light on the future of the web.

To begin we’ll need to define what we’re talking about when we say “HTML5.” There is a specification to refer to and much of what falls under the HTML5 name lives in that spec. In addition, there are several related specifications and APIs that are lumped together and called “HTML5″ when people talk about these things informally.

So, conversationally, HTML5 consists of the following:

New Semantic Elements

HTML5 has introduced several new elements. They aim to introduce more meaning to markup and codify existing web development patterns. Some examples of these new elements are nav (for navigation), article, header and footer.

Read the rest of this entry »

I also added a few bits and bobs to our our front-end development best practices, a doc which has been making the rounds a little bit over the past week.

Check ‘em out.

DrunkenFist.com Redesign Launched. More HTML5 Goodness.

Rob Larsen — Mon, 01 Mar 2010 16:52:40 +0000

I launched the redesign of DrunkenFist.com last night. It’s my second HTML5 site. I took a lot of what I learned from the work we did on A Wider Net and applied it to a much larger project. Fun times.

A couple of notes.

Modernizr

I didn’t use Modernizr because I didn’t really use any advanced features in the site beyond the new elements. Well, I did use box-shadow on the menu dropdowns (do those qualify as “mega-dropdowns?”) but nothing else. Since the design won’t look broken in lesser browsers without the drop shadow, I decided to forgo Modernizr’s hints and just stick with the “fix it for IE” loop in the head.

Events

One advanced feature I did use, was the new Rich Snippets Events format. With Rich Snippets: Events Google leverages the hCalendar microformat to produce computer readable events that they can display in search results. Who knows if mine will get picked up, but my next art show is marked up all purty.


    
		Upcoming Art Shows
		
			http://www.drunkenfist.com/304/2010/01/24/new-art-thing-paint-it-now-march-19-april-29-2010-the-distillery-gallery/"
				class="url summary">"Paint It Now"
			 March 19
				 
			-
			 April 29, 2010
				 
			
				The Distillery Gallery,
				
					516 East Second Street,
					South Boston,
					MA

Ant

I also spent a lot of time working with Ant. I’d never really worked with it before, authoring build scripts. I’d only consumed them. For this project I went to town, going from zero to sixty (it feels that way to me at least) in just a few weeks.

I’ll be writing up some performance related ant tasks in the coming weeks.

And there you have it. Please poke around the site and let me know if you see anything really crazy. There’s no IE6 support at current (and there may never be ). Other than that it should be okay in all modern browsers. If it’s not please let me know so I can make it shiny.

How To Make a Web Site the Modern Way. Part 3: A Quick Aside on Organizing Files

Rob Larsen — Wed, 17 Feb 2010 17:42:45 +0000

This won’t be the longest entry in this series, but I did want to take a second to outline the way I organize files. You can come up with your own scheme. There are many. This one works for me, so I use it. The basic idea is to keep everything in a logical, easy to find place every time I make a site.

Let’s take a quick look at the generic file structure I use:

Grab a copy from the starter assets repository if you’d like to play along at home.

Let’s look at each in turn:

_assets

_assets is the place where I keep everything that’s not content. The underscore and the initial “a” mean it’s going to be at the top at most file dialogs. That’s cool since you’ll be in and out of this folder throughout the web development process.

flash

Not surprisingly, this is where all your fancy .swf’s and related files live.

I used to do some Flash. Not so much over the past couple of years. It’s almost turned into a “there be dragons here” kind of thing with the flash folder on projects. Which is a good thing, because it can get complicated in there. All I usually need to know is what SWF to grab and what parameters I need to set with SWFObject.

images

This is where I keep content images. In the case of my site that means gallery images and images used to illustrate movie reviews. It could also mean something like the charts and graphs that would serve as content on a financial site.

scripts

JavaScript lives here.

Why scripts and not the shorter (and therefore lighter weight) js? I thought about it and realized there could potentially be other type of scripts included on a page, so I shouldn’t assume that everything would be JavaScript and named it accordingly.

styles

Site style sheets live in this folder. When starting a project this generally means a screen.css for screen display styles and a print.css for printed pages. The images subfolder contains all interface images. I keep them segregated there so I have simple access to them from the style sheet


.mystyle {
background:#fff url(images/myimage.png) repeat-y;
}

And that’s it- the basic folder structure I start every project with. Hopefully it makes at least a little bit of sense. Almost every example going forward will reference a structure much like this one.

There are other folders that end up in _assets from time to time. For example, inc is a common one used to hold HTML snippets includes and media is used for audio and video files. The ones above are the real standards though, used more often than others, so they’re included in every project.