TOPIC:

Okay, I guess I wasn't quite done yet... thinking it's probably a ridiculous amount of work I'm gonna have a go at making the sky in the header completely with code alone (except Mount Fuji). Gradients for the colours and SVG for the clouds. This just looks to good not too give it a try:

Making realistic clouds with SVG noise and shadows

First loose fiddle at a gradient, using the colours from the original image, is not too bad actually. It would also mean I could animate the clouds separately from the sky itself...

Caniuse reported that Firefox will finally support conical gradients but I just updated to version 82 and no luck yet. What happened to that browser, they used to push the agenda all the time. Now they're more like the new IE.

Had a go at it but it doesn't seem feasible to make any kind of predictable cloud yet, there are just too many factors at work (plus it's based on random noise).

Anyway, how silly is it that even though web design was based on printed media, even the most basic of text alignments isn't yet possible apart from Firefox being ahead of the curve a few years back. Microsoft in fact regressed on that one.

caniuse.com/css-text-justify



Edit - hmm... works in Chrome too despite what Caniuse says.

EditPad and IrfanView have to be some of the greatest pieces of freeware on the planet. The latter allows you to save images to the webp format, which appears to use a pretty smooth algorithm that saves a few bytes over the jpeg format everywhere. Unfortunately IrfanView doesn't allow to save webp with transparency or the png images could be replaced too. One of its few flaws because with all the plugins it's incredibly versatile. Only disadvantage to using the newer image format is that it requires extra markup for fallbacks because not every (older) browser supports it.

www.irfanview.com

Doing all the batch processing with it too...

Additional observations - for the aforementioned fallbacks one can use the picture element:

www.w3schools.c...icture.asp

While using this, it can also be applied to serve some smaller images for smaller screens. So I went ahead with that as well which boosted Pagespeed Insights into a 90s score. It's better on mobile than desktop now.



Not that it's the measure of all things but it's interesting to see.

Silly Inkscape has no option to limit the number of decimals when it describes an SVG path. So I wrote a little script in Codepen that limits it to 3 and shows the new path in the browser, which can then be copied. That eliminated nearly 3500 decimals that were describing paths beyond 1/10.000th of a pixel. I'd say that cleans up nicely.

The webp format is better and smaller than jpeg in all but a few cases. It tends to make edges that are supposed to be crisp somewhat too smooth though, as in the case with the optional blue-red splash background. So that's the only jpeg remaining (for modern browsers).

Next is yet another experiment with SVG, this time masking. I've already traced the outline of the mountain on my home page and will be using this as a mask to create opacity so that the png format is no longer necessary...

That masking stuff is like going to a magician's course and then suddenly ending up with a rabbit you're not sure where you pulled it from. But with a whole lot of reading and fiddling around I managed to pull it off. Much pulling happening. Without having a full grasp of the subject yet (but apparently enough).

To make the sky appear to go across the mountain (while scrolling or pressing the buttton to start the animation), I use two images. In the old approach I put a png on top from which I removed the sky in Photo Shop, making that part of the image transparent.

Now in the new approach, i use the same image twice. This time the sky is removed (made transparent) with an SVG that is used as a mask applied to the second (identical) image. The black area will be fully transparent and let the underlying image through while the rest is obscured. No need for a large png anymore.



This is just the outline I traced in Inkscape, with a black fill. And a tiny bit of blur on the edge to simulate some feathering.

Don't ask me to explain how it works exactly. Black will be transparent, when white is used it will be fully opaque. Colors in between will be partly transparent... see, that made no sense at all.

css-tricks.com/...ask-image/

By the way, with the SVG images I showed here - if you do "View Image" then when on the page of the image do "View Page Source" you can see it's just some text in a file made with EditPad...

The final challenge here will be to merge that mask into the already existing SVG file with the two backgrounds I made before so it also requires one less server request to fetch it (as of now it's still separate). Then I might attempt to create another mask for the image of the Sauber so that it no longer requires a png with transparency either.

At that point I think I've really exhausted every single opportunity at improving the home page. Got some new ideas for other pages but I don't think I'll bore you guys with that any further. Unless it's super spectacular of course.



Update - using that mask as an SVG fragment identifier (with hashtag applied to only a part of the file) seems buggy (Firefox didn't like it) so it'll remain a file on its own. The same process seems to be fine when using fragments as backgrounds though.

Masking the Sauber also done. Now using a webp for the image with transparency created by it.



Oh yeah - the digit precision (note, not the decimal) in that mask made by Inkscape is now suddenly 3. I wonder if that has to do anything with me messing with the preferences, which would then only be applied at the next start-up.



To be honest, I don't even think one can notice the difference with the naked eye.

Just a little update because this stuff is about the only thing I've been really busy with. Remade all the icons on the site into SVGs, including them in a single file with the aforementioned fragment identifier technique and a PNG backup. Background textures are updated as well with SVG generated patterns instead of using regular images.

But why stop there, it's good practice on scalable vector graphics. So I had a go at replicating the original spinner (which I will still be using on the sub pages). The first version about a decade ago was an animated GIF of several hundered kilobytes. Then I used a couple of PNGs and animated the center with CSS. Now I've remade it into an SVG... that took a lot of time but I think I'm finally getting the hang of it. New spinner on the left, original on the right.



The green center looks a bit pixelated because such a conic gradient might not be suported in all browsers, hence I had to embed an image that I created as a (mesh gradient) vector before. Fun fact - the shadow reflection of it towards the inside will also be animated to rotate.

In Inkscape the drawing looks a lot smoother but browsers can't interpret that so this needs to be converted to a PNG, then embedded into the same SVG as a data url...

Also - yay, just updated to Firefox 83 and it now supports conic gradients! What timing to have just used them for the first time.

Edit - one improvement there, but they have somehow managed to completely mess up hardware acceleration when it comes to scrolling.