BakersCalc v2

V2 of BakersCalc was almost completely rewritten as a personal initiative to implement ES6 and SASS into a project as well as to improve upon the UI/UX of the application.

One major flaw of the original design was that the settings were hidden away behind a control, and once exposed felt pretty cramped. The new design addresses these issues by bringing everything to a highly visible toolbar, which makes better use of the user’s horizontal screen space.

Another way I improved upon the design was the decision to change the fixed footer to a reveal footer. The information displayed just wasn’t important enough to justify always occupying that screen space, regardless of how small it was. The new design allows for the “add” button to stand alone and gives it more visual weight. In my humble (and biased 😂) opinion the application just looks more polished when presented this way, especially for mobile users.

Also gone in this version is the jQuery dependency. That’s right – this is written in 100% vanilla ES6. The animations are accomplished using simple CSS3. One of my goals with this project was to get more comfortable with ES6, and that meant removing dependencies.

All of the previous features are still present as well as legacy support for the old data structure. This means if you’ve already bookmarked an old recipe it will still work with the new version, but not vice versa. The newest feature in this release is the “precanned” items menu – a simple way to add commonly used ingredients to your formulas. A long click/tap on the “add” button will bring up the menu. It definitely has more potential so future updates will expand upon this idea.

Design, Development, Projects ajax, bakerscalc, css3, es6, html5, javascript, json, mysql, oop, php, responsive