You have a list of objects where you want to find the object(s) in the list that have a particular value for a property or attribute.
fruits = [{'fruit': 'apple' }, {'fruit': 'pear'}, {'fruit': 'banana'}, {'fruit': 'grape'}]
Python:
list(filter(lambda item: item['fruit'] == 'pear', fruits))
[item for item in fruits if item['fruit'] == 'pear']
Javascript:
fruits.filter(item => item['fruit'] === 'pear')
Originally you had two tools: transpile JS to turn it into ES5, then browserify it to one bundle.
Webpack is both of those tools plus more (CSS, images, assets, etc) for apps!
Rollup is the tool for libraries!
JS Starting stack:
Library: a codebase that you call from your code (Requests, HTTP)
Framework: a codebase that calls your code (Django)
Starting again:
create-react-app
You get a good ‘feel’ of being ‘fast’.
You need to render on the server or you don’t get good search results.
Dynamic Bundle loading, hotloading resources, tracking download times.
Isomorphism is hard… and stateful applications are complex.
https://blog.semanticscholar.org/dont-write-an-spa-57aaa40e0314
Enable CheckJS in almost any editor:
// @ts-check
Checks argument types, number of arguments supplied to functions, and other typescript functionality in regular javascript. Looks for functions in other files and can automatically add those using the lightbulb solutions menu.
NPM 5 is much faster than NPM 4!!! 647% performance improvement.
npx – run things in npm packages without installing stuff globally
npx create-choo-app my-choo-app
Allows you to tell it to work in offline mode to reinstall packages from a warm npm cache instead of downloading from the internet
Automatically install and remove dependencies based on require/import in your JS repo
npa – frontend asset manager (similar to bower), run things on publish instead of commit to git, use package.json for manifest
Check out package.community for bundler, yarn, npm, etc
Attending SeattleJS Conference – Marcy Sutton talking about JavaScript and Civil Rights
https://marcysutton.github.io/javascript-and-civil-rights/#/26
Have click events on buttons! Don’t put them on divs!
If you need a custom control, then you need to add a button role!
Roles:
<div role=”checkbox” …
State:
<div aria-checked=”true” …
Property:
<div aria-label=”Subscribe” …
Testing for focus management! Use axe-core for testing engine.
npm install axe-core
Integrate axe-core with Selenium via axe-webdriver
var AxeBuilder = require(‘axe-webdriverjs’), WebDriver = require(‘selenium-webdriver’); var driver = new WebDriver.Builder() .forBrowser(‘chrome’).build();
quantifiedcoding 