Skip to content

Instantly share code, notes, and snippets.

@kof
kof / detect-rendered-css.js
Created May 28, 2017
Detect Rendered CSS using a probe container.
View detect-rendered-css.js
// 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%}' +
@kof
kof / StyledButton.js
Last active Mar 22, 2017
Styled Primitive Components with JSS
View StyledButton.js
import {styled} from 'react-jss-components'
const RedButton = styled('button', {
color: 'red'
})
<RedButton>Click me</RedButton>
@kof
kof / MyComponent.js
Last active Nov 7, 2016
When to use functional components.
View MyComponent.js
const Title = ({children}) => (
<div className={classes.titleContainer}>
<span className={classes.titleIcon} />
<h3 className={classes.titleHeadline}>
{children}
</h3>
</div>
)
@kof
kof / react-inline-styles.md
Last active Apr 5, 2016
React inline style rendering
View react-inline-styles.md

Rendering a style update

  1. Unset previous props.

Iterate over lastStyle and copy keys into styleUpdates with empty string as a value in order to "unset" them when they are missing in the next style version.

  1. Find modified props.

Iterate over new style and copy modified keys only into styleUpdates.

View dpi.css
/******************************************************************************
* Screens DPI
* @see
* http://developer.android.com/guide/webapps/overview.html
* http://developer.android.com/guide/practices/screens_support.html
*****************************************************************************/
/*mdpi*/
@media (-webkit-min-device-pixel-ratio : 1) and (min-width: 320px), (min-device-pixel-ratio : 1) and (min-width: 320px) {
body {zoom: 0.5 !important;}
View mongoose-test.js
var m = require('mongoose'),
fs = require('fs'),
http = require('http');
m.connect('mongodb://localhost/test');
var ObjectId = m.Types.ObjectId;
var UserModel = m.model('user', require('./userSchema', {strict: false}));
var data = { "birthday" : Date("1981-09-21T00:00:00Z"), "email" : "aaaaa@bbbbbb.com", "firstName" : "Hannes", "lastIpAddr" : "138.188.103.139", "lastName" : "Gassert", "likedSkim" : true, "locale" : "en_US", "nick" : "Hannes", "relationshipStatus" : "In a Relationship", "urlName" : "han", "coins" : 550, "marketValue" : 63, "currentLocale" : "en-us", "sports" : [ ], "schools" : [ { "id" : "109924452370813", "name" : "Gymnasium Leonhard", "_id" : ObjectId("517fc1e66d19040200004fb7") }, { "id" : "107967209224731", "name" : "University of Fribourg", "_id" : ObjectId("517fc1e66d19040200004fb6") }, { "id" : "109414082410185", "name" : "National University of Ireland, Galway", "_id" : ObjectId("517fc1e66d19040200004fb5") } ], "jobs" : [ { "id" : "1602115006654
View jss-es6-example-1.js
export default {
input: {
display: 'inline-block',
width: '100%',
height: '100%',
lineHeight: 0
},
browser: {
position: 'absolute',
width: '100%',
@kof
kof / decorated-component.js
Last active Oct 10, 2015
React component without extends.
View decorated-component.js
import {component} from 'react'
@component
export default class MyComponent {
componentDidMount() {
}
render() {
}
}
@kof
kof / bootstrap.js
Created Mar 30, 2011
bootstrap file for mongoose models
View bootstrap.js
var fs = require('fs'),
m = require('mongoose');
fs.readdirSync(__dirname).forEach(function(filename) {
var schamaName = filename.replace(/\.js$/, ''),
Schema = require('./' + schemaName);
m.model(schemaName, Schema);
});
@kof
kof / inherits.js
Created Mar 24, 2011
nodejs like utility method for inheritance
View inherits.js
/**
* Inherit prototype properties
* @param {Function} ctor
* @param {Function} superCtor
*/
_.mixin({
inherits: (function(){
function noop(){}
function ecma3(ctor, superCtor) {