net - UK (2020-02)

Scene.js is

a JavaScript animation

library with keyframing

features to take care of timing,

transitions and effects

Materialize is a nifty framework based

on Material Design and offers users

a merry medley of CSS and

JavaScript components

FRAMEWORKS

React Simple Img

https://react-simple-img.now.

sh/

36

A lazy-loading image

solution for React

projects that uses the

IntersectionObserver API and the

new Priority Hints standard for an

elegant image-loading solution.

React Animation

https://nearform.github.io/

react-animation/

37

An easy-to-use

animation library for

React that lets you easily

add unique pre-built animated

effects to page elements based on

content changes and loading or

enables you to build your own.

React Redux

Loading Bar

https://mironov.github.io/react-

redux-loading-bar/

38

A progressive animated

loading indicator bar for

React projects, with the

ability to add multiple loading bars

on a single page that indicate

REACT

TOOLS

Unused CSS

Today, developers are doing

everything possible to shave

bytes off their production

builds. One way this is

done is by means of tools

that clean unused CSS, like

DropCSS (https://github.com/

leeoniya/dropcss), featured

in the main list of this

article. DropCSS is one of

the newest of such tools.

One of the problems

with these tools is that

they are almost never

perfect and require caution

before using – especially on

dynamic websites and apps.

Chris Coyier wrote about

this on CSS-Tricks (https://

css-tricks.com/heres-the-thing-

about-unused-css-tools/).

For example, a tool like this

might incorrectly remove

the styles for a dynamically

generated modal window

that only appears when the

user clicks something.

One way to resolve this

problem is by using a CSS-

in-JS solution or any tool

that incorporates styling at

the component level. This

way ensures there is no

possibility of any unused

CSS since all styles are part

of a component.

Another key point

to mention here is that

unused CSS should be

near the bottom of your

performance to-do list.

Image optimisation, too

many HTTP requests, lack of

caching and so forth should

all be handled long before

you consider automating

removal of unused CSS. And

let’s not forget that unused

CSS is only a problem

on first load when the

resources aren’t cached.

Nonetheless, I consider

this a decent micro-

optimisation that can help

the performance of your

site, even if only a small

amount. With performance,

every little bit counts but

make sure you complete the

big wins first!

Materialize

https://materializecss.com/

33

A responsive front-end

framework with a slew

of CSS and JavaScript

components. Includes components

for form features, layouts,

mobile-specific and more – all

based on Google’s Material Design.

Scene.js

https://scene.js.org

34

A JavaScript- and

CSS-based animation

library boasting an

extensive API for controlling things

like animation timing, transitions

and effects. Want some more?

Scene.js also includes keyframe

and SVG-based features.

Quasar

https://quasar.dev/

35

A Vue-based UI library

with components to help

build single-page

applications, progressive web apps,

hybrid mobile apps and desktop

apps with no unnecessary bloat.

50 incredible dev tools 2020