DEV Community: Trevor Harmon

What I Learned from my First Month as a Remote Employee

Trevor Harmon — Mon, 14 Oct 2019 17:58:27 +0000

Earlier this year I determined that consulting wasn't for me and that I needed to look for a new opportunity. I was fortunate to find my way onto the Insights team at Shopify as a remote web developer. While I had never worked remote before, I felt like it was the right move for me.

Before accepting the offer, I did a lot of research and found that the internet is largely divided on the topic: either remote is the future of work, or it's a passing fad that's impossible to maintain. After a month of working remote, I'm here to tell you the answer: it depends.

Remote work isn't all good or all bad

Working remotely or onsite each has tradeoffs, and when it comes down to it, both have their advantages. Meeting people is (obviously) better in person. It's easier to casually chat in person over lunch than it is to "casually" chat over a formally scheduled one on one. But working for long stretches of time without interruption? Remote has serious advantages there.

You'll find lots of articles belaboring the pros and cons of each, so I won't spend my time in that way here. To make a long story short: remote is another style of working that comes with tradeoffs. If the tradeoffs you get are better than the things you give up, maybe a remote opportunity is good for you!

Your lead, teammates, and team culture matter

While working remotely certainly is an adjustment, the people who you interact with as part of your job can directly impact your ability to be successful as a remote worker. My lead worked remote for a few years, and I'm not the only remote person on my team. As a result, I have a strong support system that existed without any effort on my part. If you are considering a remote position, ask yourself:

Is anyone on my immediate team remote? Would I be the only one?
Does my lead have any experience leading remote workers? Working as a remote worker?
Do conversations default to in-person or online? Would it take significant effort to have conversations default to online?

It's an adjustment

No matter how much support you have, it's an adjustment from a typical 9-5 in-person job. It has felt strange to wake up and think "well...I guess I'll do work now?" Some days it feels empowering to wake up and think "I'm the master of my day!" and other days it feels lonely to work by myself. I think both of those feelings are a fundamental part of remote work.

Tips for success

I have been able to leverage the experience of others to make my transition smoother (thank you for the advice and guidance, Andy and Keyfer!). Here are some things I did to help make the transition smoother:

1. Spend time onsite developing relationships, especially with your teammates

It's easier to take a physical relationship online than it is to create a virtual relationship. Developing a friendship with your teammates will make it easier later when you need to bug them to help you find answers to questions you have. While onsite, optimize your time for relationships, not day-to-day work.

Note: I realize that many remote workers don't have the option of going onsite, especially for those in an all-remote company. However, if you get the opportunity to meet teammates face-to-face, take it!

2. Try to work similar hours as those you work with.

My team works eastern time and I live on the west coast. While this means early mornings for me, I have found it useful to try to mostly work the same hours as my team. This facilitates faster communication and helps me become unblocked sooner.

3. Schedule time to meet people when you're not onsite.

While virtual coffee chats aren't as natural as in-person chats, scheduling them still beats not meeting anyone at all! Schedule 20 minute meetings with others who you regularly interact with. Doing so helps to break the ice and makes it easier to collaborate them.

4. Be patient with yourself.

The most valuable thing that my lead said to me in our first 1:1 was this: "I don't care how much code you ship in the next 90 days. I only care that you're meeting people and gaining the context you need to do your job." I think this advice is the best advice for any new remote worker; it's natural to want to "prove" that you are getting work done, but even when joining a company in person, you aren't 100% effective at first. Don't hold yourself accountable to an unrealistic standard, but instead, focus on gaining context and understanding how your team works.

Conclusion

Remote work has been an interesting experience so far that I'm excited to see more of. I am fortunate to have a supportive team to help me as I made the adjustment. Are you considering a remote job, or in one right now? I would love to hear from you! Drop me a line on Twitter and tell me how your experience has been.

Configuring Jest and Enzyme in Create React App on Typescript

Trevor Harmon — Fri, 09 Aug 2019 14:36:36 +0000

I was recently trying to get a Jest/Enzyme testing environment working with React (Create React App with Typescript) and all of the documentation I read couldn't help me fix this one error:

I finally figured out how to do it after reading a lot and trying out a handful of solutions. I'll be starting with a vanilla installation of CRA (with the Typescript flag set) as my starting point to illustrate how to get this working.

A Create React App Gotcha

Because I'm using Create React App, there are certain benefits that I get out of the box, and one of those benefits is Jest. According to the documentation, Create React App comes with:

A fast interactive unit test runner with built-in support for coverage reporting.

As part of this built-in test bundle, Create React App sets up some default paths for you, including ./src/setupTests.js as a path to test configuration. Because this path is setup for you, you'll run into conflicts if you try to rename the file or override the path elsewhere.

1. Setup Jest with Typescript

Now that we're aware of that gotcha, let's setup Jest with Typescript. These instructions come from a starting resource that I found on Github by Basarat. I'm including them for convenience.

First, install Jest types & TS-Jest:

yarn add @types/jest ts-jest -D

Next add a jest.config.js to your project root (outside of src) and add the following within that file:

module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
}

Basarat does a good job of explaining this code, but the main point to understand is that we're telling Jest to use ts-jestwhen it encounters typescript files.

2. Install Enzyme

Now that we have Jest configured, we need to install Enzyme-related dependencies:

yarn add enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 -D

Additionally, we need to tell Jest to use our Enzyme serializer. Add the following line to the end of jest.config.js:

"snapshotSerializers": ["enzyme-to-json/serializer"],

Other tutorials tell you to add "setupTestFrameworkScriptFile": "<rootDir>/src/setupEnzyme.ts" to your Jest config file. However, if you're on CRA, that gotcha we discussed earlier will ignore this line and will prevent Enzyme from working properly.

3. Configure Enzyme

Enzyme needs to be configured and instantiated for it to work properly. If it doesn't already exist, create the file setupTests.js in your src directory and add the following to it:

import { configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

4. Test!

Now that we've got Jest and Enzyme installed and configured, let's test! I've written a basic Link component that wraps <a>:

/*===================
  Link.tsx
 ===================*/

import React from 'react';

interface LinkProps {
  className?: string;
  href: string;
}

const Link: React.FC<LinkProps> = ({
  className,
  href,
  children
}) => {
  return (
    <a
      href={href}
      className={className}
    >
      {children}
    </a>
  );
}

export default Link;

I've also written a basic test for that link component:

/*===================
  Link.unit.test.tsx
 ===================*/

import React from "react";
import { shallow } from 'enzyme';
import Link from './Link';

describe('Link', () => {
  it('Renders link to Google', () => {
    const link = shallow(<Link href="http://google.com">Link to Google</Link>);
    expect(link).toMatchSnapshot();
  });

  it('Renders link to Google with classname', () => {
    const link = shallow(<Link href="http://google.com" className="my-link-class">Link to Google</Link>);
    expect(link).toMatchSnapshot();
  });
});

Once you've got that component and test created, run yarn test to see the following output:

If you see something simliar to that, you're in business. Happy testing!

Email Signup Forms with Gatsby and Mailchimp

Trevor Harmon — Fri, 26 Jul 2019 22:28:57 +0000

If you're using Gatsby to power your blog, chances are that you need an easy way for others to sign up for your posts. While some choose to offer their content through RSS or Twitter, one of the most reliable ways to make sure that your content gets in front of the eyes of your audience is by building an email list. Thanks to benjaminhoffman (and other contributors), setting up an email list signup within Gatsby is a breeze. In the article, I'll walk you step by step (and provide sample code!) to creating a Mailchimp signup form for Gatsby.

Note: this article assumes that you've already signed up for a Mailchimp account. If you haven't, you should go do that and come back to this.

Find your Mailchimp form action

The goal of this step is to get the form action from the embedded form that is associated with a Mailchimp list. Go ahead and do the following:

Scroll down and look for "Create a landing page".

You'll see a modal that says "Landing page", which you can dismiss.

Click on 'Signup forms'.

Click on 'Embedded forms'

Scroll down until you can see the code for the form, and then scroll through the form looking for the post action. It will look something like this:

https://yourDomainHere.us18.list-manage.com/subscribe/post?u=1512315231251&amp;id=0asd21t12e1

Copy that post action and paste it somewhere for safekeeping.

Install the plugin

Install the plugin to get it working on your machine:

yarn add gatsby-plugin-mailchimp

Add the plugin to your Gatsby config file

In your gatsby-config file, add the plugin with your Mailchimp endpoint. The string you copied earlier is the value for endpoint.

{
  resolve: 'gatsby-plugin-mailchimp',
  options: {
    endpoint: 'THE FORM ACTION WE JUST COPIED',
  },
},

Create a component

In order to have a functional signup form, we need a component! I've written a simple one for you to start with. Here's the code:

import React, { useState } from 'react';
import * as styles from './EmailListForm.module.scss';

const EmailListForm: React.FunctionComponent<{}> = () => {

  const [email, setEmail] = useState('');

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
  };

  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(event.currentTarget.value);
  };

  return (
    <form onSubmit={handleSubmit} className={styles.EmailListForm}>
      <h2>Subscribe to my email list!</h2>
      <div className={styles.Wrapper}>
        <input
          placeholder="Email address"
          name="email"
          type="text"
          onChange={handleEmailChange}
        />
        <button type="submit">Subscribe</button>
      </div>
    </form>
  );
};

export default EmailListForm;

Right now, the form looks like this:

It looks a little plain. Let's add some CSS to make it look more interesting:

.EmailListForm {
  display: flex;
  flex-direction: column;

  background: #f2f2f2;
  color: #2a2a2a;

  font-family: -apple-system, Helvetica, Arial, sans-serif;
  padding: 2rem;

  h2 {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .Wrapper {
    display: flex;
    flex-direction: row;
  }

  input {
    color: #2a2a2a;
    width: 100%;
    border: none;
  }

  button,
  input {
    padding: 1rem 1.5rem;
  }

  button {
    display: inline-block;

    border: none;
    background-image: none;
    background-color: #DD0505;
    color: white;

    letter-spacing: 1px;
    transition: all 0.1s linear;

    &:hover {
      cursor: pointer;
      background: darken(#DD0505, 15%);
    }    
  }
}

Perfect!

Type definitions

As of the time of this writing, there aren't typescript definitions for gatsby-plugin-mailchimp. The good news is that I've written some already, and you get to steal my work. If you're using typescript, create gatsby-plugin-mailchimp.d.ts and use the following code:

declare module 'gatsby-plugin-mailchimp' {
  import * as React from 'react';

  type MailchimpResult = 'success' | 'error';

  export interface MailchimpResponse {
    result: MailchimpResult;
    msg: string;
  }

  export interface MailchimpFields {
    [key: string]: string
  }

  function addToMailchimp(email: String, listFields?: MailchimpFields): Promise<MailchimpResponse>;
  export default addToMailchimp;
}

Start using the plugin

The great thing about this plugin is how straightforward it is to use. You just import the function:

import addToMailchimp from 'gatsby-plugin-mailchimp';

And you're off to the races! Let's add addToMailchimp to our form submission handler:

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    addToMailchimp(email)
      .then((data) => {
        alert(data.result);
      })
      .catch((error: Error) => {
        // Errors in here are client side
        // Mailchimp always returns a 200
      });
  };

In this example, addToMailchimp returns a promise that you need to handle. It will only ever enter the catch of the promise if you don't reach Mailchimp at all. If you reach Mailchimp but encounter an error, they'll return a 200 and it's up to you to look inside of data.result to see if it was a success or failure.

Now that we've got everything wired up, let's test it:

Conclusion

This is a simple example of a signup form for a single list. This isn't comprehensive of what the plugin can do–read the docs to see how you can use more than one list or for more detailed information about the plugin. And for the completed component, check out the gist.