How I changed my career and landed my first developer job

Image for post
Image for post
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. …


Introduction to using the useSpring hook from react-spring

Image for post
Image for post
Photo by Markus Spiske on Unsplash

In this article, we will take a look at how to create this animation using the react-spring library. It’s a lot easier to do than you might think.

“react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.”

In our example, we will be creating an application that will generate a random number on a button click.

When the number generates, it will count up from 0, creating a fun animation like below.


How to make your app responsive using Material-UI

Image for post
Image for post
Photo by Daniel Romero on Unsplash

Material-UI is one of the most popular React UI component libraries. It uses Google’s Material Design.

I have been having a lot of fun using Material-UI for my recent projects. It is now my go-to for styling a React application. It took me a while to understand the best way to write media queries, so I wrote this article to help others in the future.

There are a few different ways we can create a responsive app using Material-UI. In this article, we will take a look at using breakpoints to write media queries using makeStyles and the useMediaQuery hook.

Understanding Breakpoints


Follow this path if you want to learn TypeScript with React and start building applications

Image for post
Image for post
Photo by Aleksandra Boguslawska on Unsplash

According to Stack Overflow’s 2020 Developer Survey, TypeScript is the second most loved language, behind Rust.

“TypeScript is a superset developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.”

For the past month, I have been on a journey to learn TypeScript and use it to build applications with React. In this article, I will share my learning path with you. These are the resources I have used (and currently still are using) to learn TypeScript and use it with React.

If you are thinking to learn TypeScript…


How to add types to functions and use interfaces in TypeScript

Image for post
Image for post
Photo by Massimo Sartirana on Unsplash

Welcome to the land of TypeScript! A superset of the JavaScript language where every value has a type associated with it.

If you are new to TypeScript, check out the article below to get an introduction to type annotation and type inference.

In this article, we will take a look at how to handle types in functions. We will first look at how to annotate function types, then take a look at how to use interfaces with functions.

Adding types to functions

When adding types to functions, there are two places to be aware of. …


A look into how to add types to variables in TypeScript

Image for post
Image for post
Photo by Luca Martini on Unsplash

Welcome to the land of TypeScript! A superset of the JavaScript language where every value has a type associated with it.

In this article, we will get our feet wet with TypeScript by understanding the difference between type annotation and type inference. I will assume you have some JavaScript experience and know about basic types, like string, number, and boolean. If you are not familiar with types, have a look at the documentation below to get started.

TL;DR

Type annotation: We explicitly tell TypeScript the type

Type inference: TypeScript figures out the type implicitly

Type Annotation

Type annotation means that we are telling…


Using create-react-app, react-google-maps-api, and snazzy maps

Image for post
Image for post
Photo by Tabea Damm on Unsplash

Maps are an important part of many applications and websites. Google Maps is without a doubt the most popular mapping application out there now. I’m sure you are familiar with the standard Google Map color scheme, looking like below.


Go from desktop view to mobile view smoothly

Image for post
Image for post
Photo by Maxim Ilyahov on Unsplash

All websites nowadays need to be responsive to look good on different devices. Creating a responsive website enhances the user’s experience and can even have an effect on SEO.

In this article, I will be showing you how to create a responsive navbar using React. Here is a preview of what we will be building.


The questions you ask can make or break your interview

Image for post
Image for post
Photo by Christina @ wocintechchat.com on Unsplash

Getting your first job as a junior developer can be tough! It can be difficult to sometimes even get an interview. When you get the opportunity, you want to be sure to make the best of it.

In preparing for the interview, many people often focus on the answers to the questions they are asked. A part of the interview that is sometimes overlooked is the time you have a chance to ask questions to the interviewer. This part of the interview is just as crucial.

You always want to have questions prepared. One of the worst things you can…


Turn your React applications from light mode to dark mode with just one switch

Image for post
Image for post
Photo by sebastiaan stam on Unsplash

Dark mode is a user interface for content that displays light text on a dark background. It is said to help reduce eye strain and even save battery life on your smartphone. I am a big fan of dark mode and use it whenever possible.

If you’d like to learn more about why it is popular, have a look at the video below.

In this article, I will teach you how to implement dark mode in your React application using Material-UI. We will build a simple application as seen below.

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