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)
Congrats!
Great Paul. I have done it thrice 😉. Good to be a part of Hactoberfest