JAMstack notes
Netlify structure:
Structured data in a git repository
Smashing architecture React talking to github api Victor hugo go based boilerplate static site generator
Decouple ecommerce for processing tax and other things
Go commerce
Using services creating orders and creating payments in db
Products are all stored in git Pr to see it
Best practices for jam
All on cdn Automated builds Atomic deploys Instant cache invalidation Modern build tools All lives in git
Design systems:
Nasa design Bootstrap
Material design system
Only ever change transform and opacity
Optimal performance Painting things is expensive Fixed and repositioning
Backface visibility hidden Transform around the zero point This is a hack
Will-change informs browser or optimizations ahead of time https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Composited layers are resource heavy because it is expecting for certain elements to change at any moment https://www.html5rocks.com/en/tutorials/speed/layers/
Use in moderation
Css runs in main thread More performance
Request animation frame https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
Native api for set timeout. Requests at the next available opportunity Groups them into a single repaint
Ie10 plus support
Css containment Optimizing an element. It is separate from the page
Chrome and opera only
Anything in that class subtree isolates it
Tooling and iframe xs components:
Fred Brooks Richard Gabriel lisp
Components security for sharing data Iframes serializing and not flexible or responsive
Xcomponent from PayPal https://github.com/krakenjs/xcomponent https://medium.com/@bluepnume/creating-a-cross-domain-react-component-with-xcomponent-fbcccc4778fd
Framework binding Event listeners Handle errors in iframe on a parent page Pre rendering
Ab tests Recognize users Localize button Customize for each customer
However iframes are very slow Xcomponent render to open a new page outside of the iframes own boundaries
Typescript and Flow:
Defining inputs and outputs
Flow is a checker and you need to use Babel
Type is a totally different type and will be compiled separately
Array type definitions in flow have two different ways
Any type is opting out of type checking
Cannot use native prototype functions
Void returns something and is opposite of any
Null and undefined types
Interface allows to define shapes of values
? Optional properties
Can ensure use if props not there
Unions of defined types
Can only access props of unions that exist in all of the types
Discriminated union Keys that are common to all
Type guard?
Generic types Identity function
Guarantee input equals the output
Benefits
Detect bugs while you're coding Reduced convoluted error handling Living documentation Reduced unit tests
Tests for logic Types for data types