Skip to content

Instantly share code, notes, and snippets.

Avatar
🍉
Hey there! I am using GitHub.

Matteo Mazzarolo mmazzarolo

🍉
Hey there! I am using GitHub.
View GitHub Profile
@mmazzarolo
mmazzarolo / service-workers.md
Last active Oct 3, 2020
Service Workers Tips
View service-workers.md

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
mmazzarolo / ffmpeg_resize.sh
Created Sep 6, 2020
Resize videos keeping the aspect ratio (shows black bar padding where needed)
View ffmpeg_resize.sh
#!/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
mmazzarolo / disable-people-also-search-for-google.md
Created Apr 25, 2020
Disable "People also search for" in Google results
View disable-people-also-search-for-google.md

Disable "People also search for" in Google results

In uBlock origin, add:

https://www.google.*/xjs/*
@mmazzarolo
mmazzarolo / scale.ts
Last active Dec 23, 2019
React-Native metrics scaling
View scale.ts
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
mmazzarolo / SkippableSplash.tsx
Created Dec 7, 2019
Skipping the splash screen in Ordinary Puzzles
View SkippableSplash.tsx
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
mmazzarolo / colors.ts
Created Dec 1, 2019
Ordinary Puzzles grayscale palette
View colors.ts
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
mmazzarolo / elevations.ts
Last active Oct 19, 2020
React-Native cross platform elevation definitions
View elevations.ts
/**
* 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
mmazzarolo / useAnimation.ts
Last active Jan 1, 2021
A basic "useAnimation" hook for React-Native animations
View useAnimation.ts
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
mmazzarolo / useObservableAnimation.js
Created Nov 13, 2019
Animate React-Native components based on MobX observables changes
View useObservableAnimation.js
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
mmazzarolo / store.ts
Last active Nov 10, 2019
Puzzle Game logic
View store.ts
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) => {