Page 9

Well, for obvious reasons I missed recommending a font last month but let’s get back to it! I downloaded Good Feeling by Subectype for the sans version but the script pairing is also great. The all caps sans font is free for personal use. 

Download at dafont.

Loving the flourishes and broken line effect on the Beautyline by Putracetol. Free for personal use only.

Download at dafont.

Modal vs Page: A Decision Making Framework

Have you ever wondered if your design should just be on a page instead of in a modal overlay? Here’s a framework to help you decide....

I’ve implemented so many modals over the years but never really stopped to think about why. This when to use a modal flowchart is pretty interesting.

Loving the font Red Hook by Alexandre Noyer. It’s an all caps font and free for personal use. If you’re into the style, I would highly recommend following @ghostsigns on Twitter for more faded lettering. 

Download at dafont. 

New! A Webpack plugin for optimizing Google AMP CSS

In a previous post, I went over my process trying to develop a PostCSS plugin to make updating custom CSS for Google AMP easier. That plugin seems to be working okay (yay!) but since it’s not integrated into my Webpack build, there’s still a lot of manual work to be done and room for human error. 

So the next step was clearly to jump into learning Webpack plugins. I needed a plugin that could watch for CSS files created using the MiniCssExtractPlugin, filter out all the unnecessary styles, and create a new file just for AMP. The results are on GitHub. 

My build process is pretty simple so it’s very likely there are options or interactions I haven’t thought of. If you end up using it and notice any problems, let me know!   

Creative Market - Explore the World's Marketplace for Design
Advertisement
Creative Market - Explore the World's Marketplace for Design
Advertisement

Optimizing CSS for Google AMP

I have mixed feelings about AMP but supporting it seems like the only way to get any traction in Google searches for my fonts so here we are.

When I was updating my site less frequently, manually copying and pasting the stylesheets and cleaning them up for AMP seemed perfectly reasonable. Lately though, I’ve been trying out new designs more often and it’s been too easy to accidentally forget and let the pages get out of sync. So I decided to try creating a PostCSS plugin to automate the process.

Thinking about the changes I was making by hand, I knew I wanted my plugin to filter out:

  • Media queries for desktop breakpoints
  • Non -webkit- vendor prefixes
  • Specific block names or other prefixes (for BEM or other namespacing)
It also seemed like a good idea to fix or remove styling the AMP docs mention as being invalid:

  • !important flags
  • -amp classes or i-amp tags

The PostCSS guidelines are pretty clear that a plugin should “do one thing, and do it well” and provide some examples using monorepos to handle more complex tasks. I’ve been meaning to work more with Lerna so this seemed like a good excuse. 

The result is the postcss-amplify plugin. You can check out Github for instructions on how to use it with your current PostCSS setup or I made a web interface for quick use. If you try it and notice anything weird, let me know in the comments or by submitting an issue. I think my next step will be to create a Webpack plugin to fully automate my build so keep an eye out for that.

The Catch and Kill Podcast with Ronan Farrow

Listen to The Catch and Kill Podcast with Ronan Farrow episodes free, on demand. For the past two years, Pulitzer Prize winning journalist Ronan Farrow has been following a trail of clues from his investigation of Harvey Weinstein to other blockbuster stories about the systems that protect powerful men accused of terrible crimes in Hollywood, Washington, and beyond. But he didn’t bring that information to light on his own. A compelling cast of sources—from brave whistleblowers to shadowy undercover operatives—decided the fate of these investigations, sometimes risking everything in the process. The Catch and Kill Podcast brings you their stories, in their own words, for the first time. The easiest way to listen to podcasts on your iPhone, iPad, Android, PC, smart speaker – and even in your car. For free. Bonus and ad-free content available with Stitcher Premium....

I just finished the book Catch and Kill and would highly recommend reading it  but if you’re looking for podcast-sized chunks for work or your commute, give this a listen. 

Warning! It is maddening and a lot of the bad guys still have high-level media jobs and are shaping news narratives right now. 

Nice Western pulp cover feel to this font by Guaraldo Fonts (couldn’t find a site for the author). Dusty Ranch is free for personal use.

Download at dafont.

Okay, time to be more realistic. Instead of aiming for weekly font recommendations and definitely falling short, I’m going to start aiming for monthly font recommendations and probably falling short. This blog is moving to a First Fridays model like it’s a fancy museum or something.

And here’s a great font. Blisk Rhythm by Typhoon Type has a fun retro feel and random dots which I obviously enjoy. You can try it free for personal use.   

Download at dafont.