Forem: Dung Nguyen

Introduce Relysium - Cursor alternative for Emacs

Dung Nguyen — Fri, 04 Apr 2025 08:37:18 +0000

Recently I try Zed editor and I love it's AI editing tool. I found Elysium package and give it a try. Then I rebuild it to fit my needs. It quickly expanded to fit all my daily needs and workflow.
So I think someone may find it helpful.

bluzky / relysium

Your AI co-developer. Bring joy to coding!

Brind joy to coding!

Installation • Features • Usage • Commands • Reviews • Workflows • Edit Flow • Notes • FAQ

Demo

202504-04-0.mp4

Installation

Using Quelpa

(use-package relysium
:quelpa (relysium :fetcher github
                 :repo "bluzky/relysium"
                 :branch "main"
                 :files ("*.el"))
:hook (prog-mode . relysium-prog-mode))

Using Straight

(straight-use-package
 '(relysium :type git
            :host github
            :repo "bluzky/relysium"
            :branch "main"
            :files ("*.el")))

(add-hook 'prog-mode-hook 'relysium-prog-mode)

Relysium depends on `gptel`, so you have to install and configure `gptel` before using.

Completed Features

Code generation from comments
- Fully implemented via relysium-generate-from-comments
- Uses a clear pattern of "AI:" comment markers
AI-powered code completion at cursor
- Implemented through relysium-complete.el
- Context-aware with buffer understanding, extends code at current cursor position
Code explanation capabilities
- Strong implementation via relysium-ask.el
- Allows selecting code regions for specific questions
In-chat code editing
- Core…

View on GitHub

Here are the Completed Features

Code generation from comments
- Fully implemented via relysium-generate-from-comments
- Uses a clear pattern of "AI:" comment markers
AI-powered code completion at cursor
- Implemented through relysium-complete-cursor.el
- Context-aware with buffer understanding, extends code at current cursor position
Code explanation capabilities
- Strong implementation via relysium-ask.el
- Allows selecting code regions for specific questions
In-chat code editing
- Core functionality via relysium-edit.el
- Supports both region-based and cursor-position editing
Suggestion system
- Whole-file analysis and improvement via relysium-suggest.el
- User-provided instructions for tailored suggestions

Please open an Issue if you found bugs or you have any suggestion.

SaladUI - Implement avatar component for Phoenix LiveView

Dung Nguyen — Mon, 27 May 2024 14:55:31 +0000

This post is written after I implement Avatar component for SaladUI component library for Phoenix Liveview.

An avatar component is quite simple, but I want to enhance it with fallback avatar text. The template structure is as following:



<.avatar>
  <.avatar_image src="./my-profile-img.jpg"></.avatar_image>
  <.avatar_fallback class="bg-primary text-white">CN</.avatar_fallback>
<.avatar>

Here is an implementation of avatar component in html



<span class="relative rounded-full overflow-hidden w-10 h-10">
    <img class="aspect-square w-full h-full" src="https://github.com/shadcn.png">
    <span class="flex rounded-full bg-primary text-white items-center justify-center w-full h-full">CN</span>
</span>

It's the happy case, the image exist, and the fallback element is push down and hidden due to class overflow-hidden.

But when the image doesn't exist, the broken image is displayed.

Hmm, the image should be hidden if it does not exist or got error while loading. Fortunately, img provide onerror event.



<span class="relative rounded-full overflow-hidden w-10 h-10">
    <img class="aspect-square w-full h-full" src="badimage.png" onerror="this.style.display='none'">
    <span class="flex rounded-full bg-primary text-white items-center justify-center w-full h-full">CN</span>
</span>

Guest what. Nothing changed, the broken image is still visible.
It took me a while to discover the reason. onerror="this.style.display='none'" change attribute on client side, when Phoenix LiveView update, it patch the html and remove the display style value. So just add phx-update="ignore" and you got the error image hidden.



<span class="relative rounded-full overflow-hidden w-10 h-10">
    <img class="aspect-square w-full h-full" src="https://github.com/shadcn.png" onerror="this.style.display='none'" phx-update="ignore">
    <span class="flex rounded-full bg-primary text-white items-center justify-center w-full h-full">CN</span>
</span>

And it works as expected

Now wrap up the component



defmodule SaladUI.Avatar do
  @moduledoc false
  use Phoenix.Component

  attr(:class, :string, default: nil)
  attr(:rest, :global)

  def avatar(assigns) do
    ~H"""
    <span class={classes(["relative h-10 w-10 overflow-hidden rounded-full", @class])} {@rest}>
      <%= render_slot(@inner_block) %>
    </span>
    """
  end

  attr(:class, :string, default: nil)
  attr(:rest, :global)

  def avatar_image(assigns) do
    ~H"""
    <img
      class={classes(["aspect-square h-full w-full", @class])}
      {@rest}
      phx-update="ignore"
      style="display:none"
      onload="this.style.display=''"
    />
    """
  end

  attr(:class, :string, default: nil)
  attr(:rest, :global)
  slot(:inner_block, required: false)

  def avatar_fallback(assigns) do
    ~H"""
    <span
      class={
        classes(["flex h-full w-full items-center justify-center rounded-full bg-muted", @class])
      }
      {@rest}
    >
      <%= render_slot(@inner_block) %>
    </span>
    """
  end
end

You may notice that I use onload event instead of onerror:



style="display:none"
onload="this.style.display=''"

Using onerror browser waits until the image loading complete to decide if there is any error then trigger the event. This cause the white avatar while loading image. Using onload event to show image when the loading process complete, so by default if the image loading is slow, the fallback avatar still displays.

If you want to learn more, then visit my github repo https://github.com/bluzky/salad_ui.

Thanks for reading.

Phoenix Liveview components for Shadcn UI

Dung Nguyen — Sun, 19 May 2024 16:04:18 +0000

I'm a fan of Shadcn UI library for its neat and clean components. Recently, I'm playing with Phoenix Liveview components, and I though why don't I port Shadcn UI to Phoenix Liveview.

My goal is keeping the tags as much similar to original library as possible. And not to build wrapper components as default generated CoreComponents.

Here is a sample page that ported:

And the result is what you can found on https://salad-storybook.fly.dev/.

GitHub repo:

bluzky / salad_storybook

Phoenix liveview components inspired by shadui

SaladStorybook

Salad UI is a collection of phoenix live view component inspired by shadui Currently these components are under heavy development and cannot be used as separated library.

Demo

How to start Story book.

Clone this repository
Clone https://github.com/bluzky/salad_ui at the same directory with this repo
Install node modules

cd assets && yarn

Install dependency & start

mix deps.get
mix phx.server

Now you can visit localhost:4000 from your browser.

List of components

Accordion
Alert
Alert Dialog
Avatar
Badge
Breadcrumb
Button
Card
Carousel
Checkbox
Collapsible
Combobox
Command
Context Menu
Dialog
Drawer
Dropdown Menu
Form
Hover Card
Input
Input OTP
Label
Pagination
Popover
Progress
Radio Group
Scroll Area
Select
Separator
Sheet
Skeleton
Slider
Switch
Table
Tabs
Textarea
Tooltip

View on GitHub

It's still my experiment and not ready for production. You can play with it and share your feedback, that would help me a lot.

Thanks.

How to merge Tailwind class in Elixir Phoenix

Dung Nguyen — Sun, 16 Jul 2023 03:32:42 +0000

Problem

I am working on an open source project OrangeCMS using Phoenix LiveView. I am building some reusable components which supports custom class. But many time custom class conflict with default class and I didn't get expected result.

For example:

attr :class, :string, default: nil
slot :inner_block, required: true
def my_component(assigns) do
  ~H"""
   <div class={["bg-green-500", @class]}>
    <%= render_slot(@inner_block) %>
   </div>
  """
end

and use it

<.my_component class="bg-red-500"> HELLO </.my_component>

The result is not red-500 as you might expected.

Solution

I searched for a solution, and I found tailwind-merge which is written in JavaScript. Basically it finds conflicted classes and resolve the conflict. For example:

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'

I was thinking of porting this library to Elixir. But first, I searched on hex.pm and Surprising. I found two packages that support merging tailwind classes: twix and tails

First, I try Twix but it doesn't support custom color classes and raise exception.

Then I try Tails , and with some little configuration, it works perfectly.

Add Tails to your dependencies

{:tails, "~> 0.1.5"}

Add custom colors.json files to /assets/ or /priv directory

{
  "primary": "orange",
  "secondary": "green"
}

Add Tails config

config :tails, colors_file: Path.join(File.cwd!(), "assets/colors.json")

Update code

Wrap class list with Tails.classes

class={Tails.classes(["bg-green-500", @class])}

attr :class, :string, default: nil
slot :inner_block, required: true
def my_component(assigns) do
  ~H"""
   <div class={Tails.classes(["bg-green-500", @class])}>
    <%= render_slot(@inner_block) %>
   </div>
  """
end

Conclusion

Thank to *Zach Daniel *, it's now easier for us to resolve tailwind class conflict in Elixir. And before roll out my own solution, I should take a second to search on Hex.pm , it's amazing that most of what I need was already implemented by Elixir community. Send my regards to all of those who spend their precious hours to make my life easier.

Implement `toggle_attribute` with LiveView JS

Dung Nguyen — Thu, 13 Jul 2023 06:59:00 +0000

Why?

I'm working on rebuilding interface for my project OrangeCMS using TailwindCSS framework. With Tailwind, you can style your coponents based on data-* attribute's value (read more).

How to update DOM attribute with LiveView.JS? You can use JS.set_attribute({"data-state", "open"}) for example. But the problem is your code doesn't know current data-state value, and there is no way to do that using LiveView.JS.

Using `JS.dispatch`

Fortunately, Phoenix.LiveView.JS support dispatch/2 which allow trigger custom event and pass data via event.detail attribute. So my idea is:

Implement a custom event lad:exec with following details: [action, {attr: <attribute_name>, values: <list of values> }]
- action: action to execute. in this case toggle_attribute
- attr: attribute name, in this case data-state
- values: 2 values for data-state, which I want to toggle between them

It would be something like this:

JS.dispatch("lad:exec", to: "#some-id", detail: ["toggle_attribute", %{attr: "data-state", values: ["open", "closed"]}])

Implementation

HEEX markup

<div class="dropdown group" id="some-id" data-state="closed">
    <button 
        class="trigger-btn"
        phx-click={JS.dispatch("lad:exec", to: "#some-id", detail: ["toggle_attribute", %{attr: "data-state", values: ["open", "closed"]}])}
    >Click me</button>
    <div class="dropdown-content hidden group-data-[state=open]:block">
        <ul>
            <li> item 1</li>
            <li> item 2</li>
            <li> item 3</li>
        </ul>
    </div>
</div>

Update app.js

append this to end of your app.js

const commands = {
    trigger_attribute(target, {attr, values}){
        if (!values || values.length != 2)
            throw "values must be an array of length 2";

        // get current attribute's value
        const current = target.getAttribute(attr);

        // get the other value and update it
        const nextValue = values.find((v) => v != current);
        target.setAttribute(attr, nextValue);
    }
}

// listen to dispatched event
window.addEventListener("lad:exec", (event) => {
    if (Array.isArray(event.detail)) {
      const [command, args] = event.detail
      commands[command](event.target, args)
    } else {
      throw "lad:exec expected command's arguments as an array";
    }
  });

This is the result

Conclusion

With JS.dispatch you can easily extend javascript's functionality for LiveView. You can even implement some helper functions like what I implemented for OrangeCMS

JS.add_class("bg-green", to: "#my-id")
|> LadJS.toggle_attribute({"data-state", ~w(open closed)}, to: ".my-container")
|> LadJS.toggle_class("hidden", to: "#my-id")

Thanks for reading. Your feedback are welcome.

[TIL] Reusable LiveView.JS commands with JS.exec

Dung Nguyen — Wed, 12 Jul 2023 14:43:13 +0000

This article was originally posted on https://bluzky.github.io/2023-07-12-til-reusable-liveview-js-commands-with-js-exec/

In this post I will build a simple dropdown for demo purpose. Not fully functional as a real dropdown :D.

1. Duplicated code

<div
  class="relative inline-block m-10"
  id="my-dropdown"
  phx-mounted={@open && (JS.show(to: "#my-dropdown .dropdown-content") |> JS.add_class("bg-blue-300", to: "#my-dropdown .dropdown-btn"))}
>
  <div
    class="dropdown-btn border border-gray-100 px-4 py-2 rounded-lg bg-gray-700 text-white inline-block cursor-pointer"
    phx-click={JS.show(to: "#my-dropdown .dropdown-content") |> JS.add_class("bg-blue-300", to: "#my-dropdown .dropdown-btn")}
  >
    Toggle button
  </div>
  <div class="dropdown-content absolute hidden bottom-0 left-0 translate-y-full w-[275px] bg-slate-50 rounded-lg border border-slate-200 shadow-md py-5">
    <div class="border-b hover:bg-slate-100 px-5 py-2">Item 1</div>
    <div class="border-b hover:bg-slate-100 px-5 py-2">Item 2</div>
    <div class="border-b hover:bg-slate-100 px-5 py-2">Item 3</div>
    <div class="border-b hover:bg-slate-100 px-5 py-2">Item 4</div>
    <div class="border-b hover:bg-slate-100 px-5 py-2">Item 5</div>
  </div>
</div>

2. Writing a function

To avoid duplicated JS code, you can write a function in LiveView component

def open_dropdown(id) do
    [to: "##{id} .dropdown-content"]
    |> JS.show()
    |> JS.add_class("bg-blue-300", to: "##{id} .dropdown-btn")
end

and update your template

<div
  class="relative inline-block m-10"
  id="my-dropdown"
  phx-mounted={@open && open_dropdown("my-dropdown")}
>
  <div
    class="dropdown-btn border border-gray-100 px-4 py-2 rounded-lg bg-gray-700 text-white inline-block cursor-pointer"
    phx-click={open_dropdown("my-dropdown")}
  >
    Toggle button
  </div>
  <div class="dropdown-content absolute hidden bottom-0 left-0 translate-y-full w-[275px] bg-slate-50 rounded-lg border border-slate-200 shadow-md py-5">
    <!-- Your dropdown content -->
  </div>
</div>

This way you write code in 2 separated modules and you have to switch between them to understand how it works.

3. Reuse code with `JS.exec`

JS.exec's document says:

Executes JS commands located in element attributes.

The followed example make me think that it only support some special attributes like phx-remote and phx-* attributes. Recently I found that it could be any attribute name.

The example above can be rewrite:

<div
  class="relative inline-block m-10"
  id="my-dropdown"
  action-open-dropdown={
    JS.show(to: "#my-dropdown .dropdown-content")
    |> JS.add_class("bg-blue-300", to: "#my-dropdown .dropdown-btn")
  }
  phx-mounted={@open && JS.exec("action-open-dropdown")}
>
  <div
    class="dropdown-btn border border-gray-100 px-4 py-2 rounded-lg bg-gray-700 text-white inline-block cursor-pointer"
    phx-click={JS.exec("action-open-dropdown", to: "#my-dropdown")}
  >
    Toggle button
  </div>
  <div class="dropdown-content absolute hidden bottom-0 left-0 translate-y-full w-[275px] bg-slate-50 rounded-lg border border-slate-200 shadow-md py-5">
    <!-- Your dropdown content -->
  </div>
</div>

This way you don't have to switch between files to get full implementation logic.

How to download large file in Elixir

Dung Nguyen — Sat, 08 Jan 2022 05:05:54 +0000

In my project, I have a quite large csv file for seeding my database. Put it is project source code increasing size of docker image but that file only run once. So I decide to upload to S3 and stream/download to server and then run seeding code. In this post I will show you how I do this.

I found some post which stream file using HTTPoison library but in some case I don't want to add more dependencies so I write my own module, and I think it's a good way to learn new things.

What you will learn

You will learn 2 cool function

Stream.resource to build a new stream
And :hackney.stream_body to read chunk of data from remote file

1. Build the stream

For Stream.resource, read full document here

Basically, this function receives 3 function as arguments: one function to setup stream, one for build data stream, and one for handle stream completion. This example from the hexdocs.pm

Stream.resource(
  fn -> File.open!("sample") end,
  fn file ->
    case IO.read(file, :line) do
      data when is_binary(data) -> {[data], file}
      _ -> {:halt, file}
    end
  end,
  fn file -> File.close(file) end
)

Fisrt function open the file and its result is passed as argument for second function
Second function read data line by line until the end of file
Third function handle close file handler

For downloading file, we do similar

Open the connection
Stream parts of file
Close connection

def stream_url(url) do
    Stream.resource(
      fn -> begin_download(url) end,
      &continue_download/1,
      &finish_download/1
    )
end

2. Open connection

defp begin_download(url) do
    {:ok, _status, headers, client} = :hackney.get(url)
    headers = Enum.into(headers, %{})
    total_size = headers["Content-Length"] |> String.to_integer()

    {client, total_size, 0} # 0 is current downloaded size
end

Here we:

Use :hackney.get to open connection to server
Extract content length from header, this is useful to verify length later
Return tuple of {client, total_size, current_download_size} these data would be used to stream content in the next function

3. Stream chunks

defp continue_download({client, total_size, size}) do
    case :hackney.stream_body(client) do
      {:ok, data} ->
        # update downloaded size
        new_size = size + byte_size(data)
        {[data], {client, total_size, new_size}}

      :done ->
         # no more data, tell stream to close
         # and move to function 3
        {:halt, {client, total_size, size}}

      {:error, reason} ->
        raise reason
    end
end

Here we use :hackney.stream_body to read data from connection chunk by chunk

4. Close connection

defp finish_download({client, total_size, size}) do
    :hackney.close(client)
    Logger.debug("Complete download #{size} / #{total_size} bytes")
end

Here we simply close the connection

5. Save to the file

In the above steps, we build a stream of data, now we save it to a file

def download(url, save_path) do
    stream_url(url)
    |> Stream.into(File.stream!(save_path))
    |> Stream.run()
end

Remember to invoke Stream.run to actually run the stream.

6. Stream by line

In our case, we don't want to store file on our server because we only use it once. So we stream and process file content on the fly. We use csv library to decode csv content because it supports stream but it only accepts stream of lines.

So here we transform stream of chunk to stream of line

def stream_url(url, :line) do
    stream_url(url)
    |> Stream.concat([:end]) # to known when the stream end
    |> Stream.transform("", fn
      :end, prev ->
        {[prev], ""}

      chunk, prev ->
        [last_line | lines] =
          String.split(prev <> chunk, "\n")
          |> Enum.reverse()

        {Enum.reverse(lines), last_line}
    end)
end

Details about why to split it like this you can read this post from poeticoding.com

References

Thanks for idea from https://gist.github.com/avdi/7990684
and poeticoding.com that help me to solve my problem.

Full source code here

Thanks for reading and your feedback are warmly welcome.

Build your own date time parser in Elixir

Dung Nguyen — Sat, 11 Dec 2021 16:48:02 +0000

Elixir does not have built-in date time parser function. In this post, I will show you how to create one using regex.
The idea is:

Define a format string
Build regex pattern from format string
Compile datetime string with regex pattern
Build datetime struct from extracted parts.

And we will have something like this:

Toolkit.DateTimeHelper.parse("18/12/21", "%d/%m/%y")
#> {:ok, ~U[2021-12-18 00:00:00Z]}

1. Define format string.

For simplicity, we support some basic format using convention from Calendar.strftime

format	description	value example
H	24 hour	00 - 23
I	12 hour	00 - 12
M	minute	00 - 59
S	second	00 - 59
d	day	01 - 31
m	month	01 -12
y	2 digits year	00 - 99
Y	4 digits year
z	timezone offset	+0100, -0330
Z	timezone name	UTC+7, Asia/Ho_Chi_Minh
p	PM or AM
P	pm or am

defmodule DateTimeParser do
    @mapping %{
    "H" => "(?<hour>\\d{2})",
    "I" => "(?<hour12>\\d{2})",
    "M" => "(?<minute>\\d{2})",
    "S" => "(?<second>\\d{2})",
    "d" => "(?<day>\\d{2})",
    "m" => "(?<month>\\d{2})",
    "y" => "(?<year2>\\d{2})",
    "Y" => "(?<year>-?\\d{4})",
    "z" => "(?<tz>[+-]?\\d{4})",
    "Z" => "(?<tz_name>[a-zA-Z_\/]+)",
    "p" => "(?<p>PM|AM)",
    "P" => "(?<P>pm|am)",
    "%" => "%"
  }
end

Here we define a mapping between format character and regex pattern. In the pattern we using named capture to assign name to matched content. This will help us handle datetime parts easier.

2. Build regex pattern from format string

def build_regex(format) do
  keys = Map.keys(@mapping) |> Enum.join("")

  Regex.compile!("([^%]*)%([#{keys}])([^%]*)")
  |> Regex.scan(format)
  |> Enum.map(fn [_, s1, key, s2] ->
    [s1, Map.get(@mapping, key), s2]
  end)
  |> to_string()
  |> Regex.compile!()
end

Here we scan for all string that start with % and followed by any of our format character which defined above.
And then for each matching, we do replace the format with appropriate regex string.
Finally we compile it to a regex struct.

3. Capture all required parts

This is the easiest part. Regex do this for us.

def parse(dt_string, format \\ "%Y-%m-%dT%H:%M:%SZ") do
  format
  |> build_regex
  |> Regex.named_captures(dt_string)
  |> cast_data()
  |> to_datetime()
end

cast_data and to_datetime are defined right belows, don't worry.

4. Build datetime struct from captured parts

This is the heavy part, we do it in 2 steps:

Cast and validate data
Build datetime struct

4.1 Cast and validate data

First we define some default values.

@default_value %{
    day: 1,
    month: 1,
    year: 0,
    hour: 0,
    minute: 0,
    second: 0,
    utc_offset: 0,
    tz_name: "UTC",
    shift: "AM"
}

Then for each captured parts, we cast and validate each one until completed or got an error.

def cast_data(nil), do: {:error, "invalid datetime"}

def cast_data(captures) do
    captures
    |> Enum.reduce_while([], fn {part, value}, acc ->
      case cast(part, value) do
        {:ok, data} -> {:cont, [data | acc]}
        {:error, _} = error -> {:halt, error}
      end
    end)
    |> case do
      {:error, _} = error -> error
      data -> Enum.into(data, @default_value)
    end
end

For each part we have different validation and logics.
For part of days, we do upcase to make them same value so we handle them same way later:

  defp cast("P", value) do
    cast("p", String.upcase(value))
  end

  defp cast("p", value) do
    {:ok, {:shift, value}}
  end

For timezone offset, we calculate :utc_offset in second. For timezone name, we keep it as is.

  defp cast("tz", value) do
    {hour, minute} = String.split_at(value, 3)

    with {:ok, {_, hour}} <- cast("offset_h", hour),
         {:ok, {_, minute}} <- cast("offset_m", minute) do
      sign = div(hour, abs(hour))
      {:ok, {:utc_offset, sign * (abs(hour) * 3600 + minute * 60)}}
    else
      _ -> {:error, "#{value} is invalid timezone offset"}
    end
  end

  defp cast("tz_name", value) do
    {:ok, {:tz_name, value}}
  end

For other parts, we convert to integer and check against valid range.
Let's define some validation ranges:

  @value_rages %{
    "hour" => [0, 23],
    "hour12" => [0, 12],
    "minute" => [0, 59],
    "second" => [0, 59],
    "day" => [0, 31],
    "month" => [1, 12],
    "year2" => [0, 99]
  }

  defp cast(part, value) do
    value = String.to_integer(value)

    valid =
      case Map.get(@value_rages, part) do
        [min, max] ->
          value >= min and value <= max

        _ ->
          true
      end

    if valid do
      {:ok, {String.to_atom(part), value}}
    else
      {:error, "#{value} is not a valid #{part}"}
    end
  end

4.2 Combine those all parts

For year with 2 digits, get 2 first digits of current year to make 4 digits year.

  defp to_datetime({:error, _} = error), do: error

  defp to_datetime(%{year2: value} = data) do
    current_year = DateTime.utc_now() |> Map.get(:year)
    year = div(current_year, 100) * 100 + value

    data
    |> Map.put(:year, year)
    |> Map.delete(:year2)
    |> to_datetime()
  end

For 12 hours format, we convert to 24 hours.

  defp to_datetime(%{hour12: hour} = data) do
    # 12AM is not valid

    if hour == 12 and data.shift == "AM" do
      {:error, "12AM is invalid value"}
    else
      hour =
        cond do
          hour == 12 and data.shift == "PM" -> hour
          data.shift == "AM" -> hour
          data.shift == "PM" -> hour + 12
        end

      data
      |> Map.put(:hour, hour)
      |> Map.delete(:hour12)
      |> to_datetime()
    end
  end

After handling special cases, we build Date, Time and combine them into DateTime struct and handle time zone name.

  defp to_datetime(data) do
    with {:ok, date} <- Date.new(data.year, data.month, data.day),
         {:ok, time} <- Time.new(data.hour, data.minute, data.second),
         {:ok, datetime} <- DateTime.new(date, time) do
      datetime = DateTime.add(datetime, -data.utc_offset, :second)

      if data.tz_name != "UTC" do
        DateTime.shift_zone(datetime, data.tz_name)
      else
        {:ok, datetime}
      end
    end
  end

Conclusion

There are many way to build datetime parser, but using regex, in my opinion, is simplest way and easiest to understand. You can build it yourself and add some more format, no need to add another dependency to your library.

You can see the fullsource code here on gist.

If you have any feedback or suggestion, leave me a comment.
Thanks for reading.

Implement token Authentication with Phoenix.Token

Dung Nguyen — Thu, 26 Aug 2021 13:42:44 +0000

In this post, you'll learn how to implement token based authentication using Phoenix.Token.

This is originally posted on The Orange+

In our previous projects, we use guardian library to implement JWT authentication. Guardian is a great library which provides lots of method and tool to work with authentication. But sometime we don't need them all. And recently, I found Phoenix.Token module shipped with phoenix framework that helps me to implement JWT alternative token authentication with few lines of code.

Let's do it.

1. Implement Token module

Here is the document of Phoenix.Token.

We just wrap sign and verify function from Phoenix.Token to create and check for valid token.

defmodule MyApp.Token do
  @signing_salt "octosell_api"
  # token for 2 week
  @token_age_secs 14 * 86_400

  @doc """
  Create token for given data
  """
  @spec sign(map()) :: binary()
  def sign(data) do
    Phoenix.Token.sign(MyAppWeb.Endpoint, @signing_salt, data)
  end


  @doc """
  Verify given token by:
  - Verify token signature
  - Verify expiration time
  """
  @spec verify(String.t()) :: {:ok, any()} | {:error, :unauthenticated}
  def verify(token) do
    case Phoenix.Token.verify(MyAppWeb.Endpoint, @signing_salt, token,
             max_age: @token_age_secs
           ) do
      {:ok, data} -> {:ok, data}
      _error -> {:error, :unauthenticated}
    end
  end
end

Here we wrap in Token module to simplify API. We pass MyAppWeb.Endpoint here to use secret key that config for endpoint. You can pass secret key from config as firt argument.

2. Generate token

defmodule MyAppWeb.SessionController do
  ...
  def new(conn, %{"email" => email, "password" => password}) do
    with {:ok, user} <- Account.authenticate_user(email, password),
         {:ok, token} <- MyApp.Token.sign(%{user_id: user.id}) do
      ...
      # return token to client
    else
      _ ->
        {:error, gettext("email or password is in correct")}
    end
  end
end

Here we create Phoenix token with a map %{user_id: user.id} and return to client.

3. Build Plug to verify token

Client sent token to server via header Authorization. We extract token and call Token.verify to check if token is valid and not expired.

defmodule MyApp.Plug.Authenticate do
  import Plug.Conn
  require Logger

  def init(opts) do
    opts
  end

  def call(conn, _opts) do
    with ["Bearer " <> token] <- get_req_header(conn, "authorization"),
         {:ok, data} <- MyApp.Token.verify(token) do
      conn
      |> assign(:current_user, MyApp.Account.get_user(data.user_id))
    else
      error ->
        conn
        |> put_status(:unauthorized)
        |> Phoenix.Controller.put_view(MyAppWeb.ErrorView)
        |> Phoenix.Controller.render(:"401")
        |> halt()
    end
  end
end

4. Add plug to router

defmodule MyAppWeb.Router do
  use MyAppWeb, :router

  pipeline :api do
    plug :accepts, ["json"]
  end

  pipeline :authenticated do
    plug MyAppWeb.Plug.Authenticate
  end

  scope "/api", MyAppWeb do
    pipe_through :api
    post "/auth/login", SessionController, :new
  end

  scope "/api", MyAppWeb do
    pipe_through [:api, :authenticated]
    delete "/auth/logout", SessionController, :delete
    ...
  end
end

We have done with it. Just a few line of code

Conclusion

Implement token authentication with Phoenix is so easy and you may not need Guardian for your application.
In this post I only implement simple version of token authentication. In real application, you should store token signature in database or redis and

In Authenticate plug check if the token exists in database.
When user logout, clear it from database/redis to make sure that token cannot be used to make request anymore.

Thanks for reading.

NOTES
If you want to known what is the different between JWT token and Phoenix.Token. Here is the answer from elixir forum

So, to answer the question: Phoenix.Token (with Plug Tokens) vs. JWT, several points I noticed:

Phoenix.Token doesn’t let you specify signing algorithms. JWT (for example using Joken 18) does.
Both encodes some form of payload into Base64, and the encoding can be read by clients (so you shouldn’t include sensitive information).
JWT allows you to encode arbitrary JSON objects as payload, Phoenix.Token uses Erlang terms serialization.

Encrypt your database with Ecto custom type

Dung Nguyen — Fri, 20 Aug 2021 12:10:14 +0000

If your data is encrypted, even if it's leaked, no one know what is the data. That's great.

In this post, I'm going to show you how to encrypt data with Ecto. Ecto allows developer to define their own types. And we will define a type called EncryptedText which encrypts data before persiting to database and decrypts data after loading.

1. Define encrypt/decrypt methods

This is a simple version of crypto module:

defmodule Crypto do
  @block_size 16

  def generate_secret do
    :crypto.strong_rand_bytes(@block_size)
    |> Base.encode64()
  end

  def encrypt(plaintext, secret_key) do
    with {:ok, secret_key} <- decode_key(secret_key) do
      iv = :crypto.strong_rand_bytes(@block_size)
      plaintext = pad(plaintext, @block_size)
      ciphertext = :crypto.crypto_one_time(:aes_128_cbc, secret_key, iv, plaintext, true)

      {:ok, Base.encode64(iv <> ciphertext)}
    end
  end

  def decrypt(ciphertext, secret_key) do
    with {:ok, secret_key} <- decode_key(secret_key),
         {:ok, <<iv::binary-@block_size, ciphertext::binary>>} <- Base.decode64(ciphertext) do
      plaintext =
        :crypto.crypto_one_time(:aes_128_cbc, secret_key, iv, ciphertext, false)
        |> unpad

      {:ok, plaintext}
    else
      {:error, _} = err -> err
      _ -> {:error, "Bad encrypted data"}
    end
  end

  defp pad(data, block_size) do
    to_add = block_size - rem(byte_size(data), block_size)
    data <> :binary.copy(<<to_add>>, to_add)
  end

  defp unpad(data) do
    to_remove = :binary.last(data)
    :binary.part(data, 0, byte_size(data) - to_remove)
  end
end

Let go through the code

  def generate_secret do
    :crypto.strong_rand_bytes(@block_size)
    |> Base.encode64()
  end

This function generate a 16 bytes secret key and encode base 64 string so you can add it to config.

encrypt/2 function

 def encrypt(plaintext, secret_key) do
    # check the key size
    with {:ok, secret_key} <- decode_key(secret_key) do

      # random initial vector
      iv = :crypto.strong_rand_bytes(@block_size)
      # if length of text is not multiple of @block_size
      # we add more data until it meets condition
      plaintext = pad(plaintext, @block_size)
      # encrypt here
      ciphertext = :crypto.crypto_one_time(:aes_128_cbc, secret_key, iv, plaintext, true)

      {:ok, Base.encode64(iv <> ciphertext)}
    end
  end

This is the most important line

ciphertext = :crypto.crypto_one_time(:aes_128_cbc, secret_key, iv, plaintext, true)

iv is initial vector. AES-128 algorithms encrypts data by block of 16 bytes, so we need initial vector to make sure that the output of blocks with same data are different from each other.
The last parameter is set to true to encrypt, set to false to decrypt data

And then we encode output to base 64 string. Here we concatenate iv and ciphertext so that we can extract iv to use for decrypting

{:ok, Base.encode64(iv <> ciphertext)}

decrypt/2 function

def decrypt(ciphertext, secret_key) do
    # check the key
    with {:ok, secret_key} <- decode_key(secret_key),
         {:ok, <<iv::binary-@block_size, ciphertext::binary>>} <- Base.decode64(ciphertext) do
      plaintext =
        :crypto.crypto_one_time(:aes_128_cbc, secret_key, iv, ciphertext, false)
        |> unpad

      {:ok, plaintext}
    else
      {:error, _} = err -> err
      _ -> {:error, "Bad encrypted data"}
    end
  end

We extract iv and encrypted data from input

{:ok, <<iv::binary-@block_size, ciphertext::binary>>} <- Base.decode64(ciphertext)

We use pattern matching to extract first 16 byte and assign to iv and assign remaining data to ciphertext. Then decrypting data

plaintext =
    :crypto.crypto_one_time(:aes_128_cbc, secret_key, iv, ciphertext, false)
    |> unpad

This line is similar to the line which encrypts data, the difference is here we replace plaintext by ciphertext and last parameter is set to false. After data is decrypted, we need to remove padding to get the original data.

2. Build `EncryptedText` type

I define a type to store binary data, you can define a EncryptedMap to store map data. The most important function are dump and load where we encrypt before persisting and decrypt after loading.

defmodule EncryptedText do
  use Ecto.Type

  # we store data as string
  def type, do: :string

  def cast(value) when is_binary(value) do
    {:ok, value}
  end
  def cast(_), do: :error

  def dump(nil), do: nil
  # encrypt data before persist to database
  def dump(data) when is_binary(data) do
    with {:ok, secret_key} <- Application.fetch_env(:myapp, :ecto_secret_key),
         {:ok, data} <- Crypto.encrypt(data, secret_key) do
      {:ok, data}
    else
      _ -> :error
    end
  end

  def dump(_), do: :error

  def load(nil), do: nil
  # decrypt data after loaded from database
  def load(data) when is_binary(data) do
    secret_key = Application.fetch_env!(:myapp, :ecto_secret_key)
    case Crypto.decrypt(data, secret_key) do
      {:error, _} -> :error
      ok -> ok
    end
  end

  def load(_), do: :error

  def embed_as(_), do: :dump
end

3. Use it in your schema

You must add secret key to your app config first.

config :myapp, :ecto_secret_key, "your key using Crypto.generate_secret"

Add to schema

schema "users" do
    field :name, :string
    ...
    field :secret, EncryptedText
    ...
end

Your data are safe now.

4. Conclusion

With Crypto you can implement encrypted field for any type of data you want.

There is an issue when you want to change your secret key, you have to load your data row by row, decrypt and then encrypt with new key and update to database.

I found this article which explains very well about crypto if you are interested https://www.thegreatcodeadventure.com/elixir-encryption-with-erlang-crypto/
Although she uses old crypto API so it will throw some warnings.

I implemented encrypted type for text and map for my company project here if you want to use it:

Github

Thanks for reading.

How to validate request params in Phoenix

Dung Nguyen — Sat, 14 Aug 2021 05:06:03 +0000

In web developments, server receives lots of request data from client side. And when working with request params from client, my first rule is:

Don't believe the client

Imagine that you provide API to list all post using the filter from client, and user may add user_id which point to other user, and you don't remove that unexpected field from request params. If you don't handle your logic carefully, you may accidentally leak data.

So every request should be cleaned from unexpected params, casted to the proper data type, and validated before passing to business layer.

You can achieve this by:

Using Ecto

If you are building a web server using Phoenix, I guess Ecto is already in your dependencies. Just use it.

Thank to Ecto schemaless, you can build changeset from a dynamic schema:

defmodule MyApp.PostController do
    ...
    defp index_params(params) do
        default = %{
      status: nil,
      q: nil,
      is_published: true
    }

    types = %{
      status: :string,
      q: :string,
      is_published: :boolean
    }

    changeset =
      {default, types}
      |> Ecto.Changeset.cast(params, Map.keys(types))

    if changeset.valid? do
        {:ok, Ecto.Changeset.apply_changes(changeset)}
    else
        {:error, changeset}
    end
    end

    def index(conn, params) do
        with {:ok, valid_params} <- index_params(params) do
            # do your logic
        end
    end
    ...
end

With Ecto you can do validation on your params as you do with your schema changeset.

This way is simple and most of you are familiar with it. But you have to write much code and cannot cast and validate nested params.

Use library `Tarams`

This library provide a simple way to define schema. Let's rewrite example above using tarams.

First add this to your dependency list:

{:tarams, "~> 1.0.0"}

defmodule MyApp.PostController do
    ...
    @index_params %{
        status: :string,
        q: :string
        is_published: [type: :boolean, default: true],
        page: [type: :integer, number: [min: 1]],
        size: [type: :integer, number: [min: 10, max: 100]]
    }
    def index(conn, params) do
        with {:ok, valid_params} <- Tarams.cast(params, @index_params) do
            # do your logic
        end
    end
    ...
end

And it support nested params too

defmodule MyApp.PostController do
    ...
    @create_params %{
        title: [type: :string, required: true],
        content: [type: :string, required: true],
        tags: [type: {:array, :string}],
        published_at: :naive_datetime,
        meta: %{
            tile: :string,
            description: :string,
            image: :string
        }
    }
    def create(conn, params) do
        with {:ok, valid_params} <- Tarams.cast(params, @create_params) do
            MyApp.Content.create_post(valid_params)
        end
    end
    ...
end

Conclusion

All request params should be casted and validated at controller. Then you only work with data that you know what it is, and you don't have to worry about unexpected parameters.

Thanks for reading, hope it can helps.

Easy data validation with with Valdi in Elixir

Dung Nguyen — Fri, 06 Aug 2021 15:26:59 +0000

Credit: this icon is from flaticon.com

In previous article, I shown you how to implement you own validation module. I you haven't read it, you can find it here How to build an Elixir validator from scratch

And I think some of you may want a ready to use library so I wrapped it up, added some useful api and published on hex.pm and github repo here.

This post is just showcases of what it can do. (not too much fancy)
First, add dependencies to your mix.exs and you are ready to go.

{:valdi, "~> 0.2.0"}

And this is how it works.

Validate using a specific validation function

iex(1)> age = 20
20
iex(2)> Valdi.validate_number(age, min: 18, max: 60)
:ok

But most of the time you don't do this, you will want to combine multiple validations at a time.

iex(4)> Valdi.validate("20", type: :integer,  number: [min: 18, max: 60])
{:error, "is not a integer"}

And you may want to validate a list of value too:

iex(1)> Valdi.validate_list(["hi", "how", "are", "you", 100], type: :string,  length: [min: 3])
{:error,
 [[0, "length must be greater than or equal to 3"], [4, "is not a string"]]}

If validation failed, you got a list of error and index of error item.

Valdi supports you to validate a simple map with given specification:

product_spec = %{
    name: [type: :string, required: true],
    sku: [type: :string, required: true],
    price: [type: :integer, number: [min: 0]]
}
Valdi.validate_map(%{
    name: "A magic pen",
    sku: nil,
    price: -1
}, product_spec)

# {:error, %{price: "must be greater than or equal to 0", sku: "is required"}}

Valdi does not support nested map validation.

You might want to take a look at Contrak, it extended Valdi by providing a simple way to define and validate nested schema.

Why I didn't put those in just one library? I think data validation and schema validation are quite different, so I want to keep libraries simple and do its best thing.

Here you can define your own validation

Valdi.validate("as008x8234", type: :string, func: fn value ->
   if String.match?(value, ~r/^\d{4}$/), do: :ok, else: {:error, "not a year string"}
end)

# {:error, "not a year string"}

Hope this small library can help. If you have any suggestion please comment.
Thank you.

Forem: Dung Nguyen

Introduce Relysium - Cursor alternative for Emacs

bluzky / relysium

Your AI co-developer. Bring joy to coding!

Brind joy to coding!

Demo

Installation

Using Quelpa

Using Straight

Relysium depends on gptel, so you have to install and configure gptel before using.

Completed Features

Here are the Completed Features

SaladUI - Implement avatar component for Phoenix LiveView

Phoenix Liveview components for Shadcn UI

bluzky / salad_storybook

Phoenix liveview components inspired by shadui

SaladStorybook

Demo

How to start Story book.

List of components

How to merge Tailwind class in Elixir Phoenix

Problem

Solution

Conclusion

Implement `toggle_attribute` with LiveView JS

Why?

Using JS.dispatch

Implementation

Conclusion

[TIL] Reusable LiveView.JS commands with JS.exec

1. Duplicated code

2. Writing a function

3. Reuse code with JS.exec

How to download large file in Elixir

What you will learn

1. Build the stream

2. Open connection

3. Stream chunks

4. Close connection

5. Save to the file

6. Stream by line

References

Build your own date time parser in Elixir

1. Define format string.

2. Build regex pattern from format string

3. Capture all required parts

4. Build datetime struct from captured parts

4.1 Cast and validate data

4.2 Combine those all parts

Conclusion

Implement token Authentication with Phoenix.Token

1. Implement Token module

2. Generate token

3. Build Plug to verify token

4. Add plug to router

Conclusion

Encrypt your database with Ecto custom type

1. Define encrypt/decrypt methods

2. Build EncryptedText type

3. Use it in your schema

4. Conclusion

How to validate request params in Phoenix

Using Ecto

Use library Tarams

Conclusion

Easy data validation with with Valdi in Elixir

Relysium depends on `gptel`, so you have to install and configure `gptel` before using.

Using `JS.dispatch`

3. Reuse code with `JS.exec`

2. Build `EncryptedText` type

Use library `Tarams`