Skip to main content
Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

September 2019 Worknotes

9/30

finally received some comments on a PR submitted by BED for mwt… it was requested that I change a lot of element classes to better suit BEM. ugh BEM

me: 1, stackla: 0


9/27

client launched the things we’ve been working on and it was a happy moment for all involved. today was an oktoberfest celebration

It's horrific, you've been warned
.instagram {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%230a0a0a%22%20fill-rule%3D%22evenodd%22%20d%3D%22M19%200c10.5%200%2019%208.5%2019%2019s-8.5%2019-19%2019S0%2029.5%200%2019%208.5%200%2019%200z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M18.8%207.8c-2.7%200-3%200-4.1.1-1%200-1.8.2-2.4.5-.6.3-1.2.6-1.7%201.1-.5.5-.9%201.1-1.1%201.7-.2.6-.4%201.3-.5%202.4v4.1c0%202.7%200%203%20.1%204.1%200%201%20.2%201.8.5%202.4.3.6.6%201.2%201.1%201.7.5.5%201.1.9%201.7%201.1.6.2%201.3.4%202.4.5%201%200%201.4.1%204.1.1%202.7%200%203%200%204.1-.1%201%200%201.8-.2%202.4-.5.6-.3%201.2-.6%201.7-1.1.5-.5.9-1.1%201.1-1.7.2-.6.4-1.3.5-2.4%200-1%20.1-1.4.1-4.1%200-2.7%200-3-.1-4.1%200-1-.2-1.8-.5-2.4-.3-.6-.6-1.2-1.1-1.7-.5-.5-1.1-.9-1.7-1.1-.6-.2-1.3-.4-2.4-.5-1.2-.1-1.5-.1-4.2-.1m0%201.8c2.6%200%202.9%200%204%20.1%201%200%201.5.2%201.8.3.5.2.8.4%201.1.7.3.3.6.7.7%201.1.1.3.3.9.3%201.8%200%201%20.1%201.3.1%204%200%202.6%200%202.9-.1%204%200%201-.2%201.5-.3%201.8-.2.5-.4.8-.7%201.1-.3.3-.7.6-1.1.7-.3.1-.9.3-1.8.3-1%200-1.3.1-4%20.1s-2.9%200-4-.1c-1%200-1.5-.2-1.8-.3-.5-.2-.8-.4-1.1-.7-.3-.3-.6-.7-.7-1.1-.1-.3-.3-.9-.3-1.8%200-1-.1-1.3-.1-4%200-2.6%200-2.9.1-4%200-1%20.2-1.5.3-1.8.2-.5.4-.8.7-1.1.3-.3.7-.6%201.1-.7.3-.1.9-.3%201.8-.3%201.1-.1%201.4-.1%204-.1m.2%2011.1c-1.8%200-3.2-1.5-3.2-3.2%200-1.8%201.5-3.2%203.2-3.2%201.8%200%203.2%201.5%203.2%203.2%200%201.8-1.4%203.2-3.2%203.2m0-8.2c-2.8%200-5%202.2-5%205s2.2%205%205%205%205-2.2%205-5-2.2-5-5-5m6%200c0%20.6-.4%201-1%201s-1-.4-1-1%20.4-1%201-1%201%20.4%201%201%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
	width: 38px;
	height: 38px;
	background-size: contain;
	margin-right: 10px;
}

Basically what is happening above is an SVG was exported from Illustrator, ran through a service that minimizes the code, then through a URL encoder. The links over at my Resources page are quite detailed in how this works. It was nice to find a workaround for the limitations that is Stackla.

me: 1, stackla: 0


9/26

Spent the day going over Frontend Masters Accessibility in JavaScript course. Have been writing up notes here and commenting on the codebase here. I will be presenting my findings on Tuesday 10/1 during our bi-weekly FED team meeting.

I also added a La Croix consumption counter to the main page of this little repo, becuase who doesn’t love a good La Croix or 3?


9/25

fought with responsive SVG (I see you cw), attended 3 too many meetings, only drank 2 la croix

Click to view my work of the day
<div class="pip-video">
    <div class="media-gallery__img media-gallery__video video-link" data-video="" data-brightcovevideo="6076312645001" data-brightcoveplayer="r1tg8ngpM">
        <img src="image link removed to preserve client anonymity" alt="">
        <div class="pip-video__icon">
            <!-- <svg width="100%" height="100%" version="1.1" id="pip-video-play-button" xmlns="http://www.w3.org/2000/svg"
            x="0px" y="0px" viewBox="0 0 106 106" style="enable-background:new 0 0 106 106;" xml:space="preserve" preserveAspectRatio="xMinYMin">
            <path id="outline" class="st0" d="M53,105.5C24.1,105.5,0.5,81.9,0.5,53C0.5,24.1,24.1,0.5,53,0.5c28.9,0,52.5,23.6,52.5,52.5 C105.5,81.9,81.9,105.5,53,105.5z M53,3.5C25.7,3.5,3.5,25.7,3.5,53c0,27.3,22.2,49.5,49.5,49.5c27.3,0,49.5-22.2,49.5-49.5 C102.5,25.7,80.3,3.5,53,3.5z" fill="#33EB91"/>
            <path id="background" class="st1" d="M53,7c25.4,0,46,20.6,46,46S78.4,99,53,99S7,78.4,7,53S27.6,7,53,7z" fill="rgba(0,0,0,.5)"/>
            <path id="triangle" class="st2" d="M73,51.5L41,77.9V25.1L73,51.5z" fill="#ffffff"/>
            </svg> -->
        </div>
    </div>
</div>
<div id="modal-video" class="modal modal--video">
    <div class="pip-video modal__content">
        <div class="pip-video__video-wrapper">
            <video-js 
                data-account="" 
                data-embed="default" 
                data-player="" 
                data-video-id="" 
                style="height:auto; position:relative; width:100vw;"
                controls
            ></video-js>
        </div>
    </div>
</div>
.pip-video {
    width: 100%;
    margin: auto;
    position: relative;
    
    & .video-link::after {
        right: 0;
        top: 0;
        height: 100%;content: '';
        position: absolute;
        width: 100vw;
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 80%, rgba(0,0,0,0.95) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.95)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.95) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.95) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.95) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(0,0,0,0) 80%,rgba(0,0,0,0.95) 100%); /* W3C */
    }
    
    & div > img {
        width: 100vw;
        height: auto;
        
    }

    &__icon {
        position: absolute;
        max-width: 12%;
        top: 40%;
        left: 44%;

        @media screen and (min-width: $tablet-min) {
            max-width: 6%;
            top: 40%;
            left: 47%;
        }
    }

}

9/24

mwt merged repos, built and deployed the project in its current state. Lots of bugs knocked out, focus shifted to PIP (Product Information Page) Component production

Click to view my work of the day
@import ''; // link removed to preserve client anonymity
@mixin overlay-base {
    content: '';
    position: absolute;
    width: 100vw;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 80%, rgba(0,0,0,0.95) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.95)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.95) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.95) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.95) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 80%,rgba(0,0,0,0.95) 100%); /* W3C */
}
.pip-gallery {
    width: 100vw;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    @media screen and (min-width: $tablet-min) {
        flex-wrap: nowrap;
    }
    
    &__large-image {
        flex: 0 0 100vw;
        order: 1;
        @media screen and (min-width: $tablet-min) {
            flex: 0 0 66.66vw;
        }
        
        & img {
            width: 100%;
            z-index: -1;
        }
        
        &__overlay::after {
            @include overlay-base;
            left: 0;
            top: 0;
            height: 33.33%;
            @media screen and (min-width: $tablet-min) {
                height: 100%;
                width: 66.66vw;
            }
        }
    }
    
    &__small-image {
        flex: 0 0 100vw;
        flex-direction: unset;
        order: 2;
        @media screen and (min-width: $tablet-min) {
            flex: 0 0 33.33vw;
        }
        
        &__overlay-top::after {
            @include overlay-base;
            right: 0;
            top: 0;
            height: 67%;
            @media screen and (min-width: $tablet-min) {
                height: 50%;
                width: 33.33vw;
            }
        }
        &__overlay-bottom::after {
            @include overlay-base;
            right: 0;
            bottom: 0;
            height: 100%;
            @media screen and (min-width: $tablet-min) {
                height: 50%;
                width: 33.33vw;
            }
        }
        
        & img {
            width: 100%;
            z-index: -1;
        }
    }
}
<section class="pip-gallery">
    <div class="pip-gallery__large-image">
        <div class="pip-gallery__large-image__overlay">
            <img src="/pip-gallery-1.png">
        </div>
    </div>
    <div class="pip-gallery__small-image">
        <div class="pip-gallery__small-image__overlay-top">
            <img src="/pip-gallery-2.png">
        </div>
        <div class="pip-gallery__small-image__overlay-bottom">
            <img src="/pip-gallery-3.png">
        </div>
    </div>
</section>

9/23


9/20

mwt internal team having trouble with build and deployment


9/19

Closed out remaining cw tickets.
Working on mwt full time now.

p {
    margin-top: 11px;
    strong {
        font-family: Helvetica Neue LT W01_83 Hv Ex,Helvetica Neue,Helvetica,Arial,sans-serif;
        // had to change the above to a variable *$helvetica83* that had been declared in a separate file
        text-transform: uppercase;
    }
}
.flex-content-feature-accordion {
        display: flex;
        width: 100%;
        order: 3;
        &:empty {
            display: none;
        }
    }

9/18

these were the changes made to the JavaScript

...
var $this = $(this); // this line already existed
var target = $this.data('target');

// inside of the slick slider settings

asNavFor: '#' + target,

// targets the unique id

...$('#' + target).slick...

and these were the changes made to the HTML files

<div class="innovations-tabbed-view__items" id="1"> <!-- added the id -->
<section class="innovations-tabbed-view" data-target="1"> <!-- added the data-target -->

9/17


9/16


9/13


9/12

podcasts were broken because BED did not use the unique classnames set for the two different podcast sources videos were broken because Coveo loads after the video modal JS is init, added:

if (window.YT) { $(window).trigger('youTubePlayerApiReady'); }; &&
if (window.VidyardV4) { $(window).trigger('vidyardPlayerApiReady'); };

triggers if element is found


9/11

Target class of ‘.coveo-query-summary-cancel-last’ and change text to ‘Try a different search term’

$('.coveo-query-summary-cancel-last').text('Try a different search term');