Skip to content

Instantly share code, notes, and snippets.

Andrew Stewart Gibson goofballLogic

View GitHub Profile
View event-driven.md

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.

The DOM

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 = json.map( ( [ 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
View api-to-module.md

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

api
   middleware                        <---
   node_modules
   routes                            <---
   .gitignore
   index.js
   package-lock.json
View add-person-details.md

Add a person details component (with children)

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

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

1. Add the People component:

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

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.