HTML5Rocks, a beloved resource for web developers, is shutting down. This post reflects on the site's history, its impact, and the reasons behind its decline. Key factors include the shift away from "HTML5" as a buzzword, changing team priorities, lack of a focused content plan, and challenges with community management. Despite the shutdown, the author expresses gratitude for the experience and the connections made, highlighting the lessons learned about content creation, developer engagement, and the open-source community.
I've been working on making html5rocks.com more mobile-friendly, focusing on reducing "Time to first read". The main culprit was the Table of Contents (ToC). My initial experiment with an offscreen ToC using CSS had cross-browser inconsistencies. Now, using existing JS, the ToC is fixed to the footer and toggled into view. I'm still exploring pure CSS solutions. Initially, I favored a small scrollable ToC at the bottom, but Paul Lewis suggested a full-screen ToC, which proved better. It minimizes distractions and clutter, provides more screen space for a readable, easily navigable ToC with larger touch targets and subtle hierarchy, even for long lists. The before/after screenshots demonstrate the improvement.
I found and fixed a bug in WebKit! My LeviRoutes framework needed to simulate 'onpopstate' events for testing, but WebKit's createEvent(\"PopStateEvent\") was broken. After some digging in the WebKit source code, I found the problem in Document.cpp, added the missing PopStateEvent handling, created a test case, and submitted a patch. It got reviewed and accepted! Now my fix is part of WebKit, used by tons of people, and I can finally get back to LeviRoutes.
During our Google IO talk on Mobile Web Development, we received a great question about handling AppCache storage limits in modern browsers. Our approach was straightforward: we primarily used AppCache for program code, including CSS and JS, along with the main page. Our application's size remained manageable, helped by minifying the JS in our production build using uglifyJS. Although we could have compressed the CSS, we prioritized ease of development. If space became an issue, our plan was to AppCache only form-factor specific code and assets, but thankfully, that wasn't necessary.
During my "Mobile Web Development: From Zero to Hero" talk at Google I/O, a question came up about client-side data storage now that WebSQL is deprecated. While IndexedDB is on the horizon, what are developers using today? I shared my preference for Lawnchair, a simple key-value store abstraction that's easy to use and perfect for many situations. While I didn't use it in the IO Reader app due to late-stage project constraints and the sufficiency of localStorage, I generally prefer using such libraries. I'm interested in hearing from others. What data storage wrappers or techniques do you prefer when building web apps?
I've created LeviRoutes, a client-side JavaScript routing framework inspired by Rails. It's simple, fast, and focuses solely on handling URL changes. LeviRoutes works with HTML5 History APIs, hashchange events, and even gracefully degrades for older browsers. It supports named parameters like "/:category" for dynamic routing, allowing you to treat the URL as a controller input. Check it out on GitHub!
The Chrome Web Store is launching in the Netherlands with integrated support for Dutch sellers! Join the Dutch GTUG on March 2nd, 2011 at 7pm at Google Amsterdam for an event about HTML5 and the Chrome Web Store. I'll be showcasing new HTML5 features and discussing how to leverage the Chrome Web Store to reach more users. The event includes Q&A and lightning talks, so come prepared to demo your projects! Space is limited, so sign up now!
2010 was a big year! Benjamin joined our family in June. I also joined Google as a Developer Programs Engineer, later transitioning to Developer Advocate, which has been an amazing experience. I've met tons of talented people, traveled a lot, and worked with developers worldwide. I've been busy with projects like creating a Chrome Web Store app, Chrome extensions showcasing the Management API, HTML5Rocks tutorials, and WebIntents. I even got a new LCD TV after years of waiting! In 2011, I'm aiming to code more, release more code, meet more developers, speak at more events, and most importantly, spend more time at home with my family.
The Chrome Web Store isn't just about HTML5 and JavaScript; Flash plays a crucial role too! Flash apps and games are readily available in the store, with examples like Vyew and Paltalk showcasing functionalities not yet fully achievable with HTML5, such as webcam access. Getting your Flash content into the store is easy, either by using Appmator or directly packaging your SWF file. The store handles distribution and updates, eliminating bandwidth costs for developers. Focus on creating immersive experiences that utilize the full screen, like Canabalt, for maximum user engagement.
Just got back from a whirlwind tour of Europe for the Google Developer Days! We hit Munich, Moscow, and Prague, and it was an amazing experience. I gave talks on Chrome Extensions and building great Web Apps (except in Munich, where a local engineer rocked it). The slides are online: Chrome Extensions (needs experimental mode in Chrome dev channel) and Web Apps. I'll post the code on GitHub soon. Met tons of enthusiastic developers working on incredible projects – everything from protein sequencers to automatic app builders. So much innovation happening! (Side note: bring business cards, folks!) Prague was a particular highlight. Check out some photos from my trip!
I recently discovered a cool trick in WebKit that lets you use a canvas element as a background image, which opens up a ton of creative possibilities. It's a powerful feature, allowing for dynamic, programmatic manipulation of background images. I've included a simple demo showing how to draw a square on a div's background, but imagine the possibilities for games or complex animations! While currently WebKit-specific, I hope other browsers will adopt it soon. More demos to follow!
I had a great time speaking at the Berlin GTUG, despite the unexpectedly hot weather. I presented on Web Apps, highlighting the differences between native and web apps, key principles of good app design, and some of the exciting new possibilities with HTML5, CSS3, and WebSockets. I wish I'd had more time to delve into frameworks for building great apps and do some live coding. Chris Chabot also gave a fantastic talk about Buzz. The venue, BetaHaus, was excellent, and I was impressed by everyone's English fluency. Thanks to all who attended!
