Chad Hietala - Front-end Dev & Design

Input Output

2012-02-04T13:01:00-05:00

Any business, public or private, has an input/output paradigm. You give a clerk $2, you get a soda. You enter a number in a phone, you get some sort of response on the other end. You go to Google and enter a search term, you get search results. Even such vital things as hospitals work this way. It’s this constant balancing act between give and take.

Communication online is done through input and output (IO). Give me something and I’ll give you something. Everything is IO when related to the internet, from how a computer processes an HTTP request to how people communicate online. This digital process of input and output has to remain as easy as if it were a physical one.

Communicating Online

Communicating online is done largely through forms. At first one would think this is not true. Text areas, input boxes, buttons, check lists, and drop-downs are all interactive form elements and they are the root user interface communication tools for the internet. Since communications are digital and not physical, there is a hurdle that has to be cleared to enable users to initiate input.

So if forms are the leading means of communicating back and forth from client and service, one can argue that web forms are the most important thing on a website. With a web form you capture that casual surfer. Web forms can help businesses qualify perspective clients, current clients, and past clients. It is a direct communication with the business entity. It can be compared to picking up a phone and calling the person or going to the physical business.

It's Definitley The Small Things

Position of labels and default length of input fields seem like frivolous details when it comes to web forms. THEY ARE NOT. Research has shown time and again that these small details lead to faster, less painful, completion of a form. Eye tracking studies show that the number of fixations the eye has on a form, the longer and more “painful” it is for that form to be filled out. By following some simple best practices or using form services, more forms will be filled out and filling out those forms will be easier.

These things may seem trivial, but they really are what make the difference between a pleasurable experience and a confusing chore-like one. Sure, people don’t look forward to filling out forms, but they are necessary and should strive to be as pain-free as possible. By paying attention to the small details and making things as easy as possible, you can begin to condition a user to be more prone to do the thing you want them to do.

Forms Matter

Having pain points in a form is something that needs to be avoided at all costs. By breaking down some of the communication barriers that exist online, a business can greatly increase their revenue and interactivity. It has a direct impact on a business.

Why Aren't There More Computer Science Majors?

2011-11-06T20:27:00-05:00

I wasn't a Computer Science (CS) major in college. A matter a fact I was a Finance Major. I'm still not really sure why I chose to be a Finance major over CS. Perhaps it was the picture that was painted for me, racks on racks on racks and having so much money I could chop up a Maybach. Looking back, it was really a naive decision. While I studied how to use the derivative market, I also became obsessed with web development and I joined the guild of self-taught developers.

As a child I was always interested in computers. I have pictures of me sitting in my dads office at EDS in front of computer at the age of 20 months. I wrote my first program in first grade on an Apple IIGS with LOGOwriter. I took Visual Basic, Web Authoring and CISCO systems in high school. College rolls around and I choose what? Finance? You fool.

I think there is a pretty big problem here. I ponder why more people aren't choosing a career in software engineering and taking the CS route in college. To be honest, choosing a career in software engineering is one of the most stable career choices there is. Arguably more stable than nurses or doctors if you ask Ray Kurzweil. I think educators are doing a piss poor job at selling what you can do with a CS degree.

Higher Education

My first "real" job was at a well respected university, where I worked as a Front-end Developer and User Experience Designer. Although I was not an "academic", I did attend some internal meetings in which we brainstormed ideas for what the university should accomplish in the next 5 years, what programs should be modified or created, and how to attract new students. It was weird to see academic department heads fight solely for the advancement of their department and not really thinking about the future or students.

When it was my turn to express my ideas, a lot of academics really didn't understand what I was talking about. My ideas were largely based on changing the structure of academics from theory followed by application to application followed by theory. I think it's important to sell what you can do with a degree up front by showing what the real life application of that degree can be. For instance, the intro to CS class should not teach you theory like the Turing machine and creating a Fibonnaci sequencer, it should be a very basic class that talks about what you can do with a CS degree and how some of today's most sought after employers (Facebook, Google, and Apple) came to be. In other words make it look sexy and build passion for the subject matter.

Another suggestion that I had was to make programs extremely cross-disciplined. Business Administration people should have minor in Computer Science, Computer Science people should have a minor in Business Administration. These 2 disciplines are so tightly coupled that they should understand and respect each other right out of college. Same goes for Designers. I feel this will change the business world greatly. Instead of bickering over what the "marketing people" want and complaining about "stupid engineers", we can just build good stuff.

Quick Thought On Electives And General Education Classes

Electives and general education classes are supposed to make you a more rounded person, but in reality those are the courses that make you say "Why fuck do I have to take this class." Stop with the bullshit electives and geneds, start making students take classes that will give them a better shot at finding a job.

Computer Science FTW

I know that I am really biased about this subject, but I should be. A lot of smart people need jobs and the country as a whole needs to innovate more. I believe that computer science is the answer to some of this countries problems.

It's the academics responsibility to take a step back and start selling their program. Invite high profile speakers, head up a student start-up initiative, host hack-a-thons, do SOMETHING that sounds cool, explain the theory on a just in time basis. If your a CS academic and your worried about department money, stop worrying about it and build something that will help fund your endeavors, you're an engineer.

CoffeeScript 101

2011-09-28T10:33:00-04:00

CoffeeScript is basically a syntactically sugared re-write of JavaScript. The language has a 1-to-1 relationship with JavaScript but with a handful of symantic upgrades. It's important to remember CoffeeScript is just JavaScript, if you are ever leary of how to do something in CoffeeScript no biggie just write it in JavaScript.

Installing CoffeeScript

The easiest way to install CoffeeScript is through NPM, but first you have to have Node.js installed. The easiest way to install Node is through Homebrew if your on a Mac. I have no idea how you do this on a linux box and god forbid if you're using windows. If you want to compile from source there are instructions on the node.js github repository that explains the install.

Once you have node up and running you are going to want to install Node Package Manager, otherwise known as NPM. Just copy the curl command into a terminal and you now should have NPM installed. Run the command below to install CoffeeScript.

Liquid error: undefined method `join' for "\nnpm install -g coffee-script \n":String

Start Brewing A Cup

Lets create a new document and call it test.coffee. In terminal change directory to where you have you created test.coffee and then run this command.

Liquid error: undefined method `join' for "\ncoffee --watch --compile test.coffee\n":String

This command will re-compile test.coffee to test.js everytime test.coffee is saved. Pretty neat. So to start at the very basics this is what a variable looks like in CoffeeScript.

Liquid error: undefined method `join' for "\nmySpecialVar = test\n":String

Yep that's it. No var statement. Lets see what actually got compiled by opening up the by-product of the automatic compiling of test.coffee. In test.js you should see the following.

Liquid error: undefined method `join' for #<String:0x000001021663d8>

Woah, what the hell happened? Well the CoffeeScript compiler tries to put best practices in the JavaScript to work. So CoffeeScript doesn't allow you to create global variables in the global namespace, it does this by wrapping everything in a self envoking anonymous function AKA a function that calls it's self. It also adds the var keyword.

Another thing you will notice is the call(this) at the end of the function. This ensures that the compiled script has the same "this" as the scope where it's placed. This is needed because functions normally don't inherit their "this" object from the surrounding context. If that makes no sense at all take a look at Mozilla Docs on .call.

Conditionals

So the next thing we will cover is conditional statments. So lets write some more CoffeeScript.

Liquid error: undefined method `join' for "\n..\nif 1 > 0\n\talert \"Oh willy\"\n":String

Notice we omit the parenthese that we would normally see in JavaScript. Also take note the indentation on the alert. Since white space is imporant in CoffeeScript just like in python, we have to indent to say that the alert statment belongs inside of the if block. White space defines what is included in the code block and where the code block ends. Let's take a look at the compiled source.

Liquid error: undefined method `join' for "\n..\nif (1 > 0) {\n alert(\"Oh willy\");\n}\n":String

Pretty cool. We write pretty looking code and in return we get the parenthese and curly braces hell that everyone has grown to love.

Objects & Arrays

So lets look at data structures before we get into functions. Arrays didn't really get too much love in CoffeeScript but its still worth to go over.

Liquid error: undefined method `join' for "\nary = [1, 2, 3, 4, 5]\n":String

Yep, pretty boring. Lets look at objects now.

Liquid error: undefined method `join' for #<String:0x0000010214e828>

Thats a little bit better. It's a familar syntax but once again we loose the curlies. Let's look at the output.

Liquid error: undefined method `join' for #<String:0x0000010214ae80>

Just what you would expect. One thing to note is that all of the variables are defined at the top of the function. This is because it is generally a good practice to set the variable name spaces at the top of a function so that other developers know what are variables and what are parameters passed into the function.

Functions

Functions are pretty easy to define.

Liquid error: undefined method `join' for "\ndoStuff = ->\n\talert \"Stuff Done\"\n":String

Yep all of the magic is in the almighty arrow (->). This outputs this nastyness.

Liquid error: undefined method `join' for "\ndoStuff = function() {\n\treturn alert(\"Stuff Done\");\n};\n":String

It's important to note that CoffeeScript does not allow you to name functions like you would in plain JavaScript this is because of an issue with IE8...go Microsoft. Another thing you didn't write is the return on the alert. Return is added to the last object in the function. A little odd to get used to seeing this and in the cases where you are do not want to return a result by adding true or null to the buttom of the function.

Passing parameters into a function is pretty easy.

Liquid error: undefined method `join' for #<String:0x0000010213aa30>

And the end result is the following.

Liquid error: undefined method `join' for #<String:0x000001021339d8>

Well that's all I wanted to share right now. It's a lot to take in but for further reading you can check out the CoffeeScript documentation. In my next post I hope to put some of this to good use and write something like a Fibonacci Sequencer to actully show CoffeeScript in action.

Want This, Want That

2011-09-21T21:00:00-04:00

Well if you don't already know, I have taken a new job at Want as the Lead Front-end Developer. So far it's been a pretty exciting experience. Since we launched the platform in July, we have worked really hard and it seems we have victories everyday. To briefly recap, we have partnered with 200+ merchants in the past 2 months and are now on sites like The Sharper Image, Moosejaw, LMAFO's Party Rock Clothing with more high profile sites in the works. Our product is viewed by 2 million+ people a month and that makes me pretty happy.

Wait WTF is Want?

Want is a place to keep track of the things that you want to buy from any store, anywhere. Creating an account allows you to collect goods from anywhere and to share the things you want with anyone. You add the things you want through our bookmarklet, the Want button and soon the iPhone. Not only does the site allow you to collect things you want, it allows you to discover new products that are added by anyone that has an account.

One feature that I am really excited about is something we are calling Channels. Its basically curated collections of "wants" that revolve around a central concept. The example we use around the office is the Dress Like West channel. Basically it's a collection of apparel and accessories that Kanye West has worn. So if you want to know where you can buy some metallic Balmin Biker Jeans, you can discover where to get these bad boys through Want. It's kind of like a community driven catalog, that anyone can create, add to and edit.

To find out more about want before you dive in you can learn more here.

So Yea

So yea that's what I have been up to. I built this blog largely to write about Front-end Development and Design stuff. Stay tuned if you want to learn about bleeding-edge technologies, best practices, tips and tricks. That's all for now.