Duolingo, now with 100% less gamification

Full article

Coming off a digital detox, I'm digging into those things that were eating up my free time beforehand. Some of them have been easier than others. Twitter was a no-brainer, once I thought about it. YouTube was more difficult, but I found something that works for me. I think that's the key, finding something that works for each of us, instead of just accepting these products as-is, without reservation. They're designed to keep us engaged (reading more tweets, watching more videos, pinning more pins) for as long as possible, so how do we keep what's good (or at least salvageable) and moderate the rest?

Take Duolingo for instance. It's a great app with a single core purpose - learning foreign languages - but it has a whole lot of extra gamification features that I personally don't want, and there's no way to disable them. I get that it might be exactly what someone else needs, and that's great for them, but this is a casual thing for me. I'm not interested in paying money to pretend I didn't miss a few days and that my skills aren't slightly weakened.

I don't want leagues and "friends" and achievements, popups for products that don't apply to me, a broken heart that rubs my face in how many lessons I've failed, etc, etc. There's not much any of us can do about it in the phone app, but the website on the other hand... that we can change.

If you're interested in changing your experience too, download the Stylus browser addon (there's a tutorial for using it halfway down the main page), and apply the following script to the URL "https://www.duolingo.com/learn". If you want to know more about what these mean, read up on css selectors.

Now comment out anything you'd like to keep. I commented out line 2 (practice button), line 9 (stories) and line 21 (podcast, which required lines 7 and 19 too, to show the nav bar and more button), and now this is my entire experience. All the popups and gamification elements are hidden, and my stress level is down. ๐Ÿ‘

All these recent posts about using Stylus to hide elements has me wondering about the possibility of having a browser addon that could be applied to a large number of sites. Maybe by using some kind of JSON definition that included the URL for a site, the elements to hide, etc? They could be nested inside each other to create a hiearchy of elements...

{
  "www.duolingo.com/learn": {
    "Hide Gamification": "#root > div > div:nth-child(4) > div > div > div:nth-child(1)",
    "Hide Navigation Bar": {
      "": "#root > div > div:nth-child(3)",
      "Hide Discussion Button": "[data-test='discussion-nav']",
      "Hide Shop Button": "[data-test="shop-nav"]",
      "Hide Courses Button": "[data-test="courses-menu"]"
    },
    "Hide Product Offers": "#overlays"
  },
  "www.anothersite.com": {
    "Hide Whatever": "#whatever"
  }
}

Then the addon could dynamically build a page like this one for the active tab, allowing the user to show or hide sections of the page (based on the JSON) with ease. Hmm.

From the Unhook addon for blocking sections of YouTube

Author

Grant Winney

I write when I've got something to share - a personal project, a solution to a difficult problem, or just an idea. We learn by doing and sharing. We've all got something to contribute.


Comments / Reactions

One of the most enjoyable things about blogging is engaging with and learning from others. Leave a comment below with your questions, comments, or ideas. Let's start a conversation!