My OUYA Review

OUYA

I was one of the original backers of the OUYA — the little Android gaming console that could. Unfortunately, because of shipping delays I only finally got my OUYA last week, which is after it became available for sale at BestBuy (US only so far as I know). In any case I was finally able to test it out. However, due to my current circumstances I wasn’t able to really sit down with the OUYA for long but I did get to play it with friends so here are my impressions so far. Read more »

Web Components and the Future of Web Development

Web Components Logo


To improve is to change; to be perfect is to change often.

- Winston Churchill

Nothing exemplifies the above quote better than the web. The web is always changing — monthly, weekly and even daily. Websites update their content every day and their look almost as frequently, web standards are being revised and created on a weekly basis, and browser vendors update their browsers as often as one is willing to download the latest version. A great example of that is Web Components, which is a new technology that is becoming more and more realized daily as the standards for it are being finalized and browsers are updated to support this new technology.

Web Components is the cutting edge of web technologies — it is something that few have yet to hear about, and even fewer that use it. In fact, due to lack of browser support web components is not something you’d necessarily want to rely on right now, especially when it comes to large web sites that require support for a wide range of browsers. With that being said, as a web developer it’s my job to be on the bleeding edge, to push the envelope and by extension move the web forward. So when that envelope is fully opened, when that edge becomes the norm, I am ready to take full advantage of it.

This article is a big picture look at web components. I will try to avoid the technical nitty-gritty (I love that stuff though, so expect it to rear its techy head on occasion) and instead talk about how web components will change web development going forward and how that affects non-developers, a.k.a. the common folk. Read more »

CSS3 UI Elements — Toggle Buttons

CSS3 Toggles

A friend of mine created a Pinterest board with various toggles, buttons and other interesting controls and UI elements that he found on the web. So, I decided to try my hand at creating some of these controls using CSS3 (w/ a tiny bit of behavior via JavaScript).

So I recreated the orange toggle (bit weak if I am perfectly honest but it was a bit of a rush job and I’ve to come back and polish it up) and one of the brushed metal toggles.

Simple function to detect Array in JavaScript

JavaScript doesn’t really separate Arrays from Objects. In other words, if you check typeof for something like { red:44, green:57, blue:220 } or [44, 57, 220], they both return “object”, even though the second one is an Array (the two are similar but not exactly the same, for example, you can’t access the “red” value of the object via index 0). So I needed a quick way to detect array as opposed to an object and came up with this short function.

function istype(obj) {
	return (typeof obj !== 'object' || typeof obj[0] === 'undefined')
		? typeof obj
		: 'array';
}

GitHub Mark istype.js gist on GitHub

Designing Web for Big Data

As a web developer and designer the usual challenges I encounter involve things like making sure the page loads fast, providing users with a good layout that directs them to the content in an efficient manner, ensuring that the navigation makes sense, validating their input to prevent user errors and generally making their browsing experience pleasant. All these issues and their solutions have been documented dozen times over by many people. Most of the specifics of the various issues that arise are known and most of the ways to resolve those specific issues are also known. Once in a while however, I find myself dealing with “big data” and then the question becomes, how do I present the user with a lot of data — visual or textual — in a manner that’s not overwhelming, that makes it easy to navigate said data and more importantly, understand and work with it. Or to put it more bluntly, how the heck do I make a table that has hundreds of rows and dozens of columns not a complete pain to deal with?

In this article I will go over some of the specific issues I encountered when building and designing web pages with large amounts of data and the approaches I took to resolve those issues. Not all of my solutions will be appropriate for every type of problem but hopefully this information will come in handy in the future. Read more »

Short jQuery script to clear form

Clearing a form can sometimes be a bit of a hassle since there’s no native functionality for that — the “reset” button resets the form fields to their default values, not clears them. The script below takes care of exactly that, taking into account some of the newer input types (such as “email” and “date”). It is written as an extension to jQuery, meaning you can use it like a jQuery method, something like this ‘$(‘#myform’).clearForm()‘, but it can easily be written as a regular stand alone function.

// .clearForm - clears form fields from any values
$.fn.clearForm = function () {
	var el = this.find('input, select, textarea'),
		len = el.length,
		i = 0;
	for (; i < len; i++) {
		switch (el[i].type) {
			case 'text':
			case 'password':
			case 'select-one':
			case 'select-multiple':
			case 'textarea':
			case 'email':
			case 'date':
			case 'number':
			case 'phone':
				$(el[i]).val('');
				break;
			case 'checkbox':
			case 'radio':
				el[i].checked = false;
		}
	}
}
// end .clearForm

Read more »

CSS based loading spinner icon

This is a CSS only loading spinner icon. It’s just a quick experiment I decided to conduct, to see if I can do a loader spinner using only CSS, without any images or JavaScript. It actually turned out much easier than I thought. You can check out the full CSS below. It does look a bit messy but only because of all the vendor prefixes I had to use.

The CSS mainly uses transform, animation and keyframes styles and works in most modern browsers, with the exception of IE9 and below of course. Although at least in IE9 it does render the “first frame” correctly (i.e. the initial state of the loading icon). You can easily tweak colours, thickness, length or spacing of the lines. Oh and the html is dead easy, it’s basically just a .spinner div with a bunch of .spin-line divs inside. If you want to play around with live code you can check out my jsFiddle for it.

If you like this one, you should also check out this spin.js project by Felix Gnass that adds a bit of JavaSscript to give you more flexibility, control and provide better compatibility with older browsers including IE.

Read more »

Mozilla shows off upcoming Firefox UX changes

This is a slide show presentation by Mozilla’s UX lead Madhava Enros about some of the work his team is doing on Firefox UX. I love the unified interface and especially the way they handle the differences between tablet and smartphone interfaces. In particularly I’m really digging what they’re doing for Windows 8 version of the UI (slide 45) — it’s essentially taking the Windows 8 grid and dashboard view and putting it inside the browser. It looks really good and I actually wouldn’t min seeing this kind of approach in desktop UI in general. Anyway, if you’re into UI, UX or just good interface design it’s worth going through the slide to see what might be coming or even just get some inspiration for your own work.

Page 1 of 812345...Last »