Tag: WP REST API

Coding an Advent Calendar: Day 13

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 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:

  1. Use .getDate() from the JavaScript Date object to get the numeric date for today
  2. Use jQuery selectors to grab the page elements that need manipulated accordingly
  3. 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
  4. 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:

  1. Make the React Component #posts container act as the overlay (with dark blue background)
  2. Add an extra <div className="inner"> in React to surround each Post’s content
  3. Query the WP REST API for 25 Posts (with per_page=25)
  4. 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
  5. 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:

  1. allow each Gift to take up the full width and height of the visible page area
  2. 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:

  1. The currently selected Post (defaults to "today")
  2. The previous Post and dated Gift
  3. 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 7 (REST API + ReactJS)

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 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:

  1. Revisit Day 2 where I set up the basic infrastructure for ReactJS & REST
  2. Update to WordPress 4.7 – where REST endpoints will work immediately (cool)
  3. Install Postman for Chrome* to test calls to the REST API
  4. Configure the REST URL (I have mine pull from THIS Category)
  5. Add it to the Codepen
  6. 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:

  1. Run npm install --save-dev babel-cli babel-preset-latest babel-preset-react grunt-babel to install all the necessary development dependencies
  2. Run npm install --save react react-dom to save the necessary project dependencies
  3. Update package.json to recognize babel (rather than creating a .babelrc file)
  4. Update Gruntfile.js to “watch” for changes to my React app’s JS file and run the compile task
  5. Separate out my React Component code from the functions.js file to better manage the two separately
  6. 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:

  1. Official React site: A JavaScript Library for Building User Interfaces
  2. Writing React components as CommonJS modules
  3. NPM: A RequireJS plugin for loading jsx in require.js and r.js
  4. The React.js Way: Getting Started Tutorial
  5. 9 things every React.js beginner should know
  6. ES6 with Babel.JS
  7. Get To Know Babel The JavaScript Compiler Tutorial
  8. Setting up an ES6 Project Using Babel and Browserify
  9. Babel + Grunt === ES6 Now!
  10. ES6 with Babel & Grunt

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