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(() => {
    doSomething()
  }, 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(() => {
      doSomething()
    }, 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.

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!

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.

Building web apps with WordPress and BackBone.js

Gave a talk today at WordCamp Norrköping on how to build web apps using WordPress, JetPacks REST API and BackBone.js.
A short presentation on the why and how to use BackBone.js and WordPress to build interactive web, apps or otherwise. My slides are available below and you can find the demo app on GitHub.

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.

The definitive guide to value creation

In my youth I dabbled with dark arts. I thought experimenting wouldn’t hurt, so I tried a little, but little became a lot. My addiction took up all my spare time and heavily impacted my social life. I became alienated by friends and had a hard time talking to people close to me.That’s how I spent six years studying economics.

Continue reading “The definitive guide to value creation”