DEV Community: mich0w0h

Setting Up a Local DNS Service with Docker on Ubuntu 22.04

mich0w0h — Sun, 24 Mar 2024 22:20:18 +0000

Recently, I've been working on setting up a local DNS service using Docker on Ubuntu 22.04. I've documented my process and thought it might be helpful to share it with others. Here's how I did it.

Note: This article is the final form of these articles

Setting up a CoreDNS Server for Local Custom Domain Management on Ubuntu Using Docker - DEV Community
Setting Up a Recursive DNS Resolver Using Unbound on Docker - DEV Community

Repository

You can find the complete code in my GitHub repository.

Project Structure

I've organized my project into a directory structure as follows:



local-dns
├── compose.yml
├── .git
├── .dockerignore
├── recursive
│   ├── Dockerfile
│   └── unbound.conf
└── authoritative
    ├── Corefile
    └── zone
        └── db.mich0w0h.house

Networking Overview

Here's the networking overview of this project

I assigned an IP address 192.168.10.100 to the host Ubuntu server. If you want to know how to assign a static address to a Ubuntu server, see this post: Configure Static IP in Ubuntu 22.04 - DEV Community

Docker Configuration

I've created a .dockerignore file to exclude unnecessary files from the Docker build context:



**/.git

I've also created a Dockerfile for the resolver service:



FROM ubuntu:22.04

RUN apt-get update && apt-get install -y unbound && rm -rf /var/lib/apt/lists/*

COPY unbound.conf /etc/unbound/unbound.conf

CMD ["/usr/sbin/unbound", "-d", "-c", "/etc/unbound/unbound.conf"]

This Dockerfile uses the Ubuntu 22.04 image, installs Unbound (a DNS resolver), and copies the Unbound configuration file into the container.

The Unbound configuration file (unbound.conf) is as follows:



server:
    interface: 0.0.0.0
    access-control: 0.0.0.0/0 refuse
    access-control: 192.168.1.0/24 allow_snoop
remote-control:
    control-enable: no
stub-zone:
    name: "mich0w0h.house"
    stub-addr: 192.168.1.102
forward-zone:
    name: "."
    forward-addr: 8.8.8.8 # google DNS
    # forward-addr: 192.168.10.1. # ISP provided DNS

Docker Compose

I've used Docker Compose to manage my services. Here's my compose.yml file:



services:
  resolver:
    build: ./resolver
    ports:
      - "53:53/udp"
    networks:
      local-dns:
        ipv4_address: 192.168.1.101
  authoritative:
    image: coredns/coredns
    volumes:
      - "./authoritative:/etc/coredns"
    networks:
      local-dns:
        ipv4_address: 192.168.1.102
    command: -conf /etc/coredns/Corefile
networks:
  local-dns:
    driver: bridge
    ipam:
      config:
        - subnet: 192.168.1.0/24

The service is available from port 53 of the host machine. However, it's necessary to assign IP addresses since unbound.conf only accepts IP addresses to specify the nameserver, and specifying the service name of docker compose doesn't work.

If you've already created a network using the command sudo docker network create --subnet=192.168.1.0/24 local-dns, you can modify the networks section like this:



networks:
  local-dns:
    external: true

Enabling Port Mapping

By default, systemd-resolved is running on port 53 in Ubuntu 22.04. To use port 53 for your Docker container, you'll need to stop and disable systemd-resolved, or change its port. Here's how I did it:



sudo systemctl stop systemd-resolved
sudo systemctl disable systemd-resolved

Next, remove the symlink /etc/resolv.conf and create a new one:



sudo rm /etc/resolv.conf
echo "nameserver 8.8.8.8" | sudo tee /etc/resolv.conf

After this, test your internet connectivity to ensure that disabling systemd-resolved hasn't caused any issues:



$ curl google.com

Running Docker Compose

To start your services, run Docker Compose:



sudo docker compose up -d --build

Testing

Finally, test your setup from another device in your home network:



$ dig @192.168.10.100 www.mich0w0h.house

If everything is set up correctly, you should see a response similar to the following:



; <<>> DiG 9.10.6 <<>> @192.168.10.100 www.mich0w0h.house
; (1 server found)
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 49784
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1232
;; QUESTION SECTION:
;www.mich0w0h.house.        IN  A

;; ANSWER SECTION:
www.mich0w0h.house. 86400   IN  A   192.168.1.103

;; Query time: 49 msec
;; SERVER: 192.168.10.100#53(192.168.10.100)
;; WHEN: Sun Mar 24 05:19:39 JST 2024
;; MSG SIZE  rcvd: 63

That's it! You've now set up a local DNS service with Docker on Ubuntu 22.04.

References

Setting Up a Recursive DNS Resolver Using Unbound on Docker

mich0w0h — Wed, 20 Mar 2024 23:23:10 +0000

In this article, I'll walk through the steps to set up a recursive DNS resolver using Unbound on Docker. This resolver will handle DNS queries for a local domain mich0w0h.house by forwarding them to an authoritative nameserver while forwarding queries for other domains to external DNS servers like Google DNS.

This post is one part of building a local DNS service using docker-compose and the authoritative nameserver for mich0w0wh.house is already built by this article.

Setting up a CoreDNS Server for Local Custom Domain Management on Ubuntu Using Docker - DEV Community

I'll write the other remaining parts later.

Prerequisites

Docker installed and running
A Docker network named internal-dns with subnet 192.168.1.0/24
An authoritative nameserver at 192.168.1.102:53 for the mich0w0h.house domain

Directory Structure

Please ensure that you execute all the following commands within the internal-dns directory.

internal-dns
├── authoritative
│   └── ...
└── resolver
    ├── Dockerfile
    └── unbound.conf

Create a Dockerfile

FROM ubuntu:22.04

RUN apt-get update && apt-get install -y unbound && rm -rf /var/lib/apt/lists/*

COPY unbound.conf /etc/unbound/unbound.conf

CMD ["/usr/sbin/unbound", "-d", "-c", "/etc/unbound/unbound.conf"]

This Dockerfile installs Unbound on an Ubuntu 22.04 base image and copies the unbound.conf configuration file, then setting the default command to run unbound with the -d flag (to run in the foreground) and the -c flag to specify the configuration file.

Create an unbound.conf

server:
    interface: 0.0.0.0
    access-control: 192.168.1.0/24 allow
    remote-control:
        control-enable: no
stub-zone:
    name: "mich0w0h.house"
    stub-addr: 192.168.1.102
forward-zone:
    name: "."
    forward-addr: 8.8.8.8 # google DNS
    # forward-addr: 192.168.10.1. # ISP provided DNS

This configuration file sets up the following:

server section configures the Unbound server to listen on all interfaces (0.0.0.0) on port 53 and allows queries from the 192.168.1.0/24 subnet.
stub-zone section configures a stub zone for the mich0w0h.house domain, forwarding queries to the authoritative nameserver at 192.168.1.102:53.
forward-zone section configures forwarding for all other domains to Google DNS (8.8.8.8). You can also use your ISP's DNS server if preferred.

Building and Running

Build the Docker image:

sudo docker image build -t unbound-resolver resolver/

Run the container for testing the configuration:

sudo docker container run --rm --name resolver-test --network internal-dns --ip 192.168.1.101 unbound-resolver unbound-checkconf

If the output shows unbound-checkconf: no errors in /etc/unbound/unbound.conf, then the configuration is valid.

Stop the resolver-test container and run a Unbound resolver container:

sudo docker container run --rm -d --name resolver --network internal-dns --ip 192.168.1.101 unbound-resolver

Testing

You can test the resolver by querying for a record in the mich0w0h.house domain:

dig @192.168.1.101 www.mich0w0h.house

This should return the IP address configured for www.mich0w0h.house in the authoritative nameserver.

; <<>> DiG 9.18.18-0ubuntu0.22.04.2-Ubuntu <<>> @192.168.1.101 www.mich0w0h.house
; (1 server found)
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 64714
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1232
;; QUESTION SECTION:
;www.mich0w0h.house.        IN  A

;; ANSWER SECTION:
www.mich0w0h.house. 86400   IN  A   192.168.1.103

;; Query time: 0 msec
;; SERVER: 192.168.1.101#53(192.168.1.101) (UDP)
;; WHEN: Thu Mar 21 07:52:43 JST 2024
;; MSG SIZE  rcvd: 63

With this setup, your devices on the 192.168.1.0/24 subnet can use the resolver at 192.168.1.101 to resolve DNS queries. The resolver will handle queries for mich0w0h.house by forwarding them to the authoritative nameserver while forwarding queries for other domains to external DNS servers.

What's Next

next, I'll use docker compose to build the authoritative nameserver container I set up in the previous article and the recursive resolver container I set up in this article.

It is necessary to configure networking in order to access these containers from other devices on the home network. (Yes, indeed currently these containers can only be accessed from the Ubuntu server on the host machine.)

References

Setting up a CoreDNS Server for Local Custom Domain Management on Ubuntu Using Docker

mich0w0h — Tue, 19 Mar 2024 03:16:55 +0000

I recently embarked on a journey to set up a CoreDNS server as an authoritative nameserver on my Ubuntu machine to manage a local custom domain, mich0w0h.house, within my home network. This post is one part of building a local DNS service using docker-compose and I'll write other remaining parts later.

Directory Structure

Before diving in, let's take a quick look at the directory structure:

internal-dns
│
└── authoritative
    │
    ├── Corefile
    └── zone
        └── mich0w0h.house.db

Prerequisites

Make sure Docker is installed and running on your Ubuntu server.

Creating the Corefile

The Corefile is where we define our CoreDNS configuration. Here's what mine looks like:

mich0w0h.house {
    file /etc/coredns/zone/mich0w0h.house.db
    log
}

The first line defines zone for this server (default DNS port is 53).
file /path/to/your/mich0w0h.house.db tells CoreDNS to load the zone file for your domain.
log enables logging ## Creating the Zone File

Now, let's create the zone file mich0w0h.house.db with our DNS records. Here's a snippet of what mine looks like:

$TTL 2d
$ORIGIN mich0w0h.house.

@       IN    SOA      ns1.mich0w0h.house. mail.mich0w0h.house. (
                       2024031801  
                       3600       
                       600        
                       86400      
                       3600       
                       )
; Name server resource record for the domain
          IN     NS      ns1.mich0w0h.house.

; Domain hosts includes NS records defined above
ns1     IN     A       192.168.1.102
www     IN     A       192.168.1.103

Creating a Docker network

Create a Docker network to enable the container to be accessed by a static IP address.

sudo docker network create --subnet=192.168.1.0/24 internal-dns

Running the CoreDNS Container

Now, let's fire up the CoreDNS container (run this command in internal-dns directory):

sudo docker container run --rm -d --name authoritative -v $(pwd)/authoritative:/etc/coredns --network internal-dns --ip 192.168.1.102 coredns/coredns -conf /etc/coredns/Corefile

command explanations

--rm: remove container when it stops
-d: Runs the container in detached mode (background).
--name authoritative: Assigns a name to the container for easier management.
-v $(pwd)/authoritative:/etc/coredns: Mounts the directory containing your Corefile into the /etc/coredns directory inside the container. This allows CoreDNS to access your configuration files.
-network internal-dns: Specifies the Docker network created at the preliminary step.
--ip 192.168.1.102: Set a static IP address for this container. This should be inside of the subnet of specified Docker network
coredns/coredns: Specifies the Docker image to use.
-conf /etc/coredns/Corefile: let CoreDNS read /etc/coredns/Corefile

Testing with Dig

Finally, let's test our setup using dig on the host ubuntu server:

dig +nocookie @192.168.1.102 ns1.mich0w0h.house

Now I can see these outputs and it shows the configurations work correctly.

; <<>> DiG 9.18.18-0ubuntu0.22.04.2-Ubuntu <<>> +nocookie @192.168.1.102 ns1.mich0w0h.house
; (1 server found)
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 58701
;; flags: qr aa rd; QUERY: 1, ANSWER: 1, AUTHORITY: 1, ADDITIONAL: 1
;; WARNING: recursion requested but not available

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1232
;; QUESTION SECTION:
;ns1.mich0w0h.house.        IN  A

;; ANSWER SECTION:
ns1.mich0w0h.house. 172800  IN  A   192.168.1.102

;; AUTHORITY SECTION:
mich0w0h.house.     172800  IN  NS  ns1.mich0w0h.house.

;; Query time: 3 msec
;; SERVER: 192.168.1.102#53(192.168.1.102) (UDP)
;; WHEN: Tue Mar 19 10:08:10 JST 2024
;; MSG SIZE  rcvd: 127

What's next

I'll try to create a recursive resolver container and then build a local internal DNS service using docker-compose.

References

Configure SSH Key-Based Authentication for Ubuntu 22.04

mich0w0h — Thu, 14 Mar 2024 02:23:10 +0000

In this article, I'll share my experience setting up secure SSH access to my Ubuntu server using public key cryptography. This method eliminates the need to type passwords every time, making connections faster and more secure. Let's dive in!

Prerequisites

Local machine with a terminal window (e.g., Bash, PowerShell)
Ubuntu server on the same local network

Generating the Keys

Open a terminal window on your local machine.
Generate a key pair using the following command, replacing your_email@example.com with your actual email address:

   ssh-keygen -t ed25519 -C "your_email@example.com"

Press Enter to accept the default location (usually ~/.ssh) for saving the key pair. If prompted, enter a strong passphrase for added security (highly recommended). The private key will be named id_ed25519 (or id_rsa for older SSH versions), and the public key will be named id_ed25519.pub (or id_rsa.pub).

Copying the Public Key (with ssh-copy-id)

Enable SSH password authentication on the server temporarily (you can disable it later).
Copy the public key to the server using ssh-copy-id:

   ssh-copy-id -i ~/.ssh/id_ed25519.pub username@192.168.10.100

Replace username with your server's username and 192.168.10.100 with your server's IP address. Enter the server's password when prompted.

Connecting with SSH Keys

From your local machine, try connecting to the server using SSH:

   ssh -i ~/.ssh/id_ed25519 username@192.168.10.100

If you set a passphrase, you'll be prompted to enter it now.

Disabling Password Authentication (Optional)

On the server, edit the sshd_config file using a text editor (e.g., nano):

   sudo nano /etc/ssh/sshd_config

Locate the line that reads #PasswordAuthentication yes.
Uncomment the line by removing the # symbol at the beginning and set PasswordAuthentication no
Search for any included configuration files (e.g., sshd_config.d/*) that might override PasswordAuthentication settings. Edit them if necessary to set PasswordAuthentication no. (in my case PasswordAuthentication yes was set by default in /etc/sshd_config.d/ and it overwrote the configuration of ssh_config
Save the changes and restart the SSH service:

   sudo systemctl restart ssh

Host-Specific Configuration (Optional):

On your local machine, create a new file named config (if it doesn't exist) inside the ~/.ssh directory using a text editor.
Add the following lines to the config file, replacing 192.168.10.100 with your actual server's address, username with your server's username, and id_ed25519 with the actual filename of your private key (if different):

   Host 192.168.10.100
       User username
       IdentityFile ~/.ssh/id_ed25519

Now, whenever you use ssh username@192.168.10.100, OpenSSH will automatically use the appropriate key for a streamlined connection.

Connecting with Ease:

Finally, test your connection! Simply run the following command from your local machine:

ssh username@192.168.10.100

You should be logged in to your server without needing to enter a password!

References

Configure Static IP in Ubuntu 22.04

mich0w0h — Wed, 13 Mar 2024 18:53:50 +0000

Configuring Ubuntu 22.04 to Use a Static IP Address

In this article, I'll go through the steps to configure a static IP address on Ubuntu 22.04 while using a WiFi connection.

Note that my Ubuntu Server used a DHCP-assigned IPv4 address on a WiFi connection before working on this setup.

Prerequisites

Before proceeding, you need to gather some information:

Check the IP address of the default gateway:

ip route show default

This command will show the default route and the corresponding gateway IP address.

Check the subnet mask:

ip addr show

This command will display the IP addresses and subnet masks for all interfaces.

Note the gateway address and desired static IP address to assign In my case, the gateway address is 192.168.10.1, and I decided to assign the static IP address 192.168.10.100/24.

Configuring the Static IP Address

Open the network configuration file with a text editor. For example, using nano:

sudo nano /etc/netplan/<target-configuration-file>.yaml

In my case, I'm using a WiFi connection, so I'll choose the WiFi-specific configuration file.

Modify the configuration file by adding the following lines under the wifis section for your WiFi interface (e.g., wlan0):

wifis:
  wlan0:
    dhcp4: no
    addresses: [192.168.10.100/24]
    routes:
      - to: default
        via: 192.168.10.1
    nameservers:
      addresses: [192.168.10.1, 8.8.8.8, 8.8.4.4]

addresses and default routes will be the ones you've noted above.

Verify the new network configuration:

sudo netplan try

This command will check the syntax of the configuration file and show you the changes that will be made. You might see a warning about ovsdb-server.service not running, but you can ignore it for now.

If the verification is successful, apply the new network configuration:

sudo netplan apply

Verify that the static IP address has been assigned correctly:

ip addr show

You should see your new static IP address listed under the WiFi interface (wlan0).

Verify the connection by pinging the static IP address from another device on the same home network:

ping 192.168.10.100

And yes! It worked!

PING 192.168.10.100 (192.168.10.100): 56 data bytes
  64 bytes from 192.168.10.100: icmp_seq=0 ttl=64 time=54.810 ms
  64 bytes from 192.168.10.100: icmp_seq=1 ttl=64 time=68.789 ms
  64 bytes from 192.168.10.100: icmp_seq=2 ttl=64 time=85.646 ms
  64 bytes from 192.168.10.100: icmp_seq=3 ttl=64 time=106.507 ms

That's it! You've successfully configured Ubuntu 22.04 to use a static IP address on your WiFi connection.

References

Troubleshooting: Deno Extension Activation in VSCode with Monorepo Environments

mich0w0h — Mon, 05 Feb 2024 22:07:40 +0000

Troubleshooting Deno Extension Activation in VSCode

I faced an issue when enabling the Deno extension in VSCode and I decided to take notes for future reference.

Enabling Deno Extension

To enable the Deno extension in VSCode, you need to place .vscode/settings.json in the workspace root.

The contents of settings.json are as follows:

{
  "deno.enable": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno"
}

Issue in Monorepo Environment

In a monorepo environment, placing the project-root directory in the workspace root will not work as expected.

project-root/
    -- backend/
        -- .vscode/
            -- settings.json
    -- frontend/

Conversely, placing settings.json in a subdirectory of project-root will activate the Deno formatter in the frontend directory as well:

project-root/
    -- .vscode/
        -- settings.json
    -- backend/
    -- frontend/

However, adding .vscode/setting.json to overwrite settings didn't work, still causing activation in the frontend directory.

project-root/
    -- .vscode/
        -- settings.json
    -- backend/
    -- frontend/
        -- .vscode/
            -- settings.json

{
  "deno.enable": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Solution 1: Configure `deno.enablePaths` in `settings.json` in the project root

This solution seems to be more appropriate since it's mentioned in the official article

The directory structure is;

project-root/
    -- .vscode/
        -- settings.json
    -- backend/
    -- frontend/

And the contents of setting.json is here;

{
  "deno.enable": true,
  "deno.enablePaths": [
    "./backend"
  ],
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno"
}

This enables Deno extension only in the backend directory.

Solution 2: Open VSCode workspace with the backend directory as the root

Only "Solution 1" is enough for this troubleshooting but I want to leave a trail of things I've tried. That's why I'll write down this solution 2 so you probably don't have to look through this one.

By placing settings.json in a subdirectory of the backend directory and opening the VSCode workspace with the backend directory as the root, it will work properly:

// move to the backend directory from project root
$ cd backend

// open the VScode workspace
$ code .

The directory structure would be like this.

-- backend/
    -- .vscode/
        -- settings.json

The frontend directory needs to be developed separately in VSCode as a separate workspace.

Problem Encountered with CORS in Deno Server

mich0w0h — Sun, 04 Feb 2024 23:28:10 +0000

Problem Encountered with CORS in Deno Server

Recently, I encountered an issue while developing a server using Deno. My objective was to enable CORS (Cross-Origin Resource Sharing) requests utilizing the oakCors middleware. Despite setting it up as per the documentation, CORS handling did not function as expected.

The Scenario

I employed Deno's Oak framework to create the server and handle incoming requests from the frontend. Below is a snippet of the code used (some parts are modified for brevity and clarity):

import { Application, Router } from "https://deno.land/x/oak/mod.ts";
import { oakCors } from "https://deno.land/x/cors/mod.ts";

const router = new Router();
router.post("/", async (context) => {
    const body = await context.request.body();
    console.log(body.text());
});

const app = new Application();
app.use(router.routes());
app.use(router.allowedMethods());

// Enabling CORS for port 5173 on localhost using oakCors
app.use(
  oakCors({
    origin: "http://localhost:5173",
    optionsSuccessStatus: 200,
    methods: "POST, OPTIONS",
  }),
);

await app.listen({ port: 8000 });

Despite configuring the server to accept CORS requests from http://localhost:5173, requests to the server were being rejected due to CORS errors.

Analysis

It appears that the 'oakCors' middleware is not working correctly, and the CORS headers are not being added, as indicated by the error message I received:

Access to fetch at 'http://localhost:8000/api/generate' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Solution

After some trial and error, I discovered that moving the configuration of oakCors before defining the routes resolved the issue.

import { Application, Router } from "https://deno.land/x/oak/mod.ts";
import { oakCors } from "https://deno.land/x/cors/mod.ts";

const app = new Application();

// Enabling CORS for port 5173 on localhost using oakCors
// make sure to initialize oakCors before the routers
app.use(
  oakCors({
    origin: "http://localhost:5173",
    optionsSuccessStatus: 200,
    methods: "POST, OPTIONS",
  }),
);

const router = new Router();
router.post("/", async (context) => {
    const body = await context.request.body();
    console.log(body.text());
});


app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({ port: 8000 });

I learned that I should configure middleware before the routes' are defined.

Remaining Challenge

According to the chapter "Enable CORS for a Single Route" of the official docs, these codes would work but didn't.

const corsOptions: oakCors.Options = {
  origin: "http://localhost:5173",
  optionsSuccessStatus: 200,
};

router.post("/", oakCors(corsOptions), (context) => {
    const body = await context.request.body;
    console.log(body.text());
});

Although this issue remains unresolved at present, it does not impede the functionality of the server as I have implemented a workaround that meets my current requirements.

React: How to tackle useEffect called twice

mich0w0h — Tue, 09 Jan 2024 07:03:46 +0000

This is a continuation of this post: React: Blink Character's Eyes - DEV Community

What's the issue

In my React web app, it seemed that the useEffect called twice although I wanted to call a function inside it.

Here's the code.

useEffect(() => {
    blinkWithTimer(3000);
}, []);

const blinkWithTimer = async (timer: number): Promise<void> => {
    const interval = 1500;
    await blinkEyes(1); // One blink
    await delay(interval); // Delay after one blink
    await blinkEyes(2); // Two blinks
    await delay(interval); // Delay after two blinks
    await blinkEyes(1); // One final blink
    setTimeout(() => {
        blinkWithTimer(timer);
    }, timer);
}

What's happening there

It turned out that React 18 runs useEffect twice when it renders the component in the development environment even if the dependency array is empty.

Reference:
How to stop useEffect run twice since React 18

How to tackle this

Regarding my codes, I want to run the blinkWithInterval() only once after the page is loaded.

So this time around, I used useRef valuable and simply checked whether it's already run or not.

const hasMounted = useRef<boolean>(false);
useEffect(() => {
    if(!hasMounted.current) {
        hasMounted.current = true;
        console.log("initialize");
        blinkWithTimer(3000);
    }

    return () => {
        // called when the component is unmounted
    };
}, []);

I read through You Might Not Need an Effect – React but I had no idea how to implement the alternative to above codes without useEffect.

As a result, my requirement of calling blinkWithTimer() only once has been accomplished so I ended this issue here for this time.

React: Blink Character's Eyes

mich0w0h — Mon, 08 Jan 2024 04:46:20 +0000

This is a continuation of this post: Web Animation: Twitch ears twice in a row - DEV Community

What I want to achieve

blink the character's eyes in a web app made of React + Typescript
make it flexible to change the number of blink times

Blink once

Firstly, implement the simplest blink motion, blinking once.

Write a state boolean valuable which manages the blinking.

const [blinking, setBlinking] = useState(false);

And the eyes' elements are here;

<div className="character-eyes">
<img
    src={blinking ? "/src/assets/character-eye-blink.png" : "/src/assets/character-eye-default.png"}
    alt="Character Left eye"
    className={blinking ? "character-eye-blink" : "character-eye-default"} 
/>
<img
    src={blinking ? "/src/assets/character-eye-blink.png" : "/src/assets/character-eye-default.png"}
    alt="Character Right eye"
    className={blinking ? "character-eye-blink" : "character-eye-default"} 
/>
</div>

Now just toggling the blinking value allows the character's eyes to blink.

const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

const blinkEyes = async (): Promise<void> => {
    const duration: number = 130;

    setBlinking(true);
    await delay(duration);
    setBlinking(false);
}

Blink several times

It's easy to increase the number of blink times

const blinkEyes = async (blinkCount: number): Promise<void> => {
    const duration: number = 130;
    for (let i = 0; i < blinkCount; i++) {
        setBlinking(true);
        await delay(duration);
        setBlinking(false);
        await delay(duration);
    }
}

And by the blinkEyes() function, I can make more complex blinking motions like "blink → delay → blink two times → delay → blink".

const interval = 1500;
await blinkEyes(1); // One blink
await delay(interval); // Delay after one blink
await blinkEyes(2); // Two blinks
await delay(interval); // Delay after two blinks
await blinkEyes(1); // One final blink

Blink several times endlessly

At this point, create an async function that endlessly triggers the series of blinks at certain intervals.

Additionally, declare the timeoutId to use the clearance of the timeout process.

let timeoutId: number; // for clearTimeout
const blinkWithTimer = async (timer: number): Promise<void> => {
    const interval = 1500;
    await blinkEyes(1); // One blink
    await delay(interval); // Delay after one blink
    await blinkEyes(2); // Two blinks
    await delay(interval); // Delay after two blinks
    await blinkEyes(1); // One final blink
    timeoutId = setTimeout(() => {
        blinkWithTimer(timer);
    }, timer);
}

Then write it in the useEffect to call when the component is mounted. And call clearTimeout() with the argument timeoutId declared above to clear the timeout process when the component is unmounted.

useEffect(() => {
    blinkWithTimer(3000);

    return () => {
        clearTimeout(timeoutId); 
    };
}, []);

For a bit of a twist, I use setTimeout() to make it flexible to change the duration and the frequency of blinks rather than using setInterval() like this;

useEffect(() => {
    const blinkInterval = setInterval(() => {
        blinkEyes();
    }, 2500);

    return () => clearInterval(blinkInterval);
}, []);

In the codes above, I should adjust the second argument value of setInterval() every time I change the duration and frequency of blinking, otherwise blinkEyes() can be called even when the previous blinking hasn't ended yet.

Here you go!

Notes: the ear motions are caused by another component. For more information, check this post; Web Animation: Twitch ears twice in a row - DEV Community

What's next

There seems to be an issue that the useEffect was called without clearing the timeout process after I edited the codes running the vite server and it automatically refreshed the page.

Linux search: find a word next to a specific phrase

mich0w0h — Fri, 05 Jan 2024 07:46:23 +0000

What I want to achieve

Search a word next to a specific phrase in a file with the Linux shell command

How to tackle

Use the grep command and the awk command.

$ grep -w "search_word" file_name | awk '{print $2}'

Explanations

by the -w option grep matches only whole words, preventing partial matches
{print $2} with awk prints the second word on each line

Linux find: remove error lines from outputs

mich0w0h — Thu, 04 Jan 2024 22:03:33 +0000

What I want to achieve

find a specific file which I have read permission for
ignore error lines of "Permission denied"

What didn't work

Firstly I tried this command to remove the "Permission denied" lines.

$ find /path/ -readable | grep -v "denied"

However, it didn't work.

That's because the error messages are on a separate stream from the grep targets.

The "Permission denied" messages are printed to the standard error stream (stderr), while the grep command only filters the standard output stream (stdout).

How to tackle

Redirect both output streams using 2>&1 which redirects stderr(file descriptor 2) to stdout(file descriptor 1).

$ find /path/ -readable 2>&1 | grep -v "denied"

suppress stderr putting away into /dev/null/, a special file that discards any data written to it, effectively silencing stderr.

$ find /path/ -readable 2>/dev/null

Web Animation: Twitch ears twice in a row

mich0w0h — Thu, 04 Jan 2024 00:45:01 +0000

This post is a continuation of Web Animation: Create endless twitching ear motion with a certain interval

What I want to achieve

twitch a character's ears twice in a row in a web app project made of React + Typescript
twitching motion itself has already been done in the previous article

How to implement

Create a Promise to implement a delay.

const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

Then, update the twitchEars function into async one and insert delays between twitches in that function.

const twitchEars = async () => {
    setTwitching(true);

    await delay(twitchDuration);
    setTwitching(false);

    await delay(200); // Delay between the twitches

    setTwitching(true);
    await delay(twitchDuration);

    setTwitching(false);
};

For a bit of a twist, I used async and await instead of just implementing it by the sequence of several setTimeouts.

Now I did it!

Overall view of the component

The overall view of the component so far is here.

CharacterDisplay.tsx

import { useState, useEffect } from 'react';
import './CharacterDisplay.css';

const CharacterDisplay: React.FC = () => {
    const [twitching, setTwitching] = useState(false);
    const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
    const twitchDuration: number = 150;

    useEffect(() => {
        const twitchInterval = setInterval(() => {
            twitchEars();
        }, 2000);    // Interval between twitches

        return () => clearInterval(twitchInterval);
    }, []);


    const twitchEars = async () => {
        setTwitching(true);

        await delay(twitchDuration);
        setTwitching(false);

        await delay(200); // Delay between the twitches

        setTwitching(true);
        await delay(twitchDuration);

        setTwitching(false);
    };

    return (
        <div className="character">
             <img src="/src/assets/character-body.png" alt="Character body" className="character-body" />
            <img
                src="/src/assets/character-left-ear.png"
                alt="Left ear"
                className={`ear left ${twitching ? 'twitch-left' : ''}`}
                onClick={twitchEars}
            />
            <img
                src="/src/assets/character-right-ear.png"
                alt="Right ear"
                className={`ear right ${twitching ? 'twitch-right' : ''}`}
                onClick={twitchEars}
            />
        </div>
    );
};

export default CharacterDisplay;

CharacterDisplay.css

.character {
    position: relative;
    width: 224px; 
    height: 246px; 
}

.character-body {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ear {
    position: absolute;
    top: 2px;
    width: 40px;
    height: 40px;
    transition: transform 0.2s ease;
}

.left {    
    left: 40px;
}

.right {
    right: 43px;
}

.twitch-left {
    transform: rotate(-10deg);
}

.twitch-right {
    transform: rotate(10deg);
}

DEV Community: mich0w0h

Setting Up a Local DNS Service with Docker on Ubuntu 22.04

Repository

Project Structure

Networking Overview

Docker Configuration

Docker Compose

Enabling Port Mapping

Running Docker Compose

Testing

References

Setting Up a Recursive DNS Resolver Using Unbound on Docker

Prerequisites

Directory Structure

Create a Dockerfile

Create an unbound.conf

Building and Running

Testing

What's Next

References

Setting up a CoreDNS Server for Local Custom Domain Management on Ubuntu Using Docker

Directory Structure

Prerequisites

Creating the Corefile

Creating a Docker network

Running the CoreDNS Container

Testing with Dig

What's next

References

Configure SSH Key-Based Authentication for Ubuntu 22.04

Prerequisites

Generating the Keys

Copying the Public Key (with ssh-copy-id)

Connecting with SSH Keys

Disabling Password Authentication (Optional)

Configure Static IP in Ubuntu 22.04

Configuring Ubuntu 22.04 to Use a Static IP Address

Prerequisites

Configuring the Static IP Address

References

Troubleshooting: Deno Extension Activation in VSCode with Monorepo Environments

Troubleshooting Deno Extension Activation in VSCode

Enabling Deno Extension

Issue in Monorepo Environment

Solution 1: Configure deno.enablePaths in settings.json in the project root

Solution 2: Open VSCode workspace with the backend directory as the root

Problem Encountered with CORS in Deno Server

Problem Encountered with CORS in Deno Server

The Scenario

Analysis

Solution

Remaining Challenge

React: How to tackle useEffect called twice

What's the issue

What's happening there

How to tackle this

React: Blink Character's Eyes

What I want to achieve

Blink once

Blink several times

Blink several times endlessly

Here you go!

What's next

Linux search: find a word next to a specific phrase

What I want to achieve

How to tackle

Linux find: remove error lines from outputs

What I want to achieve

What didn't work

How to tackle

Web Animation: Twitch ears twice in a row

What I want to achieve

How to implement

Now I did it!

Overall view of the component

Solution 1: Configure `deno.enablePaths` in `settings.json` in the project root