Forem: Abhishek Prakash

Currency Converter: A Browser Extension

Abhishek Prakash — Sat, 13 Jun 2020 16:21:09 +0000

Originally posted on blog.abhishekprakash.com

Motivation

Few weeks back I tried to create a browser extension as a lab's day project. The idea was to ease the development experience, like filling up a long form for testing purpose or add/remove features without changing the user. Although I was not able to complete it in two day's time, but I gained some insight which may help folks who are new to it.

Problem Statement

I am an Indian living in Sweden and I own USD, SEK (Swedish Krona) and INR (Indian Rupee) and I very often look for the exchange rate. I find it very frustrating to open a new tab to look for the rate. Can we do something about it?

Solution

Sure, we can!

We can create a Currency Converter extension and add it to Chrome and Firefox (I am mostly on Chrome, but use Firefox as a secondary browser). In this case we don't have to open a new tab and google for current rate.

Here is a glimpse of what we are going to build

Why Browser Extension

My sole purpose was to ease the developer/tester experience by providing an extra interface to tweak the behaviour of the application, but there are a lot of interesting things that can be done with browser extensions. But before coming to benefits, let's see what are browser extensions.

What are Browser Extension

An extension adds features and functions to a browser. It’s created using familiar web-based technologies—HTML, CSS, and JavaScript and has its own set of APIs. This means it can leverage all the existing APIs and has access to all new Extension APIs. A great power boost.

Benefits

We can get creative and achieve following.

Enhance or complement a website
Add theme to all websites a user visits
Add/Remove content from web page (AdBlocker)
Add tools and new browsing features
Games
Development Tools

Browser Extension Architecture

Here's what we will achieve

manifest.json is the heart of our extension. It contains basic metadata such as its name, version and the permissions it requires. It also provides pointers to other files in the extension. In our addon, the manifest file points to a browser action.

The browser action consists of icons and JavaScript, HTML and CSS files.

The Popup or our addon makes a call to the currency exchange endpoint and retrieves the information related to current rate.

Let's dive in

This is our folder structure (not very fancy)

|-- currency-converter
|   |-- manifest.json
|   |-- icons
|   |   |-- currency-32.png
|   |   |-- currency-48.png
|   |-- popup
|   |   |-- currency-converter.html
|   |   |-- currency-converter.js
|   |   |-- currency-converter.css

Manifest File

Every extension has a manifest.json file and so does ours (:)) with below content

{
  "manifest_version": 2,
  "name": "Currency Converter",
  "version": "1.0",

  "description": "Adds a browser action icon to the toolbar, to convert the currency.",
  "icons": {
    "48": "icons/currency-48.png"
  },

  "permissions": [],

  "browser_action": {
    "default_icon": "icons/currency-32.png",
    "default_title": "Currency Converter",
    "default_popup": "popup/currency-converter.html"
  }
}

Most of the keys in the manifest.json file are self explanatory. browser_action points to the html file that will be rendered when the currency converter icon is pressed.

The icons will be used to represent the extension in components such as the Add-ons Manager.

Popup HTML

Next we will create popup/currency-converter.html. This will add markup to the popup and point to css file for styling and js file for adding behaviour.

We are only targeting

USD (US Dollars)
INR (Indian Rupee)
SEK (Swedish Krona)
GBP (Great British Pound)

But, this could be extended to add more currencies. Below markup is very crude (for the sake of this tutorial) and not very scalable.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="currency-converter.css" />
  </head>
  <body>
    <h1>Currency Converter</h1>
    <div>
      <input type="text" placeholder="Enter amount" />
    </div>
    <div class="flex">
      <label for="from-dd">From
        <select name="from" id="from-dd">
          <option value="USD">US Dollar</option>
          <option value="INR">Indian Rupees</option>
          <option value="SEK">Swedish Korona</option>
          <option value="GBP">British Pound</option>
        </select>
      </label>
      <label for="to-dd">To
        <select name="to" id="to-dd">
          <option value="USD">US Dollar</option>
          <option value="INR">Indian Rupees</option>
          <option value="SEK">Swedish Korona</option>
          <option value="GBP">British Pound</option>
        </select>
      </label>
    </div>
    <button class="btn_currency">Convert Currency</button>
    <h2 class="response"></h2>
    <script src="currency-converter.js"></script>
  </body>
</html>

Popup CSS

Next create popup/currency-converter.css file and add below styles for basic styling. Its very basic styling and very straight forward.

html,
body {
  box-sizing: content-box;
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  font-family: fantasy, cursive, Arial, Helvetica, sans-serif;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
}

input[type="text"] {
  background: transparent;
  border-radius: 6px;
  border: 1px solid #dfe1e5;
  color: #70757a !important;
  font-size: 14px !important;
  height: 36px;
  padding: 0 0 0 12px;
  margin-bottom: 10px;
  font-family: inherit;
}

select {
  height: 36px;
  font-size: inherit;
  width: 150px;
  margin-left: 5px;
  font-family: inherit;
}

label {
  margin-right: 10px;
  font-size: 14px !important;
}

label:last-child {
  margin-right: 0;
  margin-left: auto;
}

button {
  height: 36px;
  border-radius: 6px;
  margin-top: 10px;
  display: flex;
  margin-left: auto;
  font-size: 14px;
  margin-bottom: 20px;
  font-family: inherit;
  cursor: pointer;
  line-height: 36px;
  background: white;
}

.response {
  font-size: 2em;
  margin: 0;
}

Popup Js

Last in the line is the popup/currency-converter.js which adds interactivity to the popup. Fetches the latest currencies from https://api.exchangeratesapi.io and calculates the converted amount.

const btn = document.querySelector(".btn_currency");
const fromCurrencyDD = document.querySelector("#from-dd");
const toCurrencyDD = document.querySelector("#to-dd");
const amoutText = document.querySelector('input[type="text"]');
btn.addEventListener("click", fetchCurrency);

function fetchCurrency() {
  const fromCurrency = fromCurrencyDD.value;
  const toCurrency = toCurrencyDD.value;
  fetch(`https://api.exchangeratesapi.io/latest?base=${fromCurrency}&symbols=${fromCurrency},${toCurrency}`)
    .then(res => res.json())
    .then(res => addCurrencyVal(res));
}

function addCurrencyVal(data) {
  console.log(data);
  const responseDiv = document.querySelector(".response");
  const baseAmount = Number(amoutText.value);
  const response = `${baseAmount} ${data.base} = ${(
    baseAmount * data.rates[toCurrencyDD.value]
  ).toFixed(2)} ${toCurrencyDD.value}`;
  responseDiv.textContent = response;
}

Phew!! That was dead simple. This is very similar to a web application with an addon of manifest.json.

Now, how do we test it?

Test web extension

The above extension can be run on both Chrome and Firefox. But, if you are working on a more complex extension there can be situations where its not cross browser compatible. There is an awesome webextension polyfill, thanks to Mozilla.

Chrome

Follow below steps to run the extension on Chrome

Open Chrome and navigate to chrome://extensions/.
Enable the Developer Mode (on the right side).
Click on Load Unpacked and navigate to the root of web extension build folder (in our case its `currency-converter) and then select.

Voila! You should be able to see the extension in the list of extensions.

Whenever the code is updated the extension needs to be reloaded

Firefox

Follow below steps to run the extension on Mozilla

Open Firefox and navigate to about:debugging.
Click on This Firefox on the left hand side.
Click on Load Temporary Add-on
Navigate to the manifest file (in our case currency-converter/manifest.json) and select.

And the extension should be available by now.

Conclusion

By using web technologies we are able to build our own extension.

This is a very basic example, but its enough to move in right direction and create something more complex in nature.

Want to learn more?

When I started working on extension, I was going through Chrome extension documentation, and it was such a pain. I would recommend any one and everyone to start going through MDN docs.

Peace!
If you have any questions or feedback, please feel free to comment below.

Configure React from Ground Up

Abhishek Prakash — Mon, 13 Apr 2020 10:17:39 +0000

Originally posted on blog.abhishekprakash.com

Introduction ꒰⑅•ᴗ•⑅꒱

The easiest and the most effective way to write react code is to spin up a dev environment via create react app. I bet everyone who is into React development has used create react app. The best and the worst thing about CRA is abstraction. It abstracts away the details which are required for the setup. For someone new to react, its heaven as that person can solely focus on learning react. For a seasoned/senior developer, it makes more sense to know how the setup works. In this post, I will setup the dev environment to react from the ground up using Webpack and Babel.

Why do we need Webpack and Babel? (◞‸ლ)

Webpack

At its core, webpack is a static module bundler for modern JavaScript applications.

We can structure our application into multiple files and in the end webpack bundles out app into a bundle, ready to be served.

Babel

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments.

We can write ESNext code and JSX in our application and the transpiling will be taken care of by babel.

What is our aim? (｀_´)ゞ

Our aim is to have a basic setup which -

understand jsx and new javascript syntax (ESNext)
load CSS and images via import
is able to spin up a dev server and support hot reloading

In the rest of the post, we will try to achieve the above-mentioned points.

Warmup ＼(●o○;)ノ

We will start with creating a directory react-webpack

mkdir react-webpack
cd react-webpack

Next, we will create package.json

yarn init -y

-y flag above skips the interactive session of yarn. Feel free to omit the --yes flag if you want more control over your creation of package.json.

Note: I am using yarn as a package manager but you can use npm as well

Once we have our package.json ready, we need to install webpack-cli and webpack-dev-server.

Webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom webpack project.

Webpack Dev Server serves a webpack app and updates the browser on changes.

yarn add -D webpack-cli webpack-dev-server

Now, it's time to install babel and it's plugins/presets.

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

We also need webpack plugins and loaders for files, css, and styles.

yarn add -D css-loader file-loader style-loader html-webpack-plugin

Phew, too many dependencies! (◣_◢)

Let's see what all do -

@babel/core - The core babel library
@babel/preset-env - It is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!
@babel/preset-react - Transform React JSX into regular JavaScript code
babel-loader - Babel loader for webpack. This package allows transpiling JavaScript files using Babel and webpack.
css-loader - The css-loader interprets @import and url() like import/require() and will resolve them.
file-loader - The file-loader resolves import/require() on a file into a url and emits the file into the output directory.
style-loader - Inject CSS into the DOM.
html-webpack-plugin - The HtmlWebpackPlugin simplifies the creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.

Finally, add react and react-dom

yarn add react react-dom

Code Walk ᕕ( ᐛ )ᕗ

In the previous section, we have added the required dependencies. In this section, we will walk together writing some code. (^∇^)

Add source code related to the application

Let's create a src directory under the root and add index.js, index.html, App.js and App.css

mkdir src
touch src/index.js src/index.html src/App.js src/App.css

Now, it's time to update the files. You can use the editor of your choice. I will first add some basic html to index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

<!-- src/index.html -->

Time for our first component

// src/App.js

import React from "react";
import "./App.css";
import reactImg from "./assets/react.svg";

const App = () => {
  return (
    <>
      <div>Welcome to React Webpack</div>
      <img src={reactImg} />
    </>
  )
};

export default App;

Throw in some minor styles

/* src/App.css */

div {
  background-color: teal;
}

img {
  display: flex;
  height: 50px;
  width: 50px;
}

Finally wire them together in index.js, the entry point of this application

// src/index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.querySelector("#root"));

Configure babel

The above code in the present state means nothing to the browser. We have to make it browser friendly and for that, we need to configure our babel. Let's create .babelrc file in the root and add below line to it.

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

Configure webpack

First create webpack.config.js in the root and add below code to it.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: ''
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: "[name]__[local]___[hash:base64:5]"
              },
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + '/src/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ]
}

Well, a lot is going on. Let's break and see what's happening.

entry - Represents the entry point of the application. In our case, it's src/index.js
output - Represents the outcome. In our case, the application is bundled in bundle.js and is stored in the dist directory.
resolve - It resolves the list of extensions
module - Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.
plugins - While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

Run the app in dev mode

Almost there! Finally, add the below script to script section of package.json

script: {
  "start": "webpack-dev-server --open --hot --mode development"
}

And to run the application, open a terminal and hit

yarn start

Conclusion ᕦ༼ ͡° ͜ ͝° ༽ᕤ

In this post, we have successfully created our react workspace using webpack and babel. It can easily be extended as per the use case, like adding strict typings support (Flow or TypeScript), etc.

Peace!
If you have any questions or feedback, please feel free to comment below.

S.O.L.I.D: Open/Closed Principle

Abhishek Prakash — Fri, 13 Mar 2020 15:01:26 +0000

What is S.O.L.I.D by the way?

As per Wiki:

In object-oriented computer programming, SOLID is a mnemonic acronym for five design principles intended to make software designs more understandable, flexible and maintainable.

SOLID is an acronym for 5 important design principles when doing OOP. It was first introduced by Robert C. Martin (Uncle Bob), in his 2000 paper Design Principles and Design Patterns.

SOLID stands for -

S - Single Responsibility Principle
O - Open/Closed Principle
L - Liskov's Substitution Principle
I - Interface Segregation Principle
D - Dependency Inversion Principle

In this article, I will be covering O - Open/Closed Principle.
Note - The examples will be in Java, but applies to any OOP language.

O - Open/Closed Principle (OCP)

The Open/Closed Principle (OCP) is the SOLID principle which states

Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification.

In simple words, we should strive to write code that can be extended without the need for modification, when a change request is made by the customer or a product owner.

Anti OCP usage

We will first look at an example that breaks the OCP principle.

// GeneralInvestment.java
public class GeneralInvestment {
  public Double initialAmount;
  public int year;
  public Double tax;

  public GeneralInvestment(Double initialAmount, int year, Double tax) {
    this.initialAmount = initialAmount;
    this.year = year;
    this.tax = tax;
  }
}

//InvestmentManager.java
public final class InvestmentManager {
  public Double calculateReturn(GeneralInvestment investment) {
    return investment.initialAmount + (investment.year * investment.initialAmount * investment.tax);
  }
}

So, we have a GeneralInvestment class and an InvestmentManager class. The sole purpose of InvestmentManager is to calculate return of type GeneralInvestment.

Going further we have a feature request to calculate return on AdvancedInvestment. Let's add some code to accomplish that.

//AdvancedInvestment.java
public class AdvancedInvestment extends GeneralInvestment {
  public Double incremental;
  public int period;

  public AdvancedInvestment(Double initialAmount, int year, Double tax, Double incremental, int period) {
    super(initialAmount, year, tax);
    this.incremental = incremental;
    this.period = period;
  }
}

Now, we have AdvancedInvestment in place. Let's update our InvestmentManager class to handle new case.

public final class InvestmentManager {
  public Double calculatereturn(GeneralInvestment investment) {
    if (investment instanceof AdvancedInvestment) {
      AdvancedInvestment advancedInvestment = (AdvancedInvestment) investment;
      return advancedInvestment.initialAmount
          + (advancedInvestment.year * advancedInvestment.initialAmount * advancedInvestment.tax)
          + (advancedInvestment.period * advancedInvestment.incremental * advancedInvestment.tax);
    } else {
      return investment.initialAmount + (investment.year * investment.initialAmount * investment.tax);
    }
  }
}

This works!
But, it violates the OCP since InvestmentManager class is

Closed for extension
Open for modification

OCP in action

Let's try and implement the above-mentioned scenario without breaking OCP.

Step 1: Create an interface

// Investment.java
interface Investment {
  public Double calculateReturn();
}

Step 2: Update GeneralInvestment and AdvancedInvestment classes by implementing Investment interface

//GeneralInvestment.java
public class GeneralInvestment implements Investment {
  public Double initialAmount;
  public int year;
  public Double tax;

  public GeneralInvestment(Double initialAmount, int year, Double tax) {
    this.initialAmount = initialAmount;
    this.year = year;
    this.tax = tax;
  }

  public Double calculateReturn() {
    return initialAmount + (year * initialAmount * tax);
  }
}

//AdvancedInvestment.java
public class AdvancedInvestment implements Investment {
  public Double incremental;
  public int period;
  public GeneralInvestment investment;

  public AdvancedInvestment(Double initialAmount, int year, Double tax, Double incremental, int period) {
    this.incremental = incremental;
    this.period = period;
    this.investment = new GeneralInvestment(initialAmount, year, tax);
  }

  public Double calculateReturn() {
    return investment.initialAmount + (investment.year * investment.initialAmount * investment.tax)
        + (period * incremental * investment.tax);
  }
}

Step 3: FInally update the InvestmentManager class

//InvestmentManager.java
public final class InvestmentManager {
  public Double calculateReturn(Investment investment) {
    return investment.calculateReturn();
  }
}

Here is the UML diagram to reduce verbosity:

Here we go! Going further if we have a new requirement to add different types of Investment we can create a new class, implement the Investment interface and we are done. No need to modify any existing code.

TL;DR

Always keep in mind to make your code open for extension and closed for modification. This will make the maintenance of code so easy.

The example in this post has used a compositional design pattern (Strategy Pattern) to achieve OCP, but it can also be achieved through the use of inheritance.

Peace!
If you have any questions or feedback, please feel free to comment below.

S.O.L.I.D: Single Responsibility Principle

Abhishek Prakash — Sat, 07 Mar 2020 00:10:21 +0000

What is S.O.L.I.D by the way?

As per Wiki:

In object-oriented computer programming, SOLID is a mnemonic acronym for five design principles intended to make software designs more understandable, flexible and maintainable.

SOLID is an acronym for 5 important design principles when doing OOP. It was first introduced by Robert C. Martin (Uncle Bob), in his 2000 paper Design Principles and Design Patterns.

SOLID stands for -

S - Single Responsibility Principle
O - Open/Closed Principle
L - Liskov's Substitution Principle
I - Interface Segregation Principle
D - Dependency Inversion Principle

In this article, I will be covering S - Single Responsibility Principle.
Note - The examples will be in Java, but applies to any OOP language.

S - Single Responsibility Principle (SRP)

A class should have one, and only one reason to change.

In programming, the Single Responsibility Principle states that every module or class should have responsibility for a single part of the functionality provided by the software.

Anti SRP Usage

An ~~action~~ example speaks louder than voice

package app.singleResponsibility;

public class Employee {
  private String name;
  private int perHourRate;

  public Employee(String name) {
    this.name = name;
  }

  public String getName() {
      return name;
  }

  public void setPerHourRate(int rate) {
    this.perHourRate = rate;
  }

  public int getPerDayRate() {
    return perHourRate * 8;
  }


  public String markAttendance() {
    return String.format("%s is present", name);
  }
}

And here goes the UML Diagram for the geeks -

So we have a very basic Employee class with two private attributes and a few public methods. At first glance, it looks fine, but it's actually breaking SRP.

Employee class not only deals with Employee details but it is also concerned with the implementation of the markAttendence method. It has two reasons to change now.

SRP in Action

The previous example violates the SRP law of single responsibility. Let's dig a little further and try to correct the Employee class.


// Employee.java
package app.singleResponsibility;

public class Employee {
  private String name;
  private int perHourRate;

  public Employee(String name) {
    this.name = name;
  }

  public String getName() {
      return name;
  }

  public void setPerHourRate(int rate) {
    this.perHourRate = rate;
  }

  public int getPerDayRate() {
    return perHourRate * 8;
  }
}

The updated UML diagram for Employee class -

We have removed the markAttendance method from the Employee class to make it compliant with SRP.

Let's go further and create the AttendanceTracker class to deal with attendance.

// AttendanceTracker.java
package app.singleResponsibility;

public class AttendanceTracker {
  private Employee emp;

  public AttendanceTracker(Employee emp) {
    this.emp = emp;
  }

  public String markAttendance() {
    return String.format("%s is present", emp.getName());
  }
}

UML diagram for AttendanceTracker class

AttendanceTracker class takes an employee object as a dependency and marks the attendance of that employee.

Now both the classes adhere to the Single Responsibility Principle and it makes the maintenance and testing a breeze.

TL;DR

The more responsibilities (reason to change) a class has, it's going to get harder to implement some new features and the maintenance will be a growing pain that will burn more time as the project grows, adding more complexity and making the classes responsibilities strongly coupled to each other.

So, always have small classes with a single responsibility.

Peace!
If you have any questions or feedback, please feel free to comment below.