tchap

/**
 * Part 1: Set up the authentication endpoints.
 */

// Point 1: Notice the checkReturnTo middleware, is defined at the bottom.
app.get('/auth/github', checkReturnTo, passport.authenticate('github', {state: 'Bublifuk'}));

// Point 2: Use 'successReturnToOrRedirect', otherwise the middleware will not work.
app.get('/auth/github/callback',
  passport.authenticate('github', { successReturnToOrRedirect: '/', // IMPORTANT!

joepie91

Don't use VPN services.

No, seriously, don't. You're probably reading this because you've asked what VPN service to use, and this is the answer.

Note: The content in this post does not apply to using VPN for their intended purpose; that is, as a virtual private (internal) network. It only applies to using it as a glorified proxy, which is what every third-party "VPN provider" does.

• A Russian translation of this article can be found here, contributed by Timur Demin.
• A Turkish translation can be found here, contributed by agyild.
• There's also this article about VPN services, which is honestly better written (and has more cat pictures!) than my article.

mxstbr

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
2. Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

ryyppy

Proposal for this year's Reactive lightning talks @ReactiveConf - If you want to see my talk, star this gist please :-) [Reactive Blogpost][reactive-conference-blogpost]

---

A life on a Commandline

As a JavaScript developer, could you imagine using something else than Atom, Sublime or other IDE-like text-editors? During their daily work, people wrangle a lot with different applications, editors, windows, browsers and loose a lot of time because of their tools getting in their way.

nikgraf

Rich text editing with DraftJS Plugins

Earlier this year Facebook open sourced its React based rich text editing framework Draft.js. At Facebook it powers status updates, comments & notes. Others used it to build editors matching Medium’s experience.

Together with a whole team of open source contributors I built a plugin architecture on top of Draft.js. In this talk I walk you through the existing plugins and show how you can build your own feature-rich text editor for the web with only a handful lines of code. 🤓

DraftJS Plugins

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

geoffreydhuyvetters

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

• Andrew Clark: What's Next for React — ReactNext 2016
• React Fiber Architecture

why?

threepointone

// inifinite scrolling of content without extra wrappers 
const { render, findDOMNode  } = ReactDOMFiber

class App extends React.Component {
  render() {
  // wrap the root element with an Intersection Observer, exposing .observe for children
    return <Intersection>
      <div style={{ height: 200, overflow: 'auto' }}>
        <Page offset={0} count={10} />
      </div>

lencioni

// Usage:
// 
// function loader() {
//   return new Promise((resolve) => {
//     if (process.env.LAZY_LOAD) {
//       require.ensure([], (require) => {
//         resolve(require('./SomeComponent').default);
//       });
//     }
//   });

bvaughn

React lifecycle cheatsheet

Method	Side effects1	State updates2	Example uses
Mounting
componentWillMount		✓	Constructor equivalent for createClass
render			Create and return element(s)
componentDidMount	✓	✓	DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps		✓	Update state based on changed props