Forem: Shoubhit Dash

Why I Switched From Neovim to VSCode

Shoubhit Dash — Sat, 24 Jun 2023 10:48:13 +0000

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.

Why I used Neovim in the past

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 acutally writing code.

I had heard of Neovim as it was the most loved editor on the Stack Overflow survey and also from YouTubers like ThePrimeagen and TJ DeVries. 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.

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

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.

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 me, tailored to my specific needs. There's also something really satsifying about using an editor you configured yourself.

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.

Why I Switched Back to VSCode

Here are the reasons why I switched back to VSCode in no particular order.

Copilot

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

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 GitHub Copilot X stuff, currently invite-only (I got an invite to test Copilot Chat) which only supports VSCode for now.

Tiring Neovim Plugin Ecosystem

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 :PackerSync 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.

Oh and now there's this new plugin manager that everyone is using called lazy.nvim 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.

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.

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.

Configuration

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.

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.

I Got a New Laptop

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.

It's only gotten hot once when running some Docker Dev Containers along with Spotify, and my browser, which is understandable. But other than that, it's been great.

VSCode Only Tools

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 UnoCSS only has a VSCode extension, and it's my favourite way to write CSS. Astro has a LSP but I've found that the experience in VSCode is much better than in Neovim.

I've also noticed that the TypeScript LSP is a bit faster in VSCode as well.

Why Not Use a Neovim Distro?

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.

Conclusion

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.

Let me know if you enjoyed this post, and thank you for reading!

Everything I Installed on My New Mac

Shoubhit Dash — Sat, 03 Jun 2023 12:19:20 +0000

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.

Arc

I've been recently using this pretty innovative new browser called Arc and I must say, it's really cool! It is built on top of Chromium but what sets it apart is its unique features. Super customizable themes, Spaces for separating different workspaces, Boosts 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!

Raycast

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

Alacritty

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 iTerm or Kitty but I don't mind that because I use it with tmux which I have previously written about in my workflow post.

Homebrew

Homebrew is an excellent package manager for macOS. It made installing all the tools I needed a breeze. Need node? brew install node. Need neovim? brew install neovim. You get the idea. It's a must- have if you're using a Mac.

Fish Shell

Since writing my wsl workflow post, I've switched from zsh to fish. 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.

Starship

For my prompt, I still use Starship although my configuration has changed a bit. I've switched the pure preset which is a lot more minimal and less distracting.

GitHub CLI

GitHub CLI 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 brew install gh away.

Other Coding Tools

fnm

fnm is a fast and simple Node.js version manager. It's really easy to use and is much faster than nvm.

exa

I still use exa for listing files in the terminal. It's a modern replacement for ls with a lot of useful features. With icons, colors, and git integration, it makes listing files much nicer.

I use the same aliases that I did before.



  
  
  ~/.config/fish/config.fish


alias ll="exa -l -g --icons --git"

alias llt="exa -1 --icons --tree --git-ignore"

zoxide

I also still use zoxide for navigating directories. It's a smarter cd command that learns your habits and makes navigating directories a breeze.

bat

bat is a modern replacement for cat 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 fzf and opening that file in neovim.

Here's the alias.



alias search="fzf --preview 'bat --color=always --style=numbers --line-range=:500 {}' | xargs nvim"

Conclusion

That's it! That's everything I installed on my new Mac. I hope you found this useful. Thanks for reading!

Rust: Not Just Zoom Zoom Fast

Shoubhit Dash — Sat, 25 Feb 2023 14:28:06 +0000

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.

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.

Practical Immutability

In Rust, variables can be declared as either immutable or mutable using the mut 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.

let x = 5; // immutable
let mut y = 5; // mutable

y = 6; // ok
x = 6; // error: cannot assign twice to immutable variable `x`

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.

fn increment(num: &mut i32) {
    *num += 1; // dereference the pointer to mutate the value
}

fn main() {
    let mut x = 10; // x is mutable
    increment(&mut x); // pass a mutable reference to x

    println!("x: {}", x); // prints "x: 11"
}

By embracing immutability as a default and using mutable variables only when necessary, Rust code becomes more robust and predicatable.

Algrebraic Data Types (ADTs) and Pattern Matching

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

For example, consider a program that represents the types of shapes. We can use an enum to represent the different types of shapes:

enum Shape {
    Circle(f64),
    Rectangle(f64, f64),
    Triangle(f64, f64, f64),
}

Here, we have defined an enum Shape that has three variants: Circle that takes a single f64 argument representing the radius, Rectangle that takes two f64 arguments representing the length and width, and Triangle 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.

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 switch 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 whole blog post on pattern matching btw.

fn area(shape: Shape) -> f64 {
    match shape {
        // pi * radius^2
        Shape::Circle(radius) => std::f64::consts::PI * radius * radius,

        // length * width
        Shape::Rectangle(length, width) => length * width,

        // Heron's formula: sqrt(s * (s - a) * (s - b) * (s - c)) where s = (a + b + c) / 2
        Shape::Triangle(side1, side2, side3) => {
            let s = (side1 + side2 + side3) / 2.0;
            (s * (s - side1) * (s - side2) * (s - side3)).sqrt()
        }
    }
}

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.

ADTs along with pattern matching make it trivial to create and handle complex data types in a safe and concise way.

Built-In Abstractions

Rust provides powerful built-in abstractions that help in writing correct and safe code easily. Two of the most important abstractions in Rust are Option and Result. 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 Option and Result in detail, and see how they can be used to write more reliable and error-free Rust code.

No Null, No Problem (Option)

Rust replaces the concept of null with the Option type, providing a safer alternative that eliminates the risks associated with null values. Option is an enum that can be either Some with a value or None 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 Option type is defined in Rust:

enum Option<T> {
    Some(T),
    None,
}

By using Option, 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 Maybe monad or OCaml's option type.

Let's look at Option 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 None. Otherwise, we want to return Some with the largest integer. Here's how we can implement this function in Rust:

fn largest(numbers: Vec<i32>) -> Option<i32> {
    if numbers.is_empty() {
        return None;
    }

    let mut largest = numbers[0];

    for num in numbers {
        if num > largest {
            largest = num;
        }
    }

    Some(largest)
}

Now we can use this function and use pattern matching to handle the both cases:

fn main() {
    let numbers = vec![1, 2, 3];

    match largest(numbers) {
        Some(num) => println!("Largest number: {}", num),
        None => println!("No largest number"),
    }
}

And this works!

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 Option and use the max function to get the largest number:

fn largest(numbers: Vec<i32>) -> Option<i32> {
    numbers.into_iter().max()
}

This also automatically handles the case where the vector is empty, returning None for us. Rust's standard library is full of useful functions like this.

Want to return the double of the largest of the even numbers but only if it's less than 100? No problem!

fn largest_even_less_than_100(numbers: Vec<i32>) -> Option<i32> {
    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<i32>
        .map(|num| num * 2) // double the Some value inside the Option, leaves None unchanged
        .filter(|num| num < &100) // only return Some if the value is less than 100
}

I think you get the point.

When Things Don't Go As Planned (Result)

Rust's Result 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. Result is an enum with two possible variants - Ok and Err. Ok represents the successful result of an operation, while Err represents an error that occurred during the operation. Here's how the Result type is defined in Rust:

enum Result<T, E> {
    Ok(T),
    Err(E),
}

You might be familiar with this pattern from other languages like Haskell's Either monad or OCaml's result type.

Let's look at an example of how Result 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 Result type to handle the possible error case:

fn divide(x: i32, y: i32) -> Result<i32, &'static str> {
    if y == 0 {
        return Err("Cannot divide by zero");
    }
    Ok(x / y)
}

Now we can use this function and handle the success and error cases:

fn main() {
    match divide(10, 2) {
        Ok(result) => println!("Result: {}", result),
        Err(error) => println!("Error: {}", error),
    }
}

Pretty simple, right? Let's look at some functions Rust provides to make working with Result a breeze.

Say we wanted to add 10 to the result of a chained division operation. We could use nested match statements but that's a bit ugly and verbose. Rust has us covered with the and_then and map functions:

fn main() {
    let result = divide(10, 2)
        .and_then(|x| divide(x, 2))
        .map(|x| x + 10);

    match result {
        Ok(result) => println!("Result: {}", result),
        Err(error) => println!("Error: {}", error),
    }
}

This is a lot more concise than using nested match statements. Rust's standard library provides a lot more functions for working with Result and Option, so be sure to check them out.

Vibrant Community and Ecosystem

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.

Here are some key aspects of Rust's ecosystem and community:

Rustup - 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.
Cargo - 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 crates.io, Rust's official package registry. It can also do benchmarks, and even manage multiple projects in the same repository using workspaces.
Libraries - 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.
Tooling - Rust has a strong focus on developer tools. Tools like Rustfmt, Clippy, and Rust Analyzer that help with code formatting, linting, and analysis.
Community - 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 Rust's community discord server. It's a great place to get help with Rust and meet other Rustaceans.

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.

Some Other Cool Resources

Implementing the Pipe Operator in TypeScript

Shoubhit Dash — Sat, 21 Jan 2023 16:37:45 +0000

What is the pipe operator?

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



"hello"
|> String.upcase() # turn string into uppercase
|> String.reverse() # reverse the string returned from `String.upcase()`
|> IO.puts() # print the output from `String.reverse()`

# "OLLEH"

In the example above, the pipe operator |> 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 Advent of Code 2022 day 1 pt.2.



File.read!("./input.txt")
|> String.split("\n\n")
|> Enum.map(fn elf ->
  elf
  |> String.split("\n")
  |> Enum.map(fn e -> e |> String.to_integer() end)
  |> Enum.sum()
end)
|> Enum.sort(:desc)
|> Enum.slice(0..2)
|> Enum.sum()
|> IO.inspect()

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.

Implementing the pipe operator in TypeScript

After watching Theo's video on the proposal for adding pipes in JavaScript, I was inspired to implement the pipe operator as a function that composes functions together. Here is what I set out to achieve.



const len = (s: string): number => s.length;
const double = (n: number): number => n * 2;
const square = (n: number): number => n ** 2;

console.log(pipe("hi", len, double, square)); // 16

Initial implementation

This was my first iteration of the pipe function.



const pipe = (value: any, ...fns: Function[]) =>
  fns.reduce((acc, fn) => fn(acc), value);

Here's what this code is doing:

The function takes two arguments: value of any type, and fns which is an array of functions. The spread operator ... allows for any number of functions to be passed in.
The reduce 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.
The callback function passed to reduce takes two arguments: acc which is the accumulator, and fn which is the current function in the array. The first function in the array is applied to the initial value, which is the value argument passed to the function. Each subsequent function is applied to the output of the previous function, chaining them together.
It then returns the output of the last function in the array.

And this works!

Problems with the initial implementation

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

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:



type Fn = (...args: any[]) => any;

type LastReturnType<L extends Fn[]> = L extends [...any, infer Last extends Fn]
  ? ReturnType<Last>
  : never;

const pipe = <Funcs extends Fn[]>(value: any, ...fns: Funcs) =>
  fns.reduce((acc, fn) => fn(acc), value) as LastReturnType<Funcs>;

This is definitely some crazy TypeScript. Let's break it down.

Fn is a type alias for a function that takes any number of arguments of any type and returns any type.
LastReturnType is a generic type that takes an array of functions and returns the return type of the last function in the array. The infer keyword is used to infer the type of the last function in the array.
It uses variadic tuple types to know what the last function in the tuple is and then uses the ReturnType type utility to get the return type of the last function.
Then the pipe function is defined as a generic function that takes an initial value of any type and an arbitrary number of functions of the Fn type. It then casts the return value of the function to the return type of the last function in the array.

So now the type of the returned value is inferred correctly.

But there's still a problem. Let me demonstrate it with an example.



// 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")));

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 pipe function does not show any errors.

This is a perfect use case for Higher Kinded Types. Unfortunately, TypeScript does not support Higher Kinded Types yet. There isn't a way to say "for all these functions, the input type is contravariant to the output type of the previous function".

So what's the solution?

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 pipe function and use function overloading to define the type of the returned value.



function pipe<A>(value: A): A;
function pipe<A, B>(value: A, fn1: (input: A) => B): B;
function pipe<A, B, C>(value: A, fn1: (input: A) => B, fn2: (input: B) => C): C;
function pipe<A, B, C, D>(
  value: A,
  fn1: (input: A) => B,
  fn2: (input: B) => C,
  fn3: (input: C) => D
): D;
function pipe<A, B, C, D, E>(
  value: A,
  fn1: (input: A) => B,
  fn2: (input: B) => C,
  fn3: (input: C) => D,
  fn4: (input: D) => E
): E;
// ... and so on

function pipe(value: any, ...fns: Function[]): unknown {
  return fns.reduce((acc, fn) => fn(acc), value);
}

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.

The first five function declarations are overloads of the pipe 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 pipe function.

The first overload takes a single argument of generic type A and returns the same value without applying any function to it.
The second overload takes two arguments, value of type A, and fn1 a function that takes an argument of type A and returns a value of type B.
The third overload takes three arguments, value of type A, fn1 a function that takes an argument of type A and returns a value of type B, and fn2 a function that takes an argument of type B and returns a value of type C.
There can be any number of overloads, but I've only defined five for demonstration purposes.

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

The last function declaration is the actual implementation of the pipe 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.

The advantage of this implementation is that it allows the pipe 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 pipe function have the correct signature.

Overloading without using the function keyword

I love my arrow functions and almost never use the fuction keyword. Unfortunately, we can't use arrow functions for overloading. We can only use the function 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.



interface Pipe {
  <A>(value: A): A;
  <A, B>(value: A, fn1: (input: A) => B): B;
  <A, B, C>(value: A, fn1: (input: A) => B, fn2: (input: B) => C): C;
  <A, B, C, D>(
    value: A,
    fn1: (input: A) => B,
    fn2: (input: B) => C,
    fn3: (input: C) => D
  ): D;
  <A, B, C, D, E>(
    value: A,
    fn1: (input: A) => B,
    fn2: (input: B) => C,
    fn3: (input: C) => D,
    fn4: (input: D) => E
  ): E;
  // ... and so on
}

const pipe: Pipe = (value: any, ...fns: Function[]): unknown => {
  return fns.reduce((acc, fn) => fn(acc), value);
};

This is same as the previous implementation, but we're using an interface to implement the overloads instead of using the function keyword. This way we can use arrow functions for the actual implementation. Pretty neat, right? Everything still works!

Conclusion

I hope you enjoyed this article. I've learned a lot while writing it, and I hope you did too. Thanks for reading!

References

TypeScript Handbook
LastReturnType implementation by u/i_fucking_hate_money
Remeda's pipe implementation
u/GoodnessManifest's pipe implementation with overloads in an interface
Proposal for adding the pipe operator to JavaScript

Expressive Code with Pattern Matching

Shoubhit Dash — Thu, 29 Dec 2022 18:31:34 +0000

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.

What is Pattern Matching?

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.

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:

(* basic.ml *)

let greet name =
  match name with
  | "nexxel" -> print_string "Hi, nexxel!"
  | "Ludwig" -> print_string "Crazy how you look exactly like Mogul Mail"
  | _ -> print_string "Who are you?"

Here we have defined a function called greet that takes a single argumentname. The match keyword is used to define a pattern match, and the with keyword is used to specify the different patterns to be matched.

The first pattern is "nexxel" -> print_string "Hi, nexxel!", which means that if name is equal to "nexxel", it will execute the print statement. Similarly, if name is equal to "Ludwig" it will execute the respective print statement. The last pattern is _ -> print_string "Who are you?", which means that if name is anything other than "nexxel" or "Ludwig", it will print "Who are you?".

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.

Why Use Pattern Matching?

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 factorial of a number.

(* factorial.ml *)

let rec factorial n =
  match n with
  | 0 -> 1
  | n -> n * factorial (n - 1)

This code uses a recursive function (rec is used to define recursive functions) and pattern matching to calculate the factorial of a given number. The pattern 0 is matched if n is equal to 0, in which case the function returns 1. Otherwise, the pattern n is matched, and the function calls itself with n - 1 as the argument.

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:

# factorial.py

def factorial(n):
    def loop(i, acc):
        if i > n:
            return acc
        else:
            return loop(i + 1, acc * i)
    return loop(1, 1)

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.

Pattern Matching in Practice

Conditionals

We already saw the factorial example, but let's take another example to calculate the nth term of the Fibonacci sequence.

(* fibonacci.ml *)

let rec fib n =
  match n with
  | 0 -> 0
  | 1 -> 1
  | n -> fib (n - 1) + fib (n - 2)

Here, the fib function uses pattern matching to define three cases:

If n is equal to 0, it returns 0.
If n is equal to 1, it returns 1.
If n is neither 0 nor 1, the function calls itself with n - 1 and n - 2 as arguments and returns the sum of the two results.

Here's an imperative implementation of the same function in TypeScript:

// fibonacci.ts

const fib = (n: number): number => {
  if (n === 0) {
    return 0;
  } else if (n === 1) {
    return 1;
  } else {
    let a = 0;
    let b = 1;

    for (let i = 2; i <= n; i++) {
      [a, b] = [b, a + b];
    }

    return b;
  }
};

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.

// fibonacci.ts

const fib = (n: number): number => {
  if (n === 0) {
    return 0;
  } else if (n === 1) {
    return 1;
  } else {
    return fib(n - 1) + fib(n - 2);
  }
};

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.

Usage with Algebraic Data Types

Pattern matching is also used with algebraic data types, 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 binary tree:

(* binary_tree.ml *)

type tree =
  | Leaf
  | Node of int * tree * tree


let binary_tree = Node(1, Node(2, Leaf, Leaf), Node(3, Leaf, Leaf))

The tree type is an ADT, where the value of type tree can either be a Leaf or Node. This ADT has two constructors: Leaf and Node. The Leaf constructor takes no arguments and represents a leaf node, i.e. a node with no subtrees. The Node constructor takes three arguments: an integer value, and two subtrees.

Now that we have defined the tree ADT, we can use it to create a binary tree. The binary_tree variable is a tree value that represents the following binary tree:

    1
   / \
  2   3
 / \ / \

Now we can use pattern matching to deconstruct the tree 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:

(* binary_tree.ml *)

let rec sum_tree tree =
  match tree with
  | Leaf -> 0
  | Node(value, left, right) -> value + sum_tree left + sum_tree right

(* let () = print_int (sum_tree binary_tree) *)
(* 6 *)

The sum_tree function takes a tree value as an argument and uses pattern matching to deconstruct it. If the tree is a Leaf, it returns 0. Otherwise, it returns the value of the node plus the sum of the values of the left and right subtrees.

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.

Navigating Complex Data Structures

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 variant type to represent a polynomial:

(* 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

The polynomial type is a generic type that takes in a type parameter 'a. It is a placeholder for a type that will be specified later when the type is used. polynomial and has six variants. The Zero variant represents the polynomial 0, the Const variant represents a constant polynomia, the Var variant represents the polynomial x. The Sum variant represents the sum of two polynomials. The Prod variant represents the product of two polynomials. The Power variant represents the polynomial raised to a power.

We can now use pattern matching to define a function that evaluates a polynomial at a given value of x:

(* polynomial.ml *)

(* `function` is just syntatic sugar for `match x with` *)
let rec eval x = function
  | Zero -> 0
  | Const c -> c
  | Var -> x
  | Sum (p1, p2) -> eval x p1 + eval x p2
  | Prod (p1, p2) -> eval x p1 * eval x p2
  | Power (p, n) -> int_of_float (float_of_int (eval x p) ** float_of_int n)

Here, eval is a recursive function which uses pattern matching to define the cases for the different variants of the polynomial type.

If the polynomial is Zero, the function returns 0.
If the polynomial is Const, the function returns the constant value.
If the polynomial is Var, the function returns the value of x.
If the polynomial is an Sum, the function deconstructs the polynomial into its two operands and evaluates them using the eval function. It then returns the sum of the two results.
If the polynomial is a Prod, the function again deconstructs the polynomial, evaluates them and returns the product of the two results.
If the polynomial is a Power, the function deconstructs the polynomial into its base and exponent, evaluates the base and returns the base raised to the power of the exponent.

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 eval function to evaluate the polynomial x^2 + 2x + 1 at x = 2:

(* 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 *)

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.

Handling Errors

Pattern matching can also be a useful technique for error handling. Consider the following to divide two integers:

let div x y =
  if y = 0 then Error "Division by zero"
  else Ok (x / y)

The div function takes two integers as arguments and returns an int value wrapped in an result type. If the second argument is 0, the function returns an Error. Otherwise, it returns Ok (x / y). Now we can use pattern matching to handle the result of the div function:

let () =
  let result = div 10 0 in
  match result with
  | Ok x -> print_endline (string_of_int x)
  | Error msg -> print_endline msg

This is a pretty simple example. In OCaml there are also option types which have two variants: Some and None. The Some variant is used to wrap a value and the None variant is used to represent the absence of a values.

Conclusion

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.

Thanks for reading!

Credits

Thank you to the following people for proofreading and giving ideas for this article:

Resources

Typesafe Database Queries on the Edge

Shoubhit Dash — Sat, 12 Nov 2022 16:09:07 +0000

What is the Edge?

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 Workers).

Prisma

Prisma is an ORM that lets you write your database schema in it's special .prisma syntax.

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 Prisma Client in a typesafe manner. It's fantastic.

Prisma Migrate is another great tool from the Prisma team to run database migrations without hassle.

But it also has a lot of problems. The Rust 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.

PlanetScale

PlanetScale is a serverless MySQL database provider which is based on Vitess. You get the scaling benefits of Vitess without the need to manage it yourself.

The PlanetScale team recently released their database driver which lets your query your PlanetScale database using the Fetch API. This means you can use this library to query your database in edge environments which is HUGE.

Although it's a great library, it doesn't provide an typesafety.

Kysely

Enter Kysely. 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.

It works in serverless and edge environments, even on Deno! It also has support for using the PlanetScale database driver using kysely-planetscale. This is perfect.

The only problem is that defining schemas in TypeScript is rough. It also doesn't have anything like Prisma Migrate to manage database migrations.

The Idea

Prisma is good at defining schemas, generating TypeScript types, and handling database migrations.

Kysely along with the PlanetScale database driver are good for writing SQL in a typesafe manner on the edge.

What if we combine both of these?

Implementing the Idea

Enough talking let's get to some actual code.

Setting Up a Database on PlanetScale

First create an account on PlanetScale and create a database. Make sure to enable the serverless driver beta feature in the settings.

Setting Up Prisma

I'll be using the newly released Solid Start but this should work in all frameworks that support edge environments such as Next.js, Remix, SvelteKit, etc.

Install Prisma and the Prisma Client.

npm install -D prisma && npm install @prisma/client

Now generate a .env file and a starter schema using prisma init.

npx prisma init --datasouce-provider mysql

This command will create a schema.prisma file inside a prisma folder. It will also create a .env file. Add your connection string from PlanetScale in the DATABASE_URL variable.

// prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

Since PlanetScale, rather Vitess doesn't support foreign key constraints, we need to set the referentialIntegrity property in prisma.

// prisma/schema.prisma

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

Now make an Example model. Models in Prisma represent the tables in a SQL database.

// 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
}

Push this schema to PlanetScale using prisma db push.

npx prisma db push

This command will also run prisma generate which generates the TypeScript types based on your schema. It is also recommended to add prisma generate as a postinstall in package.json so that whenever you install the dependencies, it will generate the types for you.

// package.json

"scripts": {
    "postinstall": "prisma generate"
}

That is it for the Prisma setup.

Setting Up Kysely

Make sure you add the DATABASE_USERNAME and DATABASE_PASSWORD environment variables from PlanetScale.

Install Kysely, the Kysely PlanetScale Dialect, and the PlanetScale databse driver.

npm install kysely kysely-planetscale @planetscale/database

Create a src/server/db.ts or whatever file makes sense to you and add the following 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<Database>({
  dialect: new PlanetScaleDialect({
    host: "aws.connect.psdb.cloud",
    username: process.env.DATABASE_USERNAME,
    password: process.env.DATABASE_PASSWORD,
  }),
});

Here we're importing the Example 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.

export type Example = {
  id: string;
  createdAt: Date;
  updatedAt: Date;
  text: string;
};

The Database interface will contain all our types. So let's say we also have a SecondExample field in our database, we will have to import that type and add it in the Database interface. This is one of the limitations of this approach, it requires you to add new types manually.

Then we're exporting a Kysely instance that takes the Database interface as a generic. The PlanetScaleDialect tells Kysely to use the PlanetScale database driver to run the SQL queries.

Using Kysely

Note: This might look different in your framework but the Kysely code will be the same.

// src/routes/index.tsx

import { db } from "~/server/db";

export const routeData = () => {
  return createServerData$(async () => {
    const examples = await db
      .selectFrom("Example")
      .selectAll()
      .orderBy("createdAt", "desc")
      .execute();

    console.log(examples);

    return examples;
  });
};

You will notice which typing this is that it's all beautifully autocompleted for you. Everything is fully typesafe.

Solid Start 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 UnoCSS in this example.

// src/routes/index.tsx

export default function Home() {
  const examples = useRouteData<typeof routeData>();

  return (
    <main class="flex flex-col items-center h-screen bg-#050505 font-sans">
      <div class="flex flex-col gap-y-2">
        <For each={examples()}>
          {(example) => {
            return <p class="text-white">{example.text}</p>;
          }}
        </For>
      </div>
    </main>
  );
}

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.

Limitations

This way of doing things can break when using @map because the casing is different in the types. It also doesn't support Prisma.Decimal because you have to use the special Prisma object to use it. Mark Lawlor has some insane TypeScript code to work around this problem but it's still very "hacky". You can see his gist here.

Conclusion

Hopefully that all made sense. I think it is pretty cool. I haven't seen anyone do this so I thought I had a moral obligation to write a blog about it. That's it really. Thanks for reading!

My developer workflow using WSL, tmux and Neovim

Shoubhit Dash — Tue, 16 Aug 2022 15:53:54 +0000

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.

Operating System

I use Windows and it's pretty much unusable for programming. Thankfully Microsoft understood that and made Windows Subsystem for Linux also known as WSL in short. It lets you run a Linux distribution inside of Windows.

I use Ubuntu, it's the default distribution that is installed with WSL. 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.

Shell

Ubuntu by default comes with the bash shell. Bash is great but I personally find it harder to customize. That is why I use Z shell, more commonly known as zsh. To manage my zsh configuration, I use Oh My Zsh. It has a huge community and makes it trivial to install and use plugins.

I used to use fish 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 POSIX-compliant. POSIX 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.

zsh on the other hand is fully POSIX-compliant. This is why I switched to zsh and I'm quite happy with it so far.

Prompt

I use Starship for my prompt and it is AMAZING. Written in Rust, 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 docs.

The configuration file for Starship lives in ~/.config/starship.toml. Here's my starship.toml.



# ~/.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

The icons aren't showing up here because you need a nerd font for that. If you set up a Nerd Font (I recommend JetBrains Mono), 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 here.

Having a nice looking terminal always helps!

Persistent Terminal Sessions with tmux

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

For example, to go to my website's workspace, I just have to type website and I'm there.

Here website is an alias I've set up to open the website tmux session.



# .zshrc

alias website="tmux attach-session -t website"

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.

Neovim

I had been using VSCode as my code editor since the first day I started learning programming, but recently I have switched to Neovim. It is a modern version of Vim.

Neovim is the best code editor for me because of its speed and ease of customization. All the configuration is written in Lua, 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.

You can find my Neovim configuration here. It's just a fork of craftzdog's configuration.

zoxide

You might have seen in some of the screenshots that I just have to run z license-generator to jump to that directory. That is zoxide. Also written in Rust, it's a smarted cd command that remembers which directories you visit frequently, so you can jump to those directories with just one command.

The above GIF is from the zoxide GitHub repository. Use zoxide to never go back to cd hell again.

exa

exa is a modern replacement of the ls command. I always find myself using exa to get familiar with the files in a new codebase.

As you can see in the screenshot, exa 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 ls.

It also has a lot of flags which display the data is different formats. Here are the aliases I've set up for exa.



  
  
  .zshrc


alias ll="exa -l -g --icons --git"

alias llt="exa -1 --icons --tree --git-ignore"

Conclusion

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!

Thanks for reading!

Build a full stack app with create-t3-app

Shoubhit Dash — Fri, 12 Aug 2022 04:27:39 +0000

This blog post is outdated. I no longer have time to keep updating this post.

Hey there! Today we'll be building an application with the T3 stack. We're going to build a Guestbook inspired by Lee Robinson's Guestbook. Let's get right into it!

Getting Started

Let's set up a starter project with create-t3-app!



npm create t3-app@latest

We're going to utilize all parts of the stack.

Let's also set up a Postgres database on Railway. Railway makes it super simple to quickly set up a database.

Go to Railway and log in with GitHub if you haven't already. Now click on New Project.

Now provision Postgres.

It's as simple as that. Copy the connection string from the Connect tab.

Let's start coding! Open the project in your favourite code editor.

There are a lot of folders but don't be overwhelmed. Here's a basic overview.

prisma/* - The prisma schema.
public/* - Static assets including fonts and images.
src/env/* - Validation for environment variables.
src/pages/* - All the pages of the website.
src/server/* - The backend, which includes a tRPC server, Prisma client, and auth utility.
src/styles/* - Global CSS files, but we're going to be using Tailwind CSS for most of our styles.
src/types/* - Next Auth type declarations.
src/utils/* - Utility functions.

Duplicate the .env.example file and rename the new copy as .env. Open the .env file and paste the connection string in DATABASE_URL.

You'll notice we have Discord OAuth set up using next-auth, so we also need a DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET. Let's set that up.

Setting up authentication

Go to the Discord Developers Portal and create a new application.

Go to OAuth2/General and add all of the callback URLs to Redirects. For localhost the callback URL is http://localhost:3000/api/auth/callback/discord. I also added the production URL ahead of time.

Copy the client ID and secret and paste both of them into .env.

Uncomment NEXTAUTH_SECRET and set it as some random string too. Now we have all of our environment variables configured.

Let's also change the database to postgresql and uncomment the @db.Text annotations in the Account model in prisma/schema.prisma. All the models you see in the schema are necessary for Next Auth to work.

Let's push this schema to our Railway Postgres database. This command will push our schema to Railway and generate type definitions for the Prisma client.



npx prisma db push

Now run the dev server.



npm run dev

Go to the src/pages/index.tsx file and delete all the code, let's just render a heading.



// src/pages/index.tsx

const Home = () => {
  return (
    <main>
      <h1>Guestbook</h1>
    </main>
  );
};

export default Home;

I can't look at light themes, so lets apply some global styles in src/styles/globals.css to make this app dark theme.



/* src/styles/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-neutral-900 text-neutral-100;
}

Much better.

If you look at src/pages/api/auth/[...nextauth].ts, you can see we have Discord OAuth already set up using Next Auth. Here is where you can add more OAuth providers like Google, Twitter, etc.

Now let's create a button to let users login with Discord. We can use the signIn() function from Next Auth.



// src/pages/index.tsx

import { signIn } from "next-auth/react";

const Home = () => {
  return (
    <main>
      <h1>Guestbook</h1>
      <button
        onClick={() => {
          signIn("discord").catch(console.log);
        }}
      >
        Login with Discord
       </button>
    </main>
  );
};

export default Home;

We can use the useSession() hook to get the session for the user. While we're at it, we can also use the signOut() function to implement log out functionality.



// src/pages/index.tsx

import { signIn, signOut, useSession } from "next-auth/react";

const Home = () => {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return <main>Loading...</main>;
  }

  return (
    <main>
      <h1>Guestbook</h1>
      <div>
        {session ? (
          <>
            <p>hi {session.user?.name}</p>
            <button
              onClick={() => {
                signOut().catch(console.log);
              }}
            >
              Logout
            </button>
          </>
        ) : (
          <button
            onClick={() => {
              signIn("discord").catch(console.log);
            }}
          >
            Login with Discord
           </button>
        )}
      </div>
    </main>
  );
};

export default Home;

Great! We now have auth working. Next Auth really makes it stupidly simple.

Backend

Let's work on the backend now. We'll be using tRPC for our API layer and Prisma for connecting and querying our database.

We're going to have to modify our prisma schema and add a Guestbook model. Each message in the guestbook will have a name and a message. Here's how the model will look like.



model Guestbook {
    id        String   @id @default(cuid())
    createdAt DateTime @default(now())
    name      String
    message   String   @db.VarChar(100)
}

Let's push this modified schema to our Railway Postgres database.



npx prisma db push

Now let's get to the fun part - it's tRPC time. Go ahead and delete the example.ts file in src/server/api/routers folder. Then in the same folder, create a new file called guestbook.ts.

First, we're going to define a mutation to post messages to our database.



// src/server/api/routers/guestbook.ts

import { z } from "zod";
import { createTRPCRouter, publicProcedure } from "../trpc";

export const guestbookRouter = createTRPCRouter({
  postMessage: publicProcedure
    .input(
      z.object({
        name: z.string(),
        message: z.string(),
      })
    )
    .mutation(async ({ ctx, input }) => {
      try {
        await ctx.prisma.guestbook.create({
          data: {
            name: input.name,
            message: input.message,
          },
        });
      } catch (error) {
        console.log(error);
      }
    }),
});

Here we have a tRPC mutation that uses zod to validate the input and has an async function that runs a single prisma query to create a new row in the Guestbook table.

Working with Prisma is an absolutely wonderful example. The autocomplete and typesafety is amazing.

We also want this mutation to be protected. Here we can use tRPC middlewares.

If you take a look at the src/server/auth.ts file, we're using unstable_getServerSession from Next Auth that gives us access to the session on the server.



// src/server/auth.ts

import { type GetServerSidePropsContext } from "next";
import { unstable_getServerSession } from "next-auth";
import { authOptions } from "../pages/api/auth/[...nextauth]";

export const getServerAuthSession = async (ctx: {
  req: GetServerSidePropsContext["req"];
  res: GetServerSidePropsContext["res"];
}) => {
  return await unstable_getServerSession(ctx.req, ctx.res, authOptions);
};

We're passing that session into our tRPC context.



// src/server/api/trpc.ts

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  const { req, res } = opts;
  const session = await getServerAuthSession({ req, res });
  return createInnerTRPCContext({
    session,
  });
};

Then, we can use this session to make our mutation protected using a protectedProcedure.



// src/server/api/trpc.ts

const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session || !ctx.session.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({
    ctx: {
      session: { ...ctx.session, user: ctx.session.user },
    },
  });
});

export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);

Now, replace publicProcedure with protectedProcedure to make our mutation protected from unauthenticated users.



// src/server/api/routers/guestbook.ts

import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "../trpc";

export const guestbookRouter = createTRPCRouter({
  postMessage: protectedProcedure
    .input(
      z.object({
        name: z.string(),
        message: z.string(),
      })
    )
    .mutation(async ({ ctx, input }) => {
      try {
        await ctx.prisma.guestbook.create({
          data: {
            name: input.name,
            message: input.message,
          },
        });
      } catch (error) {
        console.log(error);
      }
    }),
});

Next, let's write a query to get all messages in the guestbook. We want all guests to see the messages so we'll use the publicProcedure for this.



// src/server/api/routers/guestbook.ts

import { z } from "zod";
import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";

export const guestbookRouter = createTRPCRouter({
  getAll: publicProcedure.query(async ({ ctx }) => {
    try {
      return await ctx.prisma.guestbook.findMany({
        select: {
          name: true,
          message: true,
        },
        orderBy: {
          createdAt: "desc",
        },
      });
    } catch (error) {
      console.log("error", error);
    }
  }),
  //...

Here we are getting just the name and message from all the rows from the Guestbook model. The rows are sorted in descending order by the createdAt field.

Now merge this router in the main appRouter.



// src/server/api/root.ts

import { createTRPCRouter } from "./trpc";
import { guestbookRouter } from "./routers/guestbook";

export const appRouter = createTRPCRouter({
  guestbook: guestbookRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

We're pretty much done on the backend part. Let's work on the UI next.

Frontend

Let's first center everything.



// src/pages/index.tsx

import { signIn, signOut, useSession } from "next-auth/react";

const Home = () => {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return <main className="flex flex-col items-center pt-4">Loading...</main>;
  }

  return (
    <main className="flex flex-col items-center">
      <h1 className="text-3xl pt-4">Guestbook</h1>
      <p>
        Tutorial for <code>create-t3-app</code>
      </p>
      <div className="pt-10">
        <div>
          {session ? (
            <>
              <p className="mb-4 text-center">hi {session.user?.name}</p>
              <button
                type="button"
                className="mx-auto block rounded-md bg-neutral-800 py-3 px-6 text-center hover:bg-neutral-700"
                onClick={() => {
                  signOut().catch(console.log);
                }}
              >
                Logout
              </button>
            </>
          ) : (
            <button
              type="button"
              className="mx-auto block rounded-md bg-neutral-800 py-3 px-6 text-center hover:bg-neutral-700"
              onClick={() => {
                signIn("discord").catch(console.log);
              }}
            >
              Login with Discord
            </button>
          )}
        </div>
      </div>
    </main>
  );
};
export default Home;

I also made the heading bigger and added some padding between the elements.

Let's use our tRPC query to get all the messages for the guestbook in the database. But we don't have any data right now. We can use Prisma Studio to add some data manually.



npx prisma studio

It will automatically open on http://localhost:5555. Go to the Guestbook table and add a bunch of records like this.

Now that we have data, we can use the query and display the data. For this we can use the tRPC react-query wrapper. Let's create a component for this in src/pages/index.tsx.



// src/pages/index.tsx

import { api } from "../utils/api";

const GuestbookEntries = () => {
  const { data: guestbookEntries, isLoading } = api.guestbook.getAll.useQuery();

  if (isLoading) return <div>Fetching messages...</div>;

  return (
    <div className="flex flex-col gap-4">
      {guestbookEntries?.map((entry, index) => {
        return (
          <div key={index}>
            <p>{entry.message}</p>
            <span>- {entry.name}</span>
          </div>
        );
      })}
    </div>
  );
};

Here we're using useQuery() and mapping over the array it returns.

Of course here too we have wonderful typesafety and autocomplete.

Now render this component in the Home component.



// src/pages/index.tsx

<main className="flex flex-col items-center">
  <h1 className="text-3xl pt-4">Guestbook</h1>
  <p>
    Tutorial for <code>create-t3-app</code>
  </p>
  <div className="pt-10">
    <div>
      {session ? (
        <>
          <p className="mb-4 text-center">hi {session.user?.name}</p>
          <button
            type="button"
            className="mx-auto block rounded-md bg-neutral-800 py-3 px-6 text-center hover:bg-neutral-700"
            onClick={() => {
              signOut().catch(console.log);
            }}
          >
            Logout
          </button>
        </>
      ) : (
        <button
          type="button"
          className="mx-auto block rounded-md bg-neutral-800 py-3 px-6 text-center hover:bg-neutral-700"
          onClick={() => {
            signIn("discord").catch(console.log);
          }}
        >
          Login with Discord
        </button>
      )}
      <div className="pt-10">
        <GuestbookEntries />
      </div>
    </div>
  </div>
</main>

Let's now create a form component in src/pages/index.tsx and use our tRPC mutation there.



// src/pages/index.tsx

const Form = () => {
  const [message, setMessage] = useState("");
  const { data: session, status } = useSession();

  const postMessage = api.guestbook.postMessage.useMutation();

  if (status !== "authenticated") return null;

  return (
    <form
      className="flex gap-2"
      onSubmit={(event) => {
        event.preventDefault();
        postMessage.mutate({
          name: session.user?.name as string,
          message,
        });
        setMessage("");
      }}
    >
      <input
        type="text"
        className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"
        placeholder="Your message..."
        minLength={2}
        maxLength={100}
        value={message}
        onChange={(event) => setMessage(event.target.value)}
      />
      <button
        type="submit"
        className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
      >
        Submit
      </button>
    </form>
  );
};

We can now render the Form in the Home component and add some padding.



// src/pages/index.tsx

<div>
  {session ? (
    <>
      <p className="mb-4 text-center">hi {session.user?.name}</p>
      <button
        type="button"
        className="mx-auto block rounded-md bg-neutral-800 py-3 px-6 text-center hover:bg-neutral-700"
        onClick={() => {
          signOut().catch(console.log);
        }}
      >
        Logout
      </button>
      <div className="pt-6">
        <Form />
      </div>
    </>
  ) : (
    <button
      type="button"
      className="mx-auto block rounded-md bg-neutral-800 py-3 px-6 text-center hover:bg-neutral-700"
      onClick={() => {
        signIn("discord").catch(console.log);
      }}
    >
      Login with Discord
    </button>
  )}
  <div className="pt-10">
    <GuestbookEntries />
  </div>
</div>

Here we have a form and we're using useMutation() to post the data to the database. But you'll notice one problem here. When we click on the submit button, it does post the message to the database, but the user doesn't get any immediate feedback. Only on refreshing the page, the user can see the new message.

For this we can use optimistic UI updates! react-query makes this trivial to do. We just need to add some stuff to our useMutation() hook inside the Form component.



// src/pages/index.tsx

const utils = api.useContext();
const postMessage = api.guestbook.postMessage.useMutation({
  onMutate: async (newEntry) => {
    await utils.guestbook.getAll.cancel();
    utils.guestbook.getAll.setData(undefined, (prevEntries) => {
      if (prevEntries) {
        return [newEntry, ...prevEntries];
      } else {
        return [newEntry];
      }
    });
  },
  onSettled: async () => {
    await utils.guestbook.getAll.invalidate();
  },
});

If you want to learn more about this code example, you can read about optimistic updates with @tanstack/react-query here.

We're pretty much done with the coding part! That was pretty simple wasn't it. The T3 stack makes it super easy and quick to build full stack web apps. Let's now deploy our guestbook.

Deployment

We're going to use Vercel to deploy. Vercel makes it really easy to deploy NextJS apps, they are the people who made NextJS.

First, push your code to a GitHub repository. Now, go to Vercel and sign up with GitHub if you haven't already.

Then click on New Project and import your newly created repository.

Now we need to add environment variables, so copy paste all the environment variables to Vercel. After you've done that, click Deploy.

Add a custom domain if you have one and you're done! Congratulations!

All the code can be found here. You can visit the website at guestbook.nxl.sh.

Credits

Ayanava Karmakar for updating the blog using tRPC v10.
Julius Marminge and Michael Lee for reviewing the updated blog.
Lee Robinson for the idea of a guestbook.
Anthony for giving constructive criticism.
JAR and Krish for proof reading.
Hakan Güçlü for updating the project files in accordance with the latest create-t3-app template (7.3.0).

t3 stack and my most popular open source project ever

Shoubhit Dash — Mon, 27 Jun 2022 09:10:39 +0000

create-t3-app 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.

t3 stack

The t3 stack was made by Theo who is a really cool dev and makes awesome content on YouTube. The stack consists of:

I love this stack, if you want to know more about them checkout init.tips and this twitter thread from @dhravya.

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.

Theo had also mentioned on stream how it would be very convenient to set up a project just by running npx create-t3-app. So I did just that!

create-t3-app

create-t3-app makes it really convenient to scaffold a starter project using the t3 stack.

Usage

npx create-t3-app@latest
# or
yarn create t3-app
# or
pnpx create-t3-app@latest

It will let you select the packages you want and install them and create all the files those packages need.

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.

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.

Maintaining Open Source

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.

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.

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.

Github: https://github.com/nexxeln/create-t3-app
Website: https://create.t3.gg
t3 Stack: https://init.tips
Theo: https://twitter.com/t3dotgg

Thank you for reading!

How I made a really fast Link Shortener that runs on the edge

Shoubhit Dash — Wed, 01 Jun 2022 04:48:32 +0000

I recently made a link shortener called deoxys (named after a really fast Pokémon). It's really, really fast because it uses Vercel Edge Functions. Edge functions are basically functions that run on the cloud, so they are really fast and have no cold starts, and everything runs on the server so there is zero client side burden. In this blog I'm going to give you an overview of the architecture of deoxys.

Stack

High level overview

The frontend is built with Next.js which is a full stack React framework. I'm using tRPC as my API layer for that sweet type-safety. I wrote a blog about tRPC if you're not familiar with it. The database is a MySQL database (Vitess to be precise) provided by PlanetScale.

Whenever someone shortens a new link, the frontend calls a tRPC mutation to store that in the database. The ORM I'm using is Prisma, because it is simply the best.

Now here comes the interesting part, whenever someone visits a shortened URL, lets say https://deoxys.nexxel.dev/cat, it will run an edge function to check if the provided slug (in this case cat), is a valid slug, if it is, it will redirect the user to whatever the URL was.

Code walkthrough

You can look at the source code here. It's just a standard Next.js project, I also set up tRPC and Prisma, and connected to my database.

// prisma/schema.prisma

model ShortLink {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  url       String   @db.VarChar(3000)
  slug      String   @unique

  @@index([slug])
}

This is the schema for the database. Very simple and minimal. Next, I made the API endpoint that will check if a slug is valid or not. For this I used a Next.js API Route. I had to do this because the edge function can't use the prisma client. Note that this is a dynamic route.

//src/pages/api/get-link/[slug].ts

import type { NextApiRequest, NextApiResponse } from "next";

import { prisma } from "../../../db/client";

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const slug = req.query["slug"];

  if (!slug || typeof slug !== "string") {
    res.status(404).json({ message: "please provide a slug" });

    return;
  }

  const data = await prisma.shortLink.findFirst({
    where: {
      slug: {
        equals: slug,
      },
    },
  });

  if (!data) {
    res.status(404).json({ message: "short link not found" });

    return;
  }

  res.setHeader("Content-Type", "application/json");
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Cache-Control", "s-maxage=1000000000, stale-while-revalidate");

  res.json(data);

  return;
};

If the slug is valid, it is also caching the response for 1000000000 seconds. This is what makes the edge function even faster.

Next, I wrote my edge function, in Next.js, edge functions are written in pages/_middleware.ts

// src/pages/_middleware.ts

import { NextFetchEvent, NextRequest, NextResponse } from "next/server";

export async function middleware(req: NextRequest, event: NextFetchEvent) {
  if (
    req.nextUrl.pathname.startsWith("/api/") ||
    req.nextUrl.pathname === "/"
  ) {
    return;
  }
  const slug = req.nextUrl.pathname.split("/").pop();

  const fetchSlug = await fetch(`${req.nextUrl.origin}/api/get-link/${slug}`);

  if (fetchSlug.status === 404) {
    return NextResponse.redirect(req.nextUrl.origin);
  }

  const data = await fetchSlug.json();

  if (data?.url) {
    return NextResponse.redirect(data.url);
  }
}

It calls that endpoint and checks if the slug is valid, if it is it redirects the user to the URL corresponding to the slug. That's pretty much it.

Now I built a nice UI for it using Tailwind. I also made two tRPC endpoints. The first one is to check if a slug has been previously used before in real-time. I find this real-time validation to be really cool. Look at this.

The second endpoint is to create new links and write it to the database. The code looks like this.

// src/pages/api/trpc/[trpc].ts

import * as trpc from "@trpc/server";
import * as trpcNext from "@trpc/server/adapters/next";
import { z } from "zod";

import { prisma } from "../../../db/client";

export const appRouter = trpc
  .router()
  .query("checkSlug", {
    input: z.object({ slug: z.string() }),
    async resolve({ input }) {
      const slugCount = await prisma.shortLink.count({
        where: {
          slug: {
            equals: input.slug,
          },
        },
      });

      return { used: slugCount > 0 };
    },
  })
  .mutation("createShortLink", {
    input: z.object({ slug: z.string(), url: z.string() }),
    async resolve({ input }) {
      try {
        await prisma.shortLink.create({
          data: {
            slug: input.slug,
            url: input.url,
          },
        });
      } catch (error) {
        console.log(error);
      }
    },
  });

export type AppRouter = typeof appRouter;

export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: () => null,
});

I'm also using zod for input validation here. Really good library.

The rest was simple, I just made a form component that called my tRPC endpoints. First I declared some state for the form.

const [form, setForm] = useState<Form>({ slug: "", url: "" });

I also called my tRPC endpoints here.

const checkSlug = trpc.useQuery(["checkSlug", { slug: form.slug }], {
    refetchOnReconnect: false,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
  });

const createShortLink = trpc.useMutation(["createShortLink"]);

Here comes the form.

<form
      onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        createShortLink.mutate({ ...form });
      }}
      className="mt-6"
    >
      {checkSlug.data?.used ? (
        <span className="font-medium text-center text-red-500">
          This link has already been used
        </span>
      ) : (
        <span className="font-medium text-center">
          {url}/{form.slug}
        </span>
      )}
{/* ... */}

Here, I'm passing an onSubmit function to the form that calls that tRPC mutation and passes the form state in the input. Also this is where I'm actually implementing that real-time validation, if the endpoint returns used as true, it will make the border red and show the error message.

Inside the form there are just a bunch of inputs, here is how they work.

<input
    type="url"
    value={form.url}
    maxLength={3000}
    onChange={(e) => setForm({ ...form, url: e.target.value })}
    placeholder="https://duckduckgo.com"
    className="block w-full px-4 py-2 font-normal bg-black border-2 border-gray-200 rounded-md focus:outline-none placeholder:text-gray-400"
    required
/>

This input is for the URL that has to be shortened, here I'm passing an onChange function to set my form state. Also the type="url" helps in validation.

For random slugs, I'm using a library called random-word-slugs, it's pretty cool. Here's the code for the random button.

<input
    type="button
    value="Random"
    className="px-4 py-2 ml-2 font-medium transition-colors duration-300 bg-indigo-500 border-2 border-indigo-500 rounded cursor-pointer hover:bg-transparent"
    onClick={() => {
        const slug = generateSlug();

        setForm({
            ...form,
            slug,
        });

        checkSlug.refetch();
    }}
/>

The generateSlug() function comes from the random-word-slugs library. I'm also setting the state, and checking if that particular slug has already been used before.

Now if the creation of the short link was successful, it shows this page.

Here's the code for that.

if (createShortLink.status === "success") {
    return (
      <div className="flex flex-col items-center justify-center mx-3 mt-6">
        <span className="pb-3 text-lg font-semibold">Here's your link!</span>

        <div className="flex items-center gap-2">
          <h1 className="text-lg text-center md:text-2xl">{`${url}/${form.slug}`}</h1>
          <button
            className="px-4 py-1.5 ml-3 font-medium transition-colors duration-300 bg-indigo-500 border-2 border-indigo-500 rounded hover:bg-transparent"
            onClick={() => {
              copy(`${url}/${form.slug}`);
            }}
          >
            Copy
          </button>
        </div>

        <button
          className="px-4 mt-8 py-1.5 ml-3 font-medium transition-colors duration-300 bg-indigo-500 border-2 border-indigo-500 rounded hover:bg-transparent"
          onClick={() => {
            createShortLink.reset();
            setForm({ slug: "", url: "" });
          }}
        >
          Create New
        </button>
      </div>
    );
  }

tRPC returns the status of a mutation too. So here, if it returns success, it shows the shortened URL and a copy to clipboard button. There is also a create new button that resets the tRPC mutation and resets the form state as well.

You can see the full code for this component here.

That's it. There are a lot of moving parts to this, I hope I gave you nice overview of how deoxys functions.

Website: https://deoxys.nexxel.dev
Code: https://github.com/nexxeln/deoxys

Credits

I'm so sorry I did not include this before.

Thanks for reading!

Build end-to-end typesafe APIs with tRPC

Shoubhit Dash — Sat, 21 May 2022 14:06:27 +0000

tRPC is a tool that provides type-safety between your front and back-ends, hence it makes it really easy to build scalable and robust backends quickly for your Next.js and Node apps. In this article we will be looking at what tRPC is, and how to set it up and use it with Next.js.

What is tRPC?

tRPC is a very light library which lets you build fully typesafe APIs without the need of schemas or code generation. It allows sharing of types between the client and server and just imports the types and not the actual server code, so none of the server code is exposed in the frontend. With end-to-end type-safety, you're able to catch errors between your frontend and backend at compile and build time.

Currently, the dominant way of making typesafe APIs is using GraphQL (it's awesome). Since GraphQL is a query language for APIs, it doesn't take full advantage of TypeScript, it comes with excess boilerplate code and requires a lot of initial setup.

If you're already using TypeScript everywhere, you can share types directly between the client and the server without the need of any code generation.

Installing tRPC in Next.js

Lets first create a Next.js project with TypeScript.

npx create-next-app next-with-trpc --ts

Let's now use the recommended folder structure by tRPC. Open the project in your favourite editor, make a src directory and move the pages and styles directory inside it. Your folder structure should look something like this.

.
├── src
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── api
│   │   │   
│   │   └── [..]
└── [..]

Once this is done, let's install tRPC.

npm i @trpc/client @trpc/server @trpc/react @trpc/next zod react-query

tRPC is a built on top of react-query, which is a package for fetching, caching, and updating data without the need of any global state. We are also using zod for schema and input validations. You can also use other validation libraries like yup, Superstruct, etc. Read more.

Also make sure that in your tsconfig.json, strict mode is enabled.

// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strict": true
  }
}

This is so that zod can run correctly, and in general, having strict mode enabled is just good.

Creating our server

Our tRPC server will be deployed as a Next.js API route. This code only runs on the server so it doesn't affect the bundle sizes in any way.

Creating our context

Let's first create a directory inside src called server. In here, we need to first create a context. Create a file called context.ts and add the following code to it.

// src/server/context.ts

import { CreateNextContextOptions } from "@trpc/server/adapters/next";
import { inferAsyncReturnType } from "@trpc/server";

export async function createContext(ctxOptions?: CreateNextContextOptions) {
  const req = ctxOptions?.req;
  const res = ctxOptions?.res;

  return {
    req,
    res,
  };
}

export type MyContextType = inferAsyncReturnType<typeof createContext>;

This will be available as ctx in all our resolvers which we'll write in a bit. Right now, we're just passing the request and response to our routes, but you can add other things like JWT tokens, cookies or even Prisma Client code.

Creating our router

Now let's create a file called createRouter.ts in the server directory. We'll be setting up a simple router. Copy the following code to it.

// src/server/createRouter.ts

import * as trpc from "@trpc/server";

import type { MyContextType } from "./context";

export function createRouter() {
  return trpc.router<MyContextType>();
}

Creating our routes

Let's create a new directory inside src/server called routers. Make a file called app.ts inside it. This will be the root route.

// src/server/routers/app.ts

import { createRouter } from "../createRouter";

export const appRouter = createRouter();

export type AppRouter = typeof appRouter;

Now let's create a router that takes a name as input and returns it to the client. Add a file called name.ts.

// src/server/routers/name.ts

import { z } from "zod";

import { createRouter } from "../createRouter";

export const nameRouter = createRouter().query("getName", {
  input: z
    .object({
      name: z.string().nullish(),
    })
    .nullish(),
  resolve({ input }) {
    return { greeting: `Hello ${input?.name ?? "world"}!` };
  },
});

Just like GraphQL, tRPC uses queries and mutations. A query is used for fetching data and mutations are used to create, update, and delete data. Here we are creating a query to get a name. The name of our query is getName. Here, input takes the user input which is validated using zod. When this endpoint is requested, the resolve function is called and it returns the hello world greeting. because why not.

Now let's merge this route in our root route. Come back to app.ts and add the following code.

// src/server/routers/app.ts

import { createRouter } from "../createRouter";
import { nameRouter } from "./name";

export const appRouter = createRouter().merge("names.", nameRouter);

export type AppRouter = typeof appRouter;

That . at the end of names. is intentional for reasons you'll see soon.

Creating our Next.js API route

Let's create a trpc directory inside src/pages/api. Inside it create a file called [trpc].ts. Just a reminder of our folder structure.

.
├── src
│   ├── pages
│   │   ├── _app.tsx 
│   │   ├── api
│   │   │   └── trpc
│   │   │       └── [trpc].ts 
│   │   └── [..]
│   ├── server
│   │   ├── routers
│   │   │   ├── app.ts   
│   │   │   ├── name.ts  
│   │   │   └── [..]
│   │   ├── context.ts      
│   │   └── createRouter.ts 
└── [..]

Here we will implement our tRPC router. As I had said before, our server will be deployed as a Next.js API route.

// src/pages/api/trpc/[trpc].ts

import { createNextApiHandler } from "@trpc/server/adapters/next";

import { appRouter } from "../../../server/routers/app";
import { createContext } from "../../../server/context";

export default createNextApiHandler({
  router: appRouter,
  createContext,
  batching: {
    enabled: true,
  },
  onError({ error }) {
    if (error.code === "INTERNAL_SERVER_ERROR") {
      console.error("Something went wrong", error);
    }
  },
});

We're passing it our router, our createConext function, enabling batching and logging errors.

With that we're pretty much done with the backend. Let's now work on our frontend.

Calling our tRPC API routes

Let's now connect our backend with our frontend. Go to src/pages/_app.tsx. Here we are going to configure tRPC and React Query. Copy the following code.

// src/pages/_app.ts

import { AppType } from "next/dist/shared/lib/utils";
import { withTRPC } from "@trpc/next";

import { AppRouter } from "./api/trpc/[trpc]";
import "../styles/globals.css";

const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

const getBaseUrl = () => {
  if (process.browser) return "";
  if (process.env.NEXT_PUBLIC_VERCEL_URL)
    return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;

  return `http://localhost:${process.env.PORT ?? 3000}`;
};

export default withTRPC<AppRouter>({
  config({ ctx }) {
    const url = `${getBaseUrl()}/api/trpc`;

    return {
      url,
    };
  },
  ssr: false,
})(MyApp);

We're also setting ssr (Server Side Rendering) to be false for now.

Next, create a utils directory inside src. Inside utils, create a file called trpc.ts. Folder structure for reference:

.
├── src
│   ├── pages
│   │   ├── _app.tsx 
│   │   ├── api
│   │   │   └── trpc
│   │   │       └── [trpc].ts 
│   │   └── [..]
│   ├── server
│   │   ├── routers
│   │   │   ├── app.ts   
│   │   │   ├── name.ts  
│   │   │   └── [..]
│   │   ├── context.ts      
│   │   └── createRouter.ts 
|   └── utils
│       └── trpc.ts
└── [..]

Here we're going to create a hook to use tRPC on the client.

// src/utils/trpc.ts

import { createReactQueryHooks } from "@trpc/react";
import { inferProcedureOutput } from "@trpc/server";

import { AppRouter } from "../server/routers/app";

export const trpc = createReactQueryHooks<AppRouter>();

export type inferQueryOutput<
  TRouteKey extends keyof AppRouter["_def"]["queries"]
> = inferProcedureOutput<AppRouter["_def"]["queries"][TRouteKey]>;

This hook is strongly typed using our API type signature. This is what enables the end-to-end typesafety in our code. For example, if we change a router's name in the backend, it will show an error in the frontend where we're calling the route. It allows us to call our backend and get fully typed inputs and outputs from it. It also gives us wonderful autocomplete.

Let's now actually use our query that we defined earlier. Go to the index page and instead of copy pasting this code block, type it yourself to experience the magic of tRPC. The autocomplete is just crazy.

// src/pages/index.tsx

import { trpc } from "../utils/trpc";

export default function Name() {
  const nameQuery = trpc.useQuery(["names.getName", { name: "nexxel" }]);

  return (
    <>
      {nameQuery.data ? (
        <h1>{nameQuery.data.greeting}</h1>
      ) : (
        <span>Loading...</span>
      )}
    </>
  );
}

Did you see the magic? In case you're lazy and just copied the code, I got you covered ;) Look at this 😱.

The autocomplete is soo good. And it catches any kind of type errors you make without the need of declaring any types or interfaces manually. It's crazy good.

Now, start the dev server and see the greeting on the screen!

Notice the loading state. This is because we set ssr to false when we configured tRPC in _app.tsx. So it's being client side rendered. Go to src/pages/_app.tsx and set ssr to true now and see what happens.

Now there is no loading state because the data is being fetched server side and then it is being rendered. You can use whatever suits your needs.

Conclusion

In this article, we looked at what tRPC is and how to use it with a Next.JS app. tRPC makes building typesafe APIs incredibly easy and improves the DX by a million times. You can use it with not only Next.js but also React, Node and there's adapters being developed for Vue and Svelte as well. I recommend using it for pretty much any project you make now. For more information checkout the tRPC docs.

Code: https://github.com/nexxeln/trpc-nextjs

Thank you for reading.

Make and deploy your own blog in under 30 mins

Shoubhit Dash — Wed, 13 Apr 2022 11:44:09 +0000

Yes you read that right. Under 30 minutes. Let's not waste time and get right into it.

Tech Stack

First let's look at the stack that we're going to be using:

Remix which is a full stack React framework.
TailwindCSS for styling.
MDX for writing the blog posts.
Vercel to deploy our website.

Prerequisites

Good understanding of React.
Writing and formatting with Markdown

Coding

Alright let's start coding!
First, navigate to your projects directory and bootstrap a Remix project using

npx create-remix@latest

? Where would you like to create your app? ./remix-blog
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix if you're unsure; it's easy to change deployment targets. Vercel
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes

You can name it whatever you want, I just used remix-blog. You can select JavaScript if you want, I like TypeScript more so I'm going to be using that. And of course we're going to use Vercel to deploy our project so pick that. After you have bootstrapped the project, open it in your favorite code editor.

Next, start the application using

npm run dev

You will see a very basic app like this

You can see that that's being rendered from the index.tsx file inside the app/routes directory. index.tsx is always the root route.

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix</h1>
      <ul>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/blog"
            rel="noreferrer"
          >
            15m Quickstart Blog Tutorial
          </a>
        </li>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/jokes"
            rel="noreferrer"
          >
            Deep Dive Jokes App Tutorial
          </a>
        </li>
        <li>
          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
            Remix Docs
          </a>
        </li>
      </ul>
    </div>
  );
}

We don't really need all of this so go ahead and remove all of the link. Let's add a h1 tag to render a nice heading.

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>nexxel's blog</h1>
    </div>
  );
}

Let's understand how routing works in Remix. Routing in Remix is file based, and just how you can create route modules using JavaScript, Remix also allows us to make route modules using MDX.

So make a sub directory inside the app/routes directory called blog. This will be our route module for the /blog. Inside the blog directory make a MDX file, let's call it first-blog.mdx.
Inside it lets render a heading.

# First Blog post

Now if you navigate to http://localhost:3000/blog/first-blog, you should see the markdown being rendered there.

Now let's add some attributes to our markdown. We can add attributes like this:

---
title: "title of the blog"
date: 2022-04-13
meta: 
  title: "title of the blog"
  description: "first ever blog post"
---

Let's try to access these attributes by rendering the title. We can do this like this:

# {attributes.title}

{attributes.date.toDateString()}

Now navigate to /blog/first-blog and you should see the title and date being rendered. Also notice how the meta tag that we added to out markdown gave the page a title.

Now let's paste an actual blog post in here. You can write your own blog. If you don't have a blog prepared, for now you can just copy this blog to follow along.

So you should have a whole blog being rendered like this.

As you can see, we already have a working blog in like 7 minutes of work! But obviously this looks really bad. The typography sucks and there's no syntax highlighting for code blocks.

Let's add some syntax highlighting first. For this we're going to use hightlight.js as it's the most popular.

In MDX we can add plugins to all sorts of stuff. There are two types of plugins: remark plugins and rehype plugins. We are going to to use a rehype plugin called rehype-highlight which is using highlight.js. So open your terminal and install it.

npm i rehype-highlight highlight.js

Now open remix.config.js and add an mdx key with this configuration:

mdx: async (filename) => {
    const [rehypeHighlight] = await Promise.all([
      import("rehype-highlight").then((module) => module.default),
    ]);
    return {
      rehypePlugins: [rehypeHighlight],
    };
  },

Here we are importing rehype-highlight and the adding it to our list of rehypePlugins. So now your remix.config.js should look something like this:

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  serverBuildTarget: "vercel",
  // When running locally in development mode, we use the built in remix
  // server. This does not understand the vercel lambda module format,
  // so we default back to the standard build output.
  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
  ignoredRouteFiles: [".*"],
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  serverBuildPath: "api/index.js",
  publicPath: "/build/",
  mdx: async (filename) => {
    const [rehypeHighlight] = await Promise.all([
      import("rehype-highlight").then((module) => module.default),
    ]);
    return {
      rehypePlugins: [rehypeHighlight],
    };
  },
};

Now we're going to make a layout route for /blog. The way to do this in Remix is by create a blog.tsx file at the same level as blog directory. So create a blog.tsx file in the app/routes directory. As this is a layout route, any styling that we add here is added for all the nested routes for /blog.

Let's bring in a theme for syntax highlighting from highlight.js. If you look at node_modules/highlight.js/styles, you will see a lot of themes to choose from. I'm going to use the tokyo-night-dark theme, but feel free to choose whatever you like. Now we need to expose this css to all the nested routes. The way to do this in Remix is by the links function. You can read more about it here. So in app/routes/blog.tsx, let's add all this code.

import type { LinksFunction } from "@remix-run/node";
import styles from "highlight.js/styles/tokyo-night-dark.css";

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: styles,
    },
  ];
};

We're just providing it a stylesheet with the css that we imported from highlight.js. While we're here, let's also add some meta tags to this page. To add meta tags we use the meta function. Read more about it here.
This is what your file should look like now:

import type { LinksFunction, MetaFunction } from "@remix-run/node";
import styles from "highlight.js/styles/tokyo-night-dark.css";

export const meta: MetaFunction = () => {
  return {
    title: "nexxel's blog",
    description: "here nexxel writes about stuff",
  };
};

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: styles,
    },
  ];
};

Feel free to add whatever title and description you want.

Since this is out layout route, we also need to export a default component that returns an <Outlet />. This is a Remix thing, it requires this for nested routes. Read more about it here.

Now your code should look something like this:

import type { LinksFunction, MetaFunction } from "@remix-run/node";
import { Outlet } from "@remix-run/react";
import styles from "highlight.js/styles/tokyo-night-dark.css";

export const meta: MetaFunction = () => {
  return {
    title: "nexxel's blog",
    description: "here nexxel writes about stuff",
  };
};

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: styles,
    },
  ];
};

export default function Blog() {
  return <Outlet />;
}

Now if you rerun your dev server by using npm run dev, you will see that our syntax highlighting works!

Congratulations if you have made this far because we are almost done. If you look at the current state of our blog, it isn't very readable. The typography sucks. So we're going to use Tailwind for this, more specifically the @tailwindcss/typography plugin which will make our blog look super nice. Let's set up Tailwind first.

Kill your dev server and install Tailwind and its peer dependencies, then run the init command to generate tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer concurrently
npx tailwindcss init -p

We also need concurrently because we will run two processes at one, one will be our dev server, and another one will compile the Tailwind classes into actual CSS.

Now add all the file paths that will use Tailwind in tailwind.config.js

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now go to package.json and update the scripts.

{
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
  }
}

Now create a ./styles/app.css and add the Tailwind directives.

@tailwind base;
@tailwind components;
@tailwind utilities;

This will show you 3 problems in VSCode, just ignore them.

Now go to app/root.tsx and import the compiled css. This is what your code should look like:

import type { MetaFunction } from "@remix-run/node";
import styles from "./styles/app.css";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export const meta: MetaFunction = () => ({
  charset: "utf-8",
  title: "New Remix App",
  viewport: "width=device-width,initial-scale=1",
});

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

This is all documented here

Now that we have Tailwind set up, let's also install the typography plugin.

npm i -D @tailwindcss/typography

Open tailwind.config.js and add the typography plugin in the plugins list.

module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {}
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

Now when you run your dev server using npm run dev, you'll see that it will first give an error because our compiled css file doesn't exist yet, but then it will generate that eventually and it will work.

Now we're gonna see just how powerful this typography plugin is. Open app/routes/blog.tsx which is the blog layout route. Any styling that we add here is added for all the nested routes. So let's wrap the <Outlet /> component with a <div> and add the prose class from the typography plugin. This is what your code should look like:

import type { LinksFunction, MetaFunction } from "@remix-run/node";
import { Outlet } from "@remix-run/react";
import styles from "highlight.js/styles/github-dark-dimmed.css";

export const meta: MetaFunction = () => {
  return {
    title: "nexxel's blog",
    description: "here nexxel writes about stuff",
  };
};

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: styles,
    },
  ];
};

export default function Blog() {
  return (
    <div className="flex justify-center">
      <div className="prose lg:prose-xl py-10 px-6">
        <Outlet />
      </div>
    </div>
  );
}

We are also centering it using flexbox. Just one prose class and it makes it so much better!

If you make another MDX file inside the app/routes/blog directory, you will see that the styles work there too. All because of the blog layout route.

We're pretty much done here. Now all that is left is to make a /blog page to display all our blog posts. I'm going to keep this very simple and minimal but feel free to explore with the styling and come up with cool designs!

So let's make an index.tsx file inside app/routes/blog which will act as the /blog page.

First let's import all our blog posts in here. I changed the name of the MDX file to make more sense.

import * as goGol from "go-gol.mdx";
import * as nexdle from "nexdle.mdx";
import * as genLicense from "gen-license.mdx";

Now that we have all the MDX modules imported, let's write a function to pull out the slug which is the filename without the .mdx, and then we can just provide the rest of the attributes that we're getting from the meta attribute that we had added in out MDX files. This function is straight from the docs. Read more here.

function postFromModule(module: any) {
  return {
    slug: module.filename.replace(/\.mdx?$/, ""),
    ...module.attributes.meta,
  };
}

Now let's add a loader function, in Remix the loader function is used to load in data server-side. Read more here. We will just load all our blogs in here.

export const loader: LoaderFunction = () => {
  return [
    postFromModule(genLicense),
    postFromModule(nexdle),
    postFromModule(goGol),
  ];
};

Whatever we have loaded here is accessible in client-side by using a hook called useLoaderData which is provided by Remix. Read more about it here. Now we just map over our posts and render them in an unordered list. I'm also adding some very basic styling.

export default function BlogIndex() {
  const posts = useLoaderData();
  return (
    <div className="px-6">
      <h2>Posts</h2>

      <ul>
        {posts.map((post: any) => (
          <li key={post.slug}>
            <Link to={`/blog/${post.slug}`}>{post.title}</Link>

            {post.description && (
              <p className="m-0 lg:m-0">{post.description}</p>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

So after adding all this, your code should look like this:

import type { LoaderFunction } from "@remix-run/node";
import { Link, useLoaderData } from "@remix-run/react";
import * as goGol from "go-gol.mdx";
import * as nexdle from "nexdle.mdx";
import * as genLicense from "gen-license.mdx";

function postFromModule(module: any) {
  return {
    slug: module.filename.replace(/\.mdx?$/, ""),
    ...module.attributes.meta,
  };
}

export const loader: LoaderFunction = () => {
  return [
    postFromModule(genLicense),
    postFromModule(nexdle),
    postFromModule(goGol),
  ];
};

export default function BlogIndex() {
  const posts = useLoaderData();
  return (
    <div className="px-6">
      <h2>Posts</h2>

      <ul>
        {posts.map((post: any) => (
          <li key={post.slug}>
            <Link to={`/blog/${post.slug}`}>{post.title}</Link>

            {post.description && (
              <p className="m-0 lg:m-0">{post.description}</p>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

Now if you go to /blog you will see, that all our posts are shown there.

Now let's make a nice landing page for our blog. I'm going to keep this very minimal but this is where you can show off your creativity and personality!

Go to app/routes/index.tsx and add your code there. This is what mine looks like:

import type { MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";

export const meta: MetaFunction = () => {
  return {
    title: "nexxel's blog",
    description: "here nexxel writes about stuff",
  };
};

export default function Index() {
  return (
    <div className="flex justify-center items-center text-center text-4xl px-6 h-screen">
      <div>
        <h1 className="font-bold">Welcome to my bare-bones blog</h1>
        <Link to={"/blog"}>
          <button className="pt-6">
            <span className="font-normal text-xl bg-black text-white px-4 py-2 hover:opacity-90 transition-opacity duration-300 rounded-sm shadow-2xl">
              Go to the blog
            </span>
          </button>
        </Link>
      </div>
    </div>
  );
}

Congratulations!! You have finished building a blog app using Remix, TailwindCSS and MDX. That is actually so cool.

Now let's deploy this thing using Vercel 🚀.

Deploying To Vercel

First, delete the app/styles directory (that was our compiled css that was generated) and then upload this code to GitHub. I'm assuming you know how to do that, if you don't feel free to ask in the comment section or just look it up online.

Then go to Vercel and login in with GitHub. Click on new project.
Import the repository that you uploaded the code to.
Choose Remix as your framework preset and then click on deploy!

And we're done! Congratulations on making a very cool blog for yourself and deploying it to the internet! Now whenever you add new blogs you just have push those changes to your repository on GitHub and Vercel will deploy that for you. It's awesome, I love Vercel.

That's it for today, damn this was a long one. If you made it this far, please do comment and show off your new blog. I would really appreciate it!

Code for this tutorial: https://github.com/nexxeln/remix-blog
My Blog: https://blog.nexxel.dev

Thank you for reading!