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. …
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.
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.
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…
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.
When adding types to functions, there are two places to be aware of. …
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.
Type annotation: We explicitly tell TypeScript the type
Type inference: TypeScript figures out the type implicitly
Type annotation means that we are telling…
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.
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.
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…
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.
Software Engineer living in Tokyo, Japan. Born and raised in Hawaii.