2010 was a tear/break down and (re)build. Still, 1st book: @HTML5Now, deployed @Falcon, @CSS3color to PR, and restarted the blog. Met some wonderful people both personally and professionally. Ending the year on a solid uptick and already excited about next year's potential and possibilities. Like the dude says, now for some real user power.
compared iflyswa.comkayak.com which sent me to jetblue.com for best direct SFO-AUS #SXSW flights now booked. JetBlue also flies out of the International Terminal at SFO which is *much* more convenient (than United, American, Southwest). Book quickly, prices will go up, and if you're an independent, you can deduct it from 2010 income.
also finished TRON:Betrayal graphic novel, more backstory. Good, but see http://ttk.me/w/TRON-Betrayal-errata documentation of where TRON:Betrayal contradicts or is otherwise inconsistent with the earliest backstory of TRON:Legacy, the original TRON movie: http://tantek.com/asin/B00005OCMR. Full TRON timeline to date so far, with some overlaps: TRON, TRON:Betrayal, TRON:Evolution, TRON:Legacy. That was a fun distraction. Now back to work.
Tip: Want to keep down(up)loading/processing while walking with your closed MacBook Air? Check out InsomniaX, recommended by Stephan at the Apple Store SF: http://www.macupdate.com/app/mac/22211/insomniax Warning: don't use with internal moving/spinning *disk* drives. SSD only, for reliability and heat reasons.
In other news: with online orders and today's Apple store visit, Port Zero will be startup ready by year end. success = preparation + opportunity + initiative. Not a pre-announcement of anything other than barrier/friction reduction and battle-readiness. Still focusing on open web standards for Mozilla for the foreseeable future.
I really need to build "in reply to" support into @Falcon. But first coffee, thanks to @Starbucks being open. Building Star Wars LEGOs with aforementioned nephew (he got quite a few today) comes next. Then coding.
@maryspecht@asadotzler I tend to agree, prose is easier to remember than punctuation. And now bed, expecting nephews will awake quite early to open their ritual gifts. Sleep well all, and happy holidays, whatever your practices.
Dear UX/content folks: which is easier to say/repeat? Go firefox.com/beta or google Firefox beta? Try FF4 b8, compare to Chrome, Safari, etc. in terms of rendering/scripting performance/fidelity, and let me know what you think!
Congrats @aprilini@ceedub! Some early photos: flickr.com/photosof/aprilini+ymbiont/page5/ (may need login or reloading due to Flickr's search result caching oddities - bugs that make search results blank or say "There are no photos ..."). Aside: I wish I could point to a date-based permalink, e.g. instead of /page5/ I want /taken-on/2007-03-14/. Here's the first photo I took of Cameron and April at SXSW 2007: flickr.com/photos/tantek/457115431/
Photos are memory/emotion recall indexes. Dear Flickr please implement "mute" to regain social relevance. See examples of "mute" previously noted: http://ttk.me/t49F4. Why it matters, problem statement: you end up following too many people on Flickr (social conventions, inevitable) and then your flickr.com/photos/friends/ becomes too noisy with photos you don't care about - you grow weary and miss the photos you do care about, and then give up. Coping mechanism: it's too emotionally wrenching to drop connections and instead people either: switch to sharing via *new* networks that work because they quickly let you start small/focused, adding only those you care to see currently (rather than years ago), e.g. Instagram, Path. OR people instead share more photos on a service that does support mute: Facebook. Solution: "mute" works because it's the simplest of user tuned filters that increases the signal to noise ratio of what users see from their friends, thus they see more of what they want to see and interact more, commenting, favoriting, tagging, and adding notes. All of which is the whole point of using a social photo sharing site in the first place - the people to people interactions. #needspost
THE SAME THING I WANT WITH THE KREMLIN. I'M BORED WITH CORPORATIONS. WITH THE INFORMATION I CAN ACCESS, I CAN RUN THINGS 900 TO 1200 TIMES BETTER THAN ANY HUMAN.
a couple walks up to the cafe entrance holding hands, and in one swift motion he pulls the door open for her, without letting go of her hand. she smiles, thanks him and walks through, he after her, without pause or any loss of momentum.
crafted 3 perfect solids. still sore neck down to calves, trying to dance it off @DNALounge's newwavecity.com Depeche Mode Tribute dance party. Walked in to "Got to move on sometime, and it's about time." Yes it is. plancast.com/p/339h
Most Common Break Up Times / According to Facebook status updates http://flic.kr/p/8Ykh54 #dconstruct. graph: from @mccandelish "Information Is Beautiful" presentation @dConstruct 2010.
In the past week a couple of smart friends posted on dating and preferences, and publicly at that. A lot of what they said resonated, and it was more impressive that they did so on their own site (or at least subdomain) instead of (or in addition to) a (semi-)walled garden like Facebook or a nerdy dating site like OkCupid.
It was both inspirational and made me wonder about what could be done to further empower independents to share, discover, and federate such preferences and profile information, in order to find like-minded or compatible individuals in a decentralized and open manner, rather than depending on any one particular centralized site.
Existing open web standards such as microformats (hCard, XFN), ActivityStreams, and Portable Contacts either lack dating-specific details, or are backend/programmer-centric JSON (nevermind slowly dying XML variants), too high a barrier for the long tail of indie web publishers (not to mention saddled with the disadvantages of DRY violations and invisible sidefiles/APIs). If you want to scale to billions of diverse pages, simple additions to HTML that markup visible content are what is necessary.
That being said, the best way to start exploring the creation of (or extensions to) formats and schema is to research previous efforts (sites, user interfaces, and other formats, no matter the syntax), and start experimenting, with real data, on the public web. Here are a few aspects to get started, based on some of the settings in Facebook's Edit Profile pages.
gender. This one's a recent hot topic, and Sarah's excellent post provides a good summary. Suffice it to say I'm optimistic that based on extensive research we have a solution (likely to be incorporated into vCard4 and an update to hCard) for representing "gender" in ways people prefer to express it, rather than oversimplifying for programmer convenience.
interested in. This is the counterpart to declaring your own gender, that of indicating the gender(s) that you may be interested in. Current sites seem to restrict this to a pair of checkboxes at best (for indicating male and/or female interest). However, this property, like "gender", seems a bit more humanly complex than a pair of binary checkboxes for all the same reasons. More research of real-world examples and sites is needed.
looking for. People are looking for different kinds of relationships, and this is also an area of human complexity that requires additional research.
relationship status. Facebook has a whole separate page for editing relationship status. While XFN has been quite a success in terms of expressing relationships with others on the web (mostly through numerous sites supporting XFN friends lists), it's got a few holes in terms of expressing relationship status, including perhaps most importantly (in terms of dating), explicitly self-labeling as single. In any case, ways of expressing and describing relationship status also deserves more research.
The flip side of such editing interfaces is how the information is displayed. Facebook has an "Info" tab, as well as an "Information" box on profiles that displays, among other things, the following:
Networks - organizational affiliations
Relationship Status - needs research, as noted
Children - XFN handles this
Siblings - XFN handles this as well
Birthday - hCard has a "bday" property
Current City - hCard's "locality" is sufficient
Political Views - people seem to use this as a free-form field
Religious Views - also treated as free-form
Website - XFN's rel="me" handles this
I know numerous people who have their own sites, blogs, etc. typically with a brief description of themselves. Some even include information like their current city. I recently added a brief "Hello" box to the top of my sidebar, as well as rearranged my "Elsewhere" box to be right below it. Perhaps it's time to start experimenting with adding something similar to Facebook's "Information" box as well to see how that fits-in on a personal site.
The elephant in the room is of course privacy. There are far more people who prefer to keep a lot (most?) of this information private, or at least apparently private either through preferences on social network sites, or through the use of aliases and pseudonyms. In practice I would expect that any formats we figure out for sharing this information would need to be paired with some sort of privacy / limited access to work for most people.
However, given that there are some, like Tara and Jessica, that are ok with publishing preferences publicly, perhaps if more of us do decide to experiment with publishing this information publicly we can learn enough to make progress.
And with that, here is my encouragement: check out the research I've linked to above, add more real-world examples (social network sites, dating sites, personal sites), and consider publishing an "Information" box on your own site with whatever aspects of the above that you feel comfortable with. I'm working on doing the same.
Despite covered outlets, @thesummitsf is open after 10pm, has good coffee, wifi. cc: @lauraglu@verbiee. p.s. outlets behind the couch are still open, for now.
The BlackBerry delete key is my favorite. Essential for email/txting devices. iPhone swipe+confirm is slower. Devices like the Virgin Mobile LG Rumor 2 that require three actions (options+Erase+confirm), are even worse. Never mind that on a BlackBerry you can easily shift-scroll-select multiple messages to delete as well (instead of having to swipe-confirm for *each* message). How do users of non-BlackBerry mobile-email-devices put up with all the extra swiping, clicking, various menus, confirmation boxes and cheesy animations that unnecessarily slow down their mobile experiences? Or is it just a matter of not having compared/contrasted them to/with more efficient interfaces? Update: For multiple messages on iOS (iPhone/iPodTouch/iPad), you can click the Edit button in the upper-right and tick off each message to select it, then click Delete (or Move) at the bottom (via @khit on Buzz¹). 1^http://www.google.com/buzz/109182513536739786206/8RzqVhxHmXP/The-BlackBerry-delete-key-is-my-favorite-Essential#1290979964894000
How to make HTML5 input type="url" allow user entry/submission of http-less URLs like "tantek.com": onblur or onkeydown with keyCode 13: fix up the value by prepending "http://" if necessary. e.g. call webaddresstouri() function in cassis.js. Must use input type="text" in the page markup for HTML5 browsers with javascript turned off, and dynamically set the input element's type="url" in script on the page. Now implemented in @Falcon's @RelMeAuth login UI. Might want to do this with all uses of <input type="url"> for better usability (don't require user to type "http://"). Perhaps worth writing up in a blog post.
Finished @Falcon post/undo/edit/delete interaction flow diagram and interface sketches. Now to family dinner. Afterwards, late night coding once the nephews are asleep.
*minimized*, *background*, *not-playing* Flash Player (Safari Internet plug-in) eats CPU+battery #flashsucks. Amazingly, this "backgrounded" Flash Player process chewed thru battery on my MacBook Air 11" in less than 3 hours (I used "Activity Monitor" to see what processes were using CPU), while normally I get 5+ hours. The site was video.forbes.com running in Safari 5.0.2, and it was the only page open with Flash (I use ClickToFlash to make sure). Power-saving and laptop-speed-up tips: Install ClickToFlash.com to block Flash by default, and use the built-in MacOSX Utility "Activity Monitor" to find the "Flash Player (Safari Internet plug-in)" process and explicitly (Quit) it after you're done watching any Flash video etc.
Yahoo! has posted the full 56 minute HD video of the talk I recently gave at YUIConf 2010, HTML5: Right Here, Right Now (hat-tip: @miraglia). The video is a nice composition of my on-screen slides/demos/code samples, and picture-in-picture (bottom right corner) video of me presenting, hand-waving etc. You'll have to download it though, as it's too big to embed inline here.
I conversationally engaged the audience about practical HTML5 - what you can use now - and learned some tips and tools myself in the process as well. If you like my YUIConf HTML5 talk, please check out my HTML5 book and longer video:
using iTunes 10 with Airport Express broke iTunes 9 AirTunes: "An unknown error occurred (-15000)." detailed description: I used iTunes 10 on my MacBook Air 11" to stream radio via AirTunes to my Airport Express - worked fine. When I then disconnected it and tried using iTunes 9 on my white MacBook to play AirTunes, it said "Connecting ..." and eventually gave me an error alert: "An error occurred while connecting to the remote speaker 'library'. An unknown error occurred (-15000)." (Not a terribly useful error message for trouble-shooting - even a web search turns up scant clues, mentions of firewall configuration - wasn't running one). Thus it appears that using iTunes 10 with AirTunes breaks iTunes 9 compatibility on that Airport Express. Feels like another (perhaps unintentional) forced software upgrade path. Here is why this is a problem: if you visit a friend's house and play music through their Airport Express, you might then break your friend's ability to use same Airport Express to play music (they might not be able to upgrade their iTunes etc.).
Last month I attended the Open Video Conference (OVC) at the Fashion Institute of Technology in New York City. I was quite impressed with the breadth and depth of the two day program that the organizers put together, covering topics ranging from deeply technical to content creation to rights, politics, and ethics.
HTML5 Flight of The Navigator
I found the "HTML5 player showcase/How to Build an HTML5 player" session organized and moderated by Chris Blizzard particularly useful. Blizzard showed the awesome Flight of The Navigator (video) demo (which I'd seen before at the recent Mozilla Summit) running in Firefox 4 which demonstrated realtime WebGL 3D rendering, HTML5 Video mapped onto said 3D surfaces, HTML5 Audio (with realtime synchronized FFT music visualizations), and even live tweets/photos from Twitter/Flickr tagged #ovc10. Looks like the actual demo source has been posted as well. (Update: demo files are in a bit of flux).
It reminded me of some of the early audio/video multimedia demonstrations that people built with HyperCard (which eventually turned into full-fledged experiences like Myst) and gave me that same feeling of wow this platform has a lot of potential just waiting to be explored. The games of the future will be built with HTML5 + CSS3 + Javascript.
Relating on HTML5 video problems and solutions
Steve Heffernan gave perhaps the most brutally practical mini-tech-talk of the entire conference on the cross-browser/device VideoJS HTML5 video player.
I'm a little familiar with building HTML5 players, having had the honor of building Revision3's HTML5 player this past May which is served to iPads in particular. It is relatively easy to combine <video controls> with existing <object><embed> to embed a simple cross-browser/device HTML5 video player.
However, once you get into custom controls, or Media API calls for things like progress/playback indicators, segment jumps, and multi-resolution switches (all of which we built into Revision3's HTML5 video player), it gets a lot more complicated and you start discovering browser or device-specific quirks or bugs. Case in point: the iPad runs a very out-of-date fork of WebKit that doesn't at all reflect the implementation level of HTML5 video that's in desktop Safari.
Watching Steve's step-by-step explanation of what problems VideoJS handles, it was like a rewind playback of my own HTML5 video coding forensics and problem-solving experiences during those days at Revision3. But where my work was for a specific client and had a finish/ship date, VideoJS is an open source project constantly evolving. In fact, it was kind of eerie how many different things we both discovered/fixed in the same order, so much so that once he started going beyond that, I was quite willing to accept his answers based on the assumption that he had continued with consistent problem solving rigor.
One might think that I would have a feeling of regret, like if I'd only open sourced my work. Quite the opposite. Every web authoring/coding problem I solve is accompanied by a feeling of responsibility to share what I've learned. But there simply aren't enough hours in the day. I've already got a queue of fixes/solutions for numerous things that I try to go thru and wikitize etc. from time to time.
Thus frankly I was relieved. Steve has done such a great job with VideoJS that I don't have to worry about documenting any of the work I did and solutions I came up with - he's got it covered and then some. There are so many problems to solve, that I'm more than happy to point to others work and say, use this, it rocks, and move onto other problems/solutions of interest.
VideoJS Player
VideoJS is a fully scriptable HTML5 video controller that does its best to work around browser/device-specific quirks and bugs, abstracting that away from the developer.
Start with the embed builder which smartly creates code that encourages good accessibility and declarative fallbacks that work reasonably well even in the absence of Javascript (something that other Javascript HTML5 video players fail to do).
Now all you have to do is include the video.js javascript file on your page, either directly, or incorporate it into one of your existing scripts (reducing server requests). I'm oversimplifying just a bit but those are the important parts to remember. You can also use the nice video-js.css CSS skins for consistent presentation.
Here's just a few of the things that VideoJS takes care of (from Steve's presentation):
autobuffer vs preload attribute (different browsers support different attributes)
missing poster in some Safari versions
... and many more cross-device/browser compatibility problems.
There are also several features the VideoJS APIs make easier, like:
custom controls
added features (volume, full-window mode, subtitles)
cross-browser load progress tracking
For more details on what VideoJS does for you and how easy it is to get started with it, check out the simple straight-forward documentation on the home page:
t
