DEV Community: Michael Salim

Don't fall in love with your code

Michael Salim — Sat, 07 Dec 2024 23:29:00 +0000

I just deleted hundreds of lines of code I wrote yesterday and replaced them with 32 lines of new code. This was for a feature for TheOpenPresenter, used to indicate if an audio is playing.

Every so often, I’d work on a functionality that seems quite straightforward to implement. In this case, I just needed to show this icon when audio is playing.

Simple enough. Each of these is a scene containing multiple plugins. Each plugin has its own property like isPlaying . We can merge the values between the plugins, and if the flag is true, we can show the icon.

Architecting a solution

The main issue is how to access this data. See, we could access the data directly. But each plugin can have its own schema. While some plugins may have a simple isPlaying property, some others might need something more complicated to represent its playing status.

Simple, why not allow the plugin to register a callback/function that returns the state?

This is the same pattern that TheOpenPresenter uses for many of its plugins. And while we’re at it, we can abstract it into a SceneState object. So if we ever need any other state, we can add it here. Here’s how it might look like for the plugin:

// The pattern we use for plugins
serverPluginApi.onPluginDataCreated(pluginName, onPluginDataCreated);
serverPluginApi.onPluginDataLoaded(pluginName, onPluginDataLoaded);
serverPluginApi.registerRemoteViewWebComponent(
  pluginName,
  remoteWebComponentTag,
);

// Example of how the new API might look like
serverPluginApi.registerSceneState(
  pluginName,
  (_, rendererData) => {
    return {
      audioIsPlaying: !!rendererData.find((x) => x.isPlaying),
    }
  },
);

Server handling

Notice that the code above is handled on the server. This is because TheOpenPresenter consists of 3 separate components:

The Remote - where this audio indication is shown
The Renderer - plays the audio
The Server - connects the two

Ideally, we should handle this in the frontend (remote) so that we don’t add extra load to the server. However, registering this function can be messy. Our frontend uses a micro-frontend architecture loaded with Web components.

The red area below is a React shell. The green area is loaded through web components and is managed by each plugin.

Notice that the audio icon is located on the left side of the shell. How do we provide the function that we need to the shell? We could include a JS function in the web component bundle but that sounds like a mess in the long term.

Handling this on the server seems like the proper way to do this.

Plumbing the data through

With that decided, it’s time for implementation. There are a few things to do:

Create the plugin API
Provide this data to the frontend
Consume and update the UI

Implementing

I won’t bore you with the details so here’s an overview. The API was not quite straightforward since our data can be quite confusing. In short: A scene can have multiple plugins. And there can be multiple renderers, each viewing a scene in a different way. So a plugin could have multiple renderers showing it in different ways. But with a bit of data manipulation, problem solved.

Consuming and updating the UI

Consuming the value was straightforward. I contemplated using Yjs’s awareness protocol to provide the data since it’s real-time and the framework is already in place. This is how the state is stored. However, including this data from the server is its own problem. So I decided to use GraphQL instead - the protocol we’re using for everything else in the platform.

So all we need to do is call the endpoint, listen to it using GraphQL’s subscription, and show the icon as needed. Done.

Providing this data to the frontend

Thankfully, we use Postgraphile which makes extending the GraphQL schema quite straightforward. We can also make it a subscription simply by adding @pgSubscription to the GraphQL schema. It’ll then watch a topic and update the value whenever we call pg_notify on that topic. For example:

await pgPool.query(
  `select pg_notify('graphql:sceneState:${id}','{}');`,
  [],
);

Manipulating the data was annoying but just a bit of patience and it’s done!

The last piece of the puzzle is calling pg_notify when we need to.

For this, we can add a listener to the state (Yjs) and call the notify whenever anything changes:

state.observeDeep(async () => {
  // Call pg_notify here
});

The only thing left to do is performance improvements. Right now, the function is called for every small change, it’s also updated to the frontend. We can calculate the resulting state and compare if anything changes before pushing the update.

Better solution

Now this solution certainly works. But I hated that we were listening to every single change. It’s unnecessary and I’m not sure how the performance will scale. Is there any better solution?

So I stepped back for a second and an idea came: How about we go to the basics and use the data from Yjs?

The problem was that each plugin may use different ways to indicate play status. So we needed a way to know how to calculate the resulting state ourselves. But rather than letting the user pass a function, why not reserve a property that they can use to indicate this?

Rather than passing a function to calculate the state, each plugin could set the reserved state directly alongside their existing data with properties like __audioIsPlaying . They could use this value directly, or they could keep it in sync with their existing properties like so:

const onRendererDataLoaded = (
  rendererData,
) => {
  watchYjs(
      // Watch the isPlaying property
    (x) => x.isPlaying,
    () => {
        // And if it changes, sync the __audioIsPlaying property
      rendererData.set("__audioIsPlaying", rendererData.get("isPlaying"));
    },
  );
};

Deleting old code

The new method is brilliant. No extra listener, no extra API, just a simple reserved property.

The cost? Well, I already wrote 95% of the first implementation 🫣

**“It’ll be such a shame to delete this when I’ve worked on it for so long. Everything else is perfect other than this one thing!”* - My mind*

This is not my first time. Not second or third either. This time it was just a few hours of work. The longer it takes to implement, the harder it is to let go. But if we should not get attached to servers, we shouldn’t be attached to the code we write either.

It’s obvious that the second implementation is better. It’s faster, less moving parts, less API surface, and less code to maintain. The first implementation added 289 new lines while the second implementation only added 32 new lines.

What’s the lesson to learn then?

Well, maybe find the simplest solution first. But sometimes we don’t reach the best solution just by thinking about it. If that’s the case, don’t love your code and don’t be afraid to throw it away. And maybe write a blog post so that you get something out of it!

If you're read this far, you might want to try TheOpenPresenter! It's an open-source presentation system that lets you control any of your screens remotely.

Show slideshows, play videos, use as dashboards and many more. The software is still very early in development as you can tell from this post but it's stable enough to use regularly. I personally use it for my meetups every week.

Any questions, do ask. Or feel free to report issues in the Github repo.

I have a new Junior Developer and it kinda sucks

Michael Salim — Thu, 11 May 2023 20:09:49 +0000

That developer is ChatGPT and I have a love-hate relationship with it.

There are so many articles about AI nowadays so I’ll try to keep this one short.

TL;DR:

Using ChatGPT to code is like having a Junior developer under you. They can get the code 80% there but you’ll need to review practically every line.

The scenario

I have to admit that there are plenty of ways you could use ChatGPT to help write code. It’s probably better at some of them and worse at others.

For example, I’ve heard plenty of people using it as a search engine. I personally find that a bit questionable. It’s not that hard to find documentation or even answers through search. I use Kagi which helps to cut down the fluff. On the contrary, using ChatGPT, how are you supposed to know if the answer is true?

On the other side of the spectrum, there are plenty of people using it as a glorified auto-completion. Something like Github Copilot. I can see that being useful.

The scenario I’ve chosen is:

Converting my code from chakra-ui to tailwindcss.

Why?

There are plenty of resources for both technologies, especially Tailwind (and of course, HTML). It should have plenty of data to work from.
It is very possible to create a program to do this. While there may be plenty of edge cases, the functionality itself is straightforward. chakra-ui is inspired by tailwind so it inherits a bunch of things that can be easily transferred.
It is something I need to do. So it’s a real use case that someone else might encounter.

Prompt engineering is a chore

Looking around the field, it seemed like prompting well is the difference between getting good or mediocre results. I’m not the best at this but I did some research and tried my best.

I made sure to use multiple prompts to get it to a good state. Only pasting my code whenever it seems like it knows it should only convert my code.

Honestly, this part could be improved. Between the UI and the interaction, it’s quite a chore to use:

It can take some time for it to reach the desired state

Between me thinking what to write, then waiting for it to respond and finish writing, it gets quite annoying to do this work

It’s inconsistent

It doesn’t help that you can’t always reuse the same prompts. ChatGPT has some randomness to it so I had to tweak the prompt every single time. Copy-pasting a prompt that worked previously didn’t help.

It’s very easy to get out of the desired state

The above is fine if it’s a one-time thing. But I found that it’s very easy for the AI to forget everything after the first code conversion. The most repeated success I had was 3 times I believe. Beyond that, it returned completely unrelated things like explaining what my code does.

Token is quite a limiting factor

There’s only so much code that it can produce due to its token limit. You can check the tokenizer here to see how it calculates the tokens. It’s not very friendly for code. Below is an example of one of its outputs. Each different color represents a token.

Because of this, I have to split the conversion into multiple steps. Otherwise, the generation will stop in the middle. Telling it to continue doesn’t work most of the time. Combined with the points above, this quickly becomes a chore to do.

All in all, the feeling I get is that I don’t want to write English. If I already have to write something, I’d rather directly write code that works.

I can see prompt engineering being a key skill to have in the future. Similar to how knowing how to search is a key skill in today’s world.

The output is not too bad

For all the work it took, ChatGPT did output some pretty impressive code. Here’s some comparison between the original and the result:

As you can see, it did the job decently well.

The Good

The structure is brought over pretty well
Other than the details, the HTML structure is quite similar to the original. The spacings are off but the overall layout remains.
The text content doesn't change
The content itself was handled well. Even though I had to double-check all of them, none of it were changed. The only exception are those derived from JS.

The Bad

It had random classes
There are plenty of classes that don't do anything. Some were changed and some others were invalid tailwind classes.
There are plenty of tiny differences
The UI looked as if a library was just upgraded and someone forgot to migrate the code. In this case, it’s because ChatGPT randomly changed the values of the classes. For example, a padding of 3 to 4, or changing the font-weight from bold to normal. The details were all wrong.
It doesn’t work half the time
The screenshots above were those that I can directly compare. In reality, the results were either incomplete or just wrong enough that I had to make many changes to get it to work. And because of that, I can’t compare it side by side. There’s simply nothing I can compare with since the code doesn’t run.

It’s like reviewing PRs instead of writing code

What’s great about this is that I have something to work from. Thankfully, the work itself is very straightforward. It’s easy to spot errors. The mapping between the classes from chakra-ui and tailwind is almost one-to-one. It’s only tedious because the syntax is different.

But this approach is more akin to reviewing PRs. I had to scan through the whole code to make sure everything is done correctly.

It looks alright at first glance. But there are many gotchas once you work with it and pay attention closely. It brings this false sense of security which made me a bit frustrated once I found out about all the flaws.

A big part of it is code that is interpolated from other codebases. It doesn’t look terrible but it’s not what I wanted.

There are even some alarming changes like changing the heading from h2 to h1. I can only assume it did this because of the content.

It felt like a junior developer slapped something together and didn’t test their code. And now I have to review and fix it without being able to tell them to fix it themselves. And this is awful. I already have my fix of reviewing PRs at work. Now I have to do it too for my own projects? No thanks!

Hopeful future

While I don’t think it’s anywhere near there yet, I do think AI will be helpful at some point for development in the future. Whether the answer is LLMs, who knows.

Token limits are constantly increasing

I’ve held off finishing this article long enough. During that time, there are plenty of announcements of token limit being increased. While I’m not sure if it’s public, paid or whatever, this is great to see.

Prompting UX should get easier with time

With ChatGPT plugins and better integration, issues like remembering state & consistency should be improved. Hopefully, that’ll lower the effort needed to get useful output from ChatGPT.

In the meantime, I completed the other half of the migration manually. Was it faster? Well, who knows. It felt about the same. But writing it manually did feel a whole lot better.

Making YouTube video with React

Michael Salim — Fri, 24 Feb 2023 23:08:19 +0000

I recently started a YouTube channel. It's the educational kind where I explain cool technologies. My inspiration was channels like Wendover Productions and Kento Bento. One thing I want to get right is animations. I have previously watched a lot of videos by 3Blue1Brown. Their animation is very useful for explaining complex topics.

The problem is that I’ve never used tools like After Effects before. I also don’t want to learn or pay for it. Actually, I can’t even use it since I’m running Linux.

Being a “good” programmer, I thought — why not make the animation in React? What could go wrong?

React is my home turf

Now, I wanted something programmable. Somewhere you can tweak text and numbers instead of manually aligning elements. I don’t want to copy-paste hundreds of times when it could be a simple loop. And the idea of reusing past components is appealing to me.

Why React though? Well, it’s what I’m most familiar with. All my projects are built using it and I can create layouts with CSS pretty quickly. In fact, I’ve created a game with React + CSS Grid for a game jam in the past.

And most importantly, it’s fun!

The alternative was painful

For comparison's sake, I animated a simple scene in Davinci Resolve using a few tutorials from YouTube. This is the result:

That’s it. But for such a simple scene, it was a major pain to create. Here’s what the node graph looks like. Even worse, if I want to change a group of items slightly, I have to update them separately.

First scene concept

I had an image of what I wanted to illustrate. The video is about how the PS3 was used as a supercomputer. For that, a bunch of them were clustered into a single machine. I wanted to show how many PS3s were used. Showing a number is fine but I also wanted to show each physical machine.

First, a single PS3 would appear, then a few dozen, then hundreds and then to its final amount. All while animating the previous ones to their new position. Here’s the result:

The project setup

To bootstrap the project, I used Next.js. This part doesn’t matter much. But its file-based routing is convenient for separating different scenes. I can just create a new file for each scene.

Animating Library

While researching for this, I had an idea of scenes I want to make. For example: Graphs, Pie charts and illustrating how a CPU work with simple boxes. One of the ideas of using React is to leverage its large amount of open-source libraries.

However, It turns out that most packages don’t handle animation very well. And if it has any, it’s likely not configurable. So I began looking for an animation library and came across Anime.js.

Anime.js is great because I can simply define the initial state and the goal. Anime.js will handle everything in between.

Here’s a snippet of the final code:

There are some maths involved to calculate where each PS3 image should go. However, the animation calculation is all done by Anime.js. Not bad.

Recording & Exporting

Now the harder part is finding a way to record and export the animation. I wanted to automate this process. Recording my screen sounded like a very crude way of doing this. Ideally, it should take its time to render each frame as it needs and create an mp4 file. This is so that:

Even if the animation doesn’t run smoothly on my machine, it still will show up smooth on the recording
The resolution will be correct. My screen is HD so I can capture that but what if I want a larger resolution? Recording this way would also take a whole monitor which is annoying.

Problems and Iterations

rrweb + rrvideo

In the end, I had to experiment quite a few times. First, I tried using rrweb since it was something that was already on my radar. The idea is I would record using that and convert it into a video using rrvideo.

This approach was… alright. It’s an alternative to recording my screen. The advantage is that rrvideo spawns a separate chrome instance (through puppeteer). This allows the recording to run headlessly.

The disadvantage is it brings a bunch of complexity to an otherwise simple task. The initial recording step is also an unnecessary process.

Canvas w/ paper.js

The previous Anime.js with HTML+CSS approach worked with a few elements. But it didn’t run very well once I added hundreds of images. Each PS3 was an image and rendering a thousand of them was not great for performance. I wasn’t able to get it running at 30 fps for the whole sequence.

To solve that issue, I searched for some solutions using canvas. I didn’t want to work with pure canvas so after doing some research, I settled with paper.js.

Using paper.js was convenient because it allows me to reuse the Anime.js logic I have previously written. Instead of modifying the DOM element directly, I modified it to update a JSON object. Then I use that object to update the canvas every tick.

It’s not very elegant but it worked so good enough!

Canvas Capturing

I also tried to find a better recording method. Since I’m now using canvas, there are some solutions to recording that seemed quite elegant. For example, paper.js uses requestAnimationFrame to achieve its smooth animation. There are libraries like ccapture.js that hooks into the various methods like requestAnimationFrame and setInterval, allowing it to render each frame separately.

Using this approach works but it was quite troublesome to get working. For example, the animation loop needs to be started before the recording starts. This is quite annoying to deal with. It also means that it’s not possible to add a delay between animation easily.

Recording manually was a good enough solution

With that problem in the way, I decided to record the screen manually instead. For this, running a simple ffmpeg command was good enough to get the results I wanted. You can see the results in the 2nd video above.

Utilizing other React libraries

The next scene I had in mind was an animated pie chart. There are so many charting libraries around that I was sure one of them would fit my needs. The pie chart below was rendered using recharts, utilizing its mount animation. To get the results, I recorded my screen like the first scene.

The actually useful animation!

And finally, the reason I wanted my videos to be animated in the first place. Below is a simple illustration of the difference between how the CPU processes data compared to the GPU. It helps to illustrate the point instead of simply saying it in words.

For this scene, I decided to research other ways to achieve this. The Anime.js method was decent but it was rather clunky particularly in terms of timing it. Meanwhile, the canvas method was performant but I’d rather use a “proper” tool if I can’t leverage React’s tooling or even CSS.

Target based animation

A bit more research led me to Framer Motion. I’ve actually heard about the library in the past. I hadn’t used it since I never needed it. But I did experience it through other libraries like the excellent Chakra UI library.

Like Anime.js, Framer motion lets you define the result you wanted. The library will then handle the animation part. However, Framer motion has the added benefit of having a nicer workflow. It’s all directly in React. In my React code, I can simply define what to render depending on a state. Then, I can play around with the state to change between scenes. Framer motion will handle the rest.

After hooking the state value to key press events, I can control when I want to transition with a button press. This also allows me to match the animation with my video.

Below is how the white blocks in my video that flow between the RAM and GPU is defined. Isn’t it nice? To start the animation I only need to render it. In this case, incrementing the variant counter.

CSS layout animation

Another added benefit of Framer Motion is its layout animation capabilities. With Anime.js, I’m limited to animating linear values. But what if I added a new element or changed a flexbox property? It wouldn’t work at all. Thankfully, Framer Motion handles this use case nicely.

Transparency is a chore to deal with

So that was the stack that I used for the rest of the animation. There are other details and methods that I had to deal with in the making of this video. Many of them are omitted since they never went anywhere.

But one detail I had to work around is transparency. To get it working, I set the animation to have a green background. In Davinci Resolve, I can then mask/key the background away. This worked but it limited the colors I could use in my animation.

Should you do it?

Probably not. I’m sure there are good ways of doing this without code. Though I can’t recommend any since I’ve never tried them. But if you are someone who managed to read this far, then you're probably savvy enough to do something like this!

Future solution

Now that I’m planning for a second video, there are other stuff that I’d like to try. For example: Motion Canvas. This tool is authored by someone who was looking for something similar to me. He actually has a whole video explaining the tool. It included various features like timing the animation with audio and rendering it per frame. It also renders the animation as an image sequence. I’m assuming this would solve the transparency problem nicely.

If you know other tools that solve this in a good way, do let me know!

That's it for now. If you’re interested in the final video, you can watch it here: https://www.youtube.com/watch?v=kOjgPTj9MKM. If you like this article, you might like the contents of the video too.

I have 218 browser tabs open

Michael Salim — Mon, 01 Aug 2022 22:12:00 +0000

Yes, that number is correct. And it’s awesome! This wouldn’t be possible just a short few years ago.

Everybody that heard that inevitably ask me, “But why do you have that many tabs open?”. Well, let's start from the beginning.

A little background

I've been on the internet for as long as I can remember. Maybe around 16 years? That’s probably less compared to many of you. But for me, that's more than 2/3 of my life.

In that period, I went from using IE, then Chrome, to Firefox, back to Chrome and now I’ve settled with Firefox. The reason why is tightly related to why I have so many tabs open at any given time.

My browser progression (excluding minor temporary ones).

Browser tabs changed the game

By the time I browse regularly, tabs were already commonplace. I hated the times I had to use Internet explorer and open multiple windows. It was always messy and hard to navigate around.

It's funny because you can argue it's not a big difference. You only move the location you click to change pages. Instead of clicking on the bottom of the screen, you click on the top instead. Meanwhile, windows allow you to place your pages wherever you want. So why are tabs so popular then?

I believe the smallest of changes can make such a big difference in workflow and user experience. It’s similar to why I use i3, a tiling window manager. More constraint and scoping can be very helpful. I might write a separate article about it in the future.

No matter the reason, I think most will agree that tabs made people open more pages compared to window navigation.

Example of browser tabs

Opening many tabs would lag my PC

By this point, I was regularly opening tens of tabs. Specific activities also increase that number by a lot - like researching a topic.

You know where this is going. My PC would lag. It would freeze randomly. Pages also start taking longer to load. Whoops, I’ve run out of memory.

It’s hard to find the tabs you want

Another issue is the lack of horizontal space. As you open more tabs, each tab continues to decrease in size. This is annoying to deal with. What if you’re doing some research and you open a bunch of random websites? You don’t know what their favicon looks like. Now you have to open them one by one to find the one you were looking for.

Tab hell

A new way of viewing tabs

One day I found the Tree Style Tab extension. It displays your tabs as a tree but more importantly, it’s vertical. Not a big deal right?

Tree Style Tabs in action

Turns out this entirely changed the game for me. Just like the change from windows to tabs enabled more tabs to be open, tree tabs did the same. Horizontal tabs are awful to manage after 15 tabs. With tree styles, you can easily manage more than 60 tabs with little to no issue.

In tree tabs, the titles are always visible no matter how many tabs you have open. When you open a link in a new tab, it will be nested within the previous tab indicating how you reached that page

Navigation is king

Around the same time, I also found the Vimium extension. It enables vim-like navigation in your browser. You can practically do any action you want with just your keyboard. The best way to show you is to demo it.

All of those actions were done with a keyboard. At the 20s mark, I used a shortcut to go back to the previous tab (basically alt-tab). And at 15s & 22s, you can see the ability to search for a tab. Combined with Tree style tabs, managing many tabs becomes a breeze.

“But wouldn’t your PC lag all the time?”

Thankfully Moore's law is in full effect. While each web page keeps increasing in size, hardware increased its performance even more! CPU keeps increasing their core count and RAM gets cheaper each year (well, let’s ignore the chip shortage 😉). At the moment, I have 48GB of RAM to handle all my needs.

Even more tabs!

You might’ve noticed a theme here. I found another extension! It’s called Sideberry.

Sideberry looks very similar to Tree style tabs. However, it introduced a concept called panels. Each panel has its own list of tabs. It allows you to compartmentalize your tabs into separate buckets.

Panels in Sideberry

On a typical day, I usually work on several projects. I would use a panel for each long-running project. One for entertainment and another for rabbit holes I happen to stumble upon. Each panel have about 50 tabs on average.

So you can imagine how I get to 200+ tabs very easily. I believe I even reached 300 tabs once or twice before. Once I’m used to having about 70 tabs, I started to have more open from 100, 150, 200, and eventually 300. It doesn’t make that much of a difference.

It does depend on what I’m doing. It’s currently a less busy time. And at this time of writing, I “only” have 151 tabs open. Not too bad!

Just because it’s there doesn’t mean it’s open

If you’re still not convinced that this works, there’s more! Sideberry also allows you to unload a page. An unloaded page doesn’t consume resources. When you open it, it will load the page from scratch. This means that you can have as many tabs open without having performance issues! Just make sure you unload some of them.

Sideberry unloaded tabs

“Sure, the technology allows you to do it. But just because you can doesn’t mean you should!”

To that I say: Why shouldn’t I? Having these tabs gives me 2 huge benefits:

I can see how I got to the pages I did when researching. From there I can easily close the tree when it doesn’t lead to good content.
The tabs act as a reminder of things I want or need to work on.

Imagine browsing Hacker News and you stumble upon a gold mine. It had so many good resources that you can’t help but open all the links. Half of them turn out to be useless and you close them. Now you’re left with 4 things you want to know more about. So you decide to leave them open. Then you go through each of them, opening links and reading them.

When you’re done, you can easily close the whole tree since they’re sorted as such. Now the other 2 pages are products you want to try. But you don’t have time for that right now. So you leave them open and continue with work on a separate Sideberry panel. When you’re free, you go back to the other panel and try the product. Turns out it was awesome and everyone lived happily ever after.

“Why not use bookmarks?”

I have 280 bookmarks. A good dozen for quick access links. Most are resources and cool things I might want to check again in the future. Maybe it’s an early access product and I want to check back once it’s more stable.

It’s simply a different use case. I use bookmarks for long-term things. They’re curated and I rarely open them until I need something to refer to. For example, I have a folder containing websites that provide quality SVG arts.

When I leave something as a tab, they are either:

Things I use often - So I don’t see the point in closing them
Things I want to continue researching

It’s part of a workflow

Tabs that are left open go into a workflow that helps me sort out relevant pages. Naturally, I would consume the most relevant pages from the list. Those tabs are then closed in due time.

Less relevant pages will be left in the list. Eventually, they automatically turn into an unloaded tab. And if they keep being not relevant, I will then close them.

So perhaps I was extremely excited about the wonders of Vidalia onions when I first saw them. But over time, the workflow proved that I don’t actually care about it all that much.

My tab workflow

Try it out

And that’s it! Now I can share this post with anyone that questions my workflow. While I’m not necessarily saying you should have that many tabs open, I would recommend you to try Sideberry if you’re on Firefox. On Chrome, your options would be to try Tree Style Tabs. Who knows it might change your life too.

If you’re interested in this kind of content, follow me on Twitter where you’ll find similar things!

Rust from 0 to 80% for JavaScript Developers

Michael Salim — Sat, 30 Apr 2022 23:58:34 +0000

This is a list of topic that will help you understand Rust quickly if you are a JavaScript developer. There are a lot of tutorial that start from scratch. But if you already know something else, why not compare them?

These are differences that I wished I could refer to before starting Rust, kept short.

Disclaimer!

I’m very far from being well versed in Rust. These are how I interpret them and no more than that. Rust’s documentation are vast so if you’re looking for details, please google them instead. The book is also a good starting point for learning rust. My goal is to list the important things so that you (and me in the future) can skip common programming concepts and focus on the differences based on the knowledge you already know.

Types

Rust is a typed language so it’s closer to TypeScript. You’ll have a much better experience if you already know TS.

For the most part syntax are similar (variable_name: Type) horray!

snake_case

Yep, no getting around it.

What’s this symbol?

1. Question mark (?)

You may see ? after a function call like so: my_function()?;.

No, it’s not optional chaining. It’s an error handling magic for async functions. More about this later.

Documentation

2. Exclamation mark on functions (!)

Example: println!("{:?}", my_variable);

This indicates that it’s a macro. Basically a shortcut. Just use it if the function example shows it.

3. The & symbol

Example: &your_variable

To get the reference. You’ll know this if you used low level languages like C. More later.

Syntax

Semicolon (;) at the end of each line is mandatory
Exception: Semicolon (;) is not mandatory on the last line of a function. In this case, it’s a shortcut for returning that line.
Function syntax is slightly different. Not a big deal.

fn foo(num: i32) -> i32 {
  3 // See no.2
  // or
  // return 3;
}

Decorator syntax also different. It’s also called Attributes.

What are these keywords?

struct

It’s a JSON object. (Ok maybe more complicated but see the docs for that)

type Person = {
    firstName: string;
    lastName: string;
};

struct Person {
    first_name: String,
    last_name: String,
}

trait

An interface

impl

An implementation of trait. So class (?). I’ve not used it

enum

Quite similar to Typescript enums in a way. But you can store data in it. It’s pretty neat and quite an important concept to understand for async.

Console.log

Not as easy unfortunately. More like printf from other languages

println!("{:?}", my_variable);

Library/Dependencies

Use Cargo.toml instead of package.json. You’ll want to add them manually (instead of using a command like yarn add)

Documentation

Example:

[dependencies]
chrono = "0.4"
egg-mode = "0.16.0"

Importing

Rust has modules. It’s quite different from JS but basically:

They’re sort of like namespaces. Here’s a breakdown on importing a dependency

use rocket::serde::{json::Json, Deserialize, Serialize};

use - use this instead of import

rocket - this is the package name

:: - accessing a module

serde - the module name

{json::Json, Deserialize, Serialize} - things to actually import

Some more syntax:

use chrono::prelude::*;

use rusqlite::Result;

Importing from local files

Best explanation: https://doc.rust-lang.org/rust-by-example/mod/split.html

Use mod to the path/file you want to import to make the compiler include the module.

Then use to import it. Note: mod automatically imports it too. In this case, you will need prefix it with crate.

Example:

use crate::your_file_or_module;

Note: mod.rs is a special filename which acts like index.js

See the link above for examples.

Const vs let

In JavaScript you’d use const most of the time because it’s immutable.

In Rust, you’ll want to use let instead. This is immutable by default. If you want it to be mutable, use mut keyword. const are reserved for actual constants (so you can’t calculate the value from another variable)

let immutable_variable = ...;
let mut mutable_variable = ...;
const MY_CONSTANT = "CONSTANT";

Library Documentation

If the Github repo doesn’t link to the documentation page, you can probably get to it like this:

Asynchronous

By far, the 2 most confusing topic are futures and ownership. I would recommend reading a more comprehensive documentation for these. Let’s talk about futures first.

Future is like a Promise. Unlike JS, Rust has a type for the result of the promise/future called Result. It also accepts the error type on the generics (I wish JS has this).

Executing (or “consuming”) Future

The standard library is quite barebones so you’ll need to import something else (Think bluebird for JS). You need an executor to run a future. I recommend using https://github.com/tokio-rs/tokio and reading their documentation.

`.await` to await a function

async_function().await; Interesting syntax, yeah? Actually quite nice since you don’t have to wrap it with brackets like in JS.

Handling Result

This is another important one. Rust is safe so you’ll need to handle everything. Yes, all error cases unlike JS!

The Result enum has Ok and Err. If the future is successful, it returns Ok, otherwise Err.

Most comprehensive way to handle both cases:

let f = File::open("hello.txt");

let mut f = match f {
    Ok(file) => file,
    Err(e) => return Err(e),
};

The above uses the pattern matching syntax which is also great.

This is quite verbose so there are 2 common ways to shorten it:

Using .unwrap()

Example: let my_value = async_function().await.unwrap();

This gets the success value and panics if Err

Use this when you’re confident that it won’t error.

Using the ? syntax

This passes the error up. So your function needs to be able to return an error too (either a Result or an Option)

See this for example and its equivalent

Ownership & References

Heard of the borrow checker? Nothing much for me to say here. It’s the hardest thing in this list since it’s unique to rust. And if you’ve never handled references before, this topic might be a bit steep.

Thankfully the rust book saves the day once again

Basically: Read part 4.1, 4.2 and 4.3

And that’s it!

This list is actually shorter than I expected. I hope it’s useful for your journey.

See a mistake or have any suggestions? Let me know!

Like what you see here? Find more of my post or check my startup.

Can you re-create this web component?

Michael Salim — Tue, 18 Jan 2022 20:34:34 +0000

Here's the challenge: Re-create this pagination component from GitHub

Some problems looks hard but turns out to be easy. Then you look at one that seem easy but it turns out to be a hard problem. This is one of the latter. It's definitely not an ordeal, but it probably took me a good hour when I originally estimated to finish this within a few minutes.

Now, before you say "This is easy! You're just a bad programmer", I encourage you to try to re-create it!

Go to this page and scroll to the very bottom for reference. Make sure you test various scenarios. Here's some:

Go to the first page
Last page
In the middle of the page
At page 2--6
When there's not many pages (Eg: Total of 10 pages)
On lower screen resolution (mobile)

Need more time? Don't worry I'll wait.

Ok, let's explore the requirements. I hope this is detailed enough to make you wish you had these on $DAY_JOB!

Exploring the Requirements

There's 2 crucial points for this component:

Able to navigate to first and last page
Able to navigate to the adjacent pages easily

On its own, it's not a big deal. But once you account for responsive design, it's not as straightforward. So let's divide it per screen size.

1. Mobile

When we don't have enough space to put anything, GitHub simply shows 2 buttons.

Simple, let's move on to the next size.

2. Tablet

Here's where it starts to get tricky. When you're on the first page, show the first and the last page --- along with the "Previous" and "Next" button.

But if we're on a different page then we'll want to indicate that.

What if we're somewhere on the middle? Notice the difference? GitHub doesn't show dots between 1 and 3 above. However, they show dots between 1 and 7.

3. Desktop

Starting from the first page:

Notice that the first five pages and the last two are shown.

Let's try page 5:

Page 1 to 7 is now shown. That makes sense because the 2 pages around our current page seems to be shown. Combining the fact that the first five pages are shown, this adds up.

Sure enough, we follow the same trend.

Now, let's move to page 7.

As expected, now we've lost page 3--4. Page 5--9 is shown because we're on page 7.

Some things not mentioned:

Previous and Next button becomes disabled when no page to paginate.
It needs to handle any number of pages.

Here's 2 additional cases to refer to:

Didn't expect that many requirement did ya? Maybe you did --- I for sure didn't.

So why did this took me much longer than expected to make?

1. Unclear Scope

If you tried to re-create this component without looking at the requirements I laid out, you might be surprised at how many cases there are to handle. Unclear scope is a big issue that leads to mismatch in development time and expectation. Most of you probably had an experience of being asked "How long do you think this will take?".

And if you've experienced enough of those, you'll know to estimate a number and multiply that by at least 1.5. So for a feature that you think might take a week, you'll say one and a half week --- Maybe even two!

The more detailed a piece of work is, the better you'll be able to estimate. A vague task like "Re-create X feature" is bound to go beyond your estimate no matter how simple it is.

2. The amount of different cases to handle

"Less is better" --- Somebody

When I started on this component, my mindset was to create the component with as little parts as possible. Many developers like to shorten and use "smart" ways to code as they get better at programming. This can be syntactic sugar, clever tricks or little known facts of a certain language. If you know Functional Programming, you know what I mean!

At some point in my career, I did similar. I had fun figuring out how to write something clever. But that often increases the complexity of your code.

Most importantly, less !== better.

Simple is better. And less often times does not equal to simple.

Source: Twitter

Some of you might be tempted to create a single elegant function to handle all the cases. In this example however, it might be much simpler and readable to handle each case on its own if statement.

Although if you manage to solve this problem elegantly, let me know through e-mail or twitter! I'd love to see it.

End result

I originally set out to do this for Recall's task explorer page. Here's how it looks in the end. Not too bad!

Final thought: This component might be a good test for a technical interview. What do you think?

Originally published at https://michaelsalim.co.uk.