Vitaneri

Better React Context DX With Custom Provider And Consumer Hook

Vincent Taneri — Fri, 20 Jan 2023 08:43:41 GMT

In this post, we'll take a look at how we can abstract React's context API using custom provider and consumer hook for a better developer experience.

Introduction

React's Context API is amazing. One of it's use is allowing us to pass data through our component trees without prop drilling, resulting in a much cleaner code.

But do you know that we can make it even better by abstracting the implementation of the context with custom provider and consumer hook?

Let's look at how we can do that.

Assume that we are using React's context API to manage the site's theme.

Custom Provider

We start by creating a theme context. We export the context because our child components will have to import it to access the context.

export const ThemeContext = createContext();

Now that we have the context, we can create a custom provider so that we can wrap our app with ThemeProvider instead of ThemeContext.Provider.

import { createContext, useState } from "react";

export const ThemeContext = createContext();

export default ThemeProvider = (props) => {
  const [theme, setTheme] = useState("light");
  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  const color = theme === "light" ? "#333" : "#FFF";
  const backgroundColor = theme === "light" ? "#FFF" : "#333";

  document.body.style.color = color;
  document.body.style.backgroundColor = backgroundColor;

  return <ThemeContext.Provider value={{ theme, toggleTheme }} {...props} />;
};

Assuming that the whole app need to access this context, we can wrap our <App /> component in index.ts like this:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ThemeProvider } from "./ThemeProvider";

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById("root"),
);

Consumer Hook

Now, let's look at the button component that toggles the site theme. To do that, the button will have to access the ThemeContext using React's useContext hook.

import { useContext } from "react";
import { ThemeContext } from "./ThemeProvider";

export default ToggleThemeBtn() {
  // We can access the context using React's "useContext" hook
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
};

Everything is working properly, we can toggle the site's theme just fine. But the way we are accessing the ThemeContext can use some improvement. Instead of useContext(ThemeContext), wouldn't it be better if we can access the site's theme and its toggle function with an API like useTheme() instead?

const { theme, toggleTheme } = useTheme();

To implement this, let's create a custom hook in our ThemeProvider.jsx file.

import { createContext, useContext, useState } from "react";

export const ThemeContext = createContext();

export const useTheme = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
};

export default ThemeProvider = (props) => {
  const [theme, setTheme] = useState("light");
  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  const color = theme === "light" ? "#333" : "#FFF";
  const backgroundColor = theme === "light" ? "#FFF" : "#333";

  document.body.style.color = color;
  document.body.style.backgroundColor = backgroundColor;

  return <ThemeContext.Provider value={{ theme, toggleTheme }} {...props} />;
};

And we also don't have to export ThemeContext anymore since that's considered an implementation detail now.

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

export useTheme = () => {
  const themeContext = useContext(ThemeContext);
  return themeContext;
};

export default ThemeProvider = (props) => {
  const [theme, setTheme] = useState("light");
  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  const color = theme === "light" ? "#333" : "#FFF";
  const backgroundColor = theme === "light" ? "#FFF" : "#333";

  document.body.style.color = color;
  document.body.style.backgroundColor = backgroundColor;

  return <ThemeContext.Provider value={{ theme, toggleTheme }} {...props} />;
};

And finally, in our button component:

import { useTheme } from "./ThemeProvider";

export default ToggleThemeBtn() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
};

Don't you agree that it's much cleaner now? And of course we can improve the hook even more.

Say that someone use our button outside ThemeProvider. When that happens, our app will crash because the context will return undefined.

Usually, when accessing the context directly, people will check if the context is undefined to tackle this issue.

import { useContext } from "react";
import { ThemeContext } from "./ThemeProvider";

export default ToggleThemeBtn() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  if (!theme) {
    // handle error
  }

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
};

That's indeed a valid solution. But imagine that we have multiple components doing this 🥲.

But with our custom hook solution, we can just handle that inside the hook.

export const useTheme = () => {
  const themeContext = useContext(ThemeContext);
  if (!themeContext) {
    throw new Error("ThemeContext is undefined. Make sure to wrap your component with ThemeProvider.");
  }
  return themeContext;
};

Wrap Up

That's it for this post. Hope you can see the appeal of this pattern, creating a custom provider and consumer hook instead of accessing the context directly.

Check For Nil Interface In Go

Vincent Taneri — Mon, 14 Nov 2022 16:07:52 GMT

The zero value for a Go interface is nil. But unlike the nil for concrete types (e.g: pointer, slice), checking for nil interface is not as straightforward.

In this post, we'll look at how we can check if an interface is nil using the reflect package.

The Problem

First, check out the following code snippet:

var a []int
fmt.Println(a == nil) // prints true
var s *string
fmt.Println(s == nil) // prints true
var i interface{}
fmt.Println(i == nil) // prints true
i = s
fmt.Println(i == nil) // prints false

The last line will always prints false, and go-staticcheck will give us a warning.

this comparison is never true; the lhs of the comparison has been assigned a concretely typed value

Under the hood, Go's interfaces are a pair of pointers. One points to the underlying type and one points to the underlying value.

In this case, because we assign a value that's concretely typed to i, the interface is no longer nil, even though the assigned value is nil.

Or to word it a little differently, if a nil variable with a concrete type is assigned to a variable with an interface type, the interface type is definitely not nil.

An interface is only considered nil when both its type and value are nil.

Solution

To reliably check if the value associated with an interface is nil, we need two use the isValid and isNil methods from reflection.

func checkNilInterface(i interface{}) bool {
	iv := reflect.ValueOf(i)
	if !iv.IsValid() {
		return true
	}
	switch iv.Kind() {
	case reflect.Ptr, reflect.Slice, reflect.Map, reflect.Func, reflect.Interface:
		return iv.IsNil()
	default:
		return false
	}
}

The IsValid check on line 3 returns true if iv is not a nil interface.

Next we check whether the value associated with the interface is nil using the IsNil method. Note that the IsNil method can only be called on a type that can contain nil, thence the case statement above it.

Wrap Up

That's how you can check for nil interface in Go. Before we end this post, let's see how the checker function does with our initial example.

var a []int
fmt.Println(a == nil) // prints true
var s *string
fmt.Println(s == nil) // prints true
var i interface{}
fmt.Println(i == nil) // prints true
fmt.Println(checkNilInterface(i)) // prints true
i = s
fmt.Println(i == nil) // prints false
fmt.Println(checkNilInterface(i)) // prints true

Code Splitting In React Using React.lazy and React.Suspense

Vincent Taneri — Sun, 22 Jan 2023 15:51:52 GMT

In this post, we will learn how to do code splitting in our React app using React.lazy and React.suspense.

Introduction

As we add more features to our React app, our app will get more and more bloated, resulting in bigger bundle size. Is there a way to minimize the bundle size while adding features to our app? Code Splitting to the rescue 💪🏻.

Code splitting allows us to load our app with lazy-loaded chunks. The idea is that we try to only load what's necessary for the user on initial load, and lazy-load the rest of our app when needed.

Imagine that you have a long blog post with multiple images. When the user load your page initially, it's a good idea to only load the featured image the user see, and load the rest of the images as the user scroll down. Images are usually pretty large in size, and lazy-loading them is a good idea.

Of course we're not limited to lazy-loading images, we can lazy-load anything, including codes. It's usually a good idea to lazy-load expensive component like graph, map, etc. You got the idea.

Code splitting won't magically reduce our app's overall bundle size, but it can potentially cut off our initial bundle size significantly when used correctly, resulting in better UX.

To accomplish this task in React, we need to use React.lazy and React.Suspense.

React.lazy

React.lazy as the name suggests, allows us to import component lazily or dynamically. In other word, it allow components to be loaded on demand.

So how do we use it?

Let's first look at the example that we will use for the rest of the post.

Say that we have a toggle that hide and show a graph.

import * as React from "react"
import Graph from "./Components/Graph"

export default function Toggle {
  const [showGraph, setShowGraph] = React.useState(false)

  return (
    <>
      <Switch
        on={showGraph}
        onClick={() => setShowGraph(!showGraph)}
      />
      <div>
        { showGraph ? <Graph /> : null}
      </div>
    </>
  )
}

In the code above, even though the <Graph /> component is initially not rendered, the code for it is still requested and downloaded by the browser. This is not ideal.

Let's assume that the <Graph /> component is pretty expensive and we want to lazy-load it instead. We want the code for it to be downloaded only when the user click on the switch and showGraph === true.

We can do it using React.lazy like this:

import * as React from "react"

const Graph = React.lazy(() => import("./Components/Graph"))

export default function Toggle {
  const [showGraph, setShowGraph] = React.useState(false)

  return (
    <>
      <Switch
        on={showGraph}
        onClick={() => setShowGraph(!showGraph)}
      />
      <div>
        { showGraph ? <Graph /> : null}
      <div>
    </>
  )
}

Note that for this to work, the Graph component have to be a default export (export default Graph in Graph.jsx).

Now, the <Graph /> component will be lazily-loaded when it's about to render.

But now, if you go to your browser and click on the switch, you'll see a white screen of the death 😰 instead.

This is because React.lazy need to be used in conjunction with React.Suspense. And so, on to the next section we go.

React.Suspense

We need to wrap our lazy-loaded components inside React.Suspense for them to work properly.

import * as React from "react"

const Graph = React.lazy(() => import("./Components/Graph"))

export default function Toggle {
  const [showGraph, setShowGraph] = React.useState(false)

  return (
    <>
      <Switch
        on={showGraph}
        onClick={() => setShowGraph(!showGraph)}
      />
      <div>
        <React.Suspense>
          { showGraph ? <Graph /> : null}
        </React.Suspense>
      <div>
    </>
  )
}

Now our app work as expected. But we can make the UX even better by providing a fallback component in React.Suspense.

import * as React from "react"
import LoadingIndicator from "./Components/LoadingIndicator"

const Graph = React.lazy(() => import("./Components/Graph"))

export default function Toggle {
  const [showGraph, setShowGraph] = React.useState(false)

  return (
   <>
      <Switch
        on={showGraph}
        onClick={() => setShowGraph(!showGraph)}
      />
      <div>
        <React.Suspense fallback={<LoadingIndicator />}>
          { showGraph ? <Graph /> : null}
        </React.Suspense>
      <div>
    </>
  )
}

With this addition, when the user click the switch and the browser start fetching the code for <Graph />, the <LoadingIndicator /> component will be shown in its place as a placeholder.

Prefetching

We can improve the UX a step further by prefetching the code when the user show signs of clicking the switch. One thing that come to mind is when the user hover over the switch.

Prefetching can save us some milliseconds, but that's enough to make the difference between a fast and a clunky app.

One way to implement this is using the mouseenter event listener:

import * as React from "react"
import LoadingIndicator from "./Components/LoadingIndicator"

const Graph = React.lazy(() => import("./Components/Graph"))

export default function Toggle {
  const [showGraph, setShowGraph] = React.useState(false)

  return (
   <>
      <Switch
        on={showGraph}
        onClick={() => setShowGraph(!showGraph)}
        onMouseEnter={() => import("./Components/Graph")}
      />
      <div>
        <React.Suspense fallback={<LoadingIndicator />}>
          { showGraph ? <Graph /> : null}
        </React.Suspense>
      <div>
    </>
  )
}

That's it!

You might be wondering about whether it's actually fine to import the same component multiple times like we did above. The answer is that it's actually fine because browser will cache the imported components.

In the scenario above, when the user hover over the switch, we start importing the <Graph /> component. And when the user finally click on the switch. This line of code: React.lazy(() => import("./Components/Graph")) will still run, but the component in the cache will be returned instead.

Wrap Up

Finally, let's do some refactoring to reduce code duplication.

import * as React from "react"
import LoadingIndicator from "./Components/LoadingIndicator"

const loadGraph = () => import("./Components/Graph")
const Graph = React.lazy(loadGraph)

export default function Toggle {
  const [showGraph, setShowGraph] = React.useState(false)

  return (
   <>
      <Switch
        on={showGraph}
        onClick={() => setShowGraph(!showGraph)}
        onMouseEnter={loadGraph}
      />
      <div>
        <React.Suspense fallback={<LoadingIndicator />}>
          { showGraph ? <Graph /> : null}
        </React.Suspense>
      <div>
    </>
  )
}

That's it for this post. Hope you can see how easy it is to implement code splitting and it's benefit on performance and UX.

Enforce String Casing in TypeScript: Creating Uppercase, Lowercase, and Capitalized String Types

Vincent Taneri — Fri, 23 Jun 2023 11:12:30 GMT

In this post, I'll share a little trick to create type that only allow uppercase, lowercase, or capitalized string in Typescript using intrinsic string manipulation types in Typescript.

What we want to achieve:

const str: IsUppercase = "hello"; // we want this line to error

Intrinsic String Manipulation Types

Before showing the solution, I would like to introduce you to Intrinsic String Manipulation Types that're built into Typescript itself.

Uppercase

This utility type converts each character in the string to the uppercase version.

type Greeting = "Hello, world";
type ShoutyGreeting = Uppercase<Greeting>; // type ShoutyGreeting = "HELLO, WORLD"

Lowercase

This utility type converts each character in the string to the lowercase version.

type Greeting = "Hello, world";
type ListlessGreeting = Lowercase<Greeting>; // type ListlessGreeting = "hello, world"

Capitalize

This utility converts only the first character in the string to uppercase.

type Greeting = "hello, world";
type CapitalizedGreeting = Capitalize<Greeting>; // type CapitalizedGreeting = "Hello, world"

Enforcing String Casing

Now, an interesting use case for those helper function is to enforce casing for the string type.

Back to our original example, we can implement IsUppercase type this way:

type IsUppercase = Uppercase<string>;

and the str will error when passed lowercase string

const a: IsUppercase = "aa"; // Type 'string' is not assignable to type 'Uppercase<string>'
const a2: IsUppercase = "AA"; // OK

The same idea apply for both IsLowercase and IsCapitalized too.

type IsLowercase = Lowercase<string>;
type IsCapitalized = Capitalize<string>;

const b: IsLowercase = "bB"; // Type 'string' is not assignable to type 'Lowercase<string>'
const b2: IsLowercase = "bb"; // OK

const c: IsCapitalized = "cC"; // Type 'string' is not assignable to type 'Capitalize<string>'
const c2: IsCapitalized = "Cc"; //OK

Wrap Up

That's it for the article, hope you find this little trick useful.

Enums In TypeScript

Vincent Taneri — Sat, 15 Oct 2022 01:35:13 GMT

Enums is a special type whose concept will already be familiar to you if you come from languages like C#, C++, Java, etc.

In this post, we'll look at how enums work in TypeScript, and also how the TypeScript compiler compile enums to plain JavaScript. After all, enums doesn't exist natively in the JavaScript world.

Enums

Enums are used to define a human-readable name for numbers or strings with specific meaning.

This is how you declare an enums in TypeScript:

enum ModalState {
  Open,
  Closed,
}

Now, let's look at how we can use this enums.

function checkModalState(state: ModalState) {
  console.log(`Enum's real value is: ${state}`);
  switch (state) {
    case ModalState.Open:
      console.log("Modal is open.");
      break;
    case ModalState.Closed:
      console.log("Door is closed.");
      break;
  }
}

So, we start by declaring an enum called ModalState. This enum has two possible values, Open and Closed. We then created a function called checkModalState that take a single argument called state of type ModalState. This means that we can only call this function with one of the values of the ModalState enum.

The function logs the actual value of the state parameter to the console then executes a switch statement. The switch statements logs a message to the console depending on the value of the state parameter we passed in.

Let's run the function with the following code.

checkModalState(ModalState.Open);
checkModalState(ModalState.Closed);

The output of this code is as follows:

Enum's real value is: 0
Modal is open.
Enum's real value is: 1
Modal is closed.

As you can see, the TypeScript compiler has generated a numerical value for all the values in our enum. The value for ModalState.Open is 0, and the value for ModalState.Closed is 1.

Enums eliminates the so called magic numbers by defining a clear possible values. Enums helps us provide a clear set of values for a variable or function parameter. Like in the example above, we can only pass ModalState.Open or ModalState.Closed to our function.

We can also set the numerical value of an enum to whatever we like. For example:

enum ModalState {
  Open = 5,
  Closed = 10,
}

Now, if we run the checkModalState function again.

checkModalState(ModalState.Open);
checkModalState(ModalState.Closed);

We'll get the following output:

Enum's real value is: 5
Modal is open.
Enum's real value is: 10
Modal is closed.

Strings Enums

In TypeScript, we are not limited to numeric enums. We can also use a string enum. Let's look at an example.

enum ModalState {
  OPEN = "Open",
  CLOSED = "Closed",
}

Now, let's console.log() the value.

console.log(`OPEN = ${ModalState.OPEN}`);

As expected, TypeScript compiler is resolving the enum value to the Open string.

OPEN = Open

String enums don't auto-increment like the numeric enum. You've got to assign a value to all the other enum values the moment you assign a value to one.

enum modalState {
  OPEN = "open",
  Closed, // TypeScript will complain about this line
}

You can also make a heterogenous enums like this, but it's generally not recommended.

enum modalState {
  OPEN = 1,
  CLOSED = "Closed",
}

String enum is particularly useful when we're debugging. Unlike the runtime value of numeric enums, the value of string enums convey a meaningful and readable value that'll make our debugging experience much better.

Const Enums

When requirements are tight, and our code has to be as minimal as possible, we can use the const enums by adding the const keyword before the enum definition.

const enum ModalState {
  Open,
  Closed,
}

Const enum is introduced for performance reasons. The enums are completely removed during compilation.

Before we look at how const enums are implemented in plain JavaScript, let's go back and take a look at the JavaScript implementation of normal enums.

enum ModalState {
  Open,
  Closed,
}

This is how the code above look like after compilation.

var modalState;
(function (modalState) {
  modalState[(modalState["Open"] = 0)] = "Open";
  modalState[(modalState["Closed"] = 1)] = "Closed";
})(modalState || (modalState = {}));

Let's ignore the complex-looking JavaScript. The point here is that an object is created by the compiler to represent the enum. If we log the object, we get:

{
  "0": "Open",
  "1": "Closed",
  "Open": 0,
  "Closed": 1
}

Now, back to const enum. No object is generated at all. They are completely removed during compilation.

const enum modalState {
  Open,
  Closed,
}

console.log(modalState); // this line will error

TypeScript will make this kind of complain if we try to console.log() const enum.

'const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query.

That's understandable because modalState, in this case, is completely removed on the compiled JavaScript code. Const enum are inlined at use sites.

To look at the generated JavaScript for a const enum. Let's compile the following code.

console.log(modalState.Open);

Result of compilation:

console.log(0 /* modalState.Open */);

As you can see, there is no actual implementation of the enum itself at all. The compiler simply substituted the JavaScript code with the value of the enum and a comment following it (Yes, that comment is generated by the compiler).

This reduce the size of the generated code, and the JavaScript runtime doesn't need to work with a JavaScript object in order to check a value resulting in a better performance.

Wrap Up

That's it for the basic of the TypeScript enums. Of course there're still lots of detail that you can read on the official docs if you want to understand TypeScript enums even more.

Guide To Sorting In Go

Vincent Taneri — Wed, 16 Nov 2022 04:03:59 GMT

In this post, we're going to take a look at various ways to sort a slice using the sort package from Go's standard library.

Ascending Sort

To sort a slice in ascending order, we can use the Ints(x), Float64(x), and Strings(x) from the sort package.

Examples:

Sorting int

nums := []int{3, 7, 8, 1, 5, 4}
sort.Ints(nums)
fmt.Println(nums) // prints [1 3 4 5 7 8]

Sorting float64

floats := []float64{3.2, 7.1, 7.9, 1.1, 5.2, 3.9}
sort.Float64s(floats)
fmt.Println(floats) // prints [1.1 3.2 3.9 5.2 7.1 7.9]

Sorting string

strings := []string{"apple", "Banana", "cherry", "Mango", "papaya"}
sort.Strings(strings)
fmt.Println(strings) // [Banana Mango apple cherry papaya]

Notice that sort.Strings(x) sort the elements in the string slice based on their Unicode value, that's why all the capital letters come first.

That's how you can sort in ascending order using Go. Pretty easy and convenient right?

But it's not as straightforward when we need anything other than the ascending sort, like sorting the slices in descending order for example.

Let's look at 2 other ways of sorting to solve this problem.

Sort With Custom Comparator Using sort.Slice

sort.Slice() sorts a slice with the provided less function. But what is a less function?

Less reports whether the element with index i must sort before the element with index j.

The function signature look like this:

less(i, j int) bool

Now, back to our example. We can sort the slice in decreasing order this way:

nums := []int{3, 7, 8, 1, 5, 4}
sort.Slice(nums, func(i, j int) bool {
  return nums[i] > nums[j]
})
fmt.Println(nums) // prints [8 7 5 4 3 1]

At this point, you should be able to guess how the less function in sort.Ints is implemented. Check it out!

If you actually visit the link, you'll notice a pattern in the built-in sorting functions.

// IntSlice attaches the methods of Interface to []int, sorting in increasing order.
type IntSlice []int
func (x IntSlice) Len() int           { return len(x) }
func (x IntSlice) Less(i, j int) bool { return x[i] < x[j] }
func (x IntSlice) Swap(i, j int)      { x[i], x[j] = x[j], x[i] }

// Float64Slice implements Interface for a []float64, sorting in increasing order,
// with not-a-number (NaN) values ordered before other values.
type Float64Slice []float64
func (x Float64Slice) Len() int { return len(x) }
func (x Float64Slice) Less(i, j int) bool { return x[i] < x[j] || (isNaN(x[i]) && !isNaN(x[j])) }
func (x Float64Slice) Swap(i, j int)      { x[i], x[j] = x[j], x[i] }

// StringSlice attaches the methods of Interface to []string, sorting in increasing order.
type StringSlice []string
func (x StringSlice) Len() int           { return len(x) }
func (x StringSlice) Less(i, j int) bool { return x[i] < x[j] }
func (x StringSlice) Swap(i, j int)      { x[i], x[j] = x[j], x[i] }

That's because they're implementing the sort.Interface interface. Yes, the interface is called Interface.

And that brings us to the final section, sorting using sort.Sort().

Sorting sort.Interface Using sort.Sort()

This option allow the most customization and is actually the basis of how all the sorting function is the sort package work.

For example, sort.Ints is actually:

func Ints(x []int) { Sort(IntSlice(x)) }

You can also check the source code.

Now, let's try to understand what the sort.Sort() function does.

From the docs:

func Sort(data Interface)

sort.Sort() sorts data in ascending order as determined by the Less method. It makes one call to data.Len to determine n and O(n*log(n)) calls to data.Less and data.Swap. The sort is not guaranteed to be stable.

data.Len, data.Less, data.Swap come from the sort.Interface interface, which look like this:

type Interface interface {
	// Len is the number of elements in the collection.
	Len() int
	// Less reports whether the element with
	// index i should sort before the element with index j.
	Less(i, j int) bool
	// Swap swaps the elements with indexes i and j.
	Swap(i, j int)
}

By implementing sort.Interface, we can also call sort.Sort() on our collection.

For example, let's create a custom struct that implement the interface:

type Pet struct {
	name string
	kind string
}

type PetSlice []Pet

func (p PetSlice) Len() int {
	return len(p)
}

func (p PetSlice) Less(i, j int) bool {
	return p[i].name < p[j].name // sort in ascending order using the pet's name
}

func (p PetSlice) Swap(i, j int) {
	p[i], p[j] = p[j], p[i]
}

Then we can use our custom struct like this:

var myPets PetSlice = []Pet{
  {"luna", "cat"},
  {"hery", "dog"},
  {"dory", "fish"},
}

fmt.Println(myPets) // [{luna cat} {hery dog} {dory fish}]
sort.Sort(myPets)
fmt.Println(myPets) // [{dory fish} {hery dog} {luna cat}]

Everytime you call sort.Sort on myPets, myPets will be sorted using the Less method as the comparator.

Finally, let's go back to our example about sorting int slice in decrementing order. We can also implement a custom type for that.

type myIntSlice []int

func (s myIntSlice) Len() int {
	return len(s)
}

func (s myIntSlice) Less(i, j int) bool {
	return s[i] > s[j]
}

func (s myIntSlice) Swap(i, j int) {
	s[i], s[j] = s[j], s[i]
}

And use it like this:

var nums myIntSlice = []int{3, 7, 8, 1, 5, 4}
sort.Sort(nums)
fmt.Println(nums) // [8 7 5 4 3 1]

Of course, we don't always have to declare our variable with our custom type. We can also use type casting for the situation when the data is already there.

Anytime we need to sort an int slice in decreasing order, we can simply type cast it to our custom type.

nums := []int{3, 7, 8, 1, 5, 4}
sort.Sort(myIntSlice(nums))
fmt.Println(nums) // [8 7 5 4 3 1]

Wrap Up

That's it for this post. I hope it serves you well as a quick guide to the sort package.

How To Debug TypeScript In VSCode

Vincent Taneri — Wed, 21 Sep 2022 20:22:32 GMT

Let's take a look at how we can configure VSCode's built-in debugger to debug a TypeScript Node application.

Install Dependencies

First, you have to install these dependencies (I prefer installing them as dev dependencies):

npm install --save-dev typescript ts-node tsconfig-paths

Generate Source Map

Create a tsconfig.json file by running:

tsc --init

or create the file yourself.

Then add "sourceMap": true to the compilerOptions.

Your tsconfig.json file will now look something like this:

{
  "compilerOptions": {
    "target": "ES3",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true
  }
}

By setting the sourceMap property to true. The TypeScript compiler will now also generate a .map file as well as a .js file for each of our TypeScript files.

Node is a JavaScript runtime. It will only execute JavaScript code. The generated .map file tells VSCode how to map the executing JavaScript code back to our TypeScript source.

Configure Debugger

Next, go to the debug tab, and add a JSON configuration file named launch.json with these contents:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "ts-debug",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.ts",
      "runtimeArgs": ["-r", "ts-node/register", "-r", "tsconfig-paths/register"],
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

Feel free to change the name field to anything you like.

The most important part here is runtimeArgs, which contains optional arguments to be passed to the runtime executable.

We write "-r" which stands for require to register ts-node and tsconfig-paths. tsconfig-paths is used to load modules whose location is specified in the paths section of tsconfig.json.

Finally, make sure the program field points to the entry point of your app.

Wrap Up

That's it. You're done with the configuration. Now, you can put breakpoints on your code, and click on the start debugging icon or simply press the keyboard shortcut, F5, to debug.

How To Integrate Utterances With Astro

Vincent Taneri — Fri, 07 Oct 2022 09:53:35 GMT

In this post, we're going to take a look at how I integrated Utterances with my Astro blog without any additional UI library. We'll create an Astro component that handle calling the Utterances script, and also see how we can change the theme of the Utterances' IFrame dynamically.

What Is Utterances

First, let's get to know Utterances. Utterances is a lightweight comments widget build on GitHub issues. It's also completely free and open source. I'm using Utterances as the comment system of my blog, you can scroll down to the comments section below to see Utterances in action.

You can read more about Utterances in its official website.

Generating Utterances Script

Before we can put Utterances in our site, we have to generate a script to call the Utterances IFrame. You can do it by following the instructions in the official website or the instructions below if you don't want to leave the site 😆.

First, you have to install Utterances in your GitHub account. Give Utterances access to your site's repository and make sure that the repository is public.

Next, fill in the template below with your information.

<script
  src="https://utteranc.es/client.js"
  repo="[ENTER REPO HERE]"
  issue-term="[ISSUE TERM]"
  label="[LABEL NAME]"
  theme="[THEME NAME]"
  crossorigin="anonymous"
  async
></script>

Leave src as it is.

The repo structure is: owner/repo. For example: repo=tanerijun/vitaneri-v3.

For issue-term, you can choose among: pathname, url, title, og:title, [ISSUE NUMBER], [SPECIFIC TERM].

Fill label with the label that'll be assigned to issues created by Utterances. label is optional. If you don't need it, just remove the label attribute from the script tag. But if you do need it, make sure that the label exist in your repo. To create your own issue label, you can read the instructions here.

As for theme, you can choose among these options: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light, gruvbox-dark.

The next step is to call that script from your Astro app.

Creating Utterances Astro component

Let's create a component that can call that Utterances script for reusability. Start by creating an Astro component. I named mine Utterances.astro.

Next, put a single div element in the component with whatever id you like. It's going to serve as a container for Utterances.

<div id="utterances-container"></div>

To send the script to the client, we have to write our JavaScript in a <script> tag, not frontmatter(---). Inside the <script> tag, let's put in these code:

const script = document.createElement("script");
const container = document.querySelector("#utterances-container"); // your id in your html above

// Replace the value of each key with yours
Object.entries({
  src: "https://utteranc.es/client.js",
  repo: "tanerijun/vitaneri-v3",
  "issue-term": "pathname",
  label: "post comments", // omit this line, if you don't need label
  theme: "github-dark",
  crossorigin: "anonymous",
}).forEach(([key, value]) => {
  script.setAttribute(key, value);
});

container?.appendChild(script);

So basically, we're creating a script element, then we assign it all our Utterances` script attributes, and finally, we insert the script into the container.

Your Utterances.astro should now look something like this:

<div id="utterances-container"></div>

<script>
  const script = document.createElement("script");
  const container = document.querySelector("#utterances-container");

  Object.entries({
    src: "https://utteranc.es/client.js",
    repo: "tanerijun/vitaneri-v3",
    "issue-term": "pathname",
    label: "post comments",
    theme: "github-dark",
    crossorigin: "anonymous",
  }).forEach(([key, value]) => {
    script.setAttribute(key, value);
  });

  container?.appendChild(script);
</script>

With that, we're finished with the component. You can plug it wherever you want your Utterances comment to show up.

Changing Utterances Theme Based On Site Theme

Now let's take this a step further by having the Utterances theme match the site theme. This part really depends on how the theming system on your site works. A common approach is to persist theming information in local storage. I'm going to use that as an example here.

<div id="utterances-container"></div>

<script>
  const script = document.createElement("script");
  const container = document.querySelector("#utterances-container");
  const currentTheme = localStorage.getItem("theme");

  // Set configurations
  Object.entries({
    src: "https://utteranc.es/client.js",
    repo: "tanerijun/vitaneri-v3",
    "issue-term": "pathname",
    label: "post comments",
    theme: currentTheme == "light" ? "github-light" : "github-dark",
    crossorigin: "anonymous",
  }).forEach(([key, value]) => {
    script.setAttribute(key, value);
  });

  container?.appendChild(script);
</script>

Nice our Utterances theme change dynamically now. But it's still not perfect.

Usually, a site that support both light mode and dark mode will have a button to toggle between the modes. With our current implementation, the theme only change when our component mounts. In other words, even if we click on the button to toggle site theme change, we have to refresh the page before Utterance know about the change.

Synchronizing Utterances Theme With Site Theme

In order to make sure the Utterance theme is synced with the theme value in our local storage, we are going to create a function to trigger theme change manually and bind it to our light/dark mode toggle button.

function toggleUtterancesTheme() {
  if (document.querySelector(".utterances-frame")) {
    const theme = localStorage.getItem("theme") === "light" ? "github-light" : "github-dark";
    const message = {
      type: "set-theme",
      theme,
    };
    const iframe = document.querySelector(".utterances-frame") as HTMLIFrameElement; // omit as HTMLIFrameElement if you're wring JS
    iframe?.contentWindow?.postMessage(message, "https://utteranc.es");
  }
}

The function read our new theme value and send a message containing the new theme value to the Utterance IFrame. This way we can change the Utterance theme without refreshing the page.

And finally, we need to make sure our light/dark mode toggle button change the value in local storage and call the function.

themeBtn?.addEventListener("click", function () {
  // toggle light/dark mode
  if (htmlClassList?.contains("theme-dark")) {
    localStorage.setItem("theme", "light");
  } else {
    localStorage.setItem("theme", "dark");
  }
  toggleUtterancesTheme();
});

With that, our Utterances theme will be in sync with our local storage 🎉.

Wrap up

That's it for this post. We've successfully integrate Utterances with our Astro site. You might need to adjust the theme codes with how your theme system is implemented, but you should have a general idea of how to do it now. If you have any questions, feel free to comment below.

How To Remove The "Clear All" Button From Search Input

Vincent Taneri — Tue, 18 Jul 2023 12:04:38 GMT

When you create a search input, <input type="search" />, in HTML. It's going to display a clear all button, usually shaped as a cross ("X"), at the end of the input.

I am talking about this:

We can remove the "X" with these CSS:

/* clears the 'X' in searchbar from Internet Explorer */
input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* clears the 'X' in searchbar from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

That's it! Have a good day 😊.

Implementing Map, Filter, And Reduce Using Generic In Go

Vincent Taneri — Tue, 15 Nov 2022 08:25:07 GMT

This is a short post showing an implementation of map, filter, and reduce using generic in Go.

Map

Map creates a new slice and populates it with the results of calling the provided function on every element in input slice.

func Map[T1, T2 any](s []T1, f func(T1) T2) []T2 {
	r := make([]T2, len(s))
	for i, v := range s {
		r[i] = f(v)
	}
	return r
}

Usage example:

nums := []int{1, 2, 3, 4, 5}
numsDoubled := Map(nums, func(n int) int {
  return n * 2
})
fmt.Println(numsDoubled) // prints [2 4 6 8 10]

Filter

Filter returns a new slice that contains elements from the input slice which return true when they're passed as a parameter to the provided testing function.

func Filter[T any](s []T, f func(T) bool) []T {
	var r []T
	for _, v := range s {
		if f(v) {
			r = append(r, v)
		}
	}
	return r
}

Usage example:

nums := []int{1, 2, 3, 4, 5}
evenNums := Filter(nums, func(n int) bool {
	return n%2 == 0
})
fmt.Println(evenNums) // prints [2 4]

Reduce

Reduce runs a reducer function (the provided function) over all elements in the array, in ascending-index order, and accumulates them into a single value.

Every time, the return value of the reducer function is passed again to the next invocation of the function as the accumulator. Reduce returns the final value of the accumulator.

func Reduce[T1, T2 any](s []T1, accumulator T2, f func(T2, T1) T2) T2 {
	r := accumulator
	for _, v := range s {
		r = f(r, v)
	}
	return r
}

Usage example:

nums := []int{1, 2, 3, 4, 5}
sumOfNums := Reduce(nums, 0, func(acc, n int) int {
	return acc + n
})
fmt.Println(sumOfNums) // prints 15

Wrap Up

That's how we can implement map, filter, and reduce in Go. We can use these function just like how we use them in Python, JavaScript, Dart, Java, etc.

Introduction To Generics In TypeScript

Vincent Taneri — Sat, 29 Oct 2022 01:58:28 GMT

This post is a simple introduction to generics in TypeScript.

What Is Generics?

Generics is a way of writing code that will work with a wide range of objects and primitives. It's really useful when we want to write codes that will work with any sort of type, interface, or class definition.

For example, a function to find an element in a list where the elements can be strings, numbers, or any other type. Or maybe you have a Queue class that need to work with any type of primitive. These scenarios are when we need to use generics.

Basic Syntax

Let's first look at a code snippet that uses generics.

function print<T>(val: T) {
  console.log(`typeof T is: ${typeof val}`);
  console.log(`value is: ${val}`);
}

Here, we have a function called print that is using generics. The function take an argument called val of type T.

Note that the T is only a convention. You can name it whatever you want.

Let's see how it works when we call the function with arguments of different type.

print<number>(1);
print<string>("hello");
print<boolean>(true);
print<function>(() => {});
print<object>({ name: "John" });

And the output:

typeof T is: number
value is: 1
typeof T is: string
value is: hello
typeof T is: boolean
value is: true
typeof T is: function
value is: function () {}
typeof T is: object
value is: [object Object]

As you can see, the function works with every type. All we have to do is specify a type inside the angle brackets, then all T inside the function will be replaced with that type.

Take print<number>() for example. All T that appear inside the function will be replaced with number.

function print(val: number) {
  console.log(`typeof T is: ${typeof val}`);
  console.log(`value is: ${val}`);
}

And if we give an argument that's not a number, we'll get an error.

For example, if we run print<number>("hello"). We'll get the following error.

Argument of type 'string' is not assignable to parameter of type 'number'.

Typescript prevents us from calling a generic function with the wrong type as an argument.

Note that we don't need to explicitly specify the type the function takes. It can be inferred. For example the code below will still work as expected.

print(1);
print("hello");
print(true);
print(() => {});
print({ name: "John" });

Multiple Generics

We are not limited to one generic in TypeScript. We can use as many as we needs.

For example:

function twoTypes<A, B>(arg1: A, arg2: B) {
  console.log(`Type of the first argument is: ${typeof arg1}`);
  console.log(`Type of the second argument is: ${typeof arg2}`);
}

Here, we have a function that take 2 generic types. Let's see how it works using the code below.

twoTypes<number, string>(1, "hello");
twoTypes(2, "world");
twoTypes("hello", "world");

Notice that the 2 generics can also be of the same type as shown at line 3.

Type of the first argument is: number
Type of the second argument is: string
Type of the first argument is: number
Type of the second argument is: string
Type of the first argument is: string
Type of the second argument is: string

Type Constraint

You can see how powerful generics is from the examples above. Our generic function now works with any type. But usually, we want to only allow a specific set of types to be used within our generic. We can accomplish this by constraining the type using the extends keyword.

For example:

function takeArray<T extends Array<string> | Array<number>>(items: T) {}

Now we are constraining the T on the function above to either Array<string> or Array<number>. This means that whatever T is used within our code, it can only be interpreted as either an array of string or an array of number.

If we try to call the function with array of boolean, takeArray([true, false]), we'll get the following error.

Type 'boolean' is not assignable to type 'string | number'.

Note that Array<T> is a predefined type from the standard TypeScript type definitions.

Generic Constraints

We can also construct a generic type from another generic type.

For example:

function printProperty<T, K extends keyof T>(obj: T, key: K) {
  console.log(`obj[${key}] = ${obj[key]}`);
}

Here, our function take two generic types, T and K. The type K is constrained to be the value computed from the keyof operator on type T.

The keyof operator will return a string literal type of the object's properties. Therefore K will be constrained to the property names of the type T.

Let's look at an example.

const obj = {
  id: 1,
  name: "John",
};

printProperty(obj, "id");
printProperty(obj, "name");
printProperty(obj, "age");

The first and second line of the code will produce the following output as expected:

obj[id] = 1
obj[name] = John

But the third line will result in an error because the property age doesn't exist on type keyof T which is extended by type K.

Argument of type '"age"' is not assignable to parameter of type '"id" | "name"'.

Creating A New Object Within Generics

There might be a time when we need to create a factory function that return an instance of a class.

For example:

class Fish {}

function createClassInstance<T>(arg: T): T {
  return new arg();
}

let instanceOfFish = createClassInstance(Fish);

Surprisingly, the code above results in the following error.

This expression is not constructable.
  Type 'unknown' has no construct signatures.

This is happening because the name of T only exists at compile time. We can use T for type checking but not for constructing an object of type T unless we have access to the constructor.

In order to fix the code above, we need to refer to type T by its constructor function.

class Fish {}

function createClassInstance<T>(arg: { new (): T }): T {
  return new arg();
}

let instanceOfFish = createClassInstance(Fish);

With this change, our code will now compile and work as expected.

Wrap Up

That's it for the introduction to generics in TypeScript 🎉.

Having a good understanding of generics is really important to use the more advanced TypeScript features like Mapped Types), Conditional Types, etc.

Introduction to Java's Stream API

Vincent Taneri — Thu, 08 Sep 2022 01:15:32 GMT

In this post, we'll learn Java's Stream API by working with a sample data source using the Stream API. By the end of this article, you'll have a basic understanding of the Stream API in Java and what kind of problem it solves.

Overview

Let's start with the question "What is a stream?".

Stream is basically just a wrapper for a data source that allows you to work with the data declaratively. By using stream, we can process data much faster than when working with it imperatively. Stream makes working with collection much more fun and easier.

First, let's take a look at the data source that we'll be using in our examples. Then we'll compare how to work with the data source using both imperative and declarative methods so that you can see the advantage of using the stream API. After that, we'll take a look at some common operations using stream by answering some questions about the data source, and letting the stream API answer it for us.

Note: I assume that you know the basic working knowledge of Lambda Expressions, Method Reference, and Optional

Introducing Our Data Source

First, let's look at the data source we'll be working with throughout the article. We'll be working with a list of Cat called cats.

Let's first look at how Cat is implemented:

public class Cat {

    private String name;
    private int age;
    private String gender;

    public Cat(String name, int age, String gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    @Override
    public String toString() {
        return "Cat{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", gender='" + gender + '\'' +
                '}';
    }
}

Cat is a very simple object with 3 fields: name, age, and gender. We've also added getters and setters for each field and a toString() method that's going to be useful for displaying the result of our operations later.

Next, let's look at the Main class. This is where we'll be working throughout the article.

public class Main {

    public static void main(String[] args) {
        List<Cat> cats = List.of(
                new Cat("Bob", 5, "M"),
                new Cat("Coco", 7, "F"),
                new Cat("Amelia", 3, "F"),
                new Cat("Dan", 2, "M")
        );
    }
}

For now, it only contains a list of Cat called cats.

Working With Data Imperatively

Now, what if I want to create a new list that only contains female cats?

The standard way of doing this, the imperative way, is like this:

List<Cat> femaleCats = new ArrayList<>();

for (Cat cat: cats) {
    if ("F".equals(cat.getGender())) {
        femaleCats.add(cat);
    }
}

We just did all these steps:

Create a new empty list.
Loop through the cats list.
In the loop, we check if the cat's gender is female (F).
If it is, we add the cat to the new list we created.

This is what it looks like if we print femaleCats.

Cat{name='Coco', age=7, gender='F'}
Cat{name='Amelia', age=3, gender='F'}

Working With Data Declaratively

And now we'll demonstrate how to work with the data declaratively using the stream API. Working declaratively means that we simply ask the program what we want without the need of specifying each step in detail just like what we did when working imperatively.

This is how we can do the same thing as we did above with the stream API.

List<Cat> femaleCats = cats
                    .stream()
                    .filter(cat -> "F".equals(cat.getGender()))
                    .collect(Collectors.toList());

So we start off by calling the .stream() method on the collection (cats), which returns a Stream with the collection as its source. Now we can start working using the stream API. We simply have to ask what we want from the collection.

In this case, we want to filter out the list. We want a new list that only contains female cats. We do it by chaining .filter() method. .filter() takes a Predicate, which is basically just a functional interface that returns a boolean. In our case, we need to pass in cat -> "F".equals(cat.getGender)).

The last step is to convert the result of .filter() into a List because .filter() returns a Stream. This is by design, and it's really useful. We can chain the result of our .filter() with other methods on the stream API which you will see later.

Now to convert it into a List we have to call the method .collect(). .collect() take a Collector as parameter. Since we want our end result to be a List, the Collector we need to pass in is Collectors.toList().

Finally, we get the same result if we print femaleCats.

Cat{name='Coco', age=7, gender='F'}
Cat{name='Amelia', age=3, gender='F'}

Do you see the advantage of the declarative approach now? What used to be several lines of code in the imperative mode is now only a line, and the code is much more readable.

The advantage might not be too obvious now as the example was really simple, but it'll become clear how useful it is when we try to do multiple operations by chaining stream methods later in this article.

Common Operation Using Stream API

Now, let's take a look at some common operations using the stream API.

forEach

.forEach() simply loop over each element in the stream and apply the function you provide to each element.

For example, the code below prints the name of each cat.

cats.stream().forEach(cat -> System.out.println(cat.getName()));

Note that .forEach() doesn't return a Stream. So you won't be able to chain another method after calling it. This kind of method is also called a terminal method.

map

.map() does the same thing forEach() does. That is, applying a function to each element in a Stream. The difference is that .map() returns a new Stream, which can be another data type.

Let's look at an example of using .map().

Say, We want to change the gender format of our cat from "M" and "F" to "Male" and "Female" respectively. We can use .map() to solve this problem.

List<Cat> newCats = cats
                .stream()
                .map(cat -> new Cat(
                        cat.getName(),
                        cat.getAge(),
                        "F".equals(cat.getGender()) ? "Female" : "Male"))
                .collect(Collectors.toList());

And if we print the newCats, we get what we want.

Cat{name='Bob', age=5, gender='Male'}
Cat{name='Coco', age=7, gender='Female'}
Cat{name='Amelia', age=3, gender='Female'}
Cat{name='Dan', age=2, gender='Male'}

filter

We already looked at how .filter() works before. It returns a new Stream that contains the element from the original Stream that fulfills a condition.

Let's look at another example. Say that we want a new List of cats that are younger than 5.

List<Cat> catYoungerThanFive = cats
                        .stream()
                        .filter(cat -> cat.getAge() < 5)
                        .collect(Collectors.toList());

And this is the result of printing catYoungerThanFive.

Cat{name='Amelia', age=3, gender='F'}
Cat{name='Dan', age=2, gender='M'}

sorted

We can also sort the list using the .sorted() method. The method takes in a Comparator as a parameter.

For example, if we want to sort the cats by their age.

List<Cat> newCats = cats
                .stream()
                .sorted(Comparator.comparing(Cat::getAge))
                .collect(Collectors.toList());

And this is the result:

Cat{name='Dan', age=2, gender='M'}
Cat{name='Amelia', age=3, gender='F'}
Cat{name='Bob', age=5, gender='M'}
Cat{name='Coco', age=7, gender='F'}

You can also reverse it by adding the .reversed() method like this:

List<Cat> newCats = cats
                .stream()
                .sorted(Comparator.comparing(Cat::getAge).reversed())
                .collect(Collectors.toList());

And this is the result:

Cat{name='Coco', age=7, gender='F'}
Cat{name='Bob', age=5, gender='M'}
Cat{name='Amelia', age=3, gender='F'}
Cat{name='Dan', age=2, gender='M'}

min and max

.min() and .max() are used to get the minimum and maximum values in a stream. To use the methods, we have to pass in a Comparator.

Note that the .min() and .max() methods return an Optional because there might not be a result. So you've got to handle that.

Say that we want to find the youngest and the oldest cat from our list. We can that using .min() and .max() like this:

Optional<Cat> youngestCat = cats
                    .stream()
                    .min(Comparator.comparing(Cat::getAge));
System.out.println(
    "Youngest cat: " + youngestCat.orElseThrow(CatNotFoundException::new)
);

Optional<Cat> oldestCat = cats
                    .stream()
                    .max(Comparator.comparing(Cat::getAge));
System.out.println(
    "Oldest cat: " + oldestCat.orElseThrow(CatNotFoundException::new)
);

And this is the result:

Youngest cat: Cat{name='Dan', age=2, gender='M'}
Oldest cat: Cat{name='Coco', age=7, gender='F'}

allMatch, anyMatch, and noneMatch

These operations take a Predicate as a parameter just like .filter() and return a boolean.

.allMatch() returns true only if all elements in the stream match the Predicate.

boolean allOlderThanFive = cats
                    .stream()
                    .allMatch(cat -> cat.getAge() > 5);
System.out.println("allOlderThanFive = " + allOlderThanFive); // returns false

.anyMatch() returns true if any one of the elements in the stream matches the Predicate.

boolean anyOlderThanFive = cats
                    .stream()
                    .anyMatch(cat -> cat.getAge() > 5);
System.out.println("anyOlderThanFive = " + anyOlderThanFive); // returns true

.noneMatch() returns true if none of the elements match the Predicate.

boolean noneOlderThanFive = cats
                    .stream()
                    .noneMatch(cat -> cat.getAge() > 5);
System.out.println("noneOlderThanFive = " + noneOlderThanFive); // returns false

collect

collect is a terminal operation that we've been using several times in the examples above. It's the most common way to end a stream and package the elements in the stream into a collection.

Of course, we're not limited to collect into a list like what we did in the examples above. We can collect into any collection we want: map, set, etc.

Let's look at an example of collecting into a map.

Say that I want to group my cats based on their gender. We can do it like this:

Map<String, List<Cat>> catMap = cats
                    .stream()
                    .collect(Collectors.groupingBy(Cat::getGender));

Now, if we print the map like this:

catMap.forEach((gender, catsList) -> {
    System.out.println(gender + " cat: ");
    catsList.forEach(System.out::println);
});

We'll get this in the console:

F cat:
Cat{name='Coco', age=7, gender='F'}
Cat{name='Amelia', age=3, gender='F'}
M cat:
Cat{name='Bob', age=5, gender='M'}
Cat{name='Dan', age=2, gender='M'}

Chaining Stream Methods

You can also chain multiple stream methods together. Which we have been doing all along in the examples above. But let's look at it again using another example.

Say that I want to create a new List that only contains the name of male cats that are older than 4. We can do it like this:

List<String> newCats = cats
                .stream()
                .filter(cat -> "M".equals(cat.getGender()))
                .filter(cat -> cat.getAge() > 4)
                .map(Cat::getName)
                .collect(Collectors.toList());

newCats.forEach(System.out::println);    // Bob

Wrap Up

That's it for this article. I hope you've got a better understanding of the stream API now. I also hope that you can see how useful and powerful the stream API is, how it allows us to simply ask questions about our collection instead of implementing each step individually using the imperative approach.

Introduction To Transaction In Spring

Vincent Taneri — Sat, 03 Sep 2022 03:22:27 GMT

In this post, we'll implement a simple Spring app to understand transaction. By the end of this post, you'll be equipped with the basic knowledge to work with transaction in Spring.

Let's start the tutorial by introducing the concept of transaction. What exactly is a transaction?

What Is A Transaction

A transaction is a sequence of operations that are either executed successfully together or not at all. In the real-world scenario, transaction is often used to avoid data inconsistencies.

If any operations in the transaction were to fail, the transaction rolls back. In other words, the app is restored to how it was before the transaction happened.

If all the operations are executed successfully, all the changes that happened as a result of the transaction will be finalized. We often say that the transaction commits in this case.

Let's look at a simple example of how transaction can be useful. Suppose you have a banking app, and it has the functionality of transferring money. The functionality implements these 2 steps:

Withdraw money from the sender's account.
Deposit the money to the receiver's account.

Imagine if the transaction at step 2 failed for some reason. What happened to the sender's money?

This is where transaction comes into play. In this case, the transaction will roll back the app to how it was before step 1 is executed. The sender's money will not be withdrawn. No harm done.

Using Transaction In Spring

To implement transaction in Spring, all you have to do is to put the @Transactional annotation before a class or a method. If you put the method on a class, you tell Spring that every method in the class has to be transactional.

Note: If you are not using Spring Boot, you'll have to add the @EnableTransactionManagement on your project's configuration class.

Behind the scene, Spring will configure an aspect that intercepts all the methods annotated with @Transactional. The aspect manages the transaction. If the transaction throws an exception, the changes will be rolled back, otherwise, they will be committed.

Implementing An Example App

To clear things up, We'll create a simple app that mimics the scenario from the example above. Feel free to follow along or download the source code here.

Note: I assume that you know the basics of Spring Boot and how to interact with a database using JDBCTemplate, which you can find more here.

Generating App With Spring Initializr

First, use Spring Initializr to generate a Spring Boot project using these dependencies.

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

For simplicity's sake, we will use H2 memory database, and use JDBCTemplate to interact with it.

Configuring H2 Database

We'll keep the database simple. The database will contain a table called account with 3 columns: id, name, and money.

Therefore, our schema.sql in /src/main/resources/ will look like this:

CREATE TABLE account (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    money DOUBLE NOT NULL
);

We then fill in 2 users in our table. A sender and a receiver, each with $100 in their account. We put these queries inside data.sql in /src/main/resources/.

INSERT INTO account (name, money) VALUES ('John Doe', 100);
INSERT INTO account (name, money) VALUES ('Jane Doe', 100);

Note: Spring Boot will automatically execute these 2 files when we start our app.

Create Model Object

From this session onwards, we'll be working in the /src/main/java folder.

Next, let's create an object that models our table's row.

package com.example.model;

public class Account {

    private int id;
    private String name;
    private double money;

    // Getters and setters
}

Create Repository Object

Next, we'll create a repository object that'll be responsible for interacting with the database.

package com.example.repository;

@Repository
public class AccountRepository {

    private final JdbcTemplate jdbc;

    public AccountRepository(JdbcTemplate jdbc) {
          this.jdbc = jdbc;
    }

    public void changeMoneyAmount(long id, double amount) {
        String sql = "UPDATE account SET money = ? WHERE id = ?";
        jdbc.update(sql, amount, id);
    }

    public Account findAccountById(long id) {
        String sql = "SELECT * FROM account WHERE id = ?";
        return jdbc.queryForObject(sql, new AccountRowMapper(), id);
    }

    public List<Account> findAllAccounts() {
        String sql = "SELECT * FROM account";
        return jdbc.query(sql, new AccountRowMapper());
    }
}

This is the implementation for the AccountRowMapper that we need to pass to jdbc.query to map the result of our query into a format that our application knows how to work with.

package com.example.repository.mappers;

public class AccountRowMapper implements RowMapper<Account> {

    @Override
    public Account mapRow(ResultSet resultSet, int i) throws SQLException {
        Account a = new Account();
        a.setId(resultSet.getInt("id"));
        a.setName(resultSet.getString("name"));
        a.setMoney(resultSet.getDouble("money"));
        return a;
    }
}

Create Service Object

Since this service object contains logic that enables our app to transfer money, we'll name it TransferService. The class will receive an instance of AccountRepository from the Spring context to interact with our database. And the logic will be inside the transferMoney() method annotated with @Transactional.

package com.example.service;

@Service
public class TransferService {

    private final AccountRepository accountRepository;

    public TransferService(AccountRepository accountRepository) {
        this.accountRepository = accountRepository;
    }

    @Transactional
    public void transferMoney(long senderId, long receiverId, double amount) {
        Account sender = accountRepository.findAccountById(senderId);
        Account receiver = accountRepository.findAccountById(receiverId);

        double senderNewMoney = sender.getMoney() - amount;
        double receiverNewMoney = receiver.getMoney() + amount;

        accountRepository.changeMoneyAmount(senderId, senderNewMoney);
        accountRepository.changeMoneyAmount(receiverId, receiverNewMoney);
    }

    public List<Account> getAllAccounts() {
        return accountRepository.findAllAccounts();
    }
}

Create Controller Class

Now that we have implemented our logic for transferring money, the final step is to expose it with a Controller. Below is the code for our Controller class.

package com.example.controller;

@RestController
public class AccountController {

    private final TransferService transferService;

    public AccountController(TransferService transferService) {
        this.transferService = transferService;
    }

    @PostMapping("/transfer")
    public void transferMoney(@RequestBody TransferRequest request) {
        transferService.transferMoney(request.getSenderId(), request.getReceiverId(), request.getAmount());
    }

    @GetMapping("/accounts")
    public List<Account> getAllAccounts() {
        return transferService.getAllAccounts();
    }
}

We also need a data transfer object called TransferRequest that models our HTTP request body.

package com.example.dto;

public class TransferRequest {
    private long senderId;
    private long receiverId;
    private double amount;

    // Getters and setters
}

Running Our App

We're now done implementing our app. Let's run the app and try calling its endpoints with an API testing tool (Postman, cURL, etc.).

This is what I did:

Send a POST request to the /transfer route, with the request body below.

{
  "senderId": 1,
  "receiverId": 2,
  "amount": 20
}

Send a GET request to the /accounts route, and get back the following JSON.

[
  {
    "id": 1,
    "name": "John Doe",
    "money": 80.0
  },
  {
    "id": 2,
    "name": "Jane Doe",
    "money": 120.0
  }
]

Seems like our app is working as expected. But how do we know if the @Transactional annotation really works? We are going to prove that in the next section.

Testing The `@Transaction` Annotation

To test if the @Transaction annotation really works, let's throw a RuntimeException in our transferMoney() method.

@Transactional
public void transferMoney(long senderId, long receiverId, double amount) {
    Account sender = accountRepository.findAccountById(senderId);
    Account receiver = accountRepository.findAccountById(receiverId);

    double senderNewMoney = sender.getAmount().subtract(amount);
    double receiverNewMoney = receiver.getAmount().add(amount);

    accountRepository.changeMoneyAmount(senderId, senderNewAmount);
    accountRepository.changeMoneyAmount(receiverId, receiverNewAmount);

    throw new RuntimeException("Problem executing transaction.");
}

Now let's restart the app and call the endpoints again.

Send a POST request to the /transfer route, with the request body below.

{
  "senderId": 1,
  "receiverId": 2,
  "amount": 20
}

Send a GET request to the /accounts route. And unsurprisingly, the result is different from our first application run. The @Transactional annotation did work as expected.

[
  {
    "id": 1,
    "name": "John Doe",
    "money": 100.0
  },
  {
    "id": 2,
    "name": "Jane Doe",
    "money": 100.0
  }
]

Because there's an error, the transaction rollback our application. That's why there's no change at all. The app is just like it was before we execute the transferMoney() method.

And if you check the log, you'll find java.lang.RuntimeException: Problem executing transaction. printed there.

Before we end the tutorial, let me introduce you to a common pitfall: Handling exceptions inside the method instead of throwing them.

This is a simple representation of the transaction aspect logic implemented by Spring.

try {
    // your method's logic, part A
} catch (RuntimeException e) {
    // rollback logic, part B
}

If you handle the exception directly inside the method's logic (part A), it won't reach the catch block (part B). The aspect will never know that your method had an error, and thus, your changes will be committed, and no rollback will happen.

Wrap Up

Congrats on making it to the end. I hope this short tutorial gives you an idea of how transaction work, and how important it is in a real-world application.

LeetCode: Add Two Numbers With TypeScript

Vincent Taneri — Sun, 09 Oct 2022 15:07:17 GMT

In this post, we'll be solving "Add Two Numbers" from LeetCode.

The title sounds so simple but it's actually much more challenging then it sounds because we're dealing with linked list.

A linked list is a sequence of nodes that contain two fields: an integer value and a link to the next node.

Now, let's go and solve the problem!

Problem

You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.

You may assume the two numbers do not contain any leading zero, except the number 0 itself.

Example 1:

Input: l1 = [2,4,3], l2 = [5,6,4]
Output: [7,0,8]
Explanation: 342 + 465 = 807.

Example 2:

Input: l1 = [0], l2 = [0]
Output: [0]

Example 3:

Input: l1 = [9,9,9,9,9,9,9], l2 = [9,9,9,9]
Output: [8,9,9,9,0,0,0,1]

Constraints:

The number of nodes in each linked list is in the range [1, 100].
0 <= Node.val <= 9
It is guaranteed that the list represents a number that does not have leading zeros.

Solution

Analysis

This is a simple addition problem.

But in the linked list version, the numbers are sorted in reverse. That means we have to do our addition in reverse too.

Approach

Create a dummy list node that'll point to our answer (This value should never change).
Create a cursor that'll manage our answer's linked list.
Traverse both list, but when the list is null, we replace the value with 0. Just like in real world addition (no number is equal to 0).
When traversing through the list, we add the number normally while also keeping track of the carry.
After the addition is performed, have our cursor point to the addition result.
Repeat until both list are traversed (both list are null).
There might be an extra carry after the last addition, Let's not forget to handle that!
Finally, return what our dummy list node from step 1 is pointing to.

Code

First, let's look at how our linked list is constructed:

class ListNode {
  val: number
  next: ListNode | null
  constructor(val?: number, next?: ListNode | null) {
    this.val = (val===undefined ? 0 : val)
    this.next = (next===undefined ? null : next)
}

Now, for the solution:

function addTwoNumbers(l1: ListNode | null, l2: ListNode | null): ListNode | null {
  const answerHead = new ListNode();
  let cursor = answerHead;
  let carry = 0;

  while (l1 !== null || l2 !== null) {
    const x = l1 ? l1.val : 0;
    const y = l2 ? l2.val : 0;
    const sum = x + y + carry;
    carry = sum >= 10 ? 1 : 0;
    cursor.next = new ListNode(sum % 10);
    cursor = cursor.next;

    if (l1 != null) l1 = l1.next;
    if (l2 != null) l2 = l2.next;
  }

  if (carry > 0) {
    cursor.next = new ListNode(carry);
  }

  return answerHead.next;
}

Time Complexity

The time complexity is O(Max(m, n)) because both of the list will only be traversed once, and the complexity depends on which list is longer.

Space Complexity

The space complexity is O(1) because we're using space only for our variables.

Wrap Up

That's it for LeetCode's "Add Two Numbers" 🎉.

You can also find the code on my Github.

LeetCode: Container With Most Water With TypeScript

Vincent Taneri — Thu, 27 Oct 2022 05:34:34 GMT

In this post, we're going to solve LeetCode's "Container With Most Water" using TypeScript.

Problem

You are given an integer array height of length n. There are n vertical lines drawn such that the two endpoints of the ith line are (i, 0) and (i, height[i]).

Find two lines that together with the x-axis form a container, such that the container contains the most water.

Return the maximum amount of water a container can store.

Notice that you may not slant the container.

Example 1:

Input: height = [1,8,6,2,5,4,8,3,7]
Output: 49
Explanation: The above vertical lines are represented by array [1,8,6,2,5,4,8,3,7]. In this case, the max area of water (blue section) the container can contain is 49.

Example 2:

Input: height = [1,1]
Output: 1

Solution

Let's start by solving the problem with brute force so that it's more apparent why we need the more performant solution.

Brute Force

For the brute force approach, we just have to calculate all the possibles area from all the line combinations, and get the maximum value.

function maxArea(height: number[]): number {
  let max: number = 0;

  for (let i = 0; i < height.length; i++) {
    for (let j = i + 1; j < height.length; j++) {
      const w = j - i;
      const h = Math.min(height[i], height[j]);
      max = Math.max(max, w * h);
    }
  }

  return max;
}

The time complexity for the brute force approach is O(n^2).

We can surely do better.

Two Pointers

For this approach, we have two pointers that start off at the edges of the array (the start and the end of the array). We then keep moving the pointers inwards, trying to find the largest area.

function maxArea(height: number[]): number {
  let max: number = 0;
  let l: number = 0;
  let r: number = height.length - 1;

  while (l < r) {
    const w = r - l;
    const h = Math.min(height[l], height[r]);
    max = Math.max(max, w * h);

    if (height[l] < height[r]) {
      l++;
    } else {
      r--;
    }
  }

  return max;
}

If you're not sure why we have to move the shorter line pointer, it's because our calculation is based on it. If we try to move the longer line inwards, there'll be no increase in area. But if we move the shorter line, it might turn into a longer one, so the area will change.

The time complexity for this approach is O(n) as we are only going through the array once.

Wrap Up

That's it for LeetCode's "Container With Most Water" 🎉.

You can also find the code on my Github.

LeetCode: Longest Palindromic Substring With TypeScript

Vincent Taneri — Sat, 22 Oct 2022 01:51:06 GMT

In this post, we are going to look at the solution to the "Longest Palindromic Substring" from LeetCode using TypeScript.

Problem

Given a string s, return the longest palindromic substring in s.

A string is called a palindrome string if the reverse of that string is the same as the original string.

Example 1:

Input: s = "babad"
Output: "bab"
Explanation: "aba" is also a valid answer.

Example 2:

Input: s = "cbbd"
Output: "bb"

Approach

Brute Force

First, let's talk about the brute force method. We can loop through each substring and check if it's a palindrome.

To do that:

Create a variable to hold the longest palindrome string.
Loop through each character in the string.
- For each character, we loop through all the characters next to it to get every possible substring.
  - Inside each substring loop, we check whether it's a palindrome string or not.
  - If it is, we check whether it's longer than our current palindrome and replace it if it is indeed longer.
Return the longest palindrome.

Take the string "babad" for example. Running the string through our algorithm will produce a loop like this, and for each loop we're going to check whether it's a palindrome or not.

b
ba
bab
baba
babad
a
ab
...

To check whether a string is a palindrome, we'll have to loop through each character in the string. Therefore the time complexity is O(n).

The check for each substring is a loop with a nested loop. Therefore the time complexity is O(n2).

If we put everything together, the time complexity is O(n * n2), which is equal to O(n3).

There must be a better way to solve this.

Expand Around Center

The idea around this is that we'll check for palindrome by thinking of each character in the string as a center point and expanding from it.

Take the string "babad" for example.

First we take the first char b as a center point and expand it. We'll get "*ba" (* means empty) which is not a palindrome.
Move to the next char a and expand it. We'll get "bab", that's a palindrome. Try expanding again, and we get "*baba", not a palindrome. So far the longest palindromic substring is "bab".
Continue doing this for the rest of the chars.

But wait, there's also an even palindrome. For the string "cbbd", "bb" is a valid answer. How are we going to check for this? For this one our other pointer have to be a spot ahead of the other pointer. It's hard to describe with words, but it'll be clear when we look at the code.

The point is that we have to handle 2 separate cases, the odd palindrome and the even palindrome.

By solving the problem this way, the time complexity of our algorithm is going to be much better than the brute-force method. The check for each character is O(n) and the expansion from center for each character is also O(n). Therefore our time complexity is O(n2).

Solution

Translating the approach to code:

function expandAroundCenter(s: string, l: number, r: number): number {
  while (l >= 0 && r < s.length && s[l] === s[r]) {
    l--;
    r++;
  }

  return r - l - 1;
}

export function longestPalindrome(s: string): string {
  if (s.length <= 1) return s;

  // Keep track of the answer
  let lIdx = 0;
  let rIdx = 0;

  for (let i = 0; i < s.length; i++) {
    let caseOdd = expandAroundCenter(s, i, i); // ex: "babad"
    let caseEven = expandAroundCenter(s, i, i + 1); // ex: "abbd"
    const len = Math.max(caseOdd, caseEven);
    if (len > rIdx - lIdx) {
      lIdx = i - Math.floor((len - 1) / 2);
      rIdx = i + Math.floor(len / 2);
    }
  }

  return s.slice(lIdx, rIdx + 1);
}

Code Explanation

Let's explain the code in more detail.

First, let's start with the expandAroundCenter() function.

function expandAroundCenter(s: string, l: number, r: number): number {
  while (l >= 0 && r < s.length && s[l] === s[r]) {
    l--;
    r++;
  }

  return r - l - 1;
}

This part is pretty straightforward, the function simply take the l and r pointer we passed in, and keep moving them to the left and right respectively until their value is no longer the same or they go out of the string.

The confusing part is probably the return calculation. It might not be obvious for some why the formula for calculating the length of the palindrome is r - l - 1.

Let's take the string "babad" as an example. When we're on the second loop (i = 1), The function is called like this, expandAroundCenter("babad", 1, 1). Now let's jump into the function and see how it executes.

The first while loop will pass as s[1] === s[1] is true. Our l and r is now 0 and 2 respectively. At this point our instinct is to calculate the length like this r - l + 1 = 2 - 0 + 1 = 3 which is correct.

But our loop was executed again. Our l and r is now -1 and 3 respectively. Then our while loop stop executing because the condition is no longer true. At this point, if we still use this formula r - l + 1, we'll get 3 - (-1) + 1 = 5, which is incorrect. But a point to be noted here is that it give us our length increased by 2.

It make sense why it's +2, right? It's because on the final loop, we still decrement l by 1 and increment r by 1. So to get the correct value, we have to subtract 2 from the answer. r - l + 1 - 2 = r - l - 1.

Next, let's talk about the main function.

export function longestPalindrome(s: string): string {
  if (s.length <= 1) return s;

  // Keep track of the answer
  let lIdx = 0;
  let rIdx = 0;

  for (let i = 0; i < s.length; i++) {
    let caseOdd = expandAroundCenter(s, i, i); // ex: babad
    let caseEven = expandAroundCenter(s, i, i + 1); // ex: abbd
    const len = Math.max(caseOdd, caseEven);
    if (len > rIdx - lIdx) {
      lIdx = i - Math.floor((len - 1) / 2);
      rIdx = i + Math.floor(len / 2);
    }
  }

  return s.slice(lIdx, rIdx + 1);
}

The longest palindrome of a single character string is the string itself. And the longest palindrome of an empty string is just an empty string. Let's handle that first.
Create two variables to track our answer. (Take "babad" as our input. If our answer is "aba", then lIdx = 1, rIdx = 3.)
Loop through each characters in the string.
- Find the length of the longest palindrome using our expandAroundCenter() function.
- Since we don't know what kind of string we are given, we need to handle all case. ("babad" and "cbbd" need to be handled differently.)
- We then find the longest of the two.
- We update our lIdx and rIdx if the length is larger than the current value.
Finally, we return the palindrome substring and don't forget to add 1 to rIdx because slice is exclusive.

If the part where we update our lIdx and rIdx is confusing, we can take a look at an example to make it clear.

Assume that our input string is "babad", and we're now at the second loop (i = 1). At this point the value of len is 3. With 3 as length and i = 1 as a center. We know that lIdx and rIdx have to be 0 and 2 respectively in order to produce the string "bab".

To calculate the left index, we need to subtract i with Math.floor((len - 1) / 2), and to calculate the right index, we need to add i with Math.floor(len / 2). The floor operation is necessary to prevent the division from resulting in floating point number.

Wrap Up

That's it for LeetCode's "Longest Palindromic String" 🎉.

And if you want to make the algorithm even faster, you can research The Manacher's Algorithm for a O(n) solution.

You can also find the code from this post on my Github.

LeetCode: Longest Substring Without Repeating Characters With TypeScript

Vincent Taneri — Fri, 21 Oct 2022 08:18:28 GMT

This is my solution to "Longest Substring Without Repeating Characters" from LeetCode with TypeScript.

Problem

Given a string s, find the length of the longest substring without repeating characters.

Example 1:

Input: s = "abcabcbb"
Output: 3
Explanation: The answer is "abc", with the length of 3.

Example 2:

Input: s = "bbbbb"
Output: 1
Explanation: The answer is "b", with the length of 1.

Example 3:

Input: s = "pwwkew"
Output: 3
Explanation: The answer is "wke", with the length of 3.
Notice that the answer must be a substring, "pwke" is a subsequence and not a substring.

Approach

To solve this problem efficiently. We have to use the sliding window algorithm, otherwise we'll have to deal with nested loops and our runtime complexity will increase exponentially. This algorithm, on the other hand, allows us to solve this problem in O(n) time complexity.

These are the steps that we'll take to solve this problem:

Create a variable to store our result (longest substring without repetition).
Create a hash map to store our char with its index.
Loop through all the characters in the string with 2 hands (i, j).
- Check if the character already exist in the map.
- If it already exist:
  - We slide our left hand (i) to the current index of the char.
  - But we need to compare it with its current value, and only update if the index of the duplicated char is larger than the current value of i (more on this below).
- If it doesn't exist yet:
  - We add the character with its index to the map.
  - We also slide our right hand (j) 1 step to the right.
  - We update our result, which is the maximum of its current value and the range between the left hand and the right hand (j - i + 1).
Return the result variable.

Solution

Translating our approach to code:

export function lengthOfLongestSubstring(s: string): number {
  let res = 0;
  const map = new Map<string, number>();

  for (let i = 0, j = 0; j < s.length; j++) {
    const char = map.get(s[j]);
    if (char) {
      i = Math.max(char, i);
    }
    map.set(s[j], j + 1);
    res = Math.max(res, j - i + 1);
  }

  return res;
}

Bonus

Why do we need to compare the current value of i in line 8 before updating it to the index of the duplicated char? Shouldn't i = char suffice?

The reason I want to talk about this is because I stumbled upon a bug on my first try because I did that. I wrote my code like this.

export function lengthOfLongestSubstring(s: string): number {
  let res = 0;
  const map = new Map<string, number>();

  for (let i = 0, j = 0; j < s.length; j++) {
    const char = map.get(s[j]);
    if (char) {
      i = char;
    }
    map.set(s[j], j + 1);
    res = Math.max(res, j - i + 1);
  }

  return res;
}

If you're like me, you might find the explanation below helpful.

To see the bug produced by this code, let's track how the loop run if the input string is "abba".

Loop 1 add a to map because the char doesn't exist yet. Our i is 0 and our result is 1.
Loop 2 add b to map because the char doesn't exist yet. Our i is 0 and our result is now 2.
Loop 3 found that b already exist in our map. So we assign the index of b which is 1 to i. Our i is now 1, and our result is now 2. (Correct behavior)
Loop 4 found that a already exist in our map. So we move our i to the index of a which is 0. Our i is now back to 0 and our result is now 3. (i shouldn't move back to the left)

Now you get why we need Math.max there. Both our i and j should only move to the right, getting closer and closer to the end of the input string.

Wrap Up

That's it for LeetCode's "Longest Substring Without Repeating Characters" 🎉.

You can also find the code on my Github.

LeetCode: Palindrome Number With TypeScript

Vincent Taneri — Wed, 26 Oct 2022 05:39:32 GMT

In this post, we're going to solve LeetCode's "Palindrome Number" using TypeScript.

Problem

Given an integer x, return true if x is palindrome integer.

For example, 121 is a palindrome while 123 is not.

Example 1:

Input: x = 121
Output: true
Explanation: 121 reads as 121 from left to right and from right to left.

Example 2:

Input: x = -121
Output: false
Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome.

Example 3:

Input: x = 10
Output: false
Explanation: Reads 01 from right to left. Therefore it is not a palindrome.

Constraints:

-2^31 <= x <= 2^31 - 1

Follow up: Could you solve it without converting the integer to a string?

Approach

Our aim is to solve this without converting the integer to a string. If you're already familiar with our solution for LeetCode's Reverse Integer, this problem is going to be a breeze because we solved that problem without converting the integer to a string.

But this time, instead of reversing the whole integer, we only have to reverse half of the digits. We can then compare those half, and see if they are the same (palindrome).

And in the case where there are odd numbers of digits in the integer, we can ignore the middle digit because it will always equal to itself.

Solution

Translating our approach to code:

function isPalindrome(x: number): boolean {
  if (x < 0 || (x % 10 === 0 && x != 0)) return false;

  let reversed: number = 0;

  while (x > reversed) {
    reversed = reversed * 10 + (x % 10);
    x = Math.trunc(x / 10);
  }

  return reversed === x || Math.trunc(reversed / 10) === x;
}

Wrap Up

That's it for LeetCode's "Palindrome Number" 🎉.

You can also find the code on my Github.

LeetCode: Reverse Integer With TypeScript

Vincent Taneri — Mon, 24 Oct 2022 14:06:23 GMT

In this post, we're going to solve LeetCode's "Reverse Integer" using TypeScript.

Problem

Given a signed 32-bit integer x, return x with its digits reversed. If reversing x causes the value to go outside the signed 32-bit integer range [-231, 231 - 1], then return 0.

Assume the environment does not allow you to store 64-bit integers (signed or unsigned).

Example 1:

Input: x = 123
Output: 321

Example 2:

Input: x = -123
Output: -321

Example 3:

Input: x = 120
Output: 21

Constraints:

-231 <= x <= 231 - 1

Approach

We can simply convert the number to string, split it into array of characters, reverse the array, then join them back together. After that we have to multiply the result with -1 if the input is negative.

But the method above is not really efficient as we're doing multiple array's O(n) operation.

We can also solve this problem with simple arithmetic. First, it's important to understand this concept:

You can add a digit to a number by multiplying the number with 10 and adding the digit to the number.
You can remove the last digit of a number by dividing with 10 and removing the fractional value.

Now, this is how we are going to solve it:

First, convert the number to positive because it's easier to work with.
Create a variable to store our result.
Run a loop until input number is equal to 0.
- We append the last digit of the input number to our result variable.
- We remove the last digit from the input number (the input will eventually become 0 this way).
Multiply the result with -1 if the input number is negative.
Check if the result exceed the maximum size of signed 32-bit integer, and return the result.

The time complexity for this approach is O(log(x)). Because the complexity depends on the number of digits in x, and it can roughly be represented with log(x).

Solution

Converting To String

function reverse(x: number): number {
  const reversed = x.toString().split("").reverse().join("");
  const result = parseInt(reversed) * Math.sign(x);

  if (result < Math.pow(-2, 31) || result > Math.pow(2, 31) - 1) return 0;

  return result;
}

Using Arithmetic

function reverse(x: number): number {
  let input = Math.abs(x);
  let result: number = 0;

  while (input != 0) {
    result = result * 10 + (input % 10);
    input = Math.floor(input / 10);
  }

  result *= Math.sign(x);

  if (result < Math.pow(-2, 31) || result > Math.pow(2, 31) - 1) return 0;

  return result;
}

Wrap Up

That's it for LeetCode's "Reverse Integer" 🎉.

You can also find the code on my Github.

LeetCode: String To Integer (atoi) With TypeScript

Vincent Taneri — Tue, 25 Oct 2022 13:55:29 GMT

In this post, we're going to solve LeetCode's "String To Integer (atoi)" using TypeScript.

Problem

Implement the myAtoi(string s) function, which converts a string to a 32-bit signed integer (similar to C/C++'s atoi function).

The algorithm for myAtoi(string s) is as follows:

Read in and ignore any leading whitespace.
Check if the next character (if not already at the end of the string) is '-' or '+'. Read this character in if it is either. This determines if the final result is negative or positive respectively. Assume the result is positive if neither is present.
Read in next the characters until the next non-digit character or the end of the input is reached. The rest of the string is ignored.
Convert these digits into an integer (i.e. "123" -> 123, "0032" -> 32). If no digits were read, then the integer is 0. Change the sign as necessary (from step 2).
If the integer is out of the 32-bit signed integer range [-2^31, 2^31 - 1], then clamp the integer so that it remains in the range. Specifically, integers less than -2^31 should be clamped to -2^31, and integers greater than 2^31 - 1 should be clamped to 2^31 - 1.
Return the integer as the final result.

Note:

Only the space character ' ' is considered a whitespace character.
Do not ignore any characters other than the leading whitespace or the rest of the string after the digits.

Approach

Since the algorithm has been given to us, all we need to do is to implement it.

Solution

function myAtoi(s: string): number {
  const input: string = s.trimStart();
  let result: number = 0;
  let sign: number | undefined;

  if (input[0] === "+") {
    sign = 1;
  } else if (input[0] === "-") {
    sign = -1;
  }

  let i = sign ? 1 : 0;
  for (; i < input.length; i++) {
    const num = parseInt(input[i]);
    if (num >= 0 && num <= 9) {
      result = result * 10 + num;
    } else {
      break;
    }
  }

  result = sign === -1 ? result * -1 : result;

  const MAX_VAL = Math.pow(2, 31) - 1;
  const MIN_VAL = Math.pow(-2, 31);

  if (result > MAX_VAL) {
    result = MAX_VAL;
  } else if (result < MIN_VAL) {
    result = MIN_VAL;
  }

  return result;
}

Code Explanation

Remove leading whitespace from the string.
Create a variable to store the result.
Create a variable to temporary store whether the input is a positive or negative number.
Loop through each characters in the string without forgetting to adjust the starting point according to if the positive or negative sign is available.
1. Add the char to the result variable if it's a number.
2. Otherwise, we break the loop.
Multiply result with -1 if the input was a negative number.
Clamp the result to the 32-bit signed integer range if it exceeds the range.
Return the result.

Wrap Up

That's it for LeetCode's "String To Integer (atoi)" 🎉.

You can also find the code on my Github.

LeetCode: Two Sum With TypeScript

Vincent Taneri — Sat, 08 Oct 2022 13:39:18 GMT

In this post, we're going to look at LeetCode's Two Sum problem and find the most efficient algorithm to solve the problem.

Problem

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.

Example 1:

Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].

Example 2:

Input: nums = [3,2,4], target = 6
Output: [1,2]

Example 3:

Input: nums = [3,3], target = 6
Output: [0,1]

Solution

The answer to Two Sum is really easy to come by. But that obvious answer is a trap, it's not the most efficient solution.

I am talking about the brute force method. Something like this:

function twoSum(nums: number[], target: number): number[] {
  for (let i = 0; i < nums.length; i++) {
    for (let j = 0; j < nums.length; j++) {
      if (nums[i] + nums[j] === target) {
        return [i, j];
      }
    }
  }

  return [];
}

Notice that we're using two loops, that's never a good solution. The time complexity will be O(n2). In other words, as the list grow larger and larger, the algorithm is going to be exponentially slower.

We want to try solving this only by looping through the list once, and we can achieve that with the help of a hash map.

function twoSum(nums: number[], target: number): number[] {
  const map: Map<number, number> = new Map();

  for (let i = 0; i < nums.length; i++) {
    const complement = target - nums[i];

    const complementIndex = map.get(complement);
    if (complementIndex !== undefined) {
      return [complementIndex, i];
    }
    map.set(nums[i], i);
  }

  return [];
}

Now that we're using a hash map, the time complexity is down to O(n) (where n represents the length of the array). In the worst case, each element in the array will be visited once before we get our answer. ß As for space complexity, it's also O(n). In the worst case, the algorithm will have to put each number from the array into the map.

Wrap Up

That's it for Two Sum with TypeScript. 🎉

You can also find the code on my Github.

LeetCode: Zigzag Conversion With TypeScript

Vincent Taneri — Sun, 23 Oct 2022 05:37:15 GMT

In this post, we are going to look at my solution to the "Zigzag Conversion" from LeetCode using TypeScript.

Problem

The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like this: (you may want to display this pattern in a fixed font for better legibility)

P   A   H   N
A P L S I I G
Y   I   R

And then read line by line: "PAHNAPLSIIGYIR"

Write the code that will take a string and make this conversion given a number of rows:

string convert(string s, int numRows);

Example 1:

Input: s = "PAYPALISHIRING", numRows = 3
Output: "PAHNAPLSIIGYIR"

Example 2:

Input: s = "PAYPALISHIRING", numRows = 4
Output: "PINALSIGYAHRPI"
Explanation:
P     I    N
A   L S  I G
Y A   H R
P     I

Example 3:

Input: s = "A", numRows = 1
Output: "A"

Approach

We can forget about all the zigzag stuff and think of the problem as rows of string instead. We simply have to loop through each character and concatenate it to the appropriate string.

For example, the conversion of "PAYPALISHIRING" with 3 rows is

P   A   H   N
A P L S I I G
Y   I   R

The pattern above is the same as (considering that we're going to join them line by line in the end)

"PAHN",
"APLSIIG",
"YIR"

And finally, we can concatenate the strings and get "PAHNAPLSIIGYIR".

The time complexity of this approach is O(n) where n equals the length of the input string.

Solution

Translating our approach to code:

function convert(s: string, numRows: number): string {
  const resArr: string[] = Array(numRows).fill("");
  let cursor: number = 0;
  let isDecreasing: boolean = false;

  for (let i = 0; i < s.length; i++) {
    resArr[cursor] += s[i];

    if (cursor === 0) {
      isDecreasing = false;
    }

    if (cursor === numRows - 1) {
      isDecreasing = true;
    }

    if (isDecreasing) {
      if (cursor != 0) cursor -= 1;
    } else {
      cursor += 1;
    }
  }

  return resArr.join("");
}

Code Explanation

Let me explain the code:

We create an array of empty string the size of the number of rows.
We then create a cursor and a boolean flag to control whether the cursor should be increasing or decreasing.
We loop through each character in the string.
- We concatenate the char with the string that the current cursor is pointing at.
- We adjust the flag if needed.
- We modify the cursor based on the flag.
  - Note that the cursor shouldn't be a negative number, so we have an additional check before decreasing the cursor.
We return all the string inside the array joined together.

Wrap Up

That's it for LeetCode's "Zigzag Conversion" 🎉. The result is also very satisfying.

Runtime: 101 ms, faster than 94.46% of TypeScript online submissions for Zigzag Conversion.
Memory Usage: 46.3 MB, less than 98.99% of TypeScript online submissions for Zigzag Conversion.

You can also find the code on my Github.

Make Image Fade To Transparent With CSS

Vincent Taneri — Fri, 30 Sep 2022 01:15:16 GMT

In this post, we're going to take a look at how to make an image fade to transparent, or what I like to call transparent image gradient with CSS.

Example

This is an example of the effect we're trying to achieve.

Notice how the bottom part of the image is slowly fading into the background, making it much easier to read the text on top of it.

Solution

To achieve this effect, we'll need to use CSS masking, the mask-image property.

Basically, we're creating a mask layer on top of an image to partially or fully hide portions of the image.

Note: As of the time of writing this article (September 2022), most browsers only have partial support for CSS masking. So we need to add the -webkit- prefix in addition to the standard property in most browsers.

Without further ado, here is the CSS that you need to apply to the image:

.transparent-gradient {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

You can also fine-tune the gradient direction by changing the first argument, and also the degree of transparency with the second and third arguments, more specifically, the a part of rgba, which stands for alpha (transparency).

Wrap Up

That's it 🎉. Hope you find it useful.

Optimize React's useState Hook With Lazy Initialization

Vincent Taneri — Mon, 16 Jan 2023 14:18:32 GMT

In this post, we'll look at a way to optimize React's useState hook called lazy initialization.

The Problem

So there's this method to optimize React's performance that I think is less-known (maybe it's just me 🫠) called lazy initialization. It's a way to optimize the React's useState hook.

Let's start by looking at an example.

function NameForm = () => {
  const [name, setName] = useState(
    window.localStorage.getItem('name') ?? ""
  )

  useEffect(() => {
    window.localStorage.setItem('name', name)
  }, [name])

  return (
    <div>
      <form>
        <label htmlFor="name">Name: </label>
        <input value={name} onChange={handleChange} id="name" />
      </form>
      {name}
    </div>
  )
}

Let's see what's going on with the component. On render, we first check if there's already a previously stored value in the local storage and use it as the initial value for the useState hook. We also have a useEffect hook that update the local storage every time the name value is changed. And finally, we render an input and the name value to the screen.

In short, it's just a simple component with input that take in your name and display it on the screen.

In the example above, the useState hook read the value from local storage every time it re-renders. In this case, every time you type with the input box.

As you know, reading from local storage is an IO operation, and it can potentially slow down our application.

Reading from local storage is just one example. The same potential performance issue apply to any expensive function you passed to useState.

The argument you pass to useState is supposed to be the initial value of the state. So, why is it that the function you passed need to re-run on every subsequent re-render? Is this React's bug?

The answer is "No". The culprit here is Javascript itself.

When your component re-renders, your function is parsed and executed again. When Javascript parses your component, it'll run the function you passed as argument, get its value, and passes it to useState again, which is then ignored correctly by React.

As you can see, the problem occurred before you even reach the React land.

So, how do we prevent Javascript from executing our function? Anonymous function to the rescue.

It's just like passing an arrow function that executes your function instead of passing your function directly to event handlers when your function has argument.

<button onClick={() => setValue(3)} />

Instead of

<button onClick={setValue(3)} /> // this will error, because the function executes too early

The same principle comes into play here. In this case though, it's called lazy initialization.

When the Javascript parser see an anonymous function, it won't try to get its value. So your function argument to useState will truly only run once (on initial render, by React).

To fix the example above:

function NameForm = () => {
  const [name, setName] = useState(
    () => window.localStorage.getItem('name') ?? ""
  )

  useEffect(() => {
    window.localStorage.setItem('name', name)
  }, [name])

  return (
    <div>
      <form>
        <label htmlFor="name">Name: </label>
        <input value={name} onChange={handleChange} id="name" />
      </form>
      {name}
    </div>
  )
}

Instead of passing the initial value directly to the useState hook, we passed in an anonymous function that returns the initial value instead.

Now, the useState hook will only get the value from local storage on initial render. Which is really what we want it to do.

Wrap Up

This is a good performance optimization technique to use whenever the initial value for our useState hook is an expensive computation.

Hope you find it useful 👍🏻.

Preserve Case When Working With HTTP Headers in Go

Vincent Taneri — Wed, 27 Dec 2023 14:47:43 GMT

When you're manipulating the HTTP headers with methods like Set(), Add(), etc., in Go, you'll find that they're automatically canonicalized. Canonicalization converts the first letter and any letter following a hyphen to uppercase, and every other letters to lowercase.

For example:

w.Header().Set("my-api-key", "secret-key")

Will be transformed into this:

My-Api-Key: secret-key

This is caused by Go passing your key through CanonicalMimeHeaderKey before calling your methods.

This is fine and all as HTTP headers are case-insensitive. But sometimes, you might find yourself in a situation where you're forced to work with case-sensitive headers.

In that case, you can modify the HTTP headers like this:

w.Header()["my-api-key"] = []string{"secret-key"}

This is possible because the Header's type is actually map[string][]string, meaning it's just a map with key of type string and value of type []string.

Redirect STDOUT and STDERR in Linux Shell

Vincent Taneri — Thu, 28 Dec 2023 15:47:37 GMT

Unix shells use three standard I/O streams, which are represented by numeric file descriptors:

0 - STDIN - The standard input stream
1 - STDOUT - The standard output stream
2 - STDERR - The standard error stream

By default, both output and error streams are printed straight to the terminal. But sometimes, we might prefer to redirect them to files for persistence.

Basic

To redirect the streams to files, we can use the n> operator, where n is the file descriptor (in this case, either 1 or 2).

command 1> file_path
command 2> file_path

The first line redirects STDOUT, while the second line redirects STDERR.

Of course, you can also redirect both STDOUT and STDERR at the same time by combining the operators.

command 1> STDOUT.log 2> STDERR.log

Redirecting `STDOUT` and `STDERR` to the Same File

In the case where you need to redirect both STDOUT and STDERR to the same file, you can use this command.

command > file_path 2>&1

The 2>&1 construct translates to "send the STDERR to the same place you are sending the STDOUT."

Pay attention to the order of redirection above. First, we redirect STDOUT to file_path, then we redirect STDERR to STDOUT.

If we do it in reversed order, like command 2>&1 > file_path, the command won't work as intended. STDERR is redirected to STDOUT which is still the terminal screen, then STDOUT is redirected to file_path.

If you're using Bash, the more concise construct &> which is equal to 2>&1.

command &> file_path

Redirect and Append to File

In the case where you want to append to the end of the file instead of overwriting it, you can use the >> operator instead.

command >> info.log 2>> error.log

Redirect to Another Process

You can also redirect to another process using the pipe (|) operator.

command1 | command2 | command3

In this case, the output from command1 will act as the input for command2, and the output from command2 will also act as the input for command3, and so on.

Redirect to Nowhere

Finally, in the case where you need to redirect to nowhere due to reasons like very huge output, or if you just don't want to see the output, you can redirect to /dev/null.

command > /dev/null
command 2> /dev/null

This works because dev/null is like the black hole of the Linux file system. Anything you throw there will never see the light again.

Setting Up Vitest, Testing Library, And jest-dom In Your Vite Project

Vincent Taneri — Fri, 06 Jan 2023 13:07:13 GMT

This will be a brief tutorial on how to setup Vitest, Testing Library, and jest-dom in your Vite Project.

Setup Vite Project

Before we can setup our testing tools, we first need a Vite project. We can scaffold a Vite project easily by running the command:

npm create vite@latest

Next, you'll be prompted for your project name, your front-end framework of choice, and whether you need Typescript or not.

In this project, let's assume that we choose Svelte as our front-end framework and Typescript as our language of choice.

The steps are more or less the same regardless of what framework you're using.

Install Vitest

The next step is to install Vitest using the command:

npm install --save-dev vitest

We also need to install jsdom to simulate the DOM for our frontend app.

npm install --save-dev jsdom

Next, we need to tell Vitest to change our testing environment to jsdom. Create a file called vitest.config.ts or .js depending on your preferences, and pass the following code in.

import { defineConfig } from "vitest/config";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [svelte({ hot: !process.env.VITEST })],
  test: {
    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
    environment: "jsdom",
  },
});

One thing to note about Vitest is that unlike Jest, globals are not enabled by default. This means that we have to explicitly import describe, test, expect, etc. on our test files like this:

import { describe, test, expect } from "vitest";

But if you prefer, you can enable the test APIs globally like Jest. To enable globals support, we need to add the following line into our vitest.config.ts file.

import { defineConfig } from "vitest/config";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [svelte({ hot: !process.env.VITEST })],
  test: {
    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
    globals: true,
    environment: "jsdom",
  },
});

If you're using Typescript, we need to do one extra step to please the type checker. We need to add vitest/globals to compilerOptions in tsconfig.json.

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "types": ["vitest/globals"]
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

And finally, let's add the following to our package.json file for convenience sake.

{
  "scripts": {
    "test": "vitest run src",
    "test:watch": "vitest src"
  }
}

Now, we can run our tests with npm run test or npm run test:watch to run in watch mode.

Install Testing Library

Installing Vitest is enough to test our app. But Testing Library offers us a lot of utilities that'll make our life easier.

For example, the render method save us the trouble of creating a container, appending it to the body, and cleaning up the container after test, etc.

Testing Library supports multiple framework. And since we're assuming that this is a Svelte project, we'll be using the Svelte Testing Library.

npm install --save-dev @testing-library/svelte

Install jest-dom

jest-dom is a really nice addition on top of Testing Library. It's a custom matcher that's really useful to test the state of the DOM.

Matcher is what you put after expect. For example: expect(getByTestId('input')).toBeDisabled(). toBeDisabled() is one of the useful matchers provided by jest-dom.

Install it by running:

npm install --save-dev @testing-library/jest-dom

Now, we can use the matchers by importing @testing-library/jest-dom at the start of our test files.

import "@testing-library/jest-dom";

We can make our experience even better by extending the matcher with a Vitest setup file. The filename doesn't matter, but let's assume that the file name is ./src/tests/setup.ts. Inside the file, paste in the following code:

import { expect } from "vitest";
import matchers from "@testing-library/jest-dom/matchers";

expect.extend(matchers);

We also need to tell Vitest where to look for our setup file.

import { defineConfig } from "vitest/config";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [svelte({ hot: !process.env.VITEST })],
  test: {
    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/tests/setup.ts",
  },
});

Now, we don't need to manually import @testing-library/jest-dom anymore in our test files.

One final thing before we end this tutorial.

In my case, Typescript couldn't find the type definition for the matchers. So even though all my tests run just fine, I didn't get auto completion for the matcher in my IDE and got a squiggly red line instead.

If you have the same issue, install the type definition for jest-dom.

If you're not using Typescript, or don't experience this issue, you can skip this step.

npm install --save-dev @types/testing-library__jest-dom

And update your tsconfig.json.

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "types": ["vitest/globals", "@testing-library/jest-dom"]
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

With that, everything should now work as expected 😁.

Wrap Up

That's it, we're done with our test setup. Now simply create your tests, and run it using the command:

npm run test

Happy testing!

Solving "An import path cannot end with a .ts extension" When Using Deno With VSCode

Vincent Taneri — Fri, 21 Oct 2022 02:25:04 GMT

When we are working with Deno, we often need to import files with .ts extension. But the built-in TS language server from VSCode is usually unhappy when we do this.

An import path cannot end with a '.ts' extension.

To solve this issue, we need to install the official Deno extension for VSCode. This extension is the language server client for Deno.

After installing the extension, simply open up your command palette (ctrl + shift + p), and type deno: initialize.

This will create a .vscode folder in your workspace with a file called settings.json inside. The file will look something like this:

{
  "deno.enable": true,
  "deno.lint": true
}

The deno.enable option will enable the Deno language server and disable the built-in VSCode JavaScript and TypeScript language services.

The deno.lint option will enable the deno linter. This option is optional.

With that, you should now be able to import a .ts file without any problem.

It's also possible to enable the extension globally if you look for Deno: Enable in your VSCode's user setting. But it's not recommended because enabling the Deno language server will disable the built in TS language server. Except if you're sure you'll only be using Deno from now on 😆.

Spring Boot: Working With Database Using JDBCTemplate

Vincent Taneri — Thu, 01 Sep 2022 01:04:50 GMT

In this tutorial, we'll learn how to connect a Spring Boot application with a relational database using JDBCTemplate. First, some background on why JDBCTemplate is used.

Introduction

In the Java world, the tool that's used to integrate a database with the language is called Java Database Connectivity (JDBC). JDBC allows you to connect to a DBMS to work with databases. However, JDBC is very verbose, you have to write a lengthy block of code just to execute a simple SQL query, which is not very comfortable to use. Here is an example:

String sql = "INSERT INTO student VALUES (?,?)";
try (PreparedStatement st = con.prepareStatement(sql)) {
    st.setString(1, name);
    st.setInt(2, age);
    st.executeUpdate();
} catch (SQLException e) {
   // handle exceptions
}

Spring's JDBCTemplate comes to the rescue. JDBCTemplate reduces the verbosity of plain JDBC considerably, which you will see in the following tutorial.

Creating A CRUD App

In this tutorial, we'll be creating a backend service that exposes 3 endpoints: adding a record to the database, removing a record from the database, and showing all the records in the database.

We'll be working with a PostgreSQL database. Inside, there'll be a table called student with 3 columns.

id -- An auto-incrementing integer.
name -- The name of the student.
age -- The age of the student.

Note: the examples in this tutorial will work with any relational database technology you choose with some minor adjustments. I also assume that you have some basic knowledge of Java, Spring Boot, JDBC, and SQL.

Generate Spring Boot Project

First, let's use Spring Initializr to generate the base for our app. We need to include these dependencies inside the generated pom.xml.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
<dependency>
    <groupId>org.postgresql</groupId>
    <artifactId>postgresql</artifactId>
    <scope>runtime</scope>
</dependency>

The last dependency is the JDBC Driver for your chosen database, which is PostgreSQL in this case. Also, the reason we add <scope>runtime</scope> is because the app only needs the JDBC driver at runtime, it's not needed for compilation.

Configure Database

Next, let's define our table by creating a file in /src/main/resources/ called schema.sql.

CREATE TABLE IF NOT EXISTS student(
    id SERIAL PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    age INTEGER NOT NULL
);

Next, we have to tell Spring how to connect to our application. We can do this by changing the application.properties file located in /src/main/resources/ to look like this:

spring.datasource.url=jdbc:postgresql://localhost:5432/test
spring.datasource.username=root
spring.datasource.password=secret
spring.sql.init.mode=always

Going from the first line: your connection URL, your DB username, your DB password, and the last line is there to instruct Spring Boot to always run your schema.sql file you defined earlier every time your start the app.

Create Model Class

Now that we're done with the basic configuration for the database, let's start working on our app. First, we'll create a model class called Student that models our table structure.

package com.example.model;

public class Student {

    private int id;
    private String name;
    private int age;

    // constructor, getters, and setters
}

Create Repository Class

Next, we define StudentRepository which is a bean in the application context that'll be used by our controller to interact with the database.

package com.example.repository;

@Repository
public class StudentRepository {

}

Since StudentRepository is a bean in the application context, we can inject an instance of JdbcTemplate that we'll use to work with the database.

At this point, you must be wondering where the instance of JdbcTemplate is coming from. This is part of Spring Boot's magic. When Spring Boot detects that you have PostgreSQL as a dependency, it automatically configures a DataSource and a JdbcTemplate instance for you.

Later in the tutorial, I'll show you how to define your own DataSource and JdbcTemplate instances when you need them.

The code block below shows you how to inject the JdbcTemplate.

package com.example.repository;

@Repository
public class StudentRepository {

    private final JdbcTemplate jdbc;

    public StudentRepository(JdbcTemplate jdbc) {
        this.jdbc = jdbc;
    }
}

Now that we have the JdbcTemplate instance, we can start working on our CRUD jobs. All we have to do is to pass the SQL and its parameters to a method called update() of the instance. The method abstracts away all the JDBC steps that we have to do.

First, let's work on the method to insert and delete a record from the table as they're pretty straightforward. We'll call them addStudent() and deleteStudent respectively.

public class StudentRepository {
    // codes omitted

    public void addStudent(Student student) {
        String sql = "INSERT INTO student (name, age) VALUES (?, ?)";

        jdbc.update(sql, student.getName(), student.getAge());
    }

    public void deleteStudent(int id) {
        String sql = "DELETE FROM student WHERE id = ?";

        jdbc.update(sql, id);
    }
}

See how more succinct it is than working directly with JDBC provided by the JDK.

Retrieving data involves more steps, but it's also not that difficult. We'll now work on the method to retrieve all records from the table called findAll().

public class StudentRepository {
    // codes omitted

    public List<Student> findAll() {
        String sql = "SELECT * FROM student";

        RowMapper<Student> studentRowMapper = (r, i) -> {
            int id = r.getInt("id");
            String name = r.getString("name");
            int age = r.getInt("age");

            return new Student(id, name, age);
        };

        return jdbc.query(sql, studentRowMapper);
    }
}

Notice that this time we're using jdbc.query() instead of jdbc.update(). The query() method takes two parameters, the SQL command, and a RowMapper. RowMapper is responsible for transforming a row from the ResultSet into a specific object. In this case, the Student object which our app knows how to work with.

Create Controller Class

Now that we are done with our repository object that's in charge of CRUD, the final step is to expose these methods through endpoints. In other words, it's time to implement the controller.

package com.example.controller;

@RestController
@RequestMapping("/student")
public class StudentController {

    private final StudentRepository studentRepository;

    public StudentController(StudentRepository studentRepository) {
        this.studentRepository = studentRepository;
    }

    @PostMapping
    public void addStudent(@RequestBody Student student) {
        studentRepository.addStudent(student);
    }

    @DeleteMapping
    public void deleteStudent(@RequestBody Student student) {
        studentRepository.deleteStudent(student.getId());
    }

    @GetMapping
    public List<Student> getAllStudent() {
        return studentRepository.findAll();
    }
}

We use constructor dependency injection to get the repository object from the Spring context, then we implement the 3 endpoints to execute the CRUDs method from our StudentRepository.

In case you are wondering why the GET endpoint knows that List<Student> has to be returned to the client in JSON format, the answer is, again, Spring Boot's magic. By adding the @RestController annotation instead of vanilla @Controller, we don't need to explicitly convert POJO to JSON. Spring Boot will handle it for us.

Wrap Up

And that's it. We're done with the app. You can start the app and test the endpoints using your favorite API testing tools like Postman or cURL.

Note: when calling the POST and DELETE endpoints, you have to attach a request body containing a JSON that model the Student object and contains an id respectively.

Here is an example of how the request body should look like when calling the POST endpoint:

{
  "name": "John",
  "age": 17
}

You can ignore the id field because it's managed by the database as per our schema definition earlier.

Here is an example of how the request body should look like when calling the DELETE endpoint:

{
  "id": 1
}

Finally, you can find the source code for this tutorial here.

Bonus: Creating Custom Data Source

Spring automatically configures a DataSource bean for you based on the content of your application.properties file. This is what you need most of the time, but there might come a time when you also have to define your own DataSource bean.

For example:

Your DataSource implementation might depend on some condition at runtime.
You need multiple DataSource instances.
You are using vanilla Spring.

To define DataSource yourself, you have to make a custom configuration class. Inside the class, you define a method annotated with @Bean. The DataSource is simply a bean that you can add to the Spring context just like any other bean. Here is an example:

@Configuration
public class ProjectConfiguration {

    @Bean
    public DataSource dataSource() {
        HikariDataSource dataSource = new HikariDataSource();

        dataSource.setJdbcUrl(dataSourceUrl);
        dataSource.setUsername(dataSourceUsername);
        dataSource.setPassword(dataSourcePassword);
        dataSource.setConnectionTimeout(1000);

        return dataSource;
    }
}

I'm using Hikari Connection Pool because it's the default in Spring, but feel free to use any implementation you prefer.

Test Svelte Component Slot Using svelte-htm

Vincent Taneri — Wed, 01 Mar 2023 16:13:49 GMT

This is a short guide on how to test a Svelte component with slot using the svelte-htm library.

Introduction

At the time of writing this article, there's no way to pass in slot content to Svelte component using svelte-testing-library.

The workaround for this is usually by creating a separate dummy component that put some elements inside the slot and test the dummy component instead.

For example, say that we have a Button.svelte component.

<button>
	<slot />
</button>

To test if the component inside the slot is rendered properly, we have to create a dummy component that use Button.svelte. We'll call this component TestButton.svelte.

<script>
	import Button from ./Button.svelte;
</script>

<Button>
	<div data-testid="slot-component">PLACEHOLDER</div>
</Button>

Finally, we can test the component.

// Other imports
import TestButton from "./TestButton.svelte";

describe("Button", () => {
  it("should render component inside slot properly", () => {
    render(TestButton);
    expect(screen.getByTestId("slot-component")).toBeInTheDocument();
  });
});

That works, but it's certainly not a fun experience, and your project is probably going to be littered by bunches of dummy component.

Solution

The solution to this problem is to use svelte-htm.

svelte-htm allows us to write our Svelte components with JSX-like syntax. It completely eliminates our need of dummy component. We can test our Svelte component just like how we test components from JSX-based framework like React.

Now, let's refactor our test using svelte-htm.

// Other imports
import html from `svelte-htm`;
import Button from './Button.svelte'

describe("Button", () => {
	it("should render component inside slot properly", () => {
		render(html`
			<${Button}>
				<div data-testid="slot-component">PLACEHOLDER</div>
			</${Button}>
		`);
		expect(screen.getByTestId("slot-component")).toBeInTheDocument();
	});
});

That's all we need to do. Felt much more natural, right?

You might think that the syntax is still not as nice as testing JSX component, but it's pretty close, and I would consider this solution a major leap compared to the dummy component solution.

In case you're wondering how the test would look like for JSX component:

// Other imports
import Button from "./Button.tsx";

describe("Button", () => {
  it("should render component inside slot properly", () => {
    render(
      <Button>
        <div data-testid="slot-component">PLACEHOLDER</div>
      </Button>,
    );
    expect(screen.getByTestId("slot-component")).toBeInTheDocument();
  });
});

Testing Named Slot

We can test named slot just like how we test normal slot in the examples above.

Here is an example:

Let's change our Button.svelte component to use named slot.

<button>
	<div>
		<slot name="icon" />
	</div>
	<div>
		<slot name="label" />
	</div>
</button>

Now, to test it:

// Other imports
import html from `svelte-htm`;
import Button from './Button.svelte'

describe("Button", () => {
	it("should render component inside slot properly", () => {
		render(html`
			<${Button}>
				<div slot="icon">ICON</div>
				<div slot="label">Click me!</div>
			</${Button}>
		`);
		// assertions here ...
	});
});

You get the idea :)

Wrap Up

That's it for this post. You should be able to test your Svelte components that have slot now. Happy testing!

Type Guards In TypeScript

Vincent Taneri — Fri, 14 Oct 2022 02:15:52 GMT

Introduction

When working with union types in TypeScript, we will often come into a situation where we need to use type guard to please the TypeScript compiler. The compiler always apply its strong typing rules to ensure type safety.

Take a look at this code:

function add(arg1: string | number, arg2: string | number) {
  return arg1 + arg2;
}

This is a function that accepts two parameters and returns their sum. The arg1 and arg2 parameters are union types. They can hold either a string or a number. Unfortunately, when we try to compile this code, we'll get the following error:

error TS2365: Operator '+' cannot be applied to types 'string | number' and 'string | number'

The compiler is telling us that it cannot tell what type it should use when it attempts to add arg1 to arg2. Is it supposed to add number to a string, a string to a number, a string to a string, or a number to a number?

In JavaScript, "adding a string and a number" and "adding a number and a number" lead to different results. So the TypeScript compiler won't let us compile before we solve this uncertainties.

This is where type guards come in. Type guard performs a check on our type, and then guarantees that type within its scope.

Implementing Type Guard

Let's rewrite our add function to use type guard.

function add(arg1: string | number, arg2: string | number) {
  if (typeof arg1 === "string") {
    // arg1 is guaranteed to be a string in this scope
    return arg1 + arg2;
  }

  if (typeof arg1 === "number" && typeof arg2 === "number") {
    // both arg1 and arg2 are guaranteed to be a number in this scope
    return arg1 + arg2;
  }

  // default: return both as strings
  return arg1.toString() + arg2.toString();
}

The first if statement uses the JavaScript typeof keyword to test arg1's type. If the type is a string, then the compiler knows that within the code block following it, arg1 is definitely a string, and will therefore treat arg1 as a string.

The second if statement is similar. We have two typeof checks to check whether both arg1 and arg2 are of type number. If they are both numbers, then the compiler knows that arg1 and arg2 are definitely of type number within the following code block.

Now, let's test the function!

console.log(`"1" + "2" = ${add("1", "2")}`); // run first if block
console.log(`1 + 2 = ${add(1, 2)}`); // run second if block
console.log(`1 + "2" = ${add(1, "2")}`); // run default

The results:

"1" + "2" = 12
1 + 2 = 3
1 + "2" = 12

Explanation

We can see that the first call to add is using two arguments that are strings. The code identifies the first argument as being of type string and therefore enters the first if statement block. The concatenation of the string "1" with "2" results in the string "12".

The second add uses two numbers as arguments, and our code identifies both arguments as numbers, and as such adds the value 1 and the value 2, resulting in 3.

The third add uses a number as the first argument and a string as the second. The code therefore falls through to the default code, treating both arguments as strings.

Type Unknown in TypeScript

Vincent Taneri — Fri, 21 Oct 2022 15:06:20 GMT

Let's take a look at the unknown type in TypeScript. Type unknown is a very interesting type that only exist in TypeScript. Let's take a look at how it works.

Working With Unknown

I always try to use the unknown type when I need to use any. unknown is like a type-safe version of any.

Let's see how it is type-safe by looking at some examples.

let a: any = "a string";
let b: number = 0;
b = a;

This code will work even though the actual type of a is a string because we defined the type to be any. By doing so, TypeScript assumed that we know what we are doing and leave everything in our hands. Which is not good, because as you can see, we just assigned a string to a number. You can see how dangerous the any type is.

Let's see how we can make the same code much better using the unknown type.

let a: unknown = "a string";
let b: number = 0;
b = a;

This time, the code won't compile. We'll get a complain from TypeScript instead.

Type 'unknown' is not assignable to type 'number'

This highlight the differences between the any type and the unknown type. We need to turn the unknown type into a definite type before we can assign it.

To assign a to b, TypeScript needs to know for sure that a is of type number. The easiest method to achieve that is by casting the a variable into a number.

let a: unknown = "a string";
let b: number = 0;
b = <number>a;

Or by using type assertion.

let a: unknown = "a string";
let b: number = 0;
b = a as number;

By explicitly casting the unknown type like this, the TS compiler will allow us to assign the value. But as you can see, that's still pretty dangerous. The compiler assumed that we know what we are doing, and leave everything to us just like any.

The advantage compared with any is that we need to do explicit casting ourself. This eliminates the chance of accidental assignment.

For example: since I know that a is not a number, I should turn a into a number before we assigning it to b to prevent bugs.

let a: unknown = "a string";
let b: number = 0;
a = 1;
b = <number>a;

An even safer and more recommended way of dealing with unknown is by narrowing its type using type guard just like this.

let a: unknown = "a string";
let b: number = 0;

if (typeof a === "number") {
  b = a;
}

By using a type guard, the TypeScript compiler will know for sure that the variable is of a certain type within the guard block.

Wrap Up

That's it for the unknown type in TypeScript.

We should always try to use the unknown type instead of any. The unknown type forces us to double-check before using the variable. We are letting the compiler know what type the value of a variable should be when we need to use it. That's why unknown is considered a type-safe version of any.

Understanding JavaScript Function As First-class Citizen

Vincent Taneri — Fri, 02 Sep 2022 05:15:27 GMT

Introduction

We often hear the phrase "Function is a first-class citizen in JavaScript", but what exactly does it mean?

It means that JavaScript function possesses all the capabilities of JavaScript object and is thus treated like any other object in the language. And to be specific:

Function can be created with literals

function() {}

Function can be assigned to variables, array entries, and properties of other objects

const exampleFunction = function () {}; // assigns to a variable
exampleArray.push(function () {}); // adds to an array
example.data = function () {}; // assigns as a property of another object

Function can be passed as an argument to another function

function call(exampleFunction {
    exampleFunction();
}
call(function() {})

Function can be returned from another function

function exampleFunction() {
  return function () {};
}

Function can be assigned properties

const exampleFunction = function () {};
exampleFunction.name = "Example";

Wrap Up

Whatever we can do with object in JavaScript, we can also do with function. Function is the same as object, but with an additional, special capability of being invokable. That is, function can be called or invoked in order to perform an action.

Understanding Mapped Types In TypeScript

Vincent Taneri — Sat, 29 Oct 2022 04:53:41 GMT

In this post, we'll look at Mapped Types in TypeScript.

It's recommended that you have a basic understanding of generics first before proceeding.

What Is Mapped Type?

A mapped type is a generic type which uses a union of PropertyKeys (frequently created via keyof) to iterate through keys to create a new type.

Mapped type is easier to explain using examples. Say that we have an interface that look like this:

interface RequireAB {
  a: number;
  b: string;
}

Any object that implements the interface must have the a and b properties.

const obj: RequireAB = {
  a: 1,
  b: "hello",
};

Now, what if we want to make another interface that doesn't require the a and b properties. We can accomplish it this way.

interface NotRequireAB {
  a?: number;
  b?: string;
}

This look awfully familiar with the RequireAB interface above. Can't we just create our NotRequireAB based on RequireAB? Of course we can, using Mapped Type.

interface RequireAB {
  a: number;
  b: string;
}

const obj: RequireAB = {
  a: 1,
  b: "hello",
};

type NotRequireAB<RequireAB> = {
  [K in keyof RequireAB]?: RequireAB[K];
};

const obj2: NotRequireAB<RequireAB> = {};

We created NotRequireAB based on RequireAB. The type will contain a property for each property in RequireAB but with an optional modifier (?) next to it. We're basically just creating this code dynamically:

type NotRequireAB = {
  a?: number;
  b?: string;
};

An advantage of using this method to hard-coding is that we don't need to maintain 2 separate types. In the case where we have to add some more properties to RequireAB, we don't need to do it for NotRequireAB if we created it using mapped type. This will make the code more maintainable.

interface RequireAB {
  a: number;
  b: string;
  c: boolean;
  d: string | number;
}

// We don't need to do any modification here
type NotRequireAB<RequireAB> = {
  [K in keyof RequireAB]?: RequireAB[K];
};

We can make the type even more powerful with generics.

type WeakInterface<T> = {
  [K in keyof T]?: T[K];
};

WeakInterface is a type that take in a type T and make all the properties optional.

We can use WeakInterface whenever we need to use an interface but with all the properties optional.

const optional: WeakInterface<RequireAB> = {};

Note that we still can't define properties that are not available on the original type.

const willError: WeakInterface<RequireAB> = {
  c: "test";
}

The code above will produce the following error:

Type '{ c: string; }' is not assignable to type 'WeakInterface<RequireAB>'.
  Object literal may only specify known properties, and 'c' does not exist in type 'WeakInterface<RequireAB>'.

Adding And Removing Modifiers

We can add or remove modifiers by prefixing them using the + or - operator.

When no operator is specified, TypeScript will assume that it's +. That's why on our WeakInterface above, we don't need to specify + before our ? modifier.

Now let's look at an example where we use the - operator. Say that we want to make our WeakInterface strong again. We can remove all the ? modifier like this:

type StrongInterface<T> = {
  [K in keyof T]-?: T[K];
};

All we have to do is add the - operator before the modifier.

Introducing Some Predefined Mapped Types

Transforming properties with mapped types is a very common operations that TypeScript provides us with some predefined type definitions.

You can check them out on lib.es5.d.ts.

In this section, we'll explore some of these type definitions.

Partial

Partial make all properties of a type optional.

/**
 * Make all properties in T optional
 */
type Partial<T> = {
  [P in keyof T]?: T[P];
};

Our WeakInterface we implemented before is actually a Partial.

Required

Required is the opposite of Partial. It will mark each property as required.

/**
 * Make all properties in T required
 */
type Required<T> = {
  [P in keyof T]-?: T[P];
};

Readonly

We can use Readonly mapped type to mark each property as readonly (immutable), as follows:

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

Readonly is a mapped type that adds a readonly property to each properties of the type, making the type immutable.

We can also create a type that remove the readonly modifier, and make the properties mutable again.

type CreateMutable<T> = {
  -readonly [K in keyof T]: T[K];
};

Now, Let's look at an example of using Readonly.

interface RequireAB {
  a: number;
  b: string;
}

const obj: Readonly<RequireAB> = {
  a: 1,
  b: "hello",
};

obj.a = 2;

The last line will produce an error as expected.

Cannot assign to 'a' because it is a read-only property.

Pick

Pick is used to construct a type based on a subset of properties of another type.

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

Let's look at an example that use Pick.

interface ABC {
  a: number;
  b: string;
  c: boolean;
}

let obj: Pick<ABC, "a" | "b"> = {
  a: 1,
  b: "hello",
};

In obj, we only need to specify the properties a and b. Property c doesn't exist on the type generated by Pick.

Record

Record is used to construct a type on the fly. In a way, it's the opposite of Pick. Record uses a list of properties as a string literal to define what properties the type must have.

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
  [P in K]: T;
};

Let's look at an example that use Record.

let obj: Record<"c" | "d", string> = {
  c: "hello",
  d: "world",
};

The type in our obj is created by passing two generic arguments to the Record type. Record then create a new type with the properties of c and d, both of type string.

Wrap Up

That's it for Mapped Types 🎉. Hope you find it useful.

Understanding Space Complexity Of Algorithm

Vincent Taneri — Mon, 10 Oct 2022 02:34:04 GMT

If you're like me, you'll find space complexity much more tricky to calculate than the time complexity. It always seems to go over your head.

In this post, we'll learn about space complexity by looking at several examples. We'll also learn that there are 2 ways to look at space complexity.

What Is Space Complexity?

Space complexity refers to how much memory required by an algorithm grows with respect to the size of the input given to the algorithm.

For example, if we have a function doSomething(n). Space complexity refers to how much space doSomething(n) will occupy in memory based on the size of n.

Just like time complexity, space complexity is often expressed with the big O notation, such as O(1), O(n), O(n log(n), etc.

Before we dive into the examples, there's another concept that we need to understand, and that is auxiliary space.

Auxiliary space is the extra space used by an algorithm (excluding the input).

When it comes to calculating space complexity as a whole, we need to include both auxiliary space and the space used by the input.

Space complexity = Auxiliary Space + Space taken by input values.

However, sometimes we don't consider this as the actual measure of space complexity. Sometimes we only consider the auxiliary space.

For example, if we want to compare standard sorting algorithms on the based on space, then auxiliary space would be a better criterion than space complexity. Merge Sort uses O(n) auxiliary space, Insertion sort, and Heap Sort use O(1) auxiliary space. The space complexity of all these sorting algorithms is O(n) though.

More about this on example 3 later.

Examples

Let's dive into some examples to finally make sense of space complexity!

Example 1

Let's start by taking a look at this simple algorithm that adds two numbers.

int addTwoNumbers(int n1, int n2) {
  int sum = n1 + n2;
  return sum;
}

Let's try estimating the size that'll be used by the function!

Assuming that an integer take 4 bytes, and the auxiliary space is also 4 bytes.

The auxiliary space here refers too stuff like the function call, the return call, how to do a loop, etc. (Basically the computer instructions).

To the calculation:

space complexity = sizeof n1 + sizeof n2 + sizeof sum + auxiliary space = 16 bytes.

For this kind of algorithm, no matter what the values of n1 and n2 are, the space needed is always the same. Everything inside the algorithm is of a fixed size. This is also called constant space complexity or O(1).

Example 2

Let's take a look at another example!

This is an algorithm to sum all the numbers in an array.

int sumNumbersInArray(int[] arr) {
  int sum = 0;

  for (int i = 0; i < arr.length; i++) {
    sum += arr[i];
  }

  return sum;
}

Unlike the first example, this time the size of arr is dynamic. Let's call it n.

Assuming that the size of an integer is 4 bytes, and the auxiliary space is also 4 bytes. The total space needed is:

space complexity = sizeof arr + sizeof sum + sizeof i + auxiliary space = 4n + 12 bytes

space complexity = O(4n + 12 bytes)

Remember that constants are ignored in Big O Notation.

So the space complexity is O(n), also called linear space complexity.

Example 3

Earlier I mentioned that sometimes we only consider the auxiliary space when calculating space complexity.

This example will make it clear why we do that.

In this example, we'll look at 2 versions of an algorithm to count the factorial of a number. One is iterative, while the other one is recursive.

Let's start with the iterative version:

int factorial(int n) {
  int result = 1;

  for (int i = 1; i <= n; i++) {
    result = result * i
  }

  return result;
}

Assuming that the size of an integer is 4 bytes and the auxiliary space is 4 bytes. The space complexity for this algorithm is:

space complexity = sizeof n + sizeof result + sizeof i + auxiliary space = 16 bytes

Removing the constants, our space complexity is constant (O(1)).

No matter what n we pass to the function, no matter how many times the loop run, the space complexity will be the same (there's just one variable i).

Now, let's look at the recursive version!

int factorial(n) {

  if (n <= 1) {
    return 1;
  }

  return n * factorial(n - 1);
}

This time, we're down to only 1 variable (n). But the auxiliary space needed is not as simple anymore.

Let's look at the call stack assuming n = 5.

As the value of n increases, the number of function call also increase. Each function call has each own auxiliary space. So the auxiliary space will be based on n.

Going back to the algorithm, the space complexity for the algorithm is:

space complexity = sizeof n + (n * auxiliary space)

Remove the constants, and we get:

space complexity = O(n)

In a recursive algorithm like this, auxiliary space is no longer just a constant. It is the focus of the calculation instead.

This is why merge sort's space complexity is O(n) while insertion sort's space complexity is only O(1).

Wrap Up

That's it for space complexity 🎉.

I hope this article give you a better understanding of space complexity, especially when deciding whether or not you have to factor in the auxiliary space into the calculation.

Use Configurations From Tailwind In Vanilla CSS

Vincent Taneri — Tue, 22 Aug 2023 01:55:58 GMT

You might have been in a situation where you're forced or would prefer to write vanilla CSS in a Tailwind project.

In my case, I wanted to write some animation code involving multiple keyframes, and pseudo-elements, and implementing it in Tailwind resulted in a class name that's very long and hard to read, so I reached out to vanilla CSS instead.

That's when I ran into a problem. I also wanted to use colors and spacing from my Tailwind configs. For example, instead of hard coding the red color #dc2626 in my CSS file, I wished I can use Tailwind's bg-red-600. And fortunately, there's a solution.

theme()

To solve this issue, we can use the theme() utility function from Tailwind. There's no need to import or configure anything, just use it directly in your CSS file.

Examples:

button {
  background: theme(colors.red.600);
  color: theme(colors.red.100);
  padding: theme(spacing.4);
}

You can also use it for CSS variable like this:

:root {
  --dark: theme(colors.zinc.900);
  --dark-shade: theme(colors.zinc.600);
  --light: theme(colors.white);
  --light-shade: theme(colors.zinc.400);
}

Tips: If you use Tailwind's Intellisense, you'll also get auto complete inside theme().

How It Works

So how does it work?

On build time, Tailwind will replace all the theme() calls with static value.

Wrap Up

That's it for this post. Hope you find it useful.

One final thing, this trick not only works in Vanilla CSS but also in scoped CSS in frontend frameworks like Vue, Svelte, Astro, etc.

Web Scraping On The Edge Using HTMLRewriter

Vincent Taneri — Sat, 19 Aug 2023 12:44:35 GMT

In this tutorial, we're going to create a web scraper using HTMLRewriter. Specifically, we're going to create a web service that scrape what a user is currently reading on Goodreads served as JSON data.

Technologies

First, a short introduction to the techs we're going to use.

HTMLRewriter

As the name suggest, HTMLRewriter is a super lightweight and fast tool to rewrite HTML created for the edge environment like Cloudflare Workers, Deno, and Bun.

Even if it's main purpose is to rewrite HTML, we can also use it to parse HTML, because it can't rewrite HTML without parsing it first.

It might not be ideal for large scale scraping though (which you'll see in the examples later on), but for our purpose, it's more than enough.

If you're interested with HTMLRewriter, you can read more about the history of its creation on Cloudflare's blog.

Hono

Hono is a small, simple, and ultrafast web framework designed for the edge. We're going to use Hono as our router.

Cloudflare Workers

The app will be deployed as a Cloudflare Worker running on the edge (close to your users).

Note that even though, We're deploying to Cloudflare Worker in this tutorial, the tutorial should also apply for other environments that implement HTMLRewriter like Deno and Bun.

Building The Scraper

Let's begin building our app.

For those that prefer to just read the code, the source code is open sourced on Github.

Setup

Let's begin by scaffholding our project using the Cloudflare Workers template from Hono.

npm create hono@latest my-app

Then select Cloudflare Workers (Arrow key to move, and Space key to select) in the provided options.

Make sure to install the dependencies by running:

npm install

And you should now be able to start the dev server by running:

npm run dev

Now, if you go to the provided link, default to http://127.0.0.1:8787/, you should see the text Hello Hono!.

File structure

The generated file structure is really simple. Other than the standard npm stuff, the one that you might not be familiar with if you've never build a Cloudflare Worker before is wrangler.toml.

The file contains metadata and configurations for the project. For example: your Worker KV, D1, etc.

In this project though, we're not going to need any of that. But you can change the name to the name of your app. Cloudflare will use the name as part of your deployed app's URL, and also as an identifier in Cloudflare's dashboard.

I'm going to name mine: goodreads-currently-reading

name = "goodreads-currently-reading"
compatibility_date = "2023-01-01"

Alright, now that we're done here. Let's explore src/index.ts, where we're going to spend our time in, for the rest of the tutorial.

Routing

Now, if you open the file, you should be greeted with code similar to this:

import { Hono } from "hono";

const app = new Hono();

app.get("/", (c) => c.text("Hello Hono!"));

export default app;

The code should be really familiar if you have experience with backend frameworks like Express.

Our app will only have 1 route, /:id. The id here refers to Goodreads' user id. To create the route, just add the following code after the index route handler:

import { Hono } from "hono";

const app = new Hono();

app.get("/", (c) => c.text("Hello Hono!"));

app.get("/:id", async (c) => {
  const id = c.req.param("id");

  return c.json({ userId: id });
});

export default app;

Verify that your app is working by going to /<anything>.

You should get a JSON response like this.

{
  userId: 123;
}

Fetching

Now that we have the user ID, we need to use it to fetch the "currently-reading" page of the user from Goodreads.

In case you don't know, you can get your Goodreads' user ID by going to your profile page in Goodreads. And it's there in the URL. For example, here is mine:

https://www.goodreads.com/user/show/74091755-tvince

We only need the id number (74091755). So feel free to omit the following username.

Going back to the code, here is how you can fetch the "currently-reading" page:

app.get("/:id", async (c) => {
  const id = c.req.param("id");

  const response = await fetch(`https://www.goodreads.com/review/list/${id}?shelf=currently-reading`);

  return c.json({ userId: id });
});

Tips: You can also fetch other shelves by modifying shelf=currently-reading. For example: shelf=read.

Let's also do a minimal error handling in case the fetch request fails.

app.get("/:id", async (c) => {
  const id = c.req.param("id");

  const response = await fetch(`https://www.goodreads.com/review/list/${id}?shelf=currently-reading`);
  if (!response.ok) throw new HTTPException(response.status, { message: response.statusText });

  return c.json({ userId: id });
});

Scraping

Now, that we're connected with Goodreads. We can start scraping.

To start scraping, we have to pass response to HTMLRewriter to parse and transform. But since we don't need the result of the transformation, we can just ignore it.

app.get("/:id", async (c) => {
  // Fetch Goodreads with userId...

  // Array to store our data
  const res: { title: string; url: string }[] = [];

  await new HTMLRewriter()
    .on("td.field.title a", {
      element(el) {
        const title = el.getAttribute("title");
        const url = el.getAttribute("href");
        if (title && url) {
          res.push({ title, url });
        }
      },
    })
    .transform(response)
    .arrayBuffer(); // drive the parser

  return c.json(res); // return the array as JSON
});

We created an array to store our data, then we pass the response to the HTMLRewriter instance.

The interesting and most important bit here is the .on method. Its first argument is a selector, and its second argument is an instance of ElementHandler.

The ElementHandler looks like this in full:

class ElementHandler {
  element(element) {
    // An incoming element
  }

  comments(comment) {
    // An incoming comment
  }

  text(text) {
    // An incoming piece of text
  }
}

In the case of our app, our selector captured an HTML tree that look like this:

<a title="Pixel Art for Game Developers" href="/book/show/26117789-pixel-art-for-game-developers">
  Pixel Art for Game Developers
</a>

Now, if this tree is passed to ElementHandler:

Then element refers to the <a> tag, while the text refers to the text inside ("Pixel Art for Game Developers"), and comment is undefined in this case, since there's no HTML comment.

Now, back to our app.

Since the data that I needed is conveniently provided in the <a> element, I can just take it using the getAttribute method and push it into the array.

element(el) {
  const title = el.getAttribute("title");
  const url = el.getAttribute("href");
	// Type guard to make Typescript happy
  if (title && url) {
    res.push({ title, url });
  }
},

Now if you run the app, go to /:id, and check the result, you should get the data as intended.

[
  {
    "title": "さくら荘のペットな彼女",
    "url": "/book/show/16088343"
  },
  {
    "title": "Thinking, Fast and Slow",
    "url": "/book/show/11468377-thinking-fast-and-slow"
  }
]

Finalizing

That's it for our app. We achieved our objective. Here is the code in full.

import { Hono } from "hono";
import { HTTPException } from "hono/http-exception";

const BASE_URL = "https://goodreads.com";

const app = new Hono();

app.get("/", (c) => c.text("Hello Hono!"));

app.get("/:id", async (c) => {
  const id = c.req.param("id");

  const response = await fetch(`${BASE_URL}/review/list/${id}?shelf=currently-reading`);
  if (!response.ok) throw new HTTPException(response.status, { message: response.statusText });

  const res: { title: string; url: string }[] = [];

  await new HTMLRewriter()
    .on("td.field.title a", {
      element(el) {
        const title = el.getAttribute("title");
        const url = el.getAttribute("href");
        if (title && url) {
          res.push({ title, url: BASE_URL + url });
        }
      },
    })
    .transform(response)
    .arrayBuffer();

  return c.json(res);
});

export default app;

Notice that I refactored the app a bit because the href attribute of the <a> is relative, but I want it to be an absolute URL. So, I extracted the Goodreads url into a separate variable.

You should also adjust yours to better fit your needs. Maybe you also want to scrape the cover? the rating? You got the idea.

Deploying

Finally, you can deploy your app using the command:

npm run deploy

You might be prompted to sign in if it's your first time using Wrangler. Simply follow the instructions.

Wrangler should start deploying your project, and you should get a live URL to your app. Congrats!

Bonus

I hope that by now you have a pretty a good idea of how to use HTMLRewriter for web scraping. As a bonus content, I want to address some common gotchas when using HTMLRewriter for web scraping.

Text Content Might Come In Chunk

Say that we have an HTML that look like this:

<p>Hello, world!</p>

When you access the text using HTMLRewriter, it might come in chunks like: He, llo, , world, !.

So, always remember to concatenate these chunks when scraping for text data.

You'll see an example in the next section.

Can't Directly Access Nested Element

At the time of writing, The Element object doesn't have any method to directly access nested elements. So, in order to access nested elements, we have to run separate selectors and handlers for them.

For example, say that our HTML look like this:

<a href="/A" title="A">
  <img src="https://link-to-foo.png" />
  <span class="caption">Foo</span>
</a>
<a href="/B" title="B">
  <img src="https://link-to-bar.png" />
  <span class="caption">Bar</span>
</a>

And we want our data to be in this shape:

type Item = {
  title: string | null;
  url: string | null;
  img: string | null;
  caption: string | null;
};

When we're on the a selector, we have no way to access the nested <img /> and <span> inside it. To access them, we need to create separate selectors to handle each case.

Like this:

const item: Item = { title: null, url: null, string: null, caption: null };

await new HTMLRewriter()
  .on("a", {
    element(el) {
      item.title = el.getAttribute("title");
      item.url = el.getAttribute("href");
    },
  })
  // Separate selector for nested element
  .on("a img", {
    element(el) {
      item.img = el.getAttribute("src");
    },
  })
  // Separate selector for nested element
  .on("a .caption", {
    text({ text }) {
      // Handle null because initial value is null
      if (item.caption === null) {
        item.caption = text;
        return;
      }

      // String concatenation because text might come in chunks
      item.caption += text;
    },
  })
  .transform(response)
  .arrayBuffer();

And it can get a little complicated when we need to scrape multiple items.

// Array to store the results
const items: Item[] = [];

await new HTMLRewriter()
  .on("a", {
    element(el) {
      // This selector is the start of a new Item object
      const item: Item = { title: null, url: null, img: null, caption: null };
      item.title = el.getAttribute("title");
      item.url = el.getAttribute("href");
      items.push(item);
    },
  })
  // Separate selector for nested element
  .on("a img", {
    element(el) {
      // Access the latest item added by the parent's handler
      const lastItem = items[items.length - 1];
      lastItem.img = el.getAttribute("src");
    },
  })
  // Separate selector for nested element
  .on("a .caption", {
    text({ text }) {
      const lastItem = items[items.length - 1];

      // Handle null because initial value is null
      if (lastItem.caption === null) {
        lastItem.caption = text;
        return;
      }

      // String concatenation because text might come in chunks
      items[items.length - 1].caption += text;
    },
  })
  .transform(response)
  .arrayBuffer();

Fortunately, as you might have noticed, our handlers are called in order, allowing the code above to work.

Wrap Up

That's it! Hope you find the tutorial useful. And if you need it, the source code for goodreads-currently-reading is on my Github.