A Reading Companion to Steve Krug’s “Don’t Make Me Think”

Steve Krug’s book Don’t Make Me Think, Revisited: A Common Sense Approach to Web (and Mobile) Usability takes an 80-20 approach to user experience design.

Though it does not serve as a textbook for UX design, I would recommend it to any developer who wanted to improve the usability of their products with relatively little effort.

In it, Krug goes over how to organize the material on a web page, how to display links to be most helpful to the user, and how to adjust one’s approach to usability for a mobile device. These are all fantastic things for programmers to understand. Many of the concepts seem obvious (and the author warns readers about this right from the get-go), but the book helps to clarify why we do those things the way we do them.

I want to emphasize three astute points from the book that I suspect could be easily missed. These points merit reiteration for a crowd of programmers:

Continue reading “A Reading Companion to Steve Krug’s “Don’t Make Me Think””

My Five Favorite Things About SASS (The CSS Extension Language)

I recently had the opportunity to teach HTML and CSS to a class of women through Chicago Women Developers, an organization devoted to the advancement of women in tech. As a part of that course, we covered Sass: a CSS extension language that makes stylesheets easier to read and use for developers, then converts into plain CSS for the browser to read at runtime.

In order to demonstrate how Sass works, I showed the class a few examples of the language in Sassmeister, which does the Sass-to-CSS conversion before your eyes. Then I took screenshots! Though we didn’t cover all of Sass, we did cover several well-loved staples. Here are demonstrations of my five favorite Sass functionalities, in ascending order:

Continue reading “My Five Favorite Things About SASS (The CSS Extension Language)”

Hacking Chart.JS: A Crash Course in Down-and-Dirty Front End (Part 3)

What’s going on? I wanted to make clean, elegant, simple charts to represent data about armed conflicts in Africa. I used the Chart.js javascript library to obtain some pretty graphs, but I added functionality to the graphs and then wrote about it here so you can do it, too. This is the third in a series of three posts, and it’s about automatically assigning colors to the sections of a circle chart.

For more info on Chart.js, have a look at the first post in this three-post series. 

To see how I adjusted the labels on line charts, look at the second post in the series.

Continue reading “Hacking Chart.JS: A Crash Course in Down-and-Dirty Front End (Part 3)”

Hacking Chart.js: A Crash Course in Down-and-Dirty Front End (Part 2)

What’s going on? I wanted to make clean, elegant, simple charts to represent data about armed conflicts in Africa. I used the Chart.js javascript library to obtain some pretty graphs, but I added functionality to the graphs and then wrote about it here so you can do it, too. This is the second in a series of three posts, and it’s about creating a sensible, readable scale along the x axis of a line chart.

For more info on Chart.js, have a look at the first post in this three-post series. 

Continue reading “Hacking Chart.js: A Crash Course in Down-and-Dirty Front End (Part 2)”

Hacking Chart.js: A Crash Course in Down-and-Dirty Front End (Part 1)

What’s going on? I wanted to make clean, elegant, simple charts to represent data about armed conflicts in Africa. I used the Chart.js javascript library to obtain some pretty graphs, but I added functionality to the graphs and then wrote about it here so you can do it, too. This is the first in a series of three posts, and it’s about auto-generating nice-looking legends for line graphs.

Addendum: to see, copy, and run the code itself, you can pull from https://github.com/chelseatroy/acled-data-webclient.

What is Chart.js? Chart.js is a javascript library originally drafted by Nick Downie (available here on GitHub). The library offers relatively quick setup in Javascript for several types of simple and elegant charts so you or I can create visual representations of data in our apps:

Screen Shot 2014-09-11 at 7.17.49 PM

Thank you to Sajal Sarkar for the image: http://www.eolikes.com/jquery/chart-js-simple-html5-charts-plugin

Continue reading “Hacking Chart.js: A Crash Course in Down-and-Dirty Front End (Part 1)”

Zero to Bit.ly (with analytics!) in 8 Hours

I had a limiting belief that went something like this:

A multi-functional app takes days to build, if not weeks, months, or years.

For many multi-functional apps, this is true. That said, it’s always useful to challenge one’s limiting beliefs about their craft.  What better way to do that than to code a multi-functional app in 24 hours or less?

The app creates links businesses might use to analyze where clicks to their website come from: it has  visit tracking for each link, geographic tracking for each visit, and a graph how many visits are coming from each link.

And yes, it’s real: you can make an account and use it, if you want to :). Check it out on Heroku, or see the code on Github.

Pictures below, plus an hour-by-hour breakdown:

Continue reading “Zero to Bit.ly (with analytics!) in 8 Hours”

It’s not magic.

Every time I tapped my phone’s weather app, I would think the same thing: “Wow. The background looks just like the sky outside my window. It’s magic. ” I’ve never been so happy to be wrong. As it turns out, a rudimentary version of the exact same feature only takes half an hour and a few changes to three files. Check out the code on Github and the app on Heroku. Continue reading “It’s not magic.”

Why Break the Rules of Front-End Development?

Programmers are smart…but not that smart. And, like any large group of people united by a body of knowledge, they fall into traps.

One trap in particular. Here’s how it goes:

1. Everybody has a common goal.

2. Somebody creates a way to reach the goal, and it catches on.

3. Over time, the masses conflate the means and the goal, and then they start aiming for the means instead of using the means to obtain the goal.

And then, in the name of following best practices, they write crummy code that would rather follow the rules than hit the goal 

Let’s look at an example: does this sound familiar?

“HTML defines the structure of your document, and CSS defines the look. If you mess that up, your code isn’t organized.”

This is the kind of thing people say—without caveat—and it is false.  Continue reading “Why Break the Rules of Front-End Development?”