Web Development & Design
Flex/AIR: DynamicEvent
Jan 10th
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.
AS3: How to set focus to an empty textfield
Dec 30th
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]
Apr 10th
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.
How to: Set up your PC to Develop Ruby on Rails
Feb 23rd
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.
How To: Set up your Mac to Develop Ruby on Rails
Feb 20th
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
Acid3 test kills all
Mar 7th
The [recently released] Acid3 test, like its predecessor, allows for subjecting modern browsers to advanced testing of its standards compliance. Acid2, which most current browsers pass (including IE8 Beta 1), was mainly focused on CSS rendering.
Acid3 – on the other hand – doesn’t evaluate a single technology. It was designed to test the whole Web 2.0 experience (ECMAScript, W3C Document Model 2, etc.). It basically determines the level of interactivity a browser can deliver.
Firefox 3 B3
vs.
IE7 
This extremely hard test evaluates a series of 100 criteria and exposes a number of flaws in all leading browsing suites, including IE, Opera, Safari and Firefox. Upcoming versions of Safari and Firefox are to score in the 80-90 range, whereas IE8 scores in the disappointing sub-50 range.
IE7 has been reported to flunk completely with results not even peaking above the 20% mark.
Great Black Icons: NX10 by MazeNL77 [Free]
Jan 24th
Web design and icons naturally go together, whether it’s to merely spruce up the scenery or to accentuate important link elements on a page, there are no two ways about it. Some glossy or matte professional looking icons can really add that extra level of finesse to any design. The word ‘professional’ doesn’t always need to imply costliness, though.
Many talented graphics artists alike are producing sleek icons without wanting a dime back for them. All you need to do is use them gracefully and give the creator some well-deserved credit.
NX06 is a slightly older set of Windows icons which could nicely do for web design as well. It’s prominently black and would perfectly fit designs that feature a lot of blacks or grays. It was inspired by Longhorn (Windows Vista’s codename) and OS X.
PNG format, size 192*192 px.
- Click here for NX06 at DeviantArt
- Direct download link (DeviantArt)
- Artist’s DeviantArt Profile
This artist has not published usage guidelines for this work. Use respectfully and give credit to the rightful owner of the work.
CSS: Strip Away all Styling
Jan 18th
Every browser has its own set of default styling for web pages. In case a particular website doesn’t provide enough styling for a certain element, it applies these instead. The differences between browsers can result into unforeseen results. A good example of this behavior is the difference in margins and paddings defined for lists (<ul>, <ol>, <dl>).
One technique you could use is:
* {
margin: 0; padding: 0;
}
Yes, this will neutralize everything to 0 margin and padding, but it’ll also have its effects on headings, forms, blockquotes, etc. Everything will be aligned crisply to the left side of the page, while this may not entirely be your intention.
@charset "utf-8";
/*-- Initialization Stylesheet --*/
/* v2.1, by Faruk Ates - www.kurafire.net
Addendum by Robert Nyman - www.robertnyman.com */
/* Neutralize styling:
Elements we want to clean out entirely: */
html, body, form, fieldset {
margin: 0;
padding: 0;
font: medium Calibri, Arial, Verdana, Helvetica, sans-serif;
}
/* Neutralize styling:
Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 0;
padding: 0;
}
/* Apply left margin:
Only to the few elements that need it: */
li, dd, blockquote {
margin-left: 1em;
}
/* Miscellaneous conveniences: */
form label {
cursor: pointer;
}
fieldset {
border: none;
}
/* Form field text-scaling */
input, select, textarea {
font-size: 100%;
}
CSS property allows downloadable fonts
Oct 7th
|
WebKit is the open source browser engine driving many Mac OS X applications like Safari (the browser), Dashboard, Mail, etc., and is a derivative of KDE (familiar to some geeks) technology.
Without wanting to sound ignorant, but I haven’t really kept up with Apple software, so if I’m completely honest, I must admit I wasn’t aware of WebKit and looked it up. That put aside, as the folks at SimpleBits suggest, this property raises excitement amongst the web design addicts. It’s so enticing because as a web designer, you want your creation to strike the users in all glory, fonts-galore included. The latter has always been a problem due to the variety of systems and browsers roaming the Internet and inherently, because of this variety, one webpage can look 10 times different in 10 different setups. To aid this, the @font-face property allows the designer to designate a single font which will automatically be downloaded in case the visitor doesn’t come equipped with it.
While this may sound like utter web developer ecstasy, the Internet could (and more like will) become (even more, if at all possible) contaminated with sickening free fonts/dingbats. Amateur wannabe designers will indeed, as stated in the last remark, be given the opportunity to make MySpace look even worse.
Mistakes (web) designers make
Oct 7th
It’s funny how recognizable these mistakes are, as I usually get worked up when I encounter these dorky mistakes and near-instantaneously click the back-button. To me these are obvious mistakes, yet oh so omni-present.
- PDF files are print, not online reading
– Agreed. There’s nothing worse than plowing through a big-butted PDF that takes ages to load (don’t get me started on the way Adobe Reader loads every page individually whilst scrolling…) - Don’t violate design conventions
– While you might think putting your navigational elements at the far bottom of the page is cool, I think your page isn’t worth browsing through to look for them. - Don’t use totally wrong color-themes, like white on yellow (no!)
– It really does hurt to read yellow text on a white backgroud, believe me. - Make your text scan-able
– Or at least make an effort. - Don’t use fixed font sizes
– No, this does not only apply to old people, since I’m the kind of person who likes to enlarge text on a website for prolonged reading. I do this so I won’t strain my eyes for too long, as I use a pretty high screen resolution. I’m sure others agree it’s not very agreable to read a wall of text at a font size of 8 or 10. Spare me or I’ll click away (it’s fine to design this way, but please, let me use my ‘CTRL-+’, thank you).
Follow the link below for the complete article:
|
