Saturday, March 30, 2013

Becoming a grown-up web developer!

I mentioned Geocities a few posts ago. That was like... 15+ years ago. My other terrible web development secret is that I've been using PHP for the last 6 years, until literally 2 months ago.

I had been forced to make something with the Python-based content management system Plone when I was an intern at Tesla Motors, but for my own stuff, I don't want to just manage content! It was briefly suggested I try Drupal, but again, blarg, a CMS. I don't know the exact reasons why Drupal seems terrible; it just does.

Recently, a bunch of things conspired together to get me to try and adopt a new method of making fancy-pants webpages:
  1. My mom has been learning Django for a while, so I was aware of it as a mother-approved (and now kid-tested) web framework. I'd even installed it and tried the (frustrating and awkward) tutorial.
  2. On twitter, I've been following the epic saga of @limedaring bypassing the need for a technical cofounder, learning Django and starting her own company. If she can teach herself Django, I can teach myself Django! 
  3. I went to Startup Weekend at the end of January, worked on the illness tracking app PoorMe, and got to watch my teammate Wei-ju develop a Django app from scratch. I was able to learn enough in a weekend that I could do slightly useful things to it (I did mostly front-end Google Maps javascript) and then later, dig in deeper and understand more in a specific context where I had specific goals I wanted to accomplish.
  4. I went to CSCW and saw Karissa McKelvey demoing the Twitter research platform Truthy. Rather than inquiring about Truthy itself, I asked something like, "how to make website pretty?" and got my answer: Bootstrap. She also mentioned she was a "one-woman show" for the website and the Truthy development and I thought/probably didn't said out loud, "me too! me too! how do I do as good a job as you?"
  5. At school, my labmate Eric confirmed that Bootstrap was the thing he used to make his web app look shiny, too.
So to all those people who inadvertently or purposefully influenced me, y'all are great. Thanks!

Anyway, the things I'm using now:
  1. Django
  2. Bootstrap (it's CSS that makes my website look like a *real* website!)
  3. Other fun javascript libraries like JQuery and some Bootstrap file uploader extension and KineticJS and D3...
  4. Heroku to host my shit until I get the right dependencies installed to run Django from school
  5. (And in the back end, I'm still using... a MySQL database and Python's Twisted networking library to write custom webservers...) 

There's a picture of the computer vision face playground website I'm working on. It's live, even! Though I can't guarantee that the backend won't crash and break (the meme quiz is currently broken) or that heroku won't suddenly decide it wants money from me. But you're welcome to try!

http://www.facefrontier.com/oppositefaces

Sunday, March 3, 2013

Programming resources for beginners

I majored in Computer Science in college. A lot of my good friends didn't, and at least some of them have said, "Damn, I wish I had studied CS." Sometimes they even say, "Maybe I should go back to school and learn CS?"

My response is something like, "But you can go out and learn it now!"

But then I'm not able to point them in the right direction. 

Possible Resources

I have a list in my head of possible ways to start programming (tutorials, easy to learn environments, harder to learn environments that would let you make something you might want to use and show off) but I didn't know which of those sounded good to people. So I made a survey: http://www.surveymonkey.com/s/RCP98L5 

Here's what I put on the survey:
  • Codeacademy - Learn to program right in the web browser (http://www.codecademy.com/)
  • Project Euler - Math/programming challenges (http://projecteuler.net/) 
  • Processing - Creative programming environment with tons of examples (http://www.processing.org/)
  • Processing for Android - Deploy on an android phone with 1 button click (http://www.processing.org/)
  • Android programming - Make apps for your android phone/tablet and share them in the Google Play store (http://developer.android.com/index.html) 
  • iPhone/iPad programming - Make apps for your iOS devices and publish them in the App store (https://developer.apple.com/) 
  • App Inventor - Make android apps with a graphical user-friendly programming enviroment (http://appinventor.mit.edu/) 
  • GameMaker - 2D game engine (http://www.yoyogames.com/gamemaker/studio)
  • Unity - 3D game engine (http://unity3d.com/) 
  • LilyPad - Programmable e-textiles (http://web.media.mit.edu/~leah/LilyPad/) 
  • Arduino - Open-source electronics prototyping platform (http://www.arduino.cc/) 
  • Raspberry Pi - Tiny hackable computer (http://www.raspberrypi.org/) 
  • Python - Straight up Python, the programming language! (http://wiki.python.org/moin/BeginnersGuide)
  • Java - Straight up Java, the programming language
  • Javascript - Interactive web programming (http://www.w3schools.com/js/default.asp) 
  • HTML - Web page programming / layout (view source on any webpage!)
  • CSS - Style webpages (http://www.w3schools.com/css/) 
  • Google App Engine - Build an interactive web application and host it on google (https://appengine.google.com/) 
  • Django python-based web application framework - Build interactive web applications (https://www.djangoproject.com/) 
 

Survey results (8 people)

I was hoping billions of people would fill it out, but alas. And they were mostly programmers already, so the results are more along the lines of "what would you recommend to beginners and what do you currently like/use?"

Codeacademy

Based on the survey, not many people (2) said they'd recommend Codeacademy to beginners.

Codeacademy python lesson

However, from a beginner perspective, it does have some appeal. Point of success: one person got distracted by Codeacademy during the survey, affirming that it "Sounds interesting!" and "I'm going to try this out right now!" Another person also mentioned planning to check it out. If you try out Codeacademy, I'd love to know how it goes!

P.S. I'm pretty sure the interactive example on the main page is Javascript. There is also a Python tutorial under "Learn" but I am looking at it right now and I'm less impressed because the instructions and the code you type are not as well integrated.

Processing

Omg, <3 Processing, it's really great. Most everyone I know loves Processing, including me. According to the survey, 4/5 people said they'd recommend it to beginners, 3 people said they liked programming in Processing, and 2 people said they use it now.

Programming in Processing is basically programming in Java. The only differences are that it's all self-contained (just download it and you're good to go, it even comes with lots of examples) and that the setup cost for making an interactive graphical program is basically zero. You need a setup() function and a draw() loop that will get called every frame, and that's basically it. In fact, you could probably write a program that doesn't even need those.

 

Nevermind the rest of this post, if you haven't tried Processing yet, go do it right now:

Download: http://www.processing.org/download/
A sample program I made: http://superfiretruck.com/fingerpaint/impressionist.pde

Processing Impressionist Fingerpaint program in action
An extra bonus is that Processing is classroom-approved, in that I've heard about it being used in middle school and high school classes. As is the Impressionist Fingerpaint / Painterly Rendering assignment which I've done at UCSC and UW and taught to middle schoolers using Processing.

Extra-extra bonus, Processing lets you run your programs on an android device with virtually zero effort.
Impressionist Fingerpaint on Android

Python

A quick shoutout to Python, 5/7 people recommend it to beginners. I would, too, but I think you need a plan or something in mind that you want to accomplish with a Python program. A suggested resource for learning Python: http://learnpythonthehardway.org/

 

Stuff people like and use

Python and HTML were the most likable things on my list. I can agree with that, since I definitely write a lot of Python and HTML and Python that generates HTML.

The nicest thing about Python in my mind is that it's not very verbose or chatty. You want to print something? print "meow" It's not bogged down with a lot of weird stuff, like semicolons and variable types. Sometimes you want things that Python can't provide, like types on your variables and super-fast math, but for most things, Python is super useful.

Survey people also seem to use C/C++ a fair amount, as well as CSS.  I definitely use CSS to make my HTML look pretty. I, too, code in C++ when I'm not coding in Python.

5/6 people said they used C/C++ as a beginner. I'm not sure if that means beginners these days should go out and try it, or if that's just what was around when people who took my survey started learning to program.

 

Stuff people don't like

The most disliked thing (4/6 people) was Java. It's probably not the best for beginners, even though it is often used in intro CS courses, because it's very chatty. You want to print something? Oh, that'll be a mouthful: System.out.println("meow");

Random tips and tricks

  • If you're on a windows machine, please go download Notepad++. It's the text editor that doesn't suck.
  • If you're on a mac, TextWrangler is a nice, free text editor.
  • Notepad and TextEdit are designed for writing words/prose/text, not code.
  • If you're going to program in Python, I recommend making Notepad++ or whatever other text editor replace every tab character with 4 spaces. Python cares a lot about indenting, and tab characters are invisible. Just make them automatically become spaces.

 

Now what?

Maybe the best thing I can do is collect stories of people learning to program via the internet - how they learned and what they made - and then pass those along to other people!

Also, go play with Processing.