dimitrinicolas

Handle mouse down/up and click events once with React Hooks

The issue

Sometimes you need to make a button clickable with click and mouse down or mouse up actions.

The first solution that comes to mind would be to add only one event listener onMouseDown/onMouseUp but without an onClick event listener the element is not accessible anymore. It's now hard to click for people with disabilities or with keyboard navigation.

If we set both onMouseDown/onMouseUp and onClick event listeners, the common click handler function would be called twice with a mouse. So we have

andrzejewsky

import React, { useState } from 'react';
import cx from 'classnames';
import SliderContext from './context'
import Content from './Content'
import SlideButton from './SlideButton'
import SliderWrapper from './SliderWrapper'
import useSliding from './useSliding'
import useSizeElement from './useSizeElement'
import './Slider.scss'

shopifypartners

# Insomnia Configuration
## Run the test query
{
  shop {
    id
    name
  }
}

# Query Structure Examples

tiagogomes772

it('renders random advice', () => {
  const app = shallow(<App advice='Random Advice' fetching={false} />);
  console.log("HERE", app.debug());
  expect(app.instance().defineLabelAdvice()).toEqual('This is a random advice');
  expect(app).toMatchSnapshot();
});

it('renders input based advice', () => {
  const app = shallow(<App advice='Input Advice' fetching={false} />);

jackawatts

Getting Started

1. Install:

• jest: npm install --save-dev jest
• ts-jest: npm install --save-dev ts-jest @types/jest

2. Modify package.json

"jest": {
  "transform": {
 "^.+\\.tsx?$": "ts-jest"

wschenk

import React, {Component} from 'react'
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import AccountCircle from 'material-ui-icons/AccountCircle';

heygrady

Redux containers: mapDispatchToProps

This document details some tips and tricks for creating redux containers. Specifically, this document is looking at the mapDispatchToProps argument of the connect function from [react-redux][react-redux]. There are many ways to write the same thing in redux. This gist covers the various forms that mapDispatchToProps can take.

thegitfather

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

vasanthk

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

bahmutov

# See list of docker virtual machines on the local box
$ docker-machine ls
NAME      ACTIVE   URL          STATE     URL                         SWARM   DOCKER   ERRORS
default   *        virtualbox   Running   tcp://192.168.99.100:2376           v1.9.1 

# Note the host URL 192.168.99.100 - it will be used later!

# Build an image from current folder under given image name
$ docker build -t gleb/demo-app .