Ace on Tech

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.

About this blog in 2010

Ace — Thu, 27 May 2010 21:30:26 +0000

Welcome, once more, to my online scratchpad. It’s been forever since I’ve updated this site with new content, and admittedly, I’ve always had trouble blogging consistently. However – as ever – I’m going to try again. With my starting career as a web developer in mind, I’d like to lay down and share my findings with a wide range of technologies, including Web MVC Frameworks, JavaScript frameworks like jQuery, Web Design and more recent additions to my resume: Mobile Web Development and Mobile Application Development for Apple iPhone and perhaps in the near future, Google Android.

As you can imagine, these are quite an amount of technologies to master, and fast-moving ones at that. So, ultimately, this blog should serve as a sharing platform to fellow web developers and a personal documentation archive for myself. Feel free to contribute in the comments, or via Twitter (via@aceontech).

I’ll be posting more code samples here and will use GitHub and Gist to share sample code and code snippets. I have created a GitHub open source repository, available here:

Website:http://github.com/aceontech/iphonedev
Read-only git repo:git://github.com/aceontech/iphonedev.git

Thanks to ndesign studio for the intermediary use of their WordPress theme. I’m currently working on a more specialized blogging platform, which will include a new design, thus I’ll be replacing WordPress with my own system soon.

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?

Windows 7: Deleting, 3 hours remaining

Ace — Wed, 16 Sep 2009 20:08:45 +0000

Okay, I just had to post this:

Yes. Seriously. How is this possible? I’m just deleting some folders on my NAS…

Help: “The network bridge on device /dev/vmnet0 is not running”

Ace — Tue, 15 Sep 2009 19:42:53 +0000

This error message occurs sometimes in VMWare Fusion on the Mac when using a certain networking setting. This setting, in particular, is the “bridge” function. “Bridge”, as opposed to “NAT”, means the Virtual Machine gets its own IP-address on your local area network. The “NAT” (Network Address Translation) option, however, makes your Mac act like a router behind which the VM resides. This makes the VM inaccessible to the outside LAN, but it still has access to the outer LAN or Internet.

Bridging for VMs is nice because this is a way you can set up a VM to act as a server – serving printers, web resources, media and files. But sometimes, VMWare Fusion behaves awry, throwing up the dreaded exception:

“The network bridge on device /dev/vmnet0 is not running”

This will cause the VM to be disconnected from the network. There’s no real indication what causes this. Neither does it allude to how to fix it. “Just a Blog” provides a solution:

Close the ailing VM
Open the “Terminal” from Applications/Utilities
Type:
cd /Library/Application\ Support/VMWare\ Fusion/
Type:
sudo boot.sh –restart
You may get a message warning you of the perils of sudo. Proceed.
Re-open the VM and make sure network bridging is re-enabled through the Fusion’s “Settings” interface.

You should now be able to access the network through the respective VM. It may occur that this error crops up again. It seems to me that it happens arbitrarily. I wonder why Fusion can’t execute this command by itself, either.

I hope this helped .