PSQL

mech · mech · commit bf2630f7dd68 · 2016-07-28T19:10:30.000+08:00
diff --git a/API/jwt.md b/API/jwt.md
@@ -2,7 +2,7 @@
 
 Is JWT just a re-implementation of Rails signed cookie?
 
-* [Securing React Redux Apps With JWT Tokens](https://medium.com/@rajaraodv/securing-react-redux-apps-with-jwt-tokens-fcfe81356ea0#.8e8z55ik0)
+* [**Securing React Redux Apps With JWT Tokens**](https://medium.com/@rajaraodv/securing-react-redux-apps-with-jwt-tokens-fcfe81356ea0#.8e8z55ik0)
 * [JWT with Redux](https://auth0.com/blog/2016/01/04/secure-your-react-and-redux-app-with-jwt-authentication/)
 * [Implementing JWT in API: Real Use Case Example](https://medium.com/@jetruby/implementing-jwt-in-api-real-use-case-example-438742a7c5df#.104obz390)
 * [**Using JSON Web Tokens to authenticate JavaScript front-ends on Rails**](http://zacstewart.com/2015/05/14/using-json-web-tokens-to-authenticate-javascript-front-ends-on-rails.html)
diff --git a/API/rails_api.md b/API/rails_api.md
@@ -37,6 +37,10 @@ Large software projects stand a slim chance of ever being finished. Build for co
 &#9654; curl -H "Content-Type: application/json; charset=utf-8" -d '{"user": {"name":"mech"}}' http://localhost:3000/users
 
 &#9654; curl -H "Accept: application/json" -H "Content-Type: application/json" 'http://localhost:3000/users' -d '{??}'
+
+&#9654; echo 'day=AM' | http --form http://localhost/leaves -v
+
+&#9654; echo '{"day":"AM"}' | http --json http://localhost/leaves -v
 ```
 
 ## API Wrapper and Serialisation
diff --git a/CSS/layout/intro.md b/CSS/layout/intro.md
@@ -2,6 +2,10 @@
 
 * [IBM Design Language - Layout](http://www.ibm.com/design/language/framework/visual/layout)
 
+https://css-tricks.com/full-width-containers-limited-width-parents/
+
+https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/
+
 ## Box Model
 
 HTML elements generate rectangular box called the *element box*.
diff --git a/Database/Postgres/maintain.md b/Database/Postgres/maintain.md
@@ -0,0 +1,7 @@
+# Maintenance
+
+* [Uber's switch to MySQL](https://eng.uber.com/mysql-migration/)
+
+## Tools
+
+* [pglogical - Next-gen replication system](https://2ndquadrant.com/en/resources/pglogical/)
diff --git a/Database/Postgres/query.md b/Database/Postgres/query.md
@@ -0,0 +1,11 @@
+# Interesting Queries
+
+```sql
+SELECT c.key, c.x_key, c.tags
+       x.name
+FROM context c
+JOIN x ON c.x_key = x.key
+WHERE c.key = ANY (ARRAY[145545, 223444, 3344443, -- 11,000 other keys --])
+  AND c.x_key = 1
+  AND c.tags @> ARRAY[E'blah'];
+```
diff --git a/Database/postgresql.md b/Database/postgresql.md
@@ -217,6 +217,9 @@ GIN is just a B-tree, with efficient storage of duplicates. If you have need for
 
 ## JSONB
 
+* [When to use unstructured datatypes in Postgres&ndash;Hstore vs. JSON vs. JSONB](https://www.citusdata.com/blog/2016/07/14/choosing-nosql-hstore-json-jsonb/)
+* [Aggregating indeterminate JSON structures in Postgres](https://blog.steve.ly/aggregating-indeterminate-json-structures-in-postgres/)
+
 JSONB does not store duplicate keys. It also clear whitespace. JSONB is stored as binary.
 
 **Note**: JSONB will always perform a Seq Scan if you use the `->>` operator on a path that have no expression index. So if you don't know beforehand which keys you'll query, or if you can query any path, make sure you define an GIN index and use the `@>` that benefits from that index.
@@ -398,6 +401,7 @@ FROM payment;
 
 ## Performance
 
+* [Reading a Postgres EXPLAIN ANALYZE Query Plan](https://robots.thoughtbot.com/reading-an-explain-analyze-query-plan)
 * [More on Postgres performance](http://www.craigkerstiens.com/2013/01/10/more-on-postgres-performance/)
 * [Handling growth with Postgres from Instagram](http://instagram-engineering.tumblr.com/post/40781627982/handling-growth-with-postgres-5-tips-from-instagram)
 * [Performance Tuning Queries in PostgreSQL](http://www.geekytidbits.com/performance-tuning-postgres/)
@@ -516,4 +520,5 @@ language sql;
 * [Postgres - The bits you haven't found](https://vimeo.com/61044807)
 * [PGCon 2014](https://www.youtube.com/watch?v=oQ1LSW31Y1A&list=PLWW0CjV-Tafa2jvcjihXwSvZZKsLAsb9Y#t=2492)
 * [dotScale - Databases The Long View](https://youtu.be/8wligryH_gY)
-* [Postgres present and future - PyCon 2016](https://www.youtube.com/watch?v=rYSSX8mdbMk)
+* [Postgres present and future - PyCon 2016](https://www.youtube.com/watch?v=rYSSX8mdbMk)
+* [Postgres in Production at GoCardless](https://www.youtube.com/watch?v=Tu-cf-Jki60)
diff --git a/Design (Product)/UI.md b/Design (Product)/UI.md
@@ -2,6 +2,8 @@
 
 > The little things matter
 
+https://medium.com/google-design/i-o-2016-our-definitive-guide-to-design-4d64d2db7150#.y8anp5jpk
+
 ---
 
 > The UI is part of user's digital body language - [How UI twist your words](https://medium.com/user-experience-design-1/facebook-and-how-uis-twist-your-words-4ceedc5fd93#.838m03i70)
@@ -115,6 +117,7 @@
 * Offer an opinion on your UI
 * Making decision has a cost
 * Use motion, not more content to show relationships. See Apple iOS motion.
+* Use motion to tell micro-story.
 * Design for flow, instead of screens. Too often we design for screens instead of study the exact flow. The unit of design is not screen. Think more in time-based manner. See Netflix UI.
 * Create a language of time for your product. See Google Material Design.
 * Design for time by designing with time-based tools.
@@ -129,6 +132,7 @@
 * Tell story, you are not designing screens or "lazy rectangles" - [The Perfect Design Tool](https://medium.com/user-defenders/the-perfect-design-tool-54e64428f2b#.f39n4mpia)
 * The focus of the solution circles around human beings, rather than interfaces or apps.
 * Adding a new feature doesn't just mean sticking it on top of the UI &mdash; you have to blend it with the existing design, with the user in mind. A feature needs to be added in a way that feels natural to the user. It can't be forced.
+* Demonstrating value before asking for something - Value proposition.
 
 When it comes to the design of complex behaviors and interactions, we've found that focusing too early on pixel pushing, widget design, and specific interactions can get in the way of effectively designing a comprehensive framework in which all the product's behaviors can fit. Instead, we need to consider the big picture first and rendering our solutions in low-fidelity manner.
 
@@ -297,6 +301,8 @@ There are a number of individual states at which interaction is possible. We cal
 
 ### Drop-down Editor
 
+* [**You Know What? Fuck Dropdowns**](https://www.youtube.com/watch?v=hcYAHix-riY)
+
 > Drop downs should be the UI of last resort - @lukew
 
 * [**Tether**](http://github.hubspot.com/tether/docs/welcome/)
@@ -328,9 +334,14 @@ Anytime you have a list, you need to think about categorisation, grouping, filte
 
 * [Infinite scrolling vs pagination](https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1#.y3k6noa5p)
 
+## Multimodal
+
+Modality? Human is very good at multimodalities. They switches modalities rapidly in order to multi-task and survive.
+
 # Videos
 
 * [User Interface (UX) Techniques](https://www.youtube.com/watch?v=7OSkB4BCx00)
 * [Why you're over-thinking your UI/UX](https://www.youtube.com/watch?v=Is2O666qDPs)
 * [Small Details, Big Impact By Yehuda Katz and Liz Baillie](https://www.youtube.com/watch?v=533rIdxPF10)
-* [Interaction Design in the Age of Hyperrealtime](https://vimeo.com/161169767)
+* [Interaction Design in the Age of Hyperrealtime](https://vimeo.com/161169767)
+* [Learning to speak Designer - Google I/O 2016](https://www.youtube.com/watch?v=80hrknwD74Q)
diff --git a/Design (Product)/process.md b/Design (Product)/process.md
@@ -172,6 +172,11 @@ Users of your app are there to get things done. They build behavior patterns and
 
 ## Google Ventures (Design Sprints)
 
+Sprint master - Read the room well, can pivot at any moment.
+
+Time-boxing (Session)
+
+* [**How design sprints are flexing for success - Google I/O 2016**](https://youtu.be/awKVQUcku4A?list=PLOU2XLYxmsILe6_eGvDN3GyiodoV3qNSC)
 * [**Sprint Stories**](https://sprintstories.com/)
 * [Why good storytelling helps you design great products](http://www.gv.com/lib/why-good-storytelling-helps-you-design-great-products)
 * [Google Ventures - How to set up your war room](http://www.fastcodesign.com/3028471/google-ventures-your-design-team-needs-a-war-room-heres-how-to-set-one-up)
diff --git a/DevOps/Docker/images/_jobline.md b/DevOps/Docker/images/_jobline.md
@@ -1,5 +1,9 @@
 # _jobline
 
+Runbooks and Playbooks
+
+http://nickjanetakis.com/blog/dockerize-a-rails-5-postgres-redis-sidekiq-action-cable-app-with-docker-compose
+
 ## Amazon S3
 
 * [Bucket policy?](https://forums.aws.amazon.com/thread.jspa?messageID=188183)
diff --git a/HR/data.md b/HR/data.md
@@ -53,6 +53,12 @@ Too many businesses regard data analytics as pertaining mainly to realizing valu
 
 Yelp-like
 
+```
+Focus - Narrow down
+Filter - Tune out noise
+Shift
+```
+
 ## Tags
 
 * [Organizing Screens in Zeplin](https://medium.com/zeplin-gazette/organizing-screens-in-zeplin-with-tags-128dc3ed0749#.izjifd18v)
diff --git a/HR/jobline.md b/HR/jobline.md
@@ -1,5 +1,9 @@
 # Jobline's Problem
 
+For survivability, we need to re-inventing and re-architecting the whole Jobline platform multiple times. How to continuously rebuild a system that never stop.
+
+---
+
 Very nice study of ATS from Hired.com: https://hired.com/blog/highlights/announcing-newest-ats-integration-lever/
 
 See https://github.com/hired open source projects. Very inspiring!
diff --git a/HTML5/accessibility.md b/HTML5/accessibility.md
@@ -6,6 +6,7 @@
 * [The accessibility cheatsheet](http://bitsofco.de/2015/the-accessibility-cheatsheet/)
 * [What even is a table?](https://speakerdeck.com/edds/what-even-is-a-table-a-quick-look-at-accessibility-apis)
 * [How our CSS framework enforce accessibility](http://www.ebaytechblog.com/2015/11/04/how-our-css-framework-helps-enforce-accessibility/)
+* [**Accessible UI Components For The Web - Addy Osmani**](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67#.gutv6gmzt)
 
 ```html
 <input type="checkbox" aria-checked="true" tabindex="0" />
diff --git a/HTML5/performance.md b/HTML5/performance.md
@@ -7,6 +7,7 @@ Don't look at code, measure it! It is very hard to tell from code where the perf
 &#9654; npm install -g psi
 ```
 
+* [**perfschool**](https://github.com/bevacqua/perfschool)
 * [**Sitespeed**](https://www.sitespeed.io/)
 * [**Performance Calendar**](http://calendar.perfplanet.com/2014/)
 * [**Rendering Performance**](https://developers.google.com/web/fundamentals/performance/rendering/)
diff --git a/JavaScript/FRP/libraries.md b/JavaScript/FRP/libraries.md
@@ -8,13 +8,6 @@ Cursor-based? Observable-based?
 
 [Patched-based issues](https://github.com/gritzko/swarm/blob/master/doc/ver0.3/patch-based-issues.md)
 
-## MobX
-
-* [The 2 Fundamental Laws of Flux, and the Functional Reactive Flux](https://medium.com/@kenneth_chau/the-2-fundamental-laws-of-flux-and-the-functional-reactive-flux-c9368ac008d3#.dpqypfe16)
-* [mobx-reactor](https://github.com/amsb/mobx-reactor)
-* [Kanban app - MobX port](https://github.com/survivejs-demos/mobx-demo)
-* [Tips to optimise rendering of a set of elements in React](https://medium.com/@lavrton/how-to-optimise-rendering-of-a-set-of-elements-in-react-ad01f5b161ae#.5gtowncq4)
-
 ## Baobab
 
 ## Freezer
diff --git a/JavaScript/FRP/redux.md b/JavaScript/FRP/redux.md
@@ -1,5 +1,18 @@
 # Redux
 
+Short overview of Redux:
+
+1. You spend time to write your reducers to do the work of converting state to new state. You can have multiple reducers that ultimately will need to be -->
+2. `combineReducers`
+3. At your new main new page component (it can be your route component), you need to setup the store: `const store = createStore(reducer)`
+4. If something happen, you just `store.dispatch(ACTION)` away.
+5. Rest assure all your 'connected' or subscribed React components will `store.getState()` and re-render.
+
+---
+
+* [**Good video series**](http://remzolotykh.net/category/react-and-redux)
+* [**Learning Redux with Reducks**](http://www.aaron-powell.com/posts/2016-06-06-learning-redux-with-reducks-intro.html)
+* [3 simple steps to improve your React Redux code](https://www.ckl.io/blog/3-simple-steps-to-improve-react-redux-code/)
 * [**Why does the Elm Architecture matter to Redux developers?**](http://salsita.github.io/redux-elm/)
 * [Getting Started with React, Redux and Immutable: a Test-Driven Tutorial](http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-1/)
 * [**The Anatomy Of A React Redux App**](https://medium.com/@rajaraodv/the-anatomy-of-a-react-redux-app-759282368c5a#.gptl457nd)
@@ -237,7 +250,7 @@ Action creators are just function that create action.
 
 ```js
 // This is a simple synchronous dispatch. The UI will render immediately!!
-dispatch({
+store.dispatch({
   type: ADD_ITEM,
   status: 'start',
   name: 'James'
@@ -319,6 +332,17 @@ export function login(email, password) {
 
 ## Reducer
 
+Do the grunt work of your data flow. Taking information from action and produce a brand new state.
+
+```js
+// A mutable noop reducer
+const reducer = (state, action) => state;
+
+// A immutable noop reducer
+const reducer = (state, action) => {...state};
+const reducer = (state, action) => Object.assign({}, state, {});
+```
+
 > Reducers return Objects. Combine reducers adds up these Objects. Provider gives this Combined Object to all Components.
 
 ---
diff --git a/JavaScript/MobX/mobx.md b/JavaScript/MobX/mobx.md
@@ -0,0 +1,11 @@
+# MobX
+
+* [**Handling React Forms with MobX Observables**](https://blog.risingstack.com/handling-react-forms-with-mobx-observables/)
+* [The 2 Fundamental Laws of Flux, and the Functional Reactive Flux](https://medium.com/@kenneth_chau/the-2-fundamental-laws-of-flux-and-the-functional-reactive-flux-c9368ac008d3#.dpqypfe16)
+* [mobx-reactor](https://github.com/amsb/mobx-reactor)
+* [Kanban app - MobX port](https://github.com/survivejs-demos/mobx-demo)
+* [Tips to optimise rendering of a set of elements in React](https://medium.com/@lavrton/how-to-optimise-rendering-of-a-set-of-elements-in-react-ad01f5b161ae#.5gtowncq4)
+
+## Videos
+
+* [Practical React with MobX](https://www.youtube.com/watch?v=XGwuM_u7UeQ)
diff --git a/JavaScript/NodeJS/node_performance.md b/JavaScript/NodeJS/node_performance.md
@@ -0,0 +1,16 @@
+# Node Performance
+
+Node is single threaded.
+
+Sample stack trace. V8 frame.
+
+```
+&#9654; gscore `pgrep node`
+
+::findjsobjects
+```
+
+## mdb_v8
+
+## gscore
+
diff --git a/JavaScript/NodeJS/security_in_nodejs.md b/JavaScript/NodeJS/security_in_nodejs.md
@@ -1,3 +1,4 @@
 # Security
 
 * [Unsafe Regular Expression in Node.js](https://blog.liftsecurity.io/2014/11/03/regular-expression-dos-and-node.js)
+* [Vulnerabilities in NPM](https://snyk.io/vuln/)
diff --git a/JavaScript/React/animation.md b/JavaScript/React/animation.md
@@ -1,5 +1,6 @@
 # Animation
 
+* [velocity-react](https://github.com/twitter-fabric/velocity-react)
 * [Text animation using react-flip-move](https://medium.com/@joshuawcomeau/beautiful-animations-in-the-dom-f3228c7f9a16#.iecv30chu)
 * [Animating the unanimatable](https://medium.com/developers-writing/animating-the-unanimatable-1346a5aab3cd#.kepbuy5yo)
 * [Applying transitions on initial render](https://web-design-weekly.com/2015/02/05/applying-react-js-css-transitions-initial-render/)
diff --git a/JavaScript/React/components.md b/JavaScript/React/components.md
@@ -141,6 +141,9 @@ Container component separates data-fetching and rendering concerns. Or component
 
 * [Understanding the React Component Lifecycle](http://busypeoples.github.io/post/react-component-lifecycle/)
 * [React component's lifecycle](https://medium.com/react-ecosystem/react-components-lifecycle-ce09239010df#.98x6ggnzq)
+* [**React In-depth Book - The React Life Cycle**](https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/introduction.html)
+
+`componentWillMount` and `componentDidMount` will get called whenever state or props changed, so if you only want to respond to state change, you need to use the callback at `this.setState({}, callback)`.
 
 ### Initialization
 
@@ -191,7 +194,7 @@ componentWillUpdate(nextProps, nextState) {
 
 Happens every time the element is re-rendered. Good for maintaining scroll position. You can do paranoid validation here also, but admittedly is not needed (like text length limiting)
 
-Also good when you need to update 3rd-party JavaScript library like Select2.
+Also good when you need to update 3rd-party JavaScript library like Select2/[Chosen](https://harvesthq.github.io/chosen/).
 
 ```js
 componentDidUpdate() {
@@ -330,11 +333,9 @@ See http://davidtheclark.com/modular-approach-to-interface-components/ for a nic
 * [react-list-view](https://github.com/Morhaus/react-list-view)
 * [react-text-filter](https://github.com/nkbt/react-text-filter)
 * [react-popup](https://github.com/minutemailer/react-popup)
-* [react-date-picker](http://zippyui.com/react-date-picker/)
 * [react-springs](https://github.com/threepointone/react-springs)
 * [react-autocomplete](https://github.com/synapsestudios/react-autocomplete)
 * [react-pikaday](https://github.com/thomasboyt/react-pikaday)
-* [**react-day-picker**](http://www.gpbl.org/react-day-picker/)
 * [react-select-search](https://github.com/tbleckert/react-select-search)
 * [react-avatr](https://github.com/studiofrenetic/react-avatr)
 * [react-absolute-grid](https://github.com/jrowny/react-absolute-grid)
@@ -381,9 +382,12 @@ See http://davidtheclark.com/modular-approach-to-interface-components/ for a nic
 * [simple-react-button](https://github.com/cdrpro/simple-react-button)
 * [react-hoverbox](https://github.com/wix/react-hoverbox)
 * [react-autosuggest](https://github.com/moroshko/react-autosuggest)
+* [Uber - react-map-gl](https://github.com/uber/react-map-gl)
 
 ### Date-picker and Calendar
 
+* [**react-day-picker**](http://www.gpbl.org/react-day-picker/)
+* [react-date-picker](http://zippyui.com/react-date-picker/)
 * [A very nice time picker](http://dapperdeveloper.com/2015/10/19/tutorial-build-a-time-picker-with-react-js/)
 * [**Task Calendar**](http://hilary-l.github.io/)
 * [hv-react-calendar](https://github.com/HireVue/hv-react-calendar)
@@ -394,6 +398,8 @@ See http://davidtheclark.com/modular-approach-to-interface-components/ for a nic
 
 * [react-anything-sortable](https://github.com/jasonslyvia/react-anything-sortable)
 * [react-draggable](https://github.com/mzabriskie/react-draggable)
+* [**react-sortable-hoc**](http://clauderic.github.io/react-sortable-hoc)
+* [Sortable lists with react-sortable](https://themeteorchef.com/snippets/sortable-lists-with-react-sortable/)
 
 ### Resizable
 
@@ -413,6 +419,7 @@ See http://davidtheclark.com/modular-approach-to-interface-components/ for a nic
 * [react-paginate](https://github.com/Mosho1/react-paginate)
 * [react-pagify](http://bebraw.github.io/react-pagify/)
 * [react-paginate](https://github.com/eliseumds/react-paginate)
+* [react-custom-scroll](https://github.com/rommguy/react-custom-scroll)
 
 ## Text editor
 
@@ -469,6 +476,15 @@ export default class Sparkline extends Component {
   }
 }
 ```
+
+## Refs
+
+> Q: Curious why string refs look to be deprecated in a future version of React. Is it simply that callbacks can already handle basic references / are more versatile? Subtle way to discourage the use of ref's as an escape hatch for component communication? - BradColthurst
+> 
+A: not to discourage people, though that could be a nice side-effect? a handful of reasons reasons: (1) string refs make it less clear that there's a timing aspect involved and that the ref only becomes available at a certain point in the mount cycle, whereas function refs make it a little clearer, (2) function refs are more flexible and you could read some property from or call a method on the node without storing it, (3) if you have a helper function outside your class that returns a component with a string ref, it's unclear where that ref will be attached, and (4) we track which component is the "owner" to attach refs to using a stateful module within the 'react' package, which is intellectually gross but can also complicate things in a practical sense and means you it's harder to use multiple versions of the 'react' package (which should otherwise work correctly)
+
+https://github.com/reactiflux/q-and-a/blob/master/ben-alpert_react-core.md
+
 ## Integrate with jQuery
 
 ```js
diff --git a/JavaScript/React/immutable.md b/JavaScript/React/immutable.md
@@ -8,6 +8,9 @@ Don't use `Array.shift`, use `Array.slice` instead for immutability.
 
 Immutable data structure with structure sharing.
 
+* [**Immutability Helpers**](https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c#.olqenbq13)
+* [Using Immutable.Record to represent a typed model](https://medium.com/azendoo-team/immutable-record-react-redux-99f389ed676#.2svopbsv2)
+* [React.js pure render performance anti-pattern](https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.bjv0o7xnn)
 * [Painless immutability with Timm](http://guigrpa.github.io/2016/06/16/painless-immutability/)
 * [Great example of using Immutable](http://jaero.space/blog/react-performance-2)
 * [**Immutable as React state**](https://github.com/facebook/immutable-js/wiki/Immutable-as-React-state)
diff --git a/JavaScript/React/isomorphic.md b/JavaScript/React/isomorphic.md
diff --git a/JavaScript/React/performance.md b/JavaScript/React/performance.md
diff --git a/JavaScript/React/react.md b/JavaScript/React/react.md
diff --git a/JavaScript/React/testing.md b/JavaScript/React/testing.md
diff --git a/JavaScript/React/webpack.md b/JavaScript/React/webpack.md
diff --git a/JavaScript/es6.md b/JavaScript/es6.md
diff --git a/JavaScript/typescript.md b/JavaScript/typescript.md
diff --git a/Software Engineering/Architecture/patterns.md b/Software Engineering/Architecture/patterns.md

-Original file line number
+Diff line change
 ▶ curl -H "Content-Type: application/json; charset=utf-8" -d '{"user": {"name":"mech"}}' http://localhost:3000/users
 ▶ curl -H "Accept: application/json" -H "Content-Type: application/json" 'http://localhost:3000/users' -d '{??}'
++
 +▶ echo 'day=AM' | http --form http://localhost/leaves -v
++
 +▶ echo '{"day":"AM"}' | http --json http://localhost/leaves -v
 ```
 ## API Wrapper and Serialisation