Forem: Filipe Lima

My Development Environment

Filipe Lima — Mon, 27 Nov 2023 00:00:00 +0000

This is meant to be a brief blog post where I'm only going to show off some tools that I'm using daily to get work done. Most if not all of them are terminal centric. The last section is going to be about Neovim and the plugins I'm using there too.

Of course, any workflow is acceptable, doesn't matter if you use GUI tools for everything. Peace.

Git

My preference is to write my commits from Neovim, using a plugin. But I still do other operations like: merge, rebase, branch creation, checkout, etc, from the git cli.

My .gitconfig file contains all my alias for git cli, so even if I change my shell to something else, they would still work. Here are they:

[alias]
  d = diff
  st = status -sb
  sf = show --name-only
  cm = commit -m
  ca = commit --amend
  co = checkout
  ps = push
  psu = push -u
  psm = "!git push origin $(git rev-parse --abbrev-ref HEAD)"
  pl = pull
  plm = "!git pull origin $(git rev-parse --abbrev-ref HEAD)"
  br = branch
  ba = branch -a
  bm = branch --merged
  bn = branch --no-merged
  df = "!git hist | peco | awk '{print $2}' | xargs -I {} git diff {}^ {}"
  lg = log --graph --name-status --pretty=format:\"%C(red)%h %C(reset)(%cd) %C(green)%an %Creset%s %C(yellow)%d%Creset\" --date=relative
  find = "!f() { git log --pretty=format:\"%h %cd [%cn] %s%d\" --date=relative -S'pretty' -S\"$@\" | peco | awk '{print $1}' | xargs -I {} git diff {}^ {}; }; f"
  edit-unmerged = "!f() { git ls-files --unmerged | cut -f2 | sort -u ; }; vim `f`"
  add-unmerged = "!f() { git ls-files --unmerged | cut -f2 | sort -u ; }; git add `f`"
  # some helpers
  incoming = !(git fetch --quiet && git log --pretty=format:'%C(yellow)%h %C(white)- %C(red)%an %C(white)- %C(cyan)%d%Creset %s %C(white)- %ar%Creset' ..@{u})
  outgoing = !(git fetch --quiet && git log --pretty=format:'%C(yellow)%h %C(white)- %C(red)%an %C(white)- %C(cyan)%d%Creset %s %C(white)- %ar%Creset' @{u}..)
  unstage = reset HEAD --
  undo = checkout --
  rollback = reset --soft HEAD~1
  whoami = config user.name

Also, I'm trying to use more the github cli, gh.

Terminal

Currently, my terminal emulator is WezTerm, but I also recommend Alacritty, both are made with Rust. For shell I'm using zsh with ohmyzsh. I also use zsh-z plugin. And for prompt theme, spaceship is what I'm using.

I have a lot of terminal tools too, those enhance some commands that already exists or add different things that I like. Take a look at the list:

ghq - For managing git repository clones.
bat - Replacement for cat.
eza - Replacement for ls.
htop - An interactive process viewer.
curl - A tool for transferring data from or to a server using URLs.
fd - Replacement for find.
fzf - A command-line fuzzy finder. Allow us to make scripts like this: tmux-sessionizer (if I'm not mistaken, I took that script from @ThePrimeagen).
direnv - An extension for your shell. It augments existing shells with a new feature that can load and unload environment variables depending on the current directory. This is a powerful tool to use alongside nix-shell.
tmux - A terminal multiplexer. Even with a WM.

Desktop

I'm a Linux user and an Arch linux fan, but for my OS nowadays I'm using Nixos. If you want to know why I made the switch, this simple guide worths a read.

Other than my operating system, I'm using Hyprland - A highly customizable dynamic tiling Wayland compositor. It is the only one I've used with Wayland, but for xorg I can recommend i3WM (It is very simple to setup and start working) and BSPWM (for those that want a more configurable approach, ideal for ricing).

If you want to use a proper DE, I recommend Arch or Manjaro.

Neovim

My Neovim configuration is public (datsnvim), but I know some may not be there yet to read and understand these configurations. If it's your case, you should definitly go for Kickstart and use it for a while until you feel confident enough to write you own config or use something different, like LazyVim if you prefer.

Here is a list of plugins I use and recommend:

Dap - Debugger.
Gist - Easily create gists.
Diffview - As the name says, a diff view.
Harpoon - Hop between marked files faster.
Markdown Preview - A markdown previewer.
Mason - Install LSP's, linters, formatters, etc.
LSP Zero - Easy LSP setup.
Luasnip - Code snippets.
Neogit - Take git actions from Neovim.
Spectre - Project wide find and replace.
Trouble - Pretty display lists for diagnostics, quickfix, telescope results, etc.
Zenmode - Distraction-free coding (I use it most when I'm writing articles).

I've not included the most common ones like Treesitter or Cmp, because everybody already uses those. If you want to see the other plugins either way, take a look at my repository and search for them.

Final Considerations

Thanks for taking a look at a blog about my development environment, I hope you enjoyed it and also that you found something useful for you. This was supposed to be a short blog and at least my expectations were met. Feel free to give feedback on the blog content, linked resources, or language (I'm learning).

Why aren't you using Astro?

Filipe Lima — Thu, 17 Aug 2023 00:00:00 +0000

First of all, if you don't know Astro yet, take a look at their website and repository, they're doing a great job. Of course I'm going to tell you what it is here anyways.

What is Astro?

Astro is a performant web framework for building content-focused websites. It is a server-first solution, which means that it generates static HTML at build time. Besides having a lot of features, Astro tries to keep being simple and flexible.

Use cases

You might want to use Astro for building blogs, documentation sites, portfolios, and more. It is a great solution for content-focused websites, but it can also be used for other types of websites.

Why Astro?

So, let's say you want to build your own portfolio, why should you use Astro instead of other solutions? here are some valid points:

Astro was made with focus on performance.
Astro integrations let you extend the framework with a lot of features.
Astro is flexible and simple, most of the time you will be writing HTML, CSS and JavaScript.

Let's dive in a little bit more on each of these points.

Performance

Astro being a server-first solution means it will ship by default less JavaScript to the client, which is great for performance.

Since v0.21 Astro is built with Vite, which has a lot of performance improvements for your development experience and build optimization.

Integrations

Astro have a variety of integrations that you can use to extend the framework with features. For example, you can use the Tailwind integration to have it working on your website easily.

You can also add Vite/Rollup plugins to your Astro project!

To add integrations, take a look at their integrations guide.

Flexibility and simplicity

Astro syntax is very similar to HTML, CSS and JavaScript, take a look at this example:

---
import { Foo } from './components/Foo.astro'
import { Bar } from './components/Bar' // React component
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Astro Site</title>
  </head>
  <body>
    <foo/>
    <bar client:load></bar> <!-- it needs client:load specification to run on client side -->
  </body>
  <script>
    console.log('Hello from Astro!')
  </script>
</html>

As you can see, it is very straightforward, the first part is executed on the server, so you can import modules and do other stuff.

Also, the bottom part is almost just html, so you can have have tags like script. Which means you can have interactivity on your website without using any UI framework.

And just like that you just have created a page, easy right?

Components

You can have .astro components that follows the same syntax as the pages. To use a component inside another component you can make use of the <slot></slot> tag (for React folks, it's like children). Let's see an example:

---
import { Foo } from './components/Foo.astro'
---
<foo>
  <h1>Hello from Astro!</h1>
</foo>

And in your Foo.astro component:

<slot></slot>

Obs: you can omit the top part if you don't need to have anything being executed from the server.

Other Important Points

Astro have some other amazing features that you might love, like:

Besides being SSG by default, you can also have SSR or SSG + SSR at the same time in your project, look at their documentation.
It has API endpoints, so you can fetch data from your backend or third-party APIs, just like you would do with Next.js. It also support creating middlewares.
It has Markdown support, so you can write your content in Markdown and Astro will convert it to HTML. Yes, you can have Markdown and Mdx pages.
Their content collections feature allows you to deliver content from a folder in your project, so you can easily have a blog with Astro. It is an awesome approach that integrates well with the ecosystem.

Conclusion

I've created this article with the intetion to present a great solution for creating websites. Hopefully I've made you interested in Astro and you will give it a try.

I hope you liked this, have a great day!