Apr 16, 2020

MagnoliaJS 2020 conference notes

MagnoliaJS was thrown a COVID-19-sized curve ball for it’s second annual conference. But that didn’t stop the organizer’s from hosting Mississippi’s only technical conference: they cut the price and pivoted online with Zoom.

Niche graciously “sent” me to this two-day remote conference and here are some of my notes:

Day 1

Keynote: I’m Techie and I Know It

Speaker: Nashlie Sephus | @phenomenashlie

• Find the area that you are most passionate about, and look for problems in that space
• With that problem in mind, look for ways to use technology to solve it
• There are ethnic disparities in data samples that negatively impact the products we create
• We need to make a concerted effort to gather representative data
• Good data in; good data out. Garbage in; garbage out.
• Everybody has a responsibility to give back to the community that helped create them

ES8, ES9, ES10+… Let’s explore JavaScript’s exciting new features

Speaker: Tyler Clark | @iamtylerclark

Slides

• In 2015 after a long quiet period, the largest release of JavaScript dropped
  • This was ES6, and it was too much
• Since then, there have been smaller, yearly releases
• ES2016
  • Array.includes() replaced ['foo'].indexOf('foo') > -1
    • Array.includes() has an optional second argument for starting point
  • ** operator replaced Math.pow()
  • Tagged template literals allow you to pass strings and values to functions
    • This pattern is used by libraries like styled-components
• ES2017
  • Promise.finally() allows you to write one cleanup step for promises
• ES2019
  • Array.flat() combines nested arrays into a single array
    • To flatten recursively, you can pass an Infitity argument
  • Object.fromEntries() convert an array into an object
• ES2020
  • Dynamic imports: Global import() that returns a promise that resolves with the module
  • Nullish coalescing: ?? checks for null or undefined

    0 || 'fallback' // 'fallback'
    0 ?? 'fallback' // 0
    

  • Optional chaining: ?. will returned undefined if any layer of an object doesn’t exist
    • Works with dynamic properties: props?.data?.[props.name]
  • Promise.allSettled: Like Promise.all() but fulfills even on rejection
• Future
  • Promise.any(): First promise that is a success or when all are rejected
  • Private class methods and fields: #
  • Top-level await: await does not need to be in wrapped in an async
  • Renamed exports: export foo as bar from './file'
  • Logical assignments: Assign variable based on logical conditions
    • Examples ||=, &&=, ??=

Static generated sites === great performance. What are you waiting for?

Speaker: Debbie O’Brien | @debs_obrien

Slides

• Static is the new dynamic (which was the new static)
• You can mix and match static sites and single-paged applications
  • It’s not “all or nothing”
• Next/Nuxt are great options for walking the line
• Performance tips:
  • Audit your site for performance regularly
  • Uses a service to optimize your images
    • Quality and format
  • Reduce your CSS bundle with smart classes
  • Send modern JavaScript to modern browsers
  • Split your code
  • Lazy-load as much as possible
  • Audit your webpack build with the -a flag
• Jamstack is worth it

Design Systems & CSS Variables: 2 Design 2 Systems

Speaker: Scott Tolinski | @stolinski

Slides

• CSS variables are also known as CSS custom properties
  • Not supported in IE
• Declare a variable in a scope, and then reference it with the var() function
  • First thought it was a liability
  • After further reflection: scoping is a great feature
• Reassign variables based on any selector: classes, media queries, etc.
• Design systems comprise: Color, Type, Spacing, Character, Elevation
• Pay attention to vertical spacing and font size
• Margins are tricky: stick with margin-bottom
• Styled Components allow you to scope CSS when you want it and embrace the cascade when you don’t
  • You can reference CSS variables insided styled components
• Elements should be: simple, obvious, hard to break, and extensible
  • Make components that can’t be goofed up
• You don’t need a grid system: use CSS grid or flex box
• Frameworks need to be taught
  • Write only what you need, and use variables as the backbone
    • Colors, typography, and spacing

Vintage Bundles: Modern JavaScript for Modern Browsers

Speaker: Sia Karamalegos | @TheGreenGreek

Slides

• Transpiling to older versions of JavaScript increases the side of our code
• <script type="module"> is an indicator whether the browser supports ES2015+
• You can save 24-70% in JS bundle sizes
• Reduce load AND parse/eval time
  • Translates to real business gains
• Balance speed and support with differential serving
  • Generate a modern bundle and a legacy bundle
  • A main bundle that loads a polyfill on older browsers
• Module scripts are supported by 90%+ of browsers by usage

Twitter Driven Development, Redux

Speaker: Justin Samuels | @ThugDebugger

• Three keys of asking a good question in a tweet:
  1. Ask: Is this a relevant question? Is it clear? Is it concise?
     • People have stuff to do, minimize the amount of time they need to take to help you
  2. Pour: Share with others the knowledge that has been shared with you

     A candle doesn’t lose it’s intensity by lighting another

     • Offer to help other people
  3. Effort: This is the hardest part
     • Don’t make excuses; do the thing
• Another acronym, ATL: ask the question, teach others, and learn new things

Create Dynamic Web Apps With Serverless and the Jamstack

Speaker: Jason Lengstorf | @jlengstorf

Demo

• We still need servers
• “Serverless” just means someone else’s servers
  • Managed infrastructure
  • Let the experts (AWS, Microsoft, Google) do the heavy lifting
• Serverless lets us focus on logic, not infrastructure
  • It’s hard, because it’s a lot (and it’s repetitive)
• Live demo of Netlify Functions
  • A way to add severless actions to static sites on Netlify
  • Pretty cool

---

Day 2

Which Database? How to Choose the Best Place for your JSON Documents

Speaker: Suphatra Rufo | @skprufo

1. Database overview
   • Relational databases developed by IBM back in the 1970s
   • Non-relational databases respond better to unexpected events
     • Instagram spikes at New Years handled better by non-relational dbs
   • JSON is the de facto way to communicate data
2. Key value
   • Dictionary data structure
     • Pros: simple, ess memory, better performance, partiionable, horizontal scaling
     • Cons: no query language, key management is vital, freeform search impossible
   • AWS DynamoDB
3. Document-oriented databases
   • A better way to store JSON
4. Multi-modes
   • Support and mange different models
   • Couchbase can normalize and denormalize documents
   • SQL querying with NQL

Thar Be Dragons: Rebuilding Native UIs on the Web

Speaker: Chance Strickland | @chancethedev

Slides

• The web started as a platform for sharing documents
• As it grew, we started to develop more interactive elements
• Today, we have complex HTML elements for rich interactions
  • Why don’t we use them?
• Reasons why we build custom controls: appearance, functionality, browser differences, accessibility issues
• Libraries can only do so much to recreate native UI elements
• Takeaways
  1. Use HTML
  2. Identify good primitives
  3. Understand the full scope

Svelte and the Great Space Elevator

Speaker: Shawn Wang | @swyx

Slides | Talk

• How do we get into space?
  • There is a tradeoff between the amount of fuel you need (to carry valuable payload) and the weight from that additional fuel
• How do we make the web?
  • The web wasn’t designed for everything that we use it for
  • This is especially true for mobile web (low powered, slow connections)
  • JavaScript is really heavy
  • The framework that you choose has a big impact on the ultimate weight
  • The tyranny of run-time frameworks:
    • Choose two:
      • Ship more features
      • Write less code
      • Send less JavaScript
• A way out
  • Put up a rope!
  • A space elevator is a big upfront investment, but a low per use cost
• Compilers as the future
  • Tom Dale’s Compilers are the new Frameworks
  • Frameworks are shifting towards smart compiling to reduce bundles
  • Svelte
    • Write less code: learn extra syntax, but it will be worth the time
      • Personal experience: 20% less code, 93% smaller bundle
    • No virtual DOM: it’s as close to writing vanilla JS as possible
      • Compile Svelte in Your Head by Tan Li Hau
    • Truly reactive: Reponds to changes with $ syntax
  • Lighter tooling that only makes it to the build when used

Progressive Enhancement in React

Speaker: Kayla Sween | @_kaylasween

Slides

• Spectrum of delivery: HTLM > CSS > JavaScript
  • Structure it with HTML
  • Make it pretty with CSS
  • Add behavior with JavaScript
• Why Progressive Enhancement?
  • Enhanced accessibility and performance
• Start with core functionality and choose the simplest technologies to make it work
• Then you can sprinkle on optional features

Building JAMstack CMS: A Full Stack CMS for the Modern Age

Speaker: Nader Dabit

Slides

• A Wordpress alternative with all jamstack technologies
• More information: https://github.com/jamstack-cms

Handling Data with React Query

Speaker: Domitrius Clark | @domitriusclark

Slides | Course

• I accidentally missed this!

Canvas: The Final Escape Hatch

Speaker: Ken Wheeler | @ken_wheeler

Slides

• Canvas is a browser API to draw 2D graphics
• WebGL: alternative, high performance API for drawing on the canvas element with the GL language
• For games, data vizualization, high-performance graphics, granular control over rendering
• Drawbacks: No layouts, no z-index, bad a11y, with a strange imperative API
• Drawing methods
  • Immediate: Redraws the entire canvas every time
    • Tough on CPU
  • Patching: Only redraw pars that have changed
    • Hard to handle full draws
  • Compositing: Layering convases
• Events: All events are listening to the parent canvas
  • Use a spacial index with a library like RBush
• Scroll: Let the browser and DOM help you
  • Using overflow and elements porportional to the content

• - You can use a layout solution like Yoga (`yoga-layout`)
  

• Plug: react-blazing
• Other libraries: Skia, Lottie, PixiJS

How to Supercharge Teams with Carefully Crafted Conventions

Speaker: Chris Ball | @cball_

Slides

• Every good scalable system relies on process and automation
  • How you develop, your workflows, how you do things
• Process is built by conventions
• How to be your best dev:
  • Play to your strengths
  • Understand what slows you down
  • Eliminate decision fatigue
• Examples in the wild
  • Next.js: leans in to standardized conventions in React
  • GraphQL: a system for requesting data and documenting
  • Utility css frameworks
  • Semantic versioning
• Crafting your own
  • Find a base and build on it
    • If you’re disabling everything, it means that you are following the wrong convention
  • Create a plugin for your team
  • Add a PR checklist
    • Screenshots (GIFs)
    • Automated tests
• Leverage generators
  • Hygen templates that live alongside the code
• How to perfect process
  • Synchronization: Understand the vision with RFCs
    • Summary, motivation, examples, how to teach, how to enforce, drawbacks, and questions
  • Repitition: Continually refining with retros

---

Reflection

I enjoyed having a single track of JS-focused talks. The remote conference had it’s own technical issues, but overall I think it was a great content delivery method for these types of topics.

Some of the talks were prerecorded, which might sound like a let down, but the speakers were presents in the chat and willing to answer questions live. That was a neat feature that other conferences cannot offer.

Whether it’s remote or in-person in 2021, I recommend checking out MagnoliaJS Conference.

---