StreamOfConscious.txt

"const abc = 123; var def = 456;" window.abc will === undefined bc it's declarative space. window.def will === 456 because it's object space. https://weizman.github.io/page-what-is-a-realm-in-js/

Browsers that support modules won't load <script nomodule>

Custom elements change in response to their slotted content changing. e.g. $('my-custom-slots').appendChild(document.createElement('li')) adds a new item to a list

Arrows in arrow functions bind extremely weakly: () => foo() is like (()=>{ return foo()}) and not (()=>{ return foo})()

You can use the CSS any-pointer: coarse media query to apply styles for touchscreens that make your website more touch friendly, e.g., you can make buttons and other touch targets larger and increase the spacing between them [css-tricks.com]

backdrop-filter: blur(5px) can replace the need for a positioned element underneath to blur.

a "node" is any DOM object in the tree, an "Elment" is a specific _type_of node that can ha children, etc.

line-height: calc(1ex / 0.32); An "optimal" line-height that adjusts to font usage.

When using webfonts, make sure you specify point values that the loaded fonts actually have, otherwise their display behavior is undefined: https://news.ycombinator.com/item?id=23759587

`<path>`s can't be used inside masks, they use `<clipPath>` instead

2nd argument of JSON.stringify allows replacement patterns for things like Set(s) which would normally serialize to `null`

text-decoration-skip-ink makes underline not overlap descenders from letters like y, p, etc.

CSS Reset values: initial - set to W3C spec. revert - set to UA sheet. inherit - set same as parent. unset - inherit (if any) then initial.

Force an element into an invalid state by calling el.setCustomValidity('anything') (or .setCustomValidity('') for :valid)

Line-height values should be unitless so they are proportional to font size

box-shadow rules will not apply to display: table elements on all browsers unless the border-collapse is set to separate. Use that and border-spacing to work around issues.

git reset HEAD~1 //rolls back the most recent commit but keeps changes
git revert //rolls back and makes a new commit over the old (advanced ones)

Keypress events only fire when a key that produces a character (letter, number, punctuation, enter) not for Alt, Shift, etc.

ES6 modules are read-only views: connections to variables in the module are "live". E.g. imported vars are incremented when the var is incremented inside the module

Use will-change: transform to promote elemts to their own layers (similar to the transform: translateZ(0) trick)

Js destructuring creates shallow copies (no shared reference)

You can destructure to object/array assignments: let a = {}, b = []; ({c: a.d, d: b[0]} = {c: 'e', d: 'f'})

Chrome forwards spacebar/enter keypresses to 'click' events for buttons but not for divs/etc.

Tips for secure cookies/storage/etc: https://www.rdegges.com/2018/please-stop-using-local-storage/?utm_source=frontendfocus&utm_medium=email

Transform streams in Node are just Duplex streams with a (sometimes) more convenient implementation of .transform (in which you can call this.push() like a Readable) instead of separate .read and .write methods to implement.

fieldset elements have a min-width assigned to them by default

For css sizing: min-content makes the element as skinny as possible wrapping as much as possible. Max-content makes it as wide as possible with no wrapping.

In svg transforms in series all the transforms are processed on the coordinate system before the subject is painted, which is why translate(x y) rotate(a) translate(-x, -y) rotates around x y

SVG font-size: in the style value, use px specifically... or use the presentation attribute. Otherwise Firefox doesn't interpret the font-size in user space

for SVG gradients and Patterns: A 1px length equals 1 user unit equals 100% of the width or height of the element's bounding box under an ObjectBoundingBox corrdinate system.

The time value passed to requestanimationframe is the same for each animationanimation to facilitate coordination

content: in css can take URLs for images

Gradients can xlink:href toto other gradients to use their stops.

Svg gradients get their own coordinate systems.  Userspaceonuse uses the one for the host svg, objectboundingbox uses the ciordinate system of the bounding box with ththe top lefleft corner as the origin for transforms: coordinates are "stretched" to match the containing rectangle.

React concepts article: https://medium.freecodecamp.org/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2

hyphens:auto along with text-align: justify (when it works on platform) does body-text jutification.

performance.getEntriesByType("paint") -> paint timing in Chrome, shows 'first-paint' & 'first-contentful-paint'

"Start every project by making the body text look good, then worry about the rest...15-25px size...120-145% line-height...45-90 chars/line"
(from: http://practicaltypography.com/typography-in-ten-minutes.html )

Emsp, ensp and special spacing characterscharacters can be used to set text morr precisely.

CSS font-display: can control the timing of font-face renders (auto, block, swap, fallback, optional)

String.raw`\` returns the \ instead of treating it as an escape character

For Arrow functions, this is still evaluated at runtime so e.g. an arrow function called *inside* an object method o.method will get o as "this"

The "return" method of iterators is called on abrupt termination (break, throw, etc.) And allows thr iterator to close and clean up

Preload images technique: https://gist.github.com/bkimmel/e56e581bfe0827740ecd85a567b36dcc

Some CORS responses don't expose header data to the Fetch API :: https://fetch.spec.whatwg.org/#concept-filtered-response

Mutation Observers for DOM Debugging

Use novalidate attribute (which prevents validation on submit) and .validity (which indicates why the field won't validate) property to custom style forms

Flexbox article 
https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b

don't forget x y and width & height on masks (#fff shows #000 hides)

<use> elements can go in masks

50 cheat sheets: https://medium.com/wd-tips-tricks/50-essential-cheatsheets-guides-docs-for-web-designers-7e80d78853c1?imm_mid=0eeb35&cmp=em-web-na-na-newsltr_20170315#.5yxv69k2k

Isolate your team from "bad day" effects in interviews

Zindex stacking context can be set by a number of properties and stacking contexts create a "heirarchy"

Firefox doesn't do .innerText

utf-8 can't be used in css properties (i.e. line-height: 1; ~= line-height: \000031;) even though spec suggests it kind of should be (? https://www.w3.org/TR/CSS2/syndata.html#characters )

will-change: don't put it on too many things

contain: layout=stop checking for dirties at container, size=contents do not effect size of container, paint=stuff stays in container, style=stuff inside doesn't effect container

.on('change', (e)=>{ $(e.target).val()//new value });

tspan elements don't create their own bounding box, they use the box from their containing <text> element instead

csstriggers.com

What does "chunk boundary friendly" mean?
  It means that a replace should happen even if the string to be replaced is between streaming chunks of data. For example, say I     do something like this

<button> elements in forms are implicity given type="submit" unless otherwise typed.

Really nice underline w/ descenders from pitchfork.com:
    background: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#ff3530,#ff3530);
    background-size: .05em 1px,.05em 1px,1px 1px;
    background-repeat: no-repeat,no-repeat,repeat-x;
    text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
    background-position: 0 95%,100% 95%,0 95%;