marcus-at-localhost

Mind the Gap - CSS Grid Hide a Column

Depending on how the CSS grid is set up, you can't just hide a column and reflow the rest of the grid. If the column has a fixed with, the space is preserved, if the column width is 0 after hiding the grid gap adds up. The only way to fix it is to reflect the changes in the grid template.

A Pen by Marcus Obst on CodePen.

License.

stevecastaneda

// http://reactcommunity.org/react-transition-group/transition
// http://reactcommunity.org/react-transition-group/transition-group

import React, { ReactNode } from "react";
import { Transition as ReactTransition } from "react-transition-group";

interface TransitionProps {
  in?: boolean;
  timeout: number | { appear?: number; enter?: number; exit?: number };
  enter?: string;

stevecastaneda

// Modal Source: https://tailwindui.com/components/application-ui/overlays/modals

import React, { ReactNode } from "react";
import { Transition } from "components/transition";

interface Props {
  /** The modal open/close state */
  open: boolean; 
}

GavinRay97

Introduction

This document outlines how to model a common organization-based permission system in Hasura. Let's assume that you have some table structure like the following:

Table Name	Columns	Foreign Keys
User	id, name, email
Organization User	id, user_id, organization_id	user_id -> user.id, organization_id -> organization.id
Organization	id, name

gustavwennerblom

Adding prettier to a CRA project

Previously, I've had some problem to reliaby configure code formatting with Prettier in VSCode, in the context of a create-react-app proejct. Today, it worked like a charm, and this is what I did.

Preconditions:

• react-scripts: "3.1.1"
• react: "^16.9.0"
• react-dom: "^16.9.0"
• Dirk Baeumer's ESLint VSCode extension installed and running

elijahmanor

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

OlegIlyenko

In this gist I would like to describe an idea for GraphQL subscriptions. It was inspired by conversations about subscriptions in the GraphQL slack channel and different GH issues, like #89 and #411.

Conceptual Model

At the moment GraphQL allows 2 types of queries:

• query
• mutation

Reference implementation also adds the third type: subscription. It does not have any semantics yet, so here I would like to propose one possible semantics interpretation and the reasoning behind it.

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

lttlrck

git branch -m old_branch new_branch         # Rename branch locally    
git push origin :old_branch                 # Delete the old branch    
git push --set-upstream origin new_branch   # Push the new branch, set local branch to track the new remote

paulirish

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];