Skip to content

Instantly share code, notes, and snippets.

@curtiswilkinson
curtiswilkinson / interface.js
Last active January 11, 2018 19:44
Interface using pick
interface Task {
id: string,
name: string,
assignee: string,
contacts: any[], //for brevity
associatedJob: string,
submissionDate: string,
allocatedTime: number,
expectedCompletion: string,
invoiceNumber: string,
@jareware
jareware / package-json-engines.md
Last active October 30, 2020 18:36
Enforcing the engines property of package.json

Document your target environment with:

"engines": {
  "npm": ">=3.3.12 <4",
  "node": ">=5.5.0 <6"
},

Then install this:

"devDependencies": {

1. Build GraphQL server using `express-graphql` package.
2. Configure `schema.js` file.
3. Query for data.
@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@sebmarkbage
sebmarkbage / react-terminology.md
Last active January 9, 2023 22:47
React (Virtual) DOM Terminology
@sebmarkbage
sebmarkbage / ElementFactoriesAndJSX.md
Last active May 17, 2022 11:06
New React Element Factories and JSX

New React Element Factories and JSX

In React 0.12, we're making a core change to how React.createClass(...) and JSX works.

If you're using JSX in the typical way for all (and only) React components, then this transition will be seamless. Otherwise there are some minor breaking changes described below.

The Problem

@rschwabco
rschwabco / ng-hide-animation-mixin.scss
Created May 22, 2014 19:03
Ng-hide animation Sass Mixin
@mixin angular-animate-hide($duration,$property,$easing,$min-val,$max-val){
transition :$duration $property $easing;
&.ng-hide-add,&.ng-hide-remove{
display: block !important;
#{$property}: $min-val;
}
&.ng-hide-remove.ng-hide-remove-active{
#{$property}: $max-val;
@leoasis
leoasis / marionette_rivets.js
Last active March 7, 2019 16:00
React vs Marionette + Rivets
var List = Backbone.Marionette.CollectionView.extend({
itemView: Item,
tagName: 'ul'
});
var Item = Backbone.Marionette.ItemView.extend({
tagName: 'li',
template: function(data) {
return '<span rv-text="model.name"></span><p rv-text="model.description"><p>';
},
@demisx
demisx / angularjs-providers-explained.md
Last active March 17, 2024 11:09
AngularJS Providers: Constant/Value/Service/Factory/Decorator/Provider
Provider Singleton Instantiable Configurable
Constant Yes No No
Value Yes No No
Service Yes No No
Factory Yes Yes No
Decorator Yes No? No
Provider Yes Yes Yes

Constant

@sanderhahn
sanderhahn / gulpfile.js
Last active September 11, 2019 14:45
Minify and templateCache your Angular Templates using Gulp
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var templates = require('gulp-angular-templatecache');
var minifyHTML = require('gulp-minify-html');
// Minify and templateCache your Angular Templates
// Add a 'templates' module dependency to your app:
// var app = angular.module('appname', [ ... , 'templates']);