noobling / david-learns Goto Github PK
View Code? Open in Web Editor NEWMy exploration into the wonderful world of knowledge
My exploration into the wonderful world of knowledge
Replaces browserify, gulp, grunt. Leading tool to bundle CommonJS modules. At its core it is a module bundler. Takes all different files and turns them into a single file. Main benefits of bundling are modularity and network performance.
Modularity allows you to break your source code up into modules.
Network performance is gained by making only one HTTP request to get the required static files.
Additionally webpack can also handle
Some useful scripts
"scripts": {
"dev": "gatsby develop",
"lint": "eslint --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js' 'src/**/*.md'",
"develop": "gatsby develop",
"start": "npm run develop",
"build": "gatsby build",
"now-build": "npm run build",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js",
"deploy": "now && now alias"
}
A thunk is a function that has some closured state to keep track of value(s). Becomes a container around some state and you can pass it around anywhere in your program.
A synchronous thunk is a function that doesn't require any parameters except the callback so you can get the value out.
With an asynchronous Thunk we reduce the complexity of managing time in our program. The program state becomes independent of time.
function addAsync(x, y, cb) {
setTimeout(function () {
cb(x + y);
}, 1000);
}
var asyncThunk = function(cb) {
addAsync(10, 15, cb);
}
asyncThunk(function () {
sum; // 25
});
Blocking
Non-blocking/event-loop
All modern JavaScript engines use event driven non-blocking
Use callbacks. Pass a function when the task is complete
They are a thin layer of abstraction over callbacks. They help with readability because you don't have that sort of deep nesting if you need to do things in sequence when using callbacks.
sleep(1000)
.then(() => { console.log('one'); return sleep(1000);})
.then(() => { console.log('two'); return sleep(1000);})
.then(() => { console.log('three'); })
By returning a promise we can call then on it.
Here is another example of the power of promises
fetchJSON('/user-profile')
.then((user) => {
return fetchJSON(`/users/${user.id}/friends`);
})
.then((friendIDs) => {
let promises = friendIDs.map((id) => {
return fetchJSON(`/users/${id}`)
});
return Promise.all(promises);
})
.then((friends) => console.log(friends));
Here we have to do somethings sequentially and other things parallel. For example we wait until we get the user id in order to get the friends associated with it. We can then retrieve the profile of each friend in parallel by iterating over all the friends. Promise.all(iterable)
returns a single promise when all the promises have inside the iterable have been resolved.
We can achieve synchronous looking code with await
. This has been achieved through generator functions
. This idea is not related to aysnc or event loops and not about concurrency. They are just about pausing the function.
function * generatorFunc() {
let result = fetch('/users')
// Pause execution by yielding.
yield result;
// Later something caused us to resume.
console.log('We are back');
}
async function getUsers() {
let result = await fetchJSON('/users') // This will pause the whole function
console.log(result);
}
A promise
always has to follow await
. Can only use await inside a async function.
Async function itself returns a promise. When we await a promise the function pauses until the promise is ready (resolved)
async function getUserFriends() {
let user = await fetchJSON('/users/user-profile')
let friendsID = await fetchJSON(`/users/${user.id}/friends`)
let promises = friendsID.map((id) => { return fetchJSON(`/users/${id}`) })
let friends = await Promise.all(promises)
console.log(friends)
}
let friends = await getUserFriends()
doSomethingCallWithFriends(friends)
No need for callbacks now with aysnc/await
Event loop is what allows Node.js to perform non-blocking I/O operations -- despite the fact that JavaScript is single-threaded -- by off loading operations to the system kernel whenever possible.
Since most modern kernels are multi-threaded, they can handle multiple operations in the background.
┌───────────────────────────┐
┌─>│ timers │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ pending callbacks │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ idle, prepare │
│ └─────────────┬─────────────┘ ┌───────────────┐
│ ┌─────────────┴─────────────┐ │ incoming: │
│ │ poll │<─────┤ connections, │
│ └─────────────┬─────────────┘ │ data, etc. │
│ ┌─────────────┴─────────────┐ └───────────────┘
│ │ check │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
└──┤ close callbacks │
└───────────────────────────┘
Each phase has a FIFO queue of callbacks to execute
setTimeout()
and setInterval()
setImmediate()
setImmediate()
callbacks invoked heresocket.on('close')
They run after a delay specified by the user however this it is not guaranteed to execute exactly after that time because other callbacks and OS scheduling may delay it.
A way to remember and continue to access a function's scope (it's variables) even once the function has finished running.
Most common usage of closure in JavaScript is the module pattern. They let you define private implementation details (variables, functions) as well as a public API that is accessible from the outside world
this
normally points to an object but which object it points to depends on how the function was called
JavaScript language is single-threaded and the asynchronous behaviour is not part of the JavaScript language itself rather they are built on top of the core JavaScript language in the browser and accessed through the browser APIs.
function main(){
console.log('A');
setTimeout(
function display(){ console.log('B'); }
,0);
console.log('C');
}
main();
The code will be executed like this underneath the hood, that is why 'B' is actually displayed last
JavaScript is single threaded but the browser offers web apis that can execute code asynchronously for you. In node this would be C++ library calls. setTimeout
is one such api call offered to us.
The event loop is very simple it just looks at the task queue and it looks at the stack if the stack is empty it pushes the first thing in the task queue onto the stack.
return (
<div> Hello world </div>
)
Won't work
return
(
<div> Hello world </div>
)
Allows us to create scope in various places and doesn't pollute the namespace
var foo = 'foo1'
(function notInGlobalNameSpace() {
var foo = 'foo2'
console.log('did something')
}) ()
console.log(foo)
JavaScript compiles the code on the fly the runs them.
The general steps to compiling JS program are as follows
var a = 2;
-> var
a
=
2
;
https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ (Event loop in node js)
https://frontendmasters.com/courses/rethinking-async-js/ (Thunks)
https://www.youtube.com/watch?v=NsQ2QIrQShU (Callbacks, async/await, promises)
https://www.youtube.com/watch?v=8aGhZQkoFbQ (Event loops explained)
new
on a functionBefore JS had classes new
when called on a constructor function would create an object {}
and point this
inside the constructor function to that object so we can assign stuff like this.name
. Also anything place in ConstuctorFuncName.prototype
would be available to all objects created with this constructor function.
prototype of a class or function does not point to the prototype of that value
The prototype chain is more like proto.proto.proto rather than prototype.prototype.prototype. For example the prototype of a function or class is the __proto
given to all objects newed
with that class or function. So to look up properties JavaScript does this instance.__proto__.__proto__ chain continues until it finishes or finds value/function
class Greeting extends React.Component {
render () {
return <p>Hello</p>
}
}
let c = new Greeting()
console.log(c.__proto__) // Greeting.prototype
console.log(c.__proto__.__proto__) // React.Component.prototype
console.log(c.__proto__.__proto__.__proto__) // Object.prototype
c.render() // Found on c.__proto__ (Greeting.prototype)
c.setState() // Found on c.__proto__.__proto__ (React.Component.prototype)
c.toString() // Found on c.__proto__.__proto__.__proto__ (Object.prototype)
In React to check if a class extends React component follow is implemented
class Component {}
Component.prototype.isReactClass = {}
// Then to check own component
OwnComponent extends React.Component {}
console.log(OwnComponent.prototype.isReactClass) // Yes
Could have used a boolean value but Jest didn't handle this well in the early days
The point of this code in React is to determine whether we can call new
or not on user function or class if isReactClass
returns true
then it must be a React class hence it must be a class and not a function so we can call new
on it.
<Link as="url mask" href="/actualurl"></Link>
There is automatic code splitting but sometimes we want to lazy load things for fast initial load of a pwa
https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures
Surprisingly useful
App Shell: The minimal HTML, CSS and JavaScript and any other static resources that provide structure for your page minus the actual content specific to a page. In other words it is the minimal resources required to get your app off the ground. Sites that are all static content are said to be 100% app shell.
Sites rendering the same code on the server and client sides use a approach know as universal (or Isomorphic) JavaScript. Here is the origins of the phrase "Universal JavaScript"
Ryan Dahl has the crazy idea to pair Google's V8 JavaScript runtime with libev so developers would have a way to run their JavaScript outside the browser.
Whenever possible it is best practice to combine SSR and CSR so that your first render of the page is on the server side. Traditionally it has been difficult to do this because the client and server side have been done in different environments and languages.
PWAs can be built with any architectural style (SSR, CSR, both) but service workers imply some subtle changes in how you build your application architecture.
sudo npm i <package> --unsafe-perm=true --allow-root
Probably should start using yarn...
Stack is first in last out like stacking plates on top of each other. This means it is faster to access data in this memory region because the items are of known size and you don't have to search. In contrast the heap stores items of unknown size at compile time. A pointer reference is used to locate the stored data in the heap so it is slower to access data.
Stack
Heap
onStateChanged(() => {
view = render(state)
})
How state changed function implemented
let update
const onStateChanged = _update => {
update = _update
}
const setState = newState => {
state = newState
update()
}
NaN == NaN
undefined == null
Infinity - Infinity
gives us NaN
NaN
and empty strings ""
count as falsetypeof null
returns an object this is a bug in JS that will likely never be fixed because too much code relies on this to work===
vs ==
==
checks for equality with coercion and ===
checks for equality without coerciontrue
or false
use ===
0
""
[]
use ===
==
non-primitive
values like objects
including function
and array
both ==
===
just check they refer to the same thing and not match the underlying valuesNaN
which is neither greater than or equal to anythingvar a = 42
var b = "foo"
a < b // false
b > a // false
a == b // false
var x = function bar() {alert('helo')}
even though the function is bar you can only invoke it with x()
""
0
, -0
, NaN
null
, undefined
false
var a = [1,2,3]
var b = [1,2,3]
var c = '1,2,3'
a == c //true
b == c // true
a == b // false
using display: flex;
aligns elements from left to right
https://next.json-generator.com/
https://jsoneditoronline.org
https://github.com/typicode/json-server (Fully featured fake api server)
https://jsonschema.net/
toJSON
user = {
firstName: 'David',
lastName: 'Yu'
get fullName() {
return this.firstName + this.lastName
},
toJSON: function () {
return {
firstName: this.firstName,
lastName: this.lastName
}
}
}
JSON.stringify(user) // => {"firstName":"David", "lastName":"Yu"}
We can see the user of toJSON
where we want to exclude the fullName Attribute if called without toJSON
in this case we get `{"firstName": "David", "lastName": "Yu", "fullName": "DavidYu"}
eval()
This will execute any serialised JS code
Here is a list of essential high level things to help with building high quality apps. They have been created during my time in the trenches...
Should aim to make each stateless functional component a pure function. They should take in props and return a DOM element without causing side effects
If you need to have a this
scope or encapsulate functionality then you can't use functional components.
Add babel 5.8 newer babels will not work as an in browser transformer.
Example here
ES6 class | React.createClass() |
---|---|
' ' | getDefaultProps() |
constructorProps() |
getInitialState() |
componentWillMount() |
componentWillMount() |
render() |
render() |
componentDidMount() |
componentDidMount() |
componentWillUnmount() |
componentWillUnmount() |
componentDidMount()
runs code after the DOM has loaded which makes it a good place for third party JS code
The updating lifecycle is a series of methods which are invoked when the state changes or new props are received from the parent component. e.g. updating lifecycle is invoked every time setState
is called if you call setState
within the updating lifecycle an infinite loop occurs.
componentWillReceiveProps(nextProps)
This is invoked when component receives new props this the only method for updating lifecycle where setState
can be called`
shouldComponentUpdate(nextProps, nextState)
This can call off the updating to allow only necessary updates to improve performance
componentWillUpdate(nextProps, nextState)
Invoked just before the component updates
componentDidUpdate(nextProps, nextState)
Invoked after to component has been called with the render function
https://codesandbox.io/s/6lnvzkky13
Components that return other components
Examples here: https://codesandbox.io/s/n5jk4qmwp4
Reducers should be predictable. Generating random data, calling APIs and other asynchronous processes should be done outside of reducers.
Does not exist at runtime you can think of it as a static analysis tool. Therefore if you make a network request or user enters some data typescript will not be able to type check for you since they occur at run time.
Interacting with a website should feel natural using animations/springs help with that.
https://github.com/chenglou/react-motion
https://github.com/pmndrs/react-spring
https://the-guild.dev/connected-build
https://codepen.io
https://give-n-go.co
https://tobiasahlin.com/moving-letters/
Console.WriteLine("hello world");
-> C.WL("helloworld");
$"This is a {variable}"
String s = String.Format("The current price is {0:C2} per ounce.",
pricePerOunce);
Console.WriteLine(s);
System.Console.WriteLIne
or just type using System
at the top to do things normally Console.WriteLine
ref
e.g. ref myValue
.Any()
and .First()
using
to automatically place expression in a try catch blockusing (var exampleObject = new ExampleClass()) { exampleObject.SomeMethod() }
{
var exampleObject = new ExampleClass()
try {
exampleObject.SomeMethod()
} finally {
if (exampleObject != null) {
exampleObject.Dispose();
}
}
?.
e.g. object?.methodCall()
on occurs if object is not null this can also be done on array calls array?[0]
??
e.g. float someDecimal = object?.methodCall() ?? 0.0
if the left hand side is null return the right hand side@
in front of a string to not have to escape things with a back slashThey are like constants where you cannot modify them however they don't have to be instantly initialised
You should not use floats or doubles when doing monetary calculations because they are just an approximation of the actual number. Use type decimal instead if you want to use one of the two use double
because it can represent them more precisely
Use classes for most new types but use structs if
They describe a set of methods and properties that can be called on an object but does not provide concrete implementations for them. You declare classes that implement them. Interfaces are useful for assigning common functionality to classes that are not related to each other. It can only contain abstract methods, abstract properties, abstract indexers, abstract events. All interface members are implicitly declared both public and abstract. In addition interfaces can extend one or more interface.
By default all interfaces being with an I e.g. IGoodInterface
These are classes just used for inheritance and are never instantiated
Use an interface when there is no default implementation to inherit
Allow us to not have to deal with type stuff so much. Generic method defined in the following way
private static void DisplayArray<T>(T[], input Array)
{
}
The issue with generics is that the compiler has to see that all types can execute the code, this is rarely possible instead we can restrict to a subset with the following:
private static T Maximum(T x, T y) where T : IComparable<T>
Let
and const
let
allows us to scope a variable to a code block defined by {}
. var
only scoped a variable to a functionconst
throws an error when it is reassignedThis allows for string interpolation when constructing a string or some HTML
Similar to python when defining a parameter we can assign it a default value if it is not entered
function defaultOne(x=100) {}
Arrow functions do not have their own value of this
they will instead use the value of the enclosing block
var sandwish = {
bread: 'dutch',
meat: 'egg',
cheese: 'swiss'
}
var {bread, meat} = sandwich
This can also be done for arrays too
var [firstPlace] = ['firstplace', 'secondplace', 'thirdplace']
var [,,thirdPlace] = ['firstplace', 'secondplace', 'thirdplace']
This is the opposite of object destrucutring. We can grab objects from the global scope and turn them into an object
var name = 'name'
var place = 'place'
var fun = {name, place}
var skier = {
name: name,
sound: sound, powderYell: function() {
var yell = this.sound.toUpperCase()
console.log(`${yell} ${yell} ${yell}!!!`)
},
speed: function(mph) {
this.speed = mph
console.log('speed:', mph)
}
}
const skier = { name,
sound,
powderYell() {
let yell = this.sound.toUpperCase()
console.log(`${yell} ${yell} ${yell}!!!`)
},
speed(mph) {
this.speed = mph
console.log('speed:', mph)
}
}
Expands the contents of an array
var peaks = ["Tallac", "Ralston", "Rose"];
var canyons = ["Ward", "Blackwood"];
var tahoe = [...peaks, ...canyons];
We can do neat things with this operator like not mutating an array to get the last element from it
var peaks = ["Tallac", "Ralston", "Rose"]
var [last] = [...peaks].reverse()
Use spread operator to collect all items of an array
var lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"]
var [first, ...rest] = lakes
console.log(rest.join(", ")) // "Marlette, Fallen Leaf, Cascade"
Can use spread to collect all arguments for function and place it in an array
function directions(...args) {
var [start, ...remaining] = args
var [finish, ...stops] = remaining.reverse()
console.log(`drive through ${args.length} towns`)
console.log(`start in ${start}`)
console.log(`the destination is ${finish}`)
console.log(`stopping ${stops.length} times in between`)
}
directions(
"Truckee",
"Tahoe City",
"Sunnyside",
"Homewood",
"Tahoma"
)
Can also use spread for objects
var morning = {
breakfast: "oatmeal",
lunch: "peanut butter and jelly"
}
var dinner = "mac and cheese"
var backpackingMeals = {
...morning,
dinner
}
console.log(backpackingMeals) // { breakfast: 'oatmeal', lunch: 'peanut butter and jelly', dinner: 'mac and cheese'}
The order also matters because if we placed dinner before morning then it would not replace whatever is in the morning object. e.g. this won't work
var backpackingMeals = {
dinner,
...morning
}
## Promises
They make dealing with asynchronous requests easier.
``` js
const getFakeMembers = count => new Promise((resolves, rejects) => {
const api = `https://api.randomuser.me/?nat=US&results=${count}`
const request = new XMLHttpRequest()
request.open('GET', api)
request.onload = () => {
request.status === 200 ? resolves(JSON.parse(request.response).results) :
rejects(Error(request.statusText))
}
request.onerror = (err) => rejects(err)
request.send()
})
getFakeMembers(5).then( members => console.log(members), err => console.error( new Error("cannot load members from randomeuser.me")))
When asynchronous process fails we call rejects if it succeeds we call resolve. We can pass a callback function to the Promise
object to be executed when it succeeds
class Good {
constructor(dataInstantiatedWith) {
this.descriptiveName = dataInstantiatedWith
}
}
Inheritance
class Expedition extends Vacation {
constructor(destination, length, gear) {
super(destination, length)
this.gear = gear
}
print() {
super.print()
console.log(`Bring your ${this.gear.join(" and your ")}`)
}
}
Modules represent a piece of reusable code. Previously we had to use a library that could handle importing and exporting modules.
export const print(message) => log(message, new Date())
export const log(message, timestamp) =>
console.log(`${timestamp.toString()}: ${message}`)
///////////////////// Different file
import { print, log } from './file'
import freel from './anotherfile'
If you only want to export one variable from a module use export default
const freel = new SomeClass()
export default freel
Both export and export default can be used on any JavaScript type.
module.exports =
is used instead of export
and require
is used instead of import
This is called CommonJS
Some of these shortcuts are not set by default in that case you need to set it yourself cmd + shift + p
and choose open keyboard shortcuts
. Also these are only for Mac
ctrl + shift + n
ctrl + shift f
ctrl + shift c
cmd + option + arrow key
ctrl + \
cmd + b
option + shift + o
remove unsed variablesoption + cmd + t
delete all panes to the rightF12
to rename a variable and all its instancescmd + .
for quick fix suggestionscmd + ctrl + shift + d
skip selection-webkit-appearance: none;
to forms for shit to display correctly-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
ctrl + shift
To go to a new line on windowswindows + shift + s
to get section screenshot#!
for a link that doesn't go anywhere and doesn't move the pagealt+z
to compress everything into view and alt+z
again to toggle offconsole.log
an object the output could be misleading you may see parts of an object that are resolved afterwards. Use Object.keys(yourObject)
to see the true state at runtime.setState()
after a component has unmounted this can occur when you have an API call and it finishes after a component has unmounted.toFixed(NUMBER_OF_DECIMAL_PLACES)
use this to round to a certain number of decimal placesdebugger
in code and having dev tools open with stop application at that point so yo can inspect variables<meta name="viewport" content="width=device-width, initial-scale=1.0">
when viewed on mobile it will appear zoomed out //////////////// Basic implementations
// Log Clock Time every Second
setInterval(logClockTime, 1000);
function logClockTime() {
// Get Time string as civilian time
var time = getClockTime();
// Clear the Console and log the time
console.clear();
console.log(time);
}
function getClockTime() {
// Get the Current Time
var date = new Date(); var time = "";
// Serialize clock time
var time={
hours: date.getHours(), minutes: date.getMinutes(), seconds: date.getSeconds(), ampm: "AM"
}
// Convert to civilian time
if (time.hours == 12) { time.ampm = "PM";
} else if (time.hours > 12) { time.ampm = "PM"; time.hours -= 12; }
// Prepend a 0 on the hours to make double digits
if (time.hours < 10) { time.hours = "0" + time.hours;
}
// prepend a 0 on the minutes to make double digits
if (time.minutes < 10) { time.minutes = "0" + time.minutes;
}
// prepend a 0 on the seconds to make double digits
if (time.seconds < 10) { time.seconds = "0" + time.seconds;
}
// Format the clock time as a string "hh:mm:ss tt"
return time.hours + ":" + time.minutes + ":" + time.seconds + " "
+ time.ampm;
}
//////////////// Functional version
const oneSecond = () => 1000
const getCurrentTime = () => new Date()
const clear = () => console.clear()
const log = message => console.log(message)
const compose = (...fns) =>
(arg) =>
fns.reduce( (composed, f) => f(composed), arg )
const serializeClockTime = date =>
({
hours: date.getHours(),
minutes: date.getMinutes(),
seconds: date.getSeconds()
})
const civilianHours = clockTime =>
({
...clockTime,
hours: (clockTime['hours'] > 12) ?
clockTime['hours'] - 12 :
clockTime['hours']
})
const appendAMPM = clockTime =>
({
...clockTime,
ampm: (clockTime.hours > 12) ? 'PM' : 'AM'
})
const display = target => time => target(time)
const formatClock = format =>
time =>
format.replace("hh", time.hours)
.replace('mm', time.minutes)
.replace('ss', time.seconds)
.replace('tt', time.ampm)
const prependZero = key =>
clockTime =>
({
...clockTime,
[key]: (clockTime[key] < 10) ?
'0' + clockTime[key] :
clockTime[key]
})
const convertToCivilianTime = clockTime =>
compose(
appendAMPM,
civilianHours
)(clockTime)
const doubleDigits = civilianTime =>
compose(
prependZero('hours'),
prependZero('minutes'),
prependZero('seconds')
)(civilianTime)
const startTicking = () =>
setInterval(
compose(
clear,
getCurrentTime,
serializeClockTime,
convertToCivilianTime,
doubleDigits,
formatClock('hh:mm:ss tt'),
display(log)
),
oneSecond()
)
startTicking()
The number one way for attackers is through your browser extensions
<!-- <%- userData %>-->
<iframe <%- userData %>="myValue" />
<<%- userData %> class="myElement">
<style> <%- userData %> </style>
older browsers allow you to load code hereDefine what sources you allow to download content from
We can but HTML
and JS
into an image and if we can rename that image then we can execute the injected code
Origin
header which cannot be altered by client-side codeDOM insertions are one of the most expensive DOM API operations. In contrast updating DOM elements performs much faster.
Functional trend came from lambda calculus. Functions have since been a part of calculus since it emerged in the 17th century. More complex functions are called higher-order functions.
In 1950s, John McCarthy took concepts from lambda calculus and applied them to a new programming language called Lisp. Lisp implemented the concept of higher-order functions and functions as first-class members or first-class citizens. A function is said to be a first-class citizen when it can be declared as a variable and sent to functions as an argument. These functions can be returned from functions.
Functional programs prefer recursion over loops because they have to since they cannot alter the state and have no side effects. Not having side effects means you cannot have loop counters since they constitute a mutable state. In recursion no state is needed so this is a natural match for recursion. Having no side effects also means that the compiler can optimise it better with tail call optimisation.
When a function returns or takes in other functions it is said to be a higher-order function
var createScream = function(logger) {
return function(message) {
logger(message.toUpperCase() + "!!!")
}
}
const scream = createScream(message => console.log(message))
scream('functions can be returned from other functions')
scream('createScream returns a function')
scream('scream invokes that returned function')
// FUNCTIONS CAN BE RETURNED FROM OTHER FUNCTIONS!!!
// CREATESCREAM RETURNS A FUNCTION!!!
// SCREAM INVOKES THAT RETURNED FUNCTION!!!
We can write it with arrow function as well.
createScream = logger => message => logger(message.toUpperCase() + "!!!")
Functional programming is part of a larger programming paradigm called declarative programming.
Declarative programming focuses on what is supposed to happen whereas imperative programming focuses on how the task is achieved e.g. Implementation level.
///////////////// Imperative
var string = "This is the midday show with Cheryl Waters";
var urlFriendly = "";
for (var i=0; i<string.length; i++) {
if (string[i] === " ") {
urlFriendly += "-";
} else {
urlFriendly += string[i];
}
}
console.log(urlFriendly);
///////////////// Declarative
const urlFriendly = string.replace(/ /g, '-')
We can see declarative is higher level compared to imperative.
Data is immutable in functional/declarative programming
let color_lawn = {
title: "lawn",
color: "#00FF00",
rating: 0
}
////////////// Mutating the object
function rateColor(color, rating) { color.rating = rating
return color
}
console.log(rateColor(color_lawn, 5).rating)
console.log(color_lawn.rating)
///////////// Functional Programming not mutating object
var rateColor = function(color, rating) {
return Object.assign({}, color, {rating:rating})
}
console.log(rateColor(color_lawn, 5).rating) // 5
console.log(color_lawn.rating) // 4
///////////// No mutating using latest JS
const rateColor = (color, rating) => ({...color, rating})
//////////// Use functions that don't mutate data for example Array.push mutates use Array.concat or spread operator
Pure functions Return a value based on the parameter passed in. They do not change the application state e.g. no side effects, set global variables. The advantage of these sort of functions are that they are easily testable and don't require a complicated setup. The output is also easier to predict. In React UI is expressed with pure functions e.g. const header = (props) => <h1>{props.title}</h1>
map
filter
join
reduce
(Reduce array to a single value using some condition)//////////// Editing a certain value without altering original object
let schools = [
{ name: "Yorktown"},
{ name: "Stratford" },
{ name: "Washington & Lee"}, { name: "Wakefield"}
]
const editNames = (oldName, name, schools) =>
schools.map(school => school.name === oldName ?
({...school, name}) : school)
The ({...school, name})
is an interesting line what it means is expand the object school
and replace all name
attributes with the value held by the name
parameter passed in. Not the parenthesis they need to be there in order to return an object literal (I think)
const colors = ['red', 'red', 'green', 'blue', 'green']
const distinctColors = colors.reduce(
(distinct, color) =>
(distinct.indexOf(color) !== -1) ?
distinct :
[... distinct, color],
[]
)
You should break the program up into small pure functions that are focused on specific tasks and eventually you will need to put these smaller functions together on example is chaining functions together.
import deepFreeze from 'deep-freeze'
deepFreeze(obj)
Learning React
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color>
{props.children}
</div>
)
}
Used when some data needs to be accessed by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. Examples include authenticated user, theme, preferred language
Instead of this
<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... which renders ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... which renders ...
<Link href={user.permalink}>
<Avatar user={user} size={avatarSize} />
</Link>
We can pass an entire component
function Page(props) {
const user = props.user;
const userLink = (
<Link href={user.permalink}>
<Avatar user={user} size={props.avatarSize} />
</Link>
);
return <PageLayout userLink={userLink} />;
}
// Now, we have:
<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout userLink={...} />
// ... which renders ...
<NavigationBar userLink={...} />
// ... which renders ...
{props.userLink}
Which means we only pass one prop rather than two.
The issue with this is that we are moving complexity higher up the tree making them more complicated and forces lower-level components to be more flexible than you want.
Basically global state
const MyContext = React.createContext(defaultvalue)
<MyContext.Provider value={}>
...
</MyContext.Provider>
class MyClass extends React.Component {
componentDidMount() {
let value = this.context;
/* perform a side-effect at mount using the value of MyContext */
}
componentDidUpdate() {
let value = this.context;
/* ... */
}
componentWillUnmount() {
let value = this.context;
/* ... */
}
render() {
let value = this.context;
/* render something based on the value of MyContext */
}
}
MyClass.contextType = MyContext;
ctrl + k -> ctrl + c
ctrl + k -> ctrl + u
alt + arrow keys
alt + shift + .
ctrl + shift + click
alt + w, v
ctrl + t, r
ctrl + t, d
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.