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
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
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.
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.
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
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
}