Yet another one of my projects, Naked Adventure, grew too outdated to support it. I had to rewrite it from scratch.
I took the opportunity to redesign it as well. (screenshots before & after at the bottom)
Here's an overview of what I did:
I got super annoyed having to set up all the dependencies for each project every time I started one, and especially implementing user management... Log in, register, confirm email, forgot password, MFA, change email, impersonate, manage avatars, over and over again, booooooring!
So here it is: a template for quickstarting new projects, with all of the above (and more!) included out of the box!
]]>Yet another one of my projects, Avi • Simple placeholder avatars, grew too outdated to support it. I had to rewrite it from scratch.
I took the opportunity to redesign it as well.
It's quite a simple project, so it only took me a couple of hours. Here's what I did:
Bootstrap is awesome. But it’s also a lot. Modals? Popovers? Tooltips? Badges? Toasts? I don’t use any of that!
I already don’t include any of Bootstrap’s JavaScripts, but I should definitely clean up its CSS.
So instead of including
@import "~bootstrap"
I went to its source and copy-pasted the modules that it was loading over there, commenting out the ones I don’t need:
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
//@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
//@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
//@import "~bootstrap/scss/transitions";
//@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
//@import "~bootstrap/scss/custom-forms";
//@import "~bootstrap/scss/nav";
//@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/breadcrumb";
//@import "~bootstrap/scss/pagination";
//@import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
//@import "~bootstrap/scss/progress";
//@import "~bootstrap/scss/media";
//@import "~bootstrap/scss/list-group";
//@import "~bootstrap/scss/close";
//@import "~bootstrap/scss/toasts";
//@import "~bootstrap/scss/modal";
//@import "~bootstrap/scss/tooltip";
//@import "~bootstrap/scss/popover";
//@import "~bootstrap/scss/carousel";
//@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";
The only issue is that I do use forms.scss
a bit. There is a search form in the header that has its <input>
field styled.
So I just inspected that element in Opera and pretty much just copy-pasted the three relevant selectors.
Bum! Starting off with a minified CSS file of 244 KB, now it’s down to 184 KB. A third of its weight is now gone.
But that’s just the first step.
The real big deal in terms of the website weight were the FontAwesome icons. There’s thousands of icons included, but I only use a dozen – so why do I make visitors download them all?
You can load FontAwesome in a number of different ways. One of them are SVG sprites. You can include the definitions of the icons in a form of SVG <symbols>
s, and whenever they’re used, just use a <use>
tag to reference it.
So a wrote a simple service (plus a Twig extension) that would do exactly that:
<use>
tags wherever an icon should be displayed,I just had to add some CSS to display the SVG icons the same way as webfonts in terms of size, position and using the color of the surrounding text:
.icon {
width: 1.1em;
height: 1.1em;
vertical-align: -.125em;
fill: currentColor;
}
Et voilà! The homepage of my blog went down from 765 KB at the beginning, to 704 KB after the first step, to 393 KB now!
Btw, I’ve put my little helper into a library, if you want to check it out.
There’s caveats though... SVG is heavy. The two .woff2
files I was using are 261 KB overall, while the corresponding two sprites are 2.1 MB. But if I filter their content to just the icons I actually use (which is way simpler to do in SVG than in webfonts), it goes down to just 44 KB! So if your website is using a looot of fonts, you’ll probably be better of generating a custom webfont.
There can also be issues related to warm caches possibly circumventing the Optimiser, with data that includes new icons being loaded dynamically in JS (which I don’t do), with the increased execution time (which doesn’t bother me since I use an HTTP cache), etc. Still, in many cases this trick can be very useful. Like mine.
Switching from webfonts to dynamically filtered SVG sprites not only removed the need for two requests .woff2
files, but also the need for the CSS that maps class names to font glyphs. My CSS file went down again, from 184 KB to just 96 KB.
So here I am: having spent not even a full evening on it, doing optimisations as simple as they can get, and ending up with the website trimmed of half of its fat.
Nice 😎
]]>There is a website I’ve created many years ago, Stosłowia (Polish only), which collects stories of up to a hundred words. It never got any users, but I didn’t really care to promote it in any way either.
Last week I’ve decided to rewrite it from scratch, because so many things were wrong about it – from an ancient backend in plain PHP with hardcoded credentials and no separation of concerns, to login with Facebook (and only Facebook) that stopped working... Now it’s a fresh Symfony 4.1 with Encore with some new features (like automatic screenshot generation, seen for instance on Twitter).
But what I’d like to show you, is how a couple of pretty small design changes have made the whole website way nicer visually (IMHO).
Let’s start with the logo. The old one was the laziest option possible: just an icon of a pencil from Font Awesome v4.
The new one is a modification of free vector icons created by Denis Sazhin from the Noun Project (CC-BY), that looks way more individual. Its elements form a “100”, which relates to the name and the purpose of the website.
Maybe I shouldn’t judge the design, if it’s me who created the website, but since it’s mostly a Bootswatch theme anyway, I’ll dare to say: it’s not bad. I like it. It’s clean and minimalist.
What I don’t like is my own choices: like the jumbotron with random background images, which made the text not-so-readable, even with the addition of a text shadow, or the lack of a footer, which makes the website look somehow... incomplete...
So what I did to polish it up:
Check out the end effect below. What do you think? 😉