Cascadia Day 02

Heroku created a bunch of open source tools to help facilitate the conference. https://github.com/fostive/emote-widget fostive/emote-widget

fostive/what-is-fostive Start here: what is FOSTIVE? Contribute to fostive/what-is-fostive development by creating an account on GitHub.

(side note: cassidoo recommended this keep to someone and I just wanted to keep note of it: ZSA Moonlander: Next-gen Ergonomics | zsa.io | Store)


🧑‍🏫 THE TALKS


Evan Tahler

How I learned to Stop Worrying and Let the Robot Publish to NPM

  • Lots of care to ensure this wasn’t just a zoom call
  • Lots of quick releases in quick succession probably a sign something went wrong
  • NPM flow (vs git flow) takes metaphors from both gitflow and ci/cd [image:AE9B4FC2-1E3B-4A90-A8DB-0673D427B8F9-1646-00008E89C0D48620/Screen Shot 2020-09-02 at 09.36.11 .png]
  • npx cascadiajs vs npx cascadiajs@next npm packages have BOTH semver number and tag identifiers. default tag is latest, can tag
  • .npmignore vs .gitignore
  • get ci robot to publish code for us npm version command to set version ([no ci]) grant ci access to npm push to npm push to git
  • need a human still to trigger version changes (or semantic release)
  • don’t be afraid to make a tonne of npm packages
  • QA: * how do you know if something is ready to share just learn in the open, get started with low risk thought publishing to npm was high risk, but it’s really not * low risk: can move tags around if you need to

Chat commentary: Brenden (Organizer) [He/him] Saw a question about some of the tooling to help with npm flow. Check out semantic-release to help automate some of the process https://github.com/semantic-release/semantic-release

Tianyu Pu

The Zen of Git

Scott Ammon

Musical Creativity in the Browser


🥐 Morning break


Pantelis Kalogiros

Complex Geometry in HTML! A story of Constrained Creativity

Hey everybody!! If you want to see the finished game/tech demo of my talk click here -> https://pantel.is/projects/css3d/ (rendering is all in css3d/html, of course a ton of vanilla js is used too for the actual gameplay) (edited)

  • Constrained creativity: constraints breed creativity * (short story “Computer, did we bring batteries? Computer?” 😅 )
  • Some amazing demos of putting components into perspective, rendering full 3d scenes (my notes would not do it justice)
  • Are there libraries that make this easier? The math hasn’t changed Can use Three.js: will render without web-gl. SVG/Canvas and ascii rendering…
  • are there perf limitations: can have 700-800 faces (elements), textures can add up there are tricks you can do to avoid rendering certain elements (hide elements out of sight with display: none, using lower res textures)

Amber Hoak

SVG, Canvas, and WebGL: The Power, the Beauty, and the Cost

Rahat Chowdhury

Building better communities with mental health support

  • @rahatcodes
  • 200million hours lost annually to depression
  • OSMI: Open Source Mental Illness * some mental health resources: for employees, for workplace
  • bootcamps romanticize burnout culture * need to put in extra work to get better
  • hustle culture
  • tech events * don’t focus on booze
  • provide different opportunities for people to network (not just drinking events, not maybe just in person events)
  • The pacman rule: Eric Holsher: don’t close the circle
  • From Slack: Paying attention to Reactadelphia and JS.LA on how to level up my meetup’s remote experience.

🥪 Lunch 🌮


Kristofer Joseph

You Might Not Need a Build Step

  • mo tooling mo problems
  • from begin.com
  • good examples of building apps with pure js
  • why do we bundle, transpile? the reasoning is less relevant these days

April Speight

My Assistant Misty

  • ROBOTS
  • Building a robot digital assistance
  • misty: multiplatform robot mistyrobotics.com
  • skillrunner / command centre to manage the robot
  • showcasing some examples of how to work with the robot
  • are there other platforms: yea some exist: other ways to get started building too
  • twilio autopilot for ai speech
  • link in slack: misty's interaction interface reminds me a lot of johnny-five : http://johnny-five.io/

Myriam E Walden-Duarte

Relax, it’s IoTea Time!

  • myriamwd.com
  • used fitbit to track sleep!
  • an example project with a button turned on over the internet.
  • LED Iot-User

☕️ Afternoon Break


Dan McKeon

How I Graduated from React to Vanilla JavaScript

jQuery bundled a few important concepts together that really made it sing: DOM selectors, chainable utility interface, plugin ecosystem, and reusable common factory pattern… we now have the advantage of using each of these features independently (querySeleector, underscore/lodash, npm/esm, ESNext+): it’s one of the best stories where its success lead to its own demise [James Vivian [he/him]]

i swear if i got a dollar for every \$ i had to write i’d have enough to buy a couple avocado toasts by now [melody (they/them)

React to vanilla: Looks like someone did it… and documented it. https://medium.com/hackernoon/how-i-converted-my-react-app-to-vanillajs-and-whether-or-not-it-was-a-terrible-idea-4b14b1b2faff cole [he/him]

Rachelle Rathbone

Oh Sweet, Gif

  • “can this be said with gif?”
  • photosensitive epilepsy: can trigger, not necessarily with one image (but many or large images)
  • how do you make gifs accessible?
  • wcag 2.2.2 pause, stop, hide (level a) guideline
  • implemented a feature for gif-autoplaying in a little web app (gific)
  • hashtag-accessibilityfirst development

Really like this article by Eric Bailey on prefers-reduced-motion (which doesn’t necessarily mean just stop all motion): https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/ Diane Ko:

this is a handy technique for pausing-by-default: https://css-tricks.com/pause-gif-details-summary/ jdsteinbach

“It’s easy [for web devs] to discover issues for all users, but harder finding issues for /some/ users”

Fred K Schott

Snowpack, Webpack and the Third Age of JavaScript

  • July 17th 1936: first nbc live broadcast
  • talking about how first news broadcast did it just like a radio broadcast: no knowledge of the medium yet
  • there is an analog here in how cascadia has embraced this distributed format this year
  • “third age of javascript” @swyx
  • affiliated with snowpack, pika, skypack

The third age is about clearing away legacy assumptions and collapising layers of tooling ~ Shawn Wang (swyx)

  • ESM is the future

It’s interesting to use google trends to compare frameworks over time: https://trends.google.com/trends/explore?date=all&geo=US&q=%2Fg%2F11c6w0ddw9,%2Fm%2F0268gyp,React,%2Fm%2F0bbxf89 Jeff Alexander

Great podcast episode —> must listen :) —> https://changelog.com/jsparty/137 Austin Turner

Skypack: everything on npm delivered to your browser. https://github.com/evanw/esbuild esbuild (edited)


Carter and Jessica Closing

  • Made a choice not to use Remo / Hop.in (directly anyways)
  • Believe their are pillars of cascadia, feeling the warmth of audience
  • Emotes feature was a way for audience interaction
  • Having proper captioning: we do this already
  • “we’re web developers: this conference is about the web” empowered idea of building things modular, distribute work
  • rambly: digital 8bit world for discussion
  • remo: being able to sit down at tables with folks
  • “You can’t collect Pokemon if you’re a jerk” ⬅ I need to cross-stitch this