What I Learned in 2016 (Part 3)

This is the third part of a three part blog post on the things I’ve learned over the last year. So far I’ve covered HTML, CSS and a rare (for me) bit of databasey stuff. And now the final part, the JavaScript…

Node.js

I haven’t gone into this in depth but was curious about how JavaScript might look on the server. There are lots of in-built functions for working with files and requests but otherwise it really is just JavaScript – objects, functions, if statements, for loops, etc. I think it would take a bit of getting used to but having a JavaScript background it’s probably much easier than learning something else like Ruby or PHP. I learned this from CodeSchool, Real-time Web with Node.js.

Modular Functions in JavaScript

I really didn’t know what to call this but I know what I mean by it so I’ll try to explain. It’s just a way of thinking about JavaScript functions so they’re separated and easier to test. Each function performs a single job so rather than a function being a wrapper for lots of different jobs, e.g. a conditional test then some string manipulation then constructing an object to return. Each job is broken down into its own function so we end up with lots of tiny functions which call each other rather than long routines. The second part to this is not relying on any variables which sit outside of the function scope. So, not referring back to a variable in the global scope or in a parent function. If our function needs to refer to something it needs to be passed in explicitly as an argument. This just makes it completely self-contained so it can be picked up and dropped in a different context and still do its job without worrying about being affected by the scope.

I started using this methodology after reading a blog post but, sadly, I can not longer remember the source. If anyone knows what this is called or who might have written a good article on it please let em know in the comments.

ES2015

As I’ve managed to start dropping support for older browsers it has opened the doors on some new features in JavaScript, namely, ES6 or, as I think we’re supposed to call it, ES2015. I did another CodeSchool course, ES2015: The Shape of JavaScript to Come. In short it takes a bit of getting used to but ultimately means you can do more writing less, which has to be a good thing. Using tools like Babel we can even use it in older browsers now – it cleverly converts it back to ES5 where needed.

TypeScript

TypeScript is like JavaScript but upgraded to be a strongly typed object oriented language. It then compiles down to JavaScript, a bit like Sass to CSS. Like CSS is valid Sass, JavaScript is valid TypeScript so you can convert your existing files without it being a major drama. You declare the type of any variable and if there’s any error or uncertainty it won’t compile. This means that you can never have any type errors in production, which is very nice. The number of times I’ve had to fix bugs around some function expecting an integer but getting a string. The other side to it is being able to use modules and classes – it’s proper scoping and namespacing.

As we’re working with Angular I actually did the Pluralsight course, Angular with TypeScript. With hindsight, I’d probably just do a TypeScript course so as not to blur the lines.

Dragula

This is a library for using drag and drop functionality. I’ve always used jQuery UI draggable, droppable or sortable previously but was keen to see what could be done without the jQuery dependency. Dragula is actually very similar to use, selectors, options object, etc. but uses vanilla JavaScript. Getting into more complex uses the documentation and Stack Overflow answers started to dry up a bit. I guess that’s one of the advantages of using the big libraries.

Toastr

Toastr is another nice little utility library. This does pop-up or toaster notifications. It requires jQuery so may not be for everyone but has loads of options and stacks multiple notifications elegantly, which is not easy. This is probably one of the easiest things I’ve ever used.

And that about wraps it up. Who knows what 2017 holds. At the moment I’m very curious about some new JavaScript frameworks – Vue.js and Svelte.

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…