New year, new blog! After delaying the publication of my blog for a long time, I finally finished developing it using <a href="https://nextjs.org/">Next.js</a>, <a href="https://pocketbase.io/">PocketBase</a>, and <a href="https://mantine.dev/">Mantine</a>. Want to know why I chose these tools? Then, keep reading here with me.
I&#39;ve been creating blogs for a long time (since 2007). I started with Blogger, but then I migrated to WordPress. And that&#39;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 (<a href="https://directus.io/">Directus</a>, <a href="https://keystonejs.com/">KeystoneJS</a>,
<a href="https://strapi.io/">Strapi</a> and <a href="https://getcockpit.com/">Cockpit</a>), but what I found most simple to meet my need was <a href="https://pocketbase.io/">PocketBase</a>, mainly because I intended to self-host my solution. The other CMSs are great, but when you&#39;re a team of one, you have to choose the right tools. And what&#39;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, <a href="https://pocketbase.io/docs/">read the documentation</a> and watch this video from <a href="https://www.youtube.com/watch?v=Wqy3PBEglXQ">FireShip</a>, 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 <a href="https://litestream.io/">Litestream</a>. Well, having made the choice for the backend, let&#39;s move on to the frontend.
I tried <a href="https://astro.build/">Astro</a> (which is excellent!) and <a href="https://remix.run/">Remix</a>, 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:
<img src="https://douglasmoura.dev/api/v1/og?ok" alt="The job that's never started as takes longest to finish" />

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 <a href="https://github.com/css-modules/css-modules">CSS Modules</a>, <a href="https://styled-components.com/">Styled Components</a>, <a href="https://stitches.dev/">Stitches</a>, <a href="https://tailwindcss.com/">Tailwind</a> and <a href="https://chakra-ui.com/">Chakra UI</a>. 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 <a href="https://mantine.dev/">Mantine</a>, 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:
<ul>
<li><a href="https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration">Incremental Static Regeneration</a> of posts;</li>
<li>Form validation with <a href="https://github.com/colinhacks/zod">Zod</a>;</li>
<li>Nested comment system with anti-spam verification provided by <a href="https://akismet.com/">Akismet</a>;</li>
<li>Display of commentator avatars with <a href="http://pt.gravatar.com/">Gravatar</a>;</li>
<li>SVG Favicon with light/dark mode;</li>
<li>I18n (Portuguese and English).</li>
</ul>
With all that ready, I changed the canonical URLs of my articles on <a href="https://dev.to/douglasdemoura">Dev.to</a> to point to the new URLs and finally published my blog.
Of course, if you&#39;re reading this on my blog now, you&#39;ll see that an important feature is still missing: search. I&#39;ll be studying possible solutions for this in the coming days, but I&#39;ll already let you know that you can preview the functionality by pressing the <kbd>/</kbd> key on any page.
Happy 2023, everyone 🎉.

New year, new blog (or how I created this blog for 2023)

In computer science, a first-class citizen is an entity that supports all operations available to other entities. Some of the available operations are:
<ul>
<li>They may be named by variables;</li>
<li>They may be passed as arguments to procedures;</li>
<li>They may be returned as the results of procedures;</li>
<li>They may be included in data structures.</li>
</ul>
It was the British computer scientist Christopher Strachey (1916-1975) <a href="https://link.springer.com/article/10.1023/A:1010052305354">who first</a> 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&#39;s see some examples:
A simple function definition in JavaScript
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">function sum(a, b) {
 return a + b
}</div>
</code></pre>Assigning a constant to a function
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">const sum = (a, b) =&gt; a + b

// or
// 
// const sum = function (a, b) {
// a + b
// }</div>
</code></pre>Passing a function as an argument
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">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) // =&gt; 4</div>
</code></pre>Return a function
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">function sum(a, b, callback) {
 const result = a + b

 if (callback) {
 return () =&gt; callback(result)
 }

 return result
}

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

// Execute the function
// ---------\/
console.log(fn()) // =&gt; 6</div>
</code></pre>Including a function in a data structure
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">// Store the basic operations in an object
const operations = {
 sum: (a, b) =&gt; a + b,
 sub: (a, b) =&gt; a - b,
 mul: (a, b) =&gt; a * b,
 div: (a, b) =&gt; a / b,
}</div>
</code></pre>

What is a first-class citizen in computer science?

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&#39;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&#39;s execution.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3733ruz3n51tadloaaq.png" alt="Diagram on how a RPC (remote procedure call) works">
Thus, using an RPC allows one programmer to distribute the system, according to their needs.
References:
<ul>
<li><a href="https://www.youtube.com/watch?v=gr7oaiUsxSU">RPC Vs Simple Procedure Call - Georgia Tech - Advanced Operating Systems</a></li>
<li><a href="https://learn.microsoft.com/en-us/windows/win32/rpc/how-rpc-works">How RPC works</a></li>
<li><a href="https://users.cs.cf.ac.uk/Dave.Marshall/C/node33.html">Remote Procedure Calls (RPC)</a></li>
<li><a href="https://web.archive.org/web/20030404113118/http://techpubs.sgi.com/library/tpl/cgi-bin/getdoc.cgi?coll=0650&db=bks&srch=&fname=/SGI_Developer/IRIX_NetPG/sgi_html/ch04.html">Introduction to RPC Programming</a></li>
<li><a href="https://colinhacks.com/essays/painless-typesafety">Building an end-to-end typesafe API — without GraphQL</a></li>
</ul>

Douglas Moura

Douglas Moura

#programming

New year, new blog (or how I created this blog for 2023)

What is a first-class citizen in computer science?

What is a RPC (Remote Procedure Call)?