Ace on Tech » Web Development & Design

HTML5: “No actual W3C Recommendation status until at least 2022″ ???

Ace — Fri, 27 Aug 2010 10:36:26 +0000

This InfoWorld article talks briefly about the promise of HTML5 and the potential problems with it due its slow-moving standards body WHATWG. The acknowledgement that HTML5 won’t really be finalized until 2022 made me blink twice. Or thrice. Seriously, 2022? What good is a web standard if it’s always going to be behind by decades? Also note that development on HTML5 was started as far back as 2004, and we’re only now seeing little bits and pieces being implemented by browser makers.

This prospect has completely killed off any enthusiasm I had for HTML5. It seems that in the ever changing world of the web, HTML5 will never be able to live up to its promises. Its development is just too slow. This eye-opener neatly ties into the remainder of the article, which comprises of a thorough side-by-side comparison of the leading RIA framework providers Adobe Flash and Microsoft Silverlight.

When faced with the naked facts of HTML5′s preemptive failure, the grumblings in the industry about RIA platforms dying, are becoming more and more unfounded. It seems only proprietary frameworks like Flash and Silverlight can provide excellent development and design tools, desperately needed by the RIA developer community. These frameworks at least provide a consistent environment in which rich internet apps can run, guaranteeing they’ll look and feel the same across browsers and operating systems. This is something I don’t see happening with HTML5 any time soon.

Any web developer will acknowledge the fact that developing with HTML, CSS and JavaScript is an utter pain in the butt. There are huge inconsistencies to work around with markup, CSS, fonts and JavaScript code. My brain hurts when I think about it. I had hopes for HTML5. Not anymore though.

The very nature of the web, the fact that it’s so ad-hoc, makes it difficult yet interesting to develop for. No, I won’t stop developing web apps. But I won’t dismiss RIA either. Each technology has its uses and perks. The trick is to choose the right tech for the right right. Don’t ditch proprietary (and often superior) platforms just because HTML5 is the “open” way to go. It will impair your ability to deliver truly innovative web apps/RIAs.

For now, Flash and Silverlight are still superior to anything HTML5 has to offer. And it’s going to stay that way for a while, I think. A long while.

Find my original posting at Amplify.
My tweet.

Free Checkered Web Design Pattern: Carbon Fiber

Ace — Mon, 12 Jul 2010 13:43:34 +0000

Simple but good: checkered Photoshop design patterns. I found this one on Brusheezy and was created by RubelCreative. It’s a simple set of three patterns in different styles: (1) plain, (2) shiny and (3) slanted. I wouldn’t use these as-is, because a harsh pattern like these can become pretty eye-diverting. The way I implemented the shiny pattern was to set its blend mode to Overlay with a solid color underneath. Turn down the opacity or fill a notch for good measure.

Download this pattern here (Brusheezy link).

One piece of advice, maybe: please don’t use this as the general background for your web designs, unless it’s toned down somehow. Moderation usually bodes well .

Free Photoshop Brushes: Watercolor Splatters

Ace — Wed, 07 Jul 2010 22:03:23 +0000

If you’re trying to spruce up your web designs with creative touches, Photoshop brushes are an oft-regarded solution. Many digital artists publish free brushes and when used wisely, they can give your designs that little extra oomph. Free brushes are especially nice for people like me, digital art novices. While I was perusing the great Brusheezy (aggregator of free Photoshop patterns, brushes and textures), I came across this great set of watercolor splatters for use on my portfolio page.

Find the download page here (Brusheezy).

The set contains 32 hi-res textures with resolutions up to 1250 and 2500 pixels. The artist doesn’t require attribution, so these brushes can be used freely in a variety of ways. I personally scaled the splatters down to function as backgrounds to my navigation links.

Nite and enjoy .

Smoothly scroll to anchor links with LocalScroll

Ace — Tue, 06 Jul 2010 21:42:38 +0000

This is another one of the great finds I made while designing my portfolio website. Because of its nature, all of the content for this website fits on a single (yet long) page. This page is accompanied by a navigation section on the side containing links to anchors on the page. I wanted a sexy effect when a user clicked on one of the aforementioned links, and finally went with a nice scrolling effect.

Instead of writing this myself, I opted for the free jQuery plugin called LocalScroll, which was skillfully created by Ariel Flesler. This script is very, very simple to implement but adds a high degree of cachet to your page. It’s certainly a nice touch to vanity sites like portfolios or resumes.

Download the plugin here. To make this work, you will need a recent version of jQuery running on your page and another plugin by Ariel Flesler called ScrollTo (LocalScroll is based on ScrollTo and requires it to function correctly).

An example HTML header:

Code block

<head>
	<meta charset=utf-8 />
	<title>Scrolling Page</title>
	<script src="lib/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery.scrollTo-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery.localscroll-min.js" type="text/javascript" charset="utf-8"></script>
</head>

Now all you need to do is create some anchor links and link to them. To make the smooth scrolling work, you need to write a bit of JavaScript.

Code block

<h2><a name="resume">Resume</a></h2>
<h2><a name="portfolio">Portfolio</a></h2>

Your document ready function should look something like this:

Code block

$(function() {
	$.localScroll({
		stop: true
	});
});

And.. That’s it. Refer to the plugin’s documentation for all of its options.
Happy scrolling!

5 Free Grunge Webdesign Textures

Ace — Mon, 05 Jul 2010 20:54:00 +0000

In recent weeks, I started designing my portfolio website at alex.manarpies.com. For this site, I aimed for a neutral, yet “designy” feel and ended up with a grungy blue and brown theme featuring custom typefaces and letter-pressed headings.

I’d like to share the excellent free background textures I used for alex.manarpies.com. It was created by DeviantArt user ‘Princess-of-Shadows and was compiled from scans of actual materials.

Find the original page here.

The image pack features 5 distinct textures with varying degrees of grunginess. You can use them as-is, or bestow some Photoshop wizardry upon them to cook up some custom coloring and effects. I went for the latter approach:

Here’s how I achieved this effect:

Set the texture layer to black and white.
Set the texture layer’s blend mode to Overlay.
Set the texture layer’s opacity to 70%.
Create a new layer under the texture layer and fill it with a color, perhaps a shade of pale blue.

It may have come to your attention that the textures won’t repeat especially well when used as a background. However, as they are pretty hi-res, you could give the backgrounds a fixed background position. For instance (CSS):

Code block

background-color: #d2e0dd;
background-image: url(bg_site_blue.jpg);
background-attachment: fixed;

Grungy background patterns seem to be in vogue lately, and there’s a lot to be had of them on the net – too.
But, please, don’t kill the effect by mere overzealousness. Moderation in everything, my friend.

Have fun with them and report back with your creation .

Namespaces in JavaScript: How To

Ace — Sun, 04 Jul 2010 21:03:34 +0000

Writing JavaScript code can rapidly become messy because of its procedural nature (Object-based as opposed to Object-Oriented). Generally you create variables at the top of your .js-file, followed by functions below. Besides general ugliness, you must remember that such variables are globally accessible from other scripts. This practice implies serious security and privacy issues. To amend this, you can turn to namespaces in JavaScript, and here’s how it works.

Conceptually, namespaces in JavaScript involve creating a stored function. This function subsequently contains private variables, private functions and public functions by means of the return construct:

Code block

var SomeNamespacedObject = function() {
	// private vars
	///////////////
	var somePrivateVar;
	var anotherPrivateVar;
 
	// private functions
	////////////////////
	function doSomethingPrivate() {
		// private business goes here
	}
 
	// public functions
	///////////////////
	return {
		doPublicStuff : function() {
			// public business goes here
		},
		doMorePublicStuff : function() {
			// more public business
		}
	}
}();

You can now reference your namespaced object like so:

Code block

SomeNamespacedObject.doPublicStuff();

Namespacing introduces some pros and cons, but I generally namespace my JS code, sometimes only for the sake of making it look more object oriented. Also, it makes me sleep better at night knowing not all of my variables are being broadcast publicly and I’m not polluting the global variable space.

Pros:

Cleaner
Encourages code reuse
Encourages encapsulation (private vs. public)
Prevents overwriting of existing functions

Cons:

Verbose
Perhaps a bit confusing to JS newbies

My advice? Namespace that JavaScript, my friend.

Flex/AIR: DynamicEvent

Ace — Sun, 10 Jan 2010 19:40:02 +0000

Applies to: Adobe Flex & AIR

A DynamicEvent is a type of custom event in Flex that is easier and quicker to set up than the full-blown approach. By applying the latter method, you normally go through the following steps:

Define a subclass from flash.events.Event
Make the event available to other ActionScript (through addEventListenter()) components or MXML components (using the [Event] metatag)
Dispatch the event, using dispatchEvent()

Full documentation on custom events can be found in Adobe’s LiveDocs, here.

Generally one uses the above approach when you need to pass arguments to the code that’s targeted by the event. When you don’t require this, however, you can opt for the DynamicEvent. It’s not necessary to go through the whole rigamarole of subclassing; all you need is a name for the event, like so:

Code block

var yourEvent:DynamicEvent = new DynamicEvent("yourEventName", true);
dispatchEvent(yourEvent);

The second argument set to true means the event will bubble.

AS3: How to set focus to an empty textfield

Ace — Wed, 30 Dec 2009 21:41:25 +0000

Applicable to: Adobe ActionScript 3, Adobe Flex, Adobe AIR

This simple operation isn’t very obvious in ActionScript 3. The TextInput element has a boolean property called focusEnabled, but this doesn’t seem to do anything (it’s probably meant for other purposes, didn’t take the time to check).

The way achieve this is two-fold:

stage.focus = yourTextField; yourTextField.setSelection(0,0);

If your textfield contains text and you wish to place the caret to the end, you would probably go about it like so:

stage.focus = yourTextField; yourTextField.setSelection(0, yourTextField.length);

Makes sense now you know about it, huh?

Free Icons: Function Icon Set [Webdesign]

Ace — Fri, 10 Apr 2009 22:51:17 +0000

The free ‘Function Icon Set’ from wefunction.com features 128 icons in pleasingly neutral color schemes. They aren’t awfully big – at generally 48 x 48 pixels – but certainly large enough for web design work.

When designing websites, it’s often necessary to gussy things up with icons. Though they have a big aesthetic appeal, they often also make the design more user-friendly by clarifying certain design elements. Icons aren’t to be underestimated in importance. Some good old icon eye-candy can work miracles in spicing up your websites’ designs.

Because I’m not much of a graphical artist I usually rely on the creative minds of the pros for most of my design stuff. Since the main colors I’m dealing with are matte blues and grays, my upcoming design requires a neutral set of graphics. After some googling, I quickly came across the free ‘Function Icon Set‘ which will fulfill my requirements rather marvelously. Thanks to the great icon artist(s) over at wefunction.

http://wefunction.com/2008/07/function-free-icon-set

How to: Set up your PC to Develop Ruby on Rails

Ace — Mon, 23 Feb 2009 22:29:29 +0000

Web development of is an area of general heterogeneousness when it comes to the tools used to develop for it. ‘Regular’ standalone software development is often characterized by its standardized development regime, with its compilers and IDEs (Integrated Development Environments) defining the stage.

Enter the world of web development and matters are startlingly different. For most scripting languages, be it client-side or server-side, there are no de facto IDEs, nor are there compilers to deal with (which is generally a pleasant side-effect). While this gives you a lot of freedom, it may also be hair-raising and confusing, especially to beginners.

Since my interest for Ruby on Rails has recently been refueled I set out to deepen my knowledge on the matter. Soon enough, I was faced with setting up my computer to accommodate Ruby on Rails development. Unlike OS X, Microsoft Windows doesn’t come with Ruby or Rails baked right in, so we’ll need look at the options for installing it locally. As it turns out, things can turn out to become slightly complicated if you’re on Windows.

On a Mac?

PDF: How to set up your PC to develop Ruby on Rails

RoR Recommended Defaults

Ruby on Rails is a fairly new platform and therefore has undergone numerous significant changes throughout its short lifetime. These changes influence how you need to set up your computer.

With this in mind, it may be handy to list up the current versions of the Ruby on Rails’ components (as of February 2009):

Ruby: latest 1.8 series stable version by default (latest release: 1.9.1)
Rails: 2.2.2
RubyGem: 1.3.1
SQLite: 3.4.0

SQLite is now the default development database because it is lightweight and requires no configuration whatsoever. While other database solutions like MySQL and ORACLE aren’t, SQLite is completely portable, because it’s essentially a flat-file embedded located in the Rails application directory.

Set up RoR on your PC

I’ll be assuming your computer is reasonably up to date with Windows Updates and the like. My testing machine was running Windows Vista SP1 and had no RoR-related components installed.

Realistically, there are two ways to get Ruby on Rails on your PC: a full native install of Ruby, Rails, and SQLite3 or the prepackaged (and recommended) InstantRails. Either approach has its own pros and cons, so you’ll have to decide for yourself which road you wish.

I prefer the prepackaged option merely because I was utterly incapable of getting SQLite3 recognized by Rails. I’ve searched high and low, but to no avail. I will describe the process, though, if you oh so dearly wish to venture into it, but as I said, if you’re unfamiliar (or intentionally ignorant) on the matter, I recommend going with InstantRails.

The pros of InstantRails:

Instant gratification
Zero config. Zero Hassle.

The cons:

Not up-to-date out-of-the-box, will need some updating after installation.
Comes with Apache Webserver and MySQL unnecessarily.
Mandatory use of InstantRails command prompt.

The Rails development team recommends using Webrick/Mongrel as the development webserver and SQLite3 as the database server, because of their sheer ease of use. If you decide to follow their guidelines (which you should as a starting RoR-developer), you’ll end up never using Apache and MySQL. Whilst this is not a problem in itself, one might argue that they’re dispensable cruft.

I say, don’t give a hoot and get InstantRails running a few concise steps:
Grab the latest zip-file from SourceForge: http://rubyforge.org/frs/?group_id=904.
Decompress it into a directory on your disk, e.g.:  C:\InstantRails
Start InstantRails:
open InstantRails.exe from the install folder
Open the InstantRails command-line from the InstantRails command-window and type:
gem update –system
gem update ruby
gem update rails
gem update sqlite3

After some command-line churning invoked by the commands above, your Rails installation should be ready to go. As mentioned, Ruby on Rails commands will only work from within the InstantRails command-prompt. It is also recommended you place all of your Rails Apps in the designated folder (e.g. C:\InstantRail\rails_apps).

If all goes well, you should be ready to go.

Full-on native install

If you prefer to do a component-by-component installation of Ruby on Rails, you can. At first glance, this may be the preferred method since you get the opportunity to leave out unnecessary stuff (like Apache). I myself, have encountered insurmountable issues with SQLite3 on Windows Vista, preventing me from completing the process.

Get the Ruby installer from www.ruby-lang.org
Once complete, update gem: gem update –system
Update Ruby and Rails: gem update ruby gem update rails
Go to http://www.sqlite.org/download.html, download the latest Windows ZIP, and unpack it into the ‘/ruby/bin’ directory (e.g. C:\InstantRails\ruby\bin)
Add the 3 files you’ve just unpacked (.exe, .dll, .def) to your system’s path, here’s how.
Install the SQLite3 driver to Rails: gem install sqlite3-ruby

If you come across no hiccups, you should have systemwide access to Rails.

Conclusion

In retrospect, it’s fairly easy to get Ruby on Rails running on Windows, save for the fact it’s a little convoluted. Once more, if you want fast access to RoR, I’d recommend you go with the InstantRails-approach. It is the most automatic install-procedure around, and Windows-users like automatic, and so do I.