I remember when I first came across Chris Coyer’s article; Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion.
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.
Back when I started web development a loading spinner used to be something that I’d use an animated
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.
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.
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.
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. …
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!
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 is a Node based tool for optimising SVGs. It has a CLI tool that allows…