DEV Community: Thomas Alcala Schneider

Fish-like Autosuggestion in Powershell

Thomas Alcala Schneider — Fri, 26 Mar 2021 00:23:15 +0000

For a year, working on Windows laptops has been nonoptional for me. I've been desperately trying to make my environment as close as it is on Mac OS, with the added challenge to do it without the Windows Subsystem for Linux (WSL). So this relies heavily on Powershell.

One thing I like from the fish shell (and was reproduced in zsh by the zsh-autosuggestion plugin) is the autosuggestion feature.

It's that thing where when you start typing something and there is something that starts with the same letters in your history, it'll write it after the cursor in grayed colors. And it's awesome.

For Powershell, it´s called predictive IntelliSense in PSReadLine.

Prerequisites

Powershell 5.1 or higher

Installation

First, install ´PSReadLine´ version 2.1.0



Install-Module PSReadLine -RequiredVersion 2.1.0

1. Then, initialize it with the command below
    ```


    Import-Module PSReadLine
    Set-PSReadLineOption -PredictionSource History

And there it is!

(Optional) Initialize it in your profile

Check if you already have a profile
```
Test-path $profile
```

1. If false, create one
    ```


    New-item –type file –force $profile

If yes, edit it
```
notepad $profile
```

1. Run this command and close your terminal
    ```


    Set-ExecutionPolicy RemoteSigned

Update your profile file like in step 3, and add those lines to it



Import-Module PSReadLine
Set-PSReadLineOption -PredictionSource History


And that's it!

![Autosuggest in Powershell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0yg202h1ju1o1cd4aeb.gif)

Translating My Resume (and any text file) with Rust

Thomas Alcala Schneider — Sun, 14 Mar 2021 19:57:02 +0000

tl; dr: this is about creating a CLI that uses Google Translate to translate a text file to a supported language. The code can be found here

Something that sucks about moving to a country that doesn't care too much about the English language and look for a job there is that you have to translate your resume.

So here I am with my well-written and tested resume in English, and have to spend hours (a couple, at least) translating it to French. And French is my mother language too, I just moved around a bit, so a lot of different companies, that's why it's long to translate.

And to be fair, it's even longer to write a CLI to do it for me 😅, even more so in a language that I am currently learning, and I still have to double-check and fix some errors... But I think it'll be helpful in the long run, I'll be able to translate my posts too.

That the developer's paradox: we'd rather rebuild our blog with a crazy stack but have almost no posts in it. Develop in DRY mode that takes longer than actually repeat stuff (like this one). That reminds me of some funny quote from Parcs and Recs:

Full disclosure: I am new to Rust, so the code at the end will not be optimal, and this is as much an exercise as it is a post.

Prerequisites

An API keyHere we are going to be using the Google Translate API, so you need to create an API key in the Google Cloud Platform (GCP) dashboard
Rust, cargo, etc: follow the installation instructions

Down to it!

Project Creation

Run $ cargo new rosette, this will create a directory called rosette in your current folder
Run $ cargo run to test it

Basic Variables

So we need to set the endpoint and get the GOOGLE_API_KEY from the environment variables. Here's how we get them:

use std::env;

fn main() {
    println!("Hello, world!");

    let base_endpoint = "https://translation.googleapis.com/language/translate/v2";
    let args: Vec<String> = env::args().collect();
    let api_key = match env::var("GOOGLE_API_KEY") {
        Ok(val) => val,
        Err(_e) => panic!("Set up the GOOGLE_API_KEY environment variable first"),
    };

    println!(
        "endpoint: {:?}, args: {:?}, key: {:?}",
        base_endpoint, args, api_key
    );
}

Dummy Call

Now let's try doing a call to the API.
A dummy call to that API with the curl command line tool looks like

curl -X POST "https://translation.googleapis.com/language/translate/v2?key=$GOOGLE_API_KEY&q=rust&source=en&target=fr"

We are sending 3 parameters:

key: the Google API key
q: the words to translate, here rust
source: the language of the words, here en for English
target: the target language to translate to, here fr for French

The list of languages available can be found here.

The output is

{
  "data": {
    "translations": [
      {
        "translatedText": "rouiller"
      }
    ]
  }
}

Which isn't exact. to rust == rouiller (verb), rust == rouille (noun).

Anyway...

Now, let's do the same with Rust!

Call in Rust with Hardcoded Data

First in Cargo.toml, add the dependencies:

[dependencies]
serde = { version = "1.0", features = ["derive"] }
reqwest = { version = "0.10", features = ["json", "native-tls", "cookies"] }
tokio = { version = "0.2", features = ["full"] }
serde_json = "1.0"

And now the code in src/main.rs:

use std::env;
use std::collections::HashMap;

use reqwest::Error;
use serde::Deserialize;

#[derive(Deserialize, Debug)]
struct Translation {
    #[serde(alias = "translatedText")]
    translated_text: String,
}

#[derive(Deserialize, Debug)]
struct Translations {
    translations: Vec<Translation>,
}

#[derive(Deserialize, Debug)]
struct Data {
    data: Translations,
}

#[tokio::main]
async fn main() -> Result<(), Error> {
    let base_endpoint = "https://translation.googleapis.com/language/translate/v2";
    let args: Vec<String> = env::args().collect();
    let api_key = match env::var("GOOGLE_API_KEY") {
        Ok(val) => val,
        Err(_e) => panic!("Set up the GOOGLE_API_KEY environment variable first"),
    };

    println!(
        "endpoint: {:?}, args: {:?}, key: {:?}",
        base_endpoint, args, api_key
    );

    let query = "rust";
    let source = "en";
    let target = "fr";

    let mut map = HashMap::new();
    map.insert("q", query);
    map.insert("source", source);
    map.insert("target", target);
    map.insert("key", &api_key);

    let request_url = format!("{base}?key={key}&q={query}&source={source}&target={target}", base = base_endpoint, key = api_key, query = query, source = source, target = target);
    // let request_url = format!("{base}?key={key}", base = base_endpoint, key = &api_key);

    let client = reqwest::Client::new();

    let response = client.post(&request_url).form(&map).send().await?;

    let text_response = response.text().await?;

    let translations= serde_json::from_str::<Data>(&text_response).unwrap();

    println!("{:?}", translations);

    Ok(())
}

This works ok, now for the next steps:

Translate in a Function

Let's put the code to translate in its own function below the main function, so we can reuse it on every sentence of a file.

#[tokio::main]
async fn translate(query: &str, source: &str, target: &str, api_key: &str) -> Result<Data, Error> {
    let base_endpoint = "https://translation.googleapis.com/language/translate/v2";
    let mut map = HashMap::new();
    map.insert("q", query);
    map.insert("source", source);
    map.insert("target", target);
    map.insert("key", &api_key);

    let request_url = format!("{base}?key={key}&q={query}&source={source}&target={target}", base = base_endpoint, key = api_key, query = query, source = source, target = target);
    // let request_url = format!("{base}?key={key}", base = base_endpoint, key = &api_key);

    let client = reqwest::Client::new();

    let response = client.post(&request_url).form(&map).send().await?;

    let text_response = response.text().await?;

    let translations= serde_json::from_str::<Data>(&text_response).unwrap();

    Ok(translations)
}

Take Arguments

Now we'll take a file name, source and target languages as command arguments.
Where we were getting arguments before, now we'll make sure that we have the exact number

    if args.len() != 4 {
        panic!("You need to pass a text file name, a source and a target language");
    }

    println!(
        "args: {:?}, key: {:?}",
        args, api_key
    );

    let source = &args[2];
    let target = &args[3];

We used to build and run the app with $ cargo run. Now to pass arguments, there's a trick. This is not needed when running the built app directly, but since we are running ir with cargo, we have to use -- to separate arguments for cargo and arguments for the app. So we do $ cargo run -- file.txt fr en for example.

Read Lines

We'll create a src/utils.rs file with a function to read lines.

use std::fs::File;
use std::io::{self, BufRead};
use std::path::Path;

pub fn read_lines<P>(filename: P) -> io::Result<io::Lines<io::BufReader<File>>>
where
    P: AsRef<Path>,
{
    let file = File::open(filename)?;
    Ok(io::BufReader::new(file).lines())
}

And we have to import it at the top of our src/main.rs file.

mod utils;
use crate::utils::read_lines;

Translate Lines

Let's read the file, loop through the file and translate the lines one by one:

    if let Ok(lines) = read_lines(&args[1]) {
        for line in lines {
            if let Ok(row) = line {
                let parsed_row = row.replace("\u{a0}", "");
                println!("{:?}", parsed_row);
                let translation = match translate(&parsed_row, source, target, &api_key) {
                    Ok(t) => {
                        let t2 = String::from(&t.data.translations[0].translated_text);
                        t2
                    }
                    Err(_) => String::from(""),
                };
                println!("{:?}", translation);
            }
        }
    }

Conclusion

So now we have this src/main.rs:

use std::env;
use std::collections::HashMap;

use reqwest::Error;
use serde::Deserialize;

mod utils;
use crate::utils::read_lines;

#[derive(Deserialize, Debug)]
struct Translation {
    #[serde(alias = "translatedText")]
    translated_text: String,
}

#[derive(Deserialize, Debug)]
struct Translations {
    translations: Vec<Translation>,
}

#[derive(Deserialize, Debug)]
struct Data {
    data: Translations,
}

fn main() {
    let api_key = match env::var("GOOGLE_API_KEY") {
        Ok(val) => val,
        Err(_e) => panic!("Set up the GOOGLE_API_KEY environment variable first"),
    };

    let args: Vec<String> = env::args().collect();

    if args.len() != 4 {
        panic!("You need to pass a text file name, a source and a target language");
    }

    println!(
        "args: {:?}, key: {:?}",
        args, api_key
    );

    let source = &args[2];
    let target = &args[3];

    // let translations = translate(query, source, target, &api_key);

    // println!("{:?}", translations);

    if let Ok(lines) = read_lines(&args[1]) {
        for line in lines {
            if let Ok(row) = line {
                let parsed_row = row.replace("\u{a0}", "");
                // println!("{}", parsed_row);
                let translation = match translate(&parsed_row, source, target, &api_key) {
                    Ok(t) => {
                        let t2 = String::from(&t.data.translations[0].translated_text);
                        t2
                    }
                    Err(_) => String::from(""),
                };
                println!("{}", translation);
            }
        }
    }
}

#[tokio::main]
async fn translate(query: &str, source: &str, target: &str, api_key: &str) -> Result<Data, Error> {
    let base_endpoint = "https://translation.googleapis.com/language/translate/v2";
    let mut map = HashMap::new();
    map.insert("q", query);
    map.insert("source", source);
    map.insert("target", target);
    map.insert("key", &api_key);

    let request_url = format!("{base}?key={key}&q={query}&source={source}&target={target}", base = base_endpoint, key = api_key, query = query, source = source, target = target);

    let client = reqwest::Client::new();

    let response = client.post(&request_url).form(&map).send().await?;

    let text_response = response.text().await?;

    let translations= serde_json::from_str::<Data>(&text_response).unwrap();

    Ok(translations)
}

And the complete code can be found in this repository.

Thanks for reading!

Vim Configuration from Minimal to Complete

Thomas Alcala Schneider — Thu, 11 Mar 2021 17:57:25 +0000

From a configuration that works on low-resource, restricted permissions environments, to a complete configuration...

And from almost scratch. Because I like to know what's in my .vimrc.

TL; DR the final vimrc and at the different steps is in this repository, with tags for each step.

Vim rocks 🤘! And recent plugins can make it really great for coding, most notably using Conquer of Completion with NodeJS, which has a bunch of extensions for a lot of languages using the Language Server Protocol.

In this article, however, we'll assume to be working on a low resource computer, or limited in what can be installed, runtimes available, etc. So code completion, linting, quality without external runtimes!

I'll use this GitHub repository and tags for each step in this article.

Minimal Configuration
Adding Plugins
- Plugin Initialization
- General Developer Experience (DX) Plugins
- Linter and Fixer
- Language-specific configuration and plugins
- Linting configuration
- Language plugins
- Colors and Themes
- Extras
- Authoring
- More
Conclusion

You can apply the diffs in this post by copying them in a file, let's say example.patch, and apply them, as long as you have the same directory structure as in my GitHub repository, and run $ git apply example.patch.

Minimal Configuration

Let's create a minimal .vimrc file with some basic configuration we need.

As a base, we'll take the content of Tim Pope's vim-sensible plugin

Now we have in tag 0.1.0 our minimal .vimrc as recommended



" sensible.vim - Defaults everyone can agree on
" Maintainer:   Tim Pope <http://tpo.pe/>
" Version:      1.2

if exists('g:loaded_sensible') || &compatible
finish
else
let g:loaded_sensible = 'yes'
endif

if has('autocmd')
filetype plugin indent on
endif
if has('syntax') && !exists('g:syntax_on')
syntax enable
endif

" Use :help 'option' to see the documentation for the given option.

set autoindent
set backspace=indent,eol,start
set complete-=i
set smarttab

set nrformats-=octal

if !has('nvim') && &ttimeoutlen == -1
set ttimeout
set ttimeoutlen=100
endif

set incsearch
" Use <C-L> to clear the highlighting of :set hlsearch.
if maparg('<C-L>', 'n') ==# ''
nnoremap <silent> <C-L> :nohlsearch<C-R>=has('diff')?'<Bar>diffupdate':''<CR><CR><C-L>
endif

set laststatus=2
set ruler
set wildmenu

if !&scrolloff
set scrolloff=1
endif
if !&sidescrolloff
set sidescrolloff=5
endif
set display+=lastline

if &encoding ==# 'latin1' && has('gui_running')
set encoding=utf-8
endif

if &listchars ==# 'eol:$'
set listchars=tab:>\ ,trail:-,extends:>,precedes:<,nbsp:+
endif

if v:version > 703 || v:version == 703 && has("patch541")
set formatoptions+=j " Delete comment character when joining commented lines
endif

if has('path_extra')
setglobal tags-=./tags tags-=./tags; tags^=./tags;
endif

if &shell =~# 'fish$' && (v:version < 704 || v:version == 704 && !has('patch276'))
set shell=/usr/bin/env\ bash
endif

set autoread

if &history < 1000
set history=1000
endif
if &tabpagemax < 50
set tabpagemax=50
endif
if !empty(&viminfo)
set viminfo^=!
endif
set sessionoptions-=options
set viewoptions-=options

" Allow color schemes to do bright colors without forcing bold.
if &t_Co == 8 && $TERM !~# '^Eterm'
set t_Co=16
endif

" Load matchit.vim, but only if the user hasn't installed a newer version.
if !exists('g:loaded_matchit') && findfile('plugin/matchit.vim', &rtp) ==# ''
runtime! macros/matchit.vim
endif

if empty(mapcheck('<C-U>', 'i'))
inoremap <C-U> <C-G>u<C-U>
endif
if empty(mapcheck('<C-W>', 'i'))
inoremap <C-W> <C-G>u<C-W>
endif

" vim:set ft=vim et sw=2:


    - Note that we could have used this plugin as explained in the installation. But
      1. it makes for a great base
      1. We're trying to use the less possible plugins at the beginning, then build upon it
    - _Anecdote: the toolkit for ocaml developers does that same thing (only with an earlier version of the plugin) with `opam user-setup install`, and adds some ocaml related stuff below this plugin's code. You can check out the [vimrc generated by user-setup](https://github.com/ThomasMarcel/vimrc/blob/0.1.0-ocaml/.vimrc)_
- Now some options of my own blend or gotten from some good `.vimrc` around. Here's what I've added. Highlighting, tab settings, remap the leader key, and functions to know which OS we're using. Complete code in [the 0.2.0 tag](https://github.com/ThomasMarcel/vimrc/blob/0.2.0/.vimrc)
    ```diff


    diff --git a/.gitignore b/.gitignore
    new file mode 100644
    index 0000000..a01ee28
    --- /dev/null
    +++ b/.gitignore
    @@ -0,0 +1 @@
    +.*.swp
    diff --git a/.vimrc b/.vimrc
    index 0818853..302d55b 100644
    --- a/.vimrc
    +++ b/.vimrc
    @@ -1,3 +1,12 @@
    +" Modeline and Notes {
    +" vim: set sw=4 ts=4 sts=4 et tw=78 foldmarker={,} foldlevel=0 foldmethod=marker spell:
    +"
    +" @ThomasAlcala's vim configuration.
    +" }
    +"
    +"
    +set nocompatible
    +
    " sensible.vim - Defaults everyone can agree on
    " Maintainer:   Tim Pope <http://tpo.pe/>
    " Version:      1.2
    @@ -99,3 +108,41 @@ if empty(mapcheck('<C-W>', 'i'))
    endif

    " vim:set ft=vim et sw=2:
    +
    +" -----------
    +" Environment
    +" -----------
    +
    +" Encoding
    +set encoding=utf-8
    +set fileencoding=utf-8
    +set fileencodings=utf-8
    +set ttyfast
    +
    +" Tabs. May be overridden by autocmd rules
    +set tabstop=4
    +set softtabstop=0
    +set shiftwidth=4
    +set expandtab
    +
    +" Map leader to ,
    +let mapleader=','
    +
    +" Enable hidden buffers
    +set hidden
    +
    +" Searching
    +set hlsearch
    +set incsearch
    +set ignorecase
    +set smartcase
    +
    +silent function! OSX()
    +    return has('macunix')
    +endfunction
    +silent function! LINUX()
    +    return has('unix') && !has('macunix') && !has('win32unix')
    +endfunction
    +silent function! WINDOWS()
    +    return  (has('win32') || has('win64'))
    +endfunction

With that done, we now have autocompletion working with `ctrl+n` in insert mode.

And now some built in language support with omnifunc with `ctrl-x ctrl-o` (not very user-friendly), as in [the 0.2.1 tag](https://github.com/ThomasMarcel/vimrc/blob/0.2.1/.vimrc):

```diff

diff --git a/.vimrc b/.vimrc
index 302d55b..77bfe70 100644
--- a/.vimrc
+++ b/.vimrc
@@ -146,3 +146,5 @@ endfunction
silent function! WINDOWS()
    return  (has('win32') || has('win64'))
endfunction
+
+set omnifunc=syntaxcomplete#Complete


    _A trick for tab completion is to add a smart function like below, you can also find it in [the 0.2.2 tag](https://github.com/ThomasMarcel/vimrc/blob/0.2.2/.vimrc):_
    ```diff


    diff --git a/.vimrc b/.vimrc
    index 77bfe70..7f727b8 100644
    --- a/.vimrc
    +++ b/.vimrc
    @@ -148,3 +148,28 @@ silent function! WINDOWS()
    endfunction

    set omnifunc=syntaxcomplete#Complete
    +
    +" Smart mapping for tab completion
    +" https://vim.fandom.com/wiki/Smart_mapping_for_tab_completion
    +function! Smart_TabComplete()
    +  let line = getline('.')                         " current line
    +
    +  let substr = strpart(line, -1, col('.')+1)      " from the start of the current
    +                                                  " line to one character right
    +                                                  " of the cursor
    +  let substr = matchstr(substr, "[^ \t]*$")       " word till cursor
    +  if (strlen(substr)==0)                          " nothing to match on empty string
    +    return "\<tab>"
    +  endif
    +  let has_period = match(substr, '\.') != -1      " position of period, if any
    +  let has_slash = match(substr, '\/') != -1       " position of slash, if any
    +  if (!has_period && !has_slash)
    +    return "\<C-X>\<C-P>"                         " existing text matching
    +  elseif ( has_slash )
    +    return "\<C-X>\<C-F>"                         " file matching
    +  else
    +    return "\<C-X>\<C-O>"                         " plugin matching
    +  endif
    +endfunction
    +
    +inoremap <tab> <c-r>=Smart_TabComplete()<CR>

__Check out `:help ins-completion` for a list of completion commands.__

Adding Plugins

With vim 7.4, there was some tuning to do to manage the runtime path, that's why there are a bunch of plugin managers out there, like the minimalistic, solid vim-pathogen by Tim Pope (again!), vundle, then asynchronous and fast dein, and my favorite Vim-Plug.

Since vim 8, there's a /pack/ (think backslashes for Windows) directory in your vim files (~/.vim/ for linux and Mac OS, ~\vimfiles\ for Windows) where you can clone, submodule, or simply copy plugins that will be loaded on vim startup.

I'll demonstrate and put the code here using the package path and with Vim-Plug, but if you like another plugin manager, it's usually pretty simple to move from one to the other, they usually use the same pattern:



call#open
  plugin '<plugin path>'
  plugin '<plugin path>'
  plugin '<plugin path>'
call#close

If you are not sure whether your vim supports packages, try typing :echo has('packages') in vim, it should display 1.

I recommend using a plugin manager. I like Vim-Plug because of how fast it is to fetch things asynchronously, and the options to run an installation script that you won't have using the vendor thing. And pathogen for it's simplicity. On old OS with vim 7.4, maybe go for vim-pathogen.

Plugin Initialization

Everything from here will be branched. So this is what the tags look like so far in the repository:

Vim Packages

Here's the initialization, I am also adding the scripts in the repository's bin folder. You can find the text in the .vimrc file so far on the 0.3.0 tag



#!/usr/bin/env bash

if [ ! -d "$HOME/.vim/pack/bundle/start" ]; then
    mkdir -p ~/.vim/pack/bundle/start
fi

cd ~/.vim/pack/bundle/start

Vim-Plug

Install Vim-Plug using the instructions for your OS, following the official instructions
Call and close plug in the .vimrc file: ```diff

diff --git a/.vimrc b/.vimrc
index 7f727b8..143e7d2 100644
--- a/.vimrc
+++ b/.vimrc
@@ -173,3 +173,9 @@ function! Smart_TabComplete()
endfunction

inoremap =Smart_TabComplete()
+
+call plug#begin('~/.vim/plugged')
+
+" Put plugins here
+
+call plug#end()

  Find this content [the 0.3.0-plug tag](https://github.com/ThomasMarcel/vimrc/blob/0.3.0-plug/.vimrc).

## General Developer Experience (DX) Plugins

Now, let's add some cool DX plugins (let me know if I am missing some)

* [vim-sensible](https://github.com/tpope/vim-sensible) (we started our `.vimrc` file with that, so not mandatory, but like that it'll be up to do date)
* [mucomplete](https://github.com/lifepillar/vim-mucomplete) for code completion. Note that to use it properly, we need to remove the mapping for the tab key. And it is "better" than our omnifunc because it will check the language completion, then the tags, etc automatically in one command
* [vim-fugitive](https://github.com/tpope/vim-fugitive) git wrapper
* [vim-commentary](https://github.com/tpope/vim-commentary) comment stuff out
* [vim-surround](https://github.com/tpope/vim-surround) manipulate enclosing characters, tags, etc
* [vim-vinegar](https://github.com/tpope/vim-vinegar) to move around from buffer to netrw (vim's directory browser)
* [vim-sleuth](https://github.com/tpope/vim-sleuth) to set indentation
* [vim-obsession](https://github.com/tpope/vim-obsession) vim session autosave and other session-related things
* [delimitmate](https://github.com/raimondi/delimitmate) to automatically close quotes, etc
* [ctrlp.vim](https://github.com/ctrlpvim/ctrlp.vim) search for a file

### Vim Packages

I modified my script to clone repositories to not become very repetitive and commented out the tab key mapping to avoid conflict with mucomplete. Find the code in [the 0.4.0 tag](https://github.com/ThomasMarcel/vimrc/tree/0.4.0).

```diff


diff --git a/.vimrc b/.vimrc
index 7f727b8..65a4c7a 100644
--- a/.vimrc
+++ b/.vimrc
@@ -148,6 +148,7 @@ silent function! WINDOWS()
 endfunction

 set omnifunc=syntaxcomplete#Complete
+set spell

 " Smart mapping for tab completion
 " https://vim.fandom.com/wiki/Smart_mapping_for_tab_completion
@@ -172,4 +173,4 @@ function! Smart_TabComplete()
   endif
 endfunction

-inoremap <tab> <c-r>=Smart_TabComplete()<CR>
+" inoremap <tab> <c-r>=Smart_TabComplete()<CR>
diff --git a/bin/plugins.sh b/bin/plugins.sh
old mode 100644
new mode 100755
index 23d88c2..ab903ec
--- a/bin/plugins.sh
+++ b/bin/plugins.sh
@@ -6,4 +6,15 @@ fi

 cd ~/.vim/pack/bundle/start

-git clone --depth 1 https://github.com/lifepillar/vim-mucomplete.git
+git_plugins=( "tpope/vim-sensible" "lifepillar/vim-mucomplete" "tpope/vim-fugitive" "tpope/vim-commentary" "tpope/vim-surround" "tpope/vim-vinegar" "tpope/vim-sleuth" "tpope/vim-obsession" "raimondi/delimitmate" "ctrlpvim/ctrlp.vim" )
+
+for plugin in "${git_plugins[@]}"; do
+    folder=$(echo $plugin | cut -d'/' -f2)
+    if [ ! -d "$folder" ]; then
+        git clone --depth 1 "https://github.com/$plugin.git"
+    else
+        cd "$folder"
+        git fetch origin
+        cd ..
+    fi
+done

Vim-Plug

The results can be found in the 0.4.0-plug tag.



diff --git a/.vimrc b/.vimrc
index 143e7d2..bcb980d 100644
--- a/.vimrc
+++ b/.vimrc
@@ -148,6 +148,7 @@ silent function! WINDOWS()
 endfunction

 set omnifunc=syntaxcomplete#Complete
+set spell

 " Smart mapping for tab completion
 " https://vim.fandom.com/wiki/Smart_mapping_for_tab_completion
@@ -172,10 +173,19 @@ function! Smart_TabComplete()
   endif
 endfunction

-inoremap <tab> <c-r>=Smart_TabComplete()<CR>
+" inoremap <tab> <c-r>=Smart_TabComplete()<CR>

 call plug#begin('~/.vim/plugged')

-" Put plugins here
+Plug 'tpope/vim-sensible'
+Plug 'lifepillar/vim-mucomplete'
+Plug 'tpope/vim-fugitive'
+Plug 'tpope/vim-commentary'
+Plug 'tpope/vim-surround'
+Plug 'tpope/vim-vinegar'
+Plug 'tpope/vim-sleuth'
+Plug 'tpope/vim-obsession'
+Plug 'raimondi/delimitmate'
+Plug 'ctrlpvim/ctrlp.vim'

 call plug#end()

Linter and Fixer

First let's get the package.

ale is my favorite. Works really fine, is pretty fast and asynchronous, so not frustrating.

There's a bit of configuration to do for the fixers. And you can optionally add let g:ale_fix_on_save = 1 to automatically fix on save.

We are also adding some general fixes for all file types: remove trailing lines and whitespaces.



diff --git a/.vimrc b/.vimrc
index 65a4c7a..7711a6a 100644
--- a/.vimrc
+++ b/.vimrc
@@ -174,3 +174,9 @@ function! Smart_TabComplete()
 endfunction

 " inoremap <tab> <c-r>=Smart_TabComplete()<CR>
+
+let g:ale_fixers = {
+\   '*': ['remove_trailing_lines', 'trim_whitespace'],
+\}
+
+let g:ale_fix_on_save = 1

Vim Packages

Let's get the package (cf. tag 0.5.0).



diff --git a/.vimrc b/.vimrc
index 65a4c7a..7711a6a 100644
--- a/.vimrc
+++ b/.vimrc
@@ -174,3 +174,9 @@ function! Smart_TabComplete()
 endfunction

 " inoremap <tab> <c-r>=Smart_TabComplete()<CR>
+
+let g:ale_fixers = {
+\   '*': ['remove_trailing_lines', 'trim_whitespace'],
+\}
+
+let g:ale_fix_on_save = 1
diff --git a/bin/plugins.sh b/bin/plugins.sh
index ab903ec..3b87ba4 100755
--- a/bin/plugins.sh
+++ b/bin/plugins.sh
@@ -8,6 +8,8 @@ cd ~/.vim/pack/bundle/start

 git_plugins=( "tpope/vim-sensible" "lifepillar/vim-mucomplete" "tpope/vim-fugitive" "tpope/vim-commentary" "tpope/vim-surround" "tpope/vim-vinegar" "tpope/vim-sleuth" "tpope/vim-obsession" "raimondi/delimitmate" "ctrlpvim/ctrlp.vim" )

+linter_plugins=( "dense-analysis/ale" )
+
 for plugin in "${git_plugins[@]}"; do
     folder=$(echo $plugin | cut -d'/' -f2)
     if [ ! -d "$folder" ]; then
@@ -18,3 +20,14 @@ for plugin in "${git_plugins[@]}"; do
         cd ..
     fi
 done
+
+for plugin in "${linter_plugins[@]}"; do
+    folder=$(echo $plugin | cut -d'/' -f2)
+    if [ ! -d "$folder" ]; then
+        git clone --depth 1 "https://github.com/$plugin.git"
+    else
+        cd "$folder"
+        git fetch origin
+        cd ..
+    fi
+done

Vim-Plug

Now we add the plugin with vim-plug, and the same bit of configuration as mentioned before. Tag 0.5.0-plug.



diff --git a/.vimrc b/.vimrc
index bcb980d..109ec2f 100644
--- a/.vimrc
+++ b/.vimrc
@@ -188,4 +188,12 @@ Plug 'tpope/vim-obsession'
 Plug 'raimondi/delimitmate'
 Plug 'ctrlpvim/ctrlp.vim'

+Plug 'dense-analysis/ale'
+
 call plug#end()
+
+let g:ale_fixers = {
+\   '*': ['remove_trailing_lines', 'trim_whitespace'],
+\}
+
+let g:ale_fix_on_save = 1

Language-specific configuration and plugins

Linting configuration

Installed linters for your language of preference should work out of the box, and fixers too within the available commands, unless specified otherwise.

To see what linters and fixers are available end enabled, open a file of the type you want, and write :ALEInfo. At the top, you will see something like the following:



 Current Filetype: rust
Available Linters: ['analyzer', 'cargo', 'rls', 'rustc']
  Enabled Linters: ['cargo', 'rls']
  Ignored Linters: []
 Suggested Fixers:
  'remove_trailing_lines' - Remove all blank lines at the end of a file.
  'rustfmt' - Fix Rust files with Rustfmt.
  'trim_whitespace' - Remove all trailing whitespace characters at the end of every line.

And from this info, you can also see the output of the command, so if a linter or fixer isn't behaving like it should, check its output in :ALEInfo and debug!

The .vimrc looks like this in tags 0.6.0 and 0.6.0-plug, respectively.



  diff --git a/.vimrc b/.vimrc
index 7711a6a..9535a37 100644
--- a/.vimrc
+++ b/.vimrc
@@ -64,7 +64,7 @@ if &listchars ==# 'eol:$'
   set listchars=tab:>\ ,trail:-,extends:>,precedes:<,nbsp:+
 endif

-if v:version > 703 || v:version == 703 && has("patch541")
+if v:version > 703 || v:version == 703 && has('patch541')
   set formatoptions+=j " Delete comment character when joining commented lines
 endif

@@ -96,7 +96,7 @@ if &t_Co == 8 && $TERM !~# '^Eterm'
 endif

 " Load matchit.vim, but only if the user hasn't installed a newer version.
-if !exists('g:loaded_matchit') && findfile('plugin/matchit.vim', &rtp) ==# ''
+if !exists('g:loaded_matchit') && findfile('plugin/matchit.vim', &runtimepath) ==# ''
   runtime! macros/matchit.vim
 endif

@@ -175,8 +175,36 @@ endfunction

 " inoremap <tab> <c-r>=Smart_TabComplete()<CR>

+augroup FiletypeGroup
+    autocmd!
+    au BufNewFile,BufRead *.jsx set filetype=javascript.jsx
+augroup END
+
+let g:ale_linter_aliases = {
+            \ 'jsx': ['css', 'javascript'],
+            \ 'vue': ['eslint', 'vls']
+            \}
+
+let g:ale_linters = {
+            \ 'jsx': ['stylelint', 'eslint'],
+            \ 'rust': ['analyzer', 'cargo', 'rls'],
+            \ 'vim': ['vint'],
+            \ 'zsh': ['shell', 'shellcheck'],
+            \}
+
 let g:ale_fixers = {
-\   '*': ['remove_trailing_lines', 'trim_whitespace'],
-\}
+            \ '*': ['remove_trailing_lines', 'trim_whitespace'],
+            \ 'rust': ['rustfmt'],
+            \}

 let g:ale_fix_on_save = 1
+
+let g:ale_sign_column_always = 1
+let g:ale_echo_msg_error_str = 'E'
+let g:ale_echo_msg_warning_str = 'W'
+let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'
+let g:ale_lint_on_insert_leave = 0
+let g:ale_set_loclist = 1
+let g:ale_set_quickfix = 1
+let g:ale_open_list = 1
+let g:ale_list_window_size = 5

So mainly what was done here is:

set *.jsx files to type javascript.jsx, easier to identify as javascript
set aliases for jsx and vue files
set specific linters instead of default ones for a few types
same with fixers
leave the "gutter" (1 character column on the left) that ale uses always open, so the buffer window isn't always tilting from left to right
set the message format to know what type of message it is, and coming from which linter, as we can have several for one file type
Open the quickfix window so it's easier to navigate warnings and errors, but not too big (in my opinion, the default 10 lines are obtrusive, especially in split views. 5 is fine)

Language plugins

For better syntax highlighting and other functions, sometimes the default language support offered by vim out of the box is subpar or non-existent. In that case, there are several options to consider:

VimAwesome, look in the language menu, there are a lot of tags. you can check out the plugins by language
vim-polyglot offers support for a lot of different languages with their own official and/or community plugins. Look at the language pack list to see if the programming language you want is in the list (it probably is). And it loads them on demand, so it's not slowing down vim performances
Language packs. So here, you have to look for them one by one, depending on the languages you use. Sometimes, the official website or official organization in GitHub or such offers a plugin, like Rust or Rescript. Sometimes you will have to search for "javascript vim" or something, and check out the results. The vim-polyglot language package list is also a good starting point to search for a specific language

Colors and Themes

Now there's a saying in French that goes like "Des goûts et des couleurs, on ne discute pas". Literal translation being "of tastes and colors, we don't discuss".

So here I'll just drop a basic configuration, one plugin I like, to easily switch between themes, and a bunch of themes I like.

Mostly dark. Cuz most developers have some common traits with vampires. Like hating the light, not living the healthiest of lives. Some hate garlic, I guess. And now (03/06/2021) we can't cross seas, but that's valid for most of the human condition, not only vampires and developers. And developires.

Let's take an example with the famous solarized8 color theme.
Basically, we get the plugin, set the colorscheme variable, background tone (light/dark).

Optional: for a GUI, we can add a font. Mine is Dank Mono. It's not free, but there are a lot of cool free fonts too. Check out Dev Fonts to see which one lookgs good.

You can find a list of popular color schemes at VimAwesome.

Vim Packages

You can see the results in tag 0.7.0 for the install script, tag 0.8.0 for the .vimrc.



diff --git a/.vimrc b/.vimrc

index 9535a37..373d076 100644

--- a/.vimrc

+++ b/.vimrc

@@ -148,7 +148,7 @@ silent function! WINDOWS()

 endfunction



 set omnifunc=syntaxcomplete#Complete

-set spell

+" set spell



 " Smart mapping for tab completion

 " https://vim.fandom.com/wiki/Smart_mapping_for_tab_completion

@@ -208,3 +208,15 @@ let g:ale_set_loclist = 1

 let g:ale_set_quickfix = 1

 let g:ale_open_list = 1

 let g:ale_list_window_size = 5

+

+set background=dark

+colorscheme solarized8

+if has('gui_running')


 if has('gui_gtk2')
   set guifont=Dank\ Mono\ Regular:h12
 elseif has('gui_macvim')
   set guifont=Dank\ Mono\ Regular:h12
 elseif has('gui_win32')
   set guifont=Dank\ Mono\ Regular:h12
 endif
+endif

diff --git a/bin/plugins.sh b/bin/plugins.sh
index 3b87ba4..38b9e9c 100755
--- a/bin/plugins.sh
+++ b/bin/plugins.sh
@@ -10,6 +10,8 @@ git_plugins=( "tpope/vim-sensible" "lifepillar/vim-mucomplete" "tpope/vim-fugiti

 linter_plugins=( "dense-analysis/ale" )

+color_plugins=( "lifepillar/vim-solarized8" )
+
 for plugin in "${git_plugins[@]}"; do
 folder=$(echo $plugin | cut -d'/' -f2)
 if [ ! -d "$folder" ]; then
@@ -31,3 +33,14 @@ for plugin in "${linter_plugins[@]}"; do
     cd ..
 fi
done
+
+for plugin in "${color_plugins[@]}"; do
   folder=$(echo $plugin | cut -d'/' -f2)
   if [ ! -d "$folder" ]; then
       git clone --depth 1 "https://github.com/$plugin.git"
   else
       cd "$folder"
       git fetch origin
       cd ..
   fi
+done

Vim-Plug

The tag 0.8.0-plug adds the colorscheme in the vim-plug branch.



diff --git a/.vimrc b/.vimrc

index 2844774..e3843a2 100644

--- a/.vimrc

+++ b/.vimrc

@@ -190,6 +190,8 @@ Plug 'ctrlpvim/ctrlp.vim'



 Plug 'dense-analysis/ale'



+Plug 'lifepillar/vim-solarized8'

+

 call plug#end()



 augroup FiletypeGroup

@@ -226,3 +228,15 @@ let g:ale_set_loclist = 1

 let g:ale_set_quickfix = 1

 let g:ale_open_list = 1

 let g:ale_list_window_size = 5

+

+set background=dark

+colorscheme solarized8

+if has('gui_running')


 if has('gui_gtk2')
   set guifont=Dank\ Mono\ Regular:h12
 elseif has('gui_macvim')
   set guifont=Dank\ Mono\ Regular:h12
 elseif has('gui_win32')
   set guifont=Dank\ Mono\ Regular:h12
 endif
+endif

Extras

So now we have a pretty decent configuration. But there are still some plugins that are good to have:

vim-seasy-align easily align things
vim-visual-multi for multi selectors
goyo.vim distraction-free mode
limelight.vim focus on current paragraph, dim the rest (cool with goyo)
lightline.vim status bar
devicons file, scm icons
startify cool vim startup page, with recent files and a quote
any-jump.vim jump to definition
vim-highlightedyank to highlight the yaked text for a sec
vim-thematic to switch between themes
vim-gitgutter to display git information in the "gutter"
ultisnips vim snippets engine
vim-snippets actual snippets

Authoring

I've written an article abouth authoring with vim, all the plugins for completion and spelling, and some goodies.

Plugins

Visit VimAwesome for a list of popular vim plugins

Dotfiles and vimrc generators

There are several dotfiles from developers that you can find on GitHub. And there's Vim Bootstrap and other .vimrc generators.

Conclusion

I hope this will help you. This is also part of a thought process that I went through to cleanup my own .vimrc, and know it better.

The .vimrc at that point is located in tag 1.0.0 and 1.0.0-plug. I will write separate posts for the programming languages I use.

Let me know what you think!

And note so self: write smaller articles but more often 😅.

Convert an Express NodeJS App From JavaScript to TypeScript

Thomas Alcala Schneider — Sat, 18 Jul 2020 15:42:21 +0000

Hi! 🖖

Today, I'll walk us through moving an Express NodeJS app from JavaScript
to TypeScript.

Why? TypeScript offers type safety "on demand", most of the code
won't break if you move your app from one to the other, and then, you
can add the safety where it is important.

How

We are going to start from a fork of Kent C. Dodds' Express example for
mid-large
apps.
I made a branch called javascript as a starter.

Nothing is lost, nothing is created, everything is transformed

Let's change the extension of all our app's js files to ts:

$ find . -type f -name '*.js' | grep -v node_modules | grep -v babelrc | while read line; do name=$(echo $line | sed 's/\.js$/.ts/'); mv $line $name; done

We find all js files, ignore node_modules and babelrc, and rename them
to ts.

Adding TypeScript

Let's add the dependencies

$ yarn add typescript --dev
$ yarn add concurrently @types/express --dev

And in package.json, we add more scripts:

"scripts": {
    "start": "node .",
    "build": "babel --delete-dir-on-start --out-dir dist --copy-files --ignore \"**/__tests__/**,**/__mocks__/**\" --no-copy-ignored src",
    "start:dev": "nodemon dist/index.js",
    "build:dev": "tsc --watch --preserveWatchOutput",
    "dev": "concurrently \"npm:build:dev\" \"npm:start:dev\""
  },

Init the config

$ yarn tsc --init

You can copy my tsconfig.json, I mainly added an output dire and small things like that.

Run the TypeScript compiler, crash and burn

$ yarn tsc

So, this breaks. Now let's fix the issues

Fixing a File

Let's start with a small file: src/index.ts. It returns an error that
seems straightforward, but is representative of how TypeScript can be
annoying with little things.

Here is the content of the file:

import logger from 'loglevel'
import {startServer} from './start'

const isTest = process.env.NODE_ENV === 'test'
const logLevel = process.env.LOG_LEVEL || (isTest ? 'warn' : 'info')

logger.setLevel(logLevel)

startServer()

And the error:

src/index.ts:7:17 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'LogLevelDesc'.

So here, we can see that logger.setLevel() is used to set the log
level, taking a logLevel variable. And it is going to be a string from
the LOG_LEVEL environment variable if defined, else based on the
NODE_ENV variable, it will be a string: 'warn' or 'info'.

HOWEVER, this crashes now, because in TypeScript, setLevel() takes
a LogLevelDesc type, which is essentially an integer with a fancy type
name.

Common libraries have types well documented, toplevel not really. So
I had to look at examples in the node_modules:

$ grep -rHin setlevel node_modules | less

node_modules/loglevel/test/node-integration.js:11:
log.setLevel(log.levels.TRACE);
node_modules/loglevel/test/node-integration.js:12:
log.setLevel(log.levels.DEBUG);
node_modules/loglevel/test/node-integration.js:13:
log.setLevel(log.levels.INFO);
node_modules/loglevel/test/node-integration.js:14:
log.setLevel(log.levels.WARN);
node_modules/loglevel/test/node-integration.js:15:
log.setLevel(log.levels.ERROR);

... So here we have some usage, for us it is going to be
logger.levels.INFO, etc, so we replace "warn" and "info" in const logLevel = process.env.LOG_LEVEL || (isTest ? 'warn' : 'info') by
logger.levels.WARN and logger.levels.INFO

It's still not enough, because process.env.LOG_LEVEL is still
potentially there, and it's going to be a string. So I had to write
a function to convert the string and cast it in a LogLevelDesc:

const convertLogLevel: (logLevel: string | undefined) => logger.LogLevelDesc = (
  logLevel: string | undefined,
) => {
  switch (logLevel) {
    case "1":
    case "error":
      return logger.levels.ERROR;
    case "2":
    case "warn":
      return logger.levels.WARN;
    default:
      return logger.levels.INFO;
  }
};

const isTest = process.env.NODE_ENV === "test";
const logLevel: logger.LogLevelDesc = convertLogLevel(process.env.LOG_LEVEL) ||
  (isTest ? logger.levels.WARN : logger.levels.INFO);

As you can see in the first line, I had to specifically write the type
of the function (logLevel: string | undefined) => logger.LogLevelDesc
(a function signature is (param1: type, param2: type, ...) => returnType).

I strongly recommend that you use a linter for your editor, so you can
see type errors while writing the code.

Now that this file is fixed, let's try another one with Express code so
we see how this works for bigger, better documented libraries,

Fixing an Express Route File

Now let's fix src/routes/math.ts. There is a problem with implicit
any type for req, res, etc. This can be solved by defining an explicit
type any for those:

async function add(req: any, res: any) {}

Types for request and stuff aren't safe and more of adding another
headache than a solution. I prefer creating a type for the query
parameters, this is more useful.

type MathQuery = {
  a: number;
  b: number;
  c: number;
};

async function add(req: any, res: any) {
  const mathQuery = req.query as MathQuery;
  const sum = Number(mathQuery.a) + Number(mathQuery.c);
  res.send(sum.toString());
}

So here, we cast req.query as MathQuery.

Some Battles You Can't Win

We've seen well done transition to TypeScript, this latest compromise,
now we'll see a case where it is too painful to fix the code so we
ignore it.

I am a partisan of using TypeScript when it is useful, and try to use
the type system the most possible, to avoid errors at runtime.

That said, there are times when it is just too exhausting, painful and
a waste of time to use. Here for example, the src/start.ts file is
a good example. Kent has wrapped the startServer and middleware
functions in promises with no type, no real return, just a resolution.
And I'm sure he knows what he's doing a lot better than me.

There is no way to match this signature without overriding or modifying
the node type definitions, so in that case when we know it's working,
it's faster and probably best just to ignore the type verification.

Simply add // @ts-nocheck at the top of the file.

We've done it again! 🎉

The final code

Deno Version Management

Thomas Alcala Schneider — Tue, 07 Jul 2020 21:09:58 +0000

Deno is really nice! Version managers are nice too, they offer a way to have several versions of a runtime, dependencies installed at a user level, without breaking system runtime if any.

Here we will use one version manager to install the Deno runtime 😀.

Lexicon

Deno

Deno is a JavaScript/TypeScript runtime that can replace NodeJS, with
the aim to be more secure.

Deno Runtime Installation

Standard Installation

There are a bunch of scripts to install the Deno runtime in the
official
documentation,
depending on your operating system. Deno is written in Rust, so you can
also install it with cargo, the Rust package manager.

dvm

The real topic of this post!

dvm (Deno Version Manager) is a version manager inspired by
fnm, a fast NodeJS version manager.

Installation

You can get it from the GitHub release
page or with opam if you work
with OCaml, it is written in OCaml.
$ opam pin add dvm https://github.com/imbsky/dvm.git 
$ opam install dvm

For Windows, your best bet is probably the OPAM approach, or WSL.

Initialization

It is not as mature as fnm, so what you have to do next is:

Install a Deno runtime

$ dvm install 1.1.3
Use the Deno runtime

$ dvm use 1.1.3
Add the Deno runtime to your PATH

Add this line to your shell rc: export PATH="$HOME/.dvm/current:$PATH"

Test the Runtime

Deno hosts an example file with a single line console log in it. You can
test your runtime with it like this:

$ deno run https://deno.land/std/examples/welcome.ts

This is it! 🎊

Emojis in Svelte 3 🤘

Thomas Alcala Schneider — Wed, 01 Jul 2020 08:03:25 +0000

Hey!

So today, let's make an emoji component in Svelte 3. It's fairly simple. Our objective is to be able to write something like below, and it'll show the emoji. We also want to be careful that the accessibility attributes are there.

<Emoji symbol="👋" label="Hi!" />

Let's start by writing our Emoji component, and call it Emoji.svelte, with the following content:

<script>
  export let label;
  export let symbol;
</script>

<style>
</style>

<span
  className="emoji"
  role="img"
  aria-label={label ? label : ""}
  aria-hidden={label ? "false" : "true"}
>
{symbol}
</span>

Quick explanation:

The component will be a span
It has a symbol and a label attribute, so it's a11y-compliant
The aria is hidden if there's no label (but you should always put one)
The symbol is the actual emoji, and will be displayed as a child/inner HTML of the span
Inside the script tag, we make the label and symbol variables available
I am leaving a style tag, so you can add CSS in there if you want

And that is it! I You just have to import the component like so, in another component's script tag:

<script>
  import Emoji from '../components/Emoji.svelte';
</script>

... Then use the Emoji tag as described in the first code block, and that's it!

You still have to copy/paste the emoji character from somewhere and insert it in the symbol attribute of the Emoji tag. If you are on Mac OS, I recommend the lightweight qmoji by Jared Forsyth, but there's a bunch of those emoji apps for any OS.

Talk to y'all soon!

Authoring with Vim

Thomas Alcala Schneider — Wed, 01 Jul 2020 07:41:43 +0000

The REAL writing, not code writing 😆.

This post reflects only the thoughts of its author, Thomas Alcala.

If you don't know vim, I recommend trying Vim
Adventures, a game-like vim tutorial.

Introduction

It was already the case before with tools like WordPress, but with the surge of headless CMS, serverless platforms, JAMstack, Wix, writing and
publishing your own blog is easier than ever.

There's a lot of value in browser editors too (the famous WYSIWYG, What
You See Is What You Get) that let users click text formatting buttons,
and the HTML code is generated for them. No need to learn web design,
and with browser plugins like the Grammarly plugin, you also get the
spelling, grammar corrections you'd get in office software.

So you ask "is there a reason to try and write with vim?"

Vim is not the most beginner-friendly editor, so this is mostly for
people already familiar with vim, but the answer is YES!

Let's try to get some cool writing features, to prove it!

Requisites

As you may know, the vim configuration is located in ~/.vimrc.
Technically, you can call vi -u /path/to/some/other/vimrc to use
another configuration file, so it should be possible to use different
configurations for code and writing. I prefer to maintain only one file, so I use a plugin manager for vim.

vim-plug
Go for some plugins

Formatting

For text formatting, I use
vim-pencil. It automatically
breaks lines in Markdown files, hides formatting code, etc. It helps
keeping the paragraphs clean.

I use the basic implementation with no configuration, the only trick
I made is with vim-plug to conditionally import it, so it doesn't break
lines and stuff when I write code:

Plug 'reedes/vim-pencil', { 'for': ['text', 'notes', 'markdown', 'mkd'] }

Spell Check

For spell checking, I use another excellent plugin by reedes:
vim-lexical. You can also
configure a dictionary and a thesaurus, for completion, for technical
terms, etc. Very powerful.

Quality Assurance

Last but not least, by reedes, there's a plugin for writing quality,
called vim-wordy.

It's got a bunch of dictionary rings for the English language, and you
can switch between them. For example, it detects

redundant words
jargon
problematic terms
lazy or passive voice
manipulative (weasel) language
colloquialisms and idioms
etc...

I'll run it for fun after a first draft of this post, this should be
somewhat of an eye opener 😆.

Completion

Completion is kind of done by the lexical plugin, this is more about
prediction of the next word in a sentence!

Would you like an example?

For a non-native English speaker like me, this is very useful, most of
all for some idiomatic expressions.

This is done by combining some data, scripts and vim plugins:

Get the data from the nextword dataset release page, there's a small and a large dataset, pick the one you like
Define an environment variable in your shell for the dataset location

export NEXTWORD_DATA_PATH=/path/to/nextword-data

Get the nextword script (you must have installed Go before, as mentioned in the prerequisites)

go get -u github.com/high-moctane/nextword

Install asyncomplete-nextword, that means adding the asyncomplete and async vim plugins too, it's all in the plugin installation instructions Here I use the same trick as for the pencil plugin, and write

   Plug 'high-moctane/asyncomplete-nextword.vim', { 'for': ['text', 'notes', 'markdown', 'mkd'] }

in my .vimrc file, so this plugin doesn't try to complete code
with grammarily correct words

Emojis

With very technical or outlandish posts, like one trying to sell writing
blog posts with vim, it's almost mandatory to put
some emojis to lighten the tone. I use a couple of plugins for that:
vim-emoji and
asyncomplete-emoji, that takes advantage of the asyncomplete plugin already installed in the completion segment of this post.

The asyncomplete plugin autocompletes stuff starting with colon, like
:thumbsup:, then I mapped a vim-emoji command in my .vimrc file that uses sed to translate all emojis
to unicode 👍!

nnoremap <Leader>e :s/:\([^:]\+\):/\=emoji#for(submatch(1), submatch(0))/g<CR>  
nnoremap <Leader>E :%s/:\([^:]\+\):/\=emoji#for(submatch(1), submatch(0))/g<CR>

So now, <Leader> (comma , in my configuration) + e rewrites all
:emoji: to their symbol, lowercase e for the current line, uppercase
for the whole buffer.

Distraction-free Mode

I also use goyo.vim and
limelight.vim, even though
it may be even more distracting until you get used to it! 😆

Bonus

Not for vim but for screen recording and making gifs out of videos, I
use:

simplescreenrecorder to record the screen or part of it
ffmpeg to make a gif out of the mkv video

ffmpeg -i ~/Videos/simplescreenrecorder-2020-03-29_19.22.57.mkv -r 15 -vf scale=720:-1 uploads/goyo.gif

Conclusion

Turns out it's not completely crazy to author stuff in vim! 😉

DEV Community: Thomas Alcala Schneider

Fish-like Autosuggestion in Powershell

Prerequisites

Installation

(Optional) Initialize it in your profile

Translating My Resume (and any text file) with Rust

Prerequisites

Down to it!

Project Creation

Basic Variables

Dummy Call

Call in Rust with Hardcoded Data

Translate in a Function

Take Arguments

Read Lines

Translate Lines

Conclusion

Vim Configuration from Minimal to Complete

Minimal Configuration

Adding Plugins

Plugin Initialization

Vim Packages

Vim-Plug

Vim-Plug

Linter and Fixer

Vim Packages

Vim-Plug

Language-specific configuration and plugins

Linting configuration

Language plugins

Colors and Themes

Vim Packages

Vim-Plug

Extras

Authoring

More

Plugins

Dotfiles and vimrc generators

Conclusion

Convert an Express NodeJS App From JavaScript to TypeScript

How

Nothing is lost, nothing is created, everything is transformed

Adding TypeScript

Fixing a File

Fixing an Express Route File

Some Battles You Can't Win

We've done it again! 🎉

Deno Version Management

Lexicon

Deno

Deno Runtime Installation

Standard Installation

dvm

Installation

Initialization

Test the Runtime

This is it! 🎊

Emojis in Svelte 3 🤘

Authoring with Vim

Introduction

Requisites

Formatting

Spell Check

Quality Assurance

Completion

Emojis

Distraction-free Mode

Bonus

Conclusion