net - UK (2020-02)

Moveable enables you to make any

element on the page draggable,

resizable, scalable, rotatable or

warpable

One of the tools featured

this year is instant.page

(https://instant.page/), a way

to preload links before a

user clicks them, something

that’s been trending. Here

the creator, Alexandre

Dieulot (@dieulot), tells us

about the tool’s history as

well as its future.

Why did you decide to build

instant.page?

Eight years ago I had ample

free time to play around

and I stumbled on the fact

that a click was preceded

by hovering over a link

and that this delay could

be used to preload the

page. That’s a great idea,

I thought. That’s why in

2014 I made InstantClick

(http://instantclick.io/) –

just-in-time preloading

with Ajax and pushState,

making a site into a single

page application. instant.

page is a ‘lite’ version of

InstantClick that uses

<link rel=”prefetch”>.

There are similar solutions

available, for example

quicklink (https://github.com/

GoogleChromeLabs/quicklink)

and Turbolinks (https://

github.com/turbolinks/

turbolinks). What sets

instant.page apart?

instant.page offers the best

ratio of performance vs

additional requests and it

only takes the user a minute

to implement.

What’s the future of instant.

page? Do you think it will

one day be obsolete? Should

browsers allow users to opt

in to this sort of thing?

I think it will still be relevant

for years. It would be nice

if it was an option in web

browsers. But even then

using instant.page on your

site would be beneficial for

most users that don’t have

it enabled. You can enable

instant.page for all sites

in Chrome today with my

FasterChrome extension

(https://netm.ag/2sphe1N).

instant.page

Moveable

https://daybrush.com/

moveable/

7

Make any element on the

page draggable,

resizable, scalable,

rotatable or even warpable (like the

perspective tool in a graphics

editor). You can also enable grouping

and snap-to-guides functionality.

Hotkey

https://github.com/github/

hotkey

8

Trigger an action on a

specified element by

means of a shortcut key,

combination of keys or sequence of

keys pressed by the user. The

documentation has suggestions to

ensure good accessibility.

Freezeframe.js

https://github.com/ctrl-freaks/

freezeframe.js/

9

Add play/pause

functionality to animated

GIFs on a page. Trigger

play/pause via hover, click, touch

Project Wallace

https://projectwallace.com

12

This is a CSS analysis

tool with a dashboard

that lets you track the

complexity of your code, including

the number of lines of code,

amount of selectors, quantity of

declarations, specificity, use of

!important, performance

bottlenecks and more.

DebuCSSer

https://github.com/lucagez/

Debucsser

13

An unobtrusive CSS

debugging tool that

works as an option for

manually adding an outline to one

or more elements. Include the

script, then hold the CTRL key to

outline an element or CTRL-SHIFT

to outline all.

Animated CSS

Burgers

https://march08.github.io/

animated-burgers/

14

A small library of

animated mobile

hamburger menus that

event or by an external element that

serves as a play/pause button.

pagemap

https://larsjung.de/pagemap/

10

Add a scrollable ‘mini

map’ to long web pages,

similar to what you find

in the Sublime Text code editor. It’s

arguable whether this is more

usable than a scrollbar but you could

implement this with the scrollbar

disabled for a native feel.

lax.js

https://github.com/alexfoxy/

laxxx

11

Vanilla JavaScript plugin

to add responsive and

mobile-friendly

animations, transitions and parallax

effects to pages while the user

scrolls. Get started with the presets

or create custom effects.

CSS &

HTML

TOOLS

Project Wallace is a CSS analysis tool

to track your code’s complexity.

You can use it to keep tabs on a

variety of concerns, such as

bottlenecks

FEATURES
50 incredible dev tools 2020