Learn All the Things

Here’s a quick run-through of things I’ve delved into since last year. It’s nice to be able to put a checkmark next to a few items on a long list of things I want to learn.

Sketch and SVG
A year ago I purchased a copy of Sketch, a design app for Mac. Focused on digital design, Sketch also excels at interface design. With this app there is more concentration on design and less on the software itself. The files load faster with fewer over-complicated menus and more intuitive shortcuts.

Since Sketch made it easier for me to create designs, I became even more interested in using SVG. I recommend the following books: Chris Coyier’s Practical SVG and Sara Drasner’s SVG Animations.

Flexbox
With support for older IE getting dropped this year, it’s time to discover the amazing power of flexbox. There are many resources out there for learning it, but I used Flexbox.io videos by Wes Bos and Chris Coyier’s A Complete Guide to Flexbox.

Sass
The really big one for me this year was learning Sass. Although it’s been around for awhile, I wasn’t fully aware of its benefits. Nesting, variables and mixins make it much so easier to keep things consistent and manageable. As I mentioned in an earlier blog, Codepen is greatly responsible for inspiring me to use Sass.

Haml
I can thank Codepen for getting me started with Haml, too. In addition to being so easy to learn, Haml makes code more readable, clean-looking, and compact. What’s not to like?

Bootstrap
I’ve used Bootstrap on and off for a while but recently went through the documentation a bit more thoroughly. It turns out that there are loads of little utility classes built in to handle all sorts of variations of the basic components. It’s well worth learning properly rather than just diving in and grabbing bits and pieces. Like with Sass I don’t think you really need a CSS framework but it can certainly speed things along nicely once you know your way around.

Toastr
Toastr is practical little utility library that does pop-up or toaster notifications. It does require jQuery but is full of options and stacks multiple notifications elegantly. This library has nothing to do with my CSS animated toaster demo, but I think the name inspired me.

GreenSock
GreenSock is a JavaScript framework which makes it easy to animate HTML elements with only a few calls with or without jQuery. Petr Tichy’s GreenSock 101 course is free with sign-up. You can then buy more tutorials if you’re interested. I also like how thorough the documentation is, and there’s even a cheat sheet. This framework is not MIT-licensed, but it’s free for personal and some commercial uses. Read more about its licensing here.

Written on March 19, 2017