December 24, 2018
16 min read
CascadiaJS was a single track conference of 24 amazing speakers discussing the cutting-edge of JavaScript, web development and engineering culture over the course of 2 days in mid November. These notes are from the second day of the event and the accompanying talks are now online.
Brian Leroux
Number 1 problem with serverless is that nobody cares
Did a livecoding serverless project demo to show you why you care
Used open source project called architect he works on
Demonstrating .arc file as a configuration for a serverless app
Cold start is less of a problem now if you have small lambda functions
Build small functions across lots of lambdas. Your whole app doesn’t belong in a single lambda
Only pay for what you use
Better security model, sandboxed and torn down after every execution
Focusing on business value, less time maintains infrastructure
Faster to deploy
Laker Sparks
Roblox, Lua based platform to teach young developers to build games
Jumpstarted someone’s career (for the case study) because they started so young
Incubators and accelerators for young people, but lacking real applied experience on their own
Don’t force it
Help them realize they don’t have to do it all, learn how to collaborate and get soft skills
Not advertising for the best of the best, you’re asking more for a confident personality type than a skill set. Focus on a range of people instead. Drive & passion are important.
Hour of code
Roblox, creator challenge
Will Klein
First problem we run into: Code reviews. There’s room for improvement, tribal knowledge.
Changing language features are also something you have to keep on top of to actually apply
Dealing with api changes in external frameworks
Compilers break stuff down into parsing, transformation and come generation
Super tiny compiler by Jamie builds
Abstract syntax tree is code representation, the DOM is a tree web devs use all the time
ASTExplorer.net
Writing an eslint rule for nested ternaries in astexplorer. Just a js function with a special reporting output.
Write a Babel transform for variable declaration and assignment with same name shorthand
Astsareawesome.com
Use ASTs for code review!!! You can write your own custom eslint rules to do this!!!!
Code modifications
Build your own tools!
Faddah Wolf
Demoed how unfriendly using a smart phone is when blind, open your phone and send a text with your eyes closed
Universal design lab at psu, started a project to help family of visually impaired learn Braille
Building a 6 input Braille keyboard that doesn’t break mobile app experiences
Built a React Native 6 key input package on npm to offer a more seamless experience than what android and iOS offer
Used multitouch to input complicated Braille characters. Demoed React Native gesture responder implementation
Check out open source UEB (universal English Braille) package as an alternative to OS standard accessibility inputs
Note: progress bars on talks are very nice
Aaron Gustafson
Lots of data is trapped in non semantic web pages that can’t be accessed via text or voice (virtual assistants and screen readers)
Phrasing elements (inline elements) like <em> or <strong>. Covered a lot of semantic use cases
Links. Id headings for anchor tags. Download keyword. Use semantic language, not click here.
Organize the actual content in your web page
Landmarks, ARIA tags
Give elements a “role” attribute to describe what elements function as for assistive technologies
24 ways to impress your friends site
Use other meaningful elements besides just a div
Forms are often poorly executed on for accessibility. Use label elements. Use the right field types.
These allow browsers to perform special inputs or validates for special fields. Perfect example of Progressive enhancement, and adaptive web design book
Lots of cool specifier autocomplete tokens can be used in form input fields “shipping mobile tel” as an example
Pattern attribute for creating your own validation logic in modern browsers
Memo Doring
VUI are a new important type of UI but they’re not here to replace other types of UI (like web, mobile, GUI)
Ask-sdk is the Alexa api package
To write a js Alexa skill, you work with a JSON representation of a voice command and then return it back to Alexa with JSON.
Need multiple language models for different locales because languages work differently even if words are the same. Like UK trousers vs. US pants
Map the literal language that is spoken to the “intent” behind the code. A bunch of “utterances” get mapped to a specific intent. This is used to train a ML model.
Live code an Alexa cascadia.js intent
Voice design tips
Friction is the enemy! If it doesn’t pass the couch test, it’s not a good use case for voice
We don’t talk the way we type, say it out loud before you think it’s good
Follow the one breath rule, if it takes longer than a breath to say it’s going to be too much information. Talk to humans not at them.
Variety is your friend. Add variables and change it up.
Design for situation: utterance, situation, response, prompt. This can all change how we respond
Flowcharts are bad for designing a voice conversation. It can go anywhere at all.
Pranshu bajpai
ransom ware - initial entry, encryption secret, file encryption, and then a ransom demand
RAA ransomware is the first entirely JavaScript written
Specific indicators of compromise, you can detect network requests and file system changes caused by the library
Takes advantage of the windows script executor
Cryptojacking - use of infected computer to mine cryptocurrencies
It’s very observable right now because they use all of a systems resources, but they’re getting smarter and using more discrete tactics
Better ways to detect malicious websites? How to protect users? How to keep ahead of attackers? What other services could attacker’s exploit besides WScript?
Atishay Jain
Interacting with native code (c++) from inside of node.js
Why write Native code? You can talk directly to the OS. You can also use existing c++ libraries. You can also improve performance.
Child process
Foreign function injection, lets you inject C external functions directly into JavaScript. Helpful, but can still be slow.
Native abstractions for node, a wrapper over v8 internals so that a native app can interact with JS
N-API, stable with node 10, backwards and forward compatible, designed to work well with js and cpp.
Demo app of integrating imagemagick within a node app, and easy to load in electron as well
Tips and tricks, don’t write native code!
Glenn Block
A mentor is a person volunteering to help others be successful, and have more experience than you do in an area
Mentor types, role focused, is a mentor who helps you do your job better
Career/growth focused mentor can help you figure out your career path and find good opportunities from a different vantage point
Skill specific mentor, teach you one specific skill (like pricing)
What makes a good mentor? They’re more experienced than you. You feel comfortable talking to them. You trust them. They’re a good listener. They’re consistent and available.
A mentors job is not to solve your problems, but to give you advice to help you work through it yourself
Finding a mentor. Company programs. Friends or coworkers.
James Snell
How can you tell how all the different ways of scheduling async task execute?
Four things you need to answer: The event loop, the next tick queue, the micro task queue, JavaScript is not asynchronous (you can schedule it async, but it’s not fun async).
Event loop executes one task at a time
First rule of node.js performance is to know when all of your functions are running.
Trace events! Node outputs JSON events whenever significant events happen inside of node (like what async thing is happening right now). Async hooks api facilitates this.
Chrome://tracing - it can parse the trace event file and builds a timeline of your node process
Clinic.js - helps diagnose problems in your node apps
Ruth John
Audio visual artist, build visualizations to accompany provided sound files
Web audio api allows you to process audio file data
Interact with css transforms or dom or svg manipulation
D3.js - data driven documents
Canvas visualizations in 2d/3d
Web MIDI API - its a data protocol describing digital instruments, not just bleeps sounds
Can use a midi controller pad to ad additional functionality as an input. Different than a keyboard...?
Mikeal Rogers
The web is built on the network effects of links.
URL parts: transport, authority, content. What do I want (index.html), who do I ask for it (domain), how do I get it (protocol)?
Data centralization is built into the way the web functions today
Because of this developers have to gain attention as much as possible to support data infrastructure via ads
In a decentralized system, you need a way to address data without specifying the owner. This uses a cryptographic hash.
A CID is a content identifier (the hash of a document) a pointer that spans the internet
This content addressability issue allows truly decentralized data. No one piece of data can compete with the type of data twitter or Facebook has. However large data aggregators can’t compete with all of the info in a decentralized data network