Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

J.D Nicholls jdnichollsc

🏠
Working from home
View GitHub Profile
@jdnichollsc
jdnichollsc / easing-functions.md
Created Nov 25, 2019
Default Easing Functions in <animatable/> Web Component - https://proyecto26.github.io/animatable-component
View easing-functions.md
Easing Functions
"linear" "ease" "ease-in" "ease-out" "ease-in-out"
"ease-in-cubic" "ease-out-cubic" "ease-in-out-cubic"
"ease-in-circ" "ease-out-circ" "ease-in-out-circ"
"ease-in-expo" "ease-out-expo" "ease-in-out-expo"
"ease-in-quad" "ease-out-quad" "ease-in-out-quad"
"ease-in-quart" "ease-out-quart" "ease-in-out-quart"
"ease-in-quint" "ease-out-quint" "ease-in-out-quint"
"ease-in-sine" "ease-out-sine" "ease-in-out-sine"
@jdnichollsc
jdnichollsc / animations.md
Last active Nov 25, 2019
Default Animations in <animatable/> Web Component - https://proyecto26.github.io/animatable-component
View animations.md
Animations
"bounce" "flash" "jello" "pulse" "rotate"
"shake" "swing" "rubberBand" "tada" "wobble"
"heartBeat"
"bounceIn" "bounceInUp" "bounceInDown" "bounceInRight" "bounceInLeft"
"bounceOut" "bounceOutUp" "bounceOutDown" "bounceOutRight" "bounceOutLeft"
"fadeIn" "fadeInUp" "fadeInUpBig" "fadeInDown" "fadeInDownBig"
"fadeInRight" "fadeInRightBig" "fadeInLeft" "fadeInLeftBig"
"fadeOut" "fadeOutUp" "fadeOutUpBig" "fadeOutDown" "fadeOutDownBig"
@jdnichollsc
jdnichollsc / animatable-element.html
Last active Nov 25, 2019
<animatable/> with VanillaJS (Proof that Tony Stark has a heart ✵) - https://proyecto26.github.io/animatable-component
View animatable-element.html
<!-- Add Web Animations Polyfill :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>
<script type="module" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.js"></script>
<animatable-component autoplay iterations="3" animation="heartBeat" easing="ease-in" duration="1000">
<h1>Proof that Tony Stark has a heart ✵</h1>
</animatable-component>
@jdnichollsc
jdnichollsc / record-audio.ts
Last active Jul 17, 2021
Record audio (Cordova/Ionic) using cordova-plugin-media and cordova-plugin-file
View record-audio.ts
import { Media, MediaObject } from '@ionic-native/media';
import { File as NativeFile, FileEntry } from '@ionic-native/file';
import { delay, getBlobFromFileEntry } from './utils'
// Detect platform device and select extension (Cordova platform, etc)
// Android
const AUDIO_EXTENSION = '.mp3'
// iOS
const AUDIO_EXTENSION = '.m4a'
View hammerjs.ts
import Hammer from 'hammerjs';
private manager: HammerManager;
componentDidLoad() {
this.manager = new Hammer(this.button);
this.manager.add(new Hammer.Pan({
direction: Hammer.DIRECTION_LEFT,
threshold: 0
}));
@jdnichollsc
jdnichollsc / animatable-component.html
Last active Sep 22, 2020
Animatable Components using Higher Order Component (HOC) with StencilJS 🙌 - https://proyecto26.github.io/animatable-component
View animatable-component.html
<animatable-component
autoplay
easing="ease-in-out"
duration="800"
delay="300"
animation="zoomIn"
iterations="Infinity"
direction="alternate"
>
<h1>Hello World</h1>
@jdnichollsc
jdnichollsc / README.md
Last active Jun 8, 2020
React Native plugin for Mercado Pago (Mobile Checkout)
View README.md

MercadoPago for React Native (Android & iOS)

A native bridge to use Mercado Pago SDK V4 with React Native.

import MercadoPago from 'react-native-mercado-pago';

async startPayment() {
  try {
    const publicKey = 'TEST-dc0b51e0-0eb7-47ce-b145-5585a0189eb0';
    const preferenceId = '113196323-082708db-09c3-4c7d-a65a-727e237c76e0';
@jdnichollsc
jdnichollsc / demo.js
Last active Aug 21, 2019
Hooks with React Native for realtime connection using SignalR with NetInfo and AppState for automatic reconnection
View demo.js
import React, { useEffect } from 'react'
import {
Text
} from 'react-native'
import useSignalR from './useSignalR'
import { getCounterAndToken } from '../services/api'
import { hideError, showErrorAndRetryAction } from '../services/common'
/**
* A hook for getting realtime updates of a counter
@jdnichollsc
jdnichollsc / AnimatableButton.js
Last active Feb 22, 2020
Animatable Button using Higher Order Components with React Native and react-native-animatable
View AnimatableButton.js
import React, { Component } from 'react'
import {
createAnimatableComponent,
initializeRegistryWithDefinitions
} from 'react-native-animatable'
import { Button } from 'native-base'
import { throttle } from 'lodash'
initializeRegistryWithDefinitions({
zoomInOut: {
@jdnichollsc
jdnichollsc / Commands.md
Last active Apr 12, 2019
Cordova commands
View Commands.md
  • Available ios virtual devices: cordova run ios --list --emulator

  • Available iOS Simulators: cordova emulate ios --list

  • List the available device types: ios-sim showdevicetypes

  • Build in Legacy Mode: