necolas

/**
 * OnLayout is built upon: View (and ResizeObserver), StyleSheet
 */
 
const elementBreakpoints = {
  small: { minWidth: 200 },
  medium: { minWidth: 300 }
  large: { minWidth: 500 }
};
 

markerikson

const createMySocketMiddleware = (url) => {
    return storeAPI => {
        let socket = createMyWebsocket(url);

        socket.on("message", (message) => {
            storeAPI.dispatch({
                type : "SOCKET_MESSAGE_RECEIVED",
                payload : message
            });
        });

MoOx

pkg	download/week	issues	stars	comment
react-bootstrap ↗	235k	62	17k	bootstrap 3
material-ui ↗	160k	146	34k	full of bugs, speaking from experience
antd ↗	64k	174	26k
semantic-ui-react ↗	51k	53	6.4K
reactstrap ↗	46k	58	4k	bootstrap 4
@blueprintjs/core ↗	27k	240	9k	splitted into multiple packages
react-native-web ↗	11k	27	9kk	used at twitter.com and on react-native docs (not just mobile)
react-toolbox

igorbenic

/**
 * BLOCK: my-block
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';

yossorion

What I Wish I'd Known About Equity Before Joining A Unicorn

Disclaimer: This piece is written anonymously. The names of a few particular companies are mentioned, but as common examples only.

This is a short write-up on things that I wish I'd known and considered before joining a private company (aka startup, aka unicorn in some cases). I'm not trying to make the case that you should never join a private company, but the power imbalance between founder and employee is extreme, and that potential candidates would

bendc

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

markerikson

// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
// My basic render function structure:
function RenderLogicExample({
  someBoolean, // 1) Destructure values from `props` object
  someList,
}) {
  // 2) Declare state values
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

adactio

// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
(function (win, doc) {
    'use strict';
    if (!win.XMLHttpRequest || !win.FormData || !win.addEventListener || !doc.querySelectorAll) {
        // doesn't cut the mustard.
        return;
    }
    function hijaxForm (formElement) {
        var progressBar;

rauschma

Installing Babel

The following are a few important npm packages.

Core Babel and access to Babel:

• babel-core: the core compilation machinery and plugin infrastructure for Babel. You will rarely need to install this package, because other packages such as babel-cli have it as a dependency, meaning that it will be automatically installed when they are installed.

• babel-cli: a command line interface to Babel. It includes the following commands:

• babel-doctor detects common problems with your Babel installation.

ryanflorence

// make a "base" component
const FakeButton = (props) => (
  <div
    {...props}
    style={{
      cursor: 'default',
      border: '1px solid',
      borderRadius: '3px',
      ...props.style
    }}