DEV Community

Paul
Paul

Posted on

Hacktoberfest done, twice over!

Alt Text

I'm happy to say that I've completed Hacktoberfest for the second year in a row, and my t-shirt is ordered! If I might toot my own horn a bit, I want to highlight a few PRs I'm happy with.

πŸ‘‰ Pass all options from Grunt plugin to PurgeCSS

I recently introduced PurgeCSS to my team at work after demonstrating how we can trim down our stylesheets. We use Bootstrap for larger projects, and I was able to reduce a smaller project's stylesheet from over 200KB to just under 40KB. The agreement to include it in future projects was unanimous! πŸ‘

Anyway, back to the PR. (Sorry, I tend to ramble.) We use Grunt (yes, even with the newer, shinier toys), and I discovered a bug in grunt-purgecss where not all the options were being passed down into the core PostCSS plugin. This PR fixes it. πŸ‘Œ

πŸ‘‰ Remove document write

The CodyHouse CSS framework has a unique solution to providing a fallback stylesheet for browsers that don't support custom properties. The thing is, they were using document.write() in their js, and I recalled reading about how using that is frowned upon. Google mentioned it in a blog post, their Lighthouse audit tool has a warning about it, and even MDN advises against its use. 😲

I figured I'd put my knowledge to use in rewriting the js. Instead of using document.write() to write out a stylesheet, I rewrote it to create a proper <link> element and append it to the DOM. πŸ“œ

πŸ‘‰ Update README.md

Okay, so this might not be one to be proud of, but it involved a learning moment for me, so I'm listing it here anyway. I was using PurgeCSS in a different project, this time with WordPress. I discovered the purgecss-with-wordpress plugin, which included a list of ready-made exclusions for WP stylesheets. Their readme included directions on how to import the whitelisted classes into your config, but I initially couldn't figure out how to merge those with my own additional set of class exclusions.

I was originally going to go with the syntax I knew, the good ol' concat() function. By chance I came across a post here on DEV about the spread operator. Of course, that worked like a charm! I made a small change to the plugin's readme, indicating how to merge its whitelists with your own. I can't be the only person unfamiliar with ES6 syntax, right? πŸ€·β€β™‚οΈ


As an aside, the above PRs have been merged. The next couple haven't, but I guess they don't have to be in order to qualify you for having completed Hacktoberfest -- they just have to pass a grace period.


πŸ‘‰ Sass module system

As you might have heard, Sass's newest version introduced a new module system, designed to replace @import with either @use or @forward. I won't get into it here; besides, better people than I have already written at length about it.

As far as WordPress frameworks go, I've been favoring Justin Tadlock's Mythic lately. I had just finished converting a project of mine, based on Mythic, to using Sass's new module system. I thought I'd contribute what I'd learned in the process and do the same thing for the base repo. πŸ’β€β™‚οΈ

πŸ‘‰ Added aspect ratios

The CodyHouse framework has a utility class for confining images, videos, and embeds to an aspect ratio, but it only had 16:9 and 4:3 accounted for. I added 21:9 and 1:1. πŸ“Ί

Yeah, this is a pretty small one, but those count too, right? πŸ™‚


This last thing doesn't have to do with Hacktoberfest, GitHub, or anything code related. It is a win, though, and I'm proud of it. I've been trying to lose weight, and over the course of the past year I've lost enough to fit in a size medium shirt -- one whole size smaller than last year! πŸ’ͺ

Top comments (2)

Collapse
 
jess profile image
Jess Lee

Congrats!

Collapse
 
realabbas profile image
Ali Abbas

Great Paul. I have done it thrice πŸ˜‰. Good to be a part of Hactoberfest