Recipe Book

Using OCR to scan recipes into Sharp Cooking

Sharp Cooking app can currently import recipes directly from websites and backup files, making it easy to create a personal collection of recipes. However, it does not currently provide an option to scan recipes from a book or an image. This has been a long-requested feature that I am now attempting to add to the app, and will document the experience in this post. How? The first thing that comes to mind when trying to extract text from images is OCR....

March 12, 2023 · 9 min · LPains
Rating Editor

The simplest Vue 3 Rating Editor

This is going to be short and sweet. I have built the simplest possible rating editor in Vue 3 composition API an this is how I’ve done it. A couple of details worth noting: Each star is a clickable button The star is an emoji Because the emoji comes with color, we apply a class gray to apply a grayscale filter when value is less than the current star Upon a star button click, we update the modelValue to the corresponding value which renders the stars again That’s it....

September 12, 2022 · 1 min · LPains
Node Sass error

Removing node-sass from VueJS project

Let’s start with some context so things make sense. I’ve created a vue project back in 2018. It is the largest project I work on regularly and we’ve done a decent job to keep everything up to date in it. This project is built by Azure DevOps hosted servers and recently the builds started failing because of node-sass. Let’s talk about the problem, and how we can fix it. First, you should know that node-sass is no longer recommended....

December 29, 2021 · 2 min · LPains
Dirty rugby match

Vue router dirty checking before navigation

Ever filled up a form with a bunch of information and then accidentally navigated away and lost all data? Well, that’s frustrating. However, as a developer, it might be tricky to implement such functionality. This post is a practical guide to implementing is dirty checking using Vue, Vue Router and Typescript. TL;DR Code is available on GitHub. Expected behavior In a Vue app with Vue Router, when a user modifies data in a form and any navigation to another route occurs, the user should be notified and have the ability to cancel navigation....

January 11, 2020 · 2 min · LPains

Simple Vue directive for hotkeys

I’m a fan of hotkeys and I use them for a lot of things. In fact, I believe that 80% of the commands I use in my IDEs (Visual Studio and Visual Studio Code mostly) I use via hotkeys. Nothing is better than CTRL + p in VS Code or CTRL + k + d in VS. Anyway, while a lot of users really don’t care about that, those that have data entry intensive use cases will probably appreciate some forethought in hotkeys in the apps they use....

July 26, 2019 · 2 min · LPains