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.
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?
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
- 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!
Thanks for stopping by 🙃️, BYE!
To Bootstrap, or Not To.
A simple guide to getting started.
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!
Redux: What The Flow?
Understanding asynchronous data flow with Redux.
Assumptions:
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.
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.
SYNC vs. ASYNC
What is synchronous?
A synchronous code is executed sequentially. This means that one statement starts and completes, THEN another statement can start and complete.
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.
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.
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>.
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”.
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.
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!
Getting Started: Node/Express.js
Intro to an Node/Express.js server build.
Background:
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.
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.
Express
Node
JavaScript
Follow these links to familiarize yourself with the technologies mentioned in this tutorial.
Express
Node
JavaScript
Follow the these links to see a video tutorial on the steps.
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!