Michele Bertoli MicheleBertoli

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

With styled-components into the future

Preprocessing is dead, long live preprocessing!

This is a CFP for ReactiveConf 2017's open call for Lightning talks. If you'd like to see this talk become a reality, please ⭐ star this gist. #ReactiveConf

This is a lightning talk proposal for ReactiveConf 2017: https://reactiveconf.com/

The Curious Case of Monorepos

Monorepos have often stigmatized as bad practice and as such something that should be avoided. Still, big companies like Facebook, AirBnB and Google are actively using monorepos to manage their projects. In the open source world, monorepos have become more popular with Babel being the most prominent example. We'll dive into why monorepos might have this bad reputation and go into where it makes sense to have monorepos, talk about their advantages and their shortcomings. We'll also look into what tooling solutions are available - especially in a JavaScript context.

Choosing a CSS in JS library

Check comments below, this is only my opinion and a choice specific to my use case

We've architected a SPA to be universal-ready. It grew a lot, when we introduced code splitting we realised converting to CSS in JS was unavoidable in order to have pre-rendering and not load all our CSS up front. We've procrastinated on looking at CSS in JS properly, prioritasing immediate business needs, but kept an eye on industry evolutions.

Our CSS solution for components was a CSS companion file per component, imported with style / postCSS loader (with webpack) but no CSS modules: we were missing a tighter coupling between component rendering and styles. We were at the bottom of the CSS and componentization ladder, the following links have influenced us in choosing the right solution for us:

Christopher Chedeaux, 2015, "CSS in JS" https://speakerdeck.com/vjeux/react-css-in-js
Mark Dagleish, 2015, "The case for CSS modules" https://www.youtube.com/watch?v=zR1lOuyQEt8

	// This is _not_ supposed to be a real API. It's only intended to describe what
	// I'm looking for. It's almost intentionally awful.

	export const buttonHook = new OverrideHook({
	properties: ['margin'],
	});

	export default function Button(props) {
	return (
	<button

	<script>
	window.Promise \|\| document.write('<script src="https://unpkg.com/[email protected]/dist/es6-promise.min.js"><\/script>');
	window.fetch \|\| document.write('<script src="https://unpkg.com/[email protected]/fetch.js"><\/script>');
	</script>

	// Usage:
	//
	// function loader() {
	// return new Promise((resolve) => {
	// if (process.env.LAZY_LOAD) {
	// require.ensure([], (require) => {
	// resolve(require('./SomeComponent').default);
	// });
	// }
	// });

	// paste this to chrome console on anybody's twitter page
	// and it'll turn into an instant presentation :)

	(function TweetPresent() {
	const presenter = $(`<div id="tpd" style=" position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; padding: 10vh 10vw; box-sizing: border-box; background-color: white; font-size: 5vw; text-align: center; z-index: 9999; display: flex; align-items: center; justify-content: center;"></div>`);
	const tweets = $$(`div.tweet p.js-tweet-text`)
	.map(el => el.innerHTML)
	.map(t => ({t, s: Math.random()}))
	.sort((a, b) => a.s > b.s ? -1 : 1)
	.map(c => c.t);

	// This allows you to benchmark CSSinJS libs after styles have been really applied.

	function detectCSSRendered(className, callback) {
	const probe = document.createElement('div')
	probe.style.visibility = 'hidden'
	probe.className = className
	var style = document.head.appendChild(document.createElement('style'))
	style.textContent = '' +
	'@keyframes probe-animation {' +
	' from {left: 20%}' +