kof

// 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%}' +

kitten

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

threepointone

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

jevakallio

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

lencioni

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

srdjan

100+ different js counter apps...

ryanflorence

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

taion

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

vjeux

// Solution #1: Generic Override (like CSS)

var ButtonGroup = React.createClass({
  render() {
    return <div>{this.props.buttons.map((btn, i) => 
      <Button style={{
        ...(i !== 0 && {marginLeft: 0})
        ...(i !== this.props.buttons.length - 1 && {marginRight: 0})
      }} />
    )}</div>;

marcbachmann

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 12.5,

    // font family with optional fallbacks
    fontFamily: '"Meslo LG S for Powerline", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // terminal cursor background color (hex)
    cursorColor: 'rgba(255,255,255,.4)',