5th week of 2021
Highlights of the week.
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 projects
My website became very popular (/s)
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.