Aaron

Graphic Design Portfolio

Coding an Advent Calendar: Day 12

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

  1. ERR! on npm run storybook
  2. sh: start-storybook: command not found

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:

  1. A <div> box that contains the main text
  2. A div:before that creates the triangular portion of the tag
  3. 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:

  1. Create an SVG shape for the Tag (a single item)
  2. 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:

  1. 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)
  2. Big gifts
    1. Reduce the size on smaller screens
    2. or scale them smaller
    3. and/or remove/reposition the Tag
  3. 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)
  4. Header and top menu
    1. Reduce font size and height (DONE)
    2. Also use a “hamburger” style menu button at very small sizes
  5. 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

Leave a Reply