github (1).svg

Github

linkedin.svg

LinkedIn

twitter.svg

Twitter

large_Kacper Latuszewski-Full.jpg

medium_Kacper Latuszewski-Full.jpg

small_Kacper Latuszewski-Full.jpg

thumbnail_Kacper Latuszewski-Full.jpg

Kacper Latuszewski-Full.jpg

# Quick migration from LEEx to HEEx

Since Phoenix LiveView 0.16 has brought new HEEx templates (and LEEx are going to be deprecated), you may come across some issues with migrating it.

## Sigil

1. You need to replace `~L` with `~H`.
    - LEEx

	<div style={{marginTop: "-24px"}}>
    
    ```elixir
    ~L"""
    <h1><%= String.upcase(@title) %></h1>
    """
    ```
    
    </div>
    
    - HEEx

	<div style={{marginTop: "-24px"}}>
    
    ```elixir
    ~H"""
    <h1><%= String.upcase(@title) %></h1>
    """
    ```
    
    </div>
    

## HTML attributes interpolation

1. String atrributes
    - LEEx
    
    <div style={{marginTop: "-24px"}}>
    
    ```jsx
    <button style="background-color: <%= @theme %>">Click here</button>
    <input type="text" value="<%= @name %>" placeholder="Name" />
    ```
    
    </div>

    - HEEx

	<div style={{marginTop: "-24px"}}>
    
    ```jsx
    <button style={"background-color: #{@theme}"}>Click here</button>
    <input type="text" value={@name} placeholder="Name" />
    ```
    
    </div>
    
2. Boolean attributes
    - LEEx

	<div style={{marginTop: "-24px"}}>
    
    ```html
    <input type="checkbox" <%= if @is_accepted, do: "checked" %> />
    ```
    
    </div>
    
  
    - HEEx

	<div style={{marginTop: "-24px"}}>
    
    ```html
    <input type="checkbox" checked={@is_accepted} />
    ```
    
    </div>
    

## Syntax coloring:

You should use https://github.com/phoenixframework/vscode-phoenix extension for HEEx templates syntax coloring.

## HEEx formatter:

Here you can find code formatter for HEEx templates (alpha stage) - https://github.com/feliperenan/heex_formatter.

## Other:

1. In HEEx `<%= %>`, `<% %>` can only be used in HTML content and it’s not allowed to use them in HTML tags.

	- Not allowed
	
	<div style={{marginTop: "-24px"}}>
    
    ```html
    <input type="checkbox" <%= if @is_accepted, do: "checked" %> />
    ```
    
    </div>
    
    - Allowed
	
	<div style={{marginTop: "-24px"}}>
    
    ```html
    <h1>
    	<%= @title %>
    </h1>
    ```
    
    </div>

3. HEEx requires Elixir ≥ `1.12.0` to provide accurate file:line:column information in error message.
4. HEEx templates are being validated during the compilation.

## Resources:

- [https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html#sigil_H/2](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html#sigil_H/2)
- [https://hexdocs.pm/phoenix_live_view/assigns-eex.html](https://hexdocs.pm/phoenix_live_view/assigns-eex.html)

large_mountains-1412683.png

medium_mountains-1412683.png

small_mountains-1412683.png

thumbnail_mountains-1412683.png

mountains-1412683.png

Since Phoenix LiveView 0.16 has brought new HEEx templates (and LEEx are going to be deprecated), you may come across issues during migration.

Quick migration from LEEx to HEEx

Do you remember the time when you were watching Star Wars and were breath-taken by starships crossing the lightspeed and instantly travelling to another galaxy? If so, I would like to show you how to play with Star Wars API (SWAPI) using **Elixir Livebook**. You can follow the link to learn more about [SWAPI](https://swapi.dev/documentation).

## What is the Livebook?

You've probably heard about [Jupyter](https://jupyter.org/) which is a notebook for Python which is willingly used by data scientists and ML engineers. Inspired by its success and based on powerful Phoenix Live View this kind of notebook was created for the Elixir ecosystem

## Preparing our environment

Let's clone the official Github repo and then install dependencies:

```elixir
git clone https://github.com/elixir-nx/livebook.git
cd livebook
mix deps.get --only prod

# Run the Livebook server
MIX_ENV=prod mix phx.server
```

Create a new notebook and name it whatever you want. Did everything go smoothly? Now, we have to start by installing the required dependencies.

```elixir
Mix.install([
  {:tesla, "~> 1.4"},
  {:jason, ">= 1.0.0"},
  {:vega_lite, "~> 0.1.0"},
  {:kino, "~> 0.2.0"}
])
```
![mix install dependencies](https://strapi-appunite.s3.eu-central-1.amazonaws.com/mix_install_dependencies_65b3dbf219.png)

[Tesla](https://github.com/teamon/tesla) and [Jason](https://github.com/michalmuskala/jason) let us play with an external API and [Vega Lite](https://github.com/livebook-dev/vega_lite) together with [Kino](https://github.com/livebook-dev/kino) are required to use charts.

Creating a module with a client function will simplify our requests later on. We can obtain it by using [Tesla.client/2](https://hexdocs.pm/tesla/Tesla.html#client/2) function with the middlewares list inside.

```elixir
defmodule ForceClient do
  require Tesla

  def client(url) do
    Tesla.client([
      {Tesla.Middleware.BaseUrl, url},
      Tesla.Middleware.JSON
    ])
  end
end
```

![creating tesla client](https://strapi-appunite.s3.eu-central-1.amazonaws.com/creating_tesla_client_56dbcebf75.png)

We can fetch our data now. For this example, I will get `https:/swapi.dev/api/vehicles` using previously created client and [Tesla.get/3](https://hexdocs.pm/tesla/Tesla.html#get/3) function.

```elixir
url = "https://swapi.dev/api"

{:ok, %{body: body}} = ForceClient.client(url) |> Tesla.get("/vehicles")
```

![basic swapi request](https://strapi-appunite.s3.eu-central-1.amazonaws.com/basic_swapi_request_ffa0caaee1.png)

The fastest one is the coolest? Let's try to get name of the fastest vehicle. We have to get the object with the highest `"max_atmosphering_speed"` and then get its name.

```elixir
body["results"]
|> Enum.reduce(fn x, acc ->
  if String.to_integer(x["max_atmosphering_speed"]) <
       String.to_integer(acc["max_atmosphering_speed"]) do
    acc
  else
    x
  end
end)
|> Map.get("name")
```

![getting the fastest vehicle](https://strapi-appunite.s3.eu-central-1.amazonaws.com/getting_the_fastest_vehicle_945b0c398c.png)

Now we would like to see our data with diagrams. We will start with adding an alias:

```elixir
alias VegaLite, as: Vl
```

![elixir alias](https://strapi-appunite.s3.eu-central-1.amazonaws.com/elixir_alias_5dbaf63061.png)

After that, we can create our first chart. It's going to be a line chart of max atmospheric speed and length relationship. First, we have to parse our data to provide a suitable format.

```elixir
data =
  body["results"]
  |> Enum.map(
    &%{
      "length" => elem(Float.parse(&1["length"]), 0),
      "max_atmosphering_speed" => elem(Float.parse(&1["max_atmosphering_speed"]), 0)
    }
  )
```

```elixir
[
  %{"length" => 36.8, "max_atmosphering_speed" => 30.0},
  %{"length" => 10.4, "max_atmosphering_speed" => 1.2e3},
  %{"length" => 3.4, "max_atmosphering_speed" => 250.0},
	...
]
```

And then we can create a graph using [Vl.new/1](https://hexdocs.pm/vega_lite/VegaLite.html#new/1) and passing our data.

```elixir
Vl.new(width: 750, height: 400)
|> Vl.data_from_values(data)
|> Vl.mark(:line)
|> Vl.encode_field(:x, "length")
|> Vl.encode_field(:y, "max_atmosphering_speed")
```

![max atmosphering speed to length line chart](https://strapi-appunite.s3.eu-central-1.amazonaws.com/max_atmosphering_speed_to_length_line_chart_d17b115b83.png)

The next thing we will prepare is a pie chart of the count of vehicles having a specific class. As previously, we have to prepare data:

```elixir
data = 
  body["results"]
  |> Enum.frequencies_by(&Map.get(&1, "vehicle_class"))
  |> Enum.map(fn {k, v} -> %{"Class" => k, "value" => v} end)
```

```elixir
[
	%{"Class" => "airspeeder", "value" => 1},
  %{"Class" => "assault walker", "value" => 1},
  %{"Class" => "repulsorcraft", "value" => 3},
	...
]
```

And then generate pie chart:

```elixir
Vl.new(width: 600, height: 400)
|> Vl.data_from_values(data)
|> Vl.mark(:arc)
|> Vl.encode_field(:theta, "value", type: :quantitative)
|> Vl.encode_field(:color, "Class", type: :nominal)
|> Vl.config(view: [stroke: nil])
```

![vehicle class pie chart](https://strapi-appunite.s3.eu-central-1.amazonaws.com/vehicle_class_pie_chart_ad94af9d29.png)

The last thing we would like to do is a pretty table generated with markdown. Kino library provides an easy way to deal with it, so don't waste time and prepare it using [Kino.Markdown.new/1](https://hexdocs.pm/kino/Kino.Markdown.html#new/1) function.

```elixir
"""
## Pretty table

| Name | Vehicle class | Manufacturer |
| -----| ------------- | ------------ |
#{Enum.map(body["results"], &("| #{&1["name"]} | #{&1["vehicle_class"]} | #{&1["manufacturer"]} |\n"))}
"""
|> Kino.Markdown.new()
```

![drawing markdown tables](https://strapi-appunite.s3.eu-central-1.amazonaws.com/drawing_markdown_tables_fd98412d22.png)

## Summary

Did you enjoy it? Livebook provides much more interesting features, which you can find in the official examples. [Here](https://www.notion.so/ab3677d6d9243da221fe4ba0b3f1ddd8) you can get the whole notebook file. 

large_lego_2539844_1280_226c143074.jpg

medium_lego_2539844_1280_226c143074.jpg

small_lego_2539844_1280_226c143074.jpg

thumbnail_lego_2539844_1280_226c143074.jpg

lego_2539844_1280_226c143074.jpg

How about playing with Elixir Livebook using Star Wars API?

Let the force be with Livebook | AppUnite Blog

Let the force be with Livebook

Monday, 03.01.2022. I'm starting to develop a new feature and instantly see interesting test errors.

![Untitled.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Untitled_640abaff68.png)

What is the reason of such an issue?

```elixir
deleted_at =
	DateTime.new!(
		Date.new!(today.year - 5, today.month - 1, today.day),
		~T[12:00:00]
	)
```

The answer is as easy as ABC. We subtract 1 from 1 (January) and get month 0.
## Conclusion:

Be careful while manipulating on dates.

Kacper Latuszewski

Quick migration from LEEx to HEEx

Let the force be with Livebook

TIL: Welcome 2022 - :invalid_date