Notes from Frontend NE 2019 conference

frontendne2019.md

Going Offline (Jeremy Keith)

• Good libraries aim to make themselves redundant: consider jQuery > querySelector.
• Users don't expect sites to work offline.

Using a Modern Web to Recreate 1980s Screens... (Remy Sharp)

• Typed arrays are much quicker. Fixed length and known types mean they can be in contiguous memory.
• "Crapify"

Instant VR, Just Add A Browser (Ruben van der Leun)

• http://trlvr.nl/webvr
• WebVR API - position and rotation.
• 3 degrees of freedom, 6 allows movement.
• requestPresent(), requestAnimationFrame(), getFrameData() to get pos & rot, then submitFrame().
• Will be replaced by WebXR = VR + AR augmented.
• A-frame library - build scene with html, data binding, planets demo, 6 deg of freedom, can move around.
• Others: react360 (3 degrees of freedom only), amazon sumerian, playcanvas.
• A-frame school, webvr rocks, webvr directory.

Grids All The Way Down (Rachel Andrew)

• Don't think Flexbox OR Grid.
• Flexbox = make a bunch of different size stuff display nicely.
• Grid = control the structure and put things into it.
• If you put width or & on Flexbox items, you probably should be using Grid.
• noti.st/rachelandrew
• minmax(100px, auto)
• Grid cells don't know about each other.
• display: foo, affects children but not their children.
• display: contents, for removing box from layout but leaving children. Now the children participate in the parent layout.
• Subgrid is a grid on a grid item, using the parent's tracks.
• Firefox grid inspector is really good.
• Participate in the web platform, or you leave your future to others.

Even More CSS Secrets (Lea Verou)

1. Blend modes for opaque text
   • data uris don't have to be base64 encoded, but you need to escape \n and #
   • data:image/svg+xml
2. Repeating character background
   • HTML meter element
3. Fancy borders
   • SVG without a viewbBox will spread to cover element
4. Line headings
   • Flex affects pseudo-elements (before & after), and text nodes
   • currentColor
5. Accessible CSS menus
   • focus-within pseudo-class
   • coming: target-within
6. Variable fonts
   • Useful to equalise stroke widths across different font sizes
7. Responsive flex
   • flex-wrap
   • siblings with flex 1 + flex 999
   • use min-width to avoid silly state
   • like container queries, almost
   • no media queries
   • this is the flex grow 999 hack https://joren.co/flex-grow-9999-hack/
8. Auto-flowing grid
   • grid-auto-flow: column (default is row)
   • images are replaced elements, this is why they get their intrinsic width by default, necissating giving them width, height of 100%. Use object-fit:cover to avoid streching
9. Pie charts
   • hack using conic gradient
   • CSS registerProperty allows keyframes animating an arbitrary property
10. Descendant grid elements
    • Form with aligned inputs
    • use display: contents on the labels, makes them participate in the layout