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 chadandrewdrobish.com/ uegworldwide.com --dry-run
$ wp search-replace chadandrewdrobish.com/ 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.

Dunk Dynasty: Zion’s astonishing slam index

ESPN

Dunk Dynasty: Zion’s astonishing slam index

Duke freshman Zion Williamson is among the most explosive dunkers the game of basketball has ever seen. We cataloged the best and most impactful of his 52 dunks during a scintillating season in Durham.

BACKGROUND

Working with ESPN

It’s always a real treat to get involved with anything ESPN hands me. This time, ESPN reached out to build a featured article that demonstrates the amazing talent of Zion Willamson. They delivered all the assets, and a very organized Sketch file, and I handed back the developed feature.

Fun Tech

SwiperJS

The article consisted of 5 sections, and each section had a range videos. SwiperJS was utilized to create the carousel resulting in a smooth cross platform transition from article to article.

For the lazy viewer

Video on demand

ESPN requested to have the videos autoplay as the user scrolls the video into view. The code below demonstrates how this was executed.

window.addEventListener('scroll', throttle(() => {
    // get current section
    const columnIndex = Navigation.swiper.realIndex;
    const column = columns[columnIndex]
    // get dunks from current section
    const columnDunks = [].slice.call(column.querySelectorAll('.dunk'));
    // check position of dunk 
    columnDunks.forEach((dunk, index) => {
        const {
            top,
            bottom,
            height
        } = dunk.getBoundingClientRect();
        const centerY = (bottom - top)/2 + top;
        // if its within range, play it
        if (centerY < 0.75 * window.innerHeight 
            && centerY > 0.25 * window.innerHeight) {
            const dunkIndex = columnIndex * 5 + index;
            activateDunk(dunks[dunkIndex]);
        }
    }); 
}, 200));
The Result

Dunk Dynasty: Zion’s astonishing slam index

Launch Project
The Tech

Loading up the toolbox

Considerations and Reccommendations

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.

Experience MLS like a die-hard fan

ESPN

Experience MLS like a die-hard fan

Raucous fans make the MLS matchday atmosphere among the best in American pro sports.

Background

ESPN

This featured article was created to demonstrate the energized fans that fill up stadiums all over the county. ESPN chose to pick 5 teams and highlight their traditions that make going to a game a unique experience.

Content

The Chosen 5 Teams

ESPN went on the road to gather editorial from the Atlanta United FC, Minnesota United FC, Portland Timbers, Seattle Sounders FC, and the Sporting Kansas City. They came back with 360º videos, HD video, and imagery that captures the fans excitement

Capturing the excitement

Using 360º Video

My initial thought to display 360º video, was to create a custom player with three.js. From my discovery I found that videojs has a plugin for vr. After a prototype, I decided to go with the plugin which ultimately saved a few hours.

The Result

Experience MLS like a die-hard fan

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 GSAP and Videojs-vr the rest of the technologies I used were standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

Considerations and Recommendations

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.

Kick Game Evolution

ESPN

Kick Game Evolution

Being an NBA sneakerhead has become more than having the biggest closet.
Meet three players who have embraced the sneaker culture evolution.

BACKGROUND

Working with ESPN

ESPN contacted me through a recommendation from a colleague– looking for help creating one-page featured articles. The handoff would consist of Sketch files with redlining notation, and an HTML wrapper.

My contribution is building out the markup, javascript, styles, and provide input on interactions as well as polish up animations.

THE HANDOFF

How things can run so smoothly

The design team at ESPN is exceptional! They provide me a lot of detailed information, and in this case a video on how they would like the flow of the site to animate. With all that work completed before I even touch the keyboard, they ask me to please take all liberties to go ’off-script‘ and experiment with animations that I think would improve the experience.

THE RESULT

ESPN – Kick Game Revolution

Launch Project
The tech

Loading up the toolbox

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

Considerations and Recommendations

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.

Discovery & Pride

The intro animation presented itself as the largest challenge. Two separate images, a foreground and background, are matched up, a Ken Burns effect is applied, followed by masks to reveal and hide the previous and current slide.

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. So in order to get the copy deck into markup, I have the content folks at ESPN edit a google sheet. I then export it to JSON, and use that to compile the markup (via Nunjucks). If and 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.

Oncology Pipeline Explorer

Amgen

Oncology Pipeline Explorer

An interactive kiosk for Amgen that demonstrates the relationships between different cells and their research on Oncology.

Background

The Brief from Broth

The Broth agency reached out to me from a recommendation through a friend. They had a few bids out for the job and asked me to send examples and an estimate. Within a week I had secured the job. Over a few meetings face to face I had my marching orders and was ready to get prototyping.

What’s on the hook

A relational map of circles.

The challenge was not only taking a rough abstract idea sold to the client into fruition, but to also complete this task in a very short timeline. The brief was provided to me the Monday after Thanksgiving 2018 and needed to be sent off for MAC review January 10th, 2019

A lot of work, in a short time, with little to go with. Within a holiday month.

List of conferences:

ASCO GU 2019 2/14 – 2/16 | Las Vegas
AACR 2019 3/31 – 4/3 | Atlanta
ASCO 2019 5/31 – 6/4 | Chicago

THE PROCESS

The work in progress…

I quickly had gathered up my tools and got to work. I was very attracted to a 3D immersive map that the user could explore. Due to the abstract brief, I wanted to be sure the client would be comfortable in my idea of 3D.

Prototype

Within a couple of days I had placed this rough and dirty prototype in the hands of the client and let them play. I had to communicate where this could materialize from, explaining that the ‘orbs’ and ‘satellites’ would have a glassy material, the navigation may be different, number of orbs in view, orbs would have labels- as some options to research.

View Prototype

Testing materials & performance

WebGL is a GPU hog and will make your laptop sound like it’s about to take off. So I had to get the best bang for your buck as far as performance went. I researched reflections on all the orbs, but realized it was going to be too taxing on the GPU.

View material test 

Review 1

Ready for review – whew… The first conference was going to launch with three categories, as the client could not provide all the brochures and assets for the ‘Targets’ category. Navigation in, labels on, tons of data feed in. There were some bugs and kinks that I still needed to work out.

View Review 

Release Candidate

This was the release candidate that was sent out the first conference in Las Vegas. It was received very well, the client was thrilled and proud to show off their kiosk. Their feedback was positive, and was looking forward to the next version with the added Targets.

View Release

THE APP

Amgen’s Interactive Oncology Pipeline

The Tech

Loading up the toolbox

I chose tools that I am very comfortable with as I was in a short deadline. My go to’s consist of react, three.js, webpack, json for modeling, etc.

Considerations and Reccommendations

Due to the demand on the GPU for WebGL, I made sure that the hardware would be more than enough to handle the application. Broth supplied me with options from a third party vendor, and I provided my recommendation.

Discovery & Pride

There was so much I was proud about, especially now looking back with what I was given and what I was able to create. One of my favorite pieces of the code was how I was able to interpolate over time the labels to look at the camera.

/**
 * Helper function to get quaternion from src
 * looking at target 
 */
const getLookAtQuaternion = (srcObj, targetObj) => {
    var q1 = new THREE.Quaternion();
    var m1 = new THREE.Matrix4();
    var target = new THREE.Vector3();
    var position = new THREE.Vector3();
    var quaternion = srcObj.quaternion.clone();
    const { x, y, z } = targetObj;
    target.set(x, y, z);
    var parent = srcObj.parent;
    srcObj.updateWorldMatrix(true, false);
    position.setFromMatrixPosition(srcObj.matrixWorld);
    m1.lookAt(target, position, srcObj.up);
    quaternion.setFromRotationMatrix(m1);
    if (parent) {
        m1.extractRotation(parent.matrixWorld);
        q1.setFromRotationMatrix(m1);
        quaternion.premultiply(q1.inverse());
    }
    return quaternion
}

/**
 * On ever render tick, have the label and cta move its
 * quaternion towards the camera
 */
update = slerpSpeedOverride => {
    const {
        type
    } = this.data;
    const q = getLookAtQuaternion(this.textContainer, ThreeView.camera.position)
    this.textContainer.quaternion.slerp(q, slerpSpeedOverride || this.slerpSpeed);
    if (this.plane) {
        this.plane.quaternion.slerp(q, 1);
    }   
}

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

When choosing a CMS for the project, I consider who will be the publisher. Tools like Contentful or sites like WordPress often need a little hand holding for those that are not too tech-savy. Most of my clients are comfortable in Excel. It’s my rough and dirty way to get the client to add the data, for me to extrapolate it and then export to JSON.

Conclusion

Strong relationships were developed with both Broth and Amgen. Resulting in future work with both Amgen and Broth for the remainder of 2019.

RESULTS
Orbs

81

Number of Paths

Infinite

Successful Conferences

3

Avg. Session Duration

00:02:44

Total Sessions

314

Orbs Clicked

2,299