DEV Community: JeffUbayi

Study rules every Software Developer should know about

JeffUbayi — Thu, 17 Dec 2020 07:52:38 +0000

I recently changed jobs, and in this new company we are working with a different tech stack than I was used to.

I had to quickly learn the new technologies and it was a challenge.

Being a self-taught programmer, I already knew what I had to do and how to learn efficiently and quickly.

In this post, I will go over ten rules that I follow whenever I have to learn something new.

1.Recall what you’ve just learned

After going through a chapter or coding exercise, do something else and remember the main ideas of what you learned.
Try recalling them when you are doing mundane activities like doing the dishes, going out to the store, or taking a shower.

The ability to recall new things you learned will help you cement them in your mind much more easily.

2.Actually write the code

Imagine you are watching an awesome Laravel tutorial on YouTube.

Now you’re already 2 hours in and can’t remember how the author got the database connection up and running.

Now you have to go back to that specific section and re-watch it.

What a waste of time!

Write out the code as you go along with the tutorial you are watching or reading. If you cannot keep up with the pace, press pause, solve the issue or coding challenge, and then resume the video.

3.Chunk the ideas and problems

The idea of chunking is to understand and practice with an idea or solution to a problem to the point where you can recall it in a split second.

Once you have learned that new programming concept, take some time to repeat it. Imagine a song about it and try to sing it in your mind over and over again.

The information will turn into a chunk and you will be able to make a connection and pull it up whenever you want.

4.Train your mind like you would train your body

If you want to build muscle, you will need to train your body a little bit every day.
But you wouldn’t want to train just one muscle group 7 days a week. It will not grow as much as you would like to. Muscles need time to grow. The tissues need time to regenerate and grow in mass.

So one solution is to split your workout into muscle groups. On day one you train legs and abs, day two the chest, day three the back, and day four maybe the arms.

That’s what you should do when you learn.

Spread out your learning a little every day, just like a bodybuilder. The brain is like a muscle – it can handle only a limited amount of exercise on one subject at a time.

Try to split your learning routine into something similar to muscle groups:
– Database management day (SQL/NoSQL)
– REST API day
– Web Design day
– Functional JavaScript day

5.Mix up different problem-solving techniques

There is no one single way of solving a problem, that’s for sure. When you have a task and your way of solving the problem doesn’t seem to work very well, try a different approach.

Mix things up and see if you can come up with multiple solutions.

After every solution you have implemented, go over your errors and make sure you understand why you made them. Then, work on improving the code.

6.Take breaks

From my experience, it is common to be unable to solve problems or grasp concepts the first time you encounter them.

Sometimes you get frustrated that you got stuck on a problem for so long and it seems you cannot figure a way out. This is the ideal moment when you need to take a break.

Let your mind relax for a while. You’ll find out that sometimes the solution to your problems comes in your sleep, or when taking a bath.

This is because a part of your mind is working in the background, figuring out things you might not be able to when you’re focused.

7.Explain Like I’m Five

Have you ever heard of this concept Explain Like I’m Five?
There’s even a subreddit for it. And it’s a pretty neat mental exercise.

Whenever you are struggling with a concept, ask yourself, how can you explain this so a 5-year-old could understand it?

This exercise will make you think about how to simplify an answer using analogies.
For example, how would you describe a database to a child?

I would say that a database is like a bucket or a toy box.

You organize your apartment or house by placing all the toys inside the box. Otherwise, the toys will be all over the place and you won’t be able to find them easily when you need them.

The database solves all of these issues.

8.Maintain your focus

I bet you’ve heard this a thousand times before. This is a topic quite full of opinions and advice, some more unusual than others.

When working on a problem, try to focus on that task so you’re as efficient as possible.
It’s up to you to figure out how to focus on something and maintain it for a while.

What I’ve found that works for me so far is to turn off all interrupting beeps, alarms, and notifications on my phone and computer.

Besides this, I like listening to music that helps me focus. I found that I focus very well while listening to music that has no lyrics, like post-rock.

I’ve created a special playlist that I listen to when I’m programming or stargazing.
Check it out here.

9.Do the hardest things first

Take advantage of a rested mind and do the hardest thing earliest in the day.

There are some good reasons to do it this way.

You will feel better during the day after getting rid of that unpleasant thing first.

Harder things take more effort. By doing the hardest task earliest in the day, it will help make sure you’ve got enough time to complete it.

Also, this makes it less likely that you’ll postpone the hardest task for the next day.

10.Motivate yourself

Sometimes you feel like the work you are putting in is not getting you anywhere.

This happens to everyone from time to time. You are not to blame, honestly.

If you want to stay motivated, make yourself feel like you are making progress.

No matter what’s happening in your life, always have one thing you’re making progress with, so you feel good about it and yourself.

For example, if you want to learn JavaScript, make it your number one priority.

Every day you should read a few pages of your favorite JavaScript book or work on personal and/or open-source projects that rely on JavaScript.

If you want to read more tips on how to keep yourself motivated as a software developer, check out this article.

conclusion

Learning software development is always a journey and not a destination.There is alot of tech stacks being used by different tech companies, thus you always have to keep up to date.
I hope this post helped out in some cases where you have to learn to overcome obstacles in programming.
How many of the above rules you already follow?

React : Painting a Mental Model

JeffUbayi — Sat, 18 Jul 2020 07:12:15 +0000

Whether you’ve been working with React for years or are just starting, having a useful mental model is, in my opinion, the fastest way to feel confident working with it.
By having a good mental model you can intuitively understand complex problems and device solutions much faster than if you had to find a solution with a step-by-step process.

Disclaimer: This article is written by a beginner trying to comb through new concepts he just learned. Also available on my Blog where I explain the mental models that helped me solve problems and tame complexity.

why Are Mental Models Important?

When I started building websites,I had a hard time understanding how it all worked. Building blog sites with WordPress was easy, but I had no idea about hosting, servers, DNS, certificates, and much more.

As I read articles and tried stuff out, I started to grasp the system, to get glimpses into how it all worked, until eventually it “clicked” and I felt comfortable working with it. My mind had built a mental model around this system that I could use to work with it.

If someone had explained it by transferred their mental model to me, I would’ve understood it much faster. Here I’ll explain (and show) the mental models I use with React. It will help you understand React better and make you a better developer.

React Mental Models

React helps us build complex, interactive UIs more easily than ever before. It also encourages us to write code in a certain way, guiding us to create apps that are simpler to navigate and understand.

An abstract model inside a mind looking at the React logo
React itself is a mental model with a simple idea at its core: encapsulate portions of your app that rely on similar logic and UI and React will make sure that portion is always up kept up to date.

Whether you’ve been working with React for years or are just starting, having a clear mental model is the best way to feel confident working with it. So for me to transfer my mental models to you I’ll start from first-principles and build on top of them.

It’s Functions All The Way Down

Let’s start by modeling the basic building blocks of JavaScript and React: functions.

A React component is just a function

Components containing other components are functions calling other functions
Props are the function’s arguments
This is hidden away by JSX, the markup language React uses. Strip away JSX and React is a bunch of functions calling one another. JSX is in itself an applied mental model that makes using React simpler and more intuitive.

Let’s look at each part individually.

A Component Is A Function That Returns JSX

React is used with JSX—JavaScript XML—a way to write what seems as HTML with all of JavaScript’s power. JSX offers a great applied mental model for using nested functions in a way that feels intuitive.

Let’s ignore class components and focus on the far more common functional components. A functional component is a function that behaves exactly like any other JavaScript function. React components always return JSX which is then executed and turned into HTML.

This is what simple JSX looks like:

const Li = props => <li {...props}>{props.children}</li>;

export const RickRoll = () => (
  <div>
    <div className='wrapper'>
      <ul>
        <Li color={'red'}>Never give you up</Li>
      </ul>
    </div>
  </div>
);

Which compiled into pure JavaScript by Babel:

const Li = props => React.createElement('li', props, props.children);

export const RickRoll = () =>
  React.createElement(
    'div',
    null,
    React.createElement(
      'div',
      {
        className: 'wrapper',
      },
      React.createElement(
        'ul',
        null,
        React.createElement(
          Li,
          {
            color: 'red',
          },
          'Never give you up',
        ),
      ),
    ),
  );

If you find this code difficult to follow you’re not alone, and you will understand why the React team decided to use JSX instead.

Now, notice how each component is a function calling another function, and each new component is the third argument for the React.createElement function. Whenever you write a component, it’s useful to keep in mind that it’s a normal JavaScript function.

An important feature of React is that a component can have many children but only one parent. I found this a confusing until I realized it’s the same logic HTML has, where each element must be inside other elements, and can have many children. You can notice this in the code above, where there’s only one parent div containing all the children.

Component’s Props Are The Same As A Function’s Arguments

When using a function we can use arguments to share information with that function. For React components we call these arguments props (funny story, I didn’t realize props is short for properties for a long time).

Under the hood, props behave exactly like function arguments, the differences are that we interact with them through the nicer interface of JSX, and that React gives extra functionality to props such as children.

Creating A Mental Model Around Functions

Using this knowledge let’s craft a mental model to intuitively understand functions!

When I think about a function I imagine it as a box, and that box will do something whenever it’s called. It could return a value or not:

function sum(a, b) {
  return a + b;
}

console.log(sum(10, 20)); // 30

function logSum(a, b) {
  console.log(a + b); // 30
}

Since a component is a fancy function, that makes a component a box as well, with props as the ingredients the box needs to create the output.

When a component is executed it will run whatever logic it has, if any, and evaluate its JSX. Any tags will become HTML and any component will be executed, and the process is repeated until reaching the last component in the chain of children.

Since a component can have many children but only one parent I imagine multiple components as a set of boxes, one inside another. Each box must be contained within a bigger box and can have many smaller boxes inside.

But the mental model of a box representing a component is not complete without understanding how it can interact with other boxes.

How To Think About Closures

Closures are a core concept in JavaScript. They enable complex functionality in the language, they’re super important to understand to have a good mental model around React.

They’re also one of the features newcomers struggle with the most, so instead of explaining the technicalities I’ll demonstrate the mental model I have around closures.

The basic description of a closure is that it’s a function. I imagine it as a box that keeps what’s inside of it from spilling out, while allowing the things outside of it from entering, like a semi-permeable box. But spilling out where?

While the closure itself is a box, any closure will be inside bigger boxes, with the outermost box being the Window object.

A box describing a mental model of a javascript closure, showing Window, scripts and React apps
The window object encapsulates everything else

But What Is A Closure?

A closure is a feature of JavaScript functions. If you’re using a function, you’re using a closure.

As I’ve mentioned, a function is a box and that makes a closure a box too. Considering that each function can contain many others inside of it, then the closure is the ability of a function to use the information outside of it, while keeping the information it has inside from “spilling out”, or being used by the outer function.

Speaking in terms of my mental model: I imagine the functions as boxes within boxes, and each smaller box can see the information of the outer box, or parent, but the big box cannot see the smaller one’s information. That’s as simple and accurate an explanation of closures as I can make.

Closures are important because they can be exploited to create some powerful mechanics and React takes full advantage of this.

Closures In React

Each React component is also a closure. Within components, you can only pass props down from parent to child and the parent cannot see what’s inside the child, this is an intended feature to make our app’s data flow simpler to trace. To find where data comes from, we usually need to go up the tree to find which parent is sending it down.

A great example of closures in React is updating a parent’s state through a child component. You’ve probably done this without realizing you were messing around with closures.

To start, we know the parent can’t access the child’s information directly, but the child can access the parent’s. So we send down that info from parent to child through props. In this case, the information takes the shape of a function that updates the parent’s state.

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      The count is {count}
      <div>
        <ChildButtons onClick={setCount} count={count} />
      </div>
    </div>
  );
};

const ChildButtons = props => (
  <div>
    <button onClick={() => props.onClick(props.count + 1)}>
      Increase count
    </button>
    <button onClick={() => props.onClick(props.count - 1)}>
      Decrease count
    </button>
  </div>
);

When an onClick happens in a button, that will execute the function received from props props.onClick, and update the value using props.count.

The insight here lies in the way we’re updating a parent’s state through a child, in this case, the props.onClick function. The reason this works is that the function was declared within the Parent component’s scope, within its closure, so it will have access to the parent’s information. Once that function is called in a child, it still lives in the same closure.

This can be hard to grasp, so the way I imagine it is as a “tunnel” between closures. Each has its own scope, but we can create a one-way communication tunnel that connects both.

Once we understand how closures affect our components, we can take the next big step: React state.

Fitting React’s State Into Our Mental Model

React’s philosophy is simple: it handles when and how to render elements, and developers control what to render. State is our tool to decide that what.

When state changes, its component renders and therefore re-executes all the code within. We do this to show new, updated information to the user.

In my mental model state is like a special property inside the box. It’s independent of everything else that happens within it. It will get a default value on the first render and always be up to date with the latest value.

Each variable and function is created on every render, which means their values are also brand new. Even if a variable’s value never changes, it is recalculated and reassigned every time. That’s not the case with state, it only changes when there’s a request for it to change via a set state event.

State follows a simple rule: Whenever it changes it will re-rendered the component and its children. Props follow the same logic, if a prop changes, the component will re-render, however, we can control state by modifying it, props are more static and usually change as a reaction to a state change.

The Rendering Mental Model: Understanding React’s Magic

I consider rendering to be React’s most confusing part because a lot of things happen during rendering that sometimes isn’t obvious by looking at the code. That’s why having a clear mental model helps.

The way I imagine rendering with my imaginary boxes is two-fold: the first render brings the box into existence, that’s when the state is initialized. The second part is when it re-renders, that’s the box being recycled, most of it is brand new but some important elements of it remain namely state.

On every render, everything inside a component is created, including variables and functions, that’s why we can have variables storing a calculation’s results, since they will be recalculated on every render. It’s also why functions are not reliable as values, due to their reference (the function’s value, per se) being different every render.

const Thumbnail = props => (
  <div>
    {props.withIcon && <AmazingIcon />}
    <img src={props.imgUrl} alt={props.alt} />
  </div>
);

The above will give a different result depending on the props the component receives. The reason React must re-render on every prop change is that it wants to keep the user up to date with the latest information.

However, the state doesn’t change on re-renders, its value is maintained. That’s why the box is “recycled” instead of created brand new every time. Internally, React is keeping track of each box and making sure its state is always consistent. That’s how React knows when to update a component.

By imagining a box being recycled I can understand what’s going on inside of it. For simple components, it’s easy to grasp, but the more complex a component becomes, the more props it receives, the more state it maintains, the more useful a clear mental model becomes.

A Complete React Mental Model: Putting It All Together.

Now that I’ve explained all the different parts of the puzzle separately, let’s put it all together. Here’s the complete mental model I use for React components, directly translated from how I imagine them into words.

I imagine a React component as a box that contains all of its information within its walls, including its children, which are more boxes.

And like a box in the real world, it can have other boxes inside of it and these boxes can, in turn, contain more boxes. That way each box/component must have a single parent, and a parent can have many children.

The boxes are semi-permeable, meaning they never leak anything to the outside but can use information from the outside as if it belonged to them. I imagine like this to represent how closures work in JavaScript.

In React the way to share information between components is called props, the same idea applies to function and then it’s called arguments, they both work in the same way but with a different syntax.

Within components, information can only travel down from parents to children. In other words, children can access their parent’s data and state, but not the other way around, and the way we share that information is through props.

I imagine this directional sharing of information as boxes within boxes. With the inner-most box being able to absorb the parent’s data.

React Mental model of data sharing between components visualized as information flowing downward as Data is shared from parent to child.
The box must first be created though, and this happens on render, where the default value is given to state and just like with functions, all the code within the component is executed. In my mental model, this is equivalent to the box being created.

Subsequent renders, or re-renders, execute all the code in the component again, recalculating variables, recreating functions, and so on. Everything except for state is brand new on each render. State’s value is maintained across renders is updated only through a set method.

In my mental model, I see re-rendering as recycling the box since most of it is recreated, but it’s still the same box due to React keeping track of the component’s state.

When a box is recycled all the boxes within it, its children, are also recycled. This can happen because the component’s state was modified or a prop changed.

Remember that a state or prop changing means the information the user sees is outdated, and React always wants to keep the UI updated so it re-renders the component that must show the new data.

Conclusion

By using these mental models I feel confident when working with React. They help me visualize what can be a maze of code into a comprehensive mental map. It also demystifies React and brings it to a level I’m much more comfortable with.

React is not that complex once you start understanding the core principles behind it and create some ways to imagine how your code works.

I hope this article was useful to you and it was as enjoyable to read as it was to write! I realized that I understand React intuitively and putting that understanding into words was challenging.

Rapid UI development with Tailwind CSS

JeffUbayi — Mon, 15 Jun 2020 20:24:22 +0000

What is Tailwind css

Tailwind CSS is a utility-first CSS framework intended to ease building web applications with speed and less focus to writing custom CSS, without leaving the comfort zone of your HTML code, yet achieve awesome interfaces.

However, even though Tailwind is considered a framework it doesn't fit under the same philosophy as the others. Tailwind is primarily a utility 🛠 framework or rather a utility bundle.

Utility-class as building complex components from a constrained set of primitive utilities.

Other CSS frameworks like Bootstrap present you with diverse predefined components (such as modals, buttons, alerts, cards). But with Tailwind CSS, you get to make your own, or you’re forced to make your own depending on your project model. Another way to put it, you actually own the components, and you get to harness your customization power on any component of your choice.

This means that there is no more need to fight against the framework, and trying to figure out which classes need to be overridden in order to get results you initially aimed for.

Example

To help you get started, I've included a component example built with utility classes that might be helpful for inspiration on how to create UI interfaces.
Here is the source code is on my Codepen.

<div class = "max-w-sm mx-auto bg-gray-300 shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class = "block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full"src="https://res.cloudinary.com/drrzwqvfh/image/upload/v1590779925/profile-pic-7b90c94f567c1a6c63b5873983d557e4_tact1l.jpg" alt="jeff">
    <div class ="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class ="text-xl leading-tight text-white-100"> Jeff Ubayi</p>
      <p class ="text-sm leading-tight text-gray-700"> Software Developer</p>
      <div class = "mt-4">
        <button class ="text-blue-600 hover:text-white hover:bg-blue-300 border border-blue-400 text-xs font-semibold rounded-full px-4 py-1 -normal"> Hire me</button>
      </div>
    </div>
  </div>
</div>

In the above example, we have used;

The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally
The background color, border radius, and box-shadow utilities (bg-gray-300, rounded-lg, and shadow-lg) to style the card's appearance
The width and height utilities (w-12 and h-16) to size the profile image
The font size, text color, and line-height utilities (text-xl, text-gray-700, leading-tight, etc.) to style the card text
The margin and padding utilities (mt-4 and px-6) to position the card text

Now I know what you're thinking, "this is an atrocity, what a horrible mess!" and you're right, it's kind of ugly. In fact it's just about impossible to think this is a good idea the first time you see it — you have to actually try it.

But once you've actually built something this way, you'll quickly notice some really important benefits in terms of:
Responsive design, using predefined design systems and styling with Pseudo-classes.

Why use Tailwind

1. Component friendly

Tailwind provides tools for extracting component classes from repeated utility patterns, making it easy to update multiple instances of a component from one place:

2. No naming conventions

One of the most stressful parts of writing custom CSS is having to name classes. At every point, you’re pondering which class should be generic or specific. How do you organize them and ensure they’re cascaded? Tailwind CSS solves those problems seamlessly by providing utility-based classes that can be used all the time.

3. Designed to be customized

Tailwind is written in [PostCSS] and configured in Javascript making it easy to customize colors, border sizes, font weights, spacing utilities, breakpoints, shadows, and tons more.

4. Cache benefits

When writing custom CSS, you always have to make changes to your CSS files when making changes in your designs. With Tailwind CSS, you need not worry a bit about that since you’re using the same classes over and over again within the markup

5. Responsive

Tailwind uses an intuitive {screen}: prefix that makes it easy to notice responsive classes in your markup while keeping the original class name recognizable and intact.

sm: small screen
md: medium screen
lg: large screen
xl: extra large

Creating your first project using Tailwind playground

Tailwindcss playground,is a simple starter project for playing around with Tailwind in a proper PostCSS environment.

To get started:

Clone the repository:

      git clone https://github.com/tailwindcss/playground.git tailwindcss-playground

cd tailwindcss-playground

       Install the dependencies:

Using npm

        npm install

Using Yarn

        yarn

Start the development server:

Using npm

      npm run serve

Using Yarn

       yarn run serve

Now you should be able to see the project running at localhost:8080.

Open public/index.html in your editor and start configuring your project to your expectations!

Configure your Tailwindcss file

You can easily generate a config file using Tailwinds CLI utility.

`npx tailwind init`

It generates a 'tailwind.config.js' file which looks like this.

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

The theme section of your tailwind.config.js file is where you define your project's color palette, type scale, font stacks, breakpoints, border radius values, and more.

Conclusion

I think the idea of utility first approach is the way forward. This gives flexibility to the engineers to build UI's how ever they choose while leveraging the power of the utility. The utility updating under the hood allows to better browser support.

With Tailwind CSS, you get to create the components that suit what you want or what you are working on. These components can be created by harnessing the power of the utility-first prowess of Tailwind CSS. If you are tired of making use of Bootstrap and its likes, you’ll find Tailwind CSS a good fit for working on beautiful interfaces as you implement the designs you need using the utility classes it provides

Different ways of structuring Arrays in Javascript

JeffUbayi — Tue, 26 May 2020 08:20:08 +0000

Arrays are indispensable data-structures in javascript and understanding how to effectively use them to solve problems is a crucial skill to master.

We will be taking a look into some of the many ways to create Arrays in Javascript.

Table of Contents:

I'll be using the Avengers Comic flick just to make learning fun while creating an array of Superheros.

Lets "Assemble the Avengers".

What is an Array

An array data structure or an array is an ordered list of values, or a collection of elements (values or variables) identified by an index or key. The most simple type of array data structure is a linear array.

Basic way

At first, the basic way to create arrays is here as follows:

const Avengers = ['Ironman', 'Hulk', 'Thor', 'Cpt America'];

With Array Constructor

Another way to create array is by using Array Constructor function.

const Avengers = new Array('Hulk', 'Thor', 'Ironman', 'Cpt America');

You can achieve same with new Array function of. Like in the following example for Array.of , we create array of mixed values:

const Avengers = Array.of('Hulk', null, 'Thor', undefined);
console.log(Avengers);
// 👆 (4) ["Hulk", null, "Thor", undefined]

Interesting thing to notice about the Constructor function is its handy override. The override is that if you pass only one argument and it is an integer, the Constructor function will create an empty array for you of that specified length.

Spread Operator

It spreads the items that are contained in an iterable (an iterable is anything that can be looped over, like Arrays, Sets…) inside a receiver (A receiver is something that receives the spread values)

Like in the following example, we will add the new item and spread the old array to create a complete new Array.

const moreAvengers = ['Cpt Marvel', ...Avengers ];

From another Array

Array.from will allow you to create the Arrays from another array.

The newly created array is completely new copyrights and is not gonna mutate any changes to the old array.

const Avengers = new Array('Hulk', 'Thor', 'Cpt America', 'Ironman');
const copyOfAvengers = Array.from(Avengers);

From Array-Like Objects

Some Lists look like Arrays but are not arrays. And, at that time you might wanna convert it to Array to better operability and readability on the data structure.

One of such list is NodeList which you receive as an output of document.querySelectorAll

const divs = document.querySelectorAll('div');
const divsArray = Array.prototype.slice.call(divs);

Here you can use the Array.from function as well to create the array from the Array-like objects. Let’s see that in the following example:

const divs = document.querySelectorAll('div');
const divsArray = Array.from(divs);

Using Loops like Map and Reduce

Event though map and reduce are used to loop over the Arrays. Their non-mutating nature allows us to create new Arrays in different ways.

Array Map

Map function will loop over items and return a new array of mapped Items

const Avengers = ['Hulk', 'Thor', 'Ironman', 'Cpt Amrica'];

const avengersEndgame = Avengers.map(a => `${a} kills Thanos`);

console.log(avengersEndgame);

// 👆 (4) ["Hulk kills Thanos", "Thor kills Thanos", "Ironman kills Thanos", "Cpt America kills Thanos"]

Array Reduce

Reduce will allow you to loop over the items and do any kind of operation related to the item. The outputs of those operations can be added to any kind of collection, and here, a new Array.

const avengers = ['Ironman', 'Hulk', 'Thor', 'cpt America'];
const avengersCopy = avengers.reduce((gang, avengers) => [
  ...gang,
  { avengers }
], []);
console.log(avengersCopy);
/* 👆 
    .    (4) [{…}, {…}, {…}, {…}]
    .    0: {avenger: "Hulk"}
    .    1: {avenger: "Thor"}
    .    2: {avenger: "Cpt America"}
    .    3: {avenger: "Ironman"}
    .    length: 4
*/

New Array of Length and Fill with some value

We can quickly create new Arrays of any finite length with Array constructor.

All we have to do is to pass that indefinite length of the desired array as a number to the constructor.

Like in the following example, we will create a new Array of length 6.

Though creating an empty array is useless because you will not be able to use the Array functions until it has items in it.

One quick way to do so is to use the .fill method of the array and put an arbitrary value in each index of the Array.

Once the array is Filled, you can use the loops to enhance it more with the different values.

const emojis = new Array( 6 ).fill( '😎' );
console.log(emojis);
// 👆 (6) ["😎", "😎", "😎", "😎", "😎", "😎"]

// Breakdown: 
const arr = new Array( 6 );
console.log(arr);
/* 👆
    .    (6) [empty × 6]
    .    length: 6
*/
arr.fill( Math.random().toFixed(2) );
/* 👆
    .    (6) ["0.80", "0.80", "0.80", "0.80", "0.80", "0.80"]
    .    0: "0.80"
    .    1: "0.80"
    .    2: "0.80"
    .    3: "0.80"
    .    4: "0.80"
    .    5: "0.80"
    .    length: 6
*/

Form Objects using Object.keys and Object.values

You can create array of Keys or Values of any Object with functions Object.keys and Object.values respectively.

const avengers = {
  1: 'Black Panther',
  2: 'Ironman',
  3: 'Cpt America',
  4: 'Thor',
  5: 'Hulk',
  6: 'Cpt Marvel',
  7: 'Antman'

Array Concat Function

You can use the Array Concat function to create new Arrays as well.

If you use an empty array as the starting point, the output of [].concat will be a new copy of concatenated Arrays.

const Avenger = ['Hulk'];
const moreAvengers = [].concat(Avenger, 'Thor', ['Ironman']);
console.log(moreAvengers);
// (3) ["Hulk", "Thor", "Ironman"]

Conclusion

As we have seen some different ways to create Arrays in JavaScript.

Not all of these methods can be used in same ways and every methods has its perk for specific use cases.

From Promise chains to Async/Await

JeffUbayi — Thu, 14 May 2020 19:39:56 +0000

When writing JavaScript, we often have to deal with tasks that rely on other tasks. Thus, we end up with many nested callback functions that are dependent on previous callback functions. This is often referred to as callback hell.

Luckily, we now got something called Promises to help us out.

What are Promises🤞🤞

A promise is a placeholder for a value that can either resolve or reject at some time in the future.

Let’s see an example of a promise in JavaScript:

const data = (url) => {

  return fetch(url)

    .then(response => {

     if (response.status == 200) {

     return response.json();

     } else {

     throw new Error(response.status);
     }

    });

};

What is Async/Await ♾⌛️

Let's finally move on to Async/Await ! First things first: Async Await is not a total replacement for Promises.

Async/Await is built on top of promises, and it allows us to write asynchronous code more comfortably. It is just a new way of writing asynchronous code, besides promises and callbacks. It makes it look more “synchronous” too.

Now, let’s see the same code re-written using Async/Await.

const data = async url => {

    try {

     const response = await fetch(url);

     if (response.status != 200) {

     throw new Error(response.status);

     }

     const responseData = await response.json();

     return responseData;

    } catch (err) {

     // Failed to fetch the data

     throw new Error(err);

    }

};

Which one do you prefer? In my opinion, it is clearer to understand what happens in the code when using async/await.

What is happening

Notice that we are using the keyword async in the method header. This implies that the function always returns a promise. The keyword await only works if you specify the keyword async in the method header.

The keyword await makes the code wait until the promise is settled/rejected, and once it is resolved/rejected, it returns the result/error. Until the promise is settled, the engine can perform other things like executing other scripts.

In the example above, the code stops at const response = await fetch(url); and continues only after the promise is resolved. That is, once the URL is “fetched”. The constant response gets assigned whatever that URL returns. After that, the code resumes.

Benefits of using Async/Await?

Error handling

Error stacks and debugging can be done for synchronous code and asynchronous code in the same construct. As a result, it provides better error handling. If there is an error in resolving the promise, the control jumps to the catch block to handle the error. Have a look at the second code snippet from above.

You can even wrap multiple promises in the same try block, and the code catches the errors from all promises, not only from one. It also tells you where the error occurred, in which promise.

Clean and concise

It allows us to write clear and better code.
This is an advantage which is not that obvious when having just a few lines of code. But once you start writing a lot of code, it helps a lot in conciseness.

Conditions

Using less conditional operators in your code. The first code snippet using the classic promise is a simple one. Imagine that you have four or more if statements. It quickly gets out of hand.

Conclusion

What should you remember from this article?

Adding async to your method header, you always return a promise. Besides that, it allows you to use the await keyword. Therefore you can wait until a promise is resolved.
Makes the code more explicit, easier to understand, and more concise.
Using the await keyword, you block the code from executing until the promise is resolved or rejected.
When the promise cannot settle, it generates an exception.

Thank you for the read 👨💻.

Design a RESTful API with Python and Flask

JeffUbayi — Wed, 08 Apr 2020 07:04:15 +0000

In recent years REST (REpresentational State Transfer) has emerged as the standard architectural design for web services and web APIs.

In this article I'm going to show you how easy it is to create a RESTful web service using Python and the Flask microframework.

Code available on my Repo

What is REST

It’s an architectural style for designing standards between computers, making it easier for systems to communicate with each other. In simpler terms, REST is a set of rules developers follow when they create APIs.

A system is called RESTful when it adheres to these constraints.RESTful APIs almost always rely on HTTP. When we are working with APIs, a client will send an HTTP request, and the server will respond with the HTTP response.

Installation

To set up a Python server, you need to install Python, I would suggest any version above 3.7 as of the year 2019.

Download the latest Python version from the python.org

Once installed, open up your terminal/cmd and install flask.

$ pip install Flask
// or
$ py -m pip install Flask

Once flask is installed, we’ll need to set up a virtual environment to run our application.

Setting up a Virtual Environment.

We’ll start by creating a folder and adding a venv folder within.

$ mkdir sandbox
$ cd sandbox
$ py -m venv venv

To activate the environment, navigate to venv/bin/activate on Linux.
On windows, use cmd and navigate to venv/Scripts/activate
Navigate back to sandbox which is root and create a file app.py .

Create a minimal Flask application.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
  return 'Server Works!'

@app.route('/greet')
def say_hello():
  return 'Hello world'

if __name__ == '__main__':
    app.run(debug=True)

Here, we import Flask class and create an instance of it. To create an instance, we’d have to give it a name and using (__name__) ensures that it can be started as an application or imported as a module.

We the use the route() decorator to let our flask app know which
URL should trigger the corresponding method. The function then simply returns a string message using different URLs in the example.

 It’s important to note that by default, @app.route has a GET method. 
 If we want to use any other HTTP verbs, we have to specify them by passing 
 them via the methods parameter as a list.

To run the appliaction, we have to complete a few things first. So, set the environment to development and tell your terminal the application to work with by exporting the FLASK_APP environment variable in Linux.

$ export FLASK_ENV=development
$ export FLASK_APP=app.py

and windows.

$ set FLASK_ENV=development
$ set FLASK_APP=app.py

Run using.

$ flask run
// or
$ py -m flask run
* Running on http://127.0.0.1:5000

By default, the port is 5000 .

You’ve successfully created your first Python server using Flask. It’s quite basic and returns string responses, let’s spice things up a little by learning some more things we can do.

Routing.

Routes are considered to be endpoints, you can create different routes for your endpoints that use different methods.

We use the route() decorator to bind a function to a URL. Here’s a number of routes with details in the comments.

@app.route('/')
def index():
 return 'Index Page'

@app.route('/hello')
def hello():
 return 'Hello, greetings from different endpoint'

#adding variables
@app.route('/user/<username>')
def show_user(username):
 #returns the username
 return 'Username: %s' % username

@app.route('/post/<int:post_id>')
def show_post(post_id):
 #returns the post, the post_id should be an int
 return str(post_id)

By default, a route only answers to GET requests. You’ll have to import request from flask to identify the type of method used.

from flask import Flask, request
app = Flask(__name__)

@app.route('/login', methods=['GET','POST'])
def login():
  if request.method == 'POST':
    #check user details from db
    login_user()
  elif request.method == 'GET':
    #serve login page
    serve_login_page()

Rendering Templates.

When using express.js, Pug is the default template engine. Well, in Flask we use Jinja2.
Flask configures Jinja2 automatically when installing, and to render templates all you would need is to import render_template from flask and variables you would want to pass to the template engine as keyword arguments.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/user/<name>')
def hello(name=None):
 #name=None ensures the code runs even when no name is provided
 return render_template('user-profile.html', name=name)

You can learn more about Jinja2 here.

Accessing Request Data.

You might want to pass data via the more secure POST method as opposed to exposing it via the URL. To access form data (transmitted via POST or PUT methods), you can use the form attribute.

from flask import Flask, request

app = Flask(__name__)

@app.route('/user', methods=['GET','POST'])
def get_user():
 username = request.form['username']
 password = request.form['password']
 #login(arg,arg) is a function that tries to log in and returns true or false
 status = login(username, password)
 return status

If the keys username or password does not exist, then a special KeyError is raised. You can catch it like any other error but if you don’t do that, a HTTP 400 (Bad Request) error page is shown. To access parameters submitted in the URL ( ?key=value ) you can use the args attribute.

searchkeyword = request.args.get('key': '')

It’s recommended to catch KeyError when using URL parameters as some users can
change the URL which may return a Bad Request error page.

File Uploads.

Python is a very simple language, it gets even simpler using Flask to upload images, files or videos. Flask allows you to upload files from a form object, just make sure you set enctype="multipart/form-data" attribute on your form.

While uploaded files are temporalily stored in memory or at a temporary location in the file system, you can use the save() method to store the file in the server file system.

When you create a server, it’s not recommended you store files on the server, you should store files to a service like AWS Storage, Firebase (by Google), Azure (Microsoft),
Dropbox and others and only keep the url to these files stored in a separate database as strings, maybe even in the server.
However, here’s how you can save files on the server just incase you just want to.

from flask import Flask, request

app = Flask(__name__)

@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        static_file = request.files['the_file']
        # here you can send this static_file to a storage service
        # or save it permanently to the file system
        static_file.save('/var/www/uploads/profilephoto.png')

You can access your file using the hostname of your server plus the file directory after saving to the file system.i.e

https://myapp.com/var/www/uploads/profilephoto.png

Conclusion

It’s pretty easy to build APIs with Flask. You can respond with JSON by serializing the value into JSON and returning it.
Use the json module that comes with python to serialize your data into JSON.
You can connect to MongoDB and store values using the popular pymongo, or connect to any other database.
SQLite3 comes by default in Python. It’s not recommended to use an SQLite database however as your application scales, it’s not powerful enough to handle a lot of data.

If you’re interested more in learning how to connect to databases and store data or upload files to storage services you might want to follow me??. Hopefully, you can now set up your own custom REST APIs using Flask.

Thanks for going through this article????..

Regular Expressions(RegEx)in JavaScript

JeffUbayi — Tue, 25 Feb 2020 08:39:56 +0000

Regular expressions are a way to describe patterns in a string data. They form a small language of its own, which is a part of many programming languages like Javascript, Perl, Python, Php, and Java.

Regex are written in a specific syntax and then usually applied on a larger string of text to see if the string meets the conditions defined in the regular expression. Regular expressions have the general syntax of a pattern and modifier, like so:

/patterns/modifiers

The pattern is the sequence of characters and the modifier is a single letter which changes the entire behavior of the regular expression.

Creating a Regular Expression
There are two ways to create a regular expression in Javascript. It can be either created with RegExp constructor, or by using forward slashes ( / ) to enclose the pattern.

Regular expression using constructor:

 let regex = new RegExp('abc');

Regular expression using literal:

let regex = /abc/;

No matter which method you choose, the result is going to be a regex object. Both regex objects will have same methods and properties attached to them.

Since forward slashes are used to enclose patterns in the above example, you have to escape the forward slash ( / ) with a backslash ( \ ) if you want to use it as a part of the regex.

RegEx Methods
We have two methods for testing regular expressions;

1 .test()
The method is used to test whether a match has been found or not.
It returns a boolean true or false statement

let regex = /hello/;
let text =' hello devs';
let result = regex.test(text);
console.log(result);
//returns true

2. exec()
This method returns an array containing all the matched groups.


let regex =/hello/;
let text = ' hello devs';
let results = regex.exec(text);
console.log(results);
// returns [ 'hello', index: 0, input: 'hello devs', groups: undefined ]

// 'hello' -> is the matched pattern.
// index: -> Is where the regular expression starts.
// input: -> Is the actual string passed.

Simple regex patterns
It is the most basic pattern, which simply matches the literal text with the test string.

let regex = /hello/;
console.log(regex.test('hello devs'));
// true

Special characters
Now, let’s tap into the full power of regular expressions when handling more complex cases.
There are special symbols and characters that you have to memorize in order to fully understand the regular expressions.

Flags
Regular expressions have five optional flags or modifiers.Lets work with the two important ones.
i: This makes the searching case-insensitive
g: This makes the searching global which prevents it from stopping after the first match.

let regexGlobal = /abc/g;
console.log(regexGlobal.test('abc abc'));
// it will match all the occurence of 'abc', so it won't return 
// after first match.

let regexInsensitive = /abc/i;
console.log(regexInsensitive.test('Abc'));
// returns true, because the case of string characters don't matter 
// in case-insensitive search.

Character groups:
Character set [xyz] — A character set is a way to match different characters in a single position, it matches any single character in the string from characters present inside the brackets.

let regex = /[bt]ear/;
console.log(regex.test('tear'));
// returns true
console.log(regex.test('bear'));
// return true
console.log(regex.test('fear'));
// return false

Note — All the special characters except for caret (^) (Which has entirely different meaning inside the character set) lose their special meaning inside the character set.

Ranges [a-z] — Suppose we want to match all of the letters of an alphabet in a single position, we could write all the letters inside the brackets, but there is an easier way and that is ranges

let regex = /[a-z]ear/;
console.log(regex.test('fear'));
// returns true
console.log(regex.test('tear'));
// returns true

Meta-characters — Meta-characters are characters with a special meaning. There are many meta character but I am going to cover the most important ones here.

\d — Match any digit character ( same as [0-9] ).
\w — Match any word character. A word character is any letter, digit, and underscore. (Same as [a-zA-Z0–9_] ) i.e alphanumeric character.
\s — Match a whitespace character (spaces, tabs etc).
\t — Match a tab character only.
\b — Find a match at beginning or ending of a word. Also known as word boundary.
. — (period) Matches any character except for newline.
\D — Match any non digit character (same as [^0–9]).
\W — Match any non word character (Same as [^a-zA-Z0–9_] ).
\S — Match a non whitespace character.

Quantifiers: — Quantifiers are symbols that have a special meaning in a regular expression.

+ — Matches the preceding expression 1 or more times.

let  regex = /\d+/;
console.log(regex.test('8'));
// true
console.log(regex.test('88899'));
// true
console.log(regex.test('8888845'));
// true

—Matches the preceding expression 0 or more times.

let  regex = /go*d/;
console.log(regex.test('gd'));
// true
console.log(regex.test('god'));
// true
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// true

? — Matches the preceding expression 0 or 1 time, that is preceding pattern is optional.

let regex = /goo?d/;
console.log(regex.test('god'));
// true
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// false

^ — Matches the beginning of the string, the regular expression that follows it should be at the start of the test string. i.e the caret (^) matches the start of string.

let regex = /^g/;
console.log(regex.test('good'));
// true
console.log(regex.test('bad'));
// false
console.log(regex.test('tag'));
//

$ — Matches the end of the string, that is the regular expression that precedes it should be at the end of the test string. The dollar ($) sign matches the end of the string.

let regex = /.com$/;
console.log(regex.test('test@testmail.com'));
// true
console.log(regex.test('test@testmail'));
// false

{N} — Matches exactly N occurrences of the preceding regular expression.

let regex = /go{2}d/;
console.log(regex.test('good'));
// true
console.log(regex.test('god'));
// false

{N,} — Matches at least N occurrences of the preceding regular expression.

let regex = /go{2,}d/;
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// true
console.log(regex.test('gooood'));
// true

{N,M} — Matches at least N occurrences and at most M occurrences of the preceding regular expression (where M > N).

let regex = /go{1,2}d/;
console.log(regex.test('god'));
// true
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// false

Alternation X|Y — Matches either X or Y. For example:


let regex = /(green|red) apple/;
console.log(regex.test('green apple'));
// true
console.log(regex.test('red apple'));
// true
console.log(regex.test('blue apple'));
// false

Note — If you want to use any special character as a part of the expression, say for example you want to match literal + or ., then you have to escape them with backslash ( \ ).For example:

let regex = /a+b/;  // This won't work
let regex = /a\+b/; // This will work
console.log(regex.test('a+b')); // true

Practicing Regex:
Let’s practice some of the concepts that we have learned above.

Match any 10 digit number :

let regex = /^\d{10}$/;
console.log(regex.test('9995484545'));
// true

Let’s break that down and see what’s going on up there.

If we want to enforce that the match must span the whole string, we can add the quantifiers ^ and $.
The caret ^ matches the start of the input string, whereas the dollar sign $ matches the end. So it would not match if string contain more than 10 digits.
\d matches any digit character. {10} matches the previous expression, in this case \d exactly 10 times. So if the test string contains less than or more than 10 digits, the result will be false.

Match a date with following format DD-MM-YYYY or DD-MM-YY:

let regex = /^(\d{1,2}-){2}\d{2}(\d{2})?$/;
console.log(regex.test('01-01-1990'));
// true
console.log(regex.test('01-01-90'));
// true
console.log(regex.test('01-01-190'));
// false

Let’s break that down and see what’s going on up there.

Again, we have wrapped the entire regular expression inside ^ and $, so that the match spans entire string. ( start of first subexpression.
\d{1,2} matches at least 1 digit and at most 2 digits.
- matches the literal hyphen character.
) end of first subexpression.
{2} match the first subexpression exactly two times.
\d{2} matches exactly two digits.
(\d{2})? matches exactly two digits. But it’s optional, so either year contains 2 digits or 4 digits.

Conclusion
Regular expression can be fairly complex at times, but having a proper understanding of the above concepts will help you understand more complex regex patterns easily. You can learn more about regex here and practice it here.

Working with Django Rest Framework(DRF).

JeffUbayi — Tue, 14 Jan 2020 14:20:33 +0000

The first step is to install Django Rest-Framework and then create a new apis app.
The source code is available on my Github.

All of our API information will be routed through here. Even if we had multiple apps in our project, we’d still only need a single apis app to control what the API does.

      (todo) $ pipenv install djangorestframework==3.10.3
      (todo) $ python manage.py startapp apis

Add both the apis app and rest-framework to our installed apps.
We also add Permissions so that only logged in users could access the API.

#todo_project/settings.py

INSTALLED_APPS = [
    ...
    'rest_framework',
    'apis.apps.ApisConfig',
    'todos.apps.TodosConfig',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]

As tradition,A Django app needs a dedicated url, view, and template to translate information from that database onto a webpage.While in DRF,we just need url,view and serializer.

The url controls the access to the API endpoints,views controls the logic of the data being sent and serializers does the magic of converting our information into a suitable format(JSON,XML).

A normal webpage requires HTML, CSS, and JavaScript (usually). But our API is only sending data in the JSON format. No HTML. No CSS. Just data. The serializer translates our Django models into JSON and then the client app translates JSON into a full-blown webpage. The reverse, deserialization, also occurs when our API accepts a user input–for example submitting a new todo–which is translated from HTML into JSON then converted into our Django model.

Inside our apis app we create a serializers.py and import our desired model by specifying which fields we want exposed.

      (todo) $ touch apis/serializers.py

# apis/serializers.py

from rest_framework import serializers
from todos import models


class TodoSerializer(serializers.ModelSerializer):
    class Meta:
        fields = (
            'id',
            'title',
            'description',
        )
        model = models.Todo

Next up is our view.DRF comes with several generic views that provides minimal functionality with a less code on our part.
We create a ListView and a DetailView of our todo items and specify the models and serializers for each view.

# apis/views.py

from rest_framework import generics

from todos import models
from .serializers import TodoSerializer

class ListTodo(generics.ListCreateAPIView):
    queryset = models.Todo.objects.all()
    serializer_class = TodoSerializer


class DetailTodo(generics.RetrieveUpdateDestroyAPIView):
    queryset = models.Todo.objects.all()
    serializer_class = TodoSerializer

All that's left is to update our API Urls both in the project level and app level.

# todo_project/urls.py

from django.contrib import admin
from django.urls import include, path


urlpatterns = [
    path('admin/', admin.site.urls),
    path('apis/v1/', include('apis.urls')),
]

The list of all todos will be at apis/v1/. Individual todo items will be at their pk which is automatically set by Django for us.


# apis/urls.py

from django.urls import path

from .views import ListTodo, DetailTodo

urlpatterns = [
    path('', ListTodo.as_view()),
    path('<int:pk>/', DetailTodo.as_view()),
]

We now have an API of our To do project.Start the local server.

    (todo) $ python manage.py runserver

Testing with the web browser

DRF comes with a very nice graphical user interface for our API.The listView for all items is at http://127.0.0.1:8000/apis/v1/.

You can even use the forms on the bottom of each page to create, retrieve, destroy, and update new todo items.When your APIs become even more complex many developers like to use Postman to explore and test an API.

Voila,we have a working, albeit basic implementation of a Todo API.

For Part 1 of this blog. Thanks for the read.

Create a simple API using Django Rest Framework in Python

JeffUbayi — Sun, 05 Jan 2020 08:45:15 +0000

Intro

Django Rest Framework is a powerful library that sits on top of existing Django projects to add robust web APIs.

REST is an "architectural style' that basically exploits the existing technology and protocols of the web.

API a set of rules and mechanisms by which one application or component interacts with the others.

In this tutorial we’ll create a basic Django ToDo app and then convert it into a web API using serializers, viewsets, and routers.

Complete source code is available on Github .

1.Initial setup

Will commence by executing the following in the command line;

    $ cd ~/Destkop
    $ mkdir todo && cd todo
    $ pipenv install django==2.2.5
    $ pipenv shell
    (todo) $ django-admin startproject todo_project .
    (todo) $ python manage.py startapp todos

We've used pipenv to install django and started both a django project (todo_project) and an app(todos).
Now we need to update our app in the settings file.

       # todo_project/settings.py
       INSTALLED_APPS = [
              ...
       'todos.apps.TodosConfig',
        ]

Perform our first migration to set up the initial database at this point.

       (todo) $ python manage.py migrate

2.Models

We create a basic model for our Todo app database.

       # todos/models.py
       from django.db import models

      class Todo(models.Model):
          title = models.CharField(max_length=200)
          description = models.TextField()

         def __str__(self):
            return self.title

Makemigrations for the project database to the Server.

      (todo) $ python manage.py makemigrations todos
      (todo) $ python manage.py migrate

     # todos/admin.py
     from django.contrib import admin

     from .models import Todo

     admin.site.register(Todo)

In a normal Django app at this point we would need to add urls, views, and templates to display our content. But since our end goal is an API that will transmit the data over the internet, we don’t actually need anything beyond our models.py file!

Lets create a superuser to act as an ADMIN and then power off the django project to the server.

     (todo) $ python manage.py createsuperuser
     (todo) $ python manage.py runserver

Navigate to http://127.0.0.1:8000/admin and log in with your new superuser account.

Click on Todos and add your entries.I added the following;

      1st todo = Learn DRF
      2nd item = Learn Python too

Now it’s time to use Django Rest Framework.

Part 2.....

How to Setup Virtual Environment Using Pipenv

JeffUbayi — Sat, 28 Dec 2019 08:34:33 +0000

Virtual Environments using PipEnv

PipEnv is a new way to create Virtual Environments in Python that allows for
Environment Agnostic dependency installation.

It makes use of;

Pip(Python package manager)
Virtualenv(used for creating isolated Python environments to easily use different packages in different projects)
Pipfile(records the package versions used in a given project so you can
easily install them on any other system you want. Also considered as
the replacement of Python requirements files)

Installing PipEnv

  pip install --user pipenv

Next, we are going to set up the requirements.txt file to make sure you have
all the necessary dependencies for the rest of the book.

Versions – Requirements.txt File

The versions that you will need to follow this tutorial is provided for you by
the following requirements.txt file.

The instructions that you need to follow are also provided and should work on any Operating System. Here is the requirements.txt file that we are going to use:

           Django==2.2
           djangorestframework==3.9.2

Copy and Paste the above in a file labeled requirements.txt in the root directory of your app. Make sure you are inside of that directory.Then, run the following command:

       pipenv install -r requirements.txt

Using Pip inside your virtual environment

An alternative to the requirements.txt file above is to use pip inside your
Virtual Environment.

      pipenv shell
      pipenv install django
      pipenv install djangorestframework

Once it’s finished, you should have a PipFile file and a PipFile.lock file.

Congratulations! You installed PipEnv and you have an environment that is ready to go for the development for the rest of the book.

Everytime you sit at the computer you should do this…

When you’re ready to sit down and work on your project, you should do the
following:

Open up your terminal and go to the directory with the PipFile file and a
PipFile.lock file. Then, type:

      pipenv shell

Your shell should be changed – it should be noticeably different. Mine
looks like this:

     (token_auth_app) bash-3.2$

Yours should be similar, although what is inside of the parentheses might be
different.

Everytime you are done working on your app you should do this…

When you’re done working, you should deactivate the Virtual Envionment by
running the following two commands:

        deactivate
        exit

This will kick you out of the Virtual Environment so you don’t mess up the virtual environment for later.

Other commands related to Pipenv shell include:

Checks for security vulnerabilities;

       pipenv check

Will run a command from the virtualenv;

       pipenv run *

Shows you a graph of your installed dependencies;

       pipenv graph

Check local packages

      pipenv lock -r

Install a dev package

      pipenv install nose --dev

Ignore pipfile

     pipenv install --ignore-pipfile

Set lockfile - before deployment

     pipenv lock

Synchronize to use an existing pipenv

     pipenv sync

So basically with one short pipenv command you can install a package in a virtual environment and record it in pipfile and pipefile.lock files. Think of pipenv as next gen package management tool that should save you time and also provide you with new shiny utilities.

Thanks for the read.

Deploy your website with Github Pages

JeffUbayi — Tue, 17 Dec 2019 09:52:48 +0000

All of us devs, at one point or other, would have wanted to have a personal website of our own, just to showcase our online presence or for fun. So here, I worked on my landing site and deployed it to github.

Usually creating a personal website would involve buying/registering a domain name, finding a free/paid hosting service, developing your site and uploading it to the hosting provider.

But with GitHub Pages, publishing your static site is as easy as drinking a coffee.

  You need a GitHub account (you obviously have one already)

  Create a new repo with the name {username}.github.io

  Clone the repo and create an index.html file

  Add some content and git push

  Voila! Your site should be live at https://{username}.github.io in seconds.

Github Pages

To view the link to your published repo on gh-pages,it is located at the
settings on your github repo.

 Scroll down to github pages.

 Click the link "your site is published at: https//{username}.github.io/"

Developer Landing Page

I wanted a Dev Landing Page to showcase everything I do online. And I wanted it to be minimal and right to the point. So I sat down and created this Dev Landing Page,with some HTML,CSS and JavaScript.

Here's my Dev Landing Page https://j3ffu633zy.github.io/

Thanks for reading,Happy Coding.

Git - Useful Cheat Sheet

JeffUbayi — Fri, 13 Dec 2019 07:34:31 +0000

What is git?
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

With Git it’s easy to undo changes back and forth with a precise explanation of the changes that are made. It has the ability of:

-Keeping a track of the changes i.e. different versions of the same file.
-It also keeps a record of all the files present in a project.
-Comparing and analyzing different codes with a detailed explanation.

Basic Commands:

Initialize local git repository

$ git init

check files to commits and branch name

 $ git status

add files to staging area.

$ git add FileName.txt

add all modified and new files to staging area

 $ git add -all

add all files of directory to staging area

 $ git add folder/

Commit changes to local repository

 $ git commit -m “Message to commit”

history of commits

 $ git log –

Get help for any command

 $ git help

set global user name

 $ git config –global user.name “Name”

Show un-staged differences since last commit

 $ git diff

View staged differences

 $ git diff –staged

Un-stage files and HEAD Refers to last commit

 $ git reset HEAD FileName

Blow away all changes since last commit

 $ git checkout – FileName

Skip stagging to commit and Add changes from all tracked files. this Doesn’t add new (untracked) files

 $ git commit -a -m “Modify readme”

Reset into staging and Move to commit before ‘HEAD’

 $ git reset –soft HEAD^

Add to the last commit with new commit message

 $ git commit –amend -m “New Message”

Undo last commit and all changes

 $ git reset –hard HEAD^

Undo last 2 commits and all changes

 $ git reset –hard HEAD^^

Adding a remote

 $ git remote add origin git url

show remote repositories

 $ git remote -v

Remove remote

 $ git remote rm

Clone remote repository

 $ git clone git url

Create branch

 $ git branch

create and checkout branch

 $ git checkout -b

list available branches

 $ git branch

list remote available branches

 $ git branch -r

Switching between branches

 $ git checkout

merge 2 branches

 $ git merge

Delete branch

 $ git branch -d

Force delete branch

 $ git branch -D

get remote changes

 $ git pull

get the remote changes to local remote branch

 $ git fetch

merge local remote branch changes to local master branch

 $ git merge

shows branches alignments

 $ git remote show origin

remove remote branch

 $ git push origin :

To clean up deleted remote branches

 $ git remote prune origin

List all tags

 $ git tag

Create tag

 $ git tag -a -m “Tag message”

Push new tags to remote

 $ git push –tags

Revert to existing tag.

 $ git checkout

Determine who made changes to a file.

 $ git blame

Remove all unexpected files in your project (not committed).

  $ git clean -dfx

To push to remotes

  $ git push -u origin master

Modify amend the previous commit

  $ git commit –amend

Save uncommitted changes for later use

  $ git stash

That's all, Hope you git it now.

For more useful developer posts,visit my blog.