Create HoC Live Spanish banner

[hacodeorg]

Task FND-1315: Create HoC Live Spanish banner on the HoC landing page (spec).

Screenshots

On desktop, the banner will look like this:

On a smaller screen such as the iPhone 6 (375x667):

The banner can also be resized:

Testing story

Verify that the banner shows up for Spanish-speaking users

• In Spain: http://localhost.hourofcode.com:3000/es
• In Argentina (LATAM): http://localhost.hourofcode.com:3000/ar
• In US but use Spanish: http://localhost.hourofcode.com:3000/us/es
• In US but use LATAM Spanish: http://localhost.hourofcode.com:3000/us/la

Verify that the banner doesn't show up for non-Spanish speaking users

• In US (default = English): http://localhost.hourofcode.com:3000/us/
• In Brazil (LATAM, default = Portugese) http://localhost.hourofcode.com:3000/br/
• In Argentina (LATAM) but use English: http://localhost.hourofcode.com:3000/ar/en

Reviewer Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[hacodeorg]

This might be a basic styling technique, I don't know how to keep the height of the left and right box (image and message) the same when resizing. Any suggestions?

[dju90]

Can we pre-emptively add the Spanish translation to es.yml and la.yml? I can be responsible for proactively uploading the changes to en.yml to Crowdin.

[Hamms]

The best way that I'm aware of to get sibling elements to be height-locked is to use display: table-row; on the parent element and display: table-cell; on the children. You'll also want to get rid of the current float directives:

<div class="banner-box" style="display: table-row;">
  <div class="banner-image-box" style="display: table-cell; float: none;">
    ...
  </div>
  <div class="banner-message-box" style="display: table-cell; float: none;">
    ...
  </div>
</div>

[Hamms]

note that fit-content is not supported by IE, but is also I think not necessary here

[hacodeorg]

Removed.

[Hamms]

Important note: target: _blank is a security vulnerability. If we absolutely must open links in new tabs, there are some things we can do to mitigate those security risks, but in this case I don't see a need for us to do that. Situations in which opening a link in a new tab are necessary are mostly those situations in which there are interactions on the page that could be lost if the user unexpectedly navigates away; things like a page with a long form to be filled out or, say, a page with a code editor that may lose progress.

The hourofcode.com homepage is a static page, so we should just leave this anchor as normal.

For more information, see:

• https://medium.com/sedeo/how-to-fix-target-blank-a-security-and-performance-issue-in-web-pages-2118eba1ce2f
• https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
• https://blog.dareboost.com/en/2017/03/target-blank-links-rel-noopener-performance-security/

[dju90]

I agree that this doesn't have to open on a new tab :)

[hacodeorg]

Removed. Thank you for the detailed explanation! It's really helpful.

[dju90]

This might be a basic styling technique, I don't know how to keep the height of the left and right box (image and message) the same when resizing. Any suggestions?

fwiw, code studio homepage banners suffer from the same mismatched height issue when the text on the right is too long.

The technique they use there for smaller screen sizes is to just get rid of the image on the left when width < 993px:

[dju90]

There is already a string key for "Join us" in en.yml - front_join_us_button. Should we use that instead of adding a new string key (hoc_live_join_us)? Not sure what the best practice is here :)

[hacodeorg]

Can we pre-emptively add the Spanish translation to es.yml and la.yml? I can be responsible for proactively uploading the changes to en.yml to Crowdin.

^ Added!

fwiw, code studio homepage banners suffer from the same mismatched height issue when the text on the right is too long.

^ Elijah's recommendation using display: table and display: table-cell fixes the problem. Furthermore, the elements inside each cell have to be aligned using vertical-align and text-align.

There is already a string key for "Join us" in en.yml - front_join_us_button. Should we use that instead of adding a new string key (hoc_live_join_us)? Not sure what the best practice is here :)

^ The 2 "Join Us" buttons are for two different actions. The original "Join Us" button brings users to the registration form at the middle of the page. The new "Join Us" button brings user to a Pardot landing page. My instinct is we should separate them because they can change in different ways in the future.