article: add "Prevent layout shifts with CSS grid stacks"

[hsablonniere]

Preview here

• Final review
• hititipi byte range
• share on twitter
• share on linkedin
• share on reddit /css /webdev
• share on some slack
• share on some discord
• cross post on medium
• cross post on dev.to

[judu]

<3

(Ooops, I hit the "approve" button when I should not have yet 😶 )

[urcadox]

That's a great article and there are not too many important changes to be made (you can tell because of how @judu and I both took the time to bother with small details but I know that's what you want and expect 😆)

[rik]

Very important

Sweet sweet technique! Hadn't thought of using grid this way and I'll definitely keep it in mind.

Important

• I can't remember seeing "superpose" (and variations) used in English. I'd switch to use "stack" and "stacking" to name this technique because that's the vocabulary used in CSS.
• Is visibility: hidden enough to hide from assistive technologies?

Nitpicks

• There are a few occurences of "simple", "not that hard" or difficulty level. I don't have a reference at hand but it's recommended to avoid that language. What is "simple" for someone might not be for someone else and it's usually extra words with no importance.
• The CSS seems to not be syntax highlighted.

I've suggested a few English changes but overall, I've refrained myself from trying to change the tone/style of the article.

[rdmueller]

the CSS article is quite a good and interesting read.

I only found the additional '&' in the text. No additional comments on changes.

English is not my first language, and I have to say that your writing style is easy to read. That's great!

I also like the ratio between text, code and images.

Keep the style of your blog posts this way...

[hsablonniere]

Dear @urcadox @judu @rik @rdmueller

OK, I just read the whole thing an took annotations on my document.
Your feedbacks are just awesome, you took some of your time for me and for this, you have my gratitude, probably a free drink if we see each other IRL and a mention at the end.

As Keanu says it, YOUR ARE BREATHTAKING!!! [insert keanu.gif (but not animated for @rik) here] 😉

[hsablonniere]

@rik

Sweet sweet technique! Hadn't thought of using grid this way and I'll definitely keep it in mind.

❤️

I can't remember seeing "superpose" (and variations) used in English. I'd switch to use "stack" and "stacking" to name this technique because that's the vocabulary used in CSS.

That's great feedback, I'll change that.

Is visibility: hidden enough to hide from assistive technologies?

TBH, I haven't looked into this much. I just spent some time reading and asking and seems like v:h will be hidden for screen readers but maybe a aria-hidden="true" could also help. I should test.

There are a few occurences of "simple", "not that hard" or difficulty level. I don't have a reference at hand but it's recommended to avoid that language. What is "simple" for someone might not be for someone else and it's usually extra words with no importance.

Yes, you're right. I read the same recommandations. I try to follow those when I write documentation. If I understood correctly the reasons, you really don't want to explain X by saying "just do X" or "simply do X". When I used those words in the article I asked myself "is it a problem?". I thought it was ok because I tried to tell my own experience and for me it was simple. In the end, the confusion is here, people can't know for sure what I meant so I'll rephrase those. Thanks a lot 👍

The CSS seems to not be syntax highlighted.

Yeah, I'm not sure if it's just prismjs or the GitHub them I chose.

I've suggested a few English changes but overall, I've refrained myself from trying to change the tone/style of the article.

👍

[hsablonniere]

@rdmueller

the CSS article is quite a good and interesting read.

Thanks

I only found the additional '&' in the text. No additional comments on changes.

👍

English is not my first language, and I have to say that your writing style is easy to read. That's great!
I also like the ratio between text, code and images.
Keep the style of your blog posts this way...

That's great to hear, thx 🤗

[rik]

I'm happy to use GIFs when the platform does not support videos 😉

Feel free to ping again if you want another round of feedbacks (does the preview auto-update?).

[hsablonniere]

@rik Nice ;-)

Yesterday I gathered the feedbacks (I'll work on them soon) and I started the other article, the "I have a blog now". I may ping you again, thanks for everything.

[jlengrand]

I like the styling / theme of the blog. Stuff is visible and it looks fresh. Good job

[jlengrand]

Not sure how it's gonna look after publication, but

[jlengrand]

• So, I'm a backender. You might want to define (or maybe link to a definition of) layout shift and grid superposition (even if you come back to it in the article. Or at least mention you ll define those :)).

• You're French like me : You use many commas. The rest of the world tends to do a whole lot less of that :). Usually, commas can be divided into shorter sentences.

• No referral link for Clever Cloud ? 😎

• You might want to add captions for your images? (cool that you have nice alt text already)

• Try to reduce the amount of tense you have in your article (there s past, present and future as well as conditional in there altogether).

I learnt stuff, and you did a great job at explaining issues you had I wouldn't even have thought about (super cool use of the gif). That's a cool read, and you're showing a really nice trick

I have some comments, most are extremely minor. It's a good article :). Nice start of the blog, following!

[hsablonniere]

I like the styling / theme of the blog. Stuff is visible and it looks fresh. Good job

The "styling/theme" is from 2017, I want to change it but it will still be simple and I'll work on this after the first articles...

Not sure how it's gonna look after publication, but

Thanks, force HTTPS is enabled on production.

So, I'm a backender. You might want to define (or maybe link to a definition of) layout shift and grid superposition (even if you come back to it in the article. Or at least mention you ll define those :)).

Yep, others mention that, I plan to describe this at the beginning.

You're French like me : You use many commas. The rest of the world tends to do a whole lot less of that :). Usually, commas can be divided into shorter sentences.

Interesting...

No referral link for Clever Cloud ? sunglasses

😆

You might want to add captions for your images? (cool that you have nice alt text already)

Ah yes, I haven't thought about that.

Try to reduce the amount of tense you have in your article (there s past, present and future as well as conditional in there altogether).

👍 I need to check that again, you're right.

I learnt stuff, and you did a great job at explaining issues you had I wouldn't even have thought about (super cool use of the gif). That's a cool read, and you're showing a really nice trick

I have some comments, most are extremely minor. It's a good article :). Nice start of the blog, following!

Thanks a lot for your time and feedbacks 👍

[mere-teresa]

* superpose

overlay?

[hsablonniere]

@mere-teresa Seems like @rik is right as "stack/stacking" seem to be the official CSS term for this 😉

Thanks for having a look ❤️

[mere-teresa]

@mere-teresa Seems like @rik is right as "stack/stacking" seem to be the official CSS term for this 😉

Thanks for having a look ❤️

You're welcome. And yep, I did a long review. I hope it helps, even many others reviewers were there before me.

[hsablonniere]

@mere-teresa It helps a lot 😍 thank you so much. Now I need to compile all those and take some time to rework this...