Thread by @ljc_dev

⚠ the following tweet is not for easily offended people 😁.

MUHAHAHA!! Bow down peasants! My website got a perfect lighthouse score on my 1st try 🥳🥳.
Didn't know they'd threw confetti 😂.

Tips & tools used🧵:

(1/8)
#CodeNewbies #100DaysOfCode

A fullscreen vid looks cool but could ↘️performance.

Screenshot the start of the vid & use it as an img placeholder.
Set the vid opacity to 0 and put it above the img.
When it has loaded, bring its opacity back.

I've used ezgif.com for vid cut, resize etc.

(2/8)

❌@ font-face {
font-family: Roboto;
font-weight: 400;
src: url("myFont.ttf") format("truetype");
}

✅@ font-face {
font-family: Roboto;
font-weight: 400;
src: local("Arial"), url("myFont.ttf") format("truetype");
font-display: swap;
}

(3/8)

While the font is loading, the text is invisible. And then the text flashes in (FOIT).
To prevent that, use 'local("Arial")' - or a common font like Helvetica - to load a font that the user must have on their PC.
'font-display: swap' swaps your font in after it has loaded.

(4/8)

My top google fonts 👉 Roboto, Open Sans, Merriweather, Raleway, Playfair Display, Montserrat.

Imgs & vids are often too bright to have text above. Use filter to darken them:
"filter: brightness(75%) contrast(115%)"

PNG and JPEG compression 👉tinypng.com
(5/8)

Add aria-hidden="true" to icons, and a description text for screen readers.
Bootstrap & Tailwind have a "sr-only" class.
Or add your own sr-only 👉:
a11y-guidelines.orange.com/en/web/compone…

Check color accessibility 👉:
accessible-colors.com
(6/8)

Meta generator websites I use in all my projects:
Twitter & other social cards 👉 heymeta.com
Favicons 👉 realfavicongenerator.net

(7/8)

This project was build using ReactJS (nextjs) & TailwindCSS and deployed to Vercel 👉:
congenial-system.vercel.app
Code 👉:
github.com/ljc-dev/congen…

End of Thread. Happy coding 😁!! Sorry if I've offended anyone, I promise I'll reflect on myself when I find some free time 👌.

(8/8)