Microsoft Developer Advocate for Internet Explorer. Contributing Editor to Smashing Mag.
How can I know developers pain points without working in the same environment as developers. That's why I use a Mac.
The question for developers working in Mac and Linux becomes, "How can I test IE in a Mac or Linux?" A lot of developers simply think the solution would be for Microsoft to kill off IE, but the main reason for this is that they don't understand the features that are available in IE.
Some important links
Q. Why should I test IE?
A. 58% of users of the internet are still using IE.
Q. Why doesn't IE just make people update?
A. Large companies have to certify to a specific version of a browser (like American Express, Fidelity, Chase, Disney, Reuters...) If you want these to be reliable, they can't go through the upgrade process every 6 weeks.
Microsoft is offering an Enhance IE8 emulation mode in IE11 to help enterprise deal with this challenge. They're also giving free updates to Microsoft Edge for IE 7, 8, and 9 users.
Older Version Testing Tools:
- ngrok
- Virtual Machines - Free Virtual Machines to download to test IE.
- Browserstack - Browser extension to test IE. Paid.
Microsoft Edge Testing:
Mobile Testing: Vorlon.js
- Open Source
- Extensible plugin architecture
- Platform agnostic
- Powered by Node.js
Web Inspector Remote (aka weinre)
How about a headless version of IE? We're working on it.
Web engineer at the Mozilla Foundation
The web is broken:
It's not mostly broken for JS devs (on Chrome and Edge), but most people coming online, it sucks. And that's because their experience is on the mobile web, which isn't good enough.
Why is the mobile web not good enough?
- UI perf
- Auth / security
- Offline / intermittent network
- Device / OS integration
But....we're working on it
- Browsers
So, what do we do?
I feel like it's time to revisit the web vs. native debate, and concede defeat -- or, at least, concede that the web cannot, and should not, compete with native when it comes to complex, app-like structures.
This argument is totally reasonable, especially for online games, but I don't think we should abandon the mobile web idea.
Do you remember 2004?
Tops Tech Topics of 2004:
- Wallpapers
- Kazaa
2004 was also the year that Google first released Gmail. It was the cool thing at the time because it had live updating without needing a page refresh. Ajax was not common or expected at the time.
When I decided to write the Gmail interface in Javascript, pretty much everyone who knew anything about Javascript or web browsers told me that it was a bad idea. It had been tried in the past, and always ended in disaster. But times change fast, and fortunately I was in an environment where doing impossible things was not just permitted, but encouraged. After we launched, the impossible quickly became the new normal, completely changing how we think about web apps. That's fun.
- Paul Buchheit, lead dev of Gmail in 2004
But, at the time there was a LOT of hate for building things on the web in JavaScript. Despite this, Gmail was living proof that you could write apps on the web in JavaScript. The "XML HTTP thing" was finally standardized in 2006.
The point of all of this, is that today we are here to hack JavaScript.
3 levels of hack today:
1. Test new features before their time.
- Service Workers!! (coming to Firefox in fall 2015)
- Transpile! Polifill! (like Babel)
- This is not controversial stuff...
2. Build new Abstractions
- React, etc...
- Filer
3. Blow sh*t up
- What if you could hack the user agent?
- Get Involved
- Cordova
- Let's build our own.
What's we're doing on Mozilla?
How can we get people internationally involved in the web....on their mobile device (not iOS)
Challenges?
- Poor offline experience
- Memory leaks in long-lived processes
- UI perf
- Android < 4.4
Basic Architecture for this custom mobile app.
- Start with "Android Activity" (like a header for the app)
- Inside the activity, instantiate a "WebView"
- Use Crosswalk
- Expose a custom Java interface to JavaScript
- User Androids routing (we get native transitions)
- Waht about state? pass route params and cashe state in React
- Camera integration
- Bind to Android's offline network caching utilities
- Hook into native gestures
- Device/OS Integration (like push notifications)
- ???
Will it work? Who knows...but, you get to build the web you want.
If all you're doing it pushing up against the edge of the browser, things aren't going to change.
Developer Evangelist for @Respoke
What the Heck is WebRTC?
a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple JavaScript APIs.
Contributors?
Google, Mozilla, Opera
WebRTC in the Wild
- Amazon MayDay - live video with a support tech. They built this using WebRTC for the video implementation and their existing phone systems
- Google Hangouts - No longer need a plugin.
- Apollo - Video calls
- PeerCDN - Peer bandwidth sharing for files in your web app.
- Cubeslam - Showcases WebRTC for games.
- Speaking Exchange - Pairs students learning English in Brazil with nursing homes in US.
- Be My Eyes - App for visually impaired to request help through Video.
You don't have to learn flash or anything crazy for this stuff to work, you just need to know JavaScript.
How Does WebRTC Work?
Slide Visuals
Respoke helps you handle all of this peer to peer media process.
- Open source
- Cross-browser support
- Endpoint Discovery
- Groups
- Messaging
- Presense
- Phone System Support
- Mobile SDKs
Respoke Demo Time
Developer & Instructor at Big Nerd Ranch.
Talk inspired by "Programming from Nothing".
This talk on JavaScript will restore your faith in closures.
closure() === scope + statements;
ForTran and Ruby
Convert a method to a lambda in Ruby: lambda(&method(:events_path)) OR JUST USE JAVASCRIPT @deisinger
Do these 5 things to create our closure polyfill
- NO function params, var, variable assignment
- NO function memoization
- ONE global variable
- Amnesic function bodies
- Shortcut local variables
Use this code, never run slow JS again!
s('local', 'Variable');
console.log(g('local'));
f('func', ['arg1', 'arg2', 'arg3'], function(){
//
};Demo Time! Sorry, missed some of the code!!
var ClosureRegistry = (function() {
function ClosureRegistry() {
this._registry = ;
};
delegate(['get', 'set', 'args']{
from: ClosureRegistry.prototype,
to: function() { return this._registry; }
});
delegate(['push', 'pop']{
from: ClosureRegistry.prototype,
to: function() { return this.scopeForCurrentClosure(); }
});
ClosureRegistry.prototype.scopeForCurrentClosure = function() {
return this._registry[this._registry.length - 1];
};
ClosureRegistry.prototype.func = function(name, params, body) {
var _this = this;
var scope = this.scopeForCurrentClosure().fork();
this.set(name, function(){
_this.push(scope);
_this.args(params, arguments);
var result = body();
_this.pop();
return result;
});
};
};
var Scope = (function() {
function Scope(dict) {
this._dict = dict || {};
}
Scope.prototype._forkDict = function(key) {
var dict = this._dict;
var F = function() {};
F.prototype = Object.create(dict);
F.prototype.constructor = F;
F.prototype.__parent = dict;
return new F();
};
Scope.prototype.get = function(key) {
return this._dict[key];
};
Scope.prototype.set = function(key) {
this._dict[key] = value;
};
// Scope.prototype.push = function(key) {
// this._dict = this._forkDict();
// };
// Scope.prototype.pop = function(key) {
// this._dict = this._dict.__parent;
// };
Scope.prototype.form = function() {
return new Scope(this.//
};
Scope.prototype.args = function(names, values) {
for (var i = 0, l = names.length, i < l, i++ ) {
this.set(names[i]) //
}
};
return Scope;
}());Next Step? Prototype-destroying developer is the most satisfying thing you'll see today!
Musician, artist, developer and inventor. Head of Famous
I got into programming from music + art
Some of my previous projects:
- String Theory Project (lasers, water, welding, and strings)
- Speaker Bot Project (embedded Linux system, wifi router and Kinect)
- The Voxel Meter Project (using voxels to represent sound)
What is sampling? How is audio represented on a visual system?
It all started with a monome using a programming language called MAX / MSP
Sampling is the method of converting an analogue signal to digital data. Digital data which can eventually be turned back into visual data.
We sample sound any time we make a digital recording. Unlike an analogue recording, a digital sample needs to be in blocks.
Some Audio Slang
- "sample rate" - # of samples used to represent a second of sound.
- "bit depth" - the # of bits used to encode the sample data
- "codec" - algorithm
Lossless vs Lossy encoding explanation
What are the limitations of sampling?
- NyQuist Limit: Your sampling rate dictates the max frequency that can be represented in a system.
- The human ear only hears frequencies up to 20 KHZ.
- Some recording is done at 96KHZ can reduce aliasing
- Telephone is only 8KHZ
Lets go back to the human ear and how music works.
Pythagoras - Circle of Fifths, Linear Scale
Musical notes as a means of communication has lasted longer than the English language.
Demo Time on Max
Demo Time on MononomeSerial
Technical Director: @Instrument Creator: @uncontext Co-runner: @creativecodepdx
If you think about Color Palettes, you usually have to follow some mathematical principle to find visually pleasing color combinations. If you think about music, it can make you feel sorrowful or triumphant, but it's really just data.
Selected Math Works:
- Visions of Tomorrows (a system of artists, a community of data centers) now touring in Portland.
Why talk about art at a JavaScript conference?
- Learning is more fun when coding for art.
- Freedom of personal projects for what you code.
- New problems present themselves.
Demo Time
So, what did I learn in building this thing?
- bitwise operators
- LED dithering
- Ram swaps in Pi
- @reconbot
Creative Coding w/ Chris @ChrisArth
Demo Time
We wanted to corrupt the underlying data in JPGs: @AvatarGlitch
So, what did I learn in building this thing?
- How JPGs are constructed
- buffers and GIFs
- Chris Arth learned about bots
Then we turned this project into a teachable moment by giving a demo at a meetup (PDX Creative Coders).
Weekly Jams with Ben Purdy @purdybot
Let's make a Plinko!!!!!! Plinko meets generative digital art.
So, what did I learn building this thing?
- piezoelectric sensors
- CSS3D matrix3d (http://bit.ly/maptastic.js)
- voltage stepping
- headless rendering
- etc
Homework
option #1: Uncontext, Websockets for generative art
option #2: Codepen, fork something and explore it
option #3: Creative Code Group, find one near you!
Internal Tools @percolate, Co-organizer @brooklyn_js, Hackathon Manager @re3storyhack @EcoHackGlobal
I <3 Knitting, when I began learning JavaScript, I started to see the parallels betweeen knitting and JavaScript. To you, knitting can look confusing. For me, when I began programming, coding was equally confusing.
Knit Stitch vs Purl Stitch are a couple of examples of patterns.
Knit Stitch: [K, K, P, P, K, K, P, P, K, K, P P]
Purl Stitch: [K, P, K, P, K, P, K, P, P, P, P, P, P, P, P]
Github for Knitters: ravelry
I took a knitting pattern and turned it into JavaScript code. Demo My triangle in JavaScript turned out to be an arc in real-life when it was knit. I had discovered Hyperbolic Geometry. This turns out to be a hard problem to solve in computer graphics.
How can I test my patterns more quickly without wasting 40 hours knitting. I decided to use a knitting machine.
Corny Japanese Commercial for Knitting Machine
So I bought a knitting machine. Turns out its difficult to get the knitting machine even working. This thing comes from the 80s. I learned how to operate the machine, but also needed to fix the machine. So finally I could knit a fabric with a machine.
Jacquard Knit: This name comes from the Jacquard Loom which uses a punch card to design their patterns. These punch cards were inspiration for early computers.
Electro Knit: It has a motherboard, chip, and magnetic strip instead of a punch card. Its a lot like Dot Matrix Printing. 1 Pixel = 1 Stich
Knitting with the machine was still not so easy.
**Challenges
- How do I make a bitmap image? GraphicsMagick for node.js
- How do I grayscale an RGB image? Find the highest value within R, G, B, you repeat that for every value.
- How do I make the image just 2 colors, not these many shades of gray. How did Cosmic Osmo do this? Dithering! and furthermore, Ordered Dithering (similar to what it used for newspaper printing images.
- How do I turn this dithered image into my knitting pattern file (.dat). Bitwise operator.
Demo Time
ElectroKnit Repo ColorMixer Repo
JavaScript Engineering Manager at Mozilla
Concurrency vs Parallelism
If you imagine 2 queues of people and a revolving door. You can imagine different ways for them to go through the single door. Parallelism would solve this problem by having 2 revolving doors so we can go twice as fast, but the real world isn't like this, it's often more complex.
Evolution of the Web application
Back in the day, website used to have "under construction" website. In the next 20 years, webpages have gone beyond the static web pages.
Today's JavaScript is really fast
...and getting faster because we're using other technologies like ASM.JS. If JavaScript is so fast, then why do we have perf problems? The limitation is on CPU capabilities with cores.
Concurrency is an issue too.
Parallelism: Workers may be enough:
- Workers are heavier than system threads, but work.
Concurrency already exist in JS
- Parallell JavaSCript
- postMessage()
- Buffer transfer.
Parallel JS:
- Casual API but not good for casual programers
- Warm-up costs
- Memory overhead of functional style
postMessage()
- Performance just isn't there
- Limited to no-shared-state computation
buffer transfer
- Shared memory but effectively 1D striping of arrays...
- etc.
Native has solved this. What can we learn?
Design Criteria
- Native-like performance
- Not dependent on main thread event loop
- Implementation versatility
- Support apps and algorithms based on threads/pthreads
- Support Extensible Web philosophy
Introducing Shared Memory for JavaScript
Example: The Incrementing Worker
The Path to Parallel JavaScript
Node.js + Front ender at Y!
What?
- The latest 1980s music technology
The Goal: Make it easy to write music for a Nintendo...using JavaScript
Why?
- Nostalgia
- If I can get this working in JS, I can run it in the browser
How?
- Reading a lot
- Writing a lot
- ASM Sound Engine
- JS API
Channels
- Square (54.6 Hz - 12.4 KHz), Duty Cycle, Volume Envelopes, Frequency Sweeps
- Square 2
- Triangle (27.3 Hz - 55.9 KHz), Volume on/off
- Noise - Produces random frequencies, sounds sort of like drums
- Sampler
Techniques All of the channels are monophonic, so you can only play one note at a time, so composers would cheat with arpeggios. Bach pieces actually turned out to work really well because a lot of his pieces are monophonic.
COO at @bocoup
Move the Open Web Forward
My job is to help Bocoup "move the open web forward"
- What combinations of resources do we need to reach our goal?
- How to those entities exchange information in order to create value
Operational Questions
- What is the concrete objective and abstract goal?
- What combinations of people, teams, projects and other resources are needed?
- How will these entities exchange information?
As our organizations get bigger, these questions become more difficult. As open source developers, we operate in a complex system.
Misson Value Change (MVC)
If you're in a position where you need to make operational rules for humans, remember MVC. Execute change that creates value in the purpose of obtaining a mission.
Mission
An entities mission doesn't really change over time. In designing systems for humans, make sure you can define the mission.
Value
Value is often quantitative, but for humans, you need a mix of quanitiative and qualitative value.
Change
If we think of the mission as an end, then change is the means to obtain that mission. Our systems should always be changing.
Everything is Connected
It's nearly impossible for one system change to not affect others. Like how a positive change on the technical spectrum might be a negative change in the political spectrum.
Organization Design
- Adapt to change
- Communicate our Mission
- Exchange Value
Case Study
In 2012 things were going well for node.js. We had a thriving community, solid core contributions, and it was already clear that we were the fastest growing ecosystem in the world. Around this time a few people noted their concerns about the ownership of the project. Community had been driving the project quite successfully so when people raised these concerns myself and others considered them tin foil hat hand wavers and ignored them.
Cut to 2014. Nearly everyone close to core agrees that there is a big problem. We all have ideas about how to fix it but we can’t try them, because we don’t own it. Months later io.js is created to try out ideas that might bring more contributors and releases back to the project.
- Mikeal Rogers Growing Up
Organization Design: Purpose + Governance
Purpose: if you're doing a thing, you should propably know why you're doing it.
Governance:
- Corporate Form
- Decision-making
- Decision enforcement
Corporate Form Must-have for legalities
Decision-Making Who makes decisions and how they do it.
Decision-Enforcement Use a mix of proactive & reactive structures
Organizations which design sytesm are constrained to produce designs which are copies of the communication structures of these organizations.
- Conway's Law
We can organize for a better open web community.
∆∆∆
Remember AOL?...connecting dial-up sounds
Once we were online, our experience was...slow connection, a lot of loading.
What is sound?
Sound is vibrations that travel through the air. For us, our eardrum picks up these vibrations and it gets interpretted by our brain. For most of us its represented in a wavelike form.
*What is data?**
Binary...something that needs processing.
How do we get data into audio? It's an encoding problem. Humans are pretty good at encoding data. You can interpret language and get ideas. However, communication breaks down when you don't speak the language. Language becomes the data encoding for speech.
How do computers speak?
Computers need a language and a way to "verbalize".
How do we do this?
History Time
Communication Needed
- Fast transmission
- Easy to use
- Cheap to implement.
Telegraphy - 1792
Claude Chappe
We can bang on pans to communicate over a long distance (similar to the bells at the church). Well, this will probably bother our neighbors, so lets use this optical telescope and communicate using a code, but there were some downsides:
- If it was foggy, didn't work
- If it was nighttime, didn't work
- It took 3 people to use, so was really expensive
- It was lossy, some of the signals could be confused.
Morse Code - 1836
Samuel Morse
He got a letter one day that his wife was ill. He wrote a response and sent it. Before he could leave, another letter came that told him his wife had died. One his way back to Europe, he met someone on a boat that explained electricity to him. Morse had this idea that he could use this electro-magnetism to send this message over the wire. Morse code became the main use of communication.
Baudot Code - 1874
Emile Baudot
Created a corded keyboard, so people could be trained faster so you didn't have to be highly trained to send Morse code. It made communication cheaper. Multiplex like it is 1855 - 240 baud When people are using these lines, most of it is empty space. There were about 4-5 operators at a time. The 1st tick would be the first person, 2nd tick would be 2nd person.
Harmonic Telegraph / Audible Telegraphy - 1876
Alexander Bell
You could stack these signals on top of each other, so you could have 10 messages running on a single line. This eventually led to dedicated phone lines being run.
Audible Multiplexing
If you're listening for one specific tone, you can just listen for the individual tone and transcribe it (similar to the cocktail party effect)
How is data encoded into audio?
Frequency Shift Keying.
Audio Frequency Shift Keying (AFSK)
Low to high frequencies could be converted to 0's and 1's for coding.
Teletype Machines (TTY) - 1908
Non-skilled operators on both ends, uses Baudot Murray encoding. This is still used today for hearing impaired. You can hear the digital encoding.
Existing Medium
- Intended to carry speech
- "hacked" to carry data
- AFSK worked on existing infrastructure.
Modem - 1942
This was a way to connect data over existing phone lines. When a person talks over the phone, they use a certain amount of phone frequencies, so we can shift the audio all over to that frequency. If there are frequencies that humans don't talk on, then the data wouldn't send. So, the modem speaks at the frequency that humans do, then shifts it to a frequency to send data.
*Recreating a Modem in JS
- The Oscillator Node - allows us to change the frequency over time.
- ScriptProcessorNode - Process chunks of audio JIT with a given bin size and sampling rate.
- Converting Data - string => binary
- Bits to Audio - take the binary and put it into our wave form.
- Data Extraction - the hard part - converting the waves > bits > bins
How do we get from a wave to frequency intensity?
- Goertzel Algorithm - this is an algorithm for extracting a single frequency. You tell it the frequency you're looking for and it tells you the intensity. Goertzel filter is not quite perfect...
Hamming Window
Since the data we're using is not periodic, this formula makes it work.
Frequency Intensity
Demo - sending text, encoding it in audio, then decoding it and putting it back as text on the screen.
What if there was noise on the line?
Like, youre mom picking up the phone when you're online. How do you handle this noise.
What is we wanted more speed > 300 baud?
Multiplex it to stack the frequencies on top of each other.
What is next?
- Air-gapped communications.
- Dynamic JS Injection
- WebRTC Modem?
- &^%$!!!()@
Google tone came out recently.
UI Engineer @TrunkClub
If you've wanted to work with React, but currently work with Backbone, there's always something that keeps you from getting your hands wet in React.
- Backbone
- Chaplin
- jQuery
- Brunch
- CoffeeScript
- Automatic memory management
- Controllers & composition
- Rails-like routes in custom router
- Consistent CLI interface
- CommonJS + AMD Support
Everything worked great for a long time, until it stopped working great.
- Numerous API calls & hydrations
- Lot of useless re-rendinering
- increased load times
- huge flame chart spikes
- user complaints
- dedicating way too much time for render debugging & optimization
React to the Rescue!
- Replacing Backbone views with React (instant gratification)
- Reusable, excapsulated components
- efficient diff'ing algorithm re-renders only what it needs to
- declarative style makes it easier to focus on the app itself
- less mental overhead of bringing in templates & views together
For the first time, our backend's were much more comfortable with our code.
Code time
CSS styles as Components.
Migration Process
- Start with small components
- Use a Backbone/React mixin
- Get familiar with the API
initialize=componentDidMountremove=unmountComponentAtNode- Convert your parent view to use
React.createElementinstead - Don't freak out about the templates!
React Backbone Adapter - attaching a React component to a Parent level Backbone view.
- Create
- Identify
- Attach
- Render
- Dispose
React Backbone Wrapper
- Check for mount
- Check for updates
- Pass in the props
- Find the node in the DOM
- Apply an identifier class
- Render!
.cjsx if you're using CoffeeScript (some bugs with it). Check out Babel.
Passing Down Data
props - a component can't change it's own props, can change it's child's props.
state - starts with a default value when a component mounts and then suffers from mutations in time (mostly generated from user events).
Backbone React Component Mixin
Glue you Backbone models and collections into React components
Helper Methods
@getmodel()
@getModel().member.get('name")@getModel().address.set('zipcode')
@getCollection()@getCollection().addresses (address, index) =>
Gotcha's
- CJSX - Babel is much more robust, if you can use it - use it.
- Implicit returns in CoffeeScript - remember to wrap a series of components in a parent div, otherwise it won't render
- CJSX - Event handlers will need to
return false
Final Thoughts
- Interim - We don't plan on building apps this way forever, our newer apps take a more robust Flux + React approach.
- React-Backbone by Joe Hudson
Interactive Designer for @qlc.
I can't talk about community without talking about my most important community...family. Little things of service can really influence others. Little things like holding the door open for someone. The highest level of service is giving someone the tools to be able to service themselves.
I can't talk about community without talking about the community I spend 40+ hours a week with...my workplace.
I can't talk about community without talkinga bout the community I live in...my city. It's a small community that has lost a lot of industry and become socially apatehtic about our own community.
But I'm really here to talk about the developers community. @mdhopkins is my co-organizer.
So...What's a Meetup? For real?
A place that I can have an outlet professionally because when I talk to my non-dev friends, it's like talking to a brick wall sometimes.
A place where I can go and learn things for cool new things that I can hopefully integrate into my workflow.
But really, meetups are about meeting people.
Are your users staying engaged? That's what matters most!
Where do I fit into this?
I dreamed
I hoped
I wished
I grew up...
Maybe my expectations were too unreleatistic and inflated.
Utopian ideals are difficult to translate into reality.
I played...music.
I learned a lot about collaboration when I played music.
Too low tech?
Most of the communities we're a part of are not tech focused. Our family, our co-workers, other people on the bus we share.
I learned
@eads founded free geek Chicago, an autonomous organization where you can go and learn how to tear apart a computer, install some software, etc..
Open-source development breaks this bind, making it far easier for tester and developer to develop a shared representation...to communicate effectively about it. -Eric Raymond The Cathedral and the Bazaar
Meetups are...
a wonderful way to learn
an opportunity to teach
a place to become a better version of ourselves.
So think about it...what do you do everyday?
- Stackoverflow
- Chatting
- IRC / Stack
Wouldn't you rather talk about it in person?
Personal experience trumps all
So what do your users need?
@gnarf
Meetups are about doing what's best for your community
Meetups are about doing networking and support
How do you run a meetup?
- Share the load if you can. Another perspective and set of hands can really help.
- Code of Conduct: you need one. It's about defining harrassment explicitly and defining consequences explicitly.
- You need space, table, chairs, and a projector. Pizza helps.
- You need internet!
Making your life easier
- Shared calendars / documents
- Social Media
- Email lists
- Meetup.com
Keeping it going
- remember to focus on your users
- don't be afraid to do something different
- use resources at hand...human resources
- talk to your friends
- talk to your coworkers
- talk to your fellow meetup attendees
- go to regional meetups
- be excellent to each other
**
We are about to study the idea of a computational process. Computational processes are abstract beings that inhabit computers. As they evolve, processes manipulate other abstract things called data. The evolution of a process is directed by a pattern of rules called a program. People create programs to direct processes. In effect, we conjure the spirits of the computer with our spells. -Abelson and Sussman and Sussman
If our code is directing the evolution of a process, in many ways it's like the DNA of a cell directing biology.
Step 1: Data - our data structures in JS are becoming increasingly complicated.
Hash Array Mapped Trie (HAMT)
{foo: 42}: Tries put the key in the branches
foo -> 282bf9...: Hash keys for better distribution and consisten depth
10011..: 32-way brancing factor - path copying for fast persistence
Underview
A data structure magnifying glass
A JavaScript tinkerer, bug fixer, & benchmark runner. Microsoft Edge Web Apps & Frameworks Ecosystem Program Manager @Microsoft. Lo-dash.
Self hosting
Implementing parts or the whole of a language runtime in the language itself.
The good, the bad, and the ugly of built-ins in JavaScript
The good
- Ease of development
- More contributions
- Performance
- Experimental API
Intl
The good
- Writing in JS simplified handling arguments
- Simplified reading/understanding
- Integrating w/ C++ was simple
The bad
- Extra JS functionality is exposed
- Heavier boilerplate
The ugly
- Preventing tainting of internal JS
- Testing
- Ensure correct stack behavior
The bad and the ugly
- No silver bullet on performance
lodash will soon use Object.assign when available. In the latest Windows 10 tech preview its ~60% faster than lib alternatives!
Whoa! v8 devs are comparing wip built-ins perf to lodash. Early v8 Object.assign is ~62% slower atm. https://codereview.chromium.org/548833002#msg2
Developers shouldn't feel forced to use a library just to have faster built-in equivalents.
Optimizing built-ins
..................
Developer at @WalmartLabs
This seems to happen in a lot of documentation. There are these nitty gritty details missing.
We follow the test pyramid
*UI*
**Service**
*****Unit*****
End to end tests should also be cross-browser
Everyone should understand what browsers they should support and which they should not support. It's a huge pain to test them all. So, you start slacking on checking the legacy browsers. This also means you have to check through all of the code since that last commit.
Selenium
The choice of end-to-end testing right now. It's not the most friendly API to work with. There are a lot of companion tools that go with it like Saucelabs (which we use). When you start putting all of the pieces together, it starts to become really bulky. There are so many points of failure that it's hard to keep track of them all. You inevitably end up with test flake.
test flake - when your tests sometimes fail for no good reason, creating false positive results. (see also: waste everyone's time with this one weird trick. developers hate this!)
Even on Google's own testing blog, they have an article called "Just Say No to More End-to-End Tests"
CHALLENGE ACCEPTED!
Automation Goals
- Dev & QA - no high barrier to entry
- Fast
- No flake!
We picked Nightwatch first and were loving it, but every now and then we'd see a test failure...then it would pass...It was flaky again with the same problems.
We were trying to think of end-to-end tests like unit tests. So think of a can of soup. When you're hungry, you can just go a grab a can of soup from your own cupboard at home. For end-to-end tests, you have to get in your car, drive through a zombie apocalypse on your way to the store, then you probably have to fight to the death to grab your can of soup.
Lurking Zombies?
- Buggy webdrivers
- Flakey Network
- Service bugs/outages
- ???
What if we could just make all of these flaky tests not flaky anymore without fixing the individual problems?
axiom - ...a premise or starting point of reasoning...a premise so evident as to be accepted as true without controversy.
If an assertion fails, lets just retry it again and if it fails again, lets just try it again. ++ more tests pass.
Oh that click thing that said it didn't click in IE, what if instead of using the Selenium webdriver to click, we just use the JavaScript native click event. ++ more tests pass.
We also created a parallel test runner that could run our test suites across all browsers. on every pull request.
We took all of the data from test swarm and could start producing graphs to see the brittleness of certain tests according to browser vendors. Can also see % of runs requiring a retry by test name.
We're going to open source this under Magellan - an end-to-end test runner that hooks into other test runners (like NightWatch). This is Shoveling Shit as a Service #SSaaS.
SSaaS
- Momentum > Perfection
- Smoothing Over > Giving Up
- Useful > Precise
- Open Source > Closed Source
..................
Accessibility Engineer, Angular core team member.
Accessibility is the answer to a more inclusive web. A fifth of the population on the planet has some form of inaccessibility.
Accessibility Basics
- Alternative text
- Document structure & hierarcy
- HTML semantics
- Keyboard interactivity
- Color contrast
- Focus management
- More principles
How to Accessibility
Dude, sucking at something is the first step towards being sort of good at something.
Let tooling do some heavy lifting for you.
Let's talk about:
- Manual Testing
- Sorta-Automated Testing
- Definitely Automated Testing
But automating's no substitute for...real user feedback (inclusive of people with disabilities)
First things to do for accessibility
- Tab through a page with the keyboard. Example: gov.uk highlights tabbing.
- Use a screen reader
Cmd + F5. Example: Soundcloud - Headings & Semantic Structure. Example: Firefox Web Developer Toolbar (click Document Outline to see the heading structure).
- Overall Page A11Y. Example: Chrome Accessibility Tool on CNN. Under Audits, run the Accessibility audit.
The Accessibility Tree
Created by the browser as a parallel structure to the DOM that a screen reader can read without hindering performance.
Ally by Addy Osmani can be used for automatic testing accessibility for the command line.
Ways to Integrate Automated Testing
- Run on save
- Run on commit
- Run on deploy
Protractor + Accessibility Plugin
- Test focus management
- Live updates
- Color contrast
Demo on Angular Material-Start
Unit Testing for Accessibility
- Watched ARIA properties
- Keyboard operability
- Text alternatives
- Semantics
Example: ngAria - the accessibility module for Angular
Resources: Including People with Disabilities in User Research Conducting User Evaluations How I Audit a Website for Accessibility Web Accessibility Evaluation Tools Notes on Client-Rendered Accessibility What is ARIA?
Firefox OS Contributor for Telenor, working on IoT and cheap phones. Before that funda & Cloud9 IDE.
Computer generated music
A lot of the music you listen to today is coming out of a computer. There's a group of people who take this one step forward...and it's called Algo-ravers. http://gibber.mat.ucsb.edu/
Bluetooth Beacons - Broadcasting their existence
- $10
- long battery life
- cheap
- urls, sensor values, etc.
JavaScript baby monitor
- Tag a baby with a phone
- Get 3 beacons
- some math
Firefox OS is not just about mobile anymore
BLE, VR, WebCL
Wearable
- Augmenting reality
- Hyperlocal services
- Open standards
Mozilla Glass
- works with any glasses
- no extra device required
- voice controlled
- self build kit ~$300
NB: IE11's IE8 emulation mode and the various other ways to emulate IE8 that they offer aren't reliable!
The only good way to test in IE8 is to actually boot up an XP VM and test it in real IE8, trust me.