My notes from the #html5devconf in San Francisco, CA on Monday, October 15 & Tuesday, October 16 – 2012.

Cache is King

9:00am : Keynote
Steve Souders from Google

• http://www.slideshare.net/souders/cache-is-king
• http://webpagetest.org
• http://www.stevesouders.com/blog/2012/10/11/cache-is-king/

My Ramblings

• mobile connections are high latency, duh
• last modified & etag
• conditional get requests suffer to latency, it’s still a request
• cache-control/max-age: max seconds before checking
• if you change the file: change the name (a la cdn)
• cache-control: max-age=0, must-revalidate, no-cache – always new file, ALWAYS
• cache deliberately!
• heuristic cacheing: a “freshness lifetime” some fraction (10%), fraction of time since last modified
• bringing it home (w/love): mostly good, but some that demonstrate ambigious caching (by doing nothing)
• oooh app cache:
  • if anything is 404’d – nothing is cached
  • ~5mb
  • must update manifest AND resources (right)
  • takes two reloads – yes. app cache isn’t the shit it’s cracked to be
  • the point of apcache: touch the network as little as possible
  • updateReady work around for load twice issue
• stick code in localStorage? WAT?
• browsers will get smarter with local preferred caching. that won’t help us though.

My Summary

The cache IS in fact king, and while many many things matter payload size, number of requests, execution time, etc – not having to fetch something is faster than having to.

Browserify – Use Node Modules in the Browser

10:30am
James Halliday from Browserling

• http://browserling.com/
• http://testling.com/
• https://github.com/substack/html5devconf-examples

My Ramblings

• npm is amazing – don’t forget! 16k packages
• “make crazy mad science happen”
• node modules return values, don’t modify context
• require is the other side of the commonjs
• browserify will recursively traverse the entire dependency graph
• can also use node core api –watch and save as you will
• huh: you can require a json file with node and it returns the object back to you.
• jsonSTREAM would allow us to only parse what we want from bloated json responses from the server.

My Summary

It sounds super awesome to do this. If we could get our backend to node, we might totally do this. Also, James/Substack totally comes across as a super genius; In the good way.

HTML5: Postcards from the Bleeding Edge

11:30am
Peter Lubbers from Google

My Ramblings

• wifi dead – couldn’t note take, but this was more about building websites than games. in fact, most of the new apis and such discussed aren’t supported on mobile yet anyway.

My Summary

As noted above, this is more relevant to desktop, mobile is out for now.

What You Could Have Built With HTML This Whole Time

1:20pm
Stephen Blum from PubNub

My Ramblings

• html has perceived limitation.
• this talk has an actual limitation

My Summary

Maybe it was an off talk/day or something, but this presentation came across as more about promoting the company than sharing.

Single Page Web Applications: JavaScript End to End

2:20pm
Josh Powell from Rocket Fuel

My Ramblings

• this talk is packed
• general info about what a SPA is (single page application), perks:
• distributed load, one language, one data format
• “all javascript, all the time”
• cons: back button, search, messy, analytics, sense of errors on client side, approach:
• back: use history api & hash (onhaschange)
• search: use #! & ?_escape_fragment_=key=value
• messy: use patterns “do the work”
• analytics: do the work to GA api
• exceptions: throw errors somewhere (airbrake, bugsense)

My Summary

It was srsly hot in this upper room. The talk was solid, tech focused, and relevant. It was short though, only 30 minutes. Might be worth buying the book.

• Do not get an office.

  Use communal spaces for times we must meet and work in-person. Use the internet and computers for everything else.

• Do not get phones for people.

  If people don’t have phones, they don’t need one. Use their personal numbers.

• Do not buy “company” computers.

  Give them a stipend to buy their own machine or they can use one they have. You wouldn’t be hiring them if they didn’t have their own machine.

• Do not get business cards.

  Use peoples individual cards. If you’re the founder, then your personal card probably has the business logo on it.

• Use google apps.

  To get your names at your domain. but just forward that to individual email addresses.

• When we need to meet with clients.

  Take all the rent for an office and shelves and such we’ve saved, and go to a swanky place. or a dive bar.

I think the point is that the individual brand is here. When you hire someone, you are hiring them. The people they know. The brand they have and are. Don’t spend all this time building up a facade brand of the your company version of said person.

Updates Again

So @t (Tantek) via a @meyerweb @alistapart interview: This is the key point

“In addition, we are considering only supporting the -webkit- prefixed version of a property if and/or when we also support the unprefixed version.” Where we is Firefox Moble.

@meyerweb delivered a great interview, asking simple, pointed questions that needed to be asked. And @tantek did an excellent job answering them directly. All in all, it makes the kerfuffle over this seem a little less relevant, or does it? I take exception with a few assertions.

1. “When users see a substantially worse experience in a different browser on the site on the same device, they blame the browser, not the site, nor the device.”: Um, most users don’t know what a browser is, much less have multiple ones installed on a mobile device and know enough to blame one over the other.
2. “Should we give up on vendor prefixes now, despite their imperfect but impressive track record?”: This was asked by Tantek. Is this a joke? No. Of course not. The implied meaning here is unclear to me.
3. “As web developers, there are few key things we can do…”: And then goes on to list things, which, as far as I can tell, are what developers should be doing anyway.

While I do agree that the responsibility for doing things right and doing the right things falls on developers, this whole things is starting to feel like Mozilla/Firefox Mobile whining.

Here is the problem: Supporting another agents vendor prefix takes away the ability of the developer to control (by virtue of which prefixes are implemented) which agents receive this information.

• Developers: Keep doing your job. CSSWG nor Mozilla cannot make you do or not do it well.
• CSSWG: Don’t bail on vendor prefixes.
• Mozilla: Browser-up.

Updates

@plniss clarifies: http://remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south/#comment-370255 – “Having a vendor prefix in a specification will simply not happen, ever. What has been discussed is simply adopting the WebKit implementations of those properties as the standard, however the standardized properties will not have the -webkit- prefix.”

Huzzah! Furthermore:

“The issue here is other vendors implementing support for -wekbit- prefixed properties in direct violation of the standards.”

#word However, the CSSWG can’t make browsers not do stupid things.

@ppk sounds off: http://www.quirksmode.org/blog/archives/2012/02/the_vendor_pref.html – I disagree with the idea that developers aren’t responsible and love the idea of -beta- prefixes.

@dandean pointed me to this: http://infrequently.org/2011/11/vendor-prefixes-are-a-rousing-success/ – #word. Also, -beta- would be better, though responsibility stays in developers hands.

@catalinred retweeted: http://www.webmonkey.com/2012/02/webkit-isnt-breaking-the-web-you-are/ – more of the same responsibility song. #like

Hmm

The more I think about it, -beta- would have it’s own challenges. Sure, we’d know we’re doing something experimental – which is good, but it would prevent us from targeting specific user-agents, or NOT targeting them. That would kinda suck.

I’m still sorting through all the articles posted and the initial discussion, and while certainly folks have passionate opinions – which is a good thing! – perhaps things will look better in the morning. After a breath. After a snack. How I would love some toast right now.

There’s http://lea.verou.me/2012/02/vendor-prefixes-the-css-wg-and-me/, and http://daneden.me/2012/02/css-prefixes/, and http://www.kryogenix.org/days/2012/02/09/on-vendor-prefixes-in-css-and-vendors-implementing-them, and http://remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south/, and http://www.brucelawson.co.uk/2012/on-the-vendor-prefixes-problem/, and the original discussion.

Btw, how fantastic is it that this discussion was so published? Huzzah for standards bodies! And also for everyone sharing their thoughts and participating. Not to be too much of a Gumdrops Gary, but this whole process is awesome. It’s the future of humanity. #theInternetWillSaveUs

If you haven’t watched the When We Build video, do so.

It is our responsibility as designers and developers to do the right thing. We know how and the resources from where to grab the stack of vendor prefix fallbacks that covers our targeted user agent audience, and remains standards compliant (using the non-prefixed versions).

Standards bodies are here to slow everything down a bit. Not be so hot-headed. To establish a path that will endure. Browser/Agent makers are here to meet the needs of the now. Implement all the newest proposed features. Make up new features. This creates an inherent tension between the two. This tension is good. And designers and developers have the glory of deciding how to proceed. What to implement for whom based on their target audience.

Being a designer/developer really is the best job.

It seems some respectable folks are coming down on the side of doing away with vendor prefixes. I don’t understand that. Though, to be fair, I’m not respectable. If browsers/agent makers are threatening to shoots the standards body in the head (by incorporating support for vendor prefixes explicitly), is it really a rational response for the standards body to shoot itself in the head (dropping vendor prefixes altogether)? I don’t think so.

The standards folks can’t stop browser/agent makers from doing something stupid.

I have found this vendor prefix route to be far superior to what we used hafta do, what with comment escaping hacks, or relying on the incorrect implementation working correctly in it’s incorrectness. Bleh. That sucked. Prefixes are much better. Plus as the path for the future gets rolled out, ever onward, and old prefixes fall away in favor of supported implementations, they do no harm. We should still remove them anyway.

The standards folks can’t stop designers and developers from being lazy.

These things we build are alive. The go on and on. They require love. The need to be pruned at the right times and for the right reasons. Designers and developers who aren’t doing the right thing won’t be designers and developers for too much longer. Putting code in production on behalf of clients for the world to consume is a sacred trust. We are the defenders of how the new world will be. It is a total rush. Even when it is tedious.

Hopefully everyone will take a day off from this sensitive area. Do some work. Read. Whatever. And come back to this when you’re feeling calm. It’s natural to get heated over this – it is important. But let’s not do anything rash.

We are where we are because of the path that lies behind. Let’s try to remember that.

I don’t own very many things and the things that I do own, I cherish and take care of; Try and use daily; Enjoy. Things like my iPhone and iPad. My guitar. My coffee mug given to be by a friend many many moons ago. I don’t use my guitar nearly enough.

Sure, I own some clothes. A few pair of shoes. Some dishes for the family. A couch even. A few beds. An iron. Some tools. But they’re all incidental to the few cherished possessions listed first. I even own a condominium, but that’s another story.

I don’t own books anymore. I really cherished books for a long while. Most of my life I guess. I owned a bookcase just for putting the books in. I still like stories and information. Love even. I no longer need to lug ideas around with me physically. Information is super in love with digital. My iPad can hold more books than all the ones I’ve ever own in my entire life combined. Times two even (probably more).

Some things aren’t yet digitize-able. But movies, books, financials, and most communication surely are. To which I take great advantage. Or try to.

I get really into trying to. Trying to be efficient. Save time on some things, to spend it in others. Imagine all the time we’ve wasted! I still waste a lot of time. It’s a process. But it isn’t on paying bills.

My personality tends toward extremism. I like to marinate. Sometimes literally, to my own detriment. But learning, absorbing, or whatever you call it, is addicting. One short hand for this I’ve come to is this modified axiom:

Give a man a fish, feed him for a day. Teach a man to fish, feed him for a lifetime. Teach him what it means to fish, feed everyone.

This is where is starts to get complicated before it gets simple again.

What does it mean to fish? It’s a harder question than it might at first appear. In the simplest form, it is applying technology to a food problem. But as we keep zooming out to get a broader picture. More context. Input Stephanie. We need to learn about more things.

There aren’t just fish. There are kinds of fish. And other animals. And plants in that ocean. There is a teeming biosphere just in that one fishing hole. And there isn’t just the one fisherman. There is his family. The region. The human race. And there are seasons, tides, chemistry, and our star.

Each context contains an inexhaustible amount of data.

But us sapiens are good at pattern recognition. So an additional strategy to trying to learn every single data there are to learn is to find some simple truths, theories, laws, whatever – that describe what’s going on. That seem to hold true every time we examine ourselves and our ideas or beliefs about whatever is it we’re examining at the moment.

Does this still make sense? Does this still hold true? Are there any new data which may change the validity of this?

A short-hand for this infinite learning phenomenon is the scientific method.

It is not a belief system. It is a doubt system. It is also the best tool we have yet for learning about the world in which we find ourselves. The Internet is a huge help in this endeavor. It helps us collect and analyze all our data.

New truths are bound to emerge. And emerge to a point which not believing in them is not a sane response. On par with not believing in gravity, for example. We can debate and research and theorize and refine, but the apple will fall.

Some things are true. Objectively true insomuch as we are able to discern. Our camera only has the megapixel resolution that it has though. Some ideas require a firmare update in order to install.

I think that’s where we are now. The reason that it feels like now is a special moment in history is because a) every moment in history is special. Now is always now. and b) because this particular now is significant.

The human race is on the precipice of undeniable realization of truth. New value systems will emerge. A new societal model will be required. One we will create together as we need it.

Take the idea of economy. An economic system. It requires a currency of exchange. And the only rational currency is energy. Or one based on energy. Not the scarcity or perceived scarcity of some particular mineral. That’s it. There’s no arguing it. It’s just the way it is. It’s just the universe we find ourselves in. The matter and energy exchange is the only game in town.

Or take the idea of ownership. It’s just an idea. It’s just a thing we made up. It seemed reasonable at the time, but as we learn more and more, it’s obvious that ownership isn’t real. Take my iPhone, one of my prized possessions. What happens to it in 2 years? Hopefully there is an attempt made to reuse it’s materials (it’s the energy conscious thing to do). What about 10 years? 100? A million? A billion? At some point its entire form will be literally recycled into other materials and forms, which do other things. Are part of other processes.

What does it mean that I owned it for 2 of those billion years? Those particular particles. That particular bit of energy incarnate in that particular matter. It doesn’t mean anything. We are slowly realizing this. Currently the only thing we collectively agree is that owning another person is “wrong.”

This is normal for us. We can only learn a new idea when it relates to us. Oh, right, you can’t own a person. This agreement is recent in most contexts. A mere moment ago geologically. And right this instant cosmologically.

Owning animals of a certain sentience is considered questionable. And every day we begin to understand the nuanced intelligence of more and more of the forms of life which inhabit this planet with us. That boundary will extend further.

It reminds me of the fervor surrounding the mosque being build “near” ground zero. How close is too close? Where is the edge of too close? The answer, the truth, was and is that it was a fallacious objection. Born out of emotional response. And totally understandable. But ridicant nonetheless.

It’s almost irony, perhaps, that as we come to understand the holistic-ness of everything and our place within it, we are mortal. We struggle to learn and pass on our learnings, make emotional connections, love, be loved, laugh, express, etc…

We are the universe coming to know itself. Along with all life. And the planets. And the stars. All through a variety of journeys, each infinitely unique. There is no experience of the universe that is exactly the same as mine. It is my blessing and my curse. Perhaps more irony.

There is no way that I can prove to myself with any rational satisfaction that this entire phenomenon I am experiencing is NOT a mental blip in the mind of a comatose drooling patient. But what else am I going to do?

I choose to believe that this is a real world. A real keyboard. A real wife. Real sunlight. A real urge to go to the bathroom. And use my mind to understand it. The universe and the need to go to the bathroom. I’ve heard of that as body wisdom.

I am not a Communist. And there isn’t private property. There isn’t even property. Not really.

I agree with @rem about people sh!tting or getting off the ie6 pot. His recent thoughts on the tail of some youngings ramblings seems to have caught an edge, gotten retweeted, etc.

While we’re at it – when IE6 does eventually die, who’s going to do the find and replace on all the blog posts from IE6 to IE7, then IE7 to IE8, etc.?

Exactly. The simple fact is, this isn’t about ie6. No, srsly, it isn’t.

Remember when Chrome happened? And Firefox before that? And Safari before that? The browser wars are over. Thanks to @zeldman and large, vocal, mild-mannered standarista crew, we have a stable landscape upon which new technology and new agents (browsers) can be born.

And this is a fantastic way for it to be.

This is why feature (and not agent) detection is now a viable approach. This is why things like html5 reset and boilerplate can thrive in this era of html5 in which we find ourselves at this moment. And maybe to some extent the wonderful phenomenon of git and github. And node. The web is electric again.

We are about to be swallowed (or hugged perhaps?) by the proliferation of the web to such a diverse sea of devices upon which people (and machines!) will interact as to make now the most exciting time to ever be in this business.

There will always be old agents (browsers) that require data to justify support. Just as there will always be new agents that fit that same bill.

The phenomenon of ie6 is not some hold over relic from how things used to be, it is a ever-present manifestation how how the web is.

It is vital. It is change. It is stimulating. And it is awesome.

This is it. You’ve found it. The simplest most succinct mobile first starter template on the infonet today. Are you ready? Are you sure? Okay. Here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype html>
<!--[if IE 6 ]><html lang="en" class="ie6 "><![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie7 "><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8 "><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9 "><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--[endif]-->
<head>
	<link rel="stylesheet" href="style.css" />
	<!--[if (lt IE 9) & (!IEMobile) ]>
		<link rel="stylesheet" href="ie-reset.css" />
	<![endif]-->
</head>
<body></body>
</html>

Wow. What about the CSS?

1
2
3
4
5
6
7
8
9
10

/*mobile: base layout given to all*/
body {background:url(iphone4-bg.png);}
 
/*desktop-media-query*/
@media only screen and (min-device-width:961px) {
 
/*all your iefixes go in this file too!
.ie6 body * {zoom:1;}
 
}

So what’s with that ie-reset.css stylesheet?

That’s the one compromise. It seems a reasonable concession to us. Do yourself a favor, and maintain a one-way relationship between the contents of the desktop media-query to the ie-reset stylesheet. Then you just copy > select all > and paste. It’s a pain, but way better than the alternatives.

What about *allthatsh!t* you didn’t include?

It’s true. You’re right. I didn’t include html5.js or modernizer or the no-js classname on the html tag. I know, I should die the firey hot death of a thousand suns. I also didn’t include a title tag. Or yepnope. Or a css reset. Or microjs.com references. GA code with the async hotness. Or the apple save-to-home-screen icon reference. Or the favicon – how could I omit the favicon link?! Or the charset meta tag. Or the title and description meta tags. I am a d-Bag. Or what about JqUERY!? Or markup in the body tag! All of which (sans modernizr and jQuery) are all in my personal starter pack.

Maybe if people get all angry and hateful, I’ll post the proper files on github.

But for now this demonstrates the technique.

1. Deliver mobile style information.

2. Augment for desktop via media-queries.

3. And copy and paste to fix IE.

Done, done, and done. Srsly, that’s all there is.

Go as crazy as you wanna with different resolution (grouped) fish-ladder steps. You’re welcome internet. Back to building fun things.

We’re moving! It’s true. We’re also selling a bunch of stuff. Perhaps you’d like to buy some of it? Perfect, you are in the right place! We’ve got a bunch of craigslist ads, and a nice higher-resolution set of photos on flickr: http://www.flickr.com/photos/sunshinecharlie/sets/72157626300623488/.

If you’re interested please email me. And actually, even if you’re not, please email me and let me know that as well. Thanks.

Midcentury Pinkish/ Red couch circa 1960’s, $100

• 2 piece sectional.
• 9 feet long, 3 feet wide.
• Ad link: soon

Midcentury Stereo/ Record Player, $30

• General Electric brand.
• Radio works, record player needs work.
• Good shape.
• Nice piece.
• Ad link: soon

Three Midcentury side tables, $10 each, $20 all three

• Two tiered.
• Dark color.
• Ad link: http://

Red Director chair, $10

• Leather and metal.
• Great shape.
• Ad link: http://

Red side table or plant table, $5

• Three feet tall (3′).
• Wood. Super clean.
• Ad link: http://

Brown suede bean bag cude, $20

• About one foot square.
• Super versatile. Use as an ottoman, kid chair, or minimalist handy seat.
• Ad link: http://

Mid century white lamp, $15

• Comes with CLF bulb.
• Great shape, including shade.
• Ad link: http://

Midcentury black Eames replica, $25

• Custom back cushion.
• Low profile/sleek.
• Great shape.
• Ad link: http://

1950’s Yellow velvet bench, $20

• I found this at an antique store.
• Low profile/sleek.
• One leg is a little loose and needs work.
• Super cute piece.
• Ad link: http://