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

*Photo made by Adam Siekierski 📷*

In the era of digital nomadism, remote work has transformed the way businesses operate, providing professionals with the flexibility to work from virtually anywhere in the world. This growing trend has paved the way for "workation," a term that marries work and vacation. In the age of async remote work, taking a workation on another continent can provide some essential lessons. This article explores the concept and extracts valuable insights for companies and individuals alike.

### **The Concept of Workation**

Workation refers to the practice of working remotely while on vacation. It's an attractive prospect for many remote workers who seek to explore new cultures, landscapes, and experiences without sacrificing their professional commitments.

With the rise of asynchronous communication, which doesn’t rely on simultaneous participation, workation has become a more feasible and attractive option. It allows remote workers to blend their professional and personal lives seamlessly and is being considered not just as an indulgence but as a way to foster creativity, innovation, and well-being.

### **Adaptation and Flexibility**

Workation on another continent demands adaptability. Time zones, cultural differences, language barriers, and varying work ethics are some challenges that need to be addressed. The ability to adapt to these changes can not only make the workation a success but can also instill essential qualities required in a modern async remote work environment.

### **Enhanced Collaboration and Communication: The Importance of Documenting Every Action**

In the context of asynchronous remote work, particularly when engaged in a workation on another continent, effective collaboration and communication become critical. With team members working in different time zones and possibly in isolation from each other, the absence of real-time interaction can create gaps in understanding and alignment.

One of the key lessons from workation is the value of documenting every action and decision. This practice ensures that:

1. **Transparency:** By having a written record of discussions, decisions, and tasks, all team members have access to the same information, irrespective of when they work.
2. **Accountability:** Documenting actions helps in tracking responsibilities and commitments, fostering a sense of accountability among team members.
3. **Knowledge Preservation:** Documentation creates a repository of knowledge that can be referenced in the future, aiding in training new team members or revisiting past decisions.
4. **Facilitating Coordination:** With proper documentation, coordination becomes smoother as team members can understand the progress, blockers, or dependencies related to various tasks, even if they are not working at the same time.

Documenting every action becomes not just a good practice but a necessity for a successful workation experience and for async remote work in general. Tools like shared documents, project management systems, and collaborative platforms can be leveraged to facilitate this process.

### **Creativity and Innovation**

A change of scenery can stimulate creativity and provide fresh perspectives. Working in a new environment, immersed in a different culture, can lead to innovative thinking and problem-solving. These insights can be transferred back to regular working life, enhancing the creative capabilities of teams and organizations.

### **Well-Being and Productivity**

The balance between work and leisure that a workation provides can lead to improved mental well-being. The flexibility to explore and relax, coupled with the responsibility of work, can create a harmonious rhythm that enhances productivity and overall happiness.

### **Challenges and Solutions**

While the concept of a workation is appealing, it’s not without its challenges. Reliable internet access, potential distractions, and maintaining work-life boundaries are some issues that might arise. Proper planning, setting clear expectations, and leveraging technology can mitigate most of these challenges.

### **Workation in Japan: A Practical Example**

Japan, known for its rich cultural heritage, cutting-edge technology, and stunning landscapes, has become an appealing destination for workations. The blend of traditional and modern creates a stimulating environment that can lead to both professional growth and personal rejuvenation. Here's how a workation in Japan might serve as a real-world example of the principles discussed:

1. **Adaptation to Cultural Nuances:** Japan's unique work ethics and cultural etiquettes may require a remote worker to adapt quickly. This learning process can enhance flexibility and cultural sensitivity, valuable assets in async remote work.
2. **Time Zone Management:** Working from Japan may mean collaborating with team members across various time zones. Effective scheduling and the use of asynchronous communication tools like Notion, Loom orAsana can help in managing this disparity.
3. **Creativity Boost:** The inspiring surroundings, whether in bustling Tokyo or serene Kyoto, can fuel creativity and innovative thinking. This newfound inspiration can lead to fresh ideas and perspectives in one's work.
4. **Emphasizing Documentation:** Japanese businesses often place a strong emphasis on precision and attention to detail. Following this principle, documenting every action becomes essential, enhancing clarity and transparency within the team.
5. **Leveraging Technology:** Japan's technological advancements mean that even in remote areas, one might find reliable internet connectivity, facilitating seamless workation experience.
6. **Language and Communication:** While English may not be widely spoken outside urban areas, this barrier can be an opportunity to hone communication skills, learning to express ideas more clearly and succinctly.

A workation in Japan is not only an opportunity to explore one of the world's most fascinating cultures but also a real-life classroom for the principles of async remote work. The balance of technology and tradition, along with the lessons in adaptability, creativity, and meticulousness, make it an enriching experience that transcends the boundaries of conventional remote working practices.

### **Conclusion**

The practice of taking a workation on another continent is more than just an exciting travel opportunity. It serves as a key lesson for async remote work, teaching adaptability, enhancing communication, fostering creativity, and promoting well-being.

In the ever-evolving landscape of remote work, experiences like workation are not just trends but signposts pointing towards the future of work. They remind us that flexibility, creativity, and the human need for exploration and leisure can coexist with professional responsibilities, driving us towards a more balanced and fulfilling work life.

large_DSC00008 (1).JPG

medium_DSC00008 (1).JPG

small_DSC00008 (1).JPG

thumbnail_DSC00008 (1).JPG

DSC00008 (1).JPG

Explore the transformative trend of workation, where professionals combine work and vacation while traveling to other continents. This article delves into how workation serves as a valuable lesson for asynchronous remote work, offering insights into adaptability, enhanced communication through documentation, creativity, well-being, and productivity. Learn from real-world examples, including a detailed look at workation in Japan.

Explore the transformative trend of workation, where professionals combine work and vacation.

Work, Travel, Innovate: How Workation Shapes Asynchronous Remote Work

# 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

Work, Travel, Innovate: How Workation Shapes Asynchronous Remote Work

Quick migration from LEEx to HEEx

Let the force be with Livebook

TIL: Welcome 2022 - :invalid_date