Designing Web for Big Data

Art & Design // April 27, 2013

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

JavaScript // September 20, 2012

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

CSS // July 23, 2012

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

Technology // May 2, 2012

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.

Simple Tooltip plugin for jQuery

JavaScript // April 24, 2012

This is a simple tooltip plugin for jQuery. I wanted to create it in part to try out a few ideas, but also to have something a bit nicer than the default tooltips provided by the browsers. It doesn’t allow for ton of customization (none in fact), although the style can be easily modified via CSS. I like customization so it’s something I may add in the future but for now I wanted to get this going and not get bogged down in a more complex implementation. In the process of writing this latest iteration of the plugin (it’s not the first time I’ve started it) I had a bit of a “lightbulb” moment and I wanted to share it. Read more »

Out with cookies, in with local storage — jStorage and jQuery

JavaScript // April 13, 2012

HTML5 Local Storage and jStorage

If you still find yourself on occasion using cookies when developing websites — to remember some setting, or selection, or whatever, stop it! Cookies suck — all you can do is store simple strings, which doesn’t give you a lot of options when you need to store complex information that might require an array or an object.

Local storage, on the other hand, is an HTML5 specification that allows browsers to store objects, XML or JSON data easily and it’s fairly widely supported. Better yet, with the jStorage library it works on pretty much every browser of consequence, including IE7 and IE6, where it falls back to userData behaviour. The only downside in case of IE7 and IE6 is that storage size is limited to 128KB, whereas in most other browsers it’s 5MB. Read more »

Testing string concatenation vs. array join performance in JavaScript

JavaScript // March 31, 2012

Append String vs Join Array Test Results

Some time ago in an “Optimize jQuery/JavaScript” type of article I read that array joins are faster than string concatenations. It seems that this is not true! Although I didn’t just believe the article blindly. I ran a few quick tests and indeed seemed to get results that supported that conclusion. This however, was a while back, it’s possible I screwed up the tests, or maybe browsers started doing things differently.

I’ve already verified, more recently, that this is not the case but I wanted to setup another test using the jsPerf website that allows one to create public tests that aggregate results from all the testers. They also show the results in a nice chart that gives me a big picture view of the test results. In any case, I created a test with 4 cases to see what kind of an advantage string append has over array join. As  well as compare different ways to append strings. The test is available at http://jsperf.com/append-string-vs-join-array Read more »

Page 1 of 712345...Last »