DEV Community: Dom Habersack

Plucking properties from object arrays in JavaScript

Dom Habersack — Mon, 26 Apr 2021 06:55:35 +0000

One of the more common tasks when mapping over arrays in JavaScript is extracting properties from objects. Instead of using individual arrow functions, we can create a reusable helper function that does the plucking for us.

const countries = [
  { name: 'France', capital: 'Paris'  },
  { name: 'Spain',  capital: 'Madrid' },
  { name: 'Italy',  capital: 'Rome'   }
]

// we can extract the attributes with individual arrow functions
countries.map(country => country.name)     // ⇒ ['France', 'Spain', 'Italy']
countries.map(country => country.capital)  // ⇒ ['Paris', 'Madrid', 'Rome']

// this function allows us to write that arrow function shorter
const pluck = property => element => element[property]

countries.map(pluck('name'))     // ⇒ ['France', 'Spain', 'Italy']
countries.map(pluck('capital'))  // ⇒ ['Paris', 'Madrid', 'Rome']

The constraints behind consistent icons

Dom Habersack — Tue, 09 Feb 2021 15:30:27 +0000

I announced Lovelicons as a set of “200+ icons” when all I had was about 70 good ones. Before I can release the set, it needs to live up to that initial promise. Luckily, many of the missing icons are easy to create. As I am drawing them, I still need to make sure they look like they belong together.

The icons need to share a style to feel like a complete set. In this week’s issue, I’m sharing some of the constraints I use when drawing icons that I want to look similar.

Size

I draw all icons on a canvas of 24×24 pixels. The outer 2 pixels are a reserved zone that most icons don’t reach into, leaving them a 22×22 pixel “safe zone”. Many icons don’t even need that space.

Sometimes, an icon needs that little extra bit of space to work well. If a detail would not work inside the safe zone, the icon can reach beyond it. Ideally, only a few minor details make it outside of the safe zone:

It’s rare for icons to break out of the safe zone. I find it helpful to have that little bit of extra space when I need it, but I try to avoid it as much as I can.

Border radius

A big part of what makes the icons look similar are the rounded corners. The edges are slightly rounded off, with either a 1px or a 2px radius. With sharp corners, the set would give off a different vibe:

The difference between these two versions is minimal:

Both of these styles are fine. The rounded corners help give the icons the softer tone I am going for.

Picking the right border radius goes a bit beyond that, even. Some icons I brought in from abandoned projects also rounded the inner side of a corner. It’s not noticeable at small sizes, but becomes more obvious at larger sizes.

It’s all about consistency. If only a few icons round the inside of a corner, they look out of place. As I’m writing this issue, I’m noticing that some icons still have the inner radius. I will remove those before the set launches.

Remixed elements

The biggest shortcut to fitting new icons into the set is to remix parts of existing icons into new ones. The desktop computer and webcam share the same stand, for example.

The email and credit card share the same body:

The feet of the ghost are from the waves icon:

Many circles intentionally have the exact same size:

None of these constraints are absolutely necessary to create a set. They help define the initial direction of an icon. The more similarities there are, the more the icons look like they belong together. If you combine icons from different sets, these differences make them feel inconsistent.

My goal for Lovelicons is to offer as many of the icons needed by most projects as I can. Do you use icons in your projects right now? I’d love if you could reply to this message with a few screenshots of your interfaces. Show me what icons you need and I’ll draw a version that fits with the set.

– Dom

🔥 Inverting Boolean functions in JavaScript

Dom Habersack — Fri, 22 Jan 2021 08:01:31 +0000

In JavaScript, we can invert Boolean values with an exclamation mark. That doesn’t work for function names we use as shorthand in array methods like Array.prototype.filter() and Array.prototype.map(). Wrap those in a helper function to have them return the opposite of what they would return normally.

const numbers = [0, 1, 2, 3, 4, 5]
const isEven = n => n % 2 === 0

// the long and short form of this do the same
numbers.filter(number => isEven(number))  // ⇒ [0, 2, 4]
numbers.filter(isEven)                    // ⇒ [0, 2, 4]

// `!` can flip the Boolean value, but it only works with the long form
numbers.filter(number => !isEven(number))  // ⇒ [1, 3, 5]
numbers.filter(!isEven)                    // TypeError (not a function)

// this (curried) helper makes functions return a flipped result
const not = callback => value => !callback(value)

// we can use `not` like this, in both the long and short form
numbers.filter(number => not(isEven)(number))  // ⇒ [1, 3, 5]
numbers.filter(not(isEven))                    // ⇒ [1, 3, 5]

How to build a time block planning schedule

Dom Habersack — Thu, 14 Jan 2021 10:45:14 +0000

After I shared my work schedule, a few people said they’d like to try something like it, but don’t know how to get started. Some suggested that it is easier to set up a regular schedule when you don’t have a job. Sure, having full control over my schedule makes it easier to set up a consistent schedule. Those with traditional jobs can still add more structure to their days. I’ll walk you through the process today.

Let’s start with a few assumptions:

You work 8 hours per day, at least on paper.
You’re productive for half of that at most.
You often stay longer because you felt unproductive.
You have a lot of meetings throughout the week.
It’s 2021, so you don’t have a commute.
You want to have more time for hobbies.
You want to sleep 8 hours a day.

We first frame our week by putting our sleep target and our morning and evening routines on the calendar.

To give us something to anchor our work hours on, let’s add our meetings into the mix.

We’ll give ourselves an hour for lunch. To avoid too many short gaps, we’ll put lunch right before or after meetings close to lunchtime.

Many of the gaps we see are too short to “get in the zone”. Let’s schedule shallow work there, which doesn’t need a lot of deep focus. We’ll check our emails, do code reviews, and look after similar tasks in these blocks.

We want to find blocks of several hours to focus on difficult topics without distraction. Even the most productive people can do at most 4 hours of this kind of deep work per day. Let’s aim for less than that. We’ll also leave gaps to account for context switching.

We fill the rest of our 40 hour work week with more shallow work. Distractions during those blocks won’t hurt as much. We didn’t plan on working without interruptions anyways.

That leaves the rest of the day for fun activities. That’s where you get to play games, read books, exercise, or watch television. By making time for these activities in your schedule, you’re saying that they are important to you.

You can add more focus by giving blocks specific tasks. Don’t constantly check your email during all shallow work blocks. Instead, make one of them your daily email block. That way, you know you’ll get to your emails during those blocks. You don’t have to worry about them all the time, removing one annoying and constant distraction.

You can add more categories and be more atomic as it makes sense to you. You might want to pick two evenings to exercise on, or reserve time for friends and family. If it’s important to you, put it on your calendar.

You won’t have to stick to it exactly as you plan it once. It’s okay to switch things up if you need to react to something. You don’t have to break your schedule if you can instead adjust it based on what happened.

It’s still too early for me to give a definitive verdict, but so far I’m very happy with this approach. My schedule prompts me to take breaks and make time for the things I value in life. I no longer sit in my chair to force productivity when I know I have mentally checked out. It feels like a win after only a few days.

If you go through this exercise, I’d love to see what your schedule looks like. Take a screenshot and send it over!

– Dom

🔥 Using non-alphanumeric characters in CSS

Dom Habersack — Fri, 08 Jan 2021 09:33:16 +0000

You can use non-standard characters like “:” in CSS class names if you escape them with a backslash.

This is especially helpful when writing utility-first CSS like they do in Tailwind CSS. In Tailwind, things like breakpoints, dark mode, and pseudo selectors like hover are set with these kinds of prefixes.

<style>
  .text\:italic {
    font-style: italic;
  }

  .text\:uppercase {
    text-transform: uppercase;
  }
</style>

<p class="text:italic text:uppercase">
  Italic and uppercase
</p>

How to split arrays into equal-sized chunks

Dom Habersack — Wed, 06 Jan 2021 09:35:28 +0000

JavaScript provides a way to split strings into arrays with split(). If we want to split arrays into smaller arrays, we have to do so by hand, as there is no native function for that. To break a long list of elements into smaller groups, we can use a combination of map() and slice().

Let’s say we have a lot of ducks. In the beginning, we have all our ducks in a ~~row~~ single array:

['duck1', 'duck2', 'duck3', 'duck4', 'duck5', 'duck6', 'duck7', 'duck8', 'duck9', 'duck10', 'duck11', 'duck12']

We want to neatly organize our ducks. Because they don’t all fit on a single shelf, we want to put them on several smaller shelves. We know that each shelf holds four ducks, so we want to group them like this:

[
  ['duck 1', 'duck 2',  'duck 3',  'duck 4'],
  ['duck 5', 'duck 6',  'duck 7',  'duck 8'],
  ['duck 9', 'duck 10', 'duck 11', 'duck 12']
]

Instead of containing ducks directly, this array contains three smaller arrays. Each of these arrays then contains a set of four ducks. We can write a function to build this structure for us:

const chunkArray = (array, chunkSize) => {
  const numberOfChunks = Math.ceil(array.length / chunkSize)

  return [...Array(numberOfChunks)]
    .map((value, index) => {
      return array.slice(index * chunkSize, (index + 1) * chunkSize)
    })
}

This function takes an array and chunk size and returns it grouped into chunks of that size. If we cannot split the values evenly, the last chunk will contain fewer elements:

chunkArray(['a', 'b', 'c', 'd'], 2)
// => [
//      ['a', 'b'],
//      ['c', 'd']
//    ]

chunkArray([1, 2, 3, 4, 5, 6], 3)
// => [
//      [1, 2, 3],
//      [4, 5, 6]
//    ]

chunkArray([true, true, false, true, false, false, true], 4)
// => [
//      [true, true, false, true],
//      [false, false, true]
//    ]

Let’s look at how this works line by line:

const chunkArray = (array, chunkSize) => {

The function chunkArray takes an array and the desired size of each chunk in its parameters.

const numberOfChunks = Math.ceil(array.length / chunkSize)

We need to know how many groups, or chunks, we need if we want to split the array into sets of the desired size. We get that value by dividing the number of elements in the array by the number of elements we want to have in each chunk. Four or eight ducks fit into four-element chunks nicely. To split six ducks into groups of four, we would need 1.5 chunks, because 6 divided by 4 is 1.5.

Each chunk is an array. Because there are no half arrays, we round the result to the next-largest integer with Math.ceil(). For our six ducks, we need to use two chunks to split them in groups of four. The second chunk will be half empty, which is okay.

On to the next line.

return [...Array(numberOfChunks)]

Now that we know how many chunks we need, we create an outer array with this many empty spaces. Array(length) returns an array that has its length set to the value we pass to it. That array is empty. It does not even contain undefined values:

Array(3)
// => []

Array(3).length
// => 3

We want to iterate over these spaces with map() in the next step. Because we cannot iterate over an empty array, we need to put values into those empty spaces. We initialize a new array from the one we already created using the spread syntax. This way, the new array has the same length as the previous one, with each value set to undefined:

[...Array(3)]
// => [undefined, undefined, undefined]

We can now iterate over this array with .map():

.map((value, index) => {

The value will be undefined in each iteration. We don’t care much about the value, but we will use the index. If we split the array into three groups, the index goes from 0 to 2. We will use that to grab shorter sections out of the array next.

return array.slice(index * chunkSize, (index + 1) * chunkSize))

slice() returns a shallow copy of the array we call it on. Both parameters are index values that refer to positions in the array. When extracting a partial copy, slice() starts at the first value and stops before the second value. If the second value is greater than the length of the array, it stops at the end of the array:

['mouse', 'hamster', 'rabbit', 'fox', 'koala'].slice(0, 2)
// => ['mouse', 'hamster']

['mouse', 'hamster', 'rabbit', 'fox', 'koala'].slice(2, 4)
// => ['rabbit', 'fox']

['mouse', 'hamster', 'rabbit', 'fox', 'koala'].slice(4, 6)
// => ['koala']

We use each chunk’s index to calculate the parameters for slice(). By multiplying it by the size of each chunk, we copy groups of that many values from the array. If our chunkSize is 4, these are the slices we would extract:

// index = 0
array.slice(0, 4)

// index = 1
array.slice(4, 8)

// index = 2
array.slice(8, 12)

map() returns a new array. Instead of several undefined values, our function returns slices of the original array. Each of these slices is one chunk that contains four items. The outcome looks exactly like what we wanted:

chunkArray(['duck1', 'duck2', 'duck3', 'duck4', 'duck5', 'duck6', 'duck7', 'duck8', 'duck9', 'duck10', 'duck11', 'duck12'], 4)
// => [
//      ['duck 1', 'duck 2',  'duck 3',  'duck 4'],
//      ['duck 5', 'duck 6',  'duck 7',  'duck 8'],
//      ['duck 9', 'duck 10', 'duck 11', 'duck 12']
//    ]

What would I use this for?

Why would we want to chunk arrays into smaller groups in the first place? There are more realistic use cases than organizing ducks on shelves. Instead of strings or other primitive types, our array could contain more complex elements.

The array could hold posts we want to show on a news feed. To inject an ad slot after every tenth post, we could use a counter that keeps track of the posts while we show them. Every time that counter is divisible by ten, we could inject an ad before continuing with the next post. Keeping track of that counter is messy and likely to lead to errors.

If we split the posts into chunks of ten instead, we don’t need this counter anymore. We can take the long list of posts, split it into smaller groups, and place an ad between each of the groups.

The array could also hold product reviews instead of ducks or posts on a news feed. To not overwhelm users with all reviews at once, we can show them in batches. We could show five reviews at first, and then reveal the next five with every use of a “show more”-action.

Whenever we want to inject something in an array at regular intervals, we can chunk the array first.

🔥 Getting the largest number from an array

Dom Habersack — Tue, 05 Jan 2021 08:33:30 +0000

Math.max() returns the largest of zero or more numbers passed to it. We can use the spread operator when passing an array to get the largest number from that array.

// get the largest number from a list of numbers
Math.max(69, 420, 108, 47)  // ⇒ 420

// passing an array instead of individual numbers returns `NaN`
const numbers = [69, 420, 108, 47]
Math.max(numbers)           // ⇒ NaN

// we get the expected result by spreading the array
const numbers = [69, 420, 108, 47]
Math.max(...numbers)        // ⇒ 420

Protect your SEO when crossposting

Dom Habersack — Mon, 04 Jan 2021 09:58:28 +0000

Writing something and waiting for people to find it doesn’t work. After publishing something, we need to make others aware of it. Nobody will know about what we’re doing unless we tell them about it. It sounds obvious, but I had to learn that lesson the hard way.

Very few people hang out on my website. Lots of people hang out on services like dev.to, Hashnode, and Medium. I have started crossposting my blog posts and newsletters to these to spread the word. Posting the same content to many sites is fine when we know what we’re doing. When done carelessly, it can negatively impact our SEO scores.

When search engines find the same content under more than one URL, they consider it duplicate. They don’t usually show duplicates in search results, so they pick one for us. That might not be the version we want them to use.

On top of that, duplicates weaken each other’s rank in the search engines’ algorithms. Search engines give a value to every page. If a page with a high value links to another page, that increases the value of the page behind that link.

When sites link to the different copies, each duplicate gets just part of the entire link juice.

To fix this, the duplicates can all point to one main copy and declare it the canonical version. We can do this with a link-tag placed in the <head> of an HTML document:

<link rel="canonical" href="https://islovely.co/posts/drop-the-should">

All link juice the copies would receive gets passed to the canonical version.

When crossposting to another service, make sure you’re always pointing back to your own site. It doesn’t matter how many duplicates there are. Their combined link juice now counts towards a single canonical version.

If you blog on any service and don’t have a blog under your own domain yet, set one up today. Make the copies on your own site the canonical versions of all your posts. It does not matter if people don’t link directly to your own blog yet. If they link to any copy, you still get the SEO benefits for your own domain.

If you’re not crossposting yet, go ahead and put your content on these other services as well. As long as you’re setting the canonical URLs, your future self and SEO will thank you.

– Dom

Recharge

Dom Habersack — Wed, 30 Dec 2020 09:29:14 +0000

2020 is almost over, and I am looking forward to a few weeks of vacation. Work has been busy lately, and a break will help me relax and get a new perspective. Christmas stopped being about presents once I could buy what I wanted when I wanted it. Recently, I value the immaterial much more than the material.

There are always more things to learn or to work on. The list of non-fiction books I “need” to read grows longer every week. There are many new technologies I “need” to learn. That conference I missed just released hours of videos I “need” to watch.

All of that can wait. There is something much more valuable I can do.

The gift I am giving myself this year is time. I will allow myself to be lazy without feeling bad about it. Those few weeks do not need to be productive in any way. Issues at work and plans for the future can wait. There will be time for that in the new year, and it will be much easier if I am not running on empty.

This holiday period, I am taking an intentional break from trying to do too much. If that sounds like you, give yourself permission to recharge. Making plans is much easier with a clear head.

I’d usually recommend a book or podcast about this now. That, too, can wait until next year.

– Dom

🔥 Filtering arrays to unique values

Dom Habersack — Wed, 23 Dec 2020 08:08:44 +0000

Arrays in JavaScript can contain the same value several times. Going through Set, we can filter them down to unique values.

const unique = array => [...new Set(array)]

// each value in this array is also how many of it are in there
unique([1, 2, 3, 3, 4, 4, 3, 4, 2, 4])  // ⇒ [1, 2, 3, 4]

For more tips like this, check out the full collection on my website: islovely.co/firetips

How to pick your next project

Dom Habersack — Tue, 22 Dec 2020 09:26:28 +0000

I am a huge fan of todo lists for organizing my tasks. Lately, those lists are growing a lot faster than I can work on them. While lists are great for leading me through each project, they don’t help me pick what project to work on next.

Todo lists are great when tasks are small and the order we do them in doesn’t matter. Take weekend chores as an example. We need to mow the lawn, take out the trash, and do the dishes. The order we do them in makes no difference. They all take about the same time, and we can get them all done on the same day. Instead of spending energy on picking the next task, we can put them on a list and work through it from top to bottom. Choosing the next step happens automatically, thanks to the list.

A flat list, like a full backlog, does not help us prioritize large projects. Lists make everything seem equally valuable. Often, the more important projects appear further down the list. Working on a backlog from top to bottom is a terribly wasteful idea. To get the most value out of our work, we have to pick the right project to do next. To help us make a decision, we can put them on an Impact-Effort-Matrix.

Instead of looking at our projects as a single list, we can chart them along two axes. One axis is the impact a project can have, the other is the effort it takes to get done.

If we chart our projects like this, we can see each project’s importance in relation to the others. Where on the matrix a project ends up shows us how good an idea it is. Each quadrant represents a different category of importance.

This is not an exact science, because we are bad at estimating both impact and effort. We can still use it as a rough guideline to help us decide.

We’re not limited to look at only impact and effort either. We can chart the same projects based on other attributes and base our decision on many results. A cost-time-matrix can reveal hidden savings. A sweat-joy-matrix could show us how intense and enjoyable projects are.

What attributes we want to look at depends on our situation. Looking at projects based on what attributes are important to us helps us choose better. As fun as some projects could be, this technique brought me back to reality a few times last week. I now try to focus on what is most important. Coding in isolation would often be fun, but it’s not the most valuable thing for me to do.

– Dom

🔥 How to check if something is an array in JavaScript

Dom Habersack — Mon, 21 Dec 2020 16:47:23 +0000

Internally, there is no type called “array” in JavaScript. When used on an array, typeof returns "object" instead.

To check if something is an array, use Array.isArray() instead.

// `typeof` an array returns “object” because JS has no type called “array”.
typeof ['a', 'b', 'c']                     // ⇒ "object"

// The array is treated like this equivalent object.
typeof { 0: 'a', 1: 'b', 2: 'c' }          // ⇒ "object"

// Use `Array.isArray` instead of `typeof` to test if something is an array.
Array.isArray(['a', 'b', 'c'])             // ⇒ true
Array.isArray({ 0: 'a', 1: 'b', 2: 'c' })  // ⇒ false