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:
Thursday 21 May 2020
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 repl.it so I need to use the "hash" mode for the router rather than "history". Simples, eh?
- Anyway, here it is: https://usertestupdated--annoyingmouse.repl.co/
- The original is here: https://usertest--annoyingmouse.repl.co/
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.
Subscribe to:
Posts (Atom)