Skip to content

5th week of 2021

Published on

Episerver + AutoMapper, coding SVG icons by hand, bad TypeScript habits, and more.

Table of contents

Skip table of contents

πŸ‘¨β€πŸ’Ό Work

Episerver + AutoMapper = 😻

Started using AutoMapper in our Episerver (.NET CMS) project for more automatic mapping of models to view models. So far I have only installed and configured it, but it looks promising!

I don't know how these mappings are usually done, but our current solution feels hacky and is starting to fall apart as we are adding more features and creating more sites (it's a multi-site). Hopefully AutoMapper will bring some order to this chaos.

I haven't used AutoMapper before, and the documentation doesn't have answers to all of my questions, so I have had to google a lot. Like, a lot lot. The upside is that I now have pre-material for at least two good blog posts:

  • How to use AutoMapper in an Episerver project
  • How to unit test AutoMapper mappings (+ what to test)

Removed ~2.3k source lines of code

And in a single commit. O'boy how good it felt!

Some context: Last year I created a tool for migrating a few thousands of pages from Contentful to Episerver. The migration was already done some time ago, so the tool had been obsolete for a while.

It took some time to count the lines by hand... Just kidding; I used the cloc npm package and ran npx cloc src/foo/ to let the computer do the counting. (Update: see my npm: Count lines of code cookbook recipe for more info.)

πŸ‘¨β€πŸš€ Personal

My weekly log got featured in Stefan Judis's web dev newsletter. Thanks to that, I got as many as 27 visitors. πŸ’ͺβ€πŸ˜„ Plus possibly more because some users have likely blocked Plausible Analytics which I've been using on this site since the 3rd week of 2021.

Speaking of the weekly log, I split it to multiple pages because the single page was getting very long. That's right: all weekly log entries used to be on a single page. Mad, huh? But you know: ship early and often. πŸ’β€β™‚οΈ

πŸ‘¨β€πŸŽ“ Learnings

JavaScript: adding ordinal suffixes to numbers with Intl.PluralRules

Intl.PluralRules enables plural-sensitive formatting and plural-related language rules. One use case is to use the plural rules to add ordinal suffixes to numbers, like so:

const getOrdinal = (number) => {
  const rules = new Intl.PluralRules('en', { type: 'ordinal' })
  const suffixes = {
    one: 'st',
    two: 'nd',
    few: 'rd',
    other: 'th',
  }
  const suffix = suffixes[rules.select(number)]
  return number + suffix
}

getOrdinal(-4) //=> -4th
getOrdinal(-3) //=> -3rd
getOrdinal(-2) //=> -2nd
getOrdinal(-1) //=> -1st
getOrdinal(0) //=> 0th
getOrdinal(1) //=> 1st
getOrdinal(2) //=> 2nd
getOrdinal(3) //=> 3rd
getOrdinal(4) //=> 4th

Original code by ΠšΠΎΠ½ΡΡ‚Π°Π½Ρ‚ΠΈΠ½ Π’Π°Π½x on Stack Overflow.

A nice thing about Intl.PluralRules is that it supports multiple locales. An example from MDN:

// Arabic has different plural rules

new Intl.PluralRules('ar-EG').select(0) //=> 'zero'
new Intl.PluralRules('ar-EG').select(1) //=> 'one'
new Intl.PluralRules('ar-EG').select(2) //=> 'two'
new Intl.PluralRules('ar-EG').select(6) //=> 'few'
new Intl.PluralRules('ar-EG').select(18) //=> 'many'

The browser support of Intl.PluralRules is good (supported by all modern browsers).

πŸ•΅οΈβ€β™‚οΈ Cool stuff

Coding SVG icons by hand

Aleksandr Hovhannisyan has written a good primer on the topic. It's called SVG Tutorial: How to Code SVG Icons by Hand.

Some of the material I already knew; some of it I already knew but had forgotten. But I also learned lots of new info and tips.

Here's a quick Moomintroll, created using my new and refreshed SVG skills:

  <svg
    viewBox="0 0 24 24"
    style="
    color: #364152;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    "
  >
  <!-- Body -->
    <path
      d="
      M 1 23
      s 3 -35.5 7 -16
      h 3
      s 3 -15 5 3
      a 7 6 0 1 1 -7 8
      "
    fill="none"
    />

  <!-- Left eye -->
  <circle cx="8" cy="12" r="2" fill="none" stroke-width="0.5" />
  <circle cx="8.5" cy="11.5" r="0.5" fill="currentColor" />

  <!-- Right eye -->
  <circle cx="13" cy="12" r="2" fill="none" stroke-width="0.5" />
  <circle cx="13.5" cy="11.5" r="0.5" fill="currentColor" />
</svg>

I used smooth cubic BΓ©zier curves (not covered in Aleksandr's article), which required some trial and error. But look how lovely he is!

10 bad TypeScript habits

I really like the format in Daniel Bartholomae's article 10 bad TypeScript habits to break this year. Each habit is organized in four parts:

  • What it looks like
  • What it should look like
  • Why we do it
  • Why we shouldn't do it.

Oh, and I like the content too. I don't agree with points number 7 ("don't use one letter generics") and 10 ("don't use != null"), but it's still a very nice article.

There's also good discussion around the article on Hacker News.

πŸ’β€β™‚οΈ More Weekly log entries

Next week: 6th week of 2021

Previous week: 4th week of 2021