Jul 12
AceFreebies, Web Development & Design free, pattern, photoshop
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 
.
Jul 08
AceFreebies, Web Development & Design brushes, photoshop
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 .
Jul 06
AceFreebies, Web Development & Design JavaScript, jQuery
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:
<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.
<h2><a name="resume">Resume</a></h2>
<h2><a name="portfolio">Portfolio</a></h2>
Your document ready function should look something like this:
$(function() {
$.localScroll({
stop: true
});
});And.. That’s it. Refer to the plugin’s documentation for all of its options.
Happy scrolling!
Jul 05
AceFreebies, Web Development & Design free, textures
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):
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 .
Jul 04
AceWeb Development & Design JavaScript, OO
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:
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:
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.
Jan 10
AceWeb Development & Design ActionScript, AIR, Flex
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:
var yourEvent:DynamicEvent = new DynamicEvent("yourEventName", true);
dispatchEvent(yourEvent);The second argument set to true means the event will bubble.
Dec 30
AceWeb Development & Design ActionScript, AIR, Flash, Flex, Programming
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?
Apr 10
AceWeb Development & Design
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
Feb 23
AceHow To, Web Development & Design RoR, ruby, Ruby on Rails
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
More
Feb 20
AceWeb Development & Design Mac OS X, Ruby on Rails
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 (generally a nice 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. Having made OS X my primary (though not sole) operating system, I was delighted to see Mac OS X had nearly all the tools pre-installed and could be updated effortlessly.
PDF version: How To: Set up up your Mac to Develop for Ruby on Rails
More
Older Entries
RSS
Latest Comments