iA Writer is one of my favorite pieces of software, and I can’t even say why. It just feels so good. In the upcoming 5.2 release, iA Writer will replace the current iA Writer Duo font with iA Writer Quattro, a variable font.

While traditional fonts offer in a limited number of weights, variable fonts offer an infinite scale between the weights and features.

Variable fonts have different “axis” which allow an infinite amount of variations.

Gingham variable font. Taken from Get started with variable fonts by Richard Rutter.

In iA Writer 5.2 we automatically adjust the optical weight depending on the type size you use. Weights change depending on size. The font is getting thinner and tighter spaced as we increase the type size. This has not been possible in the past.

Not just size, but different screens demand different weights, too. Fonts look different on screens; some screens have more or fewer pixels, like retina and high-density retina. Depending on what device you use, we apply different gradings.

Our job would almost be boring if type size, pixel density, and screen type were the only challenges of modern typography. As you might have noticed, dark backgrounds make white text shine brighter. That’s why iA Writer 5.2 tones the optical weight down another 5% for night mode. Who does such crazy things? Crazy people.

I, for one, welcome our new variable font overlords. More words and pictures on ia.net.

If you want to learn more about variable fonts in general, or play around with a few specimens, check out Axis-Praxis.

Robert Heaton shares 39 bullets to improve your blogging. A few of my favorites:

Choose a few people whose style you like and copy it as hard as you can without infringing on any intellectual property. I aim for a combination of the Economist, Paul Krugman, and Terry Pratchett.

If you need a quick name for a generic fictional character, consider using one from a culture or gender that you usually wouldn’t. Even if you don’t believe that representation in the media matters, you’ve surely got to concede that there’s still a chance that it might, and that the cost of sometimes calling your imaginary computer programmers Julianna is zero.

It’s fine to spend 10, 20, 30 minutes staring into space when your plan for the day says that you’re meant to be writing.

It is admittedly even better to spend that 30 minutes spamming down any old nonsense that you can refine later, or that at least helps get you mentally unblocked.

Read all 39 tips on robertheating.com.

I’ve been reading up on SVG and Bézier curves for a side project that involves a custom-made chart (blog post about that later!). Funnily enough, this article on Bézier curves popped up on Hacker News earlier this week.

One little animation in the article totally stands out, and helped me make sense of what the control points of a Bézier curve actually do.

Taken from cormullion.github.io

While you’re waiting, have a look at another animation; this is my artist’s impression of the De Casteljau algorithm dividing the control polygons around a Bézier curve as the parameter n moves from 0 to 1. The idea is that as p1 divides A to A1, p2 divides A1 to B1 and p3 divides B1 to B. So, pp1 divides p1 to p2, and pp2 divides p2 to p3. And you keep doing this until you can’t divide any more, and eventually the point P plots the course of the final Bézier curve. The red and blue parts of the curve show that this technique is also a good way to split a single Bézier curve into two separate ones, and the red and blue parts are separate control polygons.

Read the full article on cormullion.github.io.

When I write a library that’s going to be used by others, I strive for a gentle learning curve. When someone reads code that uses my library, I want them to understand what’s happening without reading a bunch of documentation first. I tend to keep my API’s as explicit as possible, and try to stay away from odd or foreign notations.

My colleague Brent is writing a library to deal with date & time periods in PHP. There was a discussion whether a period’s boundaries should be included in the range or not.

Read more

There are a few fleshed-out articles about why utility-first CSS is a good thing. However, if you’re just a little curious and want a brief introduction, Chris Ferdinandi has your back.

In JavaScript, we create small, modular functions that can be reused throughout the code base to keep our code DRY. In CSS, for some reason, it’s not seen as weird in the slightest to repeat yourself a lot.

Utility classes help keep CSS DRY.

The stylesheet for my website is so small that I can inline all of my CSS still send most of the page in a single HTTP request.

Read the rest of Chris’ article on gomakethings.com.

Hungry for more? Check out In Defense of Utility-First CSS by Sarah Dayan or CSS Utility Classes and “Separation of Concerns” by Adam Wathan.

Since the first iteration of my blog—some time around 2016—I’ve used highlight.js to highlight code blocks. With highlight.js being so popular, I never really second guessed the idea. It was a given to use JavaScript.

A few weeks ago, TJ Miller introduced me to highlight.php by writing a Parsedown extension for it. Highlight.php does the exact same thing as highlight.js: they both add tags and classes to your code blocks, which enables them to be highlighted with CSS. The difference is, highlight.php does this on the server.

Read more

One of the best things about Vue templates is the special v-model prop. v-model allows you two quickly map prop getters and setters without breaking unidirectional data flow. Props down, events up.

Read more

I have a specific pet peeve with user interfaces: things that draw my attention when they don’t need to. In any graphical interface, movement is distraction. Our eyes are naturally drawn to anything in motion.

Motion is a powerful tool. We can abuse this distraction to attract our users to a certain place: a notification, an added list item after a background refresh, etc. Let’s look into the movement behind a form submission. Below are three dummy forms, each with a different server response time.

Read more

In my most recent project at work, I’m experimenting with JSX templates in Vue. Vue offers first-party support for JSX with near-zero configuration, but it doesn’t seem to be commonly used in the ecosystem.

Read more

Maintaining a number of open source projects comes with a number of issues. Reporting a good issue will result in a more engaged approach from project maintainers. Don’t forget: there’s a human behind every project.

Read more

Code splitting is bundler feature—if you’re using Laravel Mix, you’re bundling your assets with Webpack—that allows you to split application scripts in multiple files. These can then conditionally be loaded at a later stage.

Read more

In a recent Design Details podcast, Guillermo Rauch (@rauchg) shares his thoughts on the web, design, the value of code, type systems, cryptocurrencies and much much more.

I have a lot of respect for Guillermo’s philosophies, and what he’s building with Zeit. An early quote from the interview (paraphrased):

I’ve always had this passion for the hyperlink. My whole thesis is everything that has not yet been hyperlinked, will be hyperlinked. If we step back and take that thesis a little further—you look at GitHub and they but a hyperlink on everything. They put a hyperlink on every per-character diff of your codebase. Every line of code. Every changeset. Everything.

Listen to the full podcast on Spec.fm.

Server side rendering is a hot topic when it comes to client side applications. Unfortunately, it’s not an easy thing to do, especially if you’re not building things in a Node.js environment.

I published two libraries to enable server side rendering JavaScript from PHP: spatie/server-side-rendering and spatie/laravel-server-side-rendering for Laravel apps.

Let’s review some server side rendering concepts, benefits and tradeoffs, and build a server renderer in PHP from first principles.

Read more

One of the hardest (and sometimes frustrating) tasks in a programmer’s day-to-day workload is naming things. When I have a hard time finding that perfect word, I generally wind up in one of two situations:

• I have a plausible name in mind, but I’m not entirely satisfied with it
• I have no idea what I could possibly name it

Luckily, there are tools out there that can be of help.

Read more

Laravel 5.6 adds the ability to register alias directives for Blade components. Let’s review some background information and examples.

Read more