Vue

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. Modern OCR is in fact a type of Artificial Intelligence (AI), usually under the branch of Machine Learning (ML). There are quite a few options available to perform this task. In particular, I reviewed options that could be directly integrated into Sharp Cooking app or API. ...

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. Have fun! ...

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. The project owners now recommend Dart Sass instead. ...

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. ...

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. ...