For as long as I can remember, bread has been my favorite food. It's a food like no other. There's an incredible amount of variety, and everything from the amount of water you use to your folding technique to the proofing temperature can make significant differences in the final product.

I started baking regularly a few years ago and have been casually documenting my journey on instagram.

So when covid struck and I was stuck at home with nothing to do, I combined my love for bread with my passion for programming to make breadratiocalculator.com!

Want to follow along with the code? See the GitHub repo here.

Why would you need a calculator for bread?

One of the main use cases for this tool is to calculate the hydration percentage. Rather than a typical percentage where the denominator would be the total weight, bakers percentages use the weight of the flour as the denominator.

The purpose of this method is to make it easier to figure out how much water you need. If you have 1000 grams of flour and you want a 60% hydration dough, you would multiply 1000 by .6 to get 600 grams (or milliliters) of water.

With this web app, once you have your ingredients set up it becomes easy to scale the recipe relative to the amount of flour you're using. If you have multiple types of flour, it knows to use the total weight of all of them. When you change the weight of flour being input, the values of the other fields automatically update based on their given percentage.

Food is meant to be shared

One of my goals for this app was to make it as easy as possible to share the ingredients lists and bakers percentages once they've been entered or calculated.

The ingredient card above is generated with the push of a button and uses a square aspect ratio to be shared as a slide in a post on Instagram, Reddit, or any other social media site.

How the sausage (bread? web app?) gets made

breadratiocalculator.com is a static web app built with angular and hosted with AWS S3 and Cloudfront. The project also utilizes angular material for UI components.

Ingredients card

The ingredients card is generated using an SVG image that is bound to angular variables. When those variables change, the ingredients card automatically updates with the new names, weights, and percentages.

I'm in the middle of writing a post on how you can create your own dynamic SVG components with angular, so if you'd like to learn how to do this make sure to follow me on DEV or subscribe to my monthly newsletter so you don't miss out.

To download the image as a PNG, things get a little more complicated. For this, the SVG is converted into a blob and drawn onto a canvas. Then an <a> element is created with an href property that points to the canvas's data url. After that, the <a> element's download function is invoked.

From screen to page

It can be annoying to read recipes from your phone while cooking or baking, so many people (myself included) like to print out recipes onto paper.

However, directly printing a web app can lead to a few problems:

• If the components were only designed for the web, and may not be styled consistently when printed
• Colorful designs may look great on a screen, but could be costly to print
• Web interfaces may not use space efficiently when moved to a piece of paper

I encountered all three of these problems when trying to print from this app, so I imported ngx-print for some help.

Now, on the click of a button, I can render a printable page that's bound to angular variables.

What do you think?

Am I missing some key features? Did you find a bug? What's your favorite kind of bread? Let me know in the comments!

To make sure you don't miss out, follow me on DEV or subscribe to my monthly newsletter.

More content

If you liked this, you might also like some of my other posts:

• Learn Elixir with me!
• Changing Emoji Skin Tones Programmatically
• I made my first svg animation!
• 5 tips for publishing your first npm package
• 4 Hugo Beginner Mistakes
• Introducing meme-type: A translator for internet speak