mmazzarolo

Service Workers Tips

Reloading a service worker

Reloading a page won't update/remove the previous version of its service worker. To make sure you're using the latest version of your service worker, make sure to check the "Update on reload" toggle in the "Application" ⭢ "Service Workers" section of the Chrome DevTools.

Simulate a network condition

To simulate a network condition (e.g.: offline, 3g, etc...) in a service worker on Chrome, uncheck the "Update on reload" toggle.

mmazzarolo

#!/bin/bash

input="input.mp4"
output="output.mp4"
color="black"

while getopts ":i:o:w:h:c:" opt; do
  case $opt in
    i) input="$OPTARG"
    ;;

mmazzarolo

2020-06-19 update:

I just published a blog post with a few other options and info on decluttering Google's search results page.

Disabling "People also search for" box in Google search results

😡😡😡

mmazzarolo

import { PixelRatio, Dimensions } from "react-native";

const isTabletLike = () => {
  const pixelDensity = PixelRatio.get();
  const adjustedWidth = Dimensions.get("screen").width * pixelDensity;
  const adjustedHeight = Dimensions.get("screen").height * pixelDensity;
  return (
    (pixelDensity < 2 && (adjustedWidth >= 1000 || adjustedHeight >= 1000)) ||
    (pixelDensity === 2 && (adjustedWidth >= 1920 || adjustedHeight >= 1920))
  );

mmazzarolo

import React, { FC, useRef } from "react";
import { StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
import { Text } from "pg-common";
import { useAnimation, useOnMount, scale, delay } from "pg-utils";
import { animations, metrics, colors } from "pg-design";
import { credits } from "pg-config";

const asyncAnimationStart = (anim: Animated.CompositeAnimation) =>
  new Promise(resolve => anim.start(resolve));

mmazzarolo

import tinycolor from "tinycolor2";
import { useColorScheme } from "react-native-appearance";

const primaryColor = "#171520";

const palette = new Array(10).fill(primaryColor).map((color, index) =>
  tinycolor(color)
    .brighten(index * 10)
    .toString()
);

mmazzarolo

/**
 * React-Native cross-platform elevations.
 * Based on https://ethercreative.github.io/react-native-shadow-generator/
 *
 * Usage:
 * 1. Import "elevations" from this file 
 *    import { elevations } from "config/elevations";
 * 2. Use it. Assuming you need an elevation of 2 (based on the Android 
 *    elevation standard), doing the following will cast the same shadow 
 *    on both platforms:

mmazzarolo

import { useRef } from "react";
import { Animated, Easing } from "react-native";

export const useAnimation = function(initialValue: number = 0) {
  const endValue = initialValue === 0 ? 1 : 0;
  const animationValueRef = useRef<Animated.Value>(new Animated.Value(initialValue));

  const setup = (config: Partial<Animated.TimingAnimationConfig> = {}) =>
    Animated.timing(animationValueRef.current, {
      toValue: endValue,

mmazzarolo

import { useEffect, useState } from "react";
import { Animated, Text, View } from "react-native";
import { reaction } from "mobx";
import { observer } from "mobx-react";

const defaultCheckObservedValue = observed => observed.visible;

const defaultCreateAnimationIn = animValue =>
  Animated.timing(animValue, {
    toValue: 1,

mmazzarolo

import {
  LayoutRectangle,
  LayoutChangeEvent,
  GestureResponderEvent
} from "react-native";
import { createContext, useContext } from "react";
import { observable, action, computed } from "mobx";
import { takeWhile, takeRightWhile, sortBy, intersectionBy } from "lodash";

const isOppositeDirectionOf = (dir1: string, dir2: string) => {