DEV Community: Víctor Adrián

How to enable night mode for Calibre in Manjaro Linux

Víctor Adrián — Sat, 08 Dec 2018 16:19:06 +0000

Manjaro Linux i3 ships with a dark theme setting by default.

Something I really appreciate.

When you install Calibre and execute it, you’ll find thatit doesn’t use the system’s theme.

However, telling it to do so is really easy.

You just need to set the CALIBRE_USE_SYSTEM_THEME env var, like this:

echo -e '\nexport CALIBRE_USE_SYSTEM_THEME=1' >> .profile

To try it out immediately, export the CALIBRE_USE_SYSTEM_THEME var and launch Calibre with:

export CALIBRE_USE_SYSTEM_THEME=1
calibre&

If you want it to work through d-menu (SUPER + D) logout and login backinto session.

That’s it!

How to fix Redshift in Manjaro Linux i3

Víctor Adrián — Thu, 04 Oct 2018 02:11:59 +0000

Redshift is a very cool program that can help in keeping your eyesight healthy — it’ll tint your screen red a little bit when the night approaches.

This puts less strain in your eyes.

The problem

Everything was working good, I had the redshift package installed and had setup it to start automatically on my ~/.i3/config.

It was just after an update that I started to see this when trying to run it:

Trying location provider `geoclue2'...
Using provider `geoclue2'.
Using method `randr'.
Waiting for initial location to become available...
Unable to start GeoClue client:
 GDBus.Error:org.freedesktop.DBus.Error.NoReply:
 Message recipient disconnected from message bus without replying.
Unable to get location from provider.

And seeing this dialog when trying to start redshift-gtk:

It never worked after that, even with the newest versions for geoclue2 and redshift:

pacman -Q geoclue2 redshift
geoclue2 2.4.12-1
redshift 1.12-2

The solution

After doing some sleuthing, I found a solution.

Edit your /etc/geoclue/geoclue.conf file, and add this at the end:

# ...
[redshift]
allowed=true
system=false
users=

To start Redshift automatically, add these lines to your ~/.i3/config:

exec --no-startup-id /usr/lib/geoclue-2.0/demos/agent
exec --no-startup-id redshift-gtk

That’s it!

How to create a Manjaro Linux live USB through the CLI

Víctor Adrián — Sat, 22 Sep 2018 04:39:12 +0000

You can check the latest updated version of this article at lobotuerto's notes - How to create a Manjaro Linux live USB through the CLI.

Download the Manjaro i3 community edition

Talking about Manjaro I prefer the i3 community edition.

Be sure to have an .iso file ready, or download the latest image from here.

Verify with SHA1 or SHA256

After you download the .iso file, you can also download the .sha1 or .sha256 files.

To verify the ISO against them, you can do this:

sha1sum -c manjaro-i3-17.1.12-stable-x86_64.iso.sha1
sha256sum -c manjaro-i3-17.1.12-stable-x86_64.iso.sha256

If everything is allright, you’ll see: manjaro-i3-17.1.12-stable-x86_64.iso: OKfor both of them.

Find the right letter for your device

Insert the stick into a port and get a list of connected devices with this:

sudo fdisk -l

Identify the letter for your drive on the output, in my case the drive I’m looking for is this one:

Disk /dev/sdc: 14.3 GiB, 15376318464 bytes, 30031872 sectors

I can tell because it’s —supposedly— a 16GB device, look at the 14.3 GiB size reported above.

In this example, the letter for the drive is the c from sdc. It could have been b, d or something else. Just make sure that it is indeed the drive you want to trash.

You won’t be able to recover anything from it once it’s been zeroed.

Zero the bits out of the USB drive

Next, let’s zero the drive out, this serves as a security measure and also it allows you to tell ifthe drive is still functioning well —if the drive is dying, the process will take an unusually long time, or it’ll get stuck before reaching the end, that’s a sign that you need to get a new USB.

Ok, let’s write zeros all over the USB drive with:

sudo dd if=/dev/zero of=/dev/sdc bs=4M status=progress conv=fdatasync

NOTE: Remember that the command above is considering that the USB is located at: /dev/sdc.

Make sure you have the right path for yours!

That command will report progress back to you.

Copy the ISO image to the USB drive

When finished, go to the directory where you downloaded the .iso file and deploy it to the USB drive like this:

sudo dd if=manjaro-i3-17.1.12-stable-x86_64.iso of=/dev/sdc bs=4M \
status=progress conv=fdatasync

That’s it, now you should have a bootable USB with Manjaro Linux in it!

Basic Git configuration

Víctor Adrián — Mon, 11 Jun 2018 00:20:33 +0000

You can check the latest updated version of this article at lobotuerto's notes - Basic Git configuration.

Introduction

If you are a Manjaro Linux user, then you already have Git in your machine.

If you are an Ubuntu user, install it with:

sudo apt install git

You can check it's working with this:

git --version
# git version 2.17.1

Let’s proceed with some basic setup, so we are able to initialize new projects and make commits.

User and email

Git will use this data to mark any commits you create:

git config --global user.name "Your name goes here"
git config --global user.email "your@email.goes.here"

Colorful CLI

To have colored output when doing git status and git diff:

git config --global color.ui "auto"

CPU threads

To enable automatic detection of CPU threads to use for packing repositories:

git config --global pack.threads "0"

Useful alias

Add this to your ~/.gitconfig:

[alias]
    l = log --oneline --decorate --graph

    ll = log --graph --abbrev-commit --decorate --date=relative \
    --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) \
    %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(bold yellow)%d%C(reset)'

    lll = log --graph --abbrev-commit --decorate --date=relative \
    --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) \
    %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(bold yellow)%d%C(reset)' \
    --branches

    co = checkout
    ci = commit
    man = help
    h = help
    a = add
    f = fetch
    d = diff
    dc = diff --cached
    dt = difftool
    dtc = difftool --cached
    ds = diff --stat
    dsc = diff --stat --cached
    s = status --short --branch
    b = branch

[credential]
    helper = cache

[diff]
    algorithm = patience

Global .gitignore

Let’s define a global .gitignore file:

git config --global core.excludesfile ~/.gitignore_global

And let’s use it to ignore Visual Studio Code project files and also files generatedby the ElixirLS plugin:

echo ".vscode/" >> ~/.gitignore_global
echo ".elixir_ls/" >> ~/.gitignore_global

Dealing with line endings

Linux / Mac

If you are a Linux / Mac user:

git config --global core.autocrlf input
git config --global core.safecrlf true

Windows

If you are a Windows user:

git config --global core.autocrlf true
git config --global core.safecrlf true

A little critique of Google's Material Design and its associated websites

Víctor Adrián — Mon, 07 May 2018 06:00:00 +0000

You can check the latest updated version of this article at lobotuerto's notes - A little critique of Google's Material Design and its associated websites.

I have a couple of opinions to state regarding the spec —which by the way I think is a great design specification— and its accompanying websites:

Guidelines on toggle functionality

I think regarding toggles, you should pick one way to get your point across to the user.

And be consistent about it, do not send mixed signals.

Here is a couple of examples that shows —in my view— incongruent behaviour:

Expansion panels

For expansion panels —or lists, the icon (arrow_drop_up/arrow_drop_down) doesn’t represent the state of the panel, but the intent of the user —what will happen if I press on it?

By the guidelines examples:

When closed, you should show an arrow down, signaling the user that if they press on it it’ll expand.
When opened, you should show an arrow up, signaling the user that pressing on it will close the expanded panel.

Here, the visual cue ( the arrow ) represents intent , not state.

Password redaction

On password redaction it’s the other way around:

By the guidelines examples:

When the eye is open the password is shown. This is only showing the state of the thing in cuestion.
When the eye is closed the password is “hidden”. Again, this is showing the state of the component, instead of intent.

Here, the visual cue ( the eye ) represents state , not intent.

Switch buttons

On the other hand, switches are great toggling controls because what they do is show state and intent towards whatever label they have associated.

So here, it’s really up to the developer to find great labels for a great UX.

Example:

<o--> Crushing it! (this is off, meaning we are not crushing it)
<--o> Crushing it! (this is on, meaning we are crushing it now)

(Pardon my ASCII art…)

It helps a great deal that the switch makes use of the spec and clearly signals the user when it’s on.

Intent vs state

Design languages or specifications should be coherent as a whole.

Some questions that arose from the observations above:

Should icons show state or intent?
Should stuff like this be clearly documented in the spec?

For the second question I think the answer should be yes.

As for the first one, Material Design should go one way or the other, not both, nor keep it undefined.

My resolution

In my view, taking in consideration the spec’s spirit, the way to go would be for icons to signal intent.

Another less subjective reason to go this way is that showing intent allows
for a series of actions to be chained using one changing icon —whether you should be doing this or not is debatable, the points is that you can— since you are always letting the user know what comes next if they click on it.

You can’t convey this information using icons to show state, since the next state can’t be known by looking at the icon alone, you can only know what the present state is.

Nonetheless, using non-actionable icons to present state is OK.

In the end what I mean is:

Keep the expansion panels the way they are now, and change how the password redaction icons work (just swap the icons out).

Switch buttons are good as they are.

I know this subject is a tough one. It’s been discussed for ages:

Jef Raskin was writing about this issue quite a few years ago inThe Humane Interface: New Directions for Designing Interactive Systems, an Addison-Wesley Professional publication from April 8th, 2000.

Alan Cooper also discusses this in his bookAbout Face: The Essentials of Interaction Designpublished by Wiley on September 2nd, 2014 (looks like the firs edition is from August 25th, 1995):

Flip-flop button controls are very efficient. They save space by controlling two mutually exclusive options with a single control. The problem with flip-flop controls is that they fail to fulfill the second duty of every control - to inform the user of their current state. If the button says ON when the state is off, it is unclear what the setting is. If it is OFF when the state is off, however, where is the ON button? Don’t use them. Not on buttons and no on menus!

There is a good amount of discussion about this subject here and here on StackExchange UX.

Websites

Now let’s talk about a couple of websites related to Material Design, and some annoyances —bad UX; AKA UX opportunity areas— I’ve found while using them.

Material Design guidelines

Pages on the Material Design guidelines should include anchors on section headers for easy linking. It’s so annoying that they don’t!

A good solution would be to have anchors show when hovering section headers, subheaders or titles.

Trying to be too Material Design at the cost of good UX —or convenience— is not good.

Case in point: I couldn’t link to the password redaction section, because there is no anchor for it!

Material Design icons

I find a little frustrating that icons that are basically the same as others, don’t show their aliases.

For example, these are the same icons but you have to find out for yourself:

color_lens, palette
create, mode_edit
block, do_not_disturb_alt
And more...

I get that it must be in the interest of semantics, but believe me, users —like me— end up using icons that look like what we need, not what they are named as. We use names to search for them.

If I need a fricking circle icon for displaying a user status be sure I’ll end up using a frickingfiber_manual_record icon!

I find really irritating that CTRL + F doesn’t work because icons are dynamically loaded into the page. So you have to use the website’s own search bar for that.

If FontAwesome is doing just fine showing all their 2,791 icons I think you’ll do just fine showing 900+.

Conclusion

I think my biggest criticism is that sometimes it looks like Material Design principles are applied at the expense of good UX, when it should be the other way around: UX should come in first, maybe at the expense of Material Design.

Ideally, Material Design should reach a point where this trade-off should never come to be.

2018/05/08 update

Google has just updated its Material Design spec, and some of the links and commentary I provided above don't apply anymore. Nonetheless, I'll leave them there for history's sake.

Check out the set of improvements and new guidelines they provide on their site: material.io/design.

Another good thing is that we have a usable Material Design icons site now!
Go, check it out: material.io/icons

Elixir and my ISO-8859-1 character encoding problem

Víctor Adrián — Wed, 25 Apr 2018 17:03:31 +0000

You can check the latest updated version of this article at lobotuerto's notes - Elixir and my ISO-8859-1 character encoding problem.

Being from México, I have been wrestling with character encoding issues for a long time, in several languages…

Now, it’s Elixir’s time.

The problem

When working my way through The little Elixir & OTP guidebook —a highly recommended one— I got stuck at the ID3 parser example program:

defmodule ID3Parser do
  def parse(file_name) do
    case File.read(file_name) do
      {:ok, mp3} ->
        mp3_byte_size = byte_size(mp3) - 128

        <<_::binary-size(mp3_byte_size), id3_tag::binary>> = mp3

        <<"TAG",
          title::binary-size(30),
          artist::binary-size(30),
          album::binary-size(30),
          year::binary-size(4),
          _rest::binary>> = id3_tag

        IO.puts "#{artist} - #{title} (#{album} #{year})"

      _ ->
        IO.puts "Couldn't open #{file_name}"
    end
  end
end

Using Clementine I edited the ID3 tags for a file namedsome-song.mp3.

And put Éso as its title.

I wanted to know if the program would handle those just fine. It did not.

It was all right when the ID3 tags contained only valid ASCII characters, as soon as I put an accented character in the title, artist or album what I got was an error like this:

iex(1)> ID3Parser.parse "some-song.mp3"

** (ArgumentError) argument error
    (stdlib) :io.put_chars(:standard_io, :unicode, [
      <<89, 111, 112, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 32, 45, 32, 201, 115, 111,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ...>>, 10])

The solution

After some research here and there, then some error reporting… I found out that ID3v1 tags —the ones the program is trying to parse— should in theory be encoded as ISO-8859-1, also known as Latin 1.

What I needed was a way to convert those bytes from ISO-5589-1 (Latin 1) to UTF-8 (Unicode), and give IO.puts something it could print without problems.

I found exactly that in this Erlang facility:

:unicode.characters_to_binary(your_string, :latin1)

This is the final program that correctly parses ID3v1 tags in their expected encoding —careful, the encoding is expected, but in no way guaranteed:

defmodule ID3Parser do
  def parse(file_name) do
    case File.read(file_name) do
      {:ok, mp3} ->
        mp3_byte_size = byte_size(mp3) - 128

        <<_::binary-size(mp3_byte_size), id3_tag::binary>> = mp3

        <<"TAG",
          title::binary-size(30),
          artist::binary-size(30),
          album::binary-size(30),
          year::binary-size(4),
          _rest::binary>> = id3_tag

        to_convert = [title, artist, album, year]
        [title, artist, album, year] =
          Enum.map(to_convert, fn tag -> from_latin1(tag) end)

        IO.puts "#{artist} - #{title} (#{album} #{year})"

      _ ->
        IO.puts "Couldn't open #{file_name}"
    end
  end

  defp from_latin1(string) do
    :unicode.characters_to_binary(string, :latin1)
  end
end

Hopefully this will help someone else in the same predicament.

Building a JSON API with Phoenix 1.3 and Elixir

Víctor Adrián — Fri, 06 Apr 2018 18:00:00 +0000

You can check the latest updated version of this article at lobotuerto's notes - Building a JSON API with Phoenix 1.3 and Elixir.

It also includes a content table for easy navigation over there. ;)

Do you have a Rails background?

Are you tired of looking at outdated or incomplete tutorials on how to build a JSON API using Elixir and Phoenix?

Then, read on my friend!

Introduction

I have found there are mainly two types of tutorials one should write:

Focused, scoped tutorials.
Full step-by-step tutorials.

Scoped, focused tutorials, should be used to explain techniques, like this one: Fluid SVGs with Vue.js.

But, fully-integrated tutorials should be used to teach about new tech stacks.

Going from zero to fully working prototype without skipping steps.

With best practices baked-in, presenting the best libreries available for a given task.

I really like tutorials that take this holistic approach.

So, this won’t just be about how to generate a new Phoenix API only app. That’s easy enough, you just need to pass the --no-brunch --no-htmlto mix phx.new.

This tutorial is about creating a small, but fully operational JSON API for web applications.

To complement your API, I recommend Vue.js on the frontend:
Quickstart guide for a new Vue.js project.

What we’ll do:

Create a new API-only Phoenix application —skip HTML and JS stuff.
Create a User schema module (model) and hash its password —because storing plain text passwords in the database is just wrong.
Create a Users endpoint —so you can get a list of, create or delete users!
CORS configuration —so you can use that frontend of yours that runs on another port / domain.
Create a Sign in endpoint —using session based authentication. I can do a JWT one later if enough people are interested.

Let me be clear about something…

I’m just starting with Elixir / Phoenix, if there are any omissions or bad practices, bear with me, notify me and I’ll fix them ASAP.

This is the tutorial I wish I had available when I was trying to learn about how to implement a JSON API with Elixir / Phoenix, but I digress.

Prerequisites

Install Elixir

We will start by installing Erlang and Elixir using the asdf version manager —using version managers is a best practice in development environments.

How to install Elixir in Manjaro Linux.

Install Hex

Let’s take on Hex the package manager now:

mix local.hex

You can now print some info about your Elixir stack with:

mix hex.info

You’ll see something along the lines of:

Hex: 0.17.3
Elixir: 1.6.4
OTP: 20.3.2

Built with: Elixir 1.5.3 and OTP 18.3

Install Phoenix

Now let’s install the framework:

mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez

Install PostgreSQL

PostgreSQL is the default database for new Phoenix apps, and with good reason: It’s a solid, realiable, and well engineered relational DB.

How to install PostgreSQL in Manjaro Linux.

About REST clients

You might need to get a REST client so you can try out your API endpoints.

The two most popular ones seem to be Postman and Advanced Rest Client I tested both of them and I can say liked neither —at least on their Chrome app incarnations— as one didn’t display cookie info, and the other didn’t send declared variables on POST requests. ¬¬

In any case if you want to try them out:

You can get Postman here.
You can get ARC here.

If you are using a web frontend library like Axios, then your browser’s developer tools should be enough:

If you go with Axios dont’ forget to pass the configuration option withCredentials: true, this will allow the client to send cookies along when doing CORS requests.

Or you can just use good ol’ curl it works really well!

I’ll show you some examples on how to test out your endpoints from the CLI.

Create a new API-only Phoenix application

Generate the app files

In your terminal:

mix phx.new my-app --app my_app --module MyApp --no-brunch --no-html

From the command above:

You’ll see my-app as the name for the directory created for this application.
You’ll see my_app used in files and directories inside my-app/lib e.g. my_app.ex.
You’ll find MyApp used everywhere since it’s the main module for your app.

For example in my-app/lib/my_app.ex:

defmodule MyApp do
  @moduledoc """
  MyApp keeps the contexts that define your domain
  and business logic.

  Contexts are also responsible for managing your data, regardless
  if it comes from the database, an external API or others.
  """
end

Create the development database

If you created a new DB user when installing PostgreSQL , add its credentials toconfig/dev.exs and config/test.exs. Then execute:

cd my-app
mix ecto.create

NOTE:

You can drop the database for the dev environment with:

mix ecto.drop

If you’d like to drop the database for the test environment, you’d need to:

MIX_ENV=test mix ecto.drop

Start the development server

From your terminal:

mix phx.server

Visit http://localhost:4000 and bask in the glory of a beautifully formatted error page. :)

Don’t worry though, we’ll be adding a JSON endpoint soon enough.

Errors in JSON for 404s and 500s

If you don’t like to see HTML pages when there is an error and instead want to receive JSONs, set debug_errors to false in your config/dev.ex, and restart your server:

config :my_app, MyAppWeb.Endpoint,
  # ...
  debug_errors: false,
  # ...

Now, visiting http://localhost:4000 yields:

{ "errors": { "detail": "Not Found" } }

User schema (model)

We'll be generating a new User schema (model) inside an Auth context.

Contexts in Phoenix are cool, they serve as API boundaries that let you
organize your application code in a better way.

Generate the Auth context and User schema module

mix phx.gen.context Auth User users email:string:unique password:string is_active:boolean

From above:

Auth is the context’s module name.
User is the schema’s module name.
users is the DB table’s name.
After that comes some field definitions.

The migration generated from the command above looks like this:

defmodule MyApp.Repo.Migrations.CreateUsers do
  use Ecto.Migration

  def change do
    create table(:users) do
      add :email, :string#, null: false
      add :password, :string
      add :is_active, :boolean, default: false, null: false

      timestamps()
    end

    create unique_index(:users, [:email])
  end
end

Adjust it to your liking —i.e. not allowing null for emails— then run the new migration:

mix ecto.migrate

If you want to read some info about this generator, execute:

mix help phx.gen.context

Hash a user’s password on saving

Add a new dependency to mix.exs:

defp deps do
    [
      # ...
      {:bcrypt_elixir, "~> 1.0"}
    ]
  end

This is Bcrypt, we will use it to hash the user’s password before saving it; so we don’t store it as plain text inside the database.

Fetch the new app dependencies with:

mix deps.get

Change lib/my_app/auth/user.ex to look like this:

defmodule MyApp.Auth.User do
  # ...
  def changeset(user, attrs) do
    user
    |> cast(attrs, [:email, :password, :is_active])
    |> validate_required([:email, :password, :is_active])
    |> unique_constraint(:email)
    |> hash_user_password()
  end

  defp hash_user_password(%Ecto.Changeset{valid?: true, changes: %{password: password}} = changeset) do
    change(changeset, password: Bcrypt.hash_pwd_salt(password))
  end

  defp hash_user_password(changeset) do
    changeset
  end
end

Notice the call and definitions of hash_user_password/1.

What this does is run the changeset through that function, and if the changeset happens to have a password key, it’ll use Bcrypt to hash it.

Running Bcrypt.hash_pwd_salt("hola") would result in something like"$2b$12$sI3PE3UsOE0BPrUv7TwUt.i4BQ32kxgK.REDv.IHC8HlEVAkqmHky".

That strange looking string is what ends up being saved in the database instead of the plain text version.

Fix the tests

Run the tests for your project with:

mix test

Right now they will fail with:

1) test users create_user/1 with valid data creates a user (MyApp.AuthTest)
     test/my_app/auth/auth_test.exs:32
     Assertion with == failed
     code: assert user.password() == "some password"
     left: "$2b$12$PUK73EqrvBTuOi2RiVrkOexqiVS.wIwbOtyR0EtzQLpbX6gaka8T2"
     right: "some password"
     stacktrace:
       test/my_app/auth/auth_test.exs:36: (test)

  2) test users update_user/2 with valid data updates the user (MyApp.AuthTest)
     test/my_app/auth/auth_test.exs:43
     Assertion with == failed
     code: assert user.password() == "some updated password"
     left: "$2b$12$cccPJfQD3seaBc8pHX8cJO/549lojlAjNNi/qo9QY0K7a7Zm5CaNG"
     right: "some updated password"
     stacktrace:
       test/my_app/auth/auth_test.exs:49: (test)

That’s because of the change we just made, the one that hashes the password.

But this is easily fixed by changing those assertions to use Bcrypt.verify_pass/2.

Open the file test/my_app/auth/auth_test.exs and change these lines:

# ...
test "create_user/1 with valid data creates a user" do
  # ...
  assert user.password == "some password"
end
# ...
test "update_user/2 with valid data updates the user" do
  #...
  assert user.password == "some updated password"
end
# ...

To:

# ...
test "create_user/1 with valid data creates a user" do
  # ...
  assert Bcrypt.verify_pass("some password", user.password)
end
# ...
test "update_user/2 with valid data updates the user" do
  # ...
  assert Bcrypt.verify_pass("some updated password", user.password)
end
# ...

Now mix test should yield no errors.

Users endpoint

Generate a new JSON endpoint

Let’s generate the users JSON endpoint, since we already have the Auth context and User schema available, we will pass the --no-schema and --no-context options.

mix phx.gen.json Auth User users email:string password:string is_active:boolean --no-schema --no-context

Fix the tests

Now, if you try and run your tests you’ll see this error:

== Compilation error in file lib/my_app_web/controllers/user_controller.ex ==
** (CompileError) lib/my_app_web/controllers/user_controller.ex:18: undefined function user_path/3

It’s complaining about a missing user_path/3 function.

You need to add a resources line to lib/my_app_web/router.ex.

Declaring a resource in the router will make some helpers available for its controller —i.e. user_path/3.

defmodule MyAppWeb.Router do
  # ...
  scope "/api", MyAppWeb do
    pipe_through :api

    resources "/users", UserController, except: [:new, :edit]
  end
end

Nevertheless, tests will still complain.

To fix them we need to make two changes:

Comment out the password line in lib/my_app_web/views/user_view.ex:

defmodule MyAppWeb.UserView do
  # ...
  def render("user.json", %{user: user}) do
    %{id: user.id,
      email: user.email,
      # password: user.password,
      is_active: user.is_active}
  end
end

We don’t need —nor should we— be sending the hashed password in our responses.

Since we won’t be receiving the hashed password in the response, comment out these password lines in test/my_app_web/controllers/user_controller_test.exs:

# ...
assert json_response(conn, 200)["data"] == %{
  "id" => id,
  "email" => "some email",
  "is_active" => true
  # "password" => "some password"
}
# ...
assert json_response(conn, 200)["data"] == %{
  "id" => id,
  "email" => "some updated email",
  "is_active" => false
  # "password" => "some updated password"
}
# ...

Tests should be fine now.

Create a couple of users

Using IEx

You can run your app inside IEx (Interactive Elixir) —this is akin to rails console— with:

iex -S mix phx.server

Then create a new user with:

MyApp.Auth.create_user(%{email: "asd@asd.com", password: "qwerty"})

Using curl

If you have curl available in your terminal, you can create a new user through your endpoint using something like:

curl -H "Content-Type: application/json" -X POST \
-d '{"user":{"email":"some@email.com","password":"some password"}}' \
http://localhost:4000/api/users

CORS configuration

You’ll need to configure this if you plan on having your API and frontend on different domains.

If you don’t know what CORS is, have a look at this: Cross-Origin Resource Sharing (CORS).

That said, here we have two options:

CorsPlug.
Corsica.

I’ll be using CorsPlug in this tutorial, but if you need more features for configuring your CORS requests —or want a more strict libray, try Corsica out.

Add this dependency to mix.exs:

defp deps do
    [
      # ...
      {:cors_plug, "~> 1.5"}
    ]
  end

Fetch new dependencies with:

mix deps.get

Add plug CORSPlug to lib/my_app_web/endpoint.ex:

defmodule MyAppWeb.Endpoint do
  # ...
  plug CORSPlug, origin: "http://localhost:8080"

  plug MyAppWeb.Router
  # ...
end

You can pass a list to origin, as well as a regular expression, or justplug CORSPlug to accept all origins —since origin: "*" is the default.

In my case, the rule above will accept CORS requests from a Vue.js frontend —Vue.js development servers go up on port 8080 by default.

Simple authentication

Verify a user’s password

Let’s add some functions to the lib/my_app/auth/auth.ex file to verify a user’s password:

defmodule MyApp.Auth do
  # ...
  def authenticate_user(email, password) do
    query = from u in User, where: u.email == ^email
    query |> Repo.one() |> verify_password(password)
  end

  defp verify_password(nil, _) do
    {:error, "Wrong email or password"}
  end

  defp verify_password(user, password) do
    case Bcrypt.verify_pass(password, user.password) do
      true -> {:ok, user}
      false -> {:error, "Wrong email or password"}
    end
  end
end

sign_in endpoint

Then add a new sign_in endpoint to lib/my_app_web/router.ex:

defmodule MyAppWeb.Router do
  # ...
  scope "/api", MyAppWeb do
    # ...
    resources "/users", UserController, except: [:new, :edit]
    post "/users/sign_in", UserController, :sign_in
  end
end

sign_in controller function

Finally add the sign_in function to lib/my_app_web/controllers/user_controller.ex:

defmodule MyAppWeb.UserController do
  # ...
  def sign_in(conn, %{"email" => email, "password" => password}) do
    case MyApp.Auth.authenticate_user(email, password) do
      {:ok, user} ->
        conn
        |> put_status(:ok)
        |> render(MyAppWeb.UserView, "sign_in.json", user: user)

      {:error, message} ->
        conn
        |> put_status(:unauthorized)
        |> render(MyAppWeb.ErrorView, "401.json", message: message)
    end
  end
end

Define sing_in.json and 401.json views

In lib/my_app_web/user_view.ex add this:

defmodule MyAppWeb.UserView do
  # ...
  def render("sign_in.json", %{user: user}) do
    %{data:
      %{user:
        %{id: user.id, email: user.email}}}
  end
end

In lib/my_app_web/error_view.ex add this:

defmodule MyAppWeb.ErrorView do
  # ...
  def render("401.json", %{message: message}) do
    %{errors: %{detail: message}}
  end
  # ...
end

You can try the sign_in endpoint now.

Try out your new endpoint with curl

Let’s send some POST requests to http://localhost:4000/api/users/sign_in.

Good credentials

curl -H "Content-Type: application/json" -X POST \
-d '{"email":"asd@asd.com","password":"qwerty"}' \
http://localhost:4000/api/users/sign_in -i

You’ll receive a 200 with:

{
  "data": {
    "user": { "id": 1, "email": "asd@asd.com" }
  }
}

Bad credentials

curl -H "Content-Type: application/json" -X POST \
-d '{"email":"asd@asd.com","password":"not the right password"}' \
http://localhost:4000/api/users/sign_in -i

You’ll get a 401 and:

{ "errors": { "detail": "Wrong email or password" } }

Sessions

Add plug :fetch_session to your :api pipeline in lib/my_app_web/router.ex:

defmodule MyAppWeb.Router do
  # ...
  pipeline :api do
    plug :accepts, ["json"]
    plug :fetch_session
  end
  # ...
end

Save authentication status

Now let’s modify out sign_in function in lib/my_app_web/controllers/user_controller.ex:

defmodule MyAppWeb.UserController do
  # ...
  def sign_in(conn, %{"email" => email, "password" => password}) do
    case MyApp.Auth.authenticate_user(email, password) do
      {:ok, user} ->
        conn
        |> put_session(:current_user_id, user.id)
        |> put_status(:ok)
        |> render(MyAppWeb.UserView, "sign_in.json", user: user)

      {:error, message} ->
        conn
        |> delete_session(:current_user_id)
        |> put_status(:unauthorized)
        |> render(MyAppWeb.ErrorView, "401.json", message: message)
    end
  end
end

Protect a resource with authentication

Modify your lib/my_app_web/router.ex to look like this:

defmodule MyAppWeb.Router do
  use MyAppWeb, :router

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

  pipeline :api_auth do
    plug :ensure_authenticated
  end

  scope "/api", MyAppWeb do
    pipe_through :api
    post "/users/sign_in", UserController, :sign_in
  end

  scope "/api", MyAppWeb do
    pipe_through [:api, :api_auth]
    resources "/users", UserController, except: [:new, :edit]
  end

  # Plug function
  defp ensure_authenticated(conn, _opts) do
    current_user_id = get_session(conn, :current_user_id)

    if current_user_id do
      conn
    else
      conn
      |> put_status(:unauthorized)
      |> render(MyAppWeb.ErrorView, "401.json", message: "Unauthenticated user")
      |> halt()
    end
  end
end

As you can see we added a new pipeline called :api_auth that’ll run requests through a new :ensure_authenticated plug function.

We also created a new scope "/api" block that pipes its requests through :apithen through :api_auth and moved resources "/users" inside.

Isn’t it amazing the way you can define this stuff in Phoenix?!

Composability FTW!

Endpoint testing with curl

Try to request a protected resource, like /api/users with:

curl -H "Content-Type: application/json" -X GET \
http://localhost:4000/api/users \
-c cookies.txt -b cookies.txt -i

You’ll get:

{ "errors": { "detail": "Unauthenticated user" } }

Let’s login with:

curl -H "Content-Type: application/json" -X POST \
-d '{"email":"asd@asd.com","password":"qwerty"}' \
http://localhost:4000/api/users/sign_in \
-c cookies.txt -b cookies.txt -i

You’ll get:

{
  "data": {
    "user": { "id": 1, "email": "asd@asd.com" }
  }
}

Now, try requesting that protected resource again:

curl -H "Content-Type: application/json" -X GET \
http://localhost:4000/api/users \
-c cookies.txt -b cookies.txt -i

You’ll see:

{
  "data": [
    { "is_active": false, "id": 1, "email": "asd@asd.com" },
    { "is_active": false, "id": 2, "email": "some@email.com" }
  ]
}

Success!

Bonus section

Customize your 404s and 500s JSON responses

In lib/my_app_web/views/error_view.ex:

defmodule MyAppWeb.ErrorView do
  # ...
  def render("404.json", _assigns) do
    %{errors: %{detail: "Endpoint not found!"}}
  end

  def render("500.json", _assigns) do
    %{errors: %{detail: "Internal server error :("}}
  end
  # ...
end

Links

This was a long one, that’s it for now folks!

Quickstart guide for a new Vue.js project

Víctor Adrián — Sat, 10 Mar 2018 18:23:36 +0000

For the updated article that uses vue-cli 3.0 check out Quickstart guide for a new Vue.js project with vue-cli 3.0.

It also includes a content table for easy navigation over there. ;)

Opinions

In the little time I have delving into Vue.js I’ve come to really appreciate the framework, and its surrounding libraries.

This opinionated guide details the steps I take to start with a solid foundation for a new Vue.js project.

What particular opinions does it include?

Well, for starters:

Package manager: Yarn — Fast, reliable, and secure dependency management.
Project generation tool: vue-cli — CLI for rapid Vue.js development.
UI framework: Vuetify — Material Design component framework.
Material icons library: Google Material Icons — Beautifully crafted, delightful, and easy to use.
Validation library: Vuelidate — Simple, lightweight model-based validation for Vue.js.
Ajax library: Axios — Promise based HTTP client for the browser and Node.js.

I have found that these tools and libraries are performant, intuitive and very easy to work with.

I had a similar stack for Angular that included Angular Material plus some custom component primitives for rendering dynamic forms, data tables and other stuff.

I was really fond of the dynamic forms implementation, it allowed the user to specify highly configurable forms using a simple JSON specification.

The generated forms integrated well with our Rails JSON API backend.

I plan to write a tutorial about doing the same thing but this time with Vue.js and Vuetify , but I digress…

Setting up a new Vue.js app for success

Here we’ll see how to setup a newly created app with vue-cli so it’ll be ready for us to start hacking on it right away.

Prerequisites

Install Node.js, Yarn and vue-cli

Generate a new project

vue init webpack my-project

I usually accept all defaults, except for the package manager.

I pick Yarn when asked.

As you can see we are using the Webpack template.

Here is the list for the official templates.

Adjust ESLint rules

Add this line to the rules key in the .eslintrc.js file:

'no-multiple-empty-lines': [2, { max: 2 }]

The reason for this change, is that I usually leave two consecutive blank lines between some elements inside my .vue component files.

For example between import sections and following code.

Or between <template>, <script> and <style>.

Install project dependencies

Use Yarn to add the project dependencies:

yarn add vuetify material-design-icons vuelidate axios

I like having the power of SCSS / SASS at my disposal when writing CSS rules.

--dev will add dependencies to the devDependencies section in yourpackage.json file:

yarn add sass-loader node-sass --dev

Initial app configuration and setup

To setup Vuetify , Google Material Icons and Vuelidate , you need to add these lines to src/main.js:

import Vuelidate from 'vuelidate'
import Vuetify from 'vuetify'

import 'material-design-icons/iconfont/material-icons.css'
import 'vuetify/dist/vuetify.css'

Vue.use(Vuelidate)
Vue.use(Vuetify)

To see Vuetify in action, change your src/App.vue file to:

<template>
  <v-app>
    <router-view/>
  </v-app>
</template>

<script>
export default {
  name: 'App'
}
</script>

And your src/components/HelloWorld.vue to:

<template>
  <v-content>
    <v-btn>
      Hello!
    </v-btn>
  </v-content>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

Typography

The Material Design guidelines for typography, state that Roboto —and Noto — are the standard typefaces to use.

Add this to the <head> section of your index.html file:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

Have a look

Start your project with:

yarn dev

And visit: http://localhost:8080.

That’s it!

Have a good one. :)

How to install Node.js in Manjaro Linux

Víctor Adrián — Sat, 10 Mar 2018 16:23:36 +0000

You can check the latest updated version of this article at lobotuerto's notes - How to install Node.js in Manjaro Linux.

Installation process

Version managers rule in dev environments.

So we will install Node.js through nvm.

Install the nvm package from the AUR:

pacaur -S nvm

Then on your terminal:

echo 'source /usr/share/nvm/init-nvm.sh' >> ~/.bashrc
exec $SHELL

To list all available versions for Node.js :

nvm ls-remote

Let’s install latest from the 9 series:

nvm install 9
node -v #v9.8.0
npm -v #5.6.0

Add the Yarn package manager globally:

npm install -g yarn

We need to add Yarn’s binary to our $PATH in ~/.bashrc.

In a terminal:

echo 'export PATH=$PATH:~/.yarn/bin' >> ~/.bashrc

If you are a Vue.js fan —and why shouldn’t you be one? :)— install vue-cli:

yarn global add vue-cli

Fluid SVGs with Vue.js

Víctor Adrián — Fri, 09 Mar 2018 15:09:09 +0000

I really like going for fluid SVGs when doing data visualization.

Fluid SVGs are the ones that can extend on the horizontal axis as far as the parent allows it. They preserve their aspect ratio, growing and shrinking accordingly to adjust themselves if their size ever changes.

The trick lies in how you define the <svg> element, specially its viewBox attribute.

Also, don’t define a height or width on it.

Here is a single file component in Vue.js that will behave exactly like that.

Let’s name it src/components/FluidSvg.vue:

<template>
  <div>

    <svg :viewBox="viewBoxString">
      <rect
        class="my-square"
        :x="rect.x"
        :y="rect.y"
        :width="rect.width"
        :height="rect.height"
      ></rect>
    </svg>

  </div>
</template>

<script>
export default {
  name: 'FluidSvg',

  data () {
    return {
      svg: {
        width: 1000,
        height: 1000
      },
      rect: {
        x: 100,
        y: 100,
        width: 300,
        height: 300
      }
    }
  },

  computed: {
    viewBoxString () {
      return `0 0 ${this.svg.width} ${this.svg.height}`
    }
  }
}
</script>

<style>
svg {
  background-color: antiquewhite;
  border: 2px solid black;
}

.my-square {
  fill: white;
  stroke: red;
  stroke-width: 2;
}
</style>

Now, use it inside some other component like this:

<template>
  <div>
    <div class="example-1">
      <fluid-svg></fluid-svg>
    </div>

    <div class="example-2">
      <fluid-svg></fluid-svg>
    </div>

    <div class="example-3">
      <fluid-svg></fluid-svg>
    </div>
  </div>
</template>

<script>
import FluidSvg from '@/components/FluidSvg'

export default {
  name: 'HelloWorld',
  components: { FluidSvg },
}
</script>

<style>
.example-1 {
  width: 100px;
}

.example-2 {
  width: 200px;
}

.example-3 {
  width: 400px;
}
</style>

This is what you’ll see:

How to install Elixir in Manjaro Linux

Víctor Adrián — Thu, 08 Mar 2018 14:20:48 +0000

You can check the latest updated version of this article at lobotuerto's notes - How to install Elixir in Manjaro Linux.

Installation process

I really like version managers for my dev languages.

I’ve been using asdf for installing Erlang and Elixir with OTP support.

Let’s start!

Clone the GitHub repository:

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.4.2

Add some lines to your .bashrc file:

echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.bashrc
echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc

Make changes to .bashrc effective or just close and open your terminal:

exec $SHELL

Finally install Erlang and Elixir:

asdf plugin-add erlang
asdf list-all erlang
asdf install erlang 20.2.4
asdf global erlang 20.2.4

asdf plugin-add elixir
asdf list-all elixir
asdf install elixir 1.6.2-otp-20
asdf global elixir 1.6.2-otp-20

To activate iex REPL history, add this to your .bashrc:

export ERL_AFLAGS="-kernel shell_history enabled"

If you are using this awesome editor (hint: Visual Studio Code ), you should try the ElixirLS extension.

How to install PostgreSQL in Manjaro Linux

Víctor Adrián — Thu, 08 Mar 2018 13:46:45 +0000

Installation process

Setting up PostgreSQL in Manjaro Linux is very easy.

Just follow these steps and you’ll have a working installation in no time.

Install the postgresql package:

sudo pacman -S postgresql

Then setup a password for the postgres user with:

sudo passwd postgres

Switch to the postgres user account and initialize the database cluster:

sudo su postgres -l # or sudo -u postgres -i
initdb --locale $LANG -E UTF8 -D '/var/lib/postgres/data/'
exit

Options for initdb are as follows:

--locale is the one defined in /etc/locale.conf.
-E is the default encoding for new databases.
-D is the default location for storing the database cluster.

Now, start and enable the postgresql.service:

sudo systemctl enable --now postgresql.service

That’s it!

DEV Community: Víctor Adrián

How to enable night mode for Calibre in Manjaro Linux

How to fix Redshift in Manjaro Linux i3

The problem

The solution

Links

How to create a Manjaro Linux live USB through the CLI

Download the Manjaro i3 community edition

Verify with SHA1 or SHA256

Find the right letter for your device

Zero the bits out of the USB drive

Copy the ISO image to the USB drive

Basic Git configuration

Introduction

User and email

Colorful CLI

CPU threads

Useful alias

Global .gitignore

Dealing with line endings

Linux / Mac

Windows

Links

Basics

Advanced use cases

Hosted services

A little critique of Google's Material Design and its associated websites

Guidelines on toggle functionality

Expansion panels

Password redaction

Switch buttons

Intent vs state

My resolution

Websites

Material Design guidelines

Material Design icons

Conclusion

2018/05/08 update

Elixir and my ISO-8859-1 character encoding problem

The problem

The solution

Links

Building a JSON API with Phoenix 1.3 and Elixir

Introduction

Prerequisites

Install Elixir

Install Hex

Install Phoenix

Install PostgreSQL

About REST clients

Create a new API-only Phoenix application

Generate the app files

Create the development database

Start the development server

Errors in JSON for 404s and 500s

User schema (model)

Generate the Auth context and User schema module

Hash a user’s password on saving

Fix the tests

Users endpoint

Generate a new JSON endpoint

Fix the tests

Create a couple of users

Using IEx

Using curl

CORS configuration

Simple authentication

Verify a user’s password

sign_in endpoint

sign_in controller function

Define sing_in.json and 401.json views

Try out your new endpoint with curl

Good credentials

Bad credentials

Sessions

Save authentication status

Protect a resource with authentication

Endpoint testing with curl

Bonus section

Customize your 404s and 500s JSON responses