Hotpot Frontend knowledge in a box

David Lorenz | info@activenode.de | https://github.com/activenode | @activenodeio

web enthusiast | full-stack developer

#fronted #webdevbbq #hotshit

or: what you might want to be aware of

ShapeDetection API

#fronted #webdevbbq #hotshit

Docs/External Links:

https://github.com/WICG/shape-detection-api

Safari Chrome Firefox Edge
- yes semi-yes -

https://codepen.io/activenode/pen/ZymoaP

space-evenly flexbox

#fronted #webdevbbq #hotshit

Safari Chrome Firefox Edge
- - yes -

https://css-tricks.com/almanac/properties/j/justify-content/

Docs/External Links:

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

pointer-events: none

#fronted #webdevbbq #hotshit

Safari Chrome Firefox Edge
yes yes yes yes

don't forget to add aria-hidden="true"

don't forget to add aria-hidden="true"

Docs/External Links:

https://davidwalsh.name/demo/pointer-events.php

Passive JS events

#fronted #webdevbbq #hotshit

Safari Chrome Firefox Edge
yes yes yes v16 yes

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

Docs/External Links:

http://caniuse.com/#search=passive

JS Decorators still at TC39 stage 2...

#fronted #webdevbbq #hotshit

Docs/External Links:

https://tc39.github.io/proposal-decorators/

https://github.com/tc39/proposal-decorators

Observe without MutationObserver

#fronted #webdevbbq #hotshit

Safari Chrome Firefox Edge (actually IE8+)
yes yes yes yes

WUT MATE, GO SEE LINK: https://codepen.io/activenode/pen/ZyVNwQ​

Things to know about setTimeout

#fronted #webdevbbq #hotshit

setTimeout(fn, 0) === setTimeout(fn, 4)
setTimeout(fn, 500) == setTimeout(fn, >= 500)

(this is not valid code of course)

Capture screenshots in Chrome NOW

#fronted #webdevbbq #hotshit

Activate responsive mode, click on

...

CSS Grid has arrived. Use it NOW!

#fronted #webdevbbq #hotshit

PhantomJS is dead.

#fronted #webdevbbq #hotshit

https://github.com/biocore/emperor/issues/580

Docs/External Links:

https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md

<dialog> is not just a semantic element

#fronted #webdevbbq #hotshit

https://codepen.io/activenode/pen/jwXjGq

Takes care of ARIA!

Docs/External Links:

https://www.w3.org/TR/2013/CR-html5-20130806/interactive-elements.html#the-dialog-element

:target pseudo class is a nice thing (CSS3)

#fronted #webdevbbq #hotshit

https://developer.mozilla.org/de/docs/Web/CSS/%3Atarget

Safari Chrome Firefox Edge 
yes yes yes yes

PaymentRequest API

#fronted #webdevbbq #hotshit

https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/

Hotpt Frontend Knowledge

By activenode

Made with Slides.com

Hotpt Frontend Knowledge

Stuff you might want to know as of 2017

  • 864

More from activenode