the singularity of being and nothingness
Web Design
CSS3 Infographic
Jan 22nd
There’s something with me, the weekend, and CSS3…hmm…
On Saturday, Google Politics & Elections posted an interesting infographic about search trends over the last week related to the four remaining GOP Presidential candidates.
Here’s the infographic:
From Google Politics & Elections
Overall, pretty nice. It makes good use of color, highlights the important details, and avoids loading the graphic with needless frills, pointless content, etc.
The one problem, though, is that it’s simply an image. While it’s nice to look at, it’s kind of boring.
Some CSS3 Up In HereSo as I was internally complaining about how boring the image qua image is, it occurred to me that some simple CSS3 flourishes could really make this nice.
Check Out the Example (note: you’ll need a more recent version of Webkit or Firefox for this to work…)
In this experiment, I’m using a few things I’ve not messed with much in the past: keyframes and the flex-box model.
Flex-Box ModelIf you’re a web designer, you’ve no doubt spent endless hours trying to coax HTML and CSS to do simple things like expand “columns” a particular percentage in width and height. This is a horrible nightmare to endure, and it usually ends in a lot of hacks and more cursing, just to More >
Sencha Touch Theming: 1.1.0
Apr 23rd
In my last article, I showed how to get setup and started with creating custom stylesheets. After a significant release (1.1.0) and several reader requests, I’m updating the walkthrough with screenshots and instructions for v1.1.0. This version will be strictly business: for discussion about the more interesting points of what’s going on, refer back to the original post 🙂
Step 1: Install RubyTo get SASS setup, you’ll first need to install Ruby and Ruby Gems (SASS is bundled with something called “Compass”, and Compass is a “Gem” that can be added into Ruby). You can go the painful route and install Ruby and then add Gems into it. However, if you’re stupid about these things, you can do what I did and just grab the Ruby 1.92 installer–it comes pre-built with Gems already configured.
Get the Ruby 1.92 Installer When prompted, choose “”Add Ruby executables to you PATH”I installed to the default directory on Windows (C:\Ruby192\)
Step 2: Setup CompassNow that Ruby is installed, the next step is to get Compass (e.g., SASS) setup. This step actually took me the longest, simply because I’m stupid about command-line stuff. So here’s a play-by-play of what to do (this is for Windows…I assume Mac More >
Chrome Web Apps Upgrade
Feb 4th
Just a quick note–if you didn’t see, Google Chrome has revamped the display for your personal app dashboard. You can now re-order apps by drag-n-drop, rather than installing and uninstalling in the right order.
Check it out 🙂
Share this: New HTML5 Logo
Jan 19th
If you didn’t see, W3C unveiled a shiny (new) logo to represent the far off dream of HTML5. Check it out – http://www.w3.org/html/logo/
Share this: Beginnings
Nov 24th
Over the weekend, my family and I moved to Maineville, OH. We were able to find a really nice house with a lot more space than our old cramped apartment. While unpacking, I decided to finally tackle a task I had been putting off for years: pulling data off my old PC so that I can stop dragging it around everywhere I go…
While browsing these old files, I found the source code for the very first web site that I ever made.
As a disclaimer, this site is very rough. I had no idea about HTML–so it’s basically an export from Photoshop to the web. But as rough as it is, it was where I got my start, and so this site will always have a special place in my heart. Plus, it was something that I made for good friends, so that’s an added bonus 🙂
Anyway, check it out when you have a chance, and marvel at the awesomeness!
Share this:
I’m Probably Getting Ready to Dump Firefox
Aug 10th
Anyone who knows me knows that I have long been a big supporter of Firefox. Back in the day, Firefox was the breath of fresh air in the otherwise olfactory-oppressing wasteland of an IE-dominated interwebs. Firefox was fast, innovative, and, best of all, let you add stuff on to it.
Add cool stuff. Like Pay-Pal plugins. Like RSS readers. Like Firebug.
It was the bees’ knees, and looked like it was going to gobble up all the stragglers that IE left in its “who cares about the experience” attitude toward the internet.
But then Chrome came along. It was sleek. It was fast. And best of all, it brought some fresher-than-Firefox ideas to browsing.
Better, fresher ideas. Like tabs-on-top. Like better architecture for faster…everything. Like not-having-to-upgrade-every-2.5-seconds.
So I’ve been using Chrome alot lately. Sure, it’s different. But what I’ve found is that it’s better. Sure, it doesn’t have Firebug (which is probably the only reason whatsoever that I continue to use Firefox). But every version gets better. And faster. And awesomer.
And Firefox? Perhaps its my groaning, Vista-laden PC, but Firefox hates everything. It’s slow, it freezes, it crashes…and very few of the plugins that I depend on for Firefox to be awesome can keep up with the More >
HTML5 Web SQL: Versions
Jul 19th
As mentioned in my last post about Web SQL databases, each Web SQL database consists of a unique name and version. Each database, however, can only have a single version at any given time, so there’s no possibility of older and newer versions running concurrently. To quote the spec, this is provided to “…allow authors to manage schema changes incrementally and non-destructively, and without running the risk of old code (e.g. in another browser window) trying to write to a database with incorrect assumptions.” In other words, instead of trying to manage the hassle of temporarily offloading data, rebuilding the data structure from scratch, and then reloading data when code changes, versioning allows for the detection of the client’s current db version, with the option of programmatically upgrading them to a different (read “new’) version of the database schema. Of course, you could conceivably also use this to detect old versions and point to different code entirely, but that would be a lot of code to manage…
My idea on this is to use the versioning as a way to push incremental database schema changes in a systematic way. For example, you could easily define a complex series of schema More >
HTML5 Web SQL
Jul 18th
A while back, I wrote up a quick post about some of the new client storage options that will be available in HTML5, particularly localStorage and sessionStorage. While they are both pretty nice alternatives to the clunkiness of managing client cookies, they are definitely limited. The biggest limitation is the data structure that each supports (they’re exactly the same, after all, except for lifetime of the data). As I pointed out, while their storage capacity is much greater than that of the old cookie, all data is still managed as key/value pairs. Of course, you can always use JSON encoding to store complex data structures as strings in these options…however, if you need to get at deeper levels of data relationships, these will quickly get VERY clunky and unusable.
Enter Web SQL databases. As the name implies, Web SQL databases are, well, client-based SQL databases (SQL Lite, to be exact) that can be levered through JavaScript. Each “origin” can have a number of databases, each of which has a unique name and version (more about this later). If you use something like the Developer Tools in Chrome, you can see these databases in action–including the databases themselves, child tables, and any data that has More >
HTML5 Server-Sent Events
Jul 12th
A common requirement in the era of Web 2.0 (and beyond) technologies is the ability to have “smart” client interfaces that are aware of changes that occur on the server (data, sessions, etc.). Most approaches include some manner of AJAX that regularly polls the server for changes. While this is easy enough to accomplish, it can be a taxing and somewhat annoying process. After all, wouldn’t it be much better if the server could communicate to the client when it has something share, rather than the client mindlessly asking over-and-over-again for the same thing?
In HTML5, this becomes a reality. Enter Server-Sent Events. In a nutshell, server-sent events “enable servers to push data to Web pages over HTTP or using dedicated server-push protocols.” This means, basically, that the client doesn’t have to keep asking for information: the server will notify the client when new information is available.
In it’s present state, server-sent events are only available for Opera and Chrome (6) dev releases. Additionally, they are currently implemented in two different ways. For Opera, the technology utilizes a DOM element (), while Chrome is entirely JS based. For this overview, I’ll be concentrating on the Chrome implementation.
For the example I worked up, More >
HTML5(ish) Notifications
Jul 11th
Something that’s coming down the pike pretty soon in tandem with HTML5 is the related, but independent W3C draft of a “Notifications” interface. Basically, this new interface provides a way for the browser to send notification messages on your desktop or device. So as example, while Facebook Chat will currently use AJAX to update the content on the browser page (causing the annoying tab “flicker” when a new message arrives), using the Notifications interface will allow a browser-independent message to be displayed directly on your desktop.
As with the other items we’ve been exploring in our look at HTML5-related technologies, Notifications are really easy to work with. A word of warning, however. Right now, this is only implemented in Chrome, and the W3C spec is itself based upon a webkit-specific API. So in order to make these work right now, you have to use the Chromium API, not the W3C spec. The fundamental principles are precisely the same (since the latter is based on the former), but has some minor differences.
So now for the obligatory example–let’s get my (or someone else’s…) most recent Twitter post and display a notification.
First, let’s create a reference to the Notifications object:
var notification = window.webkitNotifications;
(Notice the “webkit” More >
