jdnichollsc

Useful Phrases

Clarification

• What does that mean?
• How does it work?
• How long does it take?
• Could you say that again, please?

Collaboration

• When will the next meeting be?

jdnichollsc

• Planets - https://codepen.io/srekoble/pen/RLpNVJ
• Analog Clock - https://codepen.io/JavaScriptJunkie/pen/gOYvPMv
• Full Moon - https://codepen.io/negarjf/pen/zYGjLrW
• Electricity - https://codepen.io/noeldelgado/pen/NPGmRO
• Hacking theme - https://codepen.io/yashbhardwaj/pen/KyEqn
• Galaxy - https://codepen.io/Momciloo/details/YEwzRQ
• Rotating is the answer - https://codepen.io/schoenwaldnils/pen/ZQrvpx
• Hexagons:
  • https://codepen.io/ZachSaucier/details/ByfkH

• https://codepen.io/thehache/pen/QNYPxP

jdnichollsc

Mentores

Docs

• https://docs.codeyourfuture.io
• Resumen perfil CYF
• Class materials
• Docs Mentores 2020
• Proceso de aplicación para estudiantes

Calendario

jdnichollsc

TODO

• Inicio, qué es Proyecto 26?
• Dibujando en WebGL/Canvas (IonPhaser)
• Animaciones en React Native (Newbies)
• SQLite en mobile (Ionic, React Native, etc)
• Code sharing (Ionic, NativeScript) for Web, PWA, Mobile
• Requests HTTP en Unity (RestClient)
• REST APIs para juegos
• Requests http, observables, cancelación, etc

jdnichollsc

import { join } from 'path'
import { get } from 'lodash'
import { Storage } from '@google-cloud/storage'
import { BUCKET_NAME } from '../constants'
import { base64MimeType } from '../utils'

const gcloudPathKey = join(__dirname, '../gcloud-key.json')

const storage = new Storage({
  projectId: 'my-project-id',

jdnichollsc

import { Component, h } from '@stencil/core';
import { createAnimatableComponent } from '@proyecto26/animatable-component'

const HelloWorldButton = (props) => {
  const { iconName, ...rest } = props
  return (
    <ion-fab-button onClick={() => alert('Hello World')} {...rest}>
      <ion-icon name={iconName || 'home'} />
    </ion-fab-button>
  )

jdnichollsc

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

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

<!-- 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

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'