What is Kafka? What problems does it solve?

Photo by on

What is Apache Kafka?

Kafka is a distributed event streaming platform that can be used for a plethora of different use cases. It is a highly, horizontally scalable, fault-tolerant distributed system. Okay, so that was a lot of super fancy, big words. Don’t worry, we will be breaking it all down further to understand how awesome Kafka is and how it can really make moving data quick and painless.

In layman's terms, Kafka is really good at making data move really quickly, smoothly, and at scale.

has an excellent guide and provides a multitude of information about Apache Kafka. …


Part 3: Building out the router and the show page

Pokemon Fan Art —

Okay, ya’ll part 3 here. If you are late to the party, you can follow along with and . In this installment, we will be adding React-Router and fetching our individual Pokemon data so that we can render a show page. React-Router is a client-side routing library that we can use in React to help our URLs reflect changes in our UI and it is an essential tool for us to use in this SPA. I have written a blog on React-Router linked . The documentation states:

“React Router keeps your UI in sync with the URL…


Styling the home page!

Photo by on

Hey everyone, for those who haven’t read the first portion of the blog I have linked it . We are going to continue building out the personal Pokedex application here. We left off displaying some pokemon but the images are WAY too big and the page is very plain. In this blog, we will be styling the PokemonCard.js‘s and the home page.

Basic Global Styling

I will be using Sass for this tutorial as I find it very clean and efficient. There are many ways that you can set up Sass in your project but I have written two…


Gotta Catch ’Em All!

Photo by on

Hi hackers! I decided to build a React application using the Pokemon API just for fun. I thought it would be a great way to showcase how powerful React is and would be a fun tutorial for anyone just starting out. There will be multiple parts to this blog as I will also include styling in the series. With that said, let’s start catching them all.

User Stories

One of the top tips I have received is learning how to “think in React.” We want to get a good structure of our application before we even get to the building part. For…


Photo by on

Settings Sync

This extension is a game-changer. It allows you to utilize the same VS Code settings across computers and operating systems through Github. It allows you to sync pretty much everything you customize on VSCode to Github, from settings to keyboard shortcuts to other VSCode extensions. Once you get it set up you can ensure that you never have a vanilla VS environment no matter what you’re up to!

Once you download it be sure to connect your Github. To get started with Github, click the Login with Github button in the Settings Sync dashboard.


What they are & how & when to use them

Header Pic
Header Pic
Photo by on

What are Refs?

React Refs allow us to reference a DOM element or a class component from within a parent component. This gives us the ability to modify or change that element.

Think of refs as a direct connection between components and DOM elements or class components and their parent components. This connection provides us with the means to access elements/components without state updates and rerenders. I can think of a few useful ways that refs can be beneficial and we will explore some of those throughout this blog. I will mention that…


Understanding the benefits of useState() & useEffect()

Header Photo
Header Photo
Photo by on

What are React Hooks?

Hooks are a buzz in React right now, but what exactly are they, and why are they beneficial to us?

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

That’s pretty powerful stuff. We used to be confined to class components whenever we needed to use state or componentDidMount anywhere in our applications. React Hooks eliminate the need for class components. Let’s think critically about why this could be important? Have you ever written out a beautiful functional component that has a load of branching logic and realize…


n-Notation & Big O

Photo by on

What is N notation?

In computer science, we need a way to be able to compare algorithms to each other. Comparison allows us to see which algorithm is more efficient and we love efficiency. Run times of different programs are usually written in n-Notation. So if we want to look up how fast a certain algorithm is, we will need to know this notation to be able to understand it. But what exactly is it?

n-Notation is represented as a function of n. All this means is that the program is going to be related to that variable “n” in…


Live, Work, Create image
Live, Work, Create image
Photo by on

Hi everyone, this is part two in a series of blogs I am doing on Sass. If you haven’t read the first one and need help getting started with Sass please feel free to read my first blog, . In this blog, I will be covering class naming conventions using the BEM, nesting in Sass, and Sass Variables.

What is the BEM?

The BEM is a methodology aimed at decreasing the footprint left by CSS. That is, CSS code can get really unorganized and hard to read. The BEM is a way that structures your naming conventions to increase readability and functionality. This is…


Using React Router to Implement Client-Side Routing

Photo by on

What is client-side routing

Client-side routing happens when the route is handled by the front end code (Javascript/JSX) that is loaded on the page. When a link is clicked, the route will be changed in the URL but the server request is prevented. The url will be changed by the state. This change in state will result in a different view of the webpage.

Let’s look at a real-world example, let’s say you have an application that allows you to view your blogs, your profile page, and your drafts. Each of those pages is a different view of the same SPA (single page application)…

Jordan T Romero

Full Stack Developer. Designs solutions combining analytical, technical, and problem-solving skills to make ideas come to life.

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