Category: Case Study

Coding an Advent Calendar: Day 6

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 6

Add README.md
Actually, part of Day 5’s work of setting up Grunt, Sass, and Autoprefixer* for development carried over into Day 6. So, I did little more coding and more work on the overall project housed on GitHub. Part of this work included adding a README file that would stand as the GitHub project’s “front page”. There are at least 3 things I like to include in GitHub README files:

  1. A main project image (and possibly some other images)
  2. A description of the project: what it is and how to use it
  3. A Changelog that shows the various updates to the project over time (I have considered adding this as a separate CHANGELOG.md file, but decided for the time being to leave it in my “front page” README.md)

*Actually, Autoprefixer is now deprecated in favor of grunt-postcss so I will probably take some time to set that up later as well.

Add a GitHub Issue for Images
Adding an image to a GitHub README is relatively easy: all you need is a link to an image that already resides online. You can add this with a ! in front of the image link:

![day4](https://cloud.githubusercontent.com/assets/6644259/20913450/5ac0b6d8-bbbb-11e6-9a82-2d8eed8abb9f.png)

However, if you do not HAVE an image online yet, and you were intending to use an image directly from the GitHub repository itself, you may run into some trouble because you can’t just “Upload Image” anywhere easily. But there is one easy “hack” I stumbled across online some time ago that I’ve been using for a while:

  1. Create a GitHub Issue and upload an image there. GitHub will let you drag and drop an image from your desktop into the Issue reporter textarea, and from there you can grab the link to the uploaded image to use in your README.

This could be a little “messy” because now you will always have at least 1 Issue open for that repository (unless you move your image link offsite), but it works. (I’d tried to do the same thing with GitHub’s Wiki for the repository, but it also won’t allow you to upload an image. Rather it requests the Image URL.)

Add LICENSE  
Finally, I decided to add a LICENSE to the repository.

Since I’ve been developing WordPress stuff for many years now, I’ve come to know and enjoy the GPL license quite a bit. But, I didn’t know if I wanted to just go with that right off the bat, or if perhaps there was something else I might choose. So, I started investigating things and stumbled upon an excellent website that let me compare the different Open Source licenses easily. I considered two choices:

gpl-license mit-license

I decided to use the MIT License as it seemed to be a little simpler and had less Conditions.

*Side note: After getting my first WordPress theme approved for the WordPress.org Theme Directory, I realized how important keeping track of the resources you use in a project is. Before approval, I needed to list all the projects, sources, and licenses of every additional piece of software or code I used in my theme (like any Google Fonts I used, FontAwesome, the Foundation Framework, and so on). This is something I may decide is important to do for this project as well. 

Work Completed (to date)

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

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 4

JavaScript Countdown clock with SVGs
After browsing some other Codepens tagged "advent", and "calendar", and "clock", I decided to add a countdown clock to my calendar. I had a few ideas:

  1. Make SVG presents that would get filled to a higher percentage as the time toward Christmas approached (like a fund-raising campaign’s thermometer)
  2. Make SVG circles that filled in a clockwise manner – as a countUP to Christmas (Christmas Day would show all four circles as fully filled)
  3. Do the traditional countDOWN clock, making the SVGs reduce their fill percentage as the time went on

I settled on #3 and used CSS-Tricks.com’s How to Make Charts with SVG post and Codepen to help create the clocks (I borrowed the code from Chris Johnson’s Codepen which uses jQuery Easing to switch the numbers). I also made the stroke-dasharray (basically, the circle’s border) value equal the full radius of the circle. This makes it look more like a pie chart or clock hand that extends outward from the center of the clock.

Assign Year text dynamically
Using JavaScript’s built-in Date() class, I made JS retrieve the current year and write that text to the page in the “Remaining ’til Christmas …” heading (I’d also originally placed it in the “Advent Calendar” heading as well, but thought it was too much). I then build the FULL JavaScript date using the current year’s value and pass THAT into the countdown clock function.

Thus, theoretically, the clock should start all over again on January 1 EACH year with a value of 358 or so days. I guess we’ll see in about a month~~

CSS-only slider  
The next step was to create a slider that would literally “slide” through the daily presents as I clicked on the available ones, or the “previous” and “next” arrows. Again, I looked at many CSS sliders on Codepen, and used one as inspiration to help make my slider functional as well.

The only problem was that, for some reason, something in my CSS or design was causing each “slide” to be offset an extra 5px to the right. I’d used 100% (or even 100vw) width for the slides – which was 1089px at that time. Yet, when I scrolled to the following slide, the offset was 1094px – and this kept up for ALL 25 days! (Needless to say, that was a pretty noticable mistake by the time Christmas came ’round.)

So, this is an area that will need to be revisited. I have 3 options so far:

  1. Use Bootstrap: except I haven’t yet used it, so it messes up some of my CSS when I import those CSS styles – and I don’t want to depend on it for everything
  2. Use hidden input radio buttons: I’ve seen this done in some other sliders and it looks like it might provide a good option
  3. Use JavaScript: Obviously, JavaScript would give me a little more control over ALL the pieces of this slider (like the presents underneath, and the “previous/next” buttons) – so I may eventually need to use some JS anyway

Work Completed (to date)

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

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 3

CSS bow & ribbon
I wanted to make a bow for the present entirely out of CSS, so I went back to CSS-Tricks.com’s “The Shapes of CSS” example page and found an infinity loop. I created an extra <div> for it and played around with the code a bit to get the shape right (flatter, less round, slightly more angled like it was sitting on top of the box), then changed the border colors to create a multi-colored look.

For the ribbon underneath the bow (I decided a bow alone looked a little weird), I used some similar transform: rotate() techniques from the bow and also applied different border colors to the shape to give it a similar multi-colored look like the bow.

Footer
From the beginning of this project, I knew I wanted to create some kind of horizontal, side-scrolling effect: either to display the presents in a type of slideshow, or to scroll the background as a white winter wonderland scene. I decided to add FontAwesome gift icons denoting each day leading up to Christmas in the footer that people could click on to open the present for that day.

A couple ideas for continued development:

  • Make the presents either disabled or inactive (non-clickable – error message pops up) if that day has not yet begun
  • Add small graphic hills, trees, or reindeer in the background, just above the footer (here’s some inspiration from SitePoint’s previous Christmas site)
:hover, :active, "christmas" CSS styles  
I also added some special CSS classes to help denote the current day (active), the hovered day (hover), and Christmas Day ("christmas").

References

Here are some more good resources for finding help with CSS Shapes:

  1. CSS-Tricks.com: The Shapes of CSS
  2. EnjoyCSS.com Shapes Gallery
  3. CSSPortal: Shapes
  4. CSS clip-path Maker
  5. Creating Non-Rectangular Layouts With CSS Shapes
  6. Getting Started with CSS Shapes: Wrapping content around custom paths

The last two are (extensive) blog articles that dive deep into creating non-rectangular layouts on webpages using CSS shapes.

Work Completed (to date)

  • 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