Front-End: Shaping Up With Angular.js

in Front-end

We recently revamped how Code School courses are built and our upcoming Angular.js course will be on our new system. While this is largely a team effort, I have to give props to Drew Barontini for what he did for the front-end portion. Channeling his obsession for organization and efficiency, he created a system that reduces the front-end work by at least a week (in hours).

What to do with the new spare time

Reducing the work necessary for each front-end course allows us to spend more time analyzing the UI for improvements and adding more fun to your visual experience.

image

As Ann recently shared, we have a backstory to this course flow and some fantastic illustrations. Considering the Flatlanders and how Angular.js provides fluid experiences, I wanted that banner area in the UI to contain fluid elements with motion.

Learn by doing

Banner animation seemed like it could be processor intensive, so I was leaning toward SVG or Canvas. Building an animation in either one would be a great chance to learn while doing for me.

First things first, I wanted to learn how the basics of drawing in Canvas worked. A few tutorials later, I had this amazing triangle up on CodePen. Now I was ready to conquer the world of animating shapes. While explaining what I was thinking and what I wanted to use, Nick Walsh was all like, “ Flat Surface Shader.” It was slightly better than my triangle. Ok, it was amazing!

Not only is FSS very close to what I wanted, it was also open sourced with an MIT license. Thank you to Matthew Wagerfield and Tobias van Schneider for sharing their great work.

image

The repo had the core functionality and examples, but I was really after the imagination and experience that Matthew’s demo had. To find out if I could make it work for the course, I grabbed the JS from the demo and got a prototype working locally. This initial prototype is up on CodePen as well, but the final JS has app-specific callbacks in it so it’s hard to share outside of the course.

Once I was sure, I reached out to Matthew to find out if his demo code was covered under the same MIT license (since it wasn’t part of the repo). He responded very quickly with the “all clear,” so I pushed an initial commit to our course repo.

Teamwork FTW

Adam Rensel came in with the finishing touches, optimizing my version of the JS and adding a way to adjust the timing of the lighting.

Drew’s efficiency improvements, Matthew and Tobias’ open source share, and Adam’s integration allowed us to deliver something fun for this course in a short amount of time. This allowed for more time to test and make adjustments to the UI. We really hope you enjoy Shaping Up With Angular.js. Go play it now and enjoy the extra touch of animation!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Dan Denney

I’m a seriously good copy and paster. Front-end dev for @codeschool, lover of all things web design/dev related and founder of @frontendconf.

Might We Suggest