Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Expand Your Development Skills With Creative Tech Projects

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 Link

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 Link

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 Link

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 Link

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 Link

Mozilla Labs Jetpack

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

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 extension11 on the fly.

Create Interfaces For Your Favorite Gadget Link

iPhone Link

Apple Developer Center12

The Safari browser on the iPhone and iPod Touch offers some JavaScript events13 that let you make use of the browser’s multi-touch interface. Combined with CSS Transforms14, 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 demo15 of multi-touch events and this example showing a more detailed usage case. With the possibility of GPS positioning16 and storing offline content17, 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 Phonegap18: it’s like Adobe AIR for mobile phones.

Nintendo Wii Link

Nintendo Wii 19

The Opera-powered Internet channel of the Wii console offers a supplementary JavaScript object 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 examples20 and a demo application21.

Nabaztag Link

Nabaztag 22

The Nabaztag23 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 API 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 Link

WiiMote Link

The WiiMote24 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 Java25 (here26 and here) and even Flash27 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 YouTube28 to see what’s possible.

Arduino Link

Arduino Nano 29

If you want to create your own hardware, check out the Arduino boards30. Whether you want to build a touch-screen device, a robot or an intelligent sweater, a lot of extensions 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 Link

Lego Mindstorms 31

Though made by the same company, Mindstorms32 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 Link

Visualizing data and creating virtual and augmented realities is a big challenge and also a chance to create something very personal and outstanding. Processing33 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 Papervision3D34 and FLARToolKit35 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 toolkit36 for visual programming and OSCulator37 for sound effects.

Combine Everything! Link

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 Gadgets38.

(al)

Footnotes Link

  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 https://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 http://www.greasespot.net/
  11. 11 http://arantius.com/misc/greasemonkey/script-compiler
  12. 12 http://developer.apple.com
  13. 13 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariJSRef/index.html
  14. 14 http://webkit.org/blog/386/3d-transforms/
  15. 15 http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
  16. 16 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/GettingGeographicalLocations/GettingGeographicalLocations.html
  17. 17 http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html
  18. 18 http://phonegap.com/
  19. 19 http://www.nintendo.com/wii
  20. 20 http://ajaxian.com/archives/the-wii-remote-api-now-your-userbase-is-four
  21. 21 http://wiioperasdk.com/
  22. 22 http://www.nabaztag.com
  23. 23 http://www.nabaztag.com
  24. 24 http://en.wikipedia.org/wiki/Wiimote
  25. 25 http://code.google.com/p/wiiusej/
  26. 26 http://motej.sourceforge.net/
  27. 27 http://code.google.com/p/wiiflash/
  28. 28 http://www.youtube.com/results?search_query=wiimote
  29. 29 http://arduino.cc
  30. 30 http://arduino.cc
  31. 31 http://www.ni.com/academic/mindstorms
  32. 32 http://mindstorms.lego.com/eng/Overview/default.aspx
  33. 33 http://processing.org/
  34. 34 http://code.google.com/p/papervision3d/
  35. 35 http://www.libspark.org/wiki/saqoosha/FLARToolKit/en
  36. 36 http://vvvv.org/
  37. 37 http://www.osculator.net
  38. 38 http://hackedgadgets.com

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

  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

    Gwen McCauley

    August 23, 2009 4:26 am

    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

    Morten Zetlitz

    August 23, 2009 11:47 am

    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

    sweeet!

    0

↑ Back to top