Skip to content

Instantly share code, notes, and snippets.

@Restuta
Restuta / HOC.js
Last active May 26, 2024 20:01
React HOC (Higher Order Component) Example
/* HOC fundamentally is just a function that accepts a Component and returns a Component:
(component) => {return componentOnSteroids; } or just component => componentOnSteroids;
Let's assume we want to wrap our components in another component that is used for debugging purposes,
it just wraps them in a DIV with "debug class on it".
Below ComponentToDebug is a React component.
*/
//HOC using Class
//it's a function that accepts ComponentToDebug and implicitly returns a Class
let DebugComponent = ComponentToDebug => class extends Component {
@wtfil
wtfil / index.js
Last active July 7, 2017 16:55
injection of redux's dispatch in react-router's onEnter hook
/*
* common react, redux staff here
*/
import {Router, createRoutes} from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import rawRoutes from './routes';
import store from './store';
function mixStoreToRoutes(routes) {
return routes && routes.map(route => ({
# migrating from https://github.com/robbyrussell/oh-my-zsh/blob/master/plugins/git/git.plugin.zsh
# Aliases
alias g='git'
#compdef g=git
alias gst='git status'
#compdef _git gst=git-status
alias gd='git diff'
#compdef _git gd=git-diff
alias gdc='git diff --cached'
@gokulkrishh
gokulkrishh / media-query.css
Last active April 22, 2025 04:29
CSS Media Queries for Desktop, Tablet, Mobile.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
/* CSS */
@gaearon
gaearon / slim-redux.js
Last active December 3, 2024 06:34
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
}
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
@voluntas
voluntas / webrtc.rst
Last active March 28, 2025 06:01
WebRTC コトハジメ
@paulirish
paulirish / what-forces-layout.md
Last active April 19, 2025 04:59
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@kolodny
kolodny / actions.js
Last active May 17, 2018 18:42
testing redux thunk middleware
export const doTheThing = () => (dispatch, getState) => {
const users = getState();
dispatch({
type: 'THE_THING',
users,
});
};
@tetsuharuohzeki
tetsuharuohzeki / rx_for_js_matomme.md
Last active August 4, 2018 06:46
RxJSのいろいろ雑感(2015年8月末編)

RxJSのいろいろ雑感(2015年8月末編)

  • Rx for JavaScriptについて、色々触った結論としてはこんな感じ
    • あくまでも現時点の感想なんで、そのうち認識が変わるかも
  • JavaScriptでRxを使う人ターゲットなんで、他の言語portにも効く話かはわからない

総論

気をつけること