Five Ways to Become a Better Software Developer

by Josh Tynjala

For a while now, I’ve wanted to put together a collection of tips for up-and-coming software developers. I’m talking about talented guys and gals who dream of working on more exciting projects and maybe getting a little recognition. Not entirely sure how to go from code monkey to code ninja? I don’t have all the answers, of course, but each of these suggestions has personally helped me improve my career and discover other talented people that were definitely worth meeting.

Contents

  1. Write Code For Fun

  2. Study Software Architecture and Design Patterns

  3. Start a Blog

  4. Join a Community

  5. Keep Yourself Motivated

Write Code For Fun

For some software developers, coding only happens at the office. Once they step away from their desk, they won’t touch a compiler until tomorrow or after the weekend. On the other hand, many of the most successful developers I know write a little bit of code at home too. Some contribute to open source projects. Some simply build the occasional little utility for themselves. Some actually build something cool enough to become a product and make the developer a little extra money. Whatever the focus, side projects like these are a great way to explore interesting ideas and to learn new skills without all the deadlines and politics you deal with every day at work.

Obviously, you don’t need to make spend every night coding. By all means, have a social life. However, if you find yourself sitting on the couch in the middle of the week with nothing to do, brainstorm a project idea that you’ll find exciting and challenging.

Fun Side Project Ideas

  • Use some libraries or APIs you’ve been itching to play with, but never had a reason to use in your everyday work.

  • Create a new application or extension to an existing app that will help you get something done faster.

  • Design a fun little game. Maybe make some money on it.

  • Try to build something you’ve never seen anyone do with your technology-of-choice before.

  • If all you know are web apps, switch it up, and learn how to write a compiler or an operating system kernel.

  • Try to learn a new programming language.

Be ambitious. Stretch your limits. It’s okay if you fail. You’ll learn something no matter what the result.

For me, personally, coding in my free time has been the best way to learn anything about software development and various technologies. I jump into new frameworks, APIs, and technologies headfirst and come out with greater knowledge that helps me a thousand times over on the things I actually get paid to do. My co-workers often say “let’s ask Josh” when they run into trouble because they know I’ve spent a lot of time digging into a wide variety of features. In many cases, I’ve already discovered a bunch of quirks and bugs that they might run into, and I can often share workarounds so that they won’t get stuck for hours figuring it all out themselves like I had to do.

Though I never get paid directly for the time I spend on fun side projects at home, I’ve found that the skills and knowledge I gain on these sorts of projects earn me better rewards in the long run.

Back to Top

Study Software Architecture and Design Patterns

Beautiful code is useful, reusable, extensible. Strive to make the quality of your code better as your progress through your career. Figure out how to make functions and classes more generic. Find ways to make your code more extensible so that other developers can create custom functionality easily without changing the internals. Discover and experiment with new ways to get the same tasks done to figure out if you can do something better.

One good way to improve the quality of your code is to look at code written by other developers. Check out the code other members of your team have written. If you find something interesting or confusing, go over to their desk and ask about it. Your co-worker will probably enjoy knowing that you’re interested in his or her work, and you’ll learn something in the process. Alternatively (no, additionally!), look at the source code for prominent open source projects, and try to figure out how they work behind the scenes. I like to look at code from libraries and frameworks that I use in my daily work because I intimately know the input and output of many of the APIs already. If you’re feeling confident, see if you can improve any of the code, fix a bug, or add a new feature. One of the best ways to learn is to get your hands dirty and do some real work.

Likewise, you should let other developers look at your code and provide suggestions. As you probably know, in a professional environment, this is called code review. Allow them to ask questions and make critiques. Don’t be afraid of someone telling you that something in your module isn’t the best it could be. It’s easy to feel defensive about something that’s taken a lot of hard work, especially if you feel proud of how it turned out. I like to think about it this way: if my code isn’t the best it could be (most importantly, if it has bugs), I’d rather get it working properly now than to have a disgruntled user complain about its problems later. Even worse, they might give up completely and fail to tell me about what went wrong! Mistakes happen. Acknowledge that something isn’t perfect, and when you fix something after receiving a bug report, be happy that you have one less thing to worry about in the future.

Consider learning about design patterns. A design pattern is a commonly accepted way to structure your code to solve a type of software engineering problem. They don’t provide the complete solution with everything finished for you. Instead, they describe a more generic architecture that applies to multiple problems that have similar requirements. Generally, development frameworks are the best place to find extensive use of design patterns. Often, frameworks use patterns to help developers structure projects in a more standardized and efficient way. Additionally, their use of patterns help to decouple parts of a project so that future changes have a less impact across the entire codebase. Many teams like to use a single framework from one project to the next because it helps the developers become productive faster both when starting new projects and maintaining existing projects.

Back to Top

Start a Blog

You know all those cool little projects and experiments you’ll soon be building in your free time? Consider starting a blog where you can share that stuff with others. Blogs don’t just have to be diaries about the mundane details of your life. For many successful developers, a blog’s content can be as effective as a resume. I can’t tell you how many hiring managers have mentioned that they enjoyed reading a few of my recent blog posts. A blog with excellent descriptions of technical concepts, source code samples that follow best practices, and explain things in casual and friendly tone can be a strong supplement to help an interviewer evaluate a job candidate.

Allow people to comment on your blog posts. Be the person that starts (or continues) a great conversation. Don’t be afraid of feedback or criticism. Everyone learns by making mistakes. My Composition teacher from my freshman year in college once explained that the best essays tend to have the most red-ink feedback in the margins. Not the worst ones. He explained that if you get constructive feedback from someone, its generally because they like what you’ve created, and they see value in helping you improve it.

A Few Blog Post Ideas

  • Share some clever code or a useful class you wrote, and explain how it helped you solve a difficult or normally tedious problem. If it helped you get something done easier or faster, it’s likely that other people can benefit from it too.

  • Talk about the process you used to implement a project from beginning to end. Tell your audience what worked and what could be improved the next time you need to build something like that. Everyone wants to get their work done faster and more smoothly. Learning about the challenges another person has faced is a great way to be prepared for the future.

  • Has a company relevant to your field announced a useful (or useless) new product or service, or has a prominent industry leader said something very controversial? Share your own opinion on the subject. Do not write a “me too” post that’s only a paragraph long just to link to another blog or website. Collect your thoughts and contribute to the conversation by writing a response to the news from your unique perspective. You may discover that all those lame “me too” posts start linking to your blog as well.

In short, focus on creating useful content that will help others or provide relevant information that they may not find anywhere else. If you put useful information out there, people will find it and then come back for more.

Back to Top

Join a community

Whether we’re talking mailing lists, user groups, conferences, or some other venue, developer communities spring up anywhere and everywhere. These communities can provide awesome ways to improve your skills by learning from others, to help others by sharing your own expert knowledge, and to meet like-minded developers that may become friends, colleagues, and a part of your growing professional network.

Though the least personal, mailing lists and forums are a great way to take a first step into participating in a technology community. While blogs are a bit more monolithic with a single source of discussion topics and shorter conversations (if any), forums and mailing lists produce more longer-term discussion on a wider variety of topics. In general, things are informal, and a lot of discussion (depending on the community, of course) starts from someone having a problem and looking for advice. In more active communities, discussions about frameworks, best practices, and new techniques for solving problems can grow to hundreds of messages and provide a wealth of real-world experience.

Conferences often give you access to a national or even worldwide community of people working with your technology of choice. They provide you with opportunities to travel, to meet prominent bloggers and community leaders, and to have a good time while staying relevant to work. They can be expensive, though, so you’ll often have to ask your employer to pay for your trip, and they’ll expect you get more out of the experience than personal networking. They want to know that their investment helped you learn something that will benefit their business. Your best bet for learning, especially if you’re like me and you already stay up-to-date on the latest and greatest through blogs and other online sources, is to go to sessions that cover technologies or features you don’t normally use or to focus on sneak-peek type sessions where something is being introduced for the first time.

If you’d rather stay near home, or if you don’t have the budget for a big conference, consider joining a local user group. These small city- or region-based communities generally offer free monthly meetings where developers can get together for a few hours chat about tech. There’s often a presentation by a group member or a visiting professional on topics similar to those found in conference sessions, followed by some informal discussion that may meander to a wide-variety of topics. After the meeting, everyone may go out for a couple beers and continue chatting about the tech they love. It’s a great way to find work, look for new employees, and learn what other developers are doing in your area. You may be surprised to discover which companies, big and small, have offices nearby. In my opinion, one of the best parts of a user group meeting is that the informal setting tends to make everyone more approachable and friendly. It’s not as intimidating as the crowds of several hundred to several thousand you’ll swim through at conferences.

Back to Top

Keep Yourself Motivated

Once you start down the road to success, things start to feel a bit different. People start showing you more respect. They ask for your opinions on how to best approach a problem. They listen more carefully when you have something to say. It feels great! However, that’s not reason to stop working hard to be a better developer.

If you stop working on fun side projects, learning new techniques, blogging, and participating in communities, you’re going to eventually fall behind. One day, you’ll discover that all the cool kids are “suddenly” doing things you don’t quite understand anymore. Sometimes, this is partially inevitable. Once you’ve become one of the best at what you do, you start to spend more time on very specialized projects. You end up in your own little bubble, and you can easily rationalize not staying on top of every new development. That’s not necessarily a bad thing, but there’s a line between doing this and getting too comfortable or losing focus.

Many times, feeding the desire to become a better developer offers rewards that will continue to motivate you to do more. Praise and recognition along with chances to work on more exciting and interesting projects are often enough to keep you excited. At the same time, overstimulating yourself (by overscheduling) can be a powerful demotivator. With too much “real” work, you may find yourself too tired to do the fun stuff like blog or build side projects. When that happens, you lose a powerful influence: you won’t be stimulating your mind with new ideas from outside sources. I find myself at my most creative after I’ve worked on a project in another language or if I’ve talked shop with other developers working on widely-different projects.

Every developer is different. What works to keep me motivated may not be what works for you. If you’re feeling a little burnt out, take a moment evaluate what has changed recently. Brainstorm new ideas or find inspiration elsewhere. Many developers have non-programming hobbies like playing an instrument, working on cars, or mountain climbing (among many, many others). Often, it’s something that they consider both stimulating and relaxing at the same time. Don’t let yourself get stuck in a rut too long. Be proactive and figure out what it takes to get yourself back on track.

Back to Top

Final Thoughts

Certainly, I don’t consider this list of tips an exhaustive resource. Nor would I say that doing all these things will be right for every software developer. However, I’ve described many contributing success factors in my own personal career as I see them. I would have loved to read an article like this when I was just starting out. If you’re an experienced developer, what helped you get better at your job?

22 comments
Monday, January 12th, 2009

Open Source Flex Component: TreeMap updated to version 2.1.0

by Josh Tynjala

It seems that I’m on a Flex component development streak lately. A couple days ago, I got some inspiration to give a little attention to my TreeMap Flex component. After initially starting on some minor performance enhancements, I kept finding more and more I could do. Several commits later, I realized I was putting together a very solid new release.

Screenshot of Introduction to TreeMap example

Most interesting of this release’s additions are the performance enhancements. I hadn’t expected to improve the performance much more than what I was able to achieve moving from the 1.x archtecture to the 2.x architecture. However, some extra time spent in the profiler, along with some inspiration from a blog post on Flash Player’s dirty rectangle by Seb Lee-Delisle (the problem he overcame wasn’t directly related to what I optimized, but it made me think about improving the way I use certain display list functions) gave me a noticeable speed increase for larger data sets over 500 items.

Another big improvement is a new implementation of the default “Squarify” layout algorithm. The original version of this algorithm, and the one that most people implement in other open source treemap projects, is recursive. As I discovered, with a large enough data provider (between 1100-1200 items), the algorithm can easily cause a stack overflow in Flash Player. I rewrote the algorithm to run in a simpler while loop, so the number of items in the TreeMap’s data provider won’t be a bottleneck anymore. This change has a positive side effect; by removing so many function calls (which have a certain performance overhead), the algorithm ends up running a bit faster.

Those are the most interesting improvements. Others include the addition of properties for separately specifying branch labels and data tips (for instance, branchLabelField takes precedence over labelField), better (and faster) skins for leaf renderers, proper non-interactive behavior when enabled is set to false (I always forget to test that when I build components), a new branchZoom event on TreeMap, more complete API documentation, and a new example named Introduction to TreeMap (pictured above) that combines, streamlines, and replaces a few of the older examples.

Like what you see? Download flextreemap from the project page. The download includes the component SWC, documentation, compiled examples, and the full source code licensed under a widely-usable MIT license. The TreeMap API documentation is also available livedocs-style online, and you can view the examples there too. and if you find any bugs in the component, the documentation, or the examples, please file a bug report. Feature requests are welcome too.

Important note: TreeMap now requires Flex 3.2.0 at the minimum. The leaf renderer is very similar to a button, and I followed some of the conventions the Flex team are using to implement the Marshall Plan as it relates to mouse events and sandboxing. Some of the APIs involved don’t appear in earlier SDKs, so you must use Flex 3.2 or higher starting with TreeMap 2.1.0.

20 comments
Thursday, December 11th, 2008

Open Source Flex Component: PopUpThumbnail

by Josh Tynjala

While working on a new example for flexwires, I built simple Flex component to display thumbnail images. When you click on the thumbnail, the full size image is displayed as a modal pop-up. The idea is similar to Lightbox, a popular JavaScript component. It’s a very simple UI control, sure, but I think it’s definitely useful in a wide range of Flex projects, so I wanted to share it. Click the image below to view a Flickr search app that demonstrates the PopUpThumbnail control:

Screenshot of the Flickr search example for PopUpThumbnail

Usage is pretty simple. It’s a subclass of the familiar mx.controls.Image, with one important change: the source property applies to the full-size pop-up content. A new property, thumbnailSource is what gets displayed in the small-size thumbnail.

<flextoolbox:PopUpThumbnail source="lolcat-big.png"
    thumbnailSource="lolcat-small.png"/>

Surprisingly, I discovered some challenges in building this component. In particular, I had one requirement that made things a little interesting. If no thumbnail is specified using the thumbnailSource property, one is automatically created by taking a bitmap snapshot of the full-size content. In this case, the full-size content must be loaded immediately. Normally, to save bandwidth, the full-size content is loaded only when it is needed (when the thumbnail is clicked). In addition to loading images from external sources, there’s also the possibility that the full-size content could be generated at runtime in Flash Player. My upcoming example for flexwires manipulates BitmapData, so there’s no need to wait for a network operation. This creates a fun little maze of activity where the internal loading mechanisms in SWFLoader may or may not dispatch Event.COMPLETE to tell me that a thumbnail can be created, that I can display a progress indicator, or that the full-size content is ready to be shown and animated.

You’ll find some interesting extensibility points in this component, if you’re interested. For instance, you can customize the progressIndicator style to display something other than a ProgressBar control. A simple SWF animation might be used instead, or a custom subclass of ProgressBar with a wildly different appearance (I can’t wait until Flex 4 skinning is mainstream. That’ll make it even easier). Another thing to note is that normally, you simply have to click anywhere to hide the full-size content pop-up after it has been shown. If you want to display something more complex than an image, such as interactive content, you can change the clickToClosePopUp property to false and set up your full-size content to dispatch CloseEvent.CLOSE when it is ready to be hidden. Imagine loading a questionnaire or a wizard when some item is clicked, or even a game, and you’ll have an idea why I made that possible.

Download the component SWC and source code from my Google Code repository. API documentation for PopUpThumbnail is available as part of the common documentation with my other “Flex Toolbox” controls like ZoomFrame and CheckBoxList. As with most of my other open source code, PopUpThumbnail is available under the terms of an MIT-style license.

Start the Discussion
Thursday, December 4th, 2008

Open Source Flex Project: flexwires

by Josh Tynjala

Update (6/18/2010): Modified post to reflect the new URLs on github. This project is no longer updated on Google Code.

After a few weeks of hard work, I’m happy to present flexwires, an open source library featuring “wiring” components for Flex. If you’ve ever played with Yahoo! Pipes, you’ll understand the UI paradigm I’m talking about. Basically, data is passed around the application by connecting jacks together with wires, similar to how one might connect cables between a TV and DVD player or from a computer to a network.

Be sure to take a look at the fun YouTube video player example:

Screenshot of YouTube example

flexwires is available for download from github under the terms of the MIT license, so it may easily be used freely in both open source and commercial products. Be sure to take a look at the API documentation, and the source code for the examples are available in the main ZIP file. A simple tutorial on the wiki walks you through adding the library SWC to your project and explains the Getting Started example.

Update: In addition to releasing the library, I’ve made minor updates to Logicly, the logic gate simulator I posted about last week. The logic gates now support circular references, which allows some particularly interesting circuits to be created.

Update: I forgot to mention something very important. Due to a bug in earlier versions of the Flex SDK, flexwires requires Flex 3.2 at the minimum, so be sure to update, if you haven’t already.

Start the Discussion
Monday, November 10th, 2008

Logicly: a logic gate simulator built in Flex

by Josh Tynjala

Update: flexwires, the UI library used in this application, is now available for download. Read my introductory blog post about flexwires.

Recently, I decided to take some time off to relax and take a short break from regular day-to-day software development. At least that was the plan. A few days into my much-needed vacation, I got the itch to write some code, and I soon started building a library for Flex to allow “wires” to transmit data among controls in an application. Have you played with Yahoo! Pipes? It’s basically the same sort of UI concept, but built for Flex.

Screenshot of the Logicly application

To test the library, and to have a more complex application that could show off its features, I started building an app that I call Logicly (yes, I know, I’ve been infected with the trendy Web 2.0 misspelling bug). During my university days, one of my professors requested that we students build an application much like this one so that he could use it for demonstrations in his Computer Architecture classes. Basically, Logicly allows you to chain together “logic gates” to simulate the boolean algebra used by digital circuitry. You know, simple operations like AND, OR, NOT, XOR, and others. Nothing revolutionary. In fact, I found several 90s-era Java applets that do the same thing, but I’ve got to say that a Flex app feels much more responsive and rich than that old Java stuff, even without a very creative skin.

If you’re interested in playing with the wiring library, I’m going to have to ask you to be patient for a bit. It will be an open source release, but I still need to finish writing documentation and building some simple examples to get everyone started. Additionally, the library is not compatible with the current version of the Flex SDK. There’s a bug with the drag manager when you use custom cursors, and I had to start using the 3.2 nightly builds to finish development. In short, stay tuned while I get everything polished, and enjoy the Logicly preview app for now.

45 comments
Monday, November 3rd, 2008

The Instantiator: A simple Flex utility class for more powerful skinning in custom components

by Josh Tynjala

One thing that bugs me about the core Flex SDK components is that they use the Class datatype for just about everything. From time to time, you encounter the awesomely flexible mx.core.IFactory type for a renderer property, but when it comes to styles, Class is king. The problem is that sometimes I wish I could instantiate a Function object prototype-style. It’s a great way to create new “classes” at runtime.

There’s nothing I can do to fix this limitation in the core components without patching the source manually (I know, I’ve tried several crazy ideas), but when I create a custom component, I can make it much more flexible. The easiest solution, the one I’ve been using most often, is to simply type the style value as Object whenever I use getStyle() for a skin style:

var skinClass:Object = this.getStyle( "skin" );
var skin:DisplayObject = new skinClass();

This allows Function to be used with the new keyword like a Class, which is generally enough for my needs.

However, I also mentioned IFactory earlier. There’s something compelling to me, as a component developer, in the simplicity and power of allowing my developers to use a factory to customize skins. I usually find a decent enough substitute through styleName or the StyleProxy class, but I feel like I’m rewriting the same boring code over and over again whenever I make yet another skin or sub-component styleName style. Don’t get me started on chaining styleNames multiple levels deep. Every time I do it, it feels awesome because I know everything is super-customizable, but I also wonder how many developers understand how these work. Of course, the fact that you can’t create an IFactory in your stylesheets is a problem. One could argue the same thing about using a Function to instantiate a skin, though, but I find a function’s ability to create a runtime datatype through prototype too compelling to ignore. I’m not quite as sure about IFactory, but I feel the option is useful to have, even if I don’t need it too often.

I could always change my instantiation code to look like the following, but I’d hate to repeat these several lines over and over again when I want to build a skinnable component:

var skinBuilder:Object = this.getStyle( "skin" );
var skin:DisplayObject;
if( skinBuilder is IFactory )
{
    skin = IFactory(skinBuilder).newInstance();
}
else
{
    skin = new skinClass();
}

With that much code needing to be repeated across multiple components, it’s starting to scream utility function. A few minutes ago, I came up with the idea for The Instantiator a useful utility for just this situation. Check it out:

var skinBuilder:Object = this.getStyle( "skin" );
var skin:DisplayObject = TheInstantiator.newInstance( skinBuilder );

Basically, you pass in the raw style value, and TheInstantiator will create a new instance if it knows how. If not, then it returns null. Here’s the source for the class:

////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (c) 2008 Josh Tynjala
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
//  The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
//  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
//  IN THE SOFTWARE.
//
////////////////////////////////////////////////////////////////////////////////

package com.flextoolbox.utils
{
	import flash.utils.getDefinitionByName;

	import mx.core.IFactory;
	import mx.styles.ISimpleStyleClient;

	/**
	 * Utility for creating instances of Flex sub-components or skins.
	 *
	 * @author Josh Tynjala (joshblog.net)
	 */
	public class TheInstantiator
	{
		/**
		 * Creates a new instance of an object. Supports Class, Function, a
		 * fully-qualified class name String, or mx.core.IFactory.
		 *
		 * @param type			The type to instantiate
		 * @param styleName		The styleName to set if the instantiated object supports styles.
		 */
		public static function newInstance(type:Object, styleName:String = null):Object
		{
			var instance:Object = null;

			//first check whether type is a String.
			//if so, try to convert to a class
			if(type is String)
			{
				try
				{
					//will throw an error if it's not a fully qualified class name
					type = getDefinitionByName(type as String);
				}
				catch(error:Error)
				{
					return null;
				}
			}

			//Class and Function may be used with the new keyword
			if(type is Class || type is Function)
			{
				instance = new type();
			}
			else if(type is IFactory)
			{
				//mmmmm... factories are great
				instance = IFactory(type).newInstance();
			}

			//if the new instance supports styles, set the styleName property.
			if(instance is ISimpleStyleClient)
			{
				ISimpleStyleClient(instance).styleName = styleName;
			}

			return instance;
		}
	}
}

You’ll also notice a couple extras. First, you can also pass in a fully-qualified class name as a String value, and it will automatically retrieve the proper class to use, or it will return null if it fails to find the class. Second, I defined an optional styleName argument. Since setting style names is often part of creating a new instance of a skin or a sub-component, it’s easy to get this done at the same time and save a couple lines of code. There’s a check for whether the instantiated object is an ISimpleStyleClient, which is Flex’s interface for display objects that support styleName, so nothing should go wrong if the object doesn’t support styles.

You know, reading this all over again now, I think it would be great if ActionScript defined an interface for datatypes that could be instantiated with the new keyword. Class, Function, and even Flex’s IFactory could implement it, and developers could create their own factory-like classes that could be used in place of Class with the new keyword. That almost smells like a feature request….

Start the Discussion
Monday, October 27th, 2008

Cole's Learning Flex 3 perfect for newbie Flex developers

by Josh Tynjala

Though I haven’t had much time for reading lately, I recently finished Learning Flex 3 by Alaric Cole. It’s a solid introduction to Flex, and while it doesn’t get too heavy on the intimate details of the Flex framework, I can definitely recommend it for people who are looking at Flex for the first time. The flow throughout the book is unique, and if you combine that with the stylish design, it’s an excellent read for a new Flex developer.

Cole’s writing style is clear and friendly, and he carefully introduces new features as they’re needed in his example applications. It’s a bit different from the progression I’ve seen in other programming books, but I found it refreshing and interesting in a way that I think will keep most readers interested. As with any programming book, I’m happy when I learn something new, and Alaric had some interesting tips for features in Flex Builder’s Design View that I’d never used (like highlighting container bounds). I tend to stick to the Code View as much as possible myself, but it’s still good to know.

My absolute favorite part about the book is the full-color content on every single page. Like Learning ActionScript 3.0, another Adobe Developer Library book by O’Reilly which I reviewed previously, the addition of color makes the book stand out from the pack. Every Flash or Flex book I’ve read in the past has included black and white screenshots. With RIA content being very much about visual appeal and design-heavy details, it makes sense to ensure that all visual references in the book are in color. I remember a couple books that I read previously where screenshots were useless because they didn’t make the greyscale transition very well. Learning Flex 3 continues to set a new standard for Flash and Flex books.

One thing Cole doesn’t focus on much is the language syntax for ActionScript 3.0. This is a book specifically about getting started with Flex, and you’re expected to know a bit about programming already. I personally enjoy this aspect because I’m tired of seeing yet another “This is a variable. This is a loop. This is a class.” introductory chapter. However, for true newbies, the lack of an AS3 introduction could make getting started a challenge. I already mentioned Learning ActionScript 3.0, and I assure you that it covers all the missing details. If you’re new to software development and programming, consider picking up both books since they offer a more comprehensive introduction for someone completely new to programming with either AS3 or Flex.

Full disclosure: When I worked at Yahoo!, Alaric and I had neighboring desks. Don’t let that stop you from taking my recommendation, though. Learning Flex 3 is a solid book for someone completely new to developing with Flex. If you have a bit of experience already, though, a more intermediate book like Programming Flex 3 might be a better choice. If you’re interested, I wrote a review of the Flex 2 version.

Start the Discussion
Wednesday, October 22nd, 2008

I see your privates: How objects of the same class can share private variables in AS3

by Josh Tynjala

Today, I was surprised to discover something that I didn’t know about private variables in AS3. If an instance of class A has a reference to another instance of class A, then the second object’s private variables are accessible to the first object. No restrictions. No special tricks. You just use obj.variableName like any other property request. I’ll show you some example code, and you can try it yourself.

First, let’s set up the situation. Alice has a secret in her diary. Trudy wants to know Alice’s secret, so she’s going to sneak in and take a peek. Here’s a simple document class that presents our story in code:

package
{
	import flash.display.Sprite;

	public class ISeeYourPrivates extends Sprite
	{
		public function ISeeYourPrivates()
		{
			//the intruder
			var trudy:Person = new Person("Trudy");

			//the victim
			var alice:Person = new Person("Alice", "I kissed a girl, and I liked it!");

			//Trudy is curious, and she wants to read Alice's diary
			trudy.peekIntoDiary(alice);
		}
	}
}

Finally, this UML-like diagram below also shows what’s happening:

UML-like diagram. Alice and Trudy are instances of Person. Through peekIntoDiary(), Trudy can access Alice's private variable _secret.

Next, let’s look at the Person class and see how the peekIntoDiary() method works:

package
{
	public class Person
	{
		public function Person(name:String, secret:String = null)
		{
			this.name = name;
			this._secret = secret;
		}

		public function peekIntoDiary(target:Person):void
		{
			trace(this.name, "is looking at ", target.name + "'s secret:", "\"" + target._secret + "\"");
		}

		public var name:String;
		private var _secret:String;
	}
}

As you can see the secret value sent to the constructor gets stored in the private variable _secret. Another Person instance is passed to the peekIntoDiary() method. In this case, the Trudy object (this) now has access to the Alice object (target). The trace() output reads:

Trudy is looking at Alice’s secret: “I kissed a girl, and I liked it!”

Yes, Alice’s private variable _secret has just been accessed by Trudy. Bet you didn’t expect that to work. I know I didn’t. Don’t believe me? Try it yourself. The code above compiles and runs.

It makes some sense if you consider that the private access modifier is actually a namespace. Basically, behind the scenes, the compiler automatically creates a separate namespace for each individual class that it names private. This private namespace is only accessible to the one class for which it is defined. That’s why other classes and subclasses can’t access private variables. However, due to the scope of the namespace, all instances of the same class can access the private members of other instances. To be truly private, each individual instance of a class would needs its own namespace that other instances wouldn’t know about. I’m not even sure if that’s possible, but I have a vague idea of how it might work.

Does it matter? No, not really. You’ll rarely find yourself in an situation where this behavior can be useful (see the credited link below for one possibility). I can’t think of a case where this can be considered a security risk either. It’s not much different than using object["variableName"] to get at private variables in AS2. Mainly, I wanted to share because it’s somewhat unexpected behavior.

Credit: Thanks to Nick Bilyk for pointing this out in a post about cloning objects.

Start the Discussion
Wednesday, October 8th, 2008

Presentation Slides from 360Flex San Jose 2008

by Josh Tynjala

At 360Flex San Jose 2008, I gave a session titled Polishing Components for the Unwashed Masses. In my talk, I covered all the important details around releasing a custom component to the community. Having built a few open source components on my own, and being a former member of the development team behind Yahoo! Astra, I’ve spent a lot of time focusing on how to create quality supplementary material to include along with the source code and the SWC. The four main topics were writing documentation, creating examples, making your components extensible, and encouraging a community.

Screenshot of the presentation slides

To some, my session seemed a little obvious. To others, it was a good checklist of what-to-dos before some code gets released. Personally, I’ve seen way too many half-finished, barely documented, almost unusable components that could use a little extra love (even before going up in a one-time blog post). It takes time to do a decent release, and yes, sometimes creating all this “extra” stuff is a little boring. However, basic polish can make the difference between a forgettable component that no one uses and something everyone in the community enjoys. To convince a random developer to use your custom component, you need to guide them and show them how easy they can get started, and that’s the message I tried to emphasize in my session.

Thanks to everyone who gave me feedback! I may do a version of this session again sometime, and I got some helpful tips for areas that could use a bit more detail or some supporting visuals.

Download Slides (PDF file)

Start the Discussion
Tuesday, September 30th, 2008

Open Source Flex Component: HeatMap

by Josh Tynjala

Note: I no longer work for Esria. Some links here may be broken because I no longer maintain the community site there. Being an open source project, though, I still have the original source code, and I’ve made a copy available for download from my own blog for those interested.

Over the last week, I’ve been working on a new Flex component, a heatmap! For those unfamiliar, a heatmap is a form of data visualization that uses color on a two-dimensional plane to compare values. Most recently, in the Flex community, heatmaps have been made famous by Universal Mind’s Spatial Key application. After seeing that go live, I knew people would be interested in an open source heatmap component for Flex, so I put one together and dropped it on Esria’s open source and community site (broken link removed).

Screenshot of HeatMap component

Overall, I found the process of building this component very straightforward. There are many similarities to my treemap component, but the heatmap is a bit simpler in many regards. One thing I particularly enjoyed about building the heatmap was that it required some pretty heavy optimization. Since it could potentially display massive data sets, manipulating the data provider and extracting the required numbers needs to be fast. I spent a lot of time diving into Flex Builder’s profiler. By the way, Jun Heider’s profiler session at 360Flex has some great info that helped me understand the profiler’s numbers better. I highly recommend checking it out.

In particular, I made a few good optimizations in some functions that could potentially run hundreds of thousands to even millions of times when preparing the data (basically, sorting a huge list of items). First, I made sure to access member variables directly. Usually, I’ll just use the public getter if it’s available, but it actually became a bottleneck when Array.sort() needed make such a huge number of function calls. Next, since a sort function potentially has to access the same value over and over again, I set up Dictionary-based caches to retrieve an item’s position and weight without having to recalculate these values every time. Personally, I’ve always been a little wary of the Dictionary type, but lookups proved to be very fast. Finally, though it didn’t necessarily have the same impact as the other optimizations, I drew the heatmap using a Bitmap rather than a Graphics object.

In addition to raw code execution speed, I included a couple other features to aid in performance. First, a sampleSize property lets you use every nth item in the data provider instead of every item. This won’t provide a complete picture of the data, obviously, but it will certain speed up the analysis by using a subset. Additionally, you can specify a weightField or a weightFunction. Normally, every item has a weight value of 1 used to determine the color of a region. Differing weight values can allow for more complex data, certainly, but it can also be used to combine multiple points together to form a smaller data set. For example, if you are using a region size of 30 pixels, you can combine all the items in the same region together since the heatmap won’t need more per-pixel position data. If your raw data has an item for every pixel in that 30×30 region, you’ll reduce the number of items in that region from 900 to just 1, but still have the same overall weight for that region. That can be a huge performance increase when you consider that this sort of reduction might be happening in every region on the heatmap. Moreover, by doing this on the backend, you’ll send fewer bytes to the client. Reduced bandwidth usage is always helpful.

The source code for the Flex HeatMap component is available under an MIT license. Be sure to check out the HeatMap API documentation (broken link removed) and look at the examples to get started.

Start the Discussion
Tuesday, September 16th, 2008
Pages: Prev 1 2 3 4 5 6 7 8 9 10 ...18 19 20 Next