HR

mech · mech · commit 08baab19e2e8 · 2014-10-09T21:12:02.000+08:00
diff --git a/CSS/SASS.md b/CSS/SASS.md
@@ -22,6 +22,7 @@
 * [Handy Sass mixins](http://web-design-weekly.com/2013/05/12/handy-sass-mixins/)
 * [Ampersand](http://www.joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/)
 * [Sass tooltips](http://hackingui.com/front-end/scss-tooltips/)
+* [Google Material Design colors???](https://github.com/nickpfisterer/quantum-colors)
 
 
 ## Placeholder
diff --git a/CSS/animation.md b/CSS/animation.md
@@ -1,5 +1,6 @@
 # Animation
 
+* [**Foundation for App - Motion UI is the new flat**](http://zurb.com/article/1340/foundation-for-apps-motion-ui-is-the-new-)
 * [**Codrops playground**](http://tympanus.net/codrops/category/playground/)
 * [The 12 principles of animation](http://the12principles.tumblr.com/)
 * [Interaction ProTip](http://aerotwist.com/tutorials/)
@@ -29,6 +30,12 @@
 * [Tremula.js](http://garriss.wordpress.com/2014/07/06/introducing-tremulajs/)
 * [Animattr](http://danieldelaney.github.io/animattr/)
 * [**Interface animations presentation**](http://markgeyer.com/pres/interface-animations/)
+* [Headroom.js](http://wicky.nillia.ms/headroom.js/)
+
+---
+
+1. Use Base Animations like slide, hinge, scale, spin and fade
+2. Then use motion modifier classes to affect the direction, speed, iteration, ease and delay.
 
 ## Velocity.js
 
@@ -39,6 +46,12 @@
 * [Velocity Motion Designer - VMD](https://www.youtube.com/watch?v=7IxhIMIdkPs&hd=1)
 * [Ember velocity?](http://julian.com/research/velocity/#ember)
 * [Animsition](http://git.blivesta.com/animsition/)
+* [Rebound from Facebook - Spring dynamics](https://github.com/facebook/rebound-js)
+
+## Tips
+
+* Don't use `top`, `left`. Use transform, translate, opacity only. Or else you have paint storms.
+* Append a child queue the needs for Reflow.
 
 
 ## Demo
diff --git a/CSS/layout.md b/CSS/layout.md
@@ -3,6 +3,9 @@
 ## Example
 
 * [**http://cakedown.alexandredeschamps.ca/**](http://cakedown.alexandredeschamps.ca/)
+* [CSS layout debugger](https://gist.github.com/addyosmani/fd3999ea7fce242756b1)
+* [Why we ditched the good old select element](https://medium.com/@mibosc/responsive-design-why-and-how-we-ditched-the-good-old-select-element-bc190d62eff5)
+* [**Check out Foundation for Apps**](http://responsivedesign.is/articles/screencast-zurb-foundation-for-apps)
 
 Key things to Web UI:
 
@@ -101,6 +104,9 @@ Use of `min-width` and `max-width` common.
 
 ## Grids
 
+Nearly every grid system is based on rows and columns, set to 12 or 16 increments to create any layout. However, the web is changing! It's time for Flexbox to shine.
+
+* [**Foundation - A new grid**](http://zurb.com/article/1333/foundation-a-new-grid)
 * [**Complete guide to grid**](http://css-tricks.com/snippets/css/complete-guide-grid/)
 * [Some grids to try](https://news.layervault.com/stories/30928-ask-dn-which-grid-do-you-use)
 * [Nicolas Gallagher's `inline-block` grid system](http://necolas.github.io/griddle/)
@@ -158,6 +164,10 @@ Grids work on two levels: first perception, then experience. That is, a user fee
 
 Supported in Chrome 21+, Safari 6.1+, Firefox 22+, Opera 12.1+, IE 11+, and Blackberry 10+.
 
+`viewport-height` to create full page web apps.
+
+Separate it into layout-object and content-object.
+
 * [Solved by flexbox](http://philipwalton.github.io/solved-by-flexbox/)
 * [Video - Present and future of CSS layout](https://vimeo.com/98746172)
 * [Video - Putting flexbox into practice](https://vimeo.com/77176313)
diff --git a/CSS/resources.md b/CSS/resources.md
@@ -22,6 +22,7 @@
 * [Molten leading](http://demosthenes.info/blog/606/Molten-Leading-Exploring-The-CSS-Relationship-Between-Font-Size-Line-Height-and-Margin)
 * [Refine your web type](http://thenextweb.com/dd/2012/10/14/refine-your-web-type-with-this-crash-course-on-the-css-line-height-property/)
 * [All you need to know about vertical-align](http://christopheraue.net/2014/03/05/vertical-align/)
+* [Balancing line length](http://www.smashingmagazine.com/2014/09/29/balancing-line-length-font-size-responsive-web-design/)
 
 ![line-height-and-input](https://dl.dropboxusercontent.com/u/6815194/Notes/line_height_and_input.png)
 
diff --git a/CSS/style_guide.md b/CSS/style_guide.md
@@ -41,6 +41,8 @@ Fully designed components aren't reusable cross-project. This is where OOCSS is
 * [Nice general style and principles](http://dubizzle.uno/#/content/look/design-principles.html)
 * [Wyrm](http://wyrmsass.org/)
 * [New Mailchimp design guide - inspired by Material Design](http://mailchimp.com/resources/email-design-guide/)
+* [Writing CSS and SASS that doesn't suck](http://ashleynolan.co.uk/blog/writing-css-and-sass-that-doesnt-suck)
+* [Why I don't use CSS Frameworks](http://warpspire.com/posts/css-frameworks/)
 
 ## Checklist
 
diff --git a/Command/mavericks.md b/Command/mavericks.md
@@ -443,4 +443,5 @@ defaults write com.apple.Finder AppleShowAllFiles NO
 * http://blog.55minutes.com/2013/09/rails-os-x-install-guide/
 * http://www.mitchchn.me/2014/os-x-terminal/
 * http://antigen.sharats.me/
-* http://shvets.github.io/blog/2014/04/19/configure_macbook.html
+* http://shvets.github.io/blog/2014/04/19/configure_macbook.html
+* http://lapwinglabs.com/blog/hacker-guide-to-setting-up-your-mac
diff --git a/Data Science/viz.md b/Data Science/viz.md
@@ -25,6 +25,19 @@ Numbers have an important story to tell, and it is up to us to help them tell it
 * [BI tools using dark background](http://vpj.svbtle.com/black-or-white)
 * [**Visual Algorithm**](http://www.comp.nus.edu.sg/~stevenha/visualization/index.html)
 
+---
+
+* [Flowing Data](http://flowingdata.com/)
+* [Information is Beautiful](http://www.informationisbeautiful.net/)
+* [visualizing.org](http://visualizing.org/)
+* [Visual Complexity](http://www.visualcomplexity.com/vc/)
+* [Indexed](http://thisisindexed.com/)
+* [Eager Eye](http://eagereyes.org/)
+* [Well-Formed Data](http://well-formed-data.net/)
+* [Sankey diagram](http://www.sankey-diagrams.com/)
+* [Andy Woodruff](http://www.cartogrammar.com/blog/)
+* []()
+
 ## d3.js
 
 * [NVD3 - Re-usable charts for d3.js](http://nvd3.org/)
diff --git a/Database/elasticsearch.md b/Database/elasticsearch.md
@@ -49,11 +49,32 @@ Fields are "boostable" to increase relevance.
 
 ## Production
 
+* [Pre-flight checklist](http://www.elasticsearch.org/webinars/elasticsearch-pre-flight-checklist/)
 * Don't use development setting
-* Use uni-cast.
-* Change `cluster.name`, `path.data`, `node.name`
+* Use uni-cast. Disable multi-cast!
+* Change `cluster.name`, `path.data`, `node.name`, `path.log`, `path.conf`
 * To update/upgrade Elasticsearch/Java/Kernel, always stop shard reallocation first
-* 
+* Pre-flight: Configuration, JVM Heap, Hardware, and Monitoring
+* `gateway.recover_after_nodes: 5` to prevent shard swapping for full cluster restart. Once the cluster has been started, this has no effect.
+* `discovery.zen.minimum_master_nodes: 3` (n/2)+1 -  to prevent split-brain
+* `ES_HEAP_SIZE` of 1GB is wrong. Set about half of your system RAM. Don't give more than 50% of your RAM. Your OS also need 50% of the RAM. Never use > 30GB because of JVM compressed object pointers.
+* Concurrent Mark and Sweep collector has "Stop the Word" effect.
+* Do not swap! Allocate memory upfront: `bootstrap.mlockall = true` and allow unlimited allocations: `limit -l unlimited`
+* SSD: use "noop" or "deadline" scheduler
+* RAID: performance, not High Availability
+* `max_file_descriptors: 30000`
+* http://localhost:9200/_nodes/jvm
+* Make sure client is using persistent connection. Check it with `localhost:9200/_nodes/http/stats`
+* Non-data node - Master-only node and Client-only node.
+* Use snapshot and restore for backup. Do not use rsync anymore.
+
+```
+// A dynamic settings, you have to continuously update it as and
+// when the node size changes.
+
+curl -XPUT localhost:9200/_cluster/settings -d '{
+	"persistent": { "discovery.zen.minimum_master_nodes": 3 }}'
+```
 
 ## Parent-Child Indexing
 
diff --git a/Design (Product)/UX.md b/Design (Product)/UX.md
@@ -2,7 +2,11 @@
 
 ## General
 
+* [**The Ultimate List of UX Design and Development Resources**](https://www.codefellows.org/blog/the-ultimate-list-of-ux-design-and-development-resources)
+* [**UX Booth**](http://www.uxbooth.com/)
 * [**UX Myths**](http://uxmyths.com/)
+* [**CUBI UX**](http://cubiux.com/index.php)
+* [**Gibbon UX Design**](https://gibbon.co/uxdesign)
 * [Designer Fund's blog](http://designerfund.com/bridge/blog/)
 * [Design Mind - Frog](http://designmind.frogdesign.com/)
 * [IDEO's Made in the Future!](http://madeinthefuture.co/)
diff --git a/Design (Product)/User Interaction.md b/Design (Product)/User Interaction.md
@@ -18,6 +18,7 @@
 * [I know where you are aiming!](https://medium.com/@cihadturhan/a-ux-idea-i-know-where-you-are-aiming-3e00d152afb2)
 * [IxD Checklist](http://ixdchecklist.com/)
 * [Gestalt principles of natural interaction](http://robots.thoughtbot.com/gestalt-principles)
+* [Why we ditched the good old select element](https://medium.com/@mibosc/responsive-design-why-and-how-we-ditched-the-good-old-select-element-bc190d62eff5)
 
 Interaction design begin with computer. The need for feedback loop and mental model.
 
diff --git a/Design (Product)/good_design.md b/Design (Product)/good_design.md
@@ -25,6 +25,7 @@
 * [Making or breaking a technical build process](http://authenticff.com/journal/managing-client-expectations-making-or-breaking-a-technical-build-process)
 * [Inteview with Steve Jobs](http://longform.org/stories/playboy-interview-steve-jobs)
 * [The golden age of Design](http://tmagazine.blogs.nytimes.com/2014/09/22/design-golden-age/)
+* [Taste](http://warpspire.com/posts/taste/)
 
 ## Design Videos
 
diff --git a/Design (Product)/process.md b/Design (Product)/process.md
@@ -29,6 +29,12 @@
 * [Process ideas](https://news.layervault.com/stories/31808-ask-dn-whats-your-interaction-design-process-from-pencil-to-prototype-)
 * [Iterating and incrementing are separate ideas](http://www.agileproductdesign.com/blog/dont_know_what_i_want.html)
 * [Ideas come first](http://designobserver.com/feature/ideas-come-first/38561)
+* [Card Sorting](http://robots.thoughtbot.com/card-sorting)
+* [Design Sprint Case Study](http://robots.thoughtbot.com/design-sprint-case-study-merck-development-portal)
+* [How to build website fast with rapid prototyping](http://www.webdesignerdepot.com/2014/09/how-to-build-websites-fast-with-the-rapid-prototyping-workflow/)
+* [Visual inventory](http://danielmall.com/articles/visual-inventory/)
+* [How do you present designs?](https://news.layervault.com/stories/35264-lots-of-options-or-one-recommendation)
+* [Ultimate guide to MVP](http://blog.fastmonkeys.com/2014/06/18/minimum-viable-product-your-ultimate-guide-to-mvp-great-examples/)
 
 > The obvious problem here is the lack of any design in the first place. Going from the idea directly to implementation with minimum effort on design usually proves to be a very bad idea.
 
@@ -38,6 +44,8 @@
 
 > If you think that it's impossible to test your idea in 3 days, you are wrong. Because what you need is not a fully functional prototype, but simply a proof that your idea will drive some interest, which is something that can be achieved with a fraction of what you think your product should do.
 
+> "This won't be a popular opinion, but whenever I see Axure/Balsamiq/Omnigraffle in a portfolio it's a red flag for me" - [@Cennydd](https://twitter.com/Cennydd/status/516577125969969153)
+
 ---
 
 > Jony's team apparently documents everything they do through sketching. In that sense, I think writing is particularly useful to design. I don't like to write about generic guidelines, but I do love to write about ideas, design processes and inspirations. It deepens the craft. - Meng To
@@ -82,6 +90,7 @@ Something to break the ICE:
 * [Thoughbot Playbook on Design Sprint](http://playbook.thoughtbot.com/#product-design-sprint)
 * [Gibbon Design Sprint resources](https://gibbon.co/chrisnaylor/design-sprints)
 * [8 shortcuts for faster design research](http://www.gv.com/lib/8-shortcuts-for-better-faster-design-research)
+* [Design Sprint Case Study](http://robots.thoughtbot.com/design-sprint-case-study-merck-development-portal)
 
 ---
 > Learn early and often rather than launch early and often - [What fuels great design](http://www.gv.com/lib/what-fuels-great-design-and-why-most-startups-dont-do-it)
diff --git a/Design (Product)/resources.md b/Design (Product)/resources.md
@@ -1,5 +1,6 @@
 # Resources
 
+* [Why you need a company mission](http://blog.intercom.io/why-you-need-a-company-mission/)
 * [Empathy and (Dis)content](http://www.sarawb.com/2014/03/28/empathy/)
 * [When failing fails](http://blog.podio.com/2014/03/28/failing-fails/)
 * [Start small!](http://justinjackson.ca/how-to-start/)
diff --git a/Design (Visual)/resources.md b/Design (Visual)/resources.md
@@ -28,6 +28,7 @@
 * [Creating harmonious color schemes - Video](http://methodandcraft.com/videos/creating-harmonious-color-schemes)
 * [Never use black](http://ianstormtaylor.com/design-tip-never-use-black/)
 * [Shades of Gray](http://viget.com/inspire/shades-of-gray-yes-really)
+* [Colors are important](https://medium.com/design-with-gravit/colors-are-important-5313b1bed59c)
 
 ## Icon
 
diff --git a/Design (Visual)/sketch_app.md b/Design (Visual)/sketch_app.md
@@ -1,5 +1,7 @@
 # Sketch.app
 
+Tools that are worth watching: Sketch, UXPin, FramerJS, Pixate, Flinto, Marvel, RelativeWave's Form, Affinity Designer, etc.
+
 * [**Bjango's App Design Workflow (Mostly Photoshop)**](http://bjango.com/articles/appdesignworkflow/#)
 * [**Sketch Resources**](http://learn.ustwo.com/sketch-resources)
 * [Sketch Tips](http://www.sketchtips.info/)
@@ -31,12 +33,27 @@
 * [Using USB if your WIFI is flaky](http://bomberstudios.com/post/54587126654/using-sketch-mirror-liveview-silkscreen-skala)
 * [Tutorial - Design a login form](http://webdesign.tutsplus.com/tutorials/sketch-for-beginners-design-a-login-form-interface--cms-21534)
 
+## B&eacute;zier
+
+* [Mastering the B&eacute;zier Curve in Sketch](https://medium.com/sketch-app/mastering-the-bezier-curve-in-sketch-4da8fdf0dbbb)
+* [B&eacute;zier OCD](http://learn.scannerlicker.net/2014/10/01/bezier-ocd-or-why-you-should-know-about-point-placement/)
+* [B&eacute;zier curves and type design](http://learn.scannerlicker.net/2014/04/16/bezier-curves-and-type-design-a-tutorial/)
+* [Video on how Cubic Bezier works](https://vimeo.com/106757336)
+* [Shape Type](http://shape.method.ac/)
+* [Big deal with horizontal and vertical b&eacute;zier handles](http://theagsc.com/community/tutorials/so-whats-the-big-deal-with-horizontal-vertical-bezier-handles-anyway)
+
 ## Shortcut
 
 * Command+Option and drag to maintain selection
 * Tab to cycle layer
 * Option click to select underneath layer
-* Select object, hold down Command key to resize. Or Comamnd+Shift to resize more.
+* Select object, hold down Command key to resize. Or Command+Shift to resize more.
+* Ctrl-C to get the color picker
+* Press "F" - To toggle Fills
+* &#8984;&#8679;O - Convert Text to Outlines
+* L - Line
+* V - Vector Tool, then hit "Enter" to finish a non-filled shape
+* Hold &#8984; while moving a vector point to ignore smart guides
 * 
 
 ## Tools
@@ -74,6 +91,7 @@
 * [Random opacity](https://github.com/adamhowell/random-opacity-sketch-plugin)
 * [Animate GIF](https://github.com/NathanRutzky/Generate-GIF)
 * [Plugins for web design](http://www.newmediacampaigns.com/blog/essential-sketch-plugins-for-web-design)
+* [Sketch plugins directory](https://github.com/sketchplugins/plugin-directory)
 
 ## Gallery
 
diff --git a/Design (Visual)/typography.md b/Design (Visual)/typography.md
@@ -35,6 +35,8 @@
 * [7 typefaces for better performance](http://cognition.happycog.com/article/7-alternatives-to-popular-web-typefaces-for-better-performance)
 * [11 tips on kerning](http://99designs.com/designer-blog/2014/01/20/11-kerning-tips/)
 * [Smart quotes](http://smartquotesforsmartpeople.com/)
+* [Helpful resources](http://www.tdc.org/helpful-resources/)
+* [Best of Sept 2014](http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-september-2014)
 
 ```
 // New for Firefox 25
diff --git a/HR/jobline.md b/HR/jobline.md
@@ -10,6 +10,12 @@ There's a lot of challenges in crafting new experiences and workflows to meet co
 * [Not just for HR and growth hackers](http://pjrvs.com/a/onboarding)
 * Use [Moo.com](http://uk.moo.com/design-templates/luxe/business-cards/) for business card
 * [Business cards](https://news.layervault.com/stories/32362-ask-dn-best-online-places-to-order-business-cards-from)
+* Payslip - No date range select for like last 3 months payslip which is likely useful for many application requests.
+* Import company members with update/merge. See Xero's CSV import example.
+* Issues navigator - See Xcode 6 issues implementation. We can intelligently supply noted issues to recruiters.
+* Make real-time per-event decision. See http://voltdb.com/welcome-1
+* Make use of lots of popover for quick action
+* Use Amazon SES for email blasting - See http://beta.emailoctopus.com/ also
 
 ## Account Management
 
diff --git a/HR/resources.md b/HR/resources.md
@@ -21,6 +21,7 @@
 * [Rethinking the technical interview](https://medium.com/@pamelafox/rethinking-the-technical-interview-f3b8c1df9e5d)
 * [Job hunt sucks](https://medium.com/terms-conditions/if-you-think-the-job-hunt-sucks-try-recruiting-677921d7f897)
 * [Cash vs Accrual](http://business.tutsplus.com/tutorials/cash-versus-accrual-accounting-whats-the-difference-and-why-does-it-matter--cms-22031)
+* [Zurb - How to hire a designer](http://zurb.com/jobs/how-to-hire-a-designer)
 
 ## Salary
 
diff --git a/HTML5/email.md b/HTML5/email.md
@@ -17,6 +17,7 @@
 * [HTML email with Grunt.js](http://www.leemunroe.com/html-email-design-workflow/)
 * [Transactional HTML email templates](http://blog.mailgun.com/transactional-html-email-templates/)
 * [Email markdown](http://cakedown.alexandredeschamps.ca/)
+* [Making responsive HTML emails](http://www.benjystanton.co.uk/blog/making-responsive-html-emails/)
 
 ## Tools
 
diff --git a/HTML5/performance.md b/HTML5/performance.md
@@ -1,6 +1,7 @@
 # Performance
 
-* [Jank Free - Let's make the web silky smooth!](http://jankfree.org/)
+* [**Google - Make the Web faster**](https://developers.google.com/speed/)
+* [**Jank Free - Let's make the web silky smooth!**](http://jankfree.org/)
 * [Sitespeed.io](http://www.sitespeed.io/)
 * [PNG Mini](http://pngmini.com/)
 * [Pixels are expensive](http://aerotwist.com/blog/pixels-are-expensive/)
@@ -45,6 +46,22 @@ Perceived = f(Expected Performance, UX, Actual Performance)
 * [Script-injected "async scripts" considered harmful](https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/)
 * Incremental HTML delivery. Partial rendering.
 
+## Browser Performance
+
+Cmd+E to start/stop profiling.
+
+Usually in order:
+
+1. Function call (Yellow) - Usually kick off by JavaScript
+2. Recalculate style - Get all style rules, evaluate the selectors and match against DOM and calculate the computed style for every element. Anytime you change the CSS class names, you have thus invalidate style and the browser will have to do a little bit more work to recalculate
+3. Layout - Laying out the geometric of the page. How many nodes that needed layout. The layout scope. 20ms is too long for layout.
+4. Paint (Green) - Painting hurts on low-end devices. Locate with "Show Paint Rects", then "continuous paint mode" or "paint profiler"
+5. Composite layers
+
+"Frames mode" change the summary to look like taller vertical bars heights. The taller the worst because it has lower FPS.
+
+"Tracing mode"
+
 ## Terms
 
 * Forced synchronous layouts (the yellow chrome alert)
diff --git a/HTML5/resources.md b/HTML5/resources.md
@@ -23,6 +23,25 @@
 * [favicon](http://css-tricks.com/favicon-quiz/)
 * [Frontends](http://www.frontends.org/)
 
+## Browsers
+
+* Firefox - SpiderMonkey, Gecko
+* Safari - JavaScriptCore, Nitro
+* Chrome - Blink (layout engine), Skia, V8
+
+## Firefox (Aurora)
+
+[Mozilla DevTools](https://wiki.mozilla.org/DevTools/GetInvolved)
+
+* Shift+F2
+* Enable Reflow logging. Have asynchronous and synchronous reflow.
+
+```
+<script>debugger;</script>
+
+csscoverage oneshot
+```
+
 ## IE
 
 * [IE status](http://status.modern.ie/)
@@ -119,4 +138,5 @@ It would be a shame to come up with all these fancy layouts if it turns out ther
 * [I Want to Use - Powered by caniuse.com](http://www.iwanttouse.com/)
 * [Rails and Livereload or Codekit](http://blog.55minutes.com/2013/01/lightning-fast-sass-reloading-in-rails-32/)
 * [Fireshell - like Yeoman](http://getfireshell.com/)
-* [DOMLint](http://kangax.github.io/domlint/)
+* [DOMLint](http://kangax.github.io/domlint/)
+* [CSS layout debugger](https://gist.github.com/addyosmani/fd3999ea7fce242756b1)
diff --git a/JavaScript/libraries.md b/JavaScript/libraries.md
@@ -32,6 +32,7 @@
 * [**OCR reader in JavaScript**](http://antimatter15.com/ocrad.js/demo.html)
 * [Timesheet.js](http://semu.github.io/timesheet.js/)
 * [Dimensions Chrome extension - Sort of like xScope](https://github.com/mrflix/dimensions)
+* [Sweet Alert](http://tristanedwards.me/sweetalert)
 
 ## Auto-complete
 
diff --git a/JavaScript/node.md b/JavaScript/node.md
@@ -1,6 +1,7 @@
 # Node.js
 
 * [gremlins.js - Monkey testing](https://github.com/marmelab/gremlins.js)
+* [Node School](http://nodeschool.io/)
 
 ```
 npm -global list
diff --git a/JavaScript/resources.md b/JavaScript/resources.md
diff --git a/Mobile Web/resources.md b/Mobile Web/resources.md
diff --git a/iOS/resources.md b/iOS/resources.md
diff --git a/iOS/swift.md b/iOS/swift.md
