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