1344 lines
118 KiB
XML
1344 lines
118 KiB
XML
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="/rss/styles.xsl" type="text/xsl"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>nexxel's blog</title><description>Writings on programming and technology.</description><link>https://www.nexxel.dev/</link><item><title>Ricing MacOS</title><link>https://www.nexxel.dev/blog/ricing-macos/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/ricing-macos/</guid><description>My MacOS Rice.</description><pubDate>Wed, 01 Nov 2023 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<p>Recently a screenshot of my MacOS rice blew up on X (formerly Twitter), eventually becoming <a href="https://x.com/nexxeln/status/1715433387337642135/">my most liked post</a> of all time.</p>
|
|
<p></p>
|
|
<p>I've been asked a lot about my setup, so I decided to write a blog post about it.</p>
|
|
<h2>Window Manager</h2>
|
|
<p>There's only one decent tiling window manager for MacOS, and that's <a href="https://github.com/koekeishiya/yabai/">yabai</a>. It allows you to control your windows and spaces by using a CLI, for which you can set hotkeys using <a href="https://github.com/koekeishiya/skhd">skhd</a>. yabai is a tiling window manager, which means it automatically arranges and resizes your open application windows in a non-overlapping manner. It allows you to move and manipulate windows in various ways, including moving windows to different spaces and changing the layout of spaces along with a whole lot of other features.</p>
|
|
<p>It's probably not as good as some of the amazing window managers available for Linux such as <a href="https://madnight.github.io/bspwm">bspwm</a> or <a href="https://hyprland.org/">hyprland</a> but it works and I haven't had any problems with it so far.</p>
|
|
<p>To install yabai, go through the <a href="https://github.com/koekeishiya/yabai/wiki">yabai wiki</a>.</p>
|
|
<p>Here's my yabai config:</p>
|
|
<pre><code># ~/.config/yabai/yabairc
|
|
|
|
# bsp, stack or float
|
|
yabai -m config layout bsp
|
|
|
|
yabai -m config window_placement second_child
|
|
|
|
# padding
|
|
yabai -m config window_gap 12
|
|
yabai -m config top_padding 4
|
|
yabai -m config bottom_padding 4
|
|
yabai -m config right_padding 4
|
|
yabai -m config left_padding 4
|
|
|
|
# mouse settings
|
|
yabai -m config mouse_follows_focus on
|
|
yabai -m config mouse_modifier alt
|
|
# left click and drag
|
|
yabai -m config mouse_action1 move
|
|
# right click and drag
|
|
yabai -m config mouse_action2 resize
|
|
yabai -m config mouse_drop_action swap
|
|
|
|
# disable yabai for these apps
|
|
yabai -m rule --add app="^Discord$" manage=off
|
|
</code></pre>
|
|
<h1>Hotkey Daemon</h1>
|
|
<p>yabai is usally paired with <a href="https://github.com/koekeishiya/skhd">skhd</a> which is an excellent hotkey daemon for MacOS. It utilizes a very simple DSL to define hotkeys. Using skhd, you can setup hotkeys for quickly executing yabai commands.</p>
|
|
<p>To install skhd follow <a href="https://github.com/koekeishiya/skhd#install">this guide</a>.</p>
|
|
<p>Here's my skhd config:</p>
|
|
<pre><code># ~/.config/skhd/skhdrc
|
|
|
|
# start and stop
|
|
ctrl + alt - q: yabai --stop-service
|
|
ctrl + alt - s: yabai --start-service
|
|
|
|
# changing window focus
|
|
alt - s: yabai -m window --focus south
|
|
alt - w: yabai -m window --focus north
|
|
alt - a: yabai -m window --focus west
|
|
alt - d: yabai -m window --focus east
|
|
|
|
# rotate layout clockwise
|
|
shift + alt - c: yabai -m space --rotate 270
|
|
|
|
# rotate layout anti-clockwise
|
|
shift + alt - a: yabai -m space --rotate 270
|
|
|
|
# flip alone x-axis
|
|
shift + alt - x: yabai -m space -- mirror x-axis
|
|
|
|
# flip along y-axis
|
|
shift + alt - y: yabai -m space --mirror y-axis
|
|
|
|
# toggle window float
|
|
shift + alt - t: yabai -m window --toggle float --grid 4:4:1:1:2:2
|
|
|
|
# maximize a window
|
|
shift + alt - m: yabai -m window --toggle zoom-fullscreen
|
|
|
|
# reset window size
|
|
shift + alt - e: yabai -m space --balance
|
|
|
|
# swap windows
|
|
shift + alt - h: yabai -m window --swap west
|
|
shift + alt - j: yabai -m window --swap south
|
|
shift + alt - k: yabai -m window --swap north
|
|
shift + alt - l: yabai -m window --swap east
|
|
|
|
# move window and split
|
|
ctrl + alt - h: yabai -m window --warp west
|
|
ctrl + alt - j: yabai -m window --warp south
|
|
ctrl + alt - k: yabai -m window --warp north
|
|
ctrl + alt - l: yabai -m window --warp east
|
|
</code></pre>
|
|
<p>I typically use vim keybindings for most things, but here I make one execption when it comes to changing window focus. I find it more convenient to use the <code>wasd</code> keys for this purpose because they're closer to the left <code>option</code> key.</p>
|
|
<h1>Terminal Emulator</h1>
|
|
<p>I use <a href="https://alacritty.org">Alacritty</a> as my terminal. It's super fast and customizable. I have written about it in my previous blog posts as well. Since then my configuration has udpated and now I have a pretty minimal yet aesthetic config.</p>
|
|
<pre><code># ~/.config/alacritty/alacritty.yml
|
|
|
|
env:
|
|
TERM: xterm-256color
|
|
|
|
font:
|
|
size: 14
|
|
normal:
|
|
family: "Dank Mono"
|
|
style: Regular
|
|
bold:
|
|
style: Bold
|
|
italic:
|
|
style: Italic
|
|
bold_italic:
|
|
style: Bold Italic
|
|
|
|
window:
|
|
option_as_alt: Both
|
|
# Window padding (changes require restart)
|
|
#
|
|
# Blank space added around the window in pixels. This padding is not scaled by
|
|
# DPI and the specified value is always added at both opposing sides.
|
|
padding:
|
|
x: 12
|
|
y: 12
|
|
|
|
# Spread additional padding evenly around the terminal content.
|
|
dynamic_padding: false
|
|
|
|
# Window decorations
|
|
decorations: buttonless
|
|
#
|
|
# Startup Mode (changes require restart)
|
|
#
|
|
# Values for `startup_mode`:
|
|
# - Windowed
|
|
# - Maximized
|
|
# - Fullscreen
|
|
#
|
|
# Values for `startup_mode` (macOS only):
|
|
# - SimpleFullscreen
|
|
startup_mode: Windowed
|
|
|
|
# Background opacity
|
|
opacity: 1
|
|
|
|
# Colors (Mellow)
|
|
colors:
|
|
# Default colors
|
|
primary:
|
|
background: "#161617"
|
|
foreground: "#c9c7cd"
|
|
|
|
# Cursor colors
|
|
cursor:
|
|
text: "#c9c7cd"
|
|
cursor: "#757581"
|
|
|
|
# Normal colors
|
|
normal:
|
|
black: "#27272a"
|
|
red: "#f5a191"
|
|
green: "#90b99f"
|
|
yellow: "#e6b99d"
|
|
blue: "#aca1cf"
|
|
magenta: "#e29eca"
|
|
cyan: "#ea83a5"
|
|
white: "#c1c0d4"
|
|
|
|
# Bright colors
|
|
bright:
|
|
black: "#353539"
|
|
red: "#ffae9f"
|
|
green: "#9dc6ac"
|
|
yellow: "#f0c5a9"
|
|
blue: "#b9aeda"
|
|
magenta: "#ecaad6"
|
|
cyan: "#f591b2"
|
|
white: "#cac9dd"
|
|
</code></pre>
|
|
<h1>Editor</h1>
|
|
<p>Dont't worry, I still primarily use VSCode for anything serious, but I did create a new Neovim configuration from scratch which I don't plan on updating frequently. I kept it quite minimal and used very few plugins. Here's Neovim and VSCode side by side.</p>
|
|
<p></p>
|
|
<ul>
|
|
<li><a href="https://github.com/nexxeln/dots/tree/main/Library/Application%20Support/Code%20-%20Insiders/User">VSCode config</a></li>
|
|
<li><a href="https://github.com/nexxeln/dots/tree/main/.config/nvim">Neovim config</a></li>
|
|
</ul>
|
|
<h2>Conclusion</h2>
|
|
<p>This isn't a blog post I necessarily wanted to write but I kind of had to because the X post blew up. Hopefully it serves you as a good reference for configuring your Mac.</p>
|
|
<ul>
|
|
<li><a href="https://github.com/nexxeln/dots">Dotfiles</a></li>
|
|
<li><a href="https://x.com/nexxeln/status/1715433387337642135/">X Post</a></li>
|
|
</ul>
|
|
</content:encoded></item><item><title>How I Organise My Life</title><link>https://www.nexxel.dev/blog/organising-life/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/organising-life/</guid><description>In this post, I share the apps and the simplistic approach I use to organise my life.</description><pubDate>Thu, 03 Aug 2023 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<p>Over the last few months, I've set out to really get my life sorted and organised so I can manage my time and thoughts better. I have explored numerous apps, and "productivity setups", searching for that seamless integration that could bring a sense of order to my chaotic mind and life. But nothing quite hit the mark until recently.</p>
|
|
<p>This is not going to be one of complex setups that you often see productivity influencers making videos and courses about. I actually rejected Obsidian once because I found it really overwhelming after watching a YouTube video setting it up so extensively, reminiscent to configuring <a href="https://www.gnu.org/software/emacs/">Emacs</a>. In my opinion, people watch these second brain and personal knowledge management setup videos and think it's the holy grail of productivity. They fall into the trap of constantly looking for the perfect app and the perfect setup, always trying to optimise their workflow when they're actually just wasting their time without actually focusing on what's important: getting stuff done.</p>
|
|
<p>My setup embraces simplicity. Here's what I wanted from my workflow.</p>
|
|
<ul>
|
|
<li>Note taking app: Has to have <a href="https://help.obsidian.md/Plugins/Backlinks">backlinks</a> and a simple way to organise notes by topics. Should sync across all devices</li>
|
|
<li>Calendar app: Creating and editing events should be fast. Also needs to have good NLP for dates and sync with my phone's calendar widget.</li>
|
|
<li>Tasks app: Should be easy to quickly add tasks. Has to have good NLP (Natural Language Processing) for dates Also should sync across all devices</li>
|
|
</ul>
|
|
<p>So here are my apps of choice and how I use them.</p>
|
|
<h2>Note Taking App: Obsidian</h2>
|
|
<p><a href="https://obsidian.md">Obsidian</a> is my choice of app for note taking. As I mentioned in the intro, I had used it previously in a very complex and overwhelming setup for a week which just didn't feel right. Almost all videos of Obsidian on YouTube were like that. So I had rejected the app back then.</p>
|
|
<p>Fast forward a few months and I saw Obsidian gaining popularity again on Twitter and Discord, so I decided to give it another try, only this time, I read the docs instead of videos. I soon realised the simplicity of Obsidian. It's just notes in Markdown, stored in a folder, called "Vault" in Obsidian. You can link to other notes using standard Markdown syntax and also group notes by topic using sub-folders or tags.</p>
|
|
<h3>Why I Like Obsidian</h3>
|
|
<p>Obsidian has an elegant user interface with an one of the best if not <strong>the</strong> best Markdown editors out there which make the note-taking experience smooth and natural. My favourite part is that it supports vim keybindings in the editor! It also features a nice command palette in which all the commands can be triggered by hotkeys as well. With thousands of plugins available, it gives you tools to do pretty much anything.</p>
|
|
<p>But where Obsidian really won me over is privacy. Notes are saved in a local folder and never go to a database. It also doesn't store notes in a weird Obsidian specific format, it's just standard Markdown! It allows you to own and control your data.</p>
|
|
<h3>How I Take Notes</h3>
|
|
<p>All notes live in the root of my Obsidian vault. I don't use sub-directories. Whenever I need to make a new note, I just create the file in the root. To group notes by particular topics, I use tags. For example, recently I had a very cool idea to sell canned carbonated sugarcane juice, which I'm not sure will taste good by the way. So I created a note for it and put the appropriate tags for it in the frontmatter.</p>
|
|
<p></p>
|
|
<p>It's a topic which is interesting to me and also a cool idea that I might revisit and explore in the future.</p>
|
|
<p>I also really like links in Obsidian. A few days ago, I had been diving deep into purple coloured stones because they look really cool. So I created a note titled "Purple Stones" to keep track of my research. In the "Purple Stones" note, I made a list of all the purple stones that caught my eye with a short description of each of them. But instead of cramming detailed information for each of the stones, I created a separate note dedicated to each stone with all the information I got from my research.</p>
|
|
<p>So now, when I click on any stone's name in the "Purple Stones" note, it takes me to its dedicated note where I can immerse myself in all the information about that particular stone.</p>
|
|
<p>I was also on the hunt for cool desk decorations and created a note for it. As I was researching common desk decorations I came across the idea of using beautiful rocks as decorations. So I instantly linked my note on amethyst because raw amethyst looks stunning. Obsidian also has a really cool backlinks feature, whenever I visit my amethyst note, I can also see a list of all the other notes where amethyst was mentioned. It's like having a web of interconnected knowledge!</p>
|
|
<p>Links have become a huge part of my Obsidian workflow. Each note leads to even more pathways of things I've researched, ideas I've had, or cool things I've discovered. It's as if my notes have formed a collection of interconnected nodes, guiding me through my exploration of different topics and keeping everything neatly organised.</p>
|
|
<h3>What I Take Notes Of</h3>
|
|
<p>I take notes of pretty much everything.</p>
|
|
<ul>
|
|
<li>Any idea that comes to mind</li>
|
|
<li>Anything interesting I come across</li>
|
|
<li>Videos or blog posts that make me think, I break down the key points</li>
|
|
<li>Cool thoughts and random musings</li>
|
|
<li>Research on various topics</li>
|
|
<li>Planning blog posts and events</li>
|
|
</ul>
|
|
<p>Also Obsidian is simply the best Markdown editor I have ever used so I just use it for writing anything.</p>
|
|
<h3>How I Navigate Notes</h3>
|
|
<p>As I had written in the previous section, links really help in exploring and guiding you through your notes. It's like having interconnected nodes of knowledge I had said. Well Obsidian has this really feature called "Graph View" which lets you visualise your entire vault. Each note becomes a node and these nodes are connected to each other using the links you create.</p>
|
|
<p></p>
|
|
<p>In the Graph View you can easily search for everything, including notes, tags, and also visualise how your notes are linked.</p>
|
|
<p></p>
|
|
<p>I have heard some people saying that the Graph View is not useful, but I find it to be a natural and intuitive way to navigate my notes. It's much better than the regular search experience for me.</p>
|
|
<p>To make note navigation even faster and more efficient, I use a plugin called <a href="https://github.com/scambier/obsidian-omnisearch">Omnisearch</a>. It enhances the search functionality in Obsidian with OCR and a smart weighting algorithm. Plus, it supports vim keybindings, which I love. It reminds me of the <a href="https://github.com/nvim-telescope/telescope.nvim">Telescope</a> plugin in Neovim.</p>
|
|
<h3>Syncing Notes</h3>
|
|
<p>Syncing notes across in Obsidian can be done in different ways. While Obsidian offers a paid <a href="https://obsidian.md/sync">Sync</a> service for seamless synchronisation across devices, I personally use a different approach since I cannot afford it at the moment.</p>
|
|
<p>Since Obsidian stores notes as local files in a folder, you can easily sync them using cloud storage services like <a href="https://google.com/drive">Google Drive</a> or <a href="https://dropbox.com">Dropbox</a>. Another option is using <a href="https://syncthing.net/">Syncthing</a> which is what I use. It's an open-source, encrypted file synchronisation program. I find Syncthing convenient because it allows me to sync my files locally between my Mac and Android phone without sending data over the internet. It's a simple and secure solution for keeping my notes in sync across devices. I really like it.</p>
|
|
<h3>Publishing Notes</h3>
|
|
<p>When I used to use <a href="https://notion.so">Notion</a>, I loved the publish feature that allowed me to share notes easily with a link. Obsidian also offers a similar feature through its paid <a href="https://obsidian.md/publish">Publish</a> service, but it's not within my budget. So, I decided to create my own Obsidian publish solution using <a href="https://rust-lang.org">Rust</a>. It's a command-line tool that scans my Obsidian vault for notes with <code>publish: true</code> in the metadata (similar to the official Publish plugin). It then converts the Markdown notes to HTML and deploys them to the internet. While I'm still refining the static site generator, my plan is to open-source it once it's ready for broader use. This way, others can benefit from it as well.</p>
|
|
<h3>Plugins</h3>
|
|
<p>I use just three plugins:</p>
|
|
<ul>
|
|
<li>Minimal Theme Settings, which is the plugin to configure the <a href="https://minimal.guide">Minimal Theme</a> for a clean and minimalistic UI.</li>
|
|
<li><a href="https://github.com/scambier/obsidian-omnisearch">OmniSearch</a>, which is a better and quicker search.</li>
|
|
<li><a href="https://github.com/adriandersen/obsidian-fuzzytag">FuzzyTag</a>, which provides autocomplete for tags while writing them in the frontmatter.</li>
|
|
</ul>
|
|
<p>Hopefully this shows that you don't need ten different plugins to make Obsidian functional. It's already enough for whatever you want to do.</p>
|
|
<h2>Tasks App: Todoist</h2>
|
|
<p>When it comes to managing tasks, I prefer to keep my notes and tasks separate. While some people might use Obsidian for todo-lists, I find it more comfortable to use a dedicated task app.</p>
|
|
<p>My go-to task app is <a href="https://todoist.com/">Todoist</a>. <a href="https://frantic.im/todo-for-robots/">Despite todo apps being broken</a>, Todoist <em>works fine</em>. It has a nice UI which allows for adding tasks quickly, even when on the go, thanks to its convenient widget. It has excellent natural language processing, it understands dates and times in whatever broken english I use.</p>
|
|
<p></p>
|
|
<p>I particularly enjoy the satisfying sound it plays when I complete a task. Todoist's sub-tasks feature is incredibly useful for breaking down complex tasks into smaller, more manageable steps, which also happens to be perfect for shopping lists and check lists.</p>
|
|
<p>I also use Todoist as a reminders app. A few days ago, I needed to wish a friend a safe journey for their upcoming long-distance travel, so I added a reminder in Todoist a week in advance, ensuring that I won't forget to send my well-wishes on the day.</p>
|
|
<h2>Calendar App: Cron</h2>
|
|
<p><a href="https://cron.com">Cron</a> is my preferred Calendar app. It syncs with <a href="https://calendar.google.com/calendar/u/0/r">Google Calendar</a> and features a clean and intuitive UI to for quickly creating and organising events. It offers all the features you'd expect from a standard calendar app but with the added benefits of being keyboard-friendly, visually appealing, and it feels <em>fast</em>.</p>
|
|
<p>While Cron doesn't have an official Android app yet, I find that the Google Calendar app works fine. I really like the widget it provides and use it to stay updated with my schedule at a glance.</p>
|
|
<p></p>
|
|
<h2>Conclusion</h2>
|
|
<p>Embracing simplicity has been a great approach in organising my life so far. Let me know if you integrated something from this post in your workflow on X (ex Twitter) and if you enjoyed reading it.</p>
|
|
<p>Thank you!</p>
|
|
</content:encoded></item><item><title>Why I Switched From Neovim To VSCode</title><link>https://www.nexxel.dev/blog/neovim-to-vscode/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/neovim-to-vscode/</guid><description>A few weeks ago I made the switch from Neovim to VScode as my primary code editor. Here's why.</description><pubDate>Fri, 23 Jun 2023 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<p>I recently switched back to VSCode from Neovim as my primary code editor. You may think this is weird because everyone seems to be going the other way around. Why would anyone want to move away from the most loved code editor? In this post, I'll explain why I made the switch and my experience so far.</p>
|
|
<h2>Why I used Neovim in the past</h2>
|
|
<p>When I first started to code, I used to use VSCode because that's what I saw most people use. But I noticed that on my old laptop, VSCode was too slow and laggy and pretty much unusable while running a side process like a Node server. My laptop used to get so hot that I couldn't even touch it! I was spending more time waiting for intellisense than actually writing code.</p>
|
|
<p>I had heard of Neovim as it was the most loved editor on the Stack Overflow survey and also from YouTubers like <a href="https://www.youtube.com/@ThePrimeagen">ThePrimeagen</a> and <a href="https://www.youtube.com/@teej_dv">TJ DeVries</a>. It seemed like a really fun community and the overall vibe was very positive. So I tried it out. I learnt vim keybindings, lua to configure Neovim, created my own config, and started using it as my primary editor.</p>
|
|
<p>I loved it, it ran on the terminal, no Electron apps, no lag, no waiting for autocomplete. Everything was as smooth as butter and I felt <em>fast</em>. Learning vim keybindings was one of the best decisions of my life. I know people like to meme about how vim enthusiasts are always trying to convince people to learn vim keybindings but I truly believe that learning it will not only make you faster but also rekindle your love for programming, it did for me.</p>
|
|
<p>Neovim had a great plugin ecosystem, almost all the things that I used in VSCode were available in Neovim. It also made me realize that some things aren't necessary at all. For example, I used the file explorer extensively in VSCode but I didn't even install the plugin for it on Neovim. I started to understand the value of minimalism and how simplifying your setup can make you more productive.</p>
|
|
<p>Configuring Neovim was also a lot of fun. It gives you full control over your editor and how it looks and behaves. It allowed to optimise my editor for <em>me</em>, tailored to my specific needs. There's also something really satsifying about using an editor you configured yourself.</p>
|
|
<p>All of this made me fall in love with Neovim and I can confidently say that it is my favourite editor of all the ones I've used.</p>
|
|
<h2>Why I Switched Back to VSCode</h2>
|
|
<p>Here are the reasons why I switched back to VSCode in no particular order.</p>
|
|
<h3>Copilot</h3>
|
|
<p><a href="https://github.com/features/copilot">Copilot</a> is an indispensable part of my workflow now. I can't imagine writing code without it. They have a Neovim plugin but my experience with it was not great. It was slow, and most of the time it didn't even work. The LSP used to keep crashing and I had to restart it every few minutes. Maybe this is just a problem with my setup but I couldn't find a solution to it.</p>
|
|
<p>On the other hand, Copilot was built for VSCode. It works flawlessly and I haven't had any issues with it. There's also the new <a href="https://github.com/features/preview/copilot-x">GitHub Copilot X</a> stuff, currently invite-only (I got an invite to test Copilot Chat) which only supports VSCode for now.</p>
|
|
<h3>Tiring Neovim Plugin Ecosystem</h3>
|
|
<p>Didn't I just say that Neovim has a great plugin ecosystem? Yes, it does. But it's also tiring to keep up with it. Running <code>:PackerSync</code> was scary because you never know what plugin introduced a breaking change that you didn't notice and suddenly you can't code as your whole config breaks down.</p>
|
|
<p></p>
|
|
<p>Oh and now there's this new plugin manager that everyone is using called <a href="https://github.com/folke/lazy.nvim">lazy.nvim</a> which is probably awesome but now I need to spend time migrating and getting used to it. It's kind of like the JavaScript ecosystem, there's always something new and shiny and you feel like you're missing out if you don't use it. It's tiring to keep up with it.</p>
|
|
<p>At first, I was keeping up with the new plugins, trying them out, and making sure my config was up to date, but soon I was tired of it. I just wanted to code.</p>
|
|
<p>VSCode's plugin ecosystem is great, installing extensions is a breeze and I don't have to worry about anything breaking. I can just focus on coding.</p>
|
|
<h3>Configuration</h3>
|
|
<p>As I mentioned earlier, configuring Neovim was fun but it was also tiring and time-consuming. As much as I loved tinkering my config everyday, I realized it was a distraction. I was spending more time configuring my editor than actually coding.</p>
|
|
<p>I did love that I had full control over my editor though, and I think VSCode is quite configurable as well, probably not as much as Neovim but it's enough for me. I'm still using vim keybindings. I have a nice theme. I choose what I want in the UI, where I want it, and how it looks. I have a few custom keybindings and snippets here and there, but overall it's pretty minimal.</p>
|
|
<p></p>
|
|
<h3>I Got a New Laptop</h3>
|
|
<p>I recently got a new laptop, a M1 MacBook Air, and it's a beast. So running VSCode is not a problem anymore. Everything feels very smooth. Apple silicon is amazing and I'm glad I switched to it.</p>
|
|
<p>It's only gotten hot once when running some <a href="https://code.visualstudio.com/docs/devcontainers/containers">Docker Dev Containers</a> along with Spotify, and my browser, which is understandable. But other than that, it's been great.</p>
|
|
<h3>VSCode Only Tools</h3>
|
|
<p>Some exceptional libraries and frameworks only support VSCode, which you could argue is a bad thing, but it makes sense, VSCode is the most popular code editor after all. For example <a href="https://unocss.dev">UnoCSS</a> only has a VSCode extension, and it's my favourite way to write CSS. <a href="https://astro.build">Astro</a> has a LSP but I've found that the experience in VSCode is much better than in Neovim.</p>
|
|
<p></p>
|
|
<p>I've also noticed that the TypeScript LSP is a bit faster in VSCode as well.</p>
|
|
<h2>Why Not Use a Neovim Distro?</h2>
|
|
<p>I don't like Neovim distributions. I've tried many, and none of them had the same feel as a vanilla Neovim setup. Most of them are bloated, hard to extend, and have a lot of things I don't need. I don't want to spend time configuring a pre-configured editor. I'd rather just configure it myself.</p>
|
|
<h2>Conclusion</h2>
|
|
<p>This doesn't mean that I'm never going to use Neovim again. It's still my favourite editor and I'll be using it for minor editing tasks, tinkering stuff here and there on the terminal, taking notes, etc. But for my main editor, I'm going to be using VSCode for now.</p>
|
|
<p>Let me know if you enjoyed this post, and thank you for reading!</p>
|
|
</content:encoded></item><item><title>Everything I Installed on My New Mac</title><link>https://www.nexxel.dev/blog/new-mac/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/new-mac/</guid><description>I recently got a new Mac and decided to document everything I installed on it. This is a list of all the apps and tools I installed and will use on a daily basis.</description><pubDate>Fri, 02 Jun 2023 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<p>I recently got a new Mac and had to install a lot of apps and tools to get it set up. I decided to document everything I installed so I can refer back to it in the future and also share it with others who might find it useful.</p>
|
|
<h2>Arc</h2>
|
|
<p>I've been recently using this pretty innovative new browser called <a href="https://arc.net">Arc</a> and I must say, it's really cool! It is built on top of <a href="https://www.chromium.org/Home/">Chromium</a> but what sets it apart is its unique features. Super customizable themes, <a href="https://resources.arc.net/en/articles/6318861-spaces-distinct-browsing-areas">Spaces</a> for separating different workspaces, <a href="https://resources.arc.net/en/articles/6808613-boosts-customize-any-website">Boosts</a> for remixing websites, and the best part is everything can be done without ever needing to touch your mouse, everything is keyboard accessible. There's still a lot for me to explore. Using Arc has been a breath of fresh air - everything feels so seamless and enjoyable, making browsing truly fun again. So if you're looking to try something different, check out Arc!</p>
|
|
<h2>Raycast</h2>
|
|
<p><a href="https://raycast.com">Raycast</a> is a productivity tool that lets you search apps and do things just with a single keystroke. It's like Spotlight on steroids. I've been using it for a while now and it's been a game-changer. I can't imagine using my Mac without it. I use it to open apps, search files, run scripts, and so much more. It has a vibrant ecosystem of extensions that you can install to do even more. I highly recommend checking it out.</p>
|
|
<h2>Alacritty</h2>
|
|
<p>Alacritty is my terminal of choice. It's super customizable and plenty fast. It doesn't get in your way and just lets you get things done. It doesn't have tabs like <a href="https://iterm2.com/">iTerm</a> or <a href="https://sw.kovidgoyal.net/kitty/">Kitty</a> but I don't mind that because I use it with <a href="https://en.wikipedia.org/wiki/Tmux">tmux</a> which I have previously written about in my <a href="/blog/wsl-workflow#persistent-terminal-sessions-with-tmux">workflow post</a>.</p>
|
|
<h2>Homebrew</h2>
|
|
<p><a href="https://brew.sh">Homebrew</a> is an excellent package manager for macOS. It made installing all the tools I needed a breeze. Need node? <code>brew install node</code>. Need neovim? <code>brew install neovim</code>. You get the idea. It's a must- have if you're using a Mac.</p>
|
|
<h2>Fish Shell</h2>
|
|
<p>Since writing my <a href="/blog/wsl-workflow">wsl workflow post</a>, I've switched from zsh to <a href="https://fishshell.com">fish</a>. It's a more modern shell that comes with autosuggestions, syntax highlighting and a lot more out of the box. It even has web-based configuration which makes it super easy to customize and preview your changes.</p>
|
|
<h2>Starship</h2>
|
|
<p>For my prompt, I still use <a href="https://starship.rs">Starship</a> although my configuration has changed a bit. I've switched the <a href="https://starship.rs/presets/pure-preset.html">pure preset</a> which is a lot more minimal and less distracting.</p>
|
|
<p></p>
|
|
<h2>GitHub CLI</h2>
|
|
<p><a href="https://cli.github.com">GitHub CLI</a> has become an essential part of my workflow. I use it for creating, cloning, and managing repositories. It also makes creating a pull request a breeze. Highly recommend using it, it'll save you a lot of time. It's just a <code>brew install gh</code> away.</p>
|
|
<h2>Other Coding Tools</h2>
|
|
<h3>fnm</h3>
|
|
<p><a href="https://fnm.vercel.app">fnm</a> is a fast and simple Node.js version manager. It's really easy to use and is much faster than nvm.</p>
|
|
<h3>exa</h3>
|
|
<p>I still use <a href="https://the.exa.website">exa</a> for listing files in the terminal. It's a modern replacement for <code>ls</code> with a lot of useful features. With icons, colors, and git integration, it makes listing files much nicer.</p>
|
|
<p>I use the same aliases that I did before.</p>
|
|
<pre><code># ~/.config/fish/config.fish
|
|
|
|
alias ll="exa -l -g --icons --git"
|
|
alias llt="exa -1 --icons --tree --git-ignore"
|
|
</code></pre>
|
|
<h3>zoxide</h3>
|
|
<p>I also still use <a href="https://github.com/ajeetdsouza/zoxide">zoxide</a> for navigating directories. It's a smarter <code>cd</code> command that learns your habits and makes navigating directories a breeze.</p>
|
|
<p></p>
|
|
<h3>bat</h3>
|
|
<p><a href="https://github.com/sharkdp/bat">bat</a> is a modern replacement for <code>cat</code> with syntax highlighting and themes. I use it for a lot of things, but the coolest use of it that I have is to use it to preview files while fuzzy searching using <a href="https://github.com/junegunn/fzf">fzf</a> and opening that file in neovim.</p>
|
|
<p></p>
|
|
<p>Here's the alias.</p>
|
|
<pre><code>alias search="fzf --preview 'bat --color=always --style=numbers --line-range=:500 {}' | xargs nvim"
|
|
</code></pre>
|
|
<h2>Conclusion</h2>
|
|
<p>That's it! That's everything I installed on my new Mac. I hope you found this useful. Thanks for reading!</p>
|
|
</content:encoded></item><item><title>Rust: Not Just Zoom Zoom Fast</title><link>https://www.nexxel.dev/blog/rust/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/rust/</guid><description>Explore the versatility of Rust beyond performance and memory safety with its well-designed language, package manager, and ecosystem.</description><pubDate>Sat, 25 Feb 2023 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<p>When it comes to Rust, the first thing that usually comes to mind is its impressive performance. And while Rust certainly delivers on this front, there's so much more to the language than just raw speed. From its well-designed syntax and powerful abstractions, to its robust package manager and vibrant ecosystem, Rust is a language that truly has it all. In this post, we'll take a closer look at some of the key features that make Rust such a versatile and compelling language.</p>
|
|
<p>While the language features discussed in this post may not be exclusive to Rust, it is the way in which they are carefully designed and integrated that sets Rust apart. Rust is the only language where these features converge seamlessly to create a coherent system, which is why it is such a captivating language.</p>
|
|
<h2>Practical Immutability</h2>
|
|
<p>In Rust, variables can be declared as either immutable or mutable using the <code>mut</code> keyword. Rust embraces immutability as a default by making variables immutable by default. This means that we must explicitly declare variables as mutable if we need to change their value later. This approach makes it easier to reason about the behavior of programs and helps prevent accidental mutations.</p>
|
|
<pre><code>let x = 5; // immutable
|
|
let mut y = 5; // mutable
|
|
|
|
y = 6; // ok
|
|
x = 6; // error: cannot assign twice to immutable variable `x`
|
|
</code></pre>
|
|
<p>In addition to mutable variables, Rust supports passing mutable references to functions. Functions must declare whether they intend to mutate their arguments or not, which further helps prevent accidental mutations. This allows us to use mutable variables in a controlled, explicit way.</p>
|
|
<pre><code>fn increment(num: &amp;mut i32) {
|
|
*num += 1; // dereference the pointer to mutate the value
|
|
}
|
|
|
|
fn main() {
|
|
let mut x = 10; // x is mutable
|
|
increment(&amp;mut x); // pass a mutable reference to x
|
|
|
|
println!("x: {}", x); // prints "x: 11"
|
|
}
|
|
</code></pre>
|
|
<p>By embracing immutability as a default and using mutable variables only when necessary, Rust code becomes more robust and predictable.</p>
|
|
<h2>Algrebraic Data Types (ADTs) and Pattern Matching</h2>
|
|
<p>Algebraic Data Types (ADTs) are a fundamental concept in functional programming that allow for the creation of complex data types by combining simpler types. ADTs can be of two types: Sum types and Product types. Sum types combine multiple types into a single type that can hold one of the constituent types at any given time. Rust provides a powerful implementation of Sum types in the form of enums or enumerated types. Structs, on the other hand, are used to represent Product types. You've probably already used Product types in other languages (interfaces in TypeScript, classes in Java, etc.).</p>
|
|
<p>For example, consider a program that represents the types of shapes. We can use an enum to represent the different types of shapes:</p>
|
|
<pre><code>enum Shape {
|
|
Circle(f64),
|
|
Rectangle(f64, f64),
|
|
Triangle(f64, f64, f64),
|
|
}
|
|
</code></pre>
|
|
<p>Here, we have defined an enum <code>Shape</code> that has three variants: <code>Circle</code> that takes a single <code>f64</code> argument representing the radius, <code>Rectangle</code> that takes two <code>f64</code> arguments representing the length and width, and <code>Triangle</code> that takes three f64 arguments representing the lengths of its three sides. This allows us to represent any possible shape in a single data type.</p>
|
|
<p>Now we can use pattern matching to easily and safely parse the data of a shape. If you don't know what pattern matching is, think of it as a <code>switch</code> statement on steroids. It allows us to match a value against a pattern and execute code based on the pattern that matches. I have a <a href="/blog/pattern-matching">whole blog post on pattern matching btw</a>.</p>
|
|
<pre><code>fn area(shape: Shape) -&gt; f64 {
|
|
match shape {
|
|
// pi * radius^2
|
|
Shape::Circle(radius) =&gt; std::f64::consts::PI * radius * radius,
|
|
|
|
// length * width
|
|
Shape::Rectangle(length, width) =&gt; length * width,
|
|
|
|
// Heron's formula: sqrt(s * (s - a) * (s - b) * (s - c)) where s = (a + b + c) / 2
|
|
Shape::Triangle(side1, side2, side3) =&gt; {
|
|
let s = (side1 + side2 + side3) / 2.0;
|
|
(s * (s - side1) * (s - side2) * (s - side3)).sqrt()
|
|
}
|
|
}
|
|
}
|
|
</code></pre>
|
|
<p>Rust's compiler also ensures that our pattern matching is exhaustive, meaning that we must handle all possible cases. This prevents us from accidentally forgetting to handle a case and causing a runtime error.</p>
|
|
<p></p>
|
|
<p>ADTs along with pattern matching make it trivial to create and handle complex data types in a safe and concise way.</p>
|
|
<h2>Built-In Abstractions</h2>
|
|
<p>Rust provides powerful built-in abstractions that help in writing correct and safe code easily. Two of the most important abstractions in Rust are <code>Option</code> and <code>Result</code>. These types are essential for working with Rust's null-safety and error-handling systems, which help prevent bugs and improve the reliability of Rust programs. In this section, we'll explore <code>Option</code> and <code>Result</code> in detail, and see how they can be used to write more reliable and error-free Rust code.</p>
|
|
<h3>No Null, No Problem (Option)</h3>
|
|
<p>Rust replaces the concept of null with the <code>Option</code> type, providing a safer alternative that eliminates the risks associated with null values. <code>Option</code> is an enum that can be either <code>Some</code> with a value or <code>None</code> to represent absence of a value. This type-safe approach allows us to handle absence of a value without resorting to null. Here's how the <code>Option</code> type is defined in Rust:</p>
|
|
<pre><code>enum Option&lt;T&gt; {
|
|
Some(T),
|
|
None,
|
|
}
|
|
</code></pre>
|
|
<p>By using <code>Option</code>, we can ensure that our code is free from null-related bugs and errors, making it easier to reason about program behavior. You may be familiar with this pattern from other languages like Haskell's <code>Maybe</code> monad or OCaml's <code>option</code> type.</p>
|
|
<p>Let's look at <code>Option</code> in practice. Consider a function that takes a vector of integers and returns the largest integer in the vector. If the vector is empty, we want to return <code>None</code>. Otherwise, we want to return <code>Some</code> with the largest integer. Here's how we can implement this function in Rust:</p>
|
|
<pre><code>fn largest(numbers: Vec&lt;i32&gt;) -&gt; Option&lt;i32&gt; {
|
|
if numbers.is_empty() {
|
|
return None;
|
|
}
|
|
|
|
let mut largest = numbers[0];
|
|
|
|
for num in numbers {
|
|
if num &gt; largest {
|
|
largest = num;
|
|
}
|
|
}
|
|
|
|
Some(largest)
|
|
}
|
|
</code></pre>
|
|
<p>Now we can use this function and use pattern matching to handle the both cases:</p>
|
|
<pre><code>fn main() {
|
|
let numbers = vec![1, 2, 3];
|
|
|
|
match largest(numbers) {
|
|
Some(num) =&gt; println!("Largest number: {}", num),
|
|
None =&gt; println!("No largest number"),
|
|
}
|
|
}
|
|
</code></pre>
|
|
<p>And this works!</p>
|
|
<p></p>
|
|
<p>But we can do better. Rust provides an extensive standard library that includes a number of useful functions. Here we can create an iterator from our <code>Option</code> and use the <code>max</code> function to get the largest number:</p>
|
|
<pre><code>fn largest(numbers: Vec&lt;i32&gt;) -&gt; Option&lt;i32&gt; {
|
|
numbers.into_iter().max()
|
|
}
|
|
</code></pre>
|
|
<p>This also automatically handles the case where the vector is empty, returning <code>None</code> for us. Rust's standard library is full of useful functions like this.</p>
|
|
<p>Want to return the double of the largest of the even numbers but only if it's less than 100? No problem!</p>
|
|
<pre><code>fn largest_even_less_than_100(numbers: Vec&lt;i32&gt;) -&gt; Option&lt;i32&gt; {
|
|
numbers
|
|
.into_iter() // create an iterator from the vector
|
|
.filter(|num| num % 2 == 0) // filter out only even numbers
|
|
.max() // get the largest number - returns an Option&lt;i32&gt;
|
|
.map(|num| num * 2) // double the Some value inside the Option, leaves None unchanged
|
|
.filter(|num| num &lt; &amp;100) // only return Some if the value is less than 100
|
|
}
|
|
</code></pre>
|
|
<p>I think you get the point.</p>
|
|
<h3>When Things Don't Go As Planned (Result)</h3>
|
|
<p>Rust's <code>Result</code> type is another built-in abstraction that is often used to handle errors in Rust programs. It represents the success or failure of an operation. <code>Result</code> is an enum with two possible variants - <code>Ok</code> and <code>Err</code>. <code>Ok</code> represents the successful result of an operation, while <code>Err</code> represents an error that occurred during the operation. Here's how the <code>Result</code> type is defined in Rust:</p>
|
|
<pre><code>enum Result&lt;T, E&gt; {
|
|
Ok(T),
|
|
Err(E),
|
|
}
|
|
</code></pre>
|
|
<p>You might be familiar with this pattern from other languages like Haskell's <code>Either</code> monad or OCaml's <code>result</code> type.</p>
|
|
<p>Let's look at an example of how <code>Result</code> can be used to handle errors. Let's say we have a function that takes two integers as arguments and returns the result of dividing the first integer by the second. However, division by zero is not allowed and will result in an error. We can use the <code>Result</code> type to handle the possible error case:</p>
|
|
<pre><code>fn divide(x: i32, y: i32) -&gt; Result&lt;i32, &amp;'static str&gt; {
|
|
if y == 0 {
|
|
return Err("Cannot divide by zero");
|
|
}
|
|
Ok(x / y)
|
|
}
|
|
</code></pre>
|
|
<p>Now we can use this function and handle the success and error cases:</p>
|
|
<pre><code>fn main() {
|
|
match divide(10, 2) {
|
|
Ok(result) =&gt; println!("Result: {}", result),
|
|
Err(error) =&gt; println!("Error: {}", error),
|
|
}
|
|
}
|
|
</code></pre>
|
|
<p>Pretty simple, right? Let's look at some functions Rust provides to make working with <code>Result</code> a breeze.</p>
|
|
<p>Say we wanted to add 10 to the result of a chained division operation. We could use nested <code>match</code> statements but that's a bit ugly and verbose. Rust has us covered with the <code>and_then</code> and <code>map</code> functions:</p>
|
|
<pre><code>fn main() {
|
|
let result = divide(10, 2)
|
|
.and_then(|x| divide(x, 2))
|
|
.map(|x| x + 10);
|
|
|
|
match result {
|
|
Ok(result) =&gt; println!("Result: {}", result),
|
|
Err(error) =&gt; println!("Error: {}", error),
|
|
}
|
|
}
|
|
</code></pre>
|
|
<p>This is a lot more concise than using nested <code>match</code> statements. Rust's standard library provides a lot more functions for working with <code>Result</code> and <code>Option</code>, so be sure to check them out.</p>
|
|
<h2>Vibrant Community and Ecosystem</h2>
|
|
<p>Rust is more than just a language; it has a thriving ecosystem and community. This community is supported by a robust ecosystem of libraries, tools, and resources that make it easy to build, test, and deploy Rust applications.</p>
|
|
<p>Here are some key aspects of Rust's ecosystem and community:</p>
|
|
<ul>
|
|
<li>
|
|
<p><strong>Rustup</strong> - Rustup is the official tool for installing and managing Rust. It makes it easy to install and update Rust and its associated tools. It also makes it easy to install and manage multiple versions of Rust on the same system.</p>
|
|
</li>
|
|
<li>
|
|
<p><strong>Cargo</strong> - Cargo is Rust's package manager. It's used to build, test, and run Rust applications. It also makes it easy to manage dependencies and avoid dependency hell. It also allows publishing libraries and binaries to <a href="https://crates.io">crates.io</a>, Rust's official package registry. It can also do benchmarks, and even manage multiple projects in the same repository using workspaces.</p>
|
|
</li>
|
|
<li>
|
|
<p><strong>Libraries</strong> - Rust has a large and growing collection of open-source libraries and frameworks that can be easily integrated into your projects. This includes everything from low-level system libraries to high-level web frameworks and game engines.</p>
|
|
</li>
|
|
<li>
|
|
<p><strong>Tooling</strong> - Rust has a strong focus on developer tools. Tools like Rustfmt, Clippy, and Rust Analyzer that help with code formatting, linting, and analysis.</p>
|
|
</li>
|
|
<li>
|
|
<p><strong>Community</strong> - The Rust community is known for being welcoming and supportive, with many resources available to help new users get started with the language. This includes online forums, chat rooms, and meetups, as well as a growing collection of Rust books and tutorials. I particurlarly love <a href="https://discord.gg/rust-lang-community">Rust's community discord server</a>. It's a great place to get help with Rust and meet other Rustaceans.</p>
|
|
</li>
|
|
</ul>
|
|
<blockquote>
|
|
<p>These are some of my favourite features of Rust. If I go on, this article will be too long, so I'm linking some resources for Rust coolness below. I highly recommend checking them out.</p>
|
|
</blockquote>
|
|
<h2>Some Other Cool Resources</h2>
|
|
<ul>
|
|
<li><a href="https://stephencoakley.com/2019/04/24/how-rust-solved-dependency-hell">How Cargo solved dependency hell</a></li>
|
|
<li><a href="https://youtu.be/MWRPYBoCEaY">Rust Macros</a></li>
|
|
<li><a href="https://youtu.be/CJtvnepMVAU">Rust's insanely helpful compiler</a></li>
|
|
<li><a href="https://blog.rust-lang.org/2015/05/11/traits.html">Rust traits</a></li>
|
|
</ul>
|
|
</content:encoded></item><item><title>Implementing the Pipe Operator in TypeScript</title><link>https://www.nexxel.dev/blog/pipe/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/pipe/</guid><description>The pipe operator is one of my favourite features in functional languages like Elixir and OCaml. Let's implement it in TypeScript!</description><pubDate>Sat, 21 Jan 2023 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<h2>What is the pipe operator?</h2>
|
|
<p>The pipe operator is used to chain function calls together in a more readable and concise way. The operator takes the output of one function as the input for the next function in the chain. Here's an example of pipes in <a href="https://elixir-lang.org/">Elixir</a>.</p>
|
|
<pre><code>"hello"
|
|
|&gt; String.upcase() # turn string into uppercase
|
|
|&gt; String.reverse() # reverse the string returned from `String.upcase()`
|
|
|&gt; IO.puts() # print the output from `String.reverse()`
|
|
|
|
# "OLLEH"
|
|
</code></pre>
|
|
<p>In the example above, the pipe operator <code>|&gt;</code> takes the output of the previous function and passes it as the input for the next function. Here's a more complex example. It's my solution to <a href="https://adventofcode.com/2022/">Advent of Code 2022</a> <a href="https://adventofcode.com/2022/day/1">day 1 pt.2</a>.</p>
|
|
<pre><code>File.read!("./input.txt")
|
|
|&gt; String.split("\n\n")
|
|
|&gt; Enum.map(fn elf -&gt;
|
|
elf
|
|
|&gt; String.split("\n")
|
|
|&gt; Enum.map(fn e -&gt; e |&gt; String.to_integer() end)
|
|
|&gt; Enum.sum()
|
|
end)
|
|
|&gt; Enum.sort(:desc)
|
|
|&gt; Enum.slice(0..2)
|
|
|&gt; Enum.sum()
|
|
|&gt; IO.inspect()
|
|
</code></pre>
|
|
<p>You can see how the pipe operator really helps in improving the readability of the code. The code reads like a sentence. Pipes also eliminate the need to create temporary variables to store the output of each function call or using nested function calls. As a result developers also don't have to worry about naming variables which is my least liked part of programming.</p>
|
|
<h2>Implementing the pipe operator in TypeScript</h2>
|
|
<p>After watching <a href="https://youtu.be/h1FvtIJ6ecE">Theo's video on the proposal for adding pipes in JavaScript</a>, I was inspired to implement the pipe operator as a function that composes functions together. Here is what I set out to achieve.</p>
|
|
<pre><code>const len = (s: string): number =&gt; s.length;
|
|
const double = (n: number): number =&gt; n * 2;
|
|
const square = (n: number): number =&gt; n ** 2;
|
|
|
|
console.log(pipe("hi", len, double, square)); // 16
|
|
</code></pre>
|
|
<h3>Initial implementation</h3>
|
|
<p>This was my first iteration of the <code>pipe</code> function.</p>
|
|
<pre><code>const pipe = (value: any, ...fns: Function[]) =&gt;
|
|
fns.reduce((acc, fn) =&gt; fn(acc), value);
|
|
</code></pre>
|
|
<p>Here's what this code is doing:</p>
|
|
<ul>
|
|
<li>The function takes two arguments: <code>value</code> of any type, and <code>fns</code> which is an array of functions. The spread operator <code>...</code> allows for any number of functions to be passed in.</li>
|
|
<li>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"><code>reduce</code></a> function is used to iterate over the array of functions and pass the output of the previous function as the input for the next function.</li>
|
|
<li>The callback function passed to <code>reduce</code> takes two arguments: <code>acc</code> which is the accumulator, and <code>fn</code> which is the current function in the array. The first function in the array is applied to the initial value, which is the <code>value</code> argument passed to the function. Each subsequent function is applied to the output of the previous function, chaining them together.</li>
|
|
<li>It then returns the output of the last function in the array.</li>
|
|
</ul>
|
|
<p>And this works!</p>
|
|
<p></p>
|
|
<h3>Problems with the initial implementation</h3>
|
|
<p>There are a few problems with this implementation. The first problem that I immediately noticed is that the type of the returned value from the function is <code>any</code>.</p>
|
|
<p></p>
|
|
<p>Obviously this is not good. Ideally this type should be inferred by the TypeScript compiler. I got some help from Reddit and a user there suggested this:</p>
|
|
<pre><code>type Fn = (...args: any[]) =&gt; any;
|
|
|
|
type LastReturnType&lt;L extends Fn[]&gt; = L extends [...any, infer Last extends Fn]
|
|
? ReturnType&lt;Last&gt;
|
|
: never;
|
|
|
|
const pipe = &lt;Funcs extends Fn[]&gt;(value: any, ...fns: Funcs) =&gt;
|
|
fns.reduce((acc, fn) =&gt; fn(acc), value) as LastReturnType&lt;Funcs&gt;;
|
|
</code></pre>
|
|
<p>This is definitely some crazy TypeScript. Let's break it down.</p>
|
|
<ul>
|
|
<li><code>Fn</code> is a type alias for a function that takes any number of arguments of <code>any</code> type and returns <code>any</code> type.</li>
|
|
<li><code>LastReturnType</code> is a generic type that takes an array of functions and returns the return type of the last function in the array. The <code>infer</code> keyword is used to infer the type of the last function in the array.</li>
|
|
<li>It uses <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#variadic-tuple-types">variadic tuple types</a> to know what the last function in the tuple is and then uses the <code>ReturnType</code> type utility to get the return type of the last function.</li>
|
|
<li>Then the <code>pipe</code> function is defined as a generic function that takes an initial value of any type and an arbitrary number of functions of the <code>Fn</code> type. It then casts the return value of the function to the return type of the last function in the array.</li>
|
|
</ul>
|
|
<p>So now the type of the returned value is inferred correctly.</p>
|
|
<p></p>
|
|
<p>But there's still a problem. Let me demonstrate it with an example.</p>
|
|
<pre><code>// does not show an error
|
|
const result = pipe("hi", double, len, square);
|
|
|
|
// Argument of type 'number' is not assignable to parameter of type 'string'.
|
|
const result2 = square(len(double("hi")));
|
|
</code></pre>
|
|
<p>Here we're trying to double the string "hi", which is impossible as we're passing a string to a function that expects a number. You can see we get the appropriate error when we try to do this by nesting the function calls. But our <code>pipe</code> function does not show any errors.</p>
|
|
<p></p>
|
|
<p>This is a perfect use case for <a href="https://en.m.wikipedia.org/wiki/Kind_(type_theory)">Higher Kinded Types</a>. Unfortunately, TypeScript does not support Higher Kinded Types yet. There isn't a way to say "for all these functions, the input type is <a href="https://en.m.wikipedia.org/wiki/Covariance_and_contravariance_(computer_science)">contravariant</a> to the output type of the previous function".</p>
|
|
<h3>So what's the solution?</h3>
|
|
<p>Turns out, the easiest and most straightforward solution is to set an upper bound on the number of functions that can be passed to the <code>pipe</code> function and use <a href="https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads">function overloading</a> to define the type of the returned value.</p>
|
|
<pre><code>function pipe&lt;A&gt;(value: A): A;
|
|
function pipe&lt;A, B&gt;(value: A, fn1: (input: A) =&gt; B): B;
|
|
function pipe&lt;A, B, C&gt;(value: A, fn1: (input: A) =&gt; B, fn2: (input: B) =&gt; C): C;
|
|
function pipe&lt;A, B, C, D&gt;(
|
|
value: A,
|
|
fn1: (input: A) =&gt; B,
|
|
fn2: (input: B) =&gt; C,
|
|
fn3: (input: C) =&gt; D,
|
|
): D;
|
|
function pipe&lt;A, B, C, D, E&gt;(
|
|
value: A,
|
|
fn1: (input: A) =&gt; B,
|
|
fn2: (input: B) =&gt; C,
|
|
fn3: (input: C) =&gt; D,
|
|
fn4: (input: D) =&gt; E,
|
|
): E;
|
|
// ... and so on
|
|
|
|
function pipe(value: any, ...fns: Function[]): unknown {
|
|
return fns.reduce((acc, fn) =&gt; fn(acc), value);
|
|
}
|
|
</code></pre>
|
|
<p>This might seem very manual but it's definitely the best way to do this. It works very well and also gives fairly easy to understand type errors for the user. Let's see how it works.</p>
|
|
<p>The first five function declarations are overloads of the <code>pipe</code> function, each one of them has a different set of parameters, each overload corresponds to a different number of functions that can be passed to the <code>pipe</code> function.</p>
|
|
<ul>
|
|
<li>The first overload takes a single argument of generic type <code>A</code> and returns the same value without applying any function to it.</li>
|
|
<li>The second overload takes two arguments, value of type <code>A</code>, and <code>fn1</code> a function that takes an argument of type <code>A</code> and returns a value of type <code>B</code>.</li>
|
|
<li>The third overload takes three arguments, value of type <code>A</code>, <code>fn1</code> a function that takes an argument of type <code>A</code> and returns a value of type <code>B</code>, and <code>fn2</code> a function that takes an argument of type <code>B</code> and returns a value of type <code>C</code>.</li>
|
|
<li>There can be any number of overloads, but I've only defined five for demonstration purposes.</li>
|
|
</ul>
|
|
<p>Each overload corresponds to a different number of functions, and each function's input type is the output of the previous function, this way the <code>pipe</code> function will not only return the output type of the last function passed but also type check the input and output types of each function in the pipeline.</p>
|
|
<p>The last function declaration is the actual implementation of the <code>pipe</code> function. It takes an initial value of any type and an arbitrary number of functions and applies them to the initial value in the order they are passed. The logic is the same as before.</p>
|
|
<p>The advantage of this implementation is that it allows the <code>pipe</code> function to be more type-safe as it ensures that the input and output types of each function in the pipeline are consistent and match the type of the initial value, and it also ensures that the functions passed to the <code>pipe</code> function have the correct signature.</p>
|
|
<p></p>
|
|
<h3>Overloading without using the function keyword</h3>
|
|
<p>I love my arrow functions and almost never use the <code>fuction</code> keyword. Unfortunately, we can't use arrow functions for overloading. We can only use the <code>function</code> keyword for overloading. But what we can do is implement the overloads in an interface and then implement the actual function as a function of that interface.</p>
|
|
<pre><code>interface Pipe {
|
|
&lt;A&gt;(value: A): A;
|
|
&lt;A, B&gt;(value: A, fn1: (input: A) =&gt; B): B;
|
|
&lt;A, B, C&gt;(value: A, fn1: (input: A) =&gt; B, fn2: (input: B) =&gt; C): C;
|
|
&lt;A, B, C, D&gt;(
|
|
value: A,
|
|
fn1: (input: A) =&gt; B,
|
|
fn2: (input: B) =&gt; C,
|
|
fn3: (input: C) =&gt; D,
|
|
): D;
|
|
&lt;A, B, C, D, E&gt;(
|
|
value: A,
|
|
fn1: (input: A) =&gt; B,
|
|
fn2: (input: B) =&gt; C,
|
|
fn3: (input: C) =&gt; D,
|
|
fn4: (input: D) =&gt; E,
|
|
): E;
|
|
// ... and so on
|
|
}
|
|
|
|
const pipe: Pipe = (value: any, ...fns: Function[]): unknown =&gt; {
|
|
return fns.reduce((acc, fn) =&gt; fn(acc), value);
|
|
};
|
|
</code></pre>
|
|
<p>This is same as the previous implementation, but we're using an interface to implement the overloads instead of using the <code>function</code> keyword. This way we can use arrow functions for the actual implementation. Pretty neat, right? Everything still works!</p>
|
|
<p></p>
|
|
<h2>Conclusion</h2>
|
|
<p>I hope you enjoyed this article. I've learned a lot while writing it, and I hope you did too. Thanks for reading!</p>
|
|
<h2>References</h2>
|
|
<ul>
|
|
<li><a href="https://www.typescriptlang.org/docs/handbook/intro.html">TypeScript Handbook</a></li>
|
|
<li><a href="https://www.typescriptlang.org/play?#code/PTAECcFMBcFdwHamgTwA6VAewGagDYCGAztKDrAgMbQCWWStSh44hKAUKhqAGJOF8AJRjwEANUGxIAHl6hIAD2iQEAE2J9KNeggDaAXQB8AXj4LlqjaD0A6e0xyRwoAKoAaUI+egAMgdAAfj8LFXVNAAp7WxYAc2IALlBCBBQASlATIy8EJxchINACpIRIADcfEvLnDi50TABBTL4BYVFESXxpGT0IjKzQAEYAJgBmY1qqBlJQNFoeMzkETSUw615tOgZDIwiyqUgklJRPaJxlpN5ltMvWkTgOg6XibIGOUA-yZdsoNVgqSARCKEKhUTznfrZc7A0FpTz7LqQNIAbg+k2mZHwqmaEUSoFI4CYsRuoAQsAAtgAjHwDYi2LEIWLQAAWyI4U2WZDUWFglKxOIQJQp1PAJLJVJp2SQACpQMNUeyMfiAI6wFiYMwRQWk4XOMW6lwDGWy+WgdGciCQYiwfBkMxzDARABEzNoTvcDM83N5WM8xFV6pRoBAluttq8mmOHBDnwAeoFFcssFj6VhYhEoGHoBkQ4MAGwcIA"><code>LastReturnType</code> implementation</a> by u/i_fucking_hate_money</li>
|
|
<li><a href="https://github.com/remeda/remeda/blob/master/src/pipe.ts">Remeda's <code>pipe</code> implementation</a></li>
|
|
<li><a href="https://github.com/bluesky-llc/open-source/blob/main/packages/utils/src/pipe.ts">u/GoodnessManifest's <code>pipe</code> implementation</a> with overloads in an interface</li>
|
|
<li><a href="https://github.com/tc39/proposal-pipeline-operator">Proposal</a> for adding the pipe operator to JavaScript</li>
|
|
</ul>
|
|
</content:encoded></item><item><title>Expressive Code with Pattern Matching</title><link>https://www.nexxel.dev/blog/pattern-matching/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/pattern-matching/</guid><description>Elevate your code by writing declarative, and easy-to-read code with pattern matching.</description><pubDate>Thu, 29 Dec 2022 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<p>Have you ever found yourself writing long, cumbersome if-else chains in your code, just to handle a few different cases? If so, you'll want to learn about pattern matching. In this post, we'll explore the basics of pattern matching and how it can help you write cleaner, more concise code. We'll also look at some examples of how pattern matching can be used to solve common problems in programming.</p>
|
|
<h2>What is Pattern Matching?</h2>
|
|
<p>Pattern matching is a mechanism for checking a value against a pattern and, based on the match, performing some kind of action. It is a fundamental feature of many programming languages, such as Haskell, Rust and ML languages including OCaml.</p>
|
|
<p>The basic idea behind pattern matching is simple: you define a pattern and provide some code to be executed if the pattern matches. All of the code examples in this post are in OCaml syntax because it is very readable and easy to understand. Consider the following example:</p>
|
|
<pre><code>(* basic.ml *)
|
|
|
|
let greet name =
|
|
match name with
|
|
| "nexxel" -&gt; print_string "Hi, nexxel!"
|
|
| "Ludwig" -&gt; print_string "Crazy how you look exactly like Mogul Mail"
|
|
| _ -&gt; print_string "Who are you?"
|
|
</code></pre>
|
|
<p>Here we have defined a function called <code>greet</code> that takes a single argument<code>name</code>. The <code>match</code> keyword is used to define a pattern match, and the <code>with</code> keyword is used to specify the different patterns to be matched.</p>
|
|
<p>The first pattern is <code>"nexxel" -&gt; print_string "Hi, nexxel!"</code>, which means that if <code>name</code> is equal to <code>"nexxel"</code>, it will execute the print statement. Similarly, if <code>name</code> is equal to <code>"Ludwig"</code> it will execute the respective print statement. The last pattern is <code>_ -&gt; print_string "Who are you?"</code>, which means that if <code>name</code> is anything other than "nexxel" or "Ludwig", it will print "Who are you?".</p>
|
|
<p>This is a very basic example of pattern matching, but it illustrates the core concept: you define a pattern and provide some code to be executed if the pattern matches. You might think how is this better than using an if-else statement? We'll see how pattern matching helps in simplifying complex conditional logic with less mental effort.</p>
|
|
<h2>Why Use Pattern Matching?</h2>
|
|
<p>Pattern matching allows you to express complex conditionals in a concise and declarative way. Let's look at another example which is a function to calculate the <a href="https://en.wikipedia.org/wiki/Factorial">factorial</a> of a number.</p>
|
|
<pre><code>(* factorial.ml *)
|
|
|
|
let rec factorial n =
|
|
match n with
|
|
| 0 -&gt; 1
|
|
| n -&gt; n * factorial (n - 1)
|
|
</code></pre>
|
|
<p>This code uses a recursive function (<code>rec</code> is used to define recursive functions) and pattern matching to calculate the factorial of a given number. The pattern <code>0</code> is matched if <code>n</code> is equal to <code>0</code>, in which case the function returns <code>1</code>. Otherwise, the pattern <code>n</code> is matched, and the function calls itself with <code>n - 1</code> as the argument.</p>
|
|
<p>This code is much simpler and easier to understand than an equivalent implementation using an imperative loop. In addition, it is more declarative, as it specifies what should be done rather than how it should be done. Here's an imperative implementation of the same function in Python:</p>
|
|
<pre><code># factorial.py
|
|
|
|
def factorial(n):
|
|
def loop(i, acc):
|
|
if i &gt; n:
|
|
return acc
|
|
else:
|
|
return loop(i + 1, acc * i)
|
|
return loop(1, 1)
|
|
</code></pre>
|
|
<p>The declarative way of doing things is much more concise and easier to reason. Let's explore some more examples to see how pattern matching is used in practice.</p>
|
|
<h2>Pattern Matching in Practice</h2>
|
|
<h3>Conditionals</h3>
|
|
<p>We already saw the factorial example, but let's take another example to calculate the nth term of the <a href="https://en.wikipedia.org/wiki/Fibonacci_number">Fibonacci sequence</a>.</p>
|
|
<pre><code>(* fibonacci.ml *)
|
|
|
|
let rec fib n =
|
|
match n with
|
|
| 0 -&gt; 0
|
|
| 1 -&gt; 1
|
|
| n -&gt; fib (n - 1) + fib (n - 2)
|
|
</code></pre>
|
|
<p>Here, the <code>fib</code> function uses pattern matching to define three cases:</p>
|
|
<ul>
|
|
<li>If <code>n</code> is equal to <code>0</code>, it returns <code>0</code>.</li>
|
|
<li>If <code>n</code> is equal to <code>1</code>, it returns <code>1</code>.</li>
|
|
<li>If <code>n</code> is neither <code>0</code> nor <code>1</code>, the function calls itself with <code>n - 1</code> and <code>n - 2</code> as arguments and returns the sum of the two results.</li>
|
|
</ul>
|
|
<p>Here's an imperative implementation of the same function in TypeScript:</p>
|
|
<pre><code>// fibonacci.ts
|
|
|
|
const fib = (n: number): number =&gt; {
|
|
if (n === 0) {
|
|
return 0;
|
|
} else if (n === 1) {
|
|
return 1;
|
|
} else {
|
|
let a = 0;
|
|
let b = 1;
|
|
|
|
for (let i = 2; i &lt;= n; i++) {
|
|
[a, b] = [b, a + b];
|
|
}
|
|
|
|
return b;
|
|
}
|
|
};
|
|
</code></pre>
|
|
<p>If you look at the code, you'll see that it is much more verbose than the declarative version. It also uses mutable variables, which can be error-prone. Moreover, it is not very easy to understand what the code is doing. Although this can be improved and be written in a declarative way using recursion.</p>
|
|
<pre><code>// fibonacci.ts
|
|
|
|
const fib = (n: number): number =&gt; {
|
|
if (n === 0) {
|
|
return 0;
|
|
} else if (n === 1) {
|
|
return 1;
|
|
} else {
|
|
return fib(n - 1) + fib(n - 2);
|
|
}
|
|
};
|
|
</code></pre>
|
|
<p>This version is much more readable and concise, but it is still not as concise and satisfying to read and write as the pattern matching version.</p>
|
|
<h3>Usage with Algebraic Data Types</h3>
|
|
<p>Pattern matching is also used with <a href="https://en.wikipedia.org/wiki/Algebraic_data_type">algebraic data types</a>, which are composite data types that are built up from simpler data types using a set of constructors.. Consider the following example to represent a <a href="https://en.wikipedia.org/wiki/Binary_tree">binary tree</a>:</p>
|
|
<pre><code>(* binary_tree.ml *)
|
|
|
|
type tree =
|
|
| Leaf
|
|
| Node of int * tree * tree
|
|
|
|
|
|
let binary_tree = Node(1, Node(2, Leaf, Leaf), Node(3, Leaf, Leaf))
|
|
</code></pre>
|
|
<p>The <code>tree</code> type is an ADT, where the value of type <code>tree</code> can either be a <code>Leaf</code> or <code>Node</code>. This ADT has two constructors: <code>Leaf</code> and <code>Node</code>. The <code>Leaf</code> constructor takes no arguments and represents a leaf node, i.e. a node with no subtrees. The <code>Node</code> constructor takes three arguments: an integer value, and two subtrees.</p>
|
|
<p>Now that we have defined the <code>tree</code> ADT, we can use it to create a binary tree. The <code>binary_tree</code> variable is a <code>tree</code> value that represents the following binary tree:</p>
|
|
<pre><code> 1
|
|
/ \
|
|
2 3
|
|
/ \ / \
|
|
</code></pre>
|
|
<p>Now we can use pattern matching to deconstruct the <code>tree</code> value and perform different actions based on its structure. For example, we can write a function that sums the values of all leaf nodes in a tree:</p>
|
|
<pre><code>(* binary_tree.ml *)
|
|
|
|
let rec sum_tree tree =
|
|
match tree with
|
|
| Leaf -&gt; 0
|
|
| Node(value, left, right) -&gt; value + sum_tree left + sum_tree right
|
|
|
|
(* let () = print_int (sum_tree binary_tree) *)
|
|
(* 6 *)
|
|
</code></pre>
|
|
<p>The <code>sum_tree</code> function takes a <code>tree</code> value as an argument and uses pattern matching to deconstruct it. If the tree is a <code>Leaf</code>, it returns <code>0</code>. Otherwise, it returns the value of the node plus the sum of the values of the left and right subtrees.</p>
|
|
<p>You can see the benefits of using pattern matching here. The code is very concise and much easier to understand because it reads like what you would say in plain English.</p>
|
|
<h3>Navigating Complex Data Structures</h3>
|
|
<p>Pattern matching allows us to navigate complex data structures in a very flexbile and concise way without a lot of mental overhead. Consider the following <a href="https://en.wikipedia.org/wiki/Tagged_union">variant type</a> to represent a <a href="https://en.wikipedia.org/wiki/Polynomial">polynomial</a>:</p>
|
|
<pre><code>(* polynomial.ml *)
|
|
|
|
type 'a polynomial =
|
|
| Zero
|
|
| Const of 'a
|
|
| Var
|
|
| Sum of 'a polynomial * 'a polynomial
|
|
| Prod of 'a polynomial * 'a polynomial
|
|
| Power of 'a polynomial * int
|
|
</code></pre>
|
|
<p>The <code>polynomial</code> type is a generic type that takes in a type parameter <code>'a</code>. It is a placeholder for a type that will be specified later when the type is used. <code>polynomial</code> and has six variants. The <code>Zero</code> variant represents the polynomial <code>0</code>, the <code>Const</code> variant represents a constant polynomia, the <code>Var</code> variant represents the polynomial <code>x</code>. The <code>Sum</code> variant represents the sum of two polynomials. The <code>Prod</code> variant represents the product of two polynomials. The <code>Power</code> variant represents the polynomial raised to a power.</p>
|
|
<p>We can now use pattern matching to define a function that evaluates a polynomial at a given value of <code>x</code>:</p>
|
|
<pre><code>(* polynomial.ml *)
|
|
|
|
(* `function` is just syntatic sugar for `match x with` *)
|
|
let rec eval x = function
|
|
| Zero -&gt; 0
|
|
| Const c -&gt; c
|
|
| Var -&gt; x
|
|
| Sum (p1, p2) -&gt; eval x p1 + eval x p2
|
|
| Prod (p1, p2) -&gt; eval x p1 * eval x p2
|
|
| Power (p, n) -&gt; int_of_float (float_of_int (eval x p) ** float_of_int n)
|
|
</code></pre>
|
|
<p>Here, <code>eval</code> is a recursive function which uses pattern matching to define the cases for the different variants of the <code>polynomial</code> type.</p>
|
|
<ul>
|
|
<li>If the polynomial is <code>Zero</code>, the function returns <code>0</code>.</li>
|
|
<li>If the polynomial is <code>Const</code>, the function returns the constant value.</li>
|
|
<li>If the polynomial is <code>Var</code>, the function returns the value of <code>x</code>.</li>
|
|
<li>If the polynomial is an <code>Sum</code>, the function deconstructs the polynomial into its two operands and evaluates them using the <code>eval</code> function. It then returns the sum of the two results.</li>
|
|
<li>If the polynomial is a <code>Prod</code>, the function again deconstructs the polynomial, evaluates them and returns the product of the two results.</li>
|
|
<li>If the polynomial is a <code>Power</code>, the function deconstructs the polynomial into its base and exponent, evaluates the base and returns the base raised to the power of the exponent.</li>
|
|
</ul>
|
|
<p>This allows us to easily calculate the value of a polynomial of any complexity at a given value of x by destructuring it into its constituent parts and recursively evaluating each part. For example, here's how we can use the <code>eval</code> function to evaluate the polynomial <code>x^2 + 2x + 1</code> at <code>x = 2</code>:</p>
|
|
<pre><code>(* x^2 + 2x + 1 *)
|
|
let p = Sum(Power(Var, 2), Sum(Prod(Const 2, Var), Const 1))
|
|
|
|
let result = eval 2 p
|
|
|
|
(* let () = print_int result *)
|
|
(* 9 *)
|
|
</code></pre>
|
|
<p>Another benefit to use pattern matching in complex structures like this is that the compiler will make sure your pattern matching is exhaustive so you won't ever miss a case.</p>
|
|
<p></p>
|
|
<h3>Handling Errors</h3>
|
|
<p>Pattern matching can also be a useful technique for error handling. Consider the following to divide two integers:</p>
|
|
<pre><code>let div x y =
|
|
if y = 0 then Error "Division by zero"
|
|
else Ok (x / y)
|
|
</code></pre>
|
|
<p>The <code>div</code> function takes two integers as arguments and returns an <code>int</code> value wrapped in an result type. If the second argument is <code>0</code>, the function returns an <code>Error</code>. Otherwise, it returns <code>Ok (x / y)</code>. Now we can use pattern matching to handle the result of the <code>div</code> function:</p>
|
|
<pre><code>let () =
|
|
let result = div 10 0 in
|
|
match result with
|
|
| Ok x -&gt; print_endline (string_of_int x)
|
|
| Error msg -&gt; print_endline msg
|
|
</code></pre>
|
|
<p>This is a pretty simple example. In OCaml there are also option types which have two variants: <code>Some</code> and <code>None</code>. The <code>Some</code> variant is used to wrap a value and the <code>None</code> variant is used to represent the absence of a values.</p>
|
|
<h2>Conclusion</h2>
|
|
<p>In conclusion, pattern matching is a versatile and useful technique that can simplify and improve many aspects of your code. Whether its a simple script or a complex application, pattern matching can help you write code that is more correct, concise, expressive, and maintainable.</p>
|
|
<p>Thanks for reading!</p>
|
|
<h2>Credits</h2>
|
|
<p>Thank you to the following people for proofreading and giving ideas for this article:</p>
|
|
<ul>
|
|
<li><a href="https://twitter.com/Zain_Wania">Zain Wania</a></li>
|
|
<li><a href="https://www.brendonovich.dev/">Brendan Allan</a></li>
|
|
<li><a href="https://github.com/yxshv">Yash</a></li>
|
|
<li><a href="https://github.com/nsttt">Néstor</a></li>
|
|
</ul>
|
|
<h2>Resources</h2>
|
|
<ul>
|
|
<li><a href="https://en.wikipedia.org/wiki/Pattern_matching">Pattern Matching - Wikipedia</a></li>
|
|
<li><a href="https://en.wikipedia.org/wiki/Algebraic_data_type">Algebraic Data Types - Wikipedia</a></li>
|
|
</ul>
|
|
</content:encoded></item><item><title>Typesafe Database Queries on the Edge</title><link>https://www.nexxel.dev/blog/typesafe-database/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/typesafe-database/</guid><description>Edge computing is all the rage. Learn how to get typesafe access to data on the edge using Kysely, Prisma and PlanetScale.</description><pubDate>Sat, 12 Nov 2022 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<h2>What is the Edge?</h2>
|
|
<p>Edge computing is the new hottest thing in the web dev ecosystem, and rightfully so. If you don't know what the edge computing is, it's a way to run your code as close to your users as possible through globally distributed edge servers. This results in really low latency and no cold starts. But to stay performant, they have a limited runtime and code size limitations (1 MB on <a href="https://developers.cloudflare.com/workers/platform/limits/#worker-size">Workers</a>).</p>
|
|
<h2>Prisma</h2>
|
|
<p><a href="https://prisma.io">Prisma</a> is an ORM that lets you write your database schema in it's special <code>.prisma</code> syntax.</p>
|
|
<p>It has first-class support for PostgreSQL, MySQL, SQLite, SQL Server, CockroachDB and even MongoDB. Prisma then generates TypeScript types based on the schema, which lets your query your database using the <a href="https://prisma.io/client">Prisma Client</a> in a typesafe manner. It's fantastic.</p>
|
|
<p><a href="https://prisma.io/migrate">Prisma Migrate</a> is another great tool from the Prisma team to run database migrations without hassle.</p>
|
|
<p>But it also has a lot of problems. The <a href="https://rust-lang.org">Rust</a> based core of Prisma is approximately a 13 MB binary. Which means in serverless environments, the cold start times are awful because it takes a lot of time to spin up the Prisma binary. And you can pretty much forget running Prisma on the edge.</p>
|
|
<h2>PlanetScale</h2>
|
|
<p><a href="https://planetscale.com">PlanetScale</a> is a serverless MySQL database provider which is based on <a href="https://vitess.io">Vitess</a>. You get the scaling benefits of Vitess without the need to manage it yourself.</p>
|
|
<p>The PlanetScale team recently released their <a href="https://github.com/planetscale/database-js">database driver</a> which lets your query your PlanetScale database using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch">Fetch API</a>. This means you can use this library to query your database in edge environments which is HUGE.</p>
|
|
<p>Although it's a great library, it doesn't provide an typesafety.</p>
|
|
<h2>Kysely</h2>
|
|
<p>Enter <a href="https://github.com/koskimas/kysely">Kysely</a>. It's a typesafe SQL query builder. You give it your schema as a TypeScript type and you can get wonderful typesafety and autocomplete while using the query builder. Take a look at this GIF from the Kysely Readme.</p>
|
|
<p></p>
|
|
<p>It works in serverless and edge environments, even on <a href="https://deno.land">Deno</a>! It also has support for using the PlanetScale database driver using <a href="https://github.com/depot/kysely-planetscale">kysely-planetscale</a>. This is perfect.</p>
|
|
<p>The only problem is that defining schemas in TypeScript is rough. It also doesn't have anything like <a href="https://prisma.io/migrate">Prisma Migrate</a> to manage database migrations.</p>
|
|
<h2>The Idea</h2>
|
|
<p>Prisma is good at defining schemas, generating TypeScript types, and handling database migrations.</p>
|
|
<p>Kysely along with the PlanetScale database driver are good for writing SQL in a typesafe manner on the edge.</p>
|
|
<p>What if we combine both of these?</p>
|
|
<h2>Implementing the Idea</h2>
|
|
<p>Enough talking let's get to some actual code.</p>
|
|
<h3>Setting Up a Database on PlanetScale</h3>
|
|
<p>First create an account on PlanetScale and create a database. You can just sign in with your GitHub account and you're good to go.</p>
|
|
<h3>Setting Up Prisma</h3>
|
|
<p>I'll be using the newly released <a href="https://start.solidjs.com">SolidStart</a> but this should work in all frameworks that support edge environments such as <a href="https://nextjs.org">Next.js</a>, <a href="https://remix.run">Remix</a>, <a href="https://kit.svelte.dev/">SvelteKit</a>, etc.</p>
|
|
<p>Install Prisma and the Prisma Client.</p>
|
|
<pre><code>npm install -D prisma &amp;&amp; npm install @prisma/client
|
|
</code></pre>
|
|
<p>Now generate a <code>.env</code> file and a starter schema using <code>prisma init</code>.</p>
|
|
<pre><code>npx prisma init --datasouce-provider mysql
|
|
</code></pre>
|
|
<p>This command will create a <code>schema.prisma</code> file inside a <code>prisma</code> folder. It will also create a <code>.env</code> file. Add your connection string from PlanetScale in the <code>DATABASE_URL</code> variable.</p>
|
|
<pre><code>// prisma/schema.prisma
|
|
|
|
generator client {
|
|
provider = "prisma-client-js"
|
|
}
|
|
|
|
datasource db {
|
|
provider = "mysql"
|
|
url = env("DATABASE_URL")
|
|
}
|
|
</code></pre>
|
|
<p>Since PlanetScale, rather <a href="https://vitess.io/blog/2021-06-15-online-ddl-why-no-fk/">Vitess doesn't support foreign key constraints</a>, we need to set the <code>referentialIntegrity</code> property in prisma.</p>
|
|
<pre><code>// prisma/schema.prisma
|
|
|
|
generator client {
|
|
provider = "prisma-client-js"
|
|
previewFeatures = ["referentialIntegrity"]
|
|
}
|
|
|
|
datasource db {
|
|
provider = "mysql"
|
|
url = env("DATABASE_URL")
|
|
relationMode = "prisma"
|
|
}
|
|
</code></pre>
|
|
<p>Now make an <code>Example</code> model. Models in Prisma represent the tables in a SQL database.</p>
|
|
<pre><code>// prisma/schema.prisma
|
|
|
|
generator client {
|
|
provider = "prisma-client-js"
|
|
previewFeatures = ["referentialIntegrity"]
|
|
}
|
|
|
|
datasource db {
|
|
provider = "mysql"
|
|
url = env("DATABASE_URL")
|
|
relationMode = "prisma"
|
|
}
|
|
|
|
model Example {
|
|
id String @id @default(cuid())
|
|
createdAt DateTime @default(now())
|
|
updatedAt DateTime @updatedAt
|
|
text String
|
|
}
|
|
</code></pre>
|
|
<p>Push this schema to PlanetScale using <code>prisma db push</code>.</p>
|
|
<pre><code>npx prisma db push
|
|
</code></pre>
|
|
<p>This command will also run <code>prisma generate</code> which generates the TypeScript types based on your schema. It is also recommended to add <code>prisma generate</code> as a <code>postinstall</code> in <code>package.json</code> so that whenever you install the dependencies, it will generate the types for you.</p>
|
|
<pre><code>// package.json
|
|
|
|
"scripts": {
|
|
"postinstall": "prisma generate"
|
|
}
|
|
</code></pre>
|
|
<p>That is it for the Prisma setup.</p>
|
|
<h3>Setting Up Kysely</h3>
|
|
<p>Make sure you add the <code>DATABASE_USERNAME</code> and <code>DATABASE_PASSWORD</code> environment variables from PlanetScale.</p>
|
|
<p>Install Kysely, the Kysely PlanetScale Dialect, and the PlanetScale databse driver.</p>
|
|
<pre><code>npm install kysely kysely-planetscale @planetscale/database
|
|
</code></pre>
|
|
<p>Create a <code>src/server/db.ts</code> or whatever file makes sense to you and add the following code.</p>
|
|
<pre><code>// src/server/db.ts
|
|
|
|
import type { Example } from "@prisma/client/edge";
|
|
import { Kysely } from "kysely";
|
|
import { PlanetScaleDialect } from "kysely-planetscale";
|
|
|
|
interface Database {
|
|
Example: Example;
|
|
}
|
|
|
|
export const db = new Kysely&lt;Database&gt;({
|
|
dialect: new PlanetScaleDialect({
|
|
host: "aws.connect.psdb.cloud",
|
|
username: process.env.DATABASE_USERNAME,
|
|
password: process.env.DATABASE_PASSWORD,
|
|
}),
|
|
});
|
|
</code></pre>
|
|
<p>Here we're importing the <code>Example</code> type that we had defined in our schema. If you go to definition of that type, you will see that that type has all the fields we had defined in our schema correctly typed.</p>
|
|
<pre><code>export type Example = {
|
|
id: string;
|
|
createdAt: Date;
|
|
updatedAt: Date;
|
|
text: string;
|
|
};
|
|
</code></pre>
|
|
<p>The <code>Database</code> interface will contain all our types. So let's say we also have a <code>SecondExample</code> field in our database, we will have to import that type and add it in the <code>Database</code> interface. This is one of the limitations of this approach, it requires you to add new types manually.</p>
|
|
<p>Then we're exporting a Kysely instance that takes the <code>Database</code> interface as a generic. The <code>PlanetScaleDialect</code> tells Kysely to use the PlanetScale database driver to run the SQL queries.</p>
|
|
<h3>Using Kysely</h3>
|
|
<p>Note: This might look different in your framework but the Kysely code will be the same.</p>
|
|
<pre><code>// src/routes/index.tsx
|
|
|
|
import { db } from "~/server/db";
|
|
|
|
export const routeData = () =&gt; {
|
|
return createServerData$(async () =&gt; {
|
|
const examples = await db
|
|
.selectFrom("Example")
|
|
.selectAll()
|
|
.orderBy("createdAt", "desc")
|
|
.execute();
|
|
|
|
console.log(examples);
|
|
|
|
return examples;
|
|
});
|
|
};
|
|
</code></pre>
|
|
<p>You will notice which typing this is that it's all beautifully autocompleted for you. Everything is fully typesafe.</p>
|
|
<p>SolidStart also has end-to-end typesafety, so even in the UI code, the typesafety is maintained. This is similar to Remix patterns. I'm also using <a href="https://github.com/unocss/unocss">UnoCSS</a> in this example.</p>
|
|
<pre><code>// src/routes/index.tsx
|
|
|
|
export default function Home() {
|
|
const examples = useRouteData&lt;typeof routeData&gt;();
|
|
|
|
return (
|
|
&lt;main class="flex flex-col items-center h-screen bg-#050505 font-sans"&gt;
|
|
&lt;div class="flex flex-col gap-y-2"&gt;
|
|
&lt;For each={examples()}&gt;
|
|
{(example) =&gt; {
|
|
return &lt;p class="text-white"&gt;{example.text}&lt;/p&gt;;
|
|
}}
|
|
&lt;/For&gt;
|
|
&lt;/div&gt;
|
|
&lt;/main&gt;
|
|
);
|
|
}
|
|
</code></pre>
|
|
<p>You will notice that we didn't have to write any types ourselves for this. Everything is typesafe and we didn't even write any TypeScript. It's all inferred.</p>
|
|
<h3>Limitations</h3>
|
|
<p>This way of doing things can break when using <a href="https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#map"><code>@map</code></a> because the casing is different in the types. It also doesn't support <a href="https://www.prisma.io/docs/concepts/components/prisma-client/working-with-fields#working-with-decimal"><code>Prisma.Decimal</code></a> because you have to use the special Prisma object to use it. <a href="https://github.com/marklawlor">Mark Lawlor</a> has some insane TypeScript code to work around this problem but it's still very "hacky". You can see his gist <a href="https://gist.github.com/marklawlor/b1c26eefba43539c6611a508e67ee02f">here</a>.</p>
|
|
<p>Update: A wonderful package called <a href="https://github.com/valtyr/prisma-kysely"><code>prisma-kysely</code></a> created by <a href="https://valtyr.is/">Valtýr</a> does all of this for you. You should probably use it instead of the approach I've shown here.</p>
|
|
<h2>Conclusion</h2>
|
|
<p>Hopefully that all made sense. I think it is pretty cool. That's it really. Thanks for reading!</p>
|
|
</content:encoded></item><item><title>My Developer Workflow Using WSL, tmux and Neovim</title><link>https://www.nexxel.dev/blog/wsl-workflow/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/wsl-workflow/</guid><description>I live on the terminal now. Learn about the tools I use set up a productive developer environment.</description><pubDate>Tue, 16 Aug 2022 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<p></p>
|
|
<p>Hi! Today I'm gonna talk about my daily developer workflow and all the tools I use to set up a productive enviroment for coding. I think having a nice looking terminal and some tools to save time are really helpful to keep you productive in daily coding sessions.</p>
|
|
<h2>Operating System</h2>
|
|
<p>I use Windows and it's pretty much unusable for programming. Thankfully Microsoft understood that and made <a href="https://docs.microsoft.com/en-us/windows/wsl/">Windows Subsystem for Linux</a> also known as <code>WSL</code> in short. It lets you run a Linux distribution inside of Windows.</p>
|
|
<p>I use <a href="https://ubuntu.com/">Ubuntu</a>, it's the default distribution that is installed with <code>WSL</code>. Ubuntu is really simple to use and has a huge community so getting support is very easy. I highly recommend it for anyone who wants to start using Linux and get familiar with basic Linux commands.</p>
|
|
<h2>Shell</h2>
|
|
<p>Ubuntu by default comes with the bash shell. Bash is great but I personally find it harder to customize. That is why I use <a href="https://zsh.org/">Z shell</a>, more commonly known as <code>zsh</code>. To manage my <code>zsh</code> configuration, I use <a href="https://ohmyz.sh/">Oh My Zsh</a>. It has a huge community and makes it trivial to install and use plugins.</p>
|
|
<p>I used to use <a href="https://fishshell.com/">fish</a> which is also a great shell. It has very sensible defaults and comes with a lot of cool features like autosuggestions, tab completions, etc. out of the box without the need to set up anything. The only problem with fish is that it is not <code>POSIX-compliant</code>. <a href="https://en.wikipedia.org/wiki/POSIX">POSIX</a> is a set of standards that define how to develop programs for UNIX based operating systems. So in fish, things like bash scripts do not work. They have their own scripting language.</p>
|
|
<p><code>zsh</code> on the other hand is fully POSIX-compliant. This is why I switched to <code>zsh</code> and I'm quite happy with it so far.</p>
|
|
<h2>Prompt</h2>
|
|
<p>I use <a href="https://starship.rs/">Starship</a> for my prompt and it is AMAZING. Written in <a href="https://rust-lang.org/">Rust</a>, Starship is a minimal, highly customizable and super fast prompt. The default look of it is really good but literally every little detail is customizable to your liking. To install Starship refer to these <a href="https://starship.rs/guide/#%F0%9F%9A%80-installation">docs</a>.</p>
|
|
<p>The configuration file for Starship lives in <code>~/.config/starship.toml</code>. Here's my <code>starship.toml</code>.</p>
|
|
<pre><code># ~/.config/starship.toml
|
|
|
|
[aws]
|
|
symbol = " "
|
|
|
|
[conda]
|
|
symbol = " "
|
|
|
|
[dart]
|
|
symbol = " "
|
|
format = "via [$symbol]($style)"
|
|
|
|
[directory]
|
|
read_only = " "
|
|
truncation_length = 1
|
|
|
|
[docker_context]
|
|
symbol = " "
|
|
|
|
[elixir]
|
|
symbol = " "
|
|
format = 'via [$symbol]($style)'
|
|
|
|
[elm]
|
|
symbol = " "
|
|
|
|
[git_branch]
|
|
symbol = " "
|
|
|
|
[golang]
|
|
symbol = " "
|
|
format = 'via [$symbol]($style)'
|
|
|
|
[hg_branch]
|
|
symbol = " "
|
|
|
|
[java]
|
|
symbol = " "
|
|
format = 'via [$symbol]($style)'
|
|
|
|
[julia]
|
|
symbol = " "
|
|
|
|
[memory_usage]
|
|
symbol = " "
|
|
|
|
[nim]
|
|
symbol = " "
|
|
|
|
[nix_shell]
|
|
symbol = " "
|
|
|
|
[nodejs]
|
|
symbol = " "
|
|
format = 'via [$symbol]($style)'
|
|
|
|
[package]
|
|
symbol = " "
|
|
|
|
[perl]
|
|
symbol = " "
|
|
|
|
[php]
|
|
symbol = " "
|
|
|
|
[python]
|
|
symbol = " "
|
|
format = 'via [$symbol]($style)'
|
|
|
|
[ruby]
|
|
symbol = " "
|
|
|
|
[rust]
|
|
format = 'via [$symbol]($style)'
|
|
|
|
[scala]
|
|
symbol = " "
|
|
|
|
[shlvl]
|
|
symbol = " "
|
|
|
|
[swift]
|
|
symbol = "ﯣ "
|
|
format = 'via [$symbol]($style)'
|
|
|
|
[git_status]
|
|
disabled = true
|
|
</code></pre>
|
|
<p>The icons aren't showing up here because you need a <a href="https://github.com/ryanoasis/nerd-fonts">nerd font</a> for that. If you set up a Nerd Font (I recommend <a href="https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Hack">Hack</a>), and copy this configuration, you'll get a very minimal looking prompt like this. For more information on configuring Starship, you can look at the docs <a href="https://starship.rs/config/">here</a>.</p>
|
|
<p></p>
|
|
<p>Having a nice looking terminal always helps!</p>
|
|
<h2>Persistent Terminal Sessions with tmux</h2>
|
|
<p><a href="https://en.wikipedia.org/wiki/Tmux">tmux</a> is a terminal multiplexer. It lets you have multiple persistent terminal sessions and come back to them without terminating the existing running processes. So you can return to a workspace, exactly where you left it. It also allows you to manage multiple windows and panes inside a session.</p>
|
|
<p>For example, to go to my website's workspace, I just have to type <code>website</code> and I'm there.</p>
|
|
<p></p>
|
|
<p>Here <code>website</code> is an alias I've set up to open the <code>website</code> tmux session.</p>
|
|
<pre><code># .zshrc
|
|
|
|
alias website="tmux attach-session -t website"
|
|
</code></pre>
|
|
<p>This way I can jump into any one of my workspaces really quickly and start coding. It also helps that I'm exactly where I left off. I highly recommend tmux for local development, it has changed how I work and increased my productivity by a massive amount.</p>
|
|
<h2>Neovim</h2>
|
|
<p>I had been using <a href="https://code.visualstudio.com/">VSCode</a> as my code editor since the first day I started learning programming, but recently I have switched to <a href="https://neovim.io/">Neovim</a>. It is a modern version of <a href="https://www.vim.org/">Vim</a>.</p>
|
|
<p>Neovim is the best code editor for me because of its speed and ease of customization. All the configuration is written in <a href="https://www.lua.org/">Lua</a>, which is very easy to learn and write. It helps me be really fast and productive because I never have to take my hands off of my keyboard.</p>
|
|
<p>You can find my Neovim configuration <a href="https://github.com/nexxeln/nvim">here</a>. It's just a fork of <a href="https://github.com/craftzdog/dotfiles-public">craftzdog's configuration</a>.</p>
|
|
<p></p>
|
|
<p></p>
|
|
<h2>zoxide</h2>
|
|
<p>You might have seen in some of the screenshots that I just have to run <code>z license-generator</code> to jump to that directory. That is <a href="https://github.com/ajeetdsouza/zoxide"><code>zoxide</code></a>. Also written in <a href="https://rust-lang.org/">Rust</a>, it's a smarted <code>cd</code> command that remembers which directories you visit frequently, so you can jump to those directories with just one command.</p>
|
|
<p></p>
|
|
<p>The above GIF is from the <a href="https://github.com/ajeetdsouza/zoxide">zoxide GitHub repository</a>. Use <code>zoxide</code> to never go back to <code>cd</code> hell again.</p>
|
|
<h2>exa</h2>
|
|
<p><a href="https://github.com/ogham/exa"><code>exa</code></a> is a modern replacement of the <code>ls</code> command. I always find myself using <code>exa</code> to get familiar with the files in a new codebase.</p>
|
|
<p></p>
|
|
<p></p>
|
|
<p>As you can see in the screenshot, <code>exa</code> has a more readable output with colors and icons which you can look at and instantly know the filetypes of different files. It is also noticeably faster than <code>ls</code>.</p>
|
|
<p>It also has a <a href="https://github.com/ogham/exa#command-line-options">lot of flags</a> which display the data is different formats. Here are the aliases I've set up for <code>exa</code>.</p>
|
|
<pre><code># .zshrc
|
|
|
|
alias ll="exa -l -g --icons --git"
|
|
alias llt="exa -1 --icons --tree --git-ignore"
|
|
</code></pre>
|
|
<h2>Conclusion</h2>
|
|
<p>That was a quick overview of all the tools I use on a day-to-day basis for coding. I think it's really important to spend some time working on your workflow and coding setup, it will make you faster over time. I hope you found the tools I listed useful and will incorporate them in your workflow too!</p>
|
|
<p>Thanks for reading!</p>
|
|
</content:encoded></item><item><title>T3 Stack and My Most Popular Open Source Project Ever</title><link>https://www.nexxel.dev/blog/ct3a/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/ct3a/</guid><description>create-t3-app recently reached 100 stars on GitHub and is my most popular open source project. Learn more about it!</description><pubDate>Mon, 27 Jun 2022 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<p><a href="https://github.com/nexxeln/create-t3-app">create-t3-app</a> recently reached 90 stars on GitHub and is my most popular open source project with a lot of people contributing. Now you may be wondering, what the hell is it? Let's take a look at the t3 stack and how you can use create-t3-app.</p>
|
|
<h2>T3 stack</h2>
|
|
<p>The T3 stack was made by <a href="https://www.youtube.com/c/TheoBrowne1017">Theo</a> who is a really cool dev and makes awesome content on YouTube. The stack consists of:</p>
|
|
<ul>
|
|
<li><a href="https://nextjs.org">Next.js</a></li>
|
|
<li><a href="https://trpc.io">tRPC</a></li>
|
|
<li><a href="https://tailwindcss.com">TailwindCSS</a></li>
|
|
<li><a href="https://typescriptlang.org">TypeScript</a></li>
|
|
<li><a href="https://prisma.io">Prisma</a></li>
|
|
</ul>
|
|
<p>I love this stack, if you want to know more about them checkout <a href="https://init.tips">init.tips</a> and <a href="https://twitter.com/DhravyaShah/status/1540589276810711040">this twitter thread</a> from @dhravya.</p>
|
|
<p>The only downside of this stack is the boilerplate, I had to open the docs, install all the packages, create a bunch of files just to set it up.</p>
|
|
<p>Theo had also mentioned on stream how it would be very convenient to set up a project just by running <code>npx create-t3-app</code>. So I did just that!</p>
|
|
<h2>create-t3-app</h2>
|
|
<p><code>create-t3-app</code> makes it really convenient to scaffold a starter project using the T3 stack.</p>
|
|
<h3>Usage</h3>
|
|
<pre><code>npx create-t3-app@latest
|
|
# or
|
|
yarn create t3-app
|
|
# or
|
|
pnpm create t3-app@latest
|
|
</code></pre>
|
|
<p>It will let you select the packages you want and install them and create all the files those packages need.</p>
|
|
<p>I started working on the CLI in May and back then I had no experience with Node CLIs, but it was definitely a great learning experience for me.</p>
|
|
<p>Now the project has matured a lot and it's amazing to see Theo's community opening issues and contributing everyday, it's really great.</p>
|
|
<h2>Maintaining Open Source</h2>
|
|
<p>I have a lot of respect for OSS maintainers now because honestly, it is a really hard job. Looking at issues, reviewing and discussing PRs, it's definitely a bit tiring.</p>
|
|
<p>I recently had burnout from this and took a 2 day break and just built a bunch of static sites. Theo's community is awesome though, we agree on most things and I rarely write code for the CLI now, people just open issues and make PRs, I just have to review and merge them.</p>
|
|
<p>Overall this project has been a really great experience, I learnt so many things, from node CLIs to maintaining open source. Please do try the CLI out and open issues if you find bugs.</p>
|
|
<ul>
|
|
<li>Github: <a href="https://github.com/nexxeln/create-t3-app">nexxeln/create-t3-app</a></li>
|
|
<li>Website: <a href="https://create.t3.gg">create.t3.gg</a></li>
|
|
<li>T3 Stack: <a href="https://init.tips">init.tips</a></li>
|
|
<li>Theo: <a href="https://twitter.com/t3dotgg">twitter.com/t3dotgg</a></li>
|
|
</ul>
|
|
<p>Thank you for reading!</p>
|
|
</content:encoded></item><item><title>Create Licenses for Your Projects Right from the Terminal</title><link>https://www.nexxel.dev/blog/gen-license/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/gen-license/</guid><description>I made a CLI in Rust to generate licenses for open source projects.</description><pubDate>Fri, 25 Mar 2022 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";
|
|
import { createHeading } from "../../components/Heading";</p>
|
|
<p>export const components = {
|
|
a: Link,
|
|
code: Code,
|
|
h1: createHeading("h1"),
|
|
h2: createHeading("h2"),
|
|
h3: createHeading("h3"),
|
|
};</p>
|
|
<p>I'm the type of person who is constantly working on open source projects. But whenever I create a new repository, I haven't yet decided what license I should put the code under. So, I always had to add it at the end when I have pushed all the code. But it was just too much work: go to GitHub, click <code>Create File</code>, type <code>LICENSE</code>, choose the license and then push it and finally pull the changes locally. So I decided to make a CLI License Generator, in Rust.</p>
|
|
<p>This was a nice project to build since I hadn't written Rust code in a while, so it was a good refresher.</p>
|
|
<h2>Introducing gen-license</h2>
|
|
<p></p>
|
|
<p>It's as simple as that, it even automatically gets your username from your global git config file!</p>
|
|
<p>Here's the source code: <a href="https://github.com/nexxeln/license-generator">nexxeln/license-generator</a>.</p>
|
|
<h2>Installation</h2>
|
|
<pre><code>cargo install gen-license
|
|
</code></pre>
|
|
<p>If you don't have cargo installed, you can download the executable from the <a href="https://github.com/nexxeln/license-generator/releases">releases</a> section of the GitHub repository.</p>
|
|
<h2>Usage</h2>
|
|
<pre><code>gen-license
|
|
</code></pre>
|
|
<p>That's pretty much it! Thank you for reading this far. If you want me to explain some of the code behind this, feel free to ask in the comment section.</p>
|
|
<p>Please do give your feedback and leave a star on <a href="https://github.com/nexxeln/license-generator">GitHub</a> if you liked it!</p>
|
|
</content:encoded></item><item><title>I Made a Wordle Clone</title><link>https://www.nexxel.dev/blog/nexdle/</link><guid isPermaLink="true">https://www.nexxel.dev/blog/nexdle/</guid><description>Nexdle is a wordle clone made with React, TypeScript, TailwindCSS, Vite, Zustand and tested with Vitest.</description><pubDate>Mon, 21 Mar 2022 00:00:00 GMT</pubDate><content:encoded><p>import Link from "../../components/Link.vue";
|
|
import Code from "../../components/Code.vue";</p>
|
|
<p>export const components = { a: Link, code: Code };</p>
|
|
<p>Yes that's right, another wordle clone. You can play it <a href="https://nexdle.nexxel.dev/">here</a>.</p>
|
|
<p><a href="https://nexdle.nexxel.dev/">nexdle</a> is a <a href="https://www.nytimes.com/games/wordle/index.html">wordle</a> clone made with <a href="https://reactjs.org/">React</a>, <a href="https://www.typescriptlang.org/">TypeScript</a>, <a href="https://tailwindcss.com/">TailwindCSS</a>, <a href="https://vitejs.dev/">Vite</a>, <a href="https://github.com/pmndrs/zustand">Zustand</a> and tested with <a href="https://vitest.dev/">Vitest</a>.</p>
|
|
<p>This project was a great learning experience for me. Things I learnt while making nexdle:</p>
|
|
<ul>
|
|
<li>CSS Grids</li>
|
|
<li>Using state management libraries (<a href="https://github.com/pmndrs/zustand">Zustand</a> in this case)</li>
|
|
<li>Using testing tools like Jest (<a href="https://vitest.dev/">Vitest</a> in this case)</li>
|
|
</ul>
|
|
<p>Before this I had made a simple <a href="https://github.com/nexxeln/todo-app">todo-app</a> to get comfortable with using TypeScript in React projects. Now after using it for 2 projects, I'm absolutely in love with it. TypeScript is just so good for catching errors before shipping the app to production, and the autocomplete you get is just crazy. It takes the developer experience to a whole another level.</p>
|
|
<p>I used TailwindCSS for all the styling because lets face it, CSS is really
|
|
fricking hard. Tailwind just makes it really simple and quick to make a stunning
|
|
ui. Just add pre-built CSS utility classes and you're good to go!</p>
|
|
<p>I didn't use <code>create-react-app</code> for this project. Instead I used Vite.
|
|
Vite is a module bundler, just like webpack. Since I've come across Vite, I
|
|
haven't gone back to <code>create-react-app</code>. It's just faster, has less dependencies
|
|
so the build size is less. If you haven't tried it yet, I highly recommend you
|
|
do!</p>
|
|
<p>I finally learnt how to use state management libraries. In this project I used Zustand,
|
|
which is like a bare bones version of <a href="https://redux.js.org/">Redux</a>. It's better
|
|
than using the Context API as its less boilerplatey. I figured for a small project
|
|
I don't really need to use a heavy library like Redux.</p>
|
|
<p>A few weeks ago I learnt how to use <a href="https://jestjs.io/">Jest</a> and I was really excited to try it out here. But I found out that it wasn't compatible with Vite. So I found this really awesome library called Vitest. Honestly, testing was the most fun part of the whole project. It helps you catch bugs before production and is just really fun to do.</p>
|
|
<p></p>
|
|
<p>Vitest also has this crazy ui testing option, I haven't explored it a lot but it's just insane. Check this out:</p>
|
|
<p>
|
|
I also uploaded this gif to <a href="https://youtu.be/2GLYNV5cQ-Y">YouTube</a> since it's kind
|
|
of long. You can watch it there if you prefer that.</p>
|
|
<p>So that's it for this blog. All the code for nexdle can be found <a href="https://github.com/nexxeln/nexdle/">here</a>.</p>
|
|
<p>If you made it this far thanks for reading!</p>
|
|
</content:encoded></item></channel></rss> |