Didier Franc didierfranc

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;
}

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().

	/*
	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

	/*
	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',
	]}

	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'

	// 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);

Didier Franc didierfranc

58 bytes of CSS to look great nearly everywhere

tracked

Installation