Coding an Advent Calendar: Day 10

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

  1. React IS actually incredibly fast
  2. React syntax may be new (to me) but doesn’t feel unfamiliar (it’s a kind of XML)
  3. React sites are built with React Components (each with props and state)
  4. Each React Component has a “lifecycle” (mounting, updating, and unmounting)
  5. 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:

  1. 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.
  2. 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 1

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 (for the next year, and the next year, and the next year, etc).

Day One

The goal here is to add a little bit (1-2 hours of coding) to this each day of December leading up to Christmas (at which point it should be a completed project). I may then add some bells and whistles in the week after Christmas as well to make it more fun for New Year’s too.

The following are some initial notes (and inspirational links) I made to help guide my design decisions as I started creating this site.


Design Decisions

JavaScript plugins
I searched through a number of Codepens and sites that were using a (surprisingly wide) variety of jQuery plugins to “Let it snow” on websites. I settled on a plugin from MadeByMagnitude.com that showed snowflakes at different sizes and fell lightly over my page. Here are others:

  1. jQuery Snowfall 1.5: Small, pixel-sized snowflakes that collect on top of objects
  2. Snowstorm: Round snowflakes that “blow in the wind” as your mouse moves
  3. Round snowflakes that disburse when moused over
  4. 3D snowing effect with Three.js
Typography
The first font I selected was for the headings of the site. I wanted something that would have good thick, stylized numerals that I could use for the dates I marked on the packages. Then, I wanted looked for a body font to complement it. I thought something with rounded edges would look nice, but I found a very nice old and rounded serif font that fit the Christmas theme very nicely as well.

advent-calendar

  1. Headings: Sonsie One
  2. Body – 1st try: Varela Round
  3. Body – 2nd try: Averia Serif Libre
  4. Body – 3rd try: Quicksand
  5. Body – 4th try: Nunito

And, actually, it’s because of my time spent choosing typefaces that I decided to use this Advent Calendar design to highlight some of my favorite all-time typefaces. In a separate blog series, I’ll post One typeface per day that I’ve really enjoyed using in other designs.

CSS Shapes
I’ve recently been working with SVGs and SVG animation, but I haven’t done a whole lot with CSS shapes (i.e. using a bunch of <div> elements and strange border-radius settings to draw something interesting). Therefore, I decided to create the Christmas presents (and ribbons) in pure CSS and HTML.
day1-present

Work Completed (to date)

  • December 1, 2016
    • Let it snow (jQuery plugin)
    • Typography choices
    • CSS presents (first design)
    • Design notes menu