If you are a React Developer you have either used or heard of Redux. Redux became the most widely adopted state management tool for React, but has faced criticism along the way and has lost some popularity over the years. In complex, large applications you will likely have lots of components that use different pieces of state. Drilling your pops down levels and levels of your component tree gets messy fast. In comes Redux, a library used to extract your state from your components into a central store, which can be accessed anywhere in your application.

One of larger complaints…


Being up to date with the newest updates in JavaScript can be overwhelming since it’s ever changing, but it is important to notice the changes happening and use what you can to your advantage! I am going to rattle through the new features with ES10!

1. String.matchAll()

The JavaScript String matchAll() method returns an iterator of results of matching a string against a regular expression.

const string = "I am learning JavaScript not Java.";
const re = /Java[a-z]*/gi;

let result = string.matchAll(re);

for (match of result) {
console.log(match);
}

Output

[
'JavaScript',
index: 14,
input: 'I am learning JavaScript…


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…


What is Sass?

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.

Installation

npm install --save react-places-autocomplete

Imports

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.

You are…


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


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.

Install react-responsive here.

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…

Lucas Leiberman

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