DEV Community: Kevin Expósito

Emberjs Data Model Migration Guide

Kevin Expósito — Thu, 04 Sep 2025 03:48:31 +0000

This guide covers migrating Ember Data models from the legacy syntax to the modern one.

Useful docs:

Overview
Basic Migration Pattern
Attributes Migration
Relationships Migration
Computed Properties Migration
Testing Migrated Models
Complete Example
Best Practices

Overview

The migration involves converting from:

DS.Model.extend({...}) → export default class ModelName extends Model
attr() → @attr() decorator
belongsTo() → @belongsTo() decorator
hasMany() → @hasMany() decorator

Basic Migration Pattern

Before (Legacy Syntax)

After (Modern Syntax)

Attributes Migration

Simple Attributes

Attributes with Default Values

Relationships Migration

BelongsTo Relationships

HasMany Relationships

Computed Properties Migration

Testing Migrated Models

Basic Test Setup

Testing Attributes

Testing Computed Properties

Complete Example

Before (Legacy Model)

After (Modern Model)

Git Rebase vs Git Merge ¿cuál usar y cuándo?

Kevin Expósito — Thu, 07 Aug 2025 04:29:45 +0000

Cuando trabajamos en Git, eventualmente llega el momento de integrar cambios entre ramas. Dos comandos comunes para esto son git merge y git rebase, y aunque ambos buscan unificar historias, lo hacen de maneras muy diferentes.

`git merge`

Este comando une dos ramas creando un nuevo commit de «merge» que representa esa unión.

Pros:

Historial explícito : muestra claramente cuándo y cómo se fusionaron ramas.
Seguro : mantiene la historia original tal cual, sin reescribirla.
Ideal para ramas públicas o de uso continuo : como main o develop.

Contras:

El historial puede volverse más ruidoso con muchos commits de merge.
Menos lineal: puede dificultar la lectura cuando hay muchas ramas.

`git rebase`

Este comando reaplica los commits de una rama sobre otra , como si se hubieran creado después del último commit de destino.

Pros:

Historial limpio y lineal : ideal para revisiones más claras.
Útil para «reubicar» cambios antes de integrarlos (ej. cuando trabajás en una feature y querés mantenerla actualizada con main).

Contras:

Reescribe la historia : peligroso si ya compartiste esa rama con otros.
Puede ser más complejo de entender al principio.

¿Cuándo usar cada uno?

Situación	Usar
Quiero mantener el historial tal como ocurrió	`merge`
Quiero un historial limpio y lineal	`rebase`
Estoy colaborando y ya compartí la rama	`merge`
Estoy trabajando en una feature localmente	`rebase`

Tip Final

Usá rebase para limpiar tu historia antes de hacer merge, pero evitá hacerlo en ramas que otros ya estén usando.

Difference between the ^ and ~ in package.json

Kevin Expósito — Wed, 23 Apr 2025 02:38:06 +0000

^ vs ~

If you’ve ever looked at a package.json and wondered:

"lodash": "^4.17.21"

…or maybe:

"express": "~4.18.2"

And thought what’s with the hat and the squiggly line?, you’re not alone. Let’s decode what these characters do, and when to use them.

🔍 TL;DR: What do `^` and `~` mean in package.json?

Symbol	Allows Updates To	Example	Can Upgrade To
`^`	Minor & Patch	`^1.2.3`	`1.3.0`, `1.2.4`
`~`	Patch only	`~1.2.3`	`1.2.4`, not `1.3`
none	Exact version	`1.2.3`	Only `1.2.3`

`^` (Caret)

The caret means:

«Install this version or anything newer that doesn’t break major version compatibility.»

This follows Semantic Versioning (SemVer), where a major.minor.patch version tells you the scope of the changes.

Example:

"axios": "^1.3.2"

Can update to:

✅ 1.3.3
✅ 1.9.9
❌2.0.0 (major version change)

📌 It’s the default versioning npm uses when you run npm install axios@1.3.2.

`~` (Tilde)

The tilde means:

«Install this version or any newer patch within the same minor version.»

Example:

"axios": "~1.3.2"

Can update to:

✅ 1.3.3
✅ 1.3.9
❌ 1.4.0

This is much more conservative — perfect for when you don’t want unexpected changes sneaking into your builds.

🔥 Why This Matters: The Hidden Danger

Imagine this:

You deploy your app today with ^1.3.2.
A week later, 1.4.0 is released with a subtle change that breaks your edge case.
You run npm install, and suddenly your app is acting weird.

Surprise! 🎉

Unless you locked dependencies or used ~, you’re getting updates whether you asked for them or not.

🧠 Pros and Cons

Symbol	Pros	Cons
`^`	Keeps you up-to-date easily	Risk of breakage in minor updates
`~`	Safer and more predictable builds	Can miss out on minor improvements
none	Total control (exact version)	No updates unless manual

🛠 When to Use What?

Use `^` when:

You’re building a library or want the latest stable versions
You’re okay with minor version bumps and trust the maintainers

Use `~` when:

Stability is critical (e.g. production apps)
You want tight control over updates
You’ve been burned before

Use no symbol when:

You want full determinism
You’re building dockerized / reproducible builds

📦 Bonus: How to Check What’s Actually Installed

To see what version was installed:

npm list <package-name>

An alternative to this is just checking your yarn.lock or package-lock.json

To find out what’s outdated:

npm outdated

🧵 Conclusion

Choosing between ^ and ~ might seem like a small detail, but it can mean the difference between a calm deploy and hours of debugging.

Use ^ if you like to live a little.

Use ~ if you like sleeping at night.

Use no symbol if you’re preparing for war ⚔.

🔗 Related Resources

La entrada Difference between the ^ and ~ in package.json se publicó primero en Position Sticky.

¿Cómo Agregar Parámetros Condicionalmente en Componentes React?

Kevin Expósito — Wed, 10 Jan 2024 16:17:30 +0000

En este blog, exploraremos técnicas avanzadas para agregar parámetros condicionalmente en componentes React de manera eficiente, enfocándonos en mejorar la legibilidad y mantenibilidad del código.

Introducción: Desarrollo React Centrado en la Claridad del Código

En el desarrollo con React, la gestión efectiva de parámetros condicionalmente es esencial para mantener un código claro y fácil de entender. Vamos a explorar cómo mejorar este proceso utilizando un ejemplo de un botón en React.

Desafío Común: Parámetros Condicionalmente en Componentes React

A menudo, necesitamos manejar condicionalmente los parámetros de nuestros componentes. Consideremos el siguiente ejemplo de un Botón de la librería Chakra UI en React a la cual le queremos agregar que si cierta condición booleana isActive es verdadera, que se aplique el estilo {bg: white} (lo cual significa que el backgroundColor sea blanco)

Code without changes

Si bien esto funciona, no es lo mas lindo agradable de ver. Por lo que podemos agregar condicionalmente estos valores de otra forma.

Mejora Legibilidad y Mantenibilidad: Utilizando Parámetros Condicionalmente en Componentes

Refactorizar el código utilizando parámetros condicionalmente simplifica la lógica y mejora la legibilidad:

Apply conditional style in component

Lo que hicimos aqui fue agrupar todas las condiciones que queremos que sean aplicadas una vez isActive sea verdadera en un objeto llamado conditionalButtonStyle.

Ventajas de Utilizar Parámetros Condicionalmente en Componentes:

Legibilidad Mejorada: La refactorización simplifica el código, haciendo que la lógica condicional sea más clara y fácil de entender.
Mantenimiento Eficiente: Los parámetros condicionalmente permiten ajustes y actualizaciones centralizadas, facilitando el mantenimiento del código a lo largo del tiempo. Además que permiten agregar un bloque de parámetros a partir de la misma.

Conclusión: Desarrollo Inteligente para Mejorar Claridad del Código en React

En conclusión, agregar parámetros condicionales a los componentes React mejora la calidad del desarrollo y facilita el mantenimiento del código. Al adoptar estas prácticas, optimizamos nuestro código para que sea más legible y fácil de gestionar. ¡A seguir desarrollando con claridad en mente! ¡Hasta la próxima!

Si te gustó, no olvides de suscribirte para más contenido!

El día que ordené un Test en PedidosYa!

Kevin Expósito — Wed, 31 May 2023 14:47:02 +0000

🍔 Como alguien que disfruta buscar opciones deliciosas de comidas, me he convertido en un fiel visitante de PedidosYa, siempre dispuesto a descubrir nuevos sabores y locales. Se podría decir que muchas veces entro a la aplicación por hobby, solo para ver que encuentro (y termino pidiendo comida a pesar de ya tener lo que voy a comer).

Y déjenme contarles sobre una de los tantos viernes a la noche que me encontré con un Test de Integración en la lista de locales que tenia delivery a mi dirección.

A partir de determinada hora, la aplicacion, muestra siempre los mismos locales fieles a las personas nocturnas (ejemplo Mafalda) pero esta noche me encontre con otro local, lo cual me llamo la atencion, particularmente su nombre “Test POS Integration”.

🤔 Enseguida me di cuenta que algo no andaba bien, pero me dio curiosidad de ver que ofrecía este local y ver hasta donde podía llegar.

Por lo que decidí entrar y ver que comidas ofrecía, y al entrar observamos precios y nombres bastante locos, como por ejemplo: “Test de banana con coma”, “Hamburguesa con 3 papas”, “Agua para adultos”.

🔍 Mi curiosidad es grande, por lo que decidí realizar un pedido para ver que pasaba, entonces me pedi un Combo Agrandado Wrap de Carne y efectivamente el pedido se realizo correctamente.

Luego de varios minutos, el pedido nunca salió del estado de CONFIRMACION… supongo que tendrán un timeout, para evitar que el local tenga un pedido en espera a ser confirmado, por lo que el pedido fue cancelado automáticamente.

Mientras esperaba el pedido, intente comunicarme con Ayuda en linea para poder notificar de esta distracción, pero no fue posible.

plot twist: no me dieron ningún cupón

UPDATE:
Guardé el link del local de comida y parece que sigue estando activo

Comandos básicos para aprender Git

Kevin Expósito — Fri, 13 Jan 2023 03:46:14 +0000

Introducción:

Personalmente a la hora de aprender Git, muchas me vi abrumado por tantos comandos que veía en su web y aún más cuando cada uno de estos comandos podemos observar que tienen mil parámetros diferentes! (ver ejemplo de merge)

Y es por esa razón que traigo esta mini lista de comandos básicos para aprender Git que nos van a ayudar a movernos tranquilamente

Listado:

Crear un repositorio

git init

Agregar archivos modificados a staging

git add <nombre-del-archivo>

Ver archivos modificados

git status

Crear una nueva rama en Git

git checkout -b <nueva-rama>

Cambiarme a una rama en Git

git checkout <otra-rama>

otra forma en la que podemos hacerlo es:

git switch <otra-rama>

Crear un commit con los archivos de staging

git commit -m "Esto es un mensaje"

Deshacer commits (dejando los archivos en dirty)

git reset <commit-id>

Deshacer commits (borrando todo)

git reset --HARD <commit-id>

Pushear una nueva rama

git push origin <rama-actual>

Actualizar rama actual con origin:

git pull origin <rama>

Actualizar una rama con lo ultimo de main (si aun no subiste esa rama):

git pull origin main
git checkout <rama>
git rebase main

Actualizar rama con lo ultimo de main (si ya subiste los cambios)

git pull origin main
git checkout <branch-name>
git merge main

Con esta lista de comandos básicos vas a poder aprender git y realizar la gran mayoría de las cosas que quieras hacer!

La entrada Comandos básicos para aprender Git se publicó primero en Position Sticky.

Creating a Twitter Bot with Phoenix

Kevin Expósito — Tue, 13 Dec 2022 15:45:53 +0000

I started this blog in order to learn how to use Twitter API and also because i love going to the cinema 🙌. Im from Uruguay 🇺🇾, and here we have a cinema called "Movie Center". After checking their request, I started to investigate what we can get from them

Investigation 🕵️

After checking their request I found out that I can use that information for the Twitter bot.

Creating the app 👨‍💻

Let’s start by creating our Phoenix app

mix phx.new movies_uy
cd movies_uy
mix ecto.create

iex -S mix phx.server

Now Im going to add the following dependencies that are needed for the bot:

# mix.exs
defp deps do
  [
     {:finch, "~> 0.13"},
     {:oauther, "~> 1.1"},
     {:extwitter, "~> 0.12"},
     {:oban, "~> 2.13"}
  ]
end

Finch for doing request to the "Movie Center" API.
ExTwitter it's a Twitter Client for using Twitter API
Oban for creating jobs that run whenever we want (in our case once a day)

After adding this don't forget to run mix deps.get.

Config Finch

Let’s configure Finch by adding this, note that you can follow this from the Finch repo too.

# lib/movies_uy/application.ex
def start(_type, _args) do
  children = [
    ...
    {Finch, name: MoviesUyFinch}
  ]
end

Config ExTwitter 🧵

# config/config.exs
config :extwitter, :oauth, [
  consumer_key: System.get_env("TWITTER_CONSUMER_KEY"),
  consumer_secret: System.get_env("TWITTER_CONSUMER_SECRET"),
  access_token: System.get_env("TWITTER_ACCESS_TOKEN"),
  access_token_secret: System.get_env("TWITTER_ACCESS_TOKEN_SECRET")
]

Getting Movies 🎬

Let's add the following code that will search for all the movies from the Movie Center API.

# lib/movies_uy/movie_center.ex
defmodule MoviesUy.MovieCenter do
  require Logger

  def fetch_movies do
    movie_url = "https://api.movie.com.uy/api/billboard/cinema/weekly?nextReleases=false"

    request = Finch.build(:get, movie_url) |> Finch.request(MoviesUyFinch)

    with {:ok, %Finch.Response{body: data}} <- request,
     %{"items" => movies} <- Jason.decode!(data) do

      movies
      |> Enum.map(fn %{"content" => %{"title" => title, "id" => id, "urlSlug" => slug}}} ->

        "#{title} - https://www.movie.com.uy/movie/#{id}/#{slug}"
      end)

    else
      _ ->
        Logger.error "Error!"
    end
  end
end

You can also check if this is working correctly by running the following line on your iex
$ iex> MoviesUy.MovieCenter.fetch_movies # this should show all the movies from Movie center API

Using ExTwitter 🧵

Now is time to build the messages and post them on Twitter using ExTwitter.

What Im going to do is create a tweet that contains the current date, and the comments of this twitter will be the movies with their current url on Movie Center.

# lib/movies_uy/movie_center.ex
defmodule MoviesUy.MovieCenter do
  require Logger

  def fetch_movies do
    movie_url = "https://api.movie.com.uy/api/billboard/cinema/weekly?nextReleases=false"

    request = Finch.build(:get, movie_url) |> Finch.request(MoviesUyFinch)

    with {:ok, %Finch.Response{body: data}} <- request,
         %{"items" => movies} <- Jason.decode!(data),
         %ExTwitter.Model.Tweet{id: tweet_id} <- post_message()
    do
      movies
      |> Enum.map(&post_thread_message(&1, tweet_id))
    else
      error ->
        Logger.error error
    end
  end

  defp post_thread_message(%{"content" => %{"title" => title, "id" => id, "urlSlug" => slug}}, tweet_id) do
    "#{title} - https://www.movie.com.uy/movie/#{id}/#{slug}"
    |> ExTwitter.update(in_reply_to_status_id: tweet_id)
  end

  defp post_message do
    %Date{day: day, month: month, year: year} = Date.utc_today

    "Cartelera de Movie Center del #{day}/#{month}/#{year}"
    |> ExTwitter.update
  end
end

We can run this using the same function as before and we should be able to see that is posting correctly on Twitter.

Config Oban 📅

It’s time to use Oban, this will allow us to create a worker that runs our code whenever we want, in our case once a day! Lets config Oban (you can also read the docs).

$ mix ecto.gen.migration add_oban_jobs_table

Then open the generated migration and update it:

defmodule MoviesUy.Repo.Migrations.AddObanJobsTable do
  use Ecto.Migration

  def up do
    Oban.Migrations.up(version: 11)
  end

  # We specify `version: 1` in `down`, ensuring that we'll roll all the way back down if
  # necessary, regardless of which version we've migrated `up` to.
  def down do
    Oban.Migrations.down(version: 1)
  end
end

And finally lets run this

$ mix ecto.migrate

Lets add this

#config/config.exs
config :movies_uy, Oban,
  repo: MoviesUy.Repo,
  plugins: [
    Oban.Plugins.Pruner,
    {Oban.Plugins.Cron,
      crontab: [
        {"@daily", MoviesUy.DailyWorker, max_attempts: 1},
      ]}
  ],
  queues: [default: 10]

# lib/my_app/application.ex
def start(_type, _args) do
  children = [
    ...
    {Oban, Application.fetch_env!(:movies_uy, Oban)}
  ]
end

# lib/movies_uy/workers/daily_worker.ex
defmodule MoviesUy.DailyWorker do
  use Oban.Worker, queue: :default

  @impl Oban.Worker
  def perform(_) do
    MoviesUy.MovieCenter.fetch_movies()
  end
end

Thats it! you can see this Twitter bot working visiting: https://twitter.com/movies_uy

Note: you can also create just a mix app and this guide will work too. I used phx because Im planning to do another thing in the future with it

Things we used here:

Visit the bot:

Twitter bot: https://twitter.com/movies_uy

The code:

https://github.com/kexposito/movies-uy

How to add a dump file to our Phoenix app

Kevin Expósito — Fri, 16 Sep 2022 14:06:07 +0000

Working as developers, sometimes we need to migrate an existing app from one language to other, or even load data from Staging or Prod locally. So this guide shows how we can do that.

Creating dump files

If you don’t have any dump file for testing purposes you can generate one from an existing database

Of course you can create just one file that have the schemas and inserts,I prefer to have them in different files. You can learn more about all psql commands on https://www.postgresql.org/docs/current/app-pgdump.html

Create schema dump file

pg_dump --schema-only --file="schema_dump.sql" <database_name>
# or even shorter
pg_dump -s -f="schema_dump.sql" <database_name>

# --file=file
# Send output to the specified file.

# --schema-only
# Dump only the object definitions (schema), not data.

Create inserts dump file

pg_dump --data-only --file="insert_dump.sql" <database_name>

Applying data to our new databse

First of all you should create the database for you application:

mix ecto.create

If you already have the dump file, you can run the following command:

mix ecto.load -d <path_of_dumps>/schema_dump.sql

This will create the tables from the dump to our Phoenix app

If we have a data that we also want to add, we can use the same command in order to add the data to our app

mix ecto.load -d <path_of_dumps>/inserts_dump.sql

And we are ready to rock!

Now you should be able to generate migrations and run them on top of this!

Things we used:

My Nvim setup process

Kevin Expósito — Fri, 18 Feb 2022 01:00:26 +0000

Some of us have some special configurations and guides we like to follow for some tools like bspwm, sxhkd, polybar, terminal, etc. And here is mine for Vim, which I want to share with you.

⚠️ Make sure you have git installed, because one of our vim plugins will need that in order to work correctly.

Download Nvim

Go to https://github.com/neovim/neovim/releases and select the latest version from nvim and check Assets and download nvim.appimage.

Installing Nvim

Open a terminal and copy the code below

cd ~/Downloads
chmod u+x nvim.appimage && ./nvim.appimage

sudo mv nvim.appimage /usr/local/bin
sudo chmod +x /usr/local/bin/nvim.appimage

In my case that I want to rename it i will run the following command (you can also declare an alias for it).

sudo mv /usr/local/bin/nvim.appimage /usr/local/bin/vim

And that's it! we have Nvim installed and ready to go, but lets add some pretty configurations.

Install VimPlug

You can install VimPlug by running:

sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
   https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

and create the following directory:
mkdir ~/.config/nvim/
mkdir ~/.config/nvim/plugged (I will use this folder in our init.config)

If you are having any issue with this please follow the instructions here: https://github.com/junegunn/vim-plug#unix-linux

Init.vim

You shoud create the following file:
vim ~/.config/nvim/init.vim and fill it with your configuration.
Here is my init.vim, but I strongly suggest to use the things that you like and you feel comfortable with. And just adapt this guide to your preferences.

https://gist.github.com/kexposito/6a22cf04e83402c64b77c1434e63bef5

Installing addons

Now that we copy, or added some Plugs we are ready to
open vim and run :PlugInstall. (In case you already have addons)
I will create a guide for the most used addons by myself so keep tune.

Adding colorscheme to our Nvim

Let's create a color folder.

mkdir ~/.config/nvim/colors
And create a file named railscasts.vim
vim ~/.config/nvim/colors/railscasts.vim
and paste the following code https://gist.github.com/kexposito/16ed1d356d5bdcdc6709573a9e61e9b8
(This railscasts.vim file was taken from https://github.com/cedarcode/cedarvim)

" To use for gvim:
" 1: install this file as ~/.vim/colors/railscasts.vim
" 2: put "colorscheme railscasts" in your .gvimrc
"
" If you are using Ubuntu, you can get the benefit of this in your
" terminals using ordinary vim by taking the following steps:
"
" 1: sudo apt-get install ncurses-term
" 2: put the following in your .vimrc
"     if $COLORTERM == 'gnome-terminal'
"         set term=gnome-256color
"         colorscheme railscasts
"     else

Following the guide proposed in cedarvim, after this make sure to install ncurses-term by running sudo apt-get install ncurses-term.

Configure terminal to have a good looking

Let's start by changing the terminal theme to solirized one 😎

Open gnome terminal
Right click in terminal
Preferences
Unnamed
Colors
Unselect "use colors from system themes" and select "Solarized Dark". Another cool option would be "Gnome Dark"

Extra - Add custom fonts

Add Mononoki font to Ubuntu

Go to https://www.nerdfonts.com/font-downloads and search for "Mononoki Nerd Font" (here is a preview of it https://www.programmingfonts.org/#mononoki)
Download
Open a terminal and run:

mkdir /usr/local/share/fonts/Mononoki
cp ~/Downloads/Mononoki.zip /usr/local/share/fonts/Mononoki
unzip /usr/local/share/fonts/Mononoki/Mononoki.zip
rm /usr/local/share/fonts/Mononoki/Mononoki.zip
sudo fc-cache -fv

If you had any issue following these steps here is a guide for you too https://www.addictivetips.com/ubuntu-linux-tips/ubuntu-install-fonts-guide/

And now you should be able to select it:

Open gnome terminal
Right click in terminal
Preferences
Unnamed
Select custom font -> mononoki Nerd Font Mono

If you have permissions issues use sudo

📸 Screenshots 📸

If you have any special config file or keymapping that you can't work without it please share with us!

Connecting Ember.js with Phoenix

Kevin Expósito — Wed, 02 Jun 2021 13:58:33 +0000

Introduction

The aim of this article is not only to show how to connect a backend application using Phoenix and a frontend application using Ember, but also to know all the different issues that may be encountered when trying to connect any frontend or backend application.

Versions used in this guide:

Elixir: 1.11.3
Erlang/OTP: 21
Phoenix: 1.5.7

Node: 12.13.0
Ember CLI: 3.24.0

Creating Phoenix backend

Let's start by creating our project in Phoenix by running the following command:

$ mix phx.new pizza_corner_api
(...)
$ cd pizza_corner_api
$ mix ecto.create
$ iex -S mix phx.server

Then, let's create a migration in our application:

$ mix phx.gen.schema Api.Pizza pizzas name:string description:text image:string

This will generate the following files:

Now, we are going to apply the migration by running:

$ mix ecto.migrate

Nice! we have the Pizza table created, let's add some seeds:

After this, run:

$ mix run priv/repo/seeds.exs

Returning JSON API Responses with JaSerializer

Now we are almost ready to create the PizzaController and router, but before doing that, let's think about what we are doing. We are building the frontend in Ember and the backend in Phoenix. These technologies must communicate with each other. To do this we are going to use JSON API. This means that Phoenix and Ember apps must send and receive JSONAPI responses.

To do this in Phoenix we are going to use JaSerializer (https://github.com/vt-elixir/ja_serializer).

Installing JaSerializer

# mix.exs
defp deps do
    ...
    {:ja_serializer, "~> 0.16.0"},
    {:poison, "~> 3.1"}
    ...
end

$ mix deps.get

# config.exs
config :phoenix, :format_encoders,
  "json-api": Poison

config :mime, :types, %{
  "application/vnd.api+json" => ["json-api"]
}

And then:

$ mix deps.clean mime --build
$ mix deps.get

# router.ex
pipeline :api do
  plug :accepts, ["json-api"]
  plug JaSerializer.ContentTypeNegotiation
  plug JaSerializer.Deserializer
end

Finally, we are going to create the Pizza View and Controller:

Don't forget to add the endpoint to the router!

# router.ex
scope "/api", PizzaCornerApiWeb do
  pipe_through :api

  get "/pizzas", PizzaController, :index
end

Creating the Ember frontend

$ ember new pizza_corner --no-welcome

Adding the Pizza Model

Now, lets run the following code to see if everything is working fine:

$ ember s

and check it http://localhost:4200

What is happening?

If we open the console, we will see something like this:

What does this mean? By default Ember will request the same URL it is running on, so we must specify that we want to hit our Phoenix backend. To do this, we have to override the adapter as follows:

host is the url that we want to hit, and namespace is the path after the host. This is because, in the Phoenix router we specified that pizzas are inside api scope. By doing this and thanks to Ember JSONAPIAdapter, store.findAll('pizza') will hit http://localhost:4000/api/pizzas . To see more about this you can see: https://api.emberjs.com/ember-data/release/classes/JSONAPIAdapter

Update your app/serializers/application.js:

Now, let's try again, hopefully we will see some magic.
And no magic happens, So.. lets see the inspector again 😡

We are having a CORS issue here. Why does this happens?

This happens because of security. CORS doesn't allow communication between our Ember web app (http://localhost:4200) and our Phoenix api (http://localhost:4000) because they are not from the same path and this is not safe.

What can we do to fix this?

In order to fix this, we should tell our Phoenix API to accept incoming requests from Ember. To do this, we will use CORS Plug https://github.com/mschae/cors_plug, this plugin will allow us to configure that.

Installing CORS Plug

# mix.exs
defp deps do
    ...
    {:cors_plug, "~> 2.0"},
    ...
end

And then run:

$ mix deps.get

Also add:

#lib/pizza_corner_api_web/endpoint.ex
defmodule PizzaCornerApiWeb.Endpoint do
  use Phoenix.Endpoint, otp_app: :pizza_corner_api
    ...
    ...
    plug CORSPlug, origin: ["http://localhost:4200"] # <- Add this
    plug PizzaCornerApiWeb.Router
end

And after this, restart the server:

$ mix phx.server

Now visit http://localhost:4200 one more time. You will see the pizzas from our backend being rendered! 🎉🎉🍕

Phoenix Documentation:

Ember Documentation:

Things we used here:

JaSerializer (https://github.com/vt-elixir/ja_serializer)
Poison (https://github.com/devinus/poison)
Cors Plug (https://github.com/mschae/cors_plug)

DEV Community: Kevin Expósito

Emberjs Data Model Migration Guide

Table of Contents

Overview

Basic Migration Pattern

Before (Legacy Syntax)

After (Modern Syntax)

Attributes Migration

Simple Attributes

Attributes with Default Values

Relationships Migration

BelongsTo Relationships

HasMany Relationships

Computed Properties Migration

Testing Migrated Models

Basic Test Setup

Testing Attributes

Testing Computed Properties

Complete Example

Before (Legacy Model)

After (Modern Model)

Git Rebase vs Git Merge ¿cuál usar y cuándo?

git merge

Pros:

Contras:

git rebase

Pros:

Contras:

¿Cuándo usar cada uno?

Tip Final

Difference between the ^ and ~ in package.json

^ vs ~

🔍 TL;DR: What do ^ and ~ mean in package.json?

^ (Caret)

Example:

~ (Tilde)

Example:

🔥 Why This Matters: The Hidden Danger

🧠 Pros and Cons

🛠 When to Use What?

Use ^ when:

Use ~ when:

Use no symbol when:

📦 Bonus: How to Check What’s Actually Installed

🧵 Conclusion

🔗 Related Resources

¿Cómo Agregar Parámetros Condicionalmente en Componentes React?

Introducción: Desarrollo React Centrado en la Claridad del Código

Desafío Común: Parámetros Condicionalmente en Componentes React

Mejora Legibilidad y Mantenibilidad: Utilizando Parámetros Condicionalmente en Componentes

Ventajas de Utilizar Parámetros Condicionalmente en Componentes:

Conclusión: Desarrollo Inteligente para Mejorar Claridad del Código en React

El día que ordené un Test en PedidosYa!

Comandos básicos para aprender Git

Introducción:

Listado:

Crear un repositorio

Agregar archivos modificados a staging

Ver archivos modificados

Crear una nueva rama en Git

Cambiarme a una rama en Git

Crear un commit con los archivos de staging

Deshacer commits (dejando los archivos en dirty)

Deshacer commits (borrando todo)

Pushear una nueva rama

Actualizar rama actual con origin:

Actualizar una rama con lo ultimo de main (si aun no subiste esa rama):

Actualizar rama con lo ultimo de main (si ya subiste los cambios)

Creating a Twitter Bot with Phoenix

Investigation 🕵️

Creating the app 👨‍💻

Config Finch

Config ExTwitter 🧵

Getting Movies 🎬

Using ExTwitter 🧵

Config Oban 📅

Things we used here:

Visit the bot:

The code:

How to add a dump file to our Phoenix app

`git merge`

`git rebase`

🔍 TL;DR: What do `^` and `~` mean in package.json?

`^` (Caret)

`~` (Tilde)

Use `^` when:

Use `~` when: