What if we had No Code on MacOS

Why are there no No Code tools for MacOS? How cool would it be to open an app, and be able to check all the APIs of MacOS.

I wish I had the time to start working on this. But I don’t.

Here’s what I imagine: it’s a native app that you launch super quickly (because it does nothing at launch).

The app lists all the APIs available in MacOS. One after another. With a specification of what parameters it accepts and requires, a short description and a button that reads from or posts to it.

The app also allows you to build your own function by taking inputs, writing small packets of swift maybe, and sending the result to outputs.

No Code has already shown the way online. Why isn’t there any No Code tools on native platforms?

How to reach props via this using Typescript with Vue 2x

This article only describes this specific case, if you want to know how to set up Typescript for Vue this is a good source.

On a recent client project I had wanted to reach prop values of my component and needed to use this, but that causes errors:

// example
mounted(): void {
  this.interval = setInterval(() => {
  }, 1000)

// error
Property 'interval' does not exist on type 'CombinedVueInstance<vue, {}, unknown, Readonly<{poll: Poll; radius: string;}>>'

This caused quite a bit of annoyance before I realised the simply fix.

The solution is just to add a placeholder in data so the Vue instance has this value on initialisation. This allows Typescript to know that the value does indeed exist on the instance.

export default Vue.extend({
  name: 'PollingComponent',
  data() {
    return {
      interval: 0 as any,
  mounted(): void {
    this.interval = setInterval(() => {
    }, 1000)

Now there’s some interesting browser compatibility problems regarding the type of an Interval. I found that it could be both a Timer or a Number depending on the browser. So in the end I just ended up using any. I can’t see any hard in that since it’s a Javascript function.

Happy coding!

How to use Typescript with props in Vue 2x

This article only describes this specific case, if you want to know how to set up Typescript for Vue this is a good source.

I recently had this issue in a client project. I wanted to use component properties with a shared Interface model, but using it directly as a type results in the error:

'Poll' only refers to a type, but is being used as a value here.

So how do you use a Typescript interface with your Vue component?

You make your type a function that returns the interface. Why this works I’m not quite sure of. But it does work.

Interface Poll {
  question: String,

export default Vue.extend({
  name: 'PollCard',
  props: {
    poll: {
      type: Object as () => Poll,
      default: {} as Poll

Happy coding!

How to use Google Optimize with NextJS

This guide will show you how I’ve gotten Google Optimize experiments to run properly on a NextJS site, without doing any advanced implementation.

(Update on 1 November 2021: Vercel just released a new version of NextJS with an example fix for this, read more a the bottom of this post.)

Google Optimize can help you test improvements to your site, but it’s most effective when you don’t need to interrupt developers to add new scripts to your site codebase for every test. Unfortunately creating tests using Optimize’s editor for a site that uses reactive frameworks can create errors.

I’ve found two common categories of errors that pop up when you run Optimize tests on a NextJS site:

Error crashes your site

When your test is previewed you can either see your test blink, or not show up at all, or the site crashes.

Why does this happen?

Your test is probably editing HTML on the page. Causing the reactive framework to develop errors when it rerenders that part of the screen.

How to work around it:

To work around this problem you can constrain yourself to adding HTMLmoving HTML, or adding CSS, but not changing or removing HTML.

Error where a test never starts, or gets zero traffic

When you preview tour test it either never starts, or it’s shown on every page regardless of URL or trigger. When published the test either never starts of the alternative get’s no traffic.

Why does this happen?

NextJS, and other JS frameworks, can send new pages from the server (server side rendered, or first page draw), or render new pages with new URLs directly in the browser. Unfortunately, rendering new pages in the browser does not trigger the same window events as server render, specifically Page Load.

How to work around it:

Add a specific event to your site Router. There are tons of examples on how to setup Routers for every framework our there, a good developer should solve it in an hour, and you only have to do this once.

Specifically we add an event on navigation in your Router, we call one using Google DataLayer to specifically support Google Tag Manager. This is the code we run: window.dataLayer.push({'event': 'pageView'});

Then trigger your experiments on Custom Event: pageView instead of PageLoad and they’ll all work like you intended.

Good luck, and let me know if you have any problems with this!

NextJS 12 update: middleware

Vercel just launched a new version of NextJS with a new level of javascript functions they refer to as “middleware”. These functions sit in between NextJS and the users browsers, but at the edge node instead of the server. This gives us a new solution to test out!

Edge nodes are basically the Content Delivery Networks closest server to the customer, allowing the fastest load times. Vercel, Cloudflare and some other CDN providers have started running serverless JS functions at these edge nodes, allowing really quick server side updates without slowing down your main server.

In this example Vercel shows how to use middleware to check if the browser has a correct cookie set for that specific URL, and if it hasn’t get the correct experiment and set that cookie. This fixes the issue where an experiment isn’t loaded properly because you’re using client side routing, and the cookie is never set properly!

I hope that update helps! I can’t wait to experiment more with middleware.

Splitting the web in two?

I just read Tom MacWright’s excellent post Clean starts for the web which argues that the web stack has gotten so convoluted, so expensive to maintain browsers for, that it might be time for a clean start.

At one point Tom mentions:

My first thought is that there are two webs:
The document web
The “application” web

The document being the old school web; wikipedia and news sites, and the application web being all the JS heavy SPAs like Facebook and Netflix.

I think this is an excellent point. There really is a difference between creating documents on the web, and creating interactive tools. One should be simple, one can be allowed to be complex. But I think we’re failing as web developers to imagine tools for creating documents. It’s so much easier to post a tweet, publish a tiktok video or send a snap, than it is to publish a document online.
Which is madness. If we want a living, thriving, open, web and not a series of walled gardens I think it’s time to start taking this seriously.

How does Focus work?

If you’re interested in personal performance like me, no doubt you’ve read a lot about focus and energy management the last few years. New Studies claim that focus and willpower is like a tank of gas that runs dry if you use it to much during the day. Other New Studies shows that meditation (the practice of focusing and refocusing for short periods of time) increases focus.

So which is it? How does focus work? I think their both right.

Focus seems to work very much like a muscle, if you deliberately practice it, you can focus deeper and with more control (i.e. it gets easier to start and stop focusing). But it also seems to work a lot like endurance, the more time you spend focused, the less mental energy you’ll have at the end of the day.

Which is why I try to focus deliberately, constantly nudging myself when I get distracted, and take resting very seriously. You can’t work with perfect focus forever. You might be able to effect how much you can focus, but always be aware of your limits. When I step beyond my limits, I get annoyed, cranky, feel frustrated about not getting anywhere, and spend even more energy that I don’t have. It’s a slippery slope.

How do you manage your focus?

Massimo Vignelli on focus groups

It is one thing to believe something, and an entirely different animal to put that belief into an articulate argument for that belief. This quote by Vignelli explains the true issues of trusting focus groups and market testing.

“I don’t believe in market research. I don’t believe in marketing the way it’s done in America. The American way of marketing is to answer to the wants of the customer instead of answering to the needs of the customer. The purpose of marketing should be to find needs — not to find wants.

People do not know what they want. They barely know what they need, but they definitely do not know what they want. They’re conditioned by the limited imagination of what is possible. … Most of the time, focus groups are built on the pressure of ignorance.” via BrainPickings

Whenever someone asks me to do a focus group, I usually begin with asking that person what they want the focus group to answer. It is usually quite easy to guess the normal responses. Especially if the product or service is entirely new.

It’s not that the focus group isn’t observant or brilliant, they quite often are. The problem stems from them not having enough time with the product or service to really give us the important information. And sadly we can’t observe a tester for weeks.

Don’t confused with testing for quality assurance purposes, I’ve never seen a project without a few rough corners left, and that sort of testing is essential.

The continuing decline of Twitter

As I’ve written about before I love Twitter, the service, but I’m not very impressed by Twitter the company. Twitter wants to change that, Twitters claims they have changed. This time things will be different. The problem is that Twitter seems to have become even less likeable.
A few days ago Twitter launched Digits, a service completely unrelated to their core product. Possibly because they don’t like the whole micro-blogging thing. Digits is a service to help people log in without emails or passwords (in detail over on the Verge).

The interesting part, to me, is how Twitter deals with developers.

Twitter now wants to reach out to developers, to tell us they’ve changed, by inviting us to a conference about what sounds like dev tools:

As a peace offering, Twitter on Wednesday is expected to announce a suite of tools that aim to make it easier for programmers to build apps, according to people familiar with the matter. – WSJ

But Twitter already burned developers severely a few years ago by closing down APIs. They burned developers so much that Marco Arment just wrote a scathing blog post arguing that we can’t trust them. And I think he’s right.

Responding to Marcos comments a Kevin Weil (“vice president of product for revenue”) tells the Verge:

He (Weil) named a few companies that have made millions of dollars developing on Twitter’s platform, including TweetDeck, Hootsuite, and the social-media monitoring company Radian6, which sold to Salesforce for $340 million. The changes in 2012 were intended only to ensure Twitter had control over its core service, he says. “Our API was so open that we allowed people to compete with us, and so there were changes we had to make.”

Wait. What is Weil saying here? That Twitter as a platform should only be available to companies who don’t make money? Or just the companies Twitter would like to make money? Or is Twitter NOT a platform at all, but a closed service that has an API just to taunt developers?

None of the services mentioned compete with Twitter as a platform or service. One could argue they had competitive UIs though. But shouldn’t all that traffic made it easy for Twitter to monetize? Perhaps sell higher volumes of API access? It’s hard to understand just what Weil intends to say with this strange answer. My only possible takeaway is that Twitter prefers its partners to not actually succeed.

I think this proves Marco’s point wonderfully. Twitter doesn’t want developers. Twitter is not a platform. And they want those meddling coder kids to stay off their lawn.

How to plan UX, the right way

The most common gripe I hear from UX designers is that they’re not invited into the process early enough. This is absolutely a problem. If you get on board when the code is done and time is running out, there’s only so much you can do. But there’s another common problem, rarely talked about. Getting on board too early.
Subtle project fail

Many companies I talk to today want to plan their UX in advance. Basically they want sketches of how the end user will interact with the finished project. Several things can go wrong with this approach:

  • You get locked into what the project was supposed to be and you can no longer change it for the better.
  • The sketches might not be technically sound. Small details can often be the largest technical hurdles.
  • There might not be enough time to realize the planned UX, but it’s just so tasty that your iterative process becomes a linear project doomed to miss the deadline.
  • The designer(s) fall in love with an ideal, and are less open to change.

All of these issues, and all the ones I did not list, can be summed up in this sentence:

Premature UX is like masturbating before sex

No one is satisfied, it doesn’t help you with the actual project and worst of all: The people involved in the pre-production process feel they’ve done some real work. Worst case they might feel that their job is already done. Just as the real work starts.

When and how to plan UX

Instead of trying to plan out a theoretical product of a project, find the parameters:

  • Define a problem that the project is trying to solve, without actually proposing the solution.
  • LIst the key issues and responsibilities the project must adhere to.
  • Set measurable targets for the project, then divide by half.

This way the problem solving is a part of the project, and the project may run more smoothly. It also forces UX to be a part of the project process instead of just something to check off before the project starts.

As always, the key to great UX and design is iteration. Having UX as a part of the development process, without the limitations of a set goal, makes a vast difference.