The contents here is created from the official CascadiaJS Page

Overview

• name: Aaroh Mankad
• Speaker Page

Abstract

The next generation of tech is on Tiktok, and we need to do our best to ensure that they are exposed to a holistic picture of the industry and the people that work in it.

Notes

• Thinks tiktok is a great way to build commmunity
• Short form video platforms (SFV)
• Making content is important
• Compare with Reverse Engineering a Private API's talk on how tiktok is a spynet.
• Made videos about what he spent money on
• See mastadon?
• Twitter vs TikTok
  • Video is more engaging and nuanced than text
  • As the world gets higher bandwidth, the world gravitates to using higher-bandwidth software like TikTok
• Instagram vs TikTok
  • IG is a poser, copycat, and inauthentic.
• Reddit vs TikTok
  • Reddit is highly <?> and so it's easy to make hate content. Unlike on TikTok.
  • Subreddits take over purpose of the community.
• TikTok vs SFV
  • YouTube (YT) Shorts
  • YT is video native
  • formality is the enemy of authenticity
  • assumes people on YT will want to make high quality content, but TikTok doesn't demand high quality content
• Find super followers, cross spheres of interest, impact next generation, promote diversity
• Tiktok for companies (not very accurate disclaimer)
  • Prime top of funnel
  • New Age of Search
  • Word of mouth
  • Casual Brand
  • Good tiktokers...
    • Joyce, Phong I Code, Emily Kager,

@seattletechbro (Private) on tiktok @aarohmankad (Private) on twitter

The contents here is created from the official CascadiaJS Page

Overview

• name: Brian Leroux
• Speaker Page

Abstract

The future is here! We can now model an entire system front to back with pure functions. Come to this talk to learn about applying functional programming concepts to the cloud, and the browser.

Notes

• Made a framework called enhance
• "poor man's debugger" `JSON.stringify(jsonobj, null, 2);
• demos with the aws-sdk
• "The code is really chill"

Notes by kevin

• dependencies breaking is bad
• Browsers broke stuff all the time back in the day, most browsers are backwards compatible now.
• Build around what will not break in the next 10 years, not what you think will change.
• additive changes help with not breaking things
  • http1 -> http2
  • xml http request -> fetch
  • async/await
  • <script type="module"></script>
  • woff -> woff2
  • s3.listobjectsv2
• lots of moving parts
• Can we simplify? Yes! progressive enhancement
  • Start working with HTML and add JS on top of that.
  • good for accessibility, audience usage and also help with dependencies
• framework are incorporating this
  • 11ty, remix, astro

Enhance is a project built in the HTML first, JS and CSS on later manner.

• api routes

• its kind of like php, not a bad thing

• file based routing with plain html

• reuse markup wtih custom elements

• built-in utilities

• uses pure functions to return HTML components

• Poor Man's Debugger - JSON.stringify(state, null, 2)

The contents here is created from the official CascadiaJS Page

Overview

• name: Brittany Joiner
• Speaker Page

Abstract

If you didn't 'grow up' coding or study comp sci at uni, you might have never considered a technical job. Yet it's totally possible for people midway through their non-technical career to become a developer. But why aren't more people doing it? I go through my journey from marketer to developer and explain the things that helped and hindered me. You'll learn why more folks don't do it and specific things we can all do to change that!

Notes

Notes by aminamos

• many people don't have a linear path from compsci undergrad to software career
• meet underrepresented groups where they are
  • most of these groups are in caretaking roles
• "fresh perspectives" means from another company or industry, but different roles creates cognitive diversity
• roadblocks
  • exposure is an issue/blocker, technical stuff provided to boys more often than girls - ask them if they care
  • not seeing people in the role is a blocker
  • be loud about who you are (if you feel comfortable/safe doing so)
  • limited view of engineering, what it is, lots of types of roles that don't involve writing code all day
• hiring managers - think outside the toolbox, screen for other skills and teach technical stuff later
• don't be sexist or comment on people's ability based on how they look, gender, etc
• most bootcamps are still inaccessible
  • altcademy - promotes more low cost courses and bootcmaps
  • (personal note: I usually recommend odin project because it's 100% free https://www.theodinproject.com/ and the various roadmaps for guidance https://github.com/kamranahmedse/developer-roadmap)
• "just start coding and google when you get stuck"
  • this is bad advice
• hard to work all day then code in the evening
• lacking supportive company/job environment
  • not everyone can transition within the company
  • Zapier and Adidas actively work to develop their employees, split time roles to eventually switch to a more technical role
• getting stuck and feeling like you're the only person that gets stuck
• create slack channel called "learn-to-code" and share resources, help people understand tech is more than building apps
• if you got to tech on the traditional path, show your mistakes and don't be a tech evangelist(?)
• if you're from the non-traditional path

• talk about transitioning into tech as an adult

• marketing -> programmer

• Innovation Engineer @ Elastic

• Business Assistants, Nursing, etc., is where you find women to work in tech.

• Cognitive Diversity improves problem solving

• Parents and family shouldn't assume that their female family members aren't interested in tech.

• See altacademy for low cost courses and bootcamps. You can sponsor a student too.

• Be specific with information to help people when they get started

  • Create a list of resources that you think would be helpful for a new person.

• Get to the know the style of the person you are mentoring.

• Learning on the side is hard because "brains need a break".

• People needa supportive company & job environment

• Transition programs at a company (allow people to move into different fields (read: tech) while holding their current position)

• Leaern to code slack channel

• Introduce people to light tech things

• Expand definition of an engineer

• Show your mistakes

• Don't be a tech bro

@britt_joiner (Private) youtube.com/c/brittanyjoiner

alt academy

Notes by kevin

• made transition from marketing to tech
• most people think they can't do this
• where to find them?
  • nursing, education, etc
• fresh perspectives
  • not just diff companies
• stereotypes
  • don't assume, ask
• limiting view of engineering
  • expand scope of definition
• don't be too specific
  • eg. frontend react developer
• bootcamps are hard to access
  • eg.
    • expensive
    • full time
• just google it
  • not helpful in the beginning
• not having brain power
• supportive environment/peers
• how to help
  • menotr
  • expand what it means to be engineer
  • help intro people
  • show your mistakes
  • don't be a tech bro/sis
  • tell your story

• used to be a marketer, now a programmer!!
• Story of journey
• Common Roadblocks/perspectives
  • "Girls aren't into coding", ask them if their interested
  • Not seeing people like you.
  • limited view of what engineering is. Much more broad then just writing code
  • Sexism is still a thing
  • Bootcamps are still not very accessible, expensive, very intense multi-month commitments. Consider altcademy
  • "Just start coding and google when you get stuck", isn't helpful advice or encouragement. Be specific, be willing to do it together, get to know the person, how they learn.
  • learning on the side is very difficult. Esp. when you are working a FT job to make a living.
  • Lack of supportive company/job environment.
    • companies need to invest if having non-tech folks who are interested teck. Better than hiring out
• Action Items
  • Look for mentor opps
  • find "under-represented" people OUTSIDE of tech!
    • find people from non-technical back grounds.... they provide great perspective. Hire them over tech people and tech them the tech
  • expand a definition of engineer
  • Intro people to more light tech things
  • Show mistakes!
  • Don't be a tech bro
  • Tell your story!

• History of Brittany
  • Worked in marketing after university full time for 6 years.
  • Now a full time engineer with Elastic.
• Talk not only about women or specific groups. It's for helping people transition from non-tech to tech carrers.
• Demographic results from StackOverflow 2022 survey: 84% straight, 92% male, 76% white/european
• Harvard Business Review: Teams solve problems faster when they're more cognitively diverse.
• Many people think that girls aren't into coding.
• How do we know people are into programming or art: Ask them!
• People who don't look like us can be interested in our field.
• If you look different in your work area? Be loud, and proud.
• People have limited view of Engineering.
• Think outside the toolbox while hiring.
• When someone is beautiful, people think "everyone will do your work for you"
• Promote more low-cost courses and bootcamps. Sponsor a student!
• The suggestion "Just start coding and google when you get stuck" is risky.
• Not having brain power to code after a work day is difficult.
• Lacking a supportive company or job environment is difficult.
• Things to do
  • Everyone
    • Look for mentorship opportunities (or create one!)
    • Introduce people to more light tech things
    • Expand your definition of an engineer
  • Traditional Path
    • Show your mistakes
    • Don't be a tech bro (or sis)
  • Non-traditional Path
    • Tell your story and what you do

The contents here is created from the official CascadiaJS Page

Overview

• name: Brooklyn Zelenka
• Speaker Page

Abstract

P2P social networks, local-first apps, and resilient client-side apps need to be private, concurrent, BFT, and run everywhere. Let's look at some recent tools & techniques that make this even possible.

Notes

• @expede (Private)

• Fission Codes

• WNFS, Dialog, CAR Pool, PVM

• Keeping data in a database is a bad idea. See GDPR.

  • If you don't store data you can't be persecuted for storing any data you shouldn't.

• Networked Data, not apps

  • Stuff comes first

• Open protocols

  • Auth: interop without pre-negotiation
  • Data
  • Compute

• Global Primary Keys

  • Content addressing
    • Truly global links as opposed to ip addresses (physical location), DNS, networked routing for hashed data,
    • Hard links vs soft links (url)
    • Content IDs (CID)
    • Seems to basically just be like a REST request, but instead of using an id, just use the hash of the object
      • What do you do when you update the data, wouldn't its hash be updated?
        • Brooklyn explains this. All history is needed (wink wink blockchain)

• Portable Private Data

  • SublteCrypto(Web Crypto)
    • Never gives direct access to the key
    • Add an ownership node to the object

• BFT Concurrency

  • Over my head, something about color mixing, commutability, associative, and (does not change f(x) === f(f(x)));

• See also CRDT

Notes by kevin

• speaker
  • cto of fission codes
  • working on lots of protocols
• context for auth
  • theres a lot in th emiddle
  • lots of data is sensitive
• networked data, not apsp
• 3 techniques
  • global primary key (content hashing)
  • cryptrees/dark forest
• content hashing
  • never change
  • hard links for the web
  • self verifying data
• private data substrate
  • traditional: file system
  • new:
    • partitioned
    • persistent & versioning
      • feature but also implementation detail
      • just maps under the hood
    • private data
      • crypto is just transforming existing problems into key management problems
      • what changed: ubiquitous web crypto api
        • you can't extract keys using the api, only signing
• offline access control
  • use hash tree vs trie
• concurrent writes

• Brooklyn is co-founder and CTO of Fission Codes
• Problem 1: The situation of Services in 2022
  • Allow users to authenticated using Auth Service
  • Sharing data across services (like from a photo service to music service) requires downloaing the data and re-sharing.
• Problem 2: Too much in the way
  • Browser
  • REST
  • Server
  • Data Store
  • DEvOps
• Problem 3: Toxic Data
  • 2005: Credit Card info in DB
  • 2015: Personal Info in DB
  • 2025: Nothing in DB
• Suggestion 1: Networked Data, not apps.
• Suggestion 2: Open Protocols
  • HTTP has been open
  • What if we get open protocols for
    • Auth (interop without pre-negotiation)
    • Data (ubiquitous dumb storage)
    • Compute (local and remote lambdas)
• Three techniques
  • Content Addressing
  • Private Data Substrate
  • Fault-safe concurrency

The contents here is created from the official CascadiaJS Page

Overview

• name: Chris Coyier
• Speaker Page

Abstract

There are quite a few things in the world of web design and development that have gotten… easy. It might be time to take a look at how you’re approaching some of the building blocks of your website because evolutions in browser technology and tooling have made many things easier and better. We’ll have a look at browser-level things like things as fundamental as layout, typography, and animation. Then also tooling level things like media handling, serverless concepts, and hosting.

Notes

Hunter's notes

• Chris Coyier
  • Has published 5k blog posts.
  • Runs the shop talk podcast?
• Ate every breakfast burrito in Bend.
• took pictures, entered data...
• Used Astro to build his website.
• "CSS Scripture"
  • Grid layout is great for sorting cards.
    • As many as fit ===repeaaat(auto-fit, minmax(min(100%,360px), fr));
    • grid-template-columns: masonry
  • Container queries are a new thing on the way
    • can style a component against its own container.
    • uses wrapper divs
    • @container <name <size> { // style }
  • WAAPI Web Animation API
    • element.animate(ary, opts)
    • Maybe you don't need an animation framework anymore
  • Scroll timelines is a thing that might be coming soon... define scroll events with keyframes.
  • offset-path and offsite-distance to animate with apath.
    • This one, comes in on a curve. laugh
  • FLIP.... too fast to take notes
    • Can chsange the order of elements with css...?
  • Web typography
    • woff2 file @font-face{ src: url(/fonts/roboto.woff2)\nformat('woff2');...}
    • You can control how a custom font loads... font-display: swap
      • This should be used for most sites so that content doesn't have a delayed load.
      • Can use optional instead of swap to prevent flicker (and loading of font).
      • system-ui is a proper font-family
    • Fonts can have font-variation-settings kind of like shaders in rendering engines.
  • Fluid type "is how you should do typography on the web".
    • express a formula for setting font size and stuff without making concrete breakpoints?
    • clamp
    • Very cool way of doing typography.
  • Image son the web these days need multpile sources and stuff for different screen sizes.
    • Lots of considerations with images
    • Cloudinary handles images. $
      • can use canonical image
    • use srcset with sizes attributes on an image.
    • Other tools with cloudinary -imgix and codepen (another one shown)...
  • "Browsers are sneaky bastards", they should abide by standards, the web is good as long as people are vigilant.

The contents here is created from the official CascadiaJS Page

Overview

• name: Daphne Liu
• Speaker Page

• name: Tiger Oakes
• Speaker Page

Abstract

Want to automate your home? Come learn how to sharpen your skills in Node, APIs, and the Internet of Things while making laundry, cooking, & calendar projects that improve your life and relationship.

Notes

- home-assistant.io
- nodered.io

Daphne & Tiger.

• Communication

• Transparency

• Teamwork

• Who does chores?

• https://github.com/NotWoods/automate-our-relationship

• Recipes in Notion

• Feeding Schedule, assigning to a chart

• repeated tast -> automation

• Trello for flow

• Code is on github that generates the eating board and making the grocery list.

Automating meetings with a light that integrates with a person's calendar

- home-assistant.io
- nodered.io

• Zigbee hub is the best hub for using IOT because it can connect to many IOT devices
• Home automation is a good date idea

Notes by kevin

• how we stayed together for 6 years

  • communication
  • transparency
  • teamwork

• we automated all these things

• recipes

  • using notion & trello
  • copy/paste recipes into notion
  • script to add shopping list + notion recipe list

• walkthrough of js code

• export to trello

• meetings

  • smart lights that turn on when on a meeting
  • connect to smart plug to toggle automatically
  • use home assisstant api + google calendar api
  • use nodejs event emitter functionality
  • use nodered to make home automation easier

• laundry

  • vibration sensor on laundry
  • when vibration stop, send signal to google home to make announcement that washer is done
  • use nodered
  • vibration sensor on amazon
  • zigbee hub

• automation project took communication/transparency/teamwork

• Tiger Oakes x Daphne Liu
  • Tiger works with Microsoft Loop.
  • Daphne works on Lyft Web App & design systems.
• Communication, Transparency, and Teamwork.
• Software solutions for not doing the chores.
• Talk can be used for Couples, Family, Roommates or yourself.
• Use Node.js, APIs and IoT for:
  • recipes
  • meetings
  • laundry
• Source code is available on GitHub https://discord.com/channels/853074440069578772/1014010511278473317/1014958419024822362
• Recipes
  • You're hungry, trying to cook or got groceries
  • Create a recipe box on Notion, using a template
  • Create a feeding schedule
  • Automatically pull recipe from notion, and randomly assign lists on Trello.
  • Notion comes with API, UI and templates
  • Trello comes with API, UI, drag and drop features, and works offline.
  • Talk does into details of how Notion and Trello APIs can be worked on.
    • Notion https://developers.notion.com/
    • Trello https://developer.atlassian.com/cloud/trello/
• Meetings
  • Share home office, and it's difficult when both partners have meetings.
  • Use Home Assitant API https://www.home-assistant.io/ with Event emitters, and smart plug.
  • Talks about how valendar event flow works, which includes filtering happens and timers are set.
  • Use Node-RED https://nodered.org for the easy drag and drop UI.
• Laundry
  • Set up vibration motion sensor (Aquara Vibration Sensor) to check if washing is done, and remind on Google Home or send a tweet.
• Relationships can't be automated. The key is spending time together, and having open communication.

The contents here is created from the official CascadiaJS Page

Overview

• name: Dwane Hemmings
• Speaker Page

Abstract

A journey through taking a seemingly impossible idea to an actual project by combining technologies and tools created by others.

Notes

• qr code link

• determined not stubborn

• Macgyver

• "difficult takes a day, impossible takes a week" - Jay Z

• ()[https://ticreacttoe.com]

• Works at Vonage

• vonage blog

• "Web Components"

• model viewer

  • video tag but 3d

• hosting prototypes

  • codepen.io
  • glitch.com
  • codesandbox.io
  • stackblitz.com
  • aframe.io

• getting assets

  • clara.io
  • sketchfab..com
  • turbosquid.com
  • polyhaven.com

• creating models

  • blender.com
  • microsoft paint 3d
  • unity

• You can use vonage to handle events

• Reads off some items from the codescape bingo card

• Pulls out a snap drone

• I've never been pu

Notes by kevin

• tiktok is the platform to be in
• personal story
  • personal investment story
  • everyweek, talk about what i spent my money on
• twitter vs tiktok
  • twitter has long threads
    • very one sided
  • new users are video native
    • youtube shorts
    • tiktok
• instagram vs tiktok
  • instagram reels is like tiktok
  • instagram does not have the culture (eg. its corn)
  • tiktok has more vulnerability
• reddit vs tiktok
  • subreddits is interesting
  • its easier to create hate content on reddit
  • tiktok, you show your face, disincentivizes hate
  • subreddit take over community, eg. r/trees
• tiktok vs shortform video
  • youtube shorts more formal vs authentic
  • will spend 5min btw meetings to do tiktok video
• whats in it for me
  • find your superfollowers
  • spheres of interest (we like more than one thing)
  • next generation (mentorship)
  • promote diversity
• why tiktok for companies
  • top of funnel
    • new age search (look for places to eat)
    • wrod of mouth
    • casual brand
• recommendations
  • joyce from Reverse Engineering a Private API
  • pheung (techtalk.com)
  • shmany (?)
  • alex friedman (?)
• follow
  • tikitok: @seattletechbro (Private)
  • twitter: @aarohmankad (Private)

• Dwane created a project to do real-time transcription.
• Dwane will use Attack on Titans reference during the talk.
• https://TicReactToe.com which creates a video chat for players playing the game.
• https://modelviewer.dev/ is used for viewing 3D models.
• We check https://xoxr.games/ which shows AR mode.
• Creating WebXR environments
  • https://aframe.io
  • https://babylonjs.com
  • https://threejs.org
• Plan: Bord X|O models, model-viewer, WebXR.
• Where to get 3D models?
  • https://clara.io
  • https://sketchfeb.com
  • https://turbosquid.com
  • https://polyhaven.com
• Creating models
  • https://blender.org
  • https://sketchup.com
  • https://tindercad.com
  • https://unity.com
  • Microsoft Paint 3D
• Playing the Game
  • https://modelviewer.com/editor
• Communication
  • https://developer.vonage.com/client-sdk

The contents here is created from the official CascadiaJS Page

Overview

• name: Eddie Zaneski
• Speaker Page

Abstract

Cryptography isn't scary, it's fun! Join for a crash course in modern cryptography. Learn what's available in Node and the browser along with how we are securing the software supply chain.

Notes

Notes by aminamos

• symmetric, asymmetric, one-way functions, pseudorandom number generators
• RSA
  • time to phase this out
  • prime factorization
• modular arithmetic is a one-way function
• ECC elliptic curve cryptogrpahy
  • allows shorter key lengths but more security
• DHKE
• web crypto API https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API
• SubtleCrypto https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API
• Dual_EC_DRBG https://en.wikipedia.org/wiki/Dual_EC_DRBG
  • https://www.youtube.com/watch?v=nybVFJVXbww
• Sigstore - Let's Encrypt for signing

• works at chainguard using kuberneties

• don't roll your own cryptography

• RSA isn't the bees knees anymore

• Modular Arithmetic

  • "one way door"

• Eliptic Curve Cryptography

  • also one way door. AFAIK it's the backbone of blockchain
  • y^2 = x^2 + ax + b
  • used in the generation of a public and a private key

• Diffie Hellman Key Exchange

• import crypto from 'node:crypto

  • Sample Diffie Hellman Key Exchange code sample...

• getRandomValues(TypedArray), randomUUID(), subltle

  • Why subtle? Easy to shoot yourself in the foot.

• NSA's cryptography function scandal Dual_EC_DRBG.

  • require usage of P and Q
  • NSA knows e?

• https://sigstore.dev

  • OSS
  • Let's Encrypt for signing
  • Fulcio: keyless signing
  • Rekor: transparency log
  • Cosign: Container signing
  • A tool for signing and verifying npm packages

• npm RFC 626: linking packages to source and build

  • proof of where package was built

Presentation Notes

• full of nice gif memes.

slides

Recommends the computerphile youtube channel.

Notes by kevin

• disclaimer: don't try this at home

• symmetric keys: everyone has key

• asymmetric key (public key cryptography): only share public key

• one way functions: hard to reverse operation

• pseudorandom number generators: sources of entrophy

• rsa

  • great when it came out, not recommended anymore

• modular arithmetic

  • % operator in javascript

• elliptic curve cryptography (ecc)

• why ecc

  • rsa needed to increase bit length to make stronger
  • ecc scales better

• diffie hellman key exchange

  • agree over symmetric key in insecure channel
  • eg. ssh

• web crypto api

  • built into browser

• nsa backdoor

  • pseudo random number generator that is broken by design
  • believed that nsa has backdoor

• sigstore

  • new standard for signing, verifying, and protecting software
  • lets encrypt for signing

The contents here is created from the official CascadiaJS Page

Overview

• name: Ian Sutherland
• Speaker Page

Abstract

Node.js is a popular choice for building dev tools and some recently added features make it possible to build powerful tools without any external dependencies. We’ll look at these new features and show how to use them to build a custom CLI app with zero external dependencies.

Notes

Notes by aminamos

• topics
  • what is a cli
  • what are dependencies, why avoid them
  • what helps us write cli apps
  • new upcoming nodejs features
• CLIs use flags/options
• why build with node?
  • usually a language your team is already familiar with
  • JSON data operations, network requests are pretty well supported
  • node has a package ecosystem (useful when needed, still avoid when possible)
• dependencies
  • code that your program needs to run
  • all users of your app will need to install dependencies
  • smaller apps, like CLIs, not having an install or build step makes setup, contributing, and distribution easier
• new node syntax
  • import instead of require
  • ESM instead of CJS
• argument parsing
  • this process is surprisingly complicated
  • https://nodejs.org/docs/latest/api/process.html#processargv
  • third party library like yargs or commander, in the past
  • parseArgs is ~the future~ as of node 18.3 (potentially backported to node 16)
    • polyfill proposal for util.parseArgs() - https://www.npmjs.com/package/@pkgjs/parseargs
    • doesn't support all previous functionality, but useful error messages
    • https://nodejs.org/api/util.html#utilparseargsconfig
• fetch
  • before fetch, had to do a lot of pre-work to setup, run, and handle http requests
  • with fetch you can just await fetch() and return the body/errors
  • git blast is real https://github.com/iansu/git-blast
• test runner
  • https://nodejs.org/api/test.html#test-runner
• recursive file system operations
  • https://nodejs.org/api/fs.html#fspromisesmkdirpath-options
  • https://nodejs.org/api/fs.html#fspromisesrmpath-options
  • recursive copy
• wild speculation
  • self contained executibles
  • glob
  • typescript node index.ts
• what's next, ways to contribute
  • join node tooling group https://github.com/nodejs/tooling

• Neo Financial, Head of DEX and OSS
• twitter @iansu (Private)
• flags
  • -l1 or -l -1 Short options
  • --color Long options
• subcommands
  • the status in git status
• "CLI is serious 80s vibes"
• Node has a small core which is why there are lots of dependencies installed with npm for a given project like isNumber.
• Bundling isn't the best because it can still result in a large bundle size.
• type: module to package.json to use import and ESMM or us .mjs (as opposed to .cjs).
• import Node.js internals with node:
  • eg, import fs from 'node:fs'
• There are many different ways to set arguments in a cli
• parseArgs: process.argv -> Tedious so use yargs of commander.
  • NOT TEDIOUS ANYMORE! parseArgs from 'node:util' uses process.argsv
    • declare the options (kind of like commander)
  • has polyfill, will be "backboarded" to v16
• fetch: now available in node@18
  • Built on top of Undici (HTTP/1.1)
• see iansu/git-blast on github to run git blast and see people's twitter handle's if supplied on githu
• node@18 now has a basic test runner.
  • don't necessarily need jest anymore.
  • node --test
• recursive mkdir function with {recursive: true}
• recursive rm operation {recursive: true, force: true}
• recursive cp (same as mkdir) **experimental
• readdir **open pr, not merged
• Speculation of what's next
  • glob patterns
  • self contained executables
  • native typescript (aka deno)

build the future

Notes by kevin

• cli apps

  • stuff that runs on the terminal

• features

  • options (eg. ls)
  • subcommands (eg. git)

• why node

  • scripting language
  • good at json, parallel task, network request, etc
  • lots of packages

• dependencies

  • other code (eg. library)
  • node does not have big standard lib

• are deps bad?

  • depends
  • does introduce overhead
  • you can bundle to make it better

• new syntax

  • using import (es module)
  • import nodejs internals with node: prefix

    import fs from "node:fs"
    

  • every npm name is taken, we couldn't add anything new, hence new namepsace

• argument parsing

  • old way:

    // get everything from STDIN, split by whitespace
    // eg. [node, mycli, --ls]
    const args = process.argv
    

• argument parsing

  import {parseArgs} from "node:util"
  const input = process.argv.slice(2)
  const options = {
  	silent: {
  		type: 'boolean',
  		short: 's'
  	}
  }
  const {values} = parseArgs({input, options}):
  

• fetch

  • make http request
  • its available in node 18
  • built on top of undici (http/1.1 client)
  • has web streams api

  // available globally
  const response = await fetch("...")
  const body = await response.json()
  // you get JSON
  {
  	...
  }
  

• demo to add new git subcommand the old way

  // very long example
  // ...
  

• demo with new way

  // very short example (less than 10 lines)
  // ...
  

• test runner

  • basic api to do this
  • eg. mocha but builtin to node

  import test from "..."
  test("synchornous test", (t) => {
  	//...
  })
  // also works async
  

• recursive file system ops

  import {rm} from "node:fs/promises"
  
  // experimental 
  import {cp} from "node:fs/promises"
  
  // doesn't exist yet, open pr
  import {readdir} from "node:fs/promises"
  

• whats next

  DISCLAIMER: complete speculation

  • glob?
  • self contained executable
  • typescript (lol - i wish)

The contents here is created from the official CascadiaJS Page

Overview

• name: Isabela Moreira
• Speaker Page

Abstract

A solid design system is one of the most important things to make sure your product and brand is consistent and relays the same message to users across the board. In this talk, we’ll cover how to create a design system that nails how you want to convey your brand - from colors to typography to tone.

Notes

The contents here is created from the official CascadiaJS Page

Overview

• name: Joyce Lin
• Speaker Page

Abstract

Learn how to inspect APIs for when you're working with poorly documented ones, debugging, web scraping, or penetration testing.

Notes

Error rendering note reference. There are no matches for `talk.joyce-lin-reverse-engineering-a-private-api.kevinslin.*`.

Notes by aminamos

• https://www.toptal.com/back-end/reverse-engineering-the-private-api-hacking-your-couch
• https://blog.tendigi.com/starbucks-should-really-make-their-apis-public-6b64a1c2e923
• keep in mind
  • review the terms of service before starting this
  • find a path for "responsible disclosure"
  • be ethical
• three common items to analyze
  • individual API request
  • session details
  • stream of HTTP requests
• can use dev tools to copy as curl --> bring into Postman (or API tool) as raw text
• can also look into session details, via HAR files
• the exported HAR can be imported into Postman (P.S. also https://toolbox.googleapps.com/apps/har_analyzer/)
• Postman can also be used as a proxy that captures HTTP requests https://learning.postman.com/docs/sending-requests/capturing-request-data/interceptor/
  • also works on mobile https://blog.postman.com/using-postman-proxy-to-capture-and-inspect-api-calls-from-ios-or-android-devices/
• replay API calls, can be difficult to run one call long term due to expiring info
• if scraping dynamic websites, a lot of the info won't immediately be there
• Googlebot user-agent can help view HTML

Head of Developer Relations, Postman

Capturing network traffic

HTTP files

• chrome dev tools
• Right click on network call to copy as curl
• Paste into postman as raw text
• Can then replay and call in postman

Session capture

• har files right click and save all as har
• in postman inspect a the HAR file
  • har is used for ession replay

Capture stream of HTTP API Requests

• use web proxy to capture a stream of HTTP
• Postman has a free proxy tool

  • alternatives fiddler, etc.

  • Postman interceptor chrome extension

    • can apply filters by subdomain
    • see ajax calls

  • in postman desktop create a new collection to capture proxy calls from chrom extension

    Proxy through postman, and save as a collection

  • capture requests

  • will show connection

  • filter and will proxy all calls live into postmn

  • Stop session, will give analytics afterwords

Proxy mobile app

• see slide

Replay API Calls

Once you intercept sending reques again after a duration doesn’t work (auth expires)

• Cookie Auth
  • Cookie tab in github
  • manually add cookies to sync w chrome browser → will log you in
  • set cookie in header is the one you use in all your cookies going forward
• can get curl request out of postman so you know how to format the api call so it works

Spoofing client attributes

• User agent header
• User-Agent -> Googlebot/2.1
  • Everyone wants to be scraped by google
  • USE THIS AS YOUR USER AGENT
• Replay in code → roll into bot
  • Use code snippet from postman

Alissa Knight → hacker

Hyrums Law

"With a sufficient number of users of an API, it does not matter what you promise in the contract: all observable behaviors of your system will be depended on by somebody."

• Head of developer relation's at POSTMAN @petnuiaGray (Private)

• Reverse Engineering === Hacking

• Reverse Engineering Games subreddit /REGames

• tinder API has been hacked in the past

• "not the crowd" for nature? 👎

  • or was it just because she cheated the reservation system?

• See coder's rights document.

  • Do not publish

• Copy network command as curl and import it into POSTMAN.

• HAR file: HTTP Archive format: capture all network traffic

  • tldr, probs instructions: https://www.ghacks.net/2020/12/29/how-to-create-and-view-har-files-for-website-troubleshooting/

• Postman has an interceptor functionality... like Wireshark??

• Fake being the googlebot as the user-agent to get dynamic content. User-Agent cookie Googlebot/2.1

• Alissa Knight quote on hacking...

• Hyrum's Law

Kate Gather, extra bacon at papa jon's gets a bobblehead.

Presentation

The presentation is kind of cool because she has an overlay over her website..

Notes by kevin

• reverse engineering apis
• eg:
  • ordering extra bacon
  • custom frontends (for couchsurfing)
• disclaimer: be ethical when reverse engineering
• demo: tik tok api
  • view api request
  • see session details (HAR file, import into postman)
  • capture stream
  • replay
  • scrape dynamic websites
    • header as googlebot
• hyrum law: anything that is an api will be consumed

The contents here is created from the official CascadiaJS Page

Overview

• name: Joyce Park
• Speaker Page

Abstract

Devs still may not realize that browsers are now on the cusp of enabling far more advanced capabilities via efforts like Webauthn and Project Fugu. This will allow developers to more effectively mix the business case for no-download PWAs and web with the native capabilities of current hardware. We’ll go through demos and sample code for some fun new types of web interactions, including biometric authentication, voice recognition, Bluetooth device integration, and ML-recognized gestures.

Links

• Twitter link to counting app

Notes

Notes by aminamos

all slides were left behind, ahd to re-create slides

• speaker bio

  • plumbers: toosl and infrastructure
  • carpenters: user facing apps
  • speaker is a carpenter
  • currently building an app to help people connect faster IRL

• context

  • for past few years, been possible to stroe lots of info on web apps
  • this is paradigm changing, like XHR

• ux is boring now

• toolkits are good

• app downloads and usage are down

• what is fugue

  • google led attempt to match native ux
  • apple has not played along, not much progress

• webauthn (this is fido2)

  • replace passwords with biometrics

• demo

  • web usb
  • file system access api

• ml driven ux

  • image classification eg
    • banana demo
  • voice recognition

• caveats

  • safari
  • perf
  • pwas are misunderstood

• Who am I and what right do I have to talk about this.
  • Plumbers are over represented making infrastructure and tools. Carpenters make user-facing apps.
  • Built an app to allow people to connect faster.
• New ventures start during a recession because people have free time when they get laid off.
• Excited about https://remix.run/ because it will "fix performance problems in react".
• Native app downloads are declining.
• Project FUGU
  • https://www.chromium.org/teams/web-capabilities-fugu/
  • ^ undelightful documentation.
• https://developer.chrome.com/blog/fugu-showcase/
• Webauthn (FIDO2)
  • In the browser FIDO22. Completely get rid of passwords.
    • Biometrics or special key...
    • File access API https://web.dev/ps-on-the-web
  • ML-driven UX

Notes by kevin

• two types of builders: plumbers (make tools and infrastructure) and carpenters (make user-facing apps)
• building an app to help people connect faster IRL (can't demo yet)
• "there are a lot of things the web can do now that can revolutionize our UX"
• Project Fugu
  • Google-led attempt to match native UX on web
  • https://developer.chrome.com/blog/fugu-showcase/
• Demos
• https://graphauth.io/registerWebauthn
• https://twitter.com/devdevcharlie/status/1564281622970568704?s=20&t=T9K7v0bXk4MDa4aTViEfFA
• ML driven UX
  • https://teachablemachine.withgoogle.com/
• caveats
  • Safari
  • performance can be an issue
  • PWAs are misunderstood by the masses (user education)
• takeaway: understand new things browsers can do for us, make things cooler

The contents here is created from the official CascadiaJS Page

Overview

• name: Mikeal Rogers
• Speaker Page

Abstract

An overview of Web3 technologies that have recently become easily accessible to all web developers.

Notes

• NFT Storage conversation
• Web3.Storage
• At scale cloud native IPFS(?) host
• Tim Burner
• CID (IPFS Addresses)
  • HASH that tells you what type of hash it is
• DID standard: Decentralized Identifiers. Very good at describing anything that you could wap a public key for.
• UCAN: decentralized oauth : https://ucan.xyz
  • Describe the capability you want in data
  • Any write to the data can be expressed with UCAN
    • Not Bearer Token
  • Simply proof chains

Notes by kevin

• how to store nfts on the blocktrain in a decentralized way

  • use ipfs

• ...

• ucan protocol

• delegation is builtin

• invocation

  • any addressable right can be invoked by anyone

• Speaker Notes can be viewed at https://tiny.cc/web3-cascadiajs
• NFT Storage
• Platform is called Web3.Storage
• The Web is made of interlinked protocols.
  • wrt transport: HTTP, RSS, Atom, WebDAV etc
  • wrt view: HTML, CSS, Media Containers (jpeg, gif, mp4, etc)
• Location Addressing
  • URI FTW!
  • When we link this way, we're linking to a single specific location (centralization)
• Decentralization
  • Figure out how to port individual pieces.
• Data Addressing: CIDs (IPFS addresses):
  • hash based identifiers for data
  • can link to any future or existing hash addressed data in ANY LOCATION and make available under ANY transport.
• Actor Addressing: DIDs (Decentralized Identifiers):
  • a w3c standard
  • for addressing any "subject"
  • identify actors by public keys
• Decentralized OAuth: UCAN https://ucan.xyz/
• UCAN permissions:
  • Any right that can be expressed in Data can be dranted to any Actor.
  • Any right described in Data that is addressed by hash can be delivered by any Actor.
  • Any description of any right can be sent to any addressable location.
• UCAN permission grant:
  • Any actor can delegate these rights to other Actors.
  • Any user can delegate to other users.
  • Any service can delgate rights to users.
  • Any service can delgate rights to other services.
• UCAN execution
  • Any addressable right can be invoked by any capable actor.
  • Any invocation can be sent to any addressable location by any actor.
  • Any invocation can be delegated to any actor to fulfill any aspect of an invocation.

The contents here is created from the official CascadiaJS Page

Overview

• name: Rachel White
• Speaker Page

Abstract

No server configuration? No problem! With serverless & JAMStack becoming more and more popular, it’s like static sites never went out of fashion. Though, unlike the 90s, we don’t have to sacrifice style for performance. Let’s recreate a Japanese style photo booth with React & WebAssembly!

Notes

• Evolution of the personal website
• Works at Datadog

History of the Personal Site

• Geocities
• Angelfire
  • Self expression, having fun online
• 2000s brought about messier websites
• Neopets
• Graymatter -> WordPress
• CMS Systems
• JS Frameworks
• CSS + Design
  • So many different frameworks
• Purikura photobooth website.
  • Made purrybooth
    • Windows 97 lookin' user interface, really inspiring.

Notes

• speaker

  • tech evangelist @ datadog
  • did robokitty

• history

  • geocities
  • angelfire
    • started off as medical transcription, pivoted into personal websites
    • eg
      • personal diary
      • cute boy sites
      • tutorial on doom video
      • jerry the cat page
  • 2000s
    • tracking with javascript
    • neopets
    • greyblogger(?), inspiration for word press
    • wordpress/joomlal/drupal
    • js frameworks
      • ember, express, react, angular, backbone, etc
    • html boilerplate
    • sass and less
    • css + design, etc

• jamstack

  • decouple frontend from backend
  • [j]avascript
  • [a]pis
  • [m]arkup

• static site generateors

  • next, hugo, gatsby, etc

• demo, make a jamstack

  • use create-act-app-rewired
  • use photon
  • use fabric.js

• deploying, netlify

The contents here is created from the official CascadiaJS Page

Overview

• name: Rebecca Peltz
• Speaker Page

Abstract

Jupyter Notebooks have been around for almost a decade. Data Scientists use these notebooks to track their experiments. Software Developers, like scientists, can benefit from using a Code Notebook which combines markdown with code.

Notes

Notes by aminamos

• starting with a history of notebooks, physics/chemistry/art
• can we digitize these notebooks? using digital world for future notetaking
• Donald Knuth - web, tangle, weave
  • http://www.literateprogramming.com/knuthweb.pdf
  • humans think like trees, we have interconnected thoughts
  • code used tangle and weave to connect different parts
• GOTO, difficult to read spaghetti code
• data science jupyter notebooks
• the transition from spaghetti code to low code (not low code like draggable/UI coding, but more highly abstracted code via serverless functions) opens software up to more documentation in notebooks
• example: https://github.com/rebeccapeltz/cascadiajs-notebooks
• keeping notes in context with code allows it to be referenced by yourself, and also others

• Code Notebooks, not just Jupyter notebooks

• Becky Peltz

• Curriculum Program Manager at Cloudinary

• Codex Atlanticus

• Lots of famous old notebooks

• Personal notebooks are hard to review and share.

• Literate Programming by Donald Knuth (1984)

  • For Knuth, code is literature
  • pdf

• big shift in the understandability of code with the "no more goto" movement.

• xhr, ajax

• event handling in JS the good bad and ugly

• Code notebooks use markdown]

• Good for presenting material

• vscode notebook api

• for dendron: can you convert markdown into a code notebook?

Notes by kevin

• notebooks in vscode

• speaker

  • been development in 1982

• brief history of programming

  • literate programming
  • sphagethi code
  • sphagethi code to low code and no code

• computer language go from variable to constant (eg. pi calcutation)

• vscode notebooks

• webhooks

• Becky Peltz has been coding since 1982
  • Curriculum Program Manager for Developer Education at Cloudinary
• We see some examples of notebooks
  • Renaissance Man Notebooks by Leonardo da Vinci.
  • Physicist Notebooks by Isaac Newton.
  • Geneticist Notebooks by Gregor Mendel.
  • Artist Notebooks. Example: Jean-Michel Basquiat.
• Can we digitize the notebooks?
  • Literate Programming: In 1984, Donald Knuth came up with language called WEB
  • http://www.literateprogramming.com/knuthweb.pdf
• Data Scientists' Jupyter Notebooks
• Becky talks about how we moved from Spaghetti code in 1970s to Low Code in 2020s.
• We go through good and bad error handlers in JavaScript.

The contents here is created from the official CascadiaJS Page

Overview

• name: Saimon Sharif
• Speaker Page

Abstract

There’s quite a few design patterns – some of them even have fun names! But, which ones are actually relevant day to day? In this talk, we’ll review common patterns in JavaScript codebases, why they matter, and how to leverage them all while avoiding any mention of AbstractPizzaBuilderFactory and its friends.

Notes

Error rendering note reference. There are no matches for `talk.saimon-sharif-a-few-good-design-patterns.md.*`.

Intro

• Dynamic languages will benefit from different design patterns from static or compiled languages
• Why care about design patterns? Knowing the name for a concept gives us a common language to discuss them with.

An opinionated list of good design patterns

...Some of which come from the Design Patterns book by the Gang of Four.

Feature Flags

• Not a “traditional” design pattern
• Enable fast rollbacks and gradual releases

Singleton

• Guarantee a given class only has one instance while making that instance globally available
• Enable access to a shared resource (file, DB, web socket, etc.)

Decorator

• Attach instrumentation (such as tracing) to another function
• TS has first-class decorators
• TC39 has stage 3 proposal for decorators
• Multiple types: method decorator, class decorator

Proxy

• Enables controlling access to an object
• Built-in Proxy in JS: new Proxy(obj, handler) where handler intercepts and redefines what methods (such as obj.get should return)
• Mozilla docs

Fluent Interface

• An object-oriented API that relies on method chaining
• Increase code legibility and composability with a domain-specific language

Ending thoughts

Consider if you’re more of a just-in-time learner or a just-in-case learner, and give the other type a try sometime!

• There were many design patterns and pattern languages before the Gang of Four was released.
• Calls Hacker News the "orange website".
• Works as an engineering manager at Attune
• Design Patterns are obviously worthwhile.
• How to enable and disable a discount without needing to redeploy?
  • Feature flag: allow disabling and enabling things without deploying
    • Fast rollback
    • Gradual releases
    • "don't roll your own feature flag"
  • Singleton pattern to fix an issue with a websocket being made every time a feature flag is set (?)
    • calls the singleton static #<name> = null <<using a variable name starting with a #>>.
  • Trace function -> Heatmap
  • Decorator pattern: wrap object and add new bheavior to those objects.
    • easy to remove, since you can easily remove the line of code
  • Proxy pattern
    • controls access to an object
    • returns a cached vaalue
    • Proxy exists in JS
    • new Proxy(obj, handler);
      • handler is an object with a function "get" used to trap the return value
      • mdn proxy docs
  • Fluent interface -examples

      - knex query building
      - jquery
      - rxjs
    

Notes by kevin

• feature flag

a few good design patterns

Saimon Sharif

• EM at Attune

• origins from Gang Of Four - Design Patterns book

  • book contained 23 design patterns

• community has different reactions to design patterns

  • some seem very obvious
  • may seem too complicated
  • dynamic languages, eg JS, have different requirements/constraints than Java/etc

• useful to turn implicit knowledge into explicit

  • helpful to name concepts - provides a common language
  • code reviews

• hypothetical example - notepad startup pivoting to NFTs

  • going to add 90% discount - add abiity to enable/disable without deploying
  • solution: feature flag

• feature flag lets us enable/disable things without deploying, enable fast rollbacks & gradual releases

  • some vendors have admin panels to facilitate this
  • rolling your own feature flag service is a can of worms, don't do it - bad past experiences

• scenario: feature flag library creates a new websocket connection everytime feature is enabled

  • solution: use Singleton, ensure only one connection is created
  • singletons useful for accessing shared resources - files, database, cache

• scenario: add observability to getPrice() function

  • using performance API to measure execution time
  • would need to change all code to wrap w/calls to performance API
  • solution: use decorator pattern to annoitate functions to be instrumented
  • decorators - still TC39 proposal, available in Typescript
  • decorators are easy to add/remove

• scenario: getFavorites() function does DB stuff, needs caching

  • would like to add caching anywhere in a generic way
  • solution: use Proxy pattern
  • proxies allow us to control access to an object; we'll use to return cached value
  • built-in to Javascript, though syntax is a bit hairy
  • example of caching Math.random
  • result is clean & simple w/separation of concerns

• scenario: CEO wants to launch duplicate NFTs/object feature

  • like JQuery or Knex - method chaining, use their own DSL
  • solution: fluent interfaces
  • our own version of method chaining

• two ways of learning
  • just-in-time vs just-in-case
  • neither better, good to know your bias
  • try the opposite of your normal way of learning

The contents here is created from the official CascadiaJS Page

Overview

• name: Shawn (swyx) Wang
• Speaker Page

Abstract

In the beginning, Jane and Joe Webdev were tempted by Satan to eat the forbidden UX fruit from the Tree of Three Tier Architecture, and God banished them from paradise forever. Here's how we fight back.

Notes

No need to take notes, they are on his site.

6 talks in 1 with the goal of changing lives and career paths and to aim higher.

• standard
• reality
• local
• async
• ?
• ai

Shawn's site (will be posting notes here)

An Industrial Strength Audio Search Algorithm.

Jason Miller listed out a bunch of Application Holotype. You can go from an app holotype and choose technologies based on what you want to do.

• Edge first

  • Deno
  • Global everywhere
  • Ryan Dahl is running with Remix

• Meteor Minimongo

• AWS AppSync DataStore

• SQLite in the browser

• Showing a tremendous amount of resources, need a link to this presentation to look back on.

• async await has made async extremely simple to read and write.

  • removes callback hell
  • GH Actions fails a lot with scraping.

• Orchestration with Temporal... it's a career

• data engineer and data analyst are much more in-demand than FE/BE/FS devs

  • data can improve dx

• TIOBE indexes

• https://applyingml.com/papers

• prompt engineering

  • https://en.wikipedia.org/wiki/Prompt_engineering

Notes by kevin

• talks online

• 6 talks in 1

• shifting paradigms

  • standard vs reality

• what is full stack?

  • traditional (front/back, 3 tier, etc)
  • reductively simple

• other stacks

  • lamp/mean/jam
  • 3tiers
  • osi layers

• app holotypes

  • what are the sort of apps

• examples of wow apps

  • arxiv-sanity example
    • additions to arxiv
      • keep track of recent papers
      • search
      • etc
    • turn website into app
  • some generalizations from arxiv-sanity
    • enrich data
    • validate existing data
    • personalize data
    • notify on new data
    • etc
  • book recommendation on hn
    • hackernewsreading
  • shazam

• 4 paradigm shifts

  • local first
    • techs
      • pwa
      • wasm
    • move backend closer to user
    • embedded database
      • eg.
        • meteor minimongo
        • appsync
        • sqlite
        • duckdb
    • lots of advantages (see slide)
  • async
    • should be easy
    • why valuable
      • one click buy, counter 70% cart abandonement
    • lots of async tooling (eg. sideqik)
    • workflow orchestration (eg. temporal)
  • data
    • big data
    • data as moat
    • job posting growing faster than developers
    • ETL vs ELT
  • ai
    • eg. prompt engineering
      • theres a prompt marketplace!

The contents here is created from the official CascadiaJS Page

Overview

• name: Tejas Kumar
• Speaker Page

Abstract

Web devs are often confused about data. What database do we choose? What are the tradeoffs between NoSQL and MySQL? This talk answers these questions and gives web developers DBA-level skills to help them build with data reliably.

Notes

Data as a front end engineer

• Works at zeta
• Goal is to eliminate imposter syndrome

SQL or NoSQL?

… relational vs non relational

SQL

Pros

• Declarative
• Normalization - reduce redundancy
  • Great for connecting data together

limitations

• Hard to scale

NoSQL

• Built for scale
• Heavily partitionable
• BASE - response to ACID
  • Basically available soft state eventually consistent

NewSQL

• AWS aurora
• Convenience of sql with scale

You can use both… relational for current data Non relational for old archival data.

• adven-Tejas
  • works at xeta
• SQL
  • Has ACID interactions with the database
    • Atomicity
    • Consistency (TS at database level)
    • Isolation
    • Durability
• Data Infrastructure > Database
  • It's more important how you have things setup. You could move between a relational and a non-relational database.
  • Search engine is part of data infrastructure.
• Tribalism is bad.

Notes by kevin

• data in the browser, lots of variations

• backend

  • aws
  • sql vs nosql
  • relational vs non-relationsnal

• relational & acid

  • atomicity
  • consistensity
  • integrity
  • data partition

• limitation is scalability

• nosql

  • great for scale
  • unstructured
  • partionable

• base

  • basically available
  • soft state
  • eventual consistency

• new sql

  • sql & nosql
  • eg. aurora, fauna

• what to use

  • it depends
  • bank deposit: sql
  • upvotes: nosql

• why not both?

  • data infrastructure > database

• takeaways

  • tribalism is bad
  • integrity good
  • data > databases

The contents here is created from the official CascadiaJS Page

Overview

• name: Trivikram Kamat
• Speaker Page

Abstract

This talk will cover how your JavaScript package can support various runtimes and module formats, while keeping bundle/publish/install sizes in check and providing types/sources/source-maps.

Notes

(starting notes a little late)

• bunch of criteria and it depends.

• Module formats

  • defines a module

• Of course we should only support ESM.

• Package has a carbon footprint depending on the size of the bundle.

• Reduce publish size

  • only publish required files with package.json 's files field.

• DefinitelyTyped will reduce package size. lol

• TypeScript dist tags.

  • You can have a @variant (Private) on a package name @scope/<name>@variant when exporting a package.

• Provide ESM version of your package.

• Smaller modules

• Tree-shaking.

• Publishing a JS package:

  • Small package size
  • Observability with Open Trace (types.d.ts)
  • Support ESM and Common JS with multiple packages.

Notes by kevin

• speaker

  • three-vikram
  • #CascadiaJS (Private)

• publishing

  • browsers:
  • servers: nodejs, deno, etc
  • ns native: react, native, flutter
  • module formats: cjs, esm
  • sizes: publish, install, bundle
  • types: flow, typescript
  • debugging: source, sourcemap
  • observability: open*, etc

• criteria to consider

  • depends

• publishing criteria

  • why, how, what

• browser, why?

  • script on browser
  • isn't js support fragmented on browser
  • yes but
    • IE retired in 05/15/2022
    • safari competitive? (lol)

• server, why

  • nodejs most popular
  • deno
  • fragmentation?
    • web interoperable runtimes community group

• deno, how?

  • experimental npm support

• bun, how?

  • compatible?

• js native, why?

  • write javascript, ui framework create native apps
  • have limitation
  • perf tradeoffs, has become better

• module formats, why?

  • ...

• module formats, how?

  • supporting cjs/esm, you can use esm module wrapper
  • gen-esm-wrapper

• sizes (why)?

  • publish: pkg being published

  • install: node_modules on install

  • bundle: bundled artifact

  • why important?

    • load times
    • constrained environments (eg. serverless)

• reducing size

  • publish:
    • remove unecessary things in package.json
      • eg. move types to definitely typed
  • install
    • minimal dependencies
    • provide variant of pkg for resource-constraint environment
  • bundle
    • tree-shakeable code
      • named exports
    • publish esm version of pkg
    • remove side effects

• types (why)

  • ts popular
  • ecmascript proposal for type annotation

• debugging (why)

  • you have a language that compiles to js
    • source maps for debug

• observability (why)

  • help measure state of app

• observability (how)

  • add opentelemetry package

• conclusion

  • brwoser: support modern browser
  • server: nodejs with deno support
  • js native: depends
  • module formats: cjs+esm or esm only
  • sizes: aim small
  • types: publish typescript types
  • debuggign: provide sources
  • observability: add hook to open telemetry

The contents here is created from the official CascadiaJS Page

Overview

• name: Vladimir de Turckheim
• Speaker Page

Abstract

Multiple features in V8 and Node.js are not fully documented or less known by most users. These features can be used to optimize the execution of code or debug it with superpowers.

Notes

@polesdesfetes (Private)

Staff engineer at Data Dog.

V8 Engine

• Takes JS as input and executes it
• Createed by Google, open source, C++
  • https://chromium.googlesource.com/v8/v8.git
• good resource
• document is not defined in V8
• Doesn't just interpret JS
  • Parse to AST
  • Ignition: bytecode generation
  • Sparkplug: fast codegen
  • Turbofan: optimized codegen
  • reminder you can define numbers as 1_000_000 in js
    • underscore in numbers
  • objects have a Map, a hidden class.
  • what is % in fromnt of functions? It's "Native syntaxes". console.log(%MaxSmi())
  • You can set V8 flages with node using require('v8').setFlags (?) ('--flag')
  • Native syntax: undocumented V8 APIs.
  • Benchmark JS for testing optimizations... optimizations DO matter, up to 2x faster for a simple add function.
  • V8OptimizationStoatus() to get the status of optimization
  • How do debuggers work?
    • Chrome Debug Protocol
      • Has a Heap profiler and CPU profiler
        • CPU profiling is done with polling, similar to the top program (?)
  • See the Torque language which compiles directly into v8 bytecode. torque

Notes by kevin

• javascript engine

  • multiple engines: v8, spidermonkey, apple jscriptcore

• v8 executes js in context

  • ecmascript web specs not part of v8
  • chromium embeds v8 and provides DOM apis
  • node embeds v8 and provides system apis
  • ruby racer embeds v8 to call js from ruby

• v8 does not just interpret js

  • many parts
    • parse, optimization, codegen
    • turbofan: part that optimize code

• optimizing

  • what v8 mainly optimizes
    • inlinable functions
    • function with stable signature

• functions example

  • #todo (Private)

• objects example

  • getObject 1e6 times
  • to optimize object, requires
    • same fields with same type
    • types crated in same order
  • calling same object initialized with object of different order will stop optimizations

• native funciton syntax %

  • run v8 with --allow-native-syntax

    TIP: you can set v8 flags inside nodejs

  • native syntax are undocumented v8 apis, used for testing and debugging
    • you can find the v8 source
    • docs are in v8 tests
  • can used to manipulate optimization (eg. never optimize this function)

• what can i do with native functions?

• question1: are optimized functions faster?

  • benchmarkjs to test

• question2: check optimization status of a function within code

  • print to debug
  • if you keep opt/de-opt function, v8 will give up on your code

• question3: can i manipulate memory related stuff

  • yes, but please do it

• how does devtools work

  • chrome debug protocol
    • websockets
    • communicate with v8/chromium
    • access debug interface:
      • debugger
      • heap profiler
      • cpu profiling/code coverage
      • dom (browser only)
      • eg. playwright uses this
      • eg. remote debug node
    • gives access to everything in node process

• debug protocol

  • cpu profiling is polling based
  • control polling rate from protocol (not available in dev tools)

• heap profiler

  • show everything in heap
  • eg. find memory leak

• why

  • remote debugging
  • atuomated diagnostics
  • script debugging
    • eg. add breakpoint
    • execute code and check heap
    • canbe used in extensions

• other topics

  • v8 inlining
  • torque language
  • v8 treats web assembly
  • how v8 manages strings
  • etc
  • most of this is on https://v8.dev/

Notes by aminamos

• v8 is a JS engine
  • the engine takes JS code as an input and executes it
• v8 is one of many engines
• DOM manipulation APIs are not defined in v8
• node embeds v8 and has JS APIs
• v8 is embedded (ruby, deno examples)
• turbofan, sparkplug, ignition
• [discussion around code optimiziation, de-optimization, re-optimization]
• are optimized functions better? yes
• can I check optimization status of a function in the code? yes
• chrome debug protocol convo, CPU profiling is polling based (and this rate is configurable)
• can get heap dump, then dig into info in dev tools (all objects, all streams that are currently alive)
• other toppics
  • v8 code inilining, WebAssembly, string management, torque language, v8 snapshots
  • check out https://v8.dev/