SuperGeekery: A blog probably of interest only to nerds by John F Morton.

A blog prob­a­bly of inter­est only to nerds by John F Mor­ton.

Containerizing a workflow: using Docker to Build A Banner”

A whale looking a icons representing animated banners.

We use a cus­tom-built ani­ma­tion work­flow at JMX2 that we’ve con­tainer­ized with Dock­er to ensure it runs con­sis­tent­ly on any machine we work on. We’ll go over that process in this post.

The background

At JMX2, we build a lot of ani­mat­ed adver­tis­ing ban­ners. (You’re wel­come! :winking_​face:) In 2015, we cre­at­ed a Yeo­man gen­er­a­tor called Build A Ban­ner” to quick­ly cre­ate a con­sis­tent start­ing point for each project. This required hav­ing Yeo­man, Node, Gulp.js, and Sass installed on the devel­op­ment machine.

Before we dive in fur­ther, let’s get some ter­mi­nol­o­gy out of the way. Yeo­man is a scaf­fold­ing tool that cre­ates and cus­tomizes files to help start near­ly any type of project. Gulp.js is an automa­tion tool writ­ten in Javascript. Sass is a CSS pre­proces­sor that adds help­ful things like nest­ing, mix­ins, and inher­i­tance.

The Yeo­man Build a Ban­ner gen­er­a­tor, which we refer to as BAB, asks a series of ques­tions, like the dimen­sions of the ani­ma­tion, the adver­tis­ing plat­form, the nam­ing con­ven­tion you’d like to use, and more. These val­ues cus­tomize the gen­er­at­ed files. For exam­ple, you could start with a set of files cus­tomized to cre­ate a 300×250 ad for use with Google Ad Words.

A gen­er­a­tor” is the set of instruc­tions that can gen­er­ate any type of project. For exam­ple, my friend, Andrew Welch, has cre­at­ed a Yeo­man gen­er­a­tor, gen­er­a­tor-craft­plu­g­in that scaf­folds out the start­ing point for a mod­ule or plu­g­in for Craft CMS. A Craft plu­g­in com­bines PHP, HTML, Javascript, and CSS. Microsoft has a Yeo­man gen­er­a­tor that scaf­folds out a start­ing point for a VSCode exten­sion, vscode-gen­er­a­tor-code. There’s even a gen­er­a­tor, called gen­er­a­tor-gen­er­a­tor to help you cre­ate new Yeo­man gen­er­a­tors!

The Build a Ban­ner gen­er­a­tor, gen­er­a­tor-build­a­ban­ner, scaf­folds out a project that com­bines Javascript, includ­ing the Greensock ani­ma­tion library, HTML, and Sass for CSS gen­er­a­tion. Once a project has been gen­er­at­ed, it uses Gulp.js to spin up a devel­op­ment serv­er with live-reload dur­ing devel­op­ment. It also uses Gulp.js in a build process to mini­fy the files in the cor­rect for­mat that media com­pa­nies expect to receive an ani­mat­ed. When you’ve com­plet­ed a project, it uses Gulp to cre­ate a small archive file of the ban­ner files for long-term stor­age.

You can see the BAB project on npm here. If you look at the releas­es page, you’ll see there have been 57 releas­es at the time I write this.

We use a cus­­tom-built ani­ma­tion work­flow at JMX2 that we’ve con­tainer­ized with Dock­er to ensure it runs con­sis­tent­ly on any machine we work on. We’ll go over that process in this post.

The back­ground #

At JMX2, we build a lot of ani­mat­ed adver­tis­ing ban­ners. (You’re wel­come! :winking_​face:) In 2015, we cre­at­ed a Yeo­man gen­er­a­tor called Build A Ban­ner” to quick­ly cre­ate a con­sis­tent start­ing point for each project. This required hav­ing Yeo­man, Node, Gulp.js, and Sass installed on the devel­op­ment machine.

Before we dive in fur­ther, let’s get some ter­mi­nol­o­gy out of the way. Yeo­man is a scaf­fold­ing tool that cre­ates and cus­tomizes files to help start near­ly any type of project. Gulp.js is an automa­tion tool writ­ten in Javascript. Sass is a CSS pre­proces­sor that adds help­ful things like nest­ing, mix­ins, and inher­i­tance.

The Yeo­man Build a Ban­ner gen­er­a­tor, which we refer to as BAB, asks a series of ques­tions, like the dimen­sions of the ani­ma­tion, the adver­tis­ing plat­form, the nam­ing con­ven­tion you’d like to use, and more. These val­ues cus­tomize the gen­er­at­ed files. For exam­ple, you could start with a set of files cus­tomized to cre­ate a 300×250 ad for use with Google Ad Words. 

A gen­er­a­tor” is the set of instruc­tions that can gen­er­ate any type of project. For exam­ple, my friend, Andrew Welch, has cre­at­ed a Yeo­man gen­er­a­tor, gen­er­a­­tor-craft­­plu­g­in that scaf­folds out the start­ing point for a mod­ule or plu­g­in for Craft CMS. A Craft plu­g­in com­bines PHP, HTML, Javascript, and CSS. Microsoft has a Yeo­man gen­er­a­tor that scaf­folds out a start­ing point for a VSCode exten­sion, vscode-gen­er­a­­tor-code. There’s even a gen­er­a­tor, called gen­er­a­­tor-gen­er­a­­tor to help you cre­ate new Yeo­man gen­er­a­tors!

The Build a Ban­ner gen­er­a­tor, gen­er­a­­tor-build­a­ban­n­er, scaf­folds out a project that com­bines Javascript, includ­ing the Greensock ani­ma­tion library, HTML, and Sass for CSS gen­er­a­tion. Once a project has been gen­er­at­ed, it uses Gulp.js to spin up a devel­op­ment serv­er with live-reload dur­ing devel­op­ment. It also uses Gulp.js in a build process to mini­fy the files in the cor­rect for­mat that media com­pa­nies expect to receive an ani­mat­ed. When you’ve com­plet­ed a project, it uses Gulp to cre­ate a small archive file of the ban­ner files for long-term stor­age. 

You can see the BAB project on npm here. If you look at the releas­es page, you’ll see there have been 57 releas­es at the time I write this.


The problem we’re trying to solve

We’ve installed Yeo­man and BAB on many dif­fer­ent com­put­ers since 2015. We’ve had to debug instal­la­tions quite a few times along the way, and these instal­la­tion issues typ­i­cal­ly revolved around the Node instal­la­tion, per­mis­sion prob­lems, or con­flict­ing ver­sions of oth­er soft­ware.

In 2022, we’re at the point where we’ve updat­ed our com­put­ers again, and instead of debug­ging anoth­er instal­la­tion of Node, Gulp, Yeo­man, we’ve cre­at­ed a Dock­er image that con­tains all the pieces of the BAB project.

Mov­ing the work­flow to a Dock­er image has changed the require­ments of run­ning Build A Ban­ner. The new set­up requires Dock­er Desk­top, and that’s the only require­ment. It doesn’t mat­ter what ver­sion of Node you have installed because it isn’t need­ed to use BAB. No node? No prob­lem! (Hey, I should write that down!)

Once Dock­er Desk­top is on your com­put­er, you can pull the BAB image and run the con­tain­er. The con­tain­er has the need­ed ver­sions of Node, Gulp, and Sass already installed. You don’t need to install them on your own machine.

Try it yourself

Con­firm that Dock­er is installed and run­ning. Now open up your ter­mi­nal and cre­ate a new emp­ty direc­to­ry some­where on your filesys­tem and then cd into that direc­to­ry. Then run the fol­low­ing com­mand.

docker container run -p 8080:8080 -p 35729:35729 -v "$PWD":/app -it --rm johnfmorton/yo-buildabanner

You should see the image down­load and run when it’s ready. Then you will see a com­mand prompt again. You’re no longer in your” com­put­er, though; you’re now inside the cus­tom Dock­er con­tain­er with Yeo­man and Build A Ban­ner installed and con­fig­ured. The com­mand prompt is cus­tomized to make it easy to rec­og­nize that you are inside the con­tain­er.

The prob­lem we’re try­ing to solve #

We’ve installed Yeo­man and BAB on many dif­fer­ent com­put­ers since 2015. We’ve had to debug instal­la­tions quite a few times along the way, and these instal­la­tion issues typ­i­cal­ly revolved around the Node instal­la­tion, per­mis­sion prob­lems, or con­flict­ing ver­sions of oth­er soft­ware.

In 2022, we’re at the point where we’ve updat­ed our com­put­ers again, and instead of debug­ging anoth­er instal­la­tion of Node, Gulp, Yeo­man, we’ve cre­at­ed a Dock­er image that con­tains all the pieces of the BAB project. 

Mov­ing the work­flow to a Dock­er image has changed the require­ments of run­ning Build A Ban­ner. The new set­up requires Dock­er Desk­top, and that’s the only require­ment. It doesn’t mat­ter what ver­sion of Node you have installed because it isn’t need­ed to use BAB. No node? No prob­lem! (Hey, I should write that down!)

Once Dock­er Desk­top is on your com­put­er, you can pull the BAB image and run the con­tain­er. The con­tain­er has the need­ed ver­sions of Node, Gulp, and Sass already installed. You don’t need to install them on your own machine.

Try it your­self #

Con­firm that Dock­er is installed and run­ning. Now open up your ter­mi­nal and cre­ate a new emp­ty direc­to­ry some­where on your filesys­tem and then cd into that direc­to­ry. Then run the fol­low­ing com­mand.

docker container run -p 8080:8080 -p 35729:35729 -v "$PWD":/app -it --rm johnfmorton/yo-buildabanner

You should see the image down­load and run when it’s ready. Then you will see a com­mand prompt again. You’re no longer in your” com­put­er, though; you’re now inside the cus­tom Dock­er con­tain­er with Yeo­man and Build A Ban­ner installed and con­fig­ured. The com­mand prompt is cus­tomized to make it easy to rec­og­nize that you are inside the con­tain­er.


Running bab on the command line

The command prompt lets you know you are inside the BAB container.


Ports exposed

You will see that 2 ports were opened in the dock­er com­mand, port 8080 and port 35729. BAB uses 8080 for view­ing the ban­ner in devel­op­ment in your brows­er. Port 35729 is used to com­mu­ni­cate with the brows­er for live-reload­ing of the page when you update the HTML, JS, or CSS dur­ing devel­op­ment.

Working in the container

There are sev­er­al com­mands you can run here. Since you’re just start­ing a ban­ner, you’ll first need to gen­er­ate the ban­ner with Yeo­man. Enter this com­mand.

yo buildabanner

A series of prompts appear to cus­tomize your ban­ner. After you com­plete the prompts and are again at the com­mand line prompt, enter the fol­low­ing to get the local dev serv­er run­ning.

gulp

Open your brows­er and go to http://​local​host​.com:8080. You should see a basic ani­mat­ed ban­ner. At this point, you edit the HTML, CSS, and Javascript, which will cause your web brows­er to reload each time you save your work.

After cus­tomiz­ing the ban­ner to your lik­ing, stop the gulp process with CTRL‑C. Then build the ban­ner with gulp build. You can also archive the ban­ner project with the gulp archive com­mand. In this case, my def­i­n­i­tion of archive” means tak­ing the cus­tomized files and zip­ping them up for long-term stor­age.

Ports exposed #

You will see that 2 ports were opened in the dock­er com­mand, port 8080 and port 35729. BAB uses 8080 for view­ing the ban­ner in devel­op­ment in your brows­er. Port 35729 is used to com­mu­ni­cate with the brows­er for live-reload­­ing of the page when you update the HTML, JS, or CSS dur­ing devel­op­ment.

Work­ing in the con­tain­er #

There are sev­er­al com­mands you can run here. Since you’re just start­ing a ban­ner, you’ll first need to gen­er­ate the ban­ner with Yeo­man. Enter this com­mand.

yo buildabanner

A series of prompts appear to cus­tomize your ban­ner. After you com­plete the prompts and are again at the com­mand line prompt, enter the fol­low­ing to get the local dev serv­er run­ning.

gulp

Open your brows­er and go to http://​local​host​.com:8080. You should see a basic ani­mat­ed ban­ner. At this point, you edit the HTML, CSS, and Javascript, which will cause your web brows­er to reload each time you save your work.

After cus­tomiz­ing the ban­ner to your lik­ing, stop the gulp process with CTRL‑C. Then build the ban­ner with gulp build. You can also archive the ban­ner project with the gulp archive com­mand. In this case, my def­i­n­i­tion of archive” means tak­ing the cus­tomized files and zip­ping them up for long-term stor­age.


controls = 1 to show player controls color = This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white, and, by default, the player uses the color red in the video progress bar. See the YouTube API blog for more information about color options. Note: Setting the color parameter to white will disable the modestbranding option.

Here’s a quick video of me cre­at­ing a ban­ner and launch­ing the devel­op­ment envi­ron­ment to show you how I use BAB.

I won’t get into the process of actu­al­ly cus­tomiz­ing the ban­ner ani­ma­tion. I’ve left com­ments in the HTML and Sass files but build­ing the ani­ma­tion where the work is for an ani­ma­tion project. The goal of BAB is to let us focus our time on the ani­ma­tion and not the devel­op­ment set­up process.

Here’s a quick video of me cre­at­ing a ban­ner and launch­ing the devel­op­ment envi­ron­ment to show you how I use BAB.

I won’t get into the process of actu­al­ly cus­tomiz­ing the ban­ner ani­ma­tion. I’ve left com­ments in the HTML and Sass files but build­ing the ani­ma­tion where the work is for an ani­ma­tion project. The goal of BAB is to let us focus our time on the ani­ma­tion and not the devel­op­ment set­up process.


Aliases

The final thing we do on our com­put­ers is to make the dock­er com­mand eas­i­er to remem­ber. We’ve updat­ed our rc files, specif­i­cal­ly the .zshrc file since we’re on Macs using the ZSH shell, with alias­es. The first is the most use­ful one.

alias banner='docker container run -p 8080:8080 -p 35729:35729 -v "$PWD":/app -it johnfmorton/yo-buildabanner'

This alias allows us to type banner into the ter­mi­nal and quick­ly be in the Build A Ban­ner con­tain­er.

We have a 2nd alias that we use only occa­sion­al­ly.

alias bannerupdate='docker pull johnfmorton/yo-buildabanner:latest'

This alias is handy for updat­ing our local Dock­er image with the lat­est one post­ed on Dock­er Hub. We can sim­ply type bannerupdate to down­load the lat­est image.

As always, I hope this was help­ful. You can find me on Twit­ter if you’ve got any feed­back. Thanks.

Alias­es #

The final thing we do on our com­put­ers is to make the dock­er com­mand eas­i­er to remem­ber. We’ve updat­ed our rc files, specif­i­cal­ly the .zshrc file since we’re on Macs using the ZSH shell, with alias­es. The first is the most use­ful one.

alias banner='docker container run -p 8080:8080 -p 35729:35729 -v "$PWD":/app -it johnfmorton/yo-buildabanner'

This alias allows us to type banner into the ter­mi­nal and quick­ly be in the Build A Ban­ner con­tain­er. 

We have a 2nd alias that we use only occa­sion­al­ly. 

alias bannerupdate='docker pull johnfmorton/yo-buildabanner:latest'

This alias is handy for updat­ing our local Dock­er image with the lat­est one post­ed on Dock­er Hub. We can sim­ply type bannerupdate to down­load the lat­est image.

As always, I hope this was help­ful. You can find me on Twit­ter if you’ve got any feed­back. Thanks.