Thursday, 21 May 2020

SVG background image workflow

I've done a fair bit of work recently using SVGs as background images, so I thought I'd better document the sites I use (thanks again Daniel). I put the original SVG image through SVGOMG! I then paste the resulting, clean, markup into URL-encoder for SVG. Quite a nice and simple process:

  1. SVGOMG!
  2. URL-encoder for SVG

Sunday, 10 May 2020

Layout techniques

You're all lucky bleeders! You are! These are the days of miracle and wonder (And don't cry baby, don't cry). When I started, I was using tables for layouts and thinking they were the best thing since sliced bread - how could they ever be beat? I even, and this shames me significantly, spent a fair amount of time figuring out how to do rounded corners using tables. That's from 2005, don't you know! Don't blame me for the errors in my youth; even then I had to code things for IE.

I did make a foray into float-based layouts, but since that time I stopped worrying and offloaded the heavy lifting to frameworks for a few years. Until, that is, that last few years when CSS frameworks started to feel a little constraining.

So, in my first book, I took a wander through the different ways of creating a layout. And let me tell you, there are ever-so-many options now!

These are the methods I discuss:

Table based

Float based

Float based with wrapper

Position based

CSS table based

Flexbox based

Grid based

The examples above are different from those in the book because... reasons. I guess that after spending hours and hours staring at them, I've clocked that they could be better, and I've refactored them as a result. The same happened yesterday when I spent hours looking at an experiment from the book.

I've been doing this professionally for something like a decade now, so if I'm not allowed to go back and look at old code and scream like a little girl then Yah, boo, hiss! Of course, the opposite is true, and rarely I'll come across some old code and be blown away at its elegance.

I guess the point of this post though is to remind older, fusty developers (hands-up!) that they don't need to deal with the vagueries of IE6 anymore and can start to embrace some of this new-fangled CSS that's, actually, been around for quite a while! That's not to say that the above will work out-of-the-box on IE11. It's got a dodgy implementation of CSS Grid - but there are ways around that.

Saturday, 9 May 2020

User test, updated

In my forthcoming book, I make significant use of a piece of research I carried out some years back on how users could enter data about their family. The example was contrived, but it served its purpose. I talk about how I could've used a SPA but that at that time I wasn't comfortable building them. I also wax lyrical about Native JavaScript Modules along with various other technologies, so last weekend and this I spent some time putting my money where my mouth is.

I set out to replicate the original statically hosted application using Vue, Vuex and Vue-Router, and I'm quite pleased with the result. Then I got a little carried away and updated Bootstrap from v3 to v4. I also dusted out my old Font-awesome account and threw taht into the mix, along with some SCSS, just for fun!

It's nigh on where I want it to be TBH, except I can't get the router to work correctly; going to any page other than the home page throws an error. Scratch that: I'm hosting on so I need to use the "hash" mode for the router rather than "history". Simples, eh?

I also ran the text through Grammarly.

Friday, 1 May 2020

Animated curves in SVG

The animation is triggered on hover over the path above.

A mate asked about animating an SVG yesterday and it got me thinking about how to do it using CSS.

The original is here, but I like this version as the points also move. After reading a lot from the MBN web docs I figured out that the S stole a control point from the preceding C.

Then I got to playing with quadratic curves. The result is above.