Jonathan Levaillant

Intégrateur / Développeur Front-End - JoliCode - Passionné de CSS

[JoliCode @JoliCode]

Vous vous demandez ce que signifie ce bout de CSS ? 🤔

.button {
background-color: hsl(from var(--brand-color) h s 41%);
}

Il est temps de vous mettre à jour 🎉 avec le dernier article de Jonathan sur les couleurs relatives en CSS ! 🆕

📜 https://t.co/BrlIUadbGZ

[Ahmad Shadeed @shadeed9]

CSS Relative colors are incredibly helpful! I'm currently doing a writeup about my learnings and enjoying it so far. 🎨

[JoliCode @JoliCode]

En collaboration avec la société new-yorkaise Ode à la Rose, nous avons travaillé sur la refonte de leur plateforme eCommerce en mettant l’accent sur la performance et la gestion des pics de trafic.

https://t.co/cVmxxYBvHR

Kudos @redirectionio @digitalpingpong 👏

[Una 🇺🇦 @Una]

Super simple scroll-driven progressive enhancement: animate in your images 🩷

@​keyframes appear {
from { opacity: 0; scale: 0.8; }
to { opacity: 1; scale: 1; }
}

img {
animation: appear linear both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}

[Nicolas Grekas 💙💛 @nicolasgrekas]

Dîner speakers #Symfony_Live, so happy to share the excitement!

[If This Then Dev @IfThisThenDev]

🎙️Pour Grégoire Pineau (@lyrixx), DevOps @JoliCode, le choix d'une archi micro-service dépend du nombre de dev dans une équipe !

➡️Rdv sur https://t.co/vzB8Oo7OhF
#Podcast #ifttd #Dev #php #Symfony

[AFUP @afup]

Avant son talk intitulé "Les chaînes de caractères 101", c'est au tour de @MarionHerisson de répondre à notre interview du jour, où elle nous dit notamment tout le bien qu'elle pense d'UTF-8 ! Rendez-vous à l'AFUP Day 2024 Poitiers pour en savoir plus !
https://t.co/7Wu8a3elkf

[Gregoire Pineau @lyrixx]

Vous en avez marre de faire ce genre de diff a la main ? Moi aussi ! Découvrez comment automatiser ça avec @rectorphp 😍

https://t.co/FoK05NoCXT

[Ahmad Shadeed @shadeed9]

I'm doing a research on CSS :has() and this is one of the best articles that I read. Learn about some advanced :has() use-cases, by @5t3ph.

https://t.co/tKbZZHqjvD

[Travis Arnold @souporserious]

2024 CSS Reset

[JoliCode @JoliCode]

Si votre site dispose d'un en-tête collant, vos liens d'ancrage doivent le prendre en compte 💯

Aujourd'hui sur le blog, Agnieszka vous présente la bonne pratique actuelle pour décaler le scroll correctement et rendre votre cible lisible !

🆕 https://t.co/e5mNvAUjbG

#css #tip

[Wes Bos @wesbos]

🔥 As of today, CSS :has() is now supported in every browser!

This is a next-level selector that opens up a ton of new possibilities. Here are 10 hot tips for using CSS :has()

Details of each below

[Adam Wathan @adamwathan]

🎁 Day 2... Tailwind CSS v3.4 is out! 🥳

🍬 Dynamic viewport units
🍩 `:has()` support
🧁 Direct children variant
🍰 New `size-*` utilities
🍪 Balancing with `text-wrap`
🍭 Subgrid utilities

...and more ✨
https://t.co/0549vnYPlT

[Katia Moreira @kaymorey]

Je suis mentor depuis 1 an et demi pour @OCFrance et j'en parle aujourd'hui sur #24JoursDeWeb 😊

[Paris Web @ParisWeb]

Dix-neuvième jour des #24JoursDeWeb : Katia (@kaymorey) nous fait un retour sur son expérience en tant que mentor pour OpenClassrooms

https://t.co/8JAZ5xejy3

[Adam Wathan @adamwathan]

Hear me out.

[Marion Hurteau @MarionHerisson]

The slides of my talk about String usage at the #SymfonyCon Brussels 2023 are now available on my GitHub 👉 https://t.co/hTNzxWcnG1

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Tip! ⭐️

You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️

h1 {
background: linear-gradient(white, white), grey;
background-size:
100% calc(var(--lines) * 1lh), 100% 100%;
background-clip: text;
color: transparent;
}

Here you emphasize the first two lines of the heading with white using a sized background-image layer

It has a size of 2lh ✨

Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎

Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙

Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥

Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶

Have a play with it and see what you can come up with!

@CodePen link below! 👇

[Alsacreations @alsacreations]

“An Interactive Guide to CSS Grid” : la documentation ultime et interactive sur Grid Layout vient de sortir et on vous la conseille !
https://t.co/VIMqDrHLil

[JoliCode @JoliCode]

Tous les ans, nous consacrons une journée à des projets DIY/bricolage et création artistique 🎨🎉

Cette année, nous avons fait de la menuiserie, des tatouages, de l'impression 3D, de l'IA et des perles 👌

Découvrez nos divers talents sur le blog ! → https://t.co/zcts865Mio