🙋♂️ Hello, Everyone,
Here is my solution for the Time Tracking Dashboard.
- Scored
94%
on Google Pagespeed Insights! 🤩
- Built with
ReactJS
| Designed with TailwindCSS
🛠️ | Mobile-First approach 📱
- Utilized
prettier-plugin-tailwindcss
to auto-sort TailwindCSS
classes 🎨
- Implemented JavaScript's inbuilt
fetch API
to make calls to internal JSON data ⚙️
- Utilized
BEM
principles to create a consistent structure of TailwindCSS
classes
- Minified the
CSS
files to improve site performance 🚀
Learned one important thing when injecting SVG's
through inline-CSS
dynamically:
- Sometimes your SVG will be inlined by
React
so you need quotes around it:
backgroundImage: `url("${Background}")`
- otherwise, it's invalid CSS and the browser dev tools will not show that you've set background-image at all.
Reference: Mattia Righetti's answer on StackOverflow
Do you know a better way to deal with using SVG's
as a background image❔
I'll be happy to hear them. 🤓
Code Together | Learn Together | Grow Together