Source: https://help.amplitude.com/hc/en-us/articles/115001816407-Amplitude-s-charts-find-the-right-one-for-your-analysis

Recently, I have been working on more analytical side of web development, and have really been trying to understand what drives different user behavior.

Specifically, I have been focusing on one question that I find extremely interesting:

“Which user action is more correlated to user retention at the 1–months and 3-month marks?”

So basically, what behavior that a new user partakes in is most indicative of their long term retention? Is there a certain action that users perform in the first session after account creation that is a clear indicator that they will be users for the long haul? …


A detailed explanation of React’s system for reusing component logic

Bruce Wayne is enhanced by his Batsuit like a Higher Order Component enhances a normal component (Source: https://chrisnolan.fandom.com/wiki/Bruce_Wayne)

Have you ever been working in a codebase or been watching a tutorial online and come across something that looks like this:

export default withResponsive(Home)

Well then you already have encountered a Higher Order Component whether you’ve realized it or not.

A Higher Order Component (HOC for short) is React’s way over giving multiple components some repeated functionality or behavior, without having to reuse the same code over and over again in the component. …


Using Amplitude’s npm library

Amplitude

Amplitude is a data analytics startup that aims to make adding analytics to your web or mobile app simple and easy. It is a Y Combinator company and has backing from some major VC firms such as Sequoia.

Due to its effectiveness and simplicity, they have seen a massive boom in customer growth during the pandemic, and a massive rise in valuation to go with it (recently valued at $4B as of writing this article).

All of these reasons (the simplicity, the customization options, the clean UI, the strong adoption in the industry) are the reason…


How to use Redux’s useSelector and useDispatch hooks

Before reading this you should familiarize yourself with what Redux is and how to use it in React class components.

Setup

Start by creating a new react app. I’ll be using a package called Redux Toolkit to get the shell of the app set up quickly. If you’d like to do the same run:

npx create-react-app my-app --template redux

This creates your React app to use the official template for working with Redux. Then inside your app run:

npm install @reduxjs/toolkit react-redux
npm install redux

At src/app/store.js create the following:

Then, head to index.js …


Redux is a state management framework and Firestore is a NoSQL database provided by Google

Redux

Intro

Redux is a state management tool for JavaScript, that makes it much simpler to maintain state in your application.

It is especially useful in React applications because it lets you avoid the behavior of passing props down through many different child components until it reaches a deeply nested component that needs the data.

Instead, all of the state information for your app is stored in something appropriately called a store. Here is a guide on how to set up the store in your React app

With Redux, once a store is created, any component that is set up to use…


Source: https://vuejs.org/

Introduction

One of the nicest things about React’s component style of coding is the clear relationships defined between Parent and Child elements. Very often you will run into a scenario where a Parent component is responsible for rendering a Child component with different characteristics or display properties depending on some action by the user. In this case, you would pass the Child component different “props” which are then used inside of it to display data in some way.

This is useful because it lets you consider each component in complete isolation. This is referred to as “separation of concerns”. …


When to use them and how to handle merging your code to master

When I was first learning to code, I would be the only engineer working on an app. Every once in a while I would have a project I would be working on with one other engineer, but a lot of the progress was made during pair programming sessions, where we would just push all the changes directly to master.

When I moved onto larger apps and began working at a company with a dozen engineers I began learning how to use branches, and how to use pull requests to merge my changes to the code base without affecting the other…


And how to replace setState’s 2nd argument with a hook

React hooks allow you to mimic the behavior provided by class components

useState

The useState hook does exactly what it sounds like. It allows you use use state in your functional component. Let’s take a look how this is normally done in a class component and then make the changes to a functional component using the useState hook.

import React from 'react'class MyComponent extends React.Component
constructor(props) {
super(props);
this.state = {
name: "",
email: """,
student: false,
};
render() {
return (
<form>
{Some JSX Code Here}
</form>
)
}
export default MyComponent

Normally when creating state in a class component you use the constructor function and then declare a state object…


How to make the process easier for yourself as well as potential engineering candidates taking your assessment.

Code challenges are already hard enough. Don’t make candidate’s lives harder than necessary!

Introduction

The technical interviewing process is a grueling one for the parties on both sides. If you’re a company looking for the best new engineers, there is a ton of competition from other companies trying to hire young superstar talent before you do. There’s also the issue of people not always being completely forthcoming on their resumes. How do you know the candidate you are interviewing will be a good fit? On the other hand, let’s say you’re an early career Software Engineer looking…


Are there a certain number of lines where the component becomes too big?

In the codebase I’m currently working in I recently was asked to fix a bug in one part of the app. As I was searching for what was causing the unexpected behavior I arrived at a React Component that contained over 1700 lines of code.

I spent a good amount of time trying to digest this component and figure out which of the dozens of functions and different variables might be affecting my little bit of code. The whole time I was really wishing that this behemoth of a file had been broken down into smaller, discrete components, which got…

Sean LaFlam

NYC based SWE

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