Skip to content

Instantly share code, notes, and snippets.

View johnsoncheg's full-sized avatar
🎯
Focusing

Infinity johnsoncheg

🎯
Focusing
  • eleme
  • ShangHai
View GitHub Profile
@sebmarkbage
sebmarkbage / Enhance.js
Last active June 19, 2025 19:41
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);
@fieldoffice
fieldoffice / sass-transforms
Last active September 27, 2022 17:32
Sass Transform Mixins
// Browser Prefixes
@mixin transform($transforms) {
-webkit-transform: $transforms;
-moz-transform: $transforms;
-ms-transform: $transforms;
transform: $transforms;
}
// Rotate
@mixin rotate ($deg) {
@Rich-Harris
Rich-Harris / promisify.md
Created June 2, 2014 14:19
promisify.md

Include this snippet to promisify any node function that uses the standard form:

var Promise = require( 'es6-promise' ).Promise,
    promisify;

promisify = (function ( slice ) {
	return function ( fn, context ) {
		return function () {
 var args = slice.call( arguments );
@KittyGiraudel
KittyGiraudel / SassMeister-input.scss
Created March 19, 2014 09:02
Generated by SassMeister.com.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// -----------------------------------------------------------------------------
// Introduction
// -----------------------------------------------------------------------------
// Here is hacky and experimental solution for cross-scopes extends
@KittyGiraudel
KittyGiraudel / gist:9488917
Created March 11, 2014 16:04
A question regarding Sass & Gzip

About Sass and Gzip

Hey guys! I have a question regarding Sass usage and Gzip compression. If anyone knows something, be sure to share. :)

A quick reminder

It's good practice to use Sass @extend rather than including mixins when possible because of the way Sass handles @extend. To put it simple, it doesn't take the CSS content from the extended selector to place them in the extending one. It works the other way around: it takes the extending selector and append it to the extended selector.

Placeholder

@candycode
candycode / image-arraybuffer.js
Created March 7, 2014 15:24
Create a jpg image from ArrayBuffer data
// Simulate a call to Dropbox or other service that can
// return an image as an ArrayBuffer.
var xhr = new XMLHttpRequest();
// Use JSFiddle logo as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "http://fiddle.jshell.net/img/logo.png", true );
// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";
@Integralist
Integralist / 1. Example.scss
Created October 22, 2012 14:10
Sass Mixin for CSS3 Animations
@include keyframe(fadeout) {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}