Last week I showed how to take cryptocurrency price data and turn it into valid data for an XY Plot and LineSeries on react-vis. Be sure to check that out first .
Today I am going to expand on that and cover how to add data hints on a graph as a user hovers along the line. This takes a basic graph to the next level and really gives the user great insights to their data. Let’s Start.
The only think I am adding from last week is the Hint from react-vis, and the onNearestX function. A Hint is…
One of my favorite things to do as a Front-End Engineer is work with big data and translate it into something that the user can conceptualize. Recently, I have been working on a React cryptocurrency project and wanted to implement different price charts for different spans of time(1day, 7day, 1month etc…). There are multiple great chart libraries available to developers but I landed on react-vis. React-vis was created by Uber, and offers great API documentation support. They offer a wide range of charts, you can check out the library here. In this blog I am going to create a price/date…
Sass stands for Syntactically Awesome Style Sheets. CSS can get ugly and long these days. Sass is there to help clean up our CSS code, and allow us to include some pretty cool features in our CSS like variables, nesting, and inheritance. Sass is a CSS preprocessor: a scripting language that extends CSS so developers can write code in one language and it will compile that code into CSS. Essentially, it allows us to write better looking CSS faster, and more efficient(syntactic sugar). As I continue through my job search, Sass pops up time and time again on job descriptions…
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…