Forem: Prosper Opara

Junior Developer Check List

Prosper Opara — Sun, 21 Jun 2020 20:09:02 +0000

Dear recruiters,

When hiring Junior talents what does your checklist look like?

Node.js Module System

Prosper Opara — Wed, 22 Apr 2020 13:04:08 +0000

Node.js is a JavaScript run-time built on top of the chrome v8 engine. Succinctly, Node.js as a platform provides an environment outside of the traditional web browser for executing JavaScript code (It's important to note here that Node.js was created for building network applications using JavaScript).

A typical production ready Node.js application is feature intensive (the endpoints of Restful API's are typical example where each endpoint is a feature and have a unique responsibility) and demands some amount of logic which in turn demands that you code lots of functions that are responsible for realizing the different features that make up your application. To keep our application maintainable it's a good practice to split the different logic into smaller pieces that have specific responsibilities and then import these pieces of logic into the main application for reuse. In Node.js we are given a module system which enable application developers to abstract logic into modules, export the modules to be used else where in our application. Understanding how the module system works is integral for writing maintainable Node.js applications.

A module is a piece of a program with abstracted functionality needed by the entire program. Typically, a program in most cases is composed of different modules.

NB: For the rest of this article, i'd be using Node in place of Node.js mostly because it takes lesser keystroke and that is pretty what it's called in the ecosystem.

The Module System Architecture

In Node every file is considered a module and before each file (module) is executed, it's wrapped within a Module Wrapper function which exposes the following variables/arguments module, exports, require, __filename, __dirname and looks something like;

(function(exports, require, module, __filename, __dirname) {
  // module code goes in here
});

The exports and module object exposed by the wrapper function enable the module to expose functions/objects to be used by other modules. the require object allows for the module to import other module(s), the __filename, __dirname are both convenience variables for accessing the file and directory path of the module respectively. It's equally important to note that the variables exposed by the wrapper function are not globally scoped. Instead, they are locally scoped to the module and every other variable declared within the module (in the global scope of the module) are also not directly accessible by other modules when the module is imported into another module except these variable are explicitly exported by the module. Hence, object naming collision is easily avoided between the importing module and imported module.

NB: Please note that file and module can be used interchangeably, but i'd still explicitly remind you that to avoid any misunderstanding.

module

The module variable is an object that represents the file in which it exits. Lets investigate this variable by creating an empty index.js file(module) and logging the variable to console:

console.log(module);

/*
  returns;

  Module {
  id: '.',
  path: 'C:\\Users\\kodekage\\Desktop\\projects\\node\\module',
  exports: {},
  parent: null,
  filename: 'C:\\Users\\kodekage\\Desktop\\projects\\node\\module\\index.js',
  loaded: false,
  children: [],
  paths: [
    'C:\\Users\\kodekage\\Desktop\\projects\\node\\module\\node_modules',
    'C:\\Users\\kodekage\\Desktop\\projects\\node\\node_modules',
    'C:\\Users\\kodekage\\Desktop\\projects\\node_modules',
    'C:\\Users\\kodekage\\Desktop\\node_modules',
    'C:\\Users\\kodekage\\node_modules',
    'C:\\Users\\node_modules',
    'C:\\node_modules'
  ]
}

*/

NB: The output you see here will slightly differ from yours due to the simple fact that we are not using the same machine and you might have created your file in a totally different folder.

module.exports

module.exports property exposes values from the module which can be imported into other modules by require('/path/to/module') and reused. Let's create a utility.js module, that exposes an addition and subtraction function.

//utility.js

const add = (a, b) => {
  return a + b;
}

const subtract = (a, b) => {
  return a - b;
}

module.exports.add = add;
module.exports.subtract = subtract;

module.exports.add pushes the add function into the exports object assigning add as the key and the add function as the value. module.exports.subtract also assigns subtract as the second property of the exports object within the module object. To further illustrate this, let's log the module object to the console.

// utility.js

console.log(module);

/*
  returns;

  Module {
  id: '.',
  path: 'C:\\Users\\kodekage\\Desktop\\projects\\node\\module',
  exports: { add: [Function: add], subtract: [Function: subtract] },
  parent: null,
  filename: 'C:\\Users\\kodekage\\Desktop\\projects\\node\\module\\index.js',
  loaded: false,
  children: [],
  paths: [
    'C:\\Users\\kodekage\\Desktop\\projects\\node\\module\\node_modules',
    'C:\\Users\\kodekage\\Desktop\\projects\\node\\node_modules',
    'C:\\Users\\kodekage\\Desktop\\projects\\node_modules',
    'C:\\Users\\kodekage\\Desktop\\node_modules',
    'C:\\Users\\kodekage\\node_modules',
    'C:\\Users\\node_modules',
    'C:\\node_modules'
  ]
}

*/

the exports property looks something like; exports: { add: [Function: add], subtract: [Function: subtract] },. Indicating that the functions have being successfully exposed. When utility.js is required in another module, the functions can be called within the requiring module.

exports

exports is a convenience method for module.exports as it takes lesser keystroke and is also succinct. Drawing from our previous code sample, module.exports.add and module.exports.subtract can also be written as exports.add and exports.subtract respectively.

require

require is a function used for loading a module into another module. It exposes the imported(the module been required) modules exported objects and makes them usable withing the requiring module.

// program.js

const utility = require('./utility');

utility.add(5, 6); // returns 11
utility.substract(3, 6) // returns -3

There are are different types of module you can typically load by calling the require function;

Node core module e.g http, fs, net, etc
Application dependency module, typically loaded from node_modules
local module/files

When loading a core module or a module in the node_modules folder you simply reference the module name e.g; const http = require('http'), cosnt socketIo = require('scoket.io'). To load a local module(file) you need to add the file path to the module e.g const utility = require('./utility) this means the utility module is in the same directory as the module importing it.

How Module loading works

when loading a module node checks if the module identifier (the string passed into the require function call) begins with './' or '/' or '../' and when they don't Node checks if the identifier matches any of it's core module (http, net, fs, etc) and it finds a match, it loads the identified core module else Node knows to look into node_modules folder for the required module.

'./' is a relative path to the module and it means that both modules (the imported module and the importing module) must be in the same directory
'../' is also indicates a relative file path to the module, but this time both modules are not in the same directory level.
'/' is an absolute path to the module, and node starts looking from the root of the file system

Note on`Node_modules`

The node_modules directory is a repository for third party modules downloaded from package managers like npm or yarn. Node loads modules(packages) from this folder when the identifier passed into the require function is not a core module or the identifier does not begin with './', '/' or '../'. In order to load from node_modules, Node keeps appending "/node_modules" to the file path starting from the parent directory of the requiring module, then node keeps moving up the tree till it locates the file.

Imagine you created a program.js file in $HOME/projects/sample-node-app/program.js which requires a utility.js module which happens not to be a core module and the identifier does not begin with an absolute path "/" or relative path "./" or "../".

// program.js
const utility = require("utility");

Node next assumption will be that this module must be in a node_modules folder. Node will start it's search by firstly appending node_module to current directory of the requiring module(file) which for example might be $HOME/projects/sample-node-app/node_modules/utility.js (where $HOME is a short cut environmental variable to the users home), if the file is not found there Node moves it's search to the parent directory; $HOME/projects/node_modules/utility.js. If the module is also not found, Node keeps moving up the parent directory till it gets to the root directory of the file system and if the module is still not found, Node throws an error stating that it could not find the required module. An important point to note here is that Node will not append a /node_modules directory to any directory that already has a node_modules folder created in it or a path that ends with /node_modules. Node will instead jump into the existing node_module directory to look for the required module.

This is basically one of the reason a node_modules directory is created in the root of your project directory when you install third party modules locally from npm or yarn.

Conclusion

Node's implementation of a module system is really unique especially the way Node handles module scoping (thanks to the Module Wrapper function). Now package creators can name objects the way they choose without worrying about naming clashes, Package managers can utilize the power of node_modules for delivering the packages your Node application depends on and also as a Node developer you can worry less about this trivial matters and focus your energy on writing maintainable code.

I strongly recommend you experiment with the idea your just absorbed and also dig into the API documentation for a deeper dive into Node module system.

LEARNING: A developers perspective

Prosper Opara — Fri, 13 Mar 2020 15:18:46 +0000

Growing is the ultimate aim of every developer. Growing to understand how tools or systems work under the hood, going beyond the basics into deeper things or having a holistic understanding of the technologies you associate yourself which is truly the ultimate goal. The aim (to grow) is pretty much known by a lot of persons but the "HOW" of going about growing is what a lot of persons either don't fully understand, unknowingly ignores or totally are ignorant about. What is the best way to approach learning as a developer? How can we optimize learning to get the best possible results to help us grow, move to the next level of expertise and solve complex problems?

Over the years, computer scientist and engineers have solved software related problems repeatedly and have come up with series of solutions for solving these problems. Some have gone further to organize their approach to solving this reoccurring problems and these solutions have come to be termed design patterns - an approach to solving particular problems. In similar light, learning is a common "problem" that everyone must "solve" and luckily for us (everyone trying to gain expertise) the road from novice to expert is one that has being journeyed by many who are today experts in the field and even studied by some. Learning over the years has being deconstructed and we now have a road map that has proven to be reliable for learning new skills and growing to become an expert. This article is an attempt to share some of the insights discovered on how best to learn and I trust you're equally excited as I was writing this piece to discover how to go about learning as a developer

Dreyfus Model

We primarily learn to be more knowledgeable in specific skill sets or fields; language specific skills (JavaScript, ruby, react, rails, MySQL), fields (full-stack development, front-end development, developer advocacy, cloud engineering etc). It's a great thing to be able to measure learning in order to know how much we are really growing and advancing to the level of expertise.

The Dreyfus model for skill acquisition is a model developed by the Dreyfus brothers (Staurt and Hubert Dreyfus) and it breaks down the journey from novice to expertise for any skill set into 5 levels;

Novice
Advanced Beginners
Competent
Proficients
Experts

Novice

The Novice is the first step for the model. A novice is a skill practitioner that is just starting out and has very little or No experience actively practicing a particular skill, the most import trait of a novice is that they are experience deficient (obviously because they are just starting out). To be successful at practicing the skill at which they are novices, the novice requires specific rules to follow showing them what to do to get things done.

Advanced Beginners

An advanced beginner is a skill practitioner that has some experience practicing a particular skill. They have gone from NO experience by building the foundation(requisite knowledge) required for the skill and also have some practice time working actively with the skill and when discussion regarding the skill arises they wont feel totally lost because they know a lot the basics. But this practitioners do not know how to troubleshoot errors or problems that arise from practicing the skill mostly because they've being dependent on rules (they just got off the novice phase, woof) and still depend a bit on those rules to get work done.

Competent

Competent practitioners of a skill are able to troubleshoot unlike the advanced beginners because they have more practice time, they have learnt how to solve specific problems and are able to recognize the patterns around these problems. When they encounter the same or similar problems they know what to do (they draw from their past experience to troubleshoot). They have more experience than the preceding phase (Advanced Beginner) on the Dreyfus model.

Proficients

Proficient practitioners can self correct, they are closer to the expert mark, they have outgrown the hard rules for getting work done and work with patterns or principles - also called maxims. Because they have a lot of practice time they make problem solving decisions very quickly which in turn means they get things done pretty much quickly.

Experts

This is the last stage of the Dreyfus model and I personally love to call experts practitioners "the boss". This folks are persons able to work from intuition (the ability to understand something instinctively, without the need for conscious reasoning). They have sufficient funds in their experience bank and they can withdraw unconsciously from this bank when making design decisions or problem solving. They are not limited by rules and really do not work well with rules. Their most important trait is working from intuition (which happens to be the test for expertise).

The most prominent difference between the Dreyfus skill practitioners is Experience. Experience makes the difference in productivity, reasoning, approach to problem solving and delivery. Experience can not be bought or installed (like we install software), rather experience is something gained as a reward for active practice of a particular skill.

We gain experience by many hours of deliberately committing to a particular skill and overcoming boisterous problems that arise from your limited knowledge of the skill.

Learn By Doing (Deliberate Practice)

Practicing is a superior form of learning because it get's you to DO. It is only by doing that the required muscle memory is built, confidence to approach bugs established and the speed needed to deliver projects within the skill domain guaranteed. What are the best ways to approach learning by doing?

Be Purposeful -
Being purposely means, you have an end goal for doing something.
Be consistent -
Consistency is key to building expertise. Repeatedly visiting the gym at close intervals (daily, weekly) guarantees muscle building. Also consistently practicing at close intervals ensures that you solidify existing knowledge and build new knowledge base that advance your holistic understanding of any skill you're trying to build expertise around. Be intentionally consistent, and overtime you'd discover consistency becomes a part of you.
Be Focused -
The biggest threat to practicing and learning generally is distraction. We already live in a world filled with a lot of things begging for our attention but we have limited attention and can only focus on a few things at a time. To succeed with your learning plans, you have to create a system that encourages unbroken concentration and that affords you the opportunity to learn deeply. Some ideas;
- Set out time daily for which you dedicate to learning
- Create a spot, zone where you can lock yourself and be free from disturbance
- Block out notifications from social apps (Emails, twitter, Facebook etc)
Get feedback -

Feedback are important for measuring progress and discovering error in judgement. Some ideas for getting feedback is to have someone review the output of the practice time (for instance your project code), or work on a project with someone more knowledgeable than you are. These way you get insights into your mistakes and learn very quickly things you don't know.

The idea is to plunge yourself into deliberately practicing the skill consistently and overtime your practice time will begin to transcend into expertise, you'd begin to think differently and approach problems differently as you advance through the different Dreyfus stages. Gaining experience will only remain a heart cry if we do not to go forth and intentionally learn what we need to gain the desired experience.

Lastly, take some step back to access your current abilities with any particular skill you want to gain experience in. Using the Dreyfus model determine where you on the ladder, identify the required time commitment each day you'd be willing to commit, also identify the learning resource from where you can gather information on the skill and make the ultimate decision to be committed and consistent with the life changing activity of practicing.

If you love this article, I'd love to get your feedback in the comment section and any feedback(thought) you have regarding the topic.

P.S: Here is a link to slides I created on this topic.

Understanding Node Error [ERR_HTTP_HEADERS_SENT]

Prosper Opara — Tue, 03 Dec 2019 04:22:17 +0000

Chances are as a NodeJS developer you've encountered this runtime error:
[ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

You must have written the perfect code and expect a flawless code excution (i wish 😆), but here is this runtime error shattering your expectations and definitely keeping you from moving on to other concerns of your project. Now you begin to ask yourself why you even choose this career path or even why you picked up node in the first place.

SPOILER ALERT: I have run into this runtime error couple times while building restful API's and this is an effort to document what i learnt about this error, shorten your debugging time, help you understand why this error is thrown and finally how best handle it.

Uncovering the mystry

Error [ERR_HTTP_HEADERS_SENT] is an interesting error that is fired up when a server tries to send more than one response to a client. What this means is that for a given client request the server previously sent a response (either a success responsei with the resource requested or error response for a bad request) back to the client and now is unexpectedly trying to send another response :(

[Case Study] talk is cheap

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

app.post('/test', (req, res) => {
  if (!req.body.name) {
    res.status(400).json({
      status: 'error',
      error: 'req body cannot be empty',
    });
  }

  res.status(200).json({
    status: 'succes',
    data: req.body,
  })
});
app.listen(4000, () => {
  console.log('Server live');
});

This case study is based on a simple POST request to a /test route using the express framework.

By design the server should send back a 400(Bad request) JSON response to the client if a request does not have a body(req.body) added to the request to ther server from the client (handled with the javascript if statement) and lastly if the request comes with a body a 200(OK) JSON respresention of the request body is sent back to the client as response . The expectation is that the request handler should do what we've programmed it to do (return response to the client). The request handler(the anononymous function that takes the req & res arguements) is simply a javascript function and this means that the javascript engine(v8 in nodes case) keeps executing the code beyond the if statement when there is no explicit instruction for it to exit the function.

Looking at the code logic you'd aggree that the request handler function has no explicit command for exiting the function in a situation a reqest body is not found and the error response is sent back to the client, therefore after the if statement condition has being resolved the server tries to send another response to the client :( and this is where the error kicks in.

The request handler function already sent a response to the client using the res.json() method which automatically sets the response header(every response to the client should contain headers) for the response(in this case theContent-Type to application/json). Node picks up this atrocity and our server crashes because express under the hood is attempting to set the response header for this second response, hence the error message:

Cannot set headers after they are sent to the client

Fixing the error

The simple fix for this error is to add javascript return statement to the response being sent from the if conditional to ensure that the request handler function exits(terminate) excuting code with the function once a response has being sent to the client.

The description for the return statement on MDN states

When a return statement is used in a function body, the execution of the function is stopped. If specified, a given value is returned to the function caller.

With this in mind, our request handler function should be modified to include a return statement like so:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

app.post('/test', (req, res) => {
  if (!req.body.name) {
    return res.status(400).json({
      status: 'error',
      error: 'req body cannot be empty',
    });
  }

  res.status(200).json({
    status: 'succes',
    data: req.body,
  })
});
app.listen(4000, () => {
  console.log('Server live');
});

When a client makes a server request to this endpoint with or without a request body to the server request, the server sends the correct response and stop the function execution as necessary.

You'd be tempted to ask why the last server response has no return statement sending it to the client?, well in this case there is really no need to return it since there is no code further down the function to be excuted so it means the the request handler stops excuting since it has comee to the end of the road.

The point is that Javascript return statement exits the request handler function (to prevent further code execution) and sends a response object back to the client.

Hopefully, you now have a better understanding of why this error message is fired and how to resolve it 😄, and i hope by documenting this error and it's fix I shorten your debugging time and helped you understand why this error is fired.

I have a GitHub repository for the failing code and passing code, you can clone and play with the code by trying out some other use case (hopefully can send a PR for your use case).

Thanks for reading

Elixir is functional Ruby?

Prosper Opara — Mon, 10 Jun 2019 13:34:26 +0000

"Elixir is functional Ruby"

I just started digging into elixir and ecosystem and can't get this description for elixir off my head. So I decided to start a discussion here, so I can get opinions of experienced Ruby developers writing elixir, and also elixir devs.

My reasons

syntactic similarities
Elixir like Ruby has a MVC web applications framework phenoix

What do we think about this?

Reinventing ruby flatten method

Prosper Opara — Fri, 17 May 2019 10:30:43 +0000

Introduction

I actively started re-learning ruby by solving challenge exercise from exercism and I thought I should write about the challenges I found a bit difficult and overcame. You can check out my profile on exercsim to see my progress.

Problem statement

The Ruby Array flatten method takes any deeply nested array (Multi-dimensional) and returns a non nested array using recursion. For example (open IRB[Interactive Ruby] in your terminal and run):

[1,[[3,4,6],3,7],5,1,[1,2,3],5].flatten
# => [1, 3, 4, 6, 3, 7, 5, 1, 1, 2, 3, 5]

This challenge exercise requires that I write my personal implementation of the method, without using the method.

My Implementation

My algorithm for solving this problem looked like:

Create a FlattenArray class with a flatten class method
The class method accepts a single array parameter arr
Create an emepty array flattened to hold the elements of the new array.
Loop through the array argument arr
Push each elements into flattened
Recursively push deeply nested array into flattened
Return the one-dimensional flattened array

Classes in Ruby are created by using the class keyword, a meaningful class name and the end keyword.

class FlattenArray
end

From my algorithm, the class has a class method flattenedand accepts a single parameter/argument. In Ruby, the self keyword is used for creating class methods (class methods are methods that belong to the class it was created in and not instances (objects) of the class).

class FlattenArray
  def self.flatten(array)
  end
end

The next steps include;

Creating the flattened array
Loop through the arr parameter
Push arr elements into flattened array

For looping through the array parameter, we'd utilize the each iterator (this loops through all the elements within an array, and allows you do manipulate the elements within a code block, and it additionally returns the original Enumerator without mutating it). Pushing the elements of arr into the flattened array possible with the use of << or .push method, but I'd be sticking with << (personal preference).

class FlattenArray
  def self.flatten(arr)
    flattened = []
    arr.each do |element|
      flattened << element
    end
  end
end

The next step involves adding a call to the flatten method within itself(this is called recursion) tp keep us from unnecessary nested iterations in cases of multi-dimensional array arguments.

class FlattenArray
  def self.flatten(arr)
    flattened = []
    arr.each do |element|
      if element.is_a? Array
        flattened.concat(flatten(element))
      else
        flattened << element
      end
    end
    flattened
  end
end

My initial challenge was using << to push into the flattened array, which actually push an array object into flattened. Using .concat method on the other hand appends each element from the iteration into flattened instead of pushing an array object. Testing manually to check if this implemetatio works

print FlattenArray::flatten [1,2,3,[[3,4],6,6]]

Omitting the parenthesis in a method call is allowable in ruby and correct ruby syntax. Also, I personally enjoy calling functions without parenthesis :)

Testing

Another feature I love about learning on exercism is that you'd solve the exercises using Test Driven Development(TDD) methodology and it's really cool I must say. Writing Test Suites in ruby requires that you have minitest gem installed, you can install minitest using the gem install command:

$ gem install minitest

Create a flatten_test.rb file in the same directory with flatten.rb (File for our flatten implementation code), in the newly created file require the minitest gem, require flatten.rb (using require_relative) and copy the following Test Suite:

require 'minitest/autorun'
require 'minitest/pride'
require_relative 'flatten_array'

# Common test data version: 1.2.0 0290376
class FlattenArrayTest < Minitest::Test
  def test_no_nesting
    # skip
    flat_array = FlattenArray.flatten([0, 1, 2])
    assert_equal [0, 1, 2], flat_array
  end

  def test_flattens_array_with_just_integers_present
    # skip
    flat_array = FlattenArray.flatten([1, [2, 3, 4, 5, 6, 7], 8])
    assert_equal [1, 2, 3, 4, 5, 6, 7, 8], flat_array
  end

  def test_5_level_nesting
    # skip
    flat_array = FlattenArray.flatten([0, 2, [[2, 3], 8, 100, 4, [[[50]]]], -2])
    assert_equal [0, 2, 2, 3, 8, 100, 4, 50, -2], flat_array
  end

  def test_6_level_nesting
    # skip
    flat_array = FlattenArray.flatten([1, [2, [[3]], [4, [[5]]], 6, 7], 8])
    assert_equal [1, 2, 3, 4, 5, 6, 7, 8], flat_array
  end

Make sure to un-comment the skip keyword within each test to enable the test code run and avoid skipping that test case. You can now run the command below in terminal:

$ ruby flatten_test.rb

To learn more about writing test in ruby, read intro to TDD

Wrap up

Exercism is an amazing tool for learning any programming language of your choice and also get mentorship while working on your solution. Exercism mentors don't hand you the fish, rather they give you the fish hook and tell you the coordinates of the fish, this totally makes fishing fun, research oriented and fast.

If you followed the code implementation from beginning to end, you must have discovered how awesome the Ruby programming language is and how lienient the syntax is, Ruby is one language i really enjoy writing and has an amazing ecosystem

The Mobile Developer

Prosper Opara — Thu, 31 Jan 2019 12:10:09 +0000

I started learning to code with my mobile device (Android) 2017 and it was really a defining moment for my journey as a web developer (I'm gradually transitioning to software development).

I was passionate enough to begin learning to code with my mobile device against all odds and discomfort that accompanys learning to code with a mobile device.

Over the years I have noticed most of the beginners reaching out to me with questions on how to learn to code, like me when I started, do not own a laptop or desktop computer to learn with. So I'd always motivate them to get started with their mobile device.

But i decided to take it a little farther by writing a book teaching beginners how to start coding by Learning web development. I'm almost done writing the book and created a waiting list for readers that will love to read the book when it's finally out.

What to expect

Basic and in-depth explanations of web technologies like HTML, CSS and JavaScript
Sample codes to build your muscles memory with
Recipes for learning to code
Motivation to continue your journey to becoming the beat Developer you can become.

Here is the link to the waiting list

GIT BACKEND (BEHIND THE SCENE)

Prosper Opara — Wed, 07 Nov 2018 11:39:40 +0000

Introduction

I have been digging into Git internals to really understand the tool beyond the basics and gain an indepth understanding of how git does what it's known for -- Version Control. In this article I intend to share with you my discoveries by exposing git internals in simple language as much as possible for any Git user to comprehend the core concepts behind this amazing tool.

Important: This article is not an introduction to Git material but it's intended to show you how Git is able to keep track of the various versions of your project files. If you're new to Git, follow this Git documentation to get to read the documentation or download progit to get an awesome explanation of Git basic's, then you can comeback to read this article for a deeper dive into Git.

GIT FRONT-END (What you already know)

You surely know by now that Git at it's core is a version control system (VCS) used by people(Now i did not say developers, anyone can use git for instance I used git to keep track of the various versions of this article as i wrote and made changes before publishing) to keep track of the different versions/iteratons of their project files(documents).

Before Git numerous VCS existed e.g CVS, subversion, perforce and they are all categorized under the Central version control system (CVCS) which means that all the versioned files are stored in one database and every other person(client) working with/on that project will have to connect to the central database (All commits goes into this singular database).

Git on the other hand falls under the category of Distributed Version Control System (DVCS), which means that there are no central database where people have to push or save files to. Every Git user computer serves as a database for the files, it means that everyone working on the project has the whole history of the project living in their local machine as at the time they cloned the project. So where does this database sit in your computer? i'm pretty sure if you check your project directory were you use Git you will see only your project's sub-directories and files. I'd be exposing this Git magic inabit

GIT INTERNALS

What makes a project directory a git repository is the hidden .git directory living in that project directory. The .git folder houses the Git Object database and this is where the Git magic happens. This folder is intentionally hidden to avoid stories that touches the heart (file mutaion, mistakes) and to maintain Git integrity. If you're a windows geek, you can view this folder by enabling show hidden files feature, follow this tutorial if you have no clue how to do this, if you're a mac user, here is your link.

The .git directory houses some other directories and files and it looks like this:

- .git/
  - hooks
  - info/
    - exclude
  - objects/
    - info
    - pack
  - refs/
    - heads
    - tags
  - config
  - description
  - HEAD

Git is able to effectively manage different versions of your project because it is designed to track file contents and store's the tracked contents as Objects in an Object database.

OBJECTS DIRECTORY

Git works as a content addressable filesystem which means that Git stores it's files(objects) using a key:value pair format, where the key is the address where Git stores the content(refered to as objects) which is the value.

Git uses SHA-1(Secure Hash Algorithm) to generate a unique key for every object is stores. The SHA-1 generates 40 character long alpha-numeric character to reference the objects stored in the object database eg f7de3a39b026386f8f826bc230a112ae792ec035

This object directory is the location were Git stores every object i.e the object directory is the object database.

There are three major object types stored by Git in the object database(Object directory), they are:

Blobs Object - Git stores file contents as blobs. It is important to note that blobs do not include the file name or the file mode, rather they are strictly contents from the files Git is versioning. The SHA-1 serves as the filename(key) for the blob contents(value).
Tree Object - Tree objects are like directories, they contain blob objects and other tree objects. Tree objects are snapshots of your working directory at the time of your last commit.
Commit Object - Commit objects basically stores details of the last commit of the currently checked out branch (this is referenced as parent), a pointer to the current tree object for the commit, the name of the committer, and the actual commit message.

Git object types are organized in sub-directories git automatically creates when trying to store the objects. The sub-directory are named using the first two characters of the SHA-1, and the object are stored in a file named using the remaining 38 hash keys.

  Objects/
    f7/
      de3a39b026386f8f826bc230a112ae792ec035

GIT IN ACTION

In this section we will be doing some versioning and seeing for ourself how Git objects are created and stored in the object database, i belive everything will begin to make more sense by the end of this section.

I will be working with git bash for the demostrations.

Open up your terminal/cmd and Cd into any directory of your choice, and type the command $ git init to create an empty Git Repository. In my case i got the message Initialized empty Git repository in C:/Users/opara prosper/Desktop/GitHub Projects/Git-Backend/.git/ you would surely get a message similar but with a different directory.
Open up a new terminal and cd into the project directory and place both terminals side by side, this will enable us keep track of what is happening inside the .git directory.

Create a new file example.txt to contain Hello world as it's content - you can do this from your terminal by typing the following command cat > example.txt then type the content on the new line, save and exit with CTRL D
On the second terminal you opened type this command find .git/objects -type f you will not get any response because there is nothing in the objects directory but that will soon change.
Now on the first terminal we initially opened, type in the command git add example.txt to move the file to the staging area.
Navigate back to the second terminal you opened and type find .git/objects -type f. Now you'd get a response that looks like this .git/objects/70/c379b63ffa0795fdbfbc128e5a2818397b7ef8 your's will be different because SHA-1 creates random keys for git objects. This means an object has been added to Git's object database but we don't know what that is yet. If you type git cat-file -p 70c379b63ffa0795fdbfbc128e5a2818397b7ef8 you'd notice hello world is returned, but the file name example.txt is no where to be found, this reinforces my claim of Git being a content tracker.

When you ran the git add example.txt command, Git grabbed the contents within eample.txt and compressed it into the git object database and gave it a unique identifier 70c379b63ffa0795fdbfbc128e5a2818397b7ef8 using SHA-1. To check the type of object this is type the following command git cat-file -t 70c379b63ffa0795fdbfbc128e5a2818397b7ef8, in our case a blob is returned meaning that the newly created object is a blob object.

Going back to our first terminal, type the following command git commit -m "I created an example.txt file" to commit your changes(i.e to move your changes from the staging area into the .git directory).
Naviagate back to the second terminal and type find .git/objects -type f, this time you'd notice that two new objects have been added to the objects directory, in my case;

.git/objects/70/c379b63ffa0795fdbfbc128e5a2818397b7ef8
.git/objects/7a/68edc879868601bf427c8c2238bbc8752c33b3
.git/objects/f2/9f2741b30ecc1529da7dbae4aff9974b69e271

Lets inspect these objects, grab the any of the object and type git cat-file -t 7a68edc879868601bf427c8c2238bbc8752c33b3. In my case commit was returned and this means that this object is a commit object, to view this object chnage the -t flag from our previous command to -p i.e git cat-file -p 7a68edc879868601bf427c8c2238bbc8752c33b3 you'd get a response that looks like this;

tree f29f2741b30ecc1529da7dbae4aff9974b69e271
author OPARA-PROSPER <oparaprosper79@gmail.com> 1541583214 +0100
committer OPARA-PROSPER <oparaprosper79@gmail.com> 1541583214 +0100

I created an example.txt file

Let's look closely at what this means. The first line tree f29f2741b30ecc1529da7dbae4aff9974b69e271 is a pointer to the second object that was created when we committed last (this object is always a tree object), the second and third line contains information about who made the commit and the last line contains the commit message.

Now we will inspect the second object which was created alongside the commit using git cat-file -t f29f2741b30ecc1529da7dbae4aff9974b69e271. A tree response is returned which means that the object is a tree, we can view the contents of this tree object by changing the -t flag to -p i.e git cat-file -p f29f2741b30ecc1529da7dbae4aff9974b69e271, this will return a response that looks like this;

100644 blob 70c379b63ffa0795fdbfbc128e5a2818397b7ef8    example.txt

Recall from my explanation that tree objects are like directories that contain blobs and other trees and also they are snapshots of the current state of your working directory at the time of your last commit. The only file in our working directory at the time we last commited is the example.txt file and thats what our tree object contains but this time its the blob object that was created when we ran the git add command to stage our changes. This is so because Git does not track files but contents.

Our tree object contain information on the file mode (100644 which means this is a normal file), the object type, the SHA-1 key and the file name from which the contents where extracted from.

WRAP UP

The more changes you make, stage and commit the more new blobs, tree and commit objects will be created and referenced in the objects database.

In conclusion, this is virtually how Git works under the hood to keep track of the changes we make to our project files.

World Wide Web

Prosper Opara — Mon, 22 Oct 2018 08:56:11 +0000

I’m opara prosper, and i have been building stuffs for the web for some time now…

What i really love about the web is its ACCESSIBILITY and UNIVERSALITY. The web is for all people’s of the world. The web knows no bounds, doesn't restrict anyone from getting information they desire and It really help’s in promoting my personal mantra “Human knowledge is for everyone”. It is not limited by OS, hardware type or any of the accessibility issues other platforms face. Once you have a web browser you can visit the web and access life changing information's. The mare fact of building something that the world can see is really intriguing, I guess that’s why it’s rightly called the world wide web(WWW)

Knowing that the web is accessible to all people, I look forward to improving my skill of building web applications with great user experience so that people can also enjoy their visit to the web. I’m particularly interested in building Interactive web applications, because it accounts a great deal for good user experience on the web.

Moving forward, I’d love to write more and also speak more about:

Web technologies
Web accessibility
User experience focused more around building interactive web applications.

I’d need to go back to work now to be able to achieve this :)

CSS VARIABLE SCOPE

Prosper Opara — Mon, 03 Sep 2018 16:56:00 +0000

I think removing the native cascading effect of css variables will be awesome.

variables should be accessible to other selectors not within the scope of the :root element.

more like:

{
--variable_name: value;
}

selector{
    property: var(--variable_name);
}

code sample:

index.html

<div class="question">
    <h1>questions</H1>

    <ul>
        <li>Whats your name</li>
    </ul>
<div>

<div class="greet">
    <p>hello world</p>
</div>

index.css

/*
proposed css variable declaration 
*/
{
 --bg_color: #111;
--font_color: #fff;
}

.question{
    background-color: var(--bg_color);
    color: var(--font_color);
}

/*
   The greet class is on a different scope from the question class, but still shares the varible values with .question
*/
.greet{
    background-color: var(--bg_color);
    color: var(--font_color);
}

This are my thoughts though, I'd love to hear your thoughts about this too..

BEGINNERS GUIDE TO JAVASCRIPT MODULES & WEBPACK

Prosper Opara — Thu, 19 Apr 2018 13:44:49 +0000

Imagine you just arrived Lagos in Nigeria, and you want to get to your hotel from the the airport so you can relax after the long trip. Now Lagos is a large city made up of many other areas. To get to your hotel you need to first locate the town where the hotel is, also you need to know the street and building number of the hotel. If Lagos was not structured in different pieces comprising of town’s, street, building numbering it will be quite hard to transit the city. This Structure is MODULAR in nature( i.e having different pieces that can be connected to build up something ).

JavaScript modules is a programming style that is based on the modular programming concept. Modular programming is a concept if understood can make life really easy for developers. Webpack is a tool that helps you manage your JavaScript modules and bundles these modules into one JavaScript file. Having a basic understanding of modules is a prerequisite for understanding what webpack is and what it can do for you as a developer, and that is what i intend to do with this article(give you a basic introduction to JavaScript modules). So let’s get started!

Modular programming is a concept that advocates that you break up your codes into several pieces(known as MODULES) that can can used in other part of your code. So instead of having one large JavaScript file containing all the code for your project, you have pieces(modules) of codes that have different roles they play in your project and can be IMPORTED into other modules that needs them to function. So the the idea is that you import modules into other modules that are dependent on them, and also your make modules exportable so that they can be imported into any modules that require them. The keyword here are IMPORT and EXPORT.

Now what is JavaScript modules?

JavaScript modules are just different pieces of JavaScript codes that perform different functions and can be imported when required into other modules.

Usually, the relevance of JavaScript modules is less significant when you have a little codebase but when codebase begins to grow into thousands and it starts becoming hard to keep track of the various functionalities of your code then you will see the need to write modular codes.

WHY SHOULD I WRITE MODULAR CODES?

Modular Programming makes debugging less stressful.
Modular programming helps your create reusable pieces of code that can be used in future projects without having to write those code again or copy them from your previous project.
Modular programming makes code refactoring really easy! (just imagine refactoring a single JS file with a codebase above 1000 LOC!!!!)
Modular programming keeps you from worrying about function scope and namespace. Because function names and scope becomes unique to the module they belong to.

That’s the basics of what modular programming and JavaScript is and what it can do for you.

WEBPACK

Now have a basic understanding of what JavaScript modules are and why they are important, but how do you manage this modules? This is where webpack comes into the picture.

webpack at it’s core is simply a module bundler.
Module bundling involves webpack getting all your JavaScript modules and throwing them into one JavaScript file(that’s the bundling process!).

webpack does this by creating a dependency graph for your project. The dependency graph keeps track of your project modules(different pieces) and their various dependencies(the other piece of your project code) and bundles them into one file(usually named bundle.js). This way webpack can easily keep track of your project modules and manages them for you.

webpack has some other cool features aside bundling your JavaScript modules. webpack also helps you use the latest JavaScript features even when they are not supported by browsers(it achieves this by integrating babel-loaders into webpack configuration file). So that’s what webpack is, but to use webpack in project you need to understand some webpack core concepts.

WEBPACK CORE CONCEPTS

This is no substitute to the original webpack core concepts found in the webpack documentation. So make sure to check it out.

ENTRY

Entry is simply the point(the first JavaScript module) where webpack starts bundling your modules. View entry as the main door into a house, there are other doors in the house but to enter the house you have to use the main door.

The entry is usually a JavaScript file where all the other modules and their various dependencies converge. webpack starts building the dependency graph from this file and locates the other dependencies of the other modules attached to the entry file.

OUTPUT

Output is a path to a file where webpack throws all the bundled modules into.

It will be good you know that the bundled modules is what is served to the browser and that is what you should add to your html file.

bundle.js should be included in the script tag of your html file.

LOADERS

Remember when i said webpack allows you to use language updated features that are not yet supported by browsers? loaders give webpack that superpower.

loaders tells webpack how to handle or interact with files that are not JavaScript. Webpack is built with JavaScript and understands only JavaScript, but our project contains other files that are not JavaScript! loaders are there to solve this problem. See below for a few list of what loaders can help you do with webpack;

loaders transforms files that are not JavaScript into JavaScript.
loaders ( style-loaders) allows you to import your css styles into your JavaScript file which will ordinarily not be possible.
loaders also helps your treat this none JavaScript files as modules too. the css-loaders allows you to write modular css for parts of your html file. Now instead of having one large css file file you can now have several modular css files for particular parts of your html code, also instead of linking the css link into your html file, style-loaders allows you to import this styles into your main.js file(the webpack entry file).
Loaders also allow you to use updated language features that are not supported in web browsers. Babel-loaders gives you the liberty to use the ES6 import and export(which supports modular programming in JavaScript) keyword that is yet to be supported in old browser version like IE, chrome version 50 below.

PLUGINS

plugins at its core basically add more functionality to your webpack compilation process. plugins helps you add custom built functionalities the webpack build process. Its more like plugins give webpack more superpowers during its build process.

So that’s the basics of what modular programming, JavaScript modules, and webpack is. I hope you enjoyed it and now at least grasp all the concepts that were explained.

In a bid not to make this boring and bulky, I decided to make this blog post modular, so I would be creating another module on how to include and configure webpack for your projects. See you in the next module.

Forem: Prosper Opara

Junior Developer Check List

Node.js Module System

The Module System Architecture

module

module.exports

exports

require

How Module loading works

Note onNode_modules

Conclusion

LEARNING: A developers perspective

Dreyfus Model

Novice

Advanced Beginners

Competent

Proficients

Experts

Learn By Doing (Deliberate Practice)

Understanding Node Error [ERR_HTTP_HEADERS_SENT]

Uncovering the mystry

[Case Study] talk is cheap

Fixing the error

Elixir is functional Ruby?

Reinventing ruby flatten method

Introduction

Problem statement

My Implementation

Testing

Wrap up

The Mobile Developer

What to expect

GIT BACKEND (BEHIND THE SCENE)

Introduction

GIT FRONT-END (What you already know)

GIT INTERNALS

OBJECTS DIRECTORY

GIT IN ACTION

WRAP UP

World Wide Web

CSS VARIABLE SCOPE

BEGINNERS GUIDE TO JAVASCRIPT MODULES & WEBPACK

WHY SHOULD I WRITE MODULAR CODES?

WEBPACK

WEBPACK CORE CONCEPTS

ENTRY

OUTPUT

LOADERS

PLUGINS

Note on`Node_modules`