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 2015

I thought I’d do another quick run-through of what I’ve picked up this year. It feels good to show myself that I’m still learning at a healthy pace.

SVG

I’ve started using SVG more, creating some simple charts and building dynamic graphics for use with Google Maps. I made markers or pins, which have colours and characters set dynamically according to data. I think I’ve finally got my head around the whole viewBox, which took me a while. CSS Tricks provided me with some very useful SVG tutorials and introduced me to the work of Sara Soueidan.

Angular.js

I’ve been tinkering with Angular for a while but have really got into using it day-to-day this year. I found it hard at first because it’s so different to using native JavaScript or jQuery to manipulate the DOM. In Angular you basically set conditions in the HTML, e.g. show this when the data is that, and then to make things happen you just change the data. The data changes and the UI updates. It means you’re not making data changes and UI changes – just change the data and Angular looks after the UI. Once you’ve got that it’s actually a lot easier to manage than writing an app with jQuery.

React.js

I’ve done my first project using React. This is a very clever framework for updating the UI as quickly as possible. It checks what actually needs to change on screen and only updates the HTML nodes that require a change, making the UI very fast and, well, reactive. It’s based on building components which each have their own properties and state. The component or modular approach certainly feels like the way forward for building UIs.

Jekyll

I built the previous incarnation of this website using Jekyll. It’s a static site generator. It works in much the same way as any content management system with templates and a build process but spits out static HTML so it’s faster for the user. It took a lot of setting up on Windows and involved some scary new stuff for me, like Ruby, Python and using the command line. It is an amazing bit of software for building fast sites and very flexible. Definitely worth trying. I eventually moved away from it and back to WordPress as it was just easier to update – I can update from any device anywhere without having to have the complicated local set up. As my content is mainly just text, I didn’t feel the performance gains balanced out the usability for me as an author.

Markdown

Using Jekyll also introduced me to using markdown. It’s a quick way of writing HTML without having to use tags. It keeps the content clean and easy to read, whilst containing formatting. It kind of lets you write HTML without having to break your creative flow to think about formatting. It also enables non HTML savvy authors to publish formatted content easily.

New JavaScript Syntax – EcmaScript 6

I haven’t used it yet but started reading about ES6. There are a few good introductory articles, which show off some of the new features without getting too bogged down in the details. Here’s a good basic ES6 intro. It feels like a lot to learn but it becomes evident very quickly that we’ll be able to write less code and it’ll be easier to understand. Win win.

Google Analytics Event Tracking

I’ve used Google Analytics for years but have just discovered how to use event tracking. I can now track clicks on a particular UI element to see how it’s used, check pre-defined user preferences by reading data out of the browser’s localStorage, measure download numbers for PDF documents. It’s opening the doors to a lot of previously missing data with regards to user behaviour and can help me make better decisions on designing the user experience.

Responsive Web Design

I’ve made big strides forward this year with responsive design. I’m starting, late I know, to think about it in everything I do. It’s a lot more work but leads to much more usable UIs and often forces me to keep the design simpler than I would otherwise, which is probably a good thing.

Bootstrap

I’ve actively avoided Bootstrap for the last few years. I always had 2 major concerns with it: 1) that my sites would end up looking the same as everyone else’s and 2) that I was loading up a hefty framework and then only using a fraction of it, which would be very wasteful.

A colleague reintroduced me to it and I was delighted to find that it’s now possible to create customised builds so you can choose the parts you want to include (no waste) and even set colour schemes, default padding, etc. in the build, replacing the defaults, so there’s less needed to overwrite in a custom theme.

I’ve started using it as its grid layout makes responsive design so much easier than handling each page element and I know that the ready made components and UI elements are accessible where my own might not be.

Codepen

And finally, Codepen. I’ve covered this in another post, Developing in Codepen. In short, I use it every day, it’s awesome.