As a developer, you need a robust environment that fits your needs to develop, compile, debug, build, and so on. So, you have now two pills to choose one of them. And most probably if you read this article you have already chosen the red one. But unfortunately, Neovim plugins does not give you the full control of the experience.

Why vim/neovim and not vscode/intellij?

I choose vim/neovim because I need a “just” code editor, and also it can be easily leverage my tools capabilities on UNIX way, and you can read more on this article Unix as an IDE, but the all-in-solutions, like an IDE, is not the right tool for code editing, it came with a lot of features and defaults that you in most cases I don’t need it, or I have to learn how to use them according to that IDE.

So, Why neovim not vim?

I used to use vim before, but I need an editor that more focused natively on “code”, Not just a plain text, So neovim is a good choice for developers to enhance the coding experience by using lsp, and treesitter.

immature plugin ecosystem

To be honest, one of the problems on the neovim community is nonsense plugins that just a replicate vim plugins or plugins that do what we should do in the terminals but using lua as plugin on neovim. Also, It used at the beginning to be missing the help documentation but now I believe it gets better, so it is nice.

Also, what they called “neovim distributions” which another layer of complexity that tight your use by using the author setting file.

How to escape, and use neovim on unix way

What I’ve done is first delete all my plugins, and start with a clean init.lua file with simple configuration, and gradually see what I’m really miss and add it into my config.

If the feature that I need can be easily implemented with neovim config only I’ll go to this direction, but if not I’ll search for small and well-written and well-documented plugin and also if it has a lot of features, I’ll go first to copy-paste code into my neovim config and start tweaking it.

Examples time

- search/browse files:

for the codebase navigation I’ll use the vim find, buffers commands but instead of using vim.opt.path:append "*" which leads to hang the command on projects that’s have for example node_module I will use the local .nvimrc on each project to extend my config

-- Load .nvimrc manually
local local_vimrc = vim.fn.getcwd() .. '/.nvimrc.lua'
if vim.loop.fs_stat(local_vimrc) then
  local source = vim.secure.read(local_vimrc)
  if not source then
    return
  end

  vim.cmd(string.format('so %s', local_vimrc))
end

so on the project root directory I can create a new file .nvimrc.lua and add this line e.g:

vim.opt.path:append({ "src/**", })
-- and any config that I need for this project

And for search on the files there is a vim grep command with some modification that makes it work more performant by using ripgrep

-- better grip with 'rg'
if vim.fn.executable 'rg' == 1 then
  o.grepprg = [[rg --hidden --smart-case --vimgrep]]
  o.grepformat = { '%f:%l:%c:%m' }
end

and the nice about grep that the result now on your quickfix, so you can easily navigate between them, and do any operation that you want.

And here is my mapping, it may be useful, and here is the utils used in the snippets below:

-- navigation & find & search
G.nnoremap('<leader>p', ':find<space>', { silent = false })
G.nnoremap('<leader>rg', ':silent grep ""<left>', { silent = false })
G.nnoremap('<leader>gw', ':silent grep <C-R>=expand("<cword>")<CR><CR>')

-- buffers
G.nnoremap('<leader>bn', ':bn<cr>')
G.nnoremap('<leader>bp', ':bp<cr>')
G.nnoremap('<leader>bl', ':ls t<cr>:b<space>', { silent = false })
G.nnoremap('<leader>bd', ':bd!<cr>')

-- quick list
G.nnoremap('<leader>qn', ':cn<cr>')
G.nnoremap('<leader>qp', ':cp<cr>')
G.nnoremap('<leader>ql', G.toggle_qf, { nowait = false })
G.nnoremap('<leader>qq', ':cex []<cr>')

- code completion

I’m kinda person that doesn’t like a destruction while typing, so fuzzy finder, and auto pop-up menus not a good solution for me. I prefer to go also with the native ins-compilation and use completion menu on demand by a specific category.

- statusline/winbar

For this one I need it very simple so I write it by myself after I submit this post on /r/neovim sub-reddit and get a lot of inspiration.

- Git

Why should I integrate git inside neovim! I use git on my terminal inside tmux session using some helpful commands that fits on my workflow. and that is on of them:

# `-p` will open interactive mode to add/reset based on the hunks
git add -p
git reset -p

- Neovim goodies (lsp/treesitter)

This is the part that I’m really have to use official plugins so let’s install packer… Or wait a minute, why not just use the native solution.

there is a vim packages is a directory you can download your plugins inside it and just it nothing more to do.

cd ~/.local/share/nvim
git init .
git submodule init
mkdir site/pack/plugins/opt/
git submodule add --depth 1 https://github.com/neovim/nvim-lspconfig site/pack/plugins/opt/nvim-lspconfig

and I wrote a wrapper on lua to make the process easy and similar to the package managers check it out

- Theming

I just use nvim-base16 plugin to fit my base16 theme system.

conclusion

After adding all my needs I find out that there was many plugins on my config that does not help me or not fit on my workflow. e.g: I do not use snippets, file explorer, fuzzy finders.

This blog will be updated every day to show you my solutions for aoc-2020.

TOC

• day 01 ⭐⭐
• day 02 ⭐⭐
• day 03
• day 04
• day 05
• day 06
• day 07
• day 08
• day 09
• day 10
• day 11
• day 12
• day 13
• day 14
• day 15
• day 16
• day 17
• day 18
• day 19
• day 20
• day 21
• day 22
• day 23
• day 24
• day 25

Day 01

[part 01 - part 02]

part 01 ⭐

The first part of day one is a two-sum problem needs to get the multiply of two entries that sum to 2020

The naive solution you can do two loops and make a condition whenever the two numbers sum to 2020 break the loop and return the value.

function p1(input) {
  for (let i = 0; i < input.length; i++)
    for (let j = 0; j < input.length; j++)
      if (input[i] + input[j] === 2020) return input[i] * input[j];
}

This solution will take O(n^2) time complexity for each element.

We can enhance our solution by using Map data structure and only one loop

function p1(input) {
  const map = new Map();
  for (let i = 0; i < input.length; i++) {
    const complement = 2020 - input[i];
    if (map.has(complement)) return input[map.get(complement)] * input[i];

    map.set(input[i], i);
  }
}

this solution will take O(n) time complexity by traverse the list containing n element only once.

part 02 ⭐

The difference in the part two that we need to get the multiply for three numbers that sum to 2020

We can use the same naive solution by using brute force with three loops.

function p2(input) {
  for (let i = 0; i < input.length; i++)
    for (let j = 0; j < input.length; j++)
      for (let k = 0; k < input.length; k++)
        if (input[i] + input[j] + input[k] === 2020)
          return input[i] * input[j] * input[k];
}

Day 02

[part 01 - part 02]

part 01 ⭐

We have a list of passwords with validation rules, So we should validate each password and submit the total number of valid passwords.

1-3 a: abcde
1-3 b: cdefg
2-9 c: ccccccccc

First, let’s create an parser to extract information from each line.

const getPasswordsList = () =>
  readFileSync(path.resolve(__dirname, 'input.txt'), 'utf8')
    .split('
')
    .filter(Boolean)
    .map((i) => i.split(/[-,:,\s]+/));

We read the input.txt file and convert it into an array by split each line using .split( ) then we will use regex to extract min, max, target, and password on each line by using multi separator: -, :, and \s for space.

If you interred to learn more about split with regex I highly recommend to watch Regular Expressions: split() - Programming with Text video.

Now we are ready to write the validator function:

function getValidPasswordsP1(passwords) {
  return passwords.reduce((ans, [min, max, letter, password]) => {
    const count = password.match(new RegExp(letter, 'g'))?.length;
    return count >= +min && count <= +max ? ++ans : ans;
  }, 0);
}

part 02 ⭐

Actually the part two is a lot easier than the part one it assume the first two numbers are the positions for the target letter to only occurs in one of them.

function getValidPasswordsP2(passwords) {
  return passwords.reduce((ans, [pos1, pos2, letter, password]) => {
    return (password.charAt(+pos1 - 1) === letter) ^
      (password.charAt(+pos2 - 1) === letter)
      ? ++ans
      : ans;
  }, 0);
}

Use the bitwise XOR to make sure it only occurs in only exact one position. you can check the MDN reference.

As a Software-Engineer I spent most of the time inside my terminal, So I need for that a fast terminal with fast tools to speed up my productivity.

The tools written in rust help me to achieve that. let’s see in this article those tools.

tl;dr

• alacritty A cross-platform, GPU-accelerated terminal emulator
• starship 🌌 The minimal, blazing-fast, and infinitely customizable prompt for any shell!
• exa A modern version of ‘ls’.
• bat A cat(1) clone with wings.
• delta A viewer for git and diff output
• zoxide A faster way to navigate your filesystem
• ripgrep ripgrep recursively searches directories for a regex pattern
• fd A simple, fast and user-friendly alternative to ‘find’
• bottom Yet another cross-platform graphical process/system monitor.
• tldr 📚 Collaborative cheatsheets for console commands
• spotify-tui Spotify for the terminal written in Rust 🚀
• gitui Blazing 💥 fast terminal-ui for git written in rust 🦀

Alacritty

Let’s start our list with alacritty terminal is one of the fastest terminals because of using GPU for rendering, and it is a cross-platform terminal.

You can customize your own configuration like color scheme, fonts, opacity, and key mapping.

Alacritty doesn’t come with ligature support but you can use this fork. or if you are using Arch you can install it from aur

Starship

I used to use zsh + powerlevel9k as my prompt and even when I migrate to powerlevel10k, I still notice a delay when open new shell. But with starship it’s start instantly.

You can use it with any shell bash, zsh, fish and even powerShell.

The screenshot below showing the result of my customized configuration.

Exa

exa is an implementation of ls command but with colors and icons and it renders very fast.

I’m using exa as replacer for ls command by making an alias.

if [ "$(command -v exa)" ]; then
    unalias -m 'll'
    unalias -m 'l'
    unalias -m 'la'
    unalias -m 'ls'
    alias ls='exa -G  --color auto --icons -a -s type'
    alias ll='exa -l --color always --icons -a -s type'
fi

the result of my ls and ll commands.

Bat

Bat is an implementation for cat command but with syntax highlighted.

Also I make an alias for this command with nord theme.

if [ "$(command -v bat)" ]; then
  unalias -m 'cat'
  alias cat='bat -pp --theme="Nord"'
fi

Delta

delta enhance your git diff output by adding some cool features like syntax highlighting, line numbering, and side-by-side view.

to make delta works in your .gitconfig file add:

[core]
  pager = delta
[interactive]
  diffFilter = delta --color-only
[delta]
  side-by-side = true
  line-numbers-left-format = ""
  line-numbers-right-format = "│ "
  syntax-theme = Nord

we set delta as the default pager for git commands output and enable side-by-side feature and set a theme for Nord, You can choose your preferred theme run and choose one.

delta --list-syntax-themes

Zoxide

I don’t use any file explorer, I just use cd command to navigate between the files and ls commands.

I have a projects directory on my home folder if I wanna navigate to a project of those projects. I will write

cd ~/projects/mahmoudashraf.dev

instead I will write

z ~/projects/mahmoudashraf.dev

just to the first time and if I wanna navigate again to this directory from anywhere just write

z mah

Ripgrep

It is a cross-platform command line searches your directory for a regex pattern.

I recommend you read this article ripgrep is faster than {grep, ag, git grep, ucg, pt, sift}.

some commands that i’m using

# search on javascript files for specific regex
rg tjs "import React"

rg "\.content" -g "*.pug"

# you can also search and replace with regex as sed command
rg fast README.md --replace FAST

Fd

the friendly version of find command, and faster.

It’s by default ignore .gitignore file

in this tutorial I have some screenshots in png format to convert them all to jpeg:

fd -e png -x convert {} {.}.jpeg

To delete files

fd -H '^\.DS_Store$' -tf -X rm

bottom

In this time not top 😀 it is bottom

it’s a cross-platform system monitor.

Tldr

tldr is a cheatsheets for CLIs, instead of read the whole man.

More Tools?

• for who want lightweight alternative for spotify client you can use spotify-tui.
• also if you prefer an UI interface for git check gitui.

and there is a ton of CLIs and tools written in rust you can check lib.rs/command-line-utilities

In this post, we will build a website with a blog using svelte, and sapper.

What is Svelte?

Svelte is a new javascript framework come on the table, Svelte has a philosophy that helps you manipulate the DOM without using any additional techniques like virtual DOM, Svelte compile your code on the build time, and you can update your app easily using reactivity.

What is Sapper?

Sapper is a Server Side framework on top of Svelte helps you create PWA apps with a good SEO and file system based routing.

How to init the project?

We are going to use the starter template provided by the Sapper team, open your favorite terminal and write the following command:

  npx degit "sveltejs/sapper-template#rollup" cool-blog
  cd /cool-blog
  npm install

After installing the dependencies, you should be good to go and start your server.

  npm run dev

Voila, 🎉 the application now up and running.

Let’s open the project in your favorite editor. and go to the blog folder inside the src/routes.

We have several files there:

  | src
    | routes
      | blog
        - index.svelte,
        - index.json.js
        - [slug].svelte
        - [slug].json.js
        - _posts.js

How routing works in sapper?

we have two types the pages, and server routes.

Pages

The filename detrmine the route. For example: src/routes/blog/index.svelte refer to the route /blog.

For Dynamin routing. we going to use [slug]. For example ser/routes/blog/[slug].svelte refer to route /blog/the-whatever-blog-name

Server

Server routes are modules written in .js files that export HTTP functions. For example get endpoint to retrieve the blog details:

// [slug].json.js

import posts from './_posts.js';
const lookup = new Map();

posts.forEach((post) => {
  lookup.set(post.slug, JSON.stringify(post));
});

export function get(req, res, next) {
  // the `slug` parameter is available because
  // this file is called [slug].json.js
  const { slug } = req.params;

  if (lookup.has(slug)) {
    res.writeHead(200, {
      'Content-Type': 'application/json',
    });

    res.end(lookup.get(slug));
  } else {
    res.writeHead(404, {
      'Content-Type': 'application/json',
    });

    res.end(
      JSON.stringify({
        message: `Not found`,
      }),
    );
  }
}

Create a content directory on the root of your project. inside this directory, we going to create a file called sample-post.md file.

// sample-blog.md
// remove comments in case you copy and paste this file for test to make it work

---

slug: 'sample-blog'
title: 'Sample blog.'

---

# Sample title

this is a sample blog post.

// add extra \` to make it work(this blog use same method so tripple \` would be shown as a code here)
`javascript
  console.log("test code highlight")
`

slug has to be the same as the file name, So we can easily read the file with the slug. You can add more than title, and slug, For Example, Date, keywords or whatever you need to add.

To list all blogs on /blog route open src/routes/blog/index.json.js

// src/routes/blog/index.json.js

import fs from 'fs';
import path from 'path';
import grayMatter from 'gray-matter';

const getAllPosts = () =>
  fs.readdirSync('content').map((fileName) => {
    const post = fs.readFileSync(path.resolve('content', fileName), 'utf-8');
    return grayMatter(post).data;
  });

export function get(req, res) {
  res.writeHead(200, {
    'Content-Type': 'application/json',
  });
  const posts = getAllPosts();
  res.end(JSON.stringify(posts));
}

You need to install an extra package called gray-matter that helps you parse the front matter data title, and slug from the markdown.

  npm install gray-matter

If you navigate to /blog route you should have a page similar to this:

Now we need to handle the post route. open src/routes/blog/[slug].json.js

  // src/routes/blog/[slug].json.js

  import path from "path";
  import fs from "fs";
  import grayMatter from "gray-matter";
  import marked from "marked";
  import hljs from "highlight.js";

  const getPost = fileName =>
    fs.readFileSync(path.resolve("content", `${fileName}.md`), "utf-8");

  export function get(req, res, next) {
    const { slug } = req.params;

    // get the markdown text
    const post = getPost(slug);

    // function that expose helpful callbacks
    // to manipulate the data before convert it into html
    const renderer = new marked.Renderer();
./
    // use hljs to highlight our blocks codes
    renderer.code = (source, lang) => {
      const { value: highlighted } = hljs.highlight(lang, source);
      return `<pre class='language-javascriptreact'><code>${highlighted}</code></pre>`;
    };

    // parse the md to get front matter
    // and the content without escaping characters
    const { data, content } = grayMatter(post);

    const html = marked(content, { renderer });

    if (html) {
      res.writeHead(200, {
        "Content-Type": "application/json"
      });

      res.end(JSON.stringify({ html, ...data }));
    } else {
      res.writeHead(404, {
        "Content-Type": "application/json"
      });

      res.end(
        JSON.stringify({
          message: `Not found`
        })
      );
    }
  }

Two new packages we need to install

• marked: help us to convert the markdown file into HTML.
• highlight.js: add highlights to the code blocks.

  npm install highlight.js marked

In src/client.js we import Github styles for highlight.js.

// src/client.js
// ...
import 'highlight.js/styles/github.css';
// ...

conclusion

You now ready to go and add more styles for your website and customize the blog elements styles. to go live using Netlify, Github Page or any service.

Building a site that has images requires to optimize them to avoid any content shifting and deliver a good user experience.

To achieve that you have to compress, resize, and convert formats for your images.

In this article we will take a look for how to automate your images in eleventy static site generated website using eleventy-img, and sharp.

Create a basic project to start

create a new directory and name it 11ty-img-example or whatever you want, then run

yarn init -y

you can use npm if you prefer.

now install eleventy, and create index.njk on the root with basic html markup.

yarn add -D @11ty/eleventy
touch index.njk

<!-- index.njk -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>11ty img example</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>

open your package.json file and add dev and build scripts:

// package.json

"scripts": {
  "dev": "eleventy --serve",
  "build": "eleventy"
}

run the project on your browser

open your favorite terminal and run

yarn dev

now open localhost:8080 on your browser and it should work without any customized eleventy configuration.

Display some images

let’s try get some images and place them in images directory. and inside index.njk try to display theme.

ls images/

518k   0001.jpeg
2.6M   0002.jpeg
1.7M   0003.jpeg
368k   0004.jpeg
679k   0005.jpeg
556k   0006.jpeg
602k   0007.jpeg
1.6M   0008.jpeg
1.4M   0009.jpeg

<!-- index.njk -->
<body>
  <img src="/images/0001.jpeg" alt="image no 01" />
  <img src="/images/0002.jpeg" alt="image no 02" />
  <!-- ... -->
</body>

open your browser and it shouldn’t render any image. yeah that’s right 😀 because eleventy doesn’t handle assets like css, js, or images so we need to configure that by ourself.

create a .eleventy.js file on the root directory, then write:

module.exports = (cfg) => {
  cfg.addPassthroughCopy('images');
};

now everything inside images directory will be copied to the build directory.

Restart your server and go back to your browser and it should everything work.

Test images performance without optimization

Let’s see how images doing before any optimization.

Open network tab inside the devtool and set fast 3G as network simulation.

in my case it took 50s to render all images, and some of these images have size more than 2mb. so we need to find a way to make it faster.

Add eleventy-img plugin

it’s the time to use the eleventy-img, this plugin from eleventy team you can find the repo from here.

Install it in our project.

yarn add -D @11ty/eleventy-img

open .eleventy.js file and remove the line that we wrote before, then add the code below:

// .eleventy.js

const Image = require('@11ty/eleventy-img');

module.exports = (cfg) => {
  cfg.addNunjucksAsyncShortcode('Image', async (src, alt) => {
    if (!alt) {
      throw new Error(`Missing \`alt\` on myImage from: ${src}`);
    }

    let stats = await Image(src, {
      widths: [25, 320, 640, 960, 1200, 1800, 2400],
      formats: ['jpeg', 'webp'],
      urlPath: '/images/',
      outputDir: './_site/images/',
    });

    let lowestSrc = stats['jpeg'][0];

    const srcset = Object.keys(stats).reduce(
      (acc, format) => ({
        ...acc,
        [format]: stats[format].reduce(
          (_acc, curr) => `${_acc} ${curr.srcset} ,`,
          '',
        ),
      }),
      {},
    );

    const source = `<source type="image/webp" srcset="${srcset['webp']}" >`;

    const img = `<img
      loading="lazy"
      alt="${alt}"
      src="${lowestSrc.url}"
      sizes='(min-width: 1024px) 1024px, 100vw'
      srcset="${srcset['jpeg']}"
      width="${lowestSrc.width}"
      height="${lowestSrc.height}">`;

    return `<div class="image-wrapper"><picture> ${source} ${img} </picture></div>`;
  });
};

Let’s break down the code and understand how it works

• addNunjucksAsyncShortcode

eleventy has feature called shortcodes let you extend your template engine by writing custom functions.

in our case we will have a new shortcode we can use inside our templates by writing:

{% Image "/images/00.jpeg", "this is an alt description" %}

• stats = new Image(...)

we pass the src url, formats, and various widths to the image plugin.

So we well have multiple sizes, and formats for each image.

• const srcset = ...

the stats result look like that

stats = {
  jpeg: [
    {
      url: '...',
      src: '...',
      srcset: '...'
    }
  ],
  webp: [
    ...
  ]
}

We need to covert every size srcset to only one srcset string by using reduce function, So we can inject it in our code.

so the result of variable srcset

srcset = {
  jpeg: '<srcset>'
  webp: '<srcset>'
}

• const source = ... and const img = ...

Use webp format for source as main image type and jpeg as fallback fro img tag.

Now we are good to go by return the whole picture.

Test Images after using eleventy-img

open index.njk and replace all img tags with

<!-- index.njk -->

<!-- ... -->
{% Image "images/0001.jpeg", "image no 01" %} {% Image "images/0002.jpeg",
"image no 02" %} {% Image "images/0003.jpeg", "image no 03" %} {% Image
"images/0004.jpeg", "image no 04" %}
<!-- ... -->

PS: you have to write image paths include the full path from the root of the project to make it works.

Restart your server and go to the browser. and again open network tab.

and Boom 💥 in this time all images loaded on 5s and no image has size more than 120kb.

Add lazy-loading and the blurry effect

this is an extra step to avoid content shifting by using inline base64 image as placeholder for images and use javascript as fallback for browser that not supported yet the native lazyloading with vanilla-lazyload.

install sharp package to get the blurry inline base64 image

yarn add -D sharp

on .eleventy.js import sharp package and add this code below:

// .eleventy.js

const sharp = require('sharp');

// ...

const placeholder = await sharp(lowestSrc.outputPath)
  .resize({ fit: sharp.fit.inside })
  .blur()
  .toBuffer();

const base64Placeholder = `data:image/png;base64,${placeholder.toString(
  'base64',
)}`;

// ...

And then replace src, srcset, and resize, to data-src, data-srcset, and data-resize.

And also add src attribute in <img> tag to src="${base64Placeholder}".

The final code after changes:

const source = `<source type="image/webp" data-srcset="${srcset['webp']}" >`;

const img = `<img
  class="lazy"
  alt="${alt}"
  src="${base64Placeholder}"
  data-src="${lowestSrc.url}"
  data-sizes='(min-width: 1024px) 1024px, 100vw'
  data-srcset="${srcset['jpeg']}"
  width="${lowestSrc.width}"
  height="${lowestSrc.height}">`;

And as mentioned before in this article that eleventy only handles html template engines, So we will use script tag of type="module" to use vanilla-lazyload package.

on index.njk before the end of body tag </body> add this script.

<script type="module" async>
  import Lazyload from 'https://cdn.skypack.dev/vanilla-lazyload';
  const lazyload = new Lazyload();
</script>

Add this styles for img tags

<style>
  img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
</style>

Test images after lazyloading

Voilà 🎉, now we have a nice looking and fast images on your site.

Conclusion

Now You know how to integrate eleventy-img plugin and vanilla-lazyload package with your eleventy site if you need to learn more about image optimization, I recommend check this blog by the author of vanilla-lazyload.

You can find the complete example in this github repo

Postman one of the most popular API client tool, for send and view the response in the development environment. But since Postman is proprietary software and there is a free + open sourced alternative so I’ll go for something like insomnia, or postwoman.

But also I’ll go for CLI if exists and cURL is one of the easy to use and fully featured tool and in this article I’ll show you how to setup a well-documented api with cURL + vim + git.

How to execute CLI inside your vim editor?

vim is very powerful editor and you can execute an command line inside it. go to command mode and insert :! <command> and hit enter.

for example:

  :! ls

will execute the ls command line and show the content in pager.

Execute the content of the current file as CLI.

open an empty file inside your vim and write inside it echo Hello, World! and save it, and then write :!sh %.

The percent % is refer to the filename so if we run it with normal bang :! % it will not work because it’s trying run the file as executable file not the content inside.

so we pass sh before the % to run the content inside the file via shell.

Test our first cURL command

for demonstrating we will gonna use jsonplaceholder as our API to test

Now create a folder structure like below:

└── api
    └── todos
        ├── delete
        │   └── todo.zsh
        ├── get
        │   ├── todo-by-user.sh
        │   ├── todo.sh
        │   └── todos.sh
        ├── patch
        │   └── todo.sh
        ├── post
        │   └── todo.sh
        └── put
            └── todo.sh

.sh to get file highlighted.

let’s start with first and simple one api/posts/get/todos.sh.

write in the file and save.

curl -s -X GET \
    'https://jsonplaceholder.typicode.com/todos'

then as we done before run :!sh %

Make the result More Handy.

In most tools you will get a split view for the request itself and the result.

open you vim config file and add

command Exec set splitright | vnew | set filetype=sh | read !sh #

the command before will open the result in a new buffer in vertical view.

if you prefer horizontal view you can change the command to

command Exec set splitbelow | new | set filetype=sh | read !sh #

open again api/posts/get/todos.sh and in command mode write :Exec that will execute the command inside the file and open split view with the result.

now you have vim buffer you can easily search and do whatever you do. and to close the buffer you can use command :bd! or the keyboard shortcut shift + z + q.

Is cURL limited?

The answer is NO. let’s see couple of example

• POST Request:

curl -s -X POST \
    'https://jsonplaceholder.typicode.com/posts' \
    -H 'Content-Type: application/json' \
    -d '{ "title": "fooBatch", "completed": false, "userId": 1 }' \

you can make post, get, put, .. or any http request by using -X <REQUEST_TYPE> option.

To pass the body data use -d, --data {json format>} , and if the data is large you can write it in json file and pass it as -d @todo.json

• GET Request with query params:

curl -s -X GET -G \
    'https://jsonplaceholder.typicode.com/todos' \
    -d 'userId=1'

you can still use query params with -d but add an additional -G, --get to pass it as query params

since this is not a cURL tutorial that’s will be enough and you can learn more about advanced stuff like set header, cookie and more from the internet.

Using git?

Of course, on our created directory run git init and push for example to github.

see this example on github

Conclusion

You can now write a well-documented api and share it with your team via git all that done with simple and open-sourced tools and that’s not limited to cURL you can write your own scripts and run it inside vim, or pipe your cURL command for other tools to manipulate the output for example jq so you can filter your output.