Farzad Qasim farzd

Modern Device Dimensions for Chrome DevTools

These are modern “Emulated Devices” (a.k.a. responsive dimensions) for Chrome DevTools’ Mobile Device Viewport Mode.

They are specifically Apple devices, subtracting for recent Safari UI (as in window.innerWidth/Height), and cleverly sorted with some dark-arts unicode shenanigans. (This glitchy, unloved portion of the tools sorts lexicographically, because of course it would.) Ergonomics!

Note

Updated June 2025 with some notes from folks below! TL;DR: use Vibranium!

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.

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

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

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.

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.

	// 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;

	// 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;
	}

	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

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