Njeshe Amal “ARTicle” blog

If you want to go quickly, go alone. If you want to go far, go together.


· An Informal Introduction
· To Bootstrap, or Not To

· Redux: What The Flow?

· Get Started: Node/Express


Computer scientist, Lisa Gelobter, assisted with the 1995 creation of Shockwave, essential technology that led to the development of web animation. (So, we have her to thank for GIFs).

Every morning, a gazelle wakes up. It knows it must run faster than the fastest lion or it will be killed. Every morning, a lion wakes up. It knows it must outrun the slowest gazelle or it will starve to death. It doesn’t matter whether you’re a lion or gazelle. When the sun comes up, you’d better be running.

︎  ︎  

ART—icle 01

An informal Introduction

July 5, 2021

Who and What is ICHI?
ICHI is a name. I am ICHI. It means “bowl” or “vessel” in Irigwe. My father named me after his late mother, who was also ICHI, in hopes that I would be a vessel that unites. The name is pronounced (ee-chee), like the Japanese word for one. 

my_full_name  = “Njeshe Ichi Amal Grace Abdu”

When you say ICHI name, you can use the expression on my face, pictured below, as a reference.

ICHI, circa ‘98, smiling HARD. Say, “ee-chee”.

The same sun that melts wax is also capable of hardening clay.

The sun. Eternally amusing to those rooted. If it, in its grand nature, is flexible in its abilities, then who am I to resist being so myself?
Of my interests, I hope to share with you the following:

- Art
- Technology
- Spirituality
- Mental Health Awareness
- Sustainability
- Engineering
- Social Awareness
- Equality
With you, I hope to learn, grow, and educate.

Thanks for stopping by 🙃️, BYE!

ART—icle 02

To Bootstrap, or Not To.

A simple guide to getting started.

Before we begin, let’s get the assumptions out of the way. In following this guide, I assume that you have a basic understanding of building a site using HTML, CSS, and JS. I also assume that you have had a confusing experience with Bootstrap and hope to try again.
In this guide, I will provide screenshots of my actual process. I did not wake up with this knowledge. In fact, I attribute my success to Ayana Cotton of Flatiron School. Thanks, girl. I will follow a step-by-step format. Did I mention screenshots?


When working on any product, it is important to have a vision. If you are an architect, you make blueprints. [01] If you are a developer, you will make wireframes. These two processes represent the same idea. A wireframe can be done physically, as in pencil to paper, or digitally. I use fluidui.com to make wireframes because of the awesome templates. [02] After you have your wireframe, it is time to advance to everyone’s favorite part, reading the documentation. I know, you thought we were going to skip over that part. You thought wrong, and here is why. It is important to get a basic understanding of the documentation in order to know which elements are useful to you and which ones aren’t. For this guide, I will be showing you how to use the BoostrapCDN (more on CDN here). We will be using the BootstrapCDN because it enables us to access bootstrap using only <link> and <script> tags. Easy, yes? Since you read the docs, you know that there are templates that you can use instead of building out your html code out from scratch. If you wish to use one, follow screenshot [03] and pick out a template.
Else, skip to step [06]. Next, towards the top of the examples page, click on “download examples” towards. This will give you access to ALL of the templates. [04] After you have copied the files you need, you can delete the folder if you want to. [05] In your app’s frontend add two new files and name them index.css and index.html. Additionally, if you previously had an index.html file that you were working from, rename that to draft-index.html. Then, paste the necessary files in their respective folders. [06] To access bootstrap add the css <link> to the <head> of your app. Optionally, [07] you can also add JS script tags at the end of <body>. This will be necessary for including components that need JS to function. And finally, you have the the basics necessary for implementing bootstrap into your application. When you include <script> tags linking any existing JS files you were working on, you will most likely get a ton of errors. Fear not, young dev. Work through the errors one-by-one, and integrate your forms, cards, buttons, and id elements you used for DOM manipulation and event handling. Then you’ll reach your MVP using boostrap.
Thanks for stopping by 🙃️, BYE! 
ART—icle 03

Redux: What The Flow?

Understanding asynchronous data flow with Redux.

Redux Logo

1. You have some basic understanding of programming principles.
3. You are working with Redux AND React.
Useful if:
1. You are struggling to understand the concept of asynchronicity as it pertains to a React-Redux application. 
2. You want understand how data flows from a backend API to the frontend.
For this guide, I will be sharing my experience based on the React-Redux single page application I built for a project at Flatiron School. If you are using Angular, Vue, etc, you may have to do extra research as to how it all applies in that context. SNS. As this is an overview, you can expect links to documentation for deeper learning. If all things go well, there might even be some screenshots thrown in too.


What is synchronous?

A synchronous code is executed sequentially. This means that one statement starts and completes, THEN another statement can start and complete.
What is asynchronous?

Asynchronous code does not have a wait queue. One process can start even before the process before it has completed. An example of this is a fetch request.
Example of a fetch request in React-Redux app

Why is asynchronicity so important?

Sometimes, functions depend on data from other functions. In the above example, some component that is responsible for rendering all the shops is expecting to get the updated list of shops from the Redux store. If we did things one at a time, ie synchronously, then application could be shut down as one process waits on another, from the perspective of a user <insert dreaded loading symbol>. 
How does asynchronicity work in a React-Redux app?

Wow, stranger. You ask great questions. 
In a React-Redux application, the data is managed by the Redux store on the frontend. According to the Redux documentation, the redux store “only knows how to synchronously dispatch actions, update the state by calling the root reducer function, and notify the UI that something has changed. Any asynchronicity has to happen outside the store”.

So, what is middleware? 

When a fetch request is made in an action creator, like we did in addShops() above, that action creator returns a plain JavaScript object. Well, that simply won’t do if we want to make an asynchronous request. Middleware is a third party extension that goes between dispatching an action and the data reaching the reducer. It prevents an action creator from returning an action before the data is fetched.
 In my React-Redux project, I used thunk. In programming, “thunk” is a “piece of code that does some delayed work. For Redux specifically, they are a pattern of writing functions with logic inside that can interact with a Redux store's dispatch() and getState() methods. This allows for delayed actions, like working with promises. If you would like to read more about thunk, you can do so here. If you would like to read more about async logic and fetching data, you can do so here.
Import thunk to root file after running: npm install redux-thunk

The following data flow from the Redux documentation REALLY helped me understand how the data flows in a React-Redux app.

Thanks for stopping by 🙃️, BYE!
ART—icle 04

Getting Started: Node/Express.js

Intro to an Node/Express.js server build.

Express is a Node.js web application framework. It utilizes HTTP utility methods and middleware, which makes creating APIs much simpler than with Rails, for example. 

Node is a JavaScript runtime environment that is mostly used for server-side programming.
Knowing JavaScript is not a pre-requisite for this tutorial, although it will be helpful. Nevertheless, it will become crucial as you advance past this tutorial. 
Follow these links to familiarize yourself with the technologies mentioned in this tutorial. 

Follow the these links to see a video tutorial on the steps.

01. Open a new project folder in your favorite code editor. Next, open up the terminal and run “npm init”.
02. Add Express to your list of dependencies by running “npm install express”
03. Create a new file in your project directory called “app.js” or “server.js”. In it, create a basic server.
Now, you can run node server.js in your terminal. You should see it output “Running on port 3000” or whatever string you defined in your .listen. Next, go to localhost:3000 in your browser. There, you should see “Welcome to my API”, or whatever string you defined in your .send. 

Thanks for stopping by 🙃️, BYE!