{"id":31174,"date":"2016-12-13T05:32:02","date_gmt":"2016-12-12T20:32:02","guid":{"rendered":"http:\/\/www.aaronsnowberger.com\/?p=31174"},"modified":"2024-07-05T21:14:14","modified_gmt":"2024-07-05T12:14:14","slug":"coding-an-advent-calendar-13","status":"publish","type":"post","link":"https:\/\/aaron.kr\/content\/case-study\/coding-an-advent-calendar-13\/","title":{"rendered":"Coding an Advent Calendar: Day 13"},"content":{"rendered":"

This year, I decided to create an Advent Calendar<\/a><\/strong> 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.<\/p>\n

Day 13<\/h2>\n
\n
Add JS handlers for “Today”<\/strong><\/dt>\n
“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”<\/strong> to work on – to make meaningful progress with small(er) modifications.<\/p>\n

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:<\/p>\n

    \n
  1. Use .getDate()<\/code><\/a>\u00a0from the JavaScript Date object to\u00a0get the numeric date for today<\/li>\n
  2. Use jQuery selectors to grab the page elements that need manipulated accordingly<\/li>\n
  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”)\n
      \n
    1. \"active\"<\/code>\u00a0= green\/red package<\/li>\n
    2. \"today\"<\/code>\u00a0= highlighted (darker) and scaled (larger)<\/li>\n
    3. \"disabled\"<\/code>\u00a0= grayed out<\/li>\n<\/ol>\n<\/li>\n
    4. Also, use jQuery\u00a0.unbind('click')<\/code> on any \"disabled\"<\/code>\u00a0footer packages to prevent clicking (and peeking at presents before the time has come)<\/li>\n<\/ol>\n<\/dd>\n
      Better styling of REST Posts<\/b><\/dt>\n
      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\u00a0particularly important for the responsiveness of this design as leaving the Posts underneath the large Gift box on smaller screens would crowd the screen.<\/p>\n

      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:<\/p>\n

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

        Notes for future development:<\/strong><\/p>\n

        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<\/code>\u00a0in the same way as the Gift boxes #carousel:<\/code><\/p>\n

          \n
        1. allow each Gift to take up the full width and height of the visible page area<\/li>\n
        2. allow each Post to take up the full width and height of the invisible page area to the bottom of the screen<\/li>\n<\/ol>\n

          This would easily line up both the Gift box and the Post for its date one on top of the other<\/strong>, so that when the Gift box is clicked and the #posts<\/code>\u00a0container 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.<\/p>\n

          One more consideration I’d made is how I might use React to ONLY (dynamically) load 3 Posts at once:<\/p>\n

            \n
          1. The currently selected Post (defaults to \"today\"<\/code>)<\/li>\n
          2. The previous Post and dated Gift<\/li>\n
          3. The next Post and dated Gift<\/li>\n<\/ol>\n

            This would allow both the Gift #carousel<\/code>\u00a0and the #posts<\/code>\u00a0containers to reduce their maximum necessary width to only 3 screen-lengths<\/strong> (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).<\/p>\n

            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 \u2193<\/dd>\n

            Begin\u00a0Ray Villalobos React Course<\/strong><\/dt>\n
            I decided to head back over to Lynda.com<\/a> to try to learn some more about React. There aren’t actually that many React courses on Lynda.com<\/a> 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:<\/p>\n

            Building a Web Interface with React.js<\/a><\/p><\/blockquote>\n

            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<\/code>\u00a0on my Windows PC but not getstorybook<\/code><\/a>, it will allow me to continue (branched) development both at work (Windows) and at home (Mac).<\/dd>\n<\/dl>\n

            \n

            Work Completed (to date)<\/h2>\n