DEV Community: Elxpro

Lessons from Law 1 of "The 48 Laws of Power"

Elxpro — Mon, 06 Jan 2025 10:17:27 +0000

Strategy, Respect, and Prudence: Lessons from Law 1 of "The 48 Laws of Power"

Law 1: Never outshine the master. This idea resonates deeply, not just in the context of bosses and leaders but in any relationship where we depend on or learn from someone. Below, we explore the book's teachings and practical reflections to apply them intelligently and respectfully in your life.

Submission with Purpose: Strategy and Proactivity

Submitting strategically is not a sign of weakness but a way to achieve greater objectives. It's about knowing when to yield to move forward.

Example: An employee accepts challenging or unpleasant tasks at work, demonstrating commitment and reliability. This positions the professional as indispensable, potentially leading to promotions or future opportunities.

Practical application in daily life:

If you feel the urge to retaliate, take a deep breath. Use phrases that defuse tense situations, such as: “I understand your point; can you explain more about how I can improve?” This demonstrates maturity and builds stronger relationships.

Respect the Trajectory of Those Above

Respecting the journey of those above you is essential to building healthy relationships and avoiding unnecessary confrontations.

How to practice this?

Listen more: Ask about the person's experiences and stories. For example: “How did you start in this field?” or “What motivated you to get where you are?”
Acknowledge efforts: Make positive comments, such as: “I find it impressive how you managed that complex project.”
Avoid comparisons: Focus on the person's merits instead of criticizing or thinking about what you would have done differently.

Dynamics of Autonomy and Control

To effectively support a superior, it is crucial to observe their preferences and adapt your behavior.

Autonomy vs. Control:

Autonomy: Some leaders prefer the team to make decisions independently. If this is the case, present ready solutions before seeking approval.
Control: Others like to be involved in the details. In this scenario, share each step of the progress and request constant feedback.

Quick Results vs. Planned Outcomes:

Leaders who prioritize quick results value practical and immediate solutions.
Leaders who prefer planning focus on detailed strategies and long-term forecasts.

Where to note patterns: Use tools like Notion, Evernote, or a simple notebook to record:

Communication preferences.
Typical reactions under pressure.
Things the leader values, such as punctuality or creativity.

Aligning Priorities and Solving Problems in Advance

How to align priorities?

Ask directly: “What points are most important to you in this project?”
Show interest: “I can help ensure this goal is achieved. Is there any area that needs special attention?”
Review your actions to ensure they meet the leader’s expectations.

Solving problems in advance:

Observe recurring failures: Identify and avoid errors that have occurred in previous projects.
Anticipate obstacles: Propose solutions before problems are noticed. For example: “I noticed the presentation needs clearer charts. I prepared something to improve this.”
Be proactive: Act before being asked. This demonstrates initiative and commitment.

Reflection on Career Goals

Your current goals—earning money, taking care of your family, and building passive income—are legitimate and respectable. However, having clarity about the path forward can help you achieve these goals more efficiently.

Questions for reflection:

What do you want to accomplish in the next 5 or 10 years?
What skills do you need to develop to grow in your field or create new sources of income?
How can you build passive income sustainably? Consider investments, creating digital products, or other sources that don’t demand much of your time.

Final Considerations

Applying Law 1 in practice requires observation, respect, and prudence. Be strategic in submission, value the trajectory of those above, and align priorities clearly and efficiently. Additionally, take time to reflect on your long-term goals, ensuring your actions align with what truly matters to you.

How to Build an Effective Software Engineer CV

Elxpro — Thu, 02 Jan 2025 19:16:57 +0000

How to Build a Good Developer CV

Creating a strong CV is essential for standing out in the competitive tech industry. This guide will walk you through the process of building a solid resume, including tips from top resources like ResumeMaker, JobScan, StackOverflow Blog, and Cake.

Key Points for a Strong Resume

1. Keep it One Page

Employers typically spend only a few seconds scanning your resume. A concise, one-page resume helps you highlight your best qualities without overwhelming the reader.

2. Include Relevant Skills

Only list skills that are relevant to the job you are applying for. Tailor your technical knowledge section to the job description to improve your chances of getting noticed.

3. Personalize Your Resume

Customize your resume to match the specific role you are applying for. This includes adjusting your experience descriptions and technical skills to reflect what the employer values.

4. Include Online Links

Include links to your LinkedIn, GitHub, or portfolio. These links can showcase your work in a more dynamic way than a static resume.

Step-by-Step Guide to Building a Developer CV

Step 1: Choose a Pre-Designed Resume Template

Use pre-designed resume templates to make the process easier. Templates help ensure your CV looks professional and is well-organized.

Step 2: Use Action Words

Begin bullet points with action verbs such as "designed," "developed," "led," or "implemented." This demonstrates your active involvement in past projects.

Step 3: Measure Impact, Not Just Responsibilities

Instead of simply listing tasks, explain the impact of your work. Use metrics when possible (e.g., "Reduced load time by 30%," "Improved performance, resulting in 40% higher efficiency").

Step 4: Tailor Your CV to the Job

Match the keywords and technologies mentioned in the job description. This not only ensures that your resume aligns with the company's needs, but also increases the chance of passing Applicant Tracking Systems (ATS).

Step 5: Highlight Relevant Experience

Focus on showcasing experience that directly aligns with the position. For instance, emphasize projects that use the technologies or skills the company is looking for.

Step 6: List Education and Certifications

Include your relevant degrees, certifications, or courses you've completed, especially if they’re relevant to the job you're applying for.

Step 7: Focus on Technical Knowledge

Your technical skills section should showcase the languages, tools, frameworks, and platforms you’re proficient in. Avoid listing too many tools that you’re not experienced with.

Step 8: Remove the Word “I”

Your CV should be written in the third person. Avoid using personal pronouns like "I" to keep the tone professional and objective.

Step 9: Avoid Buzzwords

Instead of generic buzzwords (e.g., "team player," "hardworking"), focus on specific skills, experiences, and accomplishments that demonstrate your abilities.

Step 10: Proofread for Typos and Grammar Mistakes

A CV with typos and grammar mistakes can easily harm your chances. Make sure to proofread your resume carefully or have someone else review it for you.

Resume Cheat Sheet

Check these off as you finalize your CV:

[ ] Use a pre-designed resume template
[ ] Ensure your resume fits on 1 page
[ ] Tailor your CV by including keywords from the job description
[ ] Mention the company name you're applying to
[ ] Make sure your first item aligns with the company's needs
[ ] Experience titles demonstrate value
[ ] Include online links (LinkedIn, GitHub, etc.)
[ ] Remove personal pronouns ("I")
[ ] Avoid buzzwords, focus on specifics
[ ] Use action words in descriptions
[ ] Quantify impact with numbers when possible
[ ] Only include sections that are impressive: Experience, Projects, Education, and Technical Skills
[ ] Double-check for typos and bad grammar

Conclusion

A good CV is a powerful tool to showcase your skills and experience. By focusing on relevant skills, measurable impact, and aligning your CV with the job you're applying for, you increase your chances of standing out to employers. Use the steps and tips in this guide to build a resume that truly represents your expertise as a developer.

If you want to understand how Elixir Apps work, this is the way

Elxpro — Thu, 25 Aug 2022 19:15:00 +0000

Before you read this Article, I highly recommend you read the article about GenServer:
https://dev.to/postelxpro/read-this-article-if-you-want-to-learn-genserver-1l24

Do you want to learn Elixir in three months? https://elxpro.com/sell

Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here, we discuss strategies and tips for your Elixir learning journey from zero to an expert in 3 months.

I am Gustavo, and today's theme is **Setup your local machine to use Elixir**.

ps: You can follow the Article with a VIDEO

Want to learn more about Elixir on a Telegram channel?

https://elxpro.com/subscribe-elxcrew

What is the difference between Supervisor and DynamicSupervisor?

Before understanding the difference between Supervisor and DynamicSupervisor. Let`s read and understand both.

Supervisor

https://elixir-lang.org/getting-started/mix-otp/supervisor-and-application.html

A supervisor is a process that supervises other processes, which we refer to as child processes. Supervisors are used to building a hierarchical process structure called a supervision tree. Supervision trees provide fault tolerance and encapsulate how our applications start and shut down.

In my experience as a Developer in general, Supervisor is a way to keep the lifecycle of my Elixir Web Applications and a way to start and manage the essential dependencies you will have in your App. E.g., Ecto, Phoenix, Oban, Broadway.

Suppose you understand how Supervisor Works. It will be much easier to create dependencies of processes and how to start them quickly. Building Elixir applications and understanding core frameworks will be more straightforward in that case.

DynamicSupervisor

A DynamicSupervisor starts with no children. Instead, children are started on demand via start_child/2. When a dynamic supervisor terminates, all children are shut down at the same time, with no guarantee of ordering.

https://hexdocs.pm/elixir/1.13/DynamicSupervisor.html
https://elixir-lang.org/getting-started/mix-otp/dynamic-supervisor.html

DynamicSupervisor starts the process when is necessary, and you can see it easily when you have a Browser opened or a query execution using Ecto. I like creating associations during our typical day as an Elixir Developer because most of the time you will not use DynamycSupervisor/Supervisor. But they are there, you are using them, and you probably will need to debug or understand a piece of code in our core frameworks like ECTO/Phoenix or others. That is why understanding the difference between them and maybe in a day use them.

What's worth more? Use Supervisor or DynamicSupervisor

I think you will use both but in a different context

Do you remember any stories where this was important to you?

Yes, I do. I remember when I knew only to use Phoenix and Ecto barely, and I had some problems with those frameworks and lifecycles. And also, I was encouraging myself to learn deeply about how Phoenix, Ecto, and Elixir work.

I had no idea why the application.ex was in my phoenix applications, no idea how the process and supervisors tree works, no idea how a phoenix app works. And I lost a lot of productivity in my day as an Elixir developer because I did not know why/how they worked and why they were there. When I decided to study how they worked and research both, my life as an Elixir developer changed. Elixir's level of skill and productivity was raised 10x more because I only understood how they work.

Where do you see people get it wrong the most?

The main problem is you feel comfortable using only libs like Phoenix and Ecto for more than 10 months. Because if you don`t understand how your elixir application works, you will face problems scaling apps using dependencies like Oban, Broadway, or frameworks to use Cache, MongoDb, and even simple GenServer.

The best way in my experience is:

Am I okay to create standard Phoenix Apps?
Now I am going to study how Process works.
Do I know how to make a GenServer/Agents and Tasks? I am going to look at it.
Do I understand how Supervisor and DynamicSupervisor work? I am good at learning it.

Where to start?

Level 1

Start a standard Elixir app

❯ mix new practice

and create a GenServer

defmodule StocksV1 do
  use GenServer

  def start_link(name: name, valuation: valuation) do
    GenServer.start_link(__MODULE__, valuation, name: name)
  end

  def init(state) do
    {:ok, state}
  end

  def handle_cast({:add, value}, state) do
    state = state + value
    {:noreply, state}
  end

  def add(stock, value) do
    GenServer.cast(stock, {:add, value})
  end
end

Lets Play around with our Genserver.

iex(4)> StocksV1.start_link name: :etsy, valuation: 10

iex(5)> :sys.get_state :etsy

iex(6)> GenServer.cast :etsy, {:add, 30} 

iex(7)> :sys.get_state :etsy

How about we want to start our stock within our App?

In this case, we can use Supervisor but how to start it?

It is simple, but we need to use the application because we are learning the whole process we need to use the application. And Application is essential for our Libs and Elixir application.

Applications are the idiomatic way to package software in Erlang/OTP. To get the idea, they are similar to the "library" concept common in other programming languages, but with some additional characteristics.

straightforward to use it, you only need to add in your mix.exs

  def application do
    [
      extra_applications: [:logger],
      mod: {Practice.Application, []}
    ]
  end

create application.ex

defmodule Practice.Application do
  use Application

  def start(_, _) do
    children = []
    Supervisor.start_link(children, strategy: :one_for_one, name: __MODULE__)
  end
end

Every time that you create an Application you must create an :erlang.link and in this case our link is our Supervisor. After starting the Supervisor you can only add your process to run:

defmodule Practice.Application do
  use Application

  def start(_, _) do
    children = [
      {StocksV1, name: :etsy, valuation: 10},
      # {StocksV1, name: :appl, valuation: 10}
    ]
    Supervisor.start_link(children, strategy: :one_for_one, name: __MODULE__)
  end
end

But you will notice that one of them is commented because you need IDS, and we can`t start it when we want but when we start the application, which makes us move to the next step. Start using DynamicSupervisors.

`
defmodule Practice.Application do
use Application

def start(_, _) do
children = [
{Registry, keys: :unique, name: Stocks},
{DynamicSupervisor, strategy: :one_for_one, name: Stocks.DynamicSupervisor}
]

Supervisor.start_link(children, strategy: :one_for_one, name: __MODULE__)

end
end
`

`
defmodule Stocks do
use GenServer

def start_link(name: name, valuation: valuation) do
name = stock_name(name)
GenServer.start_link(MODULE, valuation, name: name)
end

def stock_name(name) do
{:via, Registry, {MODULE, name}}
end

def init(state) do
{:ok, state}
end

def handle_cast({:add, value}, state) do
state = state + value
{:noreply, state}
end

def create_stock(name, valuation \ 20) do
DynamicSupervisor.start_child(
Stocks.DynamicSupervisor,
{Stocks, [name: name, valuation: valuation]}
)
end

def add(stock, value) do
stock = stock_name(stock)
GenServer.cast(stock, {:add, value})
end
end
`

When you call create_stock, different of a GenServer, you will create a child for your DynamicSupervisor and then. Create a process_id linking to your Parent's process.

`
iex(1)> Stocks.create_stock "apple", 100
{:ok, #PID<0.175.0>}

iex(2)> Stocks.create_stock "alphabet", 300
{:ok, #PID<0.177.0>}

iex(3)> :sys.get_state pid("0.175.0")
100
`

Because we are using Registry, the way that we are creating processes is different. that is why we have the function stock_name, creating the unique ID to our process and then change the state.

iex(4)> Stocks.add "apple", 300 :ok iex(5)> :sys.get_state pid("0.175.0")

Wrap up

If you followed this article, you will notice how simple is to use both of the services when you understand how the process works.

Social networks:

Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
Elxpro Linkedin - https://www.linkedin.com/company/36977430
Twitter - https://twitter.com/elx_pro
Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ

The most effective way to Setup your machine to use Elixir

Elxpro — Fri, 19 Aug 2022 12:52:00 +0000

Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey, from scratch to a hero Elixir developer.

I am Gustavo, and today's theme is **Setup your local machine to use Elixir**.

Do you want to learn Elixir in three months? https://elxpro.com/sell

ps: You can follow the Article with a VIDEO

Want to learn more about Elixir on a Telegram channel?

https://elxpro.com/subscribe-elxcrew

Why is it essential to set up your machine to use Elixir?

Having the tools on time will help you be more productive and performant.

And in addition to letting you perform faster, it will be simple and fast when you have everything you need to develop with Elixir.

Do you remember when it was necessary for your career?

For most of the projects I worked on, I noticed how arduous it was to set up my local machine to work with the right tools. When I decided to work with Elixir, I mapped all essential tools to work in multiple scenarios. I got lucky because this setup was always a success. Why do I want to share it with you? To make your life as an Elixir engineer easier.

Let`s start

Tools

Zsh

Zsh is a nice tool to use in your terminal

brew install zsh zsh-completions

Curl: Sometimes to, test HTTP requests is very usefull

Firacode: This font is easier to read for a developer.

After installing, I highly recommend setting up your terminal with this font.

OhMyZsh: Nice tool to make your terminal awesome for a developer

Elixir: The most important tool. Elixir lang

Phoenix: The most important framework. Phoenix to create Web Elixir projects.

GIT: Essential to control version code

Docker:

This is one of the most essential tools for a new-age developer. Docker makes our life easier to simulate environments, build our own image projects, and install databases and tools for the developers without dirtying our computers.

Redis

When I need to use Redis in a project, I install it using docker.
Mongo
When I need to use Mongo in a project, I install it using docker.

Kafka

When I need to use Kafka in a project, I install it using docker. I always use the script below, and it work really well

https://gist.github.com/theguuholi/f33b000d6aa1ee83b4d403574969e4a2

Postgres

Postgres is an essential Database for those who work with Elixir. And The script below that I provided for you is a way to install the Postgres database easily and fast to start without your need to make any extra configurations in your local machine.

docker network create pg --driver bridge

docker run --name pg --network=pg -e "POSTGRES_PASSWORD=postgres" -p 5432:5432 -v $HOME/docker/volumes/postgres:/var/lib/postgresql/data -d postgres:13.4

Gigalixir

A very nice tool to deploy Elixir application and cheap.

Docker-compose: Most of the time, when you install Docker, the tool gives you docker-compose

Kubernetes: Most of the time, when you install Docker, the tool gives you kubernetes

K9s: Kubernetes CLI To Manage Your Clusters In Style!

kubectx: Tool to change kubernetes clusters easily

kubernetes-cli: Tool to execute commands in kubernetes.

...kubectl..... get, apply... pods, deployments....

Helm:

Helm helps you manage Kubernetes applications — Helm Charts help you define, install, and upgrade even the most complex Kubernetes application

DBeaver: Access SQL databases

Conduktor:
We take the complexity out of Kafka. We give you the tools you need to troubleshoot, develop, test, and collaborate with confidence.

Insomnia: For me, is one the best HTTP tool, also easier to create a good APIs with REST/GraphQL documentation.

Cloud SDKs

Most of companies use one of them. I prefer google cloud :D

Google Cloud

Google Cloud SDK: Tool to access Google Cloud Services

Aws

Aws-Cli: Tool to access Aws Services

Eks-ctl: Tool to manage Aws kubernetes

VSCode

Beautify
Color Highlight
ElixirLS
ENV
Git Graph
Live Share
Markdown All in One
Material Icon Theme
Phoenix Framework
PostCSS Language Support
Tailwind CSS IntelliSense
Tools for Apache Kafka

My settings.json to VSCode: https://gist.github.com/theguuholi/0a8d3c8ca651f0fe737e10d53415eb20

{
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "emmet.includeLanguages": {
        "html-eex": "html"
    },
    "bracketPairColorizer.consecutivePairColors": [
        [
            "<",
            "</"
        ],
        [
            "<",
            "/>"
        ],
        [
            "Gold",
            "Orchid",
            "LightSkyBlue"
        ],
        "Red"
    ],
    "files.associations": {
        "*.eex": "html-eex",
        "*.leex": "html-eex",
        "*.heex": "html-eex"
    },
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json",
                "jsonc"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
        },
        "css": [
            "css",
            "less",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "html-eex"
        ]
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[html-eex]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "workbench.iconTheme": "material-icon-theme",
    "explorer.confirmDelete": false,
    "[json]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "security.workspace.trust.untrustedFiles": "open",
    "explorer.confirmDragAndDrop": false,
    "diffEditor.ignoreTrimWhitespace": false,
    "terminal.integrated.enableMultiLinePasteWarning": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "editor.codeActionsOnSave": {

    },
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    }
}

ShortCuts and Zsh

Install Z-init:

bash -c "$(curl --fail --show-error --silent --location https://raw.githubusercontent.com/zdharma-continuum/zinit/HEAD/scripts/install.sh)"

Plugins Zinit:

zinit light zdharma/fast-syntax-highlighting
zinit light zsh-users/zsh-autosuggestions
zinit light zsh-users/zsh-completions

zdharma/fast-syntax-highlighting: recognize commands
zsh-users/zsh-autosuggestions: suggest commands.
zsh-users/zsh-completion: add commands

My Zshrc config:
https://gist.github.com/theguuholi/d5da8b11d100f04290f8ba203f991767

Social networks:

Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
Elxpro Linkedin - https://www.linkedin.com/company/36977430
Twitter - https://twitter.com/elx_pro
ElxproBr - https://www.youtube.com/channel/UCl_BBK2sXZzQy_3ziNU7-XA
Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ

If you already created LiveView pages without this, read this article.

Elxpro — Wed, 03 Aug 2022 19:14:00 +0000

Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer.

I am Gustavo, and today's theme is **LiveView Pages**.

Do you want to learn Elixir in three months? https://elxpro.com/sell

ps: You can follow the Article with a VIDEO

Want to learn more about Elixir on a Telegram channel?

https://elxpro.com/subscribe-elxcrew

What is temporary_assign?

You can read temporary_assign on Elixir Documentation, but for me, it was really hard to understand. I will explain it to you using what is temporary_assign for me, and you can get your conclusion.

For me, temporary_assign with phx-update is a simpler way to prevent bugs in your LiveView pages when you have lists and possible real-time interactions with your pages, defining the best behavior with your team, product owners, and UX.

How do I figure that out?

When you are building LiveView pages, you probably just care about getting things done or getting the expected behavior; when you load/reload pages, your list will work normally, and the default behavior is a prepend on the list. But some bugs appear when necessary to update a list, and the elements are the same.

Why is temporary_assign so important?

It is so straightforward to use and can avoid many future problems. With a couple of lines implemented, you only need to define what is important in your list and what is a possible expected behavior when you update that.

Why temporary_assign can get consistent LiveView pages.

Because you can only define the expected behavior when new elements come, and if you don`t have this feature, for now, you can prevent kind of a bug in the future with only a few ways to think in your elements when you use temporary_assign and phx-updates.

How to use temporary_assign to get consistent LiveView Pages.

Without temporary_assigns example

If you use temporary_assigns and add new elements to your screen, the default behavior will be prepended and does not matter the ID.

...Live do
`
def mount(_, _, socket) do
messages = Enum.map(1..3, &%{id: &1, username: "gus #{&1}", text: "pumpkin #{&1}"})
socket = assign(socket, messages: messages)
{:ok, socket}
end

def handle_info({:u_msg, message}, socket) do
{:noreply, update(socket, :messages, fn messages -> [message | messages] end)}
end
`

...html.heex
<%= self |> :erlang.pid_to_list %> <ul> <%= for message <- @messages do %> <li> <p><span><%= message.username %>:</span> <%= message.text %></p> </li> <% end %> </ul>

`
iex(4)> pid = pid("0.698.0")

PID<0.698.0>

iex(5)> msg = %{username: "gus 234234", text: "pumpkin 1", id: :rand.uniform(10_000)}
%{id: 870, text: "pumpkin 1", username: "gus 234234"}
iex(6)> send pid, {:u_msg, msg}

{:u_msg, %{id: 870, text: "pumpkin 1", username: "gus 234234"}}
iex(7)> send pid, {:u_msg, msg}

{:u_msg, %{id: 870, text: "pumpkin 1", username: "gus 234234"}}
iex(8)>

Only temporary_assigns example

After defining what property element is temporary_assign and what will happen after receiving a new element, LiveView will delete every element and include the new one happening because now we have started using the default behavior replace. Now, define what you expect when a new element is added to your list using the useful article LiveView documentation provides us on the link below.

https://hexdocs.pm/phoenix_live_view/dom-patching.html

def mount(_, _, socket) do messages = Enum.map(1..3, &%{id: &1, username: "gus #{&1}", text: "pumpkin #{&1}"}) socket = assign(socket, messages: messages) {:ok, socket, temporary_assigns: [messages: []]} end

`
msg = %{username: "gus #{:rand.uniform(10_000)}", text: "pumpkin #{:rand.uniform(10_000)}", id: :rand.uniform(10_000)}
%{id: 9282, text: "pumpkin 7151", username: "gus 5213"}
iex(35)> send pid, {:u_msg, msg} {:u_msg, %{id: 9282, text: "pumpkin 7151", username: "gus 5213"}}
iex(36)>

The power of temporary_assigns and DOM patching.

When you use phx-update with temporary_assign, magic happens. You can define how to order your elements, not repeat the same element on your screen and define the best behavior for your user by simply adding phx-update.

Of course, you need to include an ID attribute in your phx-update, and every element in your list must also have an ID attribute.

<%= message.username %>: <%= message.text %>

Take a look an try by your self :D

iex(33)> send pid, {:u_msg, msg}

{:u_msg, %{id: 6719, text: "pumpkin 2150", username: "gus 8319"}}
iex(34)> msg = %{username: "gus #{:rand.uniform(10_000)}", text: "pumpkin #{:rand.uniform(10_000)}", id: :rand.uniform(10_000)}
%{id: 9282, text: "pumpkin 7151", username: "gus 5213"}
iex(35)> send pid, {:u_msg, msg} {:u_msg, %{id: 9282, text: "pumpkin 7151", username: "gus 5213"}}
iex(36)>
`

THE END.

After this article, I hope you understand how important it is to use temporary_assigns and phx-update. See you next time BYE!!!

Social networks:

Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
Elxpro Linkedin - https://www.linkedin.com/company/36977430
Twitter - https://twitter.com/elx_pro
ElxproBr - https://www.youtube.com/channel/UCl_BBK2sXZzQy_3ziNU7-XA
Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ

Read this Article if you want to learn Elixir with GenServer.

Elxpro — Tue, 02 Aug 2022 17:37:00 +0000

Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey, from scratch to a hero Elixir developer.

I am Gustavo, and today's theme is GenServer.

ps: You can follow the Article with a VIDEO

Do you want to learn Elixir in three months? https://elxpro.com/sell

Want to learn more about Elixir on a Telegram channel?

https://elxpro.com/subscribe-elxcrew

What is a GenServer?

GenServer is a process like any other Elixir process (Tasks, Spawn, Agents). It can be used to manage state and execute code asynchronously and includes some handy functionality around tracing and error reporting.

And for me, as a Liveview evangelist is one of the best ways to learn what you have behind the LiveView Apps, providing a better way to organize, think and isolate pieces of code.

Before we move forward, I think it is essential to read When Not Use GenServer. Because one of the biggest mistakes you can make is using GenServer for Everything, which is unnecessary.

What is the difference between GenServer, Tasks, and Agents?

Before you keep reading this article, I highly recommend watching the video about Elixir's processes.

https://youtu.be/em4QECkQx4s

GenServer : The GenServer behaviour abstracts the common client-server interaction. Developers are only required to implement the callbacks and functionality they are interested in.

Tasks: Tasks are processes meant to execute one particular action throughout their lifetime, often with little or no communication with other processes. The most common use case for tasks is to convert sequential code into concurrent code by computing a value asynchronously.

Agents: Agents are a simple abstraction around state.

Why is GenServer Important?

I have seen developers who start their career as Elixir developers but don't understand the basic concepts of how Elixir works.

Elixir is not a normal programming language. I mean that because Frontend Developers usually come to Elixir from React, Angular, and Vue, all of which use JavaScript and oriented programming languages. And daily, they face difficulties understanding what is behind LiveView, how to split components, and thinking in single responsibilities principles.

They don't understand it because of two simple things. Behind Elixir, there are processes, and LiveView is very similar to a GenServer.

What is the best moment to use GenServer?

Handle Sync and Async Calls: As we discussed, the main purpose of a GenServer is not to Code Organization but as a way to keep the state and manipulate it easily. Example Shopping Cart

System Messages: You can see some examples when you create ways to use spawn, send and receive_ . As _ I mentioned, I recorded a video explaining how the process works, and one of the examples is a simulation of how to access the database and execute a query.

Monitoring Events: Imagine that you have a company monitoring company stocks every second. The stocks' assets rise and fall every second.

Where to start?

Callbacks

init/1 (required) - invoked when the server is started and sets the initial state
handle_cast/2 - invoked when GenServer.cast/2 is called to handle messages asynchronously
handle_call/3 - invoked when GenServer.call/3 is called to handle messages synchronously
- call/3 will block until a reply is received (unless the call times out or nodes are disconnected)
handle_info/2 - invoked to handle all other messages (i.e., outside of those triggered by GenServer.call/3 and GenServer.cast/2, and "system" messages)
- g., messages/events handled internally within the GenServer
terminate/2 - invoked when the GenServer is about to exit

Init

Before we talk about Init, we must talk about start_link together.

start_link: when it is called, the new process created will call init, and init will start the state, which is an empty map, and the parent of ShoppingCart is the IEX terminal.

Take a look at the code.

defmodule ShoppingCart do
  use GenServer

  def start_link([name, state]) do
    IO.inspect(state, label: "start_link")
    GenServer.start_link(__MODULE__, state, name: name)
  end

  def init(state) do
    IO.inspect state, label: "init"
    {:ok, state}
  end
end

iex(1)> ShoppingCart.start_link [:elxpro_cart, []]
start_link: []
init: []
{:ok, #PID<0.161.0>}
iex(2)> Process.whereis :elxpro_cart
#PID<0.161.0>
iex(3)> self   
#PID<0.159.0>
iex(4)> :observer.start

HandleCast

Invoked when GenServer.cast/2 is called to handle messages asynchronously

In our example, imagine that you need to add a new product to your cart but don't care how many products you have there. You only want to add it is a perfect example of how to call handle_cast.

  def handle_cast({:add, product}, state) do
    state = state ++ [product]
    {:noreply, state}
  end

iex(1)> ShoppingCart.start_link [:cart_1, []]
start_link: []
init: []
{:ok, #PID<0.151.0>}

iex(2)> GenServer.cast :cart_1, {:add, %{name: "Pumpkin", price: 10}}

iex(3)> "0.151.0" |> pid |> :sys.get_state

HandleCall

The handle_call/3 callback is invoked when GenServer.call/3 is called to handle synchronous messages. The main params are function_pattern_mathing, _from, state.

function_pattern_mathing: a Way to identify how to call the function

_from: most of the time is the process_id that calls the function, and most of the time is useful

state: actual component state.

And the most common return is* {:reply, response, state}*

Reply: indicates that those who called the process will receive a message result.

Response: message to return for who called the process.

State: update process state.

Check the example, Bellow:

  def handle_call(:apply_discount, _from, state) do
    state = Enum.map(state, &%{&1 | price: &1.price - 1})
    products = Enum.map(state, &(&1.name <> " "))
    {:reply, "Discount applied to: #{products}", state}
  end

iex(1)> ShoppingCart.start_link [:cart_1, []]
start_link: []
init: []
{:ok, #PID<0.161.0>}


iex(2)>  GenServer.cast :cart_1, {:add, %{name: "Pumpkin", price: 10}}

iex(3)>   GenServer.cast :cart_1, {:add, %{name: "Gatorade", price: 20}}


iex(6)>  GenServer.call :cart_1, :apply_discount            
Result: "Discount applied to: Pumpkin Gatorade "

State: 
iex(7)>   pid = "0.161.0" |> pid |> :sys.get_state
[%{name: "Pumpkin", price: 8}, %{name: "Gatorade", price: 18}]

HandleInfo

The handle_info/2 callback is invoked to handle all other messages (i.e., outside of those triggered by GenServer.call/3 and GenServer.cast/2)

  def handle_info(:increase_price, state) do
    state = Enum.map(state, &%{&1 | price: &1.price + 1})
    {:noreply, state}
  end

iex(1)>  ShoppingCart.start_link [:cart_1, []]
iex(2)> GenServer.cast :cart_1, {:add, %{name: "Pumpkin", price: 10}}
iex(3)> pid = pid("0.161.0")                

iex(4)> :sys.get_state(pid)
[%{name: "Pumpkin", price: 10}]

iex(5)> send pid, :increase_price
iex(6)> :sys.get_state(pid)      
[%{name: "Pumpkin", price: 11}]

Code:

defmodule ShoppingCart do
  use GenServer

  def start_link([name, state]) do
    IO.inspect(state, label: "start_link")
    GenServer.start_link(__MODULE__, state, name: name)
  end

  def init(state) do
    IO.inspect(state, label: "init")
    {:ok, state}
  end

  def handle_cast({:add, product}, state) do
    state = state ++ [product]
    {:noreply, state}
  end

  def handle_call(:apply_discount, _from, state) do
    state = Enum.map(state, &%{&1 | price: &1.price - 1})
    products = Enum.map(state, &(&1.name <> " "))
    {:reply, "Discount applied to: #{products}", state}
  end

  def handle_info(:increase_price, state) do
    state = Enum.map(state, &%{&1 | price: &1.price + 1})
    {:noreply, state}
  end
end

THE END.

The main goal of this Article is to help you understand how easy it is GenServer and after couple examples, you can possibly create simpler LiveView Pages and Elixir Codes

Social networks:

Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
Elxpro Linkedin - https://www.linkedin.com/company/36977430
Twitter - https://twitter.com/elx_pro
ElxproBr - https://www.youtube.com/channel/UCl_BBK2sXZzQy_3ziNU7-XA
Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ

Understand why LibCluster is essential for your Phoenix Liveview applications

Elxpro — Tue, 12 Jul 2022 17:35:42 +0000

Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer

I am Gustavo and today's theme is: Understand why LibCluster is essential for your Phoenix Liveview applications

Do you want to learn Elixir in three months? https://elxpro.com/sell

_ps: You can follow the article with VIDEO

Want to learn more about elixir on a Telegram channel?
https://elxpro.com/subscribe-elxcrew

Which is?

LibCluster is a library that proves a simple way of connecting between ERLANG NODES that facilitates cluster communication.

Why is LibCluster important?

It becomes important from the moment you have distributed systems and you create communication in a simple way between them, where there is a huge difficulty in creating listeners when a need is running.

Example:

If you read the article/video about Nodes you probably know how to connect two applications in Elixir in a simple way, however, how do you get this environment in production? how are you going to detect these nodes in a Kubernetes cluster?, like this communication between different IPs in a simple way? create code for it?

The best way to create it is through LibCluster (the article about nodes teaches you what's under the hood)

How did you find this out?

One of the first libraries I learned about has more than 4 years of journey as an Elixir developer, there was always talk about the benefits of Elixir, it was the agent that had the advantage of distributed systems that were little or not used. But in a project using LiveView the LibCluster becomes more than mandatory and it was the case of a project that I can work on.

What are the advantages of using LibCluster?

The main advantage is to create connections between applications quickly, without having to connect nodes, generators, and OTP. LibCluster will abstract all these rules into a simple configuration.

When is the best time to implement LibCluster?

At the beginning of my career, I noticed essential things like implementation in Elixir, and I believe that today LibCluster is one of them. especially if you use live preview

You can start implementing LibCluster in Dev using the strategy of Gossip as it is one of the simplest and easiest to understand LibCluster, and when for production will depend on whether you are going to use Kubernetes, ECS, or any other environment. I work with clusters in Kubernetes and implement DNS.

THE END.

I hope the article helped you understand the need and urgency of how to use LibCluster in your applications. :D

Social networks:

Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
Elxpro Linkedin - https://www.linkedin.com/company/36977430
Twitter - https://twitter.com/elx_pro
ElxproBr - https://www.youtube.com/channel/UCl_BBK2sXZzQy_3ziNU7-XA
Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ

The worst way to handle sessions using Phoenix LiveView.

Elxpro — Tue, 12 Jul 2022 17:23:27 +0000

Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer

I am Gustavo and today's theme is: The worst way to handle sessions using Phoenix LiveView.

_ps: You can follow the article with VIDEO

Do you want to learn Elixir in three months? https://elxpro.com/sell

Want to learn more about elixir on a Telegram channel?
https://elxpro.com/subscribe-elxcrew

Which is?

The session is something temporary in an application. It is nothing more and nothing less than that.

However, in Elixir, Phoenix, and Liveview (mainly the web part) there are several ways to work with the session.

Can use:

Plugs

Which is a connection middleware and through this middleware persists data and reads data in a session. And there are several plugs to deal with this middle of this one, but this is not the case in this article

Phoenix Token

And a way to use and save data that expires in a simple way

Live view

There are several ways like session_storage, local_storage (as long as you use hooks), and live_session. And you can check out all kinds of approaches.

What is your live_session and why use it, as several advantages and approaches are straightforward that will in this article make a difference in the maintenance and readability of the application.

What is the difference between sessions and live_session?

The main difference is that the main focus of the session is on the connection, the persistent data traffic on the connection.

Now in the live_session you can get the data from the session, include it in the socket, and also program generic events on your page, which is a lot not to replicate code, in short, it's a middleware with superpowers.

How did you find this out?

The way I found out, was by reading the phoenix 1.5 to 1.6 update. And when the _session appeared, I thought there was no need for live. But I had pagination in an app that was working on a shared header using a live view within a live view.

If you understand processes, there was one process monitoring another an absurd complexity to create communication, it took a long time to understand how **OTP, Elixir, Processes under the hood and I even understand it all, and one solution (solution) was so verbose and complicated to handle.

At this event I had already worked with live_session on other projects (outside the Company), and I saw the power and amount of benefits that live_session brings to the new version of Phoenix Liveview through a conversation about code decisions I presented the solution and everyone liked it and the implementation was very simple.

ps: (I won't show a solution developed in this article, however, in the end, you will be able to create solutions better than I implemented)

Why is live_session important?

The great importance and question of superpowers that are easy to use. One of the game changers from version 1.5 to 1.6 was live_session because you don't need to write a lot of code, with just a few lines you'll be able to interact with the socket and include implementations and events, and especially create user rules.

What is the biggest benefit of live_session?

The biggest benefit is the issue of handling a socket as a session.

Do you remember any stories where this was important to you?

As I mentioned, the main one was your question about information generically designated in the socket, without having to replicate code something that the developers think and are.

And the other one was when I needed to trigger events from handle_events, handle_infos, handle_params without having to implement it on every page

How to create live_sessions?

You can start by understanding why. Some questions may help you:

Do I need to share this information on more than 1 page?
Does this event need to be replicated on more than one page?
Do I need to create any generalized trading rules?

If the answer is yes, live_session is the best option.

You can see in the image below that it was necessary to implement just a few lines of code and live_session starts to behave like a middleware

Before starting any session what live_session will do is call the permission module, check the scope (which is more than amazing pattern matching), and sign new information into the socket.

defmodule LiveSessions.Permissions do
  import Phoenix.LiveView
  alias FoodOrder.Accounts
  alias FoodOrderWeb.Router.Helpers, such as: Routes
  alias LiveSessions.CreateCart

  def on_mount(:user, _params, %{"user_token" => user_token}, socket) do
    assign_user(socket, :user, user_token)
  The end

  def on_mount(:admin, _params, %{"user_token" => user_token}, socket) do
    assign_user(socket, :admin, user_token)
  The end

  defp assign_user(socket, _,nil) do
    error_login(socket, "You must be logged in")
  The end

  defp assign_user(socket, :user, user_token) do
    current_user = Accounts.get_user_by_session_token(user_token)
    cart_id = get_connect_params(socket)["cart_id"]

    socket =
      socket
      |> assign_new(:current_user, fn -> current_user end)
      |> CreateCart.execute(cart_id)

    {:cont, socket}
  The end

  defp assign_user(socket, :admin, user_token) do
    user_token
    |> Accounts.get_user_by_session_token()
    |> return_socket(socket)
  The end

  defp return_socket(%{role: role}, socket) when role != :ADMIN,
    do: error_login(socket, "You do not have permission to access this page")

  defp return_socket(current_user, socket),
    do: {:cont, assign_new(socket, :current_user, fn -> current_user end)}

  defp error_login(socket, message) do
    socket =
      socket
      |> put_flash(:error, message)
      |> redirect(to: Routes.main_path(socket, :index))

    {:stop, socket}
  The end
The end

Wrap up

I hope I helped you in your learning, I always recommend visiting youtube videos, it usually has more resources. A big hug!!

Social networks:

Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
Elxpro Linkedin - https://www.linkedin.com/company/36977430)
Twitter - https://twitter.com/elx_pro
ElxproBr - https://www.youtube.com/channel/UCl_BBK2sXZzQy_3ziNU7-XA)
Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ)

Entenda o porque o LibCluster e essencial para suas aplicacoes em Phoenix Liveview

Elxpro — Mon, 11 Jul 2022 11:13:46 +0000

Saudacao

Seja muito bem vindo, seja muito bem vinda ao #FullstackElxpro

Aqui nós discutimos as estratégias e dicas de sua jornada de aprendizado em Elixir. Isso é do zero até a sua primeira vaga como desenvolvedor elixir

Do you want to learn Elixir in three months? https://elxpro.com/sell

Eu sou o Gustavo e o tema de hoje é: A pior maneira de lidar com sessoes com Phoenix Liveview.

_ps: Voce pode acompanhar o artigo com o video

Quer aprender mais sobre elixir em um canal do Telegram?
https://elxpro.com/elxcrew-org-yt-descr

O que é?

O libcluster e uma biblioteca que prove uma maneira simples de conexao entre ERLANG NODES que facilita a comunicacao de clusters.

Por quê LibCluster é importante?

Passa a ser importante a partir do momento em que voce tem sistemas distribuidos e voce precisa de criar comunicacao de maneira simples entre eles, onde existe uma dificuldade enorme de criar listeners quando uma aplicacao esta em execucao.

Exemplo:

Se voce leu o artigo/video sobre Nodes voce provavelmente sabe como conectar duas aplicacoes em Elixir de maneira simples porem, como voce controla esse ambiente em producao? como voce vai detectar esses nodes em um cluster de kubernetes?, como criar essa comunicacao entre ips diferentes de maneira simples? criar codigos para isso?

Na verdade a melhor maneira de criar essa conexao e atraves do libcluster (o artigo sobre nodes te ensina o que esta por debaixo dos panos)

Como foi que você descobriu isso?

Foi uma das primeiras bibliotecas que aprendi ha mais de 4 anos de jornada como desenvolvedor Elixir, se falava de beneficios do Elixir mas sempre agente comentava que a vantagem de sistemas distribuidos era pouco ou nao utilizada. Mas em um projeto utilizando liveview o libcluster passa a ser mais que obrigatorio e foi o caso de um projeto que eu comecei a atuar.

Quais as vantagens de usar LibCluster?

A principal vantagem e criar conexao entre aplicacoes de maneira rapida e simples, sem ter que precisar criar conexao de nodes, genservers e otp. O libcluster vai abstrair todas essas regras para uma simples configuracao.

Qual o melhor momento para Implementar o LibCluster?

No comeco da minha carreira eu percebi coisas essenciais como implementacao em aplicacoes Elixir, e acredito que hoje o libcluster e uma delas. principalmente se voce utilizar liveview

Voce pode comecar a implementacao do libcluster em Dev utilizando a estrategia de Gossip por ser uma das mais simples e facil de entender o libcluster, e quando for para producao vai depender se voce vai utilizar Kubernetes, ECS, ou qualquer outro ambiente. Geralmente eu trabalho com clusters em kubernetes e implemento DNS.

FIM.

Eu espero que o artigo tenha te ajudado a entender a necessidade e a urgencia de comecar a utilizar o libcluster em suas aplicacoes. :D

Redes Sociais:

Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
Elxpro Linkedin - https://www.linkedin.com/company/36977430)
Twiter - https://twitter.com/elx_pro
ElxproBr - https://www.youtube.com/channel/UCl_BBK2sXZzQy_3ziNU7-XA)
Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ)

A pior maneira de lidar com sessoes com Phoenix Liveview.

Elxpro — Tue, 05 Jul 2022 21:53:07 +0000

Saudacao

Seja muito bem vindo, seja muito bem vinda ao #FullstackElxpro

Aqui nós discutimos as estratégias e dicas de sua jornada de aprendizado em Elixir. Isso é do zero até a sua primeira vaga como desenvolvedor elixir

Do you want to learn Elixir in three months? https://elxpro.com/sell

Eu sou o Gustavo e o tema de hoje é: A pior maneira de lidar com sessoes com Phoenix Liveview.

_ps: Voce pode acompanhar o artigo com o video

Quer aprender mais sobre elixir em um canal do Telegram?
https://elxpro.com/elxcrew-org-yt-descr

O que é?

Sessao basicamente e algo temporareo em uma aplicacao. Nao e nada mais e nada menos que isso.

Porem em Elixir, Phoenix e Liveview (principalmente a parte web) ha diversas maneiras de trabalhar com sessao.

Pode utilizar:

Plugs

Que e um middleware de conexao e atravez deste middleware persistir dados e ler dados em uma sessao. E ha diversos plugs para lidar com este middle, mas nao e o caso deste artigo

[Phoenix Token

](https://hexdocs.pm/phoenix/Phoenix.Token.html)

E uma maneira de utilizar e guardar dados que expiram de maneira simples

Liveview

Ha diversas maneiras como: session_storage, local_storage (desde que use hooks), live_session. E tu pode conferir todos os tipos de abordagem.

O que voce vai ver neste artigo e live_session e o porque utiliza-lo, pois ha diversas vantagens e abordagens que sao extremamente simples que vai fazer toda a diferenca na manutencao e legibilidade da aplicacao.

Qual a Diferença entre sessoes e live_session?

A principal diferenca e que a sessao o foco maior e na conexao, trafegar dados persistidos na conexao.

Agora no live_session voce consegue pegar os dados da sessao, incluir no socket e tambem consegue programar eventos genericos em sua pagina o que facilita muito para nao replicar codigo, em resumo e um middleware com super poderes.

Como foi que você descobriu isso?

A maneira como eu descobri, foi na leitura do upgrade do phoenix 1.5 para o 1.6. E quando apareceu live_session achava que nao tinha necessidade alguma. Porem em uma aplicacao que venho trabalhando tinha um header compartilhado usando uma pagina liveview dentro de outra pagina liveview.

Se voce entende de processos, tinha um processo monitorando outro uma complexidade absurda para criar comunicao, exigia muito do time entender como OTP, Elixir, Processos funciona por debaixo dos panos e mesmo entendo tudo isso, e uma solucao (workaround) era tao verboso e complicado de manipular.

Neste evento eu ja tinha trabalhado com live_session em outros projetos (fora da Empresa), e vi o quao poderoso e a quantidade de beneficios que o live_session traz para a nova versao do Phoenix Liveview atravez de uma conversa sobre decisoes de codigo eu apresentei a solucao e todos gostaram e a implementacao foi muito simples.

ps: (eu nao vou mostrar a solucao desenvolvida neste artigo, porem, no final, voce sera capaz de criar solucoes melhores do que eu implementei)

Por quê live_session é importante?

A grande importancia e a questao dos superpodeeres que sao faceis de utilizar. Um dos divisores de agua da versao 1.5 para a 1.6 foi o live_session pois voce nao precisa escrever muito codigo, com poucas linhas voce vai conseguir interagir com o socket e incluir implementacoes e eventos, e principalmente criar regras de falhas.

Qual o maior benefício do live_session?

O maior beneficio e a questao de manipular um socket como uma sessao.

Você se lembra de alguma história em que isso foi importante pra você?

Como eu mensionei, a principal historia foi a questao de assinar informacoes no socket de maneira generica, sem ter que replicar codigos algo que desenvolvedores acha chato e realmente e.

E a outra foi quando precisei trigar eventos de handle_events, handle_infos, handle_params sem precisar implementar em todas as paginas

Como criar live_sessions?

Voce pode comecar entendendo o motivo. Algumas perguntas pode te ajudar:

Eu preciso de compartilhar essa informacao com mais de 1 pagina?
Esse evento precisa ser replicado em mais de uma pagina?
Preciso de criar alguma regra de negocio generalizada?

Se a resposa for sim, o live_session e a melhor opcao.

Voce pode acomparnhar na imagem abaixo que foi preciso implementar somente algumas linhas de codigos e o livesession comeca a se comportar como um middleware

Antes de comecar qualquer sessao o que o live_session vai fazer e chamar o modulo de permissao, verficiando o escopo (o que e um pattern matching mais do que incrivel) e assinar novas informacoes no socket.

defmodule LiveSessions.Permissions do
  import Phoenix.LiveView
  alias FoodOrder.Accounts
  alias FoodOrderWeb.Router.Helpers, as: Routes
  alias LiveSessions.CreateCart

  def on_mount(:user, _params, %{"user_token" => user_token}, socket) do
    assign_user(socket, :user, user_token)
  end

  def on_mount(:admin, _params, %{"user_token" => user_token}, socket) do
    assign_user(socket, :admin, user_token)
  end

  defp assign_user(socket, _, nil) do
    error_login(socket, "You must be logged in")
  end

  defp assign_user(socket, :user, user_token) do
    current_user = Accounts.get_user_by_session_token(user_token)
    cart_id = get_connect_params(socket)["cart_id"]

    socket =
      socket
      |> assign_new(:current_user, fn -> current_user end)
      |> CreateCart.execute(cart_id)

    {:cont, socket}
  end

  defp assign_user(socket, :admin, user_token) do
    user_token
    |> Accounts.get_user_by_session_token()
    |> return_socket(socket)
  end

  defp return_socket(%{role: role}, socket) when role != :ADMIN,
    do: error_login(socket, "You don`t have permissions to access this page")

  defp return_socket(current_user, socket),
    do: {:cont, assign_new(socket, :current_user, fn -> current_user end)}

  defp error_login(socket, message) do
    socket =
      socket
      |> put_flash(:error, message)
      |> redirect(to: Routes.main_path(socket, :index))

    {:halt, socket}
  end
end

Finalizacao

Eu espero que eu tenha te ajudado no seu aprendizado, recomendo sempre visitar os videos do youtube, geralmente tem mais recursos. Um grande abraco!!

Redes Sociais:

Getting Started Using Hooks with Phoenix and Liveview

Elxpro — Mon, 04 Jul 2022 12:58:05 +0000

Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer

I am Gustavo and today's theme is: Getting Started Using Hooks with Phoenix and Liveview

Do you want to learn Elixir in three months? https://elxpro.com/sell

_ps: You can follow the article with VIDEO

Want to learn more about elixir on a Telegram channel?
https://elxpro.com/subscribe-elxcrew

What are Hooks with Liveview?

The hook is nothing more than a "hook", where you can send events to the server and vice versa.

What is the Difference between Hooks and Liveview in everyday life?

The main difference is that hooks are a way to send and receive data from the frontend/backend to the browser using a javascript syntax with Elixir, it looks a lot like a LiveView page or nothing new. But the biggest difference is that on a day-to-day basis Liveview takes care of almost all this work, the Hook is a way where you need to manipulate the DOM for something very specific that using LiveView would be almost impossible. The most common example is to listen to the page and wait that when you reach the end, load new elements, Javascript gives you this very easy resource, the hook will help you send it to your server. Another example would be manipulating a map, accessing geolocation resources, BlueTooth, wifi among others only with the browser, and hooks will help you in these processes. While Liveview will be responsible for everyday work like CRUD, real-time, tables, notifications, backend, and common frontend interaction.

Why is understanding Hooks important?

As I mentioned above, some events and access to Browser resources so that it is possible through Javascript and understanding about Hooks gives you the flexibility to work with Liveview and Elixir without losing functionality.

What are the advantages of using Hooks?

In my experience, the main advantage is access to computer resources such as Geolocation, Bluetooth, wifi... among others and you can check with the images below.

Geolocation

https://www.w3schools.com/html/html5_geolocation.asp

console.log(navigator)

Where to start?

The first step is always to understand when there is a need for the hook, understanding the need and LiveView cannot supply, start with a hook see documentation

Determine the main elements of a Hook

The main elements of a hook are id and phx-hook="HookName" as shown in the image below:

<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " />

<div id="mirror"></div>

After the definition you will receive the first error in your browser as follows:

Create a folder structure for hooks and Create your hook

In assets/js/app.js create a possibility to access hooks. The ideal is always separate hooks in dough as they can make a mess.

After defining the hooks file call, and creating a file to always point the hooks as you can see the image, in the hooks folder create hooks. See the image below.

And now create the hook as defined in input as MirrorValues and now and call the Js class,

What was created is simply a function with the name of the Hook, where mounted was executed when our element was added to our screen.

And what our hook does is nothing less than simply taking the input data and including it in a div.mirror tag

Is there any exception where Hooks is not good?

When starting to replace Liveview heavy lifting is not indicated.

Wrap up:

I hope you enjoyed this article and it helped you to know when/not to use hooks :D

Social networks:

The minimum of Tailwind you need to know to work with Elixir/Phoenix

Elxpro — Sat, 02 Jul 2022 11:00:12 +0000

Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer

Do you want to learn Elixir in three months? https://elxpro.com/sell

I am Gustavo and today's theme is: The minimum of Tailwind you need to know to work with Elixir/Phoenix

_ps: You can follow the article with video

Want to learn more about elixir on a Telegram channel?
https://elxpro.com/subscribe-elxcrew

What is Tailwind?

Is a CSS framework that gives you the possibility to create layouts using a ready-made CSS framework. This allows you to optimize the time of creating a UI without having to do everything manually.

How did I discover Tailwind?

I discovered Tailwind when I needed to deliver my project first to a company using Elixir/Phoenix, I was I didn't want to provide the CSS as it would require a lot of time, bootstrap was a great option but when I was looking for free dashboard themes on the internet it was tough to find a theme, look for other options. I even considered the possibility of using MaterializeCss too. Still, I need a layout and paid, we discovered Tailwind and found the control panel layouts easy to use, and simple to install as I needed to import tailwind and copy and paste HTML from a website TailwindComponents.

When was the first time you put it into production?

That was about 4 years ago, the experience was interesting, because it was easy not to worry about creating layouts, and at the time, tailwind didn't have the number of resources that it does today.

Today, you can enter tailwind component, and tailwindUI, among other sites, and find incredible content that is easy to adapt to what you need. Coming back to the feature, at that time excellent, mobile-friendly, including for a short period that had a lot of features for your customers to experience and would provide a great experience for my customers in a short time.

The interesting thing that had doors to have projects was the one that this project took codes but what it was and the project opened the exterior for me because I care about projects, which made it easier for me to go outside Brazil using the famous PETAL stack (I don't like the alpine and people I've been working with also say the same but that's not the focus of this conversation) :D

Why is Tailwind important?

I believe it opens doors today in many companies and even for you to simply copy and paste codes and sell websites (not the current discussion either), famous companies and even Edtechs are starting to use tutorials.

What are the advantages of using Tailwind?

I always like to bring 3 points and there they go

Quick to create Layouts

In Tailwind, you will find several resources that you can simply copy and paste (free of charge) and simply change the cores as needed, which facilitates the WEB development daily.

Simple Installation

Even with Elixir/Phoenix something that I simply installed that was complicated and easy to follow the steps without much verbosity, and even the website itself has already provided a tutorial on how to follow in your projects.

Ease of use

You have very good and didactic documentation. Documentation providing CSS classes and an explanation of how to use and what each CSS class contains.

Where to start?

You can start by creating a Phoenix project.

❯ mix phx.new first_tailwind

Add a dependency to your project on mix.exs.

defp deps do
  [
    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
  ]
end

Configure tailwind in config.exs, where it will read, and where it will output the data.

config :tailwind, version: "3.1.4", default: [
  args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
]

Include the Deploy Script:

defp aliases do
  [
    "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
  ]
]

Install Tailwind

mix tailwind.install

Include the import modules in: ./assets/tailwind.config.js

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Include Tailwind's Core components in app.css:

ps: I usually delete the phoenix.css and remove the import, to use only tailwind, something that's pretty cool to do, and remove all the default phoenix layout and CSS properties so you don't get lost during development

@tailwind base;
@tailwind components;
@tailwind utilities;
import "../css/app.css" (REMOVER)

Testing the tailwind:

#your index
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

And initialize your application.

How to organize your App with Tailwind?

What is very important to know about Tailwind and make it easy to create your APP using two very advanced features

1 Apply

You can apply tailwind to your HTML Tags using Apply and it's very simple, see the example below:

body{
  @apply bg-zinc-900 text-zinc-100;
  --webkit-font-smoothing: antialiased;
}

form.crud {
  @apply bg-zinc-700 flex flex-col m-10 p-20
}

In the example above I applied a default color background. And in the cruds I do with Elixir I cried my easy style and I don't have to think about a lot of code for my forms.

2 Tailwind Settings

When you need cores, background, and pading fonts with you use tend setting properties and tailwind setting how to set as a remainder and easily to use with ease. See the example below:

// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
    extend: {
      backgroundImage: {},
      fontFamily: {
        sans: 'Roboto, sans-sefif',
      },
      colors: {
        elxpro: {
          primary: "#274395",
          secondary: "#3dbfef",
          white: "#fff"
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms')
  ]
}

And to use both border, background and text I need to put PropertyType-DefinNameInConfigs-ConfigProperty

<li class="border rounded border-elxpro-primary p-1 pl-3 pr-3 ml-1 hover:bg-elxpro-secondary text-sm">

Social networks:

Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
Elxpro - https://www.linkedin.com/company/36977430
Twitter - https://twitter.com/elx_pro
Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ