Forem: Lyokolux

How we created a web-based typing experiment

Lyokolux — Mon, 18 Oct 2021 19:10:48 +0000

We had little time, an experience to build and now to spread.

🎯 The goal of the experiment

The objective of this study is to determine the optimal way to display and to type alphanumeric sequences (such as identifiers, order numbers, etc.). According to research in cognitive psychology, it is easier to read and copy elements that are grouped in chunks of 2 or 3, rather than placed one after the other without grouping. Can we prove it ?
So we made a tiny app everyone can try: https://ux-typing-experiment-five.vercel.app

🏛 How we created it ?

We had 3 well-known challenges to build this project:

create a web interface
store the data of the experiment
make it available

and a little time dedicated to it :'(

There is a lot of web framework around here (Vue, React, ...Angular) but we wanted to try something different and new. As Svelte becomes well-tooled, we wanted to give it a try. Its minimalist architecture, while being efficient, convinced us. The learning curve is fast. Perfect ! Add a slider and here we go to design each pages.

Hosting the data must be fast and easy. The free tier of Firestore fits our need for this project. Drawing and setup a relational database was overkill for it. Its document-based approach to store data is efficient for our need. One user: one document.

Then we deploy the whole project with Vercel. It is easy, fast and already automated. Moreover Vercel deploy the app for every Pull Request, allowing to make a quick test on the user interface. Thanks for it Vercel.

That's a summary of it. Here some highlights on this project.

🚧 Some obstacles that we met and how we solved them

svelte-i18n is not reactive. So we stored the i18n keys instead of their value in the objects that we pass around the components. The translated string is handled directly in the view with text expression. Okay ¯\(ツ)/¯

Mixing reactivity inside a callback is no good idea. We don't know why but a reactive value inside a callback was not updated on time on keypress. Moving it into a reactive statement solved the problem (see: #adcedf5).

Focusing the first input on the next slide is a must-have for such an experience. It was not so trivial as we thought. We ended up with a small-efficient function, leveraging the Javascript power of DOM manipulation 😅💪 (see: Experiences.svelte#44)

💫 Each slide (or page) runs smoothly to the next one

This is a key point to a good experience: it has to be smooth. Any superfluous actions must be avoided and the necessary ones must fit in the flow.

When a user fills a form, a smooth button is displayed to validate the input. So they knows everything is ok and they can go on.

After finishing to type, it transitions to the next one. No button is needed as the input does not have to be checked. Fill the appreciation form after the typing session and go on.

We want to scroll and go further. Thus every slide contains a small amount of information and are reviewed quickly.

We hope these thoughts we had are making the experiment, well, smooth.

Give it a try ❤️

You can participate in this experience too with the following link: https://ux-typing-experiment-five.vercel.app/. You can quit at every moment or you can stay until the end. You choose what the best fit for you ;)
If you find any issues, please feel free to submit an issue on the Github repository.

You can see some results too: https://ux-typing-experiment-five.vercel.app/results

It is again a work in progress. We need first to gather more data, and improve the app.

Supprimer un billet de blog, ça tourne mal

Lyokolux — Wed, 16 Jun 2021 10:56:30 +0000

J'ai supprimé par inadvertance mon fichier markdown sur l'article CUL 0b11 avec un bon rm cul-3.md. Le fail, j'ai validé la commande plus vite que mon ombre facepalm.

Comment s'en sortir et le retrouver, sans backup ?

Heureusement Python est mon ami. L'idée est simple : récupérer le code source de l'article, directement depuis le site. Je prends la partie qui m'intéresse.

Puis avec une recherche internet, je tombe sur html2text. Un coup de pip3 install et hop je suis parti pour un one-liner dégueulasse :

import html2text
open('cul-3.md', 'w').write(html2text.html2text(open('article-en-html').read()))

Et voilà, je retrouve mon article correctement nommé. Plus quà retrouver les metadonnées de l'article en 30 secondes et c'est bon. Boulette réparée. Après test sur un serveur en local (mercipython -m http.server`), il est de nouveau là. J'aime l'informatique.

J'ai Venvie de gérer les dépendances en python

Lyokolux — Wed, 16 Jun 2021 10:56:11 +0000

Ce week-end dernier, j'ai participé à mon premier hackathon à l'université du Luxembourg à Belval, et c'était génial. J'ai beaucoup appris.

Il y a un point qui je veux aborder : les dépendances en Python. Cela me paraissait inutile avant, mais quand il s'agit d'une équipe de 4, il faut qu'on soit tous synchronisé sur les mêmes versions.

La stratégie est simple : 2 devs sur le front- et 2 devs sur le back-end. Petit topo : du React avec Webpack en front- et python, SQLite et Flask en back. Le tout déployé sur un serveur Google Cloud (avec AppEngine). Petit dépôt Git pour partager le code en live. J'étais sur le back en full Python.

Première question avec mon coéquipier : quelle version de Python ? 3.6 a été retenu. Cependant, il fallait aussi se synchroniser sur les versions des dépendances/packages/bibliothèques python.

Créer un environnement virtuel (EV) avec Venv et pip

Tout existe déjà super bien, il y a juste à savoir utiliser les outils.pip est parfait pour installer les dépendances. Besoin de Venv :

pip3 install venv

(en réalité, j'avais un alias pip='pip3', parce que je suis flemmard)

Comment ensuite créer l'EV ?

python -m venv PATH/venvenv

et tadaaa, un dossier (que j'ai nommé venvenv) contenant tout le necéssaire pour faire tourner une version de python. On l'active

source PATH/venvenv/bin/activate

et on observe un joli nom qui vient se glisser au début de la ligne de la console : (venvenv). C'est très rapide.

Pour en sortir, deactivate.

Gérer les dépendances

pip freeze nous donne les paquets déjà installés. On installe les suivants avec le magnifique pip install nom_des_packages sur l'ordi de mon coéquipier, et ce tout le long du week-end.

Bref, il a crée un simple requirements.txt. Ce fichier contient simplement la sortie de pip freeze. Avec la synchro du dépôt Git, j'ai effectué un pip install -r requirements.txt et hop tout est bon. Si le besoin est, je réexecute la commande pour me resynchroniser. Je suis prêt à coder. Magnifique !

Suppression d'une référence vers Google

Lyokolux — Wed, 16 Jun 2021 06:29:50 +0000

Je me suis aperçu aujourd'hui que le blog envoi une requête vers le domaine googleapi.com. Argh ! Sacrilège !

Le thème du site renvoyait effectivement vers une feuille de style CSS, pour la police d'écriture Open Sans. Ni une, ni deux, la ligne de code

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

a été remplacé par

<link href='../theme/css/police.css' rel='stylesheet' type='text/css'>

contenant tout le nécéssaire. Ouf, inspire et expire, ça va mieux.

Désolé pour ce petit désagrément. Une bonne chose de faite !

EDIT DU 13/11/19 : j'ai depuis remplacé ces polices par Luciole

Reading: Mastering Vim Quickly: From WTF to OMG in no time

Lyokolux — Wed, 16 Jun 2021 06:28:04 +0000

I already had experiences since one year with Vim; but I didn't put real effort to be efficient with my beloved text editor.

The newsletter "Mastering Vim Quickly", which I read since weeks, give overviews of the content of the book and different tips. So with the black Friday, I have bought a digital version and read it. This book showed me how vim works and how to get efficient.

This is my first major step to become a Vim Ninja and to turn Vim+Bash into a efficient IDE.

Mastering Vim Quickly : An easy and rich reading

Well I have to admit: this book is well written. Concise enough to get to the point and it shows the most important know-how to be independant with Vim. There is a lot of content, no doubt about it; even if I want more :)

From basics command for file editing, modes, multiple file editing (Hi netrw <3), vimrc, folding and other topics; it covers every aspect needed to be efficient with the least effort.

It shows that a lot of plugin are unecessary too: they can be avoided (hi NerdTree).

At the end, some productivity tips are given. It is not always what I wanted (or I already knew it), but it has shown me some possibilities and the power of Vim.

Not enough to become a Vim Ninja

However, more knowledge is necessary to be more effective than Visual Studio Code IMHO. Thus this book is not a magic potion; but the best starter to get skilled. It saves a lot of time and this is the most important with this book: it avoids all the initial confusion of vim. It brings you where you want to be : conformtable with the tool.

Road to Vim Ninja: all the way

So I read it now, I need to learn more about vim because this tool is so powerful. But like Lego, everything has to be built or at least set up. So I will share my experiences with you throughout the adventure :)

As people I respect says : "the road is long but the way is free". It is true for vim.

PS : Always a pleasure to have an IDE starting in 0.15 seconds with all the plugins 😃

Use emojis to enhance commit messages

Lyokolux — Thu, 11 Mar 2021 12:44:28 +0000

There is always a problem when choosing the commits message. It's complicated and we often end up with unclear messages like "Improve clarity".

Since then, some conventions have appeared like Angular or more recently the Conventional Commits. What if we put emojis to make it clearer? 🤘

And that's where Gitmoji comes in: putting meaning in emojis for commits messages. For example, we can have:

✨ Add new feature X

🍱 update favicon

🔥 remove unused css files

Gitmojis like :sparkles: can be written for platforms supporting GFM (notably Github and Gitlab).

Advantages and disadvantages

The ➕

emojis are more precise than conventions, there are a number of them
the reading of the commit message is simplified and universal
and it's still pretty cool

The ➖

you need to know their meaning
writing gitmojis can be tedious

For these negative points, there are solutions:

First the list may seem impressive, and it is! We can start with a small set of the most used and generic gitmojis.

gitmoji	emoji	Sens
`:sparkles:`	✨	Addition of a new feature
`:bug:`	🐛	Fix a bug
`:recycle:`	♻️	Code Refactoring
`:fire:`	🔥	Code or file deletion
`:pencil:`	📝	Writing documentation
`:bulb:`	💡	Add or modify comments in the source code

Then, you have to enter them. Tools exist for this, for example among others, the official site which allows you to copy and paste the gitmoji codes or directly the emojis (the CTRL+F greatly increases the search speed); or a tool in CLI; or a browser extension ✌️ make life more convenient.
Others are also available and listed on a page of the official website.

✨ Adopt a simple convention

The convention mostly used by the Gitmoji community is simple: <gitmoji> Description. The first word of the description starts with a capital letter. That's it. Simple 💯

After several months of use, adding a scope on some posts seems quite useful to me, like: <gitmoji>(scope):. Sometimes this lends itself well to it! Sometimes not so much. Some emojis don't need a scope: as 🙈 means "Add or update a .gitignore file.", the scope is already included in the meaning of the gitmoji.

In short

Gitmoji is awesome and fun, so you might as well use it 😄
May your commits messages be happy and clear!