Coding an Advent Calendar: Day 2

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 2

WP REST API with React.js (structure)

There’s been a lot of excitement recently about the WP REST API’s inclusion of content endpoints in WordPress 4.7 lately, so I’ve been wanting to learn about that and create something useful that utilizes it. I have built both a simple WordPress REST plugin and a WordPress REST theme in October this year, by following these Lynda.com courses:

1. WordPress REST API (WP-API): First Look by Morten Rand-Hendriksen
2. AngularJS and WordPress: Building a Single-Page Application by Roy Sivan

After building these projects, I wanted to do some more with the WP-API. Then, after Brian Krogsgard created a Codepen which utilizes React.js and the WP REST API (and one with Vue.js), I thought it would be a good thing to fork and learn from.

Color Palette

Initially, I set the colors for the CSS present to green and maroon but was quite unsatisfied with that combination. Eventually, after checking some other color palettes on ColourLovers.com and Dribbble.com, I settled on the following (similar to this Codepen):

• Dark Red: #9D1313
• Light Red: #F17259
• Dark Green: #0B8972
• Light Green: #65C0A5
• Dark Blue: #2A6FB0
• Light Blue: #CAE4F2

Along with various other alpha shades, tones, and tints of these colors as well as  Black  and White.

Sass CSS

Since the color palette I chose would need to be used and reused in the various elements I created on the page, I decided the best way to keep track of those (and easily call them up later) would be to switch my CSS stylesheet to Sass. I stored the color (and other) variables at the top of the stylesheet and was able to easily use them at will throughout the page.

I may yet do something else with Sass mixins or functions (like a @for loop), and I intend to rewrite the stylesheet using Sass nested selectors later.

Work Completed (to date)

• 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