DEV Community: drazik

Configure your browser's default tab size

drazik — Thu, 22 Sep 2022 21:29:04 +0000

I always used space for indentation. But lately I got convinced that tabs are better. So I switched to it for my new projects, enforced by Editor Config and Prettier.

My preference is one tab equals two spaces. But by default my browser's (Firefox) default tab size is 8. So I wanted to tweak it.

Unfortunately, I couldn't find a setting related to it. But I found the CSS tab-size property. This property existence and good browsers compatibility means that if I can apply tab-size: 2; by default on all pages I visit, my preference will by applied.

To do that, I downloaded the Stylus extension and created a custom stylesheet with the following CSS code:

body {
  tab-size: 2;
}

And voilà 🎉. Now I simply author my source code with tabs, my editor is configured to respect my preference for tab size and my browser also respects it. And every person that reads my code can also just set their tab size to their preferred value without me proclaiming "your should read it this way".

PS: please don't fight between spaces and tabs here. This post is not intended to elaborate on this question, but to help people looking for ways to configure their browser's default tab size.

How to get randomly sorted recordsets in Strapi

drazik — Fri, 12 Nov 2021 16:31:28 +0000

Lately I had to build page that shows the details of a recordset, and at the bottom a section "Others" that shows two randomly picked recordsets that the user can click on to see their details. Of course in the "others" recordsets we shouldn't see the recordset the user is currently viewing.

This project stack is Next.js for the frontend and Strapi for the backend. In this post, we will focus on the backend side and see how we can return random recordsets of a Strapi collection type.

You may think "wait, Strapi exposes an API with lots of parameters available, it should be possible to simply pass a param and this job is done". The thing is... there is no value that we can pass to the _sort parameter to sort randomly.

So, we will need to build a custom endpoint for our Partnerships collection type to get some randomly picked recordsets.

First, we need to add a route. Let's add it to api/partnership/config/routes.json:

{
  "routes": [
    {
      "method": "GET",
      "path": "/partnerships/random",
      "handler": "partnership.random",
      "config": {
        "policies": []
      }
    }
  ]
}

Nice, now we can create the random method in the Partnership controller. Let's go in api/partnership/controllers/partnership.js and implement a dumb random method to see if we can reach it:

"use strict";

module.exports = {
  async random() {
    return "Hello world"
  }
}

Then go to http://localhost:1337/partnerships/random in our browser... to see a HTTP 403 error. This is normal, by default Strapi endpoints are not reachable. We should go to Strapi's admin UI and check the random endpoint user the Partnership model in Settings > Role > Public.

Save this settings and retry to reach the random endpoint. It now shows our Hello world 🎉.

We can now implement the endpoint.

First, we need to get all recordsets randomly sorted. To achieve this, we will need to build a query. Strapi is using Bookshelf as an ORM. So we can start by getting our Partnership model, so we can run a query on it. Inside the query, we get a knex (this is the query builder that Bookshelf uses under the hood) query builder instance. On this query builder instance, we can there ask to order recordsets randomly. Let's try this:

async random() {
  const result = await strapi
    .query("partnership")
    .model.query((qb) => {
      qb.orderByRaw("RANDOM()")
    })
    .fetchAll()

  return result.toJSON()
}

Try to reach the /partnerships/random endpoint and see that we get all partnerships randomly sorted. This can do the trick if you just want to get all the recordsets. But in my case, I wanted to have to possibility to exclude some recordsets by their ID, and to limit the number of recordsets returned. Here is how I did it:

async random({ query }) {
  const DEFAULT_LIMIT = 10
  const limit = query._limit || DEFAULT_LIMIT
  const excludedIds = query.id_nin || []

  const result = await strapi
    .query("partnership")
    .model.query((qb) => {
      qb
        .whereNotIn("id", excludedIds)
        .orderByRaw("RANDOM()")
        .limit(limit)
    })
    .fetchAll()

  return result.toJSON()
}

This way I can get 2 random partnerships and I will never have the partnership with the ID 1 in the returned recordsets by doing:

const url = new URL("http://localhost:1337/partnerships/random")
url.search = new URLSearchParams({
  "id_nin[]": [1],
  _limit: 2
}).toString()

const response = await fetch(url)
const data = await response.json()

Hope it helps!

Cover photo by Edge2Edge Media on Unsplash

Configure aliases once and for all with Yarn's link protocol

drazik — Sun, 24 Oct 2021 09:18:04 +0000

Lately, I started a front-end project. I picked up a bundler (Vite because it looks awesome, but the problem is not tied to it) and configured it. In the configuration process, I added an alias:

export default {
  // ... ommitted for simplicity
  resolve: {
    alias: {
      "app": resolve(__dirname, "assets/js")
    }
  }
}

The goal of this alias is that when I'm in a deep module and I want to import a file that's far away in the directory structure, instead of importing from "../../../../models/user" I can import from "app/models/user". It works like a charm. Neat.

But then I added Storybook to the project. For some reason, I couldn't use Vite as a bundler in place of the default Webpack, so I couldn't reuse my configuration and get my alias for free in it. But still, the problem would have been the same : new tool means I need to take care of configuring my alias in it. In this case, I had to configure the alias in the Storybook's Webpack configuration:

// in `.storybook/main.js`

module.exports = {
  webpackFinal: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "app": path.resolve(__dirname, "../assets/js"),
    }

    return config
  }
}

Doing the same thing twice is annoying but it works and there's very little chance that this will be touched later so I leaved it as is.

Then I added Jest to the project. And... guess what? It also needs this alias in its configuration to resolve it correctly and find my modules. And where Vite and Webpack used a fairly similar syntax, Jest uses a different.

This is the moment I took a step back and asked myself : "isn't it possible to configure it only once?". The package manager (Yarn in my case) seemed to be the perfect place to manage it. It knows about all the modules I use, so it should be able to treat one of my project directories like a module.

I opened Yarn's documentation, looking for a solution to this. And quickly found the link protocol which does exactly that 🎉.

So, let's configure the alias in package.json:

{
  "dependencies": {
    "app": "link:./assets/js"
  }
}

Then run yarn install and remove the alias configured in each tools, then try to build my app, open storybook and run my tests...

Everything works 🎉 🎉 ? Not exactly, Vite is not supporting this feature yet (see this issue). I hope it will be the case in a near future.

Anyway, thanks Yarn for implementing such a feature, thus making my alias configuration DRY and totally independant of what tools I use!

It's worth noting that it works with TypeScript. I added a tsconfig.json file to my project and didn't have to configure the paths property, which would have been a fourth way to configure the same thing 😱.

Bonus: "but I don't use Yarn, how can I get it?"

I didn't try it, but a little research led me to link-module-alias that seems to enable this feature no matter what package manager you use. Would love to hear your feedbacks in the comments if you are going to try it or already used it in a project.

👋

Cover image by John Anvik on Unsplash