Holiday Map

four32c

Holiday Map

This holiday season, we wanted to share some of our favorite West Chelsea places with our friends and clients, so we put together a handy-dandy interactive guide as well as created a limited-edition FOUR32C holiday shopping tote to hold your holiday haul!

– FOUR32C
Background

Holiday Cheer from FOUR32C

The folks from FOUR32C reached out to me to help create an experience that could be shared to friends & clients.

logo-light
// this.blocks is an array of THREE.CSS3DObject's
const flipBlocks = (blocks = []) => {
    blocks.forEach((block, index) => {
        const { rotation } = block;
        const isX = Math.round(Math.random()) === 1;
        const tweenObj = {
            x: isX ? MathPI * 2 : rotation.x,
            y: isX ? rotation.y : MathPI * 2,
            ease: Back.easeOut,
            delay: index * 0.015
        }
        TweenMax.to(rotation, 1.4, tweenObj);
    });
}
Like butter

Smooooooth Animations

By using the Three.js CSS3DRenderer, performance for the “blocks” were easily at 60 fps.

K.I.S.S.

Page.js

Making routing super straightforward in ~1200 bytes by the folks from VisionMedia.

const handleViewChangeStart = (context, next) => {
    const {
        name
    } = currentView;
    if (currentView) {
        if (context.path.search(/\/question\//g) === -1
            || context.path.search(/\/map\//g) === -1) {
                currentView.playOut();
            }
        if (currentView.name !== undefined) {
            document.body.classList.remove(currentView.name);
        };
    }
    next();
}
const handleViewChangeComplete = () => {
    const {
        name
    } = currentView;
    if (name !== undefined) {
        document.body.classList.add(name);
    };
}
const quiz = (context, next) => {
    // create & || provide view with any updated data
    const { id } = context.params;
}
const map = (context, next) => {
    // create & || provide view with any updated data
    const { id } = context.params;
}
const intro = (context, next) => {
    // create & || provide view with any updated data
}
page('/quiz/question/:id', handleViewChangeStart, quiz, handleViewChangeComplete);
page('/map', handleViewChangeStart, map, handleViewChangeComplete);
page('/map/:id', handleViewChangeStart, map, handleViewChangeComplete);
page('*', handleViewChangeStart, intro, handleViewChangeComplete);

The Result

Holiday Map

Launch Project
The Tech

Loading up the toolbox

I am a huge fan of GSAP all the way back from the days of Flash. With the exception of three.js the rest of the technologies I used were standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

uegworldwide.com

United Entertainment Group

uegworldwide.com

UEG was built with Hollywood powerhouse United Talent Agency and the world’s largest communications firm Edelman. Our insights, ideas, intel and access give brands the leading edge and inspire multi-channel activations.

http://www.linkedin.com/company/uegworldwide/
Background

Meet and Greet with UEG

I acquired this project after responding to a colleague’s post on Linkedin looking for a web developer to build their agency’s new site. I was hired immediately. The team at UEG is great to work with and supplied beautiful designs via Zepplin.

ueg_logo

WordPress Plugins

ACF FTW!

Using the Advanced Custom Fields plugin for WordPress makes it fun and efficient to make custom blocks. 22 custom blocks were created, allowing content publishers to simply add into the site, resulting in a styled up block ready to be published.

Sample

Office Location Block

An example of how I used ACF to create the office locations block.

<?php
/**
 * Office Location Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */
$name = 'office-locations';
// Create id attribute allowing for custom "anchor" value.
$id = $name . '-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = $name;
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}
?>
<div id="<?= $id ?>" class="<?= $name ?>">
    <?php 
        if( have_rows('regions') ):
            while ( have_rows('regions') ) : the_row();
                $region = get_sub_field('region_name');
                $locations = get_sub_field('locations');
            ?>
            <div class="<?= $className; ?>__region">
                <h5 class="<?= $className; ?>__region-name"><?= $region; ?></h5>
            <?php 
                foreach($locations as $location):
                $name = $location['name'];
                $email = $location['email'];
                $address_line_1 = $location['address_line_1'];
                $address_line_2 = $location['address_line_2'];
                $city_provice_state_zip = $location['city_province_state_zip'];
                $telephone_number = $location['telephone_number'];
            ?>
                <div class="<?= $className; ?>__location">
                    <h4 class="<?= $className; ?>__location-name"><?= $name ?></h4>                    
                    <a 
                        href="mailto:<?= $email ?>" 
                        class="<?= $className; ?>__location-email" 
                        target="_blank">
                    <?= $email ?>
                    </a>
                    <?php if($address_line_1): ?>
                        <span><?= $address_line_1; ?></span>
                    <?php endif; ?>
                    <?php if($address_line_2): ?>
                        <span><?= $address_line_2; ?></span>
                    <?php endif; ?>
                    <?php if($city_provice_state_zip): ?>
                        <span><?= $city_provice_state_zip; ?></span>
                    <?php endif; ?>
                    <?php if($telephone_number): ?>
                        <span><?= $telephone_number; ?></span>
                    <?php endif; ?>
                </div>
            <?php 
                endforeach;
            ?>
            </div>
            <?php
            endwhile;
        endif;
    ?>
</div>

services:       
    wordpress:
        image: wordpress
        container_name: ueg-local-wp
        hostname: wordpress
        restart: always
        ports:
            - 4000:80
        env_file: 
            - .env/wp.env  
        volumes:
            - wordpress:/var/www/html
            - ./dist/wp-content:/var/www/html/wp-content
            - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini 
# local
$ wp export --dir=/backup/ --with_attachments
$ tar -C uploads -czf uploads.tar.gz
# server 
$ tar -xvf uploads.tar.gz
$ wp import ueg.export.2020-07-20.xml
$ wp search-replace localhost:4000/ uegworldwide.com --dry-run
$ wp search-replace localhost:4000/ uegworldwide.com
Like peas and carrots

Docker, WordPress, & WP-CLI

Dockerizing wordpress and linking up the correct volumes made this environment a breeze to work through. Using WP-CLI made migrating between local, stage, and production effortless.

The Result

uegworldwide.com

Launch Project
The Tech

Loading up the toolbox

As mentioned above, there’s a bit of tech sprinkled into the development of this site. Docker allows the configuration of WordPress within seconds. The WP-CLI allows deployments using only a few lines of code. The ACF plugin made customizing the wordpress theme simple. Nothing better than using the right tools for the job.

Drew Brees breaking the NFL all-time career passing yardage record

EPSN

Unexpected Heights

The Saints QB is now the all-time passing yards leader in NFL history. ESPN tracked his path to 71,968 yards.

Background

ESPN

As Drew Brees approached the record, EPSN wanted to feature a timeline of this achievement, starting as far back in his career as November 4th, 2001 up to the 62-yard touchdown pass to rookie receiver Tre’Quan Smith on December 19th, 2019

Content

The Creative

The team at ESPN handed off a sketch file with mobile & desktop designs, fantastic illustrations and animations by Iveta Karpathyova, and an HTML wrapper file for me to use.

The Distance

Yardage Counter

As the user scrolls down the the site, the counter updates Drew’s total yards to date and how many quarterbacks are ahead of his current yardage.

_instance = {n : 0};

scrollUpdate = (scrollPos, skipAnimation) => {
    const els = [...document.querySelectorAll('['+attr+']')];
    let count = 0;
    els.forEach(el => {
        const top = el.getBoundingClientRect().top;
        if(top < scrollPos) {
            count = Number(el.getAttribute(attr));
        }
    });
    if(skipAnimation){
      el.innerHTML = getCounterString(count);
      n = count;
      return;
    }
    TweenLite.to(_instance, .6, {
      n: count,
      ease: Quad.easeOut,
      onUpdate: function() {
        el.innerHTML = getCounterString(_instance.n);
      },
      onUpdateScope:this
    });
  };
// plot data
    var plot = function(data, color) {
      var px,py;
      data.forEach(function(value, index){
        x = (index+1) * inc + origin.x;
        y = origin.y - value/80 * graph.height;
        _svg.paper.circle(x, y, 3).attr({
          fill: color
        });
        if(px && py) {
          _svg.paper.line(px,py,x,y).attr({
            'font-family':"BentonSans-Medium, BentonSans",
            'font-size':"13",
            'font-weight':"400",
            'letter-spacing':"0.6",
            fill:"#9B9B9B",
            stroke: color,
            'stroke-width': 2
          });
        }
        px = x;
        py = y;
      })
    };
Data Visualizations

Snap.svg

A challenge while in development was that the data was always changing as Drew played each game. Therefore, we couldn’t create static data visualizations, and after each game ESPN would supply me with new numbers. As a result, I used the javascript library, snap.svg, to dynamically create the graphs.

The Result

Unexpected Heights

Launch Project
The Tech

Loading up the toolbox

I am a huge fan of GSAP all the way back from the days of Flash. With the exception of using GSAP and Snap.svg the rest of the technologies used were standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

Considerations and Recommendations

As a freelancer, you wear many hats. As project manager, I chose tools that help the team organize tasks and assets. For ESPN, I recommended Trello and created a board that borrows features from agile planning.  This provides visibility to the client for the work that is outstanding, in development and completed.

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. In order to get the copy deck into HTML markup, the content team at ESPN edits a google sheet, then I export it to JSON, and use that to compile the markup (via Nunjucks). When updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

The Team

Associate Art Director –– Sarah Pezzullo
Reporting –– Mike Triplett
Sr. Designer –– Titus Smith
Developer –– Chad Drobish

The Year of BO

ESPN

The Year of BO

Thirty years ago a run of events happened that would turn Bo Jackson from a brilliant enigma into an international icon. Jackson was known before 1989, but in 12 months, everything changed.

BACKGROUND

Working with ESPN

I was contracted to develop a featured article that highlights 12 months of Bo Jackson’s achievements. ESPN provided me with well documented Sketch file, a wrapper HTML, and some base styles. The rest was history.

Assets

Great Content

ESPN provided me with animated gifs in the classic 8-bit NES style. These animations were not just crafted beautifully, but file size averaged around 100kb.

Illustrations by Jude Buffum

NES Shout-out

Tecmo Bowl

It is always a pleasure when working on a project where you enjoy developing the work as much as the content itself.

Parallax

Scrolling Extras

While exploring each month, there are two reveal animations. Using GSAP, I can queue up animations that can tween through its progress while the user scrolls.

...
const isInView = () => {
            const {
                y,
                top,
                height
            } = el.getBoundingClientRect()            
            const yPos = y || top;
            return (height + yPos > 0 && yPos < window.innerHeight);
        }
...
...
const onScroll = () => {
            container.style.visibility = isInView() ? 'visible' : 'hidden';
            const vh = window.innerHeight;
            const {
                y,
                top,
                height
            } = el.getBoundingClientRect();
            const yPos = y || top;
            const progress = ((yPos + height) / (vh + height));
            // tl : TimelineLite that has the animation of the image and text
            TweenLite.to(tl, 0.4, {
                progress
            });
        }
...
window.addEventListener('scroll', throttle(onScroll, 10), false);
The result

The Year of Bo

Launch Project
The Tech

Loading up the toolbox.

When getting a local development set up quickly, I like to use Viget Labs – Blendid:

Blendid is a delicious stand-alone blend of tasks and build tools that form a full-featured modern asset pipeline. It can be used as-is as a static site builder, or can be configured and integrated into your own development environment and site or app structure

http://github.com/vigetlabs/blendid/tree/blendid5

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. In order to get the copy deck into HTML markup, the content team at ESPN edits a google sheet, then I export it to JSON, and use that to compile the markup (via Nunjucks). When updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

Conclusion

This featured article took a little over a month to develop. The team was lean and efficient resulting in a quick production.