Glenn Reyes glennreyes

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.

Enable tab completion for JSX with Emmet in Atom

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

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

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

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.

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

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.

why?

React lifecycle cheatsheet

Method	Side effects¹	State updates²	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`

	/**
	* 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!

	// 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 => {

	// 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>

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