Tom: JSCamp

Day 1

FOUC and the Death of Progressive Enhancement / Kyle Simpson

  • Courses online on Frontend Master (Check it out)

  • PT: Add something which means to be accidently but its plan (stop flicker, start dark mode)

  • Seperation of concerns was a big thing (split: CSS, JS), nowadays we almost go back to it

  • Again Webpagetest.org , Video mode

  • Responsive Design "The user never drags the browser-window down to expierence the responsivness". Its a developer thing

  • Is there a non-javascript verison available for my app.

  • Kyle: "Can we fight for the user?"

  • "Read the HTML/Javascript specification, its the foundation of our industry"

  • Product + UI + UX => Imprintable Design (#ImprintableDesign)

Twitter: @saschazar

Conclusion:

  • Can we do such a test with uPortal?

  • Whats the first paint in uPortal?

  • Can we use Skeleton text, boxes instead of spinner ?

  • Dont ask for permission, do it ==> Put more in to SEA and tell then the managers

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

Conclusion:

  • Objects are not interables

  • What is destructuring?

  • Are we using spread-operator somewhere? What are spread operators exactly

Inside V8: weak collections, ephemerons, and private fields / Sigurd Schneider

Garbage Collection has to distinguish live and dead objects

Map:

WeakMap vs. Private Fields

CSS in JS - The good, The bad and The ugly / Maya Shavin

Pwototyping / Adam Argyle

  • Manifest.json (Titel, Background Color, Icons, PWA Extras, Entry Path ...)

  • Verify your manifest -> In Chrome Dev Tools -> Application -> App Manifest

  • Add Meta to header (Viewport-Tag)

  • !! Tap: 300ms delay, with Meta we can remove that !!

  • Add iOS Web App Support (two links) or status bar style

  • Tipp for Splashscreens and Icons, you buildscripts

Prerender

  • Be ahead of time (or the browser)

  • Limit requests

  • Spinerless

Bundle

Prioritize

  • Critical vs. non-critical

Chunk (before it gets to big)

Defer vs. async Defer = Order can be held. The JS will be loaded and than excuted in the specified order Async = File will be loaded and then executed directly, no order

Twitter: @saschazar

JAMStack - The Total Victory of JavaScript / Shawn Wang

  • From LAMP to MEAN, Problems and so on

Conclusion:

Day 2

Accessible JavaScript patterns / Garance Flore Vallat

  • Navigation with tabs works, but its takes a long time to go through the whole menu

  • Todo: Code from examples, accessbility

  • Its all about focus

Error handling: doing it right! / Ruben Bridgewater

  • Promise have basically three states (Resolved, Rejected, Doing something)

  • Common issue is to send a wrong error-code to the Frontend, since we're not handling the right error status code

  • nest try try catch is a very bad idea, you should not do this

  • Good Practise is to create every new application with an own error class, extend this class with UserErrors and XXXErrror, than handle those erros (see slides)

  • Use promisify in NodeJS instead to create a new own Promise

  • Refactor your code to use async/await as much as possible, its makes debugging so much easier and you'll love it

==> TODO: Good slide about how handle the errors right

How we make Web Apps lightning fast at Microsoft! / Sean Larkin

  • Microsoft: Every Team has a OKR, a measurement to performance

  • on Avarage a app takes 17-20 seconds to interactivity, if you're reduce this to 5 -> this is a huge improovment for your app

  • EDGE on macOS -> DevTools -> Shift + P -> Coverage -> Unused Code ==> Code Splitting

  • One of the main feature of Webpack is Code Splitting,

  • Measuring Performance more: Not only Micrsoft/LUKB network, also try 3G or something else

  • Webhint => like Lighthouse, but able to have more hints. Not one fits all

Conslusion

Set goals for your team (Initial Javascript, Initial CSS, and so own). What are our ZIE Goals? Discuss them, set them, measure them and check back a half a year later

  • Check: Webpack mixer => Check bundle sizes between builds, maybe one module or so caused a bigger bundle

How to effectively use the dev tools in all the browsers / Paul Verbeek-Mast

Fast by default: algorithmic performance optimization in practice / Vladimir Agafonkin

The Return of 'Write Less, Do More' / Rich Harris

Shape Of The Web / Henri Helvetica

Intro

Slides

Videos Notes Markus / Tom Summary / Possible Tasks

PreviousMarkus: CSSCampNextMarkus: JSCamp

Last updated

Was this helpful?