An Interest In:
Web News this Week
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
Ways to Reduce your Front-End Codes
Here, several approaches will be introduced to reduce your front-end code base, especially, for reducing css codes.
Tailwind
- Link: tailwindcss
tailwindcss
provides fast, flexible, reliable css classes. Using tailwind
you can save time writing your css codes.
For instance, truncate
for:
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
css-checker
- Link: css-checker
Wonder how to find your duplicated css codes? There is a automatic tool that can help you scanning all your css & styled-components codes and show similar classes with diffs.
- To Install:
npm install -g css-checker-kit
- To Run:
css-checker
Using useSWR
Link: useSWR
useSWR
can help you to reduce parsing states between components, just calluseSWR
in anywhere you wish to use the states.useSWR
can also help you to reduce duplicated requests and auto-fetch after users' re-focus.
The name SWR is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.
- To use it, it's quite simple:
import useSWR from 'swr'function Profile() { const { data, error } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (!data) return <div>loading...</div> return <div>hello {data.name}!</div>}
Original Link: https://dev.to/zhcalvin/ways-to-reduce-your-front-end-codes-30hl
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To