DEV Community: Hosh'ki Tsunoda

What is it like to be a Design System Engineer?

Hosh'ki Tsunoda — Wed, 15 Feb 2023 04:36:30 +0000

Since Design Systems have been discussed more recently, I thought I would share my experience as a newbie Design System Engineer (DSE).

Before I switched from front-end engineer to dedicated DSE, my understanding of DSEs was a variation of Front End Engineers living in an earlier product development phase and working more with designers. I thought I could adapt quickly because I've worked as a front-end engineer for a few years and made a small React component library, have a design background (I majored in Graphic Design in college), and have had plenty of experience working with UI and UX designers in the previous jobs.

However, I started running into different problems and challenges once I started working on the design systems.

Here are a few examples I learned on the job:

Build tool configuration
- Frameworks like CRA and Nextjs are fantastic tools and abstract away many headaches that come with the build tools. But DSEs need to know what's happening under the hood so they know how your product (design systems) is built.
Helping consumers of the design systems
- The developers and designers are encouraged to use the design systems to build their products. And often, they have questions and problems with the components. How you solve these problems for them determines your design system's success because, ultimately, the design system needs to be adopted by the teams to build the products. Providing good support for consumers requires good communication skills, and knowing when and how to push back becomes a critical skill.
Accessibility knowledge
- It's not that I didn't take a11y seriously before, but for DSEs, it is one of the most critical aspects of your work. If the component meets the a11y standard, the final product will likely have a good a11y.
Takes much longer to release
- Throughout my career as a developer, I was always in a startup environment, so my mindset was "ship often, fix as the bug comes." But this only applies to some design systems because of the impact those bugs can make on the products. Thorough and rigorous planning to create a solid foundation so that the product can build on top of it.
Every design system is different
- Just because you work on a design system doesn't mean you can copy everything from Material Design. Each design system has its requirement, and the "success" of the design system varies too. Knowing what success means to your system is key to creating a successful design system.

I really enjoy working on design systems as I get to play with code and design (Figma), and debugging aspect of work is very satisfying. Dedicated design system engineers are still a rare kind of engineers, but I'm excited to pursue this career as the design system will become even more important for the tech companies that want to scale:)

I'll be writing about more technical aspects of design system engineering. Please follow and support if you liked what you just read!

How to Add Twitter Cards to Your Gatsby Site

Hosh'ki Tsunoda — Sat, 10 Oct 2020 00:42:43 +0000

Twitter cards let you attach rich media so that if your tweet includes links, a ‘card’ or extra block of text, images or videos are added to the tweet. It's the image and text you see when you share the websites on Twitter:

Twitter Cards in Gatsby

Unless you use a starter that has Twitter Cards logic hooked up already, you are going to need to add it yourself and it can be a bit tricky for junior devs including myself. The following will show you how to set up Twitter Cards on your Gatsby blog easily using gatsby-remark-twitter-cards.

First, you need to install gatsby-remark-twitter-cards by running:

npm i gatsby-remark-twitter-cards

Once the plugin is installed, go over to gatsby-config.js and add the following to your remark plugins:

// gatsby-config.js
plugins: [
    // ...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-twitter-cards`,
            options: {
              title: "hoshki.me",
              separator: "|",
              author: "Hosh'ki Tsunoda",
              background: require.resolve("./src/images/card-background.png"),
              fontColor: "#011a27",
              titleFontSize: 96,
              subtitleFontSize: 60,
              fontStyle: "monospace",
            },
          },
        ],
      },
    },
  ],

By adding this code block above, you are telling gatsby how your Twitter card should look like when generated.

Here's a quick description of what each property represents:

title - it should be the name of your website
separator - this will be used as a separator between the title and the name of author
author - the name of the author
background - this will be your cards’ background. It can be either an image or the hex code.
fontColor - used to set the color of the font on the card
titleFontSize - used to set the font size on the card title
subtitleFontSize - used to set the font size on the card subtitle
fontStyle - used to set the font on the card, default is monospace
fontFile - though I did not use special fonts on my card, you could add a font file and reference this in fontStyle

This plugin will generate the Twitter card based on the setting above and it will be saved in the /public folder and will be referenced when you are to share the link.

Now the setting for this plugin is all done. Let’s open up the SEO component or Header component(or simply in the <head> tag) and add twitter metadata like so:

// seo.js inside SEO component
...
return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          property: `og:image`,
          content: `${url}twitter-card.jpg`,
        },
        {
          name: `twitter:card`,
          content: `summary_large_image`,
        },
        {
          name: `twitter:image`,
          content: `${url}twitter-card.jpg`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )

I have the SEO component that's being used in each page and template thus it makes sense to add the metadata in there. Make sure you have all the Twitter metadata as these are needed information for generating a Twitter card.

Finally, go over to the blogTemplate.js and add the URL to the SEO or Header component as a prop. It needs to be an absolute path. In my case, I have the URL stored in gatsby-config.js under siteMetadata, so you can pull that with graphQL like so:

// blogTemplate.js
const Template = ({ data, pageContext }) => {
  const { frontmatter, fields } = markdownRemark
  const { url } = siteMetadata

  return (
    <Layout page="blog">
      <SEO title={frontmatter.title} url={`${url}${fields.slug}`} />
      ...
    </Layout>
  )
}

export const pageQuery = graphql`
  query($slug: String!) {
    site {
      siteMetadata {
        title
        twitterHandle
        url
      }
    }
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
        tags
      }
      fields {
        slug
      }
    }
  }
`

Now your site is ready to generate the Twitter card. Write a blog post and run the build command, you will see the twitter-card.jpg generated under the corresponding folder to your blog post.

Also, you can check your card by typing in the absolute path to your browser. For example: https://www.hoshki.me/2020-09-11-how-to-setup-tailwind-css-with-cra-and-typescript/twitter-card.jpg

That’s all you need to do in order to show a Twitter card for your blog. I have tried a couple of other plugins but I found this one the easiest to implement.

Hope you find this article helpful and please share if you liked what you just read. Thank you!

Utility Function to Make Axios Requests

Hosh'ki Tsunoda — Thu, 24 Sep 2020 23:43:44 +0000

When intersecting with APIs, axiosis one of the go-to ways to retrieve/post data for a lot of React users. In this article, I will be sharing a quick and convenient way to handle GET request in React using the axios.createmethod with YouTube API as an example. We will be sending a search term to YouTube API and get data for the first 5 videos that match the search term.

First thing first, let’s get a YouTube API key. You can follow this link for how to obtain the API key.

The endpoint you will be using is https://www.googleapis.com/youtube/v3/search

Setting up axios.create

After obtaining the API key, you are going to need to create a React project by running:

create-react-app axios-create-example --typescript

Once the project is ready, clean up the project by removing some of the files in the /src folder. I usually leave only App.tsx, index.tsx, and react-app-env.d.tsfiles and remove imports for the deleted files in each file.

Next, let’s install axios by running:

npm install axios

Once it’s installed, let’s create a /utils folder and create an api.tsx file in there. This file will hold the axios.create logic.

The first thing you need to do is import axios inside api.tsx file so you can actually use axios:

import axios from ‘axios’

Now let’s create a constant that holds the API key:

const API_KEY = ‘YOUR_API_KEY_FROM_YOUTUBE’

The API key should be set to an environmental variable if you are thinking of committing it to GitHub, check this link if you are not familiar with it.

Then we are going to create an object that holds URL and params that are needed to access YouTube API and assign it to a config constant like so:

// utils/api.tsx
const config = {
  baseURL: `https://www.googleapis.com/youtube/v3`,
  params: {
    part: 'snippet',
    maxResults: 5,
    key: API_KEY,
  },
}

The baseURL is the base of an endpoint URL and params are set of data that you need to pass to YouTube API upon calling the GET method. The ‘part’ is a search resource properties that the API response will include, it is set to a ‘snippet’ in this case. ‘maxResults’ is the number of items that should be returned, and YouTube API will read the ‘key’ property to know you are authorized to use the API.

Since we initiated this project as a TypeScript project, let’s add an interface for this config object. It should look like:

// utils/api.tsx
interface Params {
  baseURL: string
  params: {
    part: string
    maxResults: number
    key: string | undefined
  }
}

And let’s add this to a config constant like this:

// utils/api.tsx
const config: Params = {
  //...
}

Now all you need to do is export the axios.create with the config object as an argument and the file should look like this:

// utils/api.tsx
import axios from 'axios'

const API_KEY = `YOUR_API_KEY_FROM_YOUTUBE`

interface Params {
  baseURL: string
  params: {
    part: string
    maxResults: number
    key: string | undefined
  }
}

const config: Params = {
  baseURL: `https://www.googleapis.com/youtube/v3`,
  params: {
    part: 'snippet',
    maxResults: 5,
    key: API_KEY,
  },
}

export default axios.create(config)

axios.create lets you create a new instance of axios with a custom config meaning you can call this exported function to perform CRUD operations like GET, POST, DELETE and PUT.

Using the API function

We have axios.create set up and it’s time to use it in the app to retrieve YouTube videos. Let’s open App.tsx and import axios create function we just created:

// App.tsx
import React, { useCallback, useState } from 'react'
import api from './utils/api'

//…

Inside the App component, we are going to create fetchVideosHandler to get a list of YouTube video data. This is going to be an async-await function and let’s use useCallback hook to avoid unnecessary re-fetching of the data. Your code for fetchVideosHandler should look like this:

// App.tsx
const fetchVideosHandler = useCallback<(keyword: string) => Promise<void>>(
  async (keyword: string) => {
    try {
      // api call will be implemented here...      
    } catch (error) {
      console.log(error)
      throw new Error('Failed to fetch videos...')
    }
  },
  []
)

To use the API function we created in a separate file, we will call it like this:

const fetchVideosHandler = useCallback<(keyword: string) => Promise<void>>(
  async (keyword: string) => {
    try {
      const { data } = await api.get<VideoDataArray>('/search', {
        params: {
          q: keyword,
        },
      })
      console.log(data)
    } catch (error) {
      console.log(error)
      throw new Error('Failed to fetch videos...')
    }
  },
  []
)

What's happening here is api function we imported from utils/api.tsx is exporting axios.create() which allows you to create axios instances, .get() in this case, with /search path passed in. This /search will be combined with the baseURL we set in api.tsx and becomes a complete endpoint URL. And params object that contains a keyword(search term) also gets passed to API and then returns video data. axios.create() gives you the ability to create all kinds of instances. More on it here.

As you can see, this fetchVideosHandler function takes keyword as an argument. You can add input to your UI and create another handler to read input value and set it as a state then pass to fetchVideosHandler like this:

// App.tsx inside App component
const [keyword, setKeyword] = useState('')

const inputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
  setKeyword(event.target.value)
}

return (
  <div>
    <input
      type="text"
      placeholder="Search videos"
      onChange={inputChangeHandler}
    />
    <button
      onClick={() => fetchVideosHandler(keyword)}
    >
      Search
    </button>
  </div>
)

The above code will pick up whatever you enter in the input, store it as a keyword state, then fetchVideosHandler will be triggered along with the keyword as a param value when the search button is clicked.

Conclusion

There are many ways to use axios and everyone has their go-to way to handle requests. This is a quick one I recently came across and thought it was useful. Hope some of you find this helpful and please share if you liked what you just read. Thank you!

How to setup Tailwind CSS with React

Hosh'ki Tsunoda — Fri, 11 Sep 2020 20:37:37 +0000

Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Instead of having predefined components like Bootstrap and Material UI do, it comes with CSS helper classes and these classes allows you to create custom designs easily.

I'm working on a little side project and decided to use Tailwind CSS although it is a quite bit of an overkill. While there's some learning curve from being different from other CSS frameworks, it gives you whole new development experience once you get the hang of it.

Add to React/TypeScript Project

This is going to be a React + TypeScript project, and with this approach shown below, you don’t need to eject the CRA to use Tailwind.

First, let’s create the project by running:

create-react-app react-ts-tailwind-example —typescript

then

cd react-ts-tailwind-example

Once you are in the root directory, run the following to install dependency package(s):

yarn add tailwindcss

tailwindcss package will add Tailwind to your project and enables its own CLI tool.

Next step is to set up Tailwind within the project so you can actually use it. To do so, let’s first run the following command to create a config file:

npx tailwind init

Upon completion, it should generate tailwind.config.js that looks like this:

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

This is where you store plugins and theme setting etc. but we are not going to touch it this time.

After that, you need to create src/tailwind.css file and add following:

/* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base

This line is to inject Tailwind’s base style, which is basically Normalize.css plus some additional styling provided by Tailwind.

@tailwind components

This injects component classes registered by plugins that are found in tailwind.config.js file.

@tailwind utilities

This injects all of utility classes provided by Tailwind CSS. These are also generated based on the config file.

In order to use Tailwind without ejecting from CRA build system, we need to add a script to build Tailwind before the start and build script. For that, let’s open package.json and update the scripts like so:

// package.json
"scripts": {
  "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
  "prestart": "npm run build:tailwind",
  "prebuild": "npm run build:tailwind",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

The build:tailwind script will find src/tailwind.css we created earlier, compile it then save the output as src/tailwind.output.css. Since we added prestart and prebuild, these will run before the existing start and build scripts. It is to ensure output file is generated before the actual start or build happens.

Finally, you can import tailwind.output.css file that is generated by the above script in your src/index.tsx file like this:

// src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import './tailwind.output.css'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

*Also, don’t forget to add this output file to .gitignore, otherwise you’ll be committing a large css file to your repo!

Now your project is empowered by Tailwind CSS, let’s take an example from official docs and add input field with some component classes to make sure it’s actually working:)

// src/App.js
import React from 'react'

const App: React.FC = () => {
  return (
    <div className="App">
      <input className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block appearance-none leading-normal m-10" type="email" placeholder="jane@example.com">
    </div>
  )
}

export default App

Run yarn start and you should see an input like this on your browser:

There you go! This is a super quick setup and only touched how to set it up in your React project. For learn more on Tailwind, checkout their official site. Hopefully this helps someone who’s looking to use Tailwind in their React project.

Thanks for reading, and please share if you like what you just read!

How to use self-hosted fonts in Nextjs

Hosh'ki Tsunoda — Sat, 05 Sep 2020 01:35:25 +0000

Nextjs is a React framework that gives you pretty much everything you need for production out of the box including hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching. Super fun tool to play with and I am a big fan now.

The recent project I worked on used Nextjs. It was fairly simple and straightforward, however, I found using self-hosted fonts on Nextjs a bit tricky.

Maybe I didn't do a good job searching but there wasn't much info on how to add fonts in Nextjs. Turned out, it works just like using regular self-hosted fonts ( font-face ) in a traditional way but with some extra steps.

First, you need to create a /fontsfolder inside /publicfolder and add all the fonts you wish to use( .eot, .woff, .woff2, .ttf ). Then, create a CSS file in the same folder as these font files ( /public/fonts/fonts.css ).

Once fonts.css is created, you can import your font(s) in there using @font-facelike so:

// fonts.css
@font-face {
  font-family: 'your-font';
  src: url('your-font.eot');
  src: url('your-font.eot?#iefix') format('embedded-opentype'),
    url('your-font.woff2') format('woff2'),
    url('your-font.woff') format('woff'),
    url('your-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
...
...

In a typical web build, you link this fonts.css file in HTML file using <head> tag, but in Nextjs, you need to add it to _document.js like this:

// _document.js
export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link rel="stylesheet" href="/fonts/fonts.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Usually, _document.js file is located under /pages folder.

Once that's done, you are good to go! All you do is just reference the font-family in your CSS.

Opinionated: Be more efficient

To make things more efficient and flexible, I like making constant files for page data and import it as needed. By doing this, you can update/change data without going into each file. Here's an example for font constant file:

// constant/fonts.js
export const MAIN_REGULAR = 'your-font-regular'
export const MAIN_BOLD = 'your-font-bold'
export const SECONDARY_REGULAR = 'your-secondary-font-regular'

Then in your project ( assume you are using CSS-in-JS, below is an example using Material-UI ), use it like this:

// SomeComponent.js
import { makeStyles } from '@material-ui/core/styles'

import * as Font from '../../../constant/fonts'

const useStyles = makeStyles((theme) => ({
  text: {
    fontFamily: Font.MAIN_REGULAR,
    fontSize: '32px',
  },
  ...
  ...
}))

That's it! You can do this with all other data like URLs, theme colors etc.

Hope some of you find this helpful:)

Please share if you like what you just read. Thank you!

Using Gatsby like Single Page Application

Hosh'ki Tsunoda — Wed, 02 Sep 2020 19:20:08 +0000

Upon creating my portfolio site, I had no intention to have a blog there. The site was supposed to be just a page where you can download my resume and find my contact info.

Only recently, I began to realize benefits of having a tech blog as a developer which eventually led me to decide on adding a blog section.

Identifying the problem

This website is made with Gatsbyjs, Blazing fast static site generator for React. Checkout their website if you aren't familiar with it.

Gatsby generates a page for each URL path, meaning, Gatsby generates an html file for each corresponding page file ( e.g. index.js-> index.html ). But what I want to achieve is:

update a section of index page based on the menu item that is clicked
update URL path and push it to history so the user can navigate with 'go back' and 'go forward' button on the browser while staying on the same index page.

With my initial implementation, UI gets updated however the path stays the same.

The problem is somewhere in the routing. It needs a routing but only on client-side because updating the URL path triggers Gatsby to use backend routing by default and a new page gets generated.

Tell Gatsby to stay on the page

Gatsby comes with Link and Router components which are provided by @reach/router. These components enables internal linking. You can use them like this:

// pages/index.js
<Router>
  <Projects path="/" />
  <Blog path="/blog" />
  <Resume path="/resume" />
</Router>

// components/Menu.js
<Link to="/">
<Link to="/blog">
<Link to="/resume">

The /(root) path shows a list of projects. The /blogpath will render a list of recent blog posts. And the /resumepath for resume download view.

This creates an unknown path issue. Every time a menu item is clicked, it ends up in 404 page. It is because Gatsby tries to find a page file that's corresponding to an updated path.

The solution for this is actually fairly simple, you just need to add following to your gatsby-node.js so Gatsby knows it needs to stay inside index.html.

// gatsby-node.js
exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  if (page.path === `/`) {
    page.matchPath = `/*`
    createPage(page)
  }
}

In Gatsby official docs, it says:

page.matchPath is a special key that's used for matching pages with corresponding routes only on the client.

This ensures Gatsby to use Reach Router by passing matchPath parameter to the page at build time so it can navigate the page with client-side routing.

Rendering only a necessary component(s)

The code above will be sufficient if you just want to enable client-side routing. But to give it a better performance, you want to enable a lazy loading. Lazy loading is a technique to only render necessary component(s) when it's needed. More on React Lazy Loading here.

First, the components you wish to lazy load need to be imported dynamically using React.lazy like so:

// pages/index.js
const Blog = React.lazy(() => import("../components/Blog/Blog"))
const Resume = React.lazy(() => import("../components/Resume/Resume"))

In my case, a default view should be <Project /> therefore it should be rendered normally.

Dynamically imported components need to be wrapped in React.Suspense which suspends rendering until a condition is met. To make it more React way and give it a reusability, let's create a LazyLoadComponent. Your code should look like this:

// pages/index.js
const LazyLoadComponent = ({ Component, ...props }) => (
  <React.Suspense fallback={<Spinner />}>
    <Component {...props} />
  </React.Suspense>
)

In the code above, React.Suspense renders loading <Spinner /> until it receives props, then once props are received corresponding component gets rendered. By the way, I grabbed a spinner from this awesome project called Single Element CSS Spinners.

Once that's created, all you need to do is to wrap these LazyLoadComponents with the <Router /> like so:

// pages/index.js
<Router>
 <Projects path="/" />
 <LazyLoadComponent Component={Blog} path="/blog" />
 <LazyLoadComponent Component={Resume} path="resume" />
</Router>

There you go! Now Blog and Resume components are only rendered when the corresponding menu item is clicked. If you open up Network tab on your browser console, you'll see JS files being loaded only when the menu item is clicked.

Conclusion

Here are the key takeaways for turning Gatsby into an SPA:

You need to tell Gatsby to stay on the index page so it doesn't use backend routing to switch the page.
- Add matchPath parameter in your gatsby-node.js so routing happens on client side.
To achieve better performance, SPAs should render components only when it's needed:
- Use React.lazy and React.Suspense so it lazy loads the components.

For now, only an index page of my site works like an SPA. Blog section is still generated in a traditional Gatsby way. Maybe I will turn whole thing into an SPA eventually but for now, I'm happy with the way it turned out:)

Thanks for reading and please share if you like what you just read!