Coding an Advent Calendar: Day 11

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 11

Begin separating out CSS per Component
The way this create-react-app with Webpack configuration works is that in each ReactJS Component, I need to import the other Components and files that each depends on. For example: import React from 'react' is the first command at the top of every Component in order to load in the ReactJS library to build my Components. The same is true for CSS files.

So, rather than calling import './App.css' in every single file and controlling them all with a single stylesheet, I started breaking the main stylesheet down into separate files that handle each Component individually. In other words, my folder structure went from this:

/js
 |- GiftIcon.js
 |- Gift.js
 |- Tag.js
 |- BlogPost.js
 |- Scene.js
App.css

To this:

/js
 |- GiftIcon.js
 |- Gift.js
 |- Tag.js
 |- BlogPost.js
 |- Scene.js
/css
 |- GiftIcon.css
 |- Gift.css
 |- Tag.css
 |- BlogPost.css
 |- Scene.css
App.css

In some ways, this will now work in a similar manner that my previous Sass configuration was setup to work as. Basically, I wanted to use Sass to subdivide out all the various Component’s CSS into separate files (for easier file management) and then let the Grunt compile them all back together into my main style.css file that would be used by the site.

The only caveat is that I can no longer use Sass variables and mixins (as it stands now). This may or may not prove to be a “deal breaker.” I honestly love the way Sass makes it easy to manage variables (like brand colors or font-stacks) and mixins (like specific component styles – say, buttons, form elements, or boxes of content).

Attempt to load in static files & Sass
There may yet be a way to get Sass back into my project – and I’ll continue investigating this as time goes on. For now, I attempted two solutions to load in static files (like Google Font links) and add Sass back in. Both seem to have not worked as intended, but I may have missed something in the configuration:

  1. Custom Webpack config
    1. This is supposed to help get Sass back into the project. The webpage states: Once you create this webpack.config.js file, Storybook won’t load the default Webpack config other than loading JS files with the Babel loader.
  2. Add Custom Head tags
    1. The instructions here are to create a head.html file that resides inside the Storybook config directory and should inject these tags to the iframe where your components are rendered.
    2. Google Fonts: However, I couldn’t get Google Font links to work immediately, so I’ll need to do some more investigation about that. For now, I’ve just added those with an @import command at the top of my stylesheets.
    3. Font Awesome: I’ve also stored the Font Awesome files and CSS in project directory and used another @import command to load in Font Awesome.
Begin coding a Tag for the Gifts  

While working through the Learn React.js: The Basics videos, there were some that demostrated how to create interactive Components (the project in that Course was to create a Bulletin Board filled with Post-it Notes). So, in a similar vein, I decided to add Gift Tags to the Gifts that would allow users to address them and either Save the names entered onto the Tags, or possibly “Send” them via email or social network. Here’s the plan so far:

  1. Each Gift Component has either a) no tag with the option to add one, or b) an unaddressed, empty tag
  2. The Tag Component can be addressed with a To: and From: address
  3. On :hover, the Tag will flip over to reveal From: (it will show To: on the front by default)
  4. To: will provide space for a name, and an optional email address (or possibly social network URL)
  5. From: will default to “Santa Clause” or “Saint Nick” or “St. Nicholas” (assigned at random), but can be modified and saved
  6. Each Tag will (maybe) contain social network buttons (Facebook, Twitter, and Email primarily) to which users can send that particular (Gift – i.e. Blog Post)

I haven’t yet worked out HOW the sending of Blog Posts should be handled with the Tag Component, but so far, this is the roadmap and “ideal” plan.


Work Completed (to date)

  • 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 5 (Maintenance)

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

GitHub Repository
After coding for 1-2 hours each day for 4 days, I found my code getting quite long:

  1. HTML: 344 lines
  2. SCSS: 602 lines
  3. JS: 187 lines

This quickly starts to become a lot to manage within a Codepen – given that the 3 editors are all small boxes to the side of the screen. I prefer to work on bigger projects in a good code editor like Atom or Brackets (I use Netbeans for really big projects like WordPress themes or plugins). So, I decided it was a good time to upgrade the project to “bigger” and continue development primarily in Atom (which has a convenient Live Server package that really aids in development).

I’ll continue to update the Codepen with my code updates – at least for now.

Setup a Grunt Taskrunner
Codepens are nice in that the Sass, or Less, or PostCSS is instantly compiled and usable as CSS as soon as you write it. But, things don’t work like that in stand-alone projects. So my first step after pulling my files from Codepen and creating a GitHub repository for them was to start preparing to use Grunt.js as a taskrunner to watch and compile my Sass into web-browser-readable CSS. Here are the steps I took (which will be outlined in further detail in a later post):

  1. In the global environment
    1. Install Node.js (Windows)
    2. Install Ruby (Windows)
    3. Install Sass: gem install sass
    4. Install Grunt-cli: npm install -g grunt-cli
  2. In the project folder
    1. git init, commit, and push to remote repository
    2. npm init to setup package.json which keeps track of dependencies
    3. npm install grunt-contrib-sass --save-dev installs the package locally (without --save-dev it would be a global installation)
    4. npm install grunt-contrib-watch --save-dev
    5. npm install grunt-autoprefixer --save-dev to autoprefix the CSS
    6. Create the Gruntfile.js that controls grunt and the Sass file compilation
    7. Run grunt from the command line (in my project folder) to start the taskrunner and allow me to modify my Sass files (CTRL + C ends the taskrunner)

For more information on this process, check out Morten Rand-Hendriksen’s helpful Course @Lynda.com:

WordPress: Developing with Sass and Grunt.js

Begin blogging  
Finally, in order to begin attempting to get the WP-API running well on this site, I needed some content on a WordPress site to begin pulling from – hence the creation of this series of blog posts.

As mentioned previously, I’m also hoping to create a 25-day series for Advent that highlights my favorite typefaces. The goal is to allow users to switch the series of posts that the REST API pulls from. They’d be able to either load the “Coding an Advent Calendar” series, or the “Advent Typography” series.


Work Completed (to date)

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

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