DEV Community: Vuong

VSCode: Gaining back some of screen space by customizing the line number column

Vuong — Sat, 25 Oct 2025 07:25:31 +0000

This is just another post of how to gain some spaces for reading code on VSCode when you don't have time to touch grass.

I wrote this because it's worth for learning and sharing about how we could have good developer experience in our daily tools.

Problem

And here in below is the one that I want after applying the change.

Solution

I read many blog posts and also issues on VSCode GitHub repository about tricks to maximize the free spaces here by adjusting the settings. I want to show the settings and also explain in below that why you should or should not adjust it.

{
    // How to gain some little spaces to see more code?
    // 1. If you dont want to see debugging breakpoints
    "editor.glyphMargin": false,
    // 2. If you dont want to see folding
    "editor.folding": false,
    // 3. If you dont want to see line numbers
    "editor.lineNumbers": "off",
    // 4. If you still want to see line numbers but make the right space be smaller
    // This config isn't officially documented, so it's blur
    "editor.lineDecorationsWidth": 6,
}

Everything is ok as long as you don't miss any ability after disabling settings, right?

1. Glyph margin

I would call it as debugging breakpoints region/area

Note: It also be useful for using Bookmark extension because the bookmark icons will also be shown as this column as well.

Breakpoints are useful for debugging purpose, obviously. But if your style is only about dump and die in PHP or console.log and return in Javascript, then this feature is almost useless. This is not wrong or right in your way to debug your code, as long as your languages allow it.

But what if I want to disable this feature for almost all languages and only enabled it on some specific languages that I actually use breakpoints for debugging?

Thanks to VSCode as they supported language-scoped settings and it's very simple:

{
    "editor.glyphMargin": false,
    // Enable features for Go files
    "[go]": {
        "editor.glyphMargin": true
    },
}

And this is the result:

Additionally, this is an interesting issue which has been declined to fix: https://github.com/Microsoft/vscode/issues/63215

2. Folding

What is the folding? It's actually expand and collapse code blocks actions.

If you disable this folding setting, the shortcuts along with expand/collapse actions will also be disabled which mean you will lose the feature.

After found this issue, I feel it's quite unexpecting and to be honest, I think the behavior should be corrected to let users control what happens on UI but still be able to use its shortcuts.

I actually created an issue but sadly it has been closed as it didn't have enough minimum thumb ups to make it happen in the planning backlog: https://github.com/microsoft/vscode/issues/229267

3. Line numbers

I never seen developers who want to disable it, to be honest. But i think it might be still very useful in case I want to right markdown stuffs as it's not too important to look at no-code stuffs with line numbers. I probably want to use the language-scoped settings like the (1) point to have it disabled on markdown.

So enable or disable this setting is subjective.

Toggle settings group

You may want to know if there is a way to quickly toggle a group of settings instead of manually changing one by one as it's quite inconvenient, right?

So here is a beautiful extension called Settings Cycler - which will help you on that.

See their blog to understand about it more: https://medium.com/hack-visual-studio-code/toggle-any-setting-in-vs-code-using-keyboard-shortcut-arguments-cdb5ddc56955

References

https://code.visualstudio.com/docs/editing/codebasics#_folding
https://stackoverflow.com/questions/44912058/is-there-a-way-to-make-vscode-line-number-field-smaller-width
https://github.com/microsoft/vscode/issues/93887

Here are also some interesting issues:

https://github.com/microsoft/vscode/issues/206914
https://github.com/microsoft/vscode/issues/30795

Conclusion

It's everything I have, hope this explanation is helpful for you. If you have read and find limitations could be fixed, let me know. Thanks!

Reading Hacker News weekly posts with GitHub CLI

Vuong — Sun, 15 Jun 2025 15:36:05 +0000

I used to subscribe to the Hacker News weekly email newsletter, but for some reason, I stopped receiving those emails.

Fortunately, I discovered the headllines/hackernews-weekly repository, which is active and regularly updated.

Using the GitHub mobile app, I can easily keep up with the latest Hacker News content. We could read it from terminal as well! Using GH CLI just cool-enough to help me for having that kind of fun experience.

Usage

Use gh to interact with GitHub from the command line

First, log in to GitHub CLI by running:

gh auth login

To list available articles, use:

gh issue -R headllines/hackernews-weekly list

To view a specific article, run:

gh issue -R headllines/hackernews-weekly view <issue_number>

Enhancing reading experience

To shorten GitHub CLI commands, I use zsh-abbr:

abbr hn="gh issue -R headllines/hackernews-weekly"

Now, running hn list will display the list of GitHub issues:

And hn view 288 will show issue #288, which contains the top 10 posts:

Sometimes, I would like to quickly fetch and read a website as markdown as well. I need to install some tools:

pandoc: Convert tool, we can use it to covert HTML content to markdown
glow: Render markdown files directly in the terminal

I have a small bash function to cache article content for offline reading or quick access later, add it into my ~/.zshrc:

function html2md() {
    cache_dir="$HOME/Downloads/html2md"
    cache_file="$cache_dir/$(echo -n "$1" | shasum | awk '{print $1}').md"
    mkdir -p "$cache_dir"

    if [ -f "$cache_file" ]; then
    else
        pandoc -f html -t gfm-raw_html "$1" | tee "$cache_file"
    fi

    glow "$cache_file"
}

To read a specific link, simply run:

html2md https://fly.io/blog/youre-all-nuts/

This will display:

Docker: Allow SSH tunnelling for MySQL

Vuong — Sun, 04 May 2025 11:10:20 +0000

MySQL Docker images usually come without SSH connection. It's fine for apps to connect within an internal network, but need additional work to have SSH connection to access it remotely.

Overview

Here is how it looks for this setup

Let's have some code

We need a Dockerfile to inherit from original Dockerfile

FROM mysql:8.0-debian

# Install SSH server
RUN apt-get update && apt-get install -y openssh-server && \
    mkdir /var/run/sshd && \
    echo 'root:yourpassword' | chpasswd && \
    sed -i 's/#PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config && \
    sed -i 's/#PasswordAuthentication yes/PasswordAuthentication yes/' /etc/ssh/sshd_config

# Ensure SSH service starts properly
RUN echo '/usr/sbin/sshd' >> /etc/bash.bashrc

# Expose SSH and MariaDB ports
EXPOSE 22 3306

# Copy a script to start both SSH and MariaDB
COPY start.sh /start.sh
RUN chmod +x /start.sh

# Use the custom start script as the entry point
ENTRYPOINT ["/start.sh"]

Entrypoint

#!/bin/bash
# Start the SSH server
service ssh start

exec /usr/local/bin/docker-entrypoint.sh mysqld

Example of docker-compose.yml

services:
  db-ssh:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    platform: linux/amd64
    ports:
      - "2222:22"
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: demodb
      MYSQL_USER: demo

It's done for coding!

Let's connect

By terminal

# To connect to SSH server
ssh root@localhost -p 2222
# Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
# Password is what you have set in Dockerfile

# After access SSH server, we can connect to MySQL server
# Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent permitted by applicable law.
# Last login: Sun May  4 10:44:44 2025 from 192.168.228.1
root@4fb7b6bc3e1b:~# mysql -h localhost -u root -p
Enter password: root

# Then it will show you this
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 13
Server version: 8.0.41 MySQL Community Server - GPL

Copyright (c) 2000, 2025, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

By GUI app (Sequel Ace)

MySQL Host is localhost because it uses internal address within container.

Use Finicky to direct urls to multiple Chrome profiles at workplace

Vuong — Wed, 13 Mar 2024 01:54:16 +0000

Finicky is a macOS utility that allows you to configure rules for directing URLs to different web browsers or browser profiles. Using it to direct URLs to multiple Chrome profiles at the workplace can be useful for separating work-related browsing from personal activities or for managing different projects. With this optimal way, you can gain the benefit of not wasting your time to re-do actions to make it works well with your browser sessions.

It's very helpful at some tasks like:

Handle URL clicks on other applications and direct it to the right profile:
- Open personal URLs (e.g. social media, unrelated-to-work URLs) with personal profile. For example: Twitter, StackOverflow, Google Search,...
- Open related-to-work URLs with work profile (e.g. company sites, company sites on cloud). For example: Jira, GitLab, GitHub, internal websites,...
- Open project URLs under a Google profile for that project.
Redirect the url for local Docker sites to localhost
Any URLs you could use by open under a browser.

Here's a guide on how to do it:

Step 1: Install Finicky

If you haven't already, install Finicky on your macOS device. You can download and install it from its GitHub repository or by using a package manager like Homebrew:

brew install finicky

Step 2: Set up Chrome Profiles

Make sure you have multiple Chrome profiles set up for different purposes. You can create these profiles in Chrome's settings by these steps:

On your computer, open Chrome.
At the top right, click Profile .
Click Add. If you choose to Sync to your Google Account, your profile name will automatically be your Account name.
Choose a name, photo and color scheme.

Here is mine:

Step 3: Configure Finicky

Once Finicky is installed, you need to create a configuration file named .finicky.js in your home directory (~). You can use a text editor of your choice to create and edit this file.

touch ~/.finicky.js

Open .finicky.js in a text editor and add the following configuration:

module.exports = {
  // default profile and browser if the URL doesn't match any rules
  defaultBrowser: {
    name: "Google Chrome",
    profile: "Default",
  },
 // App settings
  options: {
    hideIcon: false,
    checkForUpdate: true,
  },
  // Handlers are matchers
  handlers: [
    {
      match: [
        // all sub domains of company
        // and all company subdomains of other sites
        "*company.*/*",
        // to handle localhost with port
        "localhost/*",
        "localhost:*/*",
        "*.companyDevTools.team/*",
        "*.datadoghq.eu/*",
        "*.amazonaws.com/*",
        "docs.google.com/*",
        "drive.google.com/*",
      ],
      browser: {
        name: "Google Chrome",
        profile: "Profile 1", // Main work profile
      },
    },
  ],
  // Rewrite URLs
  rewrite: [
    {
      match: () => true, // Execute rewrite on all incoming urls to make this example easier to understand
      url: ({ url }) => {
        const removeKeysStartingWith = ["utm_", "uta_"]; // Remove all query parameters beginning with these strings
        const removeKeys = ["fbclid", "gclid"]; // Remove all query parameters matching these keys

        const search = url.search
          .split("&")
          .map((parameter) => parameter.split("="))
          .filter(([key]) => !removeKeysStartingWith.some((startingWith) => key.startsWith(startingWith)))
          .filter(([key]) => !removeKeys.some((removeKey) => key === removeKey));

        return {
          ...url,
          search: search.map((parameter) => parameter.join("=")).join("&"),
        };
      },
    },
    {
      // Docker container names to localhost, remember to expose the ports first
      // For the case that s3mock is a likely AWS S3 on local, I write its URL inside a container, I saw the logs which included URL, I click on the URL, then Finicky handles it by rewriting and open as localhost in the right profile
      match: ({ url }) => [
        "s3mock"
      ].includes(url.host),
      url: ({ url }) => ({
        ...url,
        host: "localhost",
      }),
    }
  ],
};

How to find a profile name?

Use this command and find your profiles:

ls ~/Library/Application\ Support/Google/Chrome/ | grep Profile

Look at this screenshot:

Adjust the match conditions, browser, and profile values according to your requirements and the URLs you want to route to specific Chrome profiles.

Step 4: Test the Configuration

Save the .finicky.js file and it will be reloaded automatically, as long as you enabled this option in Finicky settings.

If you disabled auto reload, so just click Config > Reload manually on the taskbar icon.

Now, open URLs that match the rules defined in your .finicky.js configuration, and Finicky should direct them to the appropriate Chrome profiles based on your rules.

Additional Tips:

Remember to adjust your configuration file if your workplace's URLs or your Chrome profiles change.
You can add as many rules as needed to handle different URLs and profiles.
Be mindful of the performance impact of running multiple Chrome profiles simultaneously, especially if your computer has limited resources.
Console... could help for debugging a link and also show you how the links get handled by Finicky.
A good alternative is Choosy. Finicky also supports other browsers. But I'm happy with Finicky on Chrome.

VSCode: Show PHP code coverage with PHPUnit

Vuong — Sun, 14 May 2023 12:41:48 +0000

This post is listed points that I've worked to make code coverage works for my PHP. Mostly for reading again in my future but also able to share to everyone.

Install xdebug

https://xdebug.org/docs/install#pecl

pecl install xdebug

Enable xdebug if you're using it in Docker

docker-extension-enable xdebug

To check if Xdebug is already enable

php -i | grep xdebug

Coverage Gutters extension

To show coverage gutters in VSCode for most of the programming languages, install this extension

Name: Coverage Gutters
Id: ryanluker.vscode-coverage-gutters
Description: Display test coverage generated by lcov or xml - works with many languages
Version: 2.10.4
Publisher: ryanluker
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters

It helps to quickly run test with shortcut, you can have a preset of settings like every setting you could have CLI command or phpunit.xml.dist.

Extension's setting

{
    "coverage-gutters.showLineCoverage": true,
    "coverage-gutters.coverageBaseDir": "test-reports", // equivalent to ${workspaceFolder}/test-reports
}

To run the unit tests and see the coverage

Run this command on terminal, your root project folder:

XDEBUG_MODE=coverage ./vendor/bin/phpunit --configuration phpunit.xml.dist --coverage-clover test-reports/cov.xml

Then Toggle Coverage by Command Palette in VSCode

Dealing with PHPUnit mock types in VSCode

VSCode sometimes show error when writing Mock (but PHPStorm doesn't), this part can be solved by manual step:

It's really helpful to also install the Language Protocol Server for PHP https://intelephense.com/

https://github.com/sebastianbergmann/phpunit/blob/1f5e1334bb5de60471251a2392a9cc8d43bc4174/.phpstorm.meta.php

Copy this file to any child folder of the project, better to any git ignored folder. Then Intelephense can automatically solve the invalid type of VSCode. Which happened when you create mock from a class, and VSCode doesn't know how to detect it as original class or MockObject class, normally it will show as error if you don't do this step.

Why your code can't be cover?

PHPUnit configuration: https://docs.phpunit.de/en/9.5/code-coverage-analysis.html
- Add PHPUnit @cover tag in test class/functions.

This post are also related to XDebug https://dev.to/arielmejiadev/set-xdebug-coverage-mode-2d9g

https://xdebug.org/docs/all_settings#mode

Percona Monitoring with Postgres Docker on local environment

Vuong — Mon, 03 Oct 2022 15:07:58 +0000

You have a Postgres running in Docker container, but don't know how to monitor its active connections. Percona Monitor can be considering for using in this case.

Install PMM

https://docs.percona.com/percona-monitoring-and-management/setting-up/server/docker.html#run-docker-with-volume

To access the web UI with port 80

If you don't want to use the port 443 in local (because it might be complicated to setup the key/cert/pem), can also use port 80.

docker run --detach --restart always \
--publish 8889:80 \
-v pmm-data:/srv \
--name pmm-server \
percona/pmm-server:2

It will map port 8889 of host computer to port 80 on the container

Add new instance to PMM

After login into the tool, we can go to add the instance of DB that we want to do monitoring.

Then, ensure the pmm-server joins the network of DB, so it can connect to the instance DB host with container name:

docker network ls

Given example that DB of your service is running on dev_default, here is how to add pmm-server into that network:

docker network connect dev_default pmm-server

After pmm-server joining the network, we can just simply setup the instance:

Then click on Add service.

Enable the pg_stat_statements to have ability of looking at query analysis

This article is useful: https://gist.github.com/lfittl/1b0671ac07b33521ea35fcd22b0120f5

Query to test after enabling

SELECT /* pmm-agent:pgstatstatements */ "pg_stat_statements"."userid", "pg_stat_statements"."dbid", "pg_stat_statements"."queryid", "pg_stat_statements"."query", "pg_stat_statements"."calls", "pg_stat_statements"."total_time", "pg_stat_statements"."rows", "pg_stat_statements"."shared_blks_hit", "pg_stat_statements"."shared_blks_read", "pg_stat_statements"."shared_blks_dirtied", "pg_stat_statements"."shared_blks_written", "pg_stat_statements"."local_blks_hit", "pg_stat_statements"."local_blks_read", "pg_stat_statements"."local_blks_dirtied", "pg_stat_statements"."local_blks_written", "pg_stat_statements"."temp_blks_read", "pg_stat_statements"."temp_blks_written", "pg_stat_statements"."blk_read_time", "pg_stat_statements"."blk_write_time" FROM "pg_stat_statements" WHERE queryid IS NOT NULL AND query IS NOT NULL;

Practice some DB activities on the service, then choose the menu to see the new monitoring data in this menu

The data looks cool now when checking dev-db host.

It's done to setup PMM with Postgres on the local env.

Use Regex to match multi Kafka topics Grafana Dashboard

Vuong — Sat, 08 Jan 2022 03:41:30 +0000

In Grafana Dashboard, when we need to create a new Dashboard to show how many messages has produced by Kafka topics (with Kafka exporter + Prometheus) in a period, we can specify every topic as single metric like this below image

It works fine for sure! But what if you have more than 2 topics and your topics actually have the same pattern which could be matching by regex. The next time, if any new topic gets created, the dashboard will automatically reflect and show on the Grafana dashboard, then you don't have to do it as the “old” way.

Here is the query from image above

sum(delta(kafka_topic_partition_current_offset{job="kubernetes-service-endpoints",kubernetes_name="prod-global-kafka-exporter", topic=~"{{regex1}}", topic!~"{{regex2}}"}[1m])) by (topic)

{{regex1}}: Replace with a regular expression to match any topic we want to show. Example: prod-myservice.*
{{regex2}}: Replace with a regular expression to match any topic we want to avoid showing. Example: prod-myservice.+deprecated.*

A useful web tool to check if the regex could work is https://regex101.com/.

Referenced sources

Grafana: https://grafana.com/
Prometheus: https://prometheus.io/
Kafka exporter for Prometheus: https://github.com/danielqsj/kafka_exporter

Happy monitoring!

VSCode: Font ligatures and textmates for Go code

Vuong — Sun, 10 Oct 2021 09:41:36 +0000

Have you seen this below style in VSCode before?

It might be called as Cursive fonts, Stylistic italic, ...

I decided to write this article after figure out how it can work, and it was not really have an existing article yet.

It works if following these general parts:

A font supports ligatures and its configuration
VSCode text mate rules configuration

Font ligatures is a great feature in VSCode, it has convinced me to switch from Sublime Text to VSCode in the past.

The good fonts support font ligatures and free are Fira Code, Cascadia Code. The current one I'm using is Cascadia Code because it's nice, and it gets updates frequently along with Windows Terminal — a new powerful terminal app on Windows.

Fira Code: https://github.com/tonsky/FiraCode
Cascadia Code: https://github.com/microsoft/cascadia-code
Windows Terminal: https://github.com/Microsoft/Terminal

Cascadia Code

We can get the installation via so many ways: brew, scoop, choco, download directly from release page on its GitHub page.

After get installed in your OS system, add this configuration to your VSCode

{
    // first item for Windows, next item for macOS
    // because I use sync settings for multiple OS
    "editor.fontFamily": "'Cascadia Code PL', 'CascadiaCodePL', Consolas",
    // setting font ligatures as https://github.com/microsoft/cascadia-code#font-features
    "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",
    // this is optional, it makes the weight of default font become lighter.
    // Otherwise if we set font to 'Cascadia Code PL SemiLight' as it would be the same but it could'nt work with font ligatures.
    // "editor.fontWeight": "350"
}

Text mate rules

Text mate rules configuration is textMateRules — a child of editor.tokenColorCustomizations in VSCode settings, it helps to set colors and styles using textmate theming rules (as VSCode explained)

We have to add this below configuration into settings to make some specific parts in code file get formatted by Stylistic/Cursive fonts, as Cascadia Code, it should be done with italic style as well.

{
  "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    //following will be in italic (=FlottFlott)
                    "comment",
                    "entity.name.type.class", //class names
                    "keyword", //import, export, return…
                    "constant", //String, Number, Boolean…, this, super
                    "storage.modifier", //static keyword
                    "storage.type.class.js", //class keyword
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    //following will be excluded from italics (VSCode has some defaults for italics)
                    "invalid",
                    "keyword.operator",
                    "constant.numeric.css",
                    "keyword.other.unit.px.css",
                    "constant.numeric.decimal.js",
                    "constant.numeric.json"
                ],
                "settings": {
                    "fontStyle": ""
                }
            }
        ]
    }
}

Then it should be done, the result will be shown if you open a .go file, like the cover of this article.

If you like the theme, it's here: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

GLHF!

Sublime Text: Configure Java LSP

Vuong — Thu, 03 Jun 2021 13:48:08 +0000

We never end up with one software. Sublime Text 4 has been released some days ago, I try to find out a guideline to set up Java LSP. The purpose just for better reading and more freedom on Java projects (for example, I can use Go to definition).

Prerequisites

LSP sublime package
Java binary
Eclipse jdtls, download here http://download.eclipse.org/jdtls/milestones/?d then decompress.

LSP Settings

Search LSP Settings, then apply below configuration to that file. This configuration is specified for Mac user.

// for MacOS

{
    "clients":
    {
        "jdtls": {
            "command": [
                "java",
                "--add-modules=ALL-SYSTEM",
                "--add-opens",
                "java.base/java.util=ALL-UNNAMED",
                "--add-opens",
                "java.base/java.lang=ALL-UNNAMED",
                "-Declipse.application=org.eclipse.jdt.ls.core.id1",
                "-Dosgi.bundles.defaultStartLevel=4",
                "-Declipse.product=org.eclipse.jdt.ls.core.product",
                "-Dfile.encoding=UTF-8",
                "-DwatchParentProcess=true",  // false on windows, true other OSs
                "-Xmx1G",
                "-XX:+UseG1GC",
                "-XX:+UseStringDeduplication",
                "-jar",
                "<path_to>/jdt-language-server-1.1.2-202105191944/plugins/org.eclipse.equinox.launcher_1.6.100.v20201223-0822.jar", // 1. replace the PATH/TO with your own 2. replace * with the file version
                "-configuration",
                "<path_to>/jdt-language-server-1.1.2-202105191944/config_mac", // 1. replace the PATH/TO with your own 2. choose the config folder based on the OS
                "-data",
                "<replace_your_$TMPDIR_here>/T/<project_base_name>/jdt_ws" // replace <TEMP_DIR> with the temp folder in your system. macOS: echo $TMPDIR
            ],
            "enabled": true,
            "languageId": "java",
            "scopes": ["source.java"],
            "syntaxes": ["Packages/Java/Java.sublime-syntax"]
        }
    }
}

// for Windows

{
    "clients":
    {
        "jdtls": {
            "command": [
                "java",
                "--add-modules=ALL-SYSTEM",
                "--add-opens",
                "java.base/java.util=ALL-UNNAMED",
                "--add-opens",
                "java.base/java.lang=ALL-UNNAMED",
                "-Declipse.application=org.eclipse.jdt.ls.core.id1",
                "-Dosgi.bundles.defaultStartLevel=4",
                "-Declipse.product=org.eclipse.jdt.ls.core.product",
                "-Dfile.encoding=UTF-8",
                "-DwatchParentProcess=false",  // false on windows, true other OSs
                "-Xmx1G",
                "-XX:+UseG1GC",
                "-XX:+UseStringDeduplication",
                "-jar",
                "<path_to>\\jdt-language-server-1.1.2-202105191944\\plugins\\org.eclipse.equinox.launcher_1.6.100.v20201223-0822.jar", // 1. replace the PATH/TO with your own 2. replace * with the file version
                "-configuration",
                "<path_to>\\.lsp-tools\\jdt-language-server-1.1.2-202105191944\\config_win", // 1. replace the PATH/TO with your own 2. choose the config folder based on the OS
                "-data",
                "<path_to>\\.lsp-tools\\jdt_ws" // replace <TEMP_DIR> with the temp folder in your system. macOS: echo $TMPDIR
            ],
            "enabled": true,
            "languageId": "java",
            "scopes": ["source.java"],
            "syntaxes": ["Packages/Java/Java.sublime-syntax"]
        }
    }
}

LSP Key Binding

For simple purpose, I just want to use Go to definition. Open LSP Key Binding then paste it

[
    // Go To Definition
    {
        "command": "lsp_symbol_definition",
        "args": {
            "side_by_side": false
        },
        "keys": [
            "ctrl+d"
        ],
        "context": [
            {
                "key": "lsp.session_with_capability",
                "operator": "equal",
                "operand": "definitionProvider"
            },
            {
                "key": "auto_complete_visible",
                "operator": "equal",
                "operand": false
            }
        ]
    },
]

Thanks to

To complete this setup, I have read some useful articles which help me figure out the right way to do.

Troubleshooting

By Cmd+Shift+P and search for "LSP", you can see some kind of log panel to help you debug if something goes wrong.

It's done. Happy coding!

Sublime Text: Configure Go LSP

Vuong — Fri, 01 Jan 2021 18:03:24 +0000

Here is how to configure LSP (language server protocol) for Go development in Sublime Text.

Prerequisites

go
gopls
gotools (gofmt, goimports...)

Packages

sublimelsp/LSP

LSP settings

Open LSP Settings, then paste the below one

// for MacOS

{
    "clients":
    {
        "gopls":
        {
            "command": [
                "<path_to>/go/bin/gopls",
                "-v",
                "-rpc.trace",
                "-logfile=<path_to>/gopls.log"
            ],
            "enabled": true,
            "env": {
                "PATH": "<echo $PATH in terminal then paste its value here>"
            },
            "scopes":["source.go"],
            "syntaxes": ["Packages/Go/Go.sublime-syntax"],
            "settings": {
                "gopls.usePlaceholders": true,
                "gopls.completeUnimported": true,
            },
            "languageId": "go"

        }
    }
}

// for Windows

{
    "clients":
    {
        "gopls":
        {
            "command": [
                "<path_to>\\bin\\gopls.EXE",
                "-v",
                "-rpc.trace",
                "-logfile=<path_to>\\gopls.log"
            ],
            "enabled": true,
            "scopes":["source.go"],
            "syntaxes": ["Packages/Go/Go.sublime-syntax"],
            "settings": {
                "gopls.usePlaceholders": true,
                "gopls.completeUnimported": true,
            },
            "languageId": "go"
        },
    }
}

LSP Key Binding

Search LSP Key Binding then paste the below value into the field

[
    // Go To Definition
    {
        "command": "lsp_symbol_definition",
        "args": {
            "side_by_side": false
        },
        "keys": [
            "ctrl+d"
        ],
        "context": [
            {
                "key": "lsp.session_with_capability",
                "operator": "equal",
                "operand": "definitionProvider"
            },
            {
                "key": "auto_complete_visible",
                "operator": "equal",
                "operand": false
            }
        ]
    },
]

Known Issues

Auto-format on macOS doesn't work but works well on Windows

=====

Updated: This package is now working well with simple set up. https://packagecontrol.io/packages/LSP-gopls

Gofumpt for auto-format also works: https://github.com/mvdan/gofumpt#sublime-text

Magento multiple instances & resource sharing on AWS

Vuong — Sat, 07 Nov 2020 16:24:37 +0000

(I just move the old blog from Medium to dev.to)

For handling media images & static contents. We were listing the solutions we have to try. What is the ability or not as the options of a team have no knowledge about AWS services stack.

Requirement:

Fast even data size is small
Latency is minimal
Ability to scale Magento instances
Easy to handle, permission file heed

Elastic File System (EFS)

No. Very slow if your website has less than 100 GB of data. The time to warm up cache.

EFS always mentions case study with minimum data size is 100 GB. Many blog posts mention it, they're also warning that you only get the good throughput when you have this minimum data size.

Amazon EFS Performance - Amazon Elastic File System

The related EFS & Magento articles:

We didn’t believe in these articles about minimum data size, we tried and failed.

In the first case, we're mounting generated/, var/, pub/ with an ambition that we can scale a new instance without warming cache on it. Just provisioning, pull the code, build-and-up our instance.

In the second case, we only mount pub/media, pub/static … (need update)

If you still consider to use with a correct, I hope this post will help you more:

Improving performance when upgrading Magento 2 with Elastic File System

Elastic Block System (EBS)

No. Although, it is faster than EFS but EBS just supports mounting to only one EC2 instance. It doesn’t be flexible for scaling.

Yes. If you wouldn’t like to scaling.

S3 (via AWS SDK — S3 client)

github.com/thaiphan/magento2-s3
Use Amazon S3 as the file storage solution for your Magento 2 application

The concept that we can use the command to syncronize local folder to a specific S3 bucket.

See here: https://github.com/thaiphan/magento2-s3/blob/master/Console/Command/StorageExportCommand.php This author used AWS SDK, more detail, he used \AWS\S3\S3Client interacting with S3 server through HTTP requests.

Another repository support for S3, ability to configure in Admin panel:

https://github.com/flagbit/Magento2-Flysystem

S3 & File Gateway (via mounting fundamental)

S3 but no need handing request by plugins. S3 but use a gateway in a middle.

The tutorial to setting up the File Gateway and uses S3 bucket for storing.

Creating AWS File Gateway as an NFS storage for your EC2 instance

This below video will explain more about the big picture for multiple instances mounting:

Conclusion

S3 is a final one for my team to move forwards on Magento with multiple servers and load balancing. Best for price, good for performance on small project.

I can’t finish this article immediately after my team done the work. So now, just write here for sharing the options and some comments on those after tried them.

Turning caching performance on Magento 2.x

Vuong — Sat, 07 Nov 2020 16:12:48 +0000

(I just move this old blog from Medium to dev.to)
Full page cache (FPC) with Varnish & others with Redis

The same with most popular article. This post just mentioned more about plan & server configuration as a specific case for a small project.

Problem

Magento is a big framework, it needs a lot of system resource to initialize instance, running, processing the requests, reading the cached files/media files (Catalog)/static resource files (JS, CSS, template images). The build-in cache of Magento is not good for handling many requests, however it better for a dev env because your computer will cooler than running the web without cache.
Our instance is running on EC2 with small plan.

Magento app/etc/env.php configuration:

MAGE_MODE: default|developer

Those reasons are why we must be considering to have another-faster-cache-engine. In case, we follow this one — Redis.
Use Redis for the Magento page and default cache | Magento 2 Developer Documentation

After installed Redis

It looks better than before. So, we revised session to Redis, faster than file, of course. The backend cache with Redis faster than as well.

The comparison:

Without FPC (build-in backend cache + session in files):
Home page: 2.6 requests/sec
Product list: not updated yet
Product detail: not updated yet
Search: not updated yet
Sample API: not updated yet

With build-in FPC (build-in backend cache + session in files):
Home page: 4.5 requests/sec
Product list: not updated yet
Product detail: not updated yet
Search: not updated yet
Sample API: not updated yet

With Redis for all FPC, backend cache, session:
Home page: 11.5 requests/sec
Product list: not updated yet
Product detail: not updated yet
Search: not updated yet
Sample API: not updated yet

Varnish

Very fast, at least x10 times of Redis FPC. Because the first request will touch your system, your DB, your engine then the Varnish making cache data for all HTML of rendered page. The second users just access to the cached-version of HTML website. Nothing be threats for your server anymore.

But, I’m still facing problem: 503 backend load failed, it’s investigating. Not done yet.

I already left this product. Just write here as my experience.

DEV Community: Vuong

VSCode: Gaining back some of screen space by customizing the line number column

Problem

Solution

1. Glyph margin

2. Folding

3. Line numbers

Toggle settings group

References

Conclusion

Reading Hacker News weekly posts with GitHub CLI

Usage

Enhancing reading experience

Docker: Allow SSH tunnelling for MySQL

Overview

Let's have some code

Let's connect

By terminal

By GUI app (Sequel Ace)

Use Finicky to direct urls to multiple Chrome profiles at workplace

Step 1: Install Finicky

Step 2: Set up Chrome Profiles

Step 3: Configure Finicky

Step 4: Test the Configuration

Additional Tips:

VSCode: Show PHP code coverage with PHPUnit

Install xdebug

Enable xdebug if you're using it in Docker

To check if Xdebug is already enable

Coverage Gutters extension

Extension's setting

To run the unit tests and see the coverage

Dealing with PHPUnit mock types in VSCode

Why your code can't be cover?

Percona Monitoring with Postgres Docker on local environment

Install PMM

To access the web UI with port 80

Add new instance to PMM

Enable the pg_stat_statements to have ability of looking at query analysis

Use Regex to match multi Kafka topics Grafana Dashboard

Referenced sources

VSCode: Font ligatures and textmates for Go code

Cascadia Code

Text mate rules

Sublime Text: Configure Java LSP

Prerequisites

LSP Settings

LSP Key Binding

Thanks to

Troubleshooting

Sublime Text: Configure Go LSP

Prerequisites

Packages

LSP settings

LSP Key Binding

Known Issues

Magento multiple instances & resource sharing on AWS

Elastic File System (EFS)

Elastic Block System (EBS)

S3 (via AWS SDK — S3 client)

S3 & File Gateway (via mounting fundamental)

Conclusion

Turning caching performance on Magento 2.x

Problem

After installed Redis

Varnish

Read more