DinosaurJS 2019

  • Conference
  • DinosaurJS
  • Code
  • JavaScript

I'm writing from chilly, rainy Denver after a couple of fun, enlightening, inspiring, and exhausting days at DinosaurJS. It's a wonderful, two day JavaScript conference run by passionate people. The first day was a full day of traditional conference-style presentations and the second day offered a small selection of workshops focused on specific tools and products.

Off the bat, a highlight about the conference was that they took inclusion incredibly seriously. The JSConf Code of Conduct was brought up multiple times each day. When everyone arrived at the beginning of the first day, at the badge pick-up desk there were baskets with buttons that would reflect your pronouns, and attendees were highly encouraged to wear them, even if they didn't feel like it was necessary.

Secondly, I have to shout out the cute aesthetic of the conference. Dinosaurs everywhere!! I loved it.

Takeaways

Before I dump my notes from day one (didn't take any for the workshops on day 2 unfortunately), I just want to highlight some takeaways. Inspiration abounded in that room. There were two first-time conference speakers who crushed it! Everyone I met was so nice and open. I was really nervous that I'd be out of my depth, in a room surrounded by devs that were lightyears better than I am. But that wasn't the environment at all. I met tons of folks who were out of bootcamps, in their first dev jobs, struggling with the same culture issues that I do. I met more senior devs who were eager to hear my story and share wisdom from their journeys and encouragement to keep up with mine. This was such a wonderful experience and I think I'm hooked.

Lastly, some quick takeaways. I don't remember who said all of these, but as I update my notes, if the attributions come to me I'll mark them here.

The goal of the web is communication. - Sarah Drasner

We build apps to solve problems. - Tejas Kumar

Often the term “dinosaur” is used to mean unadaptable and obsolete. But Dinos were around for millennia and are actually beacons of resilience. May your code be a dinosaur. - Hayley Denbraver

Document anything that's weird. - Saimon Sharif

Humans First. - Tejas Kumar

Quick note: I plan on updating the following notes with links to slides, Twitter profiles, etc. as I have more time. But for now I have to run to the train station!

Notes from DinosaurJS 2019

9:15 am - Welcome to DinosaurJS 2019

Speaker: Jasmine Greenaway

  • Co-organizes BrooklynJS

Housekeeping:

  • Hashtag: #dinojs
  • Questions: @paladique w/ the hashtag
  • Code of Conduct
  • Format: 25 minute talks w/ 5 minutes of Q & A

9:30 am - Building a Babel 7 Processor

Video here.

Speaker: Cassidy Williams

  • @cassidoo
  • Snr. Software Engineer at Codepen
  • Mechanical keyboards

Building JavaScript for JavaScripters

Codepen:

  • Online code playground
  • Used to demo & prototype projects, as well as to make art
  • 8 people

The Pens:

  • Capabilities for advanced Babel compiling now

Let's go back in time:

  • Had a very "vanilla" basic Babel
  • Babel-polyfill was needed for extra features
  • Infinite loop detection was off for both JS and Babel
  • Extra plugins didn't work fully

What we wanted:

  • Babel 7
  • All the plugins
  • An extendable interface for future things
  • Infinite loop detection

Enter Babel/Standalone:

  • Seemed like it had everything
  • Not extendable

Had to do it themselves

  • Browser Support:
    • 12 people used IE < 10
    • Axed all compilation to ES2015
  • We had to be explicit w/ plugins they were using
    • Made troubleshooting much easier
  • Custom Plugins:
    • Visitor plugin
    • Infinite loop plugin
      • Check for exit statements in DoWhile, For, While statements
  • Babel config
    • Determines what's returned by Babel
    • Babeljs.io/docs/en/ ** WILL TWEET OUT LINK **
  • Babel processor
    1. Build the custom CodePen Babel 7 config
    2. Process the code
    3. Check for errors, code and import
    4. Build
  • Process
  • Handle errors
    • Validate imports
    • Find missing dependencies
    • Make sure code can run
  • Client response:
    • Report errors w. messages and line numbers

Tests!

  • Babel tests, plugin tests, client tests, and moooore
  • Wrote whitespace masher for Jest (open source available)

Hooking it up to the client

  • Passed to another person for integration

And voilà:

  • Babel 7
  • All the plugins
  • An extendable interface for future things
  • Infinite loop detection

Q & A

Q: What else touch on if time to expand talk? A: How she learned to navigate of abstract syntax tree

Q: How'd you start learing about AST? A: Documentation, Babel docs, Babel team is helpful (Harry Roberts), asking on Twitter, Stack Overflow

Q: Working on any mechanical keyboards right now? A: Hasbro: had a dream she was typing on a Scrabble board, so she made it. Cold called Hasbro. Drop.com: helped with manufacturing, sold over 1000 sets.

10:00 am - A Postmortem on the Ingen Incident

Video here.

Speaker: Hayley Denbraver

  • @hayleydenb
  • Works remotely from San Diego
  • Developer Advocate for Snyk
  • Previous Talk: Welcome to Jurassic Park, where Chaos and Engineering Ethics Collide

Meeting of Board of Ingen at DinosaurJS

  • Hired to analyze failures that occured at Isla Nubar
  • Hired to review incident, catalog points of failure, and suggestions for going forward
  1. Review of Events
  • (the book)
  • (the movie)
  • Discrepancies between the two accounts
  • Video footage more accurate
  • Chaos theory: systems are complex and are likely to behave in unpredictable ways when small changes are introduced
  1. Flaws in Workflow
  • "Spared no expense" claim:
    • Outright fabrication. Luxurious resort, but dropped the ball on software
      • Application of Software:
        • Requirements given:
          • dispense food at prerecorded times
          • monitor electric fences
          • visual scans and report back
      • Software development team not given critical info
  • Result: Timelines and Scope Creep
    • Not enough time for testing
    • Missing critical features
    • Bugs
  1. Ethical Breaches:
  • Engineering Ethics:
    • Hippocratic Oath: First, do no harm
    • Dennis Nedry:
      • Introduced flaws to exploit for personal gain
      • Purposefully wrote code to be difficult to debug and expose his malfeasance
      • Led to deaths
    • Ingen Corp:
      • Malcom was right: Part One
        • park could never be safe
      • Corners cut in safety in interest of financial gain
      • Ethical breaches have capacity to compromise a system
  • Ethical breaches are a source of chaos
    • Unexpected & unpredictable
  1. Chaos Engineering:
  • Unethical behavior, fragile design, bad luck (storm)
  • What is chaos engineering?
    • Practice of breaking system on purpose, seeing how system reacts, documenting results
    1. Don't start on production, start with development
    • Hypothetical velociraptor
    1. Start Small and Iterate
    • Train on instant response, not restarting the generator
  • Failure Injection
  • How to build a better park:
    • Budget appropriately resources to software design and testing
    • Increase transparency between stakeholders
    • Hire professionals you can trust
    • Use chaos engineering
    • Ask whether you should, not whether you can

Hayley likes talking open source and security

Life finds a way

Q & A

Q: Common situation: we or leadership doesn't put enough time into testing or handling failures. How do you make the case to someone in charge? A: Certain types of problems that people don't think about until something goes wrong. You have to purposefully intervene. We need to learn how to talk to other teams better. Being able to discuss this with product, c-suite is really important.

Q: Blog post: You should reuse your talks. What's the evolution been like? A: Would be too overwhelming to do a new talk each time. Similar process as with code. Have a minimum viable product, but time and experience will show you what needs to be tweaked.

Q: Introducing chaos in production environments: A: Makes a lot of sense to start with dev, but there is a place for production

10:30 am - Announcement from Workday

Speaker: Will Klein

  1. Workday is hiring -- Boulder & around the world
  2. Welcome!

10:35 am - Morning Break

11:10 am - How to have an Amicable Breakup with a JavaScript Library

Video here.

Speaker: Daria Caraway

Dating & JS Libraries

  • Choosing a JS library is like dating
    • Honemoon phase
    • Attached at the hip
    • Open joint bank accounts
  • The Breakup:
    • You come w/ too much baggage/ Library bundle is too large
    • You've let yourself go / Library is depracated

What now?

  • Completely move on: Remove all references to the old library and start clean
  • Refuse to let go: Fork the old library and continue to maintain the broken relationship
  • Ghost them: Ignore that the usages in the code exit and build up technical debt
  • Remain friends: Remove references piece by piece while implementing the new solution

How to prepare for the inevitable breakup?

  • Speed date:
    • Goal: Prototype multiple libraries early
    • Get to know the library:
      • What does the library API look like?
      • How does this library compare and differ to other options?
      • Learn about design patterns and coding styles in the community
    • Get to know yourself:
      • What are our expectations for customization, performance, etc.
      • What feature set does our app need now & in the future
      • Share prototypes with team members and stakeholders to discuss
  • Easily bail on bad relationships:
    • Goal: Quickly switch out libraries without sacrificing code clarity or maintainabilitiy
    • Wrapper components/The prenuptial agreement:
      • Create demo applications
        • Example: Get Cute Pets App
          • Button from grommet in React
          • Write it out in a demo environment
          • Compare to other libraries, in this example material-ui
    • Might have to build one yourself if you don't like the libraries that are out there
  • Prevent future mistakes:
    • Goal: Write useful tests that do not rely on implementation details

Demo:

  • Live breakup with UserAgent & Grommet
  • Hasn't changed the TypeScript contract, it doesn't care about the implementation/the React component you're using

Breakups don't have to be messy:

  • Remain nimble in our ever-changing environment
  • Don't be tied down to you past decisions

Library opinions don't have to affect your code decisions

  • Normalized wrapper interfaces means library developers don't have to make your design decisions

Q & A

Q: Particularly bad JS Breakups? A: Yes. Working on a startup codebase. Nothing componentized. Just we need something so we'll just make it. Breaks up with a library almost every day

Q: How to define contract without TypeScript: A: Daria hasn't done it without TypeScript, maybe JSDocs?

Q: What are some things you look for when first evaluating a library A: In Angular, had to build a table with a lot of data, speed dated libraries to test for performance. At some point some didn't perform. Test what's ultimately important for your application

Q: Any thoughts about breaking up with an entire framework A: Currently moving from Angular 1.5 to React. This pattern probably won't help there.

Codemods: Refactoring JavaScript using JavaScript

Video here.

Speaker: Saimon Sharif

What is a codemod?

  • Scripts used to help with refactoring.
  • We can programmatically refactor out JS using transformers in JS

Why?

  • Allows for changes that are infeasible with regular expressions
  • Unblock complex application-wide refactors
  • Reduce technical debt
  • Save developer hours when refactoring

Possible refactors:

  • ES5 => ES2015+
  • Require => Import
  • Unblock upgrades after API changes
  • Convert React's PropTypes to TypeScript's types

Tips:

  • Have safety nets in place before using codemods
    • Treat the same as any other code changes
  • Don't make additional changes on codemod refactored branches
    • Don't change identifiers, don't change white space
  • Split up large refactors into multiple pull requests
  • Write documentation for any codemods, and include them in pull requests
  • Treat any coded scripts written internally as actual code
  • Codemods don't need to handle every single case
    • Edge cases can be dealt with later

Q & A

Q: How to manage CSS & non-JS resources A: Can tell codemod what files to consider or ignore

Q: A lot of these talks were about preventative measure, but yours is refactoring. Say someone joins your team. Thoughts/opinions on long-term maintenance. A: Long-term maintenance is very difficult. IF you can document anything that is weird, please do it. Otherwise write code with the assumption that one day your code will get deleted.

Q: What are some of the most ambitious codemods you've seen in the wild? A: React createClass codemod.

Q: Second time that Abstract Syntax Trees have come up. Is this something you just have to learn at some time in your career? A: Yes. Tooling has changed so much in the last few years. Eventually we'll all just become compiler engineers. It's not a JS concept, it's a CS concept. Lots of resources out there to learn.

Q: Good place to see preexisting repos? A: OS codemod github repos

Pika: Reimaging the Registry

Video here.

Speaker: Fred K Schott

Why do we need bundlers?

  • NPM

Why do we need NPM?

  • Awful ecosystem of imports
  • Node folks used browserify to unify

The web added tooling to access npm

  • ES Module (ESM) becomes native syntax for packages on the web
    • Bundlers become good at tree-shaking & optimizing
    • Except Node.js, which is still just on commonjs and doesn't get the optimization offered by the native syntax of ESM
  • Can build second dist of package:
{  "main": "dist-node/index.js",  "module": "dist-web/index.js"}

Pika was a way to search NPM for modern web packages

  • Helpers:
    • TypeScript definitions
    • Size indicator
  • NPM search for web developers

So why do we still need bundlers?

  1. Bad Sub-dependences (still in commonJS)
  2. Bad imports (package name, incomplete)
  3. Bade Node-isms (built for bundlers)

@pika/web

  • Run npm packages in the browser, no bundler required
  • Re-scopes bundling (only at time of dependency change) to address only those three issues
  • When one dependency re-updates, only that one will re-compile

For the first time in almost a decade, you don't need a bundler. You get to choose.

Q & A

Q: Does Pika have CLI client for search? A: No, just web

Q: Wishlist for features? A Just launched PikaCDN

Q: What does an ideal web bundle ecosystem look like to you? A: Excited about a low-effort entry path for developers.

Q: Performance of unbundled vs. bundled? A: It depends.

Q: If someone jumped into your project to help now, what would be a good contribution? A: Documentation

Q: What is treeshaking? A: If you only use one part of lodash, then in your build process you can eliminate all the parts of lodash that you aren't using.

1:40 pm - Data Science in the Browser: DX & UX

Video here.

Speaker: Jana Beck

  • Data Visualization Engineer at StitchFix

Where's the data science?

  • Verticals across the company:
    • Warehouse assignment
    • Recommendation systems
    • Client-stylist matching
    • Human computation

"Full stack" data scientists

  • ...but not with frontend web dev

t-SNE & UMAP algorithms

  • Take data-sets with many many data sets (100+ columns) and group them on a two- or three-dimensional plane.

Offscreen Canvas:

  • procudes a canvas that can be rendered off screen. It is available in both the window and worker contexts.

Slides will be available online 😐

Bob Ross:

2:10 pm - Workshop Announcement

  • 4 workshops, each offered twice. Much larger venues than last year.
  • 4 different locations
  • Interest form:
    • dino-guide.glitch.me

2:50 pm - Fhe Future of Web Animation

Video here.

Speaker: Sarah Drasner

  • Staff Writer at CSS Tricks
  • Author: SVG Animations, O'Reilly
  • Lead Developer Experience at Netlify
  • @sarah_edo

The goal of the web: communicating

What does this have to do with animation?

  • Animated movies - happiness, fear, sadness, curiosity
  • Touching Goodbye Scene, Monsters, Inc. (Boo & Kitty)

Cartoons give color and shape to our imagination and internal worlds

Anything can happen

Available Now:

  • Hooks (in Vue):
    • css-tricks.com/what-hooks-mean-for-vue
    • Might want to keep animation patterns consistent across an application (restaurant names animating)
    • Allow us to pass state from one to the other
    • Make it explicit where logic is coming from
    • sdras.github.io/vue-hooks-foodapp
  • Page Transitions
    • Reduce cognitive load & maintain state for the user
      • Moving burners on a stove
    • Nuxt (Vue's Next)
      • Offers page transition hook using CSS classes
      • Also has JavaScript hooks to control transition modes
        • Can transition a page out, then a page in
      • github.com/sdras/nuxt-type
    • Vuex (Vue's Redux) - Application-wide state - User switching with common transitions and layouts - Links (camera roll) -3d responsiveness
    • threejs.org/examples
  • AR
    • ARKIT 2.0
      • @OsFalmer - AR Business Card
    • AR Chemistry
    • AR Piano
      • @danielkuntz0
    • https://edu.google.com/products/vr-ar/expeditions
    • Static 2D is an abstraction
    • How Virtual Reality Benefits Seniors by Aditi Khazanchi
    • SeaHeroQuest.com -can help detect early onset alzheimers

Take up space

Think bigger

Q & A

Q: Remember when canvas was introduced, what did you think about animation on the web then, what's come true? A: When people were making myspace and tables, people were out there with layouts and pushing boundaries. But then wound up having to do real, solid work for the web. We tend to explore the boundaries of what's possible when we see examples of something good (Stripe does a good job). We got too serious and stopped remembering that people need to feel and remember your site.

Q: Animation is supposed to evoke a feeling. Colors are psychological. How do you see the future of animators, designers, and frontend devs working together? A: We need better tools. Spend a lot of time animating and failing, which a lot of people don't have time for. How does the designer's concept translate to work for a developer. Hope for more primitives in the future to make that hand -off easier

Q: Animation in CSS vs. JS? A: CSS can be very performant for easy A => B animations. I tend to do animations with SVG. JavaScript can smooth out the clunkiness of CSS. When you start chaining things together and need a timeline, move to JS. JS can also easily speed things up and slow them down.

3:35 pm - The Art of Teaching

Video here.

Speaker: Lori Culberson

  • Slides: bit.ly/dinojs-lori
  • Software Engineer, The Home Depot
  • Teach software engineering classes
  • Public school teacher, 13 years
  • @irongirltx

To provide insight into:

  • How students learn
  • Best practices that help students learn in a safe, empathetic envitonement

Vocabulary:

  • Teacher: someone who has knowledge to share
  • Student: someone who learns from a teacher

Identify yourself as an instructor.

  • Either one on one or one to a group

How we learn:

  • "Yippiebop!"
  • Your brain starts to look for clues first
  • 'Mechanic said old yippiebop wouldn't start"
  • Makes a check list based off clues to build context
  • Building Schema
    • Schema
      • Building blocks for knowledge
      • Info you needed to know before something makes sense
    • New knowledge is built on already existng knowledge and prior experiences
      • Constructivism, Jean Piaget
    • How to facilitate building schema:
      • make the content meaningful, relatable, and personal by connection the learner to something they already understand

How we tend to teach:

  • We tend to teach the same way we like to learn
  • However, students do not necessarily learn by our chosen modality
    • visual
    • aural
    • read/write
    • kinesthetic
  • We all use all of these learning styles

How should we teach:

  1. Set the stage for a no judgment learning zone
  • It is okay to make mistakes
  • If students do not understand, the teacher should figure out a new approach
  1. Provide learners with clues
  • Spell out acronyms
    • Ex: CDN, Content Delivery Network
  • Provide a brief explanation for "new" vocabulary
    • Ex: "Remember how we added Bootstrap to our first project?"
  1. Explain in byte sized pieces
  • Avoid verbally overwhelming explanations
  • Talk for only 3-5 minutes, then check for understanding
  1. Check for understanding
  • Ask students to summarize what they learned, then provide quiet think time!
  • Techniques:
    • Pair & share
    • Write a summary
    • Draw a picture

How confusion impacts learning

  • Benefit of confusion: Making errors facilitates learning, as long as corrective feedback follows.
  • Drawback of confusion: If a student experiences confusion and it is not resolved, the student is likely to become frustrated and bored.
  • Why is this important?
    • It validates the need to tighten the feedback loop and check for understanding more frequently to reduce the duration of confusion.

Why we should avoid sarcasm

  • sarcasm: mockery, ridicule, derision
  • sarcastic comments are putdowns wrapped in humor

Summary:

  • How we learn: connect new content to prior knowldge
  • How we should teach: provide quiet think time; allow students to explain, write, draw or build new knowledge
  • Confusion: double-edged sword - strengthens deep learning, but can be detrimental if stuck too long
  • Sarcasm: does more harm than good

Q & A

Q: What are good quick questions to check for understanding? A: So what do you think is happening here? Walk me through this block of code, play computer and tell me what's happening to each step. How would you explain this to one of your co-workers? DON'T ASK How many of you didn't understand?

Q: Is the 3-5 minute rule scientific or just anecdotal? A: Just learned from the classroom. How long do you want to listen to someone talk to/at you/

Q: How long is too long for a learner to be confused? A: No set time, you have to watch and monitor if people are on Slack or email.

Q: How do you learn how to be more patient? A: Have children. When you're teaching someone, they are vulnerable to you. That vulnerability requires empathy to create a good classroom experience.

Q: Journey from education to software development. A: Natural attraction to help people and teach. Could figure out what was tripping people up. At some point started a computer science club for 2nd - 5th graders, found it fun. Wanted to build an app, got billed from a software engineer, decided to attend Turing for the same cost.

4:15 pm - Announcements

  • After party at Rhinehouse, left on 14th until you hit Market

4:40 pm - A Partial Taxonomy of Test Unreliability

Video here.

Speaker: Rich Trott

  • @Trott
  • UCSF Library
  • Works on Node Core

Worked on fixing flaky/unreliable tests

  • Succeed 99% of the time, but fail at unpredictable times

Science, Taxonomy

  • definition based on shared characteristics

(Camera roll)

Q & A

Q: Windows? A: Just need more Windows representation in Node

Q: When do you know you have a flaky test and not a real failure? A: Run continuous integration on a pull request with differing results for different machines and people.

A Tale of Two Architectures

Video here.

Speaker: Tejas Kumar

Two architectures:

  • Native / Progressive Web Apps

We make apps to solve problems

  • Whimsy is meaningful

Tejas has Hemophilia and will bleed to death

  • Humans bleed all the time
  • Expensive medication for this disease
  • He has free medicine in Berlin, but the medicine doesn't last long.
  • No "fuel" after x hours = dead

Solution: let's build an app!

Trade-offs of making Native vs. PWA

  • Keyboard avoidance example
  • 66.7% of all developers use JavaScript

Native of Progressive Web App?

  • Progressive Web App: Standard web apps that progress to being an app on a device, through service workers, through working offline, through icons that can be saved on your home screen
    • Tinder cut load time from 11.91 to 4.69 seconds with their new PWA
      • 90% bundle site
    • Uber PWA designed to be fast even on 2G
    • Pinterest PWA engagement went up by 60%, 44% increase in user-generated ad revenue
    • @firt on Twitter
    • Write JS, bundle it, ship it
    • Easy to create, but hard to create right
    • Good:
      • Work on all devices for "free"
      • A single codebase for everything
      • Universal experience
      • Use known tools as web developers
      • Use Web APIs
      • Use device features when available
    • Bad:
      • Hard to monetize/market
      • Limited access to device APIs
      • Cross-app communication is impossible
      • UI/UX inconsistency
      • Browser Support
      • Security
  • Native:
    • JavaScript => JSX => Metrobundler => iOS, Android, etc. (no output for web -- but work being done in this space)
    • Good:
      • Write React once, deploy everywhere
      • Easy monetisation and distribution
      • More ready access to native APIs
      • Easy cross-app communication
      • PWA-ready web version
    • Bad:
      • Different APIs for different devices
      • Seemingly trivial tasks are more complex
      • Requires Android Studio and Xcode
      • Wiring up dependencies is a little complex

Which one should I use?

  • It depends
  • We make apps to solve problems
  • It's all about tradeoffs
  • Humans first

Q & A

Q: It sounds like you lean toward PWAs in a perfect world. A: It depends.

Q: Could you debate with yourself for both sides A: PWA would be for marketing things, immediate easy access to where they don't mind data leaking to the cloud. Native if security is a demand or if I need heavy interaction with local APIs

Q: What do you enjoy working with most? A: Enjoys working with React Native, it's like writing React. With PWAs I have to think about/debug service workers.

Q: Are their browser compatibility issues with PWA? A: In the past yes, not so much now. Service worker support was slow but is here now.

Q: Do you have an idea of what you want to see in PWAs in the next year? A: Yes, would love Apple extend first class support for PWAs in app store.

Takeaways

Lookup

  • Abstract Syntax Tree
    • astexplorer.net
  • "The Great Divide", Chris Coyier
  • Web Workers
    • concurrency in JavaScript
  • follow @joshcarpenter