SaFrMo

Contents

1. object-fit: contain
2. object-fit: cover

object-fit: contain

Problem: we have:

• image with dimensions vec2 imageDimensions
• container with dimensions vec2 containerDimensions

SaFrMo

/**
 * Get the host of the this script. The host will be used for posting the data.
 */
var getHost = function () {
    var scripts = document.getElementsByTagName("script");
    var i;
    for (i = 0; i < scripts.length; i++) {
        var urlAttribute = scripts[i].attributes.getNamedItem("src");
        if (urlAttribute) {
            var url = urlAttribute.nodeValue;

SaFrMo

Some NPM packages I've written or contributed to:

1. auto-blur - Blur a button or other element automatically when clicked.
2. blast-vanilla - Vanilla version of Blast.js. Blast text apart to make it manipulable.
3. fh-components - Reusable Vue + Vuepress components.
4. fh-deploy - Deploy files to a server via SFTP.
5. sketch-outline - Outline a element in Vue on focus or hover using the hand-drawn style of roughjs.
6. zoomhaus - Medium-like vanilla JS image takeover effect.

Phaser packages

SaFrMo

// catch newsletter button - any link with `#newsletter` triggers the callback
window.addEventListener('click', evt => {

    if( evt.target && event.target.href && typeof evt.target.href == 'string' && event.target.href.indexOf('#newsletter') != -1 ){
        evt.preventDefault()
        // YOUR ACTION HERE...
    }
})

// keys!

SaFrMo

<template>

    <main class="content home"></main>

</template>

<script>
    export default {}
</script>

SaFrMo

Transition Steps

1. Front page
   1. Switch Front Page > Rooms to Rooms v2
   2. Remove extra content from children of Rooms
   3. Switch Callouts to Rooms v2 template
   4. Remove extra content from children of Callouts
   5. Switch "Dining & Entertainment" to Landscape Slideshow template
   6. Add content to children of "Dining & Entertainment"
   7. Add custom gallery to front page
2. Menus

SaFrMo

Work Detail

• On work-detail pages, credits below the video are set up like this:

  <span class="credit">
    <span>Director</span>
    <span>Traktor</span>
  </span>
  
  <span class="credit">
    <span>Production Company</span>
  

SaFrMo

Keybase proof

I hereby claim:

• I am safrmo on github.
• I am safrmo (https://keybase.io/safrmo) on keybase.
• I have a public key ASBu-WO-xxfU6n0lkWsmHwlyGp3X2eba7iBHO70mLul_uwo

To claim this, I am signing this object:

SaFrMo

1. Vuepress: Vue.js on top of WordPress
2. fitToParent: Vanilla JS to resize a DOM element to fit its parent container while maintaining original aspect ratio
3. Zoomhaus: Vanilla JS+CSS smooth image takeover effect
4. Rest-Easy: WordPress plugin to rest-ify your site with zero effort and powerful customization
5. FH-Footer: Self-updating slide-to-reveal footer in vanilla JS
6. FH-Overlap: Simple overlap checker in vanilla JS
7. funky-colors: WordPress plugin to detect a palette of colors from each image in the media library
8. Funky-Imgix: WordPress plugin to get Imgix images easily
9. WP-Shopify: WordPress plugin for easy Shopify integrat

SaFrMo

Notes

• Add a child to a work-detail page to make it a campaign - the campaign's body will be in the child
• Maria Carretero page has a few special details:
  • "Color" category is structured like this:

    * Color
        * Maria Carretero
            * First Block Title - Second Block Title
            * Other Spots
    

• ...