Case Study Archives

Coding an Advent Calendar: Day 16

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 16

Disclaimer: I’ve been incredibly busy as of late with the following items and so haven’t had nearly as much time to work on this Advent Calendar as I’d have liked to.

Giving final tests at my university (8) – I teach ESL
Giving final tests at my high school (3) – I teach Graphic Design + Computer Science
Wrapping up year-end grading (and “reporting”) for 2 schools
Custom plugin development for a client in China
Custom theme development + website building for a client in Korea (due Tuesday morning)

I’d hoped to continue making 3 adjustments per day, but it just wasn’t possible yesterday. Still, if I can at least add 1 thing per day, I can keep up some momentum and see this project completed by Christmas.

Add Argyle CSS background pattern

A while back, I stumbled upon a very interesting Christmas background design on some company’s old 2014 website (I searched my browser history this morning for about an hour to try to find that site and grab a screenshot, but for the life of me, I couldn’t). What I remember most clearly about it was that the background had a very interesting pattern: Argyle (it also took me a while to remember the name of it).

Anyway, I thought it would be a cool addition to the background for my Posts, especially if it was created entirely in CSS. So, thanks to the help of CSS3 Patterns Gallery, I was able to find something great and modify it for my needs:

#posts {
  background-color: rgba(42,111,176,0.8);
  background-image:
    repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 120px),
    repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 120px),
    linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
    linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
  background-size: 138px 240px;
}

The result is what you see in the screenshot above!

Work Completed (to date)

December 16, 2016
- Add Argyle CSS background pattern to Post background
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

Coding an Advent Calendar: Day 15

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:

I had a few typos in my JSON file – including mismatched curly brackets
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.
Additionally, I tried to add comments // comment in there, which doesn’t work
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

Coding an Advent Calendar: Day 14

Day 14

Individual Post Styles

As I mentioned yesterday, I wanted to only show one WordPress post at a time when any package is clicked on. So, that’s what I set about doing today (as the Featured Image above shows). There are a few things I still need to take care of however:

IF the Gift clicked on doe NOT (yet) have a Post for that date, show some kind of “Coming Soon” message.
The Posts need to either be in a Carousel that mirrors the Gift carousel, OR they need to be dynamically loaded by the WP REST API and React based on the ID number (date) of the Gift clicked on.
The “prev” and “next” buttons need some style corrections (like text-alignment and z-index to place them OVER the Post border) as well as functionality.
Ideally, if a user clicks “prev” or “next”, the Post background (dark blue) would remain unchanged, and only the Posts would slide left or right (as a carousel).

Codepen Collection

I was still having trouble with my Gift carousel being off by a few pixels each time the carousel rotated, and then I tried to make the Gifts scale when hovered over:

Oops. What happened?

Well, I decided that since I started having THIS problem with scaling the Gifts AND I was already having trouble with getting the carousel to display and function properly, I probably had an error in my code somewhere that I was overlooking. Therefore, I decided to start breaking apart all the various pieces and components of this project to take a closer look at each of them individually.

It turns out the scale problem was happening because I didn’t have some kind of <div class="gift-wrapper"> surrounding my Gifts. So scale was scaling the CSS image from the center of itself (and thus pushing it out of the center of the page), rather than from the center of the wrapper which would allow it to remain centered in the page. Here’s what it looks like now with a <div class="gift-wrapper">:

In addition to the Gift Component, I also extracted out the Countdown Clock, and the individual Blog Post Component into separate Codepens and added them to a Collection:

From here, it allows me to continue working on the individual Components for the site even from my Windows computer. And once these pieces are perfected, I can then compile them all back together again as a “real” website.

React-ify All the Things!

So, since I’ve now separated out all the Components of the project, I decided it would be a great time to convert my existing HTML into true React Components. Now, the only HTML I have sitting in the Codepens above are:

<div id="react-component-name"></div>

All the markup is now handled entirely by React. And now, I feel like I’m ready to continue with Ray Villalobos’ Course: Building a Web Interface with React.js to learn better how I can get these various Component pieces to interact with each other better.

Side note: One additional thing I learned while working with these React Components is that: in order for jQuery (or any other JavaScript) to work and interact with these Components, React must be allowed to BUILD the Components on the page FIRST – before any other JavaScript functions are declared. Otherwise, jQuery will attempt to bind a "click" function (for example) on a tag that has not yet been created.

Work Completed (to date)

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

Coding an Advent Calendar: Day 13

Day 13

Add JS handlers for “Today”

“Today” I didn’t have tons of time to put in to work on this project. So, I chose some of the “low hanging fruit” to work on – to make meaningful progress with small(er) modifications.

One of these “low hanging fruit” was adding JavaScript handlers for properly displaying the proper packages based on the current date. Here’s the procedure:

Use .getDate() from the JavaScript Date object to get the numeric date for today
Use jQuery selectors to grab the page elements that need manipulated accordingly
Use conditionals to determine which classes or CSS to apply to each (particularly the Font Awesome gifts in the footer – as each can have 3 “states”)
1. "active" = green/red package
2. "today" = highlighted (darker) and scaled (larger)
3. "disabled" = grayed out
Also, use jQuery .unbind('click') on any "disabled" footer packages to prevent clicking (and peeking at presents before the time has come)

Better styling of REST Posts

Another of the “low hanging fruits” I decided to tackle today was the styling of the WordPress Posts called in with the REST API. This is particularly important for the responsiveness of this design as leaving the Posts underneath the large Gift box on smaller screens would crowd the screen.

I decided to make the WordPress Posts pop up on an “overlay” or “lightbox” style screen (as the Featured Image above shows) when the Gift is clicked on. Here are the steps I took to do this as well as thoughts for its further development:

Make the React Component #posts container act as the overlay (with dark blue background)
Add an extra <div className="inner"> in React to surround each Post’s content
Query the WP REST API for 25 Posts (with per_page=25)
Make the #posts container pushed off the page 100% to the bottom so that when the Gift is clicked, I apply a CSS animation to ease-in the top-margin back to 0 (which makes the #posts container slide in from the bottom
Make the entire dark blue background of the #posts container clickable – to rehide the container at the bottom of the page (slide down)

Notes for future development:

Although I’d originally considered just having React dynamically “react” to clicks on various boxes to display ONLY the Post from that date, I’m now considering styling #posts in the same way as the Gift boxes #carousel:

allow each Gift to take up the full width and height of the visible page area
allow each Post to take up the full width and height of the invisible page area to the bottom of the screen

This would easily line up both the Gift box and the Post for its date one on top of the other, so that when the Gift box is clicked and the #posts container animates upward, ONLY the Post for that date would be visible. This would also give me a little more freedom about how to style each Post individually.

One more consideration I’d made is how I might use React to ONLY (dynamically) load 3 Posts at once:

The currently selected Post (defaults to "today")
The previous Post and dated Gift
The next Post and dated Gift

This would allow both the Gift #carousel and the #posts containers to reduce their maximum necessary width to only 3 screen-lengths (instead of 25 screen-lengths) and therefore also probably reduce the “bugginess” that’s currently affecting my Carousel (about 5px extra left margin on EVERY subsequent date for some reason – which adds up to a HUGE space by the time Christmas comes).

But, I haven’t yet worked out how to do that with my limited knowledge of React.js and Components – and that’s what led me to the third step for today ↓

Begin Ray Villalobos React Course

I decided to head back over to Lynda.com to try to learn some more about React. There aren’t actually that many React courses on Lynda.com YET, but the one that looked most helpful for the kinds of ways I’m considering using React in this project was Ray Villalobos’ React Course:

Building a Web Interface with React.js

I’m looking forward to learning much more through this Course that I can put into practice in my Advent Calendar. PLUS, as I am able to use create-react-app on my Windows PC but not getstorybook, it will allow me to continue (branched) development both at work (Windows) and at home (Mac).

Work Completed (to date)

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

Coding an Advent Calendar: Day 12

Day 12

Storybook on Windows (FAIL)

So, after some good work on React Components in Storybook on my Mac over the weekend, it was back to the office on Monday – and my Windows computer.

Last week, I’d had trouble setting up Storybook on the Windows computer – it kept giving me a sh: start-storybook: command not found error. I found two GitHub issues that were similar to my problem:

and quickly read through the discussions there to see if I could fix my installation. It didn’t work.

Then, I tried a completely fresh installation of both create-react-app (successful) and getstorybook (less so) to see if that wouldn’t solve the problem and get me up and running on Windows. It didn’t. I got the same errors as before, so that seems to indicate that there may be some compatibility issues with Windows – or maybe I just screwed up something in my system setup from the start.

Well, rather than give this issue any more time (I’d already spent 1-2 hours on it), I decided to move back over to my Codepen version of the site and continue working on some CSS styling.

Continue styling <Tag> Components

As the Featured Image for this Post shows, I decided to continue working on the Tag (and other) CSS since Windows was being picky about my React Storybook configuration.

As far as the Tags go, currently they are CSS shapes, although I feel like there may be some limitations in how I want to handle interactivity with them as CSS shapes. For example: the Tags are currently styled like so:

A <div> box that contains the main text
A div:before that creates the triangular portion of the tag
A div:after that creates the rear Pac-man portion of the tag

So, technically, the Tag is 3 individual pieces as a CSS shape, so doing something like “flipping” it over to read the back (as I’ve done with a sample Lynda.com flip cards menu here) doesn’t seem like it will be very easy. So, I’ve considered two other options:

Create an SVG shape for the Tag (a single item)
Change how I show interactivity – like having some sort of “Christmas-y magic sparkle animation” flow over the To: text before displaying the From: text (and vice versa)

In addition to styling the Tags with CSS, I also added a "disabled" class to all the “gift boxes” in the footer whose dates have not yet come. Ideally, these will be linked up to the big (tagged) gifts and will be controlled by JavaScript (jQuery or React – whichever I work out) to change the date as the countdown clock changes. (i.e. when the clock reads 00:00:01 second remaining for a day, then flips over to the next day, ideally, the "active" Gift would also change.)

Also, the "disabled" tag should prevent users from being able to click on any of those Gifts to view their days “in advance” (and scrolling to dates later than the present date should also be disallowed).

Begin Responsive Styles

Finally, I decided to work on Responsive styling a little bit since the computer I did most of this coding work on in the afternoon had a screen resolution of 1024x768px (and at that size the whole Codepen looked pretty ugly). The following are some of the considerations I need to make when making this site responsive:

Gifts in the footer
1. Reduce the font size (DONE)
2. or make the footer scrollable,
3. or only display only the a few gifts (like some WordPress paging menus with [Prev] ... [12] [13] [14] ... [Next] buttons)
Big gifts
1. Reduce the size on smaller screens
2. or scale them smaller
3. and/or remove/reposition the Tag
Countdown clock
1. Reduce the size
2. or stack it vertically to the left or right of the gift
3. or divide it in two and stack half vertically to the left, half to the right
4. or remove much of the styling (including the background circles) and turn it into a kind of smaller “digital clock” (as opposed to analog)
Header and top menu
1. Reduce font size and height (DONE)
2. Also use a “hamburger” style menu button at very small sizes
React-loading Blog Posts
1. Still need to figure out how I want these styled initially anyway (title only, title and excerpt, or what) – after that we can figure out responsive styling

Work Completed (to date)

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

Coding an Advent Calendar: Day 11

Day 11

Begin separating out CSS per Component

The way this create-react-app with Webpack configuration works is that in each ReactJS Component, I need to import the other Components and files that each depends on. For example: import React from 'react' is the first command at the top of every Component in order to load in the ReactJS library to build my Components. The same is true for CSS files.

So, rather than calling import './App.css' in every single file and controlling them all with a single stylesheet, I started breaking the main stylesheet down into separate files that handle each Component individually. In other words, my folder structure went from this:

/js
 |- GiftIcon.js
 |- Gift.js
 |- Tag.js
 |- BlogPost.js
 |- Scene.js
App.css

To this:

/js
 |- GiftIcon.js
 |- Gift.js
 |- Tag.js
 |- BlogPost.js
 |- Scene.js
/css
 |- GiftIcon.css
 |- Gift.css
 |- Tag.css
 |- BlogPost.css
 |- Scene.css
App.css

In some ways, this will now work in a similar manner that my previous Sass configuration was setup to work as. Basically, I wanted to use Sass to subdivide out all the various Component’s CSS into separate files (for easier file management) and then let the Grunt compile them all back together into my main style.css file that would be used by the site.

The only caveat is that I can no longer use Sass variables and mixins (as it stands now). This may or may not prove to be a “deal breaker.” I honestly love the way Sass makes it easy to manage variables (like brand colors or font-stacks) and mixins (like specific component styles – say, buttons, form elements, or boxes of content).

Attempt to load in static files & Sass

There may yet be a way to get Sass back into my project – and I’ll continue investigating this as time goes on. For now, I attempted two solutions to load in static files (like Google Font links) and add Sass back in. Both seem to have not worked as intended, but I may have missed something in the configuration:

Custom Webpack config
1. This is supposed to help get Sass back into the project. The webpage states: Once you create this webpack.config.js file, Storybook won’t load the default Webpack config other than loading JS files with the Babel loader.
Add Custom Head tags
1. The instructions here are to create a head.html file that resides inside the Storybook config directory and should inject these tags to the iframe where your components are rendered.
2. Google Fonts: However, I couldn’t get Google Font links to work immediately, so I’ll need to do some more investigation about that. For now, I’ve just added those with an @import command at the top of my stylesheets.
3. Font Awesome: I’ve also stored the Font Awesome files and CSS in project directory and used another @import command to load in Font Awesome.

Begin coding a Tag for the Gifts

While working through the Learn React.js: The Basics videos, there were some that demostrated how to create interactive Components (the project in that Course was to create a Bulletin Board filled with Post-it Notes). So, in a similar vein, I decided to add Gift Tags to the Gifts that would allow users to address them and either Save the names entered onto the Tags, or possibly “Send” them via email or social network. Here’s the plan so far:

Each Gift Component has either a) no tag with the option to add one, or b) an unaddressed, empty tag
The Tag Component can be addressed with a To: and From: address
On :hover, the Tag will flip over to reveal From: (it will show To: on the front by default)
To: will provide space for a name, and an optional email address (or possibly social network URL)
From: will default to “Santa Clause” or “Saint Nick” or “St. Nicholas” (assigned at random), but can be modified and saved
Each Tag will (maybe) contain social network buttons (Facebook, Twitter, and Email primarily) to which users can send that particular (Gift – i.e. Blog Post)

I haven’t yet worked out HOW the sending of Blog Posts should be handled with the Tag Component, but so far, this is the roadmap and “ideal” plan.

Work Completed (to date)

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

Coding an Advent Calendar: Day 10

Day 10

Finish Lynda.com videos

Today I finished the Lynda.com Course Learn React.js: The Basics. Here are a few of the biggest takeaways from the Course:

React IS actually incredibly fast
React syntax may be new (to me) but doesn’t feel unfamiliar (it’s a kind of XML)
React sites are built with React Components (each with props and state)
Each React Component has a “lifecycle” (mounting, updating, and unmounting)
React Components can utilize parent-child relationships

Get all React Components working

After a bit of debugging and editing, I was able to get (my version of) each of the React Components in the Lynda.com Course working – including in Storybook. I’ve also updated by public Gist on the basics to include correct syntax and comments.

I noticed two of my most common errors in my original React syntax were:

If you want to string together functions separated by commas, like an Object (i.e. getInitialState() {...}, componentWillMount() {...}, render() {...}, then you MUST use the React Native syntax (var MyComponent = React.createClass() {...}) and NOT ES6 syntax nor the stateless functional syntax.
For some reason, I’d accidentally had an extra closing curly bracket } after my render() function – this was producing the “horrible error message” I mentioned yesterday. But at least now I learned what to look for the next time.

Begin creating a Christmas Scene

Finally, I started putting everything together into a kind of Christmas “scene” (as evidenced by the Featured Image on this Post). I DEFINITELY feel like React is useful for creating parent-child relationships between Components and for allowing me to dynamically create, add, or remove Components based on the code.

For example, the image above was created using code for Scene.js (the parent Component) and Gift.js (the child Component). Scene.js called Gift.js 25 times and looped through it to create 25 separate Components – each with its own unique ID and properties. This will definitely prove to be useful when I start looking into pulling in blog Posts from WordPress using the WP REST API.

Work Completed (to date)

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

Coding an Advent Calendar: Day 9 (5 React Configurations)

Day 9

create-react-app

Yesterday I was having some trouble with my React code functioning properly with the in-browser Babel compilation. Notably, I kept running into this error:

which clearly isn’t very helpful for debugging my code.

For one thing, sometimes the error message seemed to point to an empty line! I’d read on StackOverflow (somewhere) that perhaps that indicated the error was actually in the line ABOVE it, but it wasn’t. And I still couldn’t find where there was a problem no matter how much I looked, nor how many times I rewrote the code.

Finally I decided enough was enough and I was going to have to include Babel and all the other dependencies inside my project to compile everything there, rather than continuing to import Babel via CDN and try to compile in the browser. I figured if nothing else, at least I’d get some better error messages with code that was pre-compiled before being loaded by the browser.

So, on the suggestion of the Lynda.com video series I’ve been watching, I decided to create a totally NEW folder and install create-react-app via npm to help out.

npm install -g create-react-app
create-react-app advent-calendar
cd advent-calendar
npm start

Fortunately, after installing it and running the npm start process to watch and compile my files, I was immediately greeted with a MUCH more helpful big, bold, and beautiful (descriptive) full-screen error message:

This allowed me to properly diagnose my problems, debug the code, and get everything running smoothly. At first.

React Storybook

Actually, the FOUR setups I tried are very different:

React + Axios in a Codepen
1. Incredibly painless as all the configuration is provided by Codepen
2. Easy to get started due to the number and quality of samples available
3. Only requires linking to some scripts (react.js and axios.js) and enabling Babel as your JS preprocessor
4. DOESN’T actually teach you a lot about how to set these technologies up and use them in a real-world project
React + Babel + Grunt
1. It requires a complete manual setup (installing everything you want via npm)
2. More difficult for a first attempt to get everything configured properly
3. But allows more precise control over exactly what you include in the project
React and Babel via CDN
1. It’s as simple as copying in a few URLs as <link> tags
2. Easy to get started, but provides horrible error messages that are little help
3. Requires NO node modules nor unique file/folder structure – you could build everything out as a regular static page (index.html, style.css, and React scripts before the closing <body> tag)
React with create-react-app and webpack
1. Super easy installation and process to get things up and running via npm (see code snippet above)
2. Much more helpful error messages (like the one in black above) that can help you easily diagnose and fix problems with your code
3. Includes TONS of node modules – many of which you may never need
4. Requires its own file/folder structure that may be confusing at first (all your .css files and React components are abstracted out into a /src folder that will be compiled into .css and .js files with a hash string appended to the end like a version number (app.d587bbd6e38337f5accd.js) and put in the /public folder when you do npm run build to get it ready for deployment)
5. Requires digging deeper into more technologies you may or may not have ever heard of before. For example, for me, I’ve only now ever HEARD of:
  1. webpack
  2. flux
  3. redux
  4. storybook

I haven’t even visited the websites for webpack, flux, or redux yet, but storybook instantly had me interested because of what it allows you to do: “Developing Components in Isolation.” I knew immediately that this was something I’d want to try – since I have multiple Components I will be developing:

First of all, Test Components to help learn React better
Secondly, a Gift Component for my CSS gift shapes
Also, a Post Component for blog posts loaded with the WP REST API
Possibly also other Christmas Components – like a Santa, or tree, or reindeer

So, I set about the work of figuring out how to get Storybook up and running (for my 5th React setup). A few things I noticed about Storybook:

React + Storybook
1. create-react-app uses npm start to run a server though port :3000
2. Storybook defaults to run a server through either port :9001 or :9009
3. Adding static .css or .js files can be a pain because of the configuration and how Storybook compiles things. There are really only two ways to do it:
  1. Add Custom <head> tags
  2. Serve static files via imports or a directory
  3. I ended up just using the CSS @import rule to load my Google Fonts
4. Storybook was designed to develop Components in isolation – and it’s really a great way to perfect individual parts before putting them all together again in the main App
5. Adding in additional Stories is pretty straightforward once you get through the configuration

Update npm and node and figure out git

One of my biggest issues throughout developing this project has been that I have two completely different setups to work with throughout the day:

At work: Windows 7
At home: MacOS

That means that no matter where I go, for half the day at least, my configuration is going to be totally different. So, whenever I spend a few hours in one location learning how to setup and configure some part of my setup, I must then (at least partially) repeat that process in the other location later that day. It can be a little monotonous, but honestly the repetition is probably really good for my learning (that, and blogging about it).

Three things that seem like they may be larger “speed bumps” than they probably should be are: npm, node, and git

At work: after installing create-react-app and the various other parts I needed, I kept noticing that the Command Line was prompting me with warnings about my (outdated) versions of npm and node. I didn’t really think much of it, but noticed that the installation of those modules took significant time (I ate lunch during the process)
At home: When I came home later in the evening, I started getting the same errors, but again thought nothing of it – until my Mac froze up (it happens sometimes when I have a bunch of programs and Chrome tabs open and I haven’t shut down in a month…) So, after restarting the Mac, I decided to immediately update npm and node and WOW! what a difference that made! The installation of create-react-app and the Node modules FLEW compared to earlier. Below is the series of (Mac) commands I used in the Terminal to update them:

npm install npm@latest -g
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Finally, git. At first, I was worried that with the two different setups on the two different systems that git would prove to be problematic. I was worried that I might have to either memorize the differences in files and setup between Windows and Mac, or create two separate package.json and other relevant files.

However, after looking over the config files from both my Windows and Mac setups (I set up two completely different folders with the files from each system), I no longer think that’s the case. They look nearly identical and a few minor version number changes in the dependencies won’t really matter (down a version number).

So… Day 9 was a LONG day (which is why this blog post is long – and why I’m “technically” publishing it on Day 10), but it was a good day – not entirely productive in code, but very helpful in my learning more about React and how to work with it.

Today, I’m planning to finish React.js: The Basics on Lynda.com, create some new Components, possibly add in Sass (again) to my create-react-app project, and possibly add some interactivity to my Christmas Gift Component. Stay tuned!~

Work Completed (to date)

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

Coding an Advent Calendar: Day 8

Day 8

Use React and Babel via CDN

Since yesterday I was unable to get React and Babel fully working on my stand-alone localhost site, I decided to take a step backward today and try to get a clearer understanding of what was required to do so. Therefore, I started watching:

Learn React.js: The Basics on Lynda.com

I decided to take a slow, step-by-step approach to learning React from the ground up, which meant one of the first steps I did was load in React and Babel via CDN:

React: https://unpkg.com/react@15/dist/react.js
ReactDOM: https://unpkg.com/react-dom@15/dist/react-dom.js
Babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js (the author states that Babel 6.0 and above won’t work as in-browser compilers)

This allowed me to at least start getting my site to render without JavaScript syntax errors.

Install React developer Tools for Chrome

After loading React and Babel, I also found it helpful to install the 2 React developer tools to Chrome that Eve Porcello mentioned on the Lynda videos:

React Detector: detects whether a website is using React or not, and lights up bright blue if so (install it, and then visit AirBnB to see it working)
React Developer Tools: adds an additional tab labeled “React” to the F12 Chrome Developer Tools and allows you to view React Components and debug things in the browser

I found both of these to be very helpful tools.

Create very basic React.js pages

Finally, as I began working through the Lynda.com videos, I thought about how I might apply the concepts to my own Advent Calendar project.

I also created a public Gist on GitHub to house my work.

Then, I started testing the various iterations of my project (still needs more testing) in a separate standalone HTML file in my localhost. The screenshot above is a result of this work.

I can see there is still a lot to learn about React, but so far it’s been quite interesting. It’s very speedy, incredibly versatile, and the syntax is pretty straightforward. I’ll continue on this journey tomorrow.

Work Completed (to date)

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

Coding an Advent Calendar: Day 7 (REST API + ReactJS)

Day 7

WordPress 4.7 “Vaughan”

WP REST API!!

Today is the big day! WordPress 4.7 launched this morning (in Korea) with the WordPress REST API content endpoints included in core (and a pretty great updated REST API Developer Reference as well). So… you know what that means. Today is the day I get the Advent Calendar to pull my blog posts with the (core) WP REST API! There are X steps:

Revisit Day 2 where I set up the basic infrastructure for ReactJS & REST
Update to WordPress 4.7 – where REST endpoints will work immediately (cool)
Install Postman for Chrome* to test calls to the REST API
Configure the REST URL (I have mine pull from THIS Category)
Add it to the Codepen
Watch the magic happen!! (…almost)

*Side note: Be sure to get Postman’s output as JSON for an easier view.

React Component

Actually, I hadn’t already created my React function to render the retrieved Component. I’d only filled in a blank <div> as a placeholder. So, the next step was to create an HTML structure in the React class that would receive the array of Posts from my REST API query and render them to the page.

Then, I added some basic CSS styling to make them look a little better on the page after loading.

BabelJS

Finally, after setting everything up and Saving the Codepen, I noticed a small error in my JavaScript console in Chrome: "Unexpected token <". That’s weird, I thought. But then I noticed that the color highlighting in the Codepen was incorrect after a certain point – and the posts from React weren’t displaying quite properly. I checked back at the other Codepens I’d referenced that were using React to load JSON data and noticed that many were using the Babel JavaScript preprocessor. I thought, what the heck, added it to my project and *BAM!* the magic truly DID begin! Smooth loading of posts on the Codepen directly from this blog!

But… that’s Codepen. If I wanted to continue local development, it wasn’t going to be nearly so easy as that. I’d never heard of BabelJS before this, so I started investigating it and found out that it is often used with React and other scripts to create modern JS like ES2016. I realized I’d need to install the Node Modules for React, Babel, and Grunt to run all of these together, so my research and work began. There were X steps to complete this process:

Run npm install --save-dev babel-cli babel-preset-latest babel-preset-react grunt-babel to install all the necessary development dependencies
Run npm install --save react react-dom to save the necessary project dependencies
Update package.json to recognize babel (rather than creating a .babelrc file)
Update Gruntfile.js to “watch” for changes to my React app’s JS file and run the compile task
Separate out my React Component code from the functions.js file to better manage the two separately
Also, include React and React-DOM in the React app’s JS file

So far, I’ve been able to get Grunt to successfully “watch” for changes to my Sass files and my ReactJS files and run their compilation tasks. But, now I’m getting an Uncaught ReferenceError: require is not defined(...) error. Well, looks like fixing this is on the schedule for tomorrow!~

References

The following are some React and BabelJS references I was perusing today as I tried to get things to work. I haven’t finished reading through all of them yet:

Additionally, I just stumbled across a Lynda.com video that addresses using BabelJS to compile React. In this video, Eve Porcello shows how you can do in-browser Babel compilation by importing the script via a CDN, then using <script type="text/babel"> tags around any code you want compiled by Babel.

She does note that in-browser compilation is slow – and shouldn’t be used in a production environment. So, it’s good that I’ve started getting Babel set up as a module to precompile my JS before using it in the webpage.

Work Completed (to date)

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