Skip to content

Instantly share code, notes, and snippets.

@alex35mil
alex35mil / chrome.bookmarklet.js
Created August 7, 2015 15:25
Github’s diffs & Whitespaces
// Bookmarks Bar -> Add Page…
// URL:
javascript:(function(){var p=document.location.search,r=/\&?w=1/;document.location.search=p?p.match(r)?p.replace(r,''):p+'&w=1':'?w=1'})()

toJS perf check

[ DEMO ]

  • Form state is in the redux store
  • I removed all toJS calls from selectors, so components deal w/ immutable objects
  • Perf.start triggered on form state update (w/ value 1)
  • Perf.stop — when this update is flushed to the DOM

Numbers from gif

@alex35mil
alex35mil / Button.jsx
Created October 14, 2016 13:18
Get rid of focus after click
const Button = ({ onClick, ...otherProps }) => {
let domNode;
return (
<button
{...otherProps}
ref={ref => (domNode = ref)}
onClick={event => {
if (onClick) onClick(event);
domNode.blur();
}}
:root {
--button: {
background-color: var(--bg-color);
color: var(--text-color);
}
}
.blueButton {
--bg-color: blue;
--text-color: #fff;
@alex35mil
alex35mil / eslint.comma-dangle.rest.js
Created December 7, 2016 06:23
Eslint comma-dangle w/ rest/spread operators
/* eslint comma-dangle: ["error", "always-multiline"] */
// rest
/* ok */
const rest = ({
prop,
...otherProps
// ^
// no comma
@alex35mil
alex35mil / gh.whitespaces.bookmarklet.js
Created January 11, 2017 12:21
Bookmarklet to ignore whitespaces on GitHub
// Chrome -> Bookmarks Bar -> Add Page…
// Paste this in URL field:
javascript:(function(){var p=document.location.search,r=/\&?w=1/;document.location.search=p?p.match(r)?p.replace(r,''):p+'&w=1':'?w=1'})()
@alex35mil
alex35mil / 1-wrong-action-handler-arg.js
Created February 21, 2017 04:48
Common mistakes in redux parts
const selectEntity = entityId => ({
type: ENTITY_SELECT,
entityId,
});
const onEntitySelect = {
[ENTITY_SELECT]: (state, { id }) => state.set('id', id),
// ^
// oops, `entityId` was dispatched
};
/* interactions/modalToggle.js */
const MODAL_SHOW = 'MODAL_SHOW';
const MODAL_HIDE = 'MODAL_HIDE';
// --- Show modal
// Action creator
export const showModal = () => ({ type: MODAL_SHOW });
/* reducer.js */
import state from './state';
import { onModalShow, onModalHide } from './interactions/modalToggle';
// ...
export default createReducer(state, {
...onModalShow,
...onModalHide,
// Action creator: dispatched from the thunk or whatever
const successAction = (entityId, data) => ({
type: UPDATE_SUCCEEDED,
entityId,
data,
});
// Changes in the app state:
// Action handler -> ui/unitStore: resetting UI unit state