Code and ramblings by Eric Bidelman.
Launching a website without a dev server Last year, my team launched web.dev at Chrome Dev Summit 2018 . If you haven't heard of web.dev, it's a new educational resource for web developers that focuses on interactive learning. For example, we embed Glitch codelabs so developers can tinker with code as they read through documentation. We also integrated tools like Lighthouse directly into the docs…
I’ve been using App Engine for many years to develop web apps at Google. Most of the open source projects I’ve worked on use it for its simplicity and scalability. A couple of examples are the Google I/O web app , the Chrome team’s Chromestatus.com , Polymer’s site , developers.chrome.com , and WebFundamentals , just to name a few. Heck, I’m even using it to build my…
TL;DR: a dozen+ examples of monitoring changes in a web application. The web has lots of APIs for knowing what’s going on in your app. You can monitor mucho stuff and observe just about any type of change. Changes range from simple things like DOM mutations and catching client-side errors to more complex notifications like knowing when the user’s battery is about to run out. The thing that remains…
Chrome is departing WebKit as its rendering engine. This is big news for web developers, so I thought I’d write up my personal take on the matter. Please realize these are my own thoughts and not those of Google. The new engine is called Blink . It’s open source and based WebKit. “You’re kidding, right!?” That was my reaction when I first heard the news. It was…
There’s a ton of motivation for being able to record live video. One scenario: you’re capturing video from the webcam. You add some post-production touchups in your favorite online video editing suite. You upload the final product to YouTube and share it out to friends. Stardom proceeds. MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams ( example code ). It allows web apps…
I always forget that you can request a resource as a Document using XHR2. Combine this with CORS and things get pretty nice. No need to parse HTML strings and turn them into DOM yourself. For html5rocks.com , we support CORS on all of our content. It’s trivial to pull down the tutorials page and query the DOM directly using querySelector() / querySelectorAll() on the XHR’s response.…
It’s been awhile since my last blog post. That’s because I’ve been busy writing articles all over the web! Check out my post on netmagazine, “ Five things you didn’t know the web could do ”.
Custom data-* attributes in HTML5 are pretty rad. They’re especially handy for stashing small amounts of data and retaining minimal state on the DOM. Turns out, they can also be used for one-way data binding! I’ve been using a nifty trick in recent projects that I thought would be worth sharing. The technique is to use a data attribute to store values (i.e. the data model) and :before / :after…
The HTML5 Filesystem API is a versatile API that addresses many of the uses cases that the other offline APIs don’t. It can remedy their shortcomings, like making it difficult to dynamically caching a page . I’m looking at you AppCache! My ♥ for the API is deep–so much so that I wrote a book and released a library called filer.js to help promote its adoption. While filer aims to…
Some 1300+ lines of code, 106 tests , and a year after I first started it, I’m happy to officially unleash filer.js ; a wrapper library for the HTML5 Filesystem API . Unlike other libraries [ 1 , 2 ], filer.js takes a different approach and incorporates some lessons I learned while implementing the Google Docs Python client library . Namely, the library reuses familiar UNIX commands ( cp ,…
I’ve seen a lot of people ask how to 1.) apply custom styles to a <input type="file"> and 2.) programmatically open the browser’s file dialog with JavaScript. Turns out, the first is a cinch WebKit. The second comes with a couple of caveats. If you want to skip ahead, there’s a demo . Custom file inputs in WebKit The first example on that demo page shows how to style your basic…
One thing the Web Audio API does particularly well is play sound. Of course, this is something you’d expect from an audio API :). That said, the API is complex and it’s not immediately obvious on the best way to do something simple like load a sound file and play it based on a button click. That task alone can involve a number of new platform features likes XHR2, FileReader API, and…
For a recent project, I needed to read an .mp3’s ID3 metadata (song title, artist, year, album) in pure JS. The idea was to have the user select a song file, and boom!, its info would display to the user. Good news…totally easy with the FileReader API and JS typed arrays. Initially, I did a quick search to find some examples, but all of the examples I found used older techniques like…
Until now, web applications have been unable to organize binary data into a hierarchy of folders. That has changed with the advent of HTML5. With this book, you'll learn how to provide your applications with a true file system that enables them to create, read, and write files ands folders in a sandboxed section of the user's local filesystem. Author Eric Bidelman provides several techniques and…