#Other on Simon's Blog

Synology Git Service (using SSH Key to Authenticate)

Wed, 17 Dec 2025 00:00:00 +0000

Preliminary Setups

Step 1: Enable SSH Service from DSM

Enable SSH service from Your Synology DSM’s Control Panel (* for security consideration, I would strongly suggest you to change the port away from the default 22, here for showcase purpose I’m using 2222)

Step 2: Install and Enable Git Server

Install and run the “Git Server” package from your Synology DSM’s Package Center:

(Optional) Step 3: Create a New Shared Folder

I’d like to clean my directories clean, my rule is that directory segregate the file of different purpose, hence I’ll create a new “Shared Directory” under DSM to store Git related repositories. (*this step may be optional for you)

[PENDING] Exporting Ulysses to Markdown Format

Mon, 17 Nov 2025 00:00:00 +0000

Emma Goto

https://www.emgoto.com/ulysses-to-markdown/

https://dev.to/emma/how-to-export-from-ulysses-to-markdown-13pi

[Scribble] Run CRON Jobs (Scheduled Tasks) in CPanel

Mon, 10 Nov 2025 00:00:00 +0000

In the below example, I will create a executable #cron-job-delete-file.sh bash script file to hold the scheduled tasks commands; change its file permission to be “executable by admin/user”; and add it to cpanel cron job to be ran every 1 minutes:

create the following #cron-job-delete-file.sh in ~/public_html

create the folder #cron-sample-directory at ~/public_html

change the file permission and test the execution via terminal

add the cron job (optionally, you can also add an email to notify you every time when cron job executes)

[Scribble] Web Component - 101 Examples

Mon, 10 Nov 2025 00:00:00 +0000

(Source code: example-1-web-comopnent-confetti-and-counter-button.html)

(Source code: example-2-web-component-fancy-tabs.html)

[Scribble] Web Component - Opponent & Proponents

Mon, 10 Nov 2025 00:00:00 +0000

Notes and takeaway from DrupalSouth Canberra Nov-2025

[Quick Note] Access Database in Docker Container (for GovCMS Local Dev)

Thu, 30 Oct 2025 00:00:00 +0000

Find the exposed port and MySQL database name/password

(I chose to use the TUI LazyDocker, but you can use other approach as you prefer)
Use database management software to open it

(Personally I like to use ones with GUI, hence Navicat Premium (Lite))

[Pearson PTE] English Test Note - 全题型考试要点 - (Nydia笔记整理)

Wed, 22 Oct 2025 00:00:00 +0000

本篇笔记整理自 Nydia PTE 机构的第一堂介绍课 (Nago老师)。

课程录像可在此处查看：https://youtu.be/WGdJllc4oz4

写作 Writing

SWT - Summarise Written Text - 27%
- 给一些文字，然后用你的语言回答 (10分钟/题)
- 不需要全部用自己的话，建议找重要的话一模一样抄下来
  - 比如第一句话 /中心句 / 重复的句子
  - 连接词根据是否转折选择, and 或者 , but 然后链接找的下一个句子，
  - 要注意考试的时候不能复制黏贴，需要手动打出来，千万不要拼错
- 字数限制很重要，尽量贴75个词，不要超75个词，到76个词就没有分了
- 只能写成一句话的形式，只有一个首字母大写, 不能有一个以上的句号！
WE - Write Essay - 24%
- 🎯百分百命中! 可以用萤火虫，总共只有16篇作文但是100%命中，一模一样的题目
- 字数尽量要超过250个词，但绝对不能超过限制的300个单词 (20分钟/题)
（其他占分的部分在听力里）
- SST - Summarize Spoken Text - 23%
- WFD - Write from Dictation - 26%

口语 Oral

所有口语相关的题目发音和流利度很重要（如果读错了继续读就好）
RS - Repeat Sentence - 21%
- 最好的联系方法是练习，靠命中55%+（其他题型命中率就很低，没必要刷）
RA - Read Aloud - 10%

[Pearson PTE] English Test Note - 全题型考试要点 - (个人笔记整理)

Wed, 22 Oct 2025 00:00:00 +0000

Self-Introduction

25sec准备，30sec 说话时间，不计入分数统计，但也不能乱说

Please introduce yourself. 
For example, you could talk about one or more of the following:
- Your interests 
- Your plans for future study 
- Why you want to study abroad 
- Why you need to leam English
- Why you chose this test

Answer: Good morning/afternoon, my name is Suowei Hu and I’m currently working as a web developer at a local agency in Fyshwick. During my leisure time I am interested in video games and photography. The main driving force behind my English learning is to develop better people skills at work. The primary reason I am taking this exam is to qualify for a new visa so I can continue working in Australia after my current visa expires.

[Note] Drupal Sandbox Prevent Google Index

Tue, 21 Oct 2025 00:00:00 +0000

Prevent Crawler from Indexing Sandbox

via robots.txt file:

1
2

User-agent: *
Disallow: /

(Apache) via .htaccess file:

`1`	`Header set X-Robots-Tag "noindex, nofollow, noarchive"`

(Nginx) via nginx.conf file:

`1`	`add_header X-Robots-Tag "noindex, nofollow, noarchive" always;`

(Optional) Extra Steps if File/Page Already Indexed

If one of the page or file can already be seen on the Google Search result, and you want to remove it, and forbid random user from accessing it, you can do the following:

[Note] Test Website before Pointing Domain to Server (DNS)

Sun, 19 Oct 2025 00:00:00 +0000

Scenario to Use This Technique ?

When you happen to know the IP address of a domain, but have not assigned a domain for it, AND/OR the website is down due to unknown reason, you are suspecting the issue is domain/DNS resolution, but want to check if the website hosting is working.

Steps to Setup local DNS name resolution ?

(via editing /etc/hosts file directly)

open terminal, and navigate to the user root folder (~ directory)

[Note] Connect to Server using SSH Key (& 1Password agent)

Wed, 15 Oct 2025 00:00:00 +0000

TLDR;

Step1: obtain an public SSH key (either one stored in your password manager or local machine, or generate a new one)

Step2: login normally with username/password for the first time: ssh -p 2222 admin@example.com.au

Step3: edit ~/.ssh/authorised_keys file on the server to add the public key obtained in step1

Step4: edit ~/.ssh/config on your local machine
(if you are using 1Password SSH Key Agent:
1
2
3
4
5
Host example.com.au
  HostName example.com.au
  Port 2222
  User example_user
  IdentityAgent "~/Library/Group Containers/XXXXXXXXXXX.com.1password/t/agent.sock"
(if you are using your locally stored ssh key:

[Note] VSCode Terminal Jump To Start/End-of-the-line using Keyboard Shortcut

Fri, 10 Oct 2025 00:00:00 +0000

In your .zshrc or .bashrc file, add the following:

`1`	`bindkey -e`

In VSCode’s “Preferences: Open Keyboard Shortcuts.” (keybindings.json) add the following:

{
    "key": "ctrl+u",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": " \u0015" },  // clear current line in terminal, sends ctrl+u to terminal
    "when": "terminalFocus"
},
{
    "key": "cmd+backspace",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": " \u0015" },  // clear current line in terminal, sends ctrl+u to terminal
    "when": "terminalFocus"
},
{
    "key": "ctrl+a",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "\u0001" },  // move cursor to start of line, sends ctrl+a to terminal
    "when": "terminalFocus"
},
{
    "key": "cmd+left",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "\u0001" },  // move cursor to start of line, sends ctrl+a to terminal
    "when": "terminalFocus"
},
{
    "key": "ctrl+e",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "\u0005" }, // move cursor to end of line, sends ctrl+e to terminal
    "when": "terminalFocus"
},
{
    "key": "cmd+right",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "\u0005" }, // move cursor to end of line, sends ctrl+e to terminal
    "when": "terminalFocus"
}

Reference

https://code.visualstudio.com/docs/terminal/advanced https://stackoverflow.com/questions/48980499/how-do-i-move-the-cursor-to-the-beginning-of-the-line-in-vscodes-terminal

[Note] How is a SSH secure connection established (simplified) ?

Mon, 22 Sep 2025 00:00:00 +0000

This post is for people who want to quickly get up to speed with how SSH connection work under the hood with some visuals to assist with understanding. If you want for rigid explanation regarding to this, please refer to the referenced YouTube video and articles.

Overall, it is important to understand that SSH uses asymmetric (public-private) key only for verifying if the client (developer’s machine) is allowed to connect to the host (the VPS), once the verification successes it uses Diffie-Hellman key exchange to establish a shared private key, then after that they use a generated and shared symmetric (private) key that is used only for this session.(i.e. public-private key is NOT used anymore once the connection is established)

Format Twig File with Tailwind Utility Class via Prettier

Tue, 09 Sep 2025 00:00:00 +0000

TLDR;

Install prettier npm packages and plugins:

npm install -D prettier \
               prettier-plugin-tailwindcss \
               @ttskch/prettier-plugin-tailwindcss-anywhere \
               @zackad/prettier-plugin-twig

Create prettier configuration file for “twig formatting” & “tailwind utility classes ordering”:

//.prettierrc-twig
{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "bracketSameLine": true,
    "trailingComma": "all",
    "useTabs": false,
    "plugins": [
        "@zackad/prettier-plugin-twig"
    ]
}

//.prettier-tailwind
{
    "tailwindStylesheet": "./src/css/tailwind-css-input.css",
    "plugins": [
        "@zackad/prettier-plugin-twig",
        "prettier-plugin-tailwindcss",
        "@ttskch/prettier-plugin-tailwindcss-anywhere"
    ],
   "overrides": [
      {
       "files": "*.twig",
          "options": {
              "parser": "anywhere"
          }
      }
   ]
}

Add the formatting command as npm scripts for convinient of access:

[Note] VSCode Tasks.json - for reference purpose

Thu, 21 Aug 2025 00:00:00 +0000

In order to create your custom tasks runable through VSCode’s command palette, create a tasks.json file inside the .vscode folder for the current working directory (or workspace root).

... -- workspace
         |_______.vscode
                   |_______tasks.json   <--- create this file
         |         |_______launch.json 
         |________...

TLDR - Demo `task.json` file

With comment on the possible values for parameters and purpose each one of them serve:

[Note] Using Figma MCP in Agent Code Editor

Thu, 24 Jul 2025 00:00:00 +0000

Introduction

In this post, I’ll explore how to use Figma’s MCP (Model Context Protocol) in the Agent Code Editor. We’ll cover the basic setup, available MCP tools, and best practices for efficiently using this powerful combination of design and development tools.

Setup Steps

Step 1: Enable MCP Server in Figma

Step 2: Configure Your MCP Client (IDE)

Step 3: Start Using MCP in Your Client

[Note] Accordion using HTML 'details' and 'summary' elements

Mon, 19 May 2025 00:00:00 +0000

The OLD way of Accordion

When building an accordion without the <details> and <summary> elements, the traditional approach involves creating a collapsible div next to a button that triggers the collapse/expand behavior. Check out this example from w3school: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion

<body>
    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
<script>
    var acc = document.getElementsByClassName("accordion");
    var i;
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
</script>

[Note] Popup Modal using HTML 'dialog' Element

Sun, 18 May 2025 00:00:00 +0000

The OLD way of building Popups

(aka: Custom Modal Implementation)

When building a popup modal without the HTML <dialog> element, it typically involves creating a div that expands to full screen width and height, and toggling its visibility using display:none and display:block. An example can be found in this W3Schools post: https://www.w3schools.com/howto/howto_js_popup.asp.

*full code can be found at: index-custom-modal.txt

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>

[Note] What is Schema Markup (schema.org) ? Why is it important for SEO ?

Wed, 12 Feb 2025 00:00:00 +0000

TLDR;

Schema markup (schema.org) is a agreed structured data format that exposes the context and content of website to the search engine; One of the most common practice to add schema markup to websites is through json-ld data wrapped in <script> tag ; With the addition of these structured markup data, the search engine will then be able to understand the website, and provide additional feature such as rich-style interactive component like card, carousel, accrodion, etc, making your website stand-out amongst the other search result in organic search.

[Note] Parameters to assess ChatBot products ?

Tue, 24 Dec 2024 00:00:00 +0000

alais:
- how to compare ai models
- how to assess chatbot products
- how to choose the best ai model

Quick Comparison

Here’s a table of spec comparsion for the most current model:

Feature	Claude 3.5 Sonnet	OpenAI o1	DeepSeek R1
Model Size	Unknown	2.8T parameters (unconfirmed)	671B parameters (37B active per token)
Context Window	200K tokens	128K tokens	128K tokens
Max Output	4K tokens	32K tokens	32K tokens
Vision Capability	Yes	No	No
Knowledge Cutoff	April 2024	Oct 2023	Unknown
Cost (Input)	$3/1M tokens	$15/1M tokens	$0.55/1M tokens
Cost (Output)	$15/1M tokens	$60/1M tokens	$2.19/1M tokens
Open Source	No	No	Yes (MIT License)
Hallucination Rate	Unknown (Lower than previous models	Unknown (Lower than GPT-4 (0.44 on SimpleQA)	Unknown (4x higher than DeepSeek V3
Performance	40% success on autonomy tasks	High performance on AIME, Codeforces, GPQA-Diamond	Comparable to o1 on math and coding tasks
Special Features	Constitutional AI framework, near-perfect recall	Advanced reasoning capabilities, high accuracy on complex tasks	Resource-efficient MoE architecture, self-discovering reasoning strategies

(updated on “2025-02-05T144338”, generated using perplexity)

GitHub Programmable AI ? [PENDING]

Sun, 16 Jun 2024 00:00:00 +0000

https://github.com/JushBJJ/Mr.-Ranedeer-AI-Tutor https://www.youtube.com/watch?v=gLATieOIv64

IP Address Cannot Access Website (How does DNS server work behind the theme to protect your website)

Wed, 22 May 2024 00:00:00 +0000

Expected Behavior

If one have taken a network related course in their university, then he/she might comprehend the process website opening be like:

Enter Url/Domain in the browser address bar (www.example.com)
The browser resolve the DNS record and retrive its IP address (100.100.100.100)
The browser establish the TCP connection with the server of IP address using HTTP port 80 (or HTTPS port 443)
The browser sends an HTTP (or HTTPS) request to the server and retrive the (source) html code code
The browser render the website using its engine and display the website

So in theory, if we would be able to get the IP address of the target server, we can skip step 1, and everything else would work as anticipated as above ? WRONG ! There are many other factors affecting the certain details of the above process.

Address Input Auto-Complete (via Google Place API)

Fri, 17 May 2024 00:00:00 +0000

PENDING EXPLAINATION ….

index.md

<html>

<head>
    <title>Place Autocomplete Address Form</title>
    <script type="module" src="./index.js"></script>
    <style>
        .full-field {
            width: 400px;
            display: flex;
            justify-content: space-between;
        }

        .full-field>.form-label {
            display: block;
            text-align: left;
            margin-right: 10px;
        }

        .full-field>input {
            width: 250px;
        }
        .pac-container:after {
            background-image: none !important;
            height: 0px;
        }
    </style>
</head>

<body>
    <form id="address-form" action="" method="get" autocomplete="off">
        <label class="full-field">
            <span class="form-label">Search</span>
            <input id="search" name="search" required autocomplete="off" />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">Address1</span>
            <input id="address1" name="address1" required autocomplete="off" />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">Address2</span>
            <input id="address2" name="address2" />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">City*</span>
            <input id="locality" name="locality" required />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">State/Province*</span>
            <input id="state" name="state" required />
        </label>
        <br>
        <label class="full-field" for="postal_code">
            <span class="form-label">Postal code*</span>
            <input id="postcode" name="postcode" required />
        </label>
        <br>
        <label class="full-field">
            <span class="form-label">Country/Region*</span>
            <input id="country" name="country" required />
        </label>
    </form>

    <!-- dont worry if you see the below key .... it been removed from my account already .... -->
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0q7MRzP5phqe8r26v9qi_rEoCwFFrXck&callback=initAutocomplete&libraries=places&v=weekly"
        defer></script>
</body>

</html>

index.js


let form_search;                // field for address search
let form_address1;              // field of address 1
let form_address2;              // field of address 2
let form_city;                  // field of city
let form_stateProvince;         // field of state/province
let form_country;               // field of country
let form_postal;                // field of postal code
let gpla_autocomplete;         // auto complete object

function gpla_initAutocomplete() {
	form_search        = document.querySelector("#search");
	form_address1      = document.querySelector("#address1");
	form_address2      = document.querySelector("#address2");
    form_city          = document.querySelector("#locality");
    form_stateProvince = document.querySelector("#state");
	form_country       = document.querySelector("#country");
	form_postal        = document.querySelector("#postcode");

    // Initialize the auto-complete api and its cooresponding listener
	gpla_autocomplete  = new google.maps.places.Autocomplete(
        form_search, {
            componentRestrictions: { country: ["au", "nz"] },                         //restricting addresses in the Australia and New Zealand.
            fields:                ["name","address_components", "geometry", "icon"], //specify field needed (https://developers.google.com/maps/documentation/javascript/place-autocomplete#specify-data-fields)
            types:                 ["address"],
        }
    );
	gpla_autocomplete.addListener("place_changed", gpla_fillInAddress);
}

function gpla_fillInAddress() {
    // Initialize the values which
    // will later be filled into the fields
	let place_address1      ="";
	let place_address2      ="";
    let place_city          ="";
    let place_stateProvince ="";
    let place_country       ="";
    let place_postcode      ="";

    // `Extract address components from place details and populate corresponding form fields.
    // The place.address_components are google.maps.GeocoderAddressComponent objects. (http://goo.gle/3l5i5Mr)
	const place = gpla_autocomplete.getPlace();
	for (const component of place.address_components) {
		switch (component.types[0]) {
            case "street_number":               {place_address1      = `${component.long_name} ${place_address1}`;   break;}
			case "route":                       {place_address1      += component.short_name;                        break;}
			case "subpremise":                  {place_address2      = `${component.long_name}`;                     break;}
			case "postal_code":                 {place_postcode      = `${component.long_name}${place_postcode}`;    break;}
			case "postal_code_suffix":          {place_postcode      = `${place_postcode}-${component.long_name}`;   break;}
			case "locality":                    {place_city          = component.long_name;                          break;}
			case "administrative_area_level_1": {place_stateProvince = component.short_name;                         break;}
			case "country":                     {place_country       = component.long_name;                          break;}
		}
	}

    // Filling the retrived value from google place api
    // into the cooresponding field in the webform
	form_address1.value       = place_address1;
	form_address2.value       = place_address2;
	form_postal.value         = place_postcode;
	form_city.value           = place_city;
    form_country.value        = place_country;
    form_stateProvince.value  = place_stateProvince;
}

window.initAutocomplete = gpla_initAutocomplete;

Reference

LLM - Useful Prompt & Prompt Generation

Tue, 14 May 2024 00:00:00 +0000

Useful Prompt

Reading

Summarize Article (in Chinese)
- As an academic researcher, I request that you write a summary in Chinese that meets the standard of a Master’s degree thesis. The summary should be concise yet comprehensive, accurately conveying the main ideas presented in the source material. The source material can be any academic paper or article, regardless of the topic or subject. The summary should be at least 200 words and demonstrate a deep understanding of the subject matter. Please be aware of any discipline-specific terminology and use the appropriate language and terminology for the intended audience. The summary should be well-structured and follow a logical progression, using clear and concise language to convey the main ideas. Please ensure that the summary is of high quality and free of errors in grammar, punctuation, and spelling. Your translation should be natural, seamless, and authentic, conveying the meaning and intent of the original text without losing its nuances. Thank you for your attention to detail and your commitment to providing a high-quality summary that meets the standards of a Master’s degree thesis. if you know,answer me"sure,sir.“then I will give you the original article.
- ★★☆☆☆ (REF)

Translate

Chinese Language Translator
- Act as a Chinese language translator. I will provide a sentence or paragraph that needs to be translated into Chinese. Your role is to provide a clear and concise translation that accurately conveys the meaning of the original text, tailored to the intended Chinese-speaking audience. Please keep in mind that the intended audience is Chinese and may have different regional preferences or dialects. Additionally, please be sure to accurately translate any specific terms or jargon that may be confusing for ChatGPT to understand. Finally, please evaluate the quality of the translation based on its accuracy, readability, and relevance to the original text.
- ★★☆☆☆ (REF)

Understand

Deep Understand Topic (Understand Topic By Asking Questions)

LLM: Prompt Engineering

Sun, 28 Apr 2024 00:00:00 +0000

Intuition Behind this Post ?

The reason I wanted to know a little more about how this topic (Prompt Engineering) is getting scoped, and how people in the area have contributed till this date, is because I wanted to utilise one of the super-search tool I’ve been using since the past fre year: Raycast, just a little bit better.

I know Raycast have been having the feature of “AI Command” for almost around 1 year now, of which allows you to use any of the AI prompt as a “command” to run; On the raycast community I saw people using it for change tones, enhanec writting, find synonyms, and etc, but for me personally, its just extremely weird having to use it as a one-time command, my experience with the ChatGPT before it came out is usually more towards a continues, step-by-step process.

Leaflet vs Mapbox (mapbox-tile, mapbox-js, mapbox-gl-js)

Mon, 22 Apr 2024 00:00:00 +0000

(p.s. The comparison based on project status, statistics, and data collected at: 2024-04-22, It may be out-dated at the date you view the article

Comparison - Overview

Leaflet	Mapbox.js	Mapbox GL JS
Active maintenance	Project deprecated	In active development.
Supports raster tiles.	Supports raster tiles.	Supports raster tiles, vector tiles.
Map tiles are generated by server.	Map tiles generated by server.	Maps rendered client-side by browser.
Static data and style	Static data and style	Dynamic data and style
39.9k star	1.9k star	10.7 star

Comparison - In Depth

Leaflet

GeoJSON - [PENDING]

Sun, 21 Apr 2024 00:00:00 +0000

PENDING !!!!!!!!!!!

https://en.wikipedia.org/wiki/GeoJSON https://geojson.org/ https://leafletjs.com/examples/geojson/ https://github.com/tonywr71/GeoJson-Data

Leaflet 101

Sun, 21 Apr 2024 00:00:00 +0000

What is Leaflet ?

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

Mapbox 101

Sun, 21 Apr 2024 00:00:00 +0000

What is Mapbox ?

Mapbox GL JS is a client-side JavaScript library for building web maps and web applications with Mapbox’s modern mapping technology. You can use Mapbox GL JS to display Mapbox maps in a web browser or client, add user interactivity, and customize the map experience in your application.

Advantages comparing to other JavaScript map library:

Support both raster tiles and vector tiles
Utilize WebGL (enabling 3D interactivity)
API integration (with the mapbox tiling service)
Compatible with other Mapbox tols

Disadvantages comparing to other JavaScript map library:

Anti-aliasing vs Subpixel Anti-aliasing

Tue, 05 Mar 2024 00:00:00 +0000

What is anti-aliasing

Anti-aliasing is quite straight forward, it is a technique used in computer graphics to smooth out the appearance of edges in images or text. It works by adding semi-transparent pixels along the edges to simulate a smoother transition between the foreground and background colors. This process helps reduce jagged or pixelated edges, resulting in a more visually appealing and polished look.

Note that one such semi-transparent pixel is made up by three sub pixels: one red, one blue, one green, they work together to produce a color that forms the pixel. Consequently, while visually appearing as multiple pixels, in essence, it remains the same pixel as the original screen resolution.

ISO 8601 Time Encode

Sat, 18 Nov 2023 00:00:00 +0000

Quick Reference Sheet

Datetime - Basic Notation
- `yyyymmddThhmmss
- 20120915T155300
Datetime - Extended Notation
- Date and time in UTC
  - 2023-11-17T23:17:30Z
- Date and time with the offset
  - yyyy-mm-ddT hh:mm:ss+|– hhmm
  - 2012-09-15T15:53:00+04:30 (UTC+04:30)
  - 2023-11-17T16:17:30−07:00 (UTC−07:00)
  - 2023-11-17T23:17:30+00:00 (UTC+00:00)
  - 2023-11-18T06:17:30+07:00 (UTC+07:00)

BTT Configuration

(BTT)@dateformat:yyyy-MM-dd(BTT)
(BTT)@dateformat:yyyy-MM-dd'T'HHmmss'AEST'(BTT)

Reference

What/Why Google Tag Manager (GTM)

Tue, 14 Nov 2023 00:00:00 +0000

Intuition

To begin with, I looked for the definition of “tag” in the Google Tag Manager’s context, according to their official documentation, they refer tags as “segments of code provided by analytics, marketing, and support vendors to help you integrate their product into your website or mobile apps”, so bascially you can think of tag like a chunk of script for third party plug-in (like for example: HotJar (a digital expereience insight and behavior analytics tool))

Export Google Analytics to Google Sheets (Manual)

Mon, 13 Nov 2023 00:00:00 +0000

In this tutorial I will guide you through how to export google analytics data manually on the Google Analytics page

Step-1: open panel exporting from

First, proceed to the page you would like to export. For instance in thise example I want to export the “all page’s views and performances”, (located at “behavior > site content > all pages”).

Step-2: narrow down the records

Second, you will need to narrow down the number of records you would like to export via selecting a desired “date range” and “row, page”. The export will only happen on the data that is currently getting displayed, if you want to export more data, you’ll either have to change the date, or the number or rows and pages. Depending on the quantity of your data, you might need to narrow it down for the sake of processing efficiency, otherwise the web application might get stuck.

Export Google Analytics to Google Sheets (using Add-on)

Mon, 13 Nov 2023 00:00:00 +0000

Step-1 : Google Account Logged-in

To begin with, make sure you are logged in the proper google account, we will use the same account for all of the Google related product in the upcoming steps, including “Other” and “Google Sheets”.

Step-2: Install Add-on

Secondly, with the same google account open “google sheet”, then open “extension > add-on > get add-on" and install the google analytics add-on as denoted in the screenshot:

Shield for Apache Server using htaccess/htpasswd

Mon, 13 Nov 2023 00:00:00 +0000

Intuition

In some cases, drupal shield may not be available, or is very risky to use; I’ve ran into occasions where I’ve enabled drupal shield, and get compeltely blocked out of the system. (Trust me, I’ve tried putting numerous different “disable shield” command in the settings.php, and in those occasions none of them worked !).

That brings me to the good old apache method of htpasswd of which: is used to create and update the flat-files used to store usernames and password for basic authentication of HTTP users. If htpasswd cannot access a file, such as not being able to write to the output file or not being able to read the file in order to update it, it returns an error status and makes no changes."

Browser CORS policy

Wed, 08 Nov 2023 00:00:00 +0000

Intuition

To begin with we need to answer a simple question, why do we need to block traffic from one site to another site, and have everything controlled in this CORS policy ?

Imagine there’s two site, site A is a legitimate banking website that provides online finance services, site B is a phishing website that tries to spoof the website A. As a developer you might be aware of API’s, and the legitimate banking website is using exactly that to transfer money from account to account, for instance: “https://bank-site-a.com/api?from=account1&to=account2”. If without any security policy, the phishing site B can copy this exact link and place it on some easily found buttons or links, and once a user (with logged in bank account) clicks on these buttons or links, the transaction will be triggered without the user’s permission.

How does Mail works with DNS MX records

Wed, 01 Nov 2023 00:00:00 +0000

Breakdown of the email address

In general a email address is in formatted as username @ domain.com, we can break it down into:

Address after the @ sign, here domain.com, this is the domain of the target mail server, your server will check MX records of this domain from the DNS server, and sends the email to the corresponding IP of the domain.
Address before the @ sign, here username, is where the mail receiving server will put your emails at. In a classical mail (receiver) server, each user will have a unique folder, once a user ges a email from somebody on the internet, his/her email will get stored into this folder, here imagine there’s a \username folder where all the .eml files will be located at.

Sending email with help of DNS system

Email server is distinctive from the DNS system, in order for the email to work, the DNS system must be working. As the DNS system is the one that translates the domain name to the IP address, and the IP address is the one that is used by the email server to send and receive emails.

#Other on Simon's Blog

Synology Git Service (using SSH Key to Authenticate)

Preliminary Setups

Step 1: Enable SSH Service from DSM

Step 2: Install and Enable Git Server

(Optional) Step 3: Create a New Shared Folder

[PENDING] Exporting Ulysses to Markdown Format

[Scribble] Run CRON Jobs (Scheduled Tasks) in CPanel

[Scribble] Web Component - 101 Examples

[Scribble] Web Component - Opponent & Proponents

[Quick Note] Access Database in Docker Container (for GovCMS Local Dev)

[Pearson PTE] English Test Note - 全题型考试要点 - (Nydia笔记整理)

写作 Writing

口语 Oral

[Pearson PTE] English Test Note - 全题型考试要点 - (个人笔记整理)

Self-Introduction

[Note] Drupal Sandbox Prevent Google Index

Prevent Crawler from Indexing Sandbox

(Optional) Extra Steps if File/Page Already Indexed

[Note] Test Website before Pointing Domain to Server (DNS)

Scenario to Use This Technique ?

Steps to Setup local DNS name resolution ?

[Note] Connect to Server using SSH Key (& 1Password agent)

TLDR;

[Note] VSCode Terminal Jump To Start/End-of-the-line using Keyboard Shortcut

Reference

[Note] How is a SSH secure connection established (simplified) ?

Format Twig File with Tailwind Utility Class via Prettier

TLDR;

[Note] VSCode Tasks.json - for reference purpose

TLDR - Demo task.json file

[Note] Using Figma MCP in Agent Code Editor

Introduction

Setup Steps

Step 1: Enable MCP Server in Figma

Step 2: Configure Your MCP Client (IDE)

Step 3: Start Using MCP in Your Client

[Note] Accordion using HTML 'details' and 'summary' elements

The OLD way of Accordion

[Note] Popup Modal using HTML 'dialog' Element

The OLD way of building Popups

Example Custom Modal using <Div> Element

[Note] What is Schema Markup (schema.org) ? Why is it important for SEO ?

TLDR;

[Note] Parameters to assess ChatBot products ?

Quick Comparison

GitHub Programmable AI ? [PENDING]

IP Address Cannot Access Website (How does DNS server work behind the theme to protect your website)

Expected Behavior

Address Input Auto-Complete (via Google Place API)

index.md

index.js

Reference

LLM - Useful Prompt & Prompt Generation

Useful Prompt

Reading

Translate

Understand

LLM: Prompt Engineering

Intuition Behind this Post ?

Leaflet vs Mapbox (mapbox-tile, mapbox-js, mapbox-gl-js)

Comparison - Overview

Comparison - In Depth

Leaflet

GeoJSON - [PENDING]

PENDING !!!!!!!!!!!

Leaflet 101

What is Leaflet ?

Mapbox 101

What is Mapbox ?

Anti-aliasing vs Subpixel Anti-aliasing

What is anti-aliasing

ISO 8601 Time Encode

Quick Reference Sheet

BTT Configuration

Reference

What/Why Google Tag Manager (GTM)

Intuition

Export Google Analytics to Google Sheets (Manual)

Step-1: open panel exporting from

TLDR - Demo `task.json` file