Skip to content

Instantly share code, notes, and snippets.

Eirik L. Vullum eiriklv

Block or report user

Report or block eiriklv

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@eiriklv
eiriklv / App.css
Last active Oct 27, 2018
Idiomatic React and Redux
View App.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 10vmin;
}
.App-header {
@eiriklv
eiriklv / conventions.md
Created Sep 20, 2018
Component class conventions
View conventions.md

React Conventions

  • Method ordering
  • PropTypes + DefaultProps
  • Destructuring from props and state (intent)
  • Avoid instance methods (only for things that matters to React)
  • Components > render methods (renderElements/renderItems/etc)
  • Pure render function (no window or Math.random())
  • Containers (connected) vs. Presentational Components (pure)
@eiriklv
eiriklv / a.js
Last active Sep 20, 2018
Instance method anti-pattern
View a.js
/**
* Instance method anti pattern
*/
class MyComponent extends React.Component {
computeThatThing() {
return this.props.a + this.props.b;
}
render() {
return (
View build.js
/**
* Dependencies
*/
const spawn = require('cross-spawn');
/**
* Package.json
*/
const packageJson = require('../package.json');
@eiriklv
eiriklv / server.js
Last active Apr 26, 2018
Simple server
View server.js
/**
* Dependencies
*/
const express = require('express');
const history = require('connect-history-api-fallback');
/**
* Environment / configuration
*/
const port = process.env.PORT || 3000;
View exercises.txt
1. Basic Syntax
- http://jsbin.com/kixovom/
2. Types and Literals
- http://jsbin.com/bagofoc/
3. Truth and Equality
- http://jsbin.com/feyepub/
4. Functions
- http://jsbin.com/tuzezip/
5. Objects
- http://jsbin.com/qukaqig/
View HTTPGetRequestForQueriesInterface.js
import { HTTPFetchNetworkInterface, printAST } from 'apollo-client';
/**
* Serialize a object to a query string
* @source https://stackoverflow.com/questions/1714786/query-string-encoding-of-a-javascript-object#comment47677757_18116302
*/
function serialize( obj ) {
return `?` + Object.keys(obj).map(k => k + `=` + encodeURIComponent(obj[k])).join(`&`);
}
View classes.md

ES6 Classes

ES2015 has introduced the concept of "classes" in JavaScript.

But be aware - JavaScript classes are just syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript.

JavaScript classes provides simpler and clearer syntax to create objects and deal with inheritance (proceed with caution.. inheritance vs. composition = specialization vs. sharing behavior).

The existing model of prototypal inheritance in JavaScript is based on a special kind of function and the new keyword, which really just alters how the function behaves regarding what it returns and how it sets up the prototype chain.

@eiriklv
eiriklv / requestAnimationFrame.js
Created Aug 20, 2017 — forked from jacob-beltran/requestAnimationFrame.js
React Performance: requestAnimationFrame Example
View requestAnimationFrame.js
// How to ensure that our animation loop ends on component unount
componentDidMount() {
this.startLoop();
}
componentWillUnmount() {
this.stopLoop();
}
@eiriklv
eiriklv / tic-tac-toe.js
Last active Aug 5, 2017
Tic Tac Toe (modeling problems with data and functions)
View tic-tac-toe.js
/**
* Example of empty game using 2D representation
*/
const exampleGame2D = [
['', '', ''],
['', '', ''],
['', '', ''],
];
/**
You can’t perform that action at this time.