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.
May 27
AceGeneral
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:
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.
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?
Sep 16
AceTech Articles funny
Okay, I just had to post this:
Yes. Seriously. How is this possible? I’m just deleting some folders on my NAS…
Sep 15
AceHow To
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 .
Older Entries
RSS
Latest Comments