Hi, I’m Joakim

I write about front-end development
and software architecture

When setting up a new website, many developers start by adjusting the base font size in their CSS using html { font-size: 62.5% }. This changes the default font size from 16px to 10px, making it easier to reason about rem values, which allow users to scale the font size according to their preferences. This approach works well on desktop browsers and Android devices, but unfortunately, it doesn’t work on iOS and iPadOS.

Apple handles dynamic font scaling differently by using system fonts like -apple-system-body and -apple-system-headline. The challenge is that none of these fonts map directly to 10px. For example, I typically use -apple-system-body as the base font, which defaults to 17px, requiring additional calculations. To complicate things further, desktop Safari supports these system fonts but renders them at smaller sizes than expected, so it’s often better to revert to a more traditional method here.

Here’s an example of a better font setup:

html {
  font-size: calc(100% * 17 / 16);

  @supports (font: -apple-system-body) and
            (-webkit-touch-callout: default) {
    font: -apple-system-body;
  }
}

:root {
  --font-size-100: calc(20rem / 17);
  --font-size-200: calc(25rem / 17);
  --font-size-300: calc(30rem / 17);
  ...
}

By using this CSS, you can use the font variables and they will scale perfectly and adapt to the user’s preferred font size. It’s a great way to ensure a consistent and flexible typography experience across devices.

Year Two Review

My first year as a freelancer was, without a doubt, the best year of my professional life. However, as I reflect on year two, it turned out to be the absolute worst. Freelancers often talk about all the benefits, but freelancing isn’t for everyone. To be honest, I’m not sure it’s really for me.

Let me tell you more as I review my second year.

Read article

One thing that always gets me excited and inspired is attending conferences, and one of my absolute favorites is CSS Day in Amsterdam. This year’s conference was no exception.

It’s hard to summarize two jam-packed days of talks, so instead, I decided to share a fantastic summary written by my travel friend.

goodvibeson.ly

Reflections after CSS DAY 2024

This week, I attended CSS DAY Conference in Amsterdam for the second time. Last year, there were so many new things on the CSS agenda that I went home feeling both inspired and humbled. This year, I wasn’t sure what to expect.

Almost two years ago, I decided to leave my steady paycheck and become a freelancer. The primary motivation for this was to be free to choose how I spend my time and what I want to work on. Now, it’s time to use that freedom.

Starting today, I will dedicate half of my time to my own projects. I’ve always worked on side projects and wondered how far I could take them if given the time they deserved. I doubt this will make me rich (probably the other way around), but I hope it will result in something I can be proud of and call my own. That’s the dream!

As I get closer to a release, I will write more about what I’m building.

Last week, I spoke at Jfokus again for the first time in ten years. But this time was different; I shared the experience with the awesome Jessica Skårbratt, which made it way more fun. Our talk was about Server-Driven UI and how it can empower teams to communicate better to build great software.

The talk went well and triggered some very interesting conversations. There were probably things we could have done better, but we got our message out there, which is what matters. Most people can’t be Una Kravets or Dan North out of the gate, but they often have something to share, and we hope our talk inspires someone.

Thanks to everyone who attended, and thanks to Jfokus for having us. It was so much fun, and we hope to speak together again soon.

It has been a crazy year where I’ve spent most of my time awake thinking about software architecture and how we should solve our current project in the best possible way. Now, we’ve done our part; six senior architects have dissected our proposed solution, and it looks like it passed.

This means we can only wait and hope our project gets a thumbs-up. It’s time to relax and try to find new energy.

This is how I do it. What do you do to stay motivated?

Creating Server-Driven UI Apps

In part 1 and part 2 of my Server-Driven UI series, I’ve described why you should care and how to create a server that implements the business logic and defines the views to render. Now comes the fun part: it’s time to create iOS and web apps that render these views.

Read article

Building a Server-Driven UI Server Using TSX

A couple of days back, I introduced the idea of Server-Driven UI. In this post, I’ll show you how we use TSX to create the server part. I have to admit, this feels strange. But if you follow along, I believe I can convince you that it’s actually not.

Keep your mind open, and I’ll show you something special.

Read article

Thanks to the React Meetup for letting Jessica Skårbratt and me speak about Server-Driven UI today. It was so much fun.

meetup.com

Inferno! | ReactJS Göteborg

Todays agenda: “From Technical Debt to Technical Health” with Mikael Vesavuori and “Server-Driven UI using React-ish” by Jessica Skårbratt and Joakim Kemeny

Introduction to Server-Driven UI

I love building apps, especially native apps, where I can integrate with the platform and create fantastic experiences for those who use them. As a consultant, my clients often have different goals. They want the apps to be cross-platform, look the same everywhere, be fast to develop, and often only exist to support other parts of the business.

Can these two worlds be combined? In my recent project, we decided to try. In a series of posts, I will explain our approach.

Read article

I’m so thankful that Jessica Skårbratt and I got the opportunity to speak about Server-Driven UI at today’s FrontendForum. It’s been a while since I last spoke at a meetup or conference, and as it turns out, I’ve really missed it.

Thank you to everyone who attended.

Year One Review

One year ago today, I quit my job and began my journey as a freelancing front-end developer. I didn’t know what to expect, so it’s hard to grade my year, but life as a freelancer is pretty great. It’s time to review my year.

Read article

One of my favorite talks at #CSSDay was Sophie Koonin’s talk about the joy of personal websites. It truly inspired me. Apparently, it inspired my wonderful friend Jessica Skårbratt as well as she released her new shiny website today.

I’m so happy for her – congratulations!

goodvibeson.ly

Home | Good Vibes Only

Welcome to my playground! This is where I gather stuff I’ve experimented with and thoughts I want to share. With a love for color och playfulness.

I couldn’t stop myself. After #CSSDay I had to play with my website. So if you are running Chrome Canary with the flags Experimental Web Platform features and viewTranstion API for navigations enabled, my micro-posts now animate in the timeline as it scrolls, and articles animate into view when clicked.

Why? Because it’s fun!

I’ve been writing CSS ever since its introduction in 1996. I thought I was keeping up, but after two days at #CSSDay in Amsterdam, I realize I know nothing! CSS has changed completely in the last three years, and it’s awesome!

Web development is so much fun, and I’m so excited to re-discover this new world.

Understanding 11ty's Collections

In the first article of my web development series, I described how to create the initial pages of a blog using 11ty. With the simple pages wrapped up, it’s time to turn up the complexity a bit. An actual blog needs an index and maybe an archive page, so in the second part of my series, I’ll focus on that and show some tips and tricks along the way.

Read article

Building a Website Using 11ty

Ok, I admit. I have a thing for static site generators. It started with Jekyll; after that, Gatsby was my weapon of choice for a while. But new tools keep popping up every month, and my new favorite, without a doubt, is 11ty.

In the first article of my web development in 2022 series, I will show how I use 11ty to create this site.

Read article

Rebuilding my website really made me appreciate how much goes into building a website in 2022. HTML and CSS aren’t enough! You need open graph metadata, security headers, accessibility…

So I decided to write a series on this topic. The first article will go live tomorrow.

This was the perfect ending of a perfect day. Thank you, everyone, for your support and kind words. Now it’s time to get to work.

Time for Something New

Today marks a special day in my life. Today I celebrate my first day as a freelance developer! After being an employee for 20 years, I now work for myself, and it’s both really exciting and absolutely terrifying.

Read article

I don’t know why, but for some reason, I just stopped writing here. Maybe it had something to do with staying at home for the last two years, but it is a shame, and it’s all about to change.

Exciting things are in the works, and I’m thrilled to share them with the world.

I didn’t expect to hear about my small home village Bäckhammar in an AWS keynote but hey, why not. They are not building a data center there yet though, they are starting with a wind park but you never know…

For the first time in many years my list of things I have to/need to do is empty. Now it’s time to start working on something new that I really want to do. This is going to be fun.

Thanks to the awesome WebKit team, who implemented support for the prefers-color-scheme media query, this will soon go live on kits.se.

Going through 1Password to delete as many accounts that I can tonight. Turns out I have a lot of accounts that I don’t get any value from; some that I actually pay for.

Biggest service so far, Facebook. I think I’ll be ok though, my account has been deactivated for years.

Day one of #SoftwareFaster with @tastapod done. Really happy so far and a lot of ideas and thoughts are spinning around in my head. It will be interesting to see how we can apply this in my team.

Back to work after a really great summer. Time to add some polish to this banking web app to get it ready for production.

This is definitely a strange tradition but it always marks the start of our month long summer vacation so it’s one of the highlights of the year. Happy summer!

Summary of Apple Worldwide Developers Conference 2018

Every year Apple invites the community to their Worldwide Developers Conference and even though 6 000 developer gets to go every year it’s really hard to get a ticket. For me it took six attempts but I finally got one and it was worth the wait.

Read article

After seeing Clam chowder in every WWDC demo I had to try it. I would not add it as a Siri Shortcut though.

Good bye WWDC18. It’s been such a great week and I’ve met so many great people. I’ll try to collect my impressions in a blog post later but right now I’m just hoping I’ll get a ticket next year because this was really awesome.

Yes, I promise, I’m at a developer conference! I’m just having way more fun at the WWDC18 Bash than I ever thought I would and Panic! At the Disco was really good.

The Relay FM Live show today was so good. @ismh and @imyke really know how to put on a great show, hope to see you next year.