DEV Community: Mike Wheaton

Navigating with Ant Design and Reach Router

Mike Wheaton — Tue, 18 Jun 2019 00:00:00 +0000

Ant Design is an open-source design system built with React. It provides a collection of well-designed, functional, and accessible components to kickstart your React project.

The Menu component is excellent for site-wide navigation, but it wasn't immediately clear how to make this work with Reach Router.

After some experimentation, I was able to get these working together:

<Location>
  {props => {
    return (
      <Menu selectedKeys={[props.location.pathname]}>
        <Menu.Item key="/courses">
          <Link to="/courses">Courses</Link>
        </Menu.Item>
        <Menu.Item key="/users">
          <Link to="/users">Users</Link>
        </Menu.Item>
        <Menu.Item key="/profile">
          <Link to="/profile">My Profile</Link>
        </Menu.Item>
      </Menu>
    );
  }}
</Location>

With Reach Router, any component that's a direct child of the router receives a location prop that describes the user's current location within the app.

In my case, the header navigation is a child of a page layout component. Rather than passing location through as a prop, I've used the Location component. This provides a child render prop that has access to the user's location.

Ant's Menu component takes any number of Menu.Item children. Each of these has a key to uniquely identify it, while the parent menu has selectedKeys prop which takes an array of items that should be selected.

By setting the key of each menu item to the corresponding path name, these can easily be matched up by passing the selectedKeys prop a single-element array containing props.location.pathname.

In short, Reach Router says "we're on /courses" and Ant's menu says "okay, I'll select the menu item with a key of /courses".

This would get more complex for paths with variables (e.g. /courses/abc123/edit) but for basic navigation, this does the trick.

Public GraphQL queries with Hasura

Mike Wheaton — Mon, 17 Jun 2019 00:00:00 +0000

Lately, I've been working on a side project, Lurn. It's an app to track the online courses you're taking and see what others are taking. Think GoodReads for courses.

One of my goals with this side project is to learn how to use GraphQL to set up a backend, and I've found Hasura to be the fastest and most intuitive way to do so. I spent less than an hour getting it set up on Heroku, modeling out relational data, and successfully querying and modifying it with GraphQL. Wow!

While I could query the data from Hasura's built-in GraphiQL, I received errors when attempting to connect to it with React Apollo. The endpoint rejected my request because it wasn't coming from an authenticated user. But what about apps that don't require signing in?

Hasura rejects unauthenticated users

Hasura uses roles to determine who has permissions to read, insert, update, and delete data.

It turns out that Hasura (sensibly) rejects all unauthenticated requests to the GraphQL endpoint. This prevents someone from gaining access to private data or flooding the server with requests, but it's not helpful for an app that should accessible to signed-out users.

Fortunately, they provide a means of configuring a default role for unauthenticated users. Let's get that working.

Configure Hasura's unauthenticated role

Let's change Hasura's default behavior, so that requests from unauthenticated users are assigned a default security role rather than rejected outright.

Sign in to Heroku and select your Hasura app. If you're new to Hasura, quick start guide will have you up-and-running in a few minutes.

Overview tab for a Heroku app

Navigate to the Settings tab and click 'Reveal Config Vars' to show your app's configuration variables. Add a new variable with a key of HASURA_GRAPHQL_UNAUTHORIZED_ROLE and a value of whatever you want to call that role, such as anonymous.

Settings tab for a Heroku app, with config vars shown

Click 'Open app' to launch the Hasura console and continue with the next section.

Set permissions on tables

Select 'Data' and then choose a table you want to be publicly accessible.

Hasura console with a table selected

Select the 'Permissions' tab and enter a new role. This name must match the value of your configuration variable from earlier. In my case, it's anonymous.

You'll see the new role added to the table. By default, permissions are blocked for all action types (insert, select, update, and delete) as indicated by the X icon.

Permissions tab for a table, with the new anonymous role added

Click the pencil in the 'select' column. In almost all cases, you should leave the default (blocked) permissions for insert, update, and delete.

Under 'Row select permissions' choose 'Without any checks'. For 'Column select permissions' choose the columns that should be available in queries. I've selected all of them.

Hasura permissions, granting anonymous users full access to all rows and columns

Click 'Save permissions' and you're all set. Repeat this process for any other tables that should be accessible to signed-out users. You can now query your GraphQL endpoint without logging in!

Using Functions in Themes

Mike Wheaton — Fri, 17 May 2019 00:00:00 +0000

As you're building a Styled Components theme, you'll come across situations where you have a range of values. For example, a set of grays running from white to black or font sizes from tiny to gigantic.

The simplest way to implement this would be to give each one an entry in the theme.

const theme = {
  neutralWhite: "#ffffff",
  neutralLighterest: "#fafafa",
  neutralLightest: "#f5f5f5",
  neutralLighter: "#eeeeee",
  neutralLight: "#e0e0e0",
  neutral: "#bdbdbd",
  neutralDark: "#9e9e9e",
  neutralDarker: "#757575",
  neutralDarkest: "#616161",
  neutralDarkerest "#424242",
  neutralAlmostBlack: "#212121"
}

To be fair, I've made these intentionally bad. But it's a challenge to name a set like this. Can the names communicate the relative lightness of each color? What happens if when a new gray comes along and has to be added to the middle? Hello, neutralDarkerest2.

Numbered values

One approach to solving this problem is to drop names in favor of numbers. This is what Material Design does and what Fabric recently moved to. It solves the problem of knowing how two colors relate; the larger number is darker. Adding a new color that's between 400 and 500? Name it 450 and move on to more interesting things.

An even simpler approach is to name the colors 0, 1, 2, 3, etc. If a new color is needed you can shift the existing colors (e.g. 3 is now 4) and do a quick find-replace to update your app. This might not scale for design systems that span many apps, but it's a good solution for prototyping or building a small app.

This could look like:

const theme = {
  neutral0: "#ffffff",
  neutral1: "#fafafa",
  neutral2: "#f5f5f5",
  ...
};

While it will work fine, it's awfully repetitive. Let's see if we can do better.

Using an array

One great thing about theming with Styled Components is that the theme is a JavaScript object like any other. While it most often contains primitives like strings and numbers, there's nothing stopping us from putting an array or function in there.

const theme = {
  gray: [
    "#ffffff",
    "#fafafa",
    "#f5f5f5",
    ...
  ]
};

It's now possible to get a value from the array within a component's styles by calling ${props => props.theme.gray[2]}. Better!

Calling an array from a function

There are cases where what you really want in your theme is a function. For example, the Polished library provides a modularScale helper that makes it easy to calculate a relative scale of values.

import { modularScale } from "polished";

const theme = {
  size(step) {
    return modularScale(step, "1rem");
  }
};

This would be called as ${props => props.theme.size(2)}. This is much like how our array was called above, but with parantheses instead of square brackets.

While this makes sense, it can be difficult to remember which parts of the theme are arrays and which are functions. So let's write a little function that takes an index argument and returns the array at that index.

const theme = {
  gray(step) {
    return [
      "#ffffff",
      "#fafafa",
      "#f5f5f5",
      "#eeeeee",
      "#e0e0e0",
      "#bdbdbd",
      "#9e9e9e",
      "#757575",
      "#616161",
      "#424242",
      "#212121"
    ][step + 1];
  }
};

Now we can use the same syntax when referencing an array or a function in our theme.

You may have noticed that it's accessing the value at step + 1. Like most programming languages, JavaScript uses zero-based arrays where the first element is at position 0. This is confusing for anyone on your team who's not a developer (the design documentation is never going to start at 0 unless you insist on it) so I recommend starting at 1 instead. It's less hassle for everyone.

Next steps

If you haven't tried theming with Styled Components, follow along with my tutorial.
Try adding a ramp of type sizes. E.g. 12px, 14px, 16px, 20px, 24px
What if you wanted myFunction(0) to return a value from the middle of the range instead of the first value? Could you update the function so that it's possible to call myFunction(-2) for lower values?

Theming with Styled Components

Mike Wheaton — Sun, 12 May 2019 00:00:00 +0000

This post covers the basics of creating a Styled Components theme.

A theme contains definitions for colors, fonts, shadows, text sizes, and other visual elements that you want to use consistently. Changes to the theme are reflected everywhere, and you can even modify it at runtime to provide functionality like a dark mode toggle.

I'll be using CodeSandbox for this tutorial. It's my go-to for creating simple proof-of-concept apps that can be easily shared. You can code along with me, or jump ahead to the final app if you'd prefer.

Let's get started!

Project set up

Create a new app on CodeSandbox using the React template with create-react-app.

This template comes with some boilerplate we don't need. Delete the styles.css file and remove its import from index.js, then replace the headings with "Theming with Styled Components".

Click the "Add Dependency" button and search for styled-components. And just like that, we're ready to use Styled Components in our app.

Global styles

Styled Components is used to, well, add styles to components. However, there are situations that require defining global CSS styles that apply to the entire app rather than a specific component. These include defining custom fonts and styling the html and body elements.

While we could add these styles in a regular CSS file, we'd miss out on the benefit of having our visual language defined in a central place. Fortunately, Styled Components provides a createGlobalStyle function that can add global styles to our app. Let's create a component that will be responsible for adding this styles.

Create a new file, GlobalStyles.js.

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Poppins:400,600');

  body {
    background-color: tomato;
    font-family: Poppins, sans-serif;
  }
`;

export default GlobalStyles;

This creates a global style that defines a custom font, applies it to the body, and sets the background color to a lovely shade of red.

To apply these styles, edit App.js to add our new component.

import GlobalStyles from './GlobalStyles';

function App() {
  return (
    <div className="App">
      <GlobalStyles />
      <h1>Theming with Styled Components</h1>
    </div>
  );
}

Success! The font is in use and our background is very, very red.

Screenshot of the page with a red background and Poppins font

We're off to a good start. But our global styles contain hard-coded values, which we have no way of sharing with other components or updating easily. Let's create a theme to hold these values.

Creating the theme

A theme is a JavaScript object that all of our components will have access to via a prop. There are no requirements or limitations on its structure; we can put anything at all in there.

Let's add a theme.js to hold this object, since it will grow over time.

const theme = {
  fontSource: 'https://fonts.googleapis.com/css?family=Poppins:400,600',
  fontFamily: 'Poppins, sans-serif',
  backgroundColor: 'tomato',
};

export default theme;

This object has strings for our font source, font family name, and the background color. Our next step will be to update the GlobalStyles component to use these values.

Making the theme available

We have a theme, but how can our components like GlobalStyles access it? While a standard import statement would work for sharing the values, it wouldn't allow us to update them at runtime to enable functionality like a dark mode.

This is where ThemeProvider comes in. It's a wrapper component that passes a theme prop to all of the components within it.

import { ThemeProvider } from 'styled-components';

import GlobalStyles from './GlobalStyles';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <GlobalStyles />
        <h1>Theming with Styled Components</h1>
      </div>
    </ThemeProvider>
  );
}

We've imported ThemeProvider, wrapped it around the entire app, and passed our theme object to it. All of our components will now have access to a theme prop.

Now let's test that it's working.

Using the theme in a component

Let's update GlobalStyles to use the theme. Remember that Styled Components use template strings. This means that at any point we can use ${} to embed a JavaScript expression into the string.

Within that expression, we'll call a function that receives the props. We can then use an implicit return to send back a string, which will be inserted into the styles. It looks like ${props => props.theme.red}.

Let's update GlobalStyles.js to use theme variables instead of hard-coded values.

const GlobalStyles = createGlobalStyle`
  @import url('${props => props.theme.fontSource}');

  body {
    background-color: ${props => props.theme.backgroundColor};
    font-family: ${props => props.theme.fontFamily};
  }
`;

Save that and... it looks the same. That's expected, since our theme matches the previous values. Let's modify the theme so that backgroundColor is set to palegreen.

Screenshot of the page from earlier, now with a green background

There we go! We now have a theme that's available to all of the Styled Components within our app.

While the functionality is limited now, you can see how this could be scaled to include a full palette of colors, font families and sizes, and more.

And because it's CSS-in-JS that's being interpreted at runtime, we can modify the theme object at any point and see those changes reflected instantly across our app.

Next steps

Add a textColor property to the theme and use it for the header.
Instead of backgroundColor always returning the same string, modify it to be a function that randomly returns one of two colors.
Create a second theme object called darkTheme and add a toggle that switches between it and the default theme.
Check out Polished, a set of functions that can be used for solving common layout problems, working with colors, and more.

Perfecting Imperfection

Mike Wheaton — Sat, 02 Feb 2019 00:00:00 +0000

Do you take pride in calling yourself a perfectionist? With cut corners all around us, surely it’s a good thing to care about quality. To sweat the details. To have high standards for what you produce. To insist on doing it right.

These are worthwhile goals. But here's the thing: not only is perfectionism not the way to achieve them, it's in direct opposition to them.

Perfectionism is fear in disguise. It’s more likely to lead to procrastination and failing to even begin, rather than sweating the details that take something from good to great.

Stephen Guise makes a persuasive case for this in How to Be an Imperfectionist. He dismantles the supposed benefits of perfectionism one by one and advocates an alternate stance of imperfectionism. I found myself highlighting like a first-year psych student and have included some of my favorite excerpts here.

In general, the idea behind imperfectionism is to not care so much about conditions or results, and care more about what you can do right now to move forward with your identity and your life.

Here I'll be sharing some techniques for overcoming perfectionism, both from the book and my own practices. Let's dive in.

Get comfortable with discomfort

When’s the last time you did something new, in front of others, that you knew you'd be terrible at? I'm betting it's “not lately”.

Performing poorly in front of others, or even ourselves, is uncomfortable. But I doubt there’s any quality more predictive of success than being comfortable with that type of discomfort.

Perfectionism makes you stay home, not take chances, and procrastinate on projects; it makes you think your life is worse than it is; it keeps you from being yourself; it stresses you out; it tells you that good is bad; and it ignores the natural way in which things work.

The good news is, this is a skill you can build like any other.

I'm far from a natural artist. Being colourblind, my art-related memories from school are mostly of the "why is the sky purple" variety. When I switched to pencil shading to avoid colour, it was "grass shouldn't be grey". I got into photography as a teenager (including some green-skinned portraits) but left the paintbrushes and pencils alone.

So I surprised myself when I signed up for a painting class last year, and dreaded it so much I almost didn’t go. After a brief look at the basics, we set our easels up in a circle and started to paint. No practice and no undo button, in full view of a dozen others.

It was uncomfortable and downright embarrassing at times, but I survived. As much as painting, it was a lesson in how to be imperfect in front of others. It turns out it's okay to be not-so-good, as it allows others to relax and be less self critical. We got used to making mistakes and encouraging each other to keep trying.

If you're procrastinating, there's a good chance that this type of discomfort is to blame. So my advice is to pick something you’ve never done before that involves a group. It could be an art class, a team sport, improv, or anything else. Show up and be terrible. Realize that it’s not going to kill you to reveal yourself as less than perfect and that there's no need to keep holding yourself back.

Motivation follows action

One of the book's themes is that the only way to overcome the root fear of procrastination is to get moving. We've all experienced a rush of motivation that caused us to take action. It's a good feeling. But here's the secret: action creates motivation. If you wait for inspiration to strike before acting, the only thing you'll make is excuses.

People who have successfully changed their lives have figured out that when you start doing something, your emotions follow suit.

There are a few techniques you can use to achieve this action-before-motivation mindset.

Cut a slice, take a bite

Break up your project into small tasks. Then break those up. Get clear on exactly what you can do next, preferably with tasks that take 10 minutes or less. Then start.

Care less about doing it right. Care more about doing it at all.

By focusing on one task at a time, you avoid being overwhelmed by the project and the many ways it could turn out wrong. You take it from an ideal, imaginary state and turn it into real (if imperfect) actions that you can take now.

Daily habits

Every time you take the jump from thinking about doing something to actually doing it, you get a little better at overcoming resistance. Do this daily and you'll be surprised by how fast you improve.

Your best chance to reach your big dreams is through small goals in quantity.

I've found that the best habits are the simplest. Write for 30 minutes. Take a photo. Sketch a household object. Practice an instrument for 20 minutes. Meditate for 5. Do this every day and watch how it adds up.

There are apps for this and I know you're tempted to spend an hour researching them. Let me save you the trouble: it's best to track the habit on a piece of paper stuck to your fridge or next to your desk. You'll see it all day and making a check mark with a pen is much more satisfying than tapping a button.

And don't worry about being perfect (see a theme?). Missing a day is not the end of the world or an excuse to stop trying. Do the best you can and see if you can beat it next week.

The shitty first draft

Creative work is 10% making and 90% editing. But before you can edit, you need something to edit. This is where what Ann Handley calls the 'shitty first draft' in Everybody Writes comes in.

Take one of those tasks that you identified earlier, set a timer for 10 minutes, and work as fast as you can. Do everything you can to turn off the critic in your brain. If you're writing, don't go back to correct typos or grammar. Don't look for the perfect word.

Pay more attention to keeping your fingers moving than on writing anything coherent, nevermind eloquent. Then pat yourself on the back, take a short break, and come back to the less scary task of improving it with each revision.

Your brain on imperfectionism

There are a few common thought patterns to watch out for. When you catch yourself thinking one of these, question if it's really true or if there's a more useful thought you could substitute in its place.

"This is going to be the best ever."

Focus on the work, forget the results. The more you think about the final product in all of its glory, the harder it becomes to take imperfect action under imperfect circumstances. Which is the only action you'll ever take.

Perfectionists are driven mad or frozen in place by the chasm between desire and reality, which impairs their ability to progress and enjoy life.

It's more helpful to think about what you can do right now, however unimpressive it might be. Know that you'll have plenty of opportunities to improve it later.

"What I do is a reflection of who I am."

You are not your work. It's easy to get attached to what we create and assume that others are using it to evaluate us. And when you believe that, it's understandable that you're frozen in place, afraid to take imperfect action. You could get found out.

If you think people expect perfection from you, take comfort in the fact that most people don’t care what you do.

Oddly enough, the more you detach yourself from the work the more free you are to put your full effort into it. No one is measuring your worth by your work and neither should you.

"I'm almost ready to get started."

I enjoy taking courses, reading books and articles, and soaking up new knowledge. But over time I've realized that most of what I call preparation is procrastination.

Those who constantly seek information might have a confidence problem.

It's very easy to fall into a trap of believing that things would go smoothly if only you knew a bit more. But the reason they're not going well is that you insist on knowing more instead of getting started.

Learn to learn as you go. You need enough knowledge to take the first (imperfect) step and nothing more.

Now what?

Pick something you've been putting off, identify a small first step, and do it now. Close your browser. Put away your phone. Set a timer for 10 minutes and start. Focus on the task at hand rather than the end result, forget what others will think, and don't make excuses about how unprepared you are.

Take a small, imperfect step forward. It gets easier with practice.

Sorting by Created Date with GraphQL and Prisma

Mike Wheaton — Tue, 29 Jan 2019 00:00:00 +0000

While working on a side project with Prisma and GraphQL, I ran into a common situation. I wanted to display a list of items sorted from newest to oldest.

My first idea was to add a field for the created date to the model, just like any other. This could be set in the mutation resolver when an item is created.

type Item {
  ...
  created: DateTime!
}

However, I was concerned that it could be accidentally updated in the future. Given how common this requirement is, I thought there might be a better solution.

Digging through the documentation, I learned of Prisma's system fields. These are read-only fields that are included in the underlying database, even when they aren't defined in the data model. They're a sort of hidden metadata for each node.

And yes, it's possible to expose these to the GraphQL API by adding a 'createdAt' field with a matching directive. Don't get creative here, the names must be exact.

type Item {
  ...
  createdAt: DateTime! @createdAt
}

It's now possible to query this like any other field. Prisma generates methods to filter and sort based on this field. For my needs, createdAt_DESC did the trick.

items(orderBy: createdAt_DESC) {
    id
    name
    description
    createdAt
}

That's all there is to it! And since this field had existed under the surface all along, it already had data for all existing items. This turned out to be a huge timesaver and is a feature I'll be using, along with the 'updatedAt' system field, regularly from now on.

Rapid Prototypes with Google Sheets

Mike Wheaton — Sat, 12 Jan 2019 00:00:00 +0000

While prototyping a new web app or feature, you often need test data to fill out a view. The usual approach is to create a quick JavaScript object or JSON file, which works well enough.

To a point. After you have more than a few items, it's difficult to find the one you're looking for as the object grows. Then you realize another property is needed and you'll have to add it to each item individually.

Even with a small dataset, it's quickly unmaintainable.

I ran into this problem while building a prototype view for Lurn. I went in search of a spreadsheet-like interface for editing JSON files and came across a better alternative. It turns out that Google Sheets can be accessed in JSON format via a public URL. Not only does this provide a quick way to create and maintain data, it even opens up the possibility of having others edit the data like a mini-CMS or accepting user input via Google Forms.

Want to jump ahead to the final result? Here's a CodeSandbox demo.

Let's get started.

Creating and publishing your data

Start off by going to Google Sheets and creating a blank spreadsheet. For each column, use a camelCase heading so that it can be easily accessed later as row.myColumnHeader. You’ll also want an ID column to use as the unique key for each item when rendering a list.

With the data in place, go to the File menu and select ‘Publish to the web’. The default settings are fine, so you can go ahead and click Publish.

Retrieving your data

Now that you’ve saved your spreadsheet and have its unique key, you can point your browser to a URL in this format:

https://spreadsheets.google.com/feeds/cells/SPREADSHEET_KEY/1/public/full?alt=json

Your data is there in glorious JSON! Actually, the structure is a bit of a mess.

Fortunately, there’s a project called Tabletop.js that makes Google Sheets data easier to parse. Even better, someone has done us the favor of creating a service to run the script and return clean JSON: https://spreadsheet.glitch.me/

So rather than getting the data directly from Google, use a URL in this format:

https://spreadsheet.glitch.me/?key=SPREADSHEET_KEY

Rendering the React component

You're almost there! Let's get the data into your React application.

In whichever component will display the data, start by adding an empty array to the state. This is where you'll place the items from the spreadsheet as they are loaded in.

class App extends Component {
  state = {
    items: []
  };

When you want a React component to request external data, componentDidMount is the place to kick off that request. Create that method and add a fetch() that will request the data and put it into your component’s state.

  componentDidMount() {
    fetch(`https://spreadsheet.glitch.me/?key=SPREADSHEET_KEY`)
      .then(response => response.json())
      .then(items => this.setState({ items }))
      .catch(error => console.log("Error fetching data:", error));
  }

Now in the render method, you can get the items from state and map over them.

  render() {
    const { items } = this.state;

    if (!items.length) {
      return <p>Loading...</p>;
    }

    return (
      <div>
        <p>Loaded {items.length} rows from Google Sheets:</p>
        <ol>
          {items.map(item => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ol>
      </div>
    );
  }

Note that there's a loading message to display while the array is empty. The Fetch API is asynchronous, and it may take a few seconds to get the response back and re-render the component.

Once the data comes back, the items array will contain an object for each row of your spreadsheet. There is a corresponding property for each column, which you can access like item.title.

That’s it! You have a React component pulling data from a spreadsheet. This isn’t going to scale well for a large application, but for a quick prototype you now have a much easier way to build up test data and maintain it over time.

See it in action in this CodeSandbox demo.

Exercises and further reading

Want to take it to the next level?

Create a Google Form that adds data to your spreadsheet.
Add Tabletop.js to your project for improved performance.
If the request fails, display an error instead of the loading message.

Modeling (and querying) relational data with JavaScript

Mike Wheaton — Sun, 16 Dec 2018 00:00:00 +0000

This post describes a way of modeling relational data in JavaScript and shows how the filter() and some() array methods can be used to query this data. It's not intended to replace a real database, but to show how an array of objects can be filtered based on the contents of another array of objects.

Structuring the data

For this example, let's consider teachers and students. Each person can be represented by simple object with their person's name and a unique ID. The ID allows us to refer to a specific teacher or student, even if their name were to change in the future. Since we'll have multiple teachers and students, let's organize them in arrays:

const teachers = [
  {
    id: 1,
    name: 'John Kreuger',
  },
  {
    id: 2,
    name: 'Amy David',
  },
];

const students = [
  {
    id: 1,
    name: 'Alice Thompson',
  },
  {
    id: 2,
    name: 'Bill Lemond',
  },
  {
    id: 3,
    name: 'Ashley Jefferson',
  },
];

Teachers have multiple students and students have multiple teachers. This is a many-to-many relationship, and there are several ways to model this data. One method is to create a list of the connections between teachers and students. This can be referred to as an associative entity if you want to appear smart and forgot your glasses at home.

Let's create a third array to describe these connections. Note that we're using the unique IDs of each teacher and student, future proofing us against name changes and allowing people to share the same name.

const teachersToStudents = [
  {
    teacherId: 1,
    studentId: 1,
  },
  {
    teacherId: 1,
    studentId: 2,
  },
  {
    teacherId: 1,
    studentId: 3,
  },
  {
    teacherId: 2,
    studentId: 2,
  },
  {
    teacherId: 2,
    studentId: 3,
  },
];

Filtering the data

Okay, we now have three arrays describing teachers, students, and the connections between them. 🎉

Let's put this to use. Our fictional application could have a profile page for each teacher with a list of their students. We're going to need a function that will take a teacher (referenced by their ID) and return an array of the students who have that teacher.

// Returns an array of students for a given teacher.
function getStudentsForTeacher(teacherId) {
  // @todo: Return array.
}

What we want to return here is a subset of the students array. Lucky for us, this is exactly what the filter() method does. It goes through the elements in an array one by one, passing each element to a function we provide. If our function returns true, the element will be added to a new array.

For example, if our function always returns true we would get an array containing every student.

// Returns an array of students for a given teacher.
function getStudentsForTeacher(teacherId) {
  students.filter(student => true);
}

So what we need is a function that will return true if the student is connected to the teacher and false otherwise. To keep it clear let's create a second function for this:

// Returns true or false, indicating whether a given teacher has a given student.
function teacherHasStudent(teacherId, studentId) {
  // @todo: Return true or false.
}

How do we answer this question? That's right, by referring to our teachersToStudents array that describes all of the connections between teachers and students.

We could create a loop to iterate through the array, returning true if we find a match and false if we reach the end. Not terrible, but there's a better way. Similar to filtering, the some() method will iterate over the elements in an array. But instead of creating a new array, it will run each element against a test function we provide and return true if at least one element passes our test.

// Returns true or false, indicating whether a given teacher has a given student.
function teacherHasStudent(teacherId, studentId) {
  return teachersToStudents.some(/* @todo: Test function that returns true if we find a match. */);
}

So all that's missing is a function that will tell us if the teachersToStudents array contains an object with the teacher and student we're looking for. Here's an arrow function that compares IDs to do just that.

// Returns true if this item matches, and false otherwise.
teacherToStudent =>
  teacherToStudent.teacherId === teacherId &&
  teacherToStudent.studentId === studentId;

By passing that function to some(), we now have a working function that tells us whether a given teacher has a given student!

// Returns true or false, indicating whether a teacher has a given student.
function teacherHasStudent(teacherId, studentId) {
  return teachersToStudents.some(
    teacherToStudent =>
      teacherToStudent.teacherId === teacherId &&
      teacherToStudent.studentId === studentId
  );
}

We can update getStudentsForTeacher() to use this, so that it will go through students and create a new array of only those students who are associated with the specified teacher.

// Returns an array of students for a given teacher.
function getStudentsForTeacher(teacherId) {
  return students.filter(student => teacherHasStudent(teacherId, student.id));
}

// Test it out!
console.log(getStudentsForTeacher(1)); // Returns 3 students.
console.log(getStudentsForTeacher(2)); // Returns 2 students.

Success! We've taken two arrays, described relationships between their elements using a third array, and then queried our data to get what needs to be shown on the teacher's profile page. Take a look at the CodePen demo to see how this all fits together.

While this exact use case would be better handled by querying on the server-side (especially if you're dealing with thousands of records or sensitive data), these array methods are useful for other problems you're likely to encounter.

Exercises and further reading

Want to get more practice with this or learn more? I'd suggest you:

Write a function that returns the teachers for a given student.
Read up on schemas and find alternate ways of structuring this data.
Iterate through the teachers and display a list of students for each teacher in the browser.
Add an array of courses, connecting these to both teachers and students. Watch out for redundant data.
Try out other common array methods like reduce() and forEach().

Publishing an RSS feed with Gatsby

Mike Wheaton — Mon, 01 Jan 2018 00:00:00 +0000

Wait, what's RSS?

In their article on how it's making a comeback, Wired explains:

Its aim is straightforward: to make it easy to track updates to the content of a given website in a standardized format ... it can give you a comprehensive, regularly updated look at all of the content your favorite sites publish throughout the day.

That standardized format is an XML file (see one for this site) that allows apps like Feedly to notify users when you post new content.

Generating this for your Gatsby blog is fairly straightforward.

Publishing a feed

Start by adding the gatsby-plugin-feed package to your site.

npm install --save gatsby-plugin-feed

Now add it to the array of plugins in gatsby-config.js.

plugins: [
  // Other plugins will already be here, don't forget the comma.
  'gatsby-plugin-feed',
];

The RSS feed is only generated in production mode. You can test it by running gatsby build && gatsby serve and navigating to http://localhost:9000/.

Congratulations, you have an RSS feed! 🎉

Or maybe you're staring at an ugly error message like I was. Let's get that fixed.

Customizing the feed

By default, the plugin looks for a slug field that's associated with each blog post. This is the part of the URL that represents a post, such as /blog/the-post-title. It isn't generated for each post by default.

While you can configure another plugin to generate slugs, you can have full control over your URLs by including a path in the front matter of each post.

--------
path: '/blog/the-post-title'
--------

The content of your post.

Next, update gatsby-config.js to replace the single line you added earlier (with default options) with an object containing your custom configuration.

{
  resolve: `gatsby-plugin-feed`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            siteUrl
          }
        }
      }
    `,
    feeds: [
      {
        serialize: ({ query: { site, allMarkdownRemark } }) => {
          return allMarkdownRemark.edges.map(edge => {
            return Object.assign({}, edge.node.frontmatter, {
              description: edge.node.excerpt,
              date: edge.node.frontmatter.date,
              url: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
              guid: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
              custom_elements: [{ 'content:encoded': edge.node.html }],
            });
          });
        },
        query: `
          {
            allMarkdownRemark(
              limit: 1000,
              sort: { order: DESC, fields: [frontmatter___date] }
            ) {
              edges {
                node {
                  excerpt
                  html
                  frontmatter {
                    date
                    path
                  }
                }
              }
            }
          }
        `,
        output: '/rss.xml',
        title: "RSS Feed",
      },
    ],
  },
},

This isn't quite as complex as it looks. Your RSS feed is generated by the serialize() function. You'll see that it returns an array of posts, with an object for each post containing properties like the description and published date. Those values come from GraphQL queries of the site's metadata (top) and blog posts (bottom).

There's a good chance that the code above will work for you. If not, use the GraphiQL tool to test queries and explore the data you have available until you're able to complete the object that's returned for each post.

While it may take a few tries to get through the errors, you'll soon have a custom configuration for your blog. This is a set it and forget it task that will automatically generate an RSS feed of the latest posts when your site builds.

Next steps

Subscribe to your blog with an app like Feedly to keep an eye on your RSS feed.
Explore other configuration options for the plugin.
Learn more about GraphQL queries.