Aaron

Graphic Design Portfolio

Coding an Advent Calendar: Day 15

Filed under: Case StudyComment

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 15

Begin creating JSON file for additional Advent data
As I continued watching Build a Web Interface with React.js, I decided to start trying to gradually implement each step of the process into my Advent Calendar Interface. The next step today was to create some JSON objects from which to load data (this is, after all, essentially what the WordPress REST API is doing anyway – now I’m just approaching this from a more foundational level to learn how this works at its most basic level).

Since I’d previously mentioned wanting to share my favorite Typography in this Advent Calendar (and I’ve also always enjoyed sharing Christmas music), I decided to create two JSON key-object pairs in each member of the JSON array (which I later expanded to three to include the specific WordPress Post ID for that day’s date). These are to be used to store various data related to each day for the Calendar:

{
  "wpPostId": "31190",
  "font": {
    "typeface": "Sonsie One",
    "googleFont": true,
    "url": "",
    "fontMsg": "Selected for the large, stylized numerals."
  },
  "video": {
    "provider": "youtube",
    "videoId": "l5Y0lVM-44k",
    "videoTitle": "Jordan Smith sings \"The Grinch\"",
    "videoMsg": "I've always enjoyed this song - and this is a great rendition of it."
  }
},

I figured I didn’t need to write entirely new WordPress blog posts for each bit of “Christmas cheer” I wanted to share (posts, fonts, and videos), but adding a short message would still be useful. Therefore, I added a key for the messages in each.

Attempt external load of JSON data
Ray builds his Web Interface in a localhost environment using Webpack, but I was building this one on a new Codepen. So, even though I attempted to load an external JSON file that included all my data like he did, it didn’t quite work out as expected.

Later, I re-built the page in React Storybook and found some of my problems:

  1. I had a few typos in my JSON file – including mismatched curly brackets
  2. I was attempting to pass the file as an Object of JSON Objects, rather than an Array of JSON Objects. I realized Objects without an identifying “key” value must be stored in an Array – if I want to store it in an Object, then I’d need to identify it with a “key” value of some kind: like
    { "advent": { "day1": { ... }, "day2": { ... } } }, etc.
  3. Additionally, I tried to add comments // comment in there, which doesn’t work
  4. And, I used single quotes in certain places rather than double quotes everywhere with backslash escaped double quotes for speech, for example

Initially, I tried to load the RAW version of a Gist I wrote for this JSON file on GitHub. But due to my errors, it obviously didn’t work. And Codepen – even the Developer Tools and console didn’t provide helpful enough messages to get this sorted. However, after putting it together in React Storybook, I think I got my JSON file mostly fixed, so it’ll be worth another try.

Work on style for additional Advent data
Finally, even though I couldn’t completely get the new React Component and external JSON file working properly together, I decided I could at least add some styling to the “proposed” elements. This is what the Featured Image for this Post shows – I used the same kind of styling for this Advent data that I’ve done for my WordPress blog Posts.

The following are some ideas for further development of this feature:

  • Create a CSS stocking that holds a “package” with the name of the font I’ve chosen. When hovered over, CSS animation pulls it from the stocking so it can be clicked to “open”. When opened, it displays the message.
  • Allow non-YouTube video IDs (Vimeo) and non-Google Fonts font URLS (Font Awesome, etc).
  • Include WordPress Post IDs for each date
  • Add a radio button Component that allows switching between loading WordPress blog Posts or the “Christmas content” (typography and videos)
  • Add a feature to display the entire Christmas playlist somewhere (using only my JSON data – and not an actual YouTube playlist)
  • Get each font to load on its own package and message

And just for fun, here’s the Christmas song I’ve chosen for today:

https://www.youtube.com/watch?v=l5Y0lVM-44k

Work Completed (to date)

  • December 15, 2016
    • Begin creating JSON file for additional Advent data
    • Attempt external load of JSON data
    • Work on style for additional Advent data
  • December 14, 2016
    • More individual styling of REST Posts
    • Break apart the project into Component pieces & create a Codepen Collection
    • Convert all the old HTML into real React Components
  • December 13, 2016
    • Add JS handlers for “Today”
    • Better styling of REST Posts
    • Begin Building a Web Interface with React.js (Lynda.com)
  • December 12, 2016
    • Storybook on Windows (FAIL)
    • Continue styling <Tag> Components
    • Begin responsive styles
  • December 11, 2016
    • Begin separating out CSS per Component
    • Attempt to load in static files & Sass
    • Begin coding a Tag for the Gifts
  • December 10, 2016
    • Finish Lynda.com videos
    • Get all React Components working in Storybook
    • Begin creating a Christmas Scene
  • December 9, 2016
    • Learn and use Create-React-App
    • Learn and use Storybook for developing React Components in isolation
    • Update npm and node and figure out my git process between Windows and Mac
  • December 8, 2016
    • Use React and Babel via CDN to get it working “locally”
    • Install React developer Tools for Chrome
    • Create very basic React.js pages to learn it
  • December 7, 2016
    • Pull post data with the WP REST API in WordPress core!!
    • Write structural code for the React Component to be rendered
    • Install and setup BabelJS to compile the React code
  • December 6, 2016
    • Add README.md
    • Add a GitHub Issue to hold usable images
    • Add LICENSE
  • December 5, 2016
    • Create a GitHub repository and full site files for easier management
    • Setup Grunt.js to compile my Sass into CSS
    • Begin blogging about the process
  • December 4, 2016
    • Countdown clock (JS Date class & jQuery Easing) with SVGs
    • Dynamic text output for Year based on the current date
    • CSS only slider (off by 5px each slide)
  • December 3, 2016
    • CSS bow & ribbon
    • Footer with FontAwesome presents
    • Hover, active, and “Christmas Day” styles for footer presents
  • December 2, 2016
    • React.js + Axios.js initial code structure
    • Color palette
    • CSS → Sass
  • December 1, 2016
    • Let it snow
    • Typography choices
    • CSS presents (first design)
    • Design notes menu

Leave a Reply