Before I begin, a quick editorial note. I almost didn't write this blog entry. After working on the code and getting everything working right, things quickly went to crap when I switched from Mac to Windows. I had odd results in Firefox as well. Overall, I feel that the solution I've come up with here is solid, but the current browser implementations are... less than ideal. So, please keep that in mind. Perhaps you are reading this a year from now while cruising around on your jetpack and the browsers have settled down in terms of their IndexedDB support. Perhaps. Until then, please consider that what follows is going to be less than perfect in your browser.
Thank you to everyone who showed up for my RIACon presentations. Any feedback, positive or negative, would be greatly appreciated. I've attached the code and slide deck for the jQuery Mobile presentation to this blog post (link at the bottom). The resources for my HTML5 presentation may be found on Github: https://github.com/cfjedimaster/html5-storage
Forgive the somewhat awkward title. Hopefully an explanation will make things a bit clearer. I was working on an application yesterday that needed to load in a HTML file via AJAX and display it on screen. The HTML happened to be documentation so I was going to simply display it as is on screen. Since I wasn't doing any processing, my code was very simple:
Over the weekend I decided to write up a quick example of form validation in jQuery Mobile. Obviously there are many ways you can accomplish this and I just wanted to take my own little spin with it. Here's what I came up with and I'd love to hear how other jQuery Mobile users are doing validation.
Here's an interesting situation I ran into recently. Consider a simple web site that begins with a login page. After you successfully login, you proceed to a 'home' page with links to sub pages. But you want to prevent users from using their back button to return all the way to the login page. It isn't a security issue per se, but it is confusing. The user should only be able to go back to the post-login home page.
I was working on a new project today when I ran into an odd bug with Firefox. Firefox is not my primary browser, but I've been trying to use it a bit more lately as it seems to be adding some new features. But this bug.... wow. It seems, and let me be clear here, it seems so incredibly stupid that I have to imagine that I'm doing something wrong. I can't imagine a browser doing something like this without it being some setting that maybe I tweaked in the past. That being said, here is a simple example of it that you can try yourself. I'm more than willing - shoot - I'm hoping I'm wrong.
Basically - the page has one button. I use jQuery to create a click listener for it that simply disables the button. Nothing magic, right? You can run my version here: http://raymondcamden.com/demos/2012/jul/17_3/test2.html
Run this in Chrome. Click the button. Confirm it disables. Then reload. Everything is cool, right?
Run this in Firefox. Click the button. Confirm it disables. Then reload. WTF. You clearly see a new console message with the right date, but the button stays disabled. To get around this I have to press Enter in the URL bar.
Firefox reran the JavaScript but kept the DOM unchanged from its last stage.
I cannot begin to imagine by what logic this makes sense, but.... maybe one of you smart people can tell me what I'm seeing here?
I've made it clear that I'm a huge fan of LocalStorage. While sitting in the Houston airport for many hours this week, I decided to whip up a little example that demonstrates one of the practical uses for this feature. I built a simple Ajax-based search page and then added LocalStorage as a way to remember your previous searches. This isn't anything special, but I think it's another good example of the feature. Let's begin by taking a look at the application before any use of LocalStorage.
Thank you to everyone who attended my marathon session last night in Nashville. You can download the slide deck (Keynote and PDF) and code from the Github links below. For those who were not there, you are, of course, welcome to take a look as well, but without my silky smooth speaking voice behind the slides it may not be as exciting.
Introduction to PhoneGap
Web Debugging
I'm very proud (ok, giddy even) to announce that I've had my first article published at HTML5Rocks:
Databinding UI Elements with IndexedDB
The article discusses how you can create a simple auto-suggest for an input field that ties to data stored in the browser's IndexedDB feature. Simple stuff really, but I think it is a good (and practical) example of the feature.
How happy do I feel? This happy...
Edited on August 4, 2012: Readers noted that this version didn't correctly handle trying to load the cache when offline. I confirmed that and posted a fix in the comments.
For whatever reason, my articles on PhoneGap and RSS (see related entries below) have been incredibly popular. The last entry currently has 163 comments. Some of the comments deal with the fact that RSS, while a standard, does have a bit of variation to it. My code made some assumptions that didn't always work for other feeds. I thought this was a great opportunity to look at ways I could make the code more applicable to other types of feeds, especially Atom. Luckily, there is an awesome service for this - the Google Feed API.