frontend-tech

One of the best talk in React Rally!

YouTube

David Khourshid - Infinitely Better UIs with Finite Automata

GitHub

Thinkmill/jest-in-case

jest-in-case - Jest utility for creating variations of the same test

GitHub

bahmutov/snap-shot-it

snap-shot-it - Smarter snapshot utility for Mocha and BDD test runners + data-driven testing!

twitter

Jest 21 is out. Check out the *massive* changelog: <https://github.com/facebook/jest/blob/master/CHANGELOG.md#jest-2100>

prometheus.io

PromCon 2017 Recap | Prometheus

An open-source monitoring system with a dimensional data model, flexible query language, efficient time series database and modern alerting approach.

GitHub

sapegin/jest-cheat-sheet

jest-cheat-sheet - Jest cheat sheet

GitHub

diegohaz/styled-tools

styled-tools - Useful interpolated functions for styled-components :nail_care:

twitter

From “The Little Schemer” <https://pbs.twimg.com/media/DI5pb6lUwAI3kVR.jpg>

<https://twitter.com/dan_abramov/status/904776510334164992> 這本就Daniel Friedman 寫的 上禮拜剛看完 大家有興趣也可以看一下 第九章有推導y combinator 還蠻精彩的

<https://www.google.com.tw/search?q=The+Little+Schemer&amp;oq=The+Little+Schemer&amp;aqs=chrome..69i57j69i64.230j0j7&amp;sourceid=chrome&amp;ie=UTF-8>

twitter

As of today, JS modules supported in Chrome! &lt;script type=module&gt; <https://www.chromestatus.com/feature/5365692190687232>

twitter

:tada::tada::tada::tada: Happy <https://twitter.com/nodejs|@nodejs> LTS release day $ nvm install v6.11.3 Snapshots Re-Enabled Edition!!! <https://nodejs.org/en/blog/release/v6.11.3/> :tada::tada::tada::tada:

twitter

Introducing Rendertron: the headless Chrome server rendering solution for indexing &amp; static crawlers <https://github.com/GoogleChrome/rendertron> <https://pbs.twimg.com/media/DH6JQK7XYAA2sYS.jpg>

twitter

Now in Canary: Capture screenshots of specific HTML nodes

GitHub

yarnpkg/yarn

yarn - :package::cat2: Fast, reliable, and secure dependency management.

tomdale.net

Compilers are the New Frameworks

My current "investment thesis" is that what we call web frameworks are transforming from runtime libraries into optimizing compilers. When it comes to eking performance out of hand-authored JavaScript and accompanying runtime libraries, we've reached the point of diminishing returns.

twitter

This just happened! Chome 61 shipped ECMAScript modules enabled by default!:confetti_ball: Article: <https://hospodarets.com/native-ecmascript-modules-the-first-overview> Test: <https://hospodarets.com/es-modules-test/> <https://pbs.twimg.com/media/DJAYTlKWsAANk49.jpg>

twitter

Also in Canary: Section Screenshots. Enable Inspect Mode -&gt; Hold Cmd (Mac) or Ctrl (Win, Linux) -&gt; Click &amp; Drag &amp; Release -&gt; :camera_with_flash: -&gt; :star2::sparkles:

twitter

It's #ReadABookDay apparently, so why not read the PureScript book? It's free and available online. <http://leanpub.com/purescript/read>

Facebook Code

Finding inter-procedural bugs at scale with Infer static analyzer

Inter-procedural analysis can be deployed to large and rapidly changing codebases that consist of millions of lines of code and undergo thousands of modifications per day.

Medium

When fragments and React components join forces – Conduit – Medium

React components and GraphQL fragments make for cleaner code. The first in Conduit’s technical series on using GraphQL in production.

twitter

Yarn 1.0 is here! It comes with workspaces, auto-merging lock files and selective version resolutions. :ferry::package::cat2: <https://code.facebook.com/posts/274518539716230>

twitter

Better Reason support for Sublime Text users! <https://github.com/reasonml-editor/sublime-reason#installation-sublime-text-3> Autocompletion, diagnosis, type hint, etc.

twitter

Async-await footgun pointed out to me last night by <https://twitter.com/bassjacob|@bassjacob>: Always `return await` or if you wrap with try-catch it won't be caught <https://pbs.twimg.com/media/DJJ61nkUEAAwZI2.jpg>

Medium

Rethinking drag and drop – Alex Reardon – Medium

Taking something basic and making it beautiful

NGINX

NGINX Unit

A new, lightweight, open source application server from NGINX designed to meet the demands of today's dynamic and distributed applications.

twitter

If you're curious what babel-macros is, check this thread out: <https://github.com/facebookincubator/create-react-app/issues/2730>

twitter

<http://Messenger.com> is now 50% converted to Reason! <https://reasonml.github.io/community/blog/#messengercom-now-50-converted-to-reason>

facebook.github.io

DOM Attributes in React 16 - React Blog

In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it. For example, this:

twitter

Re-thinking the Node.js ecosystem for modern JavaScript. <https://medium.com/@mikeal/modern-modules-d99b6867b8f1>

twitter

I blogged something on the babel blog! <https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros> "Zero-config code transformations with babel-macros :fishing_pole_and_fish:" Enjoy and share!

twitter

#webpack Logbook week 22 - 23 Details about the new plugin system API, performance, typing =&gt; very technical post <https://medium.com/webpack/the-new-plugin-system-week-22-23-c24e3b22e95>

twitter

Introducing Atom IDE: <http://blog.atom.io/2017/09/12/announcing-atom-ide.html> <https://pbs.twimg.com/media/DJilEA6UQAA_6nd.jpg>

twitter

I blogged something on the babel blog! <https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros> "Zero-config code transformations with babel-macros :fishing_pole_and_fish:" Enjoy and share!

twitter

babel-plugin-sitrep Just add `// sitrep` above your fn and the plugin will log vars and return value. <https://github.com/tkh44/babel-plugin-sitrep> <https://pbs.twimg.com/media/DJjHh6_UEAAFnBx.jpg>

twitter

:tada::tada::tada::tada: Happy <https://twitter.com/nodejs|@nodejs> Current Release Day Special ESModules edition --experimental-modules $ nvm install 8.5.0 <https://nodejs.org/en/blog/release/v8.5.0/> :tada::tada::tada::tada:

twitter

Sublime Text 3.0 is out! - <https://www.sublimetext.com/blog/articles/sublime-text-3-point-0>

twitter

React 16 RC3 is out. It is very close to what the final version will be like. Last chance to report issues! <https://github.com/facebook/react/issues/10294#issuecomment-329479679> <https://pbs.twimg.com/media/DJsAPSIXgAAzzkq.jpg>

twitter

Just published Prettier 1.7.0: JSX tweaks, Pragma support, TypeScript and CSS fixes, and more! <https://github.com/prettier/prettier/releases/tag/1.7.0>

twitter

1/3 of US bandwidth is used by Netflix... the rest is used by `rm -rf node_modules &amp;&amp; npm install`

twitter

ES6 modules have landed in Chrome 61 <https://twitter.com/DasSurma|@DasSurma> shows how to make the split between old &amp; new browsers:zap:Supercharged: <http://goo.gl/zCpmqJ>

twitter

Created <https://github.com/leoasis/graphql-tag.macro>, a babel-macro to precompile gql calls. It supports interpolation! Feedback welcome <https://twitter.com/kentcdodds|@kentcdodds> <https://twitter.com/stubailo|@stubailo>

twitter

HTTP what? : I drew what HTTP is &amp; how HTTP1.x and HTTP2 are different:sparkles: (tweetzine, drawsplainer, codedoodles…I don't know what to call it) <https://pbs.twimg.com/media/C-8t5rGWsAAFHwF.jpg>

<https://pbs.twimg.com/media/C-8t64sXYAEf7GG.jpg>

<https://pbs.twimg.com/media/C-8t70YXoAEShUL.jpg>

twitter

React Snippets For <https://twitter.com/code|@code> has been updated with better React-ness. Special thanks to <https://twitter.com/dan_abramov|@dan_abramov> for reviewing. <http://cda.ms/19>

twitter

New release of the <https://twitter.com/Docker|@Docker> extension for <https://twitter.com/code|@code> published. Adds explorer support, a new language service, and more. <https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker>

twitter

Something new is coming in <https://twitter.com/babeljs|@babeljs> 7 :fire: <https://pbs.twimg.com/media/DJ1c-76XUAACypj.jpg>

Medium

Small Functions considered Harmful – Cindy Sridharan – Medium

In this post, I aim to:

GitHub Education

GitHub Student Developer Pack

The best developer tools, free for students. Get your GitHub Student Developer Pack now.

Medium

Just Enough Functional Programming – Bruno Filippone – Medium

I absolutely love functional programming. It does help in a lot of ways, but you should keep in mind that you can still end up with a…

twitter

BREAKING: Comey says React patents no longer under FBI investigation

twitter

Still digging <https://twitter.com/code|@code> ext 'vscode-exports-autocomplete'. It saves me a substantial amount of time and helps avoid loss of focus.

GitHub

Split vendor and app into separate files · Issue #2206 · facebookincubator/create-react-app

NOT AN ISSUE but a feature request. imo, it would be beneficial for splitting the js bundle into app and vendor files. My app code keeps changing but vendor dependencies rarely change. splitting i...

GitHub

asfktz/autodll-webpack-plugin

autodll-webpack-plugin - Webpack's DllPlugin without the boilerplate

GitHub

asfktz/autodll-webpack-plugin

autodll-webpack-plugin - Webpack's DllPlugin without the boilerplate

GitHub

facebookincubator/create-react-app

create-react-app - Create React apps with no build configuration.

GitHub

viatsko/awesome-vscode

awesome-vscode - A curated list of delightful VS Code packages and resources.

GitHub

emotion-js/emotion

emotion - :zap: The Next Generation of CSS-in-JS

GitHub

A-gambit/CSS-IN-JS-Benchmarks

Contribute to CSS-IN-JS-Benchmarks development by creating an account on GitHub.

Medium

A Unified Styling Language – SEEK blog – Medium

In the past few years we’ve seen the rise of CSS-in-JS, emerging primarily from within the React community — but why?

twitter

Watch the black square: <https://twitter.com/acdlite/status/909926793536094209>

twitter

Ever wonder what "async rendering" means? Here's a demo of how to coordinate an async React tree with non-React work <https://gist.github.com/acdlite/f31becd03e2f5feb9b4b22267a58bc1f>

twitter

After more than a year of idle tinkering, the Winamp equalizer window is finally live on <https://jordaneldredge.com/projects/winamp2-js/>!

twitter

<https://twitter.com/mweststrate|@mweststrate> <https://twitter.com/TheLarkInn|@TheLarkInn> <https://twitter.com/dan_abramov|@dan_abramov> HMR heaven with #mobxstatetree, #Webpack and #reacthotloader :fire::tada:

twitter

:tada: Excited to announce production-ready <https://twitter.com/stylelint|@stylelint> support for :nail_care: styled-components! :clap: Great work <https://twitter.com/emilgoldsmith|@emilgoldsmith>! <https://medium.com/styled-components/announcing-production-ready-linting-for-styled-components-58adcdc4a97>

the morning paper

To type or not to type: quantifying detectable bugs in JavaScript

To type or not to type: quantifying detectable bugs in JavaScript Gao et al., ICSE 2017 This is a terrific piece of work with immediate practical applications for many project teams. Is it worth the extra effort to add static type annotations to a JavaScript project? Should I use Facebook&rsquo;s Flow or Microsoft&rsquo;s TypeScript if so? Will they really catch bugs that would otherwise have made it to master? TL;DR: both Flow and TypeScript are pretty good, and conservatively either of them can prevent about 15% of the bugs that end up in committed code. &ldquo;That&rsquo;s shocking. If you could make a change to the way we do development that would reduce the number of bugs being checked in by 10% or more overnight, that&rsquo;s a no-brainer. Unless it doubles development time or something, we&rsquo;d do it.&rdquo; &ndash; engineering manager at Microsoft. (It&rsquo;s amusing to me that this quote comes from a manager at the company where they actually develop TypeScript! You&rsquo;d think if anyone would know about the benefits&hellip;. Big companies eh). Let&rsquo;s dig in. The flame wars Static vs dynamic typing is always one of those topics that attracts passionately held positions. In the static typing camp we have the benefits of catching bugs earlier in the development cycle, eliminating altogether some classes of bugs in deployed systems, improved things like code-assist and other tool support, and enabling compiler optimisations. In the dynamic typing camp we have cleaner looking code, and greater flexibility and code malleability. JavaScript is dynamically typed. Three companies have viewed static typing as important enough to invest in static type systems for JavaScript: first Google released Closure, then Microsoft published TypeScript, and most recently Facebook announced Flow. Shedding some light through empirical data Inspired by previous studies in other areas, the authors study historical bugs in real world JavaScript projects in GitHub. The fact that long-running JavaScript projects have extensive version histories, coupled with the existing of static type systems that support gradual typing and can be applied to JavaScript programs with few modifications, enables us to under-approximately quantify the beneficial impact of static type systems on code quality. In other words, if the developers had been taking advantage of TypeScript or Flow at the time, would the bug have made it past the type checker? If not, it&rsquo;s reasonable to assume it would never have been committed into the repository in the first place. Here&rsquo;s an example of a trivial bug that type annotations can detect: Through this process, we end up with an under-estimation of the total benefits that might be available through static type checking. In the Venn diagram below, we see on the left the universe of bugs that can potentially be detected by a statically checked type system. Type checking may help catch some of these faster during development. On the right we see bugs that have made it into public repositories. Only a subset of these have clearly linked fixes / patches. This study looks at the intersection of type-system detectable bugs and those that have public fixes. We consider public bugs because they are observable in software repository histories. Public bugs are more likely to be errors understanding the specification because they are usually tested and reviewed, and, in the case of field bugs, deployed. Thus, this experiment under-approximates static type systems&rsquo; positive impact on software quality, especially when one considers all their other potential benefits on documentation, program performance, code completion, and code navigation. Finding bugs to study The goal is to find a corpus of bugs to study that is representative of the overall class, and large enough to support statistical significance. Finding representative bugs is addressed by uniform sampling. The authors sample commits that are linked to a GitHub issue from a snapshot of all publicly available JavaScript projects on GitHub. Each is then manually assessed to determine whether or not it really is an attempt to fix a bug (as opposed to a feature enhancement, refactoring, etc.). For the commits that pass this filter, the parent provides the code containing the bug. To report results that generalize to the population of public bugs, we used the standard sample size computation to determine the number of bugs needed to achieve a specified confidence interval. On 19/08/2015, there were 3,910,969 closed bug reports in JavaScript projects on GitHub. We use this number to approximate the population. We set the confidence level and confidence interval to be 95% and 5%, respectively. The result shows that a sample of 384 bugs is sufficient for the experiment, which we rounded to 400 for convenience. At the end of the sampling process, the bug pool contained bugs from 398 different projects (two projects happened to have 2 bugs each in the corpus). Most of these bug fixing commits ended up being quite small: about 48% of them touched only 5 or fewer lines of code, with a median of 6. Bug assessment process To figure out how many of these bugs could have been detected by TypeScript and Flow, we need some rules for how far we&rsquo;re prepared to go in adding type annotations, and long long we&rsquo;re prepared to spend on it. A preliminary study on a smaller sample of 78 bugs showed that for almost 90% a conclusion could be reached within 10 minutes, so the maximum time an author was allowed to spend annotating a bug was set at 10 minutes. Each bug is assessed both with TypeScript (2.0) and with Flow (0.30). To reduce learning effects (knowledge gained from annotating with one system speeding annotation with the other), the type system to try first is chosen at random. The process is then to read the bug report and the fix and spend up to the allotted ten minutes adding type annotations. Sometimes the tools can detect the bug without needing any annotations to be added at all. Other times the report will make it clear that the bug is not type related &ndash; for example a misunderstanding of the intended application functionality. In this case the bug is marked as type-system undetectable. We are not experts in type systems nor any project in our corpus. To combat this, we have striven to be conservative: we annotate variables whose types are difficult to infer with any. Then we type check the resulting program. We ignore type errors that we consider unrelated to this goal. We repeat this process until we confirm that b is ts-detectable because ts throws an error within the patched region and the added annotations are consistent (Section II), or we deem b is not ts-detectable, or we exceed the time budget M. Details of the approach used to gradually add type annotations are provided in section III.D. Does typing help to detect public bugs? Of the 400 public bugs we assessed, Flow successfully detects 59 of them, and TypeScript 58. We, however, could not always decide whether a bug is ts-detectable within 10 minutes, leaving 18 unknown. The main obstacles we encountered during the assessment include complicated module dependencies, the lack of annotated interfaces for some modules, tangled fixes that prevented us from isolating the region of interest, and the general difficulty of program comprehension. The 18 unknown bugs are then investigated to conclusion, at which point the score is 60 each for TypeScript and Flow. Running the binomial test on the results shows that, at the confidence level of 95%, the true percentage of detectable bugs for Flow and TypeScript falls into [11.5%, 18.5%] with mean 15%. Flow and TypeScript largely detect the same bugs: Which is better: Flow or TypeScript? The bugs that the two systems can detect largely overlap, with just 3 bugs that are only detected by TypeScript, and 3 that are only detectable by Flow. All…

GitLab

Please disable 'Perform DNS lookups to check if URLs are valid?' by default (#6050) · Issues · George Nachman / iterm2

Thanks for filing an issue! Please answer the questions below so I can help you. * iTerm2 version: 3.0.15 * OS version: 10.12.6 * does not seem necessary: Attach ~/Library/Preferences/com.googlecode.iterm2.plist...

iterm2.com

Downloads - iTerm2 - Mac OS Terminal Replacement

iTerm2 is a replacement for Terminal and the successor to iTerm

twitter

對於用 GraphQL 的用家來說，如果 Facebook 沒為其發明拿專利，反而專利蟑螂拿了，那才是最可怕吧 <https://twitter.com/ruanyf/status/910317438817910784>

twitter

FB对GraphQL拥有专利，有人质疑，是否可以放心使用该技术？ 这跟React还不同，因为它只是一份规格，还不是软件。这意味着，任何GraphQL的实现都侵犯FB的专利，除非有授权。Gitlab已经声明，将暂停部署GraphQL。<https://github.com/facebook/graphql/issues/351>

twitter

Don't forget about <https://twitter.com/code|@code> shortcut cheat sheets: Win: <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf> Mac: <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf> Linux: <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf> <https://pbs.twimg.com/media/DKMsRVyUIAAOnXe.jpg>

twitter

PSA: Node.js 8.6.0 is scheduled for release next Tuesday (26/9). Most significant change is the removal of the N-API cli flag.

Speaker Deck

Mixing ReasonML into your React apps

ReasonML is a super interesting language and toolset but not all of us have the luxury of a brand new greenfield project to use it in. In this talk I'll explore some of the methods Bucklescript provides to mix ReasonML together with the Javascript in your projects. I'll also explore some ideas on the best areas in your project to get started converting JS to Reason, and the benefits you'll gain from doing so.

twitter

If somebody is still wondering why we created yet another application server, here's a wonderful demo of NGINX Unit: <https://www.youtube.com/watch?v=I4IWEz2lBWU>

twitter

I've shared about Recompose in the Front-end Developers Taiwan meetup today and here is the slide. #react #recompose <https://speakerdeck.com/wuct/simplify-your-react-component-with-recompose>

twitter

Good wrapup of the Dojo world and state of JS from SitePen and how Reactive architectures via Observables are common <https://www.sitepen.com/blog/2017/01/25/state-of-javascript-2017/>

twitter

wowww this is *really* cool and useful, especially for those just learning React <https://twitter.com/james_k_nelson/status/910806625342038016>

twitter

I've added two new #reactjs lifecycle simulators. Now you can step through prop and state updates. <https://reactarmory.com/guides/lifecycle-simulators#State-updates>

twitter

This is terrific! If you're not quite comfortable with the JavaScript all the kids are writing these days, see: <https://github.com/mbeaudru/modern-js-cheatsheet>

YouTube

Mozilla 台北開發者大會

twitter

Announcing ridiculously fast path finding library for graphs. <https://www.youtube.com/watch?v=hGeZuIEV6KU> - video <https://anvaka.github.io/ngraph.path.demo/> - live

YouTube

Apollo Mission Briefing 001: Apollo Client 2.0

YouTube

Michael Jackson - Never Write Another HoC

Facebook Code

Relicensing React, Jest, Flow, and Immutable.js

React 16 will be licensed under the MIT Open Source license.

twitter

Just released <https://twitter.com/yarnpkg|@yarnpkg> v1.1.0 now. It comes with a big performance gain on Node 8.5 and with a DNS cache. Give it a try!

twitter

using PureScript without Bower is easy -- you can get psc-package and use it to set a package set and add deps <https://github.com/purescript/psc-package> <https://pbs.twimg.com/media/DKhizQ5WsAE-q2g.jpg>

twitter

Hyper 2.0 Canary just got much better :rocket: <https://github.com/zeit/hyper/releases/tag/2.0.3> <https://pbs.twimg.com/media/DKg2GedW4AIGYJg.png>

twitter

Yarn 1.1.0 is up to 35% faster. <https://twitter.com/madbyk/status/912026167066152960>

twitter

Just released <https://twitter.com/yarnpkg|@yarnpkg> v1.1.0 now. It comes with a big performance gain on Node 8.5 and with a DNS cache. Give it a try!

GitHub

cofacts/rumors-site

rumors-site - Rumors list / creation UI, with server-side rendering

twitter

Try Puppeteer: <https://try-puppeteer.appspot.com/>. Online playground to tinker w/ headless Chrome using Puppeteer’s Node API. <https://github.com/GoogleChrome/puppeteer> <https://pbs.twimg.com/media/DKljc8FVAAAw5Gr.png>

twitter

Gonna re-retweet because this is *brilliant* and you should all read it <https://twitter.com/Lowert/status/912367658997338112>

twitter

Wrote a blog post on type-level parsing in #purescript <http://kcsongor.github.io/purescript-safe-printf/>

twitter

I wrote an article all about the React 16 changes to server-side rendering: arrays, perf, streaming, and more! <https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67?source=linkShare-1dcba27e6a5c-1506381942>

Code Envato Tuts+

6 Things That Make Yarn the Best JavaScript Package Manager

Yarn is an open-source npm client that was developed at Facebook and improves on many aspects of the standard npm client. In this tutorial, I'll focus on the top six features that make Yarn...

Untitled

twitter

JavaScript's dynamic import() is shipping in Chrome! Lazy-load ES modules when a user needs them :fire: <https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ut-Mr0jt5X8> <https://pbs.twimg.com/media/DKoLTtrU8AAuZzO.jpg>

OpenShift Blog

Migrating Wordpress to OpenShift Online 3 Paid Tier – OpenShift Blog

Migrate an existing WordPress site from OpenShift Online 2 to the new version of OpenShift Online 3 using the Pro tier.

twitter

We’re relicensing the GraphQL spec under the Open Web Foundation Agreement v1.0 and GraphQL.js &amp; Relay under MIT. :tada: <https://medium.com/@leeb/relicensing-the-graphql-specification-e7d07a52301b>

facebook.github.io

React v16.0 - React Blog

We're excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

twitter

I'm making the switch to VSCode

kentcdodds

Tools without config :hammer_and_wrench::package: – kentcdodds

TL;DR/Spoiler alert: I’m working on a tool at PayPal called paypal-scripts and a personal one called kcd-scripts. You should try it too!

Medium

React’s New MIT License: The Circus Enters Its Third Ring :admission_tickets:

I’m not one to spread fear. I actually defended Facebook’s/React’s BSD + Patents. And I held off writing this post in hopes that Facebook…

GitHub

Switch to React 16 NOW · Issue #3000 · zeit/next.js

Since the official React 16 package is released, It's time for Next.js 4.0 to roll out too! Related PR: #2996

GitHub

styled-jsx v2 by giuseppeg · Pull Request #288 · zeit/styled-jsx

Premise My initial intention was to implement support for dynamic styles but along the way I had to implement a few related changes which made the scope of the PR grow a bit. This's why I think tha...

GitHub

quchen/articles

Miscellaneous articles. The readme is the table of contents.

twitter

Slides for "My History With Papers" are here: <http://jlongster.com/s/my-history-with-papers.pdf> #PWLConf

twitter

Just released Prettier 1.7.1 with a bunch of fixes, including a lot of CSS lowercasing fixes: <https://github.com/prettier/prettier/blob/master/CHANGELOG.md#171> <https://pbs.twimg.com/media/DKvvmXLUEAA7AMX.jpg>

twitter

面向对象编程（OOP）完全是模拟真实世界。顶层对象除了发命令，什么都不干，脏活累活都是底层对象完成的。#今日金句

twitter

:fire: Node 8.6.0 brings support for Object Spread! Goodbye Object.assign() <https://pbs.twimg.com/media/DK0f8VPUEAA_fLv.jpg>

twitter

<http://reactcheatsheet.com> is up-to-date with v16 APIs. categories map better to sections in the new docs <https://pbs.twimg.com/media/DK0vOfSVAAAm4mS.png>

GitHub

Broken Online Documentation · Issue #1205 · facebook/immutable-js

What happened <http://facebook.github.io/immutable-js/docs/> 's links are all broken How to reproduce Open <http://facebook.github.io/immutable-js/docs/> Click any links on the right hand side. e.g. C...

twitter

An official <https://twitter.com/Microsoft|@Microsoft> <https://twitter.com/typescriptlang|@typescriptlang> plugin for styled-components :scream::scream::scream: Get that IntelliSense and error reporting in VSCode, Sublime Text and Atom! :tada: :point_right:<https://github.com/Microsoft/typescript-styled-plugin> <https://twitter.com/mattbierner/status/913558441532071936>

twitter

Get styled components intellisense and error reporting with <https://github.com/Microsoft/typescript-styled-plugin> Supports <https://twitter.com/code|@code>, <https://twitter.com/sublimehq|@sublimehq>, and <https://twitter.com/AtomEditor|@AtomEditor>

twitter

A guide to a painless #React 16 upgrade: Step 1: Upgrade from React 15 End. Everything still just woks

twitter

Minor neat fix in React 16: “Highlight Updates” in React DevTools now works as expected and skips PureComponents that bailed out.

twitter

Today we are excited to announce a new website: <http://reactjs.org> And we'd like to thank a few people who helped make it possible:

twitter

:heart_eyes: Lightweight, responsive, modern drag &amp; drop library :label: #code :arrow_right_hook: <https://shopify.github.io/draggable/> <https://pbs.twimg.com/media/DK6hYqjUEAAvX5s.png>

Atomic Spin

When &amp; How Point-Free Notation Can Make Your Code More Readable

Sometimes, providing names for tangential arguments can cloud mathematical concepts. Point-free notation can help remove those distractions.

The HFT Guy

HAProxy vs nginx: Why you should NEVER use nginx for load balancing!

Load balancers are the point of entrance to the datacenter. They are on the critical path to access anything and everything. That give them some interesting characteristics. First, they are the most important thing to monitor in an infrastructure. Second, they are in a unique position to give insights not only about themselves but also about every service that they are backing. There are two popular open-source software load balancers: HAProxy and nginx. Let&rsquo;s see how they compare in this regard. Enable monitoring on the load balancers The title is self explanatory. It should be systematic for everything going to production. Install something new Enable stats and monitoring stuff Enable logs Enabling nginx status page Edit /etc/nginx/nginx.conf: server { listen 0.0.0.0:6644; access_log off; allow 127.0.0.0/8; allow 10.0.0.0/8; deny all; location / { stub_status on; } } Enabling HAProxy stats page Edit /etc/haproxy/haproxy.cfg: listen stats 0.0.0.0:6427 mode http maxconn 10 no log acl network_allowed src 127.0.0.0/8 acl network_allowed src 10.0.0.0/8 tcp-request connection reject if !network_allowed stats enable stats uri / Collecting metrics from the load balancer There are standard monitoring solutions: datadog, signalfx, prometheus, graphite&hellip; [2] These tools gather metrics from applications, servers and infrastructure. They allow to explore the metrics, graph them and send alerts. Integrating the load balancers into our monitoring system is critical. We need to know about active clients, requests/s, error rate, etc&hellip; Needless to say, the monitoring capabilities will be limited by what information is measured and provided by the load balancer. [2] Sorted by order of awesomeness. Leftmost is better. Metrics available from nginx nginx provide only 7 different metrics. Nginx only gives the sum, over all sites. It is NOT possible to get any number per site nor per application. Active connections: The current number of active client connections including Waiting connections. accepts: The total number of accepted client connections. handled: The total number of handled connections. Generally, the parameter value is the same as accepts unless some resource limits have been reached (for example, the worker_connections limit). requests: The total number of client requests. Reading: The current number of connections where nginx is reading the request header. Writing: The current number of connections where nginx is writing the response back to the client. Waiting: The current number of idle client connections waiting for a request. Source: Metrics available from haproxy HAProxy provide 61 different metrics. The numbers are given globally, per frontend and per backend (whichever makes sense). They are available on a human readable web page and in a raw CSV format. 0. pxname [LFBS]: proxy name 1. svname [LFBS]: service name (FRONTEND for frontend, BACKEND for backend, any name for server/listener) 2. qcur [..BS]: current queued requests. For the backend this reports the number queued without a server assigned. 3. qmax [..BS]: max value of qcur 4. scur [LFBS]: current sessions 5. smax [LFBS]: max sessions 6. slim [LFBS]: configured session limit 7. stot [LFBS]: cumulative number of connections 8. bin [LFBS]: bytes in 9. bout [LFBS]: bytes out [...] 32. type [LFBS]: (0=frontend, 1=backend, 2=server, 3=socket/listener) 33. rate [.FBS]: number of sessions per second over last elapsed second 34. rate_lim [.F..]: configured limit on new sessions per second 35. rate_max [.FBS]: max number of new sessions per second 36. check_status [...S]: status of last health check, one of: 37. check_code [...S]: layer5-7 code, if available 38. check_duration [...S]: time in ms took to finish last health check 39. hrsp_1xx [.FBS]: http responses with 1xx code 40. hrsp_2xx [.FBS]: http responses with 2xx code 41. hrsp_3xx [.FBS]: http responses with 3xx code 42. hrsp_4xx [.FBS]: http responses with 4xx code 43. hrsp_5xx [.FBS]: http responses with 5xx code 44. hrsp_other [.FBS]: http responses with other codes (protocol error) [...] Source: Monitoring the load balancer The aforementioned metrics are used to generate a status on the running systems. First, we&rsquo;ll see what kind of status page is provided out-of-the-box by each load balancer. Then we&rsquo;ll dive into third-party monitoring solutions. nginx status page The 7 nginx metrics are displayed on a human readable web page, accessible at 127.0.0.1:6644/ Nginx Status Page No kidding. This is what nginx considers a &ldquo;status page&ldquo;. WTF?! It doesn&rsquo;t display what applications are load balanced. It doesn&rsquo;t display what servers are online (is there anything even running???). There is nothing to see on that page and it won&rsquo;t help to debug any issue, ever. HAProxy stats page For comparison, let&rsquo;s see the HAProxy monitoring page, accessible at 127.0.0.1:6427 HAProxy Stats Page Here we can see which servers are up or down, how much bandwidth is used, how many clients are connected and much more. That&rsquo;s what monitoring is meant to be. As an experienced sysadmin once told me: &ldquo;This page is the most important thing in the universe.&rdquo; [1] Whenever something goes wonky. First, you open in a browser to see how bad it&rsquo;s broken. Second, you open the HAProxy stats page to find what is broken. At this point, you&rsquo;ve spot the source of the issue 90% of the time. [0] This is especially true in environments where there is limited monitoring available, or worse, no monitoring tools at all. The status page is always here ready to help (and if it&rsquo;s not, it&rsquo;s only a few config lines away). Integrating nginx with monitoring systems All we can get are the 7 metrics from the web status page, of which only the requests/s is noteworthy. It&rsquo;s not exposed in an API friendly format and it&rsquo;s impossible to get numbers per site. The only hack we can do is parse the raw text, hopping no spacing will change in future versions. Given that nginx doesn&rsquo;t expose any useful information, none of the existing monitoring tools can integrate with it. When there is nothing to get, there is nothing to display and nothing to alert on. Note: Some monitoring tools actually pretend to support nginx integrations. It means that they parse the text and extract the request/s number. That&rsquo;s all they can get. Integrating HAProxy with monitoring systems In additional to the nice human readable monitoring page, all the HAProxy metrics are available in a CSV format. Tools can (and do) take advantage of it. For instance, this is the default HAProxy dashboard provided by Datadog: Datadog pre-made dashboard for HAProxy Source: A Datadog agent installed on the host gathers the HAProxy metrics periodically. The metrics can be graphed, the graphs can be arranged into dashboards (this one is an example), and last but not least we can configure automatic alerts. The HAProxy stats page gives the current status (at the time the page is generated) whereas the monitoring solution saves the history and allows for debugging back in time. Why does nginx have no monitoring? All monitoring capabilities are missing from nginx on purpose. They are not and will never be available for free. Period. If you are already locked-in by nginx and you need a decent monitoring page and a JSON API for integrating, you will have to pay for the &ldquo;Nginx Plus&rdquo; edition. The price starts at $1900 per server per year. See: Conclusion: Avoid nginx at all costs Load balancers are critical points of transit and the single most important things to monitor in an infrastructure. Nginx stripped all monitoring features for the sake of money, while pretending to be open-source. Being left entirely blind on our operations is not acceptable. Stay away from nginx. Use HAProxy instead.