norbert norbert-codes

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

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:

Code of Conduct

Our mission is to foster connections among content professionals who are interested in creating more ethical and inclusive user experiences together. Sharing of content and personal projects related to our mission is acceptable and encouraged.

The Ethical Content Slack group is dedicated to providing a harassment-free experience for everyone. We do not tolerate harassment of participants in any form.

This code of conduct applies to every member of the Ethical Content Slack group. Anyone who violates this code of conduct may be sanctioned or expelled from the Ethical Content Slack group at the discretion of the admin team.

Ethical Content Slack group members are responsible for knowing and abiding by these rules.

🐻 valoo

just the bare necessities of state management.

Usage

Hotlink it from https://unpkg.com/valoo.

See Interactive Codepen Demo.

Upload Files to Google Drive using Javascript

News

At October 11, 2019, I published a Javascript library to to run the resumable upload for Google Drive. When this is used, the large file can be uploaded. You can also use this js library.

Description

This is a sample script for uploading files to Google Drive using Javascript. The files are uploaded by Drive API v3. gapi.client.drive.files.create() can create an empty file on Google Drive. But it cannot directly upload files including contents. I think that this might not be able to upload files and metadata with the multipart/related, although this might be resolved by the future update. So now, as one of workarounds, I use using XMLHttpRequest.

This sample uses gapi.
Before you use this, please enable Drive API at API console and carr

	// Elements with `data-observe` toggle `data-visible`
	// between `true` and `false`

	if ('IntersectionObserver' in window) {
	const callback = (entries, observer) => {
	entries.forEach(entry => {
	entry.target.setAttribute('data-visible', entry.isIntersecting)
	})
	}

	import App from './components/app';
	import { h, render } from 'preact';
	import { default as renderToString } from 'preact-render-to-string';
	import { ServerStyleSheet } from 'styled-components'

	if(typeof window === undefined) {
	const sheet = new ServerStyleSheet()
	const html = renderToString(sheet.collectStyles(<App />))
	const styleTags = sheet.getStyleTags() // or sheet.getStyleElement()
	}