Compress your HTML and CSS by Enabling Gzip. Just DO IT.

Finding brand colors quickly can get annoying fast. This site catalogs hundred of brands and their colors, so you can quickly add them to your design comps, or while developing.

Nowadays, users expect a website to look great no matter what device they’re using but this can get tricky with viewport sizes and ratios being so drastically different from one another. Picturefill is a tool that enables support for the <picture> element, a developing polyfill that is quickly becoming a standard and will enable the ability to art direct images based on device sizes. I’m going to run through how I’ve used it in conjunction with Statamic’s image transform tag.

Recently, I was attempting to use an SVG as a background image that I had intended to fill background completely, even if it meant stretching and changing the aspect ratio of the SVG. Turned out that was trickier than I’d anticipated, and I had to figure out which attributes needed to be changed in my SVG to make it happen. So, if you ever need an SVG to scale non-uniformly, here’s how.

For this site, I had planned to list both “articles” and “notes” as entries on the homepage, chronologically. Turns out it’s trickier than I thought to format each of the entries differently but I was able to sort it out. I’ll go over how it can be accomplished with a just a hidden field and some conditional statements.