Category: Development

Intro to Interactive Programming in Python on Coursera

For some time now I’ve been intrigued with Coursera. The idea of being able to take real courses, for free, online, just seemed amazing. My friend, Rachel, has been a big proponent of it, and had time and time again pestered me to give it a try. For whatever reason, I hadn’t until recently.

A few weeks ago I started a Coursera course through Rice University called An Introduction to Interactive Programming in Python. As the title implies, it’s a beginner course dealing with Python (a programming language). While I’ve programmed some in the past, it’s all been pretty basic and mostly self-taught. I took a couple of classes in Visual Basic and C++ back in high school, but that was over a decade ago. Lately my coding hasn’t gone much beyond HTML and jQuery. The Python class sounded like fun, especially when reading that the final project is an Asteroids clone.

I’m now wrapping up week three of the class and I’ve already learned a lot. It turns out Python has a lot in common with other languages I’ve worked in (C++, Java, C#), but also has different features (like the lack of semi-colons after every line, thank you!). To make the class really accessible and easy to complete, the professors even created an in-the-browser environment to write and run your code, called CodeSkupltor.

Every project in this class takes the skills you learn about each week, and applies them to mini-games. The first few projects have included a rock, paper, scissors, lizard, Spock game (based on the Big Bang Theory reference), a guess the number game and a stopwatch that tests your reflexes. All of these can be run from a modern browser, so click the links and give them a try. Just his the “Run” button in the upper left.

It seems like we are learning great amounts from week to week and I can’t wait to see what’s next. This has been a great experience with Coursera so far, so I’m already looking at what to take next. Have you tried Coursera? What did you take?

A Responsive Retrofit: Frostic School of Art

Frostic School of Art HomepageA long, long time ago, in a gala… I mean when I was but a mere student of graphic design, I designed a really cool website for the Frostic School of Art along with fellow student, Max Millermaier. When it was time to build the site, I was hired on after graduation to do so. So in the summer of 2009, I was so psyched to launch, what at the time was, a bleading-edge, video-background website. Fast forward four years and the site was starting to feel sluggish, dated and disjointed.

A few months back I started thinking the Frostic School of Art’s site was a prime candidate for a makeover. I didn’t want to completely remake the site. Instead I decided it just needed to take advantage of the latest trends and technology. I dropped the dreaded use of Flash for videos and replaced them with HTML5 video, thanks to BigVideo.js.

iPhone screenshot of Frostic School of Art websiteThe next step was to make it mobile friendly. I’m a huge fan of responsive websites and have dabbled with them for a while now. I recently did a project that used the Skeleton boilerplate and found it to be very easy to use and produce great results with. I set off to re-write the whole site on top of the Skeleton. It wasn’t a small task, but in doing so I removed a lot of messy and redundant code. Like I said, the original site was made in 2009. A lot has changed in the Web world, and I’ve learned a lot too. Now the site looks awesome whether you’re on a desktop, a smartphone or a tablet.

Another goal I wanted to complete during this process was clean up. Over the years, files, directories and content became a mess. By starting from scratch, I was able to cleanup a lot of the mess. Now the end user should have an easier time getting around the site and finding what they’re looking for. There’s still some work to be done, but it’s already improved leaps and bounds.

Overall, I’m quite pleased with this retrofit. It’s not always an easy task to take an existing site and slap on a responsive framework. I suppose in a way, I didn’t really do that. I more or less rewrote the site, staying within the design guidelines of the original, but replacing almost all of the underpinnings. It was interesting to revisit a design from four years ago, and I’m happy with the results. What do you think?

Screen Shot 2013-05-15 at 2.48.09 PM

Opinion: Reset Buttons Suck

Have you ever filled out an online form only to lose it all by a poorly placed reset button? Why do these buttons even exist? I can’t think of a time I’ve ever filled in a whole form only to say, “hey, I didn’t really want any of that information, let me erase it all at once.” Luckily in recent years it seems less and less forms have these annoying buttons but they still exist. I’m calling for everyone to check their forms right now. Go ahead, I’ll wait… If you’ve got a reset button on your form, it’s time to reconsider that choice.

A reset button is just a bad user experience. A user can easily change the information they’ve entered without having to delete it all in one click. I’d say almost no one intentionally hits that reset button. It’s probably an accidental click while thinking it was the submit button. Having that button in place is doing more harm than good. Do your users a favor and leave off that reset button. That way you don’t have to needlessly frustrate your users and you have the added benefit of a cleaner, less cluttered form.

Failed or Stalled Projects

At some point in your life you’re going to have a project that just doesn’t go anywhere. It’s as true in life (a bookshelf that’s half built) as it is in the design world (that sweet iPad app that ran out of budget). I’ve had my fair share of projects that fell into oblivion. Most of the time it just plain sucks. For reasons often outside of your control, a project you’ve put hours of work into will never see the light of day.

How do you cope with this? It can be extremely frustrating and somewhat confusing. What do you tell your friends and family (whom you’ve inevitably been talking up this project to for months)? Can it still go in your portfolio?

For me the worst part is feeling like you wasted your time. You can spend months on something and have nothing to show for it. In your next job interview you’ll explain what you’ve been working on for the past few months and when they ask to see it you’ll have that lame answer “well it didn’t get made.”

Hours iPhone mockupsA recent example for me was called Hours. It was an iPhone app I had designed screens for. The project was going to serve up business hours on top of the foursquare database. We were nearing launch when foursquare announced they were adding hours into their main database. The months of time and effort we had invested was all for naught. Foursquare had beaten us to the punch. Our spirits were broken and even though our standalone app could still be useful to non-foursquare users, it was never finished.

The reality is it happens. Much more often than anyone would like to admit. I think the best thing to do is try to move on. I hate that advice; it sound so simple but it’s very difficult. In the case of a designer, you are left with un-built screen designs or the artwork of un-printed posters. You’ve done the work, you’ve taken the time to think through the project but it was never put into production. Moving on for a designer could simply be taking the skills and experience you’ve gained and applying them to your next project.

I think it’s still appropriate to put in your portfolio. I have a couple of app projects that stalled out for one reason or another (like Hours) but I plan to put them into my portfolio. The screens were thought out and designed. The mockups were completed. My side of the project was finished, even if the other side wasn’t. Why shouldn’t I have at least something to show for it? Sure it might not be as valuable as a full-fledged running app but until I have those completed projects I want and need something in my portfolio demonstrating my interest and abilities in the app arena. Sometimes just having a few mock ups can be enough to demonstrate your skill and thought processes. In the end that’s what a portfolio is all about anyway, right?

Venn Diagram Generator

I’ve always been a huge fan of Venn diagrams. They’re a wonderful way to express so many different types of ideas and with such simplicity. For a few years now I’ve been running a fairly popular Venn Diagram Tumblr and this past fall I started a pet project for an online Venn Diagram Generator. I wrote it with HTML5 and a little JavaScript. I spent just a few days on it before getting side tracked with other things. It started as a very simple web app and I kept adding features and released a few versions. It’s currently in a “beta” release and could use a little more work. To be honest I kind of forgot about it but I think I’m going to revisit it soon. Feel free to leave any suggestions or feedback in the comments and I’ll post about it again as it progresses.

venn diagram describing my venn diagram generator

Linking done right

Links are one of the most basic parts of HTML. They’re everywhere and usually pretty useful. One thing I really hate to see is bad linking practices. A link named “click here” tells me nothing. For all I know you’re trying to lure me into downloading a virus or some phishing scam (or perhaps worse, Rick-roll me). Here are a couple quick tips on how to link effectively:

  • Name your link something that makes sense. You want to clue the user into where they’re going. “Online Registration Form” makes much more sense than something generic like “click here.” It’s irritating and even scary to not know what you’re getting into and by giving your links good names, you can instill a sense of trust and legitimacy in your site. As an added bonus, well named links should help your search engine scores.
  • Surprises are a bad thing. If you’re linking to a PDF or a video file and it’s going to trigger something to download or open a plugin, you should tell the user this beforehand. A simple icon in front of the link or a description like “(PDF)” after a link can really improve user experience. People like to know what to expect and it’s easy to tell them. At the very least put a description in the title attribute so a user can get an idea while hovering over the link.

It’s really pretty simple but by keeping these things in mind we can make a better, friendlier web.