2018 what a year! I managed to do a ski season while working remotely doing web development work, spend 3 months travelling around USA & Canada, learned a load of new web dev skills, wrote some articles, moved back to England and landed myself an awesome job. If anyone cares (thanks for reading mum), here's what I did.

Digital Nomading for a ski season

Photo by NeONBRAND on Unsplash

Back when I started web development a loading spinner used to be something that I’d use an animated .gif for.

It’s a funny that a lot of web developers don’t have an up to date website. My guess is like myself, it’s hard to find time/enthusiasm to create your own site when you could be getting paid to make someone else. The Northern Badger website has been an inline SVG and two lines of text since I bought the domain 4 years ago. I‘ve started 3 versions of the website only to get loose interest/decided it was not good enough half way through and scrap the build.

In December 2017 I made a promise to myself this cycle of doom…

Since I started making websites 3.5 years ago I’ve been using Sass. I flipping LOVE IT!!! I feel it fills in a lot of CSS’s missing features as well as making my styles much leaner and easier to work with. I’m trying to really make 2018 a year where I conquer VueJs. There’s a problem. I still want to have my Sass variables, functions and mixins available to all my single file Vue components. I also want to have a bunch if global CSS utility classes being created using the same variables, functions and mixins. …

Sometimes I want to have an SVG as a URL-encoded background-image: url(path/to/your.svg); , often on a pseudo element (see Taylor Hunters article about URL-encoding an SVG). I love doing it this way, as it means my SVG is then inside my stylesheets and saves me an additional server request. I use Sass to run a string replacement function to edit the SVG’s code and therefore animate it. Pretty cool right?! Here’s an example of how to apply this technique to a simple SVG that has a single fill color.

Codepen example of Sass string replacement on an SVG — https://codepen.io/stuartjnelson/full/xYOXRZ/

What we are going to do

Is there a website made in the last 3 years that doesn’t use some form of open-source framework/plugin/tool? I know at least every website I’ve made uses nearly exclusively open source tools. I have always wanted to create something to give back to the community but to be honest, I have never felt good enough or confident in my own skills. I found some good insight from others on the web about just getting this done (shout out to Syntax podcast), Brad Frost sums it up here really well.

So I worked away on and off throughout 2017 on…

Animating an SVG line drawing is super nice and really easy. Chris Coyer has a great article on how to do this. What do you do if your SVG line starts drawing from the wrong place? DO NOT FEAR! I have a simple solution.

A Codepen example where I have moved the animation starting point for my triangle

The Problem — Drawing starts from the wrong place

In this Codepen example I have a weird looking triangle I drew. The triangle at first starts drawing from the bottom left of the triangle but I want it to start from the top of the triangle. …

Badger accordion demo

Like a lot of dev’s, I use open source tools all the time. From my text editor to the CMS that I work with to my regular searches of Stack Overflow. I thought it was about time I made a meaningful contribution to the open source community ( article about my experience of making first open source tool coming soon…). Drum roll please… without further delay here is; Badger Accordion!

Badger Accordion demo on Codepen

What is Badger Accordion?

It is an accessible, animated accordion built using vanilla JavaScript and a teeny tiny bit of CSS. It is just 6.14kb (minified) and Gzipped 1.86kb!

The SVG used in this image was made by Linector from www.flaticon.com

I wanted to be able to optimise a directory of SVG with SVGO. Currently I would optimise them either one at a time using Jake Archibald’s awesome online GUI for SVGO (if I felt I needed a lot of control) or using a Gulp task. As I’m trying to write more blogs and make Codepen’s I wanted a way to bulk optimise a multiple of SVG without using Gulp. I looked at SVGO Docs to find out more about the Command Line Interface tool.

SVGO CLI

SVGO is a Node based tool for optimising SVGs. It has a CLI tool that allows…

Stuart Nelson

Yorkshireman who’s ventured to Bath. Frontend developer; lover of Sass, JavaScript, web animations & skiing. Senior dev at @readyagency, Bath.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store