2008 Headshot

A Few Skills Needed to Maintain a Modern JS Framework

While working on my talk at this year's OSCON, I brainstormed a list of skills that I used in my day-to-day job of keeping the Enyo JS framework going. It got to be a lot larger than I thought:

  • know JavaScript front and back
  • track evolving work in the JS standards world
  • follow interesting techniques from other libraries and tools
  • watch interesting language work that can build on JS (CoffeeScript, TypeScript)
  • plan future direction of your own library
  • understand web browser implementation
  • be aware of quirks and differences between common web browsers and versions
  • understand CSS
  • follow interesting work in CSS standards
  • follow new developments in applications of CSS
  • watch development of tools to enhance styles
  • understand algorithmic complexity
  • understand memory allocation systems
  • be an expert of profiling systems for CPU and memory usage
  • develop your own tools
  • have a working knowledge of front-end build systems
  • understand language minification
  • understand node.js for its use in building tools
  • understand HTTP and follow future HTTP work
  • understand XmlHttpRequest, its various versions
  • understand cross-domain issues and be able to specify how to handle them from client & server
  • understand WebSockets and follow its work
  • understand web security issues and be able to audit your code for problems
  • understand code coverage tools
  • understand test frameworks and testing strategies
  • understand and use continuous integration systems
  • have a good working knowledge of current GPU hardware and its capabilities
  • have a knowledge of Linux systems and how to measure whole-system performance
  • understand the DOM rendering, layout, and painting loop for WebKit
  • have good personal skills
  • be interested in helping other developers with their problems
  • have knowledge of social software systems (forums)
  • have expertise on version control software
  • have expertise on using GitHub to manage a software project
  • have expertise on usign JIRA to manage issue management
  • understand compilers and the limits of what a JIT system in your JS engine can do
  • have working knowledge of various coding standards and defendable opinions
No wonder I feel like I don't have much free time!

TechShop project ideas

As I've been taking classes at TechShop and getting trained on the various tools, I've been trying to catalog some project ideas. Rather than keeping them all in my mind or on scraps of paper, I'm going to post them here. If you like something, let me know and I might move it up my list.

Laser-cut chess board

I've started design files on this, making a 8" by 8" chess board surface. This was inspired by noticing a feature of Corel Draw called "Postscript Fills", which are procedurally-drawn patterns that can fill a curve. Unfortunately, so far I can only get those to raster, so I might need to do some coding to have the same kind of line patterns turned into hairline curves that will cut nicely into the wood. I'm thinking of something like a nice space-filling curve or spiral will go into the dark squares, with the light ones being left uncut. Then, you'll finish the surface using sanding on the edges and some sort of wood oil.

Metal ball-bearing labyrinth

This is inspired by the kinds of cuts that are easy to make on the milling machine.  The original class project was making a business card holder out of aluminum, which involved cutting a half-inch notch horizontally across the surface, then deepening it by making more passes at different z-heights.  This project would involve a small aluminum blank where you'd surface the sides, then mark out a maze pattern on the surface.  The mill would then cut into the aluminum about 3/8th of an inch and you'd use the X and Y controls to cut out the maze pattern.  You'd then match this up with an appropriately sized ball bearing and have a little puzzle.  I've not yet figured out the best way to get a rounded track, but there may be end-mills that curve at the end that could be used.

Urban Patchwork vinyl car stickers

I've already tried out making some vinyl stickers for a office door sign.  This involves taking the Urban Patchwork logo (a chicken on a shovel head), prepping it as a cutting curve, then using Corel Draw to run the vinyl cutter.

Baby room letter stickers

Another vinyl cutter idea: Letters for the wall in both the Latin and Cyrillic alphabets.  I need to find some cute fonts that will look nice as wall decorations.  This might also work better with some wallpaper so we don't have to do layout directly on the wall, but instead can make borders and then put them up as one group.

Metal trash can handle

We have a steel trash can in our kitchen that has a floor pedal to open the lid.  However, usually I just pull the top up manually.  I've though about making a magnetic handle that will stick to the top providing an easier way to open it.  I can do this with rare-earth magnets, but I need a way to embed those magnets into the handle so they won't escape but will hold things together.  This feels like something that already exists as a product I can buy, but I've just not seen it yet.

AC-Sensitive Radio Remote Control

Off the wall idea.  Our AC is run by our Nest thermostat which sends information about its current state to the nest.com website.  Have a client on the Chumby go and pull down current status, and when it sees the AC fan turn on or off, use that to adjust the volume on our clock radio up or down a few clicks via a IR transmitter.  I could use some other device, but the Chumby has the advantage of having wifi, a Linux shell, programming via Perl, and a free USB port.

Microsoft's Surface Not Suitable for Commercial Use

I'm very curious about Windows RT and the new Surface device, and I expect I'll be testing one as soon as they start shipping for my Enyo work. However, one item on Microsoft's Surface pre-order page has me a bit concerned. In small print at the bottom of the page is the note:

[2] Microsoft Home and Student 2013 RT Preview edition installed. Final Office Home & Student version will be installed via Windows Update when available (free download; ISP fees apply). Some features and programs unsupported. Office Home & Student 2013 RT Preview and the final version are not for use in commercial, nonprofit, or revenue generating activities. Commercial license options available (sold separately). See http://office.com/officeRT.

So, it looks like all those business users won't be able to actually use the installed Office suite for any business activity. The restrictions are pretty strong -- I expect that looking at a work email attachment on a Surface would violate the "no commercial" aspect of this. Obviously, MS does want the surface to become a back-door replacement for enterprise PCs with their expensive bulk-purchased commercial Office suites, but this seems like a very strong limitation for a mobile device.

Cross-Origin Requests, and the user/password arguments of XmlHttpRequest.open

Documenting this so it can be found if other people hit it in the future.

While tracking down a Enyo bug, https://enyojs.atlassian.net/browse/ENYO-645, I found an odd quirk of how cross-domain requests are done. Traditionally, you couldn't make a XHR request from a site on one domain into a site on another. However, browsers in the last few years have implemented a new scheme called CORS, short for

HTML5 Rocks has a great tutorial on it at http://www.html5rocks.com/en/tutorials/cors. For a simple GET request, all you have to do is add a header to what the server sends and your gold.

Things get more complicated if you want to do HTTP basic authentication with CORS. By default, a CORS request won't send credentials like cookies or the Authentication header. However, if you set the "withCredentials" property of the XmlHttpRequest object to true, they will be sent. However, that also triggers a pre-flight check from the browser where it makes an OPTIONS request without the credentials to verify that it will be able to actually make the second request. This is to prevent passing on credential data to a server that's not expecting CORS requests.

So, normally to do HTTP basic authentication, you can pass a username and password in your call to xhr.open. However, in the XHR level 2 spec, as seen at http://www.w3.org/TR/XMLHttpRequest/#the-open-method, using those arguments in a cross-origin setup will cause a failure. In Firefox 14, I didn't get the exception immediately, but instead it came when I used xhr.send(). I spent a long time trying to figure this out. What did work was directly specifying the "Authentication" header via xhr.setRequestHeader. I can only guess that the error flag gets set before any use of withCredentials can reset it back.

On the server side, I ended up needing these headers all to be returned in the OPTIONS request for this to work:

  • Access-Control-Allow-Origin: **exact value of request Origin header**
  • Access-Control-Allow-Credentials: true
  • Access-Control-Allow-Methods: GET
  • Access-Control-Allow-Headers: Authorization

Webduino update

I took a few hours today to get back to an old open-source project of mine, the Webduino HTTP server library. Since I last touched it about 18 months ago, a few developers have forked it over on GitHub and even done some pretty cool projects. Martin Lormes has been writing at about his changes, including favicon.ico support to keep browsers from making extra requests and supporting HTTP basic authentication. I also saw a Christmas tree that had its lights controlled by a Webduino-powered form.

I've got my own fork going over at GitHub too now, and just checked in a bunch of small fixes that I'd been saving up. I've not had a chance to do tests yet, as I've got to dig up some of my hardware from where I left it after my September trip to New York City.

Ending the "My Tweets" experiment

I just deleted all the "My Tweets" posts from this LJ account. I thought it would be useful, but it ended up just annoying me, especially since they still hadn't fixed the bug where the text around the tweets was Russian instead of English. However, now that we're working on releasing webOS as an open source project, I do plan on writing a bit more here about what's going on. I'm also working on a big revamp of my personal website that I'll publicize when ready.

Some Ad-Hoc Web Development Tools

In my job here at HP, I often need to reproduce bugs in our webOS browser or test out little web services. There are two tools I'm using more and more for these little ad-hoc tasks.

First is Dropbox. I've been using Dropbox for a few years now to sync files between my various computers, and it works great for that. What I've been playing with a lot lately is the Public folder. Anything you put in that folder becomes available to other users or devices via a easily copied URL. You can use that URL both as HTTP and HTTPS, and it seems to support a wide range of content types without problem.

My best practice is to put things in subfolders of public with not-easily guessable names. All the URLs for public items look like http://dl.dropbox.com/u//, so while you can't get an index and see all the public items someone has up, putting everything into the root folder means that its easier for people to guess the URLs for items that you might have up.

To make it easier to get to those URLs on my devices, I tend to use bit.ly (or it's shorter version, j.mp) to turn the long URL into a short opaque identifier.

A second useful tool is one I just started using last week: http://jsapp.us. I think of this as an equivalent to our own Ares tool, but for node.js server apps. You get a Bespin-based code editor, some file storage, and an easy way to run your node code on their services. You wouldn't want to make giant systems with this, but it's great for writing a 20 line script to test out HTTP error code generation or user authentication methods.

A final tool that I find myself using almost every day is our own Ares Debugger. If you're doing anything webOS and haven't tried it, please go to http://ares.palm.com/AresDebug and try it out. It will suck the JavaScript right off the device or emulator, let you set breakpoints, single step, and inspect variables.

Five webOS Apps That I Love

I get to try a lot of webOS applications as part of my job in developer relations. Sometimes they are beta apps that a developer has sent to me to review. Sometimes they're released apps that I'm using to validate new OS releases or hardware. Sometimes they're just fun apps that I use for my own productivity and enjoyment. Here's five that I always try to reinstall after flashing a device for day-to-day use:

Foursquare - Every week or so, I get really addicted to checking into places for a few days. Zhephree's app works very, very well for this task. It makes me wish that our GPS system would work better, since most of my wait time is for the fix. The user interface is very slick.

neato! - Another Zhephree app that's great. I don't always leave this running, but when I need to do some web site debugging, it's very useful. It lets me click on a bookmarklet in my browser and have the page almost instantly show up on my device. It also can be used to send selected text and bring up app pages.

Tweed - It may not be the most stylish Twitter client on webOS, but it's been very stable and nicely maintained, and it serves me well. I don't use the notification feature, as I tend to view Twitter as a pool of data that I can dip into from time to time rather than a email inbox.

drPodder - I like listening to podcasts, but I hate having to manage a desktop client to find and download them. This app does all that for me on the device. The interface is for the power user, but I love the way it uses system notifications to let you pause and resume your track. I just wish I could manage my feed list on the web somewhere -- it would be awesome if you could use the Dropbox API to store your drpodder.xml OPML file online.

SplashID - I was a long-time SplashID user on Palm OS, and I really liked that you could export your records from the desktop to the device. SplashData hasn't done a good job of updating this (where is sync!), but I still always load this up. If I can find a good cloud sync solution that's supported on webOS, I might switch to it.

TMaps - NY - if you navigate around NY, you need a good subway map. You especially need one that works when you're out-of-service. TMaps fits those needs well. I'd really love to see a port of the iPhone's Exit Strategy app which includes street-level apps and advice on where exits are in subway stations, but this will do.

I'm giving myself a bonus selection with Google Reader. I've tried a few of the client apps that use the API to access my Reader feeds, but I keep coming back to Google's mobile website for the best experience. I like that you're instantly synced with Google's own database of read/unread articles, and I like the "open drawer" method of moving quickly through a lot of news items. This isn't a true app, but I usually use the Browser's "Page / Add to Launcher" command to make an icon for it.

Some Easy PDK Apps

We just launched the PDK Hot Apps leaderboard; while looking at the growing list of free apps that will pick up a bonus, I had some ideas for some apps that won't take a lot of time to write but could be useful.

One is a sign generator. The SDL library lets you use Truetype fonts that you bundle with your app to draw to the screen. Take some interesting fonts, add some glow effects, and you can make a nice app for people to make messages that can be seen across a room. A "party sign" app was one of the big winners in the original Hot Apps promotion, so it would be natural to one-up that with the PDK.

Another idea is a nice 3D world time app. Show a nice 3D globe based on the current time with accurate sun charts, maybe allow touches on the screen to rotate the globe with a button to recenter it on the current GPS location.

A third idea is make a OpenGL ES-based photo viewer with some nice zoom and pan effects, aka Ken Burns mode. You can build your own copy of libcurl to do HTTP fetching of images, and grab from different Flickr tagged feeds. The UI might be a little tricky, but you can do a lot with just specializing in your own topics and maybe allowing the user to customize by editing a file read from /media/internal.

Finally, there's plenty of fun to be had by porting some of the existing SDL demos and games that are listed at http://www.libsdl.org. We fully support posting open source software in the catalog, just be sure to use a open source developer account and follow the license. That might mean adding information to your catalog description on how to get the source and build it yourself and adding notice to the user about the license terms.