TypeScript has been growing and growing in popularity over the past years and is widely adopted in company tech stacks. From my research I have found that it is important that any junior devs looking to land their first job, should have some exposure to TypeScript. In this post I will be showing how to set up your react application with TypeScript, and showing some basic advantages of using typescript in your projects with examples.
If you have not initialized your new react-app yet here is the docs on how to get started.
Once you have that set up you…
Animations are becoming a staple in modern web applications. Almost every large company includes some sort of animation within their site, but most often I see them on landing pages; providing instructions or highlighting their services with animated pictures or vector graphics. This little touch brings that “oooh, ahhh” factor and gives an application just a little depth which makes all the difference. While I was doing research on different libraries to implement animations I came across one that was very beginner friendly and easy to start with: react-reveal. I didn’t have to look up any tutorials or extra documentation…
So many applications use an input for user addresses whether it’s for payment processes or selecting a shipping location. I am going to walkthrough how to implement a search input that autocompletes addresses as the user types. I am going use a package called react-places-autocomplete which is powered by Google Places API. Let’s get started.
npm install --save react-places-autocomplete
import PlacesAutocomplete from 'react-places-autocomplete';
There are other imports to use the geocoding feature if you are implementing a map as well but I won’t be using that. You can find out how to implement on the documentation.
I haven’t done any blog posts on data structures or algorithms so I thought I would cover a solution to one of the more popular questions people may see on a technical interview: 2sum. This solution was 60.1% faster than all other submissions, and 29% less memory storage used. So in an interview, it may be wise to ask some probing questions determining which is more important to them, speed or memory?
Here is the question prompt:
Given an array of integers
nums and an integer
target, return indices of the two numbers such that they add up to
Making any web application fully responsive all the way down to mobile size can be a tricky task. Thankfully, there is yet again another react package that simplifies our life as a developer. Incomes, react-responsive. A very easy to use package that allows you to wrap media queries around your actual components. Let’s take a look.
Set up and usage is very quick and easy. Here is an example.
All you need is to import MediaQuery from react-responsive and you can get busy.
We establish our entire page container with our most parent level div and can write our…
If you are working on a static website and looking for a quick, easy, and efficient deployment of your project on AWS, look no further. I am going to be walking through a detailed process to host your static react application using AWS Amplify. Let’s get started.
Last week while working on a project, I ran into a nasty error message while trying to push a commit before taking a break. My commit was rejected due to me adding a large video file (129 MB), the error message expressed that the limit was 100MB. I tried deleting the video from my project and committing again but I got the same error as the file is still stored in memory. After searching google and trying a handful of different approaches I was stuck. I finally came across a solution the next day. I hope this post will find…
React packages can add a lot of great functionality to an application. In this blogpost I am going to highlight some of the React packages I have discovered and implemented in my recent projects. Let’s take a look.
React Router is a package every React developer needs in their toolbox. Router allows you to create custom routes within your react application to navigate to different components. It takes a second to understand the flow and how it operates but it is a must have!
I am going to show you how you can achieve smooth scrolling in a very simple and fast way with the “react-scroll” package. This is especially useful when creating landing pages and trying to implement smooth scroll interactions. There is more to “react-scroll” than I will be showing so be sure to check out the docs to get the full scope of it.
First, as always we need to install the package
npm install react-scroll *OR* yarn add react-scroll
For a typical home page we can probably assume there will be a home, about, and contact section, so let’s build…
In my last post I covered a simple dark mode toggle with react and tailwind. The toggle was held in state and would reset to light mode upon refreshes and traveling to different routes; not very practical. We don’t want our user to have to continuously select dark mode as they travel through our site. A way we can work around this issue is creating a dark mode theme, stored in our localStorage object. localStorage persists through refreshes so the users’ preference will be maintained while they use the site. If you are at anytime feeling a little lost refer…