Expand Your Development Skills With Creative Tech Projects

Advertisement

Even if you’re an experienced Web developer, your next project doesn’t have to be a website. Sometimes doing something outside of the usual Web developer’s box is more fun and can even be educational. We’ll try here to give you some inspiration on what to do on your next rainy day.

You can learn a lot by doing something other than building or designing a website. And if you stick with techniques that you can learn in a couple hours, you won’t burden yourself either.

Think Work Outside The Box

As a Web developer, you have to constantly summon creativity and empathize with users. If you have a natural flare for design and usability, that’s great. But our work can sometimes become inflexible and boring. We can lose our enthusiasm to try new things. To avoid this trap, we can strive to gain new insight by putting our common tools aside and exploring projects beyond the Web developer’s usual environment.

Experimenting with new ways of creating applications and interfaces and even building a hardware controller will lend fresh insight into our own field and make us see the techniques we use day after day with new eyes.

It is also a good way to become more sensitive to usability issues. If you work all day at the computer, you probably cannot understand how a technically inexperienced 85-year-old person feels when they visit your website for the first time. You can’t because your experience with using a keyboard and mouse is so natural.

The best way to get that feeling back — to feel what it’s like to have to click and play around with an interface to figure out how to use it — is to build your own hardware controller or a new kind of interface. Being the one who has to fix these fundamental problems will make you much better at identifying what elements make for a comfortable interface.

Your future Web development will surely benefit from the insights and innovation you bring back. So get out and play around with other tech stuff and recharge your batteries! We’ve put together some suggestions here for you. You may already have heard of some of them and perhaps even planned on taking action on them. If so, hopefully this article will motivate you to actually get on it! If you know of any interesting tools not listed below, please let us know in the comments.

Write Your Own Desktop Application

Doesn’t sound very exciting, but every developer should create a desktop application once in their life… even if the only lesson they learn is that they should stick to developing websites.

If you are not familiar with any programming languages for desktop applications and are not interested in learning one, you could still create a local application using one of the following tools.

Adobe AIR

Adobe AIR1

Adobe Integrated Runtime2 enables you to write desktop applications using HTML, CSS, JavaScript or Flash. Popular applications such as Seesmic3 and Tweetdeck4 use it. Combined with frameworks like ExtJS5 (for JavaScript) and Flex6 (for Flash), AIR lets you create user interfaces that come pretty close to real desktop apps.

See this round-up of resources for Adobe AIR7 that appeared on Smashing Magazine.

Shoooes

Shoooes8

If you are a Ruby-ist or want to become one, Shoooes9 (currently offline) might interest you. It’s an easy-to-learn cross-platform toolkit for writing small apps in Ruby. If you want to learn the joy of programming, this could be a good entry point.

Extend Firefox

Mozilla Labs Jetpack 10

You don’t have to set up a standalone application, though. If you use Firefox, why not play around with Greasemonkey11, Ubiquity12 or Jetpack13?

You can extend your favorite Web pages with AJAX functionality or even create your own toolbar with useful plug-ins. Hint: if you create a great Greasemonkey script, you can convert it to a Firefox extension14 on the fly.

Create Interfaces For Your Favorite Gadget

iPhone

Apple Developer Center15

The Safari browser on the iPhone and iPod Touch offers some JavaScript events16 that let you make use of the browser’s multi-touch interface. Combined with CSS Transforms17, you can create online applications tailored to iPhone users, based mainly on your knowledge of HTML, CSS and JavaScript.

Two good starting points are this demo18 of multi-touch events and this example19 showing a more detailed usage case. With the possibility of GPS positioning20 and storing offline content21, the potential for amazing iPhone-specific Web applications is huge. By the way, if you want to create an iPhone app, have a look at Phonegap22: it’s like Adobe AIR for mobile phones.

Nintendo Wii

Nintendo Wii 23

The Opera-powered Internet channel of the Wii console offers a supplementary JavaScript object24 that holds information such as the position of the pointer and pressed buttons for up to four connected WiiMotes. If you want to impress your non-techie friends by bringing your own multi-player Wii game to the next party, try this out.

There are also some code examples25 and a demo application26.

Nabaztag

Nabaztag 27

The Nabaztag28 bunny is surely one of the best Internet-related gadgets around. Even though it’s a little unusual, no list of customizable gadgets would be complete without it. Nabaztag owners adore the little bunny so much, so it is common for them to tailor special gear and costumes for it.

In case you don’t want to go this far, there’s also a Web-based API29 that you can use as a remote control for your little friend. Make Nabaztag speak and move with any programming language that can send an HTTP request.

Play With Hardware

WiiMote

The WiiMote30 is an impressive piece of hardware. It’s able to track infrared light and has acceleration sensors for all three axes. Best of all, you can connect it to your computer via Bluetooth. There are libraries in many programming languages such as Java31 (here32 and here33) and even Flash34 that let you use the WiiMote as a controller or receiver so that you can create features like multi-touch, gesture recognition and head tracking.

Look on YouTube35 to see what’s possible.

Arduino

Arduino Nano 36

If you want to create your own hardware, check out the Arduino boards37. Whether you want to build a touch-screen device, a robot or an intelligent sweater, a lot of extensions38 are around that make it easy for you to assemble a hardware device that fits your needs.

Of course, a lot of other solutions are around, including USB experimental kits (available at any electronics dealer). But the easy extensibility of Arduino’s components make for a relatively easy yet powerful start in hardware programming.

Lego Mindstorms

Lego Mindstorms 39

Though made by the same company, Mindstorms40 does not have much in common with those miniature colored bricks you played with as a kid. Mindstorms is a collection of plug-and-play components, such as servo motors and light sensors, that you can use to build a robot or other device easily. The interesting part is that you can define the robot’s behavior using a visual interface, so you don’t have to do any coding at all if you don’t want to.

Discover New Ways To Create And Visualize

Visualizing data and creating virtual and augmented realities is a big challenge and also a chance to create something very personal and outstanding. Processing41 is a toolkit for creating visualizations in a simplified Java language. It is popular because it supports access to external devices via USB and Bluetooth.

The combination of Papervision3D42 and FLARToolKit43 might interest Flash developers. They enable you to create augmented realities in Flash using a Web cam and printed barcode. Even developers who usually don’t work in Flash should check them out. These two libraries really make Flash worth another look.

Other notable projects are the vvvv toolkit44 for visual programming and OSCulator45 for sound effects.

Combine Everything!

Keep in mind that these are not necessarily standalone suggestions. You’ll surely get more innovative ideas if you combine this hardware and software with each other or with tools you normally use. A lot of blogs out there may provide further inspiration, including Hacked Gadgets46.

(al)

Footnotes

  1. 1 http://www.adobe.com/products/air/
  2. 2 http://www.adobe.com/de/products/air/
  3. 3 http://seesmic.com/
  4. 4 http://tweetdeck.com
  5. 5 http://extjs.com/
  6. 6 http://www.adobe.com/de/products/flex/
  7. 7 http://www.smashingmagazine.com/2009/04/07/adobe-air-developers-toolbox-resources-and-tutorials
  8. 8 http://shoooes.net/
  9. 9 http://shoooes.net/
  10. 10 https://jetpack.mozillalabs.com/
  11. 11 http://www.greasespot.net/
  12. 12 http://labs.mozilla.com/projects/ubiquity/
  13. 13 https://jetpack.mozillalabs.com/
  14. 14 http://arantius.com/misc/greasemonkey/script-compiler
  15. 15 http://developer.apple.com
  16. 16 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariJSRef/index.html
  17. 17 http://webkit.org/blog/386/3d-transforms/
  18. 18 http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
  19. 19 http://tlrobinson.net/blog/2008/07/11/multitouch-javascript-virtual-light-table-on-iphone-v20/
  20. 20 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/GettingGeographicalLocations/GettingGeographicalLocations.html
  21. 21 http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html
  22. 22 http://phonegap.com/
  23. 23 http://www.nintendo.com/wii
  24. 24 http://www.nintendo.com/wii/what/faq#section3_sub5
  25. 25 http://ajaxian.com/archives/the-wii-remote-api-now-your-userbase-is-four
  26. 26 http://wiioperasdk.com/
  27. 27 http://www.nabaztag.com
  28. 28 http://www.nabaztag.com
  29. 29 http://doc.nabaztag.com/api
  30. 30 http://en.wikipedia.org/wiki/Wiimote
  31. 31 http://code.google.com/p/wiiusej/
  32. 32 http://motej.sourceforge.net/
  33. 33 http://www.world-of-cha0s.hostrocket.com/WiiRemoteJ/
  34. 34 http://code.google.com/p/wiiflash/
  35. 35 http://www.youtube.com/results?search_query=wiimote
  36. 36 http://arduino.cc
  37. 37 http://arduino.cc
  38. 38 http://arduino.cc/en/Main/Hardware
  39. 39 http://www.ni.com/academic/mindstorms
  40. 40 http://mindstorms.lego.com/eng/Overview/default.aspx
  41. 41 http://processing.org/
  42. 42 http://code.google.com/p/papervision3d/
  43. 43 http://www.libspark.org/wiki/saqoosha/FLARToolKit/en
  44. 44 http://vvvv.org/
  45. 45 http://www.osculator.net
  46. 46 http://hackedgadgets.com

↑ Back to topShare on Twitter

Christian Bäuerlein recently obtained his degree in Media System Design. He is passionate about Web development and creating all kinds of projects with JavaScript, PHP, Ruby and Java. You can follow him on this journey through his Twitter profile.

Advertising
  1. 1

    very nice way to grow your skills . .. great post

    0
  2. 2

    very good sure i will grow more with those resources thanks guys SM rocks :)

    0
  3. 3

    Really good

    0
  4. 4

    yups very good advice, now i’m trying to develop mobile app after two year building web app

    0
  5. 5

    sounds like an interesting idea. !
    Thanks for sharing

    0
  6. 6

    Nerdster Magazine

    August 23, 2009 12:42 am

    very nice post

    0
  7. 7

    Shooes has disappeared with _why :-(

    0
  8. 8

    Very nice and exceptionally fun post! These are great ways to tingle designers up with :)

    0
  9. 9

    Nice to see Arduino get a mention. It’s easy to learn and limitless in possibility.

    0
  10. 10

    more informations like this !!

    0
  11. 11

    Not being at all technical, I think these are great suggestions for helping stimulate creativity. However, it seems to me that you remain in a bigger ‘technical’ box with your suggestions. Now I know I’m biased, but how about taking a painting/creativity workshop? How about reading a book that stretches the mind (just finished Outliers by Malcolm Gladwell; brings a whole new perspective to well-known topics)? How about following weird people on Twitter (I’m discovering a whole new world that is profoundly impacting my thinking by following Tweeps outside my ‘comfort zone’).

    I am a Life Transition Coach with a marketing bent who took a social media crash course a while back. I’ve invested myself in playing with social media and have found it that is has blown my mind in terms of possibility & potential. I know that I will become a much more creative coach, retreat & workshop facilitator as a result. So if a people person can stimulate creativity by looking towards technology differently, why can’t techies get stimulated by exploring the non-technical world a bit more??

    Anyone wanna come explore the world with me?

    0
  12. 12

    Great suggestions. I feel inspired just reading. Man, if I could have programed my Legos when I was a kid I would rule the world right now.

    0
  13. 13

    really cool stuff here

    0
  14. 14

    Along the lines of the nabaztag, there’s the chumby.. I’m considering one, it seems like a neat idea.

    0
  15. 15

    Opera has long since removed the documentation for the Wii Remote API but I happen to have an archive of it (link), complete with the live examples. Enjoy!

    0
  16. 16

    Would have been a good articel… – UNTIL you came up with the nabaztag rubbish. That´s what it was all about, the article, heh?

    0
  17. 17

    @Chip, @Chris: Thanks for the links!

    @Tom: I don’t own a Nabaztag myself, but I like the idea and the easy way to customize its behaviour. Tastes differ ;)

    0
  18. 18

    Thanks for this really great article.

    I personally am going to quote the “Work outside the box” from now on.

    0
  19. 19

    Pretty cool stuff. If you’re on Windows, Microsoft has some fun projects you can do on there coding for fun site – http://blogs.msdn.com/coding4fun/

    Additionally, you can also get Robotics Studio for doing fun stuff with Lego. http://msdn.microsoft.com/en-us/robotics/aa731520.aspx

    0
  20. 20
  21. 21

    Brillant as always :)

    0
  22. 22

    Andrew Wooldridge

    August 23, 2009 8:19 pm

    Not sure if my other post got through :) You forgot about an open source alternative to AIR called Titanium : http://www.appcelerator.com/
    It allows you to make desktop apps as well as iphone and android apps.

    0
  23. 23

    OMG what is this Nabatztag thing? I’ve never heard of it! It’s so cute, and I love all of the functions! I want one now! lol

    0
  24. 24

    have to do it do it do it just do it

    0
  25. 25

    Cool! I never knew about the Opera / Wii thing, will definitely have to put together a little game!

    0
  26. 26

    Guillaume Pelletier

    August 24, 2009 6:36 am

    [comment removed by author]

    0
  27. 27

    @Guillaume: Pelletier Nabaztag = dead.

    0
  28. 28

    i looked at Nabaztag and loved it!! But then I stumbled upon a few disturbing articles:

    1) http://www.engadget.com/2009/08/11/nabaztag-cant-make-rfid-cool-has-to-file-for-bankruptcy/
    have they really just filed for bankruptcy??

    2) http://www.pcauthority.com.au/Review/81506,nabaztag-tag.aspx
    evidence of bad server load handling and poor customer service??

    I hope this isn’t true as I’m seriously in love with these little guys…

    0
  29. 29

    very nice post! … great post actually

    0
  30. 30

    Phigets are another great thing to play with, kinda like Arduino but with less hardware and more creating software to work with the various devices they have… bad description…just check the link
    http://www.phidgets.com/

    0
  31. 31

    alfred devanesan Samuel

    August 24, 2009 10:28 pm

    great post dude. well organized.

    0
  32. 32

    Wow. Quite a few ideas i’d not previouslty thought of. Well done.

    My advice would be If you don’t want to be creative.. don’t be a developer.

    – Lee

    0
  33. 33

    Excellent post…Now you made me thinking ;)

    Thank you.

    0
  34. 34

    Outside of the box is the place to be :)

    Great post, thanks.

    0
  35. 35

    hehe, I got one nabaztag:tag, they’re quite cool but because lack of a time I didn’t have a chance to write any app for this device …and that was the actual reason I bought it ;/

    0
  36. 36

    How To Find The Owner Of A Phone Number ?

    If you’re getting prank calls or if you find a number on you caller identification that you don’t recognize, you probably want to find out who is behind that number. The good news is that finding the owner of a phone number is easier than you might think with Reverse Phone Detective!

    As long as you have the area code and the seven digit number, you should be able to locate any number’s owner, if you know cell phone lookup reviews viste this web: cell phone lookups reviews

    Cell Phone Lookup – Search Free – Reverse lookup any phone or cell number & get a name, address & more.

    0
  37. 37

    AlaskaWebDesigner

    August 30, 2009 11:46 pm

    Spoken by a true Web designer. We have been trying to get our Web developers think more like designers.

    Custom Alaska Web Designs

    0
  38. 38

    Good article but I would love to see more in depth articles from Smashing Magazine on some of these, especially custom iPhone apps and Wii games. Or maybe a a detailed tutorial featuring a mash-up of all of these!

    0
  39. 39

    Great post, thanks for the list! I must get that nutty bunny

    0
  40. 40

    Good article but I would love to see more in depth articles from Smashing Magazine on some of these, especially custom iPhone apps and Wii games. Or maybe a a detailed tutorial featuring a mash-up of all of these!Phigets are another great thing to play with, kinda like Arduino but with less hardware and more creating software to work with the various devices they have… bad description…just check the link.
    ==============================================================
    Technology Details

    0

↑ Back to top