:tada:Node.js 8.9.0 goes into LTS support and Node.js 9.0.0 becomes the new Current release today. More details here: <http://bit.ly/2z1kAcJ> <https://pbs.twimg.com/media/DNepWBQUQAA4usi.jpg>
Mwahaha. Want to see which components are rendering across your entire app? Do this: <https://pbs.twimg.com/media/DNfRBYYWsAA6In2.jpg>
GitHub
awesome-shell - A curated list of awesome command-line frameworks, toolkits, guides and gizmos. Inspired by awesome-php.
Salesforce Engineering
Optimizing Performance with Web Workers – Salesforce Engineering
The Salesforce Charts team is constantly pushing for better runtime performance because of our intense data processing and rendering needs…
HAProxy Technologies
What's New in HAProxy 1.8 - HAProxy Technologies
The monumental stable release of HAProxy 1.8 is coming! The HAProxy 1.8 release candidate 1 (RC1) has been published by the R&D team here at HAProxy Technologies, and in this blog post we are going to take you through some of the release highlights, new features, and configuration examples to get you up to speed. …
Atomic Spin
Using State Tables for Testing – Simple, Scalable, Concise
Using state tables for testing is great for situations where there are a variety of inputs for a function that produce different results.
codementor.io
Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS | Codementor
If we only load the CSS that's useful for the initial page render, our users will see the page quicker. Isolating critical CSS and loading non-critical CSS in idle time is something that can be done programmatically in your Webpack pipeline.
code.visualstudio.com
Multi-root Workspaces in Visual Studio Code
You can open and work on multiple project folders in Visual Studio Code with multi-root workspaces.
MS using Chrome+Puppeteer for visual diffs in their new UI lib <https://github.com/microsoft/YamUI/>. Should also use web components, but who’s count’n :) <https://pbs.twimg.com/media/DN98ptIV4AAaMC2.jpg>
Using Object.keys instead of for..in is a good performance advice by <https://twitter.com/lucasazzola|@lucasazzola>. :+1: <https://github.com/babel/babel/pull/6748> <https://pbs.twimg.com/media/DN8kLSRWkAAUabx.png>
pixelmatch - The smallest, simplest and fastest JavaScript pixel-level image comparison library
prettier - Prettier is an opinionated code formatter.
It's #Nodejs Release Day :grinning: v4.8.6 <https://nodejs.org/en/blog/release/v4.8.6/> v6.12.0 <https://nodejs.org/en/blog/release/v6.12.0/> v9.1.0 <https://nodejs.org/en/blog/release/v9.1.0/> (8.x coming later)
Prettier 1.8 formats not only Markdown but any code within it! This is amazing for blogging. <https://twitter.com/lucasazzola/status/927748862197899264>
Just released version 1.8 of Prettier! Features Markdown support thanks to <https://twitter.com/ikatyang_|@ikatyang_>, JSDoc realignment, and more! <https://github.com/prettier/prettier/releases/tag/1.8.0>
I just published “Using a React 16 Portal to do something cool” <https://medium.com/p/using-a-react-16-portal-to-do-something-cool-2a2d627b0202>
YouTube
Aerolab
Flexbox and Grids, your layout’s best friends
We decided to debunk the myths around Flexbox & Grids in order to show you the power of these two technologies working together. Read more!
2
Simple, responsive, modern SVG Charts with zero dependencies: <https://frappe.github.io/charts>
scope - Monitoring, visualisation & management for Docker & Kubernetes
serverjs.io
Flexible and powerful server for Node.js
xtianmiller.github.io
Lightweight, high-performance JS plugin for detecting and manipulating elements in the browser.
chimee - a video player aims to bring wonderful experience on browser
Bogdan-Lyashenko/js-code-to-svg-flowchart
js-code-to-svg-flowchart - js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Ex...
Just released: react@16.1.0-rc react-dom@16.1.0-rc This really is the last call for reporting issues :upside_down_face:. Releasing React 16.1.0 tomorrow.
react-hot-loader - Tweak React components in real time.
msdn.microsoft.com
Install the Linux Subsystem on Windows 10
Installation instructions for the Linux Subsystem on Windows 10.
Charged
Why I left Mac for Windows: Apple has given up | Charged
I'm a die-hard Apple user, but after years of watching the Mac slowly die, I've switched back to Windows. Here's the story of why I moved back to Windows, and what I've found so far.
:rotating_light: The <https://twitter.com/code|@code> October release is out! This is one you do not want to miss! :rotating_light: Full details :point_right: <https://aka.ms/vscode-oct17> :video_camera: highlights rolling :point_down:
8 immutable arrays operations you should know :memo::nerd_face: #javascript #es6 <https://pbs.twimg.com/media/DOHIrXPV4AA2ATJ.png>
React v16.1 is available! Go go go! :sunglasses: <https://github.com/facebook/react/releases/tag/v16.1.0>
<https://twitter.com/yarnpkg|@yarnpkg> and Algolia: one year of #opensource collaboration, 700,000 user searches per month :tada: <https://blog.algolia.com/yarn-search-javascript-packages/> <https://pbs.twimg.com/media/DONV9qyWsAITFOj.png>
Oh Hey Taiwan I'm going to visit soon and run a half day of <https://twitter.com/nodejs|@nodejs> events * A talk * A Node.js Values Session * Code + Learn Come learn about node, help guide our culture, and land your first commit :tada: <https://jsdc-tw.kktix.cc/events/jsdcworkshopcodeandlearn201711>
Xebia Blog
Visual Regression testing with Cypress.io
Shares 1 5
blink-diff - A lightweight image comparison tool
functional.works-hub.com
Functional Works - Functional Programming Jargon
(Functional Programming)
getopts - Node.js CLI options parser.
:dizzy: you can push into Array.prototype and totally mess up empty arrays <https://pbs.twimg.com/media/DOPuoKKUEAANtF6.jpg>
1
Excited to announce DraftJS Plugins 2.0:balloon::tada: A plugin architecture for Draft.js now including rich text editing toolbars and features like Drag’n’Drop & Alignment for Atomic Blocks like images <https://medium.com/@nikgraf/announcing-draftjs-plugins-2-0-8c25f2a4df55> Thx to <https://twitter.com/juliandoesstuff|@juliandoesstuff> who took over the project recently:clap:
Here we see a react engineer deploying a contact form <https://pbs.twimg.com/media/DOPJ_TNXcAAt61N.jpg>
remotestorage/remotestorage.js
remotestorage.js - ⬡ JavaScript client library for integrating remoteStorage in apps
Medium
Slaying a UI Antipattern in React – JavaScript Inside – Medium
Solving a well known a UI problem with React
v16.1.1 of <https://twitter.com/reactjs|@reactjs> is out! Get it while it's hot. <https://github.com/facebook/react/releases/tag/v16.1.1>
I just published “Rendering a function with <https://twitter.com/reactjs|@reactjs>” <https://blog.kentcdodds.com/rendering-a-function-with-react-ca3eaf0751e2>
On Twitter Lite, we ensure our components are as fast to mount and update as possible. Without react-addons-perf in v16, we needed another solution. In comes react-component-benchmark. <https://github.com/paularmstrong/react-component-benchmark>
vladgolubev/serverless-libreoffice
serverless-libreoffice - Convert any document to PDF with headless Libreoffice compiled to run on AWS Lambda
Vimeo
When is programming intrinsically fun, and when is it laborious? What drives some developers towards the rapidly developing JavaScript ecosystem, while others flock to less-developed and more esoteric languages and ecosystems? What keeps us using metaphors and abstractions developed so many decades before, when we've spent so much effort designing clean-slate systems? We'll look at this discussion through the prism of ReasonML, a new syntax and set of tooling around OCaml. OCaml itself is more than 20 years old and is wildly popular amongst academics, but is largely unknown in the industry. We'll see how Reason straddles the spectrum of the questions above to bring all of that horsepower to bear on industry problems - through a syntax and developer experience appealing to pragmatists, an emphasis on FP and a type system meant to draw in purists, and a focus on incremental migration that means we can use it in the systems of yesteryear while moving towards the abstractions of tomorrow. Key takeaways What's Reason What makes Reason uniquely suited for bringing joy to certain classes of problems Why now? OCaml is more than 20 years old How can you get start using it today in your work and side projects?
Go get v9.2.0 of <https://twitter.com/nodejs|@nodejs> at <https://nodejs.org/en/blog/release/v9.2.0>. * exposes process.ppid * exposes fs.realpathSync.native and fs.realpath.native * Supports building with OpenSSL 1.0.2 *and* 1.1.0
Graphcool Blog
GraphQL Server Basics: The Schema – Graphcool Blog
The structure and implementation of a GraphQL server
graphql.org
GraphQL: A query language for APIs.
GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
jamesfriend.com.au
A First Reason React app for Javascript developers | James Friend
*This post has been updated to use the new Reason 3 syntax, and to account for API changes in Reason React. A Traditional Chinese translation of an older version of this article is available [here](<http://987.tw/a-first-reason-react-app-for-javascript-developers/>).* [Reason](<https://facebook.githu>
Introducing Visual Studio Live Share
Real-time collaborative development
Gea-Suan Lin's BLOG
最近在一些地方冒出兩篇文章 (應該是 Nuzzle 與 Hacker News，放在 tab 上好幾天，不是那麼確定來源...)，一篇是最近發的「The Case for RSS」，另外一篇是五月的文章「RSS: there's nothing better」。這邊講的 RSS 比較廣義，不侷限於 RSS {0.
Towards Next.js 5: Introducing Canary Updates <https://zeit.co/blog/next-canary> <https://pbs.twimg.com/media/DOskghJUQAAVEbq.jpg>
Contribute to reason-apollo development by creating an account on GitHub.
Introducing Teletype for Atom: Code collaboratively in real time
Writing code with other developers can be a great way to onboard teammates, get to know how your peers think, and learn new skills. Unfortunately, writing code together can be difficult to coordina...
New blog post: "The Cost Of JavaScript" <https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e> Loading JS fast = only send what you need + less transfer time + less time parsing/compiling code :fire:
Holy banana pancakes! This is seriously all kinds of wows and wonders. What a rad tool for generating CSS animations. People are awesome. <http://animista.net/> Thanks for sharing, <https://twitter.com/ddmoore|@ddmoore>!
Apollo GraphQL
Apollo Client 2.0: Beyond GraphQL APIs – Apollo GraphQL
Learn how to manage all your app data with Apollo in my talk from GraphQL Summit 2017
react-fns :atom_symbol: React components, hoc's, and utilities functions for common browser API's <https://github.com/jaredpalmer/react-fns>
Announcing CodeSandbox 2.0 :beach_with_umbrella: - Commit, open PRs and create repos right from within CodeSandbox. - A completely new and redesigned homepage. - Static file hosting support from the `public` directory. <https://medium.com/@compuives/announcing-codesandbox-2-0-938cff3a0fcb>
Tip: Does your project work better with <https://twitter.com/code|@code> (VS Code) extensions? List recommended extensions in .vscode/extensions.json, and VS Code will prompt users to install them with a single click. :+1: <https://pbs.twimg.com/media/DOxFFH8XkAIyfDB.jpg>
:tada: Redux 4.0.0-beta.1 is out! :tada: :white_check_mark: New TS definitions. :white_check_mark: Bundled CJS and ES builds. :white_check_mark: Tightened up behaviors. No breaking changes for most apps! Give it a whirl and let us know if there are problems. npm install redux@next <https://github.com/reactjs/redux/releases/tag/v4.0.0-beta.1>
Prettiet now has a twitter account :) <https://twitter.com/PrettierCode|@PrettierCode>
node-prune - Remove unnecessary files from node_modules (.md, .ts, etc)
Articles by thoughtram
Custom Overlays with Angular's CDK
The Angular Material CDK provides us with tools to build awesome and high-quality Angular components without adopting the Material Design visual language. Its goal is to make our life as developers easier and extract common behaviors and patterns shared between multiple Angular Material components. In this post, we'll use the CDK to build a custom overlay that looks and feels much like the Google Drive file preview overlay.
Apollo has been a good member of the GraphQL community, but I've heard from some of you about confusion around these ads so to clarify: Apollo/Meteor is not the “official” supporter of the GraphQL community, nor are they the original engineers behind GraphQL. <https://pbs.twimg.com/media/DPGQ-I9VQAAT5ju.jpg>
Hey :wave:There's a new post on my blog about configuring vim for writing Haskell. Save yourself some time and check it out! #vim #haskell <http://monicalent.com/blog/2017/11/19/haskell-in-vim>
Object destructuring (*) works for Arrays: > const {0:a, 2:b, length:l} = ['foo', 'bar', 'baz']; > a 'foo' > b 'baz' > l 3 (*) <http://exploringjs.com/es6/ch_destructuring.html>
Just launched my Black Friday sale! 50% off all my courses: <http://LearnNode.com> <https://ES6.io> <http://ReactForBeginners.com> Enjoy! <https://pbs.twimg.com/media/DPGC-izV4AE60Tf.jpg>
ReactiveConf 2017: Javi Velasco - Styling Components for React UI Kits
:bulb:GraphQL Server Basics :woman::school: Apollo Client 2.0 by <https://twitter.com/peggyrayzis|@peggyrayzis> :mortar_board:Angular & Apollo tutorial on <http://howtographql.com> by <https://twitter.com/b_b4rry|@b_b4rry> :tv: <https://twitter.com/graphqlsummit|@graphqlsummit> videos and more in issue 76 <https://graphqlweekly.com/issues/76>
What's the best internationalization package for React? react-intl vs. i18next vs. js-lingui vs. ...? :point_right: <https://spectrum.chat/thread/9c0e95b6-3c52-4375-be99-71563f82cd2e>
:mag: Fun idea. Let's play #whatsInYourBundle!!! (RT!!) :mag_right: 1. Go install webpack-bundle-analyzer 2. Reply w/ image! 3. #webpack team will triage
Dynamic ES6 module import() has arrived! Pretty groovy for lazy loading code. Read more about it from <https://twitter.com/mathias|@mathias>: <https://developers.google.com/web/updates/2017/11/dynamic-import>
Dynamic import() is available in Chrome 63, Safari 11, EDGE 16. Using it, you can lazily load and execute JavaScript modules on demand. E.g. when you need to open a dialog, you can load the code for it. More info: <https://hospodarets.com/native-ecmascript-modules-dynamic-import> Demo: <https://codepen.io/malyw/pen/qVoZoR>
Support for EditorConfig is almost there. If anyone is willing to test it and give us some feedback would be great: <https://github.com/prettier/prettier/pull/3255>
Hacker Noon
You don’t need to know “Dependency Injection” – Hacker Noon
I’ve recently been party to an interview for a front-end position where a colleague asked the candidate — “What do you know about…
I just figured out that the Emmet integration in <https://twitter.com/code|@code> can automatically determine image width and height. It also works on images that aren't even in your project!
1
govern - Component-based state management for React.
Medium
Cosmos 3.0, the version you’ll fall in love with – Ovidiu Cherecheș – Medium
Three months ago I forced myself to make a decision. After years of on and off involvement with Cosmos, I had to either give it the…
I just published “FREE! Advanced React.js Lectures” <https://medium.com/p/free-advanced-react-js-lectures-a9fdcad008f3>
Prettier Code Formatter for <https://twitter.com/code|@code> is now supporting #Markdown. Which means you can simply invoke the shortcut (macOS: ⇧⌥F, Windows: Shift+Alt+F, Linux: Ctrl+Shift+I) on any Markdown document and it will format it with Prettier. Pretty cool right? <https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode>
crossplane - a fast and reliable NGINX configuration parser by the Amplify dev team is now on GitHub. Parse your NGINX config into JSON! <https://github.com/nginxinc/crossplane>
react-chartkick - Create beautiful charts with one line of React
Great way to use CSS Modules with React/Preact. It creates React components for every class in CSS file. So you have readable JSX without className attribute and classnames helper. <https://github.com/kossnocorp/decss> <https://pbs.twimg.com/media/DPQxOXNXcAASQv5.jpg>
<http://tldr.sh/> from <https://twitter.com/tldr_pages|@tldr_pages> is one of the niftiest things I've found in a while. <https://pbs.twimg.com/media/DPK7B-zWsAAuEbf.jpg>
react-select@1.0.0 has finally been released :tada: <https://github.com/JedWatson/react-select> Massive improvements to ... everything. 250+ PRs merged since 0.9, a whole lot more issues closed, 14 betas, 10 rcs, and a huge amount of community support. So happy about it. Thanks to everyone involved!
raspchat - A chat server that can run on Raspberry Pi
VoxelSpace - Terrain rendering in less than 20 lines of code
scrollama - Scrollytelling with IntersectionObserver.
z - native pattern matching for javascript
Contribute to iA-Fonts development by creating an account on GitHub.
imaskjs - vanilla javascript input mask
:checkered_flag: Final Form: The road to the checkered flag – Erik Rasmussen – Medium
Two and a half years ago, about a month after Dan Abramov’s unforgettable launch of Redux at React Europe 2015, I released a humble little…
Inline code review for git annotations in the gutter finally landed in <https://twitter.com/code|@code>. As a long time WebStorm user, this makes me :heart_eyes:<https://medium.com/@fhinkel/new-in-vs-code-inline-change-review-d43df04ea264>
geddski.teachable.com
Master CSS Grid layout and save the critters! A new story course game by geddski
This adds support for CSS Modules using the explicit file naming convention [name].module.css When using css modules, class names follow a deterministic convention rather than the standard random h...
Neufund
Why we have banned default exports in Javascript and you should do the same
ES2015 was the most important improvement to Javascript in years. Among many great features it brought brand new module system — Ecma…
Stephen Hay | CSS for Evil, not Good | CSS Day 2017
Fact one: The language we use for designing the Web is a constantly evolving, powerful tool. Fact two: People who stand to gain something from you have a motive to deceive. In this presentation, Stephen explores the dark—and sometimes scary—space where both meet. Slides: About Stephen: More about CSS Day: or Receive updates in your inbox:
Very cool to see AWS integrating serverless GraphQL into its offerings. This feels like just the beginning! <https://aws.amazon.com/blogs/aws/introducing-amazon-appsync/>
reactjs.org
React v16.2.0: Improved Support for Fragments - React Blog
React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments : Fragments loo
Excited to announce Actual, a personal budgeting system I've been working on: <http://actualbudget.com/> Sign up you're interested in it!
You can now pipe output of a command into Code from the terminal. Enjoy it via today's <https://twitter.com/code|@code> insider release (<https://code.visualstudio.com/insiders>). #HappyCoding
jchavarri/chrome-extension-starter-reason-react
chrome-extension-starter-reason-react - Getting Started: Building a Chrome Extension with ReasonReact
egghead.io
Understand why Transducers can Improve Performance - js Video Tutorial #free
Chaining operations like map and filter on an array can have performance issues as we have to iterate through the whole array for every operation. In this lesson we explore this problem by doing some basic array transformations and measuring their performance. We’ve got two utility function to help us with this: * arrayOfRandoms is a higher order function which helps us create a range of random numbers * timeIt will help us measure how long functions take to execute It's important to understand this problem and why it occurs before we move on to how transducers handle it differently.
Medium 