You don't need JavaScript

 

Estella González Madison

@chicagoing

You don't need [client-side] JavaScript

 

Estella González Madison

@chicagoing

"If it can be done in another language, it should be done in another language."

Chris Coyier on JavaScript

You Know You Should Use JavaScript When… by Chris Coyier, 9/21/09, css-tricks.com

We have a tendency to overuse JavaScript

JS should be treated as progressive enhancement as much as possible.

Making It Better Without Making It Over by Rebecca Murhy, DinosaurJS 2016

The cost of JS

Simplify your JS by moving interaction and behavior logic into CSS

Let your JS focus on business logic when possible.

Your site works for the ~1% of users who might have JS turned off

… just a plus

How many people are missing out on JavaScript enhancement? by Peter Herlihy, 10/21/13, gov.uk

Chrome's NOSCRIPT intervention

Chrome's NOSCRIPT Intervention by Tim Kadlec, 9/6/18, timkadlec.com

Chrome for Android may start disabling JS on 2G connections if it detects a slow network connection

CSS Techniques

Animations

Between all the animation options with CSS and SVG, we have no reason to rely on JS

 

• animation property
• animation-play-state property
• @keyframe at-rule
• transform property
• transition property
• transition-delay property

:target

A CSS pseudo-class that represents a unique element (the target element) with an id matching the URL's fragment.
• modals
• slideshows
• tabs
• carousels

Modal example

Adjacent sibling selector

Matches the second element only if it immediately follows the first element.

 

p + img { … }

iOS 6 switch style checkboxes with pure CSS by Lea Verou, 3/15/13, lea.verou.me

iOS switch style checkboxes
Custom checkboxes

animation-play-state

A CSS property that specifies whether an animation is running or paused. Combined with pseudo selectors like :hover, :focus, :valid, :invalid, etc you can get really creative interactions.

Example

Smooth state animations with animation-play-state by Lea Verou, 1/9/14, lea.verou.me

position: sticky

We used to rely heavily on JS using window.onscroll and determine the position of elements relative to the window.

Example

position: sticky; by Chris Coyier, 11/9/16, css-tricks.com

Scroll Snap

Create smooth scroll experiences by specifying snap positions that tell the browser where to stop after each scrolling operation.

• image carousels
• paginated sections

Carousel from Google

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}
#gallery img {
   scroll-snap-align: center;
}

Other Alternatives

Lots of opportunities to port over client-side code into WebAssembly

• peer-to-peer applications (video conferencing, collaborative editing, games)
• WYSIWYG editors
• Music and video applications
• And much more!

Server Side Rendering

• Better initial page load

• Users with JS disabled can still see your application

HTML

¯\_(ツ)_/¯

That's it!

Questions?

estellagmadison@gmail.com