Archive for October, 2011

SVCC Scott Stanfield Html5 tools talk

These are my notes from scott’s talk 9:45AM at Silicon Valley Code Camp. Scott is http://twitter.com/seesharp

Obviously, this isn’t an exact transcription and such. Edit 11:24AM: made links into links.

scott stanfield html5 tools talk, 9:45AM

  • scott is using a 13″ macbook air
  • vertigo is hiring in portland, point richmond, portland or, virtual office in redmond WA
  • projector tourble
  • all links will be in bit.ly bundle on twitter @seesharp http://twitter.com/#!/seesharp
  • http://diveintohtml5.org/ promoted, but seems dead
  • here’s an excerpt I found: http://oreilly.com/css-html/excerpts/dive-into-html5/call-it-a-drawing-surface.html
  • html5 boilerplate http://html5boilerplate.com/
  • reset css: http://meyerweb.com/eric/tools/css/reset/
  • leading is relative to the typeface size, the space between the lines
  • one more typography term. kerning is the space between the characters, a designer doing print work might
  • the measure: the width of a bit of text on the screen or a paragraph
  • rule of thumb: your text should not exceed the alphabet twice
  • challenges for html5 sites: put your content on a screen with no constraints
  • book designers are lucky have constraints, the page size informs the designer the ratio of what they have to work with. web developers don’t have a 8.5×11 page to work with, now your content is viewed in the context of many different devices
  • scott: there are probably over 40 distinct page rectangle size and DPI sizes
  • html5 gives us tools to make our typography and content conveyance
  • every site is slightly different, the type face is slightly different, the measure is different
  • if you’re going to use html5 to change the typography and the layout, you need

to start, you need to reset the browser defaults

used to use reset.css, Remi Sharp created normalize.css

level playing field across the browser, in how content is presented

next, we need to come up with a developer technique to inquire at runtime what the browser can do. There’s a technique for this, modernizer: http://html5boilerplate.com/

it’s no longer permissible to check the browser version, if you’re targeting a specific version (especially chrome that releases every 6 weeks) you’re doing it wrong.

for example, can you do a slider in html? (yes in chrome, not in firefox)

best practices:

ie6 png: pngfix

float fixes: lots of ways

minify css and javascript, for obfuscation and faster downloads?

packaging javascript to minimize request count

satellite internet

Jacob Nielsen: number one usability metric is performance http://www.useit.com

10:00AM projector reasonably working.

http://html5boilerplate.com/ https://github.com/paulirish/html5-boilerplate

(lines starting with $ were run at a mac terminal prompt)

$ git clone https://github.com/paulirish/html5-boilerplate.git

$ cd html5-boilerplate

digression: used to use boot camp on macbook pro, but mouse didn’t feel right

there’s an add-on for visual studio called viemu for visual studio, now he doesn’t have to use the mouse.

[apparently there’s a talk about vim tomorrow. ]

vi is the only text editor that feels like you’re programming your editor, and allows you to write code without using a mouse

$ rm apple*

$ cd build

#bootstrap into a new page

build$./create-project.sh

To create a new html5-boilerplate project, enter a new directory name:

codecamp

build$ cd ../codecamp

# opens solid white web page

codecamp$ open index.html

# index.html starts with html5 doctype <!DOCTYPE html>

# added <p> welcome to code camp</p>

# reset part of css file goes 208 lines

there’s a story about why they chose the fonts and such.

# body, button, input, select, texture { font-family: sans-serif;}

# font changed to georgia

this is raw html5 and javascript, but the build script is the interesting part to compile it.

paul irish favorite features:

* build script

* web.config (server configuration for iis)

* hot pink text selection

the hot pink text selection is used to make it easy to tell a site using the boilerplate (unless someone overrides the defaults)

Scott calls it it a Shibilit (how do you spell that)

the html tag is decorated with extra classes for browsers older than ie8

there’s a meta tag to turn off IE compatibility mode. IE8 has 4 different rendering modes (quirks mode)

chrome=1 is controversial, if chrome frame is installed the page would use the chrome renderer

[was controversial because it required elevated privileges to install]

once you get the content, that’s up to you.

Scott: you want to put your javascript at the bottom of the page for better loading.

Recommended using jQuery off the google CDN

scheme-less uric: “//ajax.googleapis.com/stuff” (works with both http and https)

script to fall back if jQuery didn’t load. This would also be useful when developing locally without internet access

in MFC with c++, one of the coolest thing was that you could trace into the source code of MFC, and you could see how the architects at microsoft used the underlying api. If you had a question you could see how microsoft did it.

There’s nothing in the html5 boilerplate that is superfluous.

The two scripts at the bottom start out empty, they are for you to use.

Scott: put your google analytics bootstrap at the bottom of the page, and use the technique there to load it asynchronously. This means the page can render before waiting for the google analytics javascript to be downloaded and processed.

# removed ie6, ie7, google analytics code for examples today

<script defer src=”js/foo.js”></script>

defer is an older IE specific keyword

Question from the back: how do you use html5 boilerplate and continue to get the latest updates?

Scott: I have not seen an easy way to do it

usually you don’t need to upgrade, things are getting pretty stable now and hopefully the techniques will not be required as much as people upgrade.

modernizr will never die though, because of the rate of browser releases

html5 will be finished in about 2022

IE8 will be the new IE6 once people move off IE6

question from back right: performance question. Does the deployment script out all the helpful comments?

http://humanstxt.org/

chrome add-in to show icon in address bar

$ less build/build.xml

# eww. this is a ant configuration. May eventually be moved to rake

will minify javascript and css, combine them, recompress images

$ cd build

build$ ant

Buildfile: /Users/nick/Desktop/svcc2011/html5-boilerplate/build/build.xml

build:

[echo] Building a Production Environment…

….

BUILD SUCCESSFUL

Total time: 28 seconds

build$ cd ../publish

publish$ ls

cache-busting: don’t require users to dump the cache. Every time the build script the style.css is given a new name, and all references have been updated.

The old way of putting ?gibberish on the end of a static url would not work well with a squid proxy (a caching proxy server) because it wouldn’t be able to cache.

publish$ less js/76c1563.js

apache is built-in to mac, but not enabled.

http://localhost/~scott/projects/svcc/codecamp/

Scott: trying to test site in YSlow in firefox, but it’s not enabled.

Scott: shortcuts you need to know

* Command+L (in windows this is sometimes control+l, usually alt+d)

* Command+w (close tab)

* Command+t (new tab)

* Command+option+i (open inspector, ctrl+shift+i)

* Shift+escape opens console

http://mothereffinghsl.com/

orange = hue, saturation = how gray or orange, lightness is how white or black

http://labs.vertigo.com/GravityBox/index.htm

description:

http://thewire.vertigo.com/2011/vertigo-gravity-box-html5-canvas-and-box2djs/

demoing webkit/chrome/safari web inspector, and changing things.

double-click to change ::SELECTION background color to #BADA55 from #FE57A1

[there’s a list of these hex/english word colors. I think this is it: http://spacefem.livejournal.com/672015.html ]

resources tab

network tab. first time it doesn’t show you anything, you need to refresh the site.

You can see all the different requests.

getting http 304, not modified. It’s already cached, the browser doesn’t need it.

clear browsing data from last hour.

refresh, now all the requests on the resources tab are http 200 (the files were downloaded again).

the kind of compression and request headers for caching that make things go fast are set up here.

now we’re going to shift the site to another web server: node

node.js is javascript on the server

javascript has some good parts (crockford’s book), and some ugly parts

javascript has nothing to do with java.

it used to be called livescript.

we normally think of it as running on the client. It’s only been able to run on the server recently, because google let their V8 javascript runtime run outside of chrome.

node will never block waiting for a request. Unlike threaded web or process driven web servers. Example from in-n-out.

At most 2 cash registers at in-n-out. There’s always a wait.

order is always single animal style. There’s a guy at the office that ate a 4×4 unironically.

Imagine if you made your order and stood there waiting for your order to come up. The only way they could scale that is with lots of registers.

So what in-n-out does is they give you a callback function, (your number, which they call when your order is done). You hover around waiting for but it doesn’t hold up in-n-out.

That’s what node.js does.

when you install node it gives you a REPL (read-eval-print loop)

>1+3

4

> console.log(“hello world”);

hello world

> process

… a bunch of stuff

in node, process is the global object, like “window” is in client side javascript.

simple hello world.

setTimeout(function(){console.log(“world”);},1000);

console.log(“hello”);

prints “hello” then a second later “world”

there’s another example that prints world every second.

[I’m not going to type the rest of these code examples in, sorry]

simple web example, hello then world 2 seconds later. ran this in apache bench and the requests all came back in 2 seconds.

there’s node.js configurations for html5 boilerplate in its own repo: https://github.com/paulirish/html5-boilerplate-server-configs

express example using less for css

http://expressjs.com/

cannot find module jade

Scott: Jade, Less, Markdown

Scott: Javascript, CSS, html5. All built for computers.

Markdown allows you to create a text file that a human can look at and understand what it says. http://daringfireball.net/projects/markdown/

Jade is html with all the “googlybits” stripped out. It mostly uses whitespace. http://scalate.fusesource.org/documentation/jade.html

In the CSS world, there are two abstractions above CSS that make things better. SASS is a bit unusual (http://sass-lang.com/), LESS lets the designer/developer have constants for colors and sizes. http://lesscss.org/. There’s also a javascript library that can convert less to css client side.

In the javascript space: Coffeescript. http://jashkenas.github.com/coffee-script/

Coffeescript code example and awesome demos: http://weblog.jamisbuck.org/2011/2/7/maze-generation-algorithm-recap

Scott’s vim dotfiles on github:

https://github.com/rm8t/dotfiles

The readme.md is a markdown example.

Leave a comment