Skip to content

Instantly share code, notes, and snippets.

Andrew Stewart Gibson goofballLogic

View GitHub Profile

Event-driven styles

Whether in the browser, on the server or in some other environment (e.g. Electron), the event-driven nature of JavaScript's early years is never that far away.

In the browser, the HTML DOM API provides a wealth of event-based interactions, but there are many other common browser APIs (e.g. Messaging, Indexed DB, XHR, Service Workers) which employ similar patterns.

On the server, in e.g. node.js, HTTP pipelines, streaming APIs and EventEmitters are three massive areas of JavaScript programming which employ event-driven programming heavily.


View consume.cs
long[] Consume(long[] source, long quantity)
var acc = 0L;
bool Accumulate(long x)
if (acc > quantity) return false;
acc += x;
return true;
return source.SkipWhile(Accumulate).ToArray();
View bootstrap webpack react app
Create the app:
npm init
Add React:
npm install --save react react-dom
Add webpack:
npm install --save-dev webpack webpack-cli webpack-dev-server
Add babel:
View constructor function
fetchForLater().then( resp => {
if ( !resp.ok ) { throw new Error( "Failed to fetch for later people" ); }
return resp.json();
} ).then( json => {
const savedForLater = ( [ id, person ] ) => person );
this.setState( { saved: savedForLater } );
View my-api.js
function sendJSON( method, data, url ) {
return fetch( url, {
body: data && JSON.stringify( data ),
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json"
View gist:14266a822317ea07893a4e6a5cfb0a9f

Having dived a bit deeper, I'm concluding that there are some design decisions which need to be made here.

For a normal scenario like:

Feature: my feature
 Scenario: my scenario
  Given step 1
  When step 2
  Then step 3

Create a folder named "routes", and one named "middleware"

   middleware                        <---
   routes                            <---

Add a person details component (with children)

const PersonDetails = ( { person, children } ) => <div className="person-details">

  <p className="name">{} {person.surname}</p>
  <p><span className="label">Region</span>{person.region}</p>
  <img src={} />
View People

1. Add the People component:

class People extends Component {
  constructor() {
    this.state = { people: [] };
  callAPI() {
goofballLogic /
Last active May 9, 2018
Bog standard create-react-app

We're assuming you already have node.js installed

1. Install the create-react-app package:

npm install -g create-react-app

2. Create an application:

You can’t perform that action at this time.