MultiTerm

Understanding Closures in JavaScript

Katy Kookaburra — Tue, 01 Jul 2025 00:00:00 GMT

Closures are a fundamental concept in JavaScript that allow functions to access variables from their outer scope. Here's an example:

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log(`Outer Variable: ${outerVariable}`)
    console.log(`Inner Variable: ${innerVariable}`)
  }
}

const newFunction = outerFunction('outside')
newFunction('inside')

Closures are particularly useful for creating private variables and functions. For example:

function Counter() {
  let count = 0
  return {
    increment: () => count++,
    getCount: () => count,
  }
}

const counter = Counter()
counter.increment()
console.log(counter.getCount()) // 1

Closures are a powerful tool in JavaScript, enabling encapsulation and modularity.

TypeScript Generics Explained

Katy Kookaburra — Wed, 02 Jul 2025 00:00:00 GMT

Generics in TypeScript allow you to create reusable and type-safe components. Here's a simple example:

function identity<T>(arg: T): T {
  return arg
}

console.log(identity<string>('Hello'))
console.log(identity<number>(42))

Generics can also be used with classes and interfaces:

class Box<T> {
  private content: T

  constructor(content: T) {
    this.content = content
  }

  getContent(): T {
    return this.content
  }
}

const stringBox = new Box<string>('TypeScript')
console.log(stringBox.getContent())

Generics are a powerful feature that can make your TypeScript code more flexible and maintainable.

Python Decorators Demystified

Katy Kookaburra — Thu, 03 Jul 2025 00:00:00 GMT

Decorators in Python are a powerful way to modify the behavior of functions or methods. Here's a simple example:

def decorator_function(original_function):
    def wrapper_function(*args, **kwargs):
        print(f"Wrapper executed before {original_function.__name__}")
        return original_function(*args, **kwargs)
    return wrapper_function

@decorator_function
def say_hello():
    print("Hello!")

say_hello()

Decorators can also be used with arguments:

def repeat(times):
    def decorator(func):
        def wrapper(*args, **kwargs):
            for _ in range(times):
                func(*args, **kwargs)
        return wrapper
    return decorator

@repeat(3)
def greet():
    print("Hi!")

greet()

Decorators are widely used in Python for logging, access control, and more.

python -c "@decorator_function\ndef say_hello():\n    print(\"Hello!\")\nsay_hello()"

Concurrency in Go

Katy Kookaburra — Fri, 04 Jul 2025 00:00:00 GMT

Go is known for its excellent support for concurrency. The primary tools for concurrency in Go are goroutines and channels. Here's an example:

package main

import (
    "fmt"
    "time"
)

func say(s string) {
    for i := 0; i < 5; i++ {
        time.Sleep(100 * time.Millisecond)
        fmt.Println(s)
    }
}

func main() {
    go say("world")
    say("hello")
}

Channels are used to communicate between goroutines:

package main

import "fmt"

func sum(s []int, c chan int) {
    sum := 0
    for _, v := range s {
        sum += v
    }
    c <- sum // send sum to channel
}

func main() {
    s := []int{7, 2, 8, -9, 4, 0}

    c := make(chan int)
    go sum(s[:len(s)/2], c)
    go sum(s[len(s)/2:], c)
    x, y := <-c, <-c // receive from channel

    fmt.Println(x, y, x+y)
}

Go's concurrency model is simple yet powerful, making it a great choice for concurrent programming.

go run concurrency_example.go

Mastering Async/Await in JavaScript

Katy Kookaburra — Sat, 05 Jul 2025 00:00:00 GMT

Async/await simplifies working with asynchronous code in JavaScript. Here's an example:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

fetchData()

Async/await is built on top of Promises and makes the code more readable and maintainable.

node -e "(async () => { const response = await fetch('https://api.example.com/data'); console.log(await response.json()); })()"

TypeScript Utility Types

Katy Kookaburra — Sun, 06 Jul 2025 00:00:00 GMT

TypeScript provides several utility types to make your code more concise and type-safe. For example:

interface User {
  id: number
  name: string
  email: string
}

// Partial makes all properties optional
const updateUser: Partial<User> = { name: 'New Name' }

// Readonly makes all properties read-only
const readonlyUser: Readonly<User> = { id: 1, name: 'John', email: 'john@example.com' }

// Pick selects specific properties
const userName: Pick<User, 'name'> = { name: 'John' }

// Omit removes specific properties
const userWithoutEmail: Omit<User, 'email'> = { id: 1, name: 'John' }

Utility types are a great way to work with complex types in TypeScript.

echo "Using Partial, Readonly, Pick, and Omit in TypeScript"

Python's List Comprehensions

Katy Kookaburra — Mon, 07 Jul 2025 00:00:00 GMT

List comprehensions provide a concise way to create lists in Python. Here's an example:

# Create a list of squares
squares = [x**2 for x in range(10)]
print(squares)

# Filter even numbers
evens = [x for x in range(10) if x % 2 == 0]
print(evens)

# Nested comprehensions
matrix = [[i * j for j in range(5)] for i in range(5)]
print(matrix)

List comprehensions are a powerful feature for creating and transforming lists in Python.

python -c "print([x**2 for x in range(10)])"

Error Handling in Go

Katy Kookaburra — Tue, 08 Jul 2025 00:00:00 GMT

Go uses a simple and explicit approach to error handling. Here's an example:

package main

import (
    "errors"
    "fmt"
)

func divide(a, b int) (int, error) {
    if b == 0 {
        return 0, errors.New("division by zero")
    }
    return a / b, nil
}

func main() {
    result, err := divide(10, 0)
    if err != nil {
        fmt.Println("Error:", err)
    } else {
        fmt.Println("Result:", result)
    }
}

Error handling in Go is straightforward and encourages developers to handle errors explicitly.

go run error_handling.go

JavaScript's Event Loop Explained

Katy Kookaburra — Wed, 09 Jul 2025 00:00:00 GMT

The event loop is a critical part of JavaScript's runtime, enabling asynchronous programming. Here's a simple example:

console.log('Start')

setTimeout(() => {
  console.log('Timeout')
}, 0)

console.log('End')

Output:

Start
End
Timeout

The event loop ensures that the call stack is empty before executing tasks from the callback queue. This mechanism allows JavaScript to handle asynchronous operations efficiently.

node -e "console.log('Start'); setTimeout(() => { console.log('Timeout'); }, 0); console.log('End');"

Advanced TypeScript: Conditional Types

Katy Kookaburra — Thu, 10 Jul 2025 00:00:00 GMT

echo "Exploring advanced TypeScript features like conditional types"

3 Test

#test

Conditional types in TypeScript allow you to create types based on conditions. Here's an example:

type IsString<T> = T extends string ? true : false

const test1: IsString<string> = true // Valid
const test2: IsString<number> = false // Valid

Conditional types are particularly useful for creating flexible and reusable type definitions.

Python's Generators and Yield

Katy Kookaburra — Fri, 11 Jul 2025 00:00:00 GMT

Generators in Python are a way to create iterators using the yield keyword. Here's an example:

def count_up_to(n):
    count = 1
    while count <= n:
        yield count
        count += 1

for number in count_up_to(5):
    print(number)

Generators are memory-efficient and allow you to work with large datasets without loading them entirely into memory.

python -c "def count_up_to(n):\n    count = 1\n    while count <= n:\n        yield count\n        count += 1\nfor number in count_up_to(5):\n    print(number)"

Go's Interfaces and Polymorphism

Katy Kookaburra — Sat, 12 Jul 2025 00:00:00 GMT

Interfaces in Go provide a way to achieve polymorphism. Here's an example:

package main

import "fmt"

type Shape interface {
    Area() float64
}

type Circle struct {
    Radius float64
}

func (c Circle) Area() float64 {
    return 3.14 * c.Radius * c.Radius
}

type Rectangle struct {
    Width, Height float64
}

func (r Rectangle) Area() float64 {
    return r.Width * r.Height
}

func printArea(s Shape) {
    fmt.Println("Area:", s.Area())
}

func main() {
    c := Circle{Radius: 5}
    r := Rectangle{Width: 4, Height: 6}

    printArea(c)
    printArea(r)
}

Interfaces in Go are a powerful way to write flexible and reusable code.

go run interfaces_example.go

JavaScript's Prototypal Inheritance

Katy Kookaburra — Sun, 13 Jul 2025 00:00:00 GMT

Prototypal inheritance is a feature in JavaScript that allows objects to inherit properties and methods from other objects. Here's an example:

const parent = {
  greet() {
    console.log('Hello from parent!')
  },
}

const child = Object.create(parent)
child.greet() // Hello from parent!

Prototypal inheritance is a flexible way to share behavior between objects without using classes.

node -e "const parent = { greet() { console.log('Hello from parent!'); } }; const child = Object.create(parent); child.greet();"

TypeScript's keyof and Mapped Types

Katy Kookaburra — Mon, 14 Jul 2025 00:00:00 GMT

The keyof operator and mapped types in TypeScript allow for advanced type manipulation. Here's an example:

interface User {
  id: number
  name: string
  email: string
}

type UserKeys = keyof User // 'id' | 'name' | 'email'

type ReadonlyUser = {
  [K in keyof User]: Readonly<User[K]>
}

const user: ReadonlyUser = {
  id: 1,
  name: 'John',
  email: 'john@example.com',
}

// user.id = 2; // Error: Cannot assign to 'id' because it is a read-only property.

These features make TypeScript a powerful tool for creating robust and type-safe applications.

echo "Using keyof and mapped types in TypeScript"

Python's Context Managers and the with Statement

Katy Kookaburra — Tue, 15 Jul 2025 00:00:00 GMT

Context managers in Python are used to manage resources efficiently. Here's an example:

with open('example.txt', 'w') as file:
    file.write('Hello, world!')

You can also create custom context managers using classes or the contextlib module:

from contextlib import contextmanager

@contextmanager
def custom_context():
    print('Entering context')
    yield
    print('Exiting context')

with custom_context():
    print('Inside context')

Context managers ensure that resources are properly cleaned up, making your code more reliable and maintainable.

python -c "with open('example.txt', 'w') as file: file.write('Hello, world!')"

Showing Off Blog Features

Katy Kookaburra — Sun, 20 Jul 2025 00:00:00 GMT

Since the post does not have a description in the frontmatter, the first paragraph is used.

Theming

Use your favorite editor theme for your blog!

Theming for the website comes from builtin Shiki themes found in Expressive Code. You can view them here. A website can have one or more themes, defined in src/site.config.ts. There are three theming modes to choose from:

single: Choose a single theme for the website. Simple.
light-dark-auto: Choose two themes for the website to use for light and dark mode. The header will include a button for toggling between light/dark/auto. For example, you could choose github-dark and github-light with a default of "auto" and the user's experience will match their operating system theme straight away.
select: Choose two or more themes for the website and include a button in the header to change between any of these themes. You could include as many Shiki themes from Expressive Code as you like. Allow users to find their favorite theme!

When the user changes the theme, their preference is stored in localStorage to persist across page navigation.

Code Blocks

Let's look at some code block styles:

def hello_world():
    print("Hello, world!")

hello_world()

def hello_world():
    print("Hello, world!")

hello_world()

python hello.py

Also some inline code: 1 + 2 = 3. Or maybe even (= (+ 1 2) 3).

See the Expressive Code Docs for more information on available features like wrapping text, line highlighting, diffs, etc.

Basic Markdown Elements

List item 1
List item 2

Bold text

Italic text

~~Strikethrough text~~

Link

In life, as in art, some endings are bittersweet. Especially when it comes to love. Sometimes fate throws two lovers together only to rip them apart. Sometimes the hero finally makes the right choice but the timing is all wrong. And, as they say, timing is everything.

- Gossip Girl

Name	Age	City
Alice	30	New York
Bob	25	Los Angeles
Charlie	35	Chicago

Images

Images can include a title string after the URL to render as a <figure> with a <figcaption>.

![Pixel art of a tree](./PixelatedGreenTreeSide.png 'Pixel art renders poorly without proper CSS')

I've also added a special tag for pixel art that adds the correct CSS to render properly. Just add #pixelated to the very end of the alt string.

![Pixel art of a tree #pixelated](./PixelatedGreenTreeSide.png 'But adding #pixelated to the end of the alt string fixes this')

Admonitions

:::note
testing123
:::

:::note testing123 :::

:::tip testing123 :::

:::important testing123 :::

:::caution testing123 :::

:::warning testing123 :::

Character Chats

:::duck
**Did you know?** You can easily create custom character chats for your blog with MultiTerm!
:::

:::duck Did you know? You can easily create custom character chats for your blog with MultiTerm! :::

Adding Your Own

To add your own character, first add an image file to the top-level /public directory in your cloned MultiTerm repo. Astro cannot automatically optimize image assets from markdown plugins, so make sure to compress the image to a web-friendly size (<100kb).

I recommend Google's free Squoosh web app for creating super small webp files. The characters here have been resized to 300 pixels wide and exported to webp with 75% quality using Squoosh.

After you've added your image, update the characters option in site.config.ts with your newly added image file and restart the development server.

Character Conversations

When there are multiple character chats in a row, the order of the chat image and chat bubble reverses to give the chat more of a back-and-forth appearance.

:::owl
This is a cool feature!
:::

:::unicorn
I agree!
:::

:::owl This is a cool feature! :::

:::unicorn I agree! :::

You can specify the alignment (left or right) to override the default left, right, left, ... ordering.

:::unicorn{align="right"}
Over here, to the right!
:::

:::unicorn{align="right"} Over here, to the right! :::

GitHub Cards

GitHub overview cards heavily inspired by Astro Cactus.

::github{repo="stelcodes/multiterm-astro"}

::github{repo="stelcodes/multiterm-astro"}

::github{user="withastro"}

::github{user="withastro"}

Emoji :star_struck:

Emojis can be added in markdown by including a literal emoji character or a GitHub shortcode. You can browse an unofficial database here.

Good morning! :sleeping: :coffee: :pancakes:

Good morning! :sleeping: :coffee: :pancakes:

All emojis (both literal and shortcoded) are made more accessible by wrapping them in a span tag like this:
<span role="img" aria-label="coffee">☕️</span>
At the time of writing, emoji v16 is not supported yet. These emojis can be included literally but they do not have shortcodes and will not be wrapped.

LaTeX/KaTeX Math Support

You can also display inline math via remark-math and rehype-katex.

Make those equations pretty! $ \frac{a}{b} \cdot b = a $

Make those equations pretty! $ \frac{a}{b} \cdot b = a $

Check out the KaTeX docs to learn about the syntax.

$$
a + ar + ar^2 + ar^3 + \dots + ar^{n-1} = \displaystyle\sum_{k=0}^{n - 1}ar^k = a \bigg(\dfrac{1 - r^n}{1 -r}\bigg)
$$

$$ a + ar + ar^2 + ar^3 + \dots + ar^{n-1} = \displaystyle\sum_{k=0}^{n - 1}ar^k = a \bigg(\dfrac{1 - r^n}{1 -r}\bigg) $$

HTML Elements

<button>A Button</button>

Fieldset with Inputs

<fieldset> <input type="text" placeholder="Type something"><br> <input type="number" placeholder="Insert number"><br> <input type="text" value="Input value"><br> <select> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select><br> <textarea placeholder="Insert a comment..."></textarea><br> <label><input type="checkbox"> I understand<br></label> <button type="submi">Submit</button> </fieldset>

Form with Labels

<form> <label> <input type="radio" name="fruit" value="apple"> Apple </label><br>

<label> <input type="radio" name="fruit" value="banana"> Banana </label><br>

<label> <input type="radio" name="fruit" value="orange"> Orange </label><br>

<label> <input type="radio" name="fruit" value="grape"> Grape </label><br>

<label> <input type="checkbox" name="terms" value="agree"> I agree to the terms and conditions </label><br>