![[HTML5]](../iconhtml5.png "HTML5"){kind=small}
![[CSS]](../iconcss3.png "CSS 3"){kind=small}
This is the place where I will test things, some browser-agnostic and some using newer vendor-prefixed CSS3, proposed CSS3, and HTML5 tags that haven't yet been drafted at the W3C or widely implemented by all modern browsers at the time of writing, as well as others in the mobile space. Some of them will end up being implemented through the other sections of this site.
Curious Gordon was an offline iPhone webapp using a manifest file for storing any images and external files in the application cache, while using iPhone OS specific link tags for the more recent apple-touch-startup-image, as well as the usual apple-touch-icon, apple-mobile-web-app-capable, and apple-mobile-web-app-status-bar-style to hide the browser chrome and set up springboard icons and splash screens. Some of these weren't available when I wrote my first mobile sites in 2008. This was meant to be a more complete, standalone webapp compared to the Motion Mobile page from January 24, 2010 which does not utilize the manifest file to maintain offline independence.
Tested as plays nice: MobileSafari on the iPhone OS, as well as Safari and Chrome with user agent spoofing, though this is a very specific iPhone offline webapp.
Easel was my first attempt at creating finance stock charts using the HTML5 canvas tag instead of the typical Flash-based approach seen at Google and Yahoo! Finance. It was a bit ambitious for a 24-hour development cycle the night before Yahoo! Winter Hack Day 2010. I was originally writing it for this event, but dropped out after registering when I realized I didn't have enough time to set up access to the API's for either Y! or Google Finance data in the context of graphs. As a result, what you see here is manually generated static data as a demo of canvas.
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, Mobile Safari (iPhone OS), Android, webOS
Tested as plays naughty: IE8/7/6 and any other browsers not supporting the canvas tag
Quotes was part of a Yahoo! Winter Hack Day 2010 project I started, and the counterpart to Easel (above), the canvas-based graph that would come together with the data I was pulling here from the Yahoo! API's. This page was my experiment with pulling Yahoo! Finance stock data through YQL, which gave me a nice JSON format to use. However, this wasn't enough to power my charts, and I left this unstyled as I deferred it in favor of spending the rest of my 24 hours focusing on the graphs for the hack. On March 15th, I found some time to give it a finishing overhaul, with some great tips from Matt Claypotch on Javascript performance.
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, IE8/IE7/IE6, Mobile Safari (iPhone OS), Android, webOS
Drop (Rock) and Roll is a web-based search engine switcher inspired by the in-browser search in Firefox (and later other browsers), and the original Inquisitor plugin for Safari in particular. As of now, this search bar only behaves like the former, but the Inquisitor-like functionality was what I was originally after. I loved that I could add search engines rapidly by simply entering the URL with the parameters and variable for the query (http://google.com/search?q=somequery). I attempted it in 2009 as a native iPhone application, but the implementation obstacles were discouraging for the time I had. So starting February 26, 2010, I made some time to start over with the beginnings of a web-based prototype. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, IE8, IE7, Android, webOS
Tested as plays naughty: IE6 (drop-down stuck), Mobile Safari (event handling issue)
Brevity is.
Okay, my goal here was to recreate the "characters remaining" countdown for textarea fields with maximum character limits, as seen in such high-profile examples as Twitter. I also had to ensure that the countdown would not be thrown off by cut/copy/paste changes, and that the submit button would disable and re-enable above and below the limit, respectively. And to help with the usability, I set the colors of the text to turn from black to orange to red as neared and exceeded the limit. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, IE8/IE7/IE6, Mobile Safari (iPhone OS), Android, webOS
Splines is named after the "reticulating splines" message from the SimCity 2000 game.
The cheeky progress bar messages from its successor SimCity 3000 were always a joy during an otherwise long wait, so I wanted to recreate some of that experience here using a JS-powered progress bar and a rotation of messages. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, IE8/IE7/IE6, Mobile Safari (iPhone OS), Android, webOS
Lipstick on Napkins is a phone number generator based on spelled out words, or alphanumeric combinations. This is was something I originally started writing on my vanpool work commute in April last year when I discovered that Google Voice did not offer this automatic conversion in their phone number input textfield. I didn't finish on the vanpool ride, didn't continue it afterward, and voiced my concerns through Google Voice feedback. (They later added the functionality when they rolled out their spelled phone number selector tool.)
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, IE8/IE7/IE6, Mobile Safari (iPhone OS), Android, webOS
Typecast is a simple demo of @font-face using a collection of quality typefaces without licensing issues.
Tested as plays nice: Browsers supporting @font-face (IE requires .eot).
Aero Smith is a recreation of the Aero glass theme seen in Windows Vista, using a combination of CSS 2.1, CSS 3, and CSS 3 proposals in Webkit and Gecko. This includes border-radius, multiple linear gradients (for the light curtain effect, and extra stops for the right gloss effects), box-shadow, text-shadow, and other CSS flexing. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox; Camino and Opera (gracefully degraded look because of lack of full browser support)
Tested as plays naughty: IE8/IE7/IE6 (looks plain from lack of support of most of the CSS making this possible)
Dreambook is a redesign of my old Dreamworld section from 2000. Back in October 2008, I manually transferred years of dream logs from the Dreamworld section into an RSS feed, in XML. It turned out it wasn't optimal for use with Javascript, at least compared to JSON. Today, I found some time to convert the XML file into a JSON format with the help of YQL. So I took this opportunity to whip up a red curtain effect with the smudge tool and gradients tool in Photoshop, and made visual and structural overhaul changes to the rebranded Dreambook section. It is also the first of the GordeonBleu pages adopting HTML5, something many of the Monstercyb.org sister site pages have been doing with my extra attention the past few months.
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, IE8/IE7/IE6, Lynx, and just about everything, as my GordeonBleu is under even stricter backwards-compatibility self-imposed guidelines.
LOST key(frames) is my first experiment with WebKit CSS animation. Other browsers like Gecko-based (Firefox, Camino) and Presto-based (Opera) support some degree of the transforms, scale, and skews that I tweak here, but as of writing this, only WebKit-based browsers support the keyframes necessary for me to animate this without using Javascript. To maintain the proof of concept, I opted out of a JS workaround for the other browsers, so this will only work in WebKit. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, MobileSafari, Android browser (except this browser doesn't support audio as of OS 2.1), webOS browser, and any other recent WebKit-based browser supporting keyframes.
Pan and Zoom is an experiment with WebKit CSS animation. While other browsers like Gecko-based (Firefox, Camino) and Presto-based (Opera) support some degree of the transforms necessary for this to work with CSS 3, as of writing this, only WebKit-based browsers support the keyframes necessary for me to animate this without using Javascript. To maintain the proof of concept, I opted out of a JS workaround for the other browsers, so this will only work in WebKit. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, MobileSafari, Android browser, webOS browser, and any other recent WebKit-based browser supporting keyframes.
RadLibs is a MadLibs-style game using JS. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox, Opera, IE8
Tested as plays almost nice: IE7/IE6 (everything works, but list item numbers do not appear), Camino (everything works, except faux placeholder behavior)
Markdown is a markup language that I found analogous to the MediaWiki syntax I've been using at Wikipedia and MediaWiki installations for the last half decade. The generated HTML markup from the Markdown file can be seen directly too. And hCard is a fake profile I created to play around with microformats, which I had confused a couple years ago with data detection on mobile devices.
Tested as plays nice: N/A
Checkmate is an implementation of multiple checkbox-selection with the usual shift + click combo seen in Gmail, and more commonly, in desktop applications. I decided to write my own using raw JS after seeing a jQuery implementation without label tags on Stack Overflow. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, IE8
Tested as plays almost nice: IE7/IE6 (everything works, but there are issues when clicking on labels instead of checkboxes)
Needle in the Haystack is a search field that filters a list into matching results as you type and delete, in a case insensitive manner. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, IE8/IE7/IE6, Mobile Safari (iPhone OS), Android, webOS
Beachballing is a usage of 2D transforms to recreate the spinning beachball mouse cursor from Mac OS X. The transform property is set for the day when the W3C spec is complete, but until then, I am also using -moz, -webkit, and -o vendor prefixes. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox, Opera 10.5+, Mobile Safari (iPhone OS)
Browsers still lacking 2D transform support at this time: Camino, IE8/IE7/IE6 (without resorting to IE filters)
Flash Gordon is my usage of HTML5 canvas to recreate the blue Lego brick icon shown in Safari and MobileSafari in the absence of an Adobe Flash plugin. Doing all this by hand took a while, mostly because of the bezier curves to get the Lego stubs just right. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox, Opera 10.5+, Mobile Safari* (iPhone OS), Camino*, Android
* Filltext issues at this time: Camino, Opera (before 10.5), and Mobile Safari; no canvas support in IE8/IE7/IE6
Touchy Feely is a basic experiment use touch and gesture events from Safari DOM extensions, and is currently designed to work with the iPhone OS.
Tested as plays nice: Mobile Safari (iPhone OS) and other compatible WebKit browsers in touch devices
College-Ruled is a web form with its input fields integrated into a letter on a college-ruled sheet of lined paper composed with HTML and CSS and no images. The textarea also expands in height when typing beyond the sheet's height, with the paper expanding appropriately with it. You can also see this at the contact page. Also posted at GitHub.
Tested as plays nice: Safari, Chrome, Firefox, Camino, Opera, IE8/IE7/IE6, Mobile Safari (iPhone OS), Android
Camiglass is a Firefox theme with a bit of lovely white glass for those a bit tired of the monotony of stormy gray metal plastic buttons to match gray backgrounds.
This theme uses GrApple Yummy 3.0.1 as a foundation (courtesy of Aronnax), which itself included artwork by Stephen Horlander with contributions by Kevin Gerich. I expanded beyond the original back, forth, reload, stop, and home buttons to create glassy buttons for the rest of the buttons in the navigational and bookmark organizer toolbars. Standing on the shoulders of giants. Also posted at GitHub.
Tested on Firefox 3.6.3 on Mac OS X 10.6.3. Currently supporting Firefox 3.6.x and greater on Mac OS X. More support to come when time permits.
iTunes Promo Code Fetcher is a Google Chrome extension that scrapes iTunes app promo codes off a given Twitter account page, and generates links to launch and redeem them in iTunes with one click. If this extension is used on a Twitter page with no promo codes in view, or a non-Twitter page, it will inform that no results were found. Also posted at GitHub.
Supports any version of Google Chrome with extensions support.