1. Domain with Cloudflare

2. Empty GitHub repository

3. Node.js

The Essence

Step 1: DNS record

Create an A, AAAA, or CNAME record with a placeholder value. The value here doesn’t really matter, as Cloudflare will internally determine which Worker will process these requests using the Worker Routes configuration.

However, what is important is making sure the record is “Proxied”; otherwise, the Worker Routes configuration won’t work.

Note: To know more about the Cloudflare DNS Proxy.

Step 2: Wrangler

“Wrangler, the Cloudflare Developer Platform command-line interface (CLI), allows you to manage Worker projects.” — this page

If you don’t have wrangler globally installed, try this and then perform the following commands:

pnpm create cloudflare@latest wrangler-works --type hello-world --git --lang ts --deploy
cd wrangler-works
git remote add origin <empty-github-repo-url>
git push

Note: I’m using pnpm because I own the t-shirt. You can, of course, use whichever package manager’s merch you’re wearing, npm, yarn, or otherwise.

You should be able to access the worker through the free subdomain provided by Cloudflare, which might look like https://<worker-name>-<your-account-subdomain>.workers.dev. Be careful with the worker naming!

Step 3: Association

Even though we can access the worker through worker.dev It is not advised to use this domain in production.

Find the file named wrangler.jsonc or wrangler.toml and add the following:

/**
 * For more details on how to configure Wrangler, refer to:
 * https://developers.cloudflare.com/workers/wrangler/configuration/
 */
{
    ...
    "workers_dev": true,
    "preview_urls": true,
    "routes": [
        {
            "pattern": "journeyly.co/*",
            "zone_name": "journeyly.co"
        }
    ]
}

Follow that change up with deploying the worker with the new configuration:

pnpm run deploy

Step 4: DevOps

Go to the Worker settings and connect the GitHub Repository. Just make sure Builds for non-production branches is turned on.

Step 5: Assessment

Follow these steps to test your setup:

1. Make some changes to the src/index.ts

2. Create a new branch

3. Commit the changes

4. Push to remote

You should be able to see the following result on GitHub Actions when you click on the ✅ symbol on the latest commit of the new branch:

If we go one step further and open a pull request to merge into main, Cloudflare will automatically run deployment checks and display a message showing the status of your preview deployment.

Bonus

Now, what you do with this is up to you! Here’s what I am using it for:

export default {
    async fetch(request, _env, _ctx): Promise<Response> {
        const country = request.headers.get('CF-IPCountry') || 'XX';

        switch (country) {
            case 'IN':
                return Response.redirect('<redacted>', 302);
            default:
                return Response.redirect('<redacted>', 302);
        }
    },
} satisfies ExportedHandler<Env>;

Feeling generous with your good vibes today? Awesome! I’d be thrilled if you could take a minute to fill out this quick form for a project I’m working on. It would help me out so much! 🙌

Salutations!

What do you need?

1. Language Fonts

2. Input Method (IM) and Input Method Editor (IME)

3. Input Method Framework (IMF)

How to get them?

Language Fonts

Here are the list of fonts that you can use:

• adobe-source-han-sans-jp-fonts - Japanese OpenType/CFF fonts, style Gothic (sans-serif).

• adobe-source-han-serif-jp-fonts - Japanese OpenType/CFF fonts, style Mincho (serif).

• noto-fonts-cjk - Google Noto CJK fonts.

• otf-ipafont - Formal style Japanese Gothic (sans-serif) and Mincho (serif) fonts set; one of the highest quality open source font. Default of openSUSE-ja.

• otf-ipaexfont - An updated version of ipafont.

• ttf-hanazono - A free Japanese kanji font, style Mincho (serif).

• ttf-sazanami - Japanese free TrueType font. This is outdated and not maintained any more, but may be defined as a fallback font on several environments.

• ttf-koruri^AUR - Japanese TrueType font obtained by mixing ttf-mplus^AUR and Open Sans

• ttf-monapo^AUR - Japanese fonts to show 2channel Shift JIS art properly.

• ttf-mplus-git^AUR - Modern Gothic style Japanese outline fonts. It includes all of Japanese Hiragana/Katakana, Basic Latin, Latin-1 Supplement, Latin Extended-A, IPA Extensions and most of Japanese Kanji, Greek, Cyrillic, Vietnamese with 7 weights (proportional) or 5 weights (monospace).

• ttf-vlgothic^AUR - Japanese Gothic fonts. Default of Debian/Fedora/Vine Linux

• ttf-kanjistrokeorders^AUR - KanjiStrokeOrders font that indicates the stroke order of characters.

Here I am gonna go with..

sudo pacman -S noto-fonts-cjk noto-fonts-emoji noto-fonts

The Noto Font Family has everything that you will ever need, here we are just installing noto-fonts-cjk for Chinese, Japanese, and Korean fonts, noto-fonts-emoji for emoji fonts and noto-fonts for Latin fonts.

You can check out the entire font family here.

Note: It is not necessary to install noto-fonts and noto-fonts-emoji packages for our diverse keyboard.

Locale

Locales are used to correctly display regional or language/locale-specific standards. To ensure the Japanese locale is enabled, confirm that ja_JP.utf8 is in the output of:

$ locale -a

To enable the Japanese locale, uncomment ja_JP.utf8 in /etc/locale.gen:

/etc/locale.gen

...
#ja_JP.EUC-JP EUC-JP  
ja_JP.UTF-8 UTF-8  
#ka_GE.UTF-8 UTF-8  
...

Afterwards, regenerate your locale:

$ locale-gen

Input Method Framework (IMF)

An Input Method Framework (IMF) is a software framework that facilitates the input of characters not directly supported by a keyboard. This is particularly important for languages with large character sets, such as Chinese, Japanese, and Korean, which often require more than the standard keyboard layout to input characters efficiently.

There are two options of IMF for us: ibus or fcitx5. We are going to go with fcitx5.

sudo pacman -S fcitx5-im

The fcitx5-im installs fcitx, fcitx5-configtool, fcitx5-gtk, and fcitx5-qt. This usually covers everything that you might need.

Once you are done installing you also need to add these environment variables

GTK_IM_MODULE=fcitx
QT_IM_MODULE=fcitx
XMODIFIERS=@im=fcitx

Input Method (IM) or Input Method Editor (IME)

The Input Method (IM) and Input Method Editor (IME) refer to the methodology and implementation respectively but nowadays they are used interchangeably. In short, the IM refers to a particular way to use the keyboard to input a particular language, for example, the Cangjie method, the pinyin method, or the use of dead keys. On the other hand, IME refers to the actual program that allows the implementation to be used.

We are going to go with mozc for fcitx which is fcitx5-mozc.

sudo pacman -S fcitx5-mozc

Just A Bit More

We are almost there, open fcitx5-configtool and search for mozc. Once you find it add it as an input method. Press Ctrl + Space — 役に立たないブログでした

References

[1] https://wiki.archlinux.org/title/Input_method

[2] https://en.wikipedia.org/wiki/Input_method

[3] https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor

[4] https://wiki.archlinux.org/title/Localization/Japanese

[5] https://medium.com/@ourhopeforfreedom/why-i-switched-from-ibus-to-fcitx5-c6950eb3ba9e

Why?

Continuous Integration and Continuous Delivery/Continuous Deployment a.k.a CI/CD; this ain’t it.

…

CI/CDs are great - update a branch through merge, perform a commit or a PR and the build request is sent instantly. A build is made and sent to you without you having to do anything out of the flow.

But what if you need a particular build from a made through the source of a particular branch or at a specific commit and the ones that fall between a version change?

You cannot enable CI/CDs on every branch. It may as very well be a waste of resources. So, we have proposed a CLI tool using capabilities of Slack and AWS. A command that can get you what you want, when you want it.

TL;DR

Setup Slack

• Make a Slash Command

• Make an Incoming Webhook

Setup Lambda

• Create Lambda

• Setup Trigger Lambda

• Setup Notification Lambda

Setup CodeBuild

• Configure Source

• Configure Artifacts

• Configure Amazon Simple Notification Service (SNS)

How?

According to our requirements, we needed a way to build an android app with different build variants, different branches, and due to a sub-module in flutter, a sub-module branch parameter was added.

You may add parameters according to your needs. These are just parameters that we required for our build.

Setup Slack

1. Make sure you are signed-in properly. Now go to https://api.slack.com/.

2. Click on Create an app (if you don't have one already)

   

3. Click on From scratch and enter your app details

   

Make a Slash Command

1. Click on Slash Command and Create New Command

   

Add the required details and click on Save

Note: The request URL is a POST request so make sure the API Gateway is properly configured.

Make an Incoming Webhook

1. Click on Slash Command and Create New Incoming Webhook

   

2. Activate Incoming Webhooks

   

3. Request to Add New Webhook at the bottom of the page. Send a request with a message that states the purpose of the Incoming Webhook and inform your admin.

4. Select the channel that you wish to make the Incoming Webhook of and voilà! You are done.

Setup Lambda

Create Lambda

Create two lambda functions:

1. Trigger lambda - Used to trigger CodeBuild build

2. Notification lambda - Used to send a notification on Slack

Note: You may create the lambda function by referring to this documentation.

Setup Trigger Lambda

We will need an API Gateway as a trigger. You may refer to this to build an API Gateway for lambda. The endpoint should be a POST request because that's what the Slack Slash Command will provide us.

Request Schema

{
  "version": "2.0",
  "routeKey": "ANY /triggerAndroidBuild",
  "rawPath": "/default/triggerAndroidBuild",
  "rawQueryString": "",
  "headers": {
    ...
  },
  "requestContext": {
    "accountId": "...",
    "apiId": "...",
    "domainName": "...",
    "domainPrefix": "...",
    "http": {
      "method": "POST",
      "path": "/default/triggerAndroidBuild",
      "protocol": "HTTP/1.1",
      "sourceIp": "...",
      "userAgent": "Slackbot 1.0 (+https://api.slack.com/robots)"
    },
    "requestId": "...",
    "routeKey": "ANY /triggerAndroidBuild",
    "stage": "default",
    "time": "07/Jun/2022:08:00:05 +0000",
    "timeEpoch": 1654588805616
  },
  "body": "dG9rZW49NTRQZ1Z0d2NYMFBad29JQnh5cGNxaHJJJnRlY...hZjBj",
  "isBase64Encoded": true
}

We are mainly concerned with the body given to us. It will always be Encoded with Base64. All you need to do is decode the string and you will get all the information that you may require.

To understand what is stored in the body, refer to this.

Source code

1. Import aws-sdk in the lambda to use it and setup the CodeBuild config according to your needs. Refer to AWS CodeBuild Request Syntax.

    // index.js
    const AWS = require("aws-sdk");
   
    const codebuild = new AWS.CodeBuild();
      const branch = data.hasOwnProperty("branch") ? 
        data["branch"] : "develop";
      const flutter_branch = data.hasOwnProperty("flutter_branch")
        ? data["flutter_branch"]
        : "develop";
      const build = {
        projectName: "android-app",
        sourceVersion: branch,
        environmentVariablesOverride: [
          {
            name: "VARIANT_TYPE" /* required */,
            value: build_variant /* required */,
            type: "PLAINTEXT",
          },
          {
            name: "BRANCH",
            value: branch,
            type: "PLAINTEXT",
          },
          {
            name: "FLUTTER_BRANCH",
            value: flutter_branch,
            type: "PLAINTEXT",
          },
          {
            name: "TRIGGER_USER",
            value: url.searchParams.get("user_id"),
            type: "PLAINTEXT",
          },
          {
            name: "TRIGGER_USER_REF",
            value: url.searchParams.get("user_name"),
            type: "PLAINTEXT",
          },
        ],
        cacheOverride: {
          type: "LOCAL",
          modes: [
            "LOCAL_CUSTOM_CACHE",
            "LOCAL_DOCKER_LAYER_CACHE",
            "LOCAL_SOURCE_CACHE",
          ],
        },
        gitSubmodulesConfigOverride: {
          fetchSubmodules: false /* required */,
        },
        buildspecOverride: `{version: 0.2, ...`,
      };
   

   Note: We have added the buildspec required by the CodeBuild in this config itself. You may add it in the AWS console or in the source files as buildspec.yml.

2. Build the application using this small snippet. Once the build is successfully triggered, we can use the callback function to send a message back to Slack where the command was triggered from.

    // index.js
   
    try {
        const result = await codebuild.startBuild(build).promise();
        callback(undefined, {
          statusCode,
          body: ":white_check_mark: Success! triggering build for android-app.",
          headers,
        });
      } catch (err) {
        callback(undefined, {
          statusCode,
          body: `:warning: Error! ${err.message}.`,
          headers,
        });
      }
   

   Note: You may use this callback function for command validation as well.

Setup Notification Lambda

We will need an Amazon Simple Notification Service (SNS) as the trigger. The SNS will be created later in the CodeBuild section.

Request Schema

{
  "Records": [
    {
      "EventSource": "aws:sns",
      "EventVersion": "1.0",
      "EventSubscriptionArn": "...",
      "Sns": {
        "Type": "Notification",
        "MessageId": "fa556e61-3b73-5f7c-b93d-357acabcb9eb",
        "TopicArn": "arn:aws:sns:ap-south-1:289014830182:codebuild-slack",
        "Subject": "None",
        "Message": "{\"account\":\"...\",\"detailType\":\"CodeBuild Build State Change\",\"region\":\"ap-south-1\",\"source\":\"aws.codebuild\",\"time\":\"2022-06-09T13:03:04Z\",...,\"additionalAttributes\":{}}",
        "Timestamp": "2022-06-09T13:03:11.226Z",
        "SignatureVersion": "1",
        "Signature": "DcgduZ8N2tyXh1ioMQNpah4m3/dol2...tEQ==",
        "SigningCertUrl": "https://sns.ap-south-1.amazonaws.com/....pem",
        "UnsubscribeUrl": "https://sns.ap-south-1.amazonaws.com/...",
        "MessageAttributes": {}
      }
    }
  ]
}

You will find all the CodeBuild Information in the “Message” section of the request. The Message section will be encoded in JSON string, so you will have to decode it before using any data.

The Message section will look like this.

Algorithm

1. Convert the Message from JSON string to Object

2. Format the message that you need to send to Slack using the details provided in the message. You may learn more about formatting from here.

3. Use the Incoming Webhook to send a POST request with the formatted message as body.

Setup CodeBuild

You will need a S3 bucket to store the artifacts produced by the CodeBuild. Refer to AWS user guide for creating bucket.

Configure Source

We used GitHub as our source. You may find other options such as:

• Amazon S3

• CodeCommit

• Bitbucket

• GitHub Enterprise Server

It’s very simple to authenticate - you just need to use the OAuth provided by the AWS console and login to GitHub. The cloning of the repository will be handled by CodeBuild (to be more specific CodeStarSourceConnection).

Configure Artifacts

Below is the simple configuration to achieve pushing the Build Artifacts on Amazon S3.

Note: Each config mentioned above matches with those of AWS CloudFormation and are all documented here by AWS.

Configure Amazon Simple Notification Service (SNS)

1. Create a SNS topic. You may refer to this AWS Documentation. Once you have created the SNS, you should add the Notifcation Lambda as a subscriber

2. Hover on Notify and click on Manage notification rule

   

   You will be redirected to this page. Here, we already have a notification rule setup but if you don’t, click on Create notification rule.

   

3. This will send you to the page below.

   1. Enter whatever name you may seem fit

   2. Choose detail type Full or Basic according to your needs. You may learn more about the notifications here.

   3. Choose a trigger according to your need. We have chosen Failed and Succeeded to get notifications when the build has failed or successfully finished building.

   4. In the Targets section you may select the SNS that you just created

Note: You may refer to any of the following to create a CodeBuild build.

Conclusion

With this you can now add the bot to your slack workspace and experiment with the command that you just created.

Well, if you want to try it yourself, let's get on to installing, shall we?

Installation

First, go to this link. You will be given download options for various operating systems. As shown below.

Since we are working on ArchLinux, we will choose .pacman_x64. Now all you have to do is run a simple command using the pacman client

sudo pacman -U Codux-[version].x64.pacman

The above code will generate all the necessary dependencies and also create a .desktop file for launching with an application launcher.