What I Learned in 2016 (Part 2)

This is the second part of a three-part post about the new things that I picked up through the course of 2016.

I (finally) took some big steps in CSS this year, picking up some of the things I’d been putting off for a while.

Flexbox

I’d heard a lot of good things about Flexbox but having to support older browsers I’d never really bothered with it. Finally, this year, with support for older IE getting dropped I decided to dive in. It’s amazing. It can handle just about anything you would need for layouts. I’m sure there are now loads of great resources for learning it but the two I used were Wes Bos’s Flexbox.io videos and Chris Coyier’s A Complete Guide to Flexbox.

Sass

The really big one for me this year was learning Sass. I know I’ve come to this very late. I was never that keen on the idea of adding another layer of complexity for my own convenience rather than for any actual user benefit. I still don’t think it’s really needed, it’s a just a nice convenience. That said, it does make writing CSS, particularly modular CSS a lot easier. Nesting, variables and mixins make it much easier to keep things consistent and manageable. CodeSchool’s Assembling Sass course was very good.

Bootstrap

I’ve used Bootstrap on and off for a while but only recently did a course in it. 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. Our friends at CodeSchool came up trumps again, Blasting Off with Bootstrap.

(Angular) Material

I didn’t go deep into this, just had a bit of a play. Angular Material is very nice and fairly easy to use but I came unstuck as I was trying to use parts of the framework within an existing page layout. It got messy pretty quickly. I think Material is a bit “all or nothing” – you use it fully or not at all.


And now for something completely different…

Being a front-end guy I rarely (never) touch the database world. Writing a request to an API is about as close as I get but recently I’ve poked about with a couple of things.

MongoDB

I liked the name. I got curious. I’ve done some stuff with SQL many moons ago so I was interested to see how a database could work without it. If you’re used to JavaScript objects and JSON it’s actually really nice to use. You just push and pull objects, query by properties, that kind of thing. I didn’t go deep into it but was very impressed. It’s very much sticking with JavaScript thinking. I think it’s got a bit of a bad reputation but I’m inclined to think that was some early teething trouble and mud sticking rather than a serious issue. Glass half full. I might be wrong.

Airtable

Another play thing. Airtable lets you build databases and views, query, filter, sort, run formulae, rollups, lookups, etc. It also gives you forms, galleries where you can show your data in a card format, calendars and a whole lot more. It’s free for the basics and is lovely to use mainly down to some very good UI design. It also has an API for sharing the data with applications.

 

More in the next part…

 

Learning Flexbox

I’ve just, finally, learned how to use the flexible box layout, more commonly known as Flexbox. I’m not going to explain it as there are other sites that can do a far better job of that but just wanted to share some excellent resources for learning it as painlessly as possible.

I’ve delayed on learning it for what feels like years as I’ve had to support older browsers and trying to provide alternative layouts for old and new was just too much of a maintenance headache. Now I’ve learned it there’s no looking back.

Here are 3 excellent resources to help learn it. They’re all quite different but used together cover everything you could need.

  1. Flexbox.io

    This is a series of free video tutorials by Wes Bos. Each video is short and focuses on one step, which makes it easy to digest. It’s very well explained, gives real examples and even details setting up AutoPrefixer to make it more cross browser compatible. I’d say this is the best place to start.

  2. FlexboxDefense.com

    This site by Channing Allen is a game that gets you to use your flexbox knowledge to position towers to defend against attackers. It’s got 10 levels which increase in difficulty. It’s fun and gives some good practice of actually using the code and seeing the results.

  3. CSS Tricks Complete Guide to Flexbox

    This is a great resource for reference as it lists everything you might want to know about flexbox all in one page. It includes nice graphics which explain the flow of content, Codepen code examples, details on the background, browser compatibility. Definitely one to bookmark. Great job as ever, Chris Coyier!