Category: JavaScript

Gatsby.js

Gatsby.js — Static Assets

Post author By John Au-Yeung
Post date October 19, 2020
No Comments on Gatsby.js — Static Assets

white and brown long coated small dog lying on white textile

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Importing Assets Directly into Files

We can import images directly into component files.

For example, we can write:

import React from "react"
import laptop from "../images/laptop.jpg"

const IndexPage = () => {
  return (
    <div>
      <img src={laptop} alt="laptop" />
    </div >
  )
}
export default IndexPage

We import the src/images/laptop.jpg file as a module.

Then we pass that directly as the value of the src prop of our img element.

And it’ll be displayed as an image.

We can also add images with CSS:

src/pages/index.css

.laptop {
  background-image: url(../images/laptop.jpg);
  height: 200px;
  width: 200px;
}

src/pages/index.js

import React from "react"
import './index.css'

const IndexPage = () => {
  return (
    <div className='laptop'>
    </div >
  )
}
export default IndexPage

We add the laptop class with the src/images/laptop.jpg set as the background image.

In index.js , we import the CSS and apply the class to the div.

So we’ll see the image displayed as the background image.

Querying for a `File` in GraphQL Using gatsby-source-filesystem

We can query for a file with GraphQL queries using the gatsby-source-filesystem plugin.

To do this, we write:

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
  ],
}

src/pages/index.js

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    {
      allFile(filter: { extension: { eq: "pdf" } }) {
        edges {
          node {
            publicURL
            name
          }
        }
      }
    }
  `)

  return (
    <div>
      <ul>
        {data.allFile.edges.map((file, index) => {
          return (
            <li key={`pdf-${index}`}>
              <a href={file.node.publicURL} download>
                {file.node.name}
              </a>
            </li>
          )
        })}
      </ul>
    </div >
  )
}
export default IndexPage

We add the gatsby-source-filesystem plugin with the path property to look for.

Then in index.js , we make the query for searching for files with extension pdf .

And we get the publicURL and name and render them in the JSX.

Now we see a link for the PDF files found, and we can download them by clicking them.

Using the Static Folder

We can also add assets to the static folder in our Gatsby project.

For example, we can write:

import React from "react"

const IndexPage = () => {
  return (
    <div>
      <img src={'/laptop.jpg'} alt="laptop" />;
    </div >
  )
}
export default IndexPage

to render the static/laptop.jpg file in our component.

We should use the static folder when we want to include assets that are outside the bundled code.

It’s also good for storing images that need to be dynamically referenced.

Conclusion

We can import assets directly into our components and also read them with plugins with Gatsby.

Gatsby.js

Gatsby.js — Markdown to HTML and Grayscale Images

Post author By John Au-Yeung
Post date October 19, 2020
No Comments on Gatsby.js — Markdown to HTML and Grayscale Images

closeup photo of yellow Labrador retriever puppy

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Transforming Markdown into HTML

We can transform Markdown into HTML with Gatsby.

To do this, we use the gatsby-transformer-remark plugin.

For example, we write:

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-remark`
  ],
}

pages/pandas-and-bananas.md

---
title: "Sweet Pandas Eating Sweets"
date: "2020-08-10"
---
Pandas are really sweet.

pages/index.js

import React from "react"
import { graphql } from "gatsby"

export const query = graphql`
  query {
    allMarkdownRemark {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          excerpt
        }
      }
    }
  }
`

const IndexPage = ({ data }) => {
  return (
    <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.id}>
          <h3>{node.frontmatter.title}— {node.frontmatter.date}</h3>
          <p>{node.excerpt}</p>
        </div >
      ))}
    </div >
  )
}
export default IndexPage

We add the plugins in the gatsby-config.js file.

The plugins are added to the plugins array.

We need the gatsby-source-filesystem plugin to read the files.

The path property has the string of the path to read from.

The gatsby-transformer-remark plugin transforms Markdown into HTML.

Then in the IndexPage component, we make the query with the graphql tag to get the Markdown data,

And we get the data from the data prop.

The frontmatter property has the metadata and the excerpt property has the excerpt.

Transforming Images into Grayscale Using GraphQL

Also, we can transform images into grayscale with a GraphQL query.

To do this, we write:

gatsby-config.js

const path = require('path');

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
  ],
}

index.js

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export const query = graphql`
  query {
    file(relativePath: { eq: "images/laptop.jpg" }) {
      childImageSharp {
        fluid(grayscale: true) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

const IndexPage = ({ data }) => {
  return (
    <div>
      <Img
        fluid={data.file.childImageSharp.fluid}
        alt="laptop"
      />
    </div >
  )
}
export default IndexPage

We add the gatsby-transformer-sharp and gatsby-plugin-sharp plugins to let us transform the images.

The gatsby-source-filesystem plugin lets us read the images from the file system.

Then in index.js , we make the query to transform the image into grayscale.

We set grayscale to true to let us transform the image to a grayscale one.

We pass in the transformed image as the value of the fluid prop.

Now we should see a grayscale image displayed.

Conclusion

We can transform Markdown to HTML and transform images to grayscale with Gatsby.

React

Getting Started with Creating International React Apps

Post author By John Au-Yeung
Post date October 18, 2020
No Comments on Getting Started with Creating International React Apps

short-coated white and beige puppy on the floor

Many apps have to be made usable by different users from various parts of the world.

To make this easier, we can use the react-intl to do the internationalization for us.

In this article, we’ll look at how to get started with the react-intl library.

Getting Started

To get started, we install the package by running:

npm install react-intl --save

Then we can use the IntlProvider to our app to let us use it:

import React from "react";
import { IntlProvider, FormattedMessage } from "react-intl";

const messages = {
  en: {
    greeting: "Hello {name}! How's it going?"
  },
  es: {
    greeting: "¡Hola {name}! ¿Cómo te va?"
  },
  fr: {
    greeting: "Bonjour {name}! Comment ça va?"
  },
  de: {
    greeting: "Hallo {name}! Wie geht's?"
  }
};

export default function App() {
  const [name] = React.useState("james");
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedMessage id="greeting" values={{ name }} />
      </p>
    </IntlProvider>
  );
}

We have the translated messages in the messages object.

The keys are the locale.

Messages are taken from the messages object and passed into the messages prop.

Then we used the FormattedMessage component to display the message as specified by the ID.

values has the values for the placeholder.

name is the placeholder in the message, so that’s what we passed in.

Formatting Time

We can format time using the FormattedDate component.

For instance, we can write:

import React from "react";
import { IntlProvider, FormattedDate } from "react-intl";

const messages = {
  en: {
    greeting: "Hello {name}! How's it going?"
  },
  es: {
    greeting: "¡Hola {name}! ¿Cómo te va?"
  },
  fr: {
    greeting: "Bonjour {name}! Comment ça va?"
  },
  de: {
    greeting: "Hallo {name}! Wie geht's?"
  }
};

export default function App() {
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedDate
          value={new Date()}
          year="numeric"
          month="long"
          day="numeric"
          weekday="long"
        />
      </p>
    </IntlProvider>
  );
}

Then we get the formatted date formatted for any locale.

year sets the year format.

month sets the month format.

day sets the day format.

weekday sets the weekday format.

numeric means it’s displayed as a number.

long is displayed as the full word.

FormattedDateParts

There’s also the FormattedDateParts component to divide a date into their components.

This lets us have more customization in how to display the date.

For example, we can write:

import React from "react";
import { IntlProvider, FormattedDateParts } from "react-intl";

const messages = {
  en: {
    greeting: "Hello {name}! How's it going?"
  },
  es: {
    greeting: "¡Hola {name}! ¿Cómo te va?"
  },
  fr: {
    greeting: "Bonjour {name}! Comment ça va?"
  },
  de: {
    greeting: "Hallo {name}! Wie geht's?"
  }
};

export default function App() {
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedDateParts
          value={new Date()}
          year="numeric"
          month="long"
          day="2-digit"
        >
          {parts => (
            <>
              <b>{parts[0].value}</b>
              {parts[1].value}
              <em>{parts[2].value}</em>
            </>
          )}
        </FormattedDateParts>
      </p>
    </IntlProvider>
  );
}

to format our date parts with different formatting.

Then the first entry of parts is the month.

The 2nd is the comma.

And the 3rd is the day.

FormattedTime

To just show the internationalized time, we can use the FormattedTime component.

For example, we can write:

import React from "react";
import { IntlProvider, FormattedTime } from "react-intl";

const messages = {
  en: {
    greeting: "Hello {name}! How's it going?"
  },
  es: {
    greeting: "¡Hola {name}! ¿Cómo te va?"
  },
  fr: {
    greeting: "Bonjour {name}! Comment ça va?"
  },
  de: {
    greeting: "Hallo {name}! Wie geht's?"
  }
};

export default function App() {
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedTime value={new Date(1459832991883)} />
      </p>
    </IntlProvider>
  );
}

to show a formatted time.

FormattedTimeParts

Like with dates, we can divide the time into parts and format that.

We can use the FormattedTimeParts component to do that.

For example, we can write:

import React from "react";
import { IntlProvider, FormattedTimeParts } from "react-intl";

const messages = {
  en: {
    greeting: "Hello {name}! How's it going?"
  },
  es: {
    greeting: "¡Hola {name}! ¿Cómo te va?"
  },
  fr: {
    greeting: "Bonjour {name}! Comment ça va?"
  },
  de: {
    greeting: "Hallo {name}! Wie geht's?"
  }
};

export default function App() {
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedTimeParts value={new Date()}>
          {parts => (
            <>
              <b>{parts[0].value}</b>
              {parts[1].value}
              <em>{parts[2].value}</em>
            </>
          )}
        </FormattedTimeParts>
      </p>
    </IntlProvider>
  );
}

The parts array has the hour as the first entry.

The 2nd is the colon and the 3rd is the minute.

Conclusion

We can add translations easily with the react-intl package.

Also, we can format the time the way we like.

Vue 3 — Component Events

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to listen to component events.

Listening to Child Components Events

We can listen to child components within the parent component.

Our child component has to emit the event so that the parent component can listen to it.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div :style="{ 'font-size': `${fontSize}px` }">
        <todo-item
          @enlarge-text="fontSize++"
          v-for="t of todos"
          :todo="t"
          :key="t.id"
        ></todo-item>
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            fontSize: 15,
            todos: [
              { id: 1, name: "eat" },
              { id: 2, name: "drink" },
              { id: 3, name: "sleep" }
            ]
          };
        }
      }); 
      app.component("todo-item", {
        props: ["todo"],
        template: `
          <div>
            <p>{{ todo.name }}</p>
            <button @click="$emit('enlarge-text')">
              Enlarge text
            </button>
        </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

We created a todo-item component with an ‘enlarge text’ button.

When we click it, the $emit function is run.

The argument is the event name.

Then in the parent component that holds the todo-item component, we have the @enlarge-text directive so that we can listen to the enlarge-text event that’s emitted from todo-item .

When that event is received, when we increase fontSize by 1.

Since we set fontSize as the font size of our div, then font size change will be applied across all the child elements.

Emitting a Value With an Event

The $emit function takes a second argument with the value we want to emit with the event.

Therefore, we can modify our code to pass the value into the $emit function.

Then we get the value emitted from the $event object.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div :style="{ 'font-size': `${fontSize}px` }">
        <todo-item
          @enlarge-text="fontSize += $event"
          v-for="t of todos"
          :todo="t"
          :key="t.id"
        ></todo-item>
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            fontSize: 15,
            todos: [
              { id: 1, name: "eat" },
              { id: 2, name: "drink" },
              { id: 3, name: "sleep" }
            ]
          };
        }
      }); 

      app.component("todo-item", {
        props: ["todo"],
        template: `
          <div>
            <p>{{ todo.name }}</p>
            <button @click="$emit('enlarge-text', 1)">
              Enlarge text
            </button>
          </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

$emit takes a second argument that we emit with the enlarge-text event.

Now in the parent component, we get the value emitted with the $event variable.

In this case, $event is set to 1 since that’s what we emitted.

We changed the @enlarge-text ‘s value so that the fontSize updates from the $event instead of a constant value.

Also, we can put the expression we passed into @enlarge-text into a method.

This is handy if we have more code.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="[https://unpkg.com/vue@next](https://unpkg.com/vue@next)"></script>
  </head>
  <body>
    <div id="app">
      <div :style="{ 'font-size': `${fontSize}px` }">
        <todo-item
          @enlarge-text="onEnlargeText"
          v-for="t of todos"
          :todo="t"
          :key="t.id"
        ></todo-item>
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            fontSize: 15,
            todos: [
              { id: 1, name: "eat" },
              { id: 2, name: "drink" },
              { id: 3, name: "sleep" }
            ]
          };
        },
        methods: {
          onEnlargeText(amount) {
            this.fontSize += amount;
          }
        }
      }); 

      app.component("todo-item", {
        props: ["todo"],
        template: `
          <div>
            <p>{{ todo.name }}</p>
            <button @click="$emit('enlarge-text', 1)">
              Enlarge text
            </button>
        </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

We changed @enlarge-text ‘s value to our onEnlargeText method.

amount would be automatically set to the $event variable’s value, which is 1.

So we get the same result.

Conclusion

We can listen to the child component’s events from the parent.

This way, we can pass data from child to parent.

Vue 3 — Component Basics

Labrador retriever puppy walking on green grass

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to create simple Vue 3 components.

Components

Components are reusable Vue instances with a name.

For instance, we can create a component by writing:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <button-counter ></button-counter>
    </div>
    <script>
      const app = Vue.createApp({}); 
      app.component("button-counter", {
        data() {
          return {
            count: 0
          };
        },
        template: `
          <div>
            <button @click="count--">
              decrement
            </button>
            <p>{{ count }}</p>
          </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

We create a component with a button and a p element.

When we click the button, the count is decrement, and the value is displayed in the p element.

Then we used the button-counter element in the app’s template.

We can reuse the component multiple times.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <button-counter></button-counter>
      <button-counter></button-counter>
      <button-counter></button-counter>
    </div>
    <script>
      const app = Vue.createApp({}); 
      app.component("button-counter", {
        data() {
          return {
            count: 0
          };
        },
        template: `
          <div>
            <button @click="count--">
              decrement
            </button>
            <p>{{ count }}</p>
          </div>
        `
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

Now we have 3 instances of the button-counter component.

They all have their own template and state.

Organizing Components

We got to organize our components well since we’ll probably have many of them in an app.

We can put them in a tree.

So we divide our app into small components we nest components to build what we want.

Passing Data to Child Components with Props

Our previous example didn’t have any way to get data from a parent component.

However, Vue 3 provides us with a way to pass data from parent to child with props.

Props are custom attributes that we can register on a component.

When a value is passed into the prop attribute, it becomes a property of the component instance.

For instance, we can create a component that takes props and use it by writing:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <blog-post title="hello world"></blog-post>
    </div>
    <script>
      const app = Vue.createApp({}); 
      app.component("blog-post", {
        props: ["title"],
        template: `<h1>{{ title }}</h1>`
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

We create the blog-post component with the title prop so that we can display it on the template.

The props property has an array of strings of the prop names.

Having that means we registered that props to be allowed to be passed into our component.

A component can have as many props as we want.

If we have an array of data, we can use the v-for directive to render them.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <todo-item v-for="t of todos" :todo="t" :key="t.id"></todo-item>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            todos: [
              { id: 1, name: "eat" },
              { id: 2, name: "drink" },
              { id: 3, name: "sleep" }
            ]
          };
        }
      }); 

      app.component("todo-item", {
        props: ["todo"],
        template: `<p>{{ todo.name }}</p>`
      }); 
      app.mount("#app");
    </script>
  </body>
</html>

to render an array with components.

We have the todo-item component with the todo prop registered.

The template property rendered the name property of the array.

todo-item is used with v-for to render the todo items.

We pass in the todo value with the todo prop with :todo='t' and do the same with the key prop.

The key prop is used to let Vue identify each element uniquely.

Conclusion

We can create our own components with the app.component method so that we can divide our Vue app into manageable pieces.

Importing Assets Directly into Files

Querying for a File in GraphQL Using gatsby-source-filesystem

Using the Static Folder

Conclusion

Transforming Markdown into HTML

Transforming Images into Grayscale Using GraphQL

Conclusion

Getting Started

Formatting Time

FormattedDateParts

FormattedTime

FormattedTimeParts

Conclusion

Listening to Child Components Events

Emitting a Value With an Event

Conclusion

Components

Organizing Components

Passing Data to Child Components with Props

Conclusion

Querying for a `File` in GraphQL Using gatsby-source-filesystem