Welcome

Latest posts

TIL: Read from STDIN in Elixir on HackerRank

Grab input data in HackerRank problems

2023-10-11

Grab the input provided by HackerRank from STDIN with:

input = IO.read(:stdio, :all)
  |> String.split("\n", trim: true)

If the input provided are numbers you might want to chain the above with:

input = IO.read(:stdio, :all)
  |> String.split("\n", trim: true)
  |> Enum.map(&String.to_integer/1)

In recent versions of Elixir (v1.13.0 or above) you might want to use IO.read(:stdio, :eof) instead.

But HackerRank is running Elixir 1.8.2 which don’t support the :eof option yet (LeetCode uses 1.15.7 by the way…).

You can look at the Elixir version from within the REPL with: System.version.

Permutations in Elixir

Generate all the permutations of a given list

2023-09-24

While working on a problem, suddenly I had the need to get a hold of all the permutations of the elements in a list.

Thus, I did what any good engineer would do: I browsed the internet for a little bit and found a solution.

It makes use of for comprehensions and recursion.
It’s very concise and elegant, judge yourself:

defmodule Util do
  def permutations([]), do: [[]]

  def permutations(list) do
    for(item <- list, rest <- permutations(list -- [item]), do: [item | rest])
  end
end

TIL: Compare dates in Elixir

The right way to do date comparison in Elixir

2023-09-24

Directly comparing dates with >, <, <=, etc. won’t throw an error, but can give the wrong result.

The right way to go about it, is to use Date.compare/2.
E.g.:

today = Date.utc_today()
tomorrow = Date.add(today, 1)
yesterday = Date.add(today, -1)

Date.compare(today, tomorrow)
# :lt

Date.compare(today, today)
# :eq

Date.compare(today, yesterday)
# :gt

TIL: Escape JavaScript RegExp string

Create a regular expression from any string

2023-09-23

Sometimes you try to use certain strings to create regular expressions.

The problem is these string might contain characters that have special meaning inside a RegExp. For example:

const myString = '[Hello?](World)!!!'

To escape it for safe use as a regex pattern, lodash provides escapeRegExp.

const myString = '[Hello?](World)!!!'
// "\\[Hello\\?\\]\\(World\\)!!!"

TIL: Capture keydown events on DIV elements

How to capture keydown/keypress events on HTML elements that aren't inputs

2023-09-22

Just set the tabindex attribute, then you’ll be able to listen to keydown — or keyup, keypress — events like this:

<div tabindex="1" @keydown.esc="doSomething()">
  I can emit keydown events now!
</div>

TIL: Set page margins to 0 on print preview

How to remove page margins when printing

2023-09-21

Just add this CSS code to your app:

@media print {
  @page {
    margin: 0;
  }
}

Print preview:

image image
Default margins No margins

Favorites

Handy shortcuts

Vue 3 testing cheat sheet

What are the basic constructs used for testing in Vue?

2022-07-29
2023-01-29

Lately, I’ve been realizing that co-located tests are better.

It’s easier to see which components are tested or not, or quickly open a component’s tests right there! — as opposed to going to a different folder to crawl a hierarchy of test files.

mount vs shallowMount

mount will render the whole component and all of its child components.
shallowMount will stub all the child component.

I think it’s preferably to use mount and only stub the things that you need.

Stubs

This is how you can stub sub components:

import { mount } from '@vue/test-utils'
import App from './App.vue'

test('mount component', () => {
  expect(App).toBeTruthy()

  const wrapper = mount(App, {
    global: {
      stubs: {
        MiniMap: true
      }
    }
  })

  expect(wrapper.text()).toContain('MiniMap')
  expect(wrapper.html()).toContain('<mini-map-stub')

  expect(wrapper.html()).toMatchSnapshot()
})

Vue 3 with TypeScript cheat sheet

How to properly use types when writing Vue components.

2022-07-29
2023-03-31

Prerequisites

For this, you’ll need a Vue 3 + TypeScript (+ Tailwind CSS) project.

You can set up one following the instructions here:
Build a Vue 3 + TypeScript dev environment with Vite

Basic types, Records

  • If you want a type meaning “any value”, you probably want unknown instead.
  • If you want a type meaning “any object”, you probably want Record<string, unknown> instead.
  • If you want a type meaning “empty object”, you probably want Record<string, never> instead.

Adding properties to the window object

Add a src/index.d.ts file with this content:

export {}

declare global {
  interface Window {
    someVariable: string
    otherThing: number
    // any other variables you need here...
  }
}

Remove PDF password in Linux

Let's see how turn a password protected file into a normal one.

2022-07-07

Using QPDF

QPDF is a command-line program for Linux that converts from one PDF file to another equivalent PDF file while preserving the content of the file. The tool allows you to encrypt and decrypt, web-optimize, and split and merge PDF files.

If you are using Manjaro, QPDF should be already installed. In case it is not, try with:

sudo pacman -S qpdf

To convert a secured file into an open one, use this command:

qpdf --password=mysecretpassword --decrypt the-secured.pdf new-unsecured.pdf

Build a Vue 3 + TypeScript dev environment with Vite

Production grade DX for all your web projects.

2021-08-22
2023-09-11

Introduction

This is an opinionated guide on how to set up a new Vue 3 project with the aforementioned tech stack plus some extras that can really help in the DX (Developer Experience) department.

Stuff like:

  • Prettier
  • Husky
  • ESLint + styleLint + commitlint
  • Maybe Tailwind CSS ;)

And more…

Here are a couple of cheat sheets I wrote for Vue 3 + TypeScript:

Prerequisites

Let’s get started

Generate a new project:

pnpm create vite

Then input:

  • Project name
  • Pick Vue
  • Pick TypeScript

Let’s set up our project with pnpm.
Enter the project directory, then:

pnpm install
pnpm up --latest

Install VSCode in Linux

The one and only, the fabulous Visual Studio Code in Linux.

2020-04-04
2023-12-12

One code editor to rule them all…
Visual Studio Code is fast, nimble, and beautiful.

cd ~/tmp
git clone https://aur.archlinux.org/visual-studio-code-bin.git
cd visual-studio-code-bin/
makepkg -si

Execute with:

code &

inotify watchers

We need to increase the amount of inotify watchers.
This is needed so Visual Studio Code can manage projects with a lot of files:

echo fs.inotify.max_user_watches=524288 | sudo tee \
/etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

Set up Manjaro i3

Imagine no longer having to minimize, maximize, resize or rearrange any windows, ever, again.
Thx i3wm. ❤️

2019-08-31
2023-04-07

If you still don’t know what i3 is, please have a look at this.

Prerequisites

Create a live USB for Manjaro Linux —instructions here.
Then install it.

Offline set up

Things to do before connecting to the network.

Create common directories:

mkdir -p ~/bin ~/encrypted ~/tmp

Make some ~/.bashrc additions:

alias ll="ls -lhF"
alias la="ls -lahF"

export HISTCONTROL=ignoredups:ignorespace
export PATH=~/bin:$PATH

export PS1="\[\e[37;1m\]\t . \[\033[01;32m\][\u@\h\[\033[01;37m\] \W\[\033[01;32m\]]\$\[\033[00m\] "