DEV Community: Nino Filiu

I did the math: Resend is actually cheaper than AWS SES in most cases

Nino Filiu — Sat, 16 Dec 2023 16:41:55 +0000

While chosing an email provider to go above the free rate limit from Supabase I stumbled upon this article basically saying that Resend is a wrapper around Amazon SES, thus recommending to use SES directly

https://matteosonoio.it/resend/

Resend presents itself as being a dev-friendly email provider that "just works" while AWS SES (simple email service) is the complex but performant alternative.

After a whole day of configurations in the AWS console I still couldn't send one single email, let alone setup logging and the likes.

When going back to Resend, I managed to send my first email in literally 1mn. The whole Supabase integration took 15mn.

You do the math.

No actually I'm gonna do it:

This is the cost per email for both of these services:

SES: $0.0001
Resend: $0.0004

It really depends on what you're gonna use mails for, but if you only use transactional emails (signup, invites, order confirmations), you might send 10 of them per users per day, so 300 emails per months per user, which gives an email cost per user of:

SES: $0.03 / user / month
Resend: $0.12 / user / month

However keep in mind that you have to pay your engineer to setup the whole thing and Resend makes you save a lot in that regard, at least in my personal experience:

SES: 15 hours = $1500
Resend: 15mn = $25

You can plug in your own numbers, but over one year, SES only gets cheaper when you have:

cost_ses = 1500 + 12 * 0.03 * nb_users
cost_resend = 25 + 12 * 0.12 * nb_users
cost_ses < cost_resend
1500 - 25 < 12 * (0.12 - 0.03) * nb_users
1365 < nb_users

at least 1365 users. And that's if you intensively use emails. So while SES is cheaper than Resend, I'd recommend to always start with a dev-friendly provider like Resend to start your project, then optimize by directly using the underlying cloud provider directly.

Simple Screen Recorder in 20 lines of JavaScript

Nino Filiu — Wed, 01 Nov 2023 11:55:17 +0000

Let's say you're fed up of the state of screen recorders' paywalls and limitations and want to go on coding your own - it turns out you can already have basic functionnalities in a few lines of code.

We can ask the browser to get the capture video stream for us using the screen capture API, but for security reasons we must ensure a user gesture triggered the capture, for example a button click:



const button = document.createElement("button");
button.innerHTML = "capture";
document.body.append(button);
button.addEventListener("click", async () => {
  // TODO
});

On click, get the video stream and record it



const stream = await navigator.mediaDevices.getDisplayMedia();
const recoder = new MediaRecorder(stream);
recoder.start();

Stop the recording when the user stops sharing the screen



const [video] = stream.getVideoTracks();
video.addEventListener("ended", () => {
  recoder.stop();
});

Obtain the recorded file and download it



recoder.addEventListener("dataavailable", (evt) => {
  const a = document.createElement("a");
  a.href = URL.createObjectURL(evt.data);
  a.download = "capture.webm";
  a.click();
});

And voilà, you have a simple screen recorder!

It has many limitations that would be fun to resolve - audio recording, webcam integration, long running streams, etc - but I just found that doing such a powerful thing already with so few lines of code was too awesome not to share.

codepen link

Let's write an image converter in 20 lines of html+js

Nino Filiu — Fri, 24 Jun 2022 23:39:51 +0000

For those who just wanna see the code, it's on my codepen

Out of all the things you can do with web APIs, my fav arena has got to be playing around with the canvas. It basically offers you a rectangle you can draw anything you like - whether it's a bunch of colorful circles or a more exotic objects like a video frame; along with utilities to read out the RGB values of the whole stuff.

One of its powerful features is toDataURL that can export the current canvas image into the format of your choice, like image/jpeg or image/png, and we're gonna use it to write our converter.

Let's start off with some basic inputs to ask the user for an image and to specify the desired output format and compression rate. The <img> will be where we'll display our converted and compressed image:

File: <input type="file" accept="image/*"><br>
Convert to: <input value="image/jpeg"><br>
Quality: <input type="number" min="0" max="1" step="0.01" value="0.9"><br>
<button>Convert</button><br>
<img>

Then the JS to get a handle on these element:

const [fileInput, typeInput, qualityInput] = document.querySelectorAll('input');
const outImg = document.querySelector('img')
document.querySelector('button').addEventListener('click', async () => {
  // TODO
});

We can get a hold of the image uploaded by the user by looking up fileInput.files which contains a list of Files from which you can make a URL with URL.createObjectURL

const [file] = fileInput.files;
if (!file) return alert('file required');
const srcImg = document.createElement('img');
srcImg.src = URL.createObjectURL(file);

Now we have an Image of whatever the user uploaded, but before we draw it on a canvas, we have to wait for it to load using .decode. Note that we adjust the canvas dimensions to the image dimensions, else the picture is going to be cropped:

await srcImg.decode();
const canvas = document.createElement('canvas');
canvas.width = srcImg.width;
canvas.height = srcImg.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(srcImg, 0, 0);

Now time to use this tiny function that actually exposes a lot of browser "intelligence" in terms of image formats:

outImg.src = canvas.toDataURL(typeInput.value, +qualityInput.value);

And... voilà!

You now have a minimal image converter + compressor.

Hope you've learned something interesting about image web APIs today!

How to fix Vetur taking forever to save a file

Nino Filiu — Wed, 28 Apr 2021 21:10:04 +0000

There is a known bug in Vetur, the Vue VSCode extension, where it takes forever (sometimes several minutes!) to lint Vue files on save.

This made people very angry because linting a file on save is cool but, uh, you know, nobody wants to wait ages for that.

Luckily there is a very easy workaround where, instead of asking Vetur to use Eslint to lint the file on save, we could do it ourself using the RunOnSave VSCode extension.

It depends on your local VSCode settings what might work for you exactly but here's what worked for me:

{
    // use eslint to lint files on save...
    "eslint.codeActionsOnSave.mode": "all",
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },

    // ...except for vue files, where we don't want Vetur + Eslint
    // taking control of the lint (and failing at it)
    "[vue]": {
        "editor.codeActionsOnSave": {
            "source.fixAll": false
        }
    },

    // instead, run Eslint directly
    "emeraldwalk.runonsave": {
        "commands": [
            {
                "match": "\\.vue$",
                "cmd": "npx eslint --fix ${file}"
            }
        ]
    }
}

Writing a blockchain in 60 readable lines of TypeScript

Nino Filiu — Mon, 29 Mar 2021 23:59:35 +0000

Blockchain: it gets more confusing every year because people explain it with weird metaphors instead of talking 5mn about the actual maths & code involved

// Detect dark theme var iframe = document.getElementById('tweet-1030225104234373121-113'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1030225104234373121&theme=dark" }

And it frustrate me a lot because the concept of a blockchain is actually pretty simple:

a blockchain is a list of blocks
a block is
- some data
- the hash of the previous block
- some token
- the hash of the above

A block is valid if the hash has a magic prefix, which is when it begins by a certain number of zeros, so if you want to add some data to the blockchain, you'll have to pack it into a block, and to do so you'll have to find a token that produces a block hash that begins by a certain number of zeros, which is computationally intensive, and that's how you get proof of work.

Ok to be honest, I'm just talking about a particular type of blockchain there, but that's not the point. Coding the following blockchain helped me understand some crypto basics and I hope that'll help you too. I am not bragging about how clever I am to code the same tech as Bitcoin in 60 lines or whatever.

Anyway here's the code

I am using Deno and TypeScript.

Let's start by importing some hasher we'll need later on

import { createHash } from "https://deno.land/std@0.91.0/hash/mod.ts";

Let's define blocks and agents. An agent represents the kind of programs running on your computer that can trade Bitcoins with other agents around the world.

type Block = {
  data: string;
  prev: string;
  token: string;
  hash: string;
};
type Agent = {
  addAgent(agent: Agent): void;
  receiveBlock(block: Block): void;
  addData(data: Block["data"]): void;
};

We're gonna use md5 as our hash function. It's definitely not the most secure one but we don't really care. Let's define our magic prefix 00000 there too so we don't repeat it afterward. The more 0 there are, the more difficult it is to mine a new block.

const hashOf = (str: string) => createHash("md5")
  .update(str)
  .toString();
const magicPrefix = Array(5).fill("0").join("");

Now let's create our agent factory. Internally, it keeps the whole chain in memory, and a list of all agents it needs to broadcast to when mining a new block.

The first block is the "Genesis Block" which is exempted from pointing to the previous block's hash, or having a magic prefix.

const createAgent = (): Agent => {
  const chain: Block[] = [{
    data: "",
    prev: "",
    token: "",
    hash: hashOf(""),
  }];
  const agents: Agent[] = [];
  return {
    addAgent(agent) { /* ... */ },
    addData(data) { /* ... */ },
    receiveBlock(block) { /* ... */ },
  };
};

The addAgent method does not need further explanations:

addAgent(agent) {
  agents.push(agent);
},

addData is basically where the mining happens. It's the computationally intensive loop to find the token that'll produce a block hash with a magic prefix.

I chose hashOf(Math.random().toString()) to generate a random string because that's a very concise way to do so but hashing is not needed there.

addData(data) {
  while (true) {
    const prev = chain[chain.length - 1].hash;
    const token = hashOf(Math.random().toString());
    const hash = hashOf(data + prev + token);
    if (hash.startsWith(magicPrefix)) {
      const block: Block = { data, prev, token, hash };
      chain.push(block);
      for (const agent of agents) {
        agent.receiveBlock(block);
      }
      return;
    }
  }
},

receiveBlock validates if a new block can be added on top of the chain according to the conditions above, and if everything is ok, adds it, else throws.

receiveBlock(block) {
  if (block.prev != chain[chain.length - 1].hash) {
    throw new Error(
      "Hash does not point to the previous hash in the chain",
    );
  }
  if (!block.hash.startsWith(magicPrefix)) {
    throw new Error("Hash does not start with the magic prefix");
  }
  const actualHash = hashOf(block.data + block.prev + block.token);
  if (actualHash !== block.hash) {
    throw new Error("Hash is not the hash of data|prev|token");
  }
  chain.push(block);
},

And... that's it!

You can run "simulations" with such agents, for example this one where two agents add greeting blocks. It should run without printing anything and without throwing:

const alice = createAgent();
const bob = createAgent();
alice.addAgent(bob);
bob.addAgent(alice);
alice.addData("Hello Bob! -Alice");
bob.addData("Hello Alice! -Bob");

or this "simulation" where we try to inject a malevolent block into the blockchain but it gets caught:

const alice = createAgent();
const data = "bad things";
const prev = hashOf("");
alice.receiveBlock({
  data,
  prev,
  token: "",
  hash: hashOf(data + prev),
});
// error: Uncaught Error: Hash does not start with the magic prefix

So... that's it?

Well, yes, at the core, there's not a lot more to blockchain than this. But in order to go from there to building a real cryptocurrency, you'd probably have to

replace the string data payload by signed and timestamped transactions
find ways to compensate miners for their work
build the p2p network layer
convince people that this cryptocurrency has value
etc

TL;DR it's usually not the blockchain part that is hard but rather what's around it

Stack Overflow Framework Boilerplates

Nino Filiu — Thu, 04 Mar 2021 11:24:53 +0000

I've been on Stack Overflow for years and the main issue that people face is the difficulty to write a minimal, reproducible examples. That's the most essential part of the question, but it has been increasingly difficult in recent years to do so.

You see, the "snippet" feature of Stack Overflow only allows for one html block, one js block, one css block, and a few tweaks. That's awesome to ask "vanilla JS" questions, but not really suited for asking questions regarding web frameworks, which is the case for almost all web-related questions.

It's thus quite difficult to build a working framework snippet, but not impossible! This article is an attempt at resolving this issue by presenting boilerplate code you can simply copy-paste in your question.

Contributions appreciated!

Vue
- Simple example
- With components
React
- With functional components
- With functional components and props
- With class components
- With class components and props
AngularJS
Angular
Svelte

Vue

<script> elements can be included by changing No VueJS to VueJS 2.5.17

Simple example

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>

Vue.config.productionTip = false;
const App = new Vue({
  el: '#root',
  template: '<div>Hello World!</div>',
});

With components

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>

Vue.config.productionTip = false;

const Hello = {
  name: 'Hello',
  props: ['name'],
  template: '<div>Hello {{ name }}!</div>',
};

const App = new Vue({
  el: '#root',
  components: { Hello },
  template: '<Hello name="Alice"/>',
});

React

<script> elements can be included by changing No ReactJS to React 16.6.3

Check the Use BabelJS / ES2015 for these

With functional components

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

const App = () => (<div>Hello world!</div>);
ReactDOM.render(<App/>, document.querySelector('#root'));

With functional components and props

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

const Hello = ({ name, age }) => (
  <div>
    Hello my name is {name} and I am {age} years old!
  </div>
);

ReactDOM.render(
  <Hello name="Alice" age={23} />,
  document.getElementById("root")
);

With class components

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

class App extends React.Component {
  render() {
    return (
        <div>Hello world!</div>
    );
  }
}

ReactDOM.render(<App/>, document.querySelector('#root'));

With class components and props

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

class Hello extends React.Component {
  render() {
    return (
      <div>
        Hello my name is {this.props.name} and I am {this.props.age} years old!
      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="Alice" age={23} />,
  document.getElementById("root")
);

AngularJS

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="foodApp">
  <ul ng-controller="FoodController">
    <li ng-repeat="fruit in fruits">
      {{ fruit }}
    </li>
  </ul>
</div>

angular
  .module('foodApp', [])
  .controller('FoodController', ($scope) => {
    $scope.fruits = ['apple', 'banana', 'coconut'];
  });

Angular

I found this stackblitz and other Angular demos out there but I couldn't find a way to port any of them to a Stack Overflow snippet :/

Svelte

Since Svelte is a compiler rather than a library I don't think a svelte snippet can be done, but Svelte is great and I'd love someone to prove me wrong in the comments!

Cool json git diff command

Nino Filiu — Wed, 24 Feb 2021 15:36:23 +0000

git diff is great but kinda sucks when reporting about deep keys updates in JSON files, because it only shows the last key, and not the whole object path to the updated key

$ git diff HEAD~1 -- file.json
...
-       "name": "John Doe"
+       "firstName": "John",
+       "lastName": "Doe"
...

But by combining gron with git show $rev:$path, we can have a very pretty output that tells which keys have been updated, and it's almost valid JS!

$ diff <(git show HEAD~1:file.json | gron) <(gron file.json)
< json.users[0].owner.name = "John Doe";
---
> json.users[0].owner.firstName = "John";
> json.users[0].owner.lastName = "Doe";

I found that too elegant not to share. Have fun scripting!