Developing Upwards

I miss the days when Chrome felt like a window onto the Web. Google Chrome was my favorite browser for a long time, almost since it first was released. I wasn’t just buying into the Google fanclub, or at least I want to believe it was more than that. What I saw in Chrome was something that I felt was exactly right in the world where I saw the web growing more powerful and able every day. At one point I recall saying that Firefox was about how much the browser can be for you, while Chrome was about how it can get out of your way and expose the web itself as directly and cleanly as possible. I was behind this idea of a window into the web full heartedly because I thought it was the best way to promote everything the web could be. How much has this changed? Today, I’m not sure if the situation has reversed, but I am certain that my old view of Chrome is no longer something I can stand behind. Chrome has changed a lot and shifts further from its roots as a neutral arbiter of a...

The days of XMLHttpRequest and weird choices for capitalization are numbered. WhatWG has a spec ready for some time now to replace it: window.fetch. Just look at how easy it is. Just look at how nicer that is all with soon-to-be native APIs. But you don't have to wait, because there is a polyfill available. Start using the Fetch Polyfill in your projects today.

As of my first hour playing around I was able to share and synchronize play of any MP3 between multiple users with a simple drag and drop interface. Things were going pretty well for my project, but I had some work to do getting from there to the collaborative playlist I had in mind. I was already just assuming we were only caring about one file, because that worked well to get things up and running fast. My next step was to remove that assumption and start keeping a list of songs. This was pretty easy, in fact. I started writing a simple list of songs as they were downloaded, each with a play button which performed the <audio> tag set and play that previously done automatically. Each user could now play any song that was shared and to restore the previous synchronized playing that happened when they only dealt with a single done I incorporated broadcast changeTrack messages. I added two other broadcasts, pause and play, which would allow any users to pause and play the songs ...

Today was one of our very fun Ship It! Day  events at Caktus Group and the first in our new office. It snuck up on a lot of us, what with the busy move we're still settling down from, but it also is a great chance to unwind and to really enjoy our new shared workspace. I'm going to start ending these events with a personal post-mortem on what I worked on. I decided to learn about WebRTC by building a tool I'd love to have with friends: a shared music player. The problem is simple: some of us think the room is to quiet and some of us like quiet. What we need is a way to play music together with headphones. The goal was a simple app that can play MP3s. Everyone with the app open should be able to play songs and everyone connected would listen at the same time. We all hear the same thing. If someone leaves, they'll take their music with them. So, I set about this yesterday afternoon (when our Ship It festivities officially begin) and I had a vague idea where I wan...

It is the opinion of this developer that HTML Imports, championed by the Polymer Project and already implemented in the Blink fork of WebKit, are utterly and completely useless. Beyond this base uselessness, I believe HTML Imports are actively and wildly harmful. I believe the more they are used, the more problems they’re going to cause. The Case For HTML Imports Giving the new feature their fair shot, I’ll lay out the case in favor of HTML Imports. I was actually pretty excited about them when I first read the details, and even when I first started using them. Unique loading of resources without double loading, such as when two imports each themselves import a shared dependency. is really cool! We’re building pretty complicated JS loading systems to solve what, here, is a built-in feature. The collection of scripts, markup, and styles associated with single units of behavior is really great as a way to conceptualize of how you’re pulling in these web components. It just mak...

We’re in a position that, for many projects, we must include some sort of browser storage. Unfortunately, we aren’t yet at the point where the best approach is entirely obvious. Between localStorage, WebSQL, and IndexedDB developers are left with a complicated pool of options and difficult to compare pros and cons. localStorage The simplest and widest supported option is localStorage. If you can solve your needs with it, you should. localStorage keeps simply key->value pairs of strings in the browser, even when your website is closed. There is no real structure to the information you store, making it good for simple cases like user preferences or caching of necessarily small things. Use localStorage when You need to store less than 2.5 MB, which varies a bit between browsers You can deal with the storage failing, which can happen in private modes or when hitting storage limits. Some failures are silent You can identify your stored data by easily known keys, and d...

Wow! Web Components are amazing! Honestly, despite the negative title of this post I'm absolutely floored with excitement for this new set of technologies. This post is my exercise in grounding my excitement a bit with some reality discovered in actually using them in a serious project, and the issues we've run against and had to deal with. Web Components are an important part of the future of web development, and libraries like Polymer and X-Tags mean we can use much of their power today, without waiting browser support (which is already under way!) Like so many new technologies, this is also incomplete. It may be fair, it would be more accurate to say the ecosystem around Web Components is not mature , than to blame Web Components directly. Ecosystems are extremely important. Therefore, the items listed here are the parts of an ecosystem that I believe we need built around this new set of technologies. Missing Item 1: Routing Now this one took me by surprise because,...

Are you trying to understand AngularJS? I have been, and a few use cases have eluded me. Most importantly has been the intersection between AngularJS apps and services exposing browser storage to your app. What are the best practices? This example found on GitHub by Tom Wilson is an excellent example todo app built with AngularJS and PouchDB. The README explains the entire setup in an excellent tutorial! An AngularJS Tutorial that will walk you through creating a ToDo Application using a local PouchDb. This tutorial should introduce you to some of the AngularJS concepts like directives and data-binding. It will also show you how to build offline applications using PouchDb. If you're interested in this combination you should check out ngTodoPouch immediately!

When porting a chrome packaged app to a firefox packaged app you will need to do an inventory as to which chrome specific api’s you are using and create a level of abstraction around them, as the naming / capabilities of the api’s vary across the platforms. David Clarke did the great leg work breaking down the current differences between the Chrome App and Firefox OS APIs. This is a great resource for anyone building web apps today! Check it out today . I'd love to see this kept up to date somewhere.

I’m building a Facebook game. Now, don’t worry, you haven’t lost me to the giant beast, my friends. No, I’m just doing a little project, for fun, to both test and demonstrate a number of technologies. I figured something really simple, like Paper Rock Scissors, would be the perfect target. I have the game playable in about three hours this morning. I have more work to do. The point of this is to demonstrate a number of technologies I am trying to push as an expertise, because they are all things we know well and which I think are ready to have their day in the sun, so I can see a lot of need for this coming in. Even such a simple game is demonstrating all of these things. A comet server to push events to the game client in the browser HTML5 to build a game UI that is flashy, but without Flash Housing a web app as a Facebook app, for promotion and integration purposes Utilizing HTML5 for mobile gaming platforms Today, I have a playable prototype that matches up players, updat...

This is a follow up to my first How To Walk Backwards to HTML 5 article. The one comment I got in this first Twenty-Four hours pointed out a lack of explanation on my part for a few things. I know about the current HTML 5 specification. I've read most of it, reviewed plans and others' reactions, etc. My views on HTML 5 are not out of a lacking of knowledge, but are a reaction to my knowledge of HTML 5. I think what HTML 5 looks to be shaping into is the wrong direction. The creation of the layout specific tags is a response to what was coined "div hell", but it isn't the right solution. We all have different needs for what we need HTML to represent and it gets abused into representing everything from resumes to tetris clones. Abandon schemas and doctypes and just let us write the tags that have meaning for our cases. Hey, we can do that with XML namespaces! Give us to the tools to discover formatting and layout rules and control the pages intelligently. If you ne...