Why use index files?

If you lean heavily into Javascript/Typescript in your day-to-day coding you’ll be well aware of the pain of dealing with imports. Keeping track of the deeply nested files where you’ve saved reusable variables/functions can be exhausting and confusing. If the messy import statement shown below gives you anxiety then read on!

importing the wrong way

We could simplify the import above by creating an index.js file inside the ComponentOne directory as shown below. It acts as a table of contents of all the exportable variables and functions within its files.


I recently discovered an incredibly useful feature in Styled Components that allows sharing blocks of CSS properties between components. Here’s a simple example where I create a variable called sharedProps that is passed into two different components, StyledThis and StyledThat.

One thing that I have always found clunky in CSS is creating responsive breakpoints using @media queries. Let’s look at an example.

Here I have used @media queries to change padding, font-size and margin with regard to screen breakpoints.

Now let’s write a function that can utilize what we’ve learnt about sharing code in Styled Components and generate…


AWS Amplify is a fantastic tool for quickly getting up and running with a full-fledged application. It has the amazing capability to incorporate features such as user Authentication.

Image result for aws amplify

If you’re using React then you can use the withAuthenticator Higher-Order Component to handle your full-suite of Authentication. As useful as this is, for production you’d typically want to customize this to meet your app’s needs and styling. I took on the challenge of breaking out the Amplify Auth method and building my own Sign-In process to see how it all fits together.

Getting Started

I’m going to assume you’ve gone through…


For those of you unfamiliar with D3, it is a visualization library that is most likely behind any impressive web-based graphics you’ve seen on sites such as the New York Times, FiveThirtyEight or Flowing Data.

It typically requires direct access to the DOM to make its magic happen. This, of course, is in conflict with React and its utilization of the Virtual DOM. I’ll show you an easy way to work around this limitation, and get you back to making those amazing D3 graphics you know and love, within the React ecosystem.

What is D3?

D3 stands for Data Driven…


React version 16.6 has introduced Memoized components. A functional component without the baggage of state and component lifecycle methods. The purpose is to maximize performance. I wanted to put that to the test and see how it compares to other React component types.

To answer that question I’ve built a simple React app which runs a user-selected number of operations and plots the results on a line graph. If you’re not in the mood to read this skip to the bottom and play around with the app.

Component Types

There are four fundamental component types in React:

  • Class Component
  • Pure…


This week I’ve decided to step away from my usual venture into the world of Javascript and will delve into an incredibly useful Rails Gem called Active Admin. With just a few simple lines of code you can create an admin route that provides powerful insight into the models and data in your Rails projects. Let’s get stuck in!

Setting up Our Rails Example

For the example, we’re going to make a simple stock trading app. We’ll have three models: Users, Portfolios and Stocks. The user can have many trading portfolios as well as many stocks through the portfolios. …


This week’s blog is going to be short but sweet. I’m going to walk you through an invaluable feature of VS Code: the ability to create custom user snippets. This is really incredibly simple to do and it will greatly enhance your workflow. If you’re unfamiliar with VS Code it’s an IDE that in my opinion puts the likes of Atom and Sublime in the shade. It has a ton of easy to install extensions and customizations that’ll make your life easier and maximize your efficiency.

What is a Snippet?

A snippet is a chunk of code that can be…


In my previous post I began to chip away at the molehill of Type Driven Development. I’ll now step over that molehill and on to the mountain that is Test Driven Development. As explained in that post, Test Driven Development is focused around functionality of your code, i.e. when a function / code block runs does it behave as expected. Test Driven Development is all about bombarding your code with possible scenarios that could bring about unexpected errors. …


A major overhaul in the world of manufacturing was spawned with the birth of Six Sigma. A statistically-driven approach to Industrial Engineering that focuses heavily on reliability.

Engineers realized that there are lots of external conditions that can affect the quality of your product. Components might wear down, machine upgrades might be buggy, a technician could be tired — these are all factors that could mean that the product you’re trying to manufacture doesn’t turn out the way you expected. …


The two most common data structures in Javascript, as in most languages, are objects and arrays. Javascript ES6 provides a useful syntax for unpacking objects and arrays into variables with assigned values. I’ll dig into some of those useful patterns here.

Let’s start off with arrays. The basic example shown here illustrates how easy it is to assign values to multiple variables in a single line of code. Each element in the array on the left is defined as a constant variable with a value equal to its matching element position in the array on the right.

const [a,b,c] =…

Jordan Eckowitz

Full-Stack Web Developer | www.jordaneckowitz.com

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