JS CAMP Barceona 2019

18-19 July 2019

FOUC and the Death of Progressive Enhancement

Kyle Simpson
github
blog

Turn our attention to the user. Mirror mirror on the wall, developers see developers not users. Users don't adjust the width of the page to make it responsive so as developers neither should we. On mobile users see missing things. Users should get first priority. Don't make things better for developers thinking it will then make things better for users. Make the user a part of the experience. We need to design focused primarily on the user. Font sizes gives users the choice of what size. New York Times is a great example. Don't ask permission just build things a better way.

Shape of the Web

Henri Helvetic

What happens next: a choose-your-own-adventure with iterators

Jenn Creighton
slides
blog

Iterators, iterables, destructoring, spread operator, generators
https://bit.ly/2JTMwb0

Accessible JavaScript patterns

Garance Flore Vallat
github
website

Accessability with keyboard focus and dropdowns and modals.
Pally integrate into the command line.

CSS in JS - The good, the bad and the ugly

Maya Shavin
website
github

CSS modules, CSS in JS. Should we or shouldn't we. There is always a time and a place just not every time and all the places.

Pwototyping

Adam Argyle
website
github

PWA, manifest, name, styles, icons. PWA extras - display, orientation. Verify on chrome dev tools. Meta name viewport content initial scale.Remove 300ms delay. App theme, app brand, add preload, defer/async. System fonts, remove tap highlight. Body on load. Sticky class. Snap points, scroll snap type. Image set sizes inline. image src set for retina, @2x @1x. Loading = lazy. starturl: "/index.html".

Rethinking Reactivity

Rich Harris
github

Omit needless words. Write less. Build better more robust software. Why I don't use web components article.
Svelte

How to effectively use the dev tools in all the browsers

Paul Verbeek-Mast
website
slides

oldweb.today
Firefox for debugging css. Changes step, copy all changes. Flexbox inspector.

Chrome console:
$0 to see which elemet you are on
$(div)
$$(div) to get all elements
inspect($(.myClass)) will select it in elemet selector
Monitor(sum) - sum is a funciton we would like to monitor. It gives us a message when the function is being called also for events.
MonitorEvents($, 'click')
$
the last thing you used

Chrome network:
Capture screeenshot, clear cache and play to see what is loaded when.

Safari: canvas tab

JAMStack - The total Victory of JavaScript

Shawn Wang
website
blog
github

Chris Coyer article on JamStack
JamStack being served directly from a CDN. From Lamp to Mean to JamStack. Client side v Server side. Static site genaration.

Inside V8: weak collections, emphemerons, and private fields

Sigurd Schneider
github

Garbage Collection and how it works.
Maps
WeakMap()
Map keeps key and value alive
WeakMap keeps value alive
An entry dies if weakMap dies or a key dies.

Error handling: doing it right

Ruben Bridgewater
github

Handling errors, promise all. Error classes. Util.promisfy. Async await easier for debugging.

Webpack Performance

Sean Larkin
github

Service workers, workbox. Offline plugin. Webhint - like lighthouse. Apps/size-auditor

Fast by default: algorithmic performace optimization in practice

Vladimir Agafonkin
github
website

Simplify code