Forem: ⚡️

Calstats, My first iOS/Mac app is out!

⚡️ — Sun, 05 Dec 2021 14:07:37 +0000

Last week I finally released something I’ve been learning for and working on for the past 6 months. My first app for iOS and macOS. Made in Swift for the best native experience and performance.

CalStats helps you get insights into your events. Want to know how much you go to the gym each week? How many hours have your spent on that one client? Just enter some keywords.

There’s no need to input times; CalStats uses your existing calendars, and only counts events that you want to, using the keywords and time-spans you want.

You can visualize your data in bar charts, track goals per amount of time (week/month/year), and even export to CSV to use in your spreadsheet editor of choice.

Count on your calendar, with CalStats.

The app is 1,99 on the App Store, and you get both versions: ‎CalStats on the App Store

I’ll answer any questions about development too, I love doing that.

What is the best web-safe font?

⚡️ — Thu, 25 Feb 2021 12:38:48 +0000

Since the dawn of the web, people have been divided. This all boils down to one question: what is the best web-safe font?

All jokes aside, web-safe fonts are an important part of the web. You can safely assume that these fonts are installed on any given device.

Now, it's 2021. You can use custom fonts nearly anywhere. But there are still some very important cases where it's a good idea to set a web-safe font, even as a fallback.
Email, for one. There's no guarantee that your receiver supports custom fonts -- their boss might insist they use a decades old version of Outlook. Or maybe they want to prevent tracking, so they disable remote loading when viewing their email.
That last one prompted me to write this; I turned off remote-loading and received a mail from a colleague, but the font was Times New Roman. The inspector showed me the font used was Calibri.

And that's just email! There are a lot of scenarios where a user might be offline, say when someone might load your PWA without internet, but fonts weren't set properly.

When any of those things happen, you want to fall back to a font that you know the user has.

`font-family: sans-serif`

This is a big one, and a handy one, for many. sans-serif isn't a typeface by itself, but it basically tells the user-agent to pick something that it wants to, so long as it's in that category. The same goes for font-family: serif and font-family: monospace.
There are pros and cons to this approach. The biggest pro being that a user can choose their own favourite font as the default fallback.
The downside is that you don't know what font it's going to be. Maybe the user set Comic Sans as their fallback sans-serif font -- yikes!

There's a real value in knowing what web-safe fonts you can and should use. Maybe you can even choose not to use any custom fonts at all!

Web-safe fonts

There are some misconceptions about what constitute a real web-safe font. Some would claim that Calibri is one. I don't believe that it is, because there are a great many devices (mobile and desktop) that don't support it. I'm going to use Wikipedia's list of Core Web Fonts to define what a true web-safe font is.

I'm going to focus on three font-types: Sans-serif, Serif, and Monospace. Cursive and Fantasy have too few to pick from.

The Best Web-Safe Sans-Serif

There's a saying in Dutch that says, "You cannot dispute taste". Well I think that's a load of crap. Verdana is the best web-safe font, and here's why: it's made to be comfortably readable (successfully, I might add), pleasant, on even low-resolution displays. Bold is actually BOLD.

Now I hear some of you saying, "but what about Arial?"
Arial is famously a clone of Helvetica. It's fine. It's pretty much readable, metrically identical to Helvetica (which might be important in print, but who cares about that here, right?), but it's not nice.

It also suffers the same fate as Times New Roman, albeit less harshly, for being a default font on many systems. This can make it come across as tasteless and sometimes even thoughtless.

The best web-safe monospace font is Andale Mono, and the best web-safe serif font is Georgia.
The choices for monospace/serif come down to just two per category, and the other choice is obviously much worse.
Times New Roman, as said previously, suffers from being the default and instantly looks like the author is still putting lorem-ipsums in their pages.
Courier New, likewise, looks like an error message every time.

Andale Mono and Georgia are not bad at all and serve their purpose neatly.

By the way, shout out to Trebuchet MS for being an overlooked, yet fun lil' font.

Thanks for reading. In my next blog post I'll be discussing the best web-safe color name. (Spoiler: it's rebeccapurple)

I really, really don't like hamburger menus

⚡️ — Thu, 21 Nov 2019 13:51:54 +0000

≡

We all know the infamous hamburger menu. It's those three lines that stretch horizontally, that tries to look like a vertical list. It's become incredibly ubiquitous ever since website had to update their websites to support mobile resolutions.

And I hate it. I despise it. The user-experience is terrible; why hide such an import piece of your website behind a mandatory interaction? Do you have more than four items? Having more then four/five items in a menu will overwhelm many people, so maybe you should not even bother.
Why not show the four most important items, and hide the rest behind a menu? You don't have to hide your entire menu. Let people click on 'Contact' without first having to wade through the terrible experience of opening a drawer.
Why not use a horizontal scrolling menu? It's sleek, and doesn't overwhelm the user.

They're also nearly always at the top of the page. That was fine when phones where smaller, but with the current trend of tall and big phones (not to mention smaller tablets) it takes me having to reorient my hand to get to it.

Hamburger menus add bulk, they add useless complexion. They add a terrible interaction that should have never existed in the first place.

But I have to use it, because clients demand it. Because it's recognisable.

Do any of you have any tips how to deal with this?

I haven't written many posts. Would you like to read more things? About JS, ES6, ReactJS, Preact, (S)CSS? Might be able to whip something up if you want, so let me know.