DEV Community: LilaDoc

Déploiement d’Omnimor

LilaDoc — Thu, 20 Feb 2025 14:39:31 +0000

Je viens de finir le déploiement d’Omnimor !

Ça fait un moment que j’entends parler de Docker, et rendre Omnimor disponible était l’occasion parfaite pour enfin plonger dedans. Au premier abord, certaines notions n’étaient pas évidentes, notamment la différence entre image et container. J’ai regardé la vidéo de Nana (lien ici), et franchement, grosse recommandation. 👌 Après ça, tout était limpide !

Après la théorie, place à la pratique

Une fois lancée, j’ai dû faire face à quelques points un peu flous :

La base de données : où et comment la gérer ?

J’ai utilisé Postgres comme base de données et la question s’est vite posée : dois-je utiliser la base de données créée automatiquement par le conteneur Docker ?

En gros, lorsqu’on lance un container avec Postgres, une base est automatiquement initialisée. J’ai hésité :

Est-ce une bonne pratique d’utiliser celle-ci directement ?
Ou est-ce mieux de créer et gérer moi-même mes bases via des scripts d’initialisation ?

En regardant d’autres projets, j’ai remarqué que beaucoup utilisent directement la base fournie par Postgres dans le container. Du coup, j’ai suivi le mouvement, mais j’ai encore quelques doutes sur la gestion des données en production. Est-ce que c’est scalable ? Y a-t-il des pièges à éviter ? Si vous avez des retours d’expérience, ça m’intéresse !

Les variables d’environnement : découverte totale

Là, révélation : je ne savais pas vraiment ce qu’était un environnement. 😅

Jusqu’ici, j’utilisais bien un fichier .env pour éviter d’exposer mes variables sensibles (mots de passe, clés API, etc.), mais sans réellement comprendre leur portée ni comment elles fonctionnaient en profondeur. Du coup, quand il a fallu les intégrer dans Docker Compose et mes Dockerfiles, ça s’est un peu compliqué.

Petit à petit, j’ai découvert qu’on pouvait passer les variables d’environnement directement dans docker-compose.yml. Et franchement, c’est super pratique ! Ça permet aux utilisateurs de personnaliser facilement leur setup (par exemple, en définissant leurs propres credentials et accès à leur base de données) tout en gardant ces infos sécurisées et séparées du code.

Et le bonus ? Ces variables d’environnement sont ensuite disponibles côté application, ce qui permet de configurer dynamiquement le comportement de l’app selon l’environnement (dev, test, prod…). Bref, un vrai game-changer pour rendre l’application plus modulable et plus pro !

Le reverse proxy : une option que j’ai mise de côté (pour l’instant)

À un moment, je me suis demandé si je devais intégrer un reverse proxy (exemple NGINX) pour gérer les requêtes entre le frontend et le backend. J’étais curieuse de voir comment ça fonctionnait et si ça pouvait être utile dès maintenant.

Finalement, pas besoin. J’ai décidé de rester focus sur l’essentiel : faire tourner Omnimor avec Docker sans rajouter trop de complexité. Mais c’est un sujet que j’aimerais creuser pour les prochaines versions !

Conclusion

Cette première immersion dans Docker a été vraiment fun ! J’ai découvert plein de concepts et j’ai hâte d’aller plus loin, notamment sur la gestion avancée des bases de données et le déploiement en production.

Et vous, vous faites comment pour gérer vos bases avec Docker ?

Omnimor - Keep-up

LilaDoc — Wed, 05 Feb 2025 10:23:20 +0000

I recently finished The Complete Web Development Bootcamp

Now, it's time to roll up my sleeves and practice. With that in mind, I set myself a challenge: to complete a project every two weeks. And why not share my experience! 😃

So, I started looking for some project ideas. At the same time, Omnivore was saying its goodbyes. So, why not rebuild Omnivore?

Okay. The goal of the project was mainly to see where I stood after the bootcamp.

The question: How far can I go in two weeks?

Set objective

Rebuild Omnivore and integrate as many features as possible in two weeks.

At that point, I thought:

"Okay Lila, how do you organize yourself?"

First thing first: what features matter the most to me in this project?

Render article: improve readability and remove distractions
Read Later: centralize and organize articles I want to keep or read later
Metadata: optimize my reading time and organization
AI: optimize my content consumption

I used Perplexity to guide me in project management. And yeah, that was a first for me. I had the idea to separate the setup, back, front, and data parts, but honestly, it was a bit blurry. And I don't like blurry things.

So, with Perplexity, I created a plan with milestones. Things were already much clearer.

Coming from the medical field, if there's one thing I do master, it's to-do lists.

If you're not familiar with patient care projects, it's basically a big to-do list per patient that you update throughout the day based on the information you receive about them.

So, I feel much more comfortable and efficient when my tasks are well defined.

Development

I progressed relatively smoothly through the setup and back-end. The main challenge was finding a scraper.

I dug around and found Readability/jsDom:

Readability analyzes the DOM generated by JSDOM to extract only the article from the given URL.
Reading the documentation, I saw that there was a security issue related to displaying HTML code from an external (and potentially malicious) source.
Hence the use of DOMPurify, which cleans the code before displaying it.

My API was ready. GO for the front!

And then... disaster struck! 🤣

What happened?

I wasn't clear on the design.

I wanted to replicate Omnivore, but in my own way, improvising as I went… Mistake!

Why was this a mistake?

A little context: I love creative arts. Drawing, pottery, painting...

Except that my creative process is the complete opposite of my work process:

"full improv!"

And that's the problem.

I tackled my DOM like a blank canvas.

As a result, I started getting lost.

When I realized it, I took a break and went on Figma to create a wireframe and put everything in order.

Finally, after some reflection, I decided to replicate Omnivore's exact design, given the ETA.

What I learned from this

For my next project, I'll organize the front exactly like I did for the back.

That means spending time on the objectives and setting up a detailed execution plan.

In the end

In two weeks, I implemented a full-stack web application (React + Node.js) that allows saving and reading articles from any URL.

The frontend (React/Vite) provides an interface to manage articles, while the backend (Express/PostgreSQL) extracts relevant content from web pages using Readability.

If you want to check it out, it's here.

Key features

Article extraction
Database storage
CRUD operations
Responsive interface

What I learned from this project

Two weeks is short 😅
Improve project management (Creative process for the front? NO.)
Lots of new concepts to explore:
- CSS variables in React
- Docker/Docker Compose
- React Query
- IndexedDB
- Security 🤩

Today, the project is available on GitHub, and my next goal is to deploy it via Docker Compose.

Onward to new adventures! 🤩

Omnimor - Keep-up (French)

LilaDoc — Tue, 04 Feb 2025 09:36:05 +0000

J’ai récemment fini The Complete Web Development Bootcamp.

Maintenant, c'est le moment de se retrousser les manches et de pratiquer. Dans cette optique, je me suis lancé un défi : réaliser un projet toutes les deux semaines. Et pourquoi ne pas partager mon expérience ! 😃

Je me suis donc mise à chercher quelques idées de projet. Au même moment, Omnivore tirait sa révérence. Du coup, pourquoi ne pas refaire Omnivore ?

Ok. Le but du projet, c'était principalement de savoir où j’en étais après le bootcamp. La question : Jusqu’où est-ce que je peux aller en deux semaines ?

Objectif fixé: Refaire Omnivore et intégrer le maximum de features en deux semaines.

À partir de là, je me suis dit : "Ok Lila, comment tu t’organises ?"

First thing first : quelles features me tiennent à cœur dans le projet ?

Afficher l'article : améliorer la lisibilité et supprimer les distractions
Gérer les articles : centraliser et organiser les articles que je souhaite conserver ou lire plus tard
Metadata : optimiser mon temps de lecture et mon organisation
Ai : optimiser ma consommation de contenu

J’ai utilisé Perplexity pour me guider dans la gestion de projet. Et ouais, c'était une première pour moi. J’avais dans l’idée de séparer la partie setup, back, front et data, mais concrètement, c'était un peu flou. Et je n'aime pas trop ça, le flou.

Du coup, avec Perplexity, j'ai fait un plan avec milestones. C’était déjà plus clair.

Venant du médical, s'il y a bien une chose que je maîtrise, ce sont les to-do listes.

Si vous n’êtes pas familier avec les projets de soins, basiquement, c’est une big to-do liste par patient que tu mets à jour toute la journée en fonction des infos que tu reçois à propos de ce patient.

Donc, je suis beaucoup plus à l’aise et efficace lorsque j’ai mes tâches bien définies.

Développement

J’ai avancé relativement sans friction sur la partie setup et back-end. Le principal challenge était de trouver un scraper.

J’ai investigué pour trouver Readability/jsDom :

Readability analyse le DOM généré par JSDOM pour en extraire uniquement l'article de l’URL fournie.
En lisant la doc, j'ai vu qu’il y avait une problématique de sécurité liée à l’affichage de code HTML d’une source externe et donc potentiellement malveillant.
D’où l’utilisation de DOMPurify, qui nettoie le code avant l’affichage. Mon API était prête, GO pour le front !

Et là, c’est le drame ! 🤣

En fait, ce qu’il s’est passé, c'est que je n’étais pas claire sur le design. Je voulais reproduire Omnivore, mais à ma sauce, en improvisant au fur et à mesure… Erreur !

Pourquoi cette erreur ?

Petit contexte : j’aime les arts créatifs. Le dessin, la poterie, la peinture... Sauf que mon processus créatif, c’est l’inverse complet de mon processus de travail : "full impro !" Et c’est là le souci. Je suis partie sur mon DOM comme sur une page blanche. Du coup, j’ai commencé à me perdre.

Quand je m’en suis rendu compte, j’ai fait une pause, et je suis allée sur Figma pour faire une maquette et mettre tout ça en ordre.

Finalement, après réflexion, je suis partie sur l’option de refaire le même design qu’Omnivore, au vu de l'ETA.

Ce que j’en tire

C'est que pour mon prochain projet, je ferai exactement comme pour le back en termes d’organisation. C’est-à-dire passer du temps sur les objectifs et établir un plan d’exécution détaillé.

Au final

En deux semaines, j’ai implémenté une application web full-stack (React + Node.js) permettant de sauvegarder et lire des articles depuis n'importe quelle URL.

Le frontend (React/Vite) offre une interface pour gérer les articles, tandis que le backend (Express/PostgreSQL) extrait le contenu pertinent des pages web via Readability.

Si vous voulez aller jeter un coup d'œil, c'est ici

Principales fonctionnalités

Extraction d'articles
Stockage en base de données
CRUD
Interface responsive

Ce que j’ai retenu de ce projet

Deux semaines, c'est court 😅
Améliorer le project management. (Processus créatif pour le développement front : NO.)
Plein de nouvelles notions à découvrir : CSS variables dans React, Docker/Docker Compose, React Query, IndexedDB, sécurité… 🤩

Aujourd’hui, le projet est disponible sur GitHub et mon prochain projet sera de faire un déploiement via Docker Compose.

En route vers l’aventure 🤩

My First Server

LilaDoc — Sat, 16 Dec 2023 13:01:53 +0000

Today I built my first server with Express.
It made me look up for what are The Well Known Ports,
The Registered Ports, and The Dynamic and Private Ports.

What rules did I learn so far from doing the Advent of Code? 🎄

LilaDoc — Tue, 12 Dec 2023 03:25:18 +0000

I am enjoying December and all the Christmas vibes.

And what better Advent calendar than the Advent Of Code? I'm thankful to the creators because I've learned so much so far and it's exquisitely fun! 🫶🏽

Here are some rules that I took from practicing the Advent Of Code. Maybe it could serve someone else.

When you think you understood the subject, read it again.
Avoid Global Variables.
Fraction your code!
Talk to yourself (use detail in your console.log, use comments).
Take breaks from your code (it’s not going anywhere).
Detail your algorithm on paper. Unfold every single step. Use pseudocode.

And that's it 👋🏽

POO

LilaDoc — Mon, 11 Dec 2023 04:01:38 +0000

Object Oriented Programming is a way of coding. I came across this notion starting to code with NodeJS, an object-oriented language.

This is the way of thinking:

An object can have properties and methods. The properties are the “Be” and the methods are the “Do”.

Take a nurse as an example.

Properties

You create an object Nurse that has several properties.

var Nurse ={
name: "Lila",
specialty: "Biological analysis",
Age: 30,
}

This is called an Object Literal. You use it when you only need one object of this type.

Constructor

We use a constructor function to create more objects with the same properties. It is like a new “version” of the object.

⚠️ To declare a constructor function, we must give it a name starting with a capital.

To create the new object, we give the constructor function properties as inputs.

Inside the function, we match the inputs with the properties’ names.


function Object(proprety1, proprety2, proprety3){
this.proprety1 = proprety1;
this.proprety2 = proprety2:
this.proprety3 = proprety3;
this.methode = function(){
    //function
    }
}

// in our case

function Nurse(name, specialty, age){
this.name = name;
this.specialty = specialty:
this.age = age;
}

How do we initiate the creation of a new object?

var Nurse1 = new Nurse("Nelly", "ICU", 32);

to access the property we use this syntax:

object.property
//in or case
Nurse1.name

Method

If we want our object to do something, we have to attach it to a function. It’s called a method.

It says my object can do this: method.

var nurse ={
name: value,
specialty: value,
age: value,
iv: function(){
    put an iv;
    }
}

How to call a function?

object.method()
// in our case
nurse.iv()

How to add a function in a constructor function:

function Object(proprety1, proprety2, proprety3){
this.proprety1 = proprety1;
this.proprety2 = proprety2:
this.proprety3 = proprety3;
this.methode = function(){
    //function
    }
}
function Nurse(name, specialty, age){
this.name = name;
this.specialty = specialty:
this.age = age;
this.iv = function(){
    put an iv
    }
}

I took some notes about servers.

LilaDoc — Tue, 05 Dec 2023 13:37:14 +0000

I had difficulty figuring out what is a server. I was confused because peoples talking about server seems not to refer to the same thing. For me, a server was a machine that you could communicate and that could do whatever you want. Store data for example. Then I got to install Apach2, and at the moment my definition didn’t sound quite right. I was completely lost. How can Apach2 be a server if it wasn’t a machine but software?

If you are in the same case, let me explain.

First, what is the internet, and what is the web?

Internet is all of the machines that communicate together by cables constituting a network.

Those machines want to exchange messages. Those messages are sent by a protocol. A protocol is the way you should read the message. There are a lot of protocols: HTTP, SCP, FTP… Itch has its specificity. But the most common on the web is HTTP.

HTTP is for HyperText Transfer Protocol. Everything is in the title. HTTP is a protocol that allows you to exchange Hypertext messages, so text. The language we use to write the message is HTML for HyperText Markup Language. So if you want to share information you can wright an HTML file.

HTML files contain text that can be structured with tags. For example h1 to create a title. That’s how you build a web page. One of the tags is particularly interesting. It is the a tag. It allows you to create a link to another web page. So at the end, you have a tone of web pages linked between them. And that is the WWW. The World Will Web (WWW) is a network in which pages redirect to each other by links.

How do we do that? How can we exchange messages?

I wrote my web page index.html locally (on my laptop) that I want to share. Now what?

I want people to have access to my web page. So I send my index.html to another machine that will have the job to share my web page. That could be any computer. This computer will listen to requests from other computers that want to have access to my web page (clients) and respond to them. This is what we call my server.

But work, our computer needs software that can manage the requests and that knows HTTP. This software is my web server or my web application. There are many and Apach2 is one of them.

To listen to requests, we have to attribute a port to our web server. Basically, we tell it “Hey! This is your canal of discussion!”. To reach our web server, the client will have to send its request to my server’s IP to this port. The default port for HTTP servers is port 80.

When the APP (application) receives a request, it will search into the server’s files and send the content of the file requested. The file by default is index.html.

Now, you can understand how a URL works.

A little magic with GRID.

LilaDoc — Tue, 05 Dec 2023 13:32:24 +0000

My first website was simple. A title, two links, and some text for the description. Let's be honest, it was quite unpleasant.
For the second version, I pretty much used the same components. So what changed?

Grid’s magic!

Question: What is grid?

Grid enables easy organization and customization of website elements. Basically, it’s building a map and putting elements on it.

How to use it?

First, you define columns, rows, and their dimensions.

Let’s say we build a div that we will call ocean. And that we want to put a ship in the ocean.

<div class="Ocean">
        <div class="Ship"></div> 
    </div>

.Ocean{

    display: grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:100px 100px 100px;
    width: 300px;
    background-color: aqua;

    }

Here you have built 3 columns of 100px and 3 rows of 100px.

That's how you can represent it:

You determine where you want to put your item.

For example, if I want to ship the second row of the second column, I say “ Please grid, put my cross between the second and the third vertical lines. And between the second and the third horizontal lines.”

.Ship {
        grid-column:2/2;
        grid-row: 2/2;
    }

Your ship will be between the second and the third vertical lines. So, in the second column.

Your ship will be between the second and the third horizontal lines. So on the second raw.

And that’s it! I hope that it was clear enough.

Hi everyone!

LilaDoc — Tue, 25 Jul 2023 13:58:31 +0000

Hi everyone! I'm Lila and I began my journey in tech! I started some courses on Openclassroom. That's a start. :)
I'm building a blog about my progress. It gives me the opportunity to play with CSS and HTML. Which is so exciting!
I'm not very good at socials and I'm French. So my posts will contain errors so please be cool!
Nice to meet you all!