Cole Turner coleturner

TIL, that Safari will render your text as empty when using Flexbox as a child.

Take the following HTML:

<div class="parent">
   <div class="child">Gradient color text!</div>
</div>

Demo

Context

useViewportScroll is a great way to create a parallax effect as the page scrolls. In some cases however, we only want to scroll when an element is in the viewport area.

So for example, if we have a "landscape" scene, and want to animate the Sun object only when it's in view, we start with our useViewportScroll implementation:

function Sun(props) {
 const { scrollY, scrollYProgress } = useViewportScroll();

Context

I ran into an issue where my component was not updating when trying to use framer-motion for a parallax effect. After debugging framer-motion, I found that it was not updating the scrollYProgress value because "maxYOffset" was set to 0. This special parameter is derived by framer-motion, using the following calculation:

document.body.clientHeight - window.innerHeight

Weird, I thought. My document is definitely scrolling. When I checked document.body.scrollHeight, it looked fine. But why was document.body.clientHeight less than document.body.scrollHeight, especially if scrolling is what I care about?

GraphQL Working Group – March 22, 2018

Introductions Agenda Recap Update on next spec release

In last meeting, SDL was the last blocker for next version of the spec
Identified compelling blocker: default values and null
Question: about timeframe between releases
This release is special, a lot of new releases

	import PropTypes from 'prop-types';
	import React from 'react';
	import imagesLoaded from 'imagesloaded';
	import Isotope from 'isotope';
	import classNames from 'classnames';

	export default class IsotopeContainer extends React.PureComponent {
	static propTypes = {
	children: PropTypes.node.isRequired,
	itemSelector: PropTypes.string.isRequired,

	// ==UserScript==
	// @name Distractions
	// @version 0.1
	// @description redirects to github issues
	// @author You
	// @include .reddit.
	// @include .imgur.
	// @run-at document-start
	// @grant none
	// ==/UserScript==

	// Moves the menu bar to the right, moving code to the left window boundary
	"workbench.sideBar.location": "right",
	// Install prettier and run on save
	"editor.formatOnSave": true,
	// Drag and drop can get annoying after a while, but now I move things accidentally so ¯\_(ツ)_/¯
	"explorer.confirmDragAndDrop": false,
	// Disable JavaScript validate, prefer ESLint
	"javascript.validate.enable": false,
	// Verbose Eslint is good eslint
	"eslint.trace.server": "verbose",

	// graphql/types/Animal/Animal.test.js

	import * as AnimalResolvers from './Animal.resolvers.js';

	export const animalNameTest = () => {
	const obj = {
	kind: 'Dog',
	name: 'Koko',
	breeds: ['Corgi', 'German Shepherd']
	};

	import {
	makeExecutableSchema,
	addMockFunctionsToSchema,
	mockServer
	} from 'graphql-tools';

	const testCaseA = {
	id: 'Test case A',
	query: `
	query {