CreativeJS for non-coders workshop with Seb Lee-Delisle

Programming block

I’m a bit scared of JavaScript. Since I started learning front-end development about seven years ago, I’ve pretty much stayed away from it. That aside from some pretty dodgy jQuery where I can usually bodge something together but would never rely on it. I’ve always said it’s because I wanted to be really really good at HTML first, and then CSS and then JavaScript, but I somehow always stopped short of actually learning JavaScript properly.

This is because I was scared of it. I might be able to put together some basic PHP when working with WordPress, but I really wouldn’t consider myself a programmer. The less that the code I’m writing has an instant visual output, the more I get confused by it. I’ve tried to learn all sorts of different languages but they always go in one ear and out the other. I had just settled for knowing enough to be able to know what the right solution should be and finding someone clever to help me.

There’s a lot of JavaScript on the web

The problem was, that in doing this, I was really limiting myself. There’s a lot of JavaScript on the web. Even if you’re not using it to do something fancy on a site, if you’re a modern developer using progressive enhancement then chances are you’re using some kind of shiv or polyfill that relies on JavaScript. It’s pretty hypocritical of me if I go around saying I don’t use HTML and CSS frameworks, because writing all my own markup from scratch means I understand every little bit of it, when I don’t really understand the shivs and polyfills I’m using to help me use elements of HTML5 and CSS3.

CreativeJS for non-coders workshop

Seb Lee-Delisle was putting on another couple of workshops teaching CreativeJS. Everyone I’d known that had been to one of Seb’s workshops had said it was incredibly worthwhile and good fun. I didn’t have an excuse to put off learning JavaScript. And whilst I go to a lot of conferences, I’d not been to a proper two day workshop before so I wasn’t really sure what to expect.

Seb at the CreativeJS for non-coders workshop

If you look really closely, you might be able to make out Seb’s twitter username projected on his jumper

CreativeJS

Seb has a creative angle on JavaScript as he’s really an artist who uses programming as one of his tools rather than a stereotypical ‘coder’. The whole workshop is based around learning how to create cool visual effects, interactive elements and animations rather than tedious examples of toggle menus and form validation. This really helped me get my head around the JavaScript we were using as it all had very visible, visual results. There was a practical use for all the code that we were taught, but we could play with it in more creative ways. Seb showed us loads of cool, complex examples of what other artists were doing with programming right at the beginning of the workshop and this helped deliver a good dose of inspiration into our heads.

Non-coder

I opted for the non-coder workshop (Seb also runs a more advanced CreativeJS and HTML5 2D workshop) as I really knew very little code. Whilst I could copy and paste a few things into something that vaguely works on the web, I didn’t really understand any of the core concepts of programming. This was the right choice for me as I continually felt challenged by the exercises set by Seb without feeling completely out of my depth.

So what did I make?

Over the course of two days, we played with a lot of fun demos and exercises, coding along with Seb and then being challenged to try new tasks out for ourselves. The part I’m most proud of is the Pong-like game that I created. I wrote every bit of this code by myself, some whilst following Seb’s instructions, and some by testing my knowledge of what I’d just been taught. This feels like a massive achievement for me, I don’t just feel like I’ve parroted a load of code, I feel like I actually understand it.

View it on the CreativeJS graphics playground

And another thing I learnt

I’d previously always consider coding as something you did after design, but Seb’s workshop showed me that you can actually come up with new ideas just playing with the code. Just like in painting, drawing or designing, where you can have ‘happy accidents’, we seemed to frequently have these same serendipitous moments just mucking about with JavaScript.

I really really really recommend you give it a go

If you want to learn JavaScript, or learn more creative ways to use your knowledge, I couldn’t recommend Seb’s workshops more. You can find out more on the training section of Seb’s site, and I’ve just noticed he’s got another CreativeJS for non-coders workshop on in December (that’d be a great early Christmas present!)

And even if you don’t end up going to a workshop, you should check out Seb’s mad fun projects.

2 comments

  1. I’ve been a designer and front-end developer for more than a few years and, like you, JavaScript confuses me. I’ve survived using many of the techniques you described above, but I have to admit that I don’t really know how the code I copy/paste is actually working. I’ve come to grips that I’ll likely never be ‘good’ at any programming language like PHP, but as a responsible front-ender I should at least be proficient at JavaScript.

    I’ve been doing Codecademy and tinkering with JS more. You’ve completely sold me on Seb’s workshops! I’ll keep an eye out for next time he’ll be on my side of the pond.

    Thanks for posting this. I feel less alone seeing someone like you going through some of the same things. Cheers!

    Reply

  2. Andressa

    really nice and motivational post Laura! I live far from Sebs workshops, so i’m still waiting for the online version, but your comments made me really curious about it and a lot more hopefully about the js learning, thankss!

    Reply

Leave a Comment

Your email address will not be published. Fields marked with * are required.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>