DEV Community: Tom

TIL: Auto push new branches

Tom — Tue, 13 Sep 2022 13:36:45 +0000

Add the following line to the config file in your .git folder (or to your global git config) to auto push a new branch you've created locally:

[push]
    autoSetupRemote = true

Now, on the first time you enter git push for a new branch your terminal won't complain that the remote doesn't exist, it just pushes your branch.

Dependabot needs a workflow too

Tom — Sat, 06 Nov 2021 13:18:11 +0000

Modern JavaScript projects tend to have a lot of external dependencies. It's important to keep those dependencies up to date. Dependabot is a great help in this. However, using Dependabot comes with new challenges:

If your project has a lot of dependencies, Dependabot is creating new PR's on a daily basis. Who's responsible for dealing with them?
Can we automatically merge PR's created by Dependabot or should we test them (locally)?

Our team came to the conclusion that Dependabot indeed helps us keeping the dependencies up to date, but that's not enough: Dependabot needs a workflow too. This is how we do it:

A developer who is creating a new PR, should at the same time have a look at the existing open PR's, including the PR's opened by dependabot.
We automatically merge patch PR's.
Patch update, but failing tests? Checkout locally, check why tests are failing, fix, push and merge.
Minor update and dev-dependency (and tests are green)? Just merge.
All other type of PR's: checkout locally and test.

Notes:

If there are 5 open dependabot PR's, it's not your responsibility to tackle them all. Just review 1 or 2, and leave the rest to the next developer.
If Dependabot keeps on creating the maximum number of PR's several days in a row, we sometimes just run npm-check update to test and update a bunch of packages at the same time. (This is basically the workflow of projects without dependabot and the problem with that approach was that actually nobody was updating the dependencies at all.)

Keep your dependencies up to date, but share the burden across your team.

Happy updating!

Contain scrolling, contain reading

Tom — Sun, 31 Oct 2021 15:03:35 +0000

2 interesting articles in this week's Frontend Focus.

Contain scrolling behavior

When you add scrolling behavior to a certain container you sometimes do not want to continue scrolling when you reach the end of the container. This can be achieved with by setting the CSS overscroll-behavior property to contain. Read more in Prevent Scroll Chaining With Overscroll Behavior.

Restrict width of text container

Swyx reminds us about the simple max-width: 70ch; property to keep texts readable on large screens. He also links to some bookmarklets so you can apply readability to whatever website (for example Wikipedia): 100 Bytes of CSS to look great everywhere.

Sort Carbon's DataTable with a backend API

Tom — Tue, 24 Aug 2021 12:27:48 +0000

Carbon's DataTable supports client-side sorting out of the box. If you need to call a web service to sort your data, it gets a little hackier. This is how I solved it:

First add the isSortable property to DataTable:

<DataTable
  isSortable
  {...rest}
>

Then add the following properties to TableHeader:

<TableHeader
  onClick={() => {
    /** Retrieve data from server */
  })}
  isSortHeader={Boolean}
  sortDirection={'ASC' | 'DESC'}
  >
  {header}
</TableHeader>

Please note I use 3 undocumented features of Carbon here:

The onClick handler is used to override the default behavior (client-side sorting) and can be used to retrieve server data.
The sortDirection property is used to display the correct arrow on the sorted column header.
isSortHeader indicates that the current column is the one that is sorted.

As these properties are not documented they might change at any time without warning.

Bonus: Make sortable part of the Carbon headers object

Carbon uses a header object to generate table headers, example:

const headers = [
  {
    key: 'name',
    header: 'Name',
  },
  {
    key: 'status',
    header: 'Status',
  },
];

We can extend this object to indicate whether a certain column is sortable:

const headers = [
  {
    key: 'name',
    header: 'Name',
  },
  {
    key: 'status',
    header: 'Status',
    sort: 'sortByStatus',
  },
];

You can now use the sort key to determine if the column is sortable, and once clicked, which field the server should sort on. You'll end up with something like this:

{ headers.map( header => (
    <TableHeader
    {...getHeaderProps({
      header,
      isSortable: Boolean(header.sort),
    })}
    onClick={header.sort ? handleSort : undefined}
    isSortHeader={Boolean(header.sort)}
    sortDirection={getSortDirection(orderBy, header.sort)}
    >
    {header.header}
  </TableHeader>
))}

Typescript

The headers object now gives a TypeScript error, because the sort doesn't exist. This can be solved as follows:

import { DataTableHeader } from 'carbon-components-react';

export interface DataTableHeader extends DataTableHeader {
  sort?: string;
}

An interesting take on reduce and Object.assign

Tom — Sun, 20 Jun 2021 20:06:10 +0000

In this article Why using object spread with reduce probably a bad idea I saw this strange line of code:

someArray.reduce(Object.assign, {})

I thought Object.assign was meant for merging objects. Why the reduce? What is going on here??

If I want to test some JavaScript I run node in a terminal to create a playfield:

[1, 2, 3].reduce(Object.assign, {})

// output:
{ '0': 1, '1': 2, '2': 3 }

Ah, good to know, might be handy sometime!

How to type useRef?

Tom — Wed, 09 Jun 2021 14:10:38 +0000

This is more for personal reference:

const ref = useRef<HTMLDivElement>(null);

...

<div ref={ref}>

YouTube Player API for iframe embeds only works for muted content

Tom — Tue, 18 May 2021 14:19:00 +0000

This was a hard nut to crack:
I wanted to start a video playing when the parent container was scrolled into view. It appeared that this only works consistently for muted video's.

Example HTML:

<div class="video-container">
  <iframe
    id="player"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/1XPdPKKRFaE?enablejsapi=1&mute=1"
    title="DCT introduction video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

So the crux is here: mute=1.

Accompanying JS:

let player;

// Will be automatically called when https://www.youtube.com/iframe_api is loaded
function onYouTubeIframeAPIReady() {
  player = new YT.Player("player", {
    events: {
      onReady: onPlayerReady,
    },
  });
}

function onPlayerReady(event) {
  // Start video play once in view
  let callback = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        player.playVideo();
      } else {
        player.pauseVideo();
      }
    });
  };

  let observer = new IntersectionObserver(callback, {});
  let target = document.querySelector(".video-container");
  observer.observe(target);

Notes:

"player" is the ID of the iframe used in the HTML
class "video-container" is the name of the element on which the intersection observer detects if the video container is visible in the viewport or not

Type unknown objects

Tom — Thu, 06 May 2021 09:28:44 +0000

Sometimes I need to type an object, but I don't know how it will look like. Then I type it with the Record utility type:

export interface Label {
    name: string;
    options: Record<string, any>[];
}

How to combine Next.js, styled components and TypeScript

Tom — Wed, 17 Feb 2021 20:35:24 +0000

Next.js provides a handy example of how to add Styled components to your project: https://github.com/vercel/next.js/tree/master/examples/with-styled-components.

However, it's in JavaScript, not in TypeScript. The crux is in _document.tsx of which I've made a typed example in this Github gist.

What is webkit-line-clamp?

Tom — Thu, 21 Jan 2021 21:13:01 +0000

The interesting thing of reviewing someone else's code is that you discover things you didn't know. That way I learned today about webkit-line-clamp. My first thought was to decline the vendor prefixed property, but I was really surprised to find out that it got standardized for legacy support!

So what does it do? webkit-line-clamp is basically a multi-line ellipsis. You can specify a certain number of lines and the last one will end in an ellipsis.

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Underline a link in 2021

Tom — Thu, 14 Jan 2021 14:15:06 +0000

Underlining a link doesn't involve a border-bottom anymore, as I discovered on CSS Tricks:

a {
  text-decoration-color: #f60;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto; /* default */
  text-underline-offset: 1.5px;
}

Very handy and way more flexible!

Remove padding from storybook

Tom — Fri, 13 Nov 2020 14:08:07 +0000

After upgrading from Storybook 5 to Storybook 6 I experienced some annoying padding around all my stories.

The inspector told me this was due to a padding of 1rem defined in the class name sb-show-main on the body element. I searched for how to override this class, but was totally not necessary. The solution was actually quite simple, by adding just the following snippet to .storybook/preview.js:

export const parameters = {
  layout: 'fullscreen',
};