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.
Use a Path to draw palettes instead of polygons so that d3 runs faster.
let trianglePath = ”
trianglePath += ‘M 19 342 L 38 342 L 19 361 Z’
Window towards the cursor and shadow away from the cursor. Window effect should be more pronounced than the shadow effect because it’s closer in view.
For mobile, use the gyroscope: Alpha, Beta (Y axis) [-180, 180], Gamma (X axis) [-90, 90]. Don’t use the full gyroscope because that would cause the user to have to flip the entire phone around to see the full animation.
Record initial gamma/beta values. Make a scale that maps to the width of the element.
High contrast vs low contrast. Clusters of lines. Horizontal lines, top left -> bottom right, top right -> bottom left. Closer in space rotate more.
foregroundRotate = 15
midgroundRotate = foregroundRotate * .9
backgroundRotate = midgroundRotate * .9
The lines look like they’re floating in space.
Color theory with HSL
Generative compositions with SVG Paths
Depth with translations and rotations
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 