Skip to content

Instantly share code, notes, and snippets.

View yesvods's full-sized avatar
💭
Getting things done.

Jogis yesvods

💭
Getting things done.
View GitHub Profile
const handler = {
get(target, propKey, receiver) {
if (/^_[0-9]+$/.test(propKey)) {
const result = [];
const first = Number(receiver);
const last = Number(propKey.slice(1));
for (let i=first; i<=last; i++) {
result.push(i);
}
return result;
@smeijer
smeijer / parse-es6-template.js
Last active March 13, 2024 07:53
ES6 template string parser
function get(path, obj, fb = `$\{${path}}`) {
return path.split('.').reduce((res, key) => res[key] || fb, obj);
}
function parseTpl(template, map, fallback) {
return template.replace(/\$\{.+?}/g, (match) => {
const path = match.substr(2, match.length - 3).trim();
return get(path, map, fallback);
});
}
@stereokai
stereokai / gist:36dc0095b9d24ce93b045e2ddc60d7a0
Last active March 25, 2024 03:22
CSS rounded corners with gradient border
.rounded-corners-gradient-borders {
width: 300px;
height: 80px;
border: double 4px transparent;
border-radius: 80px;
background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
background-origin: border-box;
background-clip: padding-box, border-box;
}
@bcoe
bcoe / npm-top.md
Last active March 23, 2024 20:02
npm-top.md

npm Users By Downloads (git.io/npm-top)


npm users sorted by the monthly downloads of their modules, for the range May 6, 2018 until Jun 6, 2018.

Metrics are calculated using top-npm-users.

# User Downloads
@aldendaniels
aldendaniels / alternative-to-higher-order-components.md
Last active October 6, 2018 09:50
Alternative to Higher-order Components

React now supports the use of ES6 classes as an alternative to React.createClass().

React's concept of Mixins, however, doesn't have a corollary when using ES6 classes. This left the community without an established pattern for code that both handles cross-cutting concerns and requires access to Component Life Cycle Methods.

In this gist, @sebmarkbage proposed an alternative pattern to React mixins: decorate components with a wrapping "higher order" component that handles whatever lifecycle methods it needs to and then invokes the wrapped component in its render() method, passing through props.

While a viable solution, this has a few drawbacks:

  1. There's no way for the child component to override functionality defined on the higher order component.
@koba04
koba04 / .gitignore
Last active December 21, 2018 02:21
karma + mocha + browserify + babel + power-assert
node_modules/
@neilcarpenter
neilcarpenter / gist:8979ea9ed91b10e36af9
Created March 5, 2015 11:03
Enable Emmet in .JSX files, using Babel JSX Syntax highlighter
// add to Preferences > Key Bindings - User
// see http://stackoverflow.com/a/26619524 for context
{ "keys": ["tab"], "command": "expand_abbreviation_by_tab",
"context": [
{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
@ShirtlessKirk
ShirtlessKirk / performance-timing.js
Last active February 12, 2024 00:32
Performance timing polyfill
/**
* performance-timing.js: Polyfill for performance.timing object
* For greatest accuracy, this needs to be run as soon as possible in the page, preferably inline.
* The values returned are necessarily not absolutely accurate, but are close enough for general purposes.
* @author ShirtlessKirk. Copyright (c) 2014.
* @license WTFPL (http://www.wtfpl.net/txt/copying)
*/
(function (window) {
'use strict';
@sebmarkbage
sebmarkbage / Enhance.js
Last active January 31, 2024 18:33
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() {
@gaearon
gaearon / createAsyncPage.jsx
Last active April 25, 2023 09:06
Webpack's async code splitting with React Router
'use strict';
var React = require('react');
function createAsyncHandler(getHandlerAsync, displayName) {
var Handler = null;
return React.createClass({
displayName: displayName,