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. …

Learn the difference between a Grid container and a Grid item

Photo by Sam Moqadam on Unsplash

In this article, we will learn about how to use the Grid component in Material-UI to create a responsive layout for a React application.

We will first learn about how the Grid container and Grid item work. Then, we will take a look at how to use breakpoints, padding, and flexbox to create a responsive layout.

Finally, we will continue the series where we are building out a website. In the last article, we added a hero section with a background video. If you missed that article, you can check it out here. …

Make your hero section stand out with a background video

Photo by Esteban Lopez on Unsplash

The first thing you see when you visit any website is the hero section. The hero section is the part that typically displays an image with some text and a call to action at the top of a web page. You can also include a background video rather than an image to make it more appealing to the user.

In this article, we will learn how to build a hero section for a React website. We will learn about how to use react-player to play the background video, and add content and a dark overlay to it.

This article will…

Focus on one label with multiple inputs.

Photo by Florian Olivo on Unsplash

The other day, I was trying to create a basic address form with inputs for address, city, state, and zip code. Here is a general idea of what I was trying to build (please ignore the not-so-nice design).

Learning about the AppBar and Toolbar components in Material-UI

Photo by Nikita Vasilevskiy on Unsplash

The navigation bar is one of the first things users see on a website. You can create a beautiful navigation bar easily in React using the component library from Material-UI.

In this article, we will take a look at how to create a navigation bar using the AppBar and Toolbar components from Material-UI. The navigation bar we will create will have a space for a menu icon, a logo/company name, and a signup button.

We will continue from a previous article where we already created a new react project and installed the Material-UI core package. In that article, we created…

Introduction to React Device Detect

Photo by Domenico Loia on Unsplash

According to, almost 65% of users are using Google Chrome as their browser. I am also one of them.

However, this also means that 35% of users are not using Google Chrome. When developing you should always try to be aware of as many users as possible.

There are some features that will work well on one browser, but if you switch over to another, things will not work the way we expected. There is a handy website below called,, which checks whether a feature will work on a browser or not.

I recently found that a feature…

A better way to handle your form data when using Material-UI

Photo by Jan Canty on Unsplash

In a previous article, I showed you how to create a basic signup page using React and Material-UI. In that article, we used controlled components and the useState hook to keep track of the form input values. You can check out that article below.

In another article, we took a look at a library called React Hook Form. We learned an easy way to handle input data in a basic form using the library.

In this article, we will combine our knowledge of the two. We will use React Hook Form to handle the data for a form that uses…

Shoutout to these instructors for helping me learn Jest and React Testing Library

Photo by Neil Thomas on Unsplash

For the past week, I have been learning about how to write tests for React applications using Jest and React Testing Library.

As always, one of the first things I did when learning something new is to do a Google search about the topic. I then started looking for good content to take in. When it comes to testing, I found that it was a lot harder to find good tutorials and information compared to some of the more popular topics in programming.

I still have a lot to learn when it comes to testing, but I’d like to give…

The simplest one-line solution

Photo by Austin Distel on Unsplash

The other day I was trying to figure out what would be the best way to display a PDF in a React app. Displaying the PDF itself was not too hard to accomplish. There are a couple of external libraries, like react-pdf or reactjs-pdf-reader, but I was hoping to find a way to accomplish this without using a third-party library.

The best way I found to display a PDF was to use an iframe. iframe stands for inline frame, and it allows you to embed another HTML document within the current one. You can read more about it here.


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