The Bright Lines » JavaScript

New download location for Ono List Pager

Wouter Bos — Wed, 14 Dec 2011 22:54:03 +0000

That’s why I created a download page on Github. You can find the last update of the Ono List Pager, which now features a Coda style theme.

The demo page remains the same.

Considerations on building a frontend codebase

Wouter Bos — Thu, 22 Sep 2011 20:46:34 +0000

Every developer at one time stops looking for code from previous built websites and starts building his own standardized code to cut down on production time and repetative work. Call it a boiler plate, codebase, template, scaffolding, framework or whatever. The bottom line is that every developer needs one.

Problems with my current codebase

Well, I already have a codebase, but it has some problems. The important one is that it only covers the very basics. That’s because designs can be very diverse and as a developer I want to stay true to the design. So it’s hard to build a codebase with grids and blocks if all design differ from eachother.

Another problem major issue is something I have more control over: the codebase and the documentation is a bit scattered. The last problem I have is that I have no demo page of my standard CSS code, so there’s no easy way to check the template on browser compatibilities.

Now my jQuery plugin project has reached version 1.1, I had the time to do some thinking about a new codebase that would be solid, extendable, easy to deploy and would replace all other codebases and documentation.

Let me make it clear: this article is about my considerations about building a solid framework for myself. It may not apply to you and my ideas not unique either. It still may be helpful for you to get an idea of what sort of codebase you need.

Existing examples

The most important thing about a codebase is to decide how to set it up and how to store it. I like the way open source grids like Grid960 and YUI have organized their code into little reusable bits and have created a demo and test page for each and every component.

I must admit: I hardly ever used these grids. Most of those grids talk the language of the web developer, not of the designer. And the designers I know don’t have to limit themselves to a 24-column grid system. Not to mention the designers that are totally ignorant of such a system and whose task is to design a website and mail the Photoshop file to some other company that has to build it. Although I have my reservations towards grids, I like the way these codebases are organized. It can serve as a good Blueprint for my own codebase.

I also get my inspiration from Nicole Sullivan’s talk on Object Oriented CSS (OOCSS). OOCSS basically means that you build your components in such a way that they become extendable objects. Just like in real object oriented programming. Just have a look at her talk about OOCSS on Yahoo! Developer Network.

Prefix classes

By adding a (relatively) unique string before the name of the class you have created your own CSS namespace. It will minimize any interference of other CSS styling that is not part of your own code. Some real life examples can be found in the code that is generated by the CMS systems I have experience with: Sitefinity and Sitecore. The CMS Sitefinity for example prefixes all CSS classes with “sf_”.

Grids, blocks and text

All CSS code will be split into different categories that work relatively independently of each other. Until now I can come up with 3 of them.

Grids

Grids are the frameworks of placeholders in which we put our content. You know: header, visual, column1, column2, column3 and footer. There are lots of grid templates around like Grid960 and Blueprint. My view is that those templates only work if the designer agrees to work within the limits of that framework. My ambition is to write a framework that makes my work easier while still being flexible enough to keep the designers happy.

Blocks

There are as many block as the designer can come up with. I think it will be a real time saver to talk with the designer and write down all the types of blocks he thinks he’ll like to use often. Or even better: just open the last 20 or so web designs he/she made and destil the common blocks and its common features. like menus, news article lists, homepage spotlights, etc. Finally you create basic blocks of it in your template system.

Standarization is not always popular with designers but if it means that projects can be created cheaper there may eventually be budget left to build cool stuff. At least, I hope…

Text

Basic text styling is also a relatively independent component in CSS code. You always define a basic font color, family, size and line height that serves as a base styling for the whole websites. More specific text styling in blocks should be kept to a minimum and preferably relatively to the base text style. So if you have a base style of font: 1em/1.5em normal Arial, sans-serif, you ideally should style a header in a block like this: font-size: 1.5em; line-height: 1.2em;.

Although font-weight is not something you can set relative to a base style, it’s not likely that it will look ugly in combination with some design if you add font-weight styling to a block. Setting the font-family in the styling of blocks on the other hand will most likely interfere with design, since designs tend to depend heavily on a particular font.

Create base templates and extend themes

The code for each grid system and each block will be stored in a seperate base CSS file. Each grid or block can be extended with extra themes or styles. Each style extension will have its own CSS file and presumes that the base file is already loaded.

Optimizing CSS

Having all code seperated in small snippets is great for maintaining an overview. As long as you can see what a CSS file does by looking at its filename, its will be easy to add and extend styling to a website.

The template code is not optimized for speed, though. If we don’t do anything about the fragmentation, the server will have to load a bunch of little CSS files. It’s important to stress this: It’s not just the total filesize that matters, each http request costs time. Check out YSlow if you want to know more about this and if it affects your site.

YUI

That’s why all CSS in the website has to be exported, merged and its code minified to one single CSS file. Normally I use YUI compressor for it.

Less

But you can do more than just minification. Less is a system that extends the CSS syntax with stuff like variables, nested rules and mixins. Less was originally built in Ruby, but there’s also an ASP.NET port. I hope it will help me create very flexible grids.

By exporting CSS into optimized code, you can focus on making the most readable CSS source file because all comments and spaces in the code will be removed in the end. This is also what I do with JavaScript code and certainly will continue to do.

The jQuery plugin Ono List Pager reached version 1.0!

Wouter Bos — Sat, 10 Sep 2011 21:12:46 +0000

Demo

About the library

Its development took about half a year and in that time it has become a solid jQuery plugin with the following key properties:

Works in IE7+, Firefox, Chrome, Safari and Opera. Most functions also work on IE6, but that browser is not actively supported.
Supports gestures in mobile browsers.
Supports arrow key events.
Works with the principle of progressive enhancement, so your content is still also accessible to search engines and users without JavaScript.
Very configurable and extendable.
Open source and available on Github.
The library size is just 30Kb. If your webserver uses gzip files, it will be even smaller.

Installation

Extending and improving the library

Examples

Most websites that use the Ono List Pager are still in development, but a good website to show what you can do with it can be found on Estate 15 jaar.

An example of an Ono List Pager instance.

Ono List Pager 0.8 is out

Wouter Bos — Thu, 11 Aug 2011 07:29:27 +0000

A new version of the Ono List Pager is online.

Demo

What is changed in this new release:

Auto adjusting height
New demo page
New autopage animation ‘clock’

Codeview is on Github now

Wouter Bos — Sat, 30 Jul 2011 21:14:34 +0000

https://github.com/WouterBos/Codeview

New release: Ono List Pager 0.5

Wouter Bos — Thu, 09 Jun 2011 20:07:19 +0000

Demo

I’ve pushed some new work online:

There are two new transition types: “fade” and “linearContinuous”. Check out the demo page to see all transition types.
More configuration possibilities. Check out the documentation.
There’s now a time indication when using autopaging. Other time indicators can be plugged in as wel, just like the animation objects for the paging transitions.

Preview Of A New jQuery List Pager Plugin

Wouter Bos — Fri, 20 May 2011 20:49:07 +0000

Demo

The Ono list Pager aims to provide standard code for the paging logic, while the transitions are customizable and extendable. That way the plugin can adapt to a particular design without you having to rewrite the basic stuff. But that’s already the advanced stuff. The Ono List Pager already has a few built-in, configurable transition types, so you’ll most likely just pick some example code from the demo page and go on with your life.

Extending the Ono List Pager

For the more adventurous types: creating your own transition shouldn’t be that hard. It is done by writing a piece of code called an animation object. You can start with a template of the animation object, or you just rewrite an existing one. I do not recommend to write your own animation object though, because the interface of those object can still change during development. In case you do write an animation object I’d like to hear it from you. maybe it can be become part of the plugin.

Open source and available on GitHub

The Ono List Pager is free and its project is available on Github, so go right ahead and make it your own.

Browser compatibility

My aim is to make the library run on all major browsers: IE7+, Firefox, Safari, Chrome and most likely Opera.

Estate Developer Tools

Wouter Bos — Thu, 16 Dec 2010 18:18:15 +0000

View demo

Download Estate Developer Tools

Features

Compare page with original design fast: You can compare the current page with an image of the original design within the browser.
CSS reload: Reload the stylesheets without reloading the page. Extremely useful when designing websites with many Ajax calls.
Console.log fallback: If you use clog(), debug messages will be routed to console.log() if available. If not (eg. you’re developing in IE), the message will be printed in a log box in the web page itself.
Autofill and test forms: Auto fill forms with text that might cause errors like non-western characters, malformed HTML, JS injection and SQL injection. Autofill also works with the new HTML5 form fields.
Timer: Do performance test by checking how long some operation takes.
Works in: IE6+ and all recent versions of Firefox, Chrome, Safari and Opera. I did not check all possible browser versions, but it should work. let me know if you have problems with older browsers. The developer tools do not work in IE’s Quirks mode, but that’s something you should avoid anyway.

Quick overview

Sorry for the bad sound quality.

Installation

Step one is to download the tool. If you unpack the zip, you’ll find example page in the (what else) “example” directory.

Open the file called “index.html”. The developer tools are loaded just before the closing body tag: .

If you want to change the library to your own needs, you can load the source code instead. It’s in 4 seperate files that are in the same directory: Estate.js, Estate.Develop.js, Estate.Develop.FormTester.js and Estate.Develop.DesignTester.js.

After the library has been loaded, you can add items to the top right menu like this:

	Estate.Events.AddEvent(window, Estate.Develop.ToggleVisibility.Init, "onload")
	Estate.Events.AddEvent(window, Estate.Develop.ReloadCSS.Init, "onload")
	Estate.Events.AddEvent(window, Estate.Develop.FormTester.Init, "onload")
	Estate.Events.AddEvent(
		window,
		function() {
			Estate.Develop.DesignTester.Init({
				designAnchor: document.getElementById('DesignTester'),
				xOffset: 10,
				yOffset: 5
			})
		},
		"onload"
	)

The example above will most likely be enough in most cases. The only thing you might have to configure is the Design Tester. That’s because the design image needs to be positioned relative to the main body of the page. Therefore you need to define an anchor by supplying a reference to an HTML element and define the optional offset.

You can also use jQuery to supply an HTML element like this: designAnchor: jQuery('#DesignTester')[0]. The Form Tester is also configurable. Please refer to the object reference for more information.

To install the Estate Developer Tools into your own website, you’ll have to copy the JavaScript code at the bottom of the page to your own and copy the devtools folder to the root of your own website.

After that you only need to create PNG files of the original design and save them in the folder/devtools/design-images/. If a page is loaded, the Design Tester looks for a PNG file which file name resembles the URL of the page. If that image cannot be found, the Design Tester will asks for that file either by printing a message in the console log or in its own fallback log box in the page. You just have to look up the right file and rename so that the Design Tester can pick it up.

Helper functions

Some functionality is not included in the menu

console.log fallback

After the library has been loaded, two global functions are available: clog() and dlog(). You use clog() to send a string to console.log() if available. If console.log is not available, the debug message will be printed in the log box in the website. If you can also choose to always use the log box of the Estate Developer Tools by calling dlog().

Timer

If you you want to optimize, you can use the timer to see how much time JavaScript needs to complete an operation. You just create a new instance of the timer object, set an ID so you can distinguish multiple alert from an another, start the timer, run some function or lines of code and the stop the timer. By stopping the timer, you’ll get a message how much milliseconds the operation costs. Here below is an example:

var oTimer = new Estate.Develop.Timer()
oTimer.SetID('Your time to response')
oTimer.Start()
alert('Press "ok" to see how much time it took to respond')
oTimer.End()

Reference

All public objects and methods have been documented with JsDoc Toolkit. Read the documentation.

Adding more tools

It’s possible to integrate your own developer tools in the menu of the Estate Developer Tool. This code will create an extra menu item and runs some code when a user clicks on it:

/**
 * @namespace Creates extra menu
 */
Estate.Develop.ExtraMenuItem = ( function() {
	var menuButton

	function doSomething() {
		dlog('Menu item pressed')
	}

	/* START PUBLIC */
	return {
		/**
		 * Initializes extra menu button
		 *
		 * @example
		 * Estate.Develop.ExtraMenuItem.Init()
		 */
		Init: function() {
			menuButton = Estate.Develop.Menu.AddMenuItem('Extra item')

			menuButton.onclick = function() {
				doSomething()
			}
		}
	}
	/* END PUBLIC */
})();

It’s also possible to attach a keypress event to it

/**
 * @namespace Creates extra menu
 */
Estate.Develop.ExtraMenuItem = ( function() {
	var menuButton

	function doSomething() {
		dlog('Menu item pressed')
	}

	function pageKeyPress(KeyID){
		dlog('KeyID: '+ KeyID)
	}

	/* START PUBLIC */
	return {
		/**
		 * Initializes extra menu button
		 *
		 * @example
		 * Estate.Develop.ExtraMenuItem.Init()
		 */
		Init: function() {
			menuButton = Estate.Develop.Menu.AddMenuItem('Extra item', 'Press any key')

			menuButton.onclick = function() {
				doSomething()
			}

			// Handle global key events
			Estate.Events.AddEvent (
				document,
				function(e) {
					var KeyID = (window.event) ? event.keyCode : e.which;
					pageKeyPress(KeyID)
				},
				"onkeypress"
			)
		}
	}
	/* END PUBLIC */
})();

No related posts.

Codeview 1.2

Wouter Bos — Tue, 30 Nov 2010 07:29:58 +0000

What has changed in 1.2:

A quick filter, to filter the class list and methods
Extra command line options, thanks to Aaron Wirtz
A more logical template structure, thanks to Aaron Wirtz
Some bug fixes, including one reported by Gregor

Go to the download page.

The jQuery Quiz

Wouter Bos — Wed, 06 Oct 2010 22:45:25 +0000

A few months ago I decided it was time to get better acquainted with the jQuery API. I reckoned that reading a book wasn’t good enough. I had to recall (almost) everything what I’ve learned. So I searched for some sort of quiz program and I settled with Anki. You can create your own batch of quiz cards, so I created one about the jQuery API. Feel free to download my quiz and use it! Anki is available for various platforms by the way.

Tip: You’ll most likely have to configure the question scheduling if you load the jQuery questions.

Download jQuery questions for Anki

Download Anki

Testing your knowledge of jQuery with Anki