DEV Community: arielbk

How to make an adaptive emoji card (TS React and Chakra UI)

arielbk — Sat, 28 Oct 2023 15:22:28 +0000

I was experimenting with gradient borders and stumbled across an interesting technique — cards that adapt to the content inside them. You can see a demo of the effect in action here.

Here's what we'll be building today:

This card will magically adapt it's colours to the emoji passed to it, but a similar approach could be used for any kind of content.

Let's run through the steps from scratch and break it down!

Initialise the Project

We'll be building from the ground up without abstracting anything. The tech stack we'll be using is:

Vite with React and TypeScript: To quickly set up our project environment.
Chakra UI: It's not necessary for the effect, but Chakra's style props make styling easier.
Framer Motion: This is a peer dependency of Chakra UI and will come in handy if we decide to animate the card.

Set up the project with Vite: Start by running the following:

npm create vite@latest

Choose React with TypeScript when prompted.

Install Chakra UI and Framer Motion:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Create a Chakra theme: Save the following in theme.ts:

import { ThemeConfig, extendTheme } from '@chakra-ui/react';

const config: ThemeConfig = {
  initialColorMode: 'dark',
  useSystemColorMode: false,
};

const theme = extendTheme({
  config,
  styles: {
    global: () => ({
      body: {
        bg: '#121212',
      },
    }),
  },
});

export default theme;

This sets the Chakra colour scheme to dark mode and applies a dark grey background.

Integrate the Chakra Provider: Modify src/main.tsx to include the Chakra provider:

import { ChakraProvider } from '@chakra-ui/react';
import theme from './theme';

...

<React.StrictMode>
    <ChakraProvider theme={theme}>
        <App />
    </ChakraProvider>
</React.StrictMode>

Styling Adjustments: Ensure your page takes up the entire screen by setting min-height: 100vh; on the #root element within App.css.

Build the Basic Card

Let's lay the foundation by first creating a basic card component.

Create the Component: Create a src/components/EmojiCard.tsx component:

import { Box, BoxProps } from '@chakra-ui/react';

interface Props {
  emoji: string;
}

export default function EmojiCard({ emoji, children }: Props) {
  return (
    /* main container */
    <Box position="relative" maxW={700} borderRadius={8} bg="#181818">
      /* content wrapper */
      <Box
        px={8}
        py={4}
        gap={{ base: 0, sm: 8 }}
        display="flex"
        alignItems="center"
        flexDirection={{ base: 'column', sm: 'row' }}
        borderRadius={6}
      >
        /* emoji container */
        <Box
          display="flex"
          alignItems="center"
          justifyContent="center"
          fontSize="80px"
          width="200px"
        >
          {emoji}
        </Box>
        /* text content container */
        <Box height="100%" textAlign={{ base: 'center', sm: 'left' }}>
          {children}
        </Box>
      </Box>
    </Box>
  );
}

Box is a component from Chakra UI that allows us to pass in style props directly.

In this basic setup we have a surrounding main container with a constrained width and a background. We also have a content wrapper on the inside with a place for our emoji and for the text content.

This code serves as a base structure for our card.

Render the Component: Update App.tsx to render our new component:

import EmojiCard from "./components/EmojiCard";

...

<EmojiCard emoji="🍬">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi explicabo doloremque, accusantium repellat dolorem natus soluta quos!
</EmojiCard>

Now we have something to work with!

The Effect

With the initial setup done, let's get into the fun part — creating the effect!

Background Emoji: Add the emoji as a background within the main container but before the content wrapper:

<Box
  position="absolute"
  left={0}
  top={0}
  width="100%"
  height="100%"
  justifyContent={'center'}
  alignItems={'center'}
  display="flex"
  _before={{
    content: `"${emoji}"`,
    fontSize: 80,
  }}
/>;

This places a duplicate emoji in the middle of the card. Notice how it goes over the content even though the background component is before our content in the code.

Because the background element has an absolute position, and our content has a default static position, CSS's stacking context puts the background over the content. To fix this, set the content wrapper box to position="relative".

Styling Tweaks: Increase the emoji size by adjusting the font size up to 1100, and add a filter to the emoji background element: filter={"blur(80px)"}

This is an interesting gradient effect, but we want to confine it to our card. Add an overflow="hidden" to the main container.

Now let's add the following to the content wrapper to cut out a space for content in the middle, and get a subtle border with these gradient colours:

backgroundColor="#151515"
border="2px solid transparent"
backgroundClip="padding-box"

The interesting part here is the backgroundClip property. It determines how far the background extends within an element.

padding-box means the backgroundColor we set will extend to the outer edge of the padding, but won't go under the border.

This card should now respond to any emoji you pass into it and use it to fill the background gradient:

Add Polish

Let's enhance this effect further!

Gradient Background: Replace the backgroundColor property we've set with the following:

backgroundImage="linear-gradient(rgb(20 20 20 / 0.8), rgb(20 20 20))"

This will replace the solid background with a light gradient, slightly transparent at the top, so that some of the colour from the background can shine through:

Animate the Background: We can make the card a little more dynamic and eye-catching by animating the emoji background using Framer Motion:

import { motion, useTime, useTransform } from 'framer-motion';

const AnimatedBox = motion(Box);

...

// inside our component
const time = useTime();
const rotate = useTransform(
  time,
  [0, 16000], // every 16 seconds...
  [0, 360], // ...rotate 360deg
  { clamp: false }, // repeat the animation
);

...

// convert our emoji background to a framer motion component
<AnimatedBox
  // pass in our special framer motion value
  style={{ rotate }}
    ...

We convert the Box component for the emoji background into an AnimatedBox using Framer Motion's motion utility. This allows the component to accept special values that Framer Motion animates for us outside of React's standard rendering cycle.

We use the useTime and useTransform hooks from Framer Motion to calculate how much the emoji should rotate. Then we pass the rotate value as a style prop to our Framer Motion component to handle the animation.

This is the final result in action.

Well done for making it this far! You can check out the final code for this on the CodeSandbox here, and the original experimentation demo shows it in action with some different emojis.

It's exciting to stumble across techniques like this. We've just scratched the surface, and there are lots of different directions you could take.

Imagine this effect with different light modes, or as an icon button that self-styles based on the provided icon.

You're not restricted to emojis; throw in any image, pattern, or coloured text. Experiment with different borders. Play around with the filter blur — remove it, or use another.

Let us know in the comments how you went!

How to make a 3D shiny card animation (React TS and Framer Motion)

arielbk — Thu, 17 Nov 2022 07:15:00 +0000

I noticed a 3D card animation on the Astro website that responds to mouse position, and it stuck in my mind.

I'd been meaning to update my portfolio website, and wanted something simple with social links and some novel effect.

I thought it would be a great opportunity to try out some animation techniques. You can see what I ended up with here. The background grid uses a technique outlined in my last tutorial.

In this tutorial we'll focus on a 3D animation that responds to mouse movement, creating a piece of glass that animates on a dotted grid background.

Check out the demo of what we'll be building here.

The tech we'll be using:

React
Vite
TypeScript
Emotion for CSS-in-JS
Framer Motion

Setup

First off, we'll scaffold our project with Vite:

# npm
npm create vite@latest 3d-card-animation -- --template react-ts

# yarn
yarn create vite 3d-card-animation --template react-ts

And install the dependencies we'll need:

# npm
npm install @emotion/react @emotion/styled framer-motion

# yarn
yarn add @emotion/react @emotion/styled framer-motion

We'll use the default Vite styling for this tutorial, but we'll remove the light mode variant. Open up the index.css file and remove the following lines:

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

Dotted grid

Inside of src, create a new components folder, and a DotGrid.tsx file inside of it. Add the following:

import styled from '@emotion/styled';

const SIZE = 60;

const DotGrid = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: ${SIZE}px ${SIZE}px;
  background-image: radial-gradient(
    circle at 1px 1px,
    white 2px,
    transparent 0
  );
  background-position: center;
  transform: translateZ(-500px);
`;

export default DotGrid;

This will serve as the backdrop for our 3D card. The background- CSS properties are used to render our grid using the magic of a radial gradient. translateZ sends the element back on the z-axis, pushing the grid 'back' into the page.

We'll empty out our App.tsx file and replace it with the following:

import styled from '@emotion/styled';
import DotGrid from './components/DotGrid';

const Container = styled.div`
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  perspective: 1000px;
`;

function App() {
  return (
    <Container>
        <DotGrid />
    </Container>
  );
}

export default App;

We're setting the width and height to the viewport, and setting overflow to hidden so that when our animation goes off the page we don't end up with any scroll bars.

Card

Create a Card.tsx file inside of components with the following:

import styled from '@emotion/styled';

const Container = styled.div`
  width: 300px;
  height: 400px;
  border-radius: 20px;
  padding: 1rem 2rem;
  border: 1px solid rgba(200 200 200 / 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #eee;
  text-shadow: 0 1px 0 #999;
`;

const Card: React.FC = () => {
  return <Container>3D card effect with react and framer motion</Container>;
};

export default Card;

Now, we're going to render this Card component and wrap our application. We'll be animating it with Framer Motion soon, so we'll make the wrapper a motion.div:

//...
import Card from './components/Card';
import { motion } from 'framer-motion';

const RotationWrapper = styled(motion.div)`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
`;

// ...

<RotationWrapper>
    <DotGrid />
    <Card />
</RotationWrapper>

// ...

Our card should now be rendered in the middle of our dotted grid, but it's completely transparent. We want to give it a glass look.

The glass look

Usually we could apply a backgroundFilter style directly to our Card component, but that won't work here because of the transform-style property on our RotationWrapper. This property is necessary for the translateZ on our DotGrid. You can read more about it here.

To work around this, all we need to do is add a wrapper around Card and style that. We'll make it a motion.div so we can pass motion values to it later.

const CardWrapper = styled(motion.div)`
  border-radius: 20px;
  backdrop-filter: blur(3px) brightness(120%);
`;

// ...

<CardWrapper>
    <Card />
</CardWrapper>

Our elements are all set up — let's start animating them!

3D Rotate

We'll be continuing the rest of the tutorial directly inside the App.tsx file.

Track mouse movement

First, lets track mouse movement in relation to our card. Add the following to the App component:

// ...
import { animate, motion, useMotionValue } from 'framer-motion';
import { useEffect } from 'react';

// ... 

// mouse position
const mouseX = useMotionValue(
    typeof window !== 'undefined' ? window.innerWidth / 2 : 0
);
const mouseY = useMotionValue(
    typeof window !== 'undefined' ? window.innerHeight / 2 : 0
);

// handle mouse move on document
useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
        // animate mouse x and y
        animate(mouseX, e.clientX);
        animate(mouseY, e.clientY);
    };
    if (typeof window === 'undefined') return;
    // recalculate grid on resize
    window.addEventListener('mousemove', handleMouseMove);
    // cleanup
    return () => {
        window.removeEventListener('mousemove', handleMouseMove);
    };
}, []);

This adds an event listener when the component is mounted that will update motion values for the x and y position of the mouse.

Rotate elements

Now we need to translate our mouse coordinates into values to rotate our elements.

import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
import { useEffect, useRef } from 'react';
// ...

const cardRef = useRef<HTMLDivElement>(null);

const dampen = 40;
const rotateX = useTransform<number, number>(mouseY, (newMouseY) => {
    if (!cardRef.current) return 0;
    const rect = cardRef.current.getBoundingClientRect();
    const newRotateX = newMouseY - rect.top - rect.height / 2;
    return -newRotateX / dampen;
});
const rotateY = useTransform(mouseX, (newMouseX) => {
    if (!cardRef.current) return 0;
    const rect = cardRef.current.getBoundingClientRect();
    const newRotateY = newMouseX - rect.left - rect.width / 2;
    return newRotateY / dampen;
});

// ...

return (
    <Container>
        <RotationWrapper style={{ rotateX, rotateY }}>
            <DotGrid />
            <CardWrapper ref={cardRef}>
                <Card />
            </CardWrapper>
        </RotationWrapper>
    </Container>
);
// ...

We pass a reference (cardRef) to the CardWrapper so that we can access its DOM element and determine our mouse position in relation to it.

Then, we use the Framer Motion useTransform hook to take our mouse position and translate it into values that represent the number of degrees to rotate on the x and y axis.

Adjusting the dampen variable will make this rotation more or less extreme.

Our card should now be rotating along with the background.

Add Polish

Let's add a sleek finishing touch to our 3D glass. We're going to do that by applying a light gradient over the card, and animating the position of that gradient.

Gradient sheen

Add the following to the App.tsx component:

// ...
import {
  animate,
  motion,
  useMotionTemplate,
  useMotionValue,
  useTransform,
} from 'framer-motion';

// ...

const diagonalMovement = useTransform<number, number>(
    [rotateX, rotateY],
    ([newRotateX, newRotateY]) => {
        const position: number = newRotateX + newRotateY;
        return position;
    }
);
const sheenPosition = useTransform(
    diagonalMovement,
    [-5, 5],
    [-100, 200]
);
const sheenGradient = useMotionTemplate`linear-gradient(55deg, transparent, rgba(255 255 255 / 1) ${sheenPosition}%, transparent)`;

// ...

<CardWrapper ref={cardRef} style={{ backgroundImage: sheenGradient }}>

First, we use a transform hook to take our existing rotateX and rotateY values, combine them, and return a single value called diagonalMovement.

We take a range from diagonalMovement of -5 and 5 and transform it into a new range. 50% should be our centre (our gradient would be through the middle of the card) with 150 above and below that.

We use the motion template hook to construct a template literal string that we can pass to our motion div as a background image property.

We have a pure white gradient running over our card. We'll need to lower the opacity, but notice how the gradient runs over the top right edge — it stops at the bottom right edge. The gradient position cannot go under 0%!

Sheen opacity

We'll make a couple of tweaks to fix our gradient issue:

  const sheenOpacity = useTransform(
    sheenPosition,
    [-100, 50, 200],
    [0, 0.05, 0]
  );
  const sheenGradient = useMotionTemplate`linear-gradient(
    55deg,
    transparent,
    rgba(255 255 255 / ${sheenOpacity}) ${sheenPosition}%,
    transparent)`;

We add another motion value, this time transforming the sheenPosition. We want the opacity to be 0 when the sheen is to the left or the right, and a maximum of 0.05 when it's in the centre. We pass this into the alpha portion of our gradient's RGBA value to control the opacity.

Well done — you've got a nice shiny 3D card you can fill with whatever content you want!

There's lots more you could do with this if you wanted to experiment.

Tweak some of the values and see what happens. To get a feel for the 3D side of things, I would suggest adjusting the perspective property on the Container element, translateZ on the DotGrid component, and the dampen variable that gets passed to our rotateX and rotateY motion values.

You can see the final code for this on the repo, which is built and deployed on the demo page.

Did you have any issues along the way? Maybe you took this effect in a whole new direction?

Let us know in the comments!

How to make an advanced pointer animation (TS React and Framer Motion)

arielbk — Thu, 08 Sep 2022 08:05:44 +0000

I found the Pointer blog through Product Hunt, and I was really impressed with the background animation there. It's intricate, but because it only appears when the mouse is moved it's still low key and minimal.

I wanted to see how it was made, so I experimented and tried to reverse engineer it. This is what we'll be building today: demo.

I learnt a lot about Framer Motion along the way, and finally got a chance to try out Vite. It's fast.

I figured this is a great opportunity to pass on the knowledge. Here are some of the things you'll learn:

React
Vite
TypeScript
Emotion for CSS-in-JS
Advanced animation with Framer Motion

Setup

We'll start by scaffolding our project with Vite:

# npm
npm create vite@latest pointer-animation -- --template react-ts

# yarn
yarn create vite pointer-animation --template react-ts

Follow the commands at the the end to install dependencies and run the project in development mode, then install some further dependencies:

# npm
npm install @emotion/react @emotion/styled framer-motion

# yarn
yarn add @emotion/react @emotion/styled framer-motion

The grid

Create a components folder inside of src where we can start to build our components, and inside that create a Cell.tsx component with the following:

import styled from '@emotion/styled';

export const CELL_SIZE = 60;

const Container = styled.div`
  width: ${CELL_SIZE}px;
  height: ${CELL_SIZE}px;
  border: 1px dashed #555;
  color: #777;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
`;

const Cell: React.FC = () => {
  return <Container>→</Container>;
};

export default Cell;

This is our grid cell with some basic styling. Notice that there is a text → that we will animate later. The CELL_SIZE is a constant at the top of the file so we can easily adjust it.

Next up, let's create a Grid.tsx component:

import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import Cell, { CELL_SIZE } from './Cell';

const Container = styled(motion.div)<{
  columns: number;
}>`
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(${(props) => props.columns}, 1fr);
`;

function Grid() {
  const [columns, setColumns] = useState(0);
  const [rows, setRows] = useState(0);

  // determine rows and columns
  useEffect(() => {
    const calculateGrid = () => {
      const columnCount = Math.ceil(window.innerWidth / CELL_SIZE);
      setColumns(columnCount);
      const rowCount = Math.ceil(window.innerHeight / CELL_SIZE);
      setRows(rowCount);
    };
    // calculate the grid on load
    calculateGrid();
    // recalculate grid on resize
    window.addEventListener('resize', calculateGrid);
    // cleanup
    return () => {
      window.removeEventListener('resize', calculateGrid);
    };
  }, []);

  return (
    <Container columns={columns}>
      {Array.from({ length: columns * rows }).map((_, i) => (
        <Cell key={i} />
      ))}
    </Container>
  );
}

export default Grid;

Let's break this down.

We style our Container element so that it covers the entire viewport (100vw and 100vw) and is absolutely positioned to the top left.

We use CSS grid here, and determine the number of columns based on a prop from the main Grid component.

The Grid component holds the number of columns and rows in state. That's calculated inside the useEffect which runs when the component mounts.

The calculateGrid function determines the number of columns and rows we'll need to cover the entire screen with Cells. We call this once (so it runs when the component mounts) and add it to an event listener. If the user resizes the screen, the number of rows and columns will be recalculated.

Finally, we render Cell components based on the number of columns and rows with a little trick using Array.from.

Let's remove some boilerplate and render the Grid component inside of App.tsx:

import './App.css';
import Grid from './components/Grid';

function App() {
  return (
    <Grid />
  );
}

export default App;

We should now have a grid that responds to the user's browser width!

Pointers

We have our static grid and arrows, and now we want them to point towards the mouse cursor.

Add the following to the Grid component:

import { animate, motion, useMotionValue } from 'framer-motion';

// ...

// mouse position
const mouseX = useMotionValue(0);
const mouseY = useMotionValue(0);

// handle mouse move on document
useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
        // animate mouse x and y
        animate(mouseX, e.clientX);
        animate(mouseY, e.clientY);
    };
    // recalculate grid on resize
    window.addEventListener('mousemove', handleMouseMove);
    // cleanup
    return () => {
        window.removeEventListener('mousemove', handleMouseMove);
    };
}, []);

// ...

<Cell key={i} mouseX={mouseX} mouseY={mouseY} />

We have new state here that will store the coordinates of the mouse cursor as motion values. This means we can pass the values to Framer Motion to handle animation.

We've added an event listener to the window object that updates the motion value using an animate function whenever the mouse moves. We pass that value down to every cell as a prop.

Now, on to the Cell component:

import { motion, MotionValue, useTransform } from 'framer-motion';
import { useState, useRef } from 'react';

// ...

interface CellProps {
  mouseX: MotionValue<number>;
  mouseY: MotionValue<number>;
}

const Cell: React.FC<CellProps> = ({ mouseX, mouseY }) => {
  const [position, setPosition] = useState([0, 0]);
  const ref = useRef<HTMLDivElement>(null);

    return <Container ref={ref}>→</Container>;
};

// ...

We are receiving the mouse coordinate props here and typing them as motion values that hold a number.

We want to determine the position of each cell. To do that, we've added state to hold coordinates, and a React ref we can use to reference the DOM element of the cell.

Let's add a useEffect that will set the centre position of the cell to state:

import { useState, useRef, useEffect } from 'react';

// ...

useEffect(() => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    // center x coordinate
    const x = rect.left + CELL_SIZE / 2;
    // center y coordinate
    const y = rect.top + CELL_SIZE / 2;
    setPosition([x, y]);
}, [ref.current]);

// ...

Every cell now knows it's own coordinates, and is being passed the coordinates of the mouse cursor.

We need to determine the angle of the line from the current cell to the mouse cursor:

// ...

const direction = useTransform<number, number>(
    [mouseX, mouseY],
    ([newX, newY]) => {
        const diffY = newY - position[1];
        const diffX = newX - position[0];
        const angleRadians = Math.atan2(diffY, diffX);
        const angleDegrees = Math.floor(angleRadians * (180 / Math.PI));
        return angleDegrees;
    }
);

// ...

return (
  <Container ref={ref}>
    <motion.div style={{ rotate: direction }}>→</motion.div>
  </Container>
);

// ...

We do this with the useTransform hook from Framer Motion. This takes in motion values, transforms them, and gives back a new motion value.

The crucial part here is the Math.atan2 method that we use to find the angle between the centre of the cell and the mouse cursor. We convert that from radians to degrees so we can pass it directly to our arrow.

The arrow is wrapped in a motion.div and we pass it our new motion value to animate.

The arrows should now be following the mouse cursor!

Spotlight

We already have a pretty cool effect, but the next touches will really make it impressive.

First off, we'll add the following styles to our Grid's styled Container:

mask-image: radial-gradient(
    300px 300px,
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0.4),
    transparent
);
mask-repeat: no-repeat;

We should now see that the middle of our arrow grid is lit up and the outside is darkened. We want this centre mask to follow our mouse.

Add the following underneath our mouse coordinate motion values in the Grid component:

import {
  animate,
  motion,
  useMotionTemplate,
  useMotionValue,
  useTransform,
} from 'framer-motion';

// ...

const centerMouseX = useTransform<number, number>(mouseX, (newX) => {
    return newX - window.innerWidth / 2;
});
const centerMouseY = useTransform<number, number>(mouseY, (newY) => {
    return newY - window.innerHeight / 2;
});
const WebkitMaskPosition = useMotionTemplate`${centerMouseX}px ${centerMouseY}px`;

// ...

By default, our mask will be at the centre of the screen and its placement will be anchored from there. We transform the current mouse position so that the coordinates are from the centre of the screen.

We then create a motion template value with a hook from Framer Motion, and we can add that to our Grid's Container component like so:

// ...

<Container columns={columns} style={{ WebkitMaskPosition }}>

// ...

We should now have a spotlight that follows our mouse cursor!

Velocity Fade

For this final touch we'll need to do some gymnastics to make it smooth, so be warned.

Under our previous mouse motion values in the Grid component, add the following:

import {
  animate,
  motion,
  useMotionTemplate,
  useMotionValue,
  useTransform,
  useVelocity,
} from 'framer-motion';

// ...

// eased mouse position
const mouseXEased = useMotionValue(0);
const mouseYEased = useMotionValue(0);
// mouse velocity
const mouseXVelocity = useVelocity(mouseXEased);
const mouseYVelocity = useVelocity(mouseYEased);
const mouseVelocity = useTransform<number, number>(
    [mouseXVelocity, mouseYVelocity],
    ([latestX, latestY]) => Math.abs(latestX) + Math.abs(latestY)
);
// map mouse velocity to an opacity value
const opacity = useTransform(mouseVelocity, [0, 1000], [0, 1]);

// ...

We create a motion value that again holds the mouse coordinates, except this time they are going to be eased. This is what will give us the fading out effect in the end.

We determine the velocity of the mouse cursor by combining the velocity of our x and y coordinates with Framer Motion's useVelocity hook.

From there, we map the mouse velocity (I found a range of 0 to 1000 worked well) to an opacity value between 0 and 1.

We're almost there. We just need to animate the eased mouse coordinates when the mouse moves. Our handleMouseMove function inside of Grid should look like the following:

import {
  animate,
  AnimationOptions,
  motion,
  useMotionTemplate,
  useMotionValue,
  useTransform,
  useVelocity,
} from 'framer-motion';

// ...

const handleMouseMove = (e: MouseEvent) => {
    // animate mouse x and y
    animate(mouseX, e.clientX);
    animate(mouseY, e.clientY);
    // animate eased mouse x and y
    const transition: AnimationOptions<number> = {
        ease: 'easeOut',
        duration: 1,
    };
    animate(mouseXEased, e.clientX, transition);
    animate(mouseYEased, e.clientY, transition);
};

// ...

Now we pass the opacity value to the style prop of our Grid's Container:

// ...

<Container
    columns={columns}
    style={{
        opacity,
        WebkitMaskPosition,
    }}
>

// ...

The grid should now fade in and out based on the user's mouse velocity. This part really brings the animation together.

Well done for making it this far!

There are techniques here that you can get creative with. It was a learning experience for me, and I'm looking forward to diving deeper.

You can check out the final project repo to see the final code, and again here's a link to the demo.

Did you have any problems along the way? Are there parts you think could be improved? Did you manage to use the techniques to create something else?

I'd love to hear about it in the comments!

12 handpicked resources for newbie developers

arielbk — Wed, 31 Aug 2022 15:20:19 +0000

Learning to code is hard. It's great that there are so many resources to choose from, but that also makes it difficult.

These are the best resources that really helped me while starting out, or that I found out about later.

I'm not a fan of listicles with resources that anyone could have found with a quick Google search. These are handpicked! 👌

Identify

Get an idea of what coding is and what a developer actually does. Find out what you're in for.

Eloquent JavaScript intro chapter - Reading

This book introduction is a great definition of programming and explains what a developer does in simple and practical terms. The whole book is a fantastic intro to JavaScript.

Teach Yourself Programming in Ten Years - Reading

This pushes against the trend of short-term thinking while learning. It helps to put things in perspective, and provides great advice for a longer time frame.

How to Learn Math for Students - Course

Coding involves some amount of maths, depending on what you do with it, and many people have insecurities around that. This course teaches how to approach and think about maths.

Podcasts

Listen to podcasts. They are a great way to maximise your time, and keep you inspired and connected.

CodeNewbie Podcast

Listen to people's stories and how they use code at their jobs. This can inspire you and expand your ideas about what you could do with code.

Syntax

Syntax is a light and informal podcast. The show hosts are two web developers who have been teaching for a long time, but still keep up with the latest trends in the space.

Front End Happy Hour

Front End Happy Hour features experienced developers, many from Netflix. The vibe is light like after work drinks, and you'll gain insights from senior developers at large companies.

Learning paths

Spend time exploring, see what's out there and what you enjoy, and then focus in. Create a plan for your own learning. It can change, but only after deliberate consideration.

P1xt Guides - Guide

This helped tremendously when I started plotting a path of what to learn. Although it was created a few years ago now, many of the resources are still very relevant today.

CS50: Introduction to Computer Science - Course

This is the first online computer science course I took. It is difficult but very well structured. It make the major topics approachable and lays a strong foundation for CS.

Web Dev for Beginners - Course

Microsoft's 12-week web dev course is a great way to learn and practice the basics of web development. This is the course I wished I'd had when I started learning.

roadmap.sh - Guide

Roadmaps are great for providing context before diving deeper into your next topic. Pick a dev role you're interested in and see what kind of technologies you would need to know for that role.

HTML, CSS, JavaScript

Treat tutorials as a starting point, and then decide if you want to explore things yourself or build out the tutorial project more.

Flexbox Zombies - Game

Flexbox is a crucial part of CSS to understand. The syntax for it is unintuitive and can be difficult to remember. This game teaches you, and provides a way to practice it, in a fun format.

JavaScript 30 - Course

Build 30 JavaScript projects over 30 days without any additional libraries. Once you're past learning the basic syntax of JavaScript, you'll want to build actual projects. These are some creative and fun ones to get you inspired.

Building projects is where the real learning happens. You will come across roadblocks, but this is how you learn to problem solve.

I'm a frontend developer, and some of these resources lean towards that, but all of these should be applicable to whatever kind of coding you want to get into.

I've purposely tried to keep this list short. Once you've studied the foundations, get out there and build!

How to become a developer

arielbk — Fri, 19 Aug 2022 14:12:44 +0000

I landed my first dev job after about a year of self-directed study.

I can still relate to it, but over the past three years I've also had time to reflect on the experience.

It was a rocky road, and I did a lot of things well, but there were also things I could have done better.

These are the lessons I learned.

Identify

I was afraid to commit, even though I wanted to get into coding for a long time. I imagined a job where I robotically wrote code all day and thought I may get stuck doing it forever.

I wasn't even sure what coding was, and doubted whether I could do it. After all, I wasn't a maths genius.

When I faced these thoughts, I realised I was holding myself back. This did not have to be a lifelong commitment.

Take the time to figure out what coding is and what a developer does. Find out what you're in for.

There are many ways that code can be used, but the foundations are mostly the same. Take the time to explore, and keep an open mind.

Coding can be like a puzzle game solved by fitting pieces together and reframing the problem in different ways. It can be frustrating sometimes, but the satisfaction of solving the puzzle is worth it.

Learn what code looks like. Watch YouTube videos, or look at source code. It can be overwhelming, but a mass of code is just a lot of smaller pieces.

Immerse yourself. If you're surrounded by experts you will naturally soak up some of their knowledge

Go to dev meetups in your area and embrace the vibrant online developer community.

Listen to podcasts. They are a great way to maximise your time, and keep you inspired and connected.

Learn

I'd have dozens of tabs open at any time, all relating to web development. I read countless articles and tutorials.

The first course I took, a free online introductory course to computer science, was fantastic for building foundational knowledge.

Although challenging, it was well structured. I decided I would give the course a chance and then decide if I wanted to continue learning.

It's important to research and explore, but eventually you'll want a concrete plan to anchor and guide you. Your learning will be less efficient if you constantly shift focus.

Spend time exploring, see what's out there and what you enjoy, and then focus in. Create a plan for your own learning. It can change, but only after deliberate consideration.

A danger on the other side is not allowing yourself to progress until you've mastered every topic you come across. Learn enough to be proficient and then move on. You can return to something later to understand it deeply.

Tutorials

Using a whole tech stack can be overwhelming in the beginning, and tutorials are great for guiding you through that.

But be careful: it's easy to get stuck in 'tutorial purgatory' — doing tutorials without applying what you learn.

Treat tutorials as a starting point, and then decide if you want to explore things yourself or build out the tutorial project more.

Build

It was hard to step away from tutorials where everything was neatly laid out, so I decided to block off the morning time for intensive work on my own projects.

At the end of the day, when I didn't need to be quite as focused, I followed along with tutorials and looked out for lessons that I could apply.

Building projects is where the real learning happens. You will come across roadblocks, but this is how you learn to problem solve.

Projects teach you to manage yourself. Start out with something small and gradually expand your goals.

What to build

Choose a project that challenges you, but not so much that it's overwhelming. The sweet spot is when you're about 80% comfortable with the whole tech stack.

There's no need to think of a completely original idea to start building. Cloning an existing project is great practice. Reverse engineer it and add your own spin.

Apply

After about 9 months of online courses and tutorials, I started to apply for jobs. I crafted a CV bio and cover letter describing how keen I was to learn.

I got 0 interviews, and many simply didn't reply. I didn't have experience to list so companies weren't interested in finding out more.

I didn't let this discourage me. I shifted focus to showcasing my work. Over the next months I created a portfolio with 5 side projects that were live and open source.

Once you land your first job you'll get to learn while working on real projects, but landing that first job can be difficult without real experience.

Picture yourself working where you want and plot a path to get there. Find a job listing you would like to apply for, see what the requirements are, and work on meeting them.

Do what you would do on the job before you have it, and put it out there for the world to see.

You don't necessarily need a computer science degree to land a dev job. Show off your code and let your projects be your qualification.

Open source your code on a platform like GitHub as soon as you can. Push code often and keep your projects up to date.

Your code is there to show what you're capable of. It should showcase how you think an app or website should be built. Keep this in mind and be deliberate in the patterns you use.

Demo your websites. It's much easier for someone to check out a demo of what you've built, get excited and curious, and then dig into the code.

This time things were different. I had projects to show, and companies were actually getting back to me.

I interviewed with a handful of them, and received multiple offers. I was able to negotiate and take my pick.

I decided to work for a startup in the IoT space, and was excited to start my next chapter.

Being a beginner is difficult, but your rate of learning is through the roof. Basically anything you do will be a learning opportunity.

Let's recap the main points for breaking into a dev career:

Identify – find out what you're in for
Learn - plan a path and treat tutorials as a starting point
Build - build real projects and put them out there
Apply - do what you would do at your dream job before you have it

Once you land your first job, your hard work will have paid off. I'm still amazed at how fortunate I am to have a job that's fun and that I look forward to doing.

Everybody is in a unique situation and people learn differently. This is my experience, but I hope these lessons can translate to other learners on their journey.

How to mentor a junior dev

arielbk — Fri, 03 Jun 2022 15:04:05 +0000

Passing on your knowledge has the potential to provide more value than actually writing code. Smart companies know this and reward it.

Mentoring can have a huge impact on the world. It creates a ripple effect, where you influence someone's mental models and approaches to code in the years to come.

You become a better developer, and your understanding deepens as you learn to articulate topics well.

Mentoring is about empathy and clarity. A mentor acts as a guide and provides support so the junior can focus and learn.

Roles

The terms junior and senior are thrown around a lot these days, but they continue to be fuzzy.

We're going to assume for this article that the mentor is a senior developer and the one being mentored is a junior. Let's explore what the differences are between them.

Junior

At this stage a developer learns about the pieces so they can form a bigger picture over time.

It's impossible to take it all in at once, so it's important for a junior developer to have focus. There's a danger of jumping from one thing to the next without understanding how that thing connects to the whole.

Senior

The senior role implies technical knowledge, but this is not the defining characteristic.

Seniors have experience to draw analogies from. A senior developer understands how a decision today can affect a project or the entire company in the future.

A defining trait for a senior developer is security in their lack of knowledge. They are willing to ask questions, and experience gives them realistic confidence in their ability to figure something out.

They have picked up meta skills along the way that make them adaptable. They know how to get themselves unstuck. They can impart this wisdom because they have walked the path themselves.

Onboarding

Starting out in a new codebase or company can be exciting and scary. Understand how overwhelming it can be for a junior in the beginning.

Start with the broadest information and slowly work your way down. Make it clear there's no need to understand every little thing in the beginning.

This is the tech stack we work with, these are some of our repositories, this is our folder structure...

There is a lot that the junior has to absorb, so documentation should be easily referenced and accessible. Project README files are a great place for project-specific information.

Many open source projects will use the good first issue tag on GitHub for first-time contributors. These are tasks that are not too complex and ideal to familiarise oneself with the codebase.

Start with these kinds of small tasks and celebrate small wins. Ease the junior into reading and writing code.

Teach

The priority for a junior is focus. If you find a potential 'teachable moment', pause and question whether it's beneficial for them to learn this right now.

It's okay to gloss over something and come back to it later when it's relevant. Practice just-in-time teaching, and the junior will be able to apply the knowledge.

Check in with the junior to see how confident they feel about a particular topic.

Don't overwhelm them with unnecessary implementation details, but don't exclude crucial pieces that are necessary to understand. There's a balance in finding the right level of abstraction.

Everyone is different and not everyone learns the same way. Gather feedback on what's working and what isn't. Many people struggle to understand a theoretical concept until it is applied, so provide ways for the junior to practice what they've learnt.

Peer code and work through tasks together. Small habits that you may not think to point out explicitly are shown — things like keyboard shortcuts, git commands and editor extensions.

Explain your reasoning as you go and don't be afraid to look things up and debug. This is a part of the job and immensely valuable for a junior to see.

A junior should ask for help and describe what they've tried once they've spent time on the problem themselves. A little bit of struggle is a part of learning, but not so much that they feel helpless.

Small wins and guard rails are great in the beginning, but step back and provide more independence as the junior starts to get the hang of things.

Review

Reviews put things in perspective. They are a chance to reflect on what's been learnt, and refine processes going forward.

Plan one-on-one meetings sometimes. Ask the junior how they think you could improve, or if there is anything you can do to help them.

Code reviews encourage communication. Cultivate a healthy feedback cycle as part of your flow. Have your code reviewed by the junior if it's within their grasp and relevant to their current focus. Be prepared to explain why you did something a certain way.

Consider how you manage your time. Batch it so that you can get your own work done, along with focused sessions with the junior.

They can prepare things to go through together at your next meeting. This gives the junior time to get themselves unstuck, and to articulate the problem well if they do need help.

You don't have to wait for permission to mentor others. Leave breadcrumbs to help other motivated people walk the path.

If you have struggled with something, others will too. Leave a comment on a GitHub issue, or write a blog post about it.

A powerful way to learn is to lend a helping hand to those who are just behind you on their journey.

Passing on knowledge brings value not only to juniors, seniors, and companies, but ultimately — to the entire community

How to improve your project estimates

arielbk — Wed, 13 Apr 2022 16:51:13 +0000

As creators we imagine things and then we try to make them real. Charting a path between the two is the heart of project planning, and as developers we provide time estimates for that path.

Estimates are notoriously difficult.

Learning to estimate well gives you freedom. It can provide breathing room to add polish and make something you're proud of.

It's easy to get stung and set unrealistic expectations that lead to burnout. The following is a broad approach to estimating, and a path to improve.

There are five steps:

Understand
Formulate the project
Define the parts
Execute and record
Reflect

🍞 Making toast

We'll be using the example of making toast along the way to illustrate these ideas

1. Understand

People are terrible at estimating how long something will take, and almost everyone thinks they are better at it than they really are.

By avoiding common pitfalls you'll dramatically improve your estimates.

The Planning Fallacy

The Planning Fallacy is a concept formalised by Daniel Kahneman and Amos Tversky, and is described in Kahneman's classic book, Thinking, Fast and Slow.

People think things will take far less time than they do.

There are two biases here: the Inside View and the Optimism Bias.

The Inside View means we can look at similar projects from the past, but believe that we will accomplish them in less time.

"For us it will be different."

"This time it will be different."

Everybody believes they are the exception to the rule. We view the situation from the inside rather than stepping back and viewing things objectively.

An Optimism Bias has inspired people to chart unknown territory, start businesses and become parents, but this works against us when we fail to account for things going wrong.

The fascinating thing about biases is that even if we become aware of them, they usually continue to influence our judgment just as before.

We must therefore approach our estimates rationally through systems.

2. Formulate the project

To start with, we need to know roughly where we're going. Question assumptions about the project from the beginning, and then move forward with confidence.

What is the problem we wish to solve?

What is it we're trying to achieve?

🍞 Making toast

The problem that we want to solve is that we're hungry and need food for energy.

Toast is not the only solution to the problem, we could eat something else, but it is one of the simplest and fastest ways to achieve our goal.

Take an Outside View

Use similar projects completed in the past as the baseline for an estimate, and adjust from there based on specifics.

How experienced are the team members?

Have we completed a project like this in the past?

Consider alternative ways of thinking about the project. We are much better at giving estimates for others than ourselves:

What if we were to hire a team to do this project?

What would we expect from them?

🍞 Making toast

We have already made toast thousands of times before. We are going to make it in our home, so that means we'll be able to find things quickly.

If we asked somebody else with similar experience to make the toast for us we would expect it ready within twenty five minutes, and for them to clean up afterwards. We would want a toast that is crispy, but not burnt.

Define the MVP

Thought experiments help to separate parts of the projects that are critical from those that are just nice to have:

What if we had to finish the project in half the time?

How about in a quarter of the time?

With this informing your thinking you can define the MVP — Minimum Viable Product. This is the most stripped-down version of the project that could be shipped.

By developing an MVP first you get an experience of the whole project. Critical parts are explored before embarking on the next phase.

🍞 Making toast

We still haven't considered exactly what kind of toast we'll be making. We're going to aim for an MVP to start with.

Let's use a loaf that is already sliced to save us some cutting.

There are spreads to consider, but for the first phase let's just plan one layer of butter. We can add other spreads in the next phase.

How many pieces of toast do we want? Well, we are hungry, but a couple of pieces will do for now.

Communicate

Expectations for the project should be communicated as soon as possible. It should be clear what the project involves.

Have we communicated the project clearly with everyone involved?

Is there a shared understanding of what is expected?

Projects have a tendency to pick up requirements along the way. Scope Creep can be avoided by formulating the project early and clearly.

🍞 Making toast

We realise that perhaps our flatmate may also want toast since we're making it.

We go to ask them, and find out they've already eaten. We confirm this, and proceed with confidence.

3. Define the Pieces

It is easy to underestimate the intricacies of the project before you break it down and think it through.

What exactly would we do if we had to make a start right this minute?

Walk through the steps and imagine doing them. Your brain prepares for action and unearths things that you may not have thought of.

Tasks should be actionable. Help your future self so that when it comes time to execute you are prepared.

Tasks should have clear boundaries. The first and the final step should be distinct. The process in between becomes clearer when you surround it with something concrete.

🍞 Making toast

Toast... where do we start?

First, we'll want to prepare everything. We'll need to get out the bread, the butter, and a plate. We'll also need a butter knife.

After we've buttered the toast, assuming we don't want any more, we'll need to put these things away again. We'll also need to wash the dishes in the end.

It's easy to forget about preparation and clean up after a project, so it's good we account for these things now.

Buffer time

Things will go wrong, and often it is just out of our control. Adding a buffer to our estimates helps account for this.

Create separate estimates: the actual time you think the task will take, along with an adjusted estimate that applies some buffer.

The blogger Steve Pavlina describes the concept of a fudge ratio. This is a number that you apply to your estimates to give them a buffer.

Start with a fudge factor that seems reasonable to you, and over time you can adjust it based on historical data.

Multiply your original estimate by this ratio to get your new adjusted estimate.

🍞 Making toast

We don't have historical data to base our estimates on, but after running through the steps we estimate it will take us 10 minutes to get to our buttered toast MVP plus cleanup.

Let's start out with a fudge ratio of 1.3. We don't expect too many unknowns since we've made toast before.

Our adjusted estimate for the whole project is now 10 minutes * 1.3 = 13 minutes.

4. Execute and Record

You have your project and tasks defined. It's time to dive in, but it's important to come up for air sometimes.

Timeboxing

Tasks can be worked on endlessly. Timeboxing is an effective way to counteract perfectionism.

First work towards good enough. Work on the task in the time allotted, then move on.

What is the purpose of this task?

What needs to be achieved here?

We can always come back to optimise and add polish later on, but for now you are serving the whole project by moving on.

🍞 Making toast

We may get caught trying to spread the butter evenly over one slice, while the other cools down. This is no good.

Let's set a time limit on this task. We won't spend more than 1 minute spreading one slice.

Getting unstuck

Pushing yourself to a deadline on a task can be counterproductive. You may know the stressful feeling of hacking away at something that just doesn't want to work.

Get away from it. Take a walk. Come back and look at it with fresh eyes.

Walk through the problem and consider splitting it up further if needed.

Talk through the problem with someone. They don't necessarily need to be technical, and they can help provide a fresh perspective.

Who can we talk with to help see the problem from a different perspective?

What is the minimum we must complete for this task in order to move on?

There's no need to over-optimise in the beginning. First, try to develop any solution that fulfills the purpose.

🍞 Making toast

We open the fridge to retrieve the butter, but realise that the expiration date has passed. This was not part of the plan.

Take a breath. We go to our flatmate to ask for advice, and realise that they were about to go to the store. They can pick us up some butter while they're there 👌

Record your estimates

Keep a record of your estimates and actual time spent on tasks. Gather data to optimise your process over time. Gather data, and from there you can begin to analyse it.

🍞 Making toast

Set a stopwatch as you make the toast, and record how long each step take you.

5. Analyse

This is where the magic happens. By analysing your past estimates you can reflect and set a trajectory for the future.

You'll build a history of completed tasks that you can refer to for future estimate baselines.

Keep a record of your fudge ratio. When it comes time to reflect on past estimates, you can adjust it based on the solid data you've collected.

🍞 Making toast

We now have a record of how long our buttered toast MVP generally takes us, and we can make more informed estimates in the future.

Since we have past estimates for each task, we can now take on even bigger projects in the future.

We can better judge any steps we have done before, and we know how inaccurate our estimates for unknown steps usually are.

In the next phase we could kick things up a notch and make ourselves a toasted sandwich with different spreads and fillings.

Estimating projects well is an indicator of wisdom and experience. Most developers will only learn this after many years, but you can start to cultivate this skill early.

Tracking and analysing your progress over time puts you on a path of improvement. The key to this approach is in making estimation conscious through concrete systems.

Project planning charts the path between what we imagine and what we create. By enhancing your estimation skills you will broaden your perspective and expand the possibilities of what you can build.

How to communicate remotely

arielbk — Fri, 25 Mar 2022 10:29:18 +0000

You've just made your morning coffee, eager to get into this new feature you've been planning. Your editor is open. Hands on the keyboard. Here we go.

A notification flashes across the screen. A workmate has a question about something they're working on. Might as well tab over and check it before we dive into things, right?

You stare at the cryptic message for a moment. The feature they've been assigned isn't defined well, so you suggest they ask the manager for some clarity.

You tab back over to your editor, but notifications swallow your screen. The manager is panicking, and wants everyone on a call.

People talk about bits and pieces of the project. Didn't we cover this last week? There's still confusion. The meeting goes on.

A couple of people are talking in jargon about some project specifics. Why are we in this meeting? Nothing really seems clearer. The meeting goes on.

Developers know the feeling of days squandered on ineffective calls and meetings, but it doesn't have to be like this.

Coding is an incredible superpower, and so is communication. Learning to code and learning to communicate are skills that don't just add to each other — they multiply. If you can learn to be a great communicator as well as a great coder you will be unstoppable.

This is my framework for remote communication, formulated while working remotely over the past two years. There are four main areas: empathize, prepare, clarify, and choose the right medium.

Empathize

After some days of working hard on a new feature you send it to a coworker, hoping for some feedback. You receive a reply:

"It's not working."

You wait for something more, but it looks like that's it.

How does this make you feel? You've spent so much effort on something, only to have it boiled down to three words.

Of course you want feedback. The response communicates a lack of empathy. They should have sent you details to reproduce and fix any issue they came across.

At the same time, you don't know what's going on on their side. They may have been on a call and felt pressure to send something.

Empathy is the foundation of communication. It's easy to judge people for how they make us feel. The real learning happens when we consider how our message is received by others.

Prepare

Our coworker showed a lack of communication, but let's consider what we may have asked them. Preparing relevant information for an interaction means people can easily jump into a topic.

Perhaps we sent them a link to the homepage, and told them the feature we worked on was a new payment method on the accounts page.

Perhaps they were too busy to switch contexts and navigate around the website. You've been working on this for days, but for them it's new and takes energy to figure out.

Provide material that will be helpful for them to quickly switch contexts. Sometimes it's best to show something with a screenshot to illustrate your meaning quickly.

Clarify

You don't want to drown people in information. Too much information puts the burden of finding what's relevant on the other person. Spend time refining your communication.

Point out the parts that will be most relevant if you're sending long-form material.

Spend a stretch of time planning and checking assumptions. This takes time up front, but it prevents needlessly wasting time later by proceeding with incorrect assumptions.

Clarify how urgent a message is. Do you need someone to get back to you immediately, or just when they find the time? Start out with something like, "when you get a chance..." or "as soon as you can...".

Urgency is relative — if everything is urgent, then nothing is urgent.

Choose the right medium

How we choose to communicate carries its own message.

Instant messaging

Instant messaging makes things easy, but has also created a pressure to always be 'on', ready to respond at any moment. It should be viewed as a shorter form of asynchronous communication. People should not be expected to respond instantly.

If you're working on something deeply you can reply to messages in small batches. I work in pomodoros, and reply to messages after I've completed my 25 minute deep work period.

Remember that messages are always at least somewhat distracting. Do not start a conversation with a single 'hey'. Send your message once you have it prepared, or give the other person a clue for what you're going to follow up with so they can prepare for it: 'Hey, I have a question regarding x'.

Keep your messages brief, and if they do become longer consider putting them in an email.

Email

Emails are generally for longer content and have a longer reply window. It is useful for any material that can be easily referenced in the future, or when you want something to be given more time and deeper thought.

Email is ideal to process in batches. Go through emails when you have the time and mental bandwidth for them. I usually go through emails twice during a work day.

Since emails are a longer form of content it can be an ideal place to put things for people to prepare for a meeting.

Calls and meetings

Calls and meetings are the most disruptive form of communication and should be treated with care. There should always be a clear purpose for the meeting, and a clear next step after the meeting.

Because meetings are disruptive, it pays to be careful when initiating them. Ask whether the same outcome could be achieved asynchronously through another medium.

Calls can be lazy communication. It takes energy to articulate something through writing, and for some people it's much easier to just 'have a call'. This is a bad habit.

Our brain is tricked into feeling as though the problem is solved just by scheduling the call. Writing pushes us to refine our thoughts.

Schedule calls in advance and ensure people have the time and material to prepare. Putting people on the spot without preparation will usually lead to more confusion and ambiguity.

Meetings work better when you have a visual aid. Take meeting notes, with the purpose of the meeting clearly stated at the beginning.

While the meeting is in progress, keep watch for whether the conversation is serving the purpose. Bring it back, and if necessary deal with other topics afterwards.

Add a visual anchor if you are describing something. Share your screen to show something rather than describe it with words. Often this will include more data points that you may not have thought to mention otherwise.

Communication is a piece of a developer's skillset that potentiates everything else. It is a super power, and every interaction we have is a chance to build it.

We communicate through our code by taking time and care in naming variables and functions, writing commit messages, and asking for help when we run into problems.

Over time it goes from a skill with concrete rules like those I've listed to an art that you adapt fluidly to the situation.

Like coding, communication becomes stronger as you make a habit of consciously improving it. It is a collection of many small things done right. Together they create something powerful.