DEV Community: Mahmoud Ashraf

Uninstall all neovim plugins

Mahmoud Ashraf — Sat, 28 Jan 2023 00:18:20 +0000

Uninstall all neovim plugins

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.

Does any one use *BSD as daily driver?

Mahmoud Ashraf — Tue, 09 Mar 2021 22:53:00 +0000

I am asking if anyone using *bsd as daily driver for development. I wanna to go with openbsd but I'll miss docker stuff. so any thoughts?

Advent of Code 2020: Day 02

Mahmoud Ashraf — Fri, 04 Dec 2020 21:53:25 +0000

Originally Published on my blog

Day 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('\n')
    .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(\n) 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.

Advent of Code 2020: Day 01

Mahmoud Ashraf — Fri, 04 Dec 2020 21:48:10 +0000

Originally Published on my blog

Day 01

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];
}

YAES - Yet another eleventy starter.

Mahmoud Ashraf — Tue, 22 Sep 2020 23:49:13 +0000

A Starter kit for your next eleventy(11ty) project using postcss, es6, snowpack, webpack.

mashrafdev / YAES

Starter kit for your next eleventy(11ty) project using postcss, es6, snowpack, webpack.

YAES - Yet another eleventy starter.

Tech Stack 🥞

Eleventy (11ty)
Postcss
Snowpack
Webpack
Babel

Features

Fast development using snowpack.
Bundle & minify the output using webpack.
Native lazy loading.
A custom shortcode for image {% Image src="./bg.jpeg", alt="background" %}.
- Generate multiple sizes for each image.
- Generate blurry placeholder.
- Transcode images to webp and generate picture element.
- Native Lazy loading.
- Download remote images.
- Minify all images using imagemin.
Modern css using Postcss.
- Inline the critical css and lazy load the rest of css.
- Remove unwanted css using purgecss.
- Minify the output using cssnano.

View on GitHub

How to optimize images on eleventy (11ty)

Mahmoud Ashraf — Tue, 01 Sep 2020 02:30:19 +0000

Originally Published on my blog

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.jpg
2.6M   0002.jpg
1.7M   0003.jpg
368k   0004.jpg
679k   0005.jpg
556k   0006.jpg
602k   0007.jpg
1.6M   0008.jpg
1.4M   0009.jpg

<!-- index.njk -->
<body>
  <img src="/images/0001.jpg" alt="image no 01" />
  <img src="/images/0002.jpg" 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.jpg", "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 jpg 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.jpg", "image no 01" %}
{% Image "images/0002.jpg", "image no 02" %}
{% Image "images/0003.jpg", "image no 03" %}
{% Image "images/0004.jpg", "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 github

mashrafdev / eleventy-image-example

this is a complete example for my blog post

Faven - A web tool to help you generate favicons

Mahmoud Ashraf — Mon, 24 Aug 2020 15:01:13 +0000

mashrafdev / faven

A web tool to help you generate favicons

Faven

A web tool to help you generate favicons

Key Features

browser based no data sent to the server.
You can select or drag your image.
works offline.
generate all favicons dimensions.

Tech stack 🥞

View on GitHub

Hey Guys,

I've created a tool to help you generate favicons in the
browser without your data sent to a server.

web app: faven.netlify.app

I build this tool to discover new tech

alpinejs a minimal frontend library to help you manipulate the dom. I find it very helpful on small apps, and landing pages.
comping alpinejs with tailwindcss make my prototyping, and development faster.
use snowpack for fast development and use web modules on production without bundle since my project is small.

My terminal became more Rusty 🦀

Mahmoud Ashraf — Fri, 21 Aug 2020 22:13:16 +0000

Originally Published on my blog

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
these 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 command.

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

cd ~/projects/mahmoudashraf.dev

instead I will write

z ~/projects/mahmoudashraf.dev

just in 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"

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 jpg:

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

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.

No More postman just use cURL + vim =

Mahmoud Ashraf — Thu, 20 Aug 2020 15:52:23 +0000

Originally Published on my blog

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 a 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

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 friends via git
all that done with simple and open-sourced tools and that's not limited to cURL
you can write you own scripts and run it inside vim, or pipe cURL command for anther
tools to manipulate the output for example jq so you can filter your output.

Do you still use template engine?

Mahmoud Ashraf — Sat, 15 Aug 2020 00:23:26 +0000

Hey guys, my blog is written in svelte/sapper and I decided to go with a node server with template engine since i do nothing fancy on my website. but I noticed most of template engines not update and also the tooling not maintainable.

Do you still have projects with no frontend framework and how you maintain the workflow (bundling, tooling)?

My website repo

Building a blog with Svelte, Sapper, and Markdown.

Mahmoud Ashraf — Mon, 02 Mar 2020 15:02:01 +0000

Originally Published on my blog

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-post.md

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

# Sample title

this is a sample blog post.

``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.

DEV Community: Mahmoud Ashraf

Uninstall all neovim plugins

Uninstall all neovim plugins

Why vim/neovim and not vscode/intellij?

So, Why neovim not vim?

immature plugin ecosystem

How to escape, and use neovim on unix way

Examples time

- search/browse files:

- code completion

- statusline/winbar

- Git

- Neovim goodies (lsp/treesitter)

- Theming

conclusion

Does any one use *BSD as daily driver?

Advent of Code 2020: Day 02

Day 02

part 01 ⭐

part 02 ⭐

Advent of Code 2020: Day 01

Day 01

part 01 ⭐

part 02 ⭐

YAES - Yet another eleventy starter.

mashrafdev / YAES

Starter kit for your next eleventy(11ty) project using postcss, es6, snowpack, webpack.

YAES - Yet another eleventy starter.

Tech Stack 🥞

Features

How to optimize images on eleventy (11ty)

Create a basic project to start

run the project on your browser

Display some images

Test images performance without optimization

Add eleventy-img plugin

Test Images after using eleventy-img

Add lazy-loading and the blurry effect

Test images after lazyloading

Conclusion

mashrafdev / eleventy-image-example

this is a complete example for my blog post

Faven - A web tool to help you generate favicons

mashrafdev / faven

A web tool to help you generate favicons

Faven

A web tool to help you generate favicons

Key Features

Tech stack 🥞

My terminal became more Rusty 🦀

tl;dr

Alacritty

Starship

Exa

Bat

Delta

Zoxide

Ripgrep

Fd

bottom

Tldr

More Tools?

No More postman just use cURL + vim =

How to execute CLI inside your vim editor?

Execute the content of the current file as CLI.

Test our first cURL command

Make the result More Handy.

Is cURL limited?

Using git?

Conclusion

Do you still use template engine?

Building a blog with Svelte, Sapper, and Markdown.

What is Svelte?

What is Sapper?

How to init the project?

How routing works in sapper?

Pages

Server

conclusion

Add `eleventy-img` plugin

Test Images after using `eleventy-img`