DEV Community: Olyno

Dear developers, what do I have to do to work in your country?

Olyno — Fri, 15 Jul 2022 00:54:41 +0000

Having never left my country (professionally speaking), I was wondering about the different steps I would have to take to go and work in another country as a developer.

I know that every country is different. So explain to me, what do I have to do to work in your country?

Do not hesitate to promote your country to me, and to other developers who would like to come 😛

Photo by Eva Darron on Unsplash

Le Web 3.0 : pas encore prêt ?!

Olyno — Tue, 01 Mar 2022 22:40:00 +0000

Cet article parlera principalement de mon point de vue personnel. Aussi, cet article contient des termes compliqués qui, pour la plupart, ne seront que vaguement expliqué. Je pars du principe que vous les connaissez déjà.

🇬🇧 Psst tu veux lire cet article en anglais ? Alors clique ici

TLTR: La blockchain est une technologie sous-côté dans plusieurs domaines, mais la plupart des personnes l'utilisent en tant que source de spéculation, la rendant ridicule et inutilisable pour un développeur.

Le web 3.0 est une technologie que beaucoup considèrent comme la nouvelle génération du web. Le web 1.0 étant un simple système d'indexation, où l'on affichait la liste des sites disponibles, comme ce que fait Google. Puis vient le web 2.0 où l'on a commencé à créer le contenu sur des plateformes tel que Twitter, Facebook… et enfin le web 3.0 qui est censé nous redonner le pouvoir et nous permettre de mieux contrôler nos données, afin de ne plus laisser le contrôle aux grosses entreprises.

Des ressources limitées ?

La première chose qui m'a intéressé en tant que développeur, c'est bien entendu coder et créer des projets. Je suis donc aller me renseigner sur les différentes blockchains, que ce soit Etherum, Solana, Polygon, et j'en passe. Le premier frein que j'ai eu était le fait de devoir apprendre 1 nouveau langage, que ce soit Solidity pour la plupart des blockchains, ou Rust pour certaines d'entre-elles. Ne connaissant aucun de ces langages, ce fût quelque chose de compliqué. Puis j'ai décidé d'apprendre Solidity, et 2ᵉ problème : aucun environnement fonctionnel avec les outils moderne que l'on a. Certes les outils fonctionnent, mais utilisent de très vieilles syntaxes (et aucun support pour Typescript). Et enfin le 3ᵉ problème : trop de terme technique. Il en devenait très compliqué d'apprendre à créer ces fameux "Smart-contracts". En rajoutant à ça le fait qu'il existe un nombre énorme de blockchain, avec chacune leurs particularités, ça devenait très compliqué.

Puis vient le problème de scalabilité. Toutes les blockchains se vendent d'être scalable, mais soyons réaliste, AUCUNE n'est réellement scalable. La plupart se repose sur le nombre de mineurs, et en aucun cas sur les performances de la technologie associée.

Prenons l'exemple du réseau Polygon qui a récemment eu des problèmes de frais sur son réseau, car un nouveau jeu est apparu sur le réseau (sunflowers), créant ainsi un nombre incalculable de transactions à la seconde. Celui-ci étant codé en Golang et prétendant être scalable n'en était rien.

À l'heure actuel, toutes les technologies réseau sont ridicules, mais les réseaux se vantent de leurs chiffres : "On fait du 450 000 transactions par secondes". Il faut différencier 2 choses : la partie réseau et la partie smart contract. Les smart contracts sont des bouts de code exécuté sur le réseau de façon décentraliser. Concernant le réseau, c'est lui qui est censé gérer les différentes transactions et exécuter les smart contracts. Le meilleur des choix à mon sens aurait été de créer une architecture réseau avec une technologie scalable par défaut, tel qu'Elixir ou Erlang, et exécuter les smart contracts avec un langage rapide et efficace en mémoire tel que le Rust. J'ai déjà pu voir des projets où Elixir exécutait du code Rust, donc c'est tout à fait faisable, il suffit de s'en donner les moyens.

Un problème de donnée

Quand on parle de web 3.0, nous parlons de décentralisation. C'est quelque chose de très intéressant, permettant de résoudre de nombreux problèmes tel que le problème d'hacking, de perte de données… Cela permet aussi de ne plus donner ses données personnelles aux différents groupes tels que Google, Facebook...

Pour se connecter ou utiliser une plateforme décentralisée, dite "Dapp", il nous faut un portefeuille content, une clef secrète, qui finalement est une liste de mots. Une dapp est rarement compatible entre les différentes blockchains, signifiant que nous devons avoir 1 portefeuille par blockchain. Je vous laisse imaginer le nombre de portefeuilles que nous devrions avoir…

De plus, nous travaillons sur des blockchains appartenant à des entreprises, un comble pour des utilisateurs qui ne veulent pas que des entreprises aient nos données facilement.
Ensuite, à l'heure actuelle toutes nos données sont publiques : vous avez acheté ça, tel jour, telle date… nous avons littéralement un rapport financier public. À l'heure actuel, je ne connais que 4 blockchains avec des données privées :

Monero
Tauri, qui est censé être le successeur de Monero (toujours en cours de développement)
Secret (oui, il y a une blockchain nommée "Secret")
Oasis

Puis il faut voir plus loin : les gouvernements des différents pays voudront mettre la main dessus, et ne vont pas hésiter à limiter toute cette technologie afin d'y avoir accès.

Bref, toutes ces données ne devraient pas être visibles à mon humble avis, il suffirait de faire un algorithme qui lui est publique.

Les NFT, encore ?

À l'heure actuel, quand nous parlons web 3.0, et plus particulièrement blockchain, 3 camps se forment sur les réseaux : ceux qui sont pour, ceux qui sont contre, et ceux qui en ont simplement marre d'entendre parler de ça. Le simple terme "NFT" a fait grincer des dents énormément de personnes.

Pour expliquer ce qu'est un NFT, c'est un objet unique sous forme digitale. Ça peut être N'IMPORTE QUOI. Le problème, c'est que l'opinion publique associe les NFT à des images en ligne que l'on vend pour des centaines, des milliers, voir des millions de dollars pour certaines... ET CA MARCHE. Un nombre incalculable de personne a décidé de se lancer dans ce marché d'image spéculative, que ce soit des entreprises, ou de simples particuliers. Tout le monde veut toucher sa part, et beaucoup sont même prêt à voler des œuvres d'illustrateurs pour gagner de l'argent sur une collection qui ne leur appartient en aucun cas.

Les NFT sous forme d'image peut fonctionner pour quelques cas :

Le propriétaire de l'image obtient l'accès à quelque chose d'exclusive en retour
Nous voulons simplement soutenir l'artiste derrière

Toutes autres raisons n'ont à mon sens aucun sens. Pleins de personnes ont appris à créer des collections de NFT en l'espace d'une commande de terminal, créant ainsi des collections sans queues ni tête.

Note : j'ai décidé d'acheter un NFT pour voir ce que cela pouvais m'apporter, si ce n'est avoir une image digitale et supporter un artiste que j'aime bien. À l'heure actuel, je n'ai toujours rien gagné.

Les nouveaux tokens

À chaque plateforme son token. C'est ainsi que l'économie des Dapp fonctionnent. Pour la plupart, nous n'avons pas besoin de nouveaux tokens, mais pourtant on doit en créer un autre. Je suis désolé, mais je suis développeur, pas analyste financier.

Alors quoi ? Il ne faut pas se lancer dans la blockchain

Je pense que la technologie est très bien, mais mérite une plus grande maturité, surtout côté développement. Quand on voit que les frais du réseau Etherum sont de plus de $100$\$ ça en devient ridicule. Je pense qu'à l'heure actuel, c'est une énorme bulle spéculative, notamment pour la partie NFT. La partie développeur et expérience développeur est très mauvaise, avec peu de documentation.

Ne mettez jamais de l'argent que vous n'êtes pas prêt à perdre ! Tout argent sur la blockchain est considéré comme perdu !

Ce que j'ai appris

J'ai appris énormément de choses sur cette technologie. J'ai commencé à m'y intéressé en janvier 2021, et j'ai pu découvrir de nombreux projets hallucinant, tel que le projet Hellium, qui permet d'avoir un réseau internet décentralisé, ou Ultra qui a pour but de révolutionner le monde des jeux vidéos. J'ai aussi pu apprendre tous les termes techniques, que ce soit APY, smart-contract, yield farming, et j'en passe. Je pense avoir mis 6 mois pour comprendre la plupart des choses de la blockchain, et je comprends désormais pourquoi c'est compliqué à expliquer à des personnes non initiées.

J'ai perdu aussi beaucoup d'argent lors de mes tests. J'ai même failli tout perdre lors d'un hack sur le réseau Polygon et la plateforme Zapper. Heureusement, plus de peur que de mal, l'équipe de Zapper a pu récupérer nos gains très rapidement.

En bref, faites attention à cette technologie. On peut vous promettre de nombreuses choses, mais rien ne garantit ce qui est dit.

Cover image by Shubham Dhage

Web 3.0: not ready yet?!

Olyno — Tue, 01 Mar 2022 22:39:39 +0000

This article will speak mainly from my personal point of view. Also, this article contains some complicated terms that, for the most part, will only be vaguely explained. I am assuming you already know them.

🇫🇷 Psst you want to read this article in French? Then click here

TLTR: Blockchain is an underrated technology in many fields, but most people use it as a source of speculation, making it ridiculous and unusable for a developer.

Web 3.0 is a technology that many consider the next generation of the web. Web 1.0 was a simple indexing system, where we displayed the list of available sites, like what Google does. Then came web 2.0 where we started to create content on platforms such as Twitter, Facebook... and finally web 3.0 which is supposed to give us back the power and allow us to better control our data, in order to no longer leave the control to big companies.

Limited resources?

The first thing that interested me as a developer was coding and creating projects. So I went to learn about the different blockchains, whether Etherum, Solana, Polygon, and so on. The first obstacle I had was the fact that I had to learn 1 new language, either Solidity for most blockchains, or Rust for some of them. Not knowing any of these languages, it was something complicated. Then I decided to learn Solidity, and 2ᵉ problem: no working environment with the modern tools we have. Sure, the tools work, but use very old syntax (and no support for Typescript). And finally, the 3ᵉ issue: too many technical terms. It became very complicated to learn how to create these famous "Smart-contracts". Adding to that the fact that there are a huge number of blockchains, each with their own peculiarities, it became very complicated.

Then comes the difficulty of scalability. All blockchains claim to be scalable, but let's face it, NONE are really scalable. Most rely on the number of miners, and in no way on the performance of the associated technology.

Let's take the example of the Polygon network which recently had issues with network overhead, because a new game appeared on the network (sunflowers), creating an incalculable number of transactions per second. This one being coded in Golang and pretending to be scalable was not.

Nowadays, all network technologies are ridiculous, but the networks boast about their numbers: "We do 450 000 transactions per second". You have to differentiate between 2 things: the network part and the smart contract part. The smart contracts are pieces of code executed on the network in a decentralized way. Concerning the network, it is the network that is supposed to manage the different transactions and execute the smart contracts. The best choice in my opinion would have been to create a network architecture with a scalable technology by default, such as Elixir or Erlang, and execute the smart contracts with a fast and memory efficient language such as Rust. I've already seen projects where Elixir was running Rust code, so it's quite feasible, you just need to have the means to do it.

A data problem

When we talk about web 3.0, we talk about decentralization. This is something very interesting, allowing to solve many problems such as hacking, data loss... It also allows not to give personal data to different groups such as Google, Facebook...

To connect or use a decentralized platform, called "Dapp", we need a content wallet, a secret key, which finally is a list of words. A dapp is rarely compatible between different blockchains, meaning that we must have 1 wallet per blockchain. I let you imagine how many wallets we should have...

Moreover, we work on blockchains owned by companies, which is a shame for users who don't want companies to have our data easily.
Then, right now all our data is public: you bought this, this day, this date... we literally have a public financial report. Right now, I only know of 4 blockchains with private data:

Monero
Tauri, which is supposed to be the successor of Monero (still under development)
Secret (yes, there is a blockchain named "Secret")
Oasis

Then you have to look further: the governments of the different countries will want to get their hands on it, and will not hesitate to limit all this technology in order to have access to it.

In short, all this data should not be visible in my humble opinion, it would be enough to make an algorithm that is public.

NFT, again?

At the moment, when we talk about web 3.0, and more particularly blockchain, 3 camps are formed on the networks: those who are for it, those who are against it, and those who are simply tired of hearing about it. The simple term "NFT" has made a lot of people cringe.

To explain what an NFT is, it is a unique object in digital form. It can be ANYTHING. The problem is that the public opinion associates NFT's with online images that are sold for hundreds, thousands, even millions of dollars for some... AND IT WORKS. Countless people have decided to get into the speculative image business, whether they are companies or individuals. Everyone wants a piece of the action, and many are even willing to steal illustrators' work to make money on a collection that doesn't belong to them in any way.

NFT in the form of an image can work for a few cases:

The owner of the image gets access to something exclusive in return
We just want to support the artist behind it

All other reasons don't make sense to me. Many people have learned to create NFT collections in the space of a terminal command, creating collections without tails or heads.

I decided to buy an NFT to see what it could do for me, other than having a digital image and supporting an artist I like. At this time, I still haven't earned anything.

The new tokens

Each platform has its token. This is how the Dapp economy works. For the most part, we don't need new tokens, but yet we have to create another one. I'm sorry, but I'm a developer, not a financial analyst.

So what? You shouldn't get into blockchain

I think the technology is very good, but deserves more maturity, especially on the development side. When you see that the Etherum network fees are more than $100, it becomes ridiculous. I think that at the moment, it's a huge speculative bubble, especially for the NFT part. The developer part and developer experience is very bad, with little documentation.

Never put money you are not ready to lose! Any money on blockchain is considered lost!

What I learned

I learned a lot about this technology. I started to be interested in it in January 2021, and I could discover many amazing projects, such as the Hellium project, which allows having a decentralized internet network, or Ultra which aims to revolutionize the video game world. Furthermore, I was also able to learn all the technical terms, like APY, smart-contract, yield farming, and so on. I think it took me 6 months to understand most of the things about blockchain, and I now understand why it's complicated to explain to uninitiated people.

I also lost a lot of money during my tests. Likewise, I even almost lost everything during a hack on the Polygon network and the Zapper platform. Fortunately, more fear than harm, the Zapper team was able to recover our earnings very quickly.

In short, be careful with this technology. We can promise you many things, but nothing guarantees what is said.

Cover image by Shubham Dhage

How to create an Electron application with Vite

Olyno — Thu, 09 Dec 2021 20:34:12 +0000

Note: Cet article est disponible en français ici

To be able to create a software with Electron is not so complicated. Lots of boilerplates exist, documentation is really good...
However, i couldn't find anything to explain how to create an Electron project with Vite. So let's get right to it.

Create the default Vite application

For this nothing is easier. I will use Yarn for my installation. Using the command:

yarn create vite

We just have to fill the prompt with the name of our project (in our case "electron-vite"), and pick a framework (in our case "Svelte").

We then move to our project folder and install our dependencies:

cd electron-vite
yarn install

Install the builder

The builder will allow us to create the final electron application and deploy the software to production. We will use Electron Forge.
We can install it with the following command:

yarn add --dev @electron-forge/cli

Once the forge CLI is installed, we just need to set it up. Fortunately, Electron Forge takes care of everything. We just have to run:

yarn electron-forge import

And the different scripts will be added to our package.json file.

Let's edit the package.json

We still have some dependencies to install:

concurrently # To run Vite and Electron at the same time
cross-env    # To be able to set an environment at launch

To install them, we just have to do:

yarn add -D concurrently cross-env

Now that we have all the dependencies installed, we just have to setup the different scripts:

"scripts": {
  "start": "npm run build && npm run electron:start",
  "dev": "concurrently -k "vite" "npm run electron:dev"",
  "build": "vite build",
  "preview": "vite preview",
  "electron:dev": "cross-env IS_DEV=true electron-forge start",
  "electron:build": "electron-forge make",
  "electron:package": "electron-forge package"
},

You can modify the yarn by npm run in the different scripts

The environment variable IS_DEV can of course be renamed to NODE_ENV for example.

We are missing 3 fields to add/modify:

"main": "app/index.js",
"description": "Boilerplate Electron + Vite + Svelte",
"license": "MIT",

The main field will be the entry point of our Electron application.

The fields description and license are necessary to build Electron with Electron Forge.

Let's edit the config of Vite

Nothing very complicated. First of all, we will have to modify the base of our application. If the application goes into production, then we will look for the files to import (like the assets). Then, we will just have to modify the build folder so that it is linked to our Electron application.

import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.IS_DEV !== 'true' ? './' : '/',
  build: {
    outDir: 'app/build',
  },
  plugins: [svelte()],
});

We setup Electron

To create our Electron application, we just have to create a file app/index.js which will contain the default code of Electron:

// app/index.js
const path = require('path');
const { app, BrowserWindow } = require('electron');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  app.quit();
}

const isDev = process.env.IS_DEV === 'true';

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
  });

  // Open the DevTools.
  if (isDev) {
    mainWindow.loadURL('http://localhost:3000');
    mainWindow.webContents.openDevTools();
  } else {
    // mainWindow.removeMenu();
    mainWindow.loadFile(path.join(__dirname, 'build', 'index.html'));
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow();
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

In the above code, there are 2 things to note:

The following code is needed if you want to build your application with "squirrel" (a build template for Windows).

if (require('electron-squirrel-startup')) {
  app.quit();
}

About how to get the content:

if (isDev) {
  mainWindow.loadURL('http://localhost:3000');
  mainWindow.webContents.openDevTools();
} else {
  // mainWindow.removeMenu(); // Optional
  mainWindow.loadFile(path.join(__dirname, 'build', 'index.html'));
}

If we are dev, we will just load a url which will be the one of Vite. However, if we are building our application for production, then we will need to get the index.html file directly.

Finally, we just need to create an app/preload.js file.

Electron does not yet support esm syntaxes, so we will use the require.

We modify the Svelte config file

So yes, even if our application is finished, Electron doesn't support esm syntaxes, so we have to modify the import/export in require/module:

// svelte.config.js

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
};

And that's it, you have just created your software with Vite et Electron! The livereload works perfectly, what more could you want!

You can find the repository at this link: https://github.com/frontend-templates-world/svelte-ts-electron-vite

Comment créer une application Electron avec vite

Olyno — Thu, 09 Dec 2021 20:27:33 +0000

Note: This article is available in English here

Pouvoir créer un logiciel avec Electron ce n'est pas si compliqué. Pleins de boilerplates existent, la documentation est très bien...
Cependant, je n'ai rien trouvé qui explique comment créer un projet Electron avec Vite. Alors, allons droit au but.

Créer l'application Vite par défaut

Pour cela rien de plus simple. Je me baserais sur Yarn pour mes installation. A l'aide de la commande:

yarn create vite

Il suffit de rajouter le nom de notre projet (dans notre cas "electron-vite"), et de choisir un framework (dans notre cas "Svelte").

Nous allons ensuite dans le dossier de notre projet et installons nos dépendances:

cd electron-vite
yarn install

Installer le builder

Le builder nous permettra de créer l'application finale et de déployer le logiciel en production. Nous utiliserons Electron Forge.
Nous pouvons l'installer avec la commande suivante :

yarn add --dev @electron-forge/cli

Une fois le CLI de la forge installé, il ne nous reste plus qu'à le configurer. Heureusement pour nous, Electron Forge s'occupe de tout. Il ne nous reste plus qu'à l'exécuter:

yarn electron-forge import

Et les différents scripts seront ajoutés à notre fichier package.json

Editons le package.json

Ils nous restent encore quelques dépendances à installer:

concurrently # Pour lancer Vite et Electron en même temps
cross-env    # Pour pouvoir définir un environnement au lancement

Pour les installer, on aura juste à faire:

yarn add -D concurrently cross-env

Maintenant que nous avons toutes les dépendances installées, nous avons plus qu'à setup les différents scripts:

"scripts": {
  "start": "npm run build && npm run electron:start",
  "dev": "concurrently -k \"vite\" \"npm run electron:dev\"",
  "build": "vite build",
  "preview": "vite preview",
  "electron:dev": "cross-env IS_DEV=true electron-forge start",
  "electron:build": "electron-forge make",
  "electron:package": "electron-forge package"
},

Vous pouvez modifier les yarn par npm run dans les différents scripts

La variable d'environnement IS_DEV peut bien entendu être renommé en NODE_ENV par exemple.

Il nous manque 3 champs à rajouter/modifier:

"main": "app/index.js",
"description": "Boilerplate Electron + Vite + Svelte",
"license": "MIT",

Le champs main sera le point d'entrée de notre application Electron.

Les champs description et license sont nécessaire pour pouvoir build Electron avec Electron Forge.

Editons la config de vite

Rien de bien compliqué. Il faudra dans un premier temps que l'on modifie la base de notre application. Si l'application part en production, alors nous allons chercher de façon relative les fichiers à importer (comme les assets). Puis, on aura juste à modifier le dossier de build afin qu'il soit relié à notre application Electron.

import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.IS_DEV !== 'true' ? './' : '/',
  build: {
    outDir: 'app/build',
  },
  plugins: [svelte()],
});

On setup Electron

Pour créer notre application Electron, on a juste à créer un fichier app/index.js qui contiendra le code par défaut d'Electron:

// app/index.js
const path = require('path');
const { app, BrowserWindow } = require('electron');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  app.quit();
}

const isDev = process.env.IS_DEV === 'true';

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
  });

  // Open the DevTools.
  if (isDev) {
    mainWindow.loadURL('http://localhost:3000');
    mainWindow.webContents.openDevTools();
  } else {
    // mainWindow.removeMenu();
    mainWindow.loadFile(path.join(__dirname, 'build', 'index.html'));
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow();
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Dans le code ci-dessus, il y a 2 choses à noter:

Le code suivant est nécessaire si vous souhaitez build votre application avec "squirrel" (un model de build pour Windows).

if (require('electron-squirrel-startup')) {
  app.quit();
}

Concernant la façon de récupérer le contenu:

if (isDev) {
  mainWindow.loadURL('http://localhost:3000');
  mainWindow.webContents.openDevTools();
} else {
  // mainWindow.removeMenu(); // Optionnel
  mainWindow.loadFile(path.join(__dirname, 'build', 'index.html'));
}

Si nous sommes en train de dev, nous allons juste charger une url qui sera celle de Vite. Par contre si nous avons build notre application pour la production, alors nous aurons besoin de récupérer le fichier index.html directement.

Enfin, il nous suffit de créer un fichier app/preload.js.

Electron ne supporte pas encore les syntaxes esm, et donc par conséquent, nous allons utiliser le require

On modifie le fichier de config de Svelte

Alors oui, même si notre application est en soit fini, Electron ne supportant pas les syntaxes esm, nous devons modifier les imports/export en require/module:

// svelte.config.js

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
};

Et voilà, vous venez de créer votre logiciel avec Vite et Electron ! Le livereload fonctionne parfaitement, que demander de mieux !

Vous pouvez retrouver le repository ici: https://github.com/frontend-templates-world/svelte-ts-electron-vite

How build Electron app for every plateforms

Olyno — Thu, 21 May 2020 22:32:03 +0000

A few days ago, I created an application with ElectronJs. The problem I had when creating it was to make my application available to everyone, regardless of OS and platform.
To do so, I had to be interested in several tools, including Electron Forge, electron-packager and electron-builder.

After several tries with Electron Forge, I realized that it was not stable enough, and that it was not possible to compile for multi-platforms at the moment.

So I went to electron-packager. Even if this tool is very efficient, it's very difficult to customize it, like adding a custom icon to the application.

So I went to electron-builder. Once I understood the documentation, it became very easy to use it.

I also had another problem: to automate the build. Indeed, I code under Windows. It becomes impossible to build the application for Linux and Mac. So I had to use an alternative tool. My choice went to Github and its Github Actions.

Well, let's start the explanations in code form:

Github Action

name: Build <App name>

on:
  release:
    types:
      - published

jobs:

  build:
    name: Build <App name>
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        os: [macos-latest, ubuntu-latest, windows-latest]

    steps:

      - uses: actions/checkout@v2

      - name: Setup NodeJs
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - name: Install dependencies
        run: yarn

      - name: Build
        run: yarn export

      - name: Upload builds to release
        uses: softprops/action-gh-release@v1
        with:
          tag_name: ${{ github.ref }}
          files: out/*.*
          draft: true
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

      - name: Upload Nightly Build
        uses: actions/upload-artifact@v2
        if: success()
        with:
          name: <App name>-nightly
          path: out/**/*!(.zip)

What I'm doing above is what is called a Github Action. It allows me to automate my tasks. In this one I tell him that at each release he will have to execute certain tasks.
Here I ask him to perform simple tasks:
1) Clone my repository
2) Prepare NodeJs
3) Install the dependencies
4) Export the application
5) Send what was exported to the release that was released
6) (Optional) Create a nightly build.

It is important to know one thing: electron-builder will create unpacked versions of your application. This means that these are folders containing the application available for any platform. If we want to put this version in our release, we have to compress it, which is not done automatically.

To do so, we need a script when we export it

Export script

const pngToIco = require('png-to-ico');
const fs = require('fs-extra');
const ora = require('ora');
const path = require('path');
const zip = require('bestzip');

const args = process.argv;

const plateforms = args.pop().replace(/^-/g, '').split('');

function getValidPlateforms() {
    const spinner = ora({
        text: 'Searching current platform build...',
        spinner: 'line',
        color: 'cyan'
    }).start();
    if (process.platform === 'win32') {
        if (plateforms.includes('w')) {
            spinner.succeed('Plateform found: ' + process.platform + ' (Only Windows build available)');
            return ['w'];
        } else {
            spinner.fail('Plateform not compatible');
            throw new Error('Can\'t compile to Windows: not compatible OS');
        }
    } else {
        spinner.succeed('Plateform found: ' + process.platform + ' (All builds available)');
        return plateforms;
    }
}

async function zipBuilds() {
    const spinner = ora({
        text: 'Zip builds...',
        spinner: 'line',
        color: 'cyan'
    }).start();
    return fs.readdir('out')
        .then(files => {
            const statsJobs = [];
            for (const file of files) {
                const filePath = path.join('out', file);
                statsJobs.push(fs.stat(filePath).then(stat => {
                    return { stat, filePath };
                }));
            }
            return Promise.all(statsJobs);
        })
        .then(stats => {
            const zipJobs = [];
            for (const statInfos of stats) {
                const { stat, filePath } = statInfos;
                if (stat.isDirectory()) {
                    if (!fs.existsSync(filePath + '.zip')) {
                        zipJobs.push(
                            zip({
                                source: filePath,
                                destination: filePath + '.zip'
                            })
                        )
                    }
                }
            }
            return Promise.all(zipJobs);
        })
        .then(() => spinner.succeed('All builds have been zipped with success'));
}

// TODO: Compile to ICNS file for Mac
if (!fs.existsSync('public/images/favicon.ico')) {
    pngToIco('public/images/favicon.png')
        .then(v => fs.writeFileSync('public/images/favicon.ico', v))
}

const validPlateforms = getValidPlateforms();
const build = require('child_process')
    .exec('electron-builder build -' + validPlateforms.join('') +  ' -c configs/build.yml');
const spinner = ora({
    text: 'Building app...',
    spinner: 'line',
    color: 'cyan'
}).start();

build.stderr.on('data', data => console.error(data));
build.stdout.on('data', data => {
    spinner.text = data;
});

['disconnect', 'exit'].forEach(listener => {
    build.on(listener, () => {
        spinner.succeed('Build completed');
        zipBuilds();
    });
});

This code is a little more complicated than the previous one. What it does is pretty straightforward. Apart from having a custom spinner with the ora module, I convert the icon to ico format, which is the windows image format, I check the user's platform to create either a Windows exclusive build or a Mac and Linux build, and finally I zip these builds so I can transfer them to my release.

Note that I did not find an interesting module to convert an image to mac format, it will have to be done from an online site.

Now we're almost done, we still have the configuration file to do. For this, we will create a file "build.yml" where we will put in the following configuration:

Application build configuration

appId: com.<your name>.<your app name in lower case, without spaces>
productName: <your app name>
directories:
  output: out

mac:
  category: <Category of your app> # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/LaunchServicesKeys.html#//apple_ref/doc/uid/TP40009250-SW8
  target:
    - dmg
    - mas
  icon: public/images/favicon.icns

win:
  icon: public/images/favicon.ico
  target:
    - portable
    - squirrel
squirrelWindows:
  iconUrl: "https://raw.githubusercontent.com/<your name>/<your app name>/master/favicon.ico"
  remoteReleases: true

linux:
  target:
    - snap
    - deb
    - rpm
    - pacman
  icon: favicon.png
  synopsis: <What is your app>
  category: <Category of your app> # https://specifications.freedesktop.org/menu-spec/latest/apa.html#main-category-registry

I assume that all your files are at the root of your project.

Don't forget to add an access token for your Github Action.

And here we are, we just created our build automation based on Github Actions and a simple export script. Simply execute the export script to build your ElectronJs app.

Why Being Curious Will ALWAYS Be Positive 😄

Olyno — Tue, 10 Dec 2019 00:51:36 +0000

🎉 This is my first article in the DEV community, yeay! I hope you will like it. Have a good reading! 🎉

I've always been a pretty curious person in life, and it's always been beneficial to me.

Before explaining how being curious is always positive, let's look back at my personal story.

My username is Olyno. I am a french young developer who (at the time of writing this post) is currently studying web development. From a very young age, I have always been interested in what surrounds me (even if I don't always show it 😅). Whether it is animals, plants, politics, high tech and so on. In short, a life of curiosity. We will come back to a concrete examples of my life later in the post.

But what did it bring me to be so curious?

Imagine you are young, imagine you are 6 years old, and you see a dispute between a young adult and his father. This one sees his son smoking. He preaches him that it was bad for his health because it destroyed his lungs in the long term and that he was still young, that he had his whole life ahead of him. His son tells him that he is of age and can do whatever he wants with his life and that he pays for cigarettes with his money anyway.

In this example, we will not try to find out who is right and who is wrong, but just what we have learned by listening out of curiosity to this conversation:

Smoking damages the lungs over the long term
Smoking reduces life time
You have to pay for cigarettes
You must be of legal age to obtain cigarettes
We are responsible for our actions

In the end, at the age of 6, you have already learned 5 new things that can be useful to you later. That's what curiosity is for: in the long term.

Let's come back to the theme of programming. You like to program (or start in). You are researching new languages to learn on Google and BOOM you have just been curious and have potentially seen a TOP 7 of the current trend languages with their quick descriptions on many blogs or websites. So you have learned:

The name of 7 popular programming languages
What is the preferred language of the moment
What language could you possibly use

To come back a little bit on my life (yes I like to tell my life 🙃), I was interested in programming at a very young age (at the age of 12). So I did a lot of research at that level and learned a LOT of things (including the DEV community, hi 😄). This year I started my studies in web. In my school, the "teachers" (interveners) start from the basics. You must then ask yourself: "But don't you mind starting over from the basics when you already know them? And that's where curiosity comes in. By focusing on the courses, we review the basics, and potentially points that were not clear to us or that we had simply forgotten.

The fact is, I have more experience than my classmates.

Another anecdote

As a programming research fanatic, I discovered many new technologies, including Svelte and Flutter. None of the people I see in my school (except for rare students and practitioners) are familiar with these tools. However, these are emerging tools that are likely to take a very important place in companies in the coming years. Learning these technologies early gives us an advantage over other developers and especially over the labour market.

Yet another anecdote (a little long I'll give you that)

One day, a 3rd grade student saw me code one of my many personal projects in my corner, and told me "you don't have the code level of a 1st grade, even the students in my class don't know how to do what you do". On that day, an event took place in the school bringing together several companies and a few students who had been selected in advance by the management. So not all the students were invited. The words of this 3rd year had motivated me (being vulnerable to flattery as I am). Despite the repeated refusals of my director to participate in this event, but considering myself a strong, beautiful, magnificent 3rd year, etc... after these fine words, I still participated in this event.

What were the consequences?

I was summoned a few days later and almost got a warning (being a first year probably saved me). Anyway, this intrusion allowed me to:

contact many companies
discover the requests and offers on the web market
how this event was organized, so that I could prepare myself for the next one.
that I was staying a freshman year somehow

A few days ago, a desperate 3rd year student (if I'm not mistaken) was looking for a Web Design internship. That's how I was able to give him some companies that were looking for Web Designs.

Conclusion

Being curious often has a positive side behind it and gives you a long-term advantage. Anyway, you risk:

talk too much (not necessarily about the common sense of the term)
take the big head very easily
get warnings and sanctions (only in my anecdote ahahah)

As a good DEV, know how to stay curious, that's how you will progress in life.