Forem: Richard Umoffia

How to properly manage migration files

Richard Umoffia — Thu, 04 Jul 2019 11:09:09 +0000

So I recently started working with mySQL, coming from MongoDB background and I've never really had to manage migrations.

So what is the best way to manage migration files? Do you commit them? etc etc. Do you sync your local migration files with that of the server?

How to merge a specific commit into another branch

Richard Umoffia — Thu, 15 Feb 2018 21:34:00 +0000

I really hope this title is self-explanatory enough cause this was the best I could think of. I know we are all very busy so I'll go straight to the point.

So for the last week, I've been working on this new feature for a project. I worked dev branch, as usual, then yesterday when we discovered a niggling bug that needed fixing immediately.

After fixing the error, I realized I had done this on the same branch that I've been working on for the last week. I couldn't push this branch to master cause everything will break.

I googled a bit and found something that worked but didn't solve my problem. Here's what I found:

First you checkout the branch you want to merge the commits into

git checkout <the branch>.

Then

git cherry-pick <the branch you've been working on>.

What this does is, "It applies the change introduced by the commit at the tip of the working branch and creates a new commit with this change". The issue I had with that was, I had made a couple of commits and I needed all those commits in the master branch. That's when I found it.

What did I find? you may be asking. Gitlens is what I found. If you use VScode you might know this extension. I've had it installed for some time now but I've never gotten around actually using it.

With this extension, all you need to do is, click the branches dropdown in the gitlens area, then proceed to click the drop-down for the branch you made the commits and then right click on a commit and cherry-pick it. Don't worry about all that gibberish I typed there. I've included a screenshot. (I'm nice, I know).

When you look at your terminal, what you'll see is this command being run

git cherry-pick -e <the commit hash>

After running that command, you can then push your changes. You can download the gitlens extension to make use of this feature, or if you don't VScode yet, then there's a terminal command you. There's a command for everyone.

I promised to keep this short, so goodbye! I hope this helps.

How to create a custom context menu for your web application

Richard Umoffia — Tue, 13 Feb 2018 11:40:11 +0000

Before we begin, here's a preview of what we'll be creating.

Let's discuss a few use cases of a custom context menu.

You wish to display a custom context menu in an area of your web app rather than the default one.

I've exhausted my use case examples but you can think up a few other ones I'm sure of it

Let's code!

First, we'll create a list of items that will represent our custom context menu using HTML.

<div class="menu">
  <ul class="menu-options">
    <li class="menu-option">Back</li>
    <li class="menu-option">Reload</li>
    <li class="menu-option">Save</li>
    <li class="menu-option">Save As</li>
    <li class="menu-option">Inspect</li>
  </ul>
</div>

Then, we'll add a few lines of scss to fresh up our custom menu. Make it look nice and clean.

.menu {
  width: 120px;
  box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  display: none;

  .menu-options {
    list-style: none;
    padding: 10px 0;

    .menu-option {
      font-weight: 500;
      font-size: 14px;
      padding: 10px 40px 10px 20px;
      cursor: pointer;

      &:hover {
        background: rgba(0, 0, 0, 0.2);
      }
    }
  }
}

To the main course

Whenever we right click to view a context menu on our page, an event is triggered. The event name is (you guessed it right) contextmenu. Crazy right? Not so much.
The first thing we'll do is to listen for this event, then prevent the default behaviour from triggering.

window.addEventListener("contextmenu", e => {
  e.preventDefault();
});

Here we are listening for a contextmenu event on the whole window, but you can always specify a specific area rather than the whole window.

Now that we've cleared that up, we'll set up the display of our custom context menu right there in the event callback. We are going to be making use of two properties on the event object to determine where we'll display our menu. It's going to be the area where the user's click originated.

The pageX and pageY property of the event callback describes the position of the mouse when the request for a context menu was triggered. You'll want to place your context menu at that point. Let's update our js code to reflect these changes.

const toggleMenu = command => {
  menu.style.display = command === "show" ? "block" : "none";
};

const setPosition = ({ top, left }) => {
  menu.style.left = `${left}px`;
  menu.style.top = `${top}px`;
  toggleMenu('show');
};


window.addEventListener("contextmenu", e => {
  e.preventDefault();
  const origin = {
    left: e.pageX,
    top: e.pageY
  };
  setPosition(origin);
  return false;
});

The toggleMenu function toggles the display of the menu and the setPosition function sets the position of the menu. The function names are a really self-explanatory.

By now we should have a fully functional context menu but there's the issue of our menu not going away, it's just there. So we'll have to set up another event listener to hide our context menu if it is visible. To do this, we'll listen for a click event on the window or area where you've setup your custom context menu.

const menu = document.querySelector(".menu");
let menuVisible = false;

const toggleMenu = command => {
  menu.style.display = command === "show" ? "block" : "none";
  menuVisible = !menuVisible;
};

const setPosition = ({ top, left }) => {
  menu.style.left = `${left}px`;
  menu.style.top = `${top}px`;
  toggleMenu("show");
};

window.addEventListener("click", e => {
  if(menuVisible)toggleMenu("hide");
});

window.addEventListener("contextmenu", e => {
  e.preventDefault();
  const origin = {
    left: e.pageX,
    top: e.pageY
  };
  setPosition(origin);
  return false;
});

There's the final look of our js file. We have a working context menu but as usual there are still a few enhancements we'll need for our context menu to be real classy.

How to position the menu when the click is very close to the bottom or top of the window.
Adding a few animations to smoothen the entry and exit of our menu.

It'll take just a few lines of code to achieve this. I believe you can figure it out. Check out the codepen for the full code base. Hit me up on twitter for any suggestions and issues @iamAfro

Getting started with tailwindCSS in your Angular project

Richard Umoffia — Sun, 17 Dec 2017 11:26:05 +0000

What is Tailwind

According to the tailwind site, "Tailwind is a utility first framework for rapidly building custom interfaces". What that means from my perspective, tailwind provides easy to remember css classes for creating user interfaces while writing minimal css.

"On the flip side, it also has no opinion about how your site should look and doesn't impose design decisions that you have to fight to undo."

I'm not going into details about how to use tailwind exactly, their site has easy to follow examples and it is well documented. So I suggest you peep at it after following the setup procedures that I'll show you.

Getting Started

So to get started you need to create a new angular project using the angular-cli.

ng new tailwind-config

Run that command to start a new angular-cli project. Now to add tailwind to our project, we can use the CDN

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

we can seperate the base styles from the utility classes using their respective CDNs

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css" rel="stylesheet">

But I recommend that you install the project from NPM so you can configure it to your style and taste. This also helps you control the size of the final bundle. So we'll install tailwind from NPM

npm install tailwindcss --save-dev

After installing tailwind, you'll need to create a config file. Now this is necessary if you'll want to customize it and insert new utility classes.

./node_modules/.bin/tailwind init [filename]

Run that command to create your config file. In my case, I'll name my config file tailwind.js.

Getting started with Angular

I'm going to describe two distinct methods of using tailwind in our project. Each method has it's pitfalls, it's left for you to chose.

Method 1:

Include tailwind build in our webpack config.

To use this method, we'll need to eject the webpack config file for our project. We can do this using the following method. ng eject. After that, run npm install again.

Add the top of the webpack.config.js add this line to inject tailwind.

const tailwind = require('tailwindcss');

In the same file you'll see a postcssPlugins function. In that function right before autoprefixer is called, we'll include our tailwind build there.

The function should now look like this:

const postcssPlugins = function() {
   ......

  };
  return [
    postcssUrl({
    ......

    tailwind('./tailwind.js'),
    autoprefixer()
  ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
};

You might run into the following error atRule.before is not a function. If so, you'll need to install the latest postcss modules. You can do so with the following command.

npm install postcss postcss-loader postcss-url --save-dev

start your server using npm start.

Now the issue with this method is that ng eject hard codes the paths for your project's files making it difficult for reuse on a different pc especially if you have a team working on the same project. Here's an excerpt from my config file.

'rxjs/util/tryCatch':
        'c:\\Users\\Test\\Desktop\\Work\\project\\node_modules\\rxjs\\_esm5\\util\\tryCatch.js',
'rxjs/util/toSubscriber':
        'c:\\Users\\Test\\Desktop\\Work\\project\\node_modules\\rxjs\\_esm5\\util\\toSub
 ............

Now if you're comfortable editing and re-configuring your webpack-config file to fix this issue, you can stop at this method or check out the next if you're just curious.

Method 2:

Using tailwind's cli

Tailwind has a CLI for creating your config file and also to process your stylesheet. I'm assuming you have a stylesheet where you've injected tailwind's base styles and utilities.

tailwind-build.css

@tailwind prefilgiht;

@tailwind utilities;

We'll place this stylesheet in the same folder as our project's styles.css file. You can name the file whatever way you please. We'll then use the tailwind CLI to output our styles.css file containing tailwind's base and utility styles.

./node_modules/.bin/tailwind build ./src/tailwind-build.css -c ./tailwind.js -o ./src/styles.css

Since we'll need to do this every time before we start our server, we can add this to package.json file.

{
  "name": "tailwind-config",
  "version": "0.0.0",
  ........
  "scripts": {
  "prestart": "tailwind build ./src/taliwind-build.css -c ./tailwind.js -o ./src/styles.css",
   ..........
  }
},

That will build out our styles.css file before our server starts. That's it.

There might be several solution to this, if you have one, be free to drop them in the comments below. Or mention me on twitter @iamAfro.

Lazy loading images in your angularJS project using the IntersectionObserver API

Richard Umoffia — Tue, 17 Oct 2017 16:00:10 +0000

So for a while I've been trying to reduce the number of scroll listeners in my project that's until I stumbled on the Intersection Observer API after running a lighthouse test on my web app. The implementation was so simple and straightforward that I set out immediately to implement it.

What is the Intersection Observer

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

By default, IntersectionObservers calculate how much of a target element overlaps (or “intersects with”) the visible portion of the page, also known as the browser’s “viewport.

How do I fire this up?

As I said above, the setup is very simple. All we need to do is define a new intersection observer with a callback function and then observe a target element.

Too much talk let's see!!

const observer = new IntersectionObserver(callback);
observer.observe(element)

It's that simple, we can load more new items on the DOM, load an image asynchronously and so much more once the target element comes into view. Let's see what an observer event looks like.

Let's setup a basic example and log the events to the console. I won't go into details as to what each value on the event does or stands for, you can go read up the details here.

const observer = new IntersectionObserver(callback);
const img = document.getElementById('lazy-img');
observer.observe(img);

function callback(changes){
    console.log(changes)
    changes.forEach(change => {
        console.log(change)
    })
}

The observer typically returns a list of IntersectionObserverEntry objects containing metadata about the changes of a target element.

If we want to check if an element is fully visible on the viewport, our obeserver callback will look like this:

const observer = new IntersectionObserver(callback);
const img = document.getElementById('lazy-img');
observer.observe(img);

function callback(changes){
    console.log(changes)
    changes.forEach(change => {
        if(change.intersectionRatio >= 1){
            img.classList.add('visible')
        }
        else{
            img.classList.add('not-visible')
        }
    })
}

How do we lazy load with angularJS already??

Easy there! Getting to it.

So to add this to our angularJS project, we'll create a simple directive that adds our img src when it enters the viewport. Since our image won't have a src attribute just yet, we can add height and background color styles to it.

img{
    height: 60px;
    background: grey;
}

then our javascript code should look like this:

angular
    .module('lazy', [])
    .directive('lazyLoad', lazyLoad)

function lazyLoad(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            const observer = new IntersectionObserver(loadImg)
            const img = angular.element(element)[0];
            observer.observe(img)

            function loadImg(changes){
                changes.forEach(change => {
                    if(change.intersectionRatio > 0){
                        change.target.src = 'boy.jpg'
                    }
                })
            }    

        }
    }
}

Our HTML is next. It should resemble this:

<body ng-app="lazy">
    <div>
        <img alt="" class="" lazy-load>
    </div> 
</body>

And that's it!! Obviously it's not elegant enough, you could go a step further by adding a low res copy of your image and then replacing it with your high res copy when the image is coming into view. We could also add a medium like blur on the image and then reveal the image when it comes into view.

Let's replace our current code with the following below to make the process a bit more elegant.

CSS


.img-blur{
    filter: blur(10px);
}

img{
    height: 60px;
    background: gray;
}

HTML

<body ng-app="lazy">
    <div>
        <img src="low-res.jpg" class="img-blur" alt="Lazy load" lazy-load>
    </div>
<body>


angular
    .module('lazy', [])
    .directive('lazyLoad', lazyLoad)

function lazyLoad(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            const observer = new IntersectionObserver(loadImg)
            const img = angular.element(element)[0];
            observer.observe(img)

            function loadImg(changes){
                changes.forEach(change => {
                    if(change.intersectionRatio > 0){
                        change.target.src = 'boy.jpg';
                        change.target.classList.remove('img-blur');
                    }
                })
            }    

        }
    }
}

And that's it, we have a decent enough process of lazy loading our images using the IntersectionObserver API and angular's directives. I'm sure there are several ways to better this process and you can shoot your ideas in the comment section below.

Compressing your web app's images using the tinyJpg API.

Richard Umoffia — Sun, 02 Jul 2017 21:48:58 +0000

While working on a Progressive web app, I ran lighthouse tests and I sorta failed woefully on the part of optimizing my images, so I set out to find ways of compressing and optimizing images.

So while searching google for ideas and solutions, I stumbled upon this article written by Richard Lazazzera(my namesake). The article was well detailed and contained almost all the information I needed to move forward.

On the article he listed several image compression services/apps. E.g
TinyJpg
Compressor.io
ImageOptim.

Also, reducing the size of your images to fit your site's specifications can go a long way in optimizing your images and speeding up your site. You can check out the article for the full gist, but I'm going to talk about how to use TinyJpg to compress images for your website or web app.

So before I settled for tinyJpg, I tried out several other image compression services/apps, but I stuck with TinyJpg because they provided a well detailed API for developers. They have client libraries in various languages like Ruby, PHP, node, JS, Python, Java and .NET. I mostly work with python and JS, so for the sake of this post, I'll make use of their NodeJS module.

Before I continue, this post is based off my personal opinion and I'm in no way affiliated with TinyJpg/TinyPNG.

Now to the business end. To install tinify, run the command below.

npm install tinify --save

To make use of their API, you'll need to acquire an API key. You just need to provide a username and email to sign up and you're up and running.

With the tinyJpg API, you can compress, resize images from your system and external urls, you can save the compressed image to amazon S3 and other exciting options, you can find the detailed documentation here. You can compress 500 images/month for free and after that you pay $0.002 per image for the next 10,000 images.

Now that we're through with all the jibi jabba, let's take it for a spin. I'm going to create a file called compress.js and we'll enter the code below into it.

//compress.js

var tinify = require('tinify');

tinify.key = YOUR_API_KEY

var source = tinify.fromFile("unoptimized.jpg");
source.toFile("optimized.jpg");

Okay let me explain all the craziness going on here, we first require tinify and then we provide our API_KEY that is on our developer section on tinyJpg's website. Then we ask tinify to compress an image named "unoptimized.jpg" and save it as "optimized.jpg". It is as simple as that.

We can use this even in complex cases where we need to compress a whole folder of images. Here we'll make us of the fs node module.

//compress.js

var tinify = require('tinify'),
    fs = require('fs');

tinify.key = YOUR_API_KEY

let folderName = './dev/images/',
    destFolder = './dist/images/';

fs.readdir(folderName , (err, files) => {
    if (err) {
        console.log(err);
        return;
    }

    files.forEach(file => {
        let fileName = `${folderName }${file}`,
            compressedFile = `${destFolder}${file}`;
        if (fileName.includes('.jpg') || fileName.includes('.png') || fileName.includes('.jpeg')) {
            let source = tinify.fromFile(fileName);
            source.toFile(compressedFile);
        }
   })
});

In this second example, we're basically compressing all the images in our dev/images folder and saving them in our dist/images folder. You can save up to 80% data because of compression, and you can do this with just a few lines of code

The tinify module is an exciting one, you can include it in your npm run scripts or even a build tool like gulp, the options are limitless. You can have a look at the documentation page for the node package here, run wild with it I suggest. I hope you enjoyed this post as it is my first on dev.to.