DEV Community: Stephen Emmanuel

Vectorization in Python for Machine Learning

Stephen Emmanuel — Tue, 16 Sep 2025 18:28:32 +0000

Introduction

Imagine you need to double every number in a list of 1000 values. One approach is to take the first number, multiply it by 2, write down the result, then move to the second number, multiply it by 2, write it down, and repeat 998 more times. Another approach is to use a spreadsheet where you can select all 1000 cells at once, apply a "multiply by 2" formula to the entire selection, and watch all results appear simultaneously.

The first method processes each number individually. The second handles the whole collection in one operation. This second approach captures the essence of vectorization in machine learning.

Most machine learning tasks involve repetitive calculations on large amounts of data. Without vectorization, a program might take several minutes to train a simple model. With vectorization, the same task completes in seconds. The mathematical results stay identical, but the execution becomes much faster.

The concept of vectorization is simple: instead of processing data points one at a time, you work with entire collections of data simultaneously.

The Problem With Loops

With loops, the computer needs to perform computations one after the other on each data point, and depending on the dataset size, this creates significant performance delays. This sequential processing results in at least O(n) time complexity for basic operations, with space complexity varying based on how you store intermediate results. When loops contain complex mathematical operations, as commonly occurs in machine learning algorithms, the performance degradation becomes more pronounced.

This problem is amplified by Python's inherent loop performance characteristics compared to compiled languages like C++ or Rust. Python processes loops more slowly because it operates as an interpreted language, checking variable types at runtime for each iteration and executing bytecode rather than native machine instructions. Compiled languages like C++ convert code to optimized machine instructions beforehand, eliminating much of this per-iteration overhead.

Numpy Vectorization

NumPy is a Python library that provides functions to perform mathematical operations on large, multidimensional arrays and matrices. Under the hood, most NumPy functions are written in C, which contributes significantly to their speed. Beyond the C implementation, NumPy achieves performance through several mechanisms: contiguous memory storage that optimizes CPU cache usage, elimination of Python's dynamic typing overhead during computations, and access to low-level processor instructions like SIMD that can perform identical operations on multiple data points simultaneously.

All data points in NumPy arrays (called ndarray or n-dimensional array) must be of the same data type. This requirement exists because C, the underlying language upon which most NumPy functionality is built, requires homogeneous data types for efficient memory allocation and arithmetic operations. When all elements share the same type, the system can predict exactly how much memory each element needs and where to find it, enabling faster processing.

NumPy handles array operations by treating entire arrays as single mathematical objects. Instead of Python iterating through individual elements, NumPy passes the entire computation to optimized C code that still uses loops internally, but these C loops benefit from compiler optimizations and can make use of CPU-level instructions that Python cannot access. The library also uses broadcasting, a technique that allows operations between arrays of different shapes without explicitly creating larger arrays in memory.

Let us examine some practical examples that demonstrate the performance differences between loop-based and vectorized approaches. These examples cover common mathematical operations in machine learning, showing both the computational formulas and timing comparisons to illustrate vectorization benefits.

Example 1: Element-wise Multiplication

Element-wise multiplication pairs corresponding elements from two arrays of equal size and multiplies them together. This operation appears frequently in machine learning when applying feature weights or performing data transformations across datasets.

Mathematical Formula: Given two vectors a = [a₁, a₂, ..., aₙ] and b = [b₁, b₂, ..., bₙ], the element-wise multiplication produces: c = a ⊙ b = [a₁×b₁, a₂×b₂, ..., aₙ×bₙ]. The Python implementation is as follows:

import numpy as np
import time

# Create large arrays
size = 1000000
a = list(range(size))
b = list(range(size, 2*size))

# Non-vectorized approach
start_time = time.time()
result_loop = []
for i in range(len(a)):
    result_loop.append(a[i] * b[i])
loop_time = time.time() - start_time

# Vectorized approach
a_np = np.array(a)
b_np = np.array(b)
start_time = time.time()
result_vectorized = a_np * b_np
vectorized_time = time.time() - start_time

print(f"Loop time: {loop_time:.4f} seconds")
print(f"Vectorized time: {vectorized_time:.4f} seconds")
print(f"Speedup: {loop_time/vectorized_time:.1f}x faster")

In this example, we used time.time() to measure execution duration for both approaches. In the non-vectorized method, we used an explicit loop to process each element individually, appending results to a new list. For the vectorized approach, we simply converted our Python lists to NumPy arrays using np.array() and applied the multiplication operator (*) directly to the entire arrays.

As we can see from the printed output below, the vectorized approach achieved a 62x performance improvement. While your specific numbers may differ based on your processor speed, available memory, system load, and array size, the vectorized approach will consistently outperform the loop-based method by significant margins.

Loop time: 0.2971 seconds
Vectorized time: 0.0048 seconds
Speedup: 62.0x faster

Example 2: Dot Product

The dot product multiplies corresponding elements from two vectors and sums the results to produce a single scalar value. This calculation forms the foundation of linear regression predictions and neural network operations in machine learning.

Mathematical Formula: Given two vectors a = [a₁, a₂, ..., aₙ] and b = [b₁, b₂, ..., bₙ], the dot product is: a · b = a₁×b₁ + a₂×b₂ + ... + aₙ×bₙ = Σᵢ₌₁ⁿ (aᵢ × bᵢ).

The Python implementation is as follows:

import numpy as np
import time

# Computing dot product of two vectors
size = 100000
a = list(range(size))
b = list(range(1, size + 1))

# Non-vectorized approach
start_time = time.time()
dot_product_loop = 0
for i in range(len(a)):
    dot_product_loop += a[i] * b[i]
loop_time = time.time() - start_time

# Vectorized approach
a_np = np.array(a)
b_np = np.array(b)
start_time = time.time()
dot_product_vectorized = np.dot(a_np, b_np)
vectorized_time = time.time() - start_time

print(f"Loop time: {loop_time:.4f} seconds")
print(f"Vectorized time: {vectorized_time:.4f} seconds")
print(f"Speedup: {loop_time/vectorized_time:.1f}x faster")

Here, we use NumPy's np.dot() function for computing the dot product of the two NumPy arrays. Similar to the previous example, we measure timing differences between loop-based summation and NumPy's built-in function, and as seen in the output printed below, the vectorized version achieved a 100x speedup using NumPy's optimized function instead of manual Python iteration and accumulation.

Loop time: 0.0204 seconds
Vectorized time: 0.0002 seconds
Speedup: 101.8x faster

Pandas Vectorization

Pandas extends NumPy's vectorization capabilities to labeled data structures like DataFrames and Series. Unlike NumPy's focus on homogeneous arrays, pandas handles mixed data types and missing values and provides intuitive operations on structured datasets. Pandas vectorization excels in data cleaning, transformation, and analysis tasks where you need to work with real-world datasets containing different column types and potential missing values.

Pandas achieves vectorization through built-in methods that operate on entire columns or DataFrames simultaneously. The library automatically handles data alignment, missing value propagation, and type conversions during vectorized operations. This makes pandas ideal for exploratory data analysis and data preprocessing tasks where you work with tabular data.

Let us examine practical examples that demonstrate pandas vectorization compared to traditional loop approaches for common data manipulation tasks:

Example 1: Element-wise Operations Between Columns

This example demonstrates multiplying corresponding values from two columns in a dataset. This operation commonly appears when calculating totals from quantity and price columns, applying weights to scores, or computing products of related features in data analysis.

Mathematical Formula: Given two columns x₁ = [x₁₁, x₁₂, ..., x₁ₙ] and x₂ = [x₂₁, x₂₂, ..., x₂ₙ], the element-wise multiplication produces: result = [x₁₁ × x₂₁, x₁₂ × x₂₂, ..., x₁ₙ × x₂ₙ].

Here’s the Python implementation:

import pandas as pd
import numpy as np
import time

# Create sample data as basic Python structures
size = 500000
values = np.random.randint(1, 100, size)
multipliers = np.random.randint(2, 5, size)

# Non-vectorized approach (working with lists)
start_time = time.time()
results_loop = []
for i in range(len(values)):
    results_loop.append(values[i] * multipliers[i])
loop_time = time.time() - start_time

# Vectorized approach (convert to pandas)
start_time = time.time()
df = pd.DataFrame({'values': values, 'multipliers': multipliers})
df['results'] = df['values'] * df['multipliers']
vectorized_time = time.time() - start_time

print(f"Loop time: {loop_time:.4f} seconds")
print(f"Vectorized time: {vectorized_time:.4f} seconds")
print(f"Speedup: {loop_time/vectorized_time:.1f}x faster")

Here, we created two Python lists for values and multipliers, which are the two features in our dataset. For the non-vectorized approach, we manually iterated through both lists and performed individual multiplications. For the vectorized approach, we created a pandas DataFrame with both columns and used the multiplication operator between entire columns with df['values'] * df['multipliers']. As is visible from the output below, the vectorized approach outperforms the loop-based approach.

Loop time: 0.1331 seconds
Vectorized time: 0.0034 seconds
Speedup: 38.7x faster

Example 2: Conditional Operations and Data Categorization

This example demonstrates applying conditional logic to categorize data based on value ranges, similar to creating grade assignments from numerical scores. Such operations frequently occur in data analysis when creating categorical variables, segmenting customers, or applying business rules across datasets. Here’s the Python implementation:

# Raw data as Python lists
size = 500000
scores = np.random.randint(0, 100, size)

# Non-vectorized approach (Python lists and loops)
start_time = time.time()
grades_loop = []
for score in scores:
    if score >= 90:
        grades_loop.append('Excellent')
    elif score >= 70:
        grades_loop.append('Good')
    else:
        grades_loop.append('Fair')
loop_time = time.time() - start_time

# Vectorized approach (convert to pandas and use vectorized operations)
start_time = time.time()
df = pd.DataFrame({'score': scores})
df['grade'] = pd.cut(df['score'], 
                    bins=[0, 70, 90, 100], 
                    labels=['Fair', 'Good', 'Excellent'])
vectorized_time = time.time() - start_time

print(f"Loop time: {loop_time:.4f} seconds")
print(f"Vectorized time: {vectorized_time:.4f} seconds")
print(f"Speedup: {loop_time/vectorized_time:.1f}x faster")

In the loop example, we have a condition we use to assign each grade a text string, which we store in another array. And with vectorization, we use pandas pd.cut() function with bins at 70 and 90 to do this. The function automatically applied the conditional logic to the entire column simultaneously. Similar to the previous example, we started with a Python list and converted it to a pandas DataFrame to make use of vectorized operations. The vectorized approach eliminated the need for explicit if-elif-else statements within loops. As usual, the vectorized solution shows faster speed:

Loop time: 0.1327 seconds
Vectorized time: 0.0146 seconds
Speedup: 9.1x faster

Conclusion

We've seen how vectorization changes the way we handle data processing in machine learning. Instead of writing loops that process each data point individually, we can apply operations to entire datasets simultaneously. This approach showed significant speed improvements.

We used NumPy for mathematical operations on homogeneous numerical data, and we used pandas for structured data manipulation, efficiently handling operations between columns and applying conditional logic across entire datasets.

Moving from individual data point processing to whole-collection operations requires a different way of thinking. This approach becomes more natural with practice and produces faster, cleaner code.

Your next step involves applying these techniques to your own datasets. Try converting existing loops to vectorized operations using the patterns we explored. Experiment with NumPy's broadcasting and pandas' built-in functions. Practice with vectorization will make these techniques more familiar in your machine learning work.

8 Ways Variables Are Declared in JavaScript

Stephen Emmanuel — Sat, 01 Oct 2022 17:52:48 +0000

In JavaScript, we can represent a value in its literal form, for example, 5, true, {a: 5, b: 6}; or we can store the value in a variable, and anywhere we need to represent that value, we make use of the variable where we stored the value. We can think of the variable as a container for the value.

Before we can make use of a variable, it has to be declared (created). In JavaScript, there are different ways to declare variables. It is more common to say that we can declare variables in three ways, using var, let, or const. But there are even more ways to declare variables in JavaScript, and if you have been writing JavaScript for a while, you may have used some (or all) of them without realizing that they were creating variables.

Generally, any statement that creates a container for a value, and makes it possible to use an identifier to reference that value, is a variable declaration. The eight ways we will explore in this article include,

var
let
const
function
Function parameters
The catch clause in a try-catch statement
class
import

In the following sections, we will look at how these syntaxes work, how they behave, and the scope of the variables they create. Before we proceed, let us look at what variable scope means.

What is variable scope?

Variable scope is the area in a program where a variable can be accessed. In JavaScript, there are three types of scope.

Global scope. Variables with global scope can be accessed from anywhere in the program.
Function scope. Variables with function scope can only be accessed in the function that houses them. This means we cannot access the variable from outside the function.
Block scope. Variables with block scope can only be accessed from within the block where they are defined. In JavaScript, a block is used to group zero or more statements. The statements are placed within a pair of curly braces {}. For example,

{
  let x = 2;
  let y = 5;
  console.log("x + y = ", x + y)
}

With this out of the way, let us explore these different methods of variable declaration.

`var` declaration

var varName = value;

// For example
var example = 45;

Variables declared with the var keyword have the following features.

It is optional to initialize the variable when declaring it, and we can reassign their values at any point in the program.

var example;
example = 45; // valid

We can overwrite a variable declared with var with another variable declaration.

var example = 42;
console.log("first value ", example); // First value 42

var example = 75;
console.log("second value ", example); // second value  75

Variables declared with var are hoisted. This means that before the execution of the code, their declaration is moved to the top of the scope where they are defined. The effect of this is that we can access the variable even before they are declared. Note that it is only the variable declaration that is moved to the top, not the initialization. This means that if we try to access the value before the declaration, we will get undefined.

console.log("value ", example); // value undefined
var example = 75;


/* This is how JavaScript interpreted the above code */
var example;
console.log("value ", example); // value undefined
example = 75;

Variables declared with var have global scope when declared outside a function, and function scope when declared inside a function.

var x = 1; // Global scope

if (true) {
  console.log("inside the block, x is", x); // inside the block, x is 1
  var y = 2; // Global scope
}

function foo() {
  console.log("inside the function, x is ", x); // inside the function, x is 1
  console.log("inside the function, y is ", y); // inside the function, y is 2
  var z = 3; // function scope
  console.log("inside the function, z is ", z); // inside the function, z is 3
}

foo();
console.log("outside the function, z is ", z); // ReferenceError: z is not defined

`let` declaration

let varName = value;

// For example
let example = 45;

Variables declared with the let keyword have the following features.

It is optional to initialize the variable in its declaration, and we can reassign their values at any point in the program.

let example;
example = 45; // valid

A variable declared with let cannot be re-declared in the same scope.

let example = 42;
console.log("first value ", example);

let example = 75; // SyntaxError: Identifier 'example' has already been declared
console.log("second value ", example);

Variables declared with let are not hoisted. This means that if we try to access the value before the declaration, instead of getting undefined as we did with var, we will get a runtime error.

console.log("value ", example);
let example = 75; // ReferenceError: Cannot access 'example' before initialization

Variables declared with let have block scope.

let x = 1; // Global scope

if (true) {
  let x = 2; // block scope
  console.log("declared in a block, x is", x); // declared in a block, x is 2
}

console.log("outside the block, x is ", x); // outside the block, x is  1

if (true) {
  console.log("inside the block, x is", x); // ReferenceError: Cannot access 'x' before initialization
  let x = 3; // block scope
}

`const` declaration

const varName = value;

// For example
const example = 45;

const has some similarities with let. Variables declared with the const keyword have the same scope and hoisting rules as those declared with let. The key difference between const and let is that variables declared with const must be initialized as soon as they are declared, and we cannot reassign their values at any point in the program.

const example; // SyntaxError: Missing initializer in const declaration
example = 45;

const example = 45; // valid

const example = 45;
console.log("example is, ", example); // example is,  45
example = 45; // TypeError: Assignment to constant variable.

It is important for us to note that the fact that const variables cannot be reassigned does not imply that they are immutable. This is because their values can still be changed even though the variable itself cannot be re-assigned. This only happens with mutable values - objects and arrays.

const mutableObject = { foo: 5, bar: 6 };
console.log("mutable object, ", mutableObject); // mutable object,  { foo: 5, bar: 6 }
mutableObject.foo = 43;
console.log("mutable object, ", mutableObject); // mutable object,  { foo: 43, bar: 6 }

const mutableArray = [2, 3, 5];
console.log("mutable array", mutableArray); // mutable array [ 2, 3, 5 ]
mutableArray[2] = 44;
console.log("mutableArray", mutableArray); // mutableArray  [ 2, 3, 44 ]

`function` declaration

The function keyword is used to declare a variable and assign a function to it. For example,

function foo(bar) {
  return bar;
}

This creates a variable named foo and assigns the function to it. This is the same as assigning a function as a value to a variable declared with the var keyword.

var foo = function(bar) {
  return bar;
}

Note. function only declares variables whose value is a function.

Variables declared with the function keyword are similar to variables declared with the var keyword in the following ways.

It is possible to overwrite their values with another declaration

function foo(bar) {
  return bar;
}

function foo(bar) {
  return bar * 4;
}

console.log(foo(8)); // 32

They have the same scope as variables declared with the var keyword, that is, they have global scope when declared at the top-level or in blocks, and function scope when declared inside another function.

if (true) {
  function foo(bar) {
    return bar;
  }
}

function zoo() {
  function foo(bar) {
    return bar * 4;
  }
  console.log(foo(8)); // 32
}

zoo();
console.log(foo(8)); // 8

They have the same hoisting rule as var. This means that we can call a function declared with the function keyword even before they are declared. For context, we will declare a function with the function keyword, and we will declare another function with the const keyword and try to access both before their declaration.

foo(); // I am accessible
function foo(bar) {
  console.log("I am accessible");
}

bar(); // ReferenceError: Cannot access 'bar' before initialization
const bar = () => {
  console.log("I am accessible");
};

Function parameters

A function parameter is a variable passed into a function that can be accessed everywhere in the function. When a function with parameters is called, and arguments are passed to the call, for each parameter-argument, a variable is created and the argument is assigned to it as its value. If you are not sure of the difference between function parameters and arguments, this article explains it.

function foo(x, y) {
  return x + y;
}

console.log(foo(5, 7));

Take a look at the function defined above. When we call the function, with 5 and 7 as arguments, it creates two variables x = 5, and y = 7.

Variables created by function parameters have the following features.

They can be reassigned.

function foo(x, y) {
  x = 10;
  return x + y;
}

console.log(foo(5, 7)); // 17

Their values are not always initialized immediately they are declared. This behavior depends on the arguments passed to it. For example, if a function has two parameters and while calling it, we pass one argument to it, the variable that the second parameter will create will be assigned a value of undefined, and can be initialized within the function.

function foo(x, y) {
  console.log("y before initialization is ", y); // y before initialization is  undefined
  y = 10;
  console.log("y after initialization is ", y); // y after initialization is  10
}

foo(5);

They can be overridden by another variable declaration done with the var keyword.

function foo(x) {
  var x = 20;
  console.log("x is", x); // x is 20
}

foo(5);

The variables created by function parameters are declared immediately the function is called, so we cannot access it before its declaration.
Function parameters are not hoisted to the top of the program
Function parameters are function-scoped. This means that they can only be accessed throughout the function where they are declared.

function foo(x) {
  console.log("x inside the function is ", x); // x inside the function is  5
}

foo(5);
console.log("x outside the function is ", x); // ReferenceError: x is not defined

The `catch` clause in a `try-catch` statement

try {
  throw new Error();
} catch (err) {
  console.log(err);
}

A try-catch statement is made up of a try block and a catch block. The content of the try block is first executed. If an exception (or error) is thrown in the try block, the catch block catches the error and the content of the catch block is executed. When this happens, JavaScript creates a variable that stores the exception (or error) caught by the catch block. We can give the variable any name we want if we intend to make use of it. In our case, we name it err.

This err variable is block-scoped. This means that we can only access it in the catch block. This variable behaves in the same way as a variable declared with the let keyword.

`class` declaration

class Foo {
  constructor(bar) {
    this.bar = bar;
  }
}

The class keyword creates a variable and assigns a class to it. A variable created this way behaves the same way as a variable created with the let keyword. The above class definition is similar to this.

let Foo = class {
  constructor(bar) {
    this.bar = bar;
  }
};

`import` statement

The import keyword is used to import live bindings that are exported from another module.

// bar.js
let foo = 8;
export default foo;

// import
import foo from "./bar.js";

console.log("foo", foo);

There are different ways to use the import keyword to import values from another module. Each method creates a new variable in the current module and assigns it the value that it imported. The above snippet is similar to creating a variable foo and assigning it a value of 8 which was imported from "./bar.js".

Variables declared this way are constants, and behave in the same way as variables created with the const keyword.

Note. import declarations can only be done at the top-level of a module.

In conclusion

We have come to the end of this article. We have been able to break away from the subconscious knowledge that there are three methods of declaring variables in JavaScript, and we explored eight different ways that it is done.

It was wonderful learning all these with you.

Till we meet again,
Bye.

Building an Application with ClojureScript

Stephen Emmanuel — Mon, 19 Sep 2022 18:07:53 +0000

ClojureScript is a Clojure compiler that generates JavaScript code. Clojure is a high-level, functional programming language that runs on the Java Virtual Machine (JVM), and has access to all Java libraries. With ClojureScript, we can write Clojure code that runs in the browser, and everywhere JavaScript runs.

Why ClojureScript?

Since ClojureScript compiles to JavaScript, why bother about it?

One thing that has plagued JavaScript is the lack of standard structure. Almost anything goes. And it becomes easier to write bad code even though it works. We also have to keep up with different tools that transpiles newer versions of JavaScript and make them accessible to all browsers.

ClojureScript on the other hand is more opinionated than JavaScript. This way, it brings some structure to our code base by taking away those choices that made it possible for us to write bad code with JavaScript. Also, it comes with a much more extensive core library than JavaScript. This means that those simple tasks that require many lines of custom code or a third-party library with JavaScript to accomplish, we can often accomplish them with core ClojureScript functions.

After ClojureScript compiles to JavaScript, the compiled code has a smaller size than hand-written JavaScript. This is because it makes use of the Google Closure compiler for minification and optimization.

In this guide, we will walk through bootstrapping a new ClojureScript project with the clj-new tool, then create a counter web application with it.

Getting started

Before we can compile ClojureScript code, we need to install Java and Clojure on our device. In order to keep this guide focused on writing ClojureScript code, we will not go into details on how to install Java and Clojure. Follow this guide to make these installations. If you encounter any issues in your attempt to install them, you can make a comment about your issue at the end of this article.

To ensure that we have Clojure installed, we will run the clj command.

$ clj
Clojure 1.10.0
user=>

You should see the version of Clojure that was installed.

If you installed Clojure and the clj command was not found, try running it in your PowerShell.

The prompt that we see after the Clojure version is printed is called the REPL. We can type Clojure expressions here and we should see the results immediately. For example

user=> (+ 4 9)
13

To close the REPL, we type CTRL + D, or CTRL + Z.

Bootstrapping a new project

Before we start developing our counter app, we need to set up a new project. There are different ways to set up a new ClojureScript project, but we will make use of the clj-new tool.

We need to add an alias for clj-new in the root directory of our device. We only need to do this once. For subsequent projects, or if you have done this step before, you can skip it.

We will open the ~/.clojure/deps.edn file at the root of our device and paste the following code.

{
  :aliases
    {:new {:extra-deps {seancorfield/clj-new
                        {:mvn/version "1.1.243"}}
          :exec-fn clj-new/create
          :exec-args {}}}
}

Setting up ClojureScript might seem overwhelming, but that's only because this is our first time, and we have to first make our device ready to go. To set up subsequent projects, we will not need to go through all the processes above. We will just need to do the following.

clj -X:new :template figwheel-main :name getting_started/counter :args '["+deps"]'

This command uses the clj-new tool to bootstrap a new ClojureScript project.

If you get some error after running the command above, try to wrap +deps in triple quotes as so

clj -X:new :template figwheel-main :name getting_started/counter :args '["""+deps"""]'

Let us analyze the command above. clj -X:new, calls the clj-new/create function (remember the clj-new tool we added an alias for). Then it passes the remaining arguments to it. The options :template, :name, and :args are passed using the Clojure keyword syntax.

:template gives the name of the template to use. Here we are using figwheel-main. Figwheel Main helps with building our code and to hot-reload in development.
:name is the name of the project we are building. We have to specify a namespace-qualified name for our project. The namespace is the part before the forward slash and is usually a more general name not specific to the project, like your GitHub username, or organization name; while the part after the forward slash is the name of the project

:args are additional parameters that the figwheel-main template will understand. We specify that we want to use a deps.edn file to manage dependencies

After running the command to create a new project, we will navigate into the generated directory, which is the project name, in our case, counter. We should also open up the directory in a code editor.

cd counter

Now, let us examine the files and sub-folders that were generated.

The resources folder is where our HTML and CSS live
The src folder is where we will write our core ClojureScript code
The test folder is where we will write our ClojureScript tests, although, in this guide, we are not interested in writing tests.
The deps.edn is the dependency manager for our project, similar to what package.json is for JavaScript. Here, we specify the dependencies, paths, aliases, and other keys.
- :paths tells clj where Clojure code resides
- :deps tells clj the dependencies we require in our app.
- :aliases is used to specify shortcuts for long commands, and we can include other alternate dependencies here.
dev.cljs.edn is used to add configuration for Figwheel Main
The configuration we add to dev.cljs.edn can also be added to figwheel-main.edn. But the configuration in figwheel-main.edn will be overriden by those in dev.cljs.edn.
test.cljs.edn is where we have our tests configuration
The target folder is where the compiled code goes to

Starting our app

There are different ways to start a ClojureScript app, and this depends on how it was created. Since we created our project with clj-new and the Figwheel Main template, we will start our app by running the following command.

clj -A:fig:build

Recall that if a clj command fails in your regular terminal, try running it in your PowerShell.

This command fetches all the dependencies we require, launches a ClojureScript REPL, and then opens a browser window with the following page at localhost:9500

The green-background "Connected" text at the top left of the generated webpage, next to the ClojureScript logo, means that the page has successfully connected to the REPL that we just launched. The REPL is in the same terminal where we ran the command to start our app. The generated webpage is the host JavaScript environment for the REPL. This means that all ClojureScript expressions that we execute in the REPL are immediately compiled to JavaScript and executed in the webpage. Let us see how this works.

The REPL

REPL means Read-Eval-Print Loop, because it reads the ClojureScript expression we type into it, evaluates the expression in the browser, then prints the result and continues the loop.

With our webpage at localhost:9500 still open, let us execute some expressions in the REPL. This is what our command line looks like after starting the app.

We can type the ClojureScript expressions just after the cljs.user=> prompt.

cljs.user=> (println "Here we go!")
Here we go!
nil
cljs.user=> (+ 4 5)
9
cljs.user=> (js/alert "This is an alert!")
nil
cljs.user=> (js/console.log "This is a log to the console!")
nil

Executing a ClojureScript expression executes their side effects and returns the return value. If there is no return value, nil is returned.

The first expression prints "Here we go" to the console and the REPL
The second expression adds 4 to 5 and returns the answer
The third expression causes a JavaScript alert to pop up in the webpage at localhost:9500
The last expression logs the string to the console in our webpage

We have been able to interact with the webpage through the running REPL. We have also been able to use JavaScript functions alert and console.log in ClojureScript. Up next, we will create the UI for our counter app.

Let's write some UI code

Just as was mentioned earlier, we will create a counter web application. The count on the UI increases by 1 when we click the + button and decreases by 1 when we click the - button. We can update the count by any value by typing the value (positive or negative), in the input field, then clicking on the step button.

Currently, what we have on the webpage is the default template that Figwheel generates. We can find the code in the resources/public/index.html file. We will delete the content of the file and replace it with the following markup for our counter app.

<!-- resources/public/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link
      rel="icon"
      href="https://clojurescript.org/images/cljs-logo-icon-32.png"
    />
  </head>
  <body>
    <div id="app">
      <h4 class="header-text">A counter app</h4>
      <div class="count-container">
        <h2 class="count-value" id="count-value">0</h2>
      </div>
      <div class="btn-group">
        <button id="minus">-</button>
        <button id="plus">+</button>
        <button id="step">Step</button>
      </div>
      <form>
        <label for="step-input">Enter the step amount</label>
        <input type="number" value="0" id="step-input" />
      </form>
    </div>

    <!-- KEEP THIS SCRIPT TAG : IT LOADS YOUR APPLICATION CODE -->
    <script src="cljs-out/dev-main.js" type="text/javascript"></script>
  </body>
</html>

Take note of the line where we included the script <script src="cljs-out/dev-main.js" type="text/javascript"></script>. This imports the generated JavaScript code from target/public/cljs-out/dev-main.js to the HTML page.

All our CSS styles should go into the resources/public/css folder. Inside the folder, there is already a style.css. We open the file in our editor, and place the following CSS styles in it.

/* resources/public/css/style.css */
body {
  background: #f46351;
  padding: 0 24px;
}

* {
  font-family: Roboto, Helvetica;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 72px;
}

.count-container {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fffaf5;
  border-radius: 494px;
  margin: 72px 0;
}

.header-text {
  font-weight: 500;
  font-size: 32px;
  line-height: 38px;
  color: #fffaf5;
}

.count-value {
  font-style: normal;
  font-weight: 300;
  font-size: 96px;
  line-height: 112px;
  color: #fffaf5;
}

.btn-group {
  display: flex;
  align-items: center;
}

button {
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  color: #211c1b;
  border: none;
  outline: none;
  border-radius: 50%;
  height: 56px;
  cursor: pointer;
}

#minus,
#plus {
  width: 56px;
  margin-right: 32px;
}

#step {
  width: unset;
  padding: 16px 40px;
  border-radius: 56px;
}

form {
  margin: 56px 0;
  width: 100%;
  max-width: 295px;
}

label {
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: rgba(255, 250, 245, 0.79);
  display: block;
}

input {
  margin-top: 8px;
  background: rgba(163, 49, 34, 0.4);
  border: 1px solid #fffaf5;
  border-radius: 4px;
  font-weight: 500;
  font-size: 20px;
  line-height: 23px;
  color: rgba(255, 250, 245, 0.79);
  padding: 18px 24px;
  outline: none;
}

If we refresh our browser, we should see the beautiful interface for our counter app with three buttons and an input field, but it is as good as useless because we cannot interact with it. Up next, we will make the app interactive, that is, it will listen to events from the user, perform some logic and respond with an update to the UI.

Let's add some interactivity

It's time to write some ClojureScript code. Recall that based on the structure of our project, all ClojureScript code goes into the src folder. For our counter app logic, we will add the code to the src/getting_started/counter.cljs. Open the file and replace the content with the following lines of code.

;; src/getting_started/counter.cljs
(ns ^:figwheel-hooks getting-started.counter
  (:require
   [goog.dom :as gdom]
   [goog.events :as gevents]))

;; define your app data so that it doesn't get over-written on reload
(defonce app-state (atom 0))
(def step-input (gdom/getElement "step-input"))
(def count-value (gdom/getElement "count-value"))
(def app-element (gdom/getElement "app"))

(defn get-step-input-value [] 
  (js/Number (.. step-input -value))
)

(defn render-new-count [val] 
  (gdom/setTextContent count-value val)
)

(defn increase-count [app-state]   
  (swap! app-state inc)
)

(defn decrease-count [app-state]  
  (swap! app-state dec)
) 

(defn step-count [app-state]
  (swap! app-state + (get-step-input-value))
  )

(defonce is-initialized?
  (do
    (gevents/listen app-element "click"
      (fn [event]
        (condp = (aget event "target" "id")
          "minus" (decrease-count app-state)
          "plus" (increase-count app-state)
          "step" (step-count app-state)
          nil)))
    (add-watch app-state :counter-watcher 
      (fn [key atom old new]
      (render-new-count new)))
    true))

If you are new to Clojure or ClojureScript, it probably surprises you to see that we are using hyphens - in variable names. We name identifiers in Clojure(Script) with hyphen-separated lowercase words.

You must have also noticed that almost everything we write is enclosed in parentheses. This is what we call symbolic expressions ("s-expressions"). It is a parenthesized list containing zero or more expressions separated by white space. An s-expression can contain other nested s-expressions.

The first line of code in our counter.cljs file is a comment. In ClojureScript, lines of comment are preceded by a double semi-colon ;;

Next, we define a namespace. In ClojureScript, the unit of modularity is the namespace. To define a namespace, we use the ns form.

(ns name-of-namespace)

The name of a namespace has to rhyme with the path of the file relative to the src directory.

Replace the path separator / or \ with a dot .
Replace underscores _ with hyphens -
Finally, drop the filename extension .cljs

In our case, the path of our file relative to the src directory is getting_started/counter.cljs. Applying the rules above to get a valid name for our namespace, we get getting-started.counter.

(ns getting-started.counter) is a valid namespace declaration, but we added the ^figwheel-hooks annotation to notify figwheel to watch the namespace.

After defining the namespace, we require code from other namespaces. Here, we are requiring code from the goog.dom and goog.events namespaces. The :as keyword makes the functions in this goog.dom namespace available under the alias, gdom. This means that, to call a function in the namespace, we do gdom/function-name instead of goog.dom/function-name. Likewise, we make the goog.events namespace available as gevents.

Both the goog.dom and goog.events namespace are made available by the Google Closure's DOM manipulation library which ClojureScript has integrated.

After defining the namespace and requiring code from the Google Closure library, we start writing code for our counter app. First, we define the app's state with defonce app-state (atom 0). This is the current value of the counter. We use defonce because we don't want the data to get overridden on reload.

Then, we use the gdom/getElement function to retrieve some elements from the DOM by id and we bind them to variables.

Next, we create a couple of functions that implement the logic of our counter app. In ClojureScript, the syntax to define a function is.

(defn function-name [arg-1 arg-2 arg-n]
  ;; function body
)

And we can call a function on argument(s) using the s-expression. The function name is the first item in the expression and the arguments, if any, are placed in order after the function name separated by white space.

(function-name arg-1 arg-2 arg-n)

The get-step-input-value function receives no argument, gets the value of the step-input input field, and converts it to a number.

The render-new-count function receives an argument val, and updates the count-value DOM element with it. The count-value DOM element is where we are displaying the current value of the counter.

The increase-count function uses the swap! and inc functions to update app-state by increasing its value by one. The decrease-count function reduces app-state by one. The step-count function calls the get-step-input-value function to get the value of the step-input field. It then adds this value to app-state and updates it.

Finally, we create an is-initialized variable. We use defonce because we want it to run just once. We use the do macro to evaluate multiple expressions and assign the last value true to is-initialized. This means that once the app loads, it evaluates all of those expressions, and once completed, the value of is-initialized becomes true. We can use this value in some other function to check if the app has been initialized before performing some actions. Although in our app, we did not use it.

The first expression we evaluated with the do macro does the following

Listen for click events in the app
Check the id of the DOM element clicked
If the id is "minus", call the decrease-count function on app-state
If the id is "plus", call the increase-count function on app-state
If the id is "step", call the step-count function on app-state
If the id is none of the above, return nil, which is ClojureScript's equivalent for null or undefined in JavaScript

The second expression watches for changes to the app's state, app-state, and renders the new count to the DOM.

Before we start our app, we need to stop Figwheel Main from watching the test files since for this guide, we are not interested in tests. We can do this by updating the dev.cljs.edn file.

-  ^{:watch-dirs ["test" "src" ]
+  ^{:watch-dirs ["src" ]
      :css-dirs ["resources/public/css"]
      :auto-testing true
     }
   {:main getting-started.counter}

With these out of the way, we can start our app by running clj -A:fig:build.

Conclusion

We went through the process of setting up a ClojureScript project with the clj-new tool, and we were able to make use of some of the rudimental concepts in ClojureScript to build a working counter application.

If this was your first encounter with ClojureScript and it catches your fancy, you may want to check out some of these amazing resources to learn more about it.

How to Set up A Clojure Script and Phoenix Project

Stephen Emmanuel — Fri, 09 Sep 2022 22:45:21 +0000

Recently I was tasked with setting up a project with ClojureScript and Phoenix. I tried to check the internet for a "how-to" but did not find an up-to-date guide on completing this setup. After some research and trials, I was finally able to get it done so I decided to share the knowledge I have gained.

ClojureScript is a functional language that solves a lot of the shortcomings and inconsistencies of JavaScript. It compiles to JavaScript and it is possible to call any JavaScript function with ClojureScript syntax.

Phoenix is an awesome web framework that is built on Elixir, a general-purpose, functional language built on the Erlang's VM and compiles to Erlang bytecode.

To set up ClojureScript and Phoenix, we can use an existing Phoenix project or set up a new Phoenix project by running

mix phx.new cljs_phoenix --no-ecto

We use the --no-ecto flag because we do not want to set up a database in this project.

We will be making use of the shadow-cljs package to compile our ClojureScript code, so we will install shadow-cljs as a dev dependency in the assets folder of our project.

cd assets && yarn init && yarn add --dev shadow-cljs

Up next, we will initialize a new shadow-cljs project in the assets folder by running

node_modules/.bin/shadow-cljs init

Running the above command displays a prompt Create? [y/n]:. Type y and click enter to proceed.

This generates a shadow-cljs.edn file. This file is what we will use to configure the build of our ClojureScript code and to manage our dependencies. You can liken it to what package.json does for NodeJs projects.

Before we add our configurations to the shadow-cljs.edn file, let us first create a ClojureScript source file. We will create a src folder in the assets folder. This will be the source directory for ClojureScript. Next, we create a namespace, app.main.cljs. Based on the Java Naming Conventions, this namespace will be placed in the app/main.cljs file. So we create the app/main.cljs file in our src folder and paste the following code into it.

(ns app.main)

(def value-a 1)
(defonce value-b 2)

(defn main! []
  (println "App loaded!"))

(defn reload! []
  (println "Code updated.")
  (println "Trying values:" value-a value-b))

This is a simple script that logs some text to the console. At the end of this guide, we will see the texts displayed in our console.

Now let’s revisit the shadow-cljs.edn file to configure our build. We’ll paste the following code into the file.

;; shadow-cljs configuration
{:source-paths
  ["src"]

  :dependencies
  []

  :dev-http {9080 "../priv/static"}

  :builds {:app {:output-dir "../priv/static/js"
                :asset-path "/js",
                :target :browser
                :modules {:app {:init-fn app.main/main!}}
                :devtools {:after-load app.main/reload!}}}}

As we can see, this is a map of key-value pairs. This configuration is customizable, so we will go through what each of the configurations does so that you can either use it directly or edit it to suit your needs.

The :source-paths configures the classpath. The compiler will make use of this configuration to find Clojure(Script) source files (eg. .cljs ). It is possible for us to use multiple source paths. For example, if we want to separate our tests from the main code, we could include the source path for our test and our main code as below.

{:source-paths ["src/main" "src/test"]
 ...}

The :dependencies field will contain the list of dependencies we require in the project. For now, we are not using any dependency so the field is an empty array.
The :dev-http field expects a map of port-number to config. shadow-cljs provides additional basic HTTP servers that serve static files. The reason for this is that some browsers may not be able to access files in some folders, but when these files are served over HTTP, the browser can easily access them by <domain>:<port-number>/<path-to-file>. In our configuration, we made our port number 9080 (we can use any available port number). We mapped the port number to "../priv/static". This tells shadow-cljs to serve all the files in "../priv/static" over HTTP, and make them accessible to the browser on port 9080. We can use any path for this. We chose this path because our Phoenix application already has a configuration that makes all the files in priv/static accessible at the "/" path. We can see that in the PhoenixCljsWeb.Endpoint module.

# Serve at "/" the static files from "priv/static" directory.
  #
  # You should set gzip to true if you are running phx.digest
  # when deploying your static files in production.
  plug Plug.Static,
    at: "/",
    from: :cljs_phoenix,
    gzip: false,
    only: ~w(assets fonts images favicon.ico robots.txt)

We specify the build configurations in the :builds field. We can specify multiple builds with different ids, but in our current configuration, we only have one build - :app. Let us take a look at the configurations we specified for the :app build.
- :output-dir specifies the directory used for all compiler output. This is where the entry point JavaScript file and all related JS files will appear
- :asset-path is the relative path from the web server’s root to the resources. The dynamic loading during development and production needs this path to correctly locate files. Since we are serving our web server in the folder "../priv/static", and our :output-dir is "../priv/static/js", it means that our :asset-path will be "/js"
- :target specifies the target environment for the compilation
- :modules configure how the compiled source code are bundled together and how the final .js are generated.

For more information about the build configurations and dependency managements, check the docs.

We will need to update the CljsPhoenixWeb.Endpoint module to add js to the list of folders in priv/static that will be served from "/". This module is in the lib\cljs_phoenix_web\endpoint.ex file

# Serve at "/" the static files from "priv/static" directory.
  #
  # You should set gzip to true if you are running phx.digest
  # when deploying your static files in production.
  plug Plug.Static,
    at: "/",
    from: :cljs_phoenix,
    gzip: false,
-    only: ~w(assets fonts images favicon.ico robots.txt)
+    only: ~w(assets fonts images favicon.ico robots.txt js)

Since shadow-cljs is capable of hot-reloading, we need to remove the .js extension from the patterns watched by the Phoenix live reload. We do this in the config/dev.exs file

# Watch static and templates for browser reloading.
config :cljs_phoenix, PhoenixCljsWeb.Endpoint,
  live_reload: [
    patterns: [
-     ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
+     ~r"priv/static/.*(css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/cljs_phoenix_web/(live|views)/.*(ex)$",
      ~r"lib/cljs_phoenix_web/templates/.*(eex)$"
    ]
  ]

After compilation, the build we specified for :app will create an app.js file in the output directory, "priv/static/js" Since we want to load this in the browser we will include this javascript in our root HTML file, lib\cljs_phoenix_web\templates\layout\root.html.heex.

<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/js/app.js")}></script>

Finally, we need to start the shadow-cljs server every time we start the Phoenix server. We do this by adding the following watcher to the list of watchers in the config/dev.exs file.

config :cljs_phoenix, CljsPhoenixWeb.Endpoint,
  watchers: [
    # ...,
    bash: [
      "node_modules/.bin/shadow-cljs",
      "watch",
      "app",
      cd: Path.expand("../assets", __DIR__)
     ]
  ]

What this does is run node_modules/.bin/shadow-cljs watch app in the assets folder. This will start the shadow-cljs server, and compile the ClojureScript files according to the configurations in the shadow-cljs.edn file. Then it watches for changes in ClojureScript files to update the compiled code.

Now, we are ready to start our Phoenix server. We ensure we are in the root folder of our project (not the assets) folder, then we run

mix phx.server

To be sure that we have successfully set up the project, we go to localhost:4000 in our browser. In the console, we should see a prompt that shadow-cljs is ready. We will also see the "App loaded!" text that we printed in the src/app/main.cljs file.

Whenever we want to release our application, in the assets folder, we will run

shadow-cljs release app

Writing Better Commit Messages

Stephen Emmanuel — Thu, 17 Feb 2022 16:09:57 +0000

In this article, we will learn what commit messages are, and how to write commit messages in a consistent, readable way.

The guides here are not set in stone, and as such can be tweaked. What this guide aims at is getting us to gain some form of consistency and clarity with our commit messages

This article assumes we have a basic understanding of git. If you're unfamiliar with Git, you can check out git docs here.

What is a commit message?

As our codebase continues to grow, it is very important that we are able to understand all the changes we have made to our code. Inasmuch as we perfectly understand what is going on now, it is unavoidable that in some months' time, it might be difficult to get a grip of what’s going on. This is where commits come in.

A commit is a command that takes a snapshot of all the changes we have made in our project, and stores a unique reference to it. While creating a commit, we specify a message (this message is called a commit message) that tells us what was done and summarizes how this version of the project is different from the previous version. This way, we can always come back to our project - after a thousand years - and still know what exactly we did at any point in time in our project.

To add a commit, we use the command

git commit

Why the fuss about commit messages?

The ability to easily understand what is going on in a project at different points in time is a function of commit messages.

Good commit messages are important for maintaining long-term projects - whether it is a team project or a personal project. It helps us keep track of all the changes that were made for each commit.

A properly-written commit message is the most effective approach to convey context about a change to other developers working on the project, and also to yourself.

Writing better commit messages.

A standard commit message has 3 parts:

The header/subject
The body
The footer

<header>

[body (optional)]

[footer(s) (optional)]

The header/subject

The header can be divided into the type, the scope, and the description.

type. This tells us the reason why the change was made. This can take any of the following values:
- fix. This tells us that a bug was fixed.
- feat. This tells us that a new feature was added to the project.
- perf. This is used to indicate a change in code that improves the performance of the project.
- refactor. This indicates a change in code that does not add a new feature or fix a bug.
- build. This includes changes that affect the build
- ci. Indicates changes made to CI (Continuous integration) configuration files.
- docs. This identifies changes made to the documentation.
- style. Changes that update the style in a codebase (like formatting, tabs, white-space, etc). They do not affect the meaning of the code.
- test. This is used when we add a new test or update existing ones.

We can definitely add to the list, but whatever we add must be clearly defined and consistent across the project.

Scope. This is optional. It identifies the place of the commit change. This depends on the project.
If the commit introduces breaking changes (A change in one element of a software system that causes failure in other areas.), it is necessary to include a ! after the type/scope.
- Description. This is a short message that describes what the commit does. It is very important that the description of a commit message:
- Is written in the imperative. E.g. Use implement ** instead of **implemented **or **implements; use fix **instead of **fixed **or **fixes
- Does not end it with a period (.)

A good rule of thumb for a description is to substitute it in place of the dash in the statement below and see if it completes correctly.

If applied, this commit will ___

For example, take these two descriptions below:

Bad: Implemented a theme toggle

Good: Implement a theme toggle

When we substitute these messages in the template above, we have:

Bad: If applied, this commit will implemented a theme toggle
Good: If applied, this commit will implement a theme toggle

It is important that the header/subject is as precise as possible. It is best to limit it to 50 characters. This is not set in stone, but keeping it at this length ensures they are readable. In addition, the GitHub user interface works on this convention. If we go over the 50-character limit, it will alert us, and if the subject line exceeds 75 characters, it will truncate the rest of the line.

The Body

The body should be separated from the subject with a blank line. The body is used to explain what was changed and why the change was made.

It is important to wrap the body of your commit messages to 72 characters per line. This allows Git plenty of room to indent text while still keeping everything under 80 characters overall. Wrapping text at 80 characters stops the text from filling the whole width of your command line window, making commits easier to read.

We can separate the body into paragraphs separated by single blank lines. We can also add lists.

Example:

More detailed explanatory text, if necessary. Wrap it to about 72
characters or so. In some contexts, the first line is treated as the
subject of the commit and the rest of the text as the body. The
blank line separating the summary from the body is critical (unless
you omit the body entirely); various tools like `log`, `shortlog`
and `rebase` can get confused if you run the two together.

Explain the problem that this commit is solving. Focus on why you
are making this change as opposed to how (the code explains that).
Are there side effects or other unintuitive consequences of this
change? Here's the place to explain them.

Further paragraphs come after blank lines.

 - Bullet points are okay, too

 - Typically a hyphen or asterisk is used for the bullet, preceded
   by a single space, with blank lines in between, but conventions
   vary here

Not every commit messages necessitates the use of both a subject and a body. A single line indicating the subject can be sufficient in some cases, especially when the change is so little that no more context is required. Consider the following scenario:

docs: fix a typo in line 4 of the user guide

This is straightforward and does not require additional explanation. This type of one-line commit can easily be done on the command line by adding the -m option to git commit as so:

git commit -m “docs: fix a typo in line 4 of the user guide”.

But when a commit requires more context and explanation, we make use of the body. In this case, it is best not to include the -m option so we run the commit command directly

git commit

This opens an editor where we type our commit message. The default git editor for commit messages is Vim. You can configure git to use an editor of your choice. Check out this on Stack Overflow

The Footer

The footer contains references to GitHub issues that the commit addresses. It can also contain any information about breaking changes.

Updating the model at the beginning of this article, we have

<type>[scope (optional)]: <description>

[body (optional)]

[footer(s) (optional)]

Example


feat: Summarize changes in around 50 characters or less

More detailed explanatory text, if necessary. Wrap it to about 72
characters or so. In some contexts, the first line is treated as the
subject of the commit and the rest of the text as the body. The
blank line separating the summary from the body is critical (unless
you omit the body entirely); various tools like `log`, `shortlog`
and `rebase` can get confused if you run the two together.

Explain the problem that this commit is solving. Focus on why you
are making this change as opposed to how (the code explains that).
Are there side effects or other unintuitive consequences of this
change? Here's the place to explain them.

Further paragraphs come after blank lines.

 - Bullet points are okay, too

 - Typically a hyphen or asterisk is used for the bullet, preceded
   by a single space, with blank lines in between, but conventions
   vary here

If you use an issue tracker, put references to them at the bottom,
like this:

Resolves: #123
See also: #456, #789

*
This example is gotten from here*

The gospel of writing better commit messages is one we should actively follow and preach to other developers. I have not been a very good disciple in the past, but I promise to do better and you should promise to do better as well.

If you also promise to do better, say with me

I understand the importance of writing readable and consistent commit messages and I pledge to write better commit messages from now on. So help me git!

I'm glad we followed through, and hopefully, we have broken the yoke of disorganized, unreadable, and inconsistent commit messages.

Signing out, Steph Crown ✌️

How to make your web app work offline with just HTML, CSS, and JavaScript.

Stephen Emmanuel — Fri, 28 Jan 2022 18:07:57 +0000

In today’s world, more and more people have access to the internet. But internet connection is not always stable. And when it is relatively stable, users are not always able to get internet subscriptions. This causes a problem. For example, a potential customer may want to urgently get some important information from a company’s website but at that point lacks a stable internet connection, and cannot access the website. This could cause the company to lose a valuable customer.

This is just one of many negative effects of not being able to access the internet at all times. But should it be a problem? Must we always need a stable internet connection to access a website, even a website we just viewed some minutes ago? Surely not!

And so in this battle against slow or no internet connection, a savior came to show us the way, … Its name … Service Workers. (Drum rolls 🥁)

In this article, we are going to learn how to use service workers to ensure that users can access our web app even after going offline. We will also learn how to use service workers in combination with a **web manifest **to make our web app give users the kind of experience they get while using a native mobile or desktop app.

We will be making use of an already existing web application. The starter files can be found here.

WHAT IS A SERVICE WORKER?

A service worker is a javascript program that runs in the background of a browser without being affected by user interaction. They are used to store network requests and core assets (HTML, CSS, JS, images, etc) in the browser’s cache. This makes it possible to access the files and requests any other time after it has been saved, whether or not there is an internet connection.

There is more. Service workers can also be used to create push notifications to give the native app feel. And there is, even more, we can do with service workers, but we are only going to be looking at the most basic thing - getting our web app to work offline.

There is a caveat! Service workers can’t work over HTTP, except localhost. This means that we can only make use of service workers when we are on an HTTPS protocol (that is the URL begins with HTTPS) or when we are on a localhost port (in development).

Let’s get started.

REGISTERING A SERVICE WORKER

The first step in making our app work offline is registering a service worker. To do this, we create a ./sw.js file in the root directory of our project. This is our service worker script, and it can be given any name. What is worthy of note is that the service worker must be located strategically in such a way that any file that needs to make use of the service worker is in the same folder as the service worker file or in a sub-folder. Now we go to our index.js file to tell our app where our service worker is.

The index.js file can be any JavaScript file that is run when our webpage loads. Now we paste the following code in our index.js file.

The code on line 2 first checks if the browser supports service workers. Then we call the register method of the navigator.serviceWorker object. This method receives one argument, which is the path to the service worker file.

The method returns a Promise object. The argument of the then method is a callback that is run if the service worker registration is completed successfully. If the service worker registration is not successful, the callback in the catch method is run.

INSTALLING A SERVICE WORKER

The next step is installing the service worker we just registered. Service workers are based on events. To install the service worker, we use the install event. This is the best place to cache resources and assets so that they can still be accessed when the user goes offline. This is done in the callback of the install event listener. Let’s paste the following in the sw.js file we created earlier.

We call caches.open() and pass the name of the cache as a parameter. This opens the cache if it exists, and if it does not exist, a new cache with the name is created Then we call cache.addAll() passing an array of paths to files as a parameter. This adds the files to the cache that was opened earlier. We notice that we passed the caches.open() as a parameter to e.waitUntil() method. This is because cache.open() and cache.addAll() return promises. The event.waitUntil() method helps to determine how long the caching takes before the installation of the service worker is completed.

If all the files specified in the array passed to the cache.addAll() object are successfully cached, then the installation of the service worker is successful. But if anyone fails, the entire installation process will fail. And the installation process tries again for every refresh made on the app.

Note that we can perform many other tasks at this stage - in the install event callback. But for now, this is enough to get our app to work offline… Well, almost enough …

FETCH CACHED DATA.

We are done registering and installing our service worker, as well as caching some files. At this point, we need a way to be able to get our cached data when they are requested. We make use of the fetch event of the service worker to do this.

After the installation of a service worker, anytime the page is refreshed or a new page under the scope of the service worker is navigated to, the fetch event of the service worker is fired. In the callback of the fetch event, we specify what we want to do. We can get our cached data.

In the callback of the fetch event, we specified a callback that intercepts any fetch request made in our app under the scope of the service worker. The event.respondWith() method prevents the browser's default fetch handling and allows us to provide a promise for a Response. So we pass a promise from caches.match(). This method examines the request and looks in any of the caches that our service worker set up for any cached results that match the requested resource.

The code on line 7 above specifies that we return res (the cached value) if we have a matching response; otherwise, we return the result of a fetch function, which will conduct a network request and return the data if anything can be received from the network.

At this point, we have successfully made our app accessible offline. If we deploy our app and try accessing it with an internet connection for the first time, the service worker gets installed. Refreshing the app or going to a new page allows the service worker to cache the specified files. If we go offline and refresh our app, we will still be able to access the site, and those resources that were previously cached will be fetched and displayed.

Since our app has been made accessible offline, we can end here. But we want to see how to make our web app give users the kind of experience they get while using a native mobile or desktop app. We do this with a web manifest in combination with the service worker we just added to our app. This turns our web app into a progressive web app (PWA).

PROGRESSIVE WEB APPS (PWA)

According to the MDN web documentation, PWAs are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps. PWAs provide several advantages to users — including being installable like a native app, progressively enhanced, responsively designed, re-engageable, linkable, discoverable, network independent, and secure.

The step left to turn our web app into a PWA is adding our web manifest. The web manifest is a JSON file containing configurations and guidelines that inform the browser about our PWA and how it should behave when it is installed.

Web manifests are usually named manifest.json. Although we can name it whatever, it has to end with a .json or .webmanifest extension. Also, the web manifest should be placed in the root folder of the project

The above file is what should be placed in our manifest.json. Each of those keys has a different meaning and gives the browser a particular instruction regarding handling the PWA.

The name and short_name specifies the name of the PWA.
The description gives a short description of our app.
The start_url tells the browser where it should start when the browser is launched.
The theme_color specifies the background color of the toolbar. Note that the color we specify as the theme color should be the same as the one we specified in our HTML
The background_color specifies the color of the background of the splash screen (introductory screen of our application) when the app is installed on mobile.
The display specifies a custom browser UI that is shown when our app is launched after it has been downloaded. It has several options including
- fullscreen
- standalone
- minimal-ui
- browser
The icons property is an array of image objects that defines the set of icons the browser should use on different parts of the app - home screen, splash screen, app launcher, etc - after the user has installed the PWA.

To get an in-depth explanation of these properties and more, check out this web.dev article or this MDN article.

At this point, if we load our app over an HTTPS protocol or on localhost, the browser will ask us to install the app. On desktop, we should see this prompt at the right-hand side of our URL bar. And on mobile, we should see it at the bottom of our screen.

Also, installing the app creates an app launcher that you can use to launch the app at any time.

Furthermore, opening a PWA that has already been installed on a desktop brings up an icon that asks us to open this link with an app. Clicking on the icon opens the app.

GALLERY

Below are some shots from our PWA, the process of installation and launching on both mobile and desktop devices.

SUMMARY

In conclusion, to make our web app work offline, we need to implement a service worker. And to give our web app some of the features of a native app, we include a web manifest.

The live version of the app I used in this tutorial is here and the github repository is here.

Signing out, Steph Crown ✌️

Transitioning from React Router v5 to v6

Stephen Emmanuel — Tue, 11 Jan 2022 01:06:02 +0000

React-router is the standard library for routing in react js. It allows users of a react app to move between different sections (components) of the app.

The react-router team announced the release of a stable version of react-router version 6 (v6) towards the end of 2021, but switching from react-router version 5 (v5) to v6 may be difficult due to some big breaking API changes. In this article, we will walk through what is new in v6 and how to upgrade an existing React project from v5 to v6.

To upgrade the version of the react-router package in our app, we navigate to the project folder and run

npm install react-router-dom@[VERSION_NUMBER]

Replace VERSION_NUMBER with the version we want to install, or with “latest” if we want the latest version, like so:

npm install react-router-dom@6

npm install react-router-dom@latest

Note that we have to be connected to the internet to be able to complete the installation else the installation will fail. Also, ensure that the version of react in your project is v16.8 or greater because react-router v6 relies heavily on hooks that were first supported by react v16.8

`Switch` is replaced with `Routes`

The first casualty of the v5 era is the Switch component. The Switch component is used to wrap our routes and it ensures that just one matching route is loaded per time. But this does not exist in v6 anymore. We now use the Routes component to do the same thing that Switch does. Note that we still import BrowserRouter to wrap our app in, just as is done in v5.

In v5, we did it as so:

import { BrowserRouter, Switch } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Switch>
                    {" "}
                    {/* Individual Routes come in here */}
                </Switch>
            </div>
        </BrowserRouter>
    );
}
export default App;

But in v6, this is how we will do it

import { BrowserRouter, Routes } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Routes>
                    {" "}
                    {/* Switch changes to Routes */}
                    {/* Individual Routes come in here */}
                </Routes>
            </div>
        </BrowserRouter>
    );
}

export default App;

Update in the definition of `Route` component

Although the Route component still maintains a spot in v6, the way we will define it is different from the way we did in v5. We will no longer place the component we want to render in any of the ways we did it in v5, we will instead pass it as the value of the element prop.

No more `exact` prop

In v5, without adding exact as a prop to a Route component, the path will match if a URL starts with the path keyword, and because the matching process is in order from top to bottom. But in v6, we would not be needing the exact prop because the path pattern matching algorithm was changed, and is even more enhanced now.

In v5, we did it as so:

<Switch>
   {/* There were 3 ways we declared routes in v5 */}
   <Route path="/signup" component={Product} />
   {/* OR */}
   {/* This method allows us pass props to the rendered component */}
   <Route path="/games">
       <Product id={2} />
   </Route>
   {/* OR by passing a callback to the render prop */}
   <Route path="/games" render={(props) => <Product {...props} />} />
</Switch>;

In v6,

<Routes>
   {" "}
   <Route path="/games" element={<Product />} />
   {/* And with props for the rendered component */}
   <Route path="/movies" element={<Product id={200} category="shirt" />} />
</Routes>;

`Links` and `NavLinks`

Link and NavLink components still take their places in v6. The Link component generally works as it did in v5, but with the NavLink component, the activeClassName and the activeStyle prop were removed. In v5, activeClassName prop was used to apply some CSS classes automatically to the link once it became active, and the activeStyle allowed us to add internal styles to a link when it became active.

But in v6, we can now use a function which information about the active state of the link. The function’s parameter is an object with the property isActive. This property is true when the link is active and false when it is not. The value of isActive now allows us to use conditional expressions to indicate an active style or class name(s).

In v5, we did it as so:

import {NavLink} from “react-router-dom”

{/* … */}
<NavLink
   to="/product"
   style={{ color: "#689" }}
   activeStyle={{ color: "#3072c9" }}
   className="nav_link"
   activeClassName="active"
>
   Products
</NavLink>;

But in v6, we will do it as so:


<NavLink
   to="/product"
   style={({ isActive }) => ({ color: isActive ? "#3072c9" : "#689" })}
   className={({ isActive }) => `link${isActive ? " active" : ""}`}
>
   Product
</NavLink>;

`Redirect` has made way for `Navigate`

In v5, we used the Redirect component to take one to another page but it is no longer exported from react-router-dom in v6. It has been replaced with the Navigate component.
In v5, we did it as so:

<Route path="/faq">
   <Redirect to="/about" />
</Route>;
<Route path="/about" component={About} />;

But in v6, we will do it as so:

<Route path="/games" element={<Navigate to="/about" />} />;
<Route path="/games" element={<About />} />;

It is important to note that if we just added the Navigate component the way we did in the snippet above, it will only push our navigation to this path onto the navigation stack, but if we intend to replace the current page with a new page, we will add the replace prop to the Navigate component as in so:

<Route path="/games" element={<Navigate replace to="/about" />} />;

Nested Routes

Nested routes, as the name implies, are routes placed in another route. They are used to render more specific information in child components. In v6, we place our nested routes as children of our parent route. Then we introduce the Outlet component, which is exported from react-router-dom in the rendered component to specify where we want the nested information to be displayed. The Outlet component is not necessary but it makes the code cleaner.
In v5, we did it as so:

import { useRouteMatch } from "react-router-dom";
function App() {
   return (
       <BrowserRouter>
           <Switch>
               <Route exact path="/about" component={About} />
               <Route path="/product" component={Product} />
           </Switch>
       </BrowserRouter>
   );
}

function Product() {
   let match = useRouteMatch();
   return (
       <div>
           <Switch>
               {/* match.path returns the path specified in parent route. In this case it is "/product" */}
               <Route path={`${match.path}`}>
                   <AllProducts />
               </Route>
               {/* And in this case it is /product/:id */}
               <Route path={`${match.path}/:id`}>
                   <ProductDetail />
               </Route>
           </Switch>

       </div>
   );
}

In v6, we do it as so:

import { Outlet } from "react-router-dom";

function App() {
   return (
       <Routes>
           <Route path="/about" element={<About />} />
           <Route path="/product" element={<Product />}>
               {/* Here the paths of the nested routes are relative to the path of the parent route. */}
               {/* This becomes "/product/" */}
               <Route path="/" element={<AllProducts />} />
               {/* And This becomes "/product/:id" */}
               <Route path="/:id" element={<ProductDetail />} />

           </Route>
       </Routes>
   );
}

function Product() {
   return (
       <Container>
           <>
               <div>Product</div>
               {/* Other content of the parent component */}
           </>
           {/* This is where the nested information begins */}
           <Outlet />
       </Container>
   );
}

Programmatic Navigation

Programmatic navigation occurs when a user is redirected as a result of an event that occurs on a route, such as clicking a button, an API request completing, e.tc. In v5, we could use the useHistory hook to do something like:

import { useHistory } from "react-router-dom";

function Product() {
   const history = useHistory();

   const handleClick = () => {
       //This pushes the new route on top of the navigation stack
       history.push("/new-route");

       //This replaces the current route with the new route in the navigation stack
       history.replace("/new-route");
   };

   return (
       <div>
           <button>Click Me to redirect to new route</button>
       </div>
   );
}

But in v6, useHistory hook is replaced with useNavigate hook, and we use it in different ways.

import { useNavigate } from "react-router-dom";

function Product() {
   const navigate = useNavigate();

   const handleClick = () => {
       //This pushes the new route on top of the navigation stack
       navigate("/new-route");

       //This replaces the current route with the new route in the navigation stack
       navigate("/new-route", { replace: true });
   };

   return (
       <div>
           <button>Click Me to redirect to new route</button>
       </div>
   );
}

One cool thing is that we can go forward and backward any number of times on the navigation stack. By using a positive number as a parameter to navigate() above, the route moves that number of steps forward. And a negative number does the same thing backward

// Goes forward
navigate(1)
// Goes forward twice
navigate(2)
// Goes backward
navigate(-1)
// Goes backward three times
navigate(-3)

The `Prompt` Component

The Prompt component in v5 prevents accidentally leaving a page if there are unsaved changes. But react-router team did not include it in v6, and there is no alternative for it. So if you need the feature, you either manually implement it or move back to v5.

In addition to not including Prompt in the current release, useBlocker and usePrompt also do not work. The react-router team although said in the official docs that they are currently working on adding it back to v6 at some point, but not for the first stable release of 6.x.

Summary

Let us highlight the changes we have gone through.

Switch component is replaced with Routes component.
Changes in how to place the rendered component of Route.
No more exact prop in the Route component.
activeClassName and activeStyle props have been removed from NavLink.
We can access the isActive state of a NavLink component through a function callback.
Redirect component has been replaced with Navigate component.
A sleeker way to implement nested routes.

In conclusion, if you think you are not ready to make the switch to v6 from v5 or any other version, you can always install a previous version using this.

npm install react-router-dom@[VERSION_NUMBER]

But then, you will be missing out on some goodies that came with v6 including but not limited to:

Enhanced path pattern matching algorithm.
Bundle size reduced by 60% according to Bundlephobia

I believe we were able to successfully make that switch to react-router v6 and stop using the Switch component (pun very much intended) 😌.

Have a great coding experience 🙌.

Signing out,
Steph Crown ✌️

DEV Community: Stephen Emmanuel

Vectorization in Python for Machine Learning

Introduction

The Problem With Loops

Numpy Vectorization

Example 1: Element-wise Multiplication

Example 2: Dot Product

Pandas Vectorization

Example 1: Element-wise Operations Between Columns

Example 2: Conditional Operations and Data Categorization

Conclusion

8 Ways Variables Are Declared in JavaScript

What is variable scope?

var declaration

let declaration

const declaration

function declaration

Function parameters

The catch clause in a try-catch statement

class declaration

import statement

In conclusion

Building an Application with ClojureScript

Why ClojureScript?

Getting started

Bootstrapping a new project

Starting our app

The REPL

Let's write some UI code

Let's add some interactivity

Conclusion

How to Set up A Clojure Script and Phoenix Project

Writing Better Commit Messages

What is a commit message?

Why the fuss about commit messages?

Writing better commit messages.

The header/subject

The Body

The Footer

How to make your web app work offline with just HTML, CSS, and JavaScript.

WHAT IS A SERVICE WORKER?

REGISTERING A SERVICE WORKER

INSTALLING A SERVICE WORKER

FETCH CACHED DATA.

PROGRESSIVE WEB APPS (PWA)

GALLERY

SUMMARY

Transitioning from React Router v5 to v6

Switch is replaced with Routes

Update in the definition of Route component

No more exact prop

Links and NavLinks

Redirect has made way for Navigate

Nested Routes

Programmatic Navigation

The Prompt Component

Summary

`var` declaration

`let` declaration

`const` declaration

`function` declaration

The `catch` clause in a `try-catch` statement

`class` declaration

`import` statement

`Switch` is replaced with `Routes`

Update in the definition of `Route` component

No more `exact` prop

`Links` and `NavLinks`

`Redirect` has made way for `Navigate`

The `Prompt` Component