I Contributed to the Official Site for Kaze to Rock Imonikai 2014 BASEBALL

Kaze to Rock Imonikai 2014 BASEBALL was held on September 27 and 28, 2014 at Kaiseizan Baseball Stadium in Koriyama, Fukushima. I contributed to the production of its official website.

My piece was the JavaScript behind the countdown on the top page: the display showing how many days remained until opening day. It is a small slice of the site, but I want to put it on the record.

About Kaze to Rock Imonikai 2014 BASEBALL

Kaze to Rock Imonikai is a village-festival-style rock festival held every autumn in Fukushima, created by Michihiko Yanai, a creative director from the prefecture. The 2014 edition carried the subtitle “Kaze to Rock BASEBALL” and was built around actual baseball games between musicians and audience members. Japanese music outlet Natalie covered it under the headline that this year’s Imonikai was a sandlot baseball tournament.

The site’s visual design follows that theme. Flags fly across the top, a green scoreboard sits below them, and the electronic display panel shows the remaining days in orange dot-matrix digits.

The Scope: The Countdown

What I owned was the calculation and rendering of the number on that scoreboard. Design and markup were finished by someone else; my job was to drop the days-until-opening logic on top of them.

The requirements were straightforward.

Show the number of days remaining until opening day, September 27, 2014
Days only. No hours, minutes, or seconds
The unit label is baked into the scoreboard image, so JavaScript renders the digits and nothing else
On opening day, the display reads 0

Implementation

In 2014 the front end still revolved around jQuery, so the natural choice was jQuery plus the jQuery Countdown plugin by Keith Wood.

The markup places an empty element for the countdown text and the scoreboard image inside the same container.

<div class="countdown-area">
  <div id="js-countdown" class="countdown-text"></div>
  <img src="public/images/countdown/countdown.png" alt="Countdown">
</div>

The JavaScript on top of it:

$(function(){
  var countDownEndDate = new Date('2014-09-27');
 
  $('#js-countdown').countdown({
    until: countDownEndDate,
    compact: true,
    compactLabels: ['', '', '', ''],
    format: 'D'
  });
});

Three options carry the weight here.

format: 'D': restricts the output to days, so hours, minutes, and seconds are never rendered.
compact: true: switches from the plugin’s default markup (a set of <span> elements, one per unit) to a plain-text output.
compactLabels: ['', '', '', '']: blanks out the week, day, hour, and minute labels that compact mode would otherwise append. What lands in the DOM is a bare number, so it never duplicates the unit already printed on the image.

The arithmetic itself belongs to the plugin. All I declare is what to show, at what granularity, and where. Rolling over at midnight is handled by the plugin too, so there was no need to run a timer by hand.

Layering Digits Over the Scoreboard

The number has to sit exactly inside the electronic panel drawn on the scoreboard image. So .countdown-text is stacked above the image with position: absolute and z-index, styled with a dot-matrix face and an amber color to read like a real display panel.

.countdown-area {
  width: 270px;
  height: 155px;
  overflow: hidden;
  position: relative;
}
.countdown-area img {
  z-index: 0;
  width: 270px;
  height: 178px;
}
.countdown-text {
  position: absolute;
  z-index: 1;
  padding: 55px 0 0 35px;
  font-family: DotGothic16Std-M, Helvetica, Arial, sans-serif;
  font-size: 40pt;
  color: #f39800;
}

Emitting only the digits from JavaScript was partly a decision in service of that layering. Keep the plugin’s default output and you inherit unit labels and separator elements that refuse to fit neatly inside the panel’s frame. Narrowing the output to a single number lets the CSS worry about nothing but position and typeface.

One period detail: Firefox misaligned the overlay, so the stylesheet carries a vendor-specific correction inside @-moz-document url-prefix(). A relic of an era when papering over rendering differences with browser hacks was simply how the job was done.

On Shipping Something Small in Public

My contribution is roughly ten lines of JavaScript. Nothing about it is technically hard.

Those ten lines still ran for months in the spot visitors looked at first. Someone saw the number tick down and thought “three days to go.” Having a hand in that kind of moment lands differently than the line count suggests.

Working on a music festival site was also a change of context from the business systems I usually write. The deadline could not move (you cannot postpone opening day), and being off by a single day would have cost the site its credibility. That particular flavor of tension is not something you get to feel very often.