| Header 1 | 117 |Header 2 | 118 | 119 | 120 |
|---|
| Data 1 |
| Data 2 |
| Data 3 |
test satu dua tiga
"; // is a string 18 | document.body.appendChild(el); 19 | 20 | // Works 21 | var el = document.createElement("p"); // is a node 22 | el.innerHTML = "test satu dua tiga"; 23 | document.body.appendChild(el); 24 | ``` 25 | 26 | # hyperscript-helpers 27 | 28 | This small library helps make the code cleaner. 29 | 30 | ```javascript 31 | // instead of writing 32 | h("div"); 33 | 34 | // write 35 | div(); 36 | 37 | // instead of writing 38 | h("section#main", mainContents); 39 | 40 | // write 41 | section("#main", mainContents); 42 | ``` 43 | 44 | ### API 45 | 46 | ```javascript 47 | tagName(selector); 48 | tagName(attrs); 49 | tagName(children); 50 | tagName(attrs, children); 51 | tagName(selector, children); 52 | tagName(selector, attrs, children); 53 | Where; 54 | ``` 55 | 56 | - `selector` is string, starting with "." or "#". 57 | - `attrs` is an object of attributes. 58 | - `children` is a hyperscript node, an array of hyperscript nodes, a string or an array of strings. 59 | 60 | # Simple app 61 | 62 | 1. When we click the increment button, the `dispatch` function, defined in the `app` function is called, with the `MSGS.ADD` payload. 63 | 2. The `update` function, a switch statement, then uses the payload to match the behavior, in this case to add 1 to the current `model`. 64 | 3. The `view` function then uses the latest model to generate the DOM tree, but only with the changes parts, thanks to the `virtual-dom`. 65 | 66 | ```javascript 67 | const hh = require("hyperscript-helpers"); // Create HTML element functions 68 | const { h, diff, patch } = require("virtual-dom"); 69 | const createElement = require("virtual-dom/create-element"); 70 | 71 | // const { div, button } = require('hyperscript-helpers')(h); 72 | const { div, button } = hh(h); 73 | 74 | const initModel = 0; 75 | 76 | const MSGS = { 77 | ADD: "ADD", 78 | SUBTRACT: "SUBTRACT" 79 | }; 80 | 81 | // Updates the model after a view action. 82 | function update(msg, model) { 83 | switch (msg) { 84 | case MSGS.ADD: 85 | return model + 1; 86 | case MSGS.SUBTRACT: 87 | return model - 1; 88 | default: 89 | return model; 90 | } 91 | } 92 | 93 | // The dispatch reloads the view. Defined in app. 94 | function view(dispatch, model) { 95 | return div([ 96 | div({ className: "counter" }, `Count: ${model}`), 97 | button( 98 | { 99 | className: "button", 100 | onclick: () => dispatch(MSGS.ADD) 101 | }, 102 | "+" 103 | ), 104 | button( 105 | { 106 | className: "button", 107 | onclick: () => dispatch(MSGS.SUBTRACT) 108 | }, 109 | "-" 110 | ) 111 | ]); 112 | } 113 | 114 | // impure code contained inside app function 115 | function app(initModel, update, view, node) { 116 | // Initial view 117 | let model = initModel; 118 | let currentView = view(dispatch, model); 119 | let rootNode = createElement(currentView); 120 | node.appendChild(rootNode); 121 | 122 | function dispatch(msg) { 123 | model = update(msg, model); 124 | const updatedView = view(dispatch, model); 125 | const patches = diff(currentView, updatedView); 126 | rootNode = patch(rootNode, patches); 127 | currentView = updatedView; 128 | } 129 | } 130 | 131 | // Load app div 132 | const rootNode = document.getElementById("app"); 133 | 134 | app(initModel, update, view, rootNode); 135 | ``` 136 | 137 | # HTTP effects 138 | 139 | HTTP requests are triggered in a similar way to how the app performs state updates. 140 | 141 | Normal updates: 142 | 143 | - view generates a message. 144 | - update is called with the new message and current model. 145 | - update returns the new model. 146 | - view uses the new model to re-render the view. 147 | 148 | HTTP updates: 149 | 150 | - view generates a message. 151 | - update is called with the new message and current model. 152 | - update returns the new model, a url, and a message generating function. 153 | - the app function makes a server request with the url. 154 | - when the server responds, the message generating function returned from update, creates a new message that includes the server data. 155 | - update is called with the newly generated message. 156 | - update returns the new model. 157 | - view uses the new model to re-render the view. 158 | -------------------------------------------------------------------------------- /topics/googleapi.md: -------------------------------------------------------------------------------- 1 | # Sheets API 2 | 3 | 1. Go to console.developers.google.com 4 | 2. Create a project. 5 | 3. Go to console.developers.google.com/apis/credentials and create API key for the project. 6 | 4. Set the sheet to public for the request to work. 7 | 8 | The sheet can be public i.e. `Anyone who has the link can view`, and be only editable privately. This avoids the OAuth part. 9 | 10 | 11 | ```javascript 12 | let sheet = "c750833d5021f60a1b8ff8bf0a21bb9dc74cff12" 13 | let range = "Sheet1" 14 | let apiKey = "6e0ece719a48d5334369bd881b4324aa957e4407" 15 | 16 | let url = `https://sheets.googleapis.com/v4/spreadsheets/${sheet}/values/${range}?key=${apiKey}` 17 | 18 | fetch(url) 19 | .then(res => res.json()) 20 | .then(data => { 21 | console.log(data) 22 | }) 23 | .catch(err => err); 24 | ``` 25 | 26 | ### Private sheet 27 | 28 | With private user data you would need to use OAuth. 29 | 30 | 1. Go to console.developers.google.com/apis/library and pick Sheets. 31 | 2. Configure OAuth. 32 | 33 | -------------------------------------------------------------------------------- /topics/graphql.md: -------------------------------------------------------------------------------- 1 | GraphQL is an alternative to REST API. It's a typed query language. 2 | 3 | It allows flexible querying from the front-end i.e. client. 4 | 5 | It solves the problem of needing **just** a piece of data, without getting all the data from an end-point. 6 | 7 | REST API would handle this for a `GET /user` request with: 8 | - `GET /user-slim` - Lots of routes and updating. 9 | - `GET /user?data=slim` - The API becomes complex 10 | 11 | GraphQL would handle this with `POST /user` by sending this query expression in the body. 12 | 13 | ```js 14 | { 15 | query { // operation type 16 | user { // operation end-point 17 | name // requested field 18 | age 19 | } 20 | } 21 | } 22 | ``` 23 | 24 | GraphQL **always** uses `POST` because it sends the query expression. 25 | 26 | | REST API | GraphQL | 27 | | ------------- |-------------| 28 | | GET | `query` operation type | 29 | | POST, PUT, PATCH, DELETE | `mutation` operation type | 30 | | Routes | Query definitions | 31 | | Controllers | Resolvers | -------------------------------------------------------------------------------- /topics/javascript.md: -------------------------------------------------------------------------------- 1 | # Language 2 | 3 | The complete JavaScript implementation is made up of three distinct parts: 4 | 5 | - The Core (based on ECMAScript spec) 6 | - The Document Object Model (DOM) 7 | - The Browser Object Model (BOM) 8 | 9 | ## ECMAScript 10 | 11 | ECMA-262 describes it like this: 12 | 13 | ``` 14 | ECMAScript can provide core scripting capabilities for a variety of host environments, and therefore the core scripting language is specified... apart from any particular host environment. 15 | ``` 16 | 17 | A Web browser is considered a host environment for ECMAScript, but it is not the only host environment. A list of other host environments listed here. 18 | 19 | Apart from DOM and BOM, each browser has its own implementation of the ECMAScript interface. 20 | 21 | ## Document Object Model (DOM) 22 | 23 | The Document Object Model (DOM) is an application programming interface (API) for HTML as well as XML. 24 | 25 | The DOM maps out an entire page as a document composed of a hierarchy of nodes like a tree structure and using the DOMAPI nodes can be removed, added, and replaced. 26 | 27 | ### DOM level 1 28 | 29 | Consisted of two modules: the DOM Core, which provided a way to map the structure of an XML-based document to allow for easy access to and manipulation of any part of a document, and the DOM HTML, which extended the DOM Core by adding HTML-specific objects and methods. 30 | 31 | ### DOM Level 2 32 | 33 | Introduced several new modules of the DOM to deal with new types of interfaces: 34 | 35 | - DOM Views — describes interfaces to keep track of the various views of a document (that is, the document before CSS styling and the document after CSS styling) 36 | - DOM Events — describes interfaces for events 37 | - DOM Style — describes interfaces to deal with CSS-based styles 38 | - DOM Traversal and Range — describes interfaces to traverse and manipulate a document tree 39 | 40 | ### DOM Level 3 41 | 42 | Further extends the DOM with the introduction of methods to load and save documents in a uniform way (contained in a new module called DOM Load and Save) as well as methods to validate a document (DOM Validation). In Level 3, the DOM Core is extended to support all of XML 1.0, including XML Infoset, XPath, and XML Base. 43 | 44 | Note that the DOM is not JavaScript-specific, and indeed has been implemented in numerous other languages. For Web browsers, however, the DOM has been implemented using ECMAScript and now makes up a large part of the JavaScript language. 45 | 46 | Other DOMs 47 | 48 | - Scalable Vector Graphics (SVG) 49 | - Mathematical Markup Language (MathML) 50 | - Synchronized Multimedia Integration Language (SMIL) 51 | 52 | ## Browser Object Model (BOM) 53 | 54 | Browsers feature a Browser Object Model (BOM) that allows access and manipulation of the browser window. Using the BOM, developers can move the window, change text in the status bar, and perform other actions that do not directly relate to the page content. 55 | 56 | Because no standards exist for the BOM, each browser has its own implementation. 57 | 58 | # Event Loop 59 | 60 |  61 | 62 | Based on [Philip Roberts' talk](https://www.youtube.com/watch?v=8aGhZQkoFbQ). 63 | 64 | The Javascript runtime only knows of the `heap` and `call stack`. 65 | 66 | The rest of the functionality, like async stuff, is provided in the form of `WebAPIs` by the browser/Node. 67 | 68 | For async operations, the `callback` is offloaded into a separate `queue`, which is emptied by the `event loop` one by one as soon as the `stack` becomes empty. 69 | 70 | Without the `event loop` the stack would be blocked during the whole duration of the async operaiton, basically freezing the app. 71 | 72 | # Hoisting 73 | 74 | Both variable and function declarations are hoisted to the top on code execution, meaning that their order is irrelevant i.e functions can be called before they are declared. 75 | 76 | # Variables 77 | 78 | ```javascript 79 | var a; // Regular. 80 | let c; // Block scoped. 81 | const b; // Immutable. 82 | ``` 83 | 84 | # Functions 85 | 86 | Functions are first class objects - a function is a regular object of type `function`. The function object type has a constructor: `Function`. 87 | 88 | There are several ways to declare a function. 89 | 90 | The difference is how the function interacts with the external components (the outer scope, the enclosing context, object that owns the method, etc) and the invocation type (regular function invocation, method invocation, constructor call, etc). 91 | 92 | ## Function declaration 93 | 94 | **Hoisted**. Available immediately after parsing, before any code is executed. 95 | 96 | The function declaration creates a variable in the current scope with the identifier equal to function name. This variable holds the function object. 97 | 98 | ```javascript 99 | function foo() {} 100 | foo(); 101 | ``` 102 | 103 | Use them when a function expression is not appropriate or when it is important that that a function is hoisted. 104 | 105 | ## Function expression 106 | 107 | **Not hoisted.** Available only after the variable assignment is executed. 108 | 109 | ```javascript 110 | // Named 111 | let bar = function foo() {}; 112 | bar(); 113 | foo(); // undefined 114 | ``` 115 | 116 | Use them when you are doing recursion or want to see the function name in the debugger. 117 | 118 | ```javascript 119 | // Anonymous 120 | let foo = function() {}; 121 | foo(); 122 | 123 | let bar = foo(); 124 | bar(); // Error: not a function. 125 | ``` 126 | 127 | Use them when you want to pass a function as an argument to another function or you want to form a closure. 128 | 129 | ## IIFE - immediately Invoked Function Expression 130 | 131 | ```javascript 132 | (function() { 133 | // ... 134 | })(); 135 | ``` 136 | 137 | Use them for the module pattern. 138 | 139 | ## ES6 140 | 141 | Binds `this` automatically. 142 | 143 | ```javascript 144 | let foo = () => {}; 145 | ``` 146 | 147 | Use them when you want to lexically bind the `this` value. 148 | 149 | ## Function constructor (Avoid this) 150 | 151 | ```javascript 152 | let foo = new Function(); 153 | ``` 154 | 155 | ## Other 156 | 157 | - Use function declaration generators `function* foo(){}` when you want to exit and then re-enter a function. 158 | - Use function expression generators `let foo = function* [name](){}` when you want to exit and then re-enter a nested function. 159 | 160 | ## Function parameters vs arguments 161 | 162 | An argument is the value supplied to the parameter. 163 | 164 | ```javascript 165 | function foo(bar) { 166 | // bar is a parameter 167 | console.log(bar); 168 | } 169 | 170 | foo("baz"); // baz is an argument. 171 | ``` 172 | 173 | # Useful 174 | 175 | ## Truthy / Falsy 176 | 177 | Strings with at least one letter and numbers larger than zero are `truthy`. 178 | 179 | ```javascript 180 | console.log(true && "foo"); // foo 181 | console.log(true && "foo" && 1); // 1 182 | ``` 183 | 184 | # Debugging 185 | 186 | ```javascript 187 | // Write to console 188 | console.log(); 189 | 190 | // Show DOM element 191 | console.dir(); 192 | 193 | // Display the call stack of a function 194 | console.trace(); 195 | 196 | // Track execution time 197 | console.time("point"); // undefined 198 | console.timeEnd("point"); // point: 1337.42 ms 199 | 200 | // Count the number of executions 201 | console.count("foo"); // foo: 1 202 | console.count("foo"); // foo: 2 203 | console.countReset("foo"); // undefined 204 | console.count("foo"); // foo: 1 205 | 206 | // Avoid if-else statements 207 | function greaterThan(a, b) { 208 | console.assert(a > b, { message: "a is not greater than b", a: a, b: b }); 209 | } 210 | greaterThan(2, 1); // a is not greater than b, a: 2, b: 1 211 | 212 | // Heap size 213 | console.memory; 214 | 215 | // Display a table. Takes an array of objects. 216 | console.table(array); 217 | ``` 218 | -------------------------------------------------------------------------------- /topics/linux.md: -------------------------------------------------------------------------------- 1 | # Terminal 2 | 3 | `/` - Root directory 4 | `~` - Home directory 5 | 6 | `^` - Control key. 7 | `M` - Alt key. 8 | 9 | `CTRL` + `C` - Stop running command. 10 | `CTRL` + `D` - Close current shell session. 11 | `CTRL` + `L` - Clear screen. (Scrolls you down in reality) 12 | 13 | `CTRL` + `A` - Go to beginning of line. 14 | `CTRL` + `E` - Go to end of line. 15 | `CTRL` + `F` - Next word. 16 | `CTRL` + `B` - Previous word. 17 | 18 | `ALT` + `Backspace` - Delete last word. 19 | `ALT` + `Left` / `Right` - Go to previous / next word. 20 | `CTRL` + `U` - Delete whole line. 21 | 22 | `man COMMAND` - Command help. 23 | `history` - Lists all the commands used. 24 | `CTRL` + `R` - Search command history. Hit again for previous command. 25 | 26 | # Information 27 | 28 | ```bash 29 | cat /etc/os-release # Linux version 30 | df -h # Show disk space in readable format 31 | ``` 32 | 33 | # Install 34 | 35 | `dpkg` is a backend for `apt-get`, which is a backend for `aptitude` (GUI). 36 | 37 | ## Packages 38 | 39 | ```bash 40 | apt-cache search PACKAGE # Search packages. 41 | apt-cache madison PACKAGE # List versions. 42 | 43 | apt-get update # Update the packages list. 44 | apt-get install PACKAGE # Install specified package. 45 | apt-get upgrade # Actually update the packages. 46 | 47 | apt list --installed # A list of installed packages. 48 | 49 | apt-get remove PACKAGE # Remove a specified package. 50 | add-apt-repository REPO # Add 3rd party repository or PPA (Personal Package Archive). 51 | 52 | curl URL # Output the URL content. 53 | wget "URL" # Download from URL. 54 | sudo dpkg –i FILE_NAME # Install downloaded file. 55 | ``` 56 | 57 | ## .deb 58 | 59 | Install `.deb` packages from the terminal. 60 | 61 | ```bash 62 | sudo dpkg -i