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>

coleturner

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();

coleturner

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?

coleturner

http://jsfiddle.net/ryh2k4xv/

coleturner

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,

coleturner

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

coleturner

// 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",

coleturner

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

coleturner

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

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

coleturner

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