DEV Community: Theofanis Despoudis

New MEAP update "Full-Stack AI for Web Developers"

Theofanis Despoudis — Tue, 28 Jan 2025 12:32:34 +0000

I’m excited to announce that a new MEAP update for my book, "Full-Stack AI for Web Developers", has just been published! 🎉

This update includes:
✅ Chapter 5: Prompt Engineering Techniques
✅ Chapter 6: Getting Started with Langchain.js

📚 Check out the latest updates here: https://mng.bz/BXlv

A huge thank you to everyone who has supported this journey so far, and to the amazing team at Manning Publications Co. for their guidance. 🙌

If you have any questions about the new content or want to discuss AI in web development, drop a comment below! Let’s keep the conversation going. 💬

Full-Stack AI for Web Developers Book Launch + Manning Holiday Sale

Theofanis Despoudis — Fri, 20 Dec 2024 12:16:55 +0000

🎉 Exciting News: Manning's Mega Holiday Sale + My New Book Launch! 🚀
I'm thrilled to share two pieces of amazing news with my network:
1️⃣ Manning Publications is running two massive holiday sales:

Dec 20: Flash Sale - 50% off ALL print books (including MEAPs)
Dec 24-25: Everything 50% off + annual pro subscriptions for just $199.99

2️⃣ Perfect timing to grab my new book "Full-Stack AI for Web Developers" through Manning's Early Access Program! 📚
In this practical guide, I break down how to seamlessly integrate AI into web applications using React, Next.js, Vercel, and LangChain. Whether you're a seasoned developer or just starting with AI integration, you'll find:

Real-world implementation strategies
Step-by-step tutorials
Modern web development best practices

🎁 Special Launch Offer: Use code mldespoudis for 50% off my book (valid until Dec 28)
Learn more: https://mng.bz/lYJj

My New Book: Full-Stack AI for Web Developers - 50% discount code included! AMA!

Theofanis Despoudis — Thu, 12 Dec 2024 12:05:18 +0000

Excited to share my new book, "Full-Stack AI for Web Developers", now available through Manning's Early Access Program.

After months of work, I've put together a practical guide that bridges the gap between traditional web development and AI integration. The book walks through real-world approaches to incorporating AI into web applications using React, Next.js, Vercel, and LangChain.

For developers looking to understand how AI can enhance web development, this book offers:

Practical AI integration techniques
Hands-on examples
Insights into modern web development practices

Launch offer: 50% off with code mldespoudis (valid until December 28)

Learn more:

https://mng.bz/rKdg

My new book about Typescript 4 is published. AMA

Theofanis Despoudis — Thu, 16 Sep 2021 08:48:38 +0000

I'm happy to announce that my book, "TypeScript: 4 Design Patterns and Best Practices" is now available on Amazon:

Amazon.com: link
Amazon.co.uk: link

Take a hands-on approach and get up and running with the implementation of design patterns in TypeScript learning best practices for writing good testable code.

If you want to ask few questions about the book, or how to write a technical book, then you Ask Me Anything.

Thank you.

How to read Haskell Documentation. Step by step guide.

Theofanis Despoudis — Mon, 20 Jul 2020 16:59:27 +0000

When we are in a process of learning Haskell, we often have trouble performing simple tasks like implementing common algorithms.

Often we get baffled when we navigate though the documentation as it seems to have a steep learning curve. There are lots of reference materials but not a lot of soft tutorials, that explain how to use the libraries or functions.

In this article we are going to show a step by step guide on how to read, practice and understand Haskell documentation pages.

Our aim is to make the hard reference documentation more approachable and readable. Let's get started.

Use case: `Data.Array` module

Let's take a simple case with the Data.Array module, which provides facilities for handling Immutable non-strict arrays.

Their main documentation page is listed here:

For reference, this documentation maps to the following source code.

Let's read the main description of the module:

Immutable non-strict arrays
Haskell provides indexable arrays, which may be thought of as functions whose domains are isomorphic to contiguous subsets of the integers. Functions restricted in this way can be implemented efficiently; in particular, a programmer may reasonably expect rapid access to the components. To ensure the possibility of such an implementation, arrays are treated as data, not as general functions.

Since most array functions involve the class Ix, this module is exported from Data.Array so that modules need not import both Data.Array and Data.Ix.

module Data.Ix

There are a lot of terms listed here. Let's go through them one by one.

❓What are non-strict arrays?

Nonstrict arrays are arrays that are not lazy. This is because those arrays need to have a finite domain of values. Traditionally we know that lists in Haskell are lazy. If we want to implement indexable lists though, it turns out that, laziness is unsuitable for those operations.

Often for example when we want to access a range of values from the array, we want to evaluate them in parallel. That means we want immediate access and using laziness here makes things more computational expensive and inefficient.

If you want to read an interesting article about changing from list to array read this.

❓What are indexable arrays?

Indexable arrays are arrays that we can use an integer index to retrieve the nth element of the array.

Example. Get the first element of this array

a = array (0,4) [(0,1),(1,2),(2,3),(3,4),(4,5)]

Solution

We use the (!) operator passing the first index 0 to retrieve the first element:

a ! 0
1

Note that the array declares the starting index and the ending index in the first tuple (0,4).

If we were to request an index that is out of bounds we would get an error instead:

 a ! 5
*** Exception: Ix{Integer}.index: Index (5) out of range ((0,4))

❓What are random-access arrays?

Random access means not linear access. It means that we can access every element we want, independently on what other elements we accessed before or intend to access after and ideally in constant time O(1).

Note that we can use the regular Haskell list index function (!!) to retrieve the nth value from the least but that would traverse the whole list stoping at n, so making it an expensive operation with O(n) time complexity.

❓What other information we can infer from the above description?

We can infer that in order for Haskell to provide efficient random access arrays, then we need to treat arrays as data and not as functions. That's why when we import Data.Array we also import Data.Ix which is another class that is used to map a contiguous subrange of values in type onto integers and is used for array indexing.

We can briefly inspect the package documentation here.

Lets continue with the following documentation section:

data Array i e#

The type of immutable non-strict (boxed) arrays with indices in i and elements in e.

Instances
 IArray Array eSource#   
 Functor (Array i)  
Since: base-2.1

 Foldable (Array i) 
Since: base-4.8.0.0

 Ix i => Traversable (Array i)  
Since: base-2.1

 (Ix i, Eq e) => Eq (Array i e) 
Since: base-2.1

 (Ix i, Ord e) => Ord (Array i e)   
Since: base-2.1

 (Ix a, Read a, Read b) => Read (Array a b) 
Since: base-2.1

 (Ix a, Show a, Show b) => Show (Array a b) 
Since: base-2.1

This section here is quite valuable if you intent to use the Array module within certain operations as it describes the supported categories that Array implements.

❓What is `instance` in Haskell?

An instance is what we normally call Typeclass Instance in Haskell, which is a way to represent types which you can apply relevant typeclass functions.

So when the documentation lists for example that:

Functor (Array i) it means that Array follows or implements the Functor laws so it's essentially a Functor.

❓What is `Functor` in Haskell?

A Functor is a typeclass that allows a type to be mapped over. This means that we can use the fmap function over the Array elements.

Example. Apply fmap to double the elements on the following array:

a = array (0,4) [(0,1),(1,2),(2,3),(3,4),(4,5)]

Solution

The type of fmap for Array is defined as:

fmap :: (a -> b) -> Array i a -> Array i b

This means that it takes a function from type a to b and an Array of type a and returns an Array of type b.

So we have:

fmap (*2) a
array (0,4) [(0,2),(1,4),(2,6),(3,8),(4,10)]

Note: The definition of Functor for Array also implements left applicative (<$) which has a type signature:

(<$) :: a -> Array i b -> Array i a

That reads as: Create a new Array of type a from an Array of type b by replacing all of the values in the the first array by a given value of type a.

For example:

 1 <$ a
array (0,4) [(0,1),(1,1),(2,1),(3,1),(4,1)]

Such operator is useful for quick Array initialisation.

❓What is `Traversable` and `Foldable` in Haskell?

Let's describe Foldable first. It's another typeclass in Haskell that allows a container of values to be folded (or reduced) over a single value.

In our example, it means that we can use the foldl or foldr function over the Array elements.

A Traversable type is a kind of Foldable with the extra ability to change the shape of the array while iterating over its elements E.g. we can put new values.

We will understand how to use Foldable and Traversable typeclasses in the following examples.

Example. Calculate the sum of the elements of the following Foldable array:

a = array (0,4) [(0,1),(1,2),(2,3),(3,4),(4,5)]

Solution

We need to apply foldr to the Array a with initial value 0 and using the (+) accumulator.

How?

Let's inspect the type of the foldr function:

foldr :: (a -> b -> b) -> b -> Array i a -> b

That reads as: Start with an initial value of type b and an Array of type a and reduce the array into a type b using the folding function (a -> b -> b).

So we have:

foldr (+) 0 a
15

This is the same as:

1+(2+(3+(4+(5+0))))

Example. Convert all the elements of the following Traversable array from ints to strings:

a = array (0,4) [(0,1),(1,2),(2,3),(3,4),(4,5)]

Solution

We need to apply mapM to the Array a using the 'show' function to re-build the Array of ints into and Array of strings.

How?

Let's inspect the type of the mapM function:

mapM :: Monad m => (a -> m b) -> Array i a -> m (Array i b)

That reads: Map each element of the Array with type a to a monadic action, evaluate these actions from left to right, and collect the results into a monad that holds an Array of type b.

So we have:

mapM show a
[array (0,4) [(0,'1'),(1,'2'),(2,'3'),(3,'4'),(4,'5')]]

Here the monad is just another list.

❓What is `Ord` and `Eq` in Haskell?

The Eq typeclass defines equality (==) and inequality (/=). That means we can use those operators to compare Arrays.

Example. Compare the following arrays a and b for equality

a = array (0,4) [(0,1),(1,2),(2,3),(3,4),(4,5)]
b = array (0,4) [(0,1),(1,2),(2,3),(3,4),(4,6)]

Solution

a == b
False

That means that a and b are not equal.

The Ord typeclass is used for total ordering comparisons, for example we can use the compare or <= functions to get an Ordering.

Example. Compare the following arrays a and b for Ordering

a = array (0,4) [(0,1),(1,2),(2,3),(3,4),(4,5)]
b = array (0,4) [(0,1),(1,2),(2,3),(3,4),(4,6)]

Solution

a `compare` b
LT

Array a comes before b in regards to their default ordering as the last element of a is 5 and the last element of b is 6.

Conclusion and Next Steps

Given the examples above, I hope you have understood in general terms how to read Haskell documentation. It may be rough in the beginning but the more effort you put on, the more it makes sense.

Solving Algorithm Challenges in Haskell: Anagrams

Theofanis Despoudis — Wed, 17 Jun 2020 19:34:00 +0000

When I learn a new Programming language, I tend to spend a lot of time in the documentation.

However, a lot of times I find this approach very tiring and soon I lose interest.

I think there is a better way.

In this series of articles I'm going to write down the though process and the journey of learning Haskell in practice by solving common algorithmic challenges as listed in various places like Leetcode, HackerEarth or GeeksForGeeks.

The idea is to learn the basics of the language in a practical way. I will also provide a sample implementation in a different language like Typescript for comparison.

Let's start with a typical challenge you may find in programming interview sites:

Find minimum number of characters so that two strings become anagram

There are lots of variations on this problem as seen in the following list:

We are given two strings a and b and we are asked to find the number of additions or removals that we need to perform one the first string so it becomes an anagram of the other.

For example given the strings:

a = cde
b = abc

The operations to turn a into b are the following:

remove d
add b
remove e
add c

So the result would be 4. The character c exists in both strings so it does not count. So if we have two occurrences of the letter b in the first string and only one in the second then we only have one extra operation as we will only have to add one extra b.

This is the hint for the solution. We have to just calculate the count of characters of both strings and find the difference of their char counts.

For example in those two strings we have:

aCount = [(c, 1), (d, 1), (e, 1)]
bCount = [(a, 1), (b, 1), (c, 1)]

Then the minimum number of characters to become anagrams are:

c-c + (a - 0)+ (d - 0) + (e - 0) + (b - 0) = 1 - 1 + 1 + 1 + 1 + 1 = 4

Coding it in Haskell

The easy part is finding the algorithm here. The hardest part is porting it into Haskell.

In the beginning, I had a hard time finding the way to perform basic string and list manipulation operations.

You can't just start mapping and folding things that have different types. Every-time you will have type errors. You need to be aware each type of the current types that you are holding into.

Also you cannot just print an int using putStrLn. You need to convert into string first.

Let's start by building a small toolbox of functions:

First we read the number of test cases:

 -- Read num of cases
    n <- getLine

n is String here, not an Int. So in order to use it as an integer you need to convert it. Let's create a function that does that:

-- Converts int to string
strToInt :: String -> Int
strToInt x = read x :: Int

The notation here is for documentation and clarity. It simply says: I'm a function named strToInt that takes a String and returns an Int.

Then we need to repeat N times a function. Haskell has no for loop for that so we have to create our own using recursion:

-- Repeat function n times
repeatNTimes 0 _ = return ()
repeatNTimes n action =
 do
  action
  repeatNTimes (n-1) action

I already spent at least 30 min trying to figure out how to do a simple for loop like that!

TIP: As mentioned by Sam, we can use replicateM_ to achieve the same thing!

import Control.Monad
...
replicateM_ (strToInt n) anagramCheck

Now we have all the pieces for the main method:

main = do
    -- Read num of cases
    n <- getLine
    -- Repeat n times check
    repeatNTimes (strToInt n) anagramCheck

We only need to define the anagramCheck function which is the solution to the problem:

First we need to read the two strings:

first <- getLine
second <- getLine

Then we need to calculate their character frequencies. For simplicity we need a function that takes a string and returns a list of tuples (Char, Int) for each char in the alphabet
wordFrequencies :: String -> [(Char, Int)]

Using list comprehensions we can generate this like that:

-- Find word frequency of string
wordFrequencies :: String -> [(Char, Int)]
wordFrequencies word = [ (x,c) | x<-['A'..'z'], let c = (length.filter (==x)) word, c>=0 ]

We create a list of tuples (x,c) when x is the range of characters from 'A' to 'z' and c is the count of char occurrences within the vocabulary. Awesome!

So we get those char frequencies:

-- calculate frequency of each character in first string
   let count1 = wordFrequencies first

-- calculate frequency of each character in second string
   let count2 = wordFrequencies second

Then we need to calculate the sum of their absolute differences.

This is tricky because we need to iterate over two lists comparing indexes.

Do do that we need to iterate over the list of tuples, grab their second element, compute their abs difference and return the result. Then we take the sum.

To take the second item in a tuple:

snd count1

To map in a list:

(map snd count1)

To take the abs difference of two numbers:

absDiff :: Int -> Int -> Int
absDiff x y = abs (x - y)

To iterate over the first item on each list and combine them together:

zipWith (\x y -> absDiff x y) (map snd count1) (map snd count2)

To take the sum of the differences:

let diff :: Int = sum $ zipWith (\x y -> absDiff x y) (map snd count1) (map snd count2)

Finally we print the result:

putStrLn (show diff)

Here is the complete code of the solution:

{-# LANGUAGE ScopedTypeVariables #-}

strToInt :: String -> Int
strToInt x = read x :: Int

-- Find word frequency of string
wordFrequencies :: String -> [(Char, Int)]
wordFrequencies word = [ (x,c) | x<-['A'..'z'], let c = (length.filter (==x)) word, c>=0 ]

-- Find absolute diff of 2 numbers
absDiff :: Int -> Int -> Int
absDiff x y = abs (x - y)

-- Repeat function n times
repeatNTimes 0 _ = return ()
repeatNTimes n action =
 do
  action
  repeatNTimes (n-1) action

{-  
    function to calculate minimum numbers
    of characters to be removed to make
    two strings anagram
-}
anagramCheck = do
    first <- getLine
    second <- getLine

    -- calculate frequency of each character in first string
    let count1 = wordFrequencies first

    -- calculate frequency of each character in second string
    let count2 = wordFrequencies second

    -- calculate absolute difference of their freq count
    let diff :: Int = sum $ zipWith (\x y -> absDiff x y) (map snd count1) (map snd count2)
    putStrLn (show diff)
    return ()

main = do
    -- Read num of cases
    n <- getLine
    -- Repeat n times check
    repeatNTimes (strToInt n) anagramCheck

Coding it in Typescript

It's important so review the same code written in Typescript. Here is rough example:

function anagramCheck(word1: string, word2: string): number {
  let result = 0;
  const count1 = wordFrequency(word1);
  const count2 = wordFrequency(word2);
  for (let c in count1) {
    if (count2.hasOwnProperty(c)) {
      result += Math.abs(count1[c] - count2[c]);
    } else {
      result += 1;
    }
  }

  for (let c in count2) {
    if (count1.hasOwnProperty(c)) {
      result += Math.abs(count1[c] - count2[c]);
    } else {
      result += 1;
    }
  }

  return result;
}

function wordFrequency(word: string) {
  const freq = {};
  for (let i = 0; i < word.length; i++) {
    let c = word[i];
    if (freq.hasOwnProperty(c)) {
      freq[c]++;
    } else {
      freq[c] = 1;
    }
  }

  return freq;
}

This is more straightforward imperative code. It has it's merits but also it's downsides.

Next Steps

Stay put for more algorithmic challenges written in Haskell.

Build a type safe React App with ReasonML, Part 1

Theofanis Despoudis — Fri, 27 Mar 2020 17:18:07 +0000

Inspired by this tutorial.

I wanted to showcase a real world project using ReasonML which is an ecosystem of tools and libraries for developing type safe code using OCaml in the Browser. My aim is to help you see that there are not many differences between ReasonML and plain Javascript as the type system is smart enough to perform type inference without being too explicit.

In this example two-part series we’ll create a sample e-commerce app like the one shown in the inspired article above.

Let's get started:

Building a type-safe ReasonML app

We need to get started working with a ReasonML by configuring our project first.

First install the bsb-platform which is the ReasonML compiler tooling:

$ npm install -g bs-platform

Next create a new ReasonML project using the React Hooks theme which will setup the necessary boilerplate project for us:

$ bsb -init reason-example -theme react-hooks

The default boilerplate maybe not familiar for us. I recommend doing the following changes:

Remove the following files:

indexProduction.html
watcher.js
UNUSED_webpack.config.js

Change the index.html like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ReasonReact Examples</title>
</head>
<body>
  <div id="root"></div>
  <script src="Index.js"></script>
</body>
</html>

Create a new webpack.config.js file with the following content:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const outputDir = path.join(__dirname, 'build/');

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  entry: './src/Index.bs.js',
  mode: isProd ? 'production' : 'development',
  output: {
    path: outputDir,
    filename: 'Index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      inject: false
    })
  ],
  devServer: {
    compress: true,
    contentBase: outputDir,
    port: process.env.PORT || 8000,
    historyApiFallback: true
  }
};

Change the bsconfig.json file like this:

{
  "name": "reason-react-example",
  "reason": {
    "react-jsx": 3
  },
  "sources": [{
    "dir" : "src",
    "subdirs" : true
  }],
  "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
  "package-specs": [{
    "module": "commonjs",
    "in-source": true
  }],
  "suffix": ".bs.js",
  "namespace": true,
  "bs-dependencies": [
    "reason-react"
  ],
  "bs-dev-dependencies": ["@glennsl/bs-jest"],
  "refmt": 3,
  "gentypeconfig": {
    "language": "typescript",
    "module": "es6",
    "importPath": "relative",
    "debug": {
      "all": false,
      "basic": false
    }
  }
}

Create a babel.config.js file with the following contents:

module.exports = {
  env: {
    test: {
      plugins: ["transform-es2015-modules-commonjs"]
    }
  }
};

Update the package.json so that it has the following contents:

{
  "name": "reason-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "bsb -make-world",
    "start": "bsb -make-world -w",
    "clean": "bsb -clean-world",
    "webpack": "webpack -w",
    "webpack:production": "NODE_ENV=production webpack",
    "server": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "bs-platform": "^7.2.2",
    "gentype": "^3.15.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@glennsl/bs-jest": "^0.5.0",
    "bs-fetch": "^0.5.2",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "reason-react": "^0.7.0",
    "webpack": "^4.42.0",
    "webpack-dev-server": "^3.10.3"
  },
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!@glennsl/bs-jest|bs-platform).+\\.js$"
    ]
  }
}

Finally install the npm dependencies:

$ npm i

If you want to test the application now you need to run the dev server and the bsb compiler in two tabs:

$ npm run start
// In another tab
$ npm run server

However for the example you should delete all the examples inside the src folder and keep an Index.re file with the following example code:

ReactDOMRe.renderToElementWithId(<App />, "root");

This is similar to React's ReactDOM.render method but a little bit more convenient.

Create a new file named App.re in the same folder and add the following code:

[@react.component]
let make = () => {
  <main> {"Hello From ReasonML" |> React.string} </main>;
};

Let's explain here some conventions:

We use the [@react.component] annotation to specify that it's a react component
We name a let binding as make so that by default ReasonReact will discover it
We use regular JSX but when we want to display a string we need to pipe it to the appropriate type. In that case |> React.string.

Every-time you change anything in the code it will reload and see the changes to the UI.

Routing

ReasonReact comes with a router! Let's add the first route to match the home page:

Create a new file named Routes.re and add the following code:

[@react.component]
let make = () => {
  let url = ReasonReactRouter.useUrl();

  switch (url.path) {
  | [] => <Home />
  | _ => <NotFound />
  };
};

This will match either the base path / rendering the Home component or anything else rendering the NotFound component.

Create the following components:

Home.re

[@react.component]
let make = () => {
  <main> {"Hello World  " |> React.string} </main>;
};

NotFound.re

[@react.component]
let make = () => {
  <main> {"404 Page not found!" |> React.string} </main>;
};

Finally update the App component to render the Routes instead:

App.re

[@react.component]
let make = () => {
  <Routes />;
};

Now you know how to handle routing.

Styles and images

We can add stylesheets and images using regular require imports. We just need to define some external helpers that will map from ReasonML to Javascript.

Create a new file named Helpers.re and add the following code:

/* require css file */
[@bs.val] external requireCSS: string => unit = "require";

/* require an asset (eg. an image) and return exported string value (image URI) */
[@bs.val] external requireImage: string => string = "require";

So whenever we want to include css files we use it like:

requireCSS('./styles.css');

and this will compile as:

require('./styles.css');

Let's add styles for the NotFound page:

NotFound.css

.NotFound {
    margin: 30px auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.NotFound--image {
    margin-top: 60px;
}

Change the NotFound.re component to import the styles:

open Helpers;

requireCSS("./NotFound.css");

let notFoundImage = requireImage("./notFound.png");

[@react.component]
let make = () => {
  <main className="NotFound">
    <div className="NotFound--Image">
      <img src=notFoundImage alt="Not Found Image" />
    </div>
  </main>;
};

Finally you need to install the webpack dependencies and update the webpack.config:

$ npm i style-loader css-loader file-loader --save-dev

webpack.config.js

...
module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          esModule: false,
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
    ]

You need to find a notFound.png image and place it inside the src folder. Once you run the application again you can see the not found page:

Modelling the Domain problem

We have two important domains in the wireframe, inventory and cart:

We will create the application store and structure it based on the domain.

Let’s start with the inventory domain.

Inventory domain

ReasonReact has full support for React Hooks!. We can use reducers, effects, state, context variables to handle our application state. Let's start by defining our model types for the inventory domain based on the class diagram above.

Create a new file named InventoryData.re and add the following code:

type inventory = {
  id: string,
  name: string,
  price: int,
  image: string,
  description: string,
  brand: option(string),
  stockCount: int,
};

type action =
  | Fetch
  | FetchSuccess(list(inventory))
  | FetchError(string);

type state = {
  isLoading: bool,
  data: list(inventory),
  error: option(string),
};

let initialState = {isLoading: false, data: [], error: None};

The above code contains state, action types, and inventory domain mode
A few notes about the code above:

The inventory type determines the specified domain data
The actions variant determines the action types
The state handles the type of domain state. We also define an initialState

Now, it’s time to create an action for fetching the inventory store. Create a new file named InventoryActions.re with the following contents:

let fetchInventory = dispatch => {
  dispatch(InventoryData.Fetch);
  InventoryApi.fetch(payload =>
    dispatch(InventoryData.FetchSuccess(payload))
  )
  |> ignore;
};

The InventoryApi.re file contains the following content:

let fetch = callback => {
  callback(MockData.inventory);
};

Finally the MockData.re file is just a hardcoded list of inventory items:

open InventoryData;

let inventory = [
  {
    name: "Timber Gray Sofa",
    price: 1000,
    image: "../images/products/couch1.png",
    description: "This is a Test Description",
    brand: Some("Jason Bourne"),
    stockCount: 4,
    id: "fb94f208-6d34-425f-a3f8-e5b87794aef1",
  },
  {
    name: "Carmel Brown Sofa",
    price: 1000,
    image: "../images/products/couch5.png",
    description: "This is a test description",
    brand: Some("Jason Bourne"),
    stockCount: 2,
    id: "4c95788a-1fa2-4f5c-ab97-7a98c1862584",
  },
...

The final part of the inventory store is the reducer. Let's create that file:

InventoryReducer.re

open InventoryData;

let reducer: (state, action) => state =
  (state, action) =>
    switch (action) {
    | Fetch => {...state, isLoading: true}
    | FetchSuccess(data) => {...state, isLoading: false, data}
    | FetchError(error) => {...state, isLoading: false, error: Some(error)}
    };

Here we included the InventoryData module so that the types are inferred without prefixing the module name. Note that we can ignore the type definition of the reducer without losing type checking. ReasonML is always on guard if something goes wrong with the types!.

Cart domain

It’s time to implement the types and actions for the cart model. The functionalities of the cart domain are similar to those of the inventory domain.

First, create a file named CartData.re and add the following code:

open InventoryData;

type cart = {
  id: string,
  items: list(inventory),
};

type action =
  | AddToCart(inventory)
  | RemoveFromCart(inventory)
  | Fetch
  | FetchSuccess(option(cart))
  | FetchError(string);

type state = {
  isLoading: bool,
  data: cart,
  error: option(string),
};

let initialState = {isLoading: false, data: {id: "1", items: []}, error: None};

This represents the cart domain attributes, cart action types, and cart state.

Next, create CartActions.re for the cart domain:

let fetchCart = dispatch => {
  dispatch(CartData.Fetch);
  CartApi.fetch(payload => dispatch(CartData.FetchSuccess(payload)))
  |> ignore;
};

let addToCart = (inventory, dispatch) => {
  dispatch(CartData.AddToCart(inventory)) |> ignore;
};

Where CartApi.re is:

let fetch = callback => {
  callback(MockData.cart);
};

Finally, write the code for the cart domain reducer. Create a file, name it CartReducer.re, and add the following code:

open CartData;

let reducer: (CartData.state, CartData.action) => CartData.state =
  (state, action) =>
    switch (action) {
    | Fetch => {...state, isLoading: true}
    | FetchSuccess(data) => {...state, isLoading: false, data}
    | FetchError(error) => {...state, isLoading: false, error: Some(error)}
    | AddToCart(inventory) =>
      let updatedInventory = [inventory, ...state.data.items];
      {
        ...state,
        isLoading: true,
        data: {
          id: state.data.id,
          items: updatedInventory,
        },
      };
    | RemoveFromCart(inventory) =>
      let updatedInventory =
        List.filter(
          (item: InventoryData.inventory) => item.id != inventory.id,
          state.data.items,
        );
      {
        ...state,
        isLoading: true,
        data: {
          id: state.data.id,
          items: updatedInventory,
        },
      };
    };

Next Part

We will continue in the next and final part of this tutorial by defining the view components and glue everything together.

30 minute introduction to ReasonML for React Developers

Theofanis Despoudis — Mon, 23 Mar 2020 12:48:06 +0000

The next level of React Development is with ReasonML. It allows existing Javascript developers to write OCaml code. The major benefits here are type safe inference (much more pleasant and advanced than Typescript) and really fast compilation times (orders of magnitude faster than Typescript). Not to mention is also very fun to work with.

In this article we'll try to go through as many ReasonML snippets as we can, and explain what the keywords and symbols they contain mean.

Let's get started...

Variable Bindings

let introduces variable bindings. This works the same as const in Javascript:

let greeting = "Hello World"

let bindings are immutable, thus they cannot change after the first assignment:

let greeting = "Hello World"
greeting = "Hello Again"
^^^^^^^^
Error

The let assignment should be done immediately as the compiler needs to infer the type:

let greeting
greeting = "Hello Again"
^^^^^^^^
Error

However, using a ref with a wrapped value passed though allows us to assign a new value later on:

let greeting = ref("")
greeting = "Hello World"

You can create new scopes using braces {} and then assign the result to a binding. Everything you bind inside the scope is not available outside. The last expression evaluated is returned as the result. This is very useful for logical grouping of expressions and for better readability:

let fullName = {
  let first = "Theo";
  let last = "Despouds";
  first ++ " " ++ last
};
"Theo Despoudis"

You can bind new values to existing variables. The value of the last binding is what is referred in subsequent calculations:

let a = 10.;
let a = 11;
let a = a * a; // 121

Type Inference

When we use let without specifying the type, the compiler will infer it:

let a = 10.; // float
let a = 10; // int
let a = "abc"; // string
let a = 'a' // char

If we want to be more explicit about the type we can declare it:

let a: float = 10.;
let a: int = 10;
let a: string = "abc";
let a: char = 'a';

You can assign a different name to a type using type aliases:

type statusCode = int
let notFound: statusCode = 404;

Note that a type name must start with a lower-case letter or an underscore. The following will fail:

type StatusCode = int
     ^^^^^^^^^^
let notFound: StatusCode = 404;

The type system of ReasonML is completely "sound" compared to Typescript which is not. See this article for more information.

Strings

Strings are wrapped in double quotes. Characters are wrapped in single quotes. Strings can span multiple lines:

"aaa";
"bbb;
bbb";
'a';

Strings are unicode encoded but chars are not. They are just ASCII so anything other than ASCII throws an error:

"α" // Greek letter alpha

'α';
^^^

Booleans

true and false represent the bool type. All relevant operations that we use in Javascript work the same in ReasonML:

true && false;
true || true;
1 < 2;
2 >= 3;
2 == 2;
3 === 3;

There are no binary or xor operators. The following would not work:

true | true;
false & true;
true ^ true;

Numbers

There are two types of numbers. Integers and floats. Float numbers end with a dot . whereas ints do not.

We use standard operators for integers such as +, -, * and /.

We use different operators for floats such as +., -., *. and /..

1 + 10; // 11
1. +. 10.; // 11.

10. *. 5.; // 50.

We cannot mix operations between types. The following expressions will fail:

1 +. 10 // +. works on floats only
1. + 10; // + works on ints only

Lists and Arrays

Lists and Arrays are collections of similar items. Lists are immutable and the notation is the same as Javascript:

let groceryList = ["eggs", "pasta", "milk"];

You cannot mix types:

let ids = [1,2, "3"];
                ^^^

The type of list is list(<type>) for example list(int) or list(string).

There are not list methods available so you cannot do ids.length. Instead you need to use the List module methods, for example:

let ids: list(int) = [1, 2, 3];
List.length(ids); // 3
let ids = List.append(ids, [4]); // [1, 2, 3, 4]

You can also use the spread(...) operator once to prepend items:

let ids: list(int) = [1, 2, 3];
let ids = [0, ...ids];

Note that appending does not work. You need to use List.concat for anything else:

let ids = [...ids, 4];
           ^^^^^^

To access a list index you need to use List.nth using 0-based indexing:

let ids: list(int) = [1, 2, 3];
let first = List.nth(ids, 0); // 1

Arrays are mutable collections of similar items. We surround them with [| and |] and we can use standard index notation for access:

let ids: array(int) = [|1, 2, 3|];
let first = ids[0]; // 1
ids[0] = 4;
// ids = [|4, 2, 3 |]

Conditional Expressions

if and else are expressions (they return a value) so we can assign them to let bindings. For example:

let ids: array(int) = [|1, 2, 3|];

let safeFirst = if (Array.length(ids) > 0) {
    ids[0]
} else {
    0
}
// safeFirst = 1

You cannot have a naked if expression without an else one:

let ids: array(int) = [|1, 2, 3|];

let safeFirst = if (Array.length(ids) > 0) {
    ids[0]
}^^^^^^^^^^^^^

There is also a ternary operator just like Javascript:

let isLoading = false;
let text = isLoading ? "Loading" : "Submit";

Records

Records in ReasonML are like Objects in Javascript. However they have stronger type guarantees and are immutable:

type user = {
  name: string,
  email: string
};
// Type inference here. This will only work in the same file that the user type is defined.
let theo = {
  name: "Theo",
  email: "theo@example.com"
}

Note that you cannot just define an object without a type:

let theo = {
  name: "Theo",
  ^^^^
  email: "theo@example.com"
}

To use a Record defined in a different file you need to prefix the type. For example if we defined the user model in Models.re:

let theo: Models.user = {
  name: "Theo",
  email: "theo@example.com"
};

Records are immutable:

type user = {
  name: string,
  email: string
};
let theo = {
  name: "Theo",
  email: "theo@example.com"
}

theo.name = "Alex"
^^^^^^^^^^^^^^^^^^

But you can create another Record using the spread operator:

type user = {
  name: string,
  email: string
};
let theo = {
  name: "Theo",
  email: "theo@example.com"
}

let theo = {
  ...theo,
  name: "Alex"
}
// {name: "Alex", email: "theo@example.com"}

Alternatively you can mark a field as mutable and perform updates:

type user = {
  mutable name: string,
  email: string
};
let theo = {
  name: "Theo",
  email: "theo@example.com"
}

theo.name = "Alex"
// {name: "Alex", email: "theo@example.com"}

You can combine different types inside a Record type using type shorthands:

type email = string;
type username = string;

type user = {
  email,
  username
}

Functions

Functions are like es6 lambda expressions. We use parenthesis and an arrow and return a value:

let addOne = (n) => n + 1;
addOne(2); // 3

If the function spans multiple lines we can use a block scope:


let getMessage = (name) => {
  let message = "Hello " ++ name;
  message
}
getMessage("Theo"); // "Hello Theo"

By default, function arguments are positional and the order matters. We have the option to use named (or labeled) arguments (similar to Python) using the tilde (~) operator.

let getMessage = (~greeting, ~name) => {
  let message = greeting ++ " " ++ name;
  message
}
getMessage(~name="Hello", ~greeting="Theo"); // "Theo Hello"

However once we use one named argument we have to use all of them and not skip anything:

let getMessage = (~greeting, ~name) => {
  let message = greeting ++ " " ++ name;
  message
}
getMessage(~name="Hello", "Theo");
                          ^^^^^^

Any function with more than one argument is automatically carried:

let mul = (a, b) => a * b;
let times2 = mul(2);
let result = times2(3); // 6

Recursive functions are declared via the rec keyword:

let rec fact (n) {
  if (n === 0) {
    1
  } else {
    fact(n-1) * n
  }
}

fact(5); // 120

Nulls, Optionals and Undefined

There is no null or undefined in ReasonML. Instead we have the Option Monad which represent either a value - Some(value) or no value at all - None:

let userName = Some("Alex");
let userName = None;
let userName: option(string) = Some("Alex");

You can use the Belt.Option module to perform common operations for Optionals:

let userName = Some("Theo");
print_string(string_of_bool(Belt.Option.isSome(userName))); // true
Belt.Option.isNone(userName); // false

To check is some object is null or undefined (coming from a network response for example) you can use the following API methods:

Js.Nullable.isNullable();
Js.eqNull();
Js.eqUndefined();

Tuples

Tuples are like lists but they can contain different types of items. For example:

let pair = (1, "Theo Despoudis");
let pair : (int, string) = (1, "Theo Despoudis");

As with lists we cannot use the indexing operator [index]. Instead we need to use destructing to extract the i'th element. This makes tuples useful only when there are small in sized (< 3 elements):

let triplet = (1, "Theo Despoudis", "theo@example.com");
let (_, name, _) = triplet;  // use _ for ignoring the extracted value
name // "Theo Despoudis"

Type Variants

Variants are like Union Types in Typescript. It allows us the describe an OR (|) relationship between two or more types:

type status =
  | NotFound
  | Error
  | Success;

let responseStatus = Error;

You can also pass the types of the arguments in some or all of the Type Names of the variant types:

type animalType =
  | Dog(string)
  | Cat(string)
  | Bird;

let myDog = Dog("Wallace");

You cannot use plain types as variants as they need to be Unique tag names or Types with a Constructor:

type number = int | float;
                  ^^^^^^^^

Destructuring

We have seen destructuring before. When we have a tuple or a Record we can extract some or all of their fields to a binding:

type user = {id: int, name: string, email: string};
let me = {id: 1, name: "Theo", email: "theo@example.com"};
let {name, email} = me;

The above is just a syntactic sugar for:

let name = "Theo";
let email = "theo@example.com"

Pattern Matching

Pattern matching is the golden fleece of Functional Programming languages. Essentially they are switch statements on steroids. For example:

type result =
  | OK(string)
  | NotOK(string)
  | Empty;

let response = OK("Success!");

let log =
  switch (response) {
  | OK(message) => "OK:" ++ message
  | NotOK(message) => "Error: " ++ message
  | Empty => "Nothing happened!"
  };

log // OK:Success

Pipes

Pipes act as syntactic shorthand for function composition. If you have 3 functions f, g, h and you want to call them like f(g(h(a))) you can instead use pipes to call them like:

a
 ->h
 ->g
 ->f

For example:

let userName = Some("Theo");
print_string(string_of_bool(Belt.Option.isSome(userName)));

// or

userName
    -> Belt.Option.isSome
    -> string_of_bool
    -> print_string

Modules

Modules are like namespaces. We use blocks {} to define a module name where we can associate similar types or bindings. This aims to improve the code organisation:

module Arena = {
  type warriorKind =
    | Gladiator(string)
    | Hoplite(string)
    | Archer(string);

  let getName = (warriorKind) =>
    switch (warriorKind) {
    | Gladiator(name) => name
    | Hoplite(name) => name
    | Archer(name) => name
    };
};

Then when we need to reference a module in another file we use the module name:

let warrior: Arena.warriorKind = Arena.Gladiator("Brutus");
print_endline(Arena.getName(warrior)); // "Brutus"

For convenience we can use a shorthand for the module name using the open keyword ideally within it's own block scope:

let event = {
  open Arena;
  let warrior: warriorKind = Gladiator("Brutus");
  print_endline(getName(warrior)); // "Brutus"
};

Promises

Using the Js.Promise https://bucklescript.github.io/bucklescript/api/Js.Promise.html) module we can create or interact with promise objects:

let messagePromise =
  Js.Promise.make((~resolve, ~reject) => resolve(. "Hello"))
  |> Js.Promise.then_(value => {
       Js.log(value);
       Js.Promise.resolve("World");
     })
  |> Js.Promise.catch(err => {
       Js.log2("Failure!!", err);
       Js.Promise.resolve("Error");
     });

Note that we prepended a dot . or the uncurry annotation before calling resolve as the compiler will complain. This is because we want the callbacks to be uncurried.

The above will compile to the following Javascript code:

var messagePromise = new Promise((function (resolve, reject) {
            return resolve("Hello");
          })).then((function (value) {
          console.log(value);
          return Promise.resolve("World");
        })).catch((function (err) {
        console.log("Failure!!", err);
        return Promise.resolve("Error");
      }));

That's it

There are more little things to know about ReasonML but in this tutorial we explored the most common ones. Here are some further reference links for learning more about the ReasonML ecosystem:

Doomsday?

Theofanis Despoudis — Wed, 04 Mar 2020 19:01:09 +0000

Do you feel it coming? Just reading all the news and headlines you may think that tomorrow a twisted line will be crossed and everyone will start panicking so bad and chaos will erupt. You won't be able to buy any food from the supermarket because everyone would have stockpiled for months. Or even worse...

What do you think will happen?

Top 30 Javascript Interview Warmup Exercises Part 3

Theofanis Despoudis — Sun, 09 Feb 2020 19:46:59 +0000

This is the third and sadly the last part of this series. In this part we are going to see some extra but interesting algorithmic questions when preparing for a Javascript Interview.

Let's start.

Questions 🤔

1. Write a function that checks if a string is an anagram of another one.

A string can have many permutations, but essentially all characters of that string will have the same frequency table. So to check if one string is an anagram of another string we just need to compare their frequency table if they are the same.

We have seen before how to compute a frequency table so we will just make it work for two strings.

Here is the gist of the code:


    
function areAnagrams(first, second) {
  // Find their freq tables
  const firstFreq = computeFrequency(first);
  const secondFreq = computeFrequency(second);

// Compare them one by one
  if (areMapsEqual(firstFreq, secondFreq)) {
    return true;
  }
  return false;
}

function areMapsEqual(a, b) {
  // First check their sizes
  if (a.size !== b.size) {
    return false;
  }
  for (let [key, val] of a) {
    // Then check if each one of the key exists in the other and are the same
    let other = b.get(key);
    if (other !== val || other === undefined) {
      return false;
    }
  }

return true;
}

function computeFrequency(s) {
  const freqTable = new Map();
  for (ch of s) {
    if (!freqTable.has(ch)) {
      freqTable.set(ch, 1);
    } else {
      freqTable.set(ch, freqTable.get(ch) + 1);
    }
  }

return freqTable;
}

console.log(areAnagrams("abc", "cab"));
console.log(areAnagrams("tyrannos", "polemos"));
console.log(areAnagrams("polemos", "solepom"));

2. Write a function that curries the arguments of a function. So for example instead of taking all the arguments at the same time, it will return a new function that takes the first one and return, then take the second one and return and so on.

You will need to invoke it for example as:

function mul(a, b, c) {
  return a * b * c;
}

let curriedMul = curry(mul);
curriedMul(1)(2)(3) // 6
curriedMul(1)(5, 3) // 15
curriedMul(1, 3, 3) // 9

We need a function curry that accepts another function as a parameter. Then we need a way to check if we passed fewer arguments in each call and if so we can call the curry function again with those arguments. Otherwise when we have all the arguments so we call the original function with those arguments.

Here is the gist of the code:


    
function curry(fn) {
  // Return a function that captures the arguments passed
  return function handler(...args) {
    // If we passed all the arguments we call the function
    if (args.length >= fn.length) {
      return fn(...args);
    } else {
      // Otherwise we return another function capturing the rest of the arguments
      // and we call handler again aggregating the current arguments with the rest of the 
      // arguments
      return function(...argsLeft) {
        return handler(...args.concat(argsLeft));
      }
    }
  };
}

function mul(a, b, c) {
  return a * b * c;
}

let curriedMul = curry(mul);
console.log(curriedMul(1)(2)(3)) // 6
console.log(curriedMul(1, 5, 3)) // 15
console.log(curriedMul(1)(3, 3)) // 9
console.log(curriedMul(1)) // function

3. Write a function that given two sorted lists you return a list with all their elements merged and sorted.

This is the familiar merge part of the merge sort algorithm. You should be very familiar with it and able to explain how it works.

The idea is to iterate over the two arrays keeping an index for each one of the iterations i and j. We compare arr1[i] with arr2[j] and put the smallest element in the result table. Then we increase the index of the array with the smallest element.

At the end we need to make sure to move the rest of the elements if we've finished iterating one array but still have more in the other.

Here is the gist of the code:


    
function mergeTwoSortedArrays(arr1, arr2) {
  // reserve the result table
  const result = Array(arr1.length + arr2.length);
  // Initialized the indexes
  let i = 0;
  let j = 0;
  let k = 0;
  // we iterate over the two arrays. This will stop when one of them is fully iterated
  while (i < arr1.length && j < arr2.length) {
    if (arr1[i] <= arr2[j]) {
      result[k] = arr1[i];
      i += 1;
    } else {
      result[k] = arr2[j];
      j += 1;
    }
    k += 1;
  }
  // We have finished iterating arr2. Now we need to move the rest of arr1 into the result list
  while ( i < arr1.length ) {
    result[k] = arr1[i];
    i += 1;
    k += 1;
  }
  // We have finished iterating arr1. Now we need to move the rest of arr2 into the result list
  while ( j < arr2.length ) {
    result[k] = arr2[j];
    j += 1;
    k += 1;
  }

return result;
}

console.log(mergeTwoSortedArrays([1, 3, 11], [2, 4, 6, 8]));
console.log(mergeTwoSortedArrays([1, 2, 3, 15], [5, 7 ,9 , 11]));
console.log(mergeTwoSortedArrays([1, 3, 5, 6], []));
console.log(mergeTwoSortedArrays([10, 14, 16], [11, 15]));

4.Write a function that accepts two dates and returns the number of days that have in difference.

When you create two Date objects and subtract them, then the result is the number of milliseconds between them. For example:

let d = new Date()
// Mon Feb 03 2020 07:23:09 GMT+0000 (Greenwich Mean Time)
let m = new Date()
// Mon Feb 03 2020 07:23:18 GMT+0000 (Greenwich Mean Time)

console.log(d -  m) // -8406
console.log(m - d) // 8406

So if we can convert milliseconds in days we can return the difference in days.

Here is the gist of the code:


    
function daysDifference(first, second) {
  const diff = Math.abs(second - first);
  const result = Math.floor(diff / (1000 * 60 * 60 * 24)); 
  return result
}
console.log(daysDifference(new Date('2020-01-01'), new Date('2020-01-02')))

5. Write a function that accepts a string and removes any characters that present more that once in that string.

We can keep count of the existing occurrences of a string char using either a set or a map. So we just iterate over the characters and if we haven't seen the last one we push it into a list. Then we use join to return the result.

Here is the gist of the code:


    
function removeDuplicateChars(s) {
  const result = [];
  let seen = new Set();
  for (let c of s) {
      if (!seen.has(c)) {
          seen.add(c);
          result.push(c);
      }
  }
  return result.join('');
}

console.log(removeDuplicateChars('aba'));
console.log(removeDuplicateChars('tyasua'));

6. Write a function that accepts an object and returns a deep frozen copy of it's internal objects and functions.

Here we need to do the following:

Freeze the object using Object.freeze.
Recursively call the same freeze function for any function or object properties of that object.

Here is the gist of the code:


    
function deepFreeze(obj) {
  // We first freeze the base object here
  Object.freeze(obj);

// Then we recursively iterate over its own properties and call deepFreeze on them
  const ownProperties = Object.getOwnPropertyNames(obj);
  for (prop of ownProperties) {
    if (
      obj.hasOwnProperty(prop) &&
      obj[prop] !== null &&
      (typeof obj[prop] === "object" || typeof obj[prop] === "function")
    ) {
      deepFreeze(obj[prop]);
    }
  }
}

let o = {
  item: 1,
  cb: {
    cb: function() {
      return 2;
    }
  }
};

deepFreeze(o);
o.item = 2;
o.cb.cb = function() {
  return 3;
};
console.log(o.cb.cb());
console.log(o.item);

7. Write a function that given a list and an index position in that list, will return a list with all elements less that the element at the index left of it and all the elements greater that the index right of it.

This is the partition method of the Quicksort algorithm.
You should be very familiar with it and able to explain how it works.

The idea is to use the index position as the pivot point. Then have two iterators, one starting from the beginning and then other starting from the end. First use the left iterator to find an element less than pivot. Then use right iterator to find an element greater than pivot.

If both are found then swap their places in the array. The loop breaks when both iterators have crossed with each other.

Here is the gist of the code:


    
function partition(arr, index) {
  // Pivot point out of bounds
  if (index < 0 || index > arr.length) {
    return;
  }

let pivot = arr[index];
  // Left index from the beginning
  let i = 0;
  // Right index from the end
  let j = arr.length - 1;
  // As long as they do not cross each other
  while (i <= j) {
    while (arr[i] < pivot) {
      i += 1; // move i left until we find an item less that pivot
    }
while (arr[j] > pivot) {
  j -= 1; // move j right until we find an item less that pivot
}

if (i <= j) {
  swap(arr, i, j);
  i += 1;
  j -= 1;
}

}

return i;
}

function swap(arr, i, j) {
  let temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}

let arr = [1, 5, 11, 9, 4, 22, 7];
partition(arr, 3);
console.info(arr);

8. Write a function that converts a decimal number into binary.

The idea behind this is that every time we take the modulo of the number that represents the last bit set. For example:

2 --> 10 == 2 % 2
3 --> 11 == 3 % 2
5 --> 101 == 5  % 2

So we can calculate the last bit. Then to calculate the last but one bit we need to take the floor of num / 2 and so on. Read this wiki for more details.

Here is the gist of the code:


    
function decToBin(num) {
  const result = [];
  let i = 0;
  while(num > 0) {
    // We grab the result of the mudulo num 2 which corresponds to the last bit of the result binary number
    result[i] = num % 2;
    i += 1;
    // We divide by 2 so that we can get the last but one bit on the next run
    num = Math.floor(num / 2);
  }
  // The result has the bits in reverse order. So we reverse first before returning the result.
  return result.reverse().join('');
}

console.log(decToBin(10));
console.log(decToBin(134));
console.log(decToBin(999));

9. Write a function that converts a binary number into decimal.

Here we have a binary string and we want to convert into integer. First we traverse the string from the end. Each time we find a 1 we use that index to get the value of 2 exp i. Then we add it to the result. For example the number 34 in binary is 100010 so we have:

1 * 2 ^ 8 + 1 * 2 ^ 1 = 32 + 2 = 34

Here is the gist of the code:


    
function binToDec(num) {
  let result = 0;
  // Start from the last bit digit and down to the first
  for (let i = num.length-1; i >= 0; i -= 1) {
    // Calculate the current value of exponent
    let exp = num.length - 1 - i;
    if (num[i] === '1') {
      result += Math.pow(2, exp);
    }
  }
  return result;
}

console.log(binToDec("101010"));
console.log(binToDec("100010"));
console.log(binToDec("111110101"));

10. Write a function that given a string it returns the list of its permutations.

For example:

in: "ab" out: ["ab", "ba"]

This is the most tricky question. The idea is to use recursion to construct one permutation from the string of characters. Then we backtrack to produce the next permutation and so on.

For a simple example of two chars: "ab"

First we fix "a" in place and we call permutate for the remainder string "b". Because "b" is the last character we have the sequence "ab" so we add it to the result.

Then we fix "b" in the front and we call permutate for the remainder string "a". Because "a" is the last character we have the sequence "ba" so we add it to the result.

Similarly we can do that for any string of length n.

Here is the gist of the code:


    
function permutate(str) {
  let result = []
  // Here we call a recursive function passing all the required parameters
  permutateRecursive(str.split(''), 0, str.length-1, result);
  return result;
}

function permutateRecursive(str, start, end, result) {
  if (start === end) {
    // We have completed a unique permutation string. Push it to the result string
    return result.push(str.join(''));
  }
  // else for each char in the sequence starting from start and ending to end
  for (let i = start; i <= end; i += 1) {
    // We swap the current i with the end
    swap(str, i, start)
    // We call the same function again but we advance the start ahead by one
    permutateRecursive(str, start+1, end, result);
    // We restore the swap we did earlier with the current i and the end
    swap(str, start, i)
  }
}

function swap(arr, i, j) {
  let temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}

console.info(permutate("abc"));
console.info(permutate("artfg"));

It's not the end yet

In this article we listed some warmup exercises with detailed answers. We wanted you to have a good variety of questions as a reference before your next big interview. Stay put for more articles regarding programming interviews in the future.

Interested in Mentoring or Training?

Contact me via www.techway.io for more information.

Top 30 Javascript Interview Warmup Exercises Part 2

Theofanis Despoudis — Sat, 18 Jan 2020 17:12:46 +0000

Read the original in CodeThat.today

Welcome back. Here is the second part of the series about the top 30 Javascript Interview Warmup Exercises. If you are going to attend an interview that will ask algorithmic questions in Javascript then this list should be bookmarked for reference.

Let's get started.

Questions 🤔

1. Write a function that accepts a number and checks if it's a prime or not.

To check if a number n is prime we need to go through the list of numbers i from 2 up until n/2 and check if n equally divides this number i. This is to ensure that we cannot express n as a factor of i.

Here is the gist of the code:


    
function isPrime(n) {
  if (n === 1) {
    // Special case for 1
    return false;
  } else {
    // Go through all numbers from 2 up until n/2
    for (let i = 2; i <= n / 2; i += 1) {
      if (n % i === 0) {
        // We found a number i such as i * x = n so the number is not prime
        return false;
      }
    }
    // If we got to this point then we know the number is prime
    return true;
  }
}

let num = 45;
console.info("Is " + num + " a prime?: " + isPrime(num));
num = 37;
console.info("Is " + num + " a prime?: " + isPrime(num));
num = 73;
console.info("Is " + num + " a prime?: " + isPrime(num));

2. Write a function that accepts a list of objects with the following type structure:

{
   id: number,
   accountType: "user" | "admin" | "root"
   name: string
}

The function should return the list of objects grouped by their accountType in this order. For example it should return a list with a list of user followed by a list of admin and a list of root accounts.

In order to group by the account type we need to store them in a way that the key is the accountType value (user, admin or root) and the value is the list of records with that accountType. We can use a map and just iterate over the those keys and update the collection every-time we match a value.

Then to return the results in a custom order we just combine the results for each type of accountType in an array.

Here is the gist of the code:


    
// Somewhat generic group function
function groupBy(records, keyFunc) {
  // Save groups by key here.
  const groups = new Map();
  for (record of records) {
    // We need this call to retrieve the actual key
    const key = keyFunc(record);
    if (groups.has(key)) {
      const data = groups.get(key);
      data.push(record);
    } else {
      groups.set(key, [record]);
    }
  }
  return groups;
}

function getGroupsByAccountType (records) {
  const groups = groupBy(records,function(record) {
    return record.accountType;
  });

// Return by custom ordering here
  return [
    ...groups.get('user'),
    ...groups.get('admin'),
    ...groups.get('root'),
  ]
}
console.info(getGroupsByAccountType([
  {
    id: 1,
    accountType: 'user',
    name: 'Mike'
  },
  {
    id: 2,
    accountType: 'admin',
    name: 'Alex'
  },
  {
    id: 3,
    accountType: 'root',
    name: 'Jordan'
  },
  {
    id: 4,
    accountType: 'user',
    name: 'Silas'
  },
  {
    id: 5,
    accountType: 'admin',
    name: 'John'
  },
]))

3. Write a function that accepts a DOM element and a string and prints any of it's immediate children that contain the class name with that string.

Using the DOM API we can request the NodeList of the current element children using the childNodes property. Then we can iterate this list and check the class value using the getAttribute("class") or the classList property for the specified class name.

Here is the gist of the code:

Given the following DOM for example:

<ul id="list">
    <li class="even"><a href="#Syntax" rel="internal">Syntax</a></li>
    <li class="odd"><a href="#Examples" rel="internal">Examples</a></li>
    <li class="even"><a href="#Polyfill" rel="internal">Polyfill</a></li>
    <li class="odd"><a href="#Specifications" rel="internal">Specifications</a></li>
    <li class="even"><a href="#Browser_compatibility" rel="internal">Browser compatibility</a></li>
    <li class="even"><a href="#See_also" rel="internal">See also</a></li>
</ul>

The code for printing the children nodes with a target className is:

function printChildrenContainingClass(rootElement, className) {
  if (rootElement) {
    // Iterate over the childNodes
    list.childNodes.forEach((node) => {
      // If a childnode contains a className print the node
      if (node.classList.contains(className)) {
        console.info(node);
      }
    });
  }
}

printChildrenContainingClass(document.querySelector('#list'), 'odd'));

4. Write a function that accepts a DOM element and a string and prints if any of its parent nodes contains the class with that string. It should stop when there are no parent elements.

Here we can use the parentNode property to get the current element parent Node. Then we will check if the parent has a class with that name. If not we will recursively get the parent of that node again until we reach the Document Node or a node that has no parent:

Here is the gist of the code:

Given the following DOM for example:

<body>
    <aside class="sidebar">
        <ul id="list" class="sidebar-list">
            <li class="even"><a href="#Syntax" rel="internal">Syntax</a></li>
            <li class="odd"><a href="#Examples" rel="internal">Examples</a></li>
            <li class="even"><a href="#Polyfill" rel="internal">Polyfill</a></li>
            <li class="odd"><a href="#Specifications" rel="internal">Specifications</a></li>
            <li class="even"><a id="start" href="#Browser_compatibility" rel="internal">Browser compatibility</a></li>
            <li class="even"><a href="#See_also" rel="internal">See also</a></li>
        </ul>
    </aside>
</body>

The code for printing the parent nodes with a target className is:


function printParentsContainingClass(childElement, className) {
  if (childElement) {
    // Iterate over the parentNodes
    let parentNode = childElement.parentNode;
    while (parentNode !== null) {
      // If a parentNode contains a className print the node
      if (parentNode.classList && parentNode.classList.contains(className)) {
        console.info(parentNode);
      }
      // Go up
      parentNode = parentNode.parentNode;
    }
  }
}

printParentsContainingClass(document.getElementById('start'), 'sidebar');

5. Given the following DOM structure:

<ul id="list-start">
   <li>Theo</li>
   <li>Alex</li>
   <li>Mike</li>
</ul>

Write relevant Javascript code so that when we click any of the list elements the following alert will display in the browser:

<name> was clicked where <name> is the element clicked. How can you make it work with only one event listener?

We could add individual event listeners here one for each <li> element but we can do better by using one in the parent node <ul>. The idea is to leverage event propagation and bubbling so that when we click anywhere within the <ul> area we would pick the current target text node and show the alert message.

Here is the gist of the code:

function onListElementClicked(event) {
  if(event.target && event.target.nodeName == "LI") {
    // List item found. Alert the innerText
    alert(event.target.innerText +  " was clicked");
  }
}

let list = document.getElementById('list-start');
if (list) {
  list.addEventListener('click', onListElementClicked);
}

6. Write a function that checks if a given string is a palindrome.

By definition, a string is a palindrome if it read backwards the same. For example the following strings are palindrome:

"aba", "assissa"

However the following strings are not palindrome:

"abc", "asibisaa"

We can check if a string is a palindrome using a for loop over two indexes. The first index start at the start of the string and the second index starts at the end and moves towards the start. If at any time the characters at S[i] !== S[j] then we found a mismatch so the string is not a palindrome. We stop when we've reached the middle of the string.

Here is the gist of the code:


    
function isPalindrome(inputStr) {
  let lo = 0;
  let hi = inputStr.length;
  let mid = Math.floor((lo + hi) / 2);
  // Check until the mid element
  for (let i = 0, j = hi-1; i < mid; i += 1, j -= 1) {
    if (inputStr[i] !== inputStr[j]) {
      return false;
    }
  }
  // If we got in here then we know that the string is palindrome
  return true;
}

console.info(isPalindrome("ab"))
console.info(isPalindrome("a"))
console.info(isPalindrome("aba"))
console.info(isPalindrome("abc"))
console.info(isPalindrome("abba"))

7. Write a function to represents a linked list.

A lot of times you are asked to implement something in a linked list such as reverse a list or find any cycles. So it's important to be able to implement one on the fly. Here is a simple implementation with a few basic operations:


    
// Node holds the data and a reference to the next node
function LinkListNode(data) {
  this.data = data;
  this.next = null;
}

// Linked list Basic Structure
function LinkedList() {
  this.len = 0;
  this.head = null;
}

// Operations
LinkedList.prototype.push = function(item) {
  if (item) {
    let node = new LinkListNode(item);
    // if the current head is null we set item as head and update the length
    if (!this.head) {
      this.head = node;
      this.len += 1;
      return node;
    }
    // Otherwise we follow the next links until we reach the end of the list
    let currentNode = this.head;
    while (currentNode.next !== null) {
      currentNode = currentNode.next;
    }
    // If we got here then we have reached the end. currentNode points to the last element
    currentNode.next = node;
    this.len += 1;
    return node;
  }
};

LinkedList.prototype.head = function() {
  return this.head;
};

LinkedList.prototype.length = function() {
  return this.len;
};

let list = new LinkedList();
list.push(1);
list.push(2);
list.push(3);
list.push(4);

console.info('List is: ');
let currentNode = list.head
while(currentNode !== null) {
  console.info(currentNode.data);
  currentNode = currentNode.next;
}

8. Write a function to represents a Stack.

A lot of times you are asked to implement an algorithm that uses a Stack such as DFS traversal or checking if an expression is balanced. So it's important to be able to implement one on the fly. Here is a simple implementation with a few basic operations:


    
function Stack() {
  this.items = [];
}

// Operations
Stack.prototype.push = function(item) {
  this.items.push(item);
}

Stack.prototype.pop = function() {
  return this.items.pop();
}

Stack.prototype.top = function() {
  return this.items[this.items.length - 1];
}

Stack.prototype.isEmpty = function() {
  return this.items.length === 0;
}

let stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
stack.push(4);

console.info('Stack is: ', );
while(!stack.isEmpty()) {
  console.info(stack.pop());
}

9. Write code that represents a Queue data structure.

A lot of times you are asked to implement an algorithm that uses a Queue such as BFS traversal. So it's important to be able to implement one on the fly. Here is a simple implementation with a few basic operations:


    
function Queue() {
  this.items = [];
}

Queue.prototype.enqueue = function(item) {
  this.items.push(item);
}

Queue.prototype.dequeue = function() {
  return this.items.shift();
}

Queue.prototype.top = function() {
  if (this.items.length > 0) {
    return this.items[0];
  }
  return null;
}

Queue.prototype.isEmpty = function() {
  return this.items.length === 0;
}

let q = new Queue();
q.enqueue(1);
q.enqueue(2);
q.enqueue(3);
q.enqueue(4);

console.info('Queue is: ', );
while(!q.isEmpty()) {
  console.info(q.dequeue());
}

10. Write code that represents a graph data structure.

A lot of times you are asked to implement an algorithm that uses a Graph DTS such as finding shortest paths. So it's important to be able to implement one on the fly. Here is a simple implementation with a few basic operations:


    
function Graph() {
  this.vertices = new Map();
  this.edges = [];
}

Graph.prototype.addVertex = function(vertex) {
  this.vertices.set(vertex, vertex);
  this.edges[vertex] = [];
};

Graph.prototype.addEdge = function(from, to) {
  this.edges[from].push(to);
  this.edges[to].push(from);
};

Graph.prototype.size = function() {
  return this.vertices.size;
};

Graph.prototype.removeVertex = function(vertex) {
  // Check if vertex exists
  if (this.vertices.has(vertex)) {
    this.vertices.delete(vertex);
// Find all relevant edges and delete them
while (this.edges[vertex].length > 0) {
  let linkedVertex = this.edges[vertex].pop();
  // Remove all edges pointing to this vertex.
  this.removeEdge(linkedVertex, vertex);
}

}
};

Graph.prototype.removeEdge = function(from, to) {
  // Find all references of from edges and remove them
  let firstIndex = this.edges[from] ? this.edges[from].indexOf(to) : -1;
 // Find all references of to edges and remove them
  let secondIndex = this.edges[to] ? this.edges[to].indexOf(from) : -1;
  if (firstIndex !== -1) {
    this.edges[from].splice(firstIndex, 1);
  }
  if (secondIndex !== -1) {
    this.edges[to].splice(secondIndex, 1);
  }
};

let graph = new Graph();
graph.addVertex(1);
graph.addVertex(2);
graph.addVertex(3);
graph.addVertex(4);
graph.addEdge(1, 2);
graph.addEdge(1, 3);
graph.addEdge(2, 3);
graph.addEdge(2, 4);
graph.addEdge(3, 4);

graph.removeVertex(2);
console.info(graph);

What's next

Stay put for the next part!

😉👌💖

Interested in Mentoring or Training?

Contact me via www.techway.io for more information.

A word on Technical Interviews

Theofanis Despoudis — Wed, 08 Jan 2020 19:32:43 +0000

Quite recently, I added a comment in my latest article about the usage of one-liners in coding interviews and that spurred other threads like a Lernean hydra.

What's going on there? Is there is something hidden beyond those words really?

Here is my take on Technical Interviews for some opinions and discuss how broken they are really.

Disclaimer : I'm not an interviewer and I haven't interviewed people before so my opinions are biased. I've done quite a few interviews though to form what I say here.

I'm the author of this really awesome library used by 1000000 developers. Hire me now.

Now they shouldn't hire you. Just because you did something like that, it doesn't mean anything. It won't even dent a piece of their hair. You might only get an easier access to a first interview, but after that you are just to be evaluated as a normal candidate.

Think of this in a different way. They have a reputation to hold. How fair is this to be compared with someone who doesn't even have a Github profile? You get the easy ride, but they have to hustle their way through. Nope back to the line mister.

I was in an interview and I was asked to implement a build-in algorithm like `String.reverse` without using any standard library methods or specific functions. They shouldn't been doing that because we shouldn't re-implement the wheel

Yes we shouldn't re-implement the wheel. But we shouldn't also be surprised to know that we don't really write production code in technical interviews because if we did then there is definitely something wrong there. The interviewer again tries to test the waters by giving you constraints and asking a way to overcome the problem. Again they want to see problem solving skills and how you communicate. They don't really care if you solve it or not but how you get there. Or they are not satisfied with your solution and they want additional coding signals.

At the end, if they are unsure about you, if you do not ask enough questions, or you are cocky and condescending they will pick this up and it will count negatively against you. What's so wrong about asking for more details anyway if you know how to do it? They don't know you nor your skills - in fact no one knows you really until proven otherwise - so keep yourself together and try to tackle it.

I was in an interview and I was asked to implement a function for a specific algorithm. I found that strange and non-professional because the role is for a Javascript Dev.

Yes if they are looking for drones or code monkeys that would be unprofessional. But take a chance to think about it. If they were to hire you only for your Javascript skills then you are lowering your status and you are as good as any other candidate out there who "knows" Javascript. You would be assigned tasks that are leftovers and they would take all the credit. Good for you well done 👏👏. Also, if the interviewer hires you only for your JS skills and somebody from above asks why you can't do anything else out of your domain then they will question the person who hired you why didn't they check this or that. To cover their own asses, the interviewer will have to ask questions like that outside the domain. They would ask "stupid algorithmic questions" just to probe you have what it takes and test your reaction.

I once, was asked to implement `Array.prototype.reduce` and I thought was absurd

What was so absurd anyway? They can ask whatever they want. The real question is what are you going to do about it? Are you going to ask questions to get some hints and try to implement it or just lift your hands up. This is an opportunity to at least showcase your problem solving skills which is what's important.

I once, was asked for some obscure feature in a language does that I can look up in 30 seconds and get the answer to

This is a test to check how much you know and how you can explain the details. If you don't know you should be honest and explain your position. Don't be cocky or arrogant, just state the truth. If they want some specific answer you can just ask whether they use this feature in production so you can learn more about it. Or probably the interviewer is more arrogant than you or they want just to check your reaction.

I think the most important part of the interview is how you communicate. You would argue that technical skill is the most dominating factor here but that will only get you to 70% with a passing score of 80%. So if you are not able to communicate no matter how good you are in coding you won't pass the next step.

Rant out...

DEV Community: Theofanis Despoudis

New MEAP update "Full-Stack AI for Web Developers"

Full-Stack AI for Web Developers Book Launch + Manning Holiday Sale

My New Book: Full-Stack AI for Web Developers - 50% discount code included! AMA!

My new book about Typescript 4 is published. AMA

How to read Haskell Documentation. Step by step guide.

Use case: Data.Array module

❓What are non-strict arrays?

❓What are indexable arrays?

❓What are random-access arrays?

❓What other information we can infer from the above description?

❓What is instance in Haskell?

❓What is Functor in Haskell?

❓What is Traversable and Foldable in Haskell?

❓What is Ord and Eq in Haskell?

Conclusion and Next Steps

Solving Algorithm Challenges in Haskell: Anagrams

Find minimum number of characters so that two strings become anagram

Coding it in Haskell

Coding it in Typescript

Next Steps

Build a type safe React App with ReasonML, Part 1

Building a type-safe ReasonML app

Routing

Styles and images

Modelling the Domain problem

Inventory domain

Cart domain

Next Part

30 minute introduction to ReasonML for React Developers

Variable Bindings

Type Inference

Strings

Booleans

Numbers

Lists and Arrays

Conditional Expressions

Records

Functions

Nulls, Optionals and Undefined

Tuples

Type Variants

Destructuring

Pattern Matching

Pipes

Modules

Promises

That's it

Doomsday?

Top 30 Javascript Interview Warmup Exercises Part 3

It's not the end yet

Interested in Mentoring or Training?

Top 30 Javascript Interview Warmup Exercises Part 2

Questions 🤔

What's next

Interested in Mentoring or Training?

A word on Technical Interviews

I'm the author of this really awesome library used by 1000000 developers. Hire me now.

I was in an interview and I was asked to implement a build-in algorithm like String.reverse without using any standard library methods or specific functions. They shouldn't been doing that because we shouldn't re-implement the wheel

I was in an interview and I was asked to implement a function for a specific algorithm. I found that strange and non-professional because the role is for a Javascript Dev.

I once, was asked to implement Array.prototype.reduce and I thought was absurd

I once, was asked for some obscure feature in a language does that I can look up in 30 seconds and get the answer to

Use case: `Data.Array` module

❓What is `instance` in Haskell?

❓What is `Functor` in Haskell?

❓What is `Traversable` and `Foldable` in Haskell?

❓What is `Ord` and `Eq` in Haskell?

I was in an interview and I was asked to implement a build-in algorithm like `String.reverse` without using any standard library methods or specific functions. They shouldn't been doing that because we shouldn't re-implement the wheel

I once, was asked to implement `Array.prototype.reduce` and I thought was absurd