Alain Armand idkjs

Difference between Debounce and Throttle

Debounce

Debounce a function when you want it to execute only once after a defined interval of time. If the event occurs multiple times within the interval, the interval is reset each time.
Example A user is typing into an input field and you want to execute a function, such as a call to the server, only when the user stops typing for a certain interval, such as 500ms.

Throttle

LESS Coding Guidelines

Medium uses a strict subset of LESS for style generation. This subset includes variables and mixins, but nothing else (no nesting, etc.).

Medium's naming conventions are adapted from the work being done in the SUIT CSS framework. Which is to say, it relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This is to help work around the current limits of applying CSS to the DOM (i.e., the lack of style encapsulation) and to better communicate the relationships between classes.

Table of contents

JavaScript

Debugging ES6 in VS Code

My current editor of choice for all things related to Javascript and Node is VS Code, which I highly recommend. The other day I needed to hunt down a bug in one of my tests written in ES6, which at time of writing is not fully supported in Node. Shortly after, I found myself down the rabbit hole of debugging in VS Code and realized this isn't as straightforward as I thought initially. This short post summarizes the steps I took to make debugging ES6 in VS Code frictionless.

What doesn't work

My first approach was a launch configuration in launch.json mimicking tape -r babel-register ./path/to/testfile.js with babel configured to create inline sourcemaps in my package.json. The debugging started but breakpoints and stepping through the code in VS Code were a complete mess. Apparently, ad-hoc transpilation via babel-require-hook and inline sourcemaps do not work in VS Code. The same result for attaching (instead of launch) to `babel-node

Install node-repl-promised: npm install -g repl-promised

Use the repl to list all users

$ node-promised
> var app = require('./app');
undefined
> var Bookshelf = app.get('bookshelf');
undefined

	import React from 'react';
	import { compose, withHandlers } from 'recompose';
	import { injectIntl } from 'react-intl';
	import { graphql } from 'react-apollo';
	import gql from 'graphql-tag';

	// React.Element<any> is a flowtype annotation. Author is using flow. "label"'s value is set a react element.
	// Is author defining the graphql mutation type here in the file instead of in a schema?
	// toggleMutation prop is set to a Function. Flow? So when we call this, Flow will check if its a function.
	type MutationButtonType = {


	import React from 'react';
	import { compose, withHandlers } from 'recompose';
	import { injectIntl } from 'react-intl';
	import { graphql } from 'react-apollo';
	import gql from 'graphql-tag';

	type MutationButtonType = {
	toggleMutation: Function,
	label: React.Element<any>,

	<html>
	<script src="https://www.celljs.org/cell.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.0/redux.min.js"></script>
	<script>

	function items(state = [], action) {
	switch (action.type) {
	case 'ADD':
	return state.concat(action.value)
	case 'CLEAR':

	import React, { Component } from 'react';
	import Header from './components/Header';
	import Body from './components/Body';


	class App extends Component {

	constructor(props){
	super(props);
	this.state = {dropdownShow : false};

	import express from 'express';
	import cors from 'cors';
	import graphQLHTTP from 'express-graphql';
	import path from 'path';
	import webpack from 'webpack';
	import WebpackDevServer from 'webpack-dev-server';
	import {Schema} from './data/schema';

	const APP_PORT = 3000;
	const GRAPHQL_PORT = 8080;

	export const Gists = props =>
	<div>
	{
	props.viewer.gists &&
	props.viewer.gists.map(x => <p>{x.description}</p>)
	}
	</div>

	export const GistsWithGraphQL = compose(
	withGraphQL(variables => Fragment`fragment gists on Gist {