Forem: Emmanuel Okiche

Why you should ignore everybody's shiny new toy in JavaScript Land

Emmanuel Okiche — Wed, 18 Sep 2019 23:04:41 +0000

Introduction

Welcome to the World of JavaScript!

Where (almost) everybody has a shiny new package to show off.
Where there is a package for almost anything imaginable, see this.
Where you could easily get confused over a package to choose because a simple Google search gave you results of packages like: dom-markdown, dom_markdown, dommarkdown...
Where you could easily fall into information overload and become indecisive in doing basic stuffs because no matter what you use, someone always recommends a (better) shiny new toy.

How do I stay sane?

Well, it's pretty easy: "IGNORE THEM ALL."
Yes, you read that right.
"IGNORE THEM ALL"

"I don't think that's good advice buddy.Why should i ignore them all?"

See, you want to stay sane and choose what's best for the project, right?

"IGNORE THEM ALL"
I'm going to explain why during the course of this article.

I see many beginners struggle with Library Dilemma. They spend time asking on different groups about which to choose from a set of libraries.
And you can guess what happens most of the times: "Many folks share their Shiny New Toy" as a better alternative" which in turn makes the beginner more confused. Plus, he/she now has +n amount of new libraries to choose from. Lucky You!! (in Joyner Lucas's voice) ;)

This might look good from one perspective, having lots of options to choose from.

"IGNORE THEM ALL"

"Why?"

As a beginner, you should spend more time understanding the language.
Trying to know the capabilities of this language.
Figuring out where the native API shines and where it lacks.
This might look boring but Lucky You, JavaScript on browsers comes with DOM, so you could learn all these in a fun and interactive way by building small web apps in your browser.

You should learn about AJAX, JSON, fetch and all the goodness of the JavaScript world. You should try to create a simple SPA without any libraries. You should get comfortable with the language. You should be a "Firefox", exploring the capabilities of this beautiful but misunderstood language.

"Dude! What about Internet Explorer?"

Okay, or an "Internet Explorer"

"You forgot to add Microsoft Edg.."

DUDE!!! STFU!!! Let's be serious here! Don't "slow" me down (pun intended).

A little history

I started coding back in 2010.
Then, JavaScript was just a client side scripting language that ran (only) on web browsers. I mainly used it to validate forms, get inputs from forms to perform actions with a script, create animations (carousels, modal box), et al.

Okay, i just checked Google, Node.js was released the previous year and npm was released that same year but i did not know about it back then. I mean, PHP was still cool back then ;)

Resources were limited. Many folks were still getting a hold of the language. The language was(is) still growing. The options to choose from were not as much as we have now. We had some popular libraries: jQuery, Dojo, et al. We downloaded libraries as zip files. NPM was not yet viral. If you created some library, it had to be really cool eg Lightbox (i think this was released in 2011) by Lokesh Dhakar. Plus, you'll have to do some real work by writing articles, build cool stuffs with your library and do some convincing as to what problem your library solves and why we should use it.

OR, you could become an instant hit if someone like Chris Coyier uses your library on css-tricks.

You see the process? Most libraries where created out of a need of some project or sometimes when you feel you could make some processes easier. Many folks wrote tutorials about this or shared their scripts on forums. There were "Standard Toys" which we played with and everybody was happy.

As years passed, JavaScript was making advancements and improving and gaining more popularity. NPM was becoming popular. Every new kid on the block could write a new script and O boy....i forgot to mention Github. Folks were publishing libraries. Some libraries were made up of functions. Functions that could have been added to an already existing library by making a simple pull request and contributing it to an existing library that has gathered some popularity.

NO WAY!! It's my "Shiny New Toy" and it must live in its own Github repo and published under my name on NPM...lol (Just joking...or am i?).

But seriously, many of the libraries on NPM could have not been, if only the author had a discussion with the author of the current library he/she uses and offer to add the functionality as an improvement instead of creating one from scratch.

You could also say that creating your own library could be a learning process for you. You're right though, but in the spirit of open source:

"If folks are already doing it, join in and contribute."

Why Ignore them?

Okay back to the main point. I've already given a brief overview of how the ecosystem was many years ago and how JavaScript was seen plus its capabilities. Plus, what the library ecosystem felt like.

"So why Ignore them?"

Well, it could be from my personal experience in the past plus what i see from new developers.
Following the rapid changes in the JavaScript ecosystem back then, i did not really go far with the language. I just downloaded lots of video tutorials and saved hundreds of web pages with the hope of learning them some day.
That day never came :(

Back in 2016, i decided to revisit JavaScript. I was building a startup. I had an idea of how to solve a pending problem in Nigerian Universities. I started working on JavaScript using AngularJS (yes, Angular with a JS at the end).
I used AngularJS for the web client and Ionic for the mobile app. The backend guy used NodeJS (ExpressJS). We wanted it to be a MEAN stack app because: That's whats Up.
MEAN stack was the new word for cool back then. It was trending and was our Shiny New Toy.

Okay, So why Ignore them? You haven't still answered the question.

Fast forward into the project. 90% done.
Ding! Ding!! Google announces that it is releasing Angular 2.
"Okay no problem. Bring em on", we said.
"Errmm...you would be coding in TypeScript", Google says.
I go over to check out the release docs for Angular 2 and everything is so different from AngularJS. I'm like: "OMG."
Why so much changes?
Why didn't you you see this coming and change gradually or something?
Plus, Ionic was not a comfortable experience. Many issues with gradle (which was solved, though). Slow webview. Animations was not smooth. But i couldn't complain: "It was everyone's Shiny New Toy."

I wouldn't rewrite my app immediately because that would be a stupid thing to do, obviously.
But, Angular 2 was the Shiny New Toy. I fell into the Shiny New Toy train of MEAN stack without doing the needed research to see what was best for my project. MEAN stack just sounded too cool.

At that moment, i decided not to be moved by the "Shiny New Toy" effect.
I realized that my mobile app would have been better off if i had created it with Native Android since its a start up and the IOS (is it IOS or IOs or iOS or ioS?) version could come later as the product gains traction. AJAX with JavaScript would have been enough for some Single Page effects in the web app.

I learnt this the hard way.

Conclusion

The front end ecosystem moves very fast and is very open because there are not much perquisites as compared to back-end.
In this article, i shared with you why you should ignore everyone's "Shiny New Toy" because no matter the library you're currently using (in JavaScript), someone would always have something he/she feels is more shinnier than what you're using. This happened in a post i wrote some weeks ago about axios.

So, whenever someone introduces a Shiny New Toy to you, ask yourself:

If you know what this library is trying to solve.
If you understand the problem and how this library could be helpful to you.
If this could be easily done without a library because sometimes, the functionality you want might be just one function and the library size might be very large.

And if you're already using a library/framework or whatever:

Ask what the benefits are and trade-offs of your current tool-set.
Check if there is a way around that with the current library/framework you're using?
Check if there is something that your current tool-set can't do and this "Shiny New Toy" does. The extra thing some library does that might be different from yours might just be a simple function which you can add by yourself.
If this is a real issues, then why don't you call the attention of your current library's community and try fix the problem or add the feature.
Ask yourself if this library/framework is revolutionary for example: Flutter. If it is, then you check if it is mature enough to be used "now" or to be added to your watch list.

I hope you get my point? Don't just jump from library to library all because everyone is using it OR the community says its the coolest thing that has ever happened. Do your analysis and if it doesn't pass, IGNORE IT.

I did not say you should not learn new stuffs O! (in Yoruba accent).

You can call it VueJS, SvelteJS or even Angular but i'm currently using ReactJS and it gets the job done and i am okay with it. If i have a problem and i feel i can contribute, then i'll just do that in this library.

I'll always IGNORE YOU unless my current tool-set fails the above test.

Once more thing...

Errmmm... i am also guilty of installing libraries in a StackOverflow answer without checking all the above stuffs. We have deadlines and we've been on that bug for days. Let it work first. We'll come back and check all these stuffs later jari ;)

Thanks for reading.
I'll see you in the next post.

I would try to explain lexical scope in plain English. Wish me luck

Emmanuel Okiche — Fri, 06 Sep 2019 18:01:15 +0000

While writing an article on closures and IIFE some days back. I was trying to explain lexical scope in a short and simple way. I noticed the article was getting bigger and bigger so i just decided to write about lexical scope separately.

In this article, i would try to explain the basics of lexical scope, what it means and give examples to help you understand how it works in JavaScript. No buzzwords...I promise.

Firstly, let's break down the word "Lexical Scope".

scope

We'll talk about the easy one first: scope.
In plain English, scope can mean:

A boundary
A region
An environment

Or any other synonym you could think of.

Do you remember watching a tutorial where the instructor tells you a certain idea/topic is beyond the scope of the video?
Or when a team from another department is working on a project and you tell them to add a feature you think is cool and they tell you: "That's beyond the scope of this project".
Well i think you get the gist. Scope is simply a region where something is allowed to operate at a given period of time.

In Computer Science, this could mean a region where some data exists and can be accessed. This data could be something like a variable.

In a language like JavaScript, we could define a scope by creating a block using curly braces: {...}. We call this Block Scope. This means that variables declared inside this block can only be accessed within this region. This region covers everything inside it, including other child/inner blocks created within that region.
In other words this region is local and its variables cannot be directly accessed from the outside world. So this could be called a local scope.
Variables declared inside functions are in the local scope of the function.

function doSomething() {
  let name = "john";
  console.log(name)
}

doSomething(); // Prints 'john'

// would produce a Reference error
// because name is local to doSomething() function's scope
console.log(name);

Now, you might have heard of Global Scope before. Well, that's an environment which is not enclosed in a block. Every code in your Javascript environment has access to it. This is the open JavaScript environment. So the code below should work.

let name = "john"; // In the global scope

function doSomething() {
  name = "James"
  console.log(name); // The function can access the global scope variable 'name'
}

doSomething(); // Prints "James"
console.log(name); // Can access 'name' too

One thing to note:

A scope has access to its parent scope but the parent scope does not have direct access to variables declared in an inner scope.

The function has access to name because the function is declared in the global scope and name exists in the global scope. If name was declared inside the doSomething() function, then the code in the global scope cannot change the value of name directly because name is local to the function.

I believe you have a good understanding of what Scope means. It just simply means a region or environment where a variable exists and can be accessed or modified.

Now, let's talk about "Lexical"

Lexical

To understand lexical, let's first look at the word from which it is derived from: Lexicon.
Lexicon was derived from the latin word: "lexis" which means "word"
In plain English:

Lexicon simply means a dictionary. In order words, it means a vocabulary of a person's language. It is like a book where the meaning/definition of words are stored.

Whenever you want to find the meaning of a word, you go to the lexicon.
You don't look at where the word is used and guess what it means and its content or value. You always go the lexicon, where the word's purpose is created and clearly defined.

Now with that explanation:

Lexical simply means something related to the lexicon. In other words, it means something related to words or vocabulary of a person's language. Something related to the creation or definition of words.

Let's talk about lexical scope.

Lexical Scope

We have seen the meaning of the two words in plain English.
With that knowledge, let's define Lexical Scope in plain English:

Lexical Scope simply means that the region in which a word exists is determined by where it was defined or created.

Other definitions would be:

Lexical Scope means that the meaning/value of a word can only be determined by the region/environment where it was created.

Lexical Scope means that you don't directly outsource the meaning of a word to people from an outside region that uses the word. This is because lexical places emphasis on the origin on where it was created/defined.

Okay, i'll give an example.
Let's use the word: "Dance".
The word "dance" was created/defined in Britain. The British people know its meaning. This word exists in the scope in which it was created: "Britain". Wales is in Britain so Wales has access to this word (remember we already explained why above). So the Welsh people can update the meaning of this word to suit their local dialect. This is because they are inside the scope of Britain.

The Germans cannot directly come and change the meaning of this word. This is because the word was not created in Germany. So, if the Germans wanted to use the English word: "dance" and that word has not yet been created by Britain, that word would not be available no matter how hard they try. This would make no one to know the actual meaning of that word in Germany because the word doesn't exist in the British Lexicon. (Don't worry if this seems gibberish, i'll explain with code later on)

Since we're students of Science and not Linguists, let's replace "word" with "variable".

Our new definition would be:

Lexical Scope simply means that the region in which a variable exists is determined by where it was defined or created.

Lexical Scope means that the meaning/value of a variable can only be determined by the region/environment where it was created.

Lexical Scope means that you don't directly outsource the meaning of a variable to code from an outside region(block) that uses the variable. This is because lexical places emphasis on the origin on where the variable was created/defined.

So what lexical scope shows us is that a variable can only be used in the scope in which it was created and not where it was called.

Let's see how this works in code:

function rideBritishBoat() {
  let boatName = "Queen's Dab"; // local variable
  return `Driving ${boatName}`
}

function rideGermanBoat() {
  const status = rideBritishBoat();
  return status;
}

rideGermanBoat();

The example above simulates a scenario where the Germans bought a boat from Britain....(You could swap it which ever country you want...no need to fight why i didn't mention some other country. These are just country names and not JavaScript libraries 😛 ).
The rideGermanBoat() uses the rideBritishBoat().
Since JavaScript uses lexical scope, when executing the rideBritishBoat() function, it goes to where it was created and gets the reference of the variable: boatName. So with lexical scoping, whenever rideBritishBoat() is executed, JavaScript goes inside the function's scope to look for the variables used in this function.

Note: The scope of the rideBritishBoat() function is its local scope and the global scope. The rideGermanBoat() is not in the lexical scope of the rideBritishBoat() function because rideBritishBoat() was not created inside it.

Now, let's change the example a bit:

function rideBritishBoat() {
  return `Driving ${boatName}`; // Reference Error: boatName not defined
}

function rideGermanBoat() {
  let boatName = "Merkel's Dab";
  const status = rideBritishBoat();
  return status;
}

rideGermanBoat();

The above code fails. The rideBritishBoat() functions fails to be precise. It fails when trying to access boatName in the return statement.

Why?

This is because JavaScript uses lexical scope.
How this works is when it encounters boatName variable inside the rideBritishBoat() function, it looks for where the boatName variable was created in its Scope Chain. That is, all possible scope of that function which is the: Local Scope of the function, then it checks its enclosing scope in this case the Global Scope.

So that is how JavaScript checks for variables. It first checks the local block in which the current variable is used to know if it was declared there. If it wasn't, then it goes up to the enclosing scope and keeps going if it doesn't find a declaration till it reaches the top of the chain which is the global scope

There is one other type of Scoping called "Dynamic Scoping".
The previous code would work in a language that supports dynamic scoping(e.g Lisp).
This is because in a dynamically scoped environment, the variable is checked at run-time. What is means is that when you execute rideGermanBoat() and execution gets to rideBritishBoat() the runtime environment checks for the value of boatName where the code is currently running. In this case it finds it, so no problem and the code works at expected and prints out Driving Merkel's Dab.

Lexical Scope is also called Static Scope because its the scope is determined at compile-time. Meaning it's environment/scope is fixed and can't just change. In other words, variables can only be called from within the block of code in which it was declared/created.

Dynamic Scope is called dynamic because its environment (outer scope) can change. In other words, variables can be called from outside the block which they are created.

So we could have another function that uses the rideBritishBoat() called rideMauritianBoat():

function rideMauritianBoat() {
  let boatName = "Flying Dodo's Dab";
  const status = rideBritishBoat();
  return status;
}

rideMauritianBoat();

In a dynamically scoped language, you can see the value of boatName variable inside rideBritishBoat() is dependent on the scope in which it is executed. As we can see that this scope can change, hence it is dynamic.
So inside rideBritishBoat(), it calls the boatName variable of rideMauritianBoat() which is outside its block scope.

That's Dynamic Scoping and Lexical Scoping is the opposite.

But remember, JavaScript is not Dynamically scoped. This is just to show you the difference.

So lexical scoping checks for variables at compile-time (variables needs to be created and accessible in the scope/block it is used) while dynamic scoping checks for variables at run-time (variables might not be created in the scope when compiling but can be present when the function is running).

Senior Devs be like: Dude!! JavaScript is not a compiled language!!
Please, Let's leave that talk for some other day. Just try get to get the message i'm passing.
Okay, i'm pissed right now. Here's an exercise for you.

Quick Exercise

What would be the output of this function?


function rideBritishBoat() {
  let boatName = "Queen's Dab";
  function rideWelshBoat() {
    boatName = "Welsh Royal Boat";
    console.log(boatName)
  }
  rideWelshBoat();
}

rideBritishBoat()

Summary

The aim of this article was to explain lexical scoping in a simple way using basic grammar and short examples. If you noticed some words are in bold. Those are the key words to understand this concept. Plus, i have lots of alternate definitions of the same concepts. This was done for you to select which one sinks in easily for you. Different strokes for different folks 😉

From what we've learnt above we can say that:

A scope is an environment/region in which something (a variable) exists
A scope can access its parents.
A parent scope does not have direct access to variables declared in an inner scope.
Lexical has do do with where a variable was declared/created.
Lexical scope enforces finding variables from the scope/block they were created/declared and not the environment which they are running in.
Dynamic Scope is the opposite of Lexical Scope.
Dynamic scoping checks the variables from where they are running.

Thanks for reading.
I'll see you in the next post.

When do you need axios?

Emmanuel Okiche — Sat, 31 Aug 2019 00:09:46 +0000

Introduction

Earlier this year when i worked as an Instructor in a bootcamp teaching Full-Stack Software Engineering, a student asked why i used axios in one of my tutorials. This post was my response. He suggested I posted it online to help others because he found it helpful (I added more content to the original response).
Plus, this is me trying to be productive since i couldn't record any content for my YouTube Channel this week.

The Basics

Firstly, axios and fetch are both for handling http request and both of them returns a Promise.
So, they can both be used with async-await since async-await is just syntactic sugar for handling a Promise instead of using then-catch blocks.

axios is an alternative to fetch. fetch is the default http client that comes with your browsers for handling http requests.

Some advantages of `axios` over `fetch`

axios is a 3rd party npm package you have to install and it has some advantages which we would discuss in this post.

Default JSON parsing

One of the most visible one from the movie search app is that you don't have to call res.json() on the response when using axios (unlike fetch) because axios handles that for you automatically. Meaning that axios parses the response to JSON by default.

// Using fetch
async function loadUserFetch() {
  try{
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1")
    const data = await response.json(); // Manually Parse JSON
    console.log(data)
  }catch(error) {
    console.log(error.message)
  }
}

// Using axios
async function loadUserAxios() {
  try{
    const response = await axios.get("https://jsonplaceholder.typicode.com/users/1")
    console.log(response.data) // Already parsed by axios
  }catch(error) {
    console.log(error.message)
  }
}

O wow!! That's cool. So i just saved one line of code? Whew! Thanks.

Well the fetch code could be written in one line, like so:

const data = await (await fetch("https://jsonplaceholder.typicode.com/users/1")).json()
console.log(data)

The main point to note is not the extra line that axios saves you from but the fact that axios parses the returned response by default.

`axios` works inside and outside a browser's window

Wait, let me explain what i mean by this.
fetch can only work inside a browser.

Why is that so?

Well, fetch is a method of the window object that is: window.fetch().
The window object has lots of cool methods and properties that adds more functionality and lets you do some cool stuffs with Javascript inside your browser. Some other methods of the window object are alert(), confirm(), etc.
Remember! Javascript runs only inside the browser by default. So your browser is the default runtime environment for your Javascript code.
Node.js makes Javascript run outside the browser (which makes it a runtime environment for Javascript).

Since fetch belongs to the window object which is part of your browser's environment, fetch can't work in a Node.js environment because it has no browser window to operate on.

What can i do about this?

Well you could use a Node.js based http client library like axios, superagent, node-fetch, isomorphic-unfetch et al.
Axios can work in the browser and in a Node.js environment.
With this, your Node.js powered applications now have the power to make http request.

Wait! What? So you mean Node.js doesn't have a http module or something to handle http request?

Node.js definately has the http and https modules that handles http request but they are fairly low-leveled and you'll have to receive the response in chunks and track when its done. Plus, you'll have to parse your data to JSON manually too.
Last but not the least, they don't come with the goodness of Promises.

Handy request method aliases

Another advantage is the handy http request methods(get, post, etc) aliases that comes with axios.
Just like in the user search, i used axios.get(...) it also has axios.post(...) and others.
If i want to perform a post request using fetch, i'll have to do something like this:

// Using fetch
async function createUser() {
  const response = await fetch('https://httpbin.org/post', {
    method: 'POST',
    body: JSON.stringify({ name: 'John', email: 'john@mail.com' })
  });
}

But with axios, i'll do:

// Using axios
async function createUser() {
  const response = await axios.post('https://httpbin.org/post', { name: 'John', email: 'john@mail.com' });
}

Axios lets you intercept requests/response and cancel request

Axios lets you easily intercept between a request and response.
This is a bit more advanced but what that simply means is that you could intercept a response before it reaches its destination and do something (eg. if it the request returns an error, you could immediately redirect or set a state based on the error).
With time you'll get to see the use-cases and know when you apply them. Learn more.

Finally, axios provides a simple API that lets you cancel requests.
Modern browsers have started implementing an experimental feature to let you abort fetch requests. As of the time of this writing, it is currently an experimental technology.

Summary

Axios simply provides us with a cleaner and simpler API to handle http requests both in our browser and in Node.js based applications. You must not use axios or any third party library in your browser based applications but we saw that you'll need a third party library like axios (or any other one which you prefer) for your Node.js based applications.
If you were observant to details, you'll see that fetch() and other window methods like alert() are not part of Javascript as a language according to the ECMAScript specification. Instead, they're are just bunch of add-ons provided and implemented by browsers.

I don't believe you!! This doesn't sound right.

Yes, it's okay not to believe because we were all taught about alert() et al while learning Javascript.

Well, i got some exercises for you:

Okay, if fetch is part of Javascript, why can't you use it in your Node.js apps? Try it.
Try this: alert("Hello World") in any Node.js app.

Since this article isn't about how Javascript works, we would not be going into that.

There are other advantages which you can discover as you start using this library for your applications. You could read the axios doc docs for more information.

I hope this article was helpful.
Thanks for reading.
All the best

The NotSoDailyUI #002 - Credit Card Checkout (CSS GRID Goodness!)

Emmanuel Okiche — Fri, 24 Aug 2018 19:09:52 +0000

Welcome to the second part of this series. In case you missed the first part, here's the link: part 1

In this one, we'll be coding the UI for a Credit Card Checkout page.
Here's a look at the finished product:

Just like i stated in the first part, since this is a code tutorial, i would be focusing on the code and not designing the UI from scratch. I got the inspiration of this design from this behance post by Andrea Pilutti.

Ok let's code.

The Markup

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Credit Card Checkout</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
        crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="checkout-flow">
            <div class="checkout-nav">
                <a href="#">Delivery & Pickup Options</a>
                <a href="#">Shipping Address</a>
                <a href="#" class="active">Payment</a>
            </div>

            <div class="checkout">
                <div class="product">
                    <img src="https://raw.githubusercontent.com/fleepgeek/dailyui/master/002-checkout/images/beats.png" alt="product">
                    <div class="info">
                        <p class="name">Beats by Dr.Dre</p>
                        <p class="type">Studio Wireless</p>
                        <h2 class="price">$375</h2>
                    </div>
                </div>

                <div class="form-wrapper">
                    <h2>Credit Card Checkout</h2>
                    <form class="payment-form">

                        <div class="input-control">
                            <label for="cardholder">Cardholder's Name</label>
                            <input type="text" name="cardholder" id="cardholder">
                        </div>

                        <div class="input-control">
                            <label for="cardholder">Card Number</label>
                            <div class="icon-input">
                                <input type="number" name="cardnumber" id="cardnumber">
                                <i class="fab fa-cc-mastercard"></i>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="input-control">
                                <label for="cardholder">Expiration Date</label>
                                <div class="icon-input">
                                    <input type="text" name="expiration" id="expiration" placeholder="MM/YY">
                                    <i class="far fa-calendar"></i>
                                </div>
                            </div>

                            <div class="input-control">
                                <label for="cardholder">Cvc code</label>
                                <input type="text" name="cardholder" id="cardholder">
                            </div>
                        </div>

                        <input type="submit" class="btn-order" value="Place Order">
                    </form>
                </div><!-- end form-wrapper -->

            </div><!-- end checkout -->
        </div><!-- end checkout-flow -->
    </div><!-- end container -->
</body>

</html>

The html markup is pretty straightforward but there are a few things to note in the structure here. The wrapping div's of allinput has the class of input-control excluding the input type of submit. This class is used to style our inputs.

The CSS (style.css)

We are going to style the page using the Mobile-First approach. This simply means that we would first style the page for mobile devices then use media queries to style it for larger screens. Also, we would be using css grid to position our layouts.

global styles

Just like we did in the first part, we first set our css variables:

/*-- Variables --*/

:root {
    --bg-color: #25263B;
    --light-blue: rgb(53, 98, 220);
    --grey: grey;
    --light-grey:#E9E8ED;
    --green: rgb(19, 170, 70);
}

Next, we set our global styles for our elements:

/*---- Global ----*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    vertical-align: bottom;
    text-decoration: none;
    box-sizing: border-box;
}

html, body { 
    height: 100%;
    width: 100%;
    background-color: var(--bg-color);
}

a {
    color: var(--grey);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

a.active {
    color: #ffffff;
}

label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--grey);
    display: block;
    margin-bottom: 5px;
}

input {
    padding: 10px;
    border: 2px solid var(--light-grey);
    width: 100%;
    font-weight: 600;
    border-radius: 3px;
}

input:focus {
    border-color: var(--green);
}

Let me explain some parts. We just gave all our input a grey border of 2px and when it is focused, we change the border color to green. Also, we gave all elements some defaults using the * selector.

main styles

/* main */

.container {
    display: grid;
    grid-template-columns: .25fr 4fr .25fr;
    grid-template-areas: ". m .";
    width: 100%;
    padding: 40px 0;
}

.checkout-flow {
    grid-area: m;
    width: 100%;
}

This where the css grid goodness comes in. We give .container a display: grid which tells the browser that this container is going to be a grid (Yeah Yeah, i know that's very obvious). Unlike the flex system which focuses on arranging items in one dimension (either row or column depending on the flex-direction property), the grid layout comes with the power of controlling the arrangement of items in two dimensions (rows and columns).

We define the columns using grid-template-columns. Here we define three columns of .25fr, 4fr and .25fr. fr simple means a fractional unit of the available space. Using fr divides the available space into fractions (Lol!! at those of you that skipped maths class in high school). So, 4fr means: take up 4 parts of the available space. .25fr means: take up 1/4 part of the available space.
Next, we define the areas we want these columns to take up using grid-template-areas: ". m .". Here m is a name (we could use any word or letter). m signifies the middle coulumn which is 4fr. The dots signifies unnamed columns (you'll understand this soon).

To make everything we just explained useful, we have to assign elements to these defined areas. We do that for .checkout-flow by giving the rule: grid-area: m. This tells the grid system that this element should take up the area of m in the grid system. The remaining areas marked with dots would serve as empty spaces or if you prefer you could call them margins.

**All this stress just to position a div in the center with equal margins?
Just calm down. We could do something like this: margin: 0 auto (auto margin on its left and right) on .container. Now, what if we want to make .checkout-flow cover the whole width (that is 100%). We would have to give checkout-flow negative margins to force it cover the width but with css grid we just do: grid-area: m m m and that's it. This is just a new option and could be beneficial in some design scenarios. Just use the one that best works for you in your given scenario.

I know, that was a lot, right? I could do a full tutorial on css grid if this looks overwhelming for beginners. Let me know in the comments section.

checkout-nav

This style applies to the steps navigation at the top of the screen:

.checkout-nav  {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 30px 0;
    height: 70px;
}

checkout

These are the styles for the main checkout container that contains the product and the form-wrapper.


.checkout {
    background-color: #fff;
    border-radius: 3px;
    width: 100%;
    min-height: 550px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "p p p p p p p p p p p p"
                         "f f f f f f f f f f f f";
}

.product {
    grid-area: p;
    position: relative;
    min-height: 350px;
}

.form-wrapper {
    grid-area: f;
    padding: 40px;
    background-color: var(--light-grey);
}

Using the same principle as we just learned, we define columns and areas on the parent div which has the class of checkout.
Instead of defining our columns manually, we make use of the repeat function which create 12 columns with each column taking up one part of the available space. In simpler terms, we just created a 12 column grid.
Next, we assign the areas we just created to .product and .form-wrapper. Remember, css grid has the power of two dimensions so just defined a grid of 12 columns and 2 rows.

The product would be on the top of the form wrapper in the mobile view (later, we would control the area for larger screen using media queries).
Head over to your browser and see your progress.

product

Let's continue styling our product section.

.product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding-bottom: 40px;
}

.product .info {
    position: absolute;
    bottom: 0;
    padding: 30px;
}

.product .info .name {
    color: var(--grey);
    font-weight: 700;
    font-size: 20px;
}

.product .info .type {
    font-size: 25px;
}

.product .info .price {
    font-size: 36px;
    font-weight: 300;
    margin-top: 10px;
}

form

.form-wrapper {
    grid-area: f;
    padding: 40px;
    background-color: var(--light-grey);
}

.form-wrapper h2 {
    font-size: 24px;
    font-weight: 300;
    color: var(--light-blue);
    margin-bottom: 40px;
}

.input-control {
    margin-bottom: 20px;
}

.icon-input {
    position: relative;
}

.icon-input input {
    padding-right: 40px;
}

.icon-input > i {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 15px;
    font-size: 20px;
    color: var(--grey);
}

.btn-order {
    border: none;
    background-color: var(--green);
    color: #ffffff;
    text-transform: uppercase;
    margin-top: 20px;
}

If you read part 1 of this series, you'll see that nothing is new here in my approach to styling form elements. Errmmm except for the lovely font-awesome icons placed on some form inputs. OK, let's break that down but first let's take a look at one of the html markup for that element as a quick reminder:

<div class="input-control">
    <label for="cardholder">Card Number</label>
    <div class="icon-input">
        <input type="number" name="cardnumber" id="cardnumber">
        <i class="fab fa-cc-mastercard"></i>
    </div>
</div>

We had a special class for inputs with icons called icon-input. In this style, we set position: relative so that we can give the icon element: position: absolute and place it at the right corner of the input. Also, we give the input a right padding so that its text wont cover the icon.

Your page should be looking great now. Go ahead and check it. We just need to add media queries for larger screens and that's what we'll do next.

media queries for larger screens

@media (min-width: 1024px) {
    .container {
        display: grid;
        grid-template-columns: .5fr 2fr .5fr;
        grid-template-areas: ". m .";
    }
    .checkout {
        grid-template-areas: "p p p p p f f f f f f f";
    }
    .checkout-nav {
        flex-direction: row;
        justify-content: space-evenly;
        height: 20px;
    }
    .control-group {
        display: flex;
        justify-content: space-between;
    }
    .control-group .input-control {
        flex: 0 0 48%;
    }
}

For the .checkout class, we rearranged the grid-template-areas to layout the p and f side by side. With this rearrangement, the product and the form-wrapper would be side by side on large screens.
Next, we changed the flex direction of the .checkout-nav to row and spaced it evenly so that the links appear on one horizontal line.
We gave the .control-group a display of flex so the inputs(expiration date and cvc code) would be positioned on the same horizontal line.

Conclusion

That's it people. Here's the link to my dailyui github repo.
Stayed tuned for the next part!!

The NotSoDailyUI #001 - Signup

Emmanuel Okiche — Wed, 22 Aug 2018 18:27:14 +0000

Introduction

I decided to participate in the #dailyui challenge from dailyui.co. This journey would be focused on coding the interfaces and not how to design them. To help me with this, i would be referencing works where i gather inspiration for the design. This is would be an avenue for beginners and frontend devs to learn how common interfaces are created.

What's with the title man?

Errmm... i won't be posting this daily because i know within myself that i wont have the time (i'm not a full-time code instructor but i would really love that career path because i love teaching).

What are we building

Enough talk, here we go:

This design was the first image i got when i googled: "signup form." The original design was created with bootstrap but we are going to be coding this from scratch.

The Html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simple SignUp</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h2>Teebo</h2>
    </header>
    <div class="container">
        <div class="signup-wrapper">

            <div class="signup">
                <div class="heading">
                    <h2>Sign Up</h2>
                    <p>Please fill in this form to create an account!</p>
                </div>
                <div class="divider"></div>
                <form class="signup-form">
                    <div class="form-group">
                        <input type="text" placeholder="First Name" name="firstName" id="firstName">
                        <input type="text" placeholder="Last Name" name="lastName" id="lastName">
                    </div>

                    <input type="email" placeholder="Email" name="email" id="email">
                    <input type="password" placeholder="Password" name="password" id="password">
                    <input type="password" placeholder="Confirm Password" name="confirmPassword" id="confirmPassword">

                    <div class="form-group">
                        <input type="checkbox" name="privacy" id="privacy">
                        <label for="privacy">I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a></label>
                    </div>

                    <input type="submit" value="Sign Up">
                </form>
            </div>

            <div class="login-link">
                <p>Already have an account? <a href="#">Login Here</a></p>
            </div>

        </div>
    </div>
</body>

</html>

This is a basic html markup of the signup page structure. One of the few things to note is the form-group class which is used to group inputs. The inputs inside the div with the form-group class would appear on the same line on larger devices.

CSS (style.css)

We would be using css flexbox for the positioning of the elements. We would also be using the css variables which is just a way to define values to be used by css rules in our design. One of the major benefits of css variables it that we could easily update values of variables and the corresponding rule would be updated accordingly. We'll see this in practice as we code.

First, let's create these variables:

/*-- Variables --*/

:root {
    --primary-color: #3598DC;
    --grey: grey;
    --grey-light: #f1eded;
    --grey-dark: rgb(48, 47, 47);
}

Bro, what's with the double dash? That's how you create a css variable.
How do we use these variables? Chill, i'll show you that now but before that, let's define the global style for our design:

/*---- Global ----*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    vertical-align: bottom;
    text-decoration: none;
}

body {
    background: var(--primary-color);
}

h2 {
    font-size: 36px;
    color: var(--grey-dark);
}

p {
    font-size: 16px;
    color: var(--grey);
}

input {
    background-color: var(--grey-light);
    padding: 15px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

::placeholder {
    color: var(--grey);
}

Did you notice something? We already used the variables. We use the css variables we declared like so var(--primary-color). We also created generic styles for other elements. You could head over to your browser and see your changes.

Let's style the header and the container div:

header h2 {
    font-family: 'Pacifico', cursive;
    color: #ffffff;
    padding: 0 0 20px 20px;
}

.container {
    display: flex;
    justify-content: center;
}

signup form

First, we would style the form's wrapper div, the heading and the divider. The divider is just a div that is styled to look like a horizontal line

/*SignUp form*/

.signup-wrapper {
    width: 500px;
}

.signup {
    background-color: #ffffff;
    border-radius: 5px;
}

.signup .heading {
    padding: 30px 30px 0 30px;
}

.signup .heading h2 {
    margin-bottom: 10px;
}

.divider {
    height: 1px;
    background: var(--grey-light);
    margin: 20px 0;
}

Now, let's style the form:

.signup-form {
    padding: 0 30px 30px 30px;
}

.signup-form a {
    color: var(--primary-color);
}

.signup-form input {
    display: block;
    width: 100%;
}

.form-group {
    display: flex;
    justify-content: space-between;
}

.form-group input {
    flex: 0 0 48%;
}

.form-group input[type="checkbox"] {
    flex: 0 0 5%;
    margin: 0;
    align-self: center;
}

.form-group label {
    flex: 0 0 94%;
    color: var(--grey);
}

.signup-form input[type="submit"] {
    width: inherit;
    padding: 10px 40px;
    margin: 30px 0;
    background: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
    border-radius: 3px;
}

Relax, nothing out of the ordinary is going on here. Let's break it down together:

We add some padding to the signup form
We make the input to be a block element so each input is on a new line, then we make its width 100% to fill up the horizontal space.
Next, we make the form-group a flex layout and make its contents to have a space in-between them using the space-between rule.
Then, we set the input inside the form-group to have a flex-grow: 0, flex-shrink: 0 and a flex-basis: 48%. flex: 0 0 48% is a shorthand for the rules. The value of 0 means the input should neither grow nor shrink when the screen resizes. The role of flex-basis: 48% is pretty obvious. Right?

login-link

Let's style that login link below the form:

/*login-link*/

.login-link {
    margin: 20px;
    text-align: center;
}

.login-link p {
    color: #ffffff;
}

.login-link p a {
    text-decoration: underline;
    color: #ffffff;
}

finally

Let's add some media query goodness:

@media (max-width: 650px) {
    .signup-wrapper {
        width: 90%;
    }
    .form-group {
        display: block;
    }
}

This media query kicks off when the screen size is below 650px (for smaller screens). We change the width of the signup-wrapper from 500px to 90%. The form-group is now given a display of block (previously had a display of flex) which then makes the items to be laid out horizontally.

Conclusion

That's it. You're done. You can keep track of my dailyui repo Here. One more thing, try changing the value of the css variables and see the goodness of css variables.
Thanks so much for reading. All the best.

React throwaway app: The Finale

Emmanuel Okiche — Wed, 22 Aug 2018 18:26:50 +0000

Firstly, i must apologize for posting this part late. I've been working on some cool stuffs which i would be sharing with the community soon.
If you started this short series with me, you would understand that the idea is to build small apps to show that we understand how react works. These apps must not be perfect but should cover core aspects of react like:

states
life cycles
events
UI updates, etc

If you were just like me, you'll get bored of building these simple apps or you could feel that most of the apps you're building has repetitive features and you feel you're not learning something new. Well, that's a good sign because your brain is trying to tell you that it has created neural patterns of the new found knowledge called: "React." This is a sign you can move on to next step which could be to build something more complex or to learn react router or redux.

If you want more practice project ideas, check this out.
Thanks for reading.

Part 1
Part 2

React throwaway app 2: Movie Search App

Emmanuel Okiche — Wed, 04 Jul 2018 14:01:39 +0000

In the first article, I introduced you to the aim of the series and you built a currency converter. In this one, you would be building a movie search app.

The Rules (just to remind you)

Your app should be completed within 60 minutes (depending on the complexity).
Must be pure React (no react-router or redux).
Must delete the project after one week. Why? These are basic apps you should be able to build anytime and not worthy of showcasing as a portfolio for a serious job interview.
Don't spend much time on designing. Remember, the idea is to check if you think in React. You could style to your taste after 60 minutes.
Don't look at my solution until you have completed yours. Else, you would be struck with 5 years of 'tutorial purgatory'

App 2 - Movie Search App

Build a Movie App that connects to an external api.
Search for movies movies and select one to display.
Duration should be within 1 - 2 hours (including styling).

Here is a screenshot of what i expect you to build:

This app would show that you understand how:

components and states work
to request data from an api
component life cycle methods
to use events
to update your UI based on state change

Your time starts now! Remember not to look at my solution until you're done with yours.

My Solution

I used the OMDb API to get my movie data. You have to get an api key (it is free). I must confess, i spent above 60 minutes to complete this because i had to get familiar with the api by playing around with different requests on PostMan. As always, i used create-react-app to generate my project.

To structure my app, i had to decide what would be containers and components.

Here is my folder structure:

MovieCard.js:

This component is used to display the selected movie. It receives its movie data via props.

import React from 'react';

import './MovieCard.css';

const MovieCard = (props) => {
    return (
        <div className="container">
            <div className="movie-card">
                <div className="movie-header" style={{ backgroundImage: `url(${props.movie.Poster})` }}>
                </div>
                <div className="movie-content">
                    <div className="movie-content-header">
                        <h3 className="movie-title">{props.movie.Title}</h3>
                    </div>
                    <div className="movie-info">
                        <div className="info-section">
                            <label>Released</label>
                            <span>{props.movie.Released}</span>
                        </div>
                        <div className="info-section">
                            <label>IMDB Rating</label>
                            <span>{props.movie.imdbRating}</span>
                        </div>
                        <div className="info-section">
                            <label>Rated</label>
                            <span>{props.movie.Rated}</span>
                        </div>
                        <div className="info-section">
                            <label>Runtime</label>
                            <span>{props.movie.Runtime}</span>
                        </div>
                    </div>
                    <div className="plot" style={{fontSize: '12px'}}>
                        <p>{props.movie.Plot}</p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MovieCard;

MovieCard.css:


.container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.movie-card {
    background: #ffffff;
    box-shadow: 0px 6px 18px rgba(0,0,0,.1);
    width: 100%;
    max-width: 290px;
    margin: 2em;
    border-radius: 10px;
    display:inline-block;
    z-index: 10;
}

.movie-header {
    padding:0;
    margin: 0;
    height: 434px;
    width: 100%;
    display: block;
    border-top-left-radius: 10px;
    border-top-right-radius:10px;
    background-size: cover;
}

.movie-content {
    padding: 18px 18px 24px 18px;
    margin: 0;
}

.movie-content-header, .movie-info {
    display: table;
    width: 100%;
}

.movie-title {
    font-size: 24px;
    margin: 0;
    display: table-cell;
    cursor: pointer;
}

.movie-title:hover {
    color:rgb(228, 194, 42);
}

.movie-info {
    margin-top: 1em;
}

.info-section {
    display: table-cell;
    text-transform: uppercase;
    text-align:center;
}

.info-section:first-of-type {
    text-align:left;
}

.info-section:last-of-type {
    text-align:right;
}

.info-section label {
    display: block;
    color: rgba(0,0,0,.5);
    margin-bottom: .5em;
    font-size: 9px;
}

.info-section span {
    font-weight: 700;
    font-size: 11px;
}

@media only screen and (max-width: 400px) {
    .movie-header {
        height: 400px;
    }
}

Search.js

Next, we have the Search component which contains the search input and the returned list of result.
Here is the Search.js:

import React from 'react';

import './Search.css';

const Search = (props) => {
    let resultList = null

    if (props.searching && (props.defaultTitle !== '')) {
        resultList = (
            <ul className="results">
                {props.results.map(item => (
                    <li key={item.imdbID} onClick={() => props.clicked(item)}>
                        <img src={item.Poster} alt="Movie Poster"/>
                        {item.Title}
                    </li>
                ))}
            </ul>
        )
    }

    return (
        <div className="search">
            <input type="search" name="movie-search" value={props.defaultTitle} onChange={props.search} />
            {resultList}
        </div>
    );
};

export default Search;

Search.css

.search {
    position: relative;
    margin: 0 auto;
    width: 300px;
    margin-top: 10px;
}

.search input {
    height: 26px;
    width: 100%;
    padding: 0 12px 0 25px;
    background: white;
    border: 1px solid #babdcc;
    border-radius: 13px;
    box-sizing: border-box;
    box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}

.search input:focus {
    outline: none;
    border-color: #66b1ee;
    box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}


.search .results {
    display: block;
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 0;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #cbcfe2 #c8cee7 #c4c7d7;
    border-radius: 3px;
    background-color: #fdfdfd;
}

.search .results li { 
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid rgba(88, 85, 85, 0.3);
    text-align: left;
    height: 50px;
    cursor: pointer;
}

.search .results li img { 
    width: 30px;
    margin-right: 5px;
}

.search .results li:hover { 
    background: rgba(88, 85, 85, 0.1);
}

MovieSearch.js

I made MovieSearch to be a stateful component because i want to manage all my states there and pass the data to other components via props. First, make sure you get your api key from omdb api.
Here is my MovieSearch.js container:

import React, { Component } from 'react';
import axios from 'axios';

import MovieCard from '../../components/MovieCard/MovieCard';
import Search from '../../components/Search/Search';

class MovieSearch extends Component {
    state = {
        movieId: 'tt1442449', // default imdb id (Spartacus)
        title: '',
        movie: {},
        searchResults: [],
        isSearching: false,
    }

    componentDidMount() {
        this.loadMovie()
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.movieId !== this.state.movieId) {
            this.loadMovie()
        }
    }

    loadMovie() {
        axios.get(`http://www.omdbapi.com/?apikey=YOUR_API_KEY&i=${this.state.movieId}`)
            .then(response => {
                this.setState({ movie: response.data });
            })
            .catch(error => {
                console.log('Opps!', error.message);
            })
    }

    // we use a timeout to prevent the api request to fire immediately as we type
    timeout = null;

    searchMovie = (event) => {
        this.setState({ title: event.target.value, isSearching: true })

        clearTimeout(this.timeout);

        this.timeout = setTimeout(() => {
            axios.get(`http://www.omdbapi.com/?apikey=YOUR_API_KEY&s=${this.state.title}`)
                .then(response => {

                    if (response.data.Search) {
                        const movies = response.data.Search.slice(0, 5);
                        this.setState({ searchResults: movies });
                    }
                })
                .catch(error => {
                    console.log('Opps!', error.message);
                })
        }, 1000)


    }

    // event handler for a search result item that is clicked
    itemClicked = (item) => {
        this.setState(
            {
                movieId: item.imdbID,
                isSearching: false,
                title: item.Title,
            }
        )
    }


    render() {
        return (
            <div onClick={() => this.setState({ isSearching: false })}>
                <Search
                    defaultTitle={this.state.title}
                    search={this.searchMovie}
                    results={this.state.searchResults}
                    clicked={this.itemClicked}
                    searching={this.state.isSearching} />

                <MovieCard movie={this.state.movie} />
            </div>
        );
    }
}

export default MovieSearch;

This container is used to handle the state and update changes in our application.
The code above simply loads a an initial movie when it mounts. Whenever we search and update the movieId state, it updates the content of the MovieCard via props.

Conclusion

You might think that this was a little bit rushed. Remember, this is not a tutorial but a challenge for beginners that feel they can think in React. My code was just a guide. Thanks for reading and i hope to see you in the next part.

I don't think i would throw this one away ;)

Link to Part 1: Here

React throwaway app 1: Currency Converter

Emmanuel Okiche — Mon, 02 Jul 2018 15:45:17 +0000

Intro

Sometime last year, i came across an article written by Dave Ceddia on how to learn React.
He clearly stated the order of what to learn while on your learning journey.

I liked his idea of building a few things after learning pure React and throwinng them away; step 2 from the article.
This was a good idea because the problem with taking courses and reading programming books straight to the end is that you feel you know and understand the concepts covered. I'm sorry, you dont, not until you've fired up your favorite code editor and build stuffs based of what you've learnt.

It is very easy for new developers to fall into tutorial purgatory. This simply means consuming so much tutorials and never feeling you have learnt enough to build stuffs.

Do you think you know React?

In this series, we our going to test ourselves to see if we could build small 'throwaway projects' to show that we understand and think in React.
Knowing a concept is one thing. Knowing how to combine this knowledge and when to use them in another.

What are we going to achieve

You are going to build 'throwaway app' that shows you think in react and understand its basic concepts. This series would cover about 6 apps (you could suggest more throwaway apps because i cant think of more right now).

The apps you are going to build in this series:

Currency Converter
Movie Search
....would think of more as we progress

The Rules

Your app should be completed within 60 minutes.
Must be pure React (no react-router or redux).
Must delete the project after one week. Why? These are basic apps you should be able to build anytime and not worthy of showcasing as a portfolio for a serious job interview.
Don't spend much time on designing. Remember, the idea is to check if you think in React. You could style to your taste after 60 minutes.
Don't look at my solution until you have completed yours. Else, you would be struck with 5 years of 'tutorial purgatory'

App 1: Currency Converter

You are to build a currency converter.
Here is a screenshot:

You could use the free api provided by OpenRates.io
This app would show that you understand how:

components and states work
to request data from an api
component life cycle methods
to use events

Your time starts now!!

My Solution

I used the the OpenRates api to get my exchanges rates and create-react-app to generate a base structure for my project. Also, i used 'axios' to handle my requests.
Here is my diectory structure for the Converter component:

Here is the complete Converter.js

import React, { Component } from "react";
import axios from "axios";

import './Converter.css';

class Converter extends Component {
    state = {
        result: null,
        fromCurrency: "USD",
        toCurrency: "GBP",
        amount: 1,
        currencies: [],
    };

    // Initializes the currencies with values from the api
    componentDidMount() {
        axios
            .get("http://api.openrates.io/latest")
            .then(response => {
                // Initialized with 'EUR' because the base currency is 'EUR'
                // and it is not included in the response
                const currencyAr = ["EUR"]
                for (const key in response.data.rates) {
                    currencyAr.push(key)
                }
                this.setState({ currencies: currencyAr.sort() })
            })
            .catch(err => {
                console.log("Opps", err.message);
            });
    }

    // Event handler for the conversion
    convertHandler = () => {
        if (this.state.fromCurrency !== this.state.toCurrency) {
            axios
                .get(`http://api.openrates.io/latest?base=${this.state.fromCurrency}&symbols=${this.state.toCurrency}`)
                .then(response => {
                    const result = this.state.amount * (response.data.rates[this.state.toCurrency]);
                    this.setState({ result: result.toFixed(5) })
                })
                .catch(err => {
                    console.log("Opps", err.message);
                });
        } else {
            this.setState({ result: "You cant convert the same currency!" })
        }
    };

    // Updates the states based on the dropdown that was changed
    selectHandler = (event) => {
        if (event.target.name === "from") {
            this.setState({ fromCurrency: event.target.value })
        }
        if (event.target.name === "to") {
            this.setState({ toCurrency: event.target.value })
        }
    }

    render() {
        return (
            <div className="Converter">
                <h2><span>Currency </span> Converter <span role="img" aria-label="money">&#x1f4b5;</span> </h2>
                <div className="Form">
                    <input
                        name="amount"
                        type="text"
                        value={this.state.amount}
                        onChange={event =>
                            this.setState({ amount: event.target.value })
                        }
                    />
                    <select
                        name="from"
                        onChange={(event) => this.selectHandler(event)}
                        value={this.state.fromCurrency}
                    >
                        {this.state.currencies.map(cur => (
                            <option key={cur}>{cur}</option>
                        ))}
                    </select>
                    <select
                        name="to"
                        onChange={(event) => this.selectHandler(event)}
                        value={this.state.toCurrency}
                    >
                        {this.state.currencies.map(cur => (
                            <option key={cur}>{cur}</option>
                        ))}
                    </select>
                    <button onClick={this.convertHandler}>Convert</button>
                </div>
                {this.state.result && 
                    <h3>{this.state.result}</h3>
                }
            </div>
        );
    }
}

export default Converter;

I wouldn't go into details of the above code because i believe you already know React (that's why you started reading this article in the first place, right?) but i would give an overview of what's happenning.

The list of currencies is initialized in the componentDidMount(). The values are gotten from the OpenRates API and would be used to populate our drop-downs.
The convertHandler() is where the conversion takes place and it is triggered by the onClick event of the button.
Also, i have a selectHandler() which is shared by the two drop-downs. This function conditionally updates the state based on which drop-down was changed (that was why i gave the drop-downs name attribute ). You could call this Conditional Shared Events if you're into giving every concept names.
You could definitely perform an inline event trigger on the drop-downs like i did for the input text field, i just showed that we could have one event handler shared by different similar components.
Finally, i import the Converter component inside of my App.js file and i call it inside its render function.

//This is also correct
onChange={(event) => this.setState({ fromCurrency: event.target.value })}

Here is the css: Converter.css

.Converter {
    width: 100%;
    padding: 0 15%;
    box-sizing: border-box; 
    text-align: center;
}

.Form {
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.Form input, select {
    padding: 5px;
    margin: 5px 10px;
    border-radius: 5px;
    border: 1px solid rgba(119, 119, 119, 0.5);
}

.Form button {
    padding: 5px 10px;
    border-radius: 5px;
    background: rgb(11, 170, 59);
    color: white;
    border: none;
}

.Converter h3 {
    background-color: #ccc;
    border-radius: 10px;
    padding: 15px;
    font-size: 30px;
}

.Converter h2 span {
    color: rgb(11, 170, 59);
}

Conclusion

I hope this was a good exercise and you enjoyed it?
If you coded the app successfully without looking at mine: Well Done.
If you couldn't: Well Done too. It shows that you're eager to challenge yourself and that is a good attribute of a developer. With time, you'll understand these concepts.

Remember, we always have to test our knowledge constantly as developers and i hoped this simple exercise helped.
See you tomorrow for the next 'throwaway app' challenge. Thanks for reading!!

Link to the next throwaway app: Movie Search

Django Quick Tip #1: Human Friendly Timestamps with Django's Humanize

Emmanuel Okiche — Tue, 15 May 2018 13:15:29 +0000

Welcome to this short Django Tip. No long story here since this is a 'Quickie'.
This is what we would achieve:

To achieve this, we would be using the humanize module which is located in django.contrib.humanize.
The humanize module is a collection of template filters that adds a human touch to our displayed data. Instead of spitting out the exact values in our database, it prettifies it to a nice readable format.

Let's get to work

1. Add the module to your `INSTALLED_APPS`:

'django.contrib.humanize'

2. Load it up in your template:

{% load humanize %}

3. Apply the filter to your timestamp

{{ viewed_on|naturaltime }}

That's it!

The humanize module also contains other filters. Here's a link to the the documentation.
Now go forth and make your apps human friendly.

Video Version

Prevent Multiple Sessions for a User in your Django Application

Emmanuel Okiche — Sat, 05 May 2018 16:14:04 +0000

Welcome to my first tutorial on this platform. In this one i'm going to show you how to prevent a user account from having multiple sessions at the same time.
Whenever a user logs in, the previous sessions is deleted.
This approach could be useful in subscription based apps where you want a single access for the subscribing user.

Our Approach

For this tutorial, We'll be using django 2.0.4 and its middleware framework.
The middleware is simply the middle guy or lady in between django's request/response processing. Django has some middlewares which we already use in our projects by default.
The middleware framework is what we're going to use to check if the user has an existing session on our application whenever a user makes a request.
If a session, exists, it deletes it and assigns the new session from the request as the current session.

Note: "Django stores session data in the "django_session" table, so deleting a user's session from the database has the same effect as logging out a user."

Code Time

Too much talk, right? OK let's just code.
Ermm... one more thing. All the code below should be stored in one app. I believe you know this but there's no harm in stating the obvious sometimes.
Create an app in your django project called 'accounts' and follow this tutorial.

models.py

We need to create a model to store the list of users that are currently logged into our app

from django.conf import settings

User = settings.AUTH_USER_MODEL

# Model to store the list of logged in users
class LoggedInUser(models.Model):
    user = models.OneToOneField(User, related_name='logged_in_user')
    # Session keys are 32 characters long
    session_key = models.CharField(max_length=32, null=True, blank=True)

    def __str__(self):
        return self.user.username

We created a user field with a OneToOneField so that a user can only have one entry in the table. In simple terms, this uniquely identifies a user in the table. In simpler terms, there are no duplicate entries for a user in the table. In the simplest term ['insert yours here']. The related_name attribute is used to give a more friendly name for reverse relationship to the User model (you'll see soon).
The session_key would be used to store the session_key. So sorry if you were expecting a simpler explanation. Those times are past.

signals.py

Create a new file, called signals.py in your app directory. Signals are used to broadcast events whenever an action occurs in our app.
For our app, we need to know whenever a user logs in and logs out. With the help of signals, we can know this and perform some actions (here, insert the user to the LoggedInUser table).

# Signals that fires when a user logs in and logs out

from django.contrib.auth import user_logged_in, user_logged_out
from django.dispatch import receiver
from accounts.models import LoggedInUser

@receiver(user_logged_in)
def on_user_logged_in(sender, request, **kwargs):
    LoggedInUser.objects.get_or_create(user=kwargs.get('user')) 


@receiver(user_logged_out)
def on_user_logged_out(sender, **kwargs):
    LoggedInUser.objects.filter(user=kwargs.get('user')).delete()

We're using the inbuilt user_logged_in and user_logged_out signals which fires whenever a user successfully logs in and log outs respectively.
If you were wondering how we got the user' through the kwargs, wonder no more my friend. The user argument is always sent with the two signals mentioned above.

apps.py

Add the following code in your apps.py file to import your signals.

from django.apps import AppConfig
class AccountsConfig(AppConfig):
    name = 'accounts'
    # This function is the only new thing in this file
    # it just imports the signal file when the app is ready
    def ready(self):
        import accounts.signals

In your settings.py file, update your app's name to point to exact app in apps.py

INSTALLED_APPS = [
    .....

    'accounts.apps.AccountsConfig',
]

middleware.py

Create a file called middleware.py in your app directory.

#Session model stores the session data
from django.contrib.sessions.models import Session

class OneSessionPerUserMiddleware:
    # Called only once when the web server starts
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        # Code to be executed for each request before
        # the view (and later middleware) are called.
        if request.user.is_authenticated:
            stored_session_key = request.user.logged_in_user.session_key

            # if there is a stored_session_key  in our database and it is
            # different from the current session, delete the stored_session_key
            # session_key with from the Session table
            if stored_session_key and stored_session_key != request.session.session_key:
                Session.objects.get(session_key=stored_session_key).delete()

            request.user.logged_in_user.session_key = request.session.session_key
            request.user.logged_in_user.save()

        response = self.get_response(request)

        # This is where you add any extra code to be executed for each request/response after
        # the view is called.
        # For this tutorial, we're not adding any code so we just return the response

        return response

Notice, request.user.logged_in_user.session_key we can use logged_in_user here because we defined it as the related name for the user field in your LoggedInUser model. If we didnt do that, the reverse relationship name would be loggedinuser which doesnt follow python's naming convention.

Finally, add this middleware we just created in your MIDDLEWARE list in your settings.py file

MIDDLEWARE = [
    ....

    'accounts.middleware.OneSessionPerUserMiddleware'

]

Conclusion

In this one we learnt how to prevent a user from having multiple sessions in your app. More like preventing bad people from streaming videos on 50 devices (50 friends and family's devices to be precise) from one subscribed account on your web app.

This tutorial was to show you how to create custom middlewares in your django app.
There are definitely other ways which might be better in achieving this. This might not be a perfect solution to your needs. The idea was just to show you how middlewares work.
Now go forth and explore!!
Thanks for reading.

Video Version

You know what to do after watching this video, right?
OK, let me just state the obvious once more. Hit the 'subscribe' button then click the bell icon. Thanks once again for reading.

Forem: Emmanuel Okiche

Why you should ignore everybody's shiny new toy in JavaScript Land

Introduction

A little history

Why Ignore them?

Conclusion

I would try to explain lexical scope in plain English. Wish me luck

scope

Lexical

Lexical Scope

Quick Exercise

Summary

When do you need axios?

Introduction

The Basics

Some advantages of axios over fetch

Default JSON parsing

axios works inside and outside a browser's window

Handy request method aliases

Axios lets you intercept requests/response and cancel request

Summary

The NotSoDailyUI #002 - Credit Card Checkout (CSS GRID Goodness!)

The Markup

The CSS (style.css)

global styles

main styles

checkout-nav

checkout

product

form

media queries for larger screens

Conclusion

The NotSoDailyUI #001 - Signup

Introduction

What's with the title man?

What are we building

The Html

CSS (style.css)

signup form

login-link

finally

Conclusion

React throwaway app: The Finale

React throwaway app 2: Movie Search App

The Rules (just to remind you)

App 2 - Movie Search App

My Solution

Conclusion

React throwaway app 1: Currency Converter

Intro

Do you think you know React?

What are we going to achieve

The Rules

App 1: Currency Converter

Your time starts now!!

My Solution

Conclusion

Django Quick Tip #1: Human Friendly Timestamps with Django's Humanize

Let's get to work

1. Add the module to your INSTALLED_APPS:

2. Load it up in your template:

3. Apply the filter to your timestamp

That's it!

Video Version

Prevent Multiple Sessions for a User in your Django Application

Our Approach

Code Time

models.py

signals.py

apps.py

middleware.py

Conclusion

Video Version

Some advantages of `axios` over `fetch`

`axios` works inside and outside a browser's window

1. Add the module to your `INSTALLED_APPS`: