New year, new blog! After delaying the publication of my blog for a long time, I finally finished developing it using Next.js, PocketBase, and Mantine. Want to know why I chose these tools? Then, keep reading here with me.

I’ve been creating blogs for a long time (since 2007). I started with Blogger, but then I migrated to WordPress. And that’s when I started to be interested in Linux and programming. I spent a lot of time creating themes, customizing plugins, reading documentation, and translating themes and plugins for WordPress. And, although WordPress is an excellent CMS for those who just want to publish a website as quickly as possible, this time I wanted something more personalized, containing all the features I would like to have and nothing more. From there, I started researching.

I tried several CMSs (Directus, KeystoneJS, Strapi and Cockpit), but what I found most simple to meet my need was PocketBase, mainly because I intended to self-host my solution. The other CMSs are great, but when you’re a team of one, you have to choose the right tools. And what’s easier for one person to manage than an SQLite database? PocketBase already exposes database updates in real time with SSE, provides authentication and file management (with integration with S3), SDK for JavaScript and Flutter, and can even be used as a framework. All this within a small binary written in Go (if you want to know more about PocketBase, read the documentation and watch this video from FireShip, where he shows how to create a real-time chat system with PocketBase). And finally, in order to have real-time backups of my SQLite database and send them to S3, I use Litestream. Well, having made the choice for the backend, let’s move on to the frontend.

I tried Astro (which is excellent!) and Remix, but I ended up choosing Next.js, mainly because of the Vercel image generation library, which I use to generate images of the post, like this one:

And here we come to the choice of what I would use to create the styles of the blog. In recent years, I styled React applications with CSS Modules, Styled Components, Stitches, Tailwind and Chakra UI. I even stated to create a Design System with Stitches and Tailwind, but create an entire Design System all by myself would take a long time, so, I decided to take the shorter route.

I have tried a few libraries until I found Mantine, which is an excellent library packaged with everything I wanted to use. From there, the work consisted of implementing the blog with the basic initial features:

• Incremental Static Regeneration of posts;
• Form validation with Zod;
• Nested comment system with anti-spam verification provided by Akismet;
• Display of commentator avatars with Gravatar;
• SVG Favicon with light/dark mode;
• I18n (Portuguese and English).

With all that ready, I changed the canonical URLs of my articles on Dev.to to point to the new URLs and finally published my blog.

Of course, if you’re reading this on my blog now, you’ll see that an important feature is still missing: search. I’ll be studying possible solutions for this in the coming days, but I’ll already let you know that you can preview the functionality by pressing the / key on any page.

Happy 2023, everyone 🎉.

In computer science, a first-class citizen is an entity that supports all operations available to other entities. Some of the available operations are:

• They may be named by variables;
• They may be passed as arguments to procedures;
• They may be returned as the results of procedures;
• They may be included in data structures.

It was the British computer scientist Christopher Strachey (1916-1975) who first coined this notion of first-class citizen status of elements in a programming language in the 1960s.

In JavaScript, for example, functions are first-class citizens, as all of the operations cited above can be applied to them. Let’s see some examples:

A simple function definition in JavaScript

function sum(a, b) {
  return a + b
}

Assigning a constant to a function

const sum = (a, b) => a + b

// or
// 
// const sum = function (a, b) {
//   a + b
// }

Passing a function as an argument

function sum(a, b, callback) {
  const result = a + b

  if (typeof callback === 'function') {
    callback(result) // pass the result as an argument of `callback`
  }

  return result
}

//        Pass `console.log` as the callback function
// -------\/
sum(2, 2, console.log) // => 4

Return a function

function sum(a, b, callback) {
  const result = a + b

  if (callback) {
    return () => callback(result)
  }

  return result
}

//            The callback is the sum of the result with 2.
// ------------------\/
const fn = sum(2, 2, (result) => sum(2, result))
//    ^---- Store the returned function in a variable

//          Execute the function
// ---------\/
console.log(fn()) // => 6

Including a function in a data structure

// Store the basic operations in an object
const operations = {
  sum: (a, b) => a + b,
  sub: (a, b) => a - b,
  mul: (a, b) => a * b,
  div: (a, b) => a / b,
}

A remote procedure call (RPC) is a mechanism of communication between two computational environments, where one can be identified as a client, while the other can be identified as a server.

From the client’s point of view, the RPC is just a matter of calling a function with the desired arguments and await for the response, in order to continue the program’s execution.

Thus, using an RPC allows one programmer to distribute the system, according to their needs.

References:

• RPC Vs Simple Procedure Call - Georgia Tech - Advanced Operating Systems
• How RPC works
• Remote Procedure Calls (RPC)
• Introduction to RPC Programming
• Building an end-to-end typesafe API — without GraphQL