Raquel M Smith

Pinch of Yum

Screenshot of the Pinch of Yum homepage
  • css
  • javascript
  • php
  • reactjs
  • sass

Pinch of Yum is a food blog that sees over 4 million visitors per month. I’ve worked on this site for the past year, mostly in creating new content editing experiences in the new React-powered Block Editor in WordPress.

See it live at pinchofyum.com.

Fun features

Powerful content creation with new React tools

Pinch of Yum is a complete WordPress site – meaning WordPress powers the both the server-side rendering of the front-end and the content management in the editor. On Pinch of Yum, I’ve worked mostly in creating new editing experiences that enable content creators to quickly and easily build high-quality content.

One example of this is the “Top Recipes” pages. Content creators are able to add a new “Top Recipes” block with as many items as desired. Each item has dedicated areas for the recipe title, image, description, ingredients, and a link to the recipe.

When the page renders, any items that come from the pinchofyum.com domain are included in a ItemList structured data block, which enables carousels in mobile search results for that recipe query.

Pinch of Yum Top Recipes page in the WordPress block editor, with a Top Recipes block for "Our Best Healthy Summer Salad Recipes"

The rendered page is very similar to the edit page, which makes for a very nice content creation experience.

Pinch of Yum Top Recipes page rendered, which looks very similar to the editor experience.

See a live example of this here.

Modern design updates & templating

Pinch of Yum has been around since 2011, and it’s seen a number of design trends come and go. As changes become necessary to stay relevant, our designers create PSD mockups of new features or updated designs. I work with the designers to make sure the designs conform to the existing site standards, perform well on mobile, and provide a good experience for users overall.

Sass-based CSS

Since joining the project, we style with Sass and compile it down to CSS using grunt-sass and grunt-postcss. When not writing CSS-in-JS, Sass is my preferred way to write CSS.

Pretty good performance

Performance has not been a focus of my work on the Pinch of Yum site, but when I find the time I do like to tinker with it. I pioneered the move to a better host in 2018, which resulted in a bit of a performance improvement and a lot of reliability improvement. In 2019 I plan to focus on improving site performance overall and adding progressive web app support.