vaibhav da-vaibhav

A JS library that makes PAGE UP/DOWN keys work better on web sites (concept)

the web page is divided (vertically) into logical sections
when the user presses PAGE DOWN,
- if the current section is completely visible, the page is scrolled to the beginning of the next section
- else, the page is scrolled so that more of the current section is revealed (this goes on until the end of the current section is visible)
when the user presses PAGE UP, the same algorithm applies but in the opposite direction
optionally, a visual indicator of where the current section begins/ends may also be displayed (e.g. a vertical stripe at the left edge of the viewport)

Note: I looked into the CSS Scroll Snap module, but the spec is currently undergoing a major refactoring.

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])':

JS Pop Quiz: How well do you know your functions?

Given an Array of Functions fns, what argument(s) can you pass to fns.forEach such that each function in fns will execute, in order, without creating any anonymous (or named) functions or invoking the Function constructor?

Conditions

Do not use the function keyword, or arrow functions () => .
Do not invoke the Function constructor.
Do not use method definitions.
Function#bind & friends on the Function.prototype are ok.

Usage

node dirtyserve.js

The point your browser to

http://localhost:3000/myfile.xxx

and the server will try to serve that file from the local server.

Private members in ES6 classes

"Let's create an ES6 class!" you say. "Let's give it a private variable x."

class Foo {
  constructor(x) {
    this.x = x;
  }
  getX() {

"Everything is an expression"... since ES1?

Many languages support "expression-only" semantics, allowing to use any construct in an expression position.

NOTE: the difference between expressions and statements is that the former produce a value, while the later don't.

For example, Ruby's if-expression:

x = 10

Turning Off Github Issues

My friend Michael Jackson turned off github issues on one of his smaller projects. It got me thinking...

Maintainers getting burned out is a problem. Not just for the users of a project but the mental health of the maintainer. It's a big deal for both parties. Consumers want great tools, maintainers want to create them, but maintainers don't want to be L1 tech support, that's why they

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	// 1. npm init
	// 2. npm install --save webpack webpack-dev-server babel-loader babel-preset-es2015
	// 3. mkdir dist && touch index.html
	// 4. Include `<script src="/bundle.js"></script>` inside index.html
	// 5. mkdir src && touch src/index.js
	// 6. Add some code to index.js (e.g. `console.log('Hello, World!'))
	// 7. npm start
	// 8. Browse to http://localhost:8080/dist/

	const webpack = require('webpack')

	/*
	* This file contains JS modules for a React app using react-router and redux.
	* Each module should be in its own separate file, but for the purposes of
	* this gist, I've inlined them all.
	*/

	/* app/index.js */

	import React from 'react'
	import { Router, browserHistory } from 'react-router'