Hexa's Blog

How to install phx_new manually from source code?

05/06/2025 @ Saigon Elixir

Before going further, you must prepare your dev environment. I choose asdf - version manager. This is my .tool-versions

erlang 28.0
elixir 1.18.4

1. Clone the source code

In this post, I choose the latest version v1.8.0-rc.3

$ git clone --depth 1 --branch v1.8.0-rc.3 git@github.com:phoenixframework/phoenix.git

2. Go to directory phoenix/installer and build

$ cd phoenix/installer;
$ MIX_ENV=prod mix archive.build;
# Output
Compiling 11 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.8.0-rc.3.ez" with MIX_ENV=prod

3. Install archive

$ mix archive.install phx_new-1.8.0-rc.3.ez
# Output
Are you sure you want to install "phx_new-1.8.0-rc.3.ez"? [Yn] Y
* creating /home/nguyenvinhlinh/.asdf/installs/elixir/1.18.4/.mix/archives/phx_new-1.8.0-rc.3


$ mix phx.new --version
# Output
Phoenix installer v1.8.0-rc.3

4. How to remove phx_new

$ mix archive.uninstall phx_new

Mkdocs, How to maximize content space width?

03/06/2025 @ Saigon etc

This post is all about maximize content space for Mkdocs sites. The main solution is to override css and set max-width: 100%;

1. Create docs/style.css

.md-grid {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

2. Modify mkdocs.yml to use docs/style.css

extra_css:
  - style.css
[1] Before maximize content space/width
[1] Before maximize content space/width
[2] After maximize content space/width
[2] After maximize content space/width

Thông số dây AWG

28/05/2025 @ Saigon etc

AWG Code Max(A)   AWG Code Max(A)
10 55      
-—- -—-   -—- -—-
11 47   21 9
12 41   22 7
13 35   23 4.7
14 32   24 3.5
15 28   25 2.7
-—- -—-   -—- -—-
16 22   26 2.2
17 19   27 1.7
18 16   28 1.4
19 14   29 1.2
20 11   30 0.86

Câu hỏi và trả lời

1. Thông số Max(A) này là cột nào trong https://www.powerstream.com/Wire_Size.htm?

Tôi sử dụng cột Maximum amps for chassis wiring

2. Chassis Wiring là gì?

Chassis Wiring – Dây trong thiết bị/bo mạch (nội bộ).

Ứng dụng: Bên trong tủ điện, thiết bị điện tử, bảng mạch, bo mạch nguồn.

3. Power Transmission Wiring là gì?

Power Transmission – Truyền tải điện (ngoài trời hoặc công nghiệp)

Ứng dụng: Dây điện trong nhà, ngoài trời, hệ thống cấp điện công nghiệp, trạm biến áp.

4. Tại sao có sự khác biệt lớn đến như vậy giữa "Maximum amps for chassis wiring""Maximum amps for power transmission"?

Tóm tắt lại sau cùng là vì vấn đề sinh nhiệt.

Chassis Wiring – Dây trong thiết bị/bo mạch (nội bộ)

Mức dòng (amps) cao hơn

  • Chiều dài dây thường rất ngắn, nên điện trở tổng thể thấp ==> tổn thất điện năng và sinh nhiệt ít.
  • Lắp đặt trong môi trường có thể kiểm soát, chẳng hạn như bên trong hộp kim loại, thiết bị điện tử, nơi đã được tính toán kỹ về tản nhiệt.
  • Được thiết kế chịu tải trong thời gian ngắn, rất ngắn ==> không gây nguy cơ cháy nổ

Power Transmission – Truyền tải điện (ngoài trời hoặc công nghiệp)

Mức dòng (amps) thấp hơn do:

  • Chiều dài dây rất dài, tăng điện trở ==> tăng nhiệt ==> nguy cơ cháy hoặc hỏng cách điện.
  • Dây thường được bó lại hoặc đi qua ống, làm giảm khả năng tản nhiệt.
  • Yêu cầu độ an toàn và ổn định cao, vì đây là hệ thống truyền tải điện liên tục.
  • Có thể đi qua môi trường khắc nghiệt, nên cần giới hạn dòng để đảm bảo độ bền dây lâu dài.

References

ESP32, DoIt Devkit V1 Pinout

20/05/2025 @ Saigon ESP32

[1] ESP32, DoIt Devkit V1 PINOUT
[1] ESP32, DoIt Devkit V1 PINOUT

References

How to integrate DaisyUI - Nexus Dashboard to Phoenix Web Framework 1.8

05/05/2025 @ Saigon Elixir

This post will guide you integrate Nexus Dashboard to Phoenix Web Framework. First of all, you should buy and use Nexus Dashboard instead of craking it!

I will assume that you did download and unzip the web dashboard template, The latest version is 2.2.0.

Step 1: Go to nexus directory, find css assets.

My nexus version is 2.2.0, after unzip, you will need to go to nexus-html@2.2.0/src/styles/.

All css assets here! The whole point now is to replace phoenix app.css to nexus app.css.

The nexus app.css look like this:

/* Root Styling */
@import "./typography.css";
@import "./tailwind.css";
@import "./daisyui.css";

/* Custom Styling */
@import "./custom/animation.css";
@import "./custom/components.css";
@import "./custom/layout.css";

/* Plugin Overriding */
@import "./custom/plugins.css";

/* Pages */
@import "./custom/landing.css";

/* Plugin: Iconify (Lucide icons) */
@plugin "@iconify/tailwind4" {
    prefixes: lucide;
}

As you can see, they use import another css in relative paths. When we integrate it with phoenix, we need to take care those paths.

Step 2: Copy nexus css assets to phoenix web app

In phoenix web app, open directory /assets/css/ and create a new sub-directory named nexus_dashboard. In this assets/css/nexus_dashboard, copy nexus css into this, except app.css.

This is a directory tree after copy for assets/css/nexus_dashboard

$ tree assets/css/nexus_dashboard

assets/css/nexus_dashboard
├── custom
│   ├── animation.css
│   ├── components.css
│   ├── landing.css
│   ├── layout.css
│   └── plugins.css
├── daisyui.css
├── tailwind.css
└── typography.css

Step 3: Create nexus_app.css from nexus app.css

Now, come back the app.css, I don’t want a conflict with the existing one app.css, so I named a new main css file as nexus_app.css. In addition, due to different relative paths, I must update these with ./nexus_dashboard.

This is my content for nexus_app.css:

/* Root Styling */
@import "./nexus_dashboard/typography.css";
@import "./nexus_dashboard/tailwind.css";
@import "./nexus_dashboard/daisyui.css";

/* Custom Styling */
@import "./nexus_dashboard/custom/animation.css";
@import "./nexus_dashboard/custom/components.css";
@import "./nexus_dashboard/custom/layout.css";

/* Plugin Overriding */
@import "./nexus_dashboard/custom/plugins.css";

/* Pages */
@import "./nexus_dashboard/custom/landing.css";

/* Plugin: Iconify (Lucide icons) */
@plugin "../node_modules/@iconify/tailwind4" {
    prefixes: lucide;
}

Step 4. Modify phoenix web app, config/config.exs

Go to config/config.exs, find config for :tailwind and modify it to use nexus_app.css. For example:

config :tailwind,
  version: "4.1.4",
  mining_rig_monitor: [
    args: ~w(
      --input=css/nexus_app.css
      --output=../priv/static/assets/nexus_app.css
    ),
    cd: Path.expand("../assets", __DIR__)
  ]

Step 5. Modify assets/css/nexus_dashboard/tailwind.css

This gonna help tailwind find used css class, then it build nexus_app.css

@import "tailwindcss" source(none);
@source "../../../lib/your_phoenix_web";

Step 6. Build and debug

You gonna see a lot of missing javascrip library from now on, but I will show you how to solve it. At first, run mix tailwind _project_name.

100% you gonna see missing daisyui.js and daisyui-theme.js in assets/css/nexus_dashboard/daisyui.css. To solve it, you need to use relative path to assets/vendor/daisyui.js and assets/vendor/daisyui-theme.js. I would like to keep these file as is. When you create phoenix 1.8 project, daisyui.js and daisyui-theme.js is already there!.

if you delete these files and want it back, you can find it here: Use daisyUI with Tailwind CSS Standalone CLI

For example, this is my assets/css/nexus_dashboard/daisyui.css.

There are more relative paths need to be updated. Take care!

@plugin "../../vendor/daisyui.js" {
    exclude: rootscrollgutter;
}

@plugin "../../vendor/daisyui-theme.js" {
    name: "dark";
    color-scheme: dark;
    prefersdark: true;

In addition, you gonna see a mission iconify/tailwind4 library. At this point, there is no choice but using npm ecosystem. In assets, run npm install @iconify-json/lucide and @iconify/tailwind4.

This is content for assets/package.json. I really want to depend as less as possible the npm ecosystem, but have no choice.

{
  "dependencies": {
    "@iconify-json/lucide": "^1.2.39",
    "@iconify/tailwind4": "^1.0.6"
  }
}

At this point, you should be able to run mix tailwind phoenix_app_name to build your nexus_app.css.

$ mix tailwind mining_rig_monitor
/*! 🌼 daisyUI 5.0.28 */
≈ tailwindcss v4.1.4

Done in 286ms

A minor note for you, cause you need lucide-icon and rely on npm install to collect @iconify, lucide and tailwind4 for lucide-icon. it’s a good idea that you can ignore prebuild vendor/daisyui.js and daisyui-theme.js, just use npm install these two libraries. Remember to update your nexus_dashboard/daisyui.css’s relative paths.

How to install gnome extension manually?

01/05/2025 @ Saigon Linux

if you want to install automatically with gnome-browser-connector, you can visit this guide: https://gnome.pages.gitlab.gnome.org/gnome-browser-integration/pages/installation-guide.html

Step 1: Go to https://extensions.gnome.org, find and download extension in zip file.

In this example, I would like to install AppIndicator and KStatusNotifierItem Support by 3v1n0

Step 2: Extract the zip file, and find a file named metadata.json

This is file content of metadata.json.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "_generated": "Generated by SweetTooth, do not edit",
  "description": "Adds AppIndicator, KStatusNotifierItem and legacy Tray icons support to the Shell",
  "gettext-domain": "AppIndicatorExtension",
  "name": "AppIndicator and KStatusNotifierItem Support",
  "settings-schema": "org.gnome.shell.extensions.appindicator",
  "shell-version": [
    "45",
    "46",
    "47"
  ],
  "url": "https://github.com/ubuntu/gnome-shell-extension-appindicator",
  "uuid": "appindicatorsupport@rgcjonas.gmail.com",
  "version": 59
}

Look at line 13, looking for the uuid, it’s appindicatorsupport@rgcjonas.gmail.com.

Step 3: Rename the extracted directory to the uuid that is copied in Step 2.

It’s appindicatorsupport@rgcjonas.gmail.com

Step 4: Copy the renamed directory in Step-3 to ~/.local/share/gnome-shell/extensions.


How to test?

You can go to terminal and type gnome-extensions list.

$ gnome-extensions list

appindicatorsupport@rgcjonas.gmail.com
apps-menu@gnome-shell-extensions.gcampax.github.com
background-logo@fedorahosted.org
launch-new-instance@gnome-shell-extensions.gcampax.github.com
places-menu@gnome-shell-extensions.gcampax.github.com
window-list@gnome-shell-extensions.gcampax.github.com

On the other hand, you can open gnome extensions - https://apps.gnome.org/Extensions/. Your new extension should be there in Manually installed list.

[1] Gnome Extensions
[1] Gnome Extensions

Nhật ký migrate Phoenix Web Framework 1.7.14 lên 1.8

22/04/2025 Elixir

Bài viết này liệt kê lại quá trình cũng như dòng suy nghĩ của tôi khi migrate phoenix 1.7 lên 1.8.

Thay đổi mix.exs phần dependencíe deps/0:

  • {:phoenix, "~> 1.7.14"} -> {:phoenix, "1.8.0-rc.1", override: true}
  • {:phoenix_live_view, "~> 1.0.0", override: true} -> {:phoenix_live_view, "~> 1.0.9"}

Thay đổi mining_rig_monitor_web.ex , phần live_view/0:

  • use Phoenix.LiveView, layout: {MiningRigMonitorWeb.Layouts, :app} -> use Phoenix.LiveView

Sau cùng, nó sẽ trông như thế này.

  # Phiên bản cũ
  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MiningRigMonitorWeb.Layouts, :app}

      unquote(html_helpers())
    end
  end
  # Phiên bản mới
  def live_view do
    quote do
      use Phoenix.LiveView

      unquote(html_helpers())
    end
  end

Tôi đã nghĩ rằng sẽ phải có lỗi xảy ra ở lần chạy iex -S mix phx.server đầu tiên, tôi sẽ cần phải thay đổi các live_view liên quan, nhưng mà không, khả năng tương thích ngược là khá tốt.


Tôi trích dẫn một cái quan trọng liên quan đến root.html.heexapp.html.heex (version 1.7) , app/1 (version 1.8).

defmodule DevAppWeb.Layouts do
  @moduledoc """
  This module holds different layouts used by your application.

  See the `layouts` directory for all templates available.
  The "root" layout is a skeleton rendered as part of the
  application router. The "app" layout is rendered as component
  in regular views and live views.
  """
end

cái app/1 này phải được gọi thì nó mới render, không có chuyện chạy mặc định. Có thể ở 1.7 có file app.html.heex, tuy nhiên, nó ko liên quan đến func app/1

Tôi cần kiểm tra chéo 1 chút, thực sự là app.html.heex có được chạy mặc định hay không, sau khi tôi đã bỏ option layout: {MiningRigMonitorWeb.Layouts, :app}

Để test, tôi đã thêm 1 cái tag <h1> cho file app.html.heex để đánh dấu.

 <!-- app.html.heex -->
<main class="bg-gray-50 dark:bg-gray-900">
  <.flash_group flash={@flash} />
  <%= @inner_content %>
  <h1> APP.HTML.HEEX</h1>
</main>

Đệt, nó ko chạy qua app.html.heex sau khi bỏ option layout: {MiningRigMonitorWeb.Layouts, :app} trong _web.ex, live_view/0 nhé.

Điều này nghĩa là tôi sẽ phải:

  • Kéo nội dung của app.html.heex vào module Layouts, function app
  • Thêm alias MiningRigMonitorWeb.Layouts trong mining_rig_monitor_web.ex, function html_heler/0
  • Các liveview module, ví dụ module MiningRigMonitorWeb.AsicMinerLive.Index, sau khi tôi tách function render/1 thành file index.html.heex. nếu tôi mà muốn sử dụng liveview layout có tên là app, tôi sẽ cần phải bọc nó lại với tag <Layout.app> <‌/Layout.app>

Ví dụ file mining_rig_monitor/lib/mining_rig_monitor_web/live/asic_miner_live/index.html.heex

<Layouts.app flash={@flash} >
  <._index_top />

  <._index_overall_figures aggregated_coin_hashrate_map={@aggregated_coin_hashrate_map}
    aggregated_total_power={@aggregated_total_power}
    aggregated_total_power_uom={@aggregated_total_power_uom}
    aggregated_asic_miner_alive={@aggregated_asic_miner_alive} />

  <._index_activated_asic_miner_table streams={@streams} />

  <._index_not_activated_asic_miner_table streams={@streams} />

</Layouts.app>

Tiếp theo là về cái vụ Scope. Tôi tính toán là sẽ mix phx.gen.auth ở một dự án test khác, sau đó sẽ copy quá. Tuy nhiên, bị vướng field :authenticated_at, :utc_datetime trong Accounts.UserToken, ở phiên bản 1.7, không có field authenticated_at.

Tôi có xem kỹ hơn cái field này, có vẻ là nó liên quan đến sudo mode. Thế tính năng sudo mode là gì?

Tính năng cực kỳ thích hợp cho những tác vụ nhạy cảm. Nó sẽ yêu cầu người dùng phải đăng nhập lại trước khi đưa ra hành động nào đó.

Tôi không có nhu cầu dùng sudo mode. Cụ thể là trong dự án Mining Rig Monitor. Thực tế, app này chỉ có 1 user role là admin. Chả có nhu cầu đụng đến Scope luôn, thôi dẹp cho khỏe.

Hahaha

Các câu hỏi tôi gặp phải khi làm việc với Phoenix Web Framework

22/04/2025 @ Saigon Elixir

Bài post này tổng hợp các câu hỏi tôi gặp phải khi làm việc với Phoenix Web Framework, có những câu hỏi tôi không có câu trả lời, nhưng tôi sẽ vẫn ghi lại, khi nào rảnh tôi sẽ quay lại nghiên cứu.

Trên con đường tập trung vào tính năng thay vì sự hoàn hảo, luôn luôn có những lúc tôi hoàn toàn bỏ qua vẫn đề kỹ thuật mà tập trung vào nghiệp vụ nhằm khai thác tối đa feedback loop. Bài post này sẽ giúp tôi quay lại, xử lý những vấn đề ngu ngốc mà tôi chủ động tạo ra trong quá trình phát triển phần mềm.

001. Tại sao ở phiên bản Phoenix Web Framework cũ, phần layout chỉ cần quan tâm đến root.html.heex, nhưng bây giờ nó lại có thêm cả app.html.heex Phiên bản 1.7. Tuy nhiên ở phiên bản 1.8, nó lại bỏ đi, nhồi vào file layout.ex.

Ở thời điểm hiện tại, 21/4/2025, tôi đang có nhu cầu migrate phoenix từ 1.7 sang 1.8 Official changelog. Rồi lại còn đổi từ dashboard template Flowbite Dashboard qua Nexus Dashboard của DaisyUI. Cái này mất não thật sự. Vấn đề lớn nhất của FlowBite là giá tiền 299 USD, tiếp theo là class name. Tôi không phải là fan của việc nhìn 1 cái div có hơn 10 cái class, tôi mua Nexus Dashboard với giá 69 USD với hi vọng giải quyết vấn đề này.

  • root.html.heex, cái này mục đích là để render những cái html tĩnh mà thôi.
  • app.html.heex, cái này sử dụng kèm và đi xuyên suốt vòng đời của LiveView.

Đây là file _web.ex , phiên bản phoenix 1.7, phần live_view.

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MiningRigMonitorWeb.Layouts, :app}

      unquote(html_helpers())
    end
  end

Khi sử dụng live_view ở ver 1.7, layout :app đã được gài cứng, điều này gây khó khăn khi webapp có nhiều liveview layout. Ví dụ nhé:

  • bạn dev phoenix web app, hoàn toàn chơi live_view, người dùng đã đăng nhập sẽ có liveview layout khác với người dùng chưa đăng nhập.
  • sau khi đăng nhập, user role-admin sẽ có giao diện khác với role-thường dân.

Trong file routes.ex, nếu mà login thì tôi sẽ dùng là root-no-nav.html.heex, ngược lại, nếu đăng nhập thành công, tôi sẽ dùng root.html.heex.

Đừng ngủ nhé, đây là file _web.ex, phiên bản phoenix 1.8, phần live_view.

  def live_view do
    quote do
      use Phoenix.LiveView

      unquote(html_helpers())
    end
  end

Bạn nhìn phần layout nhé, macro không hề chỉ định :app là layout mặc định của live_view. Điều này nghĩa là ở trong các live_view, cụ thể là render, phải tường minh ghi rõ là live_view đang muốn dùng layout nào, ví dụ như:

  • app_admin
  • app_login

002. Khi làm việc với phoenix, tôi thấy có từ khóa @inner_content@inner_block, chúng được sử dụng như thế nào.

  • @inner_content tìm thấy trong root.html.‌heex
  • @inner_block tìm thấy trong layout.ex, function app/1

… Vẫn còn tiếp

003. Khi khai thác conn.assigns hay socket.assigns, kỹ thuật nào có thể giúp sử dụng @tên_var thay cho Map.get(@conn.assigns, :tên_var)

Tôi chưa có câu trả lời cho câu hỏi này, tuy nhiên khi nào có thời gian tôi sẽ xem các bài sau:

004. Khi viết controller test, tôi hay thấy test không được viết trực tiếp mà được gói lại trong describe, lợi thế của nó là gì?

Lợi thế của nó là khi nhóm test này cùng cần cách setup giống nhau. Ví dụ rõ nhất là khi test update entity nào đó. Từ entity này tôi lấy từ Java Spring.

Dịch qua tiếng việt là thực thể, nhưng bạn cứ hiểu là record trong database. Khi ta muốn làm test liên quan đến update record trong database, chúng ta cần có record đó được tạo từ trước.

Lúc này có 2 test chúng ta quan tâm:

  • test update với các tham số hợp lệ
  • test update với tham số không hợp lệ

Cả 2 test này sẽ cùng cần được tạo trước record CpuGpuMinerLog. Dưới dây là ví dụ test cho Controller của CpuGpuLog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
defmodule MiningRigMonitorWeb.CpuGpuMinerLogControllerTest do
  use MiningRigMonitorWeb.ConnCase
  import MiningRigMonitor.CpuGpuMinerLogsFixtures
  alias MiningRigMonitor.CpuGpuMinerLogs.CpuGpuMinerLog

  @update_attrs %{}
  @invalid_attrs %{}

  setup %{conn: conn} do
    {:ok, conn: put_req_header(conn, "accept", "application/json")}
  end

  describe "update cpu_gpu_miner_log" do
    setup [:create_cpu_gpu_miner_log]

    test "renders cpu_gpu_miner_log when data is valid", %{conn: conn, cpu_gpu_miner_log: %CpuGpuMinerLog{id: id} = cpu_gpu_miner_log} do
      conn = put(conn, ~p"/api/cpu_gpu_miner_logs/#{cpu_gpu_miner_log}", cpu_gpu_miner_log: @update_attrs)
      assert %{"id" => ^id} = json_response(conn, 200)["data"]

      conn = get(conn, ~p"/api/cpu_gpu_miner_logs/#{id}")

      assert %{
               "id" => ^id
             } = json_response(conn, 200)["data"]
    end

    test "renders errors when data is invalid", %{conn: conn, cpu_gpu_miner_log: cpu_gpu_miner_log} do
      conn = put(conn, ~p"/api/cpu_gpu_miner_logs/#{cpu_gpu_miner_log}", cpu_gpu_miner_log: @invalid_attrs)
      assert json_response(conn, 422)["errors"] != %{}
    end
  end

  defp create_cpu_gpu_miner_log(_) do
    cpu_gpu_miner_log = cpu_gpu_miner_log_fixture()
    %{cpu_gpu_miner_log: cpu_gpu_miner_log}
  end
end

Sau khi create_cpu_gpu_miner_log/1 được kích hoạt, nó trả 1 lại cái map %{}. Cái map này sẽ được nhồi tiếp vào test "xxx", %{map} do end. Hãy chú ý dòng số 14, 1627.

005. Ở trong form, tôi hay thấy :let={f}, cái này là gì thế, kỹ thuật alias từ @form thành f với let là như thế nào?

006. Luồng chạy khi tạo ``form với core_component.ex` generate mặc định là như thế nào?

007. @from[field] hoạt động như thế nào?

008. phx-update="ignore" dùng để làm gì, thấy nó sử dụng ở login form.

009. Khi chạy function trong html.heex thì cần dấu . trước tên funciton, tuy nhiên tại sao điều này lại không cần khi chạy function với module.

Cụ thể ở đây là Layout.app/1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Layouts.app flash={@flash}>
  <div class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-2 xl:gap-4 dark:bg-gray-900">
    <div class="mb-4 col-span-full xl:mb-2">
      <._breadcrumb />
    </div>
    <!-- Right Content -->
    <div class="col-span-1">
      <._email_information email_form={ @email_form } email_form_current_password={@email_form_current_password} />
    </div>

    <div class="col-span-1">
      <._password_information password_form={ @password_form} trigger_submit={ @trigger_submit }
        current_email={@current_email} current_password={@current_password}/>
    </div>
  </div>
</Layouts.app>

010. Tại sao UserLoginLive.mount/3 (mix phx.gen.auth) , function này return {} tuple 3 phần tử. Có cả temporary_assigns.

defmodule MiningRigMonitorWeb.UserLoginLive do
  use MiningRigMonitorWeb, :live_view

  def mount(_params, _session, socket) do
    email = Phoenix.Flash.get(socket.assigns.flash, :email)
    form = to_form(%{"email" => email}, as: "user")
    {:ok, assign(socket, form: form), temporary_assigns: [form: form]}
  end
end

011. Để tiện trong việc migrate lên version Phoenix mới, tôi không muốn dụng vào core_component.ex, tôi tạo ra file mới nexus_component.ex. Trong _web.ex, sẽ xuất hiện tình trạng import 2 module , và cả 2 module đó có function tên giống nhau. Bên cạnh việc tôi có thể đổi tên function, ngoài ra, tôi có thể gài quyền ưu tiên như thế nào.

chú ý dòng 67.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  defp html_helpers do
    quote do
      # HTML escaping functionality
      import Phoenix.HTML
      # Core UI components and translation
      import MiningRigMonitorWeb.CoreComponents
      import MiningRigMonitorWeb.NexusComponents
      import MiningRigMonitorWeb.Gettext

      # Shortcut for generating JS commands
      alias Phoenix.LiveView.JS
      alias MiningRigMonitorWeb.Layouts

      # Routes generation with the ~p sigil
      unquote(verified_routes())
    end
  end

012. Nguyên lý thay đổi theme light/dark là gì

013. Tôi không hiểu cơ cấu làm việc của JS.navigate/3, JS.patch/3

Cách tách dấu thanh và chữ cái có dấu trong tiếng Việt thành chữ Latin với Elixir

18/04/2025 @ Saigon Elixir

Xin chào, ở bài viết này, trước tiên tôi muốn nói đến vấn đề của mình, Khi phát triển phần mềm Mining Rig Monitor, tôi muốn sử dụng các tên tiếng Việt để đặt tên cho dàn đào. Ví dụ:

  • Thanh Long
  • Bạch Hổ
  • Huyền Vũ
  • Chu Tước

Khi gài vào phần mềm khai thác tiền mã hóa, tôi muốn những cái tên này như sau, dấu gạch ngang tôi sẽ đề cập sau:

  • Thanh-Long (giữ nguyên)
  • Bach-Ho (mất dấu nặng dưới chữ a, mũ và dấu hỏi của chữ )
  • Huyen-Vu (chữ thành chữ e, chữ ũ thành chữ u )
  • Chu-Tuoc (ước thành uoc)

Giải pháp như sau, với function remove_diacritical_marks/1:

def remove_diacritical_marks(string) when is_binary(string) do
  # á à ã ạ ả: dấu sắc, huyền, ngã, nặng, hỏi
  list_1 = [769, 768, 771, 803, 777]
  # â, ă, ư
  list_2 = [770, 774, 795]

  string
  |> String.normalize(:nfd)
  |> String.to_charlist()
  |> Enum.filter(fn(e) ->
    Enum.member?(list_1 ++ list_2, e) == false
  end)
  |> Kernel.to_string()
end

Còn đây là test case:

defmodule MiningRigMonitor.UtilityTest do
  use ExUnit.Case
  alias  MiningRigMonitor.Utility

  test "remove_diacritical_marks 1" do
    string = """
    a á à ã ạ ả
    â ấ ầ ẫ ậ ẩ
    ă ắ ằ ẳ ặ ẳ
    e é è ẽ ẹ ẻ
    ê ế ề ễ ệ ể
    u ú ù ũ ụ ủ
    ư ứ ừ ữ ự ử
    o ó ò õ ọ ỏ
    ơ ớ ờ ỡ ợ ở
    """
    test_result = Utility.remove_diacritical_marks(string)
    expected_result = """
    a a a a a a
    a a a a a a
    a a a a a a
    e e e e e e
    e e e e e e
    u u u u u u
    u u u u u u
    o o o o o o
    o o o o o o
    """
    assert(test_result == expected_result)
  end

  test "remove_diacritical_marks 2" do
    string = """
    A Á À Ã Ạ Ả
    Â Ấ Ầ Ẫ Ậ Ẩ
    Ă Ắ Ằ Ẳ Ặ Ẳ
    E É È Ẽ Ẹ Ẻ
    Ê Ế Ề Ễ Ệ Ể
    U Ú Ù Ũ Ụ Ủ
    Ư Ứ Ừ Ữ Ự Ử
    O Ó Ò Õ Ọ Ỏ
    Ơ Ớ Ờ Ỡ Ợ Ở
    """
    test_result = Utility.remove_diacritical_marks(string)
    expected_result = """
    A A A A A A
    A A A A A A
    A A A A A A
    E E E E E E
    E E E E E E
    U U U U U U
    U U U U U U
    O O O O O O
    O O O O O O
    """
    assert(test_result == expected_result)
  end
end

Phương pháp của tôi là tách chữ có dấu thành một danh sách chữ + dấu liên quan. (Trong Elixir, module String, nó gọi là Normalization Form Canonical Decomposition - nfd). Nguyên văn tiếng anh như sau:

:nfd - Normalization Form Canonical Decomposition. Characters are decomposed by canonical equivalence,
and multiple combining characters are arranged in a specific order.

Ví dụ:

  • chứ áa + dấu sắc.
  • chữ a + mũ + dấu sắc.
iex(3)> String.normalize("á", :nfd) |> String.to_charlist
[97, 769]
iex(4)> String.normalize("ấ", :nfd) |> String.to_charlist
[97, 770, 769]

Dưới đây là danh sách thanh sắc, ký hiệu mà tôi mò được.

# á à ã ạ ả: dấu sắc, huyền, ngã, nặng, hỏi
list_1 = [769, 768, 771, 803, 777]
# â, ă, ư
list_2 = [770, 774, 795]

Bạn thấy đấy, sau khi có danh sách này, việc cần làm chỉ là dùng Enum.filter/2, nếu mà char nào nằm trong nhóm list_1 & list_2 thì chúng ta loại bỏ. Kết quả lúc này là 1 charlist []. Để biến nó thành String, tôi dùng String.to_string/1.

Còn về cái dấu gạch ngang -. Tôi sử dụng regular expression |> String.replace(~r([^a-zA-Z0-9]),"-") sau khi đã chạy qua remove_diacritical_marks/1.

Hi vọng tôi đã có thể giúp tiết kiệm 2 phút cuộc đời với cái này!

Reference:

How to block suspend/hibernate/sleep on Fedora?

16/04/2025 @ Saigon Linux

Execute the following command to block Fedora going to suspend/hibernate/sleep mode

Part 1. Systemd

systemctl mask sleep.target;
systemctl mask hibernate.target;
systemctl mask sleep.target;
systemctl mask hybrid-sleep.target;

Part 2. Gnome Desktop Management

How to find which config to update?

sudo -u gdm dbus-run-session gsettings list-recursively org.gnome.settings-daemon.plugins.power | grep sleep

org.gnome.settings-daemon.plugins.power sleep-inactive-ac-timeout 900
org.gnome.settings-daemon.plugins.power sleep-inactive-ac-type 'suspend'
org.gnome.settings-daemon.plugins.power sleep-inactive-battery-timeout 900
org.gnome.settings-daemon.plugins.power sleep-inactive-battery-type 'suspend'

Change sleep-inactive-ac-timeout & sleep-inactive-battery-timeout to 0

sudo -u gdm dbus-run-session gsettings set org.gnome.settings-daemon.plugins.power sleep-inactive-ac-timeout 0
sudo -u gdm dbus-run-session gsettings set org.gnome.settings-daemon.plugins.power sleep-inactive-battery-timeout 0