Forem: Ben Duncan

Who does Bug Triage?

Ben Duncan — Fri, 26 Jun 2020 12:12:15 +0000

When customers call complaining about a bug, who does the work of finding the source of the problem?

Does customer support try to diagnose the bug themselves and forward it to a backend or frontend developer depending on their diagnosis? Do they pass it to a QA person to handle that? Does it go straight to the frontend developers, because the bug is visible in the UI regardless of the source?

How does your team do it? Do you have any suggestions?

Try out Deno on Repl.it 🎉

Ben Duncan — Wed, 03 Jun 2020 12:39:20 +0000

💡 Disclaimer: I have nothing to do with Repl.it or Deno.
I'm just spreading the good news!

You can now try Deno in the browser on Repl.it!

To give it a shot, go to the link above and try pasting in some Deno, and click Run at the top.

I wrote a quick example that uses Typescript types (ms: number) and and async/await:

/** Build a promise to wait for `ms` milliseconds */
const sleep = (ms: number) => new Promise(res => setTimeout(res, ms))

/** Count seconds from 1-10 */
void (async () => {
  let x = 0
  while (x < 10) {
    x++
    console.log(x)
    await sleep(1000)
  }
})()

As a bonus, Repl.it also supports intellisense using Typescript types and docblock comments. You can see below how it has picked up the signature and description of the sleep function when I hover over it:

Help: Handing off Images in Design Tools?

Ben Duncan — Sun, 05 Apr 2020 13:50:01 +0000

TLDR

Has anyone found a good solution to getting the original images in Sketch / FramerX / Figma files?

Problem

I'm primarily a UI developer so a lot of my daily work involves referencing UI designs. The software for these has been really competitive over the last few years, but most projects these days have been in one of:

Sketch
Figma
FramerX

These tools are great because I can easily inspect measurements, colors, typography, and more.

Unless I'm missing something though, there is a giant hole in handing off designs in these tools: images.

Often I'll get a design that has background images (photos or illustrations) that have been cropped or resized for the screen at hand. Maybe the design includes a Hero image at 1200x675 and a gradient overlay. In all of these tools I can just "export" the frame into a PNG and get that exact image, but often the overlay needs to be animated or the I need some image bleed because it can be shown at different aspect ratios or with parallax.

For example, in this screenshot of Figma you can see the original image is a square, but it only exports the designed landscape image. How do I access the original square image?

I generally need the original image so I can get the bleed and manage overlays and styles at different screen sizes, in different contexts, and for animations.

Hacky Solution

For some of these I've found I can inspect the project file as a directory and find all images (sometimes a hundred or so) at their original sizes with hashed names that are completely unsearchable, but it seems like there should be a better way.

Recommendations?

Has anyone found a good solution to getting the original images in Sketch / FramerX / Figma files?

Photo by Sean Lim on Unsplash

Quarantine Project: DIY Laptop Stand

Ben Duncan — Sat, 21 Mar 2020 15:57:30 +0000

Some of us are under quarantine, and a lot of people are trying remote work for the first time, likely on laptops and with a posture like this:

Owch!

Inspiration

I was sitting at home with a sore neck after a full day of work, spotted a cardboard box hiding in the corner, and inspiration (and boredom) struck!

All this time at home is a good opportunity to save your neck and upgrade your workstation in a free and zero-waste way: by building a laptop stand out of cardboard and glue!

A quick search leads to some steps to follow online, but feel free to play around and see what you can make, just make sure it's very stable. I went with my own design to raise it up higher and included some support on the inside to prevent it from falling to the side.

I'd love to see what other people are able to make to upgrade their remote working situation!

Mobile Vibration Designer! 📳

Ben Duncan — Wed, 18 Mar 2020 14:48:15 +0000

I recently read a great post introducing the vibration API that inspired me to play with using vibrations on mobile.

Article No Longer Available

It was a simple enough API, but I found it difficult to make vibrations that followed a pattern I wanted.

In response, I created a vibration designer where you can tap out a pattern on and test out and copy the vibration code that recreates the pattern.

Check the https://glitch.com/~vibration-designer, where you can see the source code and play with it. I made use of some neat vanilla Javascript features like Proxy, navigator.vibrate, and manipulation of CSS custom properties (variables).

Note: This is best used on Android mobile if you want to play the vibration.
For more details check out Can I Use: Vibration

A Responsive Card List

Ben Duncan — Fri, 13 Mar 2020 15:20:12 +0000

There's a responsive card pattern I've had to build out in a few projects lately and thought it was worth sharing. After some iterations I think I've found the CSS flexible enough to work for most situations. Feel free to comment if you have some advice or an alternative setup that works as well.

This list that has quite a few features:

Desktop

List items scale flexibly to fit a configurable number per row
Items align correctly according to configurable spacing
The last item doesn't abnormally stretch to fill the container
Items within a row have equal height

Mobile

It becomes a horizontal scrolling list
Configurable and equal padding to the left and right, despite being a scrolling flex container
There is configurable spacing between items
The first item is centered on the screen, properly accounting for both internal and external configurable spacing
All items have equal height
An item peeks from the right, hinting there are more to see

Here is a Codepen to demonstrate. You can hover over the list to show the spacing. Try view it at different widths and the list should change between mobile scrolling and a desktop grid.

Here is the CSS (SASS actually, but it's easy enough to convert):

ul {
  /* Spacing between list items and the container */
  --outer-spacing: 48px;
  /* Spacing between list items and each other */
  --item-spacing: 16px;
  /* Items per row in desktop */
  --items-per-row: 3;

  box-sizing: border-box;
  list-style: none;
  padding: calc(var(--outer-spacing) - var(--item-spacing) / 2);
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin: 0 auto;
  justify-content: stretch;

  /* On mobile this becomes a horizontal scrolling list */
  @media (max-width: 600px) {
    margin: 0;
    padding: var(--outer-spacing);
    overflow-x: auto;
    flex-wrap: nowrap;
    align-items: stretch;

    /* Add a space after the last item 
       https://stackoverflow.com/a/38997047 */
    &:after {
      display: block;
      content: ' ';
      flex: 0 0 var(--outer-spacing);
    }
  }
}

li {
  box-sizing: inherit;
  display: inline-block; /* or inline-flex */
  flex: 0 0 calc(100% / var(--items-per-row) - var(--item-spacing));
  margin: calc(var(--item-spacing) / 2);

  @media (max-width: 600px) {
    flex: 0 0 100%;
    margin: 0;

    /* Item spacing */
    & + & {
      margin: 0 0 0 var(--item-spacing);
    }
  }
}

Cover Photo by Aditya Chinchure on Unsplash

React Typescript Cheatsheet

Ben Duncan — Tue, 10 Mar 2020 12:24:59 +0000

Here are a few patterns I find useful when building a project in React + Typescript. When starting out I didn't find the JSX and React types obvious or particularly well documented, so I'd like to maintain a list of what types to use in different situations.

This is just a start, so I'd love to know what patterns you all find useful and what I should add to the list. Also, if there is anything here that I shouldn't be doing I would love to know!

Children
Events
Forwarding Props
Styles
Refs

Children

interface Props {
  children?: React.ReactNode
}

Events

interface Props {
  // Use the specific HTML element targeted
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
}

Forwarding Props

To forward a named props object to an element:

interface Props {
  buttonProps?: JSX.IntrinsicElements['button']
}

const Container = ({ buttonProps }: Props) => (
  <div>
    <button {...buttonProps}></button>
  </div>
)

To forward top-level props to an element:

interface Props extends JSX.IntrinsicElements['button'] {}
const ExtendedButton = (props: Props) => (
  <button {...props} />
)

Styles

// utils.d.ts
declare interface StyleProps {
  style?: React.CSSProperties
  className?: string
}

// Button.tsx
interface ButtonProps extends StyleProps {
  label: string
}

const Button = ({ label, ...styleProps }: ButtonProps) => (
  <button {...styleProps}>{label}</button>
)

Refs

Element refs:

const liRef = useRef<HTMLLIElement>(null)

Other refs are possible too:

const valueRef = useRef<number>(0)

💅 Styled-Components: Extending Children

Ben Duncan — Mon, 02 Mar 2020 12:39:06 +0000

Even when styled-components often export different variations of the component it can still be useful to control the styles from the parent. For example, a parent might want to adjust the position of the child.

import { Button } from '../components/button'

const Modal = () => (
  <aside>
    {/* How do we customize this button? */}
    <Button>Close</Button>
  </aside>
)

While you could export version with different positioning styles or that takes a position prop, it has more to do with the parent and visual context than the child itself and could be cumbersome to export a different version or create a property for every possible visual context.

As you can see, this gets out of hand very quickly:

// ../components/button

// When you just want a centered button
export const ButtonBlockCenter = styled(Button)`
  margin-left: auto;
  margin-right: auto;
`
// Don't forget about using it in a flex container!
export const ButtonFlexCenter = styled(Button)`
  align-self: center;
`
// What about other alignments?
// You could pass in a prop, but this gets ugly:
// <ButtonFlex align="flex-end" />
export const ButtonFlex = styled(Button)`
  ${props => props.align ? `align-self: ${props.align};` : ''}
`

Real designs often come with edge cases, and any of these methods quickly get out of hand. How can we extend a child component at the call site, from the parent?

Creating a Local Extension

One solution for simple cases is to create a local variation of the component by extending it again:

import { Button } from '../components/button'

const CloseButton = styled(Button)`
  align-self: center;
`

const Modal = () => (
  <aside>
    <Button>Close</Button>
  </aside>
)

Use Nesting Rules

If you already have a styled ancestor that provides enough context, you could use nesting and references to extend your button. This can be more succinct if there are many children that require specific styles.

import { Button } from '../components/button'

const Container = styled.aside`
  /* ... container styles */

  /* Maybe this will only apply to what we want... */
  > ${Button} {
    align-self: center;
  }
`

const Modal = () => (
  <Container>
    <Button>Close</Button>
  </Container>
)

Danger!

Rules need to be specific
Extensions of the child are also styled
Fragments can be hiding more children at the same depth

If the rule written isn't specific enough it can have unexpected results on descendants. For example, a page wrapper that applies a descendant selector (.parent .descendant) instead of a child selector (.parent > .child) would effect any further descendant instances of the child. Also, any variations of the child or fragments that render the child at the top level would also get styled, and may not be obvious in the context of the page.

Check out this codepen for some examples of problems that can occur:

Advanced Cases: Complex Children

What about passing styles to different elements of the child? This can be useful in complex child components, for example when they are used for layout of their own children, or have wrapping elements for more complex behavior.

One case of this pattern can be seen is in ReactNative, where ScrollView takes a contentContainerStyle and a normal style prop which are applied to different elements.

This can also be used on the web in custom components, like for styling a <label> inside of a <FormField> component, or adding a background color or inner alignment to a custom <PageSection> component.

While you can just apply styles directly, this avoids some of the benefits of styled-components, like CSS preprocessing and using props.

I'll be writing a future post that talks about these advanced use cases.