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.

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.