The Last 10 Months


After starting in my current role, I quickly found myself quite busy. The last 10 months have been an incredible period of growth as a developer for me. To give you an idea, here is a list of the frameworks and technologies I have had the pleasure to work with and learn. d3dcmean

  • D3.js – D3 is an amazing library for managing and creating html and svg visualizations that are data-driven. The API is extremely deep with a steep learning curve. I found some of the conventions to be different. However, once I was comfortable with how data was bound to elements and the common conventions used to manipulate the DOM using the bound data, I was able to pick up new parts of the API easily. Also, there is an amazing community and an incredible amount of resources available to help you along.
  • Crossfilter – I love this little library. It may be small, but it provides an incredible bit of functionality. With Crossfilter, you can create dimensions in your data and apply filters to each dimension. The resulting data in each dimension only includes the data that satisfies the filters applied to the other dimensions. But, that’s not all. Crossfilter allows you to do groups (map/reduce) on each dimension. For example, I could create dimensions for account balances and transaction dates. I could apply a filter for transactions during the last week over $200. Using the map/reduce functionality, I could determine how many accounts were used during that time period, the sum of those account balances, and the average account balance. If I adjust the range of the transaction date filter, Crossfilter will reapply the map/reduce functions on the new resulting set of data. This allows us to do an incredible amount of discovery on the browser without having to do tons of back and forth between the server and browser. Performance, you ask? I have done tests running a million records in the client with 6 dimensions (Disclaimer: this was in Chrome on a computer running an i7 and 16GB of RAM). The lag was about 500ms – 1sec. As you begin to filter out records the lag drops appropriately.
  • DC.js – This is the framework that combines D3 and Crossfilter. Using this framework, you can quickly build a dashboard for easy data discovery. Each chart is set with a Crossfilter dimension and associated group (map/reduce). When a user interacts with a chart to apply a filter on the associated dimension, the rest of the charts are updated to show the resulting set of data.
  • NLP Compromise – NLP Compromise is a library for natural language processing. With this library, you can do analysis on blocks of text like determining the number of phrases, the structure of a sentence, etc. I used it in a project to build a rudimentary sentiment analysis tool by taking a block of text and breaking it down in to phrases. Then each phrase was broken down in to adjectives, adverbs, and nouns. The adjectives and adverbs were compared with a lexicon for positive and negative sentiment. The resulting sentiment score was then mapped to the noun to determine likes and dislikes of the writer.
  • Angular.js – Everyone knows this one. Angular is undoubtably the most popular client side framework for single page applications. The learning curve is a bit steep when compared to other frameworks, but it provides an all-in-one solution. It took me a couple months and I finally consider myself capable with the framework.
  • Express – Express is a web application framework for Node.js. I’ve used it in a couple of project to mock APIs while working on UI concepts. This allows me to build my client-side code against mock services while server-side developers work on the real services.
  • MongoDB – A document-based database. Its query syntax uses JavaScript (a language I am intimately familiar with) and it stores its data in JSON like format. As a front-end developer, this data structure is quite natural for me, and it allows for easy translation between the back-end and the front-end.
  • Node.js – The JavaScript platform. Yup. JavaScript on the server. So I use it for build management and to run server-side applications to support front-end code.

This should give you an idea of my last 10 months.

Design by Idiot

A wise man once said, “Don’t make me think.” Great concept – user-centered design. As designers and developers, let’s think like the user so they don’t have to think like us. The issue I have is when we start to believe that our users lack common sense or, even worse, the ability to think entirely. When we begin to lose this belief in our users, our users turn in to idiots. Sometimes, they become nothing more than mouse-wielding zombies. Individuals aimlessly clicking on a screen.

I’ll admit I have made a few confusing design choices. It’s part of the game. We do our best to get in people’s heads and make decisions based on their thought processes. Sometimes, we even get the opportunity to ask them what they’re thinking, but usually it’s a well-intentioned shot in the dark. With that said, we have to believe that the majority of users get it or can quickly understand.

During a recent project, we developed a front end for an application that needed to work on both desktop and mobile. We needed a check box type of solution that was fat finger friendly. The decision of the group was to use a switch rather than large obtrusive check box. The switch would have an on and off state with labels reading “Yes” and “No.” Fair enough. That should suffice. The user would click on the switch to set the answer to either “Yes” or “No.”

As the release date came closer, we began the testing phase of the project. A tester had created a bug stating that the switch was confusing to the user. He noted how users might see the default state of “off” with the label “No” showing, and thinking they want to answer “No” for the question would click it. This, of course, would set the value to “Yes.” As a result, users would be providing inaccurate information.

I was surprised when I ask a few coworkers, and they agreed with the issue of the potential confusion caused by a switch. It’s a switch. A switch! You use one several times a day. How can you claim that a user might not know what a switch is and what it does? I can see how a user could be confused and click on the switch. However once the user sees the switch change state, I have to believe most people would understand it is a switch and change its state appropriately. Furthermore, now armed with the knowledge of how this interface element works, the user will make appropriate choices going forward.

I have been wondering how this came about. I don’t remember ever being afraid to try new interfaces at any other company. It’s a website after all. I upload new assets and hit refresh. I soon realized that this company was lacking the ability to measure the performance of the interface. Furthermore, there was no system for testing multiple designs side by side (A/B testing). Without these key tools. Anyone would be afraid of taking chances. In a future post, I’ll address these issues and provide some strategies to avoid living in fear of innovation and resorting to design by idiot.

A New Friend

Yeoman

So I made a new friend this week. I installed Node.js on my computer a few months ago, but I never was able to go beyond creating a simple web server and handling simple AJAX requests with mock data. The main reason I developed the server was to be able to test my client-side code while waiting for the app developers to finish building out the services on the server. I can honestly say that coding in JavaScript on the server is awesome. Finally, I understood what the app developers were talking about. I could write code for a single environment, and to boot, it’s Chrome’s V8 engine for the win! This week I had the fortune to finally see the real joy that is Node.js.

I installed Yeoman.

It wasn’t easy. Okay that’s a lie. The install was very easy. However, I had an issue creating new projects. I typed in the command to start off a new project:

I made my selections. Hit ENTER, and watch the ol’ chap go to work. Towards the end of the process, I started to see the following errors:

Doh! I don’t own npm on my machine. So a quick command to fix that:

Finally, tools for front end developers by front end developers. That’s it for now. I have a personal project I’m working in the works. I’ll post it up as soon as I have something to demo.

Okay This Is Sad

So it’s been almost three years since I actually posted anything on this website. That is horrible. Just plain horrible. Inexcusable. Well, not that you’re all that curious, but in case you are, let’s get you up to speed. It’ll be quick. I promise.

Working at Via

Shortly after my last post, I found a position with a company called Via Trading. It’s a great company, and I still have fond memories of my 22 months there. I realized towards the end that IT is not really my thing. I’m a developer. That’s what I love.

Okay, full disclosure, IT made me want to bash my head on a desk. Ever see the cult classic series IT Crowd? Yeah, that was pretty accurate to my experience. I just don’t have the patience for that kind of position.

Anyways while, I was able to get my Individual Qualifications for Google AdWords and Analytics in a few short months. I redesigned the front end of the website which took six months. After the new design was launched, I started re-evaluating our AdWords and Bing/Yahoo campaigns. I’m totally bragging here, but I was able to more than double the number of leads while maintaining the same budget. Now that’s optimization. Soon, came phone system upgrades, moving the company to Google Apps, and security camera upgrades. I learned a lot during my time with the company. However, it wasn’t the direction I wanted to go. So I moved on.

Agency Life

Shortly after leaving Via, I ended up at Rosetta (not the language software company). It was a fun shift working at an agency. I was able to work on BlackBerry.com as a production developer releasing new product pages. Working with other great developers was definitely the change I was looking for. Sadly, we are all aware of the situation BlackBerry was in during the summer of 2013, and my contract was terminated. It was a crazy two and half months. Fun atmosphere. Intense deadlines. Awesome co-workers. That pretty much sums it up.

The Now

Today, you’ll find me at the Automobile Club of Southern California. I’m a front end developer. I use Knockout.js, jQuery and vanilla JavaScript to build application UIs on the daily.

Now, you’re all caught up, and my blog finally has a post younger than 2 years old.

The Dangers of a Website Wish List

The hardest conversation with clients is usually the first one. The first meeting where everybody sits down to discuss project goals, budgets, timelines, etc. This is the meeting where many clients come in with a Website Wish List.

The Dangers

There is nothing wrong with having a list. However, there are some issues that may arise is the list is not managed properly with a website plan. These issues include:

  1. Failure to meet project deadlines
  2. Failure to stay under budget
  3. Diminished return on investment

The biggest issue that comes up with a poorly managed website project plan is the failure to finish with in a specific timeline. Without a thorough website project plan new tasks and functionality can continue to push back a website launch. With a delayed launch, the budget tends to suffer. If time is a factor, extra hours or expensive overtime hours may be required to meet your deadline, or spending money to develop unnecessary functionality could hurt your bottom line. As your project gets more expensive, getting a return on your investment will become more difficult if possible.

Steps for Successful Website Planning

The best way to avoid the dangers of a website wish list is effective website planning. Creating an effective website plan requires just a few simple steps.

  1. Understand the site context
  2. Determine how to measure success
  3. Study the competition
  4. Understand your audience

First, determine your company objectives and determine how the website will help fulfill those objectives. This will give you the context of the site. Next, determine how you will determine whether the site is successfully achieving those objectives. For example, the site should produce $250,000 in sales per month, or customer support calls should be reduced by 40% within 3 months of website launch. Once you know how your site fits in with the rest of the company and how to determine success, it is time to study your competitors. How do they structure their site? What features do they have? What works on their site and what does not? The hardest step is last: understand you audience. Most people’s first instinct is to target everybody. However, knowing the demographics and needs of your target audience will help determine website marketing strategies, design decisions, website functionality.

Need help planning a website or improving your current website? Shoot me an email any time.

 

5 Things You Should Do for the New Year

We’re are almost half-way through the first month of the new year. For most business owners, this is the time for year-end taxes, first quarter slumps, and endless planning meetings for the year to come. In the midst of all these extra curricular activities, have you thought about your website? If you happen to be one of the lucky few with some extra time on your hands, I would like to suggest a few items to add to your to-do list:

  • Evaluate your website’s content
  • Review your website’s performance
  • Plan new functionality/features for your website
  • Redesign your site
  • Research new solutions and technology

Evaluate Your Website’s Content

I put this task at the beginning, because it is the hardest one to do. Shear boredom factor of reviewing every piece of text on your website is incredible. However, it must be done.

The key to this task is to update inaccurate or out-of-date information. You may discover that your website’s information architecture is severely flawed or missing entirely. This is the time to get those issues under control. Also, you might find this a great time to re-evaluate your SEO strategy. So, take some time to write and re-write your content.

Review Your Website’s Performance

There are two kinds of performance to consider. Most business owners will immediately think of the sales figures and conversion performance (analytics), but designers and developers will think of the code (html and css).

First, let’s look at the analytics. With a full year’s worth of figures, you can look for patterns in your website’s traffic. Look for ways to improve your website’s conversion. Where do people leave your site? What pages do they tend to visit the most often? What are they looking for, and how can you help them find it?

Now for the less exciting part, we need to look at the speed of your site. Basically, how fast does you site download? A slow website can kill a website’s conversion faster than a poorly structured one. So check your source files, compress that css, get those images as small as possible, and don’t forget the caching.

Plan New Features and Functionality

Now we can get to some fun stuff. Are there features your visitors want? This is the perfect time to get some feedback from your clients. Ask them what they think would make their experience better. Perhaps, a new product rating system. Or perhaps clients want to chat with customer support. This is the time plan out budgets and timelines, and don’t forget your good friend: ROI.

Redesign

Do you have a new corporate identity? Did your performance analysis reveal some areas needing improvement? Well? A redesign is just the thing for you. It doesn’t need to be a brand new site, but it does need bring in some results. Take all the information you have from your current site and implement some improvements. If you’re still unsure, start with some A/B testing on testing on key pages. This can help you determine what performs better for your site.

Research

This is my favorite task. Unfortunately, we all get busy doing the day-to-day task of business, and researching new techniques and technologies often takes a back seat to everything else. So if your site is in good shape, take some time to look for new ways to improve your self and your business.

Here’s to a new year. I am confident it will be one to remember.

 

New Year and New Website Design!

As we come to a new year, I figured it was time to release a new web site design. Not that the old design was bad. During the last year, I have learned  a lot more about the WordPress  platform. Using this new set of knowledge, I figured it was time to update the site. The most obvious improvements were the graphical elements. However, the most exciting improvements are on the backend, but I won’t bore you with those details. Although this a small brave step in a new direction, it is certainly not the last. Check back regularly for new features and information that will help you get your website project off the ground.