I rearchitected an HTML/CSS app into a React + Tailwind app, and improved its accessibility and performance
I updated my links website!
My old links website used raw HTML and CSS, and now that I'm further into my web development career, I wanted to revamp my app with more advanced technologies that I've been building with. Also, that user interface is givinggggg amateur ? We can make her sexy ??
As a React enthusiast, I knew React was going to be my choice for rebuilding this frontend application. I spun up a quick React app using Vite:
npm create vite@latest
For styling, I wanted a more sophisticated UI so I went with Tailwind, which led to a very fast and efficient styling experience. The documentation made set up simple and quick (source), and made figuring out the syntax for styling fluid and easy. I also went ahead and used Prettier for Tailwind (source) as well, because why not!
// install tailwind and necessary dependencies
npm install -D tailwindcss postcss autoprefixer
// create your tailwind and postcss config files
npx tailwindcss init -p
Once the styling was finished, Tailwind ended up reducing the CSS file by 255 lines of code.?
Creating the components and then styling them was really all that was necessary, so I was ready for deployment! I used gh-pages (source) to help deploy the repository to a GitHub page.
领英推荐
For optimization of the deployed website, I made sure to have my images converted to webp files (source) and compressed them (source).
For accessibility, all of the images were sure to have alt tags.?
I used Lighthouse (source) to give me a performance report, where I originally scored a 94 in accessibility for contrast issues with my footer text (Tailwind red-800 against a #000 background), and a 92 in SEO for the lack of a meta description.
I used Tailwind's documentation to find the hex codes of their text colors (source), and tested the red's against a #000 background by using WebAIM's contrast checker (source). Tailwind red-700 against a black background passed the test!
Lastly, I added a meta tag with a description in the <head> of my HTML file.
My Lighthouse performance report then gave me 100's across the board, except for an 80 in performance due to my only image not being properly sized. But I had taken the steps to optimize and compress the image - that's as much as I'm going to get for now.?
If you want to check out how I went from pure HTML/CSS to organized components, take a look at the very simple, but organized, source code:
?? Source Code
Software Engineer || React ? Node.js ? Express ? MongoDB ? TypeScript ? Strapi.js ? Next.js ? Gatsby.js
1 年So Clean! Awesome work, absolutely love it!
Hello Alexis... We post 100's of job opportunities for developers daily here. Candidates can talk to HRs directly. Feel free to share it with your network. Visit this link - https://jobs.hulkhire.com And start applying.. Will be happy to address your concerns, if any
Hello Alexis... We post 100's of job opportunities for developers daily here. Candidates can talk to HRs directly. Feel free to share it with your network. Visit this link - https://jobs.hulkhire.com And start applying.. Will be happy to address your concerns, if any