Dont Trust This Guy

How to Build a Swipe Based UI in CoffeeScript

2012-04-28T00:00:00-07:00

I recently implemented a swipe gesture to improve the user experience on this blog. If you're on an iOS or Android device you should be able to swipe across the content of this page to peer at the next and previous articles. I'll show you how it works.

No JS Framework, Just Native Methods

I've been using jQuery in a lot of my projects purely out of habit. But that's not really necessary when you're developing for touch devices. This time around I figured I'd skip the jQuery tax and only use third party libraries as needed. I also chose to code the project in CoffeeScript. So be advised, all of the example code here is CoffeeScript.

Rather than jQuery, I am only relying on three dependencies that total to 12k before gzipping:

A custom build of Modernizr.
radio.js for custom events.
And domReady which does what it says.

The project itself consists of three files:

Article.coffee is a model object that represents any page of this blog.
ArticleController.coffee is a controller that manages which articles to present and or remove.
PageSlider.coffee is more of a component than it is a view. It handles touch events applied to and applies CSS transforms to the current document.

Enough Jabbering! How can I Swipe Pages?

The first key to this puzzle is handling touch events from the device. I wrapped this up into a nifty class called PageSlider. Let's go through the constructor first:

The most important stuff happens on line 11 in the gist. First, I feature detect touch support with modernizr:

Then I add event listeners to the @touchTarget property of the class. In this case, @touchTarget is referencing the document.body. So any "touchstart", "touchmove", "touchend", or "touchcancel" event occurring on the body of the page is getting picked up by a given instance of the PageSlider class. One trick here -- when passing in the event handler I create an anonymous function using CoffeeScript's fat arrow (=>) operator for function binding.

This ensures the scope of 'this' remains the PageSlider and not the actual @touchTarget (which would be the document.body if you're still with me!)

What Happens When a User Touches the Screen?

Now that we've binded the events we need someway to handle them. The "touchstart" event will fire as soon as the user's device detects a new touch. It's the perfect time to do some critical setup:

The event object will return a property called "touches" so calling event.touches will return the number of fingers currently on the screen. I start off ensuring only one finger is on the screen before continuing:

This is a conscious effort by me to only support one finger for this interaction. You could easily adjust this if you wanted to support horizontal swiping with two or three fingers. But remember, if you go any higher you might trigger iOS's four finger swipe convention for switching apps.

What's really important in this method happens on lines 7-9. Here I'm resetting the direction of the page slider:

...and obtaining the initial X and Y location of the touch event:

These initial locations are important because we'll need to compare them to the new location of the user's finger as the user swipes in order to find out how far they've moved. As for the direction, I've just made a handful of class level constants that I could reference. Each direction constant stores an integer - here's what the code looks like:

Using class level constants like this is a great way to keep things DRY and also makes your code more readable. Imagine later on you need to check which direction the touch is moving, which of the following examples is easier to comprehend?

Tracking Touches as they Move

Ok so we have obtained the initial X and Y position of the user's touch. Now how do we react to the user as they move their finger? Let's take a look at the event handler for "touchmove":

This is a pretty long function and I've broken it down into a handful of gists to explain it in detail. First, I ensure the user is still only touching the screen with 1 finger. Then I calculate what I call the xOffset and yOffset. This is the x and y distance of the finger's current position compared to where it started.

Is the user scrolling or swiping? That's what we need to determine next in order to prevent scrolling if necessary. It's important not to trigger the swipe behavior when the user intends to scroll. Without some sort of threshold to differentiate between scrolling and swiping, the page will be jittering as the user scrolls up or down an article. However, when the user is actually swiping we'll want to call preventDefault() in order to disable scrolling. Here's how I did it:

That last line sets the current xOffset as a property on the PageSlider called @slideTo. We'll use that value to translate the article with CSS later. But first, this is where we'll determine the direction the user is swiping and broadcast a custom event. This will allow the ArticleController to determine which article to show just beneath the current article getting dragged.

That bit of code is really important in the big scheme of things here. The diagram below shows how the direction change event is broadcasted to the controller which determines which article should show up underneath the article currently being dragged.

Now that the correct article is set to appear from beneath the current page, we need to translate the document to make it move with the user's finger. The property @slideTo is storing the current xOffset and so we'll use this value to translate the current @article we're manipulating. Just to recap this is where we're at in the "touchMove" event:

The last line of the method actually sets the translation onto the article:

So what exactly does @article's translate() look like? Take a look:

The translate method takes an xPosition as its only parameter and then uses Modernizr to apply the appropriate CSS translation directly to the @article's element attribute. We want to default to 3D transforms if available in order to obtain better performance in webkit browsers. This is necessary purely for performance reasons which is why the translation does not using the Z-axis. To apply the transform to the style I use Modernizr's prefixed() method which is really useful when manipulating proprietary properties such as -webkit-transform.

What Happens when the Touching Stops?

To finish off our interaction we need to position the articles into their proper places once the user's finger is lifted from the display. If we do nothing, the article would simply stay wherever the user left it. For my blog I wanted to design an interaction where two things could happen:

If the article was moved more than one third of the screen's width in either direction, then I want the article to continue sliding in that direction off the screen.
Otherwise, if the article was left mostly in place, then I want the article to slide back into its original position.

This is where the touchEnd method comes into play:

The logic in the event handler itself is pretty straight forward. If the user dragged to the right (a positive value) we move the article off the screen to the right. Otherwise, if @slideTo is a negative value we tell the page to slide to the left. And, if @slideTo is within both limits we tell the page to move back to 0, its origin. But this method is relying on @moveTo(), a method on the PageSlider class:

There are a few things going on here. First off, we need to enable css transitions on the current page.

Why? Well, basically without a transition there will be no animation when we programmatically set the position of the article. OK, so why do this in javascript when you can have a CSS transition defined in a stylesheet? Well, the problem is we need to have a CSS transition when we set the article's position here, but we don't want to use CSS transitions when we translate the article to match the user's finger as they drag the article. If we had a CSS transition on the element at all times there would be a slight delay when the user dragged a given article with their finger. This effect is undesirable as it breaks that direct connection between the UI and the user's touch. The short answer - utilizing transitions when the user is touching the page renders a behavior that is not responsive. So we manage this in the Article model with two methods called enableTransition() and disableTransition():

Both methods make use of Modernizr's prefixed() method to toggle this transition rule: "all 0.2s ease-out" on the DOM element containing the current article.

Back to that @moveTo() method:

Here's what it's doing:

Enable CSS transitions on the article.
Add an event listener that will fire once the transition finishes.
Actually apply the desired translation to the article.
Broadcast the PageSlider.DIRECTION_FINISHED custom event once the transition completes only if the page was moved out of the viewport.

The method is actually pretty short but we have to define an object using browser prefixed transition properties as attributes and browser prefixed TransitionEnd events as values:

This is because Modernizr's prefixed() doesn't support event names for whatever reason. So instead we use Modernizr to return the prefixed transition property and find the prefixed event from our object:

That's How the Pages Move But...

There's still a whole lot more happening than simply applying translations to the page. In part 2 I'll cover how I load the adjacent pages into the document and cache them in the browser to reduce the amount of request a user sends over. We'll also cover how to implement HTML5's pushState to update the address bar's URL and title for the current article without using a hash bang (#!). Stay tuned!

One last thing, I don't take comments here so if anything isn't clear please PLEASE message me on twitter and I'll reply to you. I'm @jimjeffers. Thanks for reading!

Personifying the Impersonal

2012-02-16T00:00:00-07:00

The element of play is extremely important when designing tangible interfaces. I firmly believe in the notion that there is an aesthetic for physical interactions we embed in our software. While devices (phones, tablets, computers, gizmos, etc.) have an aesthetic and character to each their own, the software running the device does as well. Its character is not how it looks, but how it feels, and how it seems to behave. Software can transform a device into a living creature that interacts with us, or it can simply render a device into paper’s digital counterpart. Think about it. What could be more interesting?

Imagine a simple timer application. You could view a timer as a utility and perhaps design a UI with a more mechanical aesthetic in mind. The timer might have a handle or some sort of mechanism that the user taps, swipes, or pans to their desired time amount. When the user needs more time they just adjust the setting on the tool. This is all good and fine. From a utilitarian aspect, it’s perfectly fine.

But what if we want to evoke emotion? What if we want to change behavior. In this case personifying the timer could play an important role. Rather than viewing the timer as a tool the user views the timer as a peer. What if you could turn to the timer and see how it’s feeling? Maybe it would look like a friend who looks rushed or simply relaxed. The amount of time we have is relative to our own interpretation. Consider a situation where a hypothetical team is still preparing a presentation that they must deliver in five minutes. One team member might consider five minutes as a lot of time (crazy right?), while the others might feel quite rushed. But, if the timer software expresses the amount of time (data) remaining in an emotion (visualization) it could potentially set the emotional state of the team on the same page. This effectively transforms the timer from an information middleman to a participant in the team. Rather than looking at the timer and then deferring to each other for an emotional interpretation on the situation, the timer, to some extent, could do this for us when personified.

And what if we want to evoke a certain behavior, like encourage users to be more or less generous with the amounts of they allow for certain tasks? Or more importantly, how could we detract users from simply adding more time back onto the clock (cheating, snoozing, etc.). What if adding more time involved invoking some sort of discomfort or pain to the timer. Could we play off our own human empathy to personify time itself into a character we’d nurture and relate to? Could such a timer be more effective than a simple utilitarian approach? Just an idea I wanted to throw out there.

The Future is in the Client

2012-02-01T00:00:00-07:00

We’ve crossed a major tipping point when it comes to designing services that rely on software. The client (front-end) is now essentially the star of the show. If you don’t know what that means I can explain. When you use any product that uses the web you have a client and a server. The client is your computer, your phone, your iPad, or other mobile device that you use to interact with the software. The server is the network of computers that store and transmit the data to you.

Since it’s inception online service design had always been focused on server side programmin and there was a good reason for this. Traditionally web services have always been accessed by the user via a web browser which used to be an extremely hostile environment. But that’s not true today. The current browser landscape is more competitive than ever as vendors are racing to support modern and proposed standards. This means it’s possible to build and reliably deploy complex software that resides in the web browser.

What’s even more important is the changing device demographic. The main way of accessing and using online services has been through a desktop web browser but over the past three years we’ve experienced a dramatic change in the adoption of highly capable mobile devices. Apple’s iOS and Google’s Android provide two very homogenous platforms where service providers can deploy complex client side software more reliably than they ever could in the past. Apple’s iOS is the best example of this due to its extremely homogenous and controlled device base. By testing on only three devices a developer can reliably experience how their application will run for over 200 million people. Never in the history of computing has such predictable deployment been possible.

We used to use the server to do nearly everything the user did and saw. Any interaction or behavior exerted by the user was sent to the server so that a new page or portion of a page could be rendered. But moving forward the server will begin to behave more like a server (surprised?), passing data to and from the user only when they need to. The rest can happen on the client.

The future of development is in the client. Those who focus on the client will create the most interesting and exciting services of tomorrow.

Mobile UX: Specific can be Better Than Simple

2012-01-25T00:00:00-07:00

It’s not a fad, smart phones and tablets aren’t going away anytime soon. But the way we used to approach our projects has. If you’re designing an online service you now have many possible touch points. The web browser, once considered the only way, is just one of many and it may not even be ideal. When designing for mobile devices you’ll be faced with a whole boatload of considerations and decisions that didn’t exist before. Will we need a native app or a web app? What type of form factor will we use? What infrastructure does the platform (android, iOS, windows phone) provide? How do users on that platform typically behave? What does the user of an iOS device (i.e. more animation and polish) expect vs. the user of an Android device (i.e. more technical control)?

All of these decisions invite opportunities for missteps which can easily lead a team toward failure. Here are some important things to consider when approaching a mobile project:

1. Being specific is more important than keeping it simple.

What I mean by being specific is staying focused. If you’re building a native app for a smartphone, you need to consider your product. If you need to monetize it via app sales than you’d likely want to focus on the platforms or devices with access to a well organized store. More importantly, you’d want to focus on the devices that actually have users who typically purchase apps. So infrastructure and user behavior on said platforms is key. Prioritize which platforms are most important for your concept to succeed. Don’t make irrational decisions to deploy your application as a web application simply because it’s easier to launch on multiple devices. Likewise, don’t chose to build a native application over a web application just for the sake of being found in the app store. The complexity of the product (is the product a video editing suite or just a simple time entry solution), the revenue model (subscriptions, purchases, ad-driven, etc.), and user expectations for such a product (would people expect the product to naturally work offline? Do you expect frequent or infrequent engagement by the user?) are all things that must be taken into account. The bottom line is to know what platforms are most important for your product and why.

2. Focus on one platform at a time.

Don’t get carried away and try to develop an application for multiple platforms simultaneously. Prioritize and focus on the most important platform and learn your lessons early before spreading your resources too thin trying to target multiple device platforms. This is especially true for native apps. Users of android phones have different expectations than those on iOS. Focusing on one at a time allows you to craft a good product sooner and less expensively. Working on multiple platforms simultaneously can be risky. Not only does it take more resources, but supporting multiple platforms also means you’re more likely to focus on consistency rather than taking into account the nuances in expectations specific to users of each platform. This is even true of a web based application as the variation in device form factor and capabilities of the various devices will create a more hostile environment. You or your development team will eat time and money supporting issues on less popular devices that aren’t representative of your primary audience.

3. Don’t cut corners.

Remember, identify your best platforms and focus on each one. Don’t fall into the trap of using frameworks that make it easy to deploy a native app cross platform just for the sake of getting on to multiple platforms quickly. Rather, choose to use a framework if it provides the resources you need to create a great product on your target platform with the resources you have available. For instance, Unity3D might be an awesome option for the complex 3D rendering and physics overhead it eliminates from your project. Or consider frameworks like PhoneGap or Mono if: 1. your team is more capable of developing with web based technologies or C-Sharp AND 2. the experience you can provide with the framework meets your users expectations. Unity, PhoneGap, and Mono, are all cross platform frameworks, but you’d be using them for the wrong reason if you compromise the user experience just because it seems like a cheaper route to support multiple platforms.

Reach Shouldn’t Trump Experience

The real lesson is that any strategic decision that sacrifices the experience of the end product to save on cost should be reconsidered. Think about narrowing the scope of the product instead of creating shortcuts to do everything for less. While it might seem like you can have your cake and eat it too, if the cake is mediocre, not very good in taste, and has a funny texture on your end user’s mobile device, the chances of it being a success with them is going to be unlikely.

Energy Level

2012-01-23T00:00:00-07:00

Work sucks when you know you need to do it. But work is easy and effortless when you want to do it. I’ve found that I dread the weeks or days that I feel under pressure to get work done. It’s easy to get overwhelmed when too many obligations stack up. Every minute of the day you’re not tending to these obligations feels like a burden. It feels like you can never just get to work when you need to.

The exact opposite is true when you spend the whole day having fun. Work almost feels like a welcome break after a while. And often on these days you are more productive. Spend the whole day sitting outside, enjoying the sun, and then come home in the evening with some ideas and focus (provided you don’t enjoy the day by getting tanked)!

There is a popular belief that you work better under pressure. I feel this is not the case. Or to be more accurate this isn’t exactly the case. I think we work better under ‘high energy’ and even though pressure can create some energy through tension and stress, it’s not ideal. Stress isn’t always enjoyable and the introduction of pressure into our work lives tends to have a few side effects such as: making your work stressful (ok that’s obvious), limiting your engagement (do I actually care about what happens or just that this gets done), and poor attention to detail.

So we can energize our batteries in other ways. Whether it’s socializing with friends or having a jam session with your band or going to the gym or going for a hike. Figure out how to structure your day to do more that matters to you first.

But you won’t be able to develop any energy if your time spent having fun is burdened by worrying about work. The opposite will happen - you’ll create stress and lose energy. Doing energizing tasks while you’re stressed about work will just feel like more work. This is just time wasted. Settle your work and cancel your social/fun obligations until you have a surplus of ‘fun time’ for each hour of ‘work time’. Then structure your day so that you can maintain such a favorable ratio.

More play and less work allows you to be more engaged, have more energy, and enjoy your work. If you enjoy the work you’ll do it better. If you don’t enjoy it you’ll take shortcuts and look for the easy way out. This isn’t about finding passion. It’s about maintaining a positive energy level. If you aren’t being mindful of this your passion can easily turn into misery.

No Nothing

2012-01-22T00:00:00-07:00

No wordpress.
No related posts.
No comments.
No SEO.
No share this.
No Like Button.
No tweet stream.
No crazy permalinks.
No CSS frameworks.
No bloated HTML files.

Just me blogging again.

The Art and Zen of Writing CSS

2010-03-07T00:00:00-07:00

I've been writing pure html/css layouts for well over eight years now. While I've found best practices in the form of convention and documentation to be useful. They don't prevent some of my CSS nightmares from reoccurring. They merely make them less painful. My solution is to follow guiding principles in the way I write stylesheets. These principles form a foundation for writing stylesheets that will be easier to work in as the project grows.

Lesson One: Only be Specific When You Need to Be.

There is a hesitation to fully utilize the cascade. Many people who have worked in CSS for a long time tend to utilize very powerful pseudo-selectors to target specific elements. This is all well and good but it also creates a dangerous habit. We become uncomfortable writing rules that are not highly specific.

This has been a hard lesson learned many times over. My preference has always been to be accurate. I'd write CSS rules that were really detailed and specific. But this is bad. Specific rules paint you into a corner and make reuse very difficult. Instead, use the most general rule you can to get the job done and only write rules that are more specific when the situation presents itself. See the example below:

Now it's true that the second rule would apply to every paragraph tag on the site. But at first this is fine. Imagine how simple it is to add more specific rules later. As projects grow and styles become inherently more complex by necessity, the situations where we need to become more specific will naturally present themselves. If we are generic from the start we can take advantage of the cascade and overwrite rules with more specific rules when we need to.

To see how bad it can get take a look at these two examples (the third set of rules is an example of adding additional style info with a more specific selector):

This seems like a fundamental lesson in CSS. We can write styles that apply to many objects and the more specific rules will take precedence. Most people who write CSS know this. What's not usually brought up is the fact that it's much safer to avoid the complexity created by writing more specific CSS. There are two laws I would propose in regards to specificity in CSS:

The complexity of your stylesheet is directly correlated to how specific your selectors are.
Refactoring CSS selectors to be less specific is exponentially more difficult than simply adding specific rules as situations arise.

Lesson Two: You Must Start Somewhere.

Whether you work alone or on a team you need to have a starting point in your stylesheet. A starting point is a generic set of rules that defines how we expect our environment to behave. This is generally important when working in CSS but infinitely more important when working on a CSS document with multiple contributors. Everyone needs to be on the same page and having a baseline foundation for our stylesheet is the best trick we have in our arsenal for achieving exactly this.

My starting point is Eric Meyer's Reset CSS. Unfortunately for your own productivity, it seems that using a reset stylesheet is a controversial subject. Some experienced with CSS consider these tools to be unnecessary or just plain bad. But the truth is that we all use them in one form or another. The real problem with reset stylesheets is that they were named "reset". They are not resets but rather they serve as our baselines, our foundations, our intentions for how we want our environment to behave.

The reality is if we don't use CSS resets we implement them in a much more difficult manner. We repeat ourselves where we have to throughout the document in order to achieve a standard desired behavior. The best example are margins. Every web browser platform has it's own default styles for margins on different elements. There is no way in hell any of us can memorize the variations of these defaults in our minds let alone compensate for them without taking a serious productivity hit.

If you don't define your starting point then you inherent every browser's own pre-defined starting point. This leads to a much more hostile environment for our work to be deployed. We're giving up control of our environment. It's much less predictable. It's actually very very scary.

That's not to say reset CSS files are the holy grail to writing good CSS. Far from it. They can be a pain if you don't tailor them. For example, many people don't like certain settings used in some reset CSS files. A common example is that the 'strong' element is no longer bold. But that's because the reset is distributed as a pure example. It's up to you and your team to change this reset file for your own purposes. If you want strong to be bold adjust the reset. Ultimately, you will develop your own reset.css (though really I think we should call it base.css) over time. The key lessons here are:

Base stylesheets grant CSS authors control over their environment.
Base styles are key to creating a shared set of assumptions or expectations amongst multiple contributors.
Base styles do not guarantee cross browser compatibility but rather buy us and our team members predictable outcomes.

Lesson Three: Rely on Specificity Over Order.

A basic principle in CSS is that if you write two equally specific rules the latter takes precedence. In other words, order matters in your CSS. But this is dangerous. Order only matters if you let it matter - by writing rules with selectors of equal specificity.

As stylesheets grow in size they become more cumbersome to manage. To remain productive in our files we break them down into sections. Or we separate our rules into entirely separate files.

A reliance on the order our code makes it very brittle or fragile. When we need to incorporate a strategy for organizing our code we can easily disrupt the original order the rules appeared in. This is significant because as I stated earlier it's more manageable to write selectors that are less specific and more general. That does not mean you should incorporate the principle of order as a technique for maintaining a stylesheet with generic rules. If you have two rules of equal specificity that conflict with each other then you need to make one of them more specific in the interest of writing a stylesheet that is flexible enough to be reorganized in a structural framework.

Additionally, most of the occurrences in our stylesheets that provide situations where we have rules which overrule each other due to their order of appearance tend to deal with duplicate selectors. These cases are ideal scenarios where our CSS could potentially be refactored.

The key take aways from this point are:

Stylesheets that have a strong reliance on order of appearance are inherently more brittle and more susceptible to problems when we attempt to restructure or reorganize our documents.
Rules that are overwritten due to their order of appearance typically could or should be refactored.

Lesson Four: Be Clear and Expressive.

You need to be clear on what you expect. You need to be clear on how things should be done and handled in your document. How do you do that in CSS? Simply with commenting. We can provide ample amounts of documentation in our CSS files simply by commenting. We can use comments to:

Define best practices.
Denote organizational sections.
Provide references for resources.

There are two problems here. The first is that not enough people utilize comments in their stylesheets. The second is that many authors don't see the need to. Yes the latter is probably the reason for the former.

Let's look into why we might not think commenting or documenting our expectations and best practices in the document may be worthwhile. The first reason is that comments make our CSS file larger in file size. Yes - this is certainly true but we can easily use YUI compressor or write simple scripts to automate the process of minifying and removing comments from our production code.

The second reason might be that you're the only author touching the stylesheet. This is incredibly short sighted. Always always (always!) plan on someone else touching your stylesheet at some point in time. Chances are you are not the only one who will be working on the project for eternity. In other words - count on the fact that someone else will eventually be writing code in your stylesheet as well. You may as well make it clear to them as to how they should do it to maintain a consistent stylesheet. Otherwise you may find yourself cleaning up a big mess later when you're called back to work on a broken site!

Being expressive is easier said than done though. How do you go about declaring how you expect things to be done? I personally embed my best practices in a short set of directions complete with an example in a comment at the top of all of my stylesheet files. The snippet looks like this:

The point here is you can utilize comments to make things very clear in a simple elegant fashion. Just document your CSS as you should be documenting all of your code. Textmate users can benefit from a CSS commenting bundle I put together a few years ago to quickly document and section apart their stylesheets. What you need to remember regarding expressiveness in your CSS is the following:

Utilize comments to define how CSS should be formatted and written for other authors.
Always count on the fact that someone other than you will probably work in this document at some point in time.
Utilize comments to organize your code into sections. Comments can effectively become a navigation system within your CSS document.

Content is Effective Web Design

2009-09-27T00:00:00-07:00

Ever hear someone say "don't judge a book by its cover" before? Well, they're absolutely right - especially when it comes to designing for the web. In contrast to a book, designing for the web raises a much more complex dilemma: we don't have the reader's undivided attention and we're often telling more than one story. We're addressing several different readers with different needs through the same medium.

In reality, web designers have they're work cut out for them. It's not as simple as creating a pretty template and plugging some content into it. The design itself is an outcome of the content. To quote someone else:

We're essentially creating a framework for communication and messaging.
The Content Conundrum by Christopher Detzi

Our work in web design is all about the content. The visual design is intended to effectively deliver and support our content. So to judge the quality of a website, you really have to judge it by it's content. Next time you critique a website try to answer these three questions:

Who is this website serving?
Why are they coming here? (specifically, what is it they need to do?)
How does the site inform the reader or guide them through a process?

Who is your website serving?

A lot of our upfront design research is dedicated towards understanding our users and segmenting them by the types of tasks they need to accomplish so that we can derive mental models and personas. One key benefit of doing such research is so that we can get the right content to the people who matter.

Why are readers coming to your site?

Remember that we goto websites for a reason. It could be to learn something, such as reading an article, to achieve something, such as checking my facebook inbox, or simply to be entertained, such as playing an online game. No matter what, we visit web sites for one reason or another. We need to write our content and structure our design to facilitate these motivations. Your readers came to your site to do something; get to the point.

How is your website informing its readers?

It's still all too common to see brochureware websites. These sites are organization centric and are chock full of information that tends to be informative but irrelevant to the user and their task. For example, if you're in retail chances are most people coming to your site because they want to buy something or find out how to get to your store. They probably don't care about staff policies, or how the business was founded twenty years ago, etc..

Let's use the copy for a staffing company as an example - a good approach would be to write to the user directly in a tone like this: "You can get hired today find out how!" not "Welcome to our website. We've been helping professional candidates get the positions they deserved for twenty years!". One version engages the reader directly. The other simply builds up the company. To learn more about writing user centric task orientated copy I recommend reading Gerry McGovern's comprehensive guide: Killer Web Content

Taking Content and Copy Seriously

Jakob Nielsen doesn't dance around the topic:

Text us a UI.
Aug. 2009 Iterative Tweet Design by Jakob Nielsen

Nielsen says that it's all too common for design teams to only consider full fledged GUI's as interaction design. He points out that email and even the URLs your website use are forms of interaction and need appropriate amounts of attention. He also states that the shorter your text is, the more important it is to design text for usability.

Think about short text in your design. Are the terms you're using to describe each section in your primary navigation correct? It's really important you get this stuff right.

The guys over at 37 signals have been saying this for years now:

Copywriting is interface design. Great interfaces are written. If you think every pixel matters then you also need to think every letter matters.
Getting Real: Copywriting is Interface Design by 37 Signals

Designers and clients can bicker all they want about the color, drop shadow, and font-face used on a button. But more important than all of those things, even its placement/positioning, is what the label on that button says. If a user notices and reads your call to action but doesn't understand what it means than all of that effort was pointless. This is not to discount art direction, visual hierarchy, and aesthetics, but rather to put them in their place. You need to know what you're saying before you get into any of those details.

"It looks good, but what did it say?", that's what Jamie Dihiansan asks when designing the marketing sites for 37 signals. Dihiansan says "You have to make your site memorable. Your site has to speak clearly." If you don't your project was nothing more than an exercise in aesthetic awaiting to be succeeded by more modern implementations in the fashionable world of commercial visual design.

Copy Alters the Entire User Experience

Bill DeRouchey does an excellent job pointing out that even the tone of the content can make a big difference in the overall user experience of a web site. We can write content in a way that it strikes us, or even throws us off. The point of the story is that you can create a richer and more powerful experience by writing your content in a way that gives your site some personality. If you have some time I strongly encourage you to watch Bill's talk below:

A Quick Primer for an Effective Web(app) Design Process

2009-05-31T00:00:00-07:00

A big problem with interface design is the focus on aesthetic. Remember that your website is first and foremost a tool for people to interact with your company. Aesthetic is only a factor in the overall consideration of the design process.

What's most important is understanding your customers, your readers, your prospects. To have a successful design implemented you need to take a few steps back and get away from design all together. Here's how to start:

1. Design Research (Personas / Mental Models)

Start by segmenting the different groups of people who use your site; or who your trying to target to use your site. Research what they are trying to get out of your site. What is it that they need? What is it that you need to tell them in order to convert them from a prospect to a client? These motives and outcomes need to be evaluated and documented so that you can design effectively.

2. Paper Prototyping

The next step is to get ideas flushed out rapidly on paper. You may iterate through several ideas. The idea here is to quickly create concepts for different scenarios that your users will encounter to achieve the tasks you want them to do on your site. If you flush it out quickly on paper you can actually run various ideas past sample groups to get some immediate feedback. You can test to see if they were able to accomplish the tasks you set out for them to do. You can also find out if they need to be able to do something you didn't necessarily anticipate. This is a very low fidelity form of user testing and a crucial step in a successful design process.

2b. HTML/Flash Prototypes

If your budget permits you can actually build out your newly sketched out website as a plain looking interface. The goal here not to create something that looks amazing. The goal is to build something that represents the paper design as quickly as possible. By doing this you can then actually send customers / users to the working prototype and see how they actually use it.

3. Art Direction / Mockups

Finally, once you have worked out all of the kinks with your design you can start focusing on making it pretty. Again, aesthetic is very important but it often comes to soon in the design process. People view this segment as the design process when in fact it is really the last step. Aesthetic is used to improve the user experience of the site. It comes in the form of art direction as well as animation and other interactive effects that can help communicate actions and provide feedback to the user. This step can be very time consuming and making changes to the overall UI when working in high fidelity becomes a more time consuming process. Thus it makes it harder for us to react to the necessary changes we need to make to our website in order for our design to be truly successful. This is why you must focus on aesthetic at a later stage in the design process.

Igniting Phoenix

2009-05-13T00:00:00-07:00

It's been too long since I've written anything on this blog. Fortunately, I've had the opportunity to work on a few interesting projects in the last couple of months. The one I'm sharing with you today was done as a surprise for the Ignite Phoenix team and the community in general.

Visually Phoenix

On the surface I've tried to incorporate colors and tones more representative of Phoenix. You'll find illustrative elements resembling our city as well. The site headline contains the Phoenix skyline - as does the site footer. I've also made a minimalist illustration of the Tempe Center for the Arts; the amazing venue hosting the event.

More notable however is the extensive use of transparency used throughout the site. This was achieved with PNG images and rgba color values in the CSS. For viewers in IE7 and IE6 these features have been gracefully degraded. Indeed the entire design and build of this site was an extensive exercise in progressive enhancement.

Overflowing with CSS Tricks

A lot of tricks with overflow and absolute positioning were used to achieve various effects throughout the site. For instance, the three flickr images shown in the intro content are cropped by a containing element. The border around them is achieved with rgba transparency to create a unique effect for those who are visiting the site with modern browsers.

Getting Inline with Block

Another fairly simple CSS feature I took advantage was the 'inline-block' display mode. A well supported CSS feature that I've not used to much extent prior to this project other than a work around when we ran into layout complications. In this case I was able to use rgba transparency and 'inline-block' to create a pretty neat highlighting effect. I also liked how I was able to make elements of different formats run into each other quite naturally with this display mode.

Advanced Positioning

Nearly every major element of the page is absolutely positioned so that we could achieve a fluid layout that spans the entire width of the browser window but meets gracefully in the center. The content itself is contained in a 960px grid from the 960.gs system. To use absolute positioning so extensively we had to hack some magic with some simple jQuery:

function ensureAboveEachOther(onTop,onBottom,spacing){
   if(onTop.length > 0 && onBottom.length > 0) {
      onBottom.css('top',onTop.position().top+onTop.height()+spacing);
   }
}

A Navigation That Watches You

The main content of the site is presented in a single page layout. So naturally, it works just fine without javascript as the nav anchors point to targets on the page. However, for a better experience I've implemented some smooth automated scrolling via jQuery. Still though, it helps to know what section you're in, and these fixed position navigations fail if they don't update as the user scrolls out of the current section. Again, jQuery is here for the rescue:

// Setup scrolling selector update.
      var scrollTarget = $(window);
      scrollTarget.scroll(function(){
         // TODO:
         // Refactor this into a nice function sometime later.
         
         // About
         if(scrollTarget.scrollTop() > about.position().top-100 && scrollTarget.scrollTop() < venue.position().top-100) {
            $('#primary_navigation li.about').addClass('current');
         } else {
            $('#primary_navigation li.about.current').removeClass('current');
         }
         ...
   });

A Big Thanks

Overall I'm really pleased with how the site came out. I have to thank Tomas Carrillo who went out of his way to make sure that this project got to see the light of day. Though I did all of the work to create and build the theme, there was a considerable amount of work done to make sure the theme wouldn't break existing content on the site. If Tomas didn't make the time to do this the theme would have sat on the sidelines as nothing more than a pretty concept. This is for everyone who is involved as an organizer, sponsor, speaker, or community participant just coming to see the event. I hope you enjoy it and see you in June!

One More Thing

Since this is a community project the entire source for the wordpress theme is available on GitHub. Feel free to check it out!

Getting Started With Encouraged Commentary

2009-01-10T00:00:00-07:00

Since interest in this idea has taken off so much I revised the encouraged commentary script so that it would be more flexible for public use. You can toggle on or off pretty much and of the main features.

I've explained in depth how to get it setup on your blog/website. Encouraged commentary will work in wordpress, textpattern, moveable type, typo, mephisto, drupal, expression engine, etc.. There is no plugin required. You just have to make some minor changes to the HTML markup in your theme or template files. To get started:

Encouraged Commentary

2009-01-04T00:00:00-07:00

Recently, I've begun an expedition with jQuery. My first major experiment has been in improving the commenting system on this blog. Sparked by an email discussion with Tomas Carrillo I've implemented a handful of small interactions which make it much easier for you to get involved in the conversation.

Update! I've added detailed directions on how to get this system setup on your own blog.

Reusing a Good Idea

How does it work? Well the primary premise is based off a design pattern that Aza Raskin demonstrated with Ubiquity. Simply highlight any text in the body of this post and a 'Respond' bubble should fade in near your mouse. As in Ubiquity, the bubble maintains a low opacity in order to be fairly unobtrusive unless you mouse over it. Clicking the respond button scrolls you to the comment box where it is now populated with an html blockquote of the selected text. Now you can type your comment easily and immediately whilst quoting the article.

This works even nicer within comments. If you select any text within a comment the 'Respond' bubble will appear here as well. This time however, a directive '@author name' link is generated for you in addition to the blockquote. It's that easy to respond directly to a given comment!

More Controls Within Comments

But why not take it a step further? After all, discussion goes back and forth. Sometimes you may want to follow a specific comment author to find out what else they said, or maybe you want to easily find responses aimed at a specific comment. I've implemented a simple set of lists that appear adjacent to a given comment if applicable content was found. These navigational lists are intended to allow you to jump between related comments and responses quickly. In addition to scrolling - the targeted comment is highlighted for you.

Last but not least, when you mouse over any comment you will be presented with two faded controls in its top left corner. These alternatives to the text highlighting utility explained earlier allow you to reply or quote another author without highlighting any text. Click on the 'reply' control and you simply target that comment. Click on the 'quote' control and the entire comment (sans embedded block quotes) is quoted for you. Similar to the highlighting technique except this method quotes the entire comment instead of a specific selection.

Get the Source and Contribute

While I just hacked this code together in jQuery. I want anyone to feel free to use it on their blogs. I'm not going to attempt to create some kind of plugin. Each implementation will be too specific and require too much thought for a generic plugin. Instead I have setup a public repository on github so that anyone who would like to use this technique on their own site can go ahead and adjust the source for their own purposes. If you are handy with javascript and would like to extend this idea, modify it, rewrite it in another javascript framework, or make it easier for others to redeploy - you are more than welcome to feel free to fork away.

Access the 'Encouraged Commentary' Project on GitHub.

Sorting & Single Tiered Threading

As an experiment to help make the conversation flow more naturally the script now sorts responses after their parent and marks them as a response. This keeps everything decently sorted and prevents excessive layers of responses.

The Phoenix Light Rail is Here!

2008-12-28T00:00:00-07:00

Hurray! It's finally here. The mammoth 1.4 billion dollar light rail project has finally been completed and opened today. To get you started I created my own map of the light rail route. Why? Well - the Valley Metro's online maps are broken into separate pages making it a little difficult to simply glance at the entire twenty mile route easily. I also included the approximate travel times, fares, hours, and stop frequency in this easy to use one page printable map.

First Thoughts on the Rail

Well aside from the light rail being enormously crowded due to opening day hype, the experience was pretty decent. There is seating for 66 of the 200 passengers each car can hold. I was fortunate enough to get a seat on my way back to Tempe and can say it's what you would expect - nothing extraordinary but not uncomfortable. I was most impressed by the ride; the rail was extremely quiet and smooth. Let's see how long that lasts over the years to come.

Massive Turnout

This morning the paper reported that over 90,000 people showed up to check out the light rail. I believe it. It was a difficult chore just to get onto a car. Once on you were greeted with a squeeze that rivaled a Tokyo subway during rush hour. Many of my friends on twitter reported equally distressing hassles making their way onto the rail. I'm sure you won't see it this crowded again in the weeks to come. This is Phoenix after all, most people drive, only us hippies with fixed gear bikes will fancy this alternative over our big 4x4s. Joking aside, I'm sure more than hipsters and tree huggers will start utilizing the light rail for their commute but not this many.

The Light Rail has Arrived - Try it for Yourself

I would recommend waiting until next year to ride. Mainly because the fare is so cheap that you may as well wait to use it under normal circumstances. In comparison of costs, the T in Boston will set you back $2 for a one way trip. To ride for an unlimited amount of trips all day it costs $2.50 on the Phoenix rail or $1.25 for a one way ride from any point. Here are a few tips for riding:

You can ride to the airport. There is a shuttle that picks you up.
Tempe residents, you can ride the free orbit shuttle from your neighborhood to the nearest light rail stop.
Cyclists, each car has racks for up to 8 bicycles, if all of the racks on your car are full you can carry your bike on board if you need to.

Light Rail Video

And here I leave you with your moment of Zen. Check out the folks in Tempe greeting the light rail for the first time!

Tips for the Aspiring Web Consultant

2008-10-19T00:00:00-07:00

Last week I left my post at Integrum in favor of solely focusing on my own business, Sumo Creations. I've been running Sumo outside of school and fulltime work for the past three years and this is a very exciting time for me. Since starting my company, I've learned a lot of lessons on working productively for my clients and consistently developing positive relationships with them. Here are some of the lessons I learned.

Don't Fire Clients Because They Don't Get It

People in this business love to say "these guys don't get it." What exactly is it they don't get? The problem is we don't get it. Our job is to educate and advise our clients on what we do and what needs to be done. Accusing the client of "not getting it" is a cop out for not doing our job.

If you ever find your self murmuring that line be sure to get off your high horse and come down to earth. As consultants our job is not to render a particular service. Our job is to achieve the goals of our client through our expertise. The services we render to do it are just a means to an end. Always focus on your client's goal and work with them never against them.

Don't Be a Servant

You always know you're in a backwards position as a consultant when the client is telling you how to do your job. If this happens it's because you let it happen. Not everyone really likes taking control of something. We become knowledge experts and then just want to perform. That will work if you want to be a worker bee but not as a consultant. If you want to be an order-taker go corporate and specialize; consulting is probably not for you. If you plan on working as a consultant take your client's goal and own it. Our job is to make things happen not to be micromanaged and react to client directions. Listen to your client's needs, understand their objectives, develop a plan, advise them consistently, and most importantly take control of the situation. Think of your role as a translator, converting client needs to action items.

Deliver Solid Gold

If you remember one lesson remember this one. In software they have a term called 'gold-plating' and it means your putting to much effort into something frivolous. It goes like this: "client doesn't care if the module is perfect they just want the module." That may be so and it's better to have that mind set then to deliver nothing. But that is not what this point is about. We are only as good as the standards we hold ourselves up to and if you want to be successful your goal is to be the best. If you don't mind working harder than the other guy you can go far as a web consultant. Here's a recipe for making gold:

Identify two or three of the most critical parts of your project
Dedicate additional time here - don't rush to get it done focus on getting it right.
Test it. Test it with actual users. This doesn't have to be formal but do get feedback.
Think critically and revise.

Normally when I say critical points I mean the core functionality of the application you are building. It's easy to say we don't have time or can't do it. Saying no is easy. But if you're going to focus on quality go the extra mile where it counts. We can say no to making the entire project perfect but it's important that we get a few things right.

In the development world we're rewarded for results and unfortunately the metric we tend to use is functionality/time. But it's really the quality of the functionality that we need to look at. A product with three well thought out features is more effective than a mash-up of a hundred half baked ideas. Get real, focus on what matters, and most importantly don't cut corners. Be sure the client is on board - if they aren't don't fire them, educate them.

Communicate Constantly

The most important thing you can do for your clients is keep them in the loop. If you have a knack for falling off the face of the Earth you probably shouldn't work as an independent consultant. Whether you are meeting your deadlines or not, always communicate in between them. Why is it so important? As a freelance consultant keeping your work progress transparent is your primary form of customer service.

If you aren't communicating with your client on a regular basis chances are you might be making a lot of assumptions about the work you're performing. This can manifest itself as a big death spiral for a freelance consultant. If the client doesn't see what you're working on until the point of delivery chances are there will be a lot of communication breakdown. More importantly, a lot of conflicts with payment / revisions and other hassles that you really don't want to get into. Always post updates to your clients even if minor so the client can see progress. Communication breakdown, not time, is your number one enemy.

Treat Every Client Individually

Despite what you might see on agency websites. There is no golden bullet for a fixed process to follow for every client and project. Every project will be unique and you need to adapt to the context of the situation. If a client is not respondent via phone switch to email or vice versa. If a client can't make an in person meeting resort to a conference call. Be flexible with your time and required medium.

I'll give you an example, one of my clients does not appreciate basecamp. I use basecamp to manage all of my projects. So when a client communicates with me outside of basecamp I'll simply post the transcripts and files from our outside conversation to basecamp for my own reference. I'm not going to try to make them use basecamp by enforcing artificial requirements for the basis of our communication. It's my job to make this work and adjust to their communication style.

Whatever comes at you - make things work with what you have. Hours spent on trying to educate and conform your client around your process is time wasted. We're hired to work on our projects not our processes.

Easy Flash Debugging on OSX.

2008-08-22T00:00:00-07:00

I recently took on some contract development for another AS3 project and because I wasn't particularly happy with the way I debugged my flash work in the past I decided to come up with a better solution. Not many traditional flash coders realize that they can view the output from their trace statements on a live compiled SWF. The way you do that is fairly straightforward.

Download the Flash Player Debugger version.
Create an alias in your profile to tail the flashlog.

Creating an Alias Command

Once you install the debug player, any movie you open in your browser will output it's trace commands to a flashlog.txt file. This is normally located in the Library directory for your user. So we're going to make an alias to open it quickly in terminal. If you're not familiar with alias commands think of them as shortcuts in terminal.

Let's get straight to the meat of it. First we have to find our flashlog. By default the flashlog is stored here:
/Users/[your system username]/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt'

If for whatever reason you aren't getting a flashlog you may need to look into taking some simple modifications to your mm.cfg file.' Otherwise you should be ready to make your alias command.

We want to put our alias command in our shell profile so that the shortcut will be available for us automatically when we open up terminal. To do this launch a new terminal window and type:
nano ~/.bash_profile

Nano works like a regular text editor, so simply paste the alias command below any existing statements in the document, be sure to replace your system username with your actual user name:
alias fl='tail -F /Users/[your system username]/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt'

Now that you've done that hit ctrl-o to save the changes you've just made to the file and ctrl-x to exit nano. Now close the terminal window and open a new terminal. Type 'fl' and press enter. You can now see the live output as any instance of the player writes output to the flashlog. If you want to stop viewing output just hit ctrl-c while you're in the terminal window to close the stream.

I'm Working on a Product.

2008-06-25T00:00:00-07:00

Earlier this month I started working on a product. It's nothing new. It's pretty basic. It's going to be really cheap. But I think it will be pretty cool. I'll post screencasts once I finish more of the javascript. Until then, announcing this is just a tease and motivating factor. I've said it; now I need to go forward and finish the first version.

What's On Your Mind These Days?

2008-06-17T00:00:00-07:00

Lately, I've been reading a lot about peak oil, our place in the world economy, and the harmful industrialization of our everyday food. Simply put, I haven't been writing as a result of the information overload that I'm enjoying at the moment.

Joy might seem like a strange way to describe the topics I just bantered off but it's true. Reading about these seemingly distant and to some even unimportant things have really better helped me gain a greater understanding of the world I live in. We take for granted everything that happens around us, rather than complain upon hard times I'd rather understand what has lead to or is currently causing such events to unfold. No the topics are not joyful - peak oil can be a very depressing topic - but the sense of empowerment you get from taking the time to learn the how, and why is. Now I don't feel quite as helpless in this world as I did before.

It's easy for all of us to player the role of the ignorant citizen or shrugging things off as either inapplicable to us or unstoppable by us. But I feel quite the contrary, if we take the time to educate ourselves on these things happening now we can make change that is not political but behavior. We can learn and change what we do ourselves instead of simply standing around and feeling helpless. So with that rant, I'm asking you, what topics in this world are concerning you most? I'm interested in listening.

Using Presenters in Rails

2008-05-29T00:00:00-07:00

Sitting thrugh my first tutorials session at RailsConf we've come across an interesting discussion about the philosophy of using the 'Presenter Pattern' to refactor code in your applications controller.

What the presenter initially did was build out a traditional presenter class to extend the model and provide two methods to find possible status and priority objects from the database. This requires the author to delegate class methods from the model that the Presenter class could use. It also requires us to wrap any instance variable of the child object in the presenter class before we pass it to the view.

class StoryPresenter
  
  def initialize(story)
    @story = story
  end
  
  delegate  :id, :class, :errors, :to_param, :new_record?,
            :to => :@story
  
  def possible_statuses
    @statuses = Status.find(:all).map{ |s| [s.name, s.id] }.unshift []
  end
  
  def possible_priorities
    @priorities = Priority.find(:all).map{ |e| [e.name, e.id] }.unshift []
  end
  
  def method_missing(name, *args)
    @story.send name, *args
  end
  
end

And then the implementation in the controller looks something like this:

def create
  story = @project.stories.build(params[:story])
  respond_to do |format|
    format.js do
      @story = StoryPresenter.new story
      render :action => "stories/new" unless story.save
    end
  end
end

A member in the audience suggested that instead of treating the presenter as a traditional presenter object we simply write it as a module. Then we no longer would have to delegate the methods from the model and instead of wrapping any instance variable of the child class we could just extend it. The argument for this is clear. It's less code, and it's more flexible.

module StoryPresenter
  
  def possible_statuses
    @statuses = Status.find(:all).map{ |s| [s.name, s.id] }.unshift []
  end
  
  def possible_priorities
    @priorities = Priority.find(:all).map{ |e| [e.name, e.id] }.unshift []
  end
  
end

And then the implementation in the controller looks something like this:

def create
  @story = @project.stories.build(params[:story])
  respond_to do |format|
    format.js do
      @story.extend StoryPresenter 
      render :action => "stories/new" unless @story.save
    end
  end
end

However, the arguments against using a presenter as a mixin are more philosophical. If we're using the presenter pattern we should encapsulate only what we need the view to use explicitly to prevent logic leaking into the view or the controller by other authors. By treating the Presenter object as a class and explicitly delegating the model methods we do just that. To utilize further methods of the model we would need to return to the presenter object and extend it there as opposed to just sliding extraneous logic into our controller or view.

Blogging is not Technology.

2008-05-11T00:00:00-07:00

Last week I was invited to speak at a local NetSquared meeting out in Tempe. Presenting on the topic of blogging forced me to take a step back to look at what I've been doing over the past seven years. I realized all of the technological connotations associated to blogging are irrelevant. Blogging is not about the web, rss feeds, or technology. That is just a means to an end. Blogging is about people, it's about voices, blogging is all about you. Blogging is a medium for distributing both fact and opinion. It's about discussion and connecting people in a relevant context. The technology just helps run the show.

In my presentation I briefly explained the concept of syndication via RSS and Atom - then touched on a high level overview of what a CMS system is used for. This was mainly to acknowledge the fact that not that many people are keen on the how or why of RSS. After demystifying the essential technologies involved, I focused on what blogging is really about.

Letting The Page Breath.

2008-04-12T00:00:00-07:00

I'm continuing my way through Robert Bringhurst's book and at a slow pace. The Elements of Typographic Style is so rich with information that I can only read it in spurts of a few pages and often have to re-read to let the full lesson sink in. Lately, I've become very intrigued by how he describes rhythm in the text layout and the concept of how a page must 'breath'.

When speaking of rhythm - Bringhurst is referring to the horizontal spacing between characters and the vertical spacing of lines of text. 'Breathing' is how much words the page will carry. This controlled by the rhythm. When we layout text and information, we face the challenge of applying content to the constraint of our space. So the more words we put into a given page, the less it can breath. For the reader's sake it's important that the text can breath. If it can't the text becomes unappealing and difficult to read.

Robert, explains various strategies for allowing a page to breath and still carry more text. For instance, longer line lengths require greater leading. If we shorten the line length by dividing the page into columns we can reduce the amount of leading on the page and still allow the document to breath. By reducing the leading we can fit more lines into a given page and thus allow it to carry more text if necessary.

What's interesting about the entire concept of breathing is that it seems very print orientated. How does this apply to the web where our designs are often modified by the reader. If the reader resizes their window the entire body could potentially change depending on how we designed our site to accommodate variations in screen-size. At the same time if we use a fixed width design such as this site - we can find that we suddenly are no longer utilizing enough of the page and allowing the page to breath far too much. And then of course, the user can adjust the font-size which totally changes the amount of words we carry on each line as the character size changes but the line-length doesn't.

It seems like a new set of typographic rules needs to be written for the web where the constraints aren't so absolute. But who will do it?

Less Markup Is Better Markup.

2008-04-12T00:00:00-07:00

There is a lot of ambiguity when it comes to writing semantic markup in HTML: to what extent should we markup data? How semantically detailed do we need to be? While there is no specific rule of thumb, I will say that the less the better. When writing markup, be as clean as possible without losing meaning. Much like how The Elements of Style emphasizes brevity in writing - a sentence should use as few words as possible without losing it's meaning - an html document should use as little markup as possible without breaking the context of it's content.

Use the Minimum Necessary to Communicate Meaning

Unfortunately, life is not so simple for the HTML author. Technology binds us to complications that create an environment that is less precise, less absolute, than merely writing a sentence. But if you can put the pressures we face from design implementation and browser support aside to focus on the basic semantic meaning; you will find that the aforementioned complexity is quite easy to deal with by incorporating small tweaks to your HTML. Here are two primary points in regards to the over complexity of HTML when thinking in terms of implementation as opposed to meaning.

Writing HTML based purely on semantic meaning results in much clearer and flexible HTML that is easier to style and maintain.
Complications during implementation are best tackled by adding superfluous markup to correct a problem as it arises rather than preemptively.

Only Add Superfluous Markup After Challenges Arise

Here is an example. Let's say we have a body of content containing two unsorted lists with four items a piece. Now let's say we want the unsorted lists in this body of content be styled differently from the general rules we have already applied. If we wanted the absolute most flexibility, we could have preemptively given each list item (<li>) it's own class. That would be a total of eight elements with additional markup. We could reduce this to only two elements by simply applying a class to the unsorted lists (<ul>) and leaving the list items bare. Or, provided the body of content is encapsulated in it's own HTML element to semantically describe the associations between the content elements, we could give the containing object a class or ID. Let's say this body of content is the secondary content on the page. We could give the encapsulating div a class, thus reducing the amount of marked up elements from eight to one.

Only Use Containing Elements to Construct Associations

It's far to easy and common to find html documents that have nearly every individual element wrapped in it's own division (<div>) but this is a terrible breakdown in semantics. These excessive containers create meaningless layers of information that add no semantic value to the document. Elements certainly need to be packaged into other containing elements but only when they need to be associated to each other.

There should never be a time when a lone element is enclosed in it's own containing element.
If an element is alone in a container - it should be strong enough to stand on it's own and the containing element should be eliminated.

Take this blog as an example. This post contains many headings, paragraphs, and unsorted lists. It makes sense to enclose the content of this entry into it's own division to symbolize that all of these various elements are part of a larger body of content. A single heading, paragraph, or bullet point in this post could not stand on it's own to communicate the message of this article. Think about that when trying to make sense of when you should or should not apply a containing element. In other words, when writing a long novel you would not put every single sentence on it's own page. Wrapping every single paragraph, image, and list of your content into a <div> is not so different.

It's CSS Naked Day!

2008-04-09T00:00:00-07:00

Today's the big day! I've turned off my style sheets in honor of CSS naked day! Aside from the sIFR, which I'm not going to disable for this, you are seeing the pure semantic HTML markup of this site. This ties into a series of posts I started earlier this week on semantic HTML. More to come soon

Typography Basics.

2008-04-05T00:00:00-07:00

Robert Bringhurst's book "The Elements of Typographic Style" is an invaluable resource to any print or web designer currently practicing. I purchased this book a while back, and now sitting in the airport after SxSWi, I've finally gotten a chance to examine it in detail. Here are some important teachings I've gotten so far.

Horizontal Rhythm

Line length is critical in print and web design. Perhaps the greatest rationale for arguing against a fluid-width web layout come from the general rules of thumbed defined in Robert's book.

The measure, or the line-length, is fundamental to the readability of your text:

In general a satisfactory measure is anywhere between 45 and 75 characters long.
A 66-character line measure is widely regarded as ideal.
For multiple columns, a measure of 40-50 characters tends to be satisfactory.
You should not go below a 40 character measure when text is justified.

Choosing ragged lines or applying justification can affect the structure and feel of your piece:

If both styles of alignment suit the piece, choose ragged.
San-serif fonts tend to look better using ragged lines.
Mono-spaced fonts always look better ragged.
Justification of text in columns with shorter measures can lead to over-hyphenation.

Write HTML That Means Something

2008-04-04T00:00:00-07:00

HTML is often overlooked in development projects. Rendering errors and other visual debacles tend to shift a developer's focus away from HTML's actual purpose: semantics. It's been said before but I feel we still need to emphasize the fact that HTML has nothing to do with the visual presentation of the layout we are attempting to create whether it be for the web or any other medium.

Don't Think Like a Designer

Table based layouts are the greatest hack of all time. When CSS was young and poorly implemented complex layouts could only be achieved by putting all of our HTML into table elements, and layers of nested table elements to follow. But this totally contradicted the point of HTML. The goal of HTML is to provide a clear, well described document. If you have a list of sections that you're reader might be interested in browsing to then those links should be described as just that, a list. A transcribed dialogue communicated by different people should use a definition list tag. Most importantly, if we have a form with fields we need labels. What better element to use than a label tag?

All of this sounds remarkably straightforward but if you're not thinking like a definer and instead are thinking like a designer then you've gotten you're approach to HTML all wrong. Dead wrong. Worry about the design later. Right now the focus is entirely on the content. How is this content best segmented? How is it best described?

Preview Your Work as Basic HTML

When writing HTML don't get tempted to start writing any of the CSS yet. Especially any inline-styles. There are few times you should say never, but use of inline-styles is something you should never do. As you write your HTML preview it in your browser as only HTML. No CSS. Just HTML. This will help you visualize how your document is viewed naturally by machines and is a true testament to the portability of your document. Without CSS you're document should be well laid out and presented as if it were an outline or a basic one column word doc. Line lengths, columns, other layout crap - worry about all of that presentation later. Just keep your focus on making that plain text document as clear and legible as possible. Here are some tips for previewing pages:

If you have an existing site use firefox and get firebug or the web developer toolbar to disable your stylesheets.
Run the W3C validator on your page and be sure to check the 'Show Outline' option to ensure the hierarchy of your content makes sense.

Names Things What They Are - Not What They Look Like

Let me introduce you to your new hypothetical friend Joe. We call him Joe because that's Joe. His name isn't Brown-haired-middle-aged-guy. What if Joe died his hair green? Would his name still make sense? People don't often legally change their names, but they do change their appearance quite often. So does your HTML, yet a lot of us still use that poor approach to naming items in our HTML markup. Make sure you name your content for what it is - not where it goes, or how it looks. If you have a sidebar don't name that div with an ID of 'sidebar'! That data might be presented visually as a sidebar but that's not what the div actually is. What's inside of that div? A list of related messages? Maybe that div shouldn't be a div at all. Maybe it should be an unsorted or ordered list with an id of 'related-messages'.

Break the Connection - Make the Separation in Your Mind

The key thing to walk away with here is to break your thinking that HTML is the markup that makes your site design. That is all done entirely external from the HTML in your CSS code. When you're assigning class names, ID's, or choosing what HTML element to use to describe something just remember. This should be about what it means, not what it looks like.

My Last Day at Sitewire

2008-03-15T00:00:00-07:00

For the past year and seven months I have been happily employed at Sitewire, an interactive marketing agency in Tempe. I spent my time there initially as their front end architect and flash developer but eventually fell into the role of lead designer. The experience has been great.

Some of the Highlights

I can't recommend Sitewire highly enough for their people. Everyone there is absolutely great and I've endured many great friendships during my time at the company. The most enjoyable projects I got to work on for the company were our internal marketing efforts. Assisting Lacey in the video shoot and designing a slick flash application to showcase them; randomly improvising a photo shoot and working alongside Mike Campbell to redesign the Sitewire website last summer.

A New Direction

However, time has taken it's toll and things have changed. I've found a more exciting opportunity with the super cool folks at Integrum Technologies. I'm leaving the ad agency life to work in the realm of web applications and joining a team that practices an agile development process. I'm very excited with this move and look forward to sharing some of the cool stuff Integrum puts out in the future.

iPhone Notes: Jason Fried at SXSW

2008-03-14T00:00:00-07:00

We were lucky enough to see an awesome lecture from Jason Fried at SXSW. Like Kathy Sierra's lecture, all of the notes below were taken on my iPhone.

10 things we learned @ 37 signals

The great unknown.
Who knows - who cares.

focus on the now not the then.
optimize for now.

Red flags

need: puts a barrier up
can't: negative thinking
easy: something we normally use to describe other peoples jobs

Spot the chain reactions

build projects that people are going to get things out of.
don't worry about charging for things!

Target non consumers and non-consumption

the markets that the entrenched players aren't properly targeting.
minimize competition from the entrenched players

Question your work regularly

identify things that aren't changing behavior.

Read your product

the words matter.
bad copy is the greatest sin of web design.
rewrite first, rewrite second

Err, on the side of simple

always start with the easy way
more often than not the easy way satisfies 80% of your needs
get three things done in 1 week instead of one thing done in three weeks
the longer you spend on development the less likely you are to launch it
resist the urge to try to do more the next time around

Invest in what doesn't change

today and ten years from now

Follow the chefs

lagasse
batali
flay
building by sharing
tell people what you know
you reach a huge audience when you give away you're knowledge

Interruption is the biggest enemy of productivity

when David moved to Chicago the less work they got done
focus on passive communication

Road maps send you on the wrong direction

lock you into a path - the past
Its ok to think about the future but don't write it down
do the write thing at the right time

Be clear in crisis

be open public honest and responsive
the web doesnt shutup just because you have
of you don't deal with it the public will speculate it

Breakdown problems

When you make tiny decisions you can't make big mistakes

Make it matter

every decision you make should matter

iPhone Notes: Kathy Sierra at SXSW

2008-03-13T00:00:00-07:00

At this year's SXSW I didn't feel like pulling out my laptop to take notes. Instead, I mastered the iPhone keyboard and jotted down some quick notes from the more interesting sessions. Here are my notes from Kathy Sierra's excellent talk on helping your users kick ass.

20 Things You Could Do To Help Your Users Kick Ass

How do we help our users kick ass? We don't want the user talking about us or our product. We want them talking about their experience. The hi-res user experience: Change the way you view your world. Nueroscience: Environment can inhibit brain growth. Difference between natural and acquired talents.

It's not about natural talent its about the ability to take the time to practice.
You just need to put in the time.
You need to give them shortcuts.

"We need a rage to master."

1. Use telepathy

it started with a monkey.
two flavors of mirror neurons
Just being able to read expressions. It's like you're simulating what they're thinking.
For visualization - if you imagine seeing what you would see if you did it.

2. Serendipity

Psychic shuffle
people believe the random selection on the iPod shuffle know what they wanted to hear next.

3. Add dog ears effect

Attention to detail
Fluidity

4. Use Joy 5. Inspire first-person language.

how can we build our products so that users talk about their experiences and not the product I company?

7. Easter eggs 8. Tools for evangelism

Twitter in plain English video on youtube
help users defend this "totally lame waste of time"
Sleeptracker

9. Exercise the brain

Increase the performance of your brain?
Exercise

10. Help people exercise their body 11. Give them super powers 13. Speeds their knowledge acquisition

what can we do to keep people pushing forward
learn to do knowledge acquisition
give people patterns

15. Help with the reinvestment of mental resources into new problems Speaking of twitter - we have to give people a chance to focus

Attention offsets
Maybe a meditation retreat

16. Make users heros

No dumb questions
No dumb answers
Teach the community how to ask good questions.

17. Do NOT insist on "inclusivity"

Jargon is good
Passionate users talk differently

18. Practice seductive opacity.

Brains like mystery

19. Atoms are not old school 19.5 Do what this guy does - in reference to Gary Vaynerchuk.

Poplisher: The Beta Issue

2008-03-03T00:00:00-07:00

My good friend Mike Sullivan has just provided an invite to his new online publishing community Poplisher. Mike is a veteran in the publishing industry and is seeking to create a unique platform that merges online media with print media in interesting ways.

The service describes itself as: Poplisher is a tool to discover and select the best stories on the web. Popular articles from independent writers will be published in professionally designed and distributed magazines. Print power to the people.

I would highly encourage any bloggers out there interested to sign up and participate in the beta issue!

Utilizing Regular Expressions in AS3

2008-02-29T00:00:00-07:00

Regular Expressions are a powerful tool that you can utilize in many different programming languages. After throwing together the little twitter widget at the top of this page - I was informed by Brian Shaler of a major bug that causing it to crash. So while reworking the code to fix it I figured I'd add some much needed functionality as well. You see, just grabbing the feed from twitter does not generate html links for you. You have to parse your feed and wrap any '@username' responses, or 'http://addresses' into actual hyperlinks yourself. Here's how I did it.

Finding the @usernames and HTTP Addresses

So this is where we actually utilize RegExp. In Flash RegEx works very similar to other programming languages. You simply define a new variable as a with :RegExp class and then assign it a pattern. I used two separate patterns, one matches users, the other matches the http addresses. I won't go into detail on explaining the RegEx patterns itself here as that is an entirely different topic. What I'm focusing on here is how to implement them in flash. But just for the heck of it, incase you want to take tese and make them better here are the two regular expression patterns I wrote:

'@usernames': /(\s@+\w*(\s|,|!|\.|\n))/
'http://...': /[^"|^>](http:\/\/+[\S]*)/

So here is the actual code I use in the widget above. The only difference is the 'cur' variable on the first line passes the current title from the twitter RSS feed instead of the dummy string I've hardcoded:

private function dropRSS():void {
	var cur:String = "Hey @sunnythaper, @shalerjump, @jamesarcher! Check this out: http://tinyurl.com/377owu" 
	if (cur.substr(0,1) == "@") { 			// Skip response messages as they do not always provide enough context to be stand alone statements.
		_current++;
		dropRSS();
	} else {
		cur = cur+" "; // Append a space at the end so RegEx catches trailing expressions

		var twitterUser:RegExp = /(\s@+\w*(\s|,|!|\.|\n))/;		// "
		var url:RegExp = /[^"|^>](http:\/\/+[\S]*)/;

		while(twitterUser.exec (cur) != null) {
			cur = cur.replace(twitterUser, pointToUser);	
		}

		while(url.exec (cur) != null) {
			cur = cur.replace(url, setUrl);	
		}
		
		twit.htmlText = cur;
		TweenLite.from(twit, 2, {ease:Elastic.easeOut, y:"-10", alpha: 0});
		_current++;
	}
}

What's important to take note of is two things: 1) I need to loop and execute the pattern onto the string until it no longer finds any matches 2) I'm passing a function as the second parameter in the replace method as opposed to an alternate string.

This has worked great but fundamentally I think there is a more efficient way of doing this without looping and executing the RegEx so many times.
If you know a better way let me know and I'll update this post.

Implementing Changed on Your Matches

As I said, I'm passing a function to actual handle the replacement as opposed to just passing a replacement string. This is because I need to run some processes on the matches to build urls based off of them. Flash lets you reference the matches in the functions as arguments. Here is the code.

	private function pointToUser():String {
		return " <a href=\"http://twitter.com/"+arguments[1].substr(2,arguments[1].length-3)+"\">"+arguments[1].substr(1,arguments[1].length-2)+"</a>"+arguments[1].substr(arguments[1].length-1,1);
	}

	private function setUrl():String {
		return " <a href=\""+arguments[1]+"\">"+arguments[1]+"</a>";
	}

Of course, if the RegEx pattern generated two or three differently matched terms you could reference them as well via arguments[2], arguments[3] etc.. Here you can do whatever you want. I chose to disect the one argument I was working with through a series of substring routines to trim out unwanted characters in certain parts and then re-insert them outside of the html.

Adobe LiveDoc References:

The 'Best' Kind of Design Exposure!

2008-02-29T00:00:00-07:00

Yesterday I was greeted by fantastic news! Nick La has selected this site to be featured in the Best Web Gallery! Oh and did I mention that my traffic has shot through the roof!

What is the Best Web Gallery?

If you're familiar with sites like StyleGala or CSS Remix, then you've probably heard of Best Web Gallery or sites like it. I found that Nick's site has the best frequency of updates with quality sites which is why his site is the CSS Gallery I goto almost exclusively for design inspiration. I submitted DontTrustThisGuy.com over the weekend and surprisingly made it into this weeks update!

Some Much Needed Traffic

This site is not very well known so I average only about 40-70 visits per day. Yesterday's publicity shot my traffic out of the water! Almost 800 visits in one day! Needless to say I hope at least a few new people to the site stick around for more upcoming posts.

A Recap of the Site Design

What you can't tell from the surface from this design is the technology under the hood. I took this site as a chance to experiment with extensive implementations of Microformats and also took advantage of some new features in CSS3. So if you're interested in seeing just how I did it check out my article 'A Refreshed Design for 2008.'

The Threadless Store: Taking the User Experience Off the Screen.

2008-02-20T00:00:00-07:00

Often when people speak of social media they are referring to a web based software that facilitate socializing-sort-of-behavior of people like Facebook, Twitter, or the more obvious MySpace. While these services continue to scale up to accommodate more users and more features without generating a profit, Threadless an online clothing company, has been profiting off their cult following. Enough profit that the company recently transformed from a 'click-and-order' to a 'click-and-mortar' operation. I paid a visit to their first physical store in Chicago, IL..

The On-Screen Experience

If you're not familiar with Threadless and how it works pay a visit to their site. At first glance you'll see it's clearly an e-commerce website. But it's so much more than that. Every shirt for sale there is created by the users, selected by the users, and purchased by the users. Here's basically what happens:

The more artistically inclined users submit their concepts to the site.
Users all participate in a voting process.
The winning designs are printed and sold in limited runs. The artist is paid $2,500 for their winning design as a reward plus $500 for every reprint if enough users who weren't able to buy the shirt vote to have out of stock designs reprinted.
Members buy and subsequently sport their favorite shirts in person.

That's why Threadless describes itself as a 't-shirt design community' as opposed to a mere retailer. But what's impressive is how apparent they made this in the user experience. Users who only come to shop are exposed to the community as every T-Shirt display page showcases user submitted photos of happy members who purchased that T-shirt and sported it in a photo. The emphasis on participation is prevalent throughout the entire site. But how well does this bode in a physical store?

The Threadless Store: On the Outside

Located on Broadway just a few miles away from Chicago's Magnificent Mile is the first Threadless retail store-front. Just analyzing the outside shows the store itself was designed for Threadless's fans. To ensure pedestrians they have reached the Mecca of all things Threadless - the entire entrance is plastered with Threadless stickers. Included with every purchase made from Threadless, these stickers are not at all different from Apple's technique of packing in an Apple sticker with most of their products.

In the store display, onlookers on the street see shirts available from the current run. But this is a t-shirt community not a t-shirt store right? Absolutely, that's why the shirts in the display are being worn by LCD screens cycling through the faces of members! Later on while waiting in line to make my purchase I was confronted by an iMac kiosk ready to snap my photo if I wanted to join those faces of fellow participants. What's so brilliant is that the store is both showcasing its community and allowing store visitors to participate in it at the same time! The evidence of community participation is prevalent in the store's user experience just like the online originator. That's as cool as it is genius!

Stepping Inside

On the inside the experience continues. I was thoroughly impressed by how the shopping experience resembled the website. Instead of signs, LCDs are used to communicate which shirt is which. The LCDs are the bridge that brings the online experience to the store experience. Just as the website lets you examine the artwork printed on the shirt along with members modeling it, Skinnycorp built what I believe is a flash applet to showcase the same imagery in the form of a slideshow on the LCDs at each shirt station.

Staying true to their community ideals, half of the store is devoted to the local art community. The second story is a cycling art gallery that periodically features the works of a different local artist. The humor, the art, and the shirts are all here. This store really holds true to the experience the company has provided online.

It really is all in the details. The evidence of the community, the identical copy on the signs. Consistent branding, consistent use of fonts and style. The guys at Skinnycorp really nailed it. Someone who never has heard of the website will be pleased to discover a cool store with even cooler T-Shirts. An avid Threadless visitor will be pleasantly surprised to find the awesome Threadless website manifested for them in the form of a physical store. Did I mention if you buy from the store you get a cool reusable fabric Threadless bag to encourage you to bring it back and help the environment? It's worth it, you'll get a $1 discount if you do.

How Facebook Messed Up. (in 2006)

2008-01-30T00:00:00-07:00

Today UIE posted a new podcast "The Book Of Face" with Phoenix's own Robert Hoekman Jr.. The show discussed how facebook has been pretty good at "pissing their users off" and made mention of the whole newsfeed debacle. Back in September of 2006 Facebook first released the daily feed feature and as a result it caused a lot of ruckus. Shortly after the backlash came to be - I wrote a public note on Facebook about the entire situation. It was titled "Why newsfeeds are actually good and how Facebook messed up." So here it is reposted again today on my blog:

1:54am Saturday, Sep 9, 2006

So they've been up for a while now, people have had their say, and the head honcho has responded to all of us. I honestly didn't think much of the news-feeds when I first saw them. I was more concerned with the drastic change in the UI without warning. I think seeing something completely different coming onto a site you use everyday is just unacceptable. If you run a large social network keep it the same, implement changes GRADUALLY. Don't surprise users with big changes let them adopt them! Invite us to TRY them.

Look at it this way: if news-feeds were slowly rolled out as an option, which could be activated, I think people would slowly have adopted them and been much more welcome to the concept. Instead, they were turned on FOR us. We weren't asked. They just did it to us. That's not a good way to treat your users. Hence the mess.

So the argument now is should they keep them? I say yes. I don't see it as an invasion of privacy but more of a realization. All of the items that come up on these feeds are public information already. It's not like it's top secret when you write on someone's wall or update your profile. You're putting it up there for all of your friends to see already. If anything news-feeds are helping you stay in touch with what is going on in your friends lives by giving you a birds eye view of all of their activity and vice versa. The feeds actually are really useful.

But wait.. you say "No no Jimmy I still don't like this at all... it just creeps me out." OK so do one of two things A.) Don't be so open about yourself on facebook! Or B.) Set your privacy settings accordingly so your actions don't come up on the mini feed.

Once again.. the problem really is just that they set you up on something you didn't request. If they asked you "Would you like to share your activity in the new facebook news feed feature - yes or no?" We wouldn't have had this problem!

The moral of this story is that the problem was not the idea. The idea is good. The problem was the execution. Bad execution kills great ideas.

Now stop whining, set your privacy settings, take a break from facebook, and come back and enjoy yourself. Besides you're all probably on facebook way too much. I know I have been.

Tech Trends for 2008

2008-01-25T00:00:00-07:00

Last week, at my dayjob, I was asked to share some of my own predictions for the coming year. I'm no fortune teller by no means. But I do follow a lot of trends online, so I'm not going to tell you what I think is going to happen. Rather, I'm going to share with you, six technologies, platforms, concepts, or discussions that I think will become significantly more important this year.

1. Mobile web usage will take it's place in 2008.

With 2007's advent of the iPhone followed by the introduction of Google's Android platform the mobile web medium is on fire. The release of the upcoming iPhone SDK to developers in February will only throw gasoline into the inferno.

2. OpenID will take off.

The single login for all domains approach was recently adopted by AOL so all AIM accounts could effectively be used as openID. Follow that, with this month's announcement that Yahoo is converting all of their accounts to OpenID and you now have a widespread customer base for the development community to support.

3. Web standards will see significant gains.

Microsoft is on the ball this year, following IE7's release they are already set to release IE8 this year. The best part is that IE8 already passes the ACID2 test set forth by the W3C. As Microsoft is still the vast majority leader in web browser market-share, their commitment to modern web standards is motivating the entire standards community to adopt usage of newer tools. More importantly, it's also encouraging the somewhat stagnant W3C working groups to get organized and make progress on the new standards for CSS3 and HTML5. And to make matters even more optimistic, Microsoft's promoted strategy for browser targeting vs. doctypes appears to promise swift browser improvements for implementations of web standards.

4. Social Media networks will come under much scrutiny.

As social media juggernauts try to figure out how to monetize their services, users will realize just how public they are making their perceived private information to the world. Unfortunately, they will find this out as they are unintentionally used as personal marketers for the large corporations they purchase products from. This has already caused backlash and resistance to social media. It will only continue as this is an inevitable path to the profitability of these social media. I'm not saying social media is a bad thing but I do expect a lot of negative publicity towards these services as they transition into a more commercial business model in a manner that users may not be used to.

5. Dataportability will become an issue this year.

As the line between professional and personal usage for social media continues to blur, users will want more control over the information provided to them. Towards the end of 2007, Robert Scoble discovered the unpublicized consequences of using tools to extract all of his contacts from his Facebook account. As a result, on January 10th 2008, Facebook has joined the DataPortability workgroup.

6. Web Based Software on Your Desktop

I'm not going to be surprised at all if we see more web based services deploying tools built in Adobe AIR or Microsoft's Silverlight. Both technologies emerged in 2007 but there has yet to be a 'killer app' that has made either platform a huge success yet. But these technologies are just coming into their own at the moment. I won't be surprised if we see a good amount of useful apps coming out this year. After all, web designers and developers are already building apps contained in the browser. These tools will make it easy for them to export them straight into a desktop application following their existing workflows. I only expect good things to come of this.

There Will Be Blood

2008-01-18T00:00:00-07:00

Daniel Day Lewis delivers a performance that is equally brilliant and psychologically disturbing. The film, based off Upton Sinclair's "Oil!", portrays the life of Lewis's character, an oil tycoon: Daniel Plainview. This film is not one that clearly tells a story. Rather, it creeps under your skin and strikes you to force you're own interpretations. As a result, the film's chain of events and subtleties initially confused me, but after further thought I came to some of my own conclusions...

NOTE: before reading further, know that I expose some of the plot in my interpretations.

Daniel Plainview is a Victim of His Own Determination

Plainview inevitably becomes a great business success. Yet, despite all of his wealth and attributed success he is the character whom exudes the most unhappiness, dissatisfaction, and overall discontent with life. My thoughts are that his determination and drive that allowed him to achieve his success was the poison that killed him as a human being. In the movie covering what we can assume was his entire adult life; Lewis has no one in his life. He discovers that the only person he actually befriends was a criminal posing as a lost relative. And then, the orphan boy he raises as his own son wants nothing to do with him as an adult.

As a result of his nature - it appears that this has no effect on Plainview. But it becomes evident that Plainview is broken and depressed in the subsequent and final scene of the film.

Eli Sunday Mirrors Plainview

What may be the most provocative part of the film is just how easily people are manipulated by perceived power. Plainview misleads the public, often bluffs, and never holds true to his promises. He also uses his power in the form of wealth to easily influence and bully the common people. This is clearly seen early on when Plainview purchases the Sunday's ranch. Being offered $3700 astounds the father of the household. Even knowing the value of the land was greater due to oil, he still has no power to truly negotiate. He is very simple and as a result easily bought.

But it is in these negotiations where Eli emerges as Plainview's true competitor. The two men do not compete for wealth. They compete for influence. And while one is a deceptive oil man; the other is an equally misleading showmen who abusively seeks religion as a disruptive means to control the common people. You could argue perhaps that one took the highroad, and the other took the low road. But you can't deny that both men were corrupt. And both men could see past each other's false words.

A Tragic Paradox

Rich beyond belief but alone, Plainview lives a singular and depressing life in his great home. Eli Sunday comes to seek business between his church congregation and Plainview's oil business. But it is here where Plainview defeats his ultimate competitor, ruthlessly breaking him mentally and then murdering him physically. Powered by a cruel but powerful form of determination that is all but ridden of hatred, Plainview sits in the bowling alley of his mansion. He has both everything and nothing at the same time. All that is left is for him to say his last words in the film "I'm finished."

Simple AJAX Links With Prototype.js

2008-01-07T00:00:00-07:00

Getting my head wrapped around Prototype.js has been a difficult process. But today I was faced with the simple challenge of creating links that could load external files into divs embedded onto the page. Nothing fancy but useful nonetheless. Here's how I did it:

	var DynamicExtensions = {
	    dynamicize: function(element){
	        element.dHref = element.href;
			element.dTarget = element.target;
			element.href = "#"+element.target;
			element.target = "";
			element.dynamic = dynamicallyLoad.bindAsEventListener(element);
			Event.observe(element, 'click', element.dynamic);
			return element;
	    }
	}

	Element.addMethods(DynamicExtensions);

	function dynamicallyLoad(e) {
		element = Event.element(e);
		new Ajax.Updater(element.dTarget, element.dHref, { 
			method: 'get', 
			onComplete: function() { 
				setLinks(element,element.dTarget);
				new Effect.Highlight(element.dTarget, {duration: 1}); 
			} 
		});
	}


	function setLinks(e, target) {
		(target) ? selector = '#'+target+' ' : selector = '';
		$$(selector+'a.dynamic').invoke('dynamicize');
	}

	Event.observe(window, 'load', setLinks);

Download & Demo

How You Use It

I'm big on javascript that is unobtrusive - so other from including the script (along with prototype.js) all you have to do is assign a class and target to your designated anchor tags. Here's a breakdown:

You give the target element an ID in HTML.
You set the target value of the link tag to the ID of the element.
You assign the class of the anchor tag to 'dynamic'.

So the link in the example below would load test.html into the div with the ID of content.

	<div id="content"> This content will be replaced once 
	the link below is clicked.</div>
	<a target="content" href="demo.html" class="dynamic">Load Demo</a>

Important Lessons Learned

I said at the beginning of this post I'm not really a javascript expert so this was a learning process for me. The greatest challenge for me was understanding how binding works - it's something I'm still slightly confused on actually. How to reference functions with callbacks was an additional challenge. Overall I would say there were three main 'gotchas' that stumped me for a while.

Callbacks need to be functions to call functions: if you use a callback like 'onComplete' you can't just say 'onComplete: myfunction()'. Instead you must do something like 'onComplete: function() { myfunction(); }'. If you don't the function get's executed as the assignment to the callback is interpreted. I believe I'm explaining that right. In my case the effect was rendering immediately when you clicked on the link as opposed to delaying until the new content had loaded. This was very bad because if the new content contained dynamic links the script couldn't bind the event behaviors to them.

Elements need to be extracted from an Event object: in my dynamicallyLoad function I wanted to refer to the object that triggered the event as 'this'. I thought I could because I binded the function to it as an event listener but that's where I confused myself. What you need to do is reference the Event object and then get the element from that. That is why the first line of the function reads 'element = Event.element(e);'.

This script is not rocket science, but it is a useful starting place for me in a lot of projects that need to make minor use of AJAX updates on click. I've already expanded this to be less generic to suit the current project I wrote it for. I'll share with you more basic prototype lessons as I get more chances to utilize it in forthcoming projects.

Download the code.

Note: I bundled the source with a compressed version of Scriptaculous and Prototype. You can learn more about these compressed versions of prototype at the Google Code project page.

CSS Commenting With Textmate

2008-01-05T00:00:00-07:00

Last month Jina Bolton wrote an excellent article about Sexy Stylesheets on Think Vitamin. I was particularly impressed with some of the ideas for commenting more efficiently. The problem was, even after knowing the techniques, I was too lazy to comment consistently. That's where TextMate came in handy.

My CSS Comments Bundle For Textmate

I was surprised that there was nothing in the included CSS bundle for basic commenting so I took the liberty to write one. I also made tab triggers for all of the techniques shared in Jina's article. It's broken down into five snippets:

Comment: a traditional CSS comment.
Section: I chose to use the section flagging technique as mentioned in Jina's article.
Colors: a reference table for defining hex colors used in your stylesheet. This was mentioned by Jina which she accredited to Steve Smith.
Declare: a wordpress theme declaration. I found this to be a substantial way to define a stylesheet while following an established best practice by the wordpress community.
Updated: this is the timestamp technique mentioned in Jina's article.

I prefer to use the declare snippet on my main stylesheet and the updated or timestamp on all of my included child stylesheets. This bundle has been in use by me for three weeks now and I've actually found it to help me a lot. Putting in comments for organizational purposes; I'd be too lazy to do it without this. Your mileage may vary with the bundle, but I hope you find it useful too.

Github: My Advanced CSS and CSS Comments Bundles for Textmate

A Refreshed Design for 2008

2008-01-01T00:00:00-07:00

Happy new year! To kick off the start of 2008 I've labored over a new design for DontTrustThisGuy.com. Writing a custom WordPress template, the new version of this site has microformats strategically mixed-in for your convenience. Additionally, the site now uses some advanced CSS3 styling to reward readers who are using more modern browsers, and to encourage those of you who are not, to upgrade.

CSS2 Drop Cap via Pseudo-Selectors

The purpose of the new design is to emphasize the content of each individual blog post. Most of the focus was on font choice, and text layout to encourage reading. The first paragraph of every post is slightly larger than the remaining content. Also, through the use of CSS2, a drop-cap is displayed in Firefox, Safari, and Opera web browsers. Sadly, IE7 does not support the 'first-letter' pseudo-selector even though it is a CSS2 feature. A screenshot displaying the difference can be seen below. The capture on the right is the gracefully degraded appearance in IE6 and IE7.

CSS3 Multiple Backgrounds

The page graphics are emulating a morning newspaper with a casual coffee stain here and there. Of course, if you are using any browser other than Safari you won't be able to see where those coffee stains came from. That's because only WebKit (the open source engine that Safari runs off of) currently supports the multiple background images feature of CSS3. The category and archive listings also have rounded corners courtesy of multiple backgrounds and even a drop shadow courtesy of 'text-shadow', but again only in Safari. The capture to the right is Firefox, and left of it, is Safari.

Your Name and Website in hCard

Whenever an author posts on this blog his hCard (a vcard in HTML format) is embedded into the post. This is not a built-in feature of WordPress and I think it should be. But I even took that a step further; if you comment on the site an hCard is generated for you with your name and web URL. Don't worry, your email address is not included.

Note: the toolbar allowing the display and utilization of the microformats embedded into the page in the screenshots are only possible with the Firefox Operator add-on

Article Specific Feeds for Free with hAtom

Subscribing to a blogs RSS feed is nice but what about if you want to track the comments on a particular article? Well, by default WordPress also generates a comments feed, but this pushes all comments from all posts into the feed which may not be that useful. So you're left with having to roll your own php script to generate a customized feed for every post. This could be a little tricky. What if you can do it with no extra effort at all? Every post and it's comments already have to be wrapped in HTML markup so they can be displayed in your browser. By adding a few extra classes to the already done markup you can turn your HTML into hAtom and use an hAtom transcriber.

Article Bookmarks Baked In with xFolk

Every post, and page displaying a series of posts, such as the archives, has xFolk markup for each article. Again with Firefox's operator, you can easily bookmark any one of the posts featured on the page or add them to your ma.gnolia.com or del.icio.us account.

What Do You Think?

That about sums it up for the new design. It will be interesting to see how well browsers can support the CSS3 and microformats on this site one year from now. I'll be adding some more features to the site throughout the year as I've left plenty of room for growth. What are your criticisms, or opinions? And again, welcome to 2008, and thank you for your readership.

My Favorite Music of 2007

2007-12-29T00:00:00-07:00

2007 was a great year for hardcore music junkies such as myself. Today, as the year comes to an end, I wanted to highlight some of the best songs to pass through my ear canals. So here it goes...

Best Live Performance: Daft Punk's Alive 2007

Daft Punk will probably come to be known as the best electronic music artist of my generation. Their albums should be a staple to anyone's music collection. You have to respect these guys as artists; they perform because they love what they do. Remaining largely anonymous, other from knowing their actual names, the general public knows very little about these two. We only know them as the robots, appearing in a giant laser-light-show-adorned pyramid, putting on one of the greatest shows you'll ever experience.

I was lucky enough to see Daft Punk at Lollapalooza and I have to say: if you think a live DJ show might be boring think again. There is a reason they call their tour Alive - that's exactly how you'll feel.. to the 10th exponent. I chose the encore set they played as my favorite live performance - it mixes some new music with their older Stardust songs and was new to this year's tour.

Sample Daft Punk's Alive 2007 on iTunes

Best House/Techno: D.A.N.C.E. by Justice

Leaving right off from Daft Punk. Justice is the artist on Daft Punk's label Ed Banger records that got loads of attention this year. Probably the best house to come out of France since Daft Punk, Justice's album Cross is indeed worthy of your music collection. One of my favorite track's from the Album was D.A.N.C.E. which is intended to be a tribute to Micheal Jackson back when he was in the Jackson 5. ABC 123 ring a bell?

VIDEO: Watch The D.A.N.C.E. Music Video

Best Folk: Paranoia in B Flat Major by The Avett Brothers

Watching the Avett Brothers guys perform live here in Phoenix and again when I was out in Seattle was a real treat. These three guys can really rock out! Sporting a banjo, guitar, and bass the three brothers sing, play, and perform foot percussion in a high energy style. Their 2007 Emotionalism was my favorite album from this year, Paranoia in B Flat Major combines their excellent lyrics with the fascinating dynamic of their new music.

VIDEO: The Avett Brothers Performing This Song

Best Rock Song: Cruiser by The Valley

If you want a song you can totally rock out to look no further. The Valley is another new artist popping out of Seattle and their song cruiser is one of the sweetest rock songs ever. I don't need to say much about this one. Just download the MP3 off the KEXP blog you'll see what I mean.

Download Cruiser at the KEXP Blog.

Best Hip-Hop: Certified Air Raid Material by DJ edIT

I didn't hear this one until recently. I hadn't heard much unique hip hop music and up until hearing this album was pretty much dead set on nominating Brother Ali as my choice for this year. However, once being subject to the aural roller-coaster ride this LA based DJ has produced there is no denying that this is one of the coolest hip hop records you'll hear from this year. Don't pass this one up, if you're a fan of experimental hip hop artists like Prefuse 73 or RJD2 you'll definitely enjoy this album.

Download Certified Air Raid Material at the KEXP Blog.

Best Brit-Pop: Backfire at the Disco by The Wombats

The Wombats are a brand new band coming out of Britain. I first heard this track on KEXP's music that matters podcast and got addicted to their signature howling. You can find this song on The Wombat's debut album that just came out last month.

VIDEO: Watch the Music Video for Backfire at the Disco

Overall Favorite Song of 2007: White Winter Hymnal by the Fleet Foxes

The Fleet Foxes are an up and coming band from Seattle. This song really took me by surprise. I can keep listening to it and it doesn't get old. The band has a great relaxed sound that's truly unique to them. White Winter Hymnal creates a vibe that just let's you kiss all of your worries goodbye. This was hands down, my favorite song from this year and I'm looking forward to much more from the Fleet Foxes next year.

Download White Winter Hymnal at the KEXP blog.

Advocates vs. Practitioners vs. Practicality

2007-12-25T00:00:00-07:00

New technologies are popping up at a relentless pace today and staying relevant is now more of an issue than ever. Almost every day there is another new emerging tool along with many advocates promoting how it will change everything. But will it?

Advocates are great. Everyone should advocate something useful when they find it. But what's more important is that you put it to good use. A new technology is interesting at best unless we have some down to Earth benefits and applications. Without realistic present uses we're left with a mere concept or abstract theory.

Let me restate that the pace of new technologies popping up is relentless, and just remaining current can be a major challenge. If remaining aware of new technology is a challenge - giving them each a test drive is highly unlikely. What's lacking today are not technologies or advocates, but practical realists who can show actual solutions to today's problems through utilizing tools. If you want people to use a technology what better way than to focus on the solution and presenting the technology itself as only a means to an end. After all, that's what the technology really serves as right?

What's on Your Front Page?

2007-12-23T00:00:00-07:00

In the process of redesigning this blog I've been stuck on the homepage. What on Earth should I feature on the homepage? Who cares what I put on the homepage? Who is going to the homepage?

Designing a blog is different from other sites. The general readership subscribes to your feed and from that point onward typically falls into one of these scenarios:

They never return to the site again - they only read the content of the site via some sort of feed aggregator.
They follow the feed and visit the permalinks to the individual post to read or review the whole article on the site.

So whether or not your avid reader returns to your site or not, they most certainly are not going back to the homepage in order to get the latest content from your site. So who goes there? I'd assume only new visitors will enter your blog at it's homepage. But even that is unlikely because most visitors will either come through a search engine result pointing to a direct article page or a reference someone else made on another web-site that cites one of your articles.

There has to be a better way.

So it's safe to say that the homepage can in many cases provide little or no value to most of your users. But that's only true if the homepage of your blog only supplies your readership with the exact same information that your feed can provide them with. What I mean is that everything on the front page of a blog is automated and I think that's the problem. Your feed does a good enough job, actually, a better job at automating the delivery of your latest content.

There has to be some value that you can provide that the feed can't. That's where you come in - what better way to solve this problem than to introduce a human element into the mix. You. What I'm suggesting is what I've decided to do for the new version of this site: edited content on the homepage versus automated. I believe my latest article is not always going to be my most relevant or appealing for most of my readership. Imagine if every periodical news magazine's cover story was the last story approved by the editor before going to press. That is practically how a typical blog is set up.

How would you do it?

So now I'm asking you: What are some better strategies to add value to your blog's homepage? What type of content would you choose to hand select for your blog's homepage? How often would you do it? How much of it would you feature? These are all things to consider. I hope someone reading this has some good ideas. I just might use them on this site!

My blog up and down this week.

2007-12-08T00:00:00-07:00

If you went to my blog and noticed things were funny or that I'm missing a post you aren't imagining things. Earlier this week my site got hijacked by some sort of spammer that installed a backdoor in my wordpress install. For a while you could see all of the files on my site including my configuration files tied to the database powering this blog. Bad news.

Fortunately, I've been active in my blogging efforts lately so I caught it the same evening it happened and did the following:

I took the site down
Changed my passwords
Restored the database from five days prior
Turned on Dreamhost's advanced security settings
Installed the latest version of wordpress
Took extra precautions suggested by the wordpress site

Over all the setback was only a couple hours of hassle but it was disappointing.

Back and better than before.. almost

If you were on this site sometime during the last three hours you might have seen a messy homologation of HTML and incomplete CSS.. well, I am almost done with a new design that I came up with two nights ago and am in the process of incorporating microformats into the Wordpress theme. The new theme will launch this weekend with gracefully degrading CSS3 and microformats baked in including hCard, hAtom, xFolk, tagspaces, and nofollow in the comments. Later, as time permits I plan to add some cool javascript too.

I'll stop talking about what I'm doing and get back to doing it. Download Safari 3 or Webkit if you want to take full advantage of the new design! There will be screenshots to illustrate the differences between modern browsers!

Geezeo: Get a grip on your finances!

2007-11-26T00:00:00-07:00

I run my own personal business and have a day job. So I have double the fun when it comes to monitoring my checking and savings accounts. On top of that I have credit cards for myself and my business, an auto loan, and a student loan. Managing all of that can be pretty hectic. Fortunately, I've discovered an awesome free web 2.0 service called Geezeo and all I can say is this thing frickin rocks!

Here's what I did in 15 minutes:

Add my credit card accounts
Add my personal checking/savings
Add my business checking/savings
Add my auto loan
Categorized (via tagging) all of my expenses for the last 30 days
Set monthly goals for coffee, food, transportation, and entertainment expenses
Saw how much I was within or overshot them this month.

That's a lot of stuff in a short amount of time. The best part is the legwork is done now. The account and transaction data auto update. And Geezeo remembers places you shopped at for auto tagging. So if you are like me and you purchase everything on plastic all of your expenses are logged and categorized. Well, except for the occasional unique purchase that confuses Geezeo! And that means I can just log in anytime and in less than a minute I can see how much over or under budget I am this month for any particular type of spending. This is absolutely incredible stuff. I highly recommend trying it if you aren't using any sort of tool already. Geezeo makes managing your finances fun and easy.

Well less of fun and more entertaining / fascinating / cartoony / and interesting. Good deal!

An Awesome Surprise from The Blakes

2007-11-16T00:00:00-07:00

Tonight I popped up my favorite album from last year, The Blakes self titled album, and to my surprise I saw some new cover art come up in the "More from this artist" box in iTunes. I didn't hear of a new CD coming from them and indeed I was faked out. It looks like they got picked up by a label due to their popularity and thus have been given the resources to reproduce their debut album in higher quality. If you already have the Blakes original album this duplicate album is worth picking up as you'll get 4 new tracks from them. But even better, the entire album now sounds much more vibrant. This is some high-def Seattle indie grunge rock. Don't miss it! My favorite album of 2006 is now my favorite album of 2007.

Vector Magic: The coolest thing since sliced bread?

2007-11-11T00:00:00-07:00

There are many tools reserved for the lucky few who have the luxury to afford and use Adobe's Creative Suite. One of them is the livetrace tool in Illustrator. Using livetrace a photograph does not always work out quite that well, it also eats up all of your system resources to perform traces on highly detailed images. To that point, when I first saw Vector Magic, a project from Stanford University, I didn't think much of it at first. But after using it I can't help but highly recommend it!

Here's why

It's completely free.
The software is web based so there is no installation and more importantly the processing is done remotely from my machine.
It's incredibly easy, the process is straightforward and the UI guides you through every step clearly.
Most importantly it works GREAT! I think it can trace photos better than illustrator's livetrace.

You can even share your images if you'd like. I tried it on one of my photos. You can see the results of a photo I took last week at Harvard Square.

One last thing.. why does one want to vectorize an image?

Traditionally, your photos are in a bitmap format: jpg, png, gif, bmp, etc. These formats store images as a big grid of dots. If you zoom in they become pixelated, which means you can see the individual dots (us computer folk call them pixels) that make up the photo.

A vector image is made up of little drawings. A vector image format (eps or svg files in most cases) stores a bunch of lines and points that make up these little scribbles (us computer folk call them vectors) that collectively make up the picture.

The difference between the two is that when you scale a bitmap, the computer has to essentially invent new dots on the fly, the problem is it doesn't know what those dots should be. The result is a blurry or blocky looking picture. With vectors however, you can scale the image and the computer simply knows to redraw the vector bigger. So you can make the image ten times it's original size it stays just as sharp as the original size. And that's the primary benefit to using Vector Magic. Go ahead, give it a try.

UI12 in Review

2007-11-11T00:00:00-07:00

A week ago from today I was flown out to Boston to attend the UI12 conference held by User Interface Engineering. The entire experience was extremely pleasant. I saw many great presentations from speakers the likes of Cameron Moll, Luke Wroblewski, Scott Berkun, Gerry McGovern, and Jared Spool.

Aside from covering an enormous amount of highly relevant and current information in four days; there were some memorable moments. After the first night of the conference I got to meet up with some folks from the IXDA Boston and grab a beer with Andy Budd, and Luke Wroblewski. The next day Jared Spool gave a keynote lecture on magic as an analogy that UI designers are working to create illusions to enhance the user experience just as magicians are working to create illusions to amaze their audiences. Somehow I found myself on stage during the keynote to have my head shrunk after being randomly selected by Jared. I didn't volunteer for that one.

Overall, I can't recommend the conference highly enough. It was a great experience. Unlike SXSW, which is basically a huge party for geeks nowadays, I learned a lot about my profession and the industry I work in. Over the course of the upcoming week I plan on posting some takeaways from the different sessions I attended. Stay tuned!

Hawaii

2007-10-21T00:00:00-07:00

Consciousness has been illusive at best. I departed from Honolulu yesterday at 10pm and arrived back in Phoenix at 8am this morning. Thus marks the end of my eight days on the islands of Hawaii.

I have posted a zip file containing a handful of the photos I've taken for your viewing pleasure. Some of the highlights of the trip included Kayaking in Kona, cris-crossing a valley in Kuaui via zip line (video link is not me I didn't have my camera for this), exploring the volcano national park in Hilo, and above all exploring the city of Honolulu and enjoying the beaches off of Diamond Head state park just 10 minutes away from the city. I was really surprised at how active the city is at night.

The thing about Hawaii is that it seems so distant and isolated that you couldn't live there. I got this vibe through most of the towns I visited, but I have to say Honolulu is exempt from this feeling. The amount of activity during at night puts other laid back cities like San Diego to shame. The city has a perfect balance of activity to it, it's a busy place but relaxing at the same time.

And did I mention that it's extremely clean? Sidewalks are made of flagstone instead of concrete, beaches are plentiful, night markets, rooftop live music venues, high end shopping districts, and a wide variety of bars and unique restaurants compliment the beauty of the Hawaiian landscape. That is what impressed me so much: the city is so nice that it ranks as one of my favorite cities to hang out in, but it's also in Hawaii.

There are so many great trails for cycling, as well as mountain biking, the beaches are some of the cleanest you will venture upon, and there are more unique sports in Hawaii including groups of cyclers, surfers, hang gliders, parasurfers (video is obviously not me, I didn't get to try this but would like to take a lesson), and more. The amount of outdoor activities is endless. By the end of the day you'll realize that the awesome night life of the town is just the icing on the cake. What a great place to be.

A New Face For Sitewire.

2007-09-20T00:00:00-07:00

I'm proud today to announce that we have finally finished putting enough spit and polish onto the new Sitewire web page that it's ready for public attention. I handled all of the design, flash work, and html/css development while balancing other projects brought to me within Sitewire. The experience has been hectic at times but overall unique. For example, during the design phase of the project I wasn't allowed to work in the office so I worked remotely from nearby coffee shops around town. Even more interesting - we rented truckloads of photography and lighting equipment and converted our office kitchen into a makeshift photo studio to do a staff-wide photo shoot as we didn't have the time or the budget to accomplish at a professional studio.

A lot of things happened simultaneously during this project. Design concepts and brainstorming were being developed the same time as messaging and copy. This made both phases of the project a little less efficient from a time perspective but much more collaborative as both design inspired new copy and new copy inspired new ideas for design. Though things felt a bit hectic at times, I'm fairly pleased with the final result. The site is a bit heavy, but overall it's pretty solid. So with that being said I present to you the new Sitewire.com. Take a look and share your thoughts whenever you get a chance.

iPhone or iFool?

2007-09-13T00:00:00-07:00

So I recently caved to the lower price point of the Apple iPhone and now I've put my self into a situation bound to be full of turbulence. Activating the phone tonight, a deceptively smooth process, abruptly came to a halt when the credit check failed. Knowing my credit score is high from quarterly credit reports Discover card sends me; I was genuinely surprised to find out my credit information was not good enough for AT&T's standards. So I'm left here trying to rationalize the situation. I have a useless piece of expensive technology sitting next to my laptop as I type this. This is very disconcerting.

Further research on Apple's discussion forums shows customers who have experienced similar problems. It seems like the use of any identity theft protection can cause AT&T's credit run to fail. So even though I can get a credit card, bank account, auto loan, etc. all while having my identity theft service in action, I can't get approved without going down to an AT&T wireless store in person. Oh what joyous time awaits me.

Update: I got the phone activated without a hitch after verifying my identity through identity theft protection. My phone number transferred in less than 15 minutes. The process is easy; so easy that I'm actually glad I have the theft protection in place. If not anyone with my social security number and street address could have activated an iPhone in 15 minutes or less and stolen my life! Oh the information age. So far I'm going ga ga ga ga for the iPhone. These things are worth the hype! I'm almost sorry I resisted for so long.

iPhone First Impressions.

2007-07-01T00:00:00-07:00

I mosied on over to the Apple store yesterday to get a glimpse at the much alluded iPhone. Some words to the wise: come the day after to avoid standing in ridiculous lines. The iPhone is surrounded by a lot of hype, which a lot of folks don't think it can live it up to. I for one can see that it doesn't but it does come close. When I first caught a glimpse of it in the store I saw about 6 different people surrounding the table with display models. The iPhone is spectacular to see in person. It's probably the nicest, most intriguing little hand held gadget I've come across. The device is about the same size as a conventional iPod but so minimalist in design that it has a sort of mystique to it.

Don't get me wrong, it is VERY cool. The product is amazing in many ways but at the same time it's equally unimpressive in many ways. For instance, Safari on the iPhone, the best implementation of web browsing online in phone to date, is still not without it's problems. Scrolling around pages was very laggy. The phone does not zoom in as fast as it does in the commercials. Zooming within the web browser is a bit of a test of patience. The animation is fluid but results in a blurry screen until the screen is redrawn. It's a bit like zooming in and out in google maps. It's just not conducive, but I suppose it's better tha nothing. Additionally, developers such as Joe Hewitt are already facing problems experimenting with the iPhone. So software for the iPhone will be coming but it's going to still be a while before we see polished products specifically for the iPhone that will 'revolutionize' how we do things.

Finally, the AT&T wireless plans are not that bad of a deal considering what you get. I think the price is a really good value when you consider you're on AT&T's Edge (premium data network) with unlimited data transfer included in every iPhone plan. Not ot mention rollover minutes. HOWEVER, AT&T's Edge network blows. The US lacks a true 3G network and the closest carrier to providing anything comparable is Verizon. Edge currently maxes out at 80Kbps. Dialup is 56 Kbps. And while AT&T is investing in their infrastructure to increase the capabilities of Edge to hopefully achieve 200Kbps by next year, Verizon already achieves transfer rates higher than that on their own network right now.

So yeah, I'm a bit bummed but grateful at the same time. I would advise any smart consumer to hold off buying the iPhone unless you need it for testing. Let the silly early adopters spend their money on a device that is well polished for the most part but somewhat frivolous in our present day premature environment. I'm just glad Apple has done something which has put the wheels in motion to improve phones everywhere. And I am counting on it being successful, as you know, I would like to buy a second generation iPhone. One that corrects all of the mistakes from the initial product offering and has a healthy amount of web based productivity solutions and features to encourage the necessity of such a device.

It's Been Hanging Over My Head.

2007-06-14T00:00:00-07:00

All kinds of work including (but not limited to): paper work, actual work, side work, busy work, boring work. This year has blurred by me. I haven't accomplished any important personal goals since the year began, nor have I had the time to. I've just made excuses - turned my face from reality - and let life go by me. It wasn't until three weeks ago that I actually stopped to think about what realistically must happen.

I have debts to pay, bills to attend to, places to see, and goals to achieve. One of them is a new portfolio site show casing the work I've been doing over the last two years. Another has been to actually improve my writing and provide an insightful blog to the public. This I can say may very well happen in the next couple of days. I came up with a design three weeks ago, converted it into working code last weekend, and now this coming weekend I hope to implement it on this very site.

Still, my 'killer' application idea I wanted to launch in January is still festering in my mind and going nowhere as we speak. My little creative outlet Sumo Creations, likewise, is sitting around not doing much. Sure, I can attract work but I'm not attracting worth while work. Not doing cutting edge projects or anything innovative has left me feeling professionally stale and a little burnt out.

I have made it my personal goal the rest of this year to focus much more on mastering some of the design and development skills I've been practicing over the many years. I've been slinging code for over eight years but it was not until recently that I actually started to pay attention to and discover the theories behind programming. Design is just always something I've had a good eye for; it just came natural. But now, as of this year I'm actually actively studying and practicing design theories in my new work. Finally, being out of school for the last six months has given me much more time to think about my world I live in. I feel as though I've been caught up in a hectic tight bubble unexposed to the true world out there. In a constant haste from school to job I was not paying attention to what was happening around me. While I'm happy where I'm at now, I've gained an unsatisfiable appetite for travel. I hope to write about these things I'm doing and learning on this blog. It will not be focused - in fact it will hopefully feel as if each post belonged on a completely different website. My aim is not to be consistent but to be informative. I like many different things and become fascinated in different fields quite often. I hope this site will become interesting and insightful to some. I hope this site may become more helpful to me.

Is Flare9.com the Affordable Website Machine for the Small Business Without a Budget?

2007-04-22T00:00:00-07:00

If you work as a designer or a developer you might be frequently bombarded with requests from potential clients that go nowhere. The conversation starts out promising, but you soon realize they want to you to spend a couple weeks to develop a custom website for a measily $500 budget. When you return with a realistic number above $500 to say the least your point of contact lets you know "they'll get back to you on that." And that's that. A rather passive aggressive manner of parting ways. The price they can afford is not worth your time, the value you offer is not conducive to what they can afford. What win/win solution can you create in a situation like this?

Enter Flare9. The developers over at Obuweb are hoping to have an answer you've been looking for. If you have a go nowhere client why not make a good impression by sending them over to their cookie-cutter-website-on-demand web service and get a nice $150 kickback for the referral? That's the incentive and thought behind the concept. Obuweb is hoping we developers will send our problem clients and people who aren't able to afford a real website over to their service as out last resort. Why not? It's a five minute transition from lose/lose to win/win. But let's not get ahead of ourselves yet. It sounds simple enough but is it good for the client and is it good for us?

Is Flare9 a realistic solution?

Looking at the system itself, Flare9 is a heavily modified version of Wordpress to function as a CMS for many many Flare9 hosted websites. Obuweb has made it so that a user can manage all of the content on the website, register a domain name, build forms, and even setup email accounts all from within the heavily modified Wordpress / Flare9 control panel. Trying out the demo I felt right at home myself since I'm an avid Wordpress user. I suspect that any moderately experienced web surfer would be able to catch on to Wordpress's administration in no time. The modifications Flare9incorporated should not cause any problems in terms of usability either. The WSYWIG editor features some unique elements such as a tabbed menu that allows the user to edit a specific column of content on the page. It also allows the user to drop in forms they created in Flare9 form creator utility.

Good, but not perfect.

Looking at the system objectively I would say that Flare9 is great for small budget clients looking to get online fast and expecting a minimal amount of control over the look and feel of the overall template of the site. Expecting much more than what is already provided would not be realistic. I do have a couple of concerns that I could not determine from the demo:

How do I upload and or change the company logo in the template?
The blog post and page manager are sort of intermingled into one. I could see this causing serious problems for users. Further modification to the Wordpress admin to place these on separate tabs would do a lot of good from a UI perspective.
Turning the blog on or off is not intuitive. I deleted the blog page, how do I get it back later if I decide I want a blog after all?

None of these issues are necessarily critical. I see most complications in the UI just affecting the user's learning curve. For instance, the blogging terminology in the manage navigation will not make any sense to someone who's never managed a blog before. More importantly, I don't believe categories, comments, etc. even apply to pages. Adding or removing the blog in general should be refined so that the user may turn it on or off in the general settings. Right now it's simply treated as another page.

A solid deal.

Flare9 is a very comprehensive, straightforward, and cost effective solution for getting online with minimal effort, time, and money. I think that this is a very strong release for an initial offering and would recommend it to anyone who approaches me looking for a low-cost alternative to myself.

The bottom line: Recommended.

Smart Cars, iTunes Drops DRM, and Burger King Treats Animals Right.

2007-04-05T00:00:00-07:00

Every now and then you come across some good news. This past week alone I've come across a lot of really great news.

Smart Cars Are Officially Coming to the USA!

The first thing I want to mention are Smart Cars as someway, somehow, I totally missed out on the announcement that they are coming to the States! It's about time. For the longest time you could import them through a company called Zap! But honestly, I don't think I'm willing to pay $26,000 for a basic Smart. Well, fear not. In 2008 the Smart Car will find it's way into official US sales channels and pricing will be somewhat just. Still a little higher than I originally suspected, compared to hybrid and TDI alternatives the Smart is significantly cheaper starting at $12,000 for the ForTwo Pure. However, I think most of us will be interested in the "ForTwo Passion, which comes with a panoramic sunroof, and more importantly air conditioning! The passion will start at $14,000 and probably become a popular quircky and worthwhile investment for commuters. I wish this happened since Smarts inception but the US market catches on to important things VERY SLOWLY.

http://www.smartusa.com/

iTunes Strikes A Deal with EMI records to Sell Unprotected Music!

This is just groundbreaking stuff. A lot of people don't understand the seriousness of their tech freedoms that are being stripped away from them. The average consumer is dealing with something called DRM or digital rights management in many digital modern products available to them today. It's being snuck in without you being aware. For instance, did you know if you buy a PlayStation 3 you can't use an HDMI connection to play it in HD if the HDTV you are using doesn't support HDCP? Probably not! But what is all of that stuff anyways? It doesn't matter most of the HDTVs already have it so you don't have to worry about it. And that's the scary part. HDCP is a form of DRM that prevents you from playing copied discs or using pirated games. Honestly, it's there to keep you honest but it also limits your own freedom. What if you buy a videogame and accidentally scratch the disc? Well maybe you thought ahead and made a backup copy on another disc? Well that just won't work anymore because the embedded DRM tools in your TV and PS3 know it's not an original copy.

The same thing has been going on for a long time now with online music stores. iTunes being the first major online music retailer was only able to convince the major record labels to allow them sell music on the store because they sold the music files with embedded DRM. The DRM on iTunes is called FairPlay and it limits you to only being allowed to share your music on up to five computers. Whether or not you agree that the limits on present DRM's are liberal and fair enough for most people. The bottom line is if we live in a world where everything is protected by DRM... well... things won't be what they used to be. With DRM you never truly own what you buy. The very people you are buying the music from are telling you where you can play it and how you can use it. Well that's not quite the same as just buying a normal CD and copying it, ripping it, and basically doing whatever you want with it right? So why pay for protected content instead of open normal content?

Well fortunately, believe it or not, Steve Jobs and Apple are on our side after all. Even though they are one of the major driving forces bringing DRM into many of our lives with the iTunes music store, Steve Jobs doesn't believe it has to be like that. Nor does he think it should be like that. In his letter to the industry, Steve Jobs basically stated record labels are hurting themselves and the online music industry by not agreeing to sell unprotected content. In other words, Apple wants to ditch DRM. They just can't because the record labels won't let them.

And that leads up to this week's great news about DRM free music on iTunes courtesy of EMI. EMI is the first of hopefully many labels to agree to sell their music on iTunes without DRM. Normally, a song on iTunes is encrypted in AAC at 128kbps. If you don't know what that means just think of it as medium quality music in terms of the sound quality not the content! These protected songs cost you the consumer $0.99 each. Alternatively you can choose to purchase the new DRM free songs on iTunes for $1.29 each, these unprotected songs are encrypted in AAC at 256kbps. This means you not only pay a little more to have unprotected music but also music that has much better sound quality and clarity. It's a great deal and great news for all of us in the consumer world.

For more information on this check out the extensive coverage MacRumors had during the live press event about the agreement:
http://www.macrumors.com/emi-apple-press-conference-coverage/

Burger King Is Becoming a Leader in Animal Welfare.

Outside of health reasons one of the major things that drives me to eat less meat is the fact that we all consume so much of it that the production of life for death for meals has become so industrialized that we forget those char broiled patties are living things with feelings just like you and I. Burger King used to get a LOT of grief from PETA with their Murder King campaign. But if you look now you'll see a different story. Back in 2001 the good ol' corporate stiffs in the BK Lounge thought it might be a good idea to agree that current conditions are cruel and figure out something they could do about it. Ever since then they have been working with Peta and recently it was announced that PETA is actually Praising Burger King!

So if you are an animal rights activist, or just feel some guilt with every delicious morsel of meat you eat, or... just like Burger King you can now eat there and feel as if you are eating an animal that was treated somewhat fairly. I'm sure things still have quite a way to come from the present. But it's great news to hear that PETA is applauding Burger King and stating that the company is now an industry leader in animal rights practices.

Again a link to the recent PETA article can be found here on MSNBC:
http://www.msnbc.msn.com/id/17844064/

I'm happy to hear things are starting to head in a better direction this year.

Facing Reality, Cleaning Out, and the Horribleness of Marketing.

2007-03-30T00:00:00-07:00

Dealing with indecisiveness has been one of the greatest challenges in my life. For the past year or so I've been saying I would rebuild this site as my own custom piece of software. I like to do things, especially things I understand, my own way. But what's the point? The tool I'm using right now is fine. Probably one of the best there is for this sort of thing. So instead of rejecting the good in WordPress I'm just going to embrace it and stick with it. It's time to get with it as opposed to always dreaming the grass is greener.

There are a few things I've learned from building and running my two blogs for the past three years. One, features our frivolous and purpose is key. Two, I finally got off my bum and set up Akismet as I have been told many times by my friends. Over the past four months alone I have gotten more sexual invitations, and advice on boner pills than I care to share with you. Not to mention, the deceptive hollow compliments from pro-spammers trying to seek my approval of their comments. I tell you I have had to put up with more suck-ups in the six months than Tony Soprano has had to deal with in all seven seasons of the Sopranos combined.

Lessons aside the thought of this writing is the terror of the reality that is marketing. Blogging and social software in general is a tool so people can interact with people in a meaningful way. It allows us to take advantage of a medium to connect to one another in ways we otherwise just could not. But in the present day, people such as my self, who set to share and discuss our thoughts, feelings, opinions, and intellect (intellect is often lacking) are forced to monitor for spam and install plug-ins and become part of a world wide collaborative software network to prevent it further and... it's just exhausting and disturbing.

I dislike this abuse. This abuse has destroyed email. This abuse can destroy any form of communication if we let it get out of hand. This abuse is what makes marketing feel and seem terrible. What is acceptable and what is not? If only all of us could maintain a higher awareness of the affect some of these things we may do have on others.

Oh yeah.. I almost forgot DontTrustThisGuy.com redesign coming soon. Until then no design at all. Just the plain vanilla with peppermint flavor crystals style of the wordpress' modern default theme.

Ruby: Tax Estimator

2007-01-04T00:00:00-07:00

I got bored a couple of weeks ago and wanted to figure out how much I'd be paying in taxes depending on how much I made. I wrote this little script in Ruby to give me a basic estimate of how much I'd owe. You can use it at your own risk or make it better and share it with me!

Here is the source:

# --------------------------------------------------------------------
# Amounts to analyze taxes for.
# --------------------------------------------------------------------
amounts = [40000, 50000, 60000]
pto = 80 # Specify amount of hours as integer

# --------------------------------------------------------------------
# Tax schedule for 2006 supplied by IRS
# (http://www.irs.gov/formspubs/article/0,,id=150856,00.html)
#
# Arizona tax information obtained from
# (http://dab.nfc.usda.gov/pubs/docs/taxformulas/formulas/statecitycounty/taxaz/taxaz.html)
# --------------------------------------------------------------------
tax_rates = [0.1, 0.15, 0.25, 0.28, 0.33, 0.35]
cutoff_levels = [0, 7550, 30650, 74200, 154800, 336550]
pre_tax_balances = [0, 755, 4220, 15107.5, 37675.5, 97653]
az_tax_rates = [0.1,0.19]
az_cutoff = 10000
work_hours = 52*40-pto

# --------------------------------------------------------------------
# Extend the numeric clas to accomodate formatting.
# --------------------------------------------------------------------
class Numeric
  def to_currency
    sprintf("$%0.2f", self)
  end

  def to_percent
    sprintf("%d%", self*100)
  end
end

# --------------------------------------------------------------------
# Calculate the amounts.
# --------------------------------------------------------------------
for amount in amounts

  # Determine the federal witholding bracket
  index = 0
  for cutoff in cutoff_levels
    if amount > cutoff then bracket = index end
    index += 1
  end

  # Determine the state tax withholding percentage
  (amount < az_cutoff) ? az_index = 0 : az_index = 1

  # Calculate withholding amounts and remaining income
  tax = (amount-cutoff_levels[bracket])*tax_rates[bracket] + pre_tax_balances[bracket]
  az_tax = tax * az_tax_rates[az_index]
  income = amount - tax - az_tax

  # Print out the results
  puts "---------------------------------------------------------------"
  puts "Income Analyses for #{amount.to_currency} w/ #{pto} hours of paid time off "
  puts "---------------------------------------------------------------"
  puts "This level of income would put you in the level #{bracket+1} tax bracket which charges #{tax_rates[bracket].to_percent}."
  puts "In addition this income qualifies for the #{az_tax_rates[az_index]} state income tax level."
  puts "Total income: #{income.to_currency} after #{tax.to_currency} in federal tax expenses and #{az_tax.to_currency} in state tax expenses.."
  puts "------------------------------\nPost Tax Income\n------------------------------"
  puts "Monthly income: #{(income/12).to_currency}"
  puts "Bi-Weekly income: #{(income/24).to_currency}"
  puts "------------------------------\nHourly Income\n------------------------------"
  puts "You are going to work #{work_hours} hours this year."
  puts "That will make up #{(work_hours.to_f/(365*12)).to_percent} percent of your active time."
  puts "Before tax your hourly income is #{(amount / work_hours).to_currency} taking paid time off into account."
  puts "After tax your hourly income is #{(income / work_hours).to_currency} taking paid time off into account."
  puts "\n\n"

end

Why are we all selling out?

2006-11-17T00:00:00-07:00

I recently came accross a this great little note on Signals vs. Noise about dropping out. The article summarizes three different stories where professionals in various careers simply dropped out to lead a less complicated life. The stories spoke bounds to me. I can't express enough how much I question what it is I do and why. I look around me and wonder the same about others sometimes. So many of us aren't doing what we want. There tends to be a lot of focus on getting by and making more. Often it won't be out of the norm for me to hear one of my friends say, "I want to be making X amount of dollars by the time im X years old."

Why? Why so focused on money? Who gives a shit really. Why not say things you'd like to be doing in the future. Why don't we set more passionate goals than financial goals. Finance in general is just a shallow cold boring and crude aspect of life. Money is a means to an end at times but it never is that 'end' you are so desparately looking for. If you've ever watched television shows such as the Sopranos or Nip/Tuck you can see a fictitious example of people who seem to have it all but lead remarkably unhappy lives. It is my belief that money is nothing more than a tool. A tool that will get you straight to nowhere, no matter how much you have, if you are not pursuing the things that truly matter to you.

It is just merely a matter of your perception really. Who is the more ambitious of the two? Is it the poor cabbie who simply drives around the same streets, reflects on his life, has time to see his family, and leads a simple yet enrichening life? Or is it the professional athlete under constant demand for physical performances and social appearances, driving an expensive luxury car, wearing some of the finest clothing, rolling around with more money than they know what do with? I leave it up to you to decide. Maybe you'll have to find your way to the top to find out it might not be what you wanted afterall. Heck even I don't really know, but I do think about these things if you can't tell.

Don't Play To Win.

2006-11-07T00:00:00-07:00

Tomorrow morning I will be waking up early to head out to the polls and put in my two cents on how I think things ought to be as I see it. After all it is my right. Personally, I haven't been very unhappy with the way things have been going. Since Bush was re-elected I became totally disillusioned in our society as a whole, not because he is a republican but because of what he has done.

Often, I wonder why the majority of us can just sit back and support the leadership that has driven us into the disastrous situation we are in today. What is it that people care about? Obviously, some things must matter more to many of us than the loss of life, which has all happened for no legitimate cause or reason in Iraq. Is it preventing the gays from getting married? Is it to keep taxes low? Is it about shutting down abortion clinics? Is it to support campaign issues tied to religious values? I would like to think all of us went out to vote to protect our rights. I would hope we all took the big picture into consideration and looked at where the world is going and what we can do on an individual basis to improve it. But is that too much to ask for?

Many of my peers today seem focused on working, earning, and prospering. Money and material possessions are a key motivation amongst many. This is the result of the capitalistic society we have been born into in this country. I appreciate it in many ways but I also am disgusted by it at the same time. I think pure capitalism is inhumane. Think about companies like Wal-Mart that have become a prime example of capitalistic thinking in full strength. Making money is important, but the more you take the less everyone else gets. Where do you draw the line? When does it become inhumane to to earn that additional buck or two? What's the human cost doing so? What's the worldly cost of doing so?

I guess what I'm trying to say is that by our methodology we subscribe to a more cold approach to life in general. We THINK we want a world where people tell us all of the chips are in place for us to be successful. If we push harder than the rest we'll get what others could not in life. But I don't think we have to live in a dog eat dog world where we let healthcare run out of control and let the less fortunate sit on the street. Many citizens simply 'play the game'. Work to spend. Work to spend. Work to spend. While my thoughts have been unclear throughout this particular writing; the main principle I had in mind while writing it was this: When you think about what you want to do, when you think about where you want to see the world headed, when you think about the changes we can make in our society... do not be influenced by the popular motto 'Play to win.' Instead.. play to improve, but above all, play to give. Learn from the wealthiest people in our society. Remember if you are fortunate enough to earn a great amount of money you have a gift many don't. Be sure to take care of those who need it most. With that mind set I think we all may make clearer decisions that have more value than purely that of short-sighted self interests.

Blogging Software

2006-09-17T00:00:00-07:00

I am growing very VERY VERY tired of wordpress comment spam! Becuase it's so standardized and widespread it's an open target to these attacks. Here's an analogy.. using wordpress instead of a homebaked or less popular blogging system is like using a PC instead of a mac when it comes to viruses! Geez. Oh well this is not meant to be a rant, rather I want suggestions. What do you guys suggest I switch to?

Presently, I'm considering Mephisto. I don't like wordpress becuase I think it's too feature rich andheavy weight. I want something lightweight that's easy for me to hack into and add my own code on. I truly dislike the notion of upgrading. Once I setup a blog the code is hacked apart by myself so much that upgrading just isn't an option. So what are your thoughts? What do you recommend? Should I just build my own blogging software? Should I try out Mephisto? Are there any other decent CMS systems that are preferabbly Rails based?

Ruby: Working with files and directories.

2006-09-02T00:00:00-07:00

I wrote this snippet today to cycle through the present working directory and do some cleaning up so to speak. We got a ton of images from one of our clients and they all need to be setup as galleries for slideshow pro in flash. So I needed a few things to be done.. first of all the images were all conveniently placed in their own directories for each album, however, the thumbnails were stored together with the large photo files so I needed to separate them from each other. I wrote this snippet... my first time writing a ruby script to do some nifty stuff with directories and files quickly. This will actually rename all of the directories to be more web friendly i.e. 'Bay Area' becomes 'bay_area' etc. etc. and then it will rename all of the images uniformly but place thumbnails in a tn subdirectory and large images in an lg subdirectory. Finally, it also generates a SSP friendly XML doc for each directory.

# Gallery creator..
# This ruby file should be placed into the working directory
# containing all of the directories you wish to be converted
# into galleries.

# USER DEFINED SETTINGS
# ----------------------------

# ignore:
# Array of directories you wish to ignore.. i.e. parent, and current.
ignore = ['.','..']

# large_id:
# A string used to identify images to be moved into the large directory.
large_id = "555"

# small_id:
# A string used to identify images to be moved into the thumbnail directory.
small_id = "72"

# SCRIPT BEGINS:
# Don't change unless you really want to.
# ----------------------------

# Initialize directory object...
directory = Dir.new(Dir.pwd)

# Cycle through directory
directory.each do |d| 

  # Only go through directories and ignore directories specified by user.
  unless File.ftype(d) != "directory" or ignore.include?(d)

    # Jump into directory and parse files.
    Dir.chdir(d)
    Dir.foreach(Dir.pwd) do |f|

      # Create directories for thumbnails or large images.
      %w(tn lg).each do |newdir|
        unless File.exists?(newdir)
          Dir.mkdir(newdir)
        end
      end  

      # Cycle through files.
      unless File.ftype(f) != "file"

        # Create new file name and set target directory.
        if f =~ /#{large_id}/
          newname = f.split(large_id.to_s).each{|i| i.downcase!}.join("")
          newdir = "lg"
        elsif f =~ /#{small_id}/
          newname = f.split(small_id.to_s).each{|i| i.downcase!}.join("")
          newdir = "tn"
        else
          newdir = nil
        end

        # Open the old file...
        oldfile = File.new(f)

        # Jump to large directory if possible.
        unless newdir.nil?
          Dir.chdir(newdir)

          # Write new file if it doesn't exist.
          unless File.exists?(newname)
            File.open(newname,"w+") do |n|
              n.write(oldfile.read)
            end
          end

          # Move back and delete the old file.
          Dir.chdir("../")
          File.delete(f)
        end

        # Log event.
        puts "Renamed: #{f} to #{newname} moved to '#{newdir}'"

      end
    end

    # Return to parent
    Dir.chdir("../")

    # Rename to web friendly urls.
    newdir = d.split(" ").each{|i| i.downcase!}.join("_")
    File.rename(d,newdir)

    # Build the XML docs.
    xml = "< ?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\n\n"

    dir_for_xml = Dir.new("#{newdir}/lg/")
    dir_for_xml.each do |filename|
      unless ignore.include?(filename) then xml += "  \n" end
    end

    xml += "\n"

    File.open("#{newdir}.xml","w") do |n|
      n.write(xml)
    end

  end
end

In my case it's important to note that the files were grouped together with names like: 'torrey-ridge555_1.jpg' and 'torrey-ridge72_1.jpg'. Detecting the '555' or '72' safely solved the problem in my case ofcourse there could be some situations where something this easy could backfire. To make the file names uniform I simply split the file by the identifier and joined it back together.

Rails: What's the best way to handle my lists?

2006-08-24T00:00:00-07:00

Ok so I'm having a slight problem building my CMS for a client. I want to utilize the same model to handle the photos for their case studies as well as their services. Each has their own model. So the Photo model belongs to a Project or a Service. But in reality it belongs to a project OR a service. Thus I have a problem using acts_as_list.

class Photo < ActiveRecord::Base
  belongs_to :service
  belongs_to :project

  acts_as_taggable
  acts_as_list :scope => :project_id

  file_column :image, :magick => { :versions => { "thumb" => "50x50", "medium" => "640x480>" } }
end

If I could do something like:

acts_as_list :scope => :project_id || :service_id

Then this would be a piece of cake but it's not that easy. How would you solve this? I know it's not that challenging.

I need help.. seriously. Designers? Programmers?

2006-08-20T00:00:00-07:00

My little company Sumo Creations is in need of massive help I've got several commitments on my plate and a biggie next month! Right now I'm literally a one man show I can't keep it up I wish I could or else I'd be rich. I'm focused on building a simple company that produces high quality results however with that being said let me explain my offer.

What I'm looking for...

I'm not looking for a lot of people just a handful of skilled individuals. Here are the ingredients to my cookbook:

CSS/XHTML Guru

Much of my work always requires this. I'm very good at CSS/XHTML so I have high expectations here. If you're comfortable converting PSD's to CSS templates let's talk.

An Edgy and Skilled Designer that's got a Edge!

I don't care how glossy or web 2.0 you can make a page look. I care about how usable it is and functional it is. I'm looking for someone who has a good eye for font, placement, and structure. You should have a good eye for detail. If you are interested reply to this post via comment.

Ruby Developer (Rails Specific)

I'm looking for a quality rails developer. If you love ruby and you can fly on rails I just need to see a couple of snippets and may ask you for a work sample.

Compensation

I honestly dislike people asking me what my rate is as a designer/developer. I understand as a freelancer you typically make more money on a project per project basis where I can know clear in advance I can a lot this much to an individual to perform a given task. This often works out in the contractors favor where I might offer to pay you $550 to do a PSD/XHTLM conversion that might take you 8-10 hours as opposed to me paying you $40/hr. If you do prefer hourly don't bother submitting bids. I have predefined rates for you if you are interested let me know:

CSS/XHTML Guru: $35/hr
Web Designer: $40/hr
Ruby Developer: $45/hr

Contractors Only

I'm not at the point yet where I'm ready to take on full on employees.. I need to restructure my tax status from an LLC/SP to an LLC/S-Corp so until then I'm only hiring out via W-9 but you will be well compensated just be sure you save a good amount to cover your self-employment tax.

Telecommuting is totally cool!

I don't need to meet you in person. I got my first job as a Flash designer when I was only 15 working for a company in Texas while I lived in Arizona. My only communication to the company was over the phone! You are welcome to meet me in person anytime though!

All in all.

I'm really pleased business is going well for my company. All of my work has been through word of mouth and personal selling. I have always been so busy I never even had time to build the site for Sumo itself but if I have a few good people this won't be a problem and I expect business to boom even more once our site is launched and after I wrap up my projects for this next month.

I've been doing this work for a LONNNGG Time. I expect quality! Show me you know your stuff. I might request a short work sample to see how you tackle a task. If you are interested just drop a comment, express your interest, share any links, and include your email address. I'll get in touch.

Design Study: A Different Approach to E-Commerce

2006-08-12T00:00:00-07:00

Recently, I worked on a design to revamp the online retailer Group Mobile. I've never actually designed an e-commerce site before and overall I have discovered that I find the majority of e-commerce web sites to be lacking in innovation when it comes to design. It's all the same thing again and again. Typical uninspired page designs utilizing big menus for every single product category offered by the retailer each with hidden dropdown menus containing a list of equally long options. I just don't see it as an effective solution for browsing. Think about it when you goto these large e-tailer websites do you typically browse through them or do you just find a link directly to the product via a search on a site like pricegrabber.com?

The fact of the matter is that these sites may be accessible from the perspective that there are no broken links. This means every page is connected in someway so a bot could successfully browse through and index every product on the site. And hopefully all of the product information on the website is up to date. But at the end of the day it seems that the act of browsing through these large e-commerce sites was never a major consideration in the design. If you're going to search you'd better know what you want and type in a direct product search. Wandering through an e-commerce site like these is often a difficult, boring, and almost meaningless experience.

A Shopping Consideration

When I started brainstorming a design for Group Mobile I thought about what you might do when you shop for a computer in a store. There are normally two possible situations that typically occur:

You know what you want and are just trying to find it.
You have a vague idea of what you are looking for and are hoping to find items that might catch you're eye.

Half and Half Design

So with that being said I wanted the site to be easy to navigate manually but also have search accessibility. My approach for the design was to cater to both. One half of the page contains a search bar at the top of the page as well as the bottom. This side also provides customers with content such as the product information for the current product you are browsing etc. etc. Basically the right hand side of the page is the meat, it's what you found, it's what you are looking for.

The left hand side of the page however is a bit different than most. I've dedicated nearly an entire half of the page to browsing the store. If you click one one of the major product categories you get taken to a list page. But not only does the menu button of the category you're browsing get highlighted as the present category; you also get a micro list of all of the products for that category which would have the current product you're browsing highlighted as well. The idea here is that now when you shop you see every similar competitive product offering to the product you are considering along with it's price and photo.

The goal is to expose users to all product offerings rather than hiding them behind a meaningless list of names which may even be hidden behind a drop down menu. Now without any extra clicks or steps I can see the alternative products and how much they all cost in a fraction of the page. Of course there are some disadvantages to this approach. If you have an abundance of products this micro-list would be overwhelming and take up the entire side bar. Likewise, if you have an abundance of categories it could get cumbersome to have a vertical menu that is so long. So these are considerations you would have to make when designing your navigation for an e-commerce site. For Group Mobile I feel this style works because there will only be 6 major product categories (right now I only have three in the mockup) and not more than 10 products to a given category at most.

Dual Navigation

While you saw the actual shopping navigation was located on the left hand side of the page in a vertical menu. There is also a separate nav on the top right hand side of the page dedicated to additional information related to Group Mobile the company as well as additional product information such as industry news, product FAQs, and general tools to help you become a better shopper. These services offered by the site are some of which help it differentiate itself from basic e-commerce sites which simply show you the product but don't explain much about what to look for in the products themselves. These value added services should not be hidden from the customer so we provide as clear, distinct, secondary navigation to expose customers to them as well.

Exposing Information

Ultimately, the thought process behind this layout was to expose the user to as much as possible while not getting too cluttered. I'm not sure if I completely achieved this goal so I'm interested in hearing what your thoughts are. Do you think it's overwhelming? Do you think it's clear? Would you be thrown off by the fact that there are two separate navigation elements on every page? Let me know what you think I'm interested in getting as much feedback on this design as possible.

For Sale: Porsche 944 asking $2995!

2006-07-23T00:00:00-07:00

Well it's time. I finally will be buying a car that is not a Porsche 944! These cars are great fun as I have owned two since the inception of my driving career. This exact vehicle I have owned for the last four years and have used as a daily driver. The surprising thing about these little cars is that they just keep running strong if you put in the time to keep them running. The only bad part about this particular vehicle is that the air conditioning is out of service. And I've had more than my fair share of the heat this summer so I feel it is time for me to part ways and move on. If you are in interested check out my ad on Craigslist.

Why am I selling?

It's time for me to move on. This car is great fun but it's not really practical. I've been having to drive more and more now and I just need something a little bigger with more space for passengers. It's hard for me to part with this car. I've spent a lot of time with it!

What does it have?

It's a 1984 with Black paint and Black Leather interior. It has the highly desirable and rear black Fuchs rims which Porsche produced in the 1980's. The interior has the optional wrap around leather sport seats which if I recall were made by recaro for Porsche. The windows, mirrors, and sunroof are power. It's a 5 speed manual transmission. There are only 40,000 miles on the current clutch. All in all it's a lot of car for under $3,000. The car has 206,000 miles on it now.

I'm asking $2995.

As I said I'm ready to part with it. Here's a clean, working Porsche for the same cost as a MacBook Pro. For more info see the add on Craigslist.

Creating Excel Documents with Ruby On Rails

2006-07-13T00:00:00-07:00

Generating an excel document is not so difficult to achieve but limited unfortunately. You cannot write formulas or generate charts via the existing available tools but you can achieve usable results overall. Here is a snippet I used to generate sales forecasts involving data pulled together from two active record objects. Here is the gem you'll need.

Update: the link I was posting to prior points to a new Ruby project. The correct link can be found here.

  # Builds an excel report.
  def report
    # Grab time span for report
    get_span

    # Define stats levels to include.
    status = %w(high medium low lost won)

    # Create workbook.
    file = "#{session[:user_id]}_#{Time.now.strftime("%m%d%G%s")}_forecast.xls"
    workbook = Excel.new("#{RAILS_ROOT}/reports/#{file}")

    heading = Format.new(
       :color     => "green",
       :bold      => true,
       :underline => true
    )

    data = Format.new(
       :color     => "black",
       :bold      => false,
       :underline => false
    )

    workbook.add_format(heading)
    workbook.add_format(data)

    # Cycle through each status level
    status.each do |status|
      start_column, start_row = 2, 3
      worksheet = workbook.add_worksheet(status)
      opportunities = get_opportunities_that_are(status)

      #Cycle through the opportunities
      row = start_row
      totals, dates = [], []

      for opp in opportunities
        worksheet.write(row,start_column,opp.client,heading)

        column = start_column + 1
        opp.find_forecasts_within(@span[0],@span[-1]).each do |i|
          worksheet.write(row,column,i.volume,data)
          totals[column] = i.volume + totals[column].to_i
          dates[column] = i.date.strftime("%b '%y")
          column += 1
        end    

        row += 1
      end

      # Generate the totals row and monthly headings
      column = start_column+1
      @span.length.times do
        worksheet.write(row,column,totals[column],heading)
        worksheet.write(start_row-1,column,dates[column],heading)
        column += 1
      end

    end

    workbook.close
    redirect_to :action => 'show'
  end

SEO'd Baby!

2006-06-19T00:00:00-07:00

I was just browsing around and noticed I finally come up first and fourth for my own name on Google! Now I have some SEO results actally worth bragging about right?Â I mean it's gotta be a popular search term. On another note I have totally discredited my name to the world. I doubt the sarcasm initially registers as well.. sarcasm across Google. What do you think? Now I just need to claim Jimmy Jeffers and James Jeffers. Then I'll have all bases covered.
[ Check out my search results ]

Improve a Snippet: Make a better search function.

2006-05-07T00:00:00-07:00

UPDATED: May 16th - I coded this search app a while back. It's not the greatest but it works. Can you make it better? Right now it just takes a field and a phrase. The phrase is parsed. It then generates SQL. You could write a separate parsing function separately which could return the array that feeds this function. You could also rewrite this function to support an array of fields. Take your best stab. I'll post the final snippet with everyone's input.

  # Advanced search function accepts a string split apart by whitespace.  Accepts a field name
  # and a phrase.  Splits the phrase by whitespace into separate terms.  If the string is quoted
  # the terms are considered to be required together.  If not terms are assumed to be either or.
  # This code is far from perfect please feel free to improve it to support , deliminations and
  # what not.
  # Snippet written by J. Jeffers. Copyright 2006 / I share freely.
  def advanced_search(fields,phrases)

    # Check to see if what type of search is required.  If the phrase is "quoted" we will
    # use AND to require all terms.  Otherwise, we will use OR to find any matches.
    if phrases =~ /"[^"\r\n]*"/
      glue = ' AND '
    else
      glue = ' OR '
    end

    # Break the list down from a string into a smart array of useable terms.
    list = clean_up(phrases).split(/\s/)

    discreet_list = []
    results = []
    count = 0
    discreet_count = 0

    # Cycle through every item in the list.
    for item in list   

      # Check to see if the phrase begins with a !exclamation point.  If so we will negate
      # this term to find terms that do not match
      if item =~ /!\w*/

          item.gsub!(/!/,'')

          if item =~ /BLANK/
            fields.each do |field|
              results[count] = "#{field} != ''"
              count += 1
            end
          else
            fields.each do |field|
              results[count] = "#{field} NOT LIKE '#{item}'"
              count += 1
            end
          end

      # Check for wildcards in the phrase...
      elsif item =~ /!%\w*|\w*%/
          fields.each do |field|
            results[count] = "#{field} LIKE '#{item.to_s}'"
            count += 1
          end

      # Check for a plain blank request...
      elsif item =~ /BLANK/
          discreet_list[discreet_count] = ''
          discreet_count += 1

      # Otherwise just dump the list into an array of absolute matches...
      else
          discreet_list[discreet_count] = item.to_s
          discreet_count += 1
      end

    end

    # Compile the discreet list...
    (discreet_list.length > 1) ? list = discreet_list.join("','") : list = discreet_list.to_s
    unless list.length < 1
      fields.each do |field|
        results[count] = "#{field} IN ('#{list}')"
        count += 1
      end
    end

    # Compile the final SQL string...
    return results.join(glue).to_s

  end

Asian Persuasion

2006-05-02T00:00:00-07:00

I was reading the latest issue of Marketing News journal yesterday and found an interesting article about Boba cafes. It appears to be a great opportunity as the Boba craze that hit Asia in the 90's is relatively young out here in the US. Only in the past year or so have we seen Boba shops popping up and the drink becoming more mainstream here. This opens up two big oppourtunities...

A chance to become the dominant player.

For one, you can't really compete with companies the likes of Starbucks. On the other hand there is no dominate franchised Boba shop that's really settled into the US market. This is a great opportunity to build a strong brand around a new emerging product in the US. Hmmmmm.

Market towards the Asian youth.

According to marketing news the Asian youth market has been the hardest for researchers to establish a method for attracting a strong connection with. Boba cafe's are the first major venue that specifically attracts this demographic. It's significant because there is a tendency in Asian families to rely on the youth as the ambassadors to the family. Often it is the son or daughter who informs the parent of which cellphone to buy, what technology is hot, etc. Or at least that's what Marketing News says. Marketers are dying to reach this demographic.

Any way, just some food for thought. Anyone want to open up a boba-bucks with me?

The Curious Shall Inherent the Earth.

2006-03-14T00:00:00-07:00

I really enjoyed the speech Jim Coudal gave along side Jason Fried of 37Signals at SXSW Interactive this year. Jim commented on the shift the creative community is taking. In the past the focus of our community has been to create and adopt standards. We needed to determine the best practices so we could perfect our craft. But now that all has been done. It's always developing but for the most part we've accomplished a level of standards that allow us to apply our craft effectively.

What's happening now is really exciting, creatives are realizing that after doing all of these per diem jobs we've gained enough experience and business knowledge to bypass the client completely and launch our own businesses. Entrepreneurship is the new focus of the creative community and that is a really exciting thing. Especially considering what's already been done. Just look at flickr, del.icio.us, BaseCamp, Campaign Monitor, or BlinkSale.

The fact is it takes very little to start these types of business if you are the master of the craft. Marketing materials, identity design, and web development are EXPENSIVE. It's a fact. If you are the resource that creates the external face of the company as well as the core product and functionality (in terms of a web based company and or service) you can create companies with almost no budget whatsoever. It's really an exciting time. A lot of people are trying it out. Many of them will be unsuccessful. That's how all business is. The sharpest minds in the industry will win; those who are curious shall inherent the Earth.

Listen to the Podcast from Jim and Jason at SXSW to gain some wisdom.

Add this to my list of movies to see.

2006-02-11T00:00:00-07:00

Why We Fight is a detailed documentary looking at our country and the war machine it has become.

I'm on Rails: Coding Statistics.

2006-02-05T00:00:00-07:00

I recently coded a basic statistics application for a client that offers a website affiliate program. I thought it might be worth sharing how easy it is to code this type of software in Rails. Keep in mind this is extremely basic but never the less a good illustration of how to tackle a cumbersome project relatively easily.

Decide what to track.

For this client all we needed to track were the number of actual page impressions, the amount of clicks, and the actual amount of unique visitors going to a specific users account.

Playing Big Brother.

Watching visitor activity and logging it is easy. I created a model for hits, clicks, and visits. There is a parent model to all of these called 'User'. So here's how I broke down the relationships:

Hits belong to users.
Visits belong to users.
Clicks belong to both users and visitors.

Below is the code that logs the click through information and sends the user off on their happy way. It basically takes an id and a path so a typical link would look like: http://www.domain.com/send_to/id/encoded_url_path_to_redirect_to

  def send_to

    if @user = User.find(:first, :conditions => ["name=?",@params[:id].to_s.upcase])

      # Get parameter info...
      url = params[:path].to_s
      ip = request.remote_ip

      # Log the click information.
      click = Click.new
      click.url = url
      @user.clicks < < click

      # Log the visitor information.
      visitor = Visitor.create_if_new_today(ip,@user.id)
      visitor.clicks < < click

      # Log the hit.
      hit = Hit.new
      @user.hits < < hit

      if @user.save
        redirect_to url
      end

    end

It should be worth noting that I've decided to track where every click is redirecting too. I've also decided to track every click as a hit for the user as well as technically it is an impression. Logging unique visitor information as well as the page impression itself (the hit) is easy too as seen below.

  def index

    if params[:id] == 'nonexistent'
      params[:id] = 'admin'
    end

    if @user = User.find(:first, :conditions => ["name=?",params[:id].to_s.upcase])
      # Log the hit.
      hit = Hit.new
      @user.hits < < hit

      # Log the visitor information.
      ip = request.remote_ip
      visitor = Visitor.create_if_new_today(ip,@user.id)
      @user.visitors < < visitor

      @time = Time.now
      @user_id = params[:id].to_s.upcase

  	else
  	  redirect_to(:controller => 'show', :id =>'nonexistent')
  	end

  end

Grabbing the stats.

Once you've logged the stats pulling them via rails is a piece of cake. I wrote a protected function inside of my report controller to pull the hits, clicks, and visits for a specific time length and return them in a hash.

  # Display user stats.
  def report
    @time = Time.now
    @user = User.find(session[:user_id])
    @todays = stats(@user,1.days.ago)
    @last_weeks = stats(@user,1.weeks.ago)
    @last_months = stats(@user,4.weeks.ago)
    @records = transactions
  end

  protected

  # Generates a hash containing hits, visitors, and clicks from the past.
  def stats(user,time)
    clicks = user.clicks.find(:all, :conditions => ["created_on > ?", time])
    hits = user.hits.find(:all, :conditions => ["created_on > ?", time])
    visitors = user.visitors.find(:all, :conditions => ["created_on > ?", time])
    return { :hits => hits, :visitors => visitors, :clicks => clicks }
  end

For once we can agree on something.

2006-01-31T00:00:00-07:00

After watching the State of the Union this evening I finally heard that bodaggit (Bush) say a few things that made sense. Here they are:

1. We need to break our dependance of oil from the middle east (and in general.)

For the longest time stupid commentators, especially the ones on FOX, use the same silly argument about spreading democracy in the middle east *by spoon-feeding it to them forcefully*. They argue it's not an immediate plan but rather one that lies ahead for some decades to come. It's a long-term initiative. But if that's the case aren't we putting our foot in our mouths by empowering the very same corrupt parties that control these people by doing business with them? Should we not break our dependance on oil and put those parties out of business relieving them of their ill-fated control? Shouldn't that be our twenty year plan instead? Thanks for finally getting one thing right Mr. President.

I'm skeptical to see how much of this plan he's setting forward isn't actually just fluff and will eventually come to fruition.

2. We need to remain competitive and creative.

I really liked President Bush's intentions to bolster our education system to maintain our competitive edge. But what are the details behind this competitive initiative program? The intentions seem good but is it real?

3. Admitting social security is going to need to be saved.

The President made a bold statement tonight about Social Security. Once again he's being realistic and his intentions are good. But I'm skeptical to hear the actual plan he has. This is a task easier said than done. At least I realize it will be easy for me to keep a job in the future; how much I have to pay in taxes thirty years from now due to loose tax laws and an already staggering deficit awaits to be realized.

4. We have created more jobs than the EU and Japan combined.

Here is president Bush patting himself on the back crediting his tax cuts to improving unemployment. However, what are the quality of all of these new jobs? Are they good jobs? In Arizona we certainly don't have too many of those. With our wages fairly low relative to many other states but housing costs skyrocketing real estate is quickly becoming an unattainable luxury.

So it's good to see I can agree on somethings but really. Obviously, if you can't tell overall I'm not a fan of President Bush and I've written about this before. I'm looking forward to seeing FactCheck's review of the speech to see how much of the Presidents claims actually have merit.

37 Signals Getting Real Workshop Take 2

2006-01-31T00:00:00-07:00

Aw man...the second 37Signals workshop in Chicago for Getting Real has already sold out in only 19 hours... I wanted to go :(

The Ultimate Showdown.

2006-01-27T00:00:00-07:00

The Ultimate Showdown is probably one of the funniest things I've ever seen. Kudos mad props to Sunny for sharing that with me.

Dangerous Business Mistakes: Apple

2006-01-25T00:00:00-07:00

I think the biggest advantage to using Apple has always been the fact that you have the hardware and software provider united as one. It gives them the control to create a more polished experience since the software can be more specialized and tailored to the hardware it runs on. In contrast, a conventional PC can run on multiple operating systems which is problematic for two reasons: 1.) the OS developer must make his software more versatile so that it can work with most hardware 2.) the hardware manufacturer must work within the operating systems limitations to create custom UI functions that integrate with their technology innovations. This is where Apple has always had a clear advantage: If they want the hardware to interact with their software in a special way they can just expand the limitations of the operating system. To my knowledge, it is a luxury no other computer manufacturer has.

But this is also a problem. Apple has been silently testing Rossetta the new version of OSX that could run off X86 processors for years. Of course they had to be tight lipped about it because they didn't want the public to know about the possible switch; but this has come at a cost to the third party developer. The dilemma now is that major vendors such as Adobe, and even Microsoft are not prepared for the early transition to Intel. So the ETA for an Intel compatible version of Adobe CS is unknown. This holds true for pretty much all major software packages presently available on Mac.

Where does this leave you and me? Well, if you're a pro working on a Mac there is no point in upgrading yet. The software you use isn't ready yet. Sure you can run the PowerPC versions of these packages on the Intel based macs but the benefits of the additional processing power are diminished because the OS now needs to run an emulator to simulate power pc processes. It also means if you don't have a mac but wanted to make a switch you don't know what to buy. Intel macs aren't widely supported yet. Power PC macs are on the way out.. The message to the consumer is they should hold off and delay their purchase. This is just a bad business scenario. I love Apple products and I am a huge advocate of the Apple brand.

I just hope they can remedy this scenario as soon as possible.

Got respect?

2006-01-22T00:00:00-07:00

Surprisingly my site got featured on Liquid designs a site showcasing liquid layouts. Very cool especially becuase this is only the half-baked concept. Thanks guys!

The Samsung Serene: The World's most Elegant Cellphone?

2006-01-15T00:00:00-07:00

Everyone is raving about the RAZR these days. Despite the fact that the initial version was first introduced to the market over a year ago, today it is the new trendy phone. It's stylish thin design caught the attention of most cellphone geeks who paid extra to order the RAZR unlocked and become the only person they knew who had one. But it's really nothing special today. After all, I have one. I got it for free. Now everyone is starting to have one. So what's the cool new phone for 2006?

Take a close look at the Samsung Serene. This phone is unique not because Samsung builds it, but because Bang & Olufsen has designed it. If you take a look at the phone it's a completely unique design, something I would have expected to come from the lack-lusting Motorola ROKR (iPod phone). The user interface is unique in that the screen is intended to be the bottom of the phone with the keypad representing the top half. Why flip the screen? Because by placing the screen on the bottom the user no longer places his or her ear onto the screen causing it to become greasy. A significant problem I've noticed with my RAZR.

Bang and Olufsen's minimalism is present throughout the design. There is no screen on the outside, the keypad is circular like b&o remote, and the ring tones are noticeable yet unobtrusive pings which make the phone all the more elegant. The Serene's unique design comes in a small package. When the phones are closed side by side the Serene appears to be about half the size of the RAZR but not quite as thin.

Indeed it will be nice to see this phone in person. I'm doubtful this one will pick up and become mainstream like the RAZR. If it did it may be disastrous for bang and olufsen as their brand is intended to be an exclusive product only for the privileged. I don't own any b&o products, and I certainly couldn't imagine getting one for free. For more information on the serene visit: www.serenemobile.com. You can also check out the detailed review from Mobile Review.

Extra Tasty Drink Recipes

2006-01-04T00:00:00-07:00

I recently became aware of extratasty.com; a website that is basically the flickr equivalent for drink recipes. The best part about the site is how well done and professional it is. The company developing the site, skinnycorp, has done an extraordinary job illustrating how you can create an extremely valuable resource for pretty much any topic of content matter.

My favorite part about the site is the quote in the top right corner: "You're watching skinnyCorp make this site LIVE! Email us with your wtf's." That's classic.

Welcome to 2006.

2006-01-03T00:00:00-07:00

John Oxton welcomes us into 2006 with a nice picture of what we'll continue to see a lot more of in the new year. Shiny floors. I'm guilty of this as well but I'm not quite as bad. I make no mention of any beta in my ziptrac logo.

Either way I'm looking forward to more. Should be fun for a while I haven't gotten sick of it all quite yet.

This is so me... my new years resolution.

2006-01-02T00:00:00-07:00

I saw the latest cartoon posted by Sam from exploding dog on Signals vs. Noise. It's called In the future I will get things done. So true...

Considering I've been sort of in a slump the last three weeks when it comes to work this really hits me because it's what I've been saying to myself all along. Procrastination is killing my personality. My new goal for 2006 is to manage my time and money better than in 2005. Oh and no more motorcycle accidents. Let's see how long I can keep this one going.

Ruby: Extending classes and method chaining.

2005-12-31T00:00:00-07:00

Once you start fooling around with the Ruby language you really do get hooked on just how powerful it is. I was disappointed when I first found out that the String.capitalize function only formatted the very first letter of a string to a capital letter as this is undesirable when you are formatting something like a street address. Not to worry though, extending the String class is easy in ruby and writing the function to do it requires only one line of code!

class String
  def capitalize_each
    self.split(" ").each{|word| word.capitalize!}.join(" ")
  end
  def capitalize_each!
    replace capitalize_each
  end
end

puts "hello WORLD!".capitalize_each #=> "Hello World!"

s = "6825 W. GALVESTON ST."
puts s.capitalize #=> "6825 w. galveston st."
puts s.capitalize_each #=> "6825 W. Galveston St."
puts s #=> "6825 W. GALVESTON ST."

s.capitalize_each!
puts s #=> "6825 W. Galveston St."

Pretty nifty eh? If any one can show me how to rewrite the function as a destructive function please comment because I'm stumped.

Update:

Thanks to Assaf's comment I was able to write the destructive version of capitalize each.

Ruby: Creating destructive methods.

2005-12-30T00:00:00-07:00

Here's a basic example of using Ruby to create a class with destructive methods. Though this is not as practical as just typing the actual mathematic operations themselves. It does illustrate how destructive functions work and how to write them. Note the 'return self' in each of the destructive methods. This allows you to perform the method chains, without it the method returns a fixnum by default and the method chaining raises an error. If anyone knows of a DRY way to perform this let me know.

class Calculator

  def initialize(value)
    @value = value
  end

  def multiply!(value)
    @value *= value
    return self
  end

  def add!(value)
    @value += value
    return self
  end

  def clear!
    @value = 0
    return self
  end

  def calculate
    puts @value
  end

end

c = Calculator.new(10)
c.add!(2).multiply!(4).calculate #=> 48
c.clear!.add!(5).multiply!(4).calculate #=> 20

Transition to Dreamhost.

2005-12-29T00:00:00-07:00

Well now all of my current sites are hosted on Dreamhost. The only way to go from here is to get my own box later on down the road. Since I had to upload some files all over again I figured I'd install a new version of the textile 2.6 plugin that allowed support for the Geshi syntax highlighting engine. Let's do a quick test to see if it worked.

def hello

  puts "hello world"

end
3.times do hello

Update

Obviously the Geshi system is getting cleaned up by the Textile plugin. I'm still confused as to why but at this point I may just have to live without Geshi becuase I already know I can't live without Textile!

Fast CGI to be Revamped on Apache.

2005-12-28T00:00:00-07:00

Whoa! Apache decides to officially revamp Fast CGI support. Ruby on Rails is starting to influence and revive life into once dormant technologies! Sounds like mod_fcgi will be revamped as mod_proxy_fcgi.

Easy File Uploads with Ruby on Rails.

2005-12-27T00:00:00-07:00

This is nifty... check out this file_column behavior for Ruby on Rails. Wow that looks damn easy.

Site broken; me put back together soon.

2005-12-26T00:00:00-07:00

Yeah I messed things up. Now I'm too tired to finish. So much for live testing.. oh well it's a personal site I can do whatever I want.

DTTG Design in Progress.

2005-12-26T00:00:00-07:00

If you're reading this your feedback is required. I'm redesigning my blog by heavily hacking up Squible to the point I probably won't be able to upgrade past 2.5 alpha. Oh well so be it. Here's what I'm doing.

The color scheme

I'm trying a salmon (pink) and blue color scheme. I wanted to try something I wouldn't normally do and I kind of like it even though it creeps me out. Normally I'd just do black and grey so this is a refreshing change.

The header

The header of the page is designed to look like a torn up news paper an there is a live flickr feed that has been styled to resemble polaroid photos. The idea was to make the site resemble a dirty torn up unreliable newspaper to make it even less "trustworthy".

The content (style)

Overall the site is using serif fonts to resemble a newspaper rather than more screen friendly fonts such as Arial, Verdana, etc. The content is using the less is more approach. There are just some lines and slight background touches to spruce things up a little but but otherwise from that the text is text and nothing more to take your eye away from that fact.

I'm not even close to being done.

I still have to style the interior footers and comments so stay tuned but let me know if you like the direction.

Upgrade: Wordpress 2.0 (rc3)

2005-12-25T00:00:00-07:00

I lost a couple of comments today but thought I'd give my blog a Christmas present by updating to the latest build of Wordpress 2.0. Unfortunately, the upgrade script did not work as planned so I did a lazy dump, dropped all of my tables, and reinstalled wordpress from scratch. Here are a couple of key improvements I've noticed:

AJAX in the Admin

The new administrative interfaces breaks the nicely styles Tiger Style Interface plugin developed by Steve Smith. However the AJAX widgets and new stylesheet for the default worpress admin are a welcome addition.

File uploading given some detailed attention.

You can now upload files directly in the post: A nice AJAX file upload block beneath the content window allows you to manage and upload images for your post. You can even drag the image into the content window. The image management is actually incredibly robust automatically generating a thumbnail and then allowing you to delete, or browse any photos uploaded in the system during the editing process. Even cooler, clicking on a selected image brings up the option to insert it as a thumbnail that is linked or not linked to the image or the content page automatically generated for the given file. It's something you'll just have to try out for yourself but I'm very impressed with the techniques used in the administrative area of wordpress 2.0.

Squible doesn't break on WP 2.0

It looks like the install of Squible 2.5 is running without any modifications needed after upgrading to Wordpress 2.0. So there is certainly no harm in installing Wordpress 2.0, especially considering they have written documentation for upgrading your customized themes.

Wordpress the benchmark for CMS?

I think Wordpress is definitely the benchmark for how all other CSM apps will be judged. The community and features supporting the system are astounding. It should be very interesting to see how Typo developers in the Rails community as it already has an AJAX derived interface but lacks some essential file management that Wordpress 2.0 has just launched. Also the plug-ins and community for Typo still is much smaller so it's doubtful you'll find a Google-Analytics plugin for Typo the day after google announces it. Never the less slowly but surely it's getting there as well.

Blogging in Style: Beseku

2005-12-17T00:00:00-07:00

I recently stumbled across another excellent blog. In this case, it's a blogfolio, showcasing portfolio of work in a blog format, for Ben Sekulowicz-Barclay. I think Ben has don an excellent job keeping it simple and clear. I love the lime green / dark grey / white color scheme but what makes this site really interesting is the fact that there's no navigation whatsoever. No tags, no category listing, no archive lists. Just content. I really like it because his design makes it work. It only takes a few minutes to realize how easy it is to find anything on his site.

Check it out: Beseku

myGoogle?

2005-12-14T00:00:00-07:00

Google is everywhere these days so changing their homepage might not be as big of a deal as it sounds. After all, when is the last time you actually went to Google without already typing in your search phrase via another web form or tool?

Maybe that's why Google has modified the extremely minimal interface that made them stand out from Yahoo and Altavista. Google initially attracted people because it was so straight forward. It was clear, simple, and concise. Unlike Yahoo where users would go and become bombarded by all sorts of news, and other various resources; Google only had a search field and a logo. The choice to users was clear. If I need to search I can use Google. Yahoo in contrast does everything.

Although there were many other factors that later contributed to it's success, the minimalist interface was the key distinguishing characteristic that set Google apart. Changing this interface is a dramatic move by Google. Of course, they've done it somewhat discreetly. They initially announced that you could customize your Google homepage but didn't change it on you. Now however, they have taken the liberty to already add a handful of modules to your homepage for you.

AJAX takes over.

When you look at how Google has executed the homepage modules you might think they've done it quite well. From a developers perspective it's pretty nifty. You can drag and drop modules reorganizing them however you want very easily. You can also add modules with a slide menu that comes in to the left of your screen. But is it really something people will use?

The verdict?

I'm still not sure if this a good idea. As I prefer Google becuase of it's simplicity; the thought of transforming Google into another Yahoo seems a little disconcerting. I'm almost more comfortable removing all of the modules from my Google homepage than keeping them on there. After all, the modules are a bunch of tools that I already have elsewhere so I'll probably never use any of the modules. My apple dashboard gives me weather and newsupdates faster, and I can use del.icio.us for all of my online bookmarks. What's your take on the whole thing?

Ruby On Rails 1.0 Is Here!

2005-12-13T00:00:00-07:00

Today Ruby on Rails 1.0 was finally released. There were two final release candidates that popped up over the last two weeks so I'm not surprised to see it here today. But what is surprising is the entire redesign of the Rails website. Check out David's post to learn more about 1.0!

If you're interested in starting up a Rails application of your own I recommend looking into grabbing an account at Site5, DreamHost, or TextDrive as they all offer stable shared hosting environments for Rails and should be upgrading their servers to 1.0 in the next couple of days if they haven't already!

Blogging in Style: Ordered List

2005-12-13T00:00:00-07:00

I'm going to be working on re-theming this blog shortly so I'm looking for some good inspiration. If I find anything I like I'll be sure to share it with you along with my two cents. So with that here's my first go: Ordered List This is the blog of Steve Smith who created the awesome WP-Tiger-Admin plugin. His old blog was pretty slick but this new redesign really sets his apart. I like the large font and simplistic layout; it makes the site very easy and enjoyable to read. I totally dig it.

Hello world!

2005-12-12T00:00:00-07:00

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!