DEV Community: Jiawei Li

Ways to Reduce your Front-End Codes

Jiawei Li — Sat, 02 Apr 2022 11:44:18 +0000

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;

To optimize css codes in production

Refer to cssnano and Brotli as mentioned in tailwind docs

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 call useSWR 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>
}

Reduce Duplicated Styled Components? Check Here

Jiawei Li — Thu, 24 Mar 2022 05:50:06 +0000

I made a post 2 weeks ago about how to reduce CSS automatically: Scan Duplicated & Similar CSS and the github source: css-checker

Few days ago, there was an issue asking for styled components support. It's very hard to found few sources about processing styled components using golang, so I have to use regex to detect them and use original css-checker functions to detect diffs in styled-components.

Fortunately, it goes well to use css-checker for styled-components checking and you can use this now for styled-components check. It can check similar lines and prints those blocks with diff lines highlighted.

Install

You can access to the package via go install:

go install github.com/ruilisi/css-checker@latest

(With go version before 1.17, use go get github.com/ruilisi/css-checker). Or download from releases

Or from npm:

npm install -g css-checker-kit

Start Checking

cd to your Project Path. Then just run:

css-checker -styled

If only need to check styled-components:

css-checker -css=false -styled

For other usages, please refer to github: CSS-Checker

Demo

Scan Duplicated & Similar CSS

Jiawei Li — Fri, 11 Mar 2022 07:01:11 +0000

To auto detect redundant and unused CSS classes, I made this library recently: css-checker.

It helps to scan your codebase automatically by one command: 'css-checker'. I think it's always better to rely on automatic code checking tools than read all codes manually to find improvements.

The css-check can scan your CSS code along with your js/jsx/html/ts/tsx code to find unused CSS code (optional).

Install

You can access to the package via go install:

go install github.com/ruilisi/css-checker@latest

(With go version before 1.17, use go get github.com/ruilisi/css-checker). Or download from releases

Or from npm:

npm install -g css-checker-kit

Start Checking

cd to your Project Path. Then just run:

css-checker

The css-checker helps in checking my projects in seconds, and provides hundreds of similar and redundant classes for me to improve.

You can check out the package from the Github link for more details: css-checker