BakersCalc beta v0.9.5.1 Released

I finally found the time to work on these updates/bugs, and with that I’ve gotten far enough on this project that I felt comfortable “officially” released BakersCalc into the wild (well, at least to reddit). There’s still a bit of work left, but I’m confident that what is up now can hold on it’s own.

Changelog:

  • added hydration (yay!) to display
  • added precision slider in options tab for ingredient weights
  • first time visitors now see the wonderful wall of text (info)
  • added copy functionality when clicking on generated url (now you won’t have to fudge around selecting the text)
  • fixed url formatting so copy/pasting URLs into emails won’t drop the parameter
  • added filter for GA so local testing wont mess up analytics
  • added social media icons, let’s mingle 😉
  • fixed number input fields in chrome (thanks /u/nightblue_fruit)
  • made the option fields longer
  • fixed dropdown text align, should look better on IE/chrome now

BakersCalc beta v0.9.4 Released

Big update! In this version I’ve implemented the ability to define multiple flours, calculate item hydration, starter hydration, and squashed some bugs.

Changelog:

  • Implemented dropdown for item type – allows for multiple types of flour, liquid, starter, and individual ingredient hydration
  • Fixed close info bug
  • Fixed bug where water hydration was not being set to 100% on shared recipe
  • Fixed n/a option not displaying on shared recipe

BakersCalc beta v0.9.3 Released

What is BakersCalc, anyways?

I’m glad you asked! BakersCalc is a side project of mine to help with creating, updating, and sharing bread formulas. The beauty behind baker’s percent is everything is relative to your total flour weight, so it doesn’t matter if you want to make 300g of dough or 300kg. All your ingredients will scale accordingly.

bakerscalc home screen mobile

BakersCalc homescreen on iOS

(more…)

CSS Sprites

What is a Sprite Sheet?

Put simply, a sprite sheet is an image file composed of smaller individual graphics. These graphics can be various states of a UI element, individual frames of an animation, or even various design elements that appear commonly throughout a site’s design. This practice is definitely not new – it’s been done since the early days of video games, however since being introduced to the world of web design they’ve generally been considered as good practice. There’s a lot of debate about whether or not using sprites are actually beneficial, but as with most techniques there is always a time and a place to use them. Before we get into the pros & cons let’s first review how to implement a sprite.

Adding Sprites To Your Site

Sprites are fairly straight forward to implement, it just takes a little time creating your sprite sheet and defining the CSS rules that will best suit your needs. They can be applied to various HTML elements such as lists (both ordered & unordered), divs, spans, anchor tags, and so on. As I mentioned above one way they can be used are for hover states, which is the example we’ll be exploring. Here we have a version of the sprite map used on this site which includes two states – default and hover.

social media sprite from battlehillmedia.com

Various elements of a sprite sheet

Organization is very important when creating a sprite sheet. If you use a systematic grid approach to laying out your elements it will make calculating your background-position values a bit easier later on, especially if all your elements are the same exact size as with the example above.

CSS
.sprite {
    background-image:url('social.png');
    background-repeat: no-repeat;
    display:block;
    width:64px;
    height:64px;
}

.facebook { background-position: 0px 0px; }
.facebook:hover, .facebook:active { background-position: -64px 0px; }

.twitter { background-position: 0px -64px; }
.twitter:hover, .twitter:active { background-position: -64px -64px; }

.instagram { background-position: 0px -128px; }
.instagram:hover, .instagram:active { background-position: -64px -128px; }

(more…)

Homemade Pizza Dough Made With Yeast Starter

Disclaimer: I am an opinionated New Yorker who takes his pizza seriously. A little too seriously.

Photo-Dec-07,-9-55-08-PM2

Great, now that that’s out of the way we can now get into a little bit of back-story. It was roughly two years ago, I was in the kitchen of my parents’ house when I came across some of my brother’s left over dough. I whipped up what I thought was a decent pie and sent a picture to him, feeling proud of my creation. Little did I know that his response would ignite my motivation and determination for the perfect homemade pizza, but most importantly to outdo him.

“It looks good, but mine are better.”

(more…)

Speed Test

The guys over at pingdom.com have developed an invaluable tool called the “Full Page Test” for calculating some useful statistics for your website that every developer should utilize to get the best performance possible. They analyze a variety of factors such as overall load time, size, requests, caching, bad requests, and more. Take a look at how BHM tested:

website speed test

According to these results BHM is faster than 94% of the sites tested, not bad! For any section that your site may fall short in the tool also provides resources on how to fix them, and for extra measure they include detailed information on each individual request made. Head over to http://tools.pingdom.com/fpt/ to test your site, and try to beat my score!