In the past few years tons of new web design tools came out. The old model of static pixel-based comps of screens is slowly being replaced with more modern ideas of designing. These new design tools use constraint based components, or even entire lay-outing systems, they use machine learning to suggest you colors and fonts,…
A new design!
Just a quick heads-up, this site now sports a cool new design! After the previous design in 2008 (8 years ago!) I finally got around to creating a new one. I kept the colors and the paint-splatter backgrounds of the old theme, but bumped the font-sizes (hello 2016!) and made everything look great on all screen sizes.
There’s a couple of cool techniques I’m using on the site which I will blog about later, such as the sloped edges on the header and footer or the way my flex-box rows nicely fill out the space they have even when they’re across multiple lines.
About the theme
After this years Fronteers, I was very inspired and wanted to finally, finally update my site’s design. Apart from making a responsive design, and bumping up the font size, what I really wanted to do was create a design that had no fixed widths or strange layout hacks. So everything is either using flexbox, or just relative positioning and sized in relative units such as viewport units or rems.
I no longer use SenCSs. While it has served me very, very well in many projects, and it continues to do so, I don’t need it for this site.
In fact, I’m not using any CSS reset. I’m more than OK with the way browsers render everything I didn’t specify and it saves me a ton of work and a lot of bytes.
What I saved in CSS, I spent in fonts. I am still using Asturias by Insigne for my title. That was a png in 2008, now it’s a webfont. I think I optimized it to contain just the letters of my name, but I’m not quite sure. The MyFonts webfont builder is a little confusing.
For all the other titles I use Haboro Serif, also by Insigne. If you couldn’t tell, I’m a big fan of their fonts.
The main text is set in Libre Baskerville. The previous design used Georgia and I wanted something with the same feel but with a more modern feature set. Libre Baskerville has both ligatures and kerning.
Gone also are the comments. I turned them off a while ago as the spam-to-useful ratio was too high, and I think it’s better without them. Comments on older posts are still visible so no content got lost.
About the site
After not writing a lot between 2012 and 2015, I finally started again in the beginning of this year and I’m glad I did. It feels good to write on my blog and with the release of FromScratch I also rekindled my love of making things.
in the past year I spent some time on the server optimizing things, so this site is now only accessible over https thanks to LetsEncrypt and runs on http2 (if you have it). It’s accessible over both ipv4 and ipv6.
I still need to do housekeeping around the static pages here and there. That’ll happen when I get around to it. For now, I have a couple of interesting things up ahead, so stay tuned and feel free to let me know what you think of the new theme on Twitter or via email!
Having a design system is like having a super power. It takes away all the small decisions you have to make about a design and lets you focus on the higher level goals you have for your design. But creating a design system is a labour intensive process usually only worth it for product teams…
Yesterday, I gave a ⚡ lightning talk on design tokens at the @ReactAmsterdam meetup. I’ve been to a few React Amsterdam meetups and there’s always a really good vibe so I was really happy I got to do a lightning talk on a subject I care about. There were about 200 people in the room…