DEV Community: Oyetoke Toby

How to expose my localhost URL to the public

Oyetoke Toby — Mon, 11 May 2020 18:36:49 +0000

When working on a project on our local environment we are only limited to our localhost URL which is only accessible on our local machine.

However, there may be sometimes when we need to expose and share our localhost project to people or provide a valid HTTPS URL when working with webhooks or wanna test on mobile devices.

What are the available methods and tools you employed in going about this?

How to Setup Selenium on Node Environment

Oyetoke Toby — Sat, 18 Apr 2020 08:15:48 +0000

Your guide to setting up and using Selenium with Node

Selenium is one of the most powerful testing suites with a bunch of tools commonly used for testing purposes. It basically opens up a web page automatically in the web browser and provides useful tools for checks page contents for errors, and/or inducing interaction with the page like clicking on buttons, entering input data and so on.

Selenium has a suite of tools that includes: Selenium IDE, Selenium WebDriver, Selenium Grid, and Selenium Standalone Server.

Selenium WebDriver is a free, open-source, portable software-testing framework for testing web applications quickly. It provides a common application programming interface (API) for browser automation.

Its simply a library that you call from your code, which executes your commands on the browser of your choice.

One of the good things about Selenium is, developers can write tests for Selenium WebDriver in any of the programming languages supported by the Selenium project, including Java, C#, Ruby, Python, and JavaScript (named Bindings).

In this article, we'll explore how to install and setup Selenium/Selenium Webdrive for testing on the node environment. We will also look at how to integrate your local testing environment with third-party tools like BrowserStack, SauceLabs and test runner like Mocha.

Getting Started

The first thing we need to do is to set up a new NPM project and install our testing library. We'll be using a library called selenium-webdriver which is the official library for using Selenium on node environment. There are other alternatives like Webdriver.io and Nightwatch.js

mkdir node_testing && cd node_testing
npm init -y
npm install selenium-webdriver

The next thing to do is to download the right web driver for the browser you will be testing on. You can find details of the list of available web drivers and where to download them from this page. In this article, we'll be showing both Firefox and Chrome, as they are available on almost all Operating Systems.

Head over to the GeckoDriver (for Firefox) or ChromeDriver driver page and download the latest driver for your operating system. Unzip it content into somewhere fairly easy to navigate to, like the root of your home user directory.
Then the next thing is to add the chrome driver or gecko driver's location to your system PATH variable and it should be an absolute path from the root of your home directory, to the directory containing the drivers.

For instance, if you are on Linux and your username is toby, and the downloaded driver is placed in the root of your home directory, the path would be /home/toby and it was Mac Os it would be /Users/toby.

To set your Path in Linux/Mac OS you need to add the export command to the terminal profile you are using.

If you are using Bash terminal you can open .bash_profile (or .bashrc) file and .zshrc if you are using ZSH. To open the files, you need to use your terminal or head over to the file and edit it manually.

If you want to use your terminal, open your terminal and use any of the below commands:

$ open .bashrc
or 
$ nano .bashrc

After opening it, paste the below at the end of the file:

#Add WebDriver browser drivers to PATH
#export PATH=$PATH:<driver_path>
export PATH=$PATH:/home/toby

Once that's done, save and close the file, then restart your terminal to apply the changes. To confirm if your new path is in the PATH variable do echo $PATH and see what's printed in the terminal.

To set your PATH in Windows, you will, first of all, get the path where the driver is download and use the System Environment windows to load your paths. You should watch the below video:

To test if your driver is set PATH successfully, you can try running the name of the driver in your terminal:

chromedriver

You should get something like below:

Once you have successfully set up your PATH, the next thing is to see how to write and run selenium tests on Node using the Webdriver or Selenium Grid.

Using Selenium Web Driver

In the npm project, we created earlier, create a new file, give it any name selenium_test.js and open it in any code editor of your choice.

Now let's run a simple Selenium Webdriver test. The script below will open a chrome browser, input a term, submit the form, and return the page title. If the test is successful, then it should print out Test passed.

const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

const driver = new webdriver.Builder()
    .forBrowser('chrome')
    .build();
driver.get('http://www.google.com').then(function(){
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver\n').then(function(){
    driver.getTitle().then(function(title) {
      console.log(title)
      if(title === 'webdriver - Google Search') {
         console.log('Test passed');
      } else {
         console.log('Test failed');
      }
     driver.quit();
    });
  });
});

To run the script, in your terminal, ensure you are inside your project directory, then run the below command:

node selenium_test.js

Then if there's no error, you should see an instance of Chrome or Firefox browser opening up, navigating to google.com and search the term web driver. Then finally it should print out Test passed when all goes well.

Using Selenium Grid (Remote Testing)

Selenium Grid is a part of the Selenium Suite that helps in running multiple tests across different browsers, operating systems, and machines in parallel. Selenium Grid is a smart proxy server that allows Selenium tests to route commands to remote web browser instances.

Below are some third party integrations of Selenium grid:

On BrowserStack

You can run your Selenium Test remotely using Selenium Grid on BrowserStack. BrowserStack gives you immediate access to the Selenium Grid of 2000+ real devices and desktop browsers. Running your Selenium tests with NodeJS on BrowserStack is quite simple.

Running Selenium tests on BrowserStack requires a username and an access key. To obtain your username and access keys, you'll need to sign up for a Free Trial.

Once you have acquired your access keys, let's see how to run our tests on BrowserStack.

First, you'll need to decide on the OS and Device/Browser combination you'd like to test on.

In the same project directory, create a new file called selenium_grid_test.js and open it in your code editor:

const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;
var capabilities = {
 'browserName' : 'Chrome',
 'browser_version' : '81.0',
 'os' : 'Windows',
 'os_version' : '10',
 'resolution' : '1024x768',
 'browserstack.user' : 'USERNAME',
 'browserstack.key' : 'ACCESS_KEY',
 'name' : 'Bstack-[Node] Sample Test'
}
var driver = new webdriver.Builder().
  usingServer('http://hub-cloud.browserstack.com/wd/hub').
  withCapabilities(capabilities).
  build();
driver.get('http://www.google.com').then(function(){
  driver.findElement(webdriver.By.name('q')).sendKeys('webdriver\n').then(function(){
    driver.getTitle().then(function(title) {
      console.log(title);
      if(title === 'webdriver - Google Search') {
         console.log('Test passed');
      } else {
         console.log('Test failed');
      }      
      driver.quit();
    });
  });
});

You'll need to replace the USERNAME and ACCESS_KEY with your username and your access key.

To run the script, open up your terminal and run node selenium_grid_test.js.
This should have opened a URL, input a search term webdriver, submitted the form and returned the page title. The results will be displayed in your terminal like before and now on the BrowserStack Automate dashboard, where you can see Text Logs, Screenshots of every Selenium command, and a Video Recording of your entire test.

On Sauce Labs

SauceLabs works similarly to BrowserStack and uses Selenium Grid to run selenium tests remotely.

To rewrite the tests above in BrowserStack:

const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until,
    username = "USERNAME",
    accessKey = "ACCESS_KEY";
let driver = new webdriver.Builder()
    .withCapabilities({
      'browserName': 'chrome',
      'platform': 'Windows XP',
      'version': '43.0',
      'username': username,
      'accessKey': accessKey
    })
    .usingServer("https://" + username + ":" + accessKey +
          "@ondemand.saucelabs.com:443/wd/hub")
    .build();
driver.get('http://www.google.com');
driver.findElement(By.name('q')).sendKeys('webdriver');
driver.sleep(1000).then(function() {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});
driver.findElement(By.name('btnK')).click();
driver.sleep(2000).then(function() {
  driver.getTitle().then(function(title) {
    console.log(title);
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
  });
});
driver.quit();

From your Sauce Labs user settings, you can get your user name and access key. Replace the USERNAME and ACCESS_KEY in the variable with your actual user name and access key values.

To run your tests, open your terminal in the project directory and run:

node saucelabs_test.js

This should tun your tests and the result will be shown in your terminal. Just like Browserstack, if you go to your Sauce Labs dashboard page, you'll see all your tests listed; from there you'll be able to see videos, screenshots, and other such data of each test.

Using Mocha (Test Runner) With Selenium

Mocha is a testing framework that can be used to run multiple test case scenarios in Selenium. It simply a library that helps you run code, where you'll be able to point out the part with the issue, also gives the coverage of code as a way of knowing what code impacts what tests.

Mocha comes with a bunch of testing features and power with its simple API interface and makes writing unit tests much easier.

To start using mocha, all you need is to install it and write some test:

npm install --save-dev mocha

Run the above command on the terminal in your project directory to install Jest.

Now create mocha_test.js file:

const webdriver = require('selenium-webdriver');
const { until } = require('selenium-webdriver');
const { By } = require('selenium-webdriver');
const assert = require('assert');

describe('webdriver', () => {
    let driver;
    before(async () => {
      driver = new webdriver.Builder().forBrowser('chrome')
      .build();

      await driver.get(`https://google.com`);
    }, 30000);

    after(async () => {
      await driver.quit();
    }, 40000);

    it('test google search', async () => {

        await driver.findElement(webdriver.By.name('q')).sendKeys('webdriver\n')

        const title = await driver.getTitle()
        console.log(title)
        assert.equal(title, "webdriver - Google Search")
    }, 35000);
  });

To run the tests, we can now do:

node mocha_test.js

Once that's done you should be able to see the results of the tests printed out one after the other in terminal.

Using TestCraft With Zero Code

TestCraft is a powerful test automation platform for regression and continuous testing, as well as monitoring of web applications. All these are possible without a single line of code.

TestCraft is built on Selenium and makes you write your automated tests with zero code. With TestCraft, you can visually create automated, Selenium-based tests using a drag and drop interface, and run them on multiple browsers and work environments, simultaneously. No coding skills needed to get started.

It also has support for End to End testing with any OS, Device or Browser you want to test on. You can basically run your tests on multiple platforms with a single push of a button.

To start using TestCraft, you'll first of all need to Sign up for a free trial.

With TestCraft, you'll be able to:

Create a Custom Test Scenarios: Using the Drag and Drop tool, you can easily create test flows and scenarios depending on what part of the web app you want to test.

Run Tests on Multiple Platforms: After writing and building your tests, right from TestCraft you can run your tests simultaneously on multiple platforms, environments, and devices.

Produce Comprehensive Reports: After running your tests, TestCraft is able to produce comprehensive reports of how your tests perform and what parts needed to be fixed. These reports usually include videos and screenshots pointing out the part with errors and needed fixing.

Fixes Tests Using AI: TestCraft has a unique feature of using AI to automatically fix any broken tests due to changes in your web application to reduce back and forth on development and testing.

Conclusion

In this article, we have been able to explore various ways to use selenium on Node Environment. Additionally, it is also possible to integrate Selenium and related tools like Sauce Labs and BrowserStack with continuous integration (CI) tools like CircleCI.

We have also seen how we can write and run tests on multiple platforms simultaneously without writing a single code using just TestCraft.
If you enjoyed this article, kindly clap and share it with others.

Fastest Way to Generate Random Strings in JavaScript

Oyetoke Toby — Mon, 10 Feb 2020 22:24:33 +0000

There are so many ways to generate random strings in JavaScript and it doesn't really matter which method is faster.

The method I like using most is Math.random()

I made a video on it:

Basically the idea is to use Math.random(), then you can convert it to string and do some simple string manipulation on it.

To get random numbers, I would use something like below:

Math.ceil(Math.random()*10000)

To get random strings with numbers only, I would use:

Math.random().toString().substr(2, 5)

Fortunate .toString() has a param called radix that you can pass in numbers between 2 - 36 which will cast the generated numbers to the radix characters that fall between the given number. The radix is also known as base and its for representing numeric values

To get a random number between 0-1:

Math.random().toString(2).substr(2, 5)

To get a random number between 0-5:

Math.random().toString(5).substr(2, 5)

Starting from 11/12, it will start introducing letters. So to get a fully random string:

Math.random().toString(20).substr(2, 6)

With this you can now write your awesome random string generator:

const generateRandomString = function(){
return Math.random().toString(20).substr(2, 6)
}

To be able to change the length of the output:

const generateRandomString = function(length=6){
return Math.random().toString(20).substr(2, length)
}

One liner

const generateRandomString = (length=6)=>Math.random().toString(20).substr(2, length)

That's all.

If you know of any other faster ways, please I would love to see it in the comment section.

Thanks

How to Build A Feed App With React and Tailwind CSS

Oyetoke Toby — Sun, 02 Feb 2020 08:47:27 +0000

A feed app is a simple app that curates the latest news and articles all over the web and different sources.

So in this article, I will explain how to simply create one using React, Tailwind CSS and my Feed API (https://medrum.herokuapp.com). At the end of this article, we'll be able to build something similar to this - https://ey6n5.csb.app/

If you want a live and hands-on experience, you can follow the video below:

Subscribe to my channel here: https://bit.ly/oyetoketoby

If you are not able to watch the video, you can simply continue reading on below.

Prerequisites

CRA (react)
Axios (http)
Tailwind CSS (CDN) (not necessary)

Setting Up Our Project

The first step here is to set up our react project using Create-React-App. If you don't have it installed, you can read about the installation process here.

To create our app, simply run the command below:

$ npx create-react-app feed-app

After successfully creating our CRA app, let's get into other setups.

Navigate to the src folder in the main directory and create:

A components folder. Then in the components folder, create three files (sidebar.js, main.js, articles.js).
a config.js file

$ mkdir components
$ touch config.js components/sidebar.js components/main.js components/articles.js

The next thing is to add the Tailwind CSS to your project. There are many ways to do this, but the easiest and fastest way is to use the CDN. You can head over here to get the CDN or simply use the one below:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Now in the public folder, open the index.html and update it with the Tailwind CSS.

Feed API - Understanding How Medrum API Works

Before we proceed into coding and the next phase of the project, let's try to understand how the Feed API works. Medrum is built using Python, BeautifulSoup, and Scrapy to scrape articles, news and other various things on the internet.

Medrum has two endpoints, articles and feeds. In articles, you can't really specify which source you want to read from, but you can from feeds.

Basically, to get latest articles, you can send a request to this endpoint - https://medrum.herokuapp.com/articles/ which would return something like below:

[{"title": "Juno Makes Writing Julia Awesome", "url": "https://towardsdatascience.com/juno-makes-writing-julia-awesome-f3e1baf92ea9", "comment_url": null, "ago": "3h", "date": "2020-02-02 04:06:09AM UTC"}, {"title": "Introducing Leya: The Meta-Statistical Lisp-like language", "url": "https://towardsdatascience.com/introducing-leya-the-meta-statistical-lisp-like-language-ef9012affbdb", "comment_url": null, "ago": "8h", "date": "2020-02-01 11:26:32PM UTC"}, {"title": "Transform Reality with Pandas", "url": "https://towardsdatascience.com/transform-reality-with-pandas-96f061628030", "comment_url": null, "ago": "10h", "date": "2020-02-01 09:34:26PM UTC"}, {"title": "Using Stringr and Regex to Extract Features from Textual, Alphanumeric  and Punctuation Data in R", "url": "https://towardsdatascience.com/using-stringr-and-regex-to-extract-features-from-textual-alphanumeric-and-punctuation-data-in-r-2565256c0a77", "comment_url": null, "ago": "13h", "date": "2020-02-01 06:31:13PM UTC"}, {"title": "Getting Browser User Permission with the Permissions API", "url": "https://levelup.gitconnected.com/getting-browser-user-permission-with-the-permissions-api-eafbc9c7f4d7", "comment_url": null, "ago": "15h", "date": "2020-02-01 04:03:06PM UTC"}, {"title": "Get More Out of Google Colab", "url": "https://medium.com/analytics-vidhya/get-more-out-of-google-colab-5bf9d9519a56", "comment_url": null, "ago": "16h", "date": "2020-02-01 03:34:54PM UTC"}]

You can filter the intervals of the articles scraped. It can either be latest, day, week, month. For instance, you can get all articles posted this week using - https://medrum.herokuapp.com/articles/?interval=week.

To be able to get a feed, you must specify a source id, which can be found here - https://medrum.herokuapp.com/sources/

To get dev.to feeds, you'd need to use the dev.to source id (5bbb1af8af62ff6841b4b26e) in the combination below:

https://medrum.herokuapp.com/feeds/?source=5bbb1af8af62ff6841b4b26e&page=1&sort=popular

You can filter the endpoints using page and sort (popular, latest).

Cool right and it's free to use.

You can support me on Patreon - https://www.patreon.com/oyetoketoby to continue building free APIs

Building Our Feed Application

Now that we have understood how the API works, let's see how to incorporate this into our app.

Open the config.js file:

export const SOURCES_URL = "https://medrum.herokuapp.com/sources/"
export const FEEDS_URL = "https://medrum.herokuapp.com/feeds"

This contains the two endpoints we'll be using in our application.

Now open the main.js file and paste the below:

import React, { useState, useEffect } from "react";

import Sidebar from "./sidebar";
import Articles from "./articles";
import { SOURCES_URL, FEEDS_URL } from "../config";

import axios from "axios";

function Main() {
  const [sources, setSources] = useState([]);
  const [articles, setArticles] = useState([]);
  const [source, setSource] = useState([]);


  const fetchSource = id => {
    setSource(id);
    setArticles([]);
    axios.get(`${FEEDS_URL}?source=${id}`).then(res => {
      setArticles(res.data);
    });
  };
  useEffect(() => {
    axios.get(SOURCES_URL).then(res => {
      setSources(res.data);
    });
    fetchSource("5718e53d7a84fb1901e05914");
  }, []);
  return (
    <div className="flex">
      <div className="w-1/4 bg-gray-500 p-3">
        <Sidebar source={source} sources={sources} fetchSource={fetchSource} />
      </div>
      <div className="w-3/4 bg-gray-400 p-3">
        <Articles articles={articles} />
      </div>
    </div>
  );
}

export default Main;

Here's what we did above:

We imported our Sidebar and Articles components
We added three useState hooks - sources, articles, source
We created a function-fetchSource: This will be used in getting a source feeds.
We added a useEffect hooks: This will get the available sources we can get their feeds and also loads a source feed by default.
We passed the source, sources and fetchSource to the Sidebar component and articles to the Articles components as props

The next thing is to open the sidebar.js component:

import React from "react";

function Sidebar({ sources, fetchSource, source }) {
  if (!sources.length) return <p>Loading...</p>

  return (
    <>
      {sources.map((s, k) => {
        if (s.contentType!=="news") return null;
        return (
          <p
          key={k}
            className="mb-3"
style={{background: s.id===source ? "#ccc": "transparent"}}
            onClick={() => {
              fetchSource(s.id);
            }}
          >
            {s.name}
          </p>
        );      
      })}
    </>
  );
}

export default Sidebar;

The above is actually very easy to understand, but here's the breakdown:

Show loading if the sources prop is empty
Map through the sources prop, check if the contentType of the current source is news, then display the name, add an onClick event to call fetchSource with the source id as param and add a background if the current source id is the active source id.

The next thing now is to open the articles.js file:

import React from "react";

function Articles({ articles }) {
  if (!articles.length) return <p>Loading...</p>

  return (
    <>
      {articles.map((a, k) => {
        return (
          <p className="mb-4" key={k}>
            <a href={a.url} target="_blank">{a.title}</a>
          </p>
        );
      })}
    </>
  );
}

export default Articles;

In this we didn't do anything much, we only mapped through the articles prop to display all the feeds.

The last thing to do is to import our main.js component in app.js file:

import React from "react";
import "./styles.css";
import Main from "./components/main";

function App() {
  return (
    <div className="wrapper">
      <Main/>
    </div>
  );
}

That's it! If everything goes well, you should see something like below:

That's all. You can check out a live demo here: https://ey6n5.csb.app/. You can check out the code on code sandbox here: https://codesandbox.io/s/boring-moore-ey6n5

Don't forget to share to others and if you want to support me here's my Patreon: https://www.patreon.com/oyetoketoby

How To Create Productive Bash Command Aliases: Practical Guide

Oyetoke Toby — Wed, 29 Jan 2020 21:59:51 +0000

Typing commands have never been easier using aliases. You can now cut down typing time with these aliases, work smartly, and increase productivity at the command prompt.

If you find yourself typing the same command over and over again, then you'll know how redundant and time-consuming (laziness) these little commands are to type.

Fortunately, you can get rid of that by shortening the length of a command you type by creating an alias.

Command Aliases are powerful commands that make our daily routine easier and faster as a Software Developer, System Admin, Data Scientist, Dev Ops as long as we live on the command line.

This is actually one of the most useful and powerful features of various command shells. You probably use the same commands over and over on a daily basis if you use the command line for almost everything. With aliases, you can make these everyday tasks easier to run.

The alias command allows you to run any command or group of commands (with options and filenames) by using an abbreviated word or single characters that are defined in either .bashrc, .zschrc, .tcshrc, .cshrc or any other file that's sourced.

How to Create A Command Alias

Command Aliases are simply shortcutting names for running commands. They consist of one word or even one letter that you can use instead of typing a longer command.

To create an alias, we'll be using the alias command which is used to create aliases and below is the syntax:

alias name='command'
alias name='command arg1 arg2'

In the syntax above:

alias is the command for creating command aliases
name is the name we'll be calling our command alias
command is the command to run when we type the alias command

So with all these, we can create a simple example as below:

alias clr='clear'

In the example above, we have shortened our clear (that clears our command line) command to clr using the command alias. So when you type clr now, it calls the clear command and clears our command.

You can even shorten it down to c, to make it a one letter command. Isn't that cool?

Now if you run the command above, you would only be able to use it in your current command line and remains in effect only during the current login session. Once you log out or reboot the system the alias will be gone. You can fix this by making it permanent.

So to do this, you will need to define the alias command in your shell/terminal settings/config/profile file. Most system-wide aliases are usually defined in the /etc/bashrc file, but in some cases, you will still need to redefine it in your shell config file.

Alias command is built into various shells including ksh, tcsh/csh, ash, bash, and others. Below are files you should look for if you are using any of below shells:

Bash: .bashrc, .bash_aliases
Zsh: .zshrc
Fish: .config/fish/fish.config
Csh: .cshrc
Tcsh: .tcshrc
Ksh: .kshrc
Ash: .ashrc

So for instance, if you are using the default bash, you can add the alias to your ~/.bashrc file, enter:

vi ~/.bashrc

Then you can now add the following line to the file:

alias clr='clear'

Save and close the file.

Now, reload the .bashrc file using the following command:

$ source ~/.bashrc

With this, you can now run clr anytime forever (as long as your system is alive).
To remove an alias, you can either run the unalias command as below:

unalias <alias_name>
unalias -a # to remove all

Or remove the command from the file and reload it using source.

Command Alias Guidelines

Before you start adding new command aliases to your terminal, there are a couple of things you need to know and keep to. Aliases, in many ways, makes it easier and efficient to execute many tasks. But it can make you end up not remembering the actual command and options anymore or maybe creates conflict between the existing crucial system commands.

To avoid this, here is a general set of rules to abide by when creating a command alias:

There should be some substantial shortening in terms of typing. Converting a four-letter command to two letters is hardly worth it. eg. No need to create an alias for ls as l.
You should not create a separate alias for every possible command-line option. Do not just rename commands just because you can. For instance, do not rename ls to l.
These should be commands that you (semi) regularly use, not something that you use very rarely. You will forget that you created an alias exist anyway.
Beware of one letter aliases, you can accidentally set it off. Using something like r for the shutdown is a bad idea.
Preserve the name of the command if possible. you are just adding options that you might forget. eg. cp -iv can be aliased to cp (and not CPV or c).
Having said that, change or modify the command name slightly, if you also want to execute the original command without the specified options occasionally.
If it is not a one-liner, try a shell script rather than an alias.

Popular Command Aliases

There are tons of command aliases you can create and it really depends on your creativity and the commands you used most.

Below are popular command aliases:

alias pl='pwd; ls'
alias dirs="ls -al | grep '^d'"
alias lf="ls -aFG"
alias lm="ls -al|more"
alias h="history"
alias clr="clear" # Clear your terminal screen
alias ip="curl icanhazip.com" # Your public IP address
# MS-DOS
alias dir="ls"
alias copy="cp"
alias rename="mv"
alias md="mkdir"
alias rd="rmdir"
alias del="rm -i"
# GIT
alias ga='git add'
alias gaa='git add .'
alias gau='git add --update'
alias gb='git branch'
alias gbd='git branch --delete '
alias gc='git commit'
alias gcm='git commit --message'
alias gcf='git commit --fixup'
alias gco='git checkout'
alias gcob='git checkout -b'
alias gcom='git checkout master'
alias gcos='git checkout staging'
alias gcod='git checkout develop'
alias gd='git diff'
alias gda='git diff HEAD'
alias glg='git log --graph --oneline --decorate --all'
alias gld='git log --pretty=format:"%h %ad %s" --date=short --all'
alias gm='git merge --no-ff'
alias gma='git merge --abort'
alias gmc='git merge --continue'
alias gnit='git init'
alias gp='git push'
alias gpl='git pull'
alias gpom="git push origin master"
alias gpr='git pull --rebase'
alias gr='git rebase'
alias gs='git status'
alias gss='git status --short'
alias gst='git stash'
alias gsta='git stash apply'
alias gstd='git stash drop'
alias gstl='git stash list'
alias gstp='git stash pop'
alias gsts='git stash save'
# NPM
alias ni='npm install'
alias nis='npm install --save'
## get rid of command not found ##
alias cd..='cd ..'

## a quick way to get out of current directory ##
alias ..='cd ..'
alias ...='cd ../../../'
alias ....='cd ../../../../'
alias .....='cd ../../../../'
alias .4='cd ../../../../'
alias .5='cd ../../../../..'
alias path='echo -e ${PATH//:/\\n}'
alias now='date +"%T"'
alias curdate='date +"%d-%m-%Y"'
## Browsers ##
alias firefox='/opt/firefox13/firefox'
alias chrome='/opt/google/chrome/chrome'
alias opera='/opt/opera/opera'

#default ff
alias ff=firefox

#default browser
alias browser=chrome
## pass options to free ##
alias meminfo='free -m -l -t'

## get top process eating memory
alias psmem='ps auxf | sort -nr -k 4'
alias psmem10='ps auxf | sort -nr -k 4 | head -10'

## get top process eating cpu ##
alias pscpu='ps auxf | sort -nr -k 3'
alias pscpu10='ps auxf | sort -nr -k 3 | head -10'

## get GPU ram on desktop / laptop##
alias gpumeminfo='grep -i --color memory /var/log/Xorg.0.log'

Conclusion

Command Aliases is a great way to reduce the time spent on typing and remembering commands. It increases your productivity on the shell/terminal. However, with the goodness of aliases, you should not just create any command alias just because you can and override other commands.

If you enjoyed this, share.

How to Install and Setup Python on Windows 10

Oyetoke Toby — Sun, 22 Dec 2019 12:35:45 +0000

Python is a very powerful and yet simple programming language and it is available on a wide variety of platforms which includes Windows, Linux and Mac OS X. To start using Python, you’ve to understand how to install and set up the Python environment.

If you are a Windows 10 user and planning to learn Python and want to set it up, you are in the right place.

Below's a step by step video on how to do that:

If you can't watch the video for some reason, let's see how to just do that...

Step 1: Downloading Python

There are two major Python versions: 2.7 and 3.x. However, support for 2.x will be dropping soon, so I'll suggest you go for 3.x. Moreover, by default, you will get the 3.x version if you trying to download from the python.org site now.

The latest and current source code, binaries, documentation, news, etc., are always available on the Python official website https://www.python.org/.

So head over to the download page: https://www.python.org/downloads/ to get the latest version.

Step 2: Installing Python

Once you have successfully downloaded python, the next you would need to do is install it. Double click on the downloaded file and follow the installation instructions on the install wizard.

You can select either select any of the two options depending on how you want your python to be installed. However, I would suggest you go for the default one since it does the installation automatically. Also, ensure you check the Add to Path options. This helps you automatically add your Python Path to your system variables.

Once you have followed the installation instructions and successfully installed python, you should be able to use Python now.

Open your Windows 10 Command prompt. You can do that by using Win + R key combo and type in cmd and press enter. Then try running python and see if you get something like below:

then you are good to go. However, if you get something like below:

'python' is not recognized as an internal or external command,
operable program or batch file.

then that means your Python Path is not set correctly.

You can do that in the System Environment variables. You can follow the video below to see how to do that:

You can subscribe to my Youtube channel: http://bit.ly/oyetoketoby

Is it safe to ship JavaScript Source maps to production?

Oyetoke Toby — Wed, 11 Dec 2019 20:56:32 +0000

Source maps are basically files generated while building for production that can help revert a combined/minified file back to an original state.

Most JavaScript and CSS sources are usually minified and source maps serve as a memory map to the compressed files. It's generally a good practice to minify and combine your assets (Javascript & CSS) when deploying to production. This process reduces the size of your assets and dramatically improves your website's load time.

When you minify and compress your JavaScript or CSS files, the output files are usually minified, unreadable and totally different from the original source created by a developer. This is actually one of the easiest ways to increase your website performance.

When you build your application for production, source maps are usually generated alongside your built files which are minified already. They hold the original sources of your code and helps in debugging your code live.

With source maps, you can click on a certain line and column number in your generated JavaScript, and that will do a lookup in the source map which will return the original location. Most developer tools can now parse the source map automatically and look as if you're running the unminified and uncombined files.

However, is it safe to leave that in production because, with the source map, you can generate the real source code and able to read the unminified code?

I am not a security guy or so, I am just curious if there could be a way that could make your site insecure. Unless you have your secret/api keys hard corded or something similar.

So is it safe to ship source maps to production?

How to Deploy Your Frontend Application on AWS S3

Oyetoke Toby — Tue, 10 Dec 2019 13:38:59 +0000

You can now deploy your frontend application on AWS with S3 static web hosting features.

This is a second article of the How to Deploy Your Frontend Applications series - where I explain how to deploy any frontend applications (react, vue, angular, svelte, static site) to various static site web hosting.

In my previous article, I explained how to Deploy Your Frontend Application on Surge.

So in this tutorial, I will be showing you how to install your frontend application on AWS S3.

AWS S3 is a simple online storage solution known as a bucket with stable, high performance, security and highly scalable service. AWS S3 is designed to make web-scale computing easier for developers.

With the AWS S3 static web hosting feature, you can easily deploy your frontend applications with just two or more clicks right from your S3 bucket.

You don't have to worry about the cost, because AWS' free tier has a very high limit for S3 and its way cheap. Another good thing is S3 is fast and you can choose from data centers you like across the supported globe. You can also add your custom domain easily.

Setting Up AWS S3

Let's see how to set up our AWS account for deployment.

Step 1 - Account

The first step here is to set up your AWS account so we can deploy your frontend application. If you don't have an account already, go create an AWS account here: https://portal.aws.amazon.com/billing/signup. If you have just login to your AWS management console here: https://signin.aws.amazon.com/signin.

Step 2 - Set Up S3

Once you have successfully created an account or you logged in successfully to the AWS management console, the next thing we need to do is set up S3.

On the AWS console, click on Services. There should be a dropdown, look for S3 and click on it.

This should take you to a page that will show all available buckets. In S3, a bucket is a collection of objects. A bucket is a virtual container while objects are files belonging to that container.

Click on the Create Bucket to create a new bucket your frontend application will be deployed to. You should see a popup that will prompt for the bucket name and the region you want it to be deployed to.

Bucket names are usually unique across your AWS account globally. You should also name your bucket name after your domain name. In this tutorial, I will be using react-infinitescrollhook (name of the frontend application I will be deploying).

Once you are done with that, click on Next to move to the Configure tab. There's really nothing to set up in this tab, just click on Next.

On the Set Permission, you will be able to set the permission of the bucket and its objects. You will need to uncheck Block all public access, since we will be deploying on this bucket, we will need the public to access to the built files.

Once you are done with that, click on Next to review your settings and click on Create Bucket to continue after review your settings.

Tada! You have successfully created a new bucket. You should see it in the list of buckets.

The next thing now is to enable static web hosting on this and add some settings. Now click on the bucket you just created, you should see something like below:

Click on Properties tab and select Static website hosting box. This should show a popup. Click on Use this bucket to host a website and it will prompt for an index.html file. You can also add an error file, I am used to using 200.html file. Once you are done with that, click on Save to enable the feature.

Ensure you take note of the URL shown in the Static website hosting box because that would be the link to access your application. If you try to navigate to the URL given, for instance, mine, you would get 403 error due to S3 Policies we have not yet set up.

In S3, buckets can have different policies. The policy defines who can do what to which objects in a given bucket.

In the case of deploying your app, you might want to set up your bucket such that you are the only one that can write to it but others can view it.

To do this, click on the Permission tab and click on Bucket Policy. You should see a text editor on this page where the policies will be saved.

Policies are designed in JSON documents format. Copy and paste the below policy to the text box and change the placeholder to your bucket's name:



{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::react-infinitescrollhook/*"
        }
    ]
}

And that's all for our S3 setup, you can try opening the link and you would get a 404, which means we only need to deploy our application.

Step 3 - Set Up AWS CLI

If you already have AWS CLI set up on your system or you don't want to set it up, you can skip this and move to the next step.

To install and use the AWS CLI, you would need Python and Pip installed. You can install AWS CLI with the command below:



$ pip3 install awscli --upgrade --user

You can read more about installing AWS CLI on your platform here: https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html

Once you are done with that the next step is to configure it using the below:



$ aws configure

The command above will prompt for some details like AWS access key ID, AWS secret access key, region, and format. The first two are required and these are your account credentials. You can generate new credentials within AWS Identity and Access Management (IAM) if you do not have them already.



AWS Access Key ID [None]: <aws_access_key_id> 
AWS Secret Access Key [None]: <aws_secret_access_key>
Default region name [None]: us-west-1 
Default output format [None]: json

You can read more about setting up your AWS CLI here: https://docs.aws.amazon.com/comprehend/latest/dg/setup-awscli.html

Deploying Your Frontend Application

The next and final step is to deploy your frontend application. There are two methods to do this, the first method is using the S3 Uploader while the second one is using the AWS CLI.

But before that, you will need to have built your frontend application if you are using Frontend Library like React, Vue, Svelte, or Angular. You can do that by running:



$ npm run build



$ yarn build

Using The S3 Uploader

Once you are done with that, then you can now upload the build or dist folder.

Now head over to the AWS S3 console, click on the Bucket you are working on and click on Upload.

You should see a pop up where you can upload your build, dist or static file contents. There's a little trick here, you need to drag the contents of the folder, not the folder itself. S3 is expecting you to have the index.html file at the top-level of your bucket. So drag all contents of the folder and click on Upload:

Once your files are uploaded successfully, you should be able to see the files in your buckets.

Tada! Your frontend application is live, you can now preview your application using the bucket's URL.

If you can't find that, fear not you can still get it by double-clicking on the index.html, click on Properties and under Object Url you should see your bucket URL.

Using AWS CLI

Uploading your files every time you add changes is redundant and time-consuming.

However, with the AWS CLI tool, you can reduce the step and deploy it right from your command line. You would need to set it up like I explained above before you can use it.

To deploy using the AWS CLI, all you need is the command below:



$ aws s3 sync <folder_path> s3://<bucket_name>

Now head over to your application directory in the command line and run the command above.

So in my case, it would be:



$ aws s3 sync /build s3://react-infinitescrollhook

Your application should be deployed now!

If you are using a frontend library or build system, you can make the deployment process much faster using the NPM scripts command.

Open your package.json, head over to the scripts section and add deploy command:



"deploy": "aws s3 sync build s3://react-infinitescrollhook"

With that, you can now run the below command to deploy your app:



$ npm run deploy

Another thing you can do is to reduce the step in running the build command and deploying the application:



"s3-deploy":"aws s3 sync build s3://react-infinitescrollhook",
"deploy":"npm run build && npm run s3-deploy",

Then with the above command, you can build and deploy your application with just a single command line.

How to Make HTTP Requests In React

Oyetoke Toby — Sat, 09 Nov 2019 20:59:48 +0000

We often make HTTP requests to an API endpoint or server to get data, for instance, user data, using various methods. This is a common task in web development, and in this video, I will be showing you how to do that.

We'll be using Indreed API in this video, which is a free job search as a service built on Python.

There are many ways to send HTTP requests either using the native Javascript APIs or using a library that reduces the steps you take to send a request with the native API.

Lets get started...

How to Get H1B And Work Visa in Us or Canada?

Oyetoke Toby — Thu, 25 Jul 2019 06:01:19 +0000

I am still on leave due to illness, so I am off work and internet.

But I would like to know how to get an H1B work visa from US or Canada.

Please share to others.

CSS Battle Ground - #1

Oyetoke Toby — Sun, 30 Jun 2019 09:20:49 +0000

I am a fan of CSSBattle.dev and been enjoying trying out my css skills on the awesome site. In this video, I recorded my screen while trying out their new challenges.

Subscribe to my channel and ensure you share.

What are the different roles of UI, UX and Frontend Developers?

Oyetoke Toby — Thu, 27 Jun 2019 14:56:06 +0000

These positions and their roles are conflicting. Can I get the roles of each of these positions?

UX/UI Designer
UX/UI Developer
Frontend Developer