JoeyBurzynski

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

developit

tracked

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

stramel

/*
TODO:
X Maybe account for defaults: color: var(--header-color, blue);
- Verify cross domain working or not (it is working from dropbox)
- Option to wait to apply anything until all <link>s are parsed or inject what we have and update as each <link> returns
- Need to test on a more complex CSS file
- Option to save parsed file in local/session storage so there isn't a delay on additional page loads. Could only do it for links (with URLs to use as keys) and style blocks with IDs of some sort
- Need to test more complex values like rgba(255,0,0,0.5); and something with !important
- Try multiple links
- Local links

gaearon

/*
  This replaces <Sequencer> + multiple <Sampler>s with a marble diagram sequencer.
  You can use it like this:

      <Marble
        resolution={16}
        samples={[
          'samples/kick.wav',
          'samples/snare.wav',
        ]}

didierfranc

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/hotReload'

Jxck

// Reference
// http://tools.ietf.org/html/rfc6455
// http://www.w3.org/TR/2011/WD-websockets-20110929/
// https://github.com/einaros/ws
// https://github.com/Worlize/WebSocket-Node
// http://ja.wikipedia.org/wiki/WebSocket
// http://www.slideshare.net/You_Kinjoh/javascript-websocket P.68
// http://d.hatena.ne.jp/gtk2k/20120203/1328274962

var log = console.log.bind(console);