Skip to content

Instantly share code, notes, and snippets.

View OliverJAsh's full-sized avatar

Oliver Joseph Ash OliverJAsh

View GitHub Profile
@OliverJAsh
OliverJAsh / inheritance.css
Created June 21, 2014 13:12
CSS tooling: implicit style dependencies

I see this quite often in CSS: something doesn't look right, so we apply some new styles on our class to make it look right.

Instead we need to review what the current styles are, and where they come from – another class (composition) or inheritance. If you’re changing the font-family style, for example, you should have a look to see what might be currently setting that property in the styles pane, and identify how it’s cascading to this element. It may be that you can remove it from a parent element, or you might need to override it with a class. Without reviewing the code is this way, you CSS codebase can easily become bloated with style overrides.

Chrome DevTools makes reviewing the cascade very easy with its styles pane. However, when you look at some CSS code in your IDE, it’s not at all explicit what styles will be inherited or applied through composition. This means we have to have strong discipline in documenting our CSS – where you’re unsetting or resetting a style that is inherited, you might le

@OliverJAsh
OliverJAsh / TODO
Created July 25, 2014 12:16
Virtual DOM experiment for Scribe
Broken deps:
* vdom => global
* global => min-document
@OliverJAsh
OliverJAsh / gist:bcc676e381a06dbb3be0
Created October 28, 2014 11:34
webpack experiment and comparison against jspm

webpack: http://webpack.github.io/ jspm: http://jspm.io/

Nice introduction presentation: http://peerigon.github.io/presentations/2014-07-09-MNUG-webpack/

The watch seems intelligent in that it might be tracing the dependency graph. In my test case it seems to, at least. AMD and CommonJS modules are supported out of the box. In my test I was unable to get es6-loader working (see commit in link below).

Unlike jspm, it's not a registry. Instead it resolves dependencies from node_modules (i.e. npm) by default (like browserify), although according to this tutorial it's trivial to configure which directories the module resolver should read from.

@OliverJAsh
OliverJAsh / README.md
Last active August 29, 2015 14:08
longjohn interoperability with Traceur call stacks
npm install
node traceur-runner.js main.js
@OliverJAsh
OliverJAsh / README.md
Created October 30, 2014 11:56
jspm test
jspm install
npm i http-server
./node_modules/.bin/http-server -c-1 -o -p 8081
@OliverJAsh
OliverJAsh / README.md
Created October 30, 2014 16:31
Traceur error
npm install
./node_modules/.bin/traceur --out out.js test.js

node main.js
@OliverJAsh
OliverJAsh / foo.md
Last active August 29, 2015 14:08
API question

POST /feeds

{ "url": "<feedURL>" }

Description: Creates a feed from <feedUrl> by making a HTTP request to the feed URL and saving it to the database.

This operation will fail if (in order):

@OliverJAsh
OliverJAsh / foo.js
Created November 12, 2014 14:46
DI: Car -> Engine
/* jshint esnext: true */
import * as di from 'di/src';
class Car {
constructor(engine) {
console.log('Car constructor engine: %s', engine);
}
}
// TODO: Fix ES6 class annotations
// As per: https://github.com/angular/di.js/issues/80
@OliverJAsh
OliverJAsh / foo.js
Created November 12, 2014 14:55
DI: ApiClient -> HttpAdapter
/* jshint esnext: true */
import * as di from 'di/src';
class HttpAdapter {
constructor() {
console.log('HttpAdapter constructor');
}
}
class ApiClient {
@OliverJAsh
OliverJAsh / README.md
Created November 13, 2014 09:17
longjohn interoperability with Traceur call stacks
npm install
node traceur-runner.js main.js