Based on my learning experience from the Google Developers Technical Writing pre-course

Person writing in a notebook
Person writing in a notebook
Photo by Cathryn Lavery on Unsplash

Whether it is writing documentation, an article, PR comments, or just answering a question on Stack Overflow, writing is an underrated part of being a programmer.

Google has a technical writing course on its developer website. This includes pre-class material which consists of reading and some practice questions.

I spent the weekend going through this material. Reading through this course material has brought awareness to some of the areas I struggle with when it comes to technical writing. I highly encourage all programmers to take some time to read through it as well.

The estimated time to complete it is…


How I changed my career and landed my first developer job

Photo by Larisa Birta on Unsplash

I’m happy to announce that I just started my new career as Software Engineer! I’m sharing my story in hopes to inspire others who are thinking to change their careers as well. Before I wrote my first line of code, I knew nothing about programming.

Before we dive into my story, let me share a little background about myself. I am a third-generation Japanese American who was born and raised in Hawaii. I moved to Japan 7 years ago as an English teacher. I spent 3.5 years working at an after-school program teaching English to kids. …


Using the spread syntax and conditional ternary operator

Photo by Neetu Laddha on Unsplash

One thing I have learned throughout my time programming is that there is a solution to everything.

While coding, I often come across new problems where I need to flex my brain a little more and use the power of Google search.

In this series of articles, I will introduce the solutions to some of the problems I come across while coding in JavaScript.

The first problem we will look at is how to conditionally add an item to an array.

Problem

In the example below, I have an array of sports. There is a condition that is truthy, which means…


An introduction to Node.js and Express

Photo by Sticker Mule on Unsplash

As a frontend developer, the backend scares me. At work, I often take a look at the server-side code, but I feel completely lost.

However, it is important to continue learning and stay curious as a developer. Therefore, my goal for the second half of 2021 is to start learning backend development. This is the first step for me to become a full-stack developer in the future.

I always believe that one of the best ways to learn something is to teach it. So in this series of articles, I will introduce you to parts of backend development that I…


How to use the makeStyles function in Material-UI

Photo by Kimberly Farmer on Unsplash

Material-UI is my favorite React component library! I use Material-UI every day at work, and for many of my personal projects.

One of the important concepts in using Material-UI is learning how to style components. Each component has its own API, where you can pass props to style them. But sometimes, this is not enough and you want to customize the component a little more.

According to their documentation, there are 3 APIs you can use to style your components.

  • Hook API
  • Styled components API
  • Higher-order component API

In my opinion, the easiest way to style Material-UI components is to…


A line by line breakdown of the git diff command output

Photo by Håkon Grimstad on Unsplash

Git is one of the most important skills you need as a developer.

When I started my first job as a frontend developer, I quickly realized that Git was a vital skill that I wish I studied more. You can read more about my experience in the article below.

For the past month, I have been studying a lot more about Git and how to use different commands. One command that I often use is git diff.

When I first used git diff in the command line, it was a challenge to understand what was going on. In this article…


Introduction to the Material-UI icon library

Photo by Sebastian Herrmann on Unsplash

Icons are commonly used in websites and applications. Material-UI has its own icon library with over 1,100 icons to choose from. These icons are all coming from the official Material icons from Google.

In this article, we will take a look at the Material-UI icon library and learn how to use icons to create a button component.

Introduction to the Material-UI icon library

The Material-UI icon library includes over 1,100 Material icons that have been converted into Material-UI SvgIcon components. This makes it easy to use these icons in any React project.

Each icon has the following five themes:

  • Filled theme (default)
  • Outlined theme
  • Rounded theme


Enhance your text input with a list of suggested options

Photo by Christian Wiediger on Unsplash

Material-UI is my favorite React UI component library. There are components for almost anything that you may want to build with React.

One component that I have been using recently is the Autocomplete component. The Material-UI docs describe the autocomplete as “a normal text input enhanced by a panel of suggested options.”

There are two versions of the autocomplete that can be used:

  • Combo box — Where the value of the text input must be chosen from a predefined set of values.
  • Free solo — Where the text input can contain any value but is suggested from a list of…


Use git stash to improve your workflow as a developer

Photo by Elly Johnson on Unsplash

Git is one of the most important skills you need as a developer.

When I started my first job as a frontend developer, I quickly realized that Git was a vital skill that I wish I studied more. You can read more about my experience in the article below.

For the past month, I have been studying a lot more about Git and how to use different commands. One of the most useful commands that I learned is Git stash. …


How to implement Chromatic and automate it with continuous integration using GitHub Actions

Multi-colored lights
Multi-colored lights
Photo by JOSHUA COLEMAN on Unsplash.

Visual regression testing is used to verify how changes in code affect the visual aspects of the interface. We can run visual tests on Storybook components using Chromatic.

Chromatic is a tool used to automate workflows for Storybook. It provides a shared workspace for teams to comment and review UI work together. Check out the video below for a quick overview of Chromatic:

In this article, we will take a look at how to implement Chromatic in a React application and automate continuous integration using GitHub actions.

This article will assume you have a basic knowledge of React and…

Chad Murobayashi

Software Engineer living in Tokyo, Japan. Born and raised in Hawaii.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store