DEV Community: Léa Pollet

Simplifier le développement de newsletters responsives avec MJML

Léa Pollet — Sun, 23 Feb 2025 18:48:04 +0000

Coder des emails en HTML est une véritable épreuve. Entre les balises
<table> à répétition, le CSS inline *obligatoire * et les nombreux clients mails qui interprètent le code différemment, créer une newsletter responsive et compatible partout peut vite devenir un cauchemar.

Mais il existe une solution qui change la donne : MJML.

Pourquoi coder des emails en HTML est compliqué ?

Contrairement au développement web classique, les emails HTML doivent être compatibles avec une multitude de clients mails** (Gmail, Outlook, Apple Mail, etc.), chacun ayant ses propres règles d’interprétation du code. Voici quelques-uns des défis :

Utilisation massive des balises <table> pour structurer le contenu.
CSS inline obligatoire pour garantir un rendu correct.
Gestion du responsive laborieuse, souvent nécessitant des hacks.
Problèmes d'affichage aléatoires selon les clients mails.

Avec plus de 60% des emails ouverts sur mobile, assurer un rendu responsive est essentiel, mais très complexe à réaliser en HTML pur.

Qu'est-ce que MJML ?

MJML (Mailjet Markup Language) est un framework open-source créé par Mailjet qui simplifie la création d'emails responsives.

L’idée est simple : vous codez avec des balises simplifiées et sémantiques (comme ou ), et MJML compile votre code en un HTML optimisé et compatible avec la plupart des clients mails.

Exemple :

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>
          Bonjour le monde !
        </mj-text>
        <mj-button href="https://example.com">Cliquez ici</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Ce simple code MJML se compile en un HTML complet avec toutes les balises <table> nécessaires et du CSS inline pour assurer un rendu parfait.

Les avantages de MJML

1. Responsive by design

Chaque composant MJML est conçu pour être responsive par défaut. Plus besoin d’écrire des media queries complexes ou de tester chaque mise en page sur mobile.

2. Compatibilité multi-clients

MJML génère un HTML optimisé pour les principaux clients mails, réduisant considérablement les risques de bugs d'affichage entre Outlook, Gmail, Yahoo, etc.

3. Gain de temps

Le code MJML est plus court et plus lisible que le HTML traditionnel pour emails. Moins de lignes de code, moins de complexité, donc plus de productivité.

4. Intégration facile

Les emails générés peuvent être directement intégrés dans des outils comme Mailchimp, Brevo (ex-Sendinblue), ou tout autre outil d’emailing.

5. Prévisualisation en temps réel

Grâce aux outils comme l’éditeur en ligne de MJML ou des extensions pour VS Code, vous pouvez prévisualiser vos emails en temps réel tout en développant.

Quand utiliser MJML ?

Si vous développez des newsletters régulièrement.
Si vous cherchez à gagner du temps tout en garantissant un rendu parfait.
Si vous voulez éviter les tracas liés à la compatibilité entre clients mails.

The CIA Triad: Foundations of Cybersecurity

Léa Pollet — Fri, 21 Jul 2023 17:12:26 +0000

The CIA Triad is a fundamental concept in the field of cybersecurity and serves as the cornerstone for safeguarding information and digital systems. This triad comprises three essential principles designed to ensure the integrity, confidentiality, and availability of sensitive data. Let's delve into these three pillars of security:

1. Confidentiality:
Confidentiality refers to protecting information from unauthorized access. It ensures that only individuals with proper authorization can access specific data. Mechanisms such as encryption, authentication, and access controls are employed to maintain data confidentiality. For instance, when using a password to access an online account, confidentiality is ensured by preventing unauthorized entry.

2. Integrity:
Integrity focuses on the reliability and accuracy of data. It guarantees that information remains unchanged and has not been altered without authorization. Accidental errors or malicious manipulations can have severe consequences, leading to incorrect decisions or unforeseen actions. To preserve integrity, techniques such as integrity checks, data hashing, and audit logs are used to detect any unwanted alterations.

3. Availability:
Availability centers on ensuring that information and services are accessible and usable when needed. This involves making certain that systems remain operational and resilient to failures or attacks. Measures like backup solutions, redundancy, and business continuity planning are put in place to ensure availability. For example, a high-traffic website must be capable of supporting a large number of simultaneous users without experiencing service interruptions.

The CIA Triad serves as the foundation of cybersecurity and is utilized by businesses, government organizations, and even individuals to protect sensitive information. These three principles work in tandem to create a secure and reliable environment, preventing unauthorized access, malicious manipulations, and service disruptions.

In summary, the CIA Triad reminds us of the significance of keeping information confidential, accurate, and **available **to protect our digital data from potential threats and vulnerabilities. By applying these principles, we can strengthen our cybersecurity posture and minimize the risks of cyberattacks and data losses.

[EN] Cybersecurity: What are the best platforms?

Léa Pollet — Mon, 07 Nov 2022 10:06:22 +0000

Are you interested in the world of cybersecurity? Logic, it's

But how to learn it? This is a question whose answer remains very complicated, because the world of cybersecurity is wide.

If you are looking to raise your awareness, ANSSI offers free training (MOOC) with a certificate of achievement: MOOC training

Good ! Back to our main topic! Here I am going to give you learning platforms subjectively, so it is also your duty to look for others!

Try Hack Me

One of my favorites! This platform offers a learning section and a practical section. We have a streak system (answering questions for several days from affiliates) and a ranking system! Also if you do not want to install a VM or the kali OS, Try Hack Me offers you the possibility of using a machine via the site directly! I find it very suitable to start!

Root Me

Root me offered direct training via areas ranging from steganography to XSS flaws. It offers job offers, CTFs, news etc!

There is also their Twitch channel which is very interesting!

Hack The Box

I personally find it very complete, easy to use and with a very clean interface! It offers exercises by theme and platform! A grading and certification system via the academy. Just like Root.me, HTB offers a listing of jobs and companies that are recruiting!

👉 Hack The Box discord

Udemy

Udemy is a platform that offers both paid and free solutions. They are "teachers" who offer courses on various subjects, including cybersecurity! They usually offer a certificate of achievement and a good portfolio. I tested several that suited me on a theoretical level, but which did not remain frustrating on the practical side. At first glance, the courses seem expensive, but you just have to wait a few days to get promotions!

I recommend this training to learn the basics: Hacking Ethics: The Complete Course of Michel Kartner who is the founder of the site: Le Blog Du Hacker!

Youtube

So here we are with Youtube! This is the platform most of us spend hours and hours on! Here I will not talk about training but more about a specific point. Youtube will be very useful for notions or problems but very little for a complete training! You will also find videos to learn the trades, where to start, etc...

Conclusion
Here, the goal is to give you a brief listing of the platforms that I find the most suitable to start learning about cybersecurity! I hope I was able to help you in your search!

🐟 Splash!

[FR] Cybersécurité : Quelles sont les meilleures plateformes ?

Léa Pollet — Mon, 07 Nov 2022 08:39:18 +0000

Le monde de la cybersécurité vous intéresse ? Logique, c'est top !

Mais comment l'apprendre ? C'est une question dont la réponse reste très compliqué, car le monde de la cybersécurité est large.

Si vous cherchez à vous sensibiliser, l'ANSSI propose une formation gratuite (MOOC) avec un certificat de réussite : Formation MOOC

Bon ! Retournons à notre sujet principal ! Je vais ici vous donner des plateformes d'apprentissage de façon subjective, donc il est aussi de votre devoir d'en chercher d'autre !

Try Hack Me

L'un de mes préférés ! Cette plateforme propose une section apprentissage et une section pratique. On a un système de streak (répondre à des questions plusieurs jours d'affilées) et de classement ! Également si vous ne souhaitez pas installer un VM ou l'OS kali, Try Hack Me vous offre la possibilité d'utiliser une machine via le site directement ! Je le trouve très adapté pour commencer !

Root Me

Root me propose lui directement de se former via des domaines allant de la stéganographie aux failles XSS. Elle vous propose des offres d'emplois, des CTF, des news etc !

Il y a également leur chaîne Twitch qui est très intéressante !

Hack The Box

Je le trouve personnellement très complet, facile d'usage et de l'interface très propre ! Il vous propose des exercices par thème et plateforme ! Un système de rank et de certification via l'academy. Tout comme Root.me, HTB propose un listing des jobs et des entreprises qui recrutent !

👉 Le discord Hack The Box

Udemy

Udemy est une plateforme qui propose des solutions payantes comme gratuites. Ce sont des "professeurs" qui offrent des cours sur divers sujets, dont la cybersécurité ! Ils offrent la plupart du temps un certificat de réussite et un bon portfolio. J'en ai testé plusieurs qui m'ont convenu niveau théorie, mais qui n'en reste pas frustrant côté pratique. Au premier abord, les formations ont l'air cher, mais il suffit d'attendre quelques jours pour avoir des promotions !

Je vous recommande cette formation pour apprendre les bases : Hacking Éthique : Le Cours Complet de Michel Kartner qui est fondateur du site : Le Blog Du Hacker !

Youtube

Alors, nous voici avec Youtube ! C'est la plateforme où la plupart d'entre nous passons des heures et des heures dessus ! Ici je ne vais pas parler de formation mais plus d'un point spécifique. Youtube vous sera très utile pour des notions ou un problèmes mais très peu pour une formation complète ! Vous y trouverez aussi des vidéos pour y apprendre les métiers, où commencer, etc...

Conclusion

Ici, le but est de vous faire un listing bref des plateformes que je trouve les plus adaptés pour commencer l'apprentissage de la cybersécurité ! J'espère avoir pu vous aider dans vos recherches !

🐟 Plouf !

[Fivem] [RageUI] - Script Teleport Builder

Léa Pollet — Fri, 14 Oct 2022 20:06:26 +0000

Preview :

Vidéo de présentation

Serveur Discord avec le lien du script : Le repère des tanches

Voici mon script en RageUI pour créer / supprimer des points de téléportation sur FiveM disponible sur mon Discord !

Features :

➤ Création de point de téléportation sans reboot
➤ Suppression de point de téléportation avec reboot
➤ Suppression de point de téléportation via un nom !
➤ La langue (FR/EN)

En cas de question et/ou de problème venez me contacter sur mon discord : p0p0_l4_t4nch3#1847

Réseaux Sociaux :

➤ Twitch
➤ Instagram
➤ Dev.to
➤ Twitter

✉️ Mail Pro : popodevfivem@gmail.com

[EN] The secret repo of GitHub ?

Léa Pollet — Tue, 06 Sep 2022 17:38:41 +0000

Many know this trick, but many do not use it! Why ?!

We go from a basic Github profile (not pretty 😒) to a profile like this 🤩:

How to achieve it?

Very simple !

(You will find all the necessary links to continue below the explanations)

All you have to do is create a repository that will bear the name of your GitHub nickname! (You will even get a little message indicating that you have found the secret deposit 🤫)

You succeed ? Perfect !
We then continue.

Now everything will happen in your README. If you go there, you can see that it is already pre-configured.
But you're going to say to me: "Is that all you have for us?!"

And no, because the magic will operate here!
A gentleman by the name of Rahul Jain will make our task easier!

He automated everything for us!
You will be able to put your information and everything you want to put and then download your own README to put on your repo! Nice isn't it?!

The link to make your Repo: Here

If you want to find out more about all this, Guillaume Reygner, who writes a lot of articles, has one on the subject right here!

If you don't like the rendering and you don't have an idea, here is a repository with templates.

If you liked this article and/or want to contribute to it, leave a comment/like!

[FR] Le Repo secret de GitHub ?

Léa Pollet — Tue, 06 Sep 2022 17:26:22 +0000

Beaucoup connaissent cette astuce, mais beaucoup ne l'utilise pas ! Pourquoi ?!

On passe d'un profil Github basique (pas beau 😒) à un profil comme celui-ci 🤩 :

Comment y parvenir ?

Très simple !

(Tu trouveras tout les liens nécessaires pour continuer en dessous des explications)

Il te suffit de créer un repo qui portera le nom de ton pseudo GitHub ! (Tu auras même un petit message indiquant que tu as trouvé le repo secret 🤫)

Tu as réussi ? Parfait !
On continue alors.

A présent tout va se passer dans ton README. Si tu t'y rends, tu peux voir qu'il est déjà pré-configuré.
Mais tu vas me dire : "C'est tout ce que tu as pour nous ?!"

Et non, car la magie va opérer ici !
Un Monsieur du nom de Rahul Jain va nous faciliter la tâche !

Il a tout automatisé pour nous !
Tu vas pouvoir mettre tes informations et tout ce que tu désire mettre pour ensuite télécharger ton README tout propre à mettre sur ton repo ! Sympa non ?!

Le lien pour faire ton Repo : Ici

Si tu veux en découvrir d'avantage sur tout ça, Guillaume Reygner qui fait pas mal d'article en à fait un sur le sujet juste ici !

Si tu n'aimes pas le rendu et que tu n'as pas d'idée, voici un repo avec des Templates.

Si tu as aimé cet article et/ou que tu souhaites y contribuer, laisse un commentaire/like !

[Fivem] [RageUI] - Script Location De Voiture

Léa Pollet — Wed, 31 Aug 2022 18:28:52 +0000

Preview :

Vidéo de présentation

Serveur Discord avec le lien du script :Le repère des tanches

Voici mon script de location de voiture disponible sur mon Discord !

Features :

➤ Prix différent pour chaque véhicule
➤ Plaque avec écrit "Location"
➤ Temps de location modifiable
➤ La langue (FR/EN)
➤ La position du ped
➤ La position du spawn du véhicule
➤ Le temps pour afficher le message d'alerte

En cas de question et/ou de problème venez me contacter sur mon discord : p0p0_l4_t4nch3#1847

Réseaux Sociaux :

➤ Twitch
➤ Instagram
➤ Dev.to
➤ Twitter

✉️ Mail Pro : popodevfivem@gmail.com

[Fivem] [RageUI] - Script de test d'un véhicule au concessionaire

Léa Pollet — Wed, 31 Aug 2022 18:21:20 +0000

Preview :

Vidéo de présentation

Serveur Discord avec le lien du script : Le repère des tanches

Voici mon script en RageUI pour tester un véhicule au concessionaire disponible sur mon Discord !

Features :

➤ Essai impossible tant que quelqu'un test un véhicule
➤ Prix de test configurable
➤ Plaque avec écrit "Essai"
➤ Le temps pour afficher le message d'alerte
➤ La langue (FR/EN)
➤ Temps de test modifiable
➤ Blips et spawn de voiture modifiable

En cas de question et/ou de problème venez me contacter sur mon discord : p0p0_l4_t4nch3#1847

Réseaux Sociaux :

➤ Twitch
➤ Instagram
➤ Dev.to
➤ Twitter

✉️ Mail Pro : popodevfivem@gmail.com