kitze

import React, { useContext } from "react";

//styles
import * as S from "./styles";
import * as A from "styles/shared-components";

//components
import Header from "components/Header";
import { AuthContext } from "components/Auth";
import SpinnerComponent from "components/Spinner";

rsms

Fixing macOS 10.14, 10.15, 12

Dark main menu without the rest of dark mode

1. Set Light mode
2. defaults write -g NSRequiresAquaSystemAppearance -bool Yes
3. Log out and log back in
4. Set Dark mode

ryanflorence

import React from "react";
import { Location } from "@reach/router";

let scrollPositions = {};

class ManageScrollImpl extends React.Component {
  componentDidMount() {
    try {
      // session storage will throw for a few reasons
      // - user settings

cathyxz

iOS restrictions re: bringing up the keyboard on programmatic focus

I can't find exact specifications on this, but it seems that iOS restricts bringing up the keyboard via programmatically focusing on <input>. It only brings up the keyboard in response to explicit user interaction.

1. iOS focus on input field only brings up keyboard when called inside a click handler.
2. It doesn’t work if the focus is async.

This presents a curious problem when you want to autofocus an input inside a modal or lightbox, since what you generally do is click on a button to bring up the lightbox, and then focus on the input after the lightbox has been opened. Without anything fancy, it actually works ok. The problem shows up when you try to add something fancy like a setTimeout or a promise.then(). I don't know why people would want to use a setTimeout here, but waiting for a promise is actually a pretty common use case. E.g. we try to batch dom manipulations like getting a lightbox to show up inside `requestAnimati

Heydon

// Elements with `data-observe` toggle `data-visible`
// between `true` and `false`

if ('IntersectionObserver' in window) {
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      entry.target.setAttribute('data-visible', entry.isIntersecting)
    })
  }
  

ryanflorence

/* eslint no-undef: 0*/
/* eslint react/jsx-no-undef: 0*/
import React from "react"

const chart = {
  id: "purchase",
  initial: "fetchingWorkshopData",
  states: {
    fetchingWorkshopData: {
      on: {

bendc

const randomInterval = (() => {
  const random = (min, max) => Math.random() * (max - min) + min;
  return (callback, min, max) => {
    const time = {
      start: performance.now(),
      total: random(min, max)
    };
    const tick = now => {
      if (time.total <= now - time.start) {
        time.start = now;                                                                                     

maddie927

import React from 'react'
import { func, node, number, object, shape, string } from 'prop-types'
import { withRouter } from 'react-router'
import debounceFn from 'lodash/debounce'

class ScrollManager extends React.Component {
  static propTypes = {
    children: node.isRequired,
    history: shape({
      action: string.isRequired,

arackaf

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var path = require('path');
var webpack = require('webpack');
var noVisualization = process.env.NODE_ENV === 'production' 
        || process.argv.slice(-1)[0] == '-p'
        || process.argv.some(arg => arg.indexOf('webpack-dev-server') >= 0);

module.exports = {
    entry: {
        main: './reactStartup.js'

nickytonline