JLarky

export function IsolateCSS(props: { children: React.ReactNode }) {
	const onceRef = useRef(false);
	const [shadowRoot, setShadowRoot] = useState<ShadowRoot>();
	const ref = useCallback((ref: HTMLDivElement | null) => {
		if (ref && onceRef.current === false) {
			onceRef.current = true;
			setShadowRoot(ref.attachShadow({ mode: 'open' }));
		}
	}, []);

jpthewes

  onFileChange(ev: any) {
    var data_uri = new String;
    // asuming that only 1 file is uploaded
    const file = ev.target.files[0];

    // Check file size
    if (file.size > <SILE_LIMIT>) {
      // do your feedback
      return;
    }

bitfishxyz

const inBrowser = typeof window !== 'undefined'

// get user agent
const UA = inBrowser && window.navigator.userAgent.toLowerCase()

// detect browser
const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge

developit

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

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

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

BanzaiMan

/* Create a Stylish style with this and apply to github.com
https://news.ycombinator.com/item?id=12110682 */
body, .intgrs-page .main-content, .blog-content, .migration-wrapper, .migrate-owners-wrapper, .setup-wrapper, .showcase-page-title, .tooltipped::after { font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; }
.markdown-body { font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; }
body { font-size: 13px !important; line-height: 1.4 !important; }
.blob-code { line-height: 1.4 !important; }

cem2ran

import React from 'react'
import ReactDOM from 'react-dom'

const Hello = ({name}) => <h1>Hello {name}!</h1>

ReactDOM.render(
  <Hello name={"vjeux"}/>,
  document.body.appendChild(document.createElement("div"))
)

varemenos

Get Git log in JSON format

git log --pretty=format:'{%n  "commit": "%H",%n  "abbreviated_commit": "%h",%n  "tree": "%T",%n  "abbreviated_tree": "%t",%n  "parent": "%P",%n  "abbreviated_parent": "%p",%n  "refs": "%D",%n  "encoding": "%e",%n  "subject": "%s",%n  "sanitized_subject_line": "%f",%n  "body": "%b",%n  "commit_notes": "%N",%n  "verification_flag": "%G?",%n  "signer": "%GS",%n  "signer_key": "%GK",%n  "author": {%n    "name": "%aN",%n    "email": "%aE",%n    "date": "%aD"%n  },%n  "commiter": {%n    "name": "%cN",%n    "email": "%cE",%n    "date": "%cD"%n  }%n},'

The only information that aren't fetched are:

• %B: raw body (unwrapped subject and body)
• %GG: raw verification message from GPG for a signed commit

kejun

var React         = require('react');
var EventListener = require('react/lib/EventListener');
var partition     = require('linear-partitioning');

var TileLayout = React.createClass({
  getDefaultProps: function() {
    return {
      gutter: 0,
      photos: []
    }