(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| /* Example usage: | |
| * let el = createElement('div', {style: 'color: green'}, 'Hello world!'); | |
| * document.body.appendChild(el); | |
| * / | |
| export const createElement = (type, props, ...children) => { | |
| if (type.constructor === Function) | |
| return type(props); |
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <span id="counter"></span> | |
| <button id="inc">+</button> | |
| <button id="dec">-</button> | |
| </body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script> | |
| <script> | |
| const reducer = (state, action) => ({ |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script> | |
| window.state = {counter: 0}; | |
| const listeners = []; | |
| const reducer = (state, action) => ({ | |
| INC: {...state, counter: state.counter + 1}, |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> | |
| <style> | |
| html, body, #map { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; |
| <?php | |
| /** | |
| * A simple class that wraps a PHP array in a functional way. | |
| * | |
| * Example Usage: | |
| * | |
| * $val = (new FunctionalArray(range(1, 10))) | |
| * ->map (function($value) { return $value * 1; }) | |
| * ->filter (function($value) { return $value > 5; }) |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Simple Map</title> | |
| <meta name="viewport" content="initial-scale=1.0"> | |
| <meta charset="utf-8"> | |
| <style> | |
| #map { | |
| height: 100%; | |
| } |
| import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; | |
| /** | |
| * Creates a nested FormGroup, FormArray, or FormControl with validators | |
| * from a given object | |
| */ | |
| export const createFormObject = (initial: any): AbstractControl => { | |
| if (Array.isArray(initial)) { | |
| // detemine if array contains ValidatorFn or ValidatorFn[] | |
| // eg: use same syntax as formBuilder |
| /** | |
| * Calls a function after a user has been idle for a specified period of time | |
| * @param callback {Function} - The function to call | |
| * @param delay {number} - The delay (in milliseconds) | |
| */ | |
| function onIdle(callback, delay) { | |
| var timeoutId; | |
| var events = ["click", "mousedown", "mouseup", "focus", "blur", "keydown", "change", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel", "keydown", "keyup", "keypress", "textInput", "touchstart", "touchmove", "touchend", "touchcancel", "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"]; | |
| function initTimeout() { |
| // Takes a URL, param name, and data string | |
| // Sends to the server.. The server can respond with binary data to download | |
| jQuery.download = function(url, key, data) { | |
| $('<form/>') | |
| .attr('action', url) | |
| .attr('method', 'post') | |
| .append($('<input/>') | |
| .attr('type', 'hidden') | |
| .attr('name', key) |