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.

Thursday, 30 April 2020

Triangles are the strongest shape

After spending the best part of a year and a half of Sunday's writing and editing a book on the subject of front-end development, you can only imagine the angst I felt when I read "The title 'Front-End Developer' is obsolete." on an RSS feed.

Clicking through to the article I was a little mollified that Chris Coyier (who I ended up referencing extensively) wasn't in agreement with the original Tweet. Still, he notes that the profession has changed significantly over the years, if not months/weeks/days/hours (it is sometimes hard to keep up). Even the author of the Tweet seemed to be railing at the focus on JavaScript rather HTML and CSS. Back when I discovered that the front-end trinity of HTML, CSS and JavaScript now sheltered under the umbrella term of Web Fundamentals, I didn't realise quite how much room JavaScript would end taking up, sometimes even pushing HTML and CSS into the rain.

I guess that's because JavaScript isn't just a simple technology anymore. Frameworks have moved in, sometimes whole new languages like TypeScript have barged in like they own the place! HTML is even being nudged out of the way by JSX and don't get me started on CSS-in-JS (though I do sort of like it TBH). JavaScript's getting all greedy like some crazed Abzorbalovian (go on, Google it). Except it's not all charming like Peter Key, but perhaps I'm being disingenuous with this analogy: JavaScript itself isn't at fault; instead, it's developers.

I think that some frameworks, with their use of static typing (yeah, I'm looking at you Angular), do so to ease the movement of "proper" developers into the front-end. Instead of having to dirty their hands with markup and fuzzy and oft-times ill-supported CSS, developers can instead code up beautiful, statically typed, TypeScript. TypeScript which their transpilers gob out as ugly old JavaScript that they never have to look at in its raw state, all shivering and misshapen. Then some others (yeah, you React, you with your JSX (which I sort of quite like too TBH)) shuck the whole HTML shebang altogether and instead use an extension of JavaScript that looks like but isn't HTML. I guess this situation is only going to get worse as developers start casting their eyes over the charms of WebAssembly.

But what a shame, I can understand why it happened though, JavaScript has come ever such a long way of late and some of us just didn't notice. This evolution started with ES6, and the standard is only improving; native modules is a revelation (just a shame I don't code for ever-green browsers). Frameworks are fun but do we still need them all that much? And CSS, oh goodness me, CSS! I'm working with such a skilled CSS maestro (yes, you Daniel Martínez) that I sometimes look at the things he has crafted, and that I was just about to implement in JavaScript, and boggle. It almost feels like, just as CSS was starting to give us just what we wanted, we decided to throw it away in preference for - not even JavaScript - TypeScript.

TypeScript eh? Static Typing, eh? What if I like playing all fast and loose with variables and embracing the whole truthy/falsy nature of the language? Sure it can catch out young 'uns (and old 'uns too sometimes, but that's why we have ===), but that's fun as well as it can sometimes lead them to moments of delight!

And don't get me started on developers re-inventing the wheel with Web Components! Don't get me wrong, Web Components rock, and a better melding of HTML, CSS and JavaScript you couldn't hope to find, but they sometimes go well overboard, and they're not quite there yet either as they rely on other things. I read an article today about select inputs and their alternatives, except that the alternatives were mentioned far before the native implementations were, and it was only in the closing paragraph that the reader was encouraged to use native selects. Browsers and HTML are smart! Embrace that smartness and don't spend ages importing something (and it's related dependencies) when you've got the tools to hand already.

But this isn't a rant about frameworks; this is more a gentle reminder to those developers who get lost in the joys of pure code (something I'm also guilty of (that link is 10 years old!)). Look up every once-in-a-while and check what's going on around you. Ever-green browsers are very nearly the norm (March 2020 sees IE11 making up just 2.39% of the Web Browser Market Share), and you don't need to worry quite so much about supporting it. Enjoy modern CSS, read a couple of articles about CSS animation, play with some SVGs and read the MDN on HTML5!

Bring HTML and CSS back under the umbrella! Triangles are the strongest shape, after all. Walk like an Egyptian (cue The Bangles)!

Sunday, 19 April 2020

More Inkscape Hexagon stuff

That was lots of fun and I got a chance to use the picture element for the first time!

Here it is with black and white backgrounds:

And here is the SVG on a Gist.

Friday, 17 April 2020

Playing with Inscape - Hexagonal Binary(ish)

Last night I was playing with Inscape and came up with the above, I'm quite pleased with it. Then I had half an hour over lunch so updated it a smidge:

I'm not sure which I prefer, but I think I'll get the grey background one printed large and check it out.

I've put the source SVG online here.