DEV Community: Tom Lienard

V8 Isolates are taking over the world

Tom Lienard — Wed, 22 Jun 2022 15:54:03 +0000

V8 Isolates are taking over the world

Cloudflare Workers with Vercel

Deno Deploy with Netlify and Supabase

Oxygen (from Shopify)

All of these companies have something in common. You guessed it, they all use V8 Isolates for one of their product.

You might be thinking, what are those "V8 Isolates" this guy is talking about? Well, let's read this explanation from Cloudflare:

V8 orchestrates isolates: lightweight contexts that provide your code with variables it can access and a safe environment to be executed within. You could even consider an isolate a sandbox for your function to run in.

It's cheaper to run a code within an Isolate than a container or a virtual machine, both in terms of time and resources. It's faster to start an Isolate than Node.js. It costs less to run a single process running multiple Isolates, than running multiple processes. It's being used by more and more big companies.

So, what are the drawbacks?

Honestly, I didn't found a lot.

The most obvious one is that its usage to run client-provided JavaScript is still fairly recent compared to containers and virtual machines. The ecosystem is not yet mature, even tough there's more and more funding.

The second I can think of is that every company is implementing its own runtime, with its own APIs, duplicating the work. Luckly, a community group was created, initiated by Cloudflare and Deno, named WinterCG.

It aims to

provide a space for JavaScript runtimes to collaborates on API interoperability.

This is a way to provide a unified API for all those new runtimes, but I'm still sad that none of them is open-source (Cloudflare announced few months ago that their runtime will be open-source, but that's not yet the case).

That's why I started working on an open-source platform named Lagon, aiming to provide a cloud-based and self-hosted version of a Serverless Runtime for running JavaScript and TypeScript. I want to give the community a really good software, even tough it requires a lot of work to do so.

Here is the GitHub repository if you want to take an early look: github.com/lagonapp/serverless

I would love to know if this idea seems interesting for anyone, so feel free to leave your tought in the comments. I'm convinced that even more amazing products using V8 Isolates will be released in the future. Long live to Isolates!

An introduction to atomic state management libraries in React

Tom Lienard — Mon, 08 Nov 2021 11:42:33 +0000

Introduction

Atomic state management libraries are growing. Fast. As you can see in this graph from npmtrends, the two most famous libraries Recoil and Jotai were almost unknown last year, and now count respectively 240k and 35k downloads per week:

I've also open-sourced a new atomic library called Particule, which has some new interesting features such as custom atom functions with hooks.

But what is atomic state management?

Ha, that's a good question. From Recoil's docs:

Atoms are units of state. They're updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value.

An atom represents a piece of state that you can read and update anywhere in your application. Think of it as a useState that can be shared in any component.

This approach provides many benefits, mainly:

Avoid unwanted re-renders and computations

You won't anymore pass state values and update functions via props, nor trigger the whole tree of components from a context's consumer. Only components subscribed to the atom's value will update.

Take a look at this example using Particule:

const textAtom = atom('Hello world!')

function Text() {
  const text = useGetAtom(textAtom)

  return <p>{text}</p>
}

// Won't re-render!
function Button() {
  const setText = useSetAtom(textAtom)

  return <button onClick={() => setText('Updated!')}>Update</button>
}

// Won't re-render!
export default function App() {
  return (
    <>
      <Text />
      <Button />
    </>
  )

Only <Text /> will re-render, even if <Button /> also uses the atom. But there's a difference between the two: <Button /> isn't subscribed to updates, because it uses useSetAtom and only retrieves a setter function (similar to the one in useState. On the contrary, <Text /> is subscribed to updates because it uses useGetAtom to retrieve the value.

Compose atom from other atoms

Derived (or composed) atoms are atoms made from other atoms. They subscribe to each atom that they depend on, and such automatically trigger a re-render when needed.

This can be made using selectors in Recoil, and is even simpler in Jotai and Particule. This example is made with Particule:

const eurosAtom = atom(10)
const dollarsAtom = atom(get => get(eurosAtom) * 1.15)

function App() {
  const [euros, setEuros] = useAtom(eurosAtom)
  const [dollars, setDollars] = useAtom(dollarsAtom)

  return (
    <>
      <input onChange={({ target }) => setEuros(target.value)} value={euros} />
      <input onChange={({ target }) => setDollars(target.value)} value={dollars} />
    </>
  )
}

When eurosAtom changes, dollarsAtom is re-calculated since it is subscribed using get and re-render the component once.

There are many other interesting topics with atomic state management libraries, such as <Suspense /> support for async, helper atom functions to add new functionalities...

So feel free to comment down below if you want more articles on this, and you can check out the GitHub repository of the libraries I mentioned:

Particule (looking for feedback!)
Recoil (created by Facebook)
Jotai (created by Poimandres)

Writing a CSS-in-JS library to rapidly create reusable designs

Tom Lienard — Tue, 13 Apr 2021 16:02:16 +0000

Hello, today I'm going to talk about my CSS-in-JS library called NiftyCSS. I developed few very cool ideas and wanted to get some feedback and thoughts from the community.

Why writing CSS in JS?

Good question. If you never tried any CSS-in-JS library, you might be wondering why and how you can write your CSS in your JavaScript (or TypeScript of course).

No class name conflicts

Since the class name is generated automatically by the library, you don't have to think about it.

Dead-code elimination

If a class is not used, the CSS will not be injected (or server-side renderer for the libraries which support it) and you will never have extra CSS.

Use JS in your CSS

It seems logical, but you can actually use ANY feature from your JavaScript code, like:

Variables
Calling functions to get code
Reusing styles

And there are much more pros to use CSS-in-JS. Of course, there are also some draw-backs.

NiftyCSS cool features

First of all, let me show you what an example code looks like:

As you can see, I wrote the CSS in a JavaScript file (actually it was TypeScript), and used some strange techniques. The css function returns me a unique class name, so I can include it everywhere I want.
At the right, you can see the generated and injected CSS. Let's go more in-depth about few features used:

Directives for automatic code generation

Writing media queries declaration is boring, isn't it? To solve this, I created something called Directives. They are simple properties in the css object, which can hold anything.
For instance, NiftyCSS contains breakpoints to replace the fastidious @media (min-width...) declarations. Here, I used the $sm directive, which tells that all the CSS rules inside this directive will be inside a pre-defined breakpoint. The best is that it's automatically transformed by Nifty! (and you can also define custom breakpoints and custom directives via plugins, but that will be for the next time)

CSS Utilities

You might notice that I used some functions and variables called flexCenter and paddingX. Since we are in a JavaScript file, we can use the spread operator. These functions and variables are coming from the @niftycss/css package and return many CSS rules from one single property.
For instance, the flexCenter variable returns an object with these 3 rules:

display: flex;
justify-content: center;
align-items: center;

Whenever I want to create an element with these properties, I only need to spread this variable, instead of writing everything myself!
The paddingX works the same but returns the padding-left and padding-right with the passed value.

Theming

Did you notice that in the code above, I used a custom theme object? That allows implementing a white and dark theme in seconds, by just calling setTheme later on. And the best is that you automatically get auto-completion from your theme keys!

That's it for this first article about NiftyCSS, thanks for reading it.
Feel free to comment below your thoughts on these features, and to visit (maybe star if you enjoyed) the GitHub repo: https://github.com/QuiiBz/niftycss

Don't pay cloud from your pocket - use free credit

Tom Lienard — Thu, 28 Jan 2021 16:04:36 +0000

If you only want to validate an idea or want to launch without knowing if it will be profitable, you don't have to pay from your pocket for a majority of cloud products. For the launch of my side project Mindible, I won't be using any paid cloud services. Let me show you how I can do so!

Static website

If you have a static frontend, you can use free services like Vercel or Netlify. Their free tiers are really enough for any small launching startup. I would recommend using Vercel since I used it myself for more than a year.

VPS / Virtual Instances

DigitalOcean can give you $100 for free when signing up for the first time to try their products. This way you could use their Droplets or other services for up to 60 days for free. Ideal to host your backend server for free.

Databases

If you are using MongoDB, this is for you! I found yesterday that there are tons of credits code (you can found them via Reddit) that you can apply to your account. Using this process, I got more than $600 of credits for cloud-hosted MongoDB: http://prntscr.com/xqvm40
There is also Firebase which is a really powerful cloud database that can help you with real-time features and online/offline synchronization. Their free tier is also pretty big.

Other Cloud services

Major cloud providers give you free credit and free services when signing up.
Take AWS, Azure or even GCP. Of course, this requires a bit of time to understand how it works, but it's still a good idea for a free Serverless endpoint for instance.

Are you using JavaScript Testing Frameworks?

Tom Lienard — Thu, 24 Sep 2020 17:29:57 +0000

📌 Introduction

First of all, I hope your day was good.
This post is made for everyone who is using or not a JavaScript Testing Framework and want to share his experience with it. Feel free to comment down below!

🔎 The question

I was wondering, *are you using any JavaScript Testing Framework * at your work, on your daily-routine? If yes, could you explain why you choose this one and not another one? And if no, why are you not using one?

There are plenty of tools like Mocha, Jest, Tape, AVA... But they all are slow, +1s for a simple test.

Do not hesitate to debate and share your experience, I’m very interested to know your preferences.

Why you should use the product you’re building every day

Tom Lienard — Tue, 22 Sep 2020 11:03:48 +0000

You are building a new product? Great. But if you are not using it every day, how would you improve it and find early bugs? Let me introduce to you why it’s important to use your product every day.

For each « why », I will take an example of the « how » with Mindible, which is the product I’m currently building. Feel free to check it out at https://usemindible.com!

🧬 Bugs

Before launching officially your new product/startup, you would need beta-testers to find out bugs. Because you (and I) don’t want to ship a product filled with bugs.
But did you know that by using yourself your product, you will find tons of bugs even before thinking about the official launch?!
It’s especially true if your product is a PaaS or a SaaS.

For example, since I use my product Mindible to write articles, todos and notes, I found more than 10 bugs during the first days and found at least 1 to 3 new bugs every day.

🚀 New features

While using your product, you will get new ideas for cool features that could be really helpful.

On Mindible, I found that even while using tags, it was hard to find a specific note between all the others. The solution I hand up with was to create some sort of « groups » of multiples notes, to store them easily.

💻 UI and UX

When using your product, you will certainly find some strange things you built for the UI and/or UX. Just by using your product, you will be like one of your customers. So don’t be too kind, spot all the misconceptions you can find while using your product, and fix them all.

As an example, I found that the « Create Note » button was really not accessible before. Naturally, as a customer, I knew where it should be placed, but didn’t do so before using it every day.

🎉 Conclusion

I hope I convinced you to start using your product every day with all of these examples. And let me give you the last advice:

If you like using your product and don't feel restricted, your users will too!

Thanks for reading, feel free to comment down below to share your experience and tell me if you're already using this method or no.

🧐 Which Terminal Emulator are you using?

Tom Lienard — Tue, 15 Sep 2020 21:47:06 +0000

📌 Introduction

First of all, I hope your day was good.
This post is made for everyone who is using a Terminal Emulator and want to share his experience with it. Feel free to comment down below!

🔎 The question

Since I’m working on my own Terminal Emulator, I was wondering, which one are you using on your daily routine?

There are plenty of alternatives, from iTerm to Hyper and Cmder. So why do you use your Terminal Emulator and not another one? Does it have every features that you needs? Does you can’t find a good one that fit your expectations?

Do not hesitate to debate and share you experience, I’m very interested to know your preferences.

🚀 Releasing ShineBoard - A beautiful way to share code

Tom Lienard — Sat, 16 May 2020 21:17:16 +0000

ShineBoard

A beautiful way to share code

Introduction

🎉 Hello ! Today, I wanted to show you the side project I was working on. Basically, I didn’t like pastebin for sharing codes - it’s not very beautiful and user-friendly. I know hastebin, but half of the time the website is down. Also, I always have tons of .txt, .yaml files on my Desktop, due to logs or configuration files. So this is why I created ShineBoard - a tool to make code sharing easier and a better experience.
❗️ It’s a « beta » version, I just would like to get some feedback about it.

Presentation

ShineBoard is a open-source platform to make sharing code easier. Wasted by all the .txt files you downloaded and the poor hastebin codes ? Switch now to ShineBoard :

Open shineboard.io
Paste your file's content
Hit CTRL + S to save the paste, and then CTRL + V to share the link

Alternatively, you can use the CLI to create paste from your terminal :

Install with NPM (npm i -g @shineboard/cli) or with Yarn (yarn global add @shineboard/cli)
Type shine help to get started
To upload very quicly, run shine add <file>
You can also choose to specify a name for this paste with the flag --name (or -n)
If you which, you can force the language with --language (or -l)

Informations

📋 ShineBoard is currently in a « beta » version. I just want to get some feedback before working on new features.
The project is open-source, so feel free to contribute (links bellow).

About the Website :

Based on Laravel, I choose to use VueJS and VueRouter in SPA mode, for a better navigation : you won’t see pages loading more and more. There is also a simple API, which is called by the CLI.

About the CLI :

It’s actually the first time I made a CLI - and I’m not sure if it’s the good way to do it. Just a simple Nodejs app. Let me know if it’s not that bad :)

❤️ Also, I you liked this post and this project, please consider starring the Github repository bellow :

Importants links :

Website : https://shineboard.io
Github :
- Website
- CLI
NPMJS CLI : https://www.npmjs.com/package/@shineboard/cli

Squid, a terminal for everyone

Tom Lienard — Sun, 23 Feb 2020 17:46:53 +0000

Squid

Squid in an open-source electron terminal in developement.

Here is the GitHub repo, the code is documented so feel free to contribute :
https://github.com/QuiiBz/squid

Screenshots

Features

Choose the bash you want
Create, delete, switch terminal tabs
Create the theme you want
Many settings like font size/family, cursor type...
Auto-update

Themes

There is a complete theme system which works with .theme.json files, located in userData/Squid. To apply a theme, edit the currentTheme key in settings.squid.json to match the theme name. Here is an exemple of a material theme :

{
  "name":"material",
  "background":"rgb(41, 45, 62)",
  "foreground":"#ECEFF1",
  "cursor":"#FFCC00",
  "black":"#000000",
  "red":"#E54B4B",
  "green":"#9ECE58",
  "yellow":"#FAED70",
  "blue":"#396FE2",
  "magenta":"#BB80B3",
  "cyan":"#2DDAFD",
  "white":"#d0d0d0",
  "lightBlack":"#6b6b6b",
  "lightRed":"#FF5370",
  "lightGreen":"#C3E88D",
  "lightYellow":"#FFCB6B",
  "lightBlue":"#82AAFF",
  "lightMagenta":"#C792EA",
  "lightCyan":"#89DDFF",
  "lightWhite":"#ffffff"
}

Coming soon

Plugins creation
Hosts remember with
- Quick SSH connect
- Built-in SFTP

How to get started with TypeScript

Tom Lienard — Wed, 19 Feb 2020 20:16:06 +0000

Welcome to this guide of « How to get started with TypeScript ». What you need to follow this guide is :

Basic knowledge of JavaScript
NPM or Yarn installed
An IDE like Visual Studio Code or Intellij/WebsStorm

And that’s all !
Now that you have everything you need to start, let’s follow along !

What is TypeScript ?

TypeScript is an evolution of JavaScript, created, developed and maintained by Microsoft. As in it’s name, it’s a typed evolution of JavaScript, which means your current JavaScript codes works in TypeScript. You can then compile your TypeScript code to a clean JavaScript code, which you can use without problems like any one.
TypeScript is also open-source, so everyone can contribute to this language.

Installing TypeScript

From your favorite command-line, create a fresh NPM project, and install TypeScript :

npm init -y
npm install -g typescript

Once done, create the index.ts file which come in every JS applications, but notice the extension .ts. You’re done for the installation !

TypeScript basics

Variables

In TypeScript, you can — and you should — specify the type of the variables. For instance, take this piece of code :

let myNumber = 10;

In plain JS, you can re-asign the number variable to a string :

myNumber = "Non-typed variable";

As you may notice, it’s not very practicable. So, to specify the type of the variable, which is number :

let myNumber: number = 10;

With this done, the type of myNumber is now set to number. And you can do this with string and boolean.

Functions

Type in functions is also very usefull. Take this exemple :

function fooBar(foo, bar) {
    console.log(foo + " " + bar);
}

You don’t know what type of variable is foo and bar. So, let’s do the same as upside :

function fooBar(foo: string, bar: boolean)…

If you want a parameter to be optional, just add a ? after the name :

function fooBar(foo: string, bar?: boolean)…

Pretty cool, isn’t it ?

Enums

If you came from Java, C… you are familiar with Enumerations. As in it’s name, it’s an enumeration of keys, but a exemple is better than words :

enum FooBar {
    FOO,
    BAR,
}
// print '0', because it’s the first index
console.log(FooBar.FOO);

By default, enums start with index 0, but you can specify the value you want :

enum FooBar {
    FOO = "Hello",
    BAR = "World",
}
// print 'Hello'
console.log(FooBar.FOO);

You can also specify function parameters to an enum, which is very usefull :

function someFunction(foo: FoorBar) {
    console.log(foo);
}
// print 'World
someFunction(FooBar.BAR);

Compiling

When you install TypeScript, a command line is added :

tsc

You can provide flags in the command itself, but it’s better to create a tsconfig.js file :

{
  "compilerOptions": {
    "outDir": "./dist", // Specify the out directory
    "allowJs": true,    // Allow plain JS
    "target": "es5",    // ES version to compile to
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./*"               // Include all your files
  ],
  "exclude": [
    "node_modules"      // Exclude node_modules folder
  ]
}

To compile TS to JS, run this command :

tsc –w

It will convert your TS to JS in the folder you specified, and the -w flag is to watch for changes and recompile automaticaly.

It’s the end of this brief introduction to TypeScript. Here is the link of the full documentation : https://www.typescriptlang.org/docs/handbook/basic-types.html
I hope it was interesting for you, and thanks for reading !

Creating my side-project in 2 weeks - day 4

Tom Lienard — Fri, 25 Oct 2019 19:02:40 +0000

Creating my side-project in 2 weeks

Fourth day: working on board

Custom right-click menu
I first added a custom right-click menu, which looks like this for the moment:

As you can see I've only implemented one action, creating cards. But first, let's see how I manage to create this right-click menu - and you will see, it's very easy.

First, I added a data property to the Board.vue component:

data() {
    return {
        menu: false,
        top: 0,
        left: 0,
    }
},

where menu is a boolean which depends if the user want to display the context menu or not. top and left are here to open the right-click menu at the position of the user's cursor.

Then I added these two events on the main Board.vue component:

...@click.right.prevent="menu = true" @click.left.prevent="menu = false"...

As you can see, very basic stuff. And for top and left, just a simple @mousemove event which call a move method:

move(event) {
    if(!this.menu) {
        this.top = event.clientY;
        this.left = event.clientX;
    }
},

Then we just need to create the menu itself - a simple div hidden by default with the v-if property:

<div v-if="menu" class="menu" :style="'position: absolute; top: ' + this.top + 'px; left: ' + this.left + 'px;'">
    <p @click="addCard" class="menu-link"><i class="icon-plus"></i> Add a card</p>
    <p class="menu-link"><i class="icon-directions"></i> Another action</p>
    <p class="menu-link"><i class="icon-trophy"></i> Another action</p>
</div>

Handling the creation of a card
When a user click on the Add a card button, we need to create a new card which show at the location of the user's cursor. For this, I created a mutation in the store of Vuex, to simply push a card object to the array of cards. By doing this, this store is updating and because I fetch the cards list in a computed method, VueJS re-render all the cards with this updated list and voilà, adding a card is now finished!

...until I remember that I forgot to update the CardController to handle the requests when the new card is edited. So here is the logic:

$card = Card::where('id', request('id'))->first();

if($card) {
    // Updating the card
} else {
    // Creating a new card      
}

I fetch the card with the id of the request. If the card exist, I update it with the request's content - else I create the card. And here it is!

Creating my side-project in 2 weeks - day 3

Tom Lienard — Thu, 24 Oct 2019 18:48:21 +0000

Creating my side-project in 2 weeks

Third day: improving cards

Here is the third day of this series, let's begin now!

Auto-updating cards
When a card is moved or his title is changed, we need to send a request through the API to update it in the database. But how to know when I need to update the card ? Here are the points for the moment:

When the card title is edited
When the card content is edited
After the card was moved

So let's jump to it. I first added a update data to the Card.vue, and set it to false by default. Then for the input of the title and the textarea of the content, I choose to use the event @blur which is activated when the user leave the field, to then set the update value to true. And which event choose when I move the card ? I used the @mouseup which is rather explicit.

With this, the request is always not sent, but I now know when I need to update the card. So in the mounted method, I added a setInterval which run every 0.5s to check if we need to send the request:

mounted() {
    setInterval(() => {

        if(this.update) {

            this.update = false; // Set back 'update' value to false

            // ... Perform the request
        }
    }, 500); // Run the task every 0.5 seconds
}

And with this, when I edit the title/content/move the card, I can see that a request is sent...

...and the update data goes back to false:

Now I just need to update the card's data in the controller, and return back a JSON with the key success, which can be true or false.

Icon pack
I choose to switch from FontAwesome to Simple Line Icons which - I think - looks really better, simply because it's simpler and thiner - even if there are not as many icons as FontAwesome has. Here is the result on the dashboard sidebar:

Dev environment
I also setup a dev environment where you can test the - very basic - card sustem. Here ares the credentials for the test account:

Email: test@gmail.com
Password: testtest

You can login here if you want to test it.

Infortunnately I don’t got the time to create the custom right-click menu, so it will be for tomorrow, with I think the options to create/delete cards and even change the color. Hope you liked this episode, see you tomorrow!