Skip to content

Instantly share code, notes, and snippets.

Giuseppe giuseppeg

Block or report user

Report or block giuseppeg

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@giuseppeg
giuseppeg / createOrderedCSSStyleSheet.js
Last active Jan 25, 2019 — forked from necolas/createOrderedCSSStyleSheet.js
OrderedCSSStyleSheet: control the insertion order of CSS
View createOrderedCSSStyleSheet.js
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
*/
type Groups = { [key: number]: Array<string> };
View react-check-on-props.jsx
function MenuButton({ children }) {
let called = false
function getButtonProps(props) {
const merged = merge({
onClick: () => {},
role: 'button',
}, props)
called = true
return merged
}
View css-in-js-tldr-pt1.md

Hi friend,

Let me try to explain CSS in JS to you. It kinda works like this:

CSS

.rule {
  property: value
}
View buttonReset.js
const span = getComputedStyle(document.querySelector('span'))
const button = getComputedStyle(document.querySelector('button'))
const diff = Object.keys(span).reduce((diff, p) => {
if (span[p] != button[p]) {
diff[p] = span[p]
}
return diff
}, {})
View _app.js
static async getInitialProps ({ Component, router, ctx }) {
let page = {}
if (Component.getInitialProps) {
page = await Component.getInitialProps(ctx)
}
const basepath = typeof window === 'undefined'
? ''
: location.pathname.slice(0, location.pathname.length - router.route.length).replace(/\/$/, '')
View component.js
/* @flow */
import React from 'react'
import messages from '../messages'
import { injectIntl } from 'react-intl'
import type { IntlShape } from 'react-intl'
type Props = {|
children: React.Node,
intl: IntlShape,
View jss-extract-babel.js
// given this
export const styles = {
test: {
color: 'red',
display: props => props.visible ? 'block' : 'none'
}
}
// rewrite to this
View pspdfkit-indexeddb-cache-sample.js
function getCache(name) {
return new Promise((resolve, reject) => {
const version = 1;
const request = indexedDB.open(name, version);
request.onsuccess = event => {
const db = event.target.result;
/*
* Returns a Promise that resolves with an object
You can’t perform that action at this time.