This post will walk you through a quick and easy way of creating a social media icon list that can be added to a website’s footer or About page.

We will be using Ionicons to add the social media icons. Ionicons is an open-source icon set that can be used in web, desktop, iOS, and Android applications. The icons come in iOS and Material Design versions.

First install Ionicons by placing the following <script> tag right before the closing </body> tag.

<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>

This <script> tag allows us to grab from Ionicon’s set of 700+ icons via ion-icon components with…


The React Router DOM package gives us <NavLink> and <Link> components. This blog post will cover the difference between the two components and how <NavLink> can be used to specify the link that is active in an application’s navigation bar.

Both <NavLink> and <Link> components can be used to define and design a declarative navigation around an application. Within either component, we can use the “to” attribute to specify the location pathname to which the link will direct. After installing react-router-dom and importing <Link> into a file, the component implementation would look something like this:

import { Link } from…


Redux is a JavaScript library and design pattern that encourages single source of truth by decoupling state from complex component trees. This calls for a new way of making asynchronous actions as the vanilla React way consists of constantly fetching from inside lifecycle methods, such as componentDidMount, to update component states. There are three general ways React developers go about tackling this problem: Redux Promise Middleware, Redux Saga, and Redux Thunk. This short tutorial will explore Redux Thunk and how it handles asynchronous functions.

Why Do We Need the Thunk Middleware?

Redux Thunk is a middleware, meaning that it intercepts every action object before it reaches a…


One of the greatest assets of living near a metropolitan city and a growing tech hub is the easy access to great events and meetups. Last Thursday, I had the opportunity to attend an event hosted by Slalom, AWS, and Women in Big Data titled “AWS: Building Intelligent Data Lakes” in Arlington, VA.

Women in Big Data (WiBD) is a volunteer-based forum that connects and celebrates female talent in the field of big data and analytics. It began with 15 members from Intel and has expanded to a member count of over 8,500. The American Association of University Women (AAUW)…


With the introduction of Facebook’s create-react-app CLI tool, much of the configuration and labor of setting up React.js applications were abstracted away. While this one-liner command is too good to be true, it is helpful to understand some of the mechanisms going on under the hood. Two important configuration tools that create-react-app sets up for us are Babel and Webpack. What are they and why do we need them in our React.js applications?

Babel

Babel is a JavaScript compiler that translates newer ECMAScript 2015+ code into code that older web browsers can natively understand and read. This is especially important because…


Perhaps one of the rare instances being shallow is welcomed...

Before we get into shallow merging though, let’s talk briefly about React Components and state. React Components help us break down the user interface (UI) into smaller parts, keeping our code organized and modular. We are able to send data down from parent components to child components via props, which holds data that can be used to describe what should be rendered to the DOM. Once passed down to a child component, props cannot be changed internally.

Enter State. State allows React components to modify their output in response to…


Let’s say we have a User model that has associations with the models Listing and Review, like so:

But as we are building these associations we realize that we want to make it so that a certain type of User — a host — has many listings and a certain type of User — a guest — has many reviews.

-Listing belongs to a specific type of User — a host.
-Review belongs to a specific type of User — a guest.

We can consider creating separate tables for these two types of users but what if we want the…

Robin Kim

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