2020Year

Vue.js and Tiptap Menu Bubble: how to build

In this tutorial we will learn how to set up a simple text editor using Vue.js and Tiptap, in particular we’ll be recreating the Menu Bubble example seen here https://tiptap.dev/menu-bubble. We will also add extra functionality to load and save a text file. There are no step by step instructions on how to set up that example in the documentation, so I wanted to write a quick tutorial about it. The example on the tiptap website uses custom svg files for the icons, but fontawesome has some nice icons so let us use those instead. Fontawesome is a very nice…

Text highlighting for a Vue.js text editor: how to

In this article we will look at a way to implement a Vue.js text editor that will allow highlighting selected text. For this we will be using Vue.js and the tiptap library. We will be building on a project from a previous article about the tiptap library: Vue.js and tiptap menu bubble: how to build. The completed project can be found in my github repository here. Prerequisites We will be using a previous project as a base. So, please download that and install the dependencies if you want to follow along: Highlighting extension To implement a Vue.JS text editor with…

Mocking in python tests: practical examples

What is mocking when it comes to python tests? Mocking is a way to simulate and control the behavior of functions or objects. Typically this type of control is necessary when unit testing code that deals with systems external to our own code. Why mock external systems? The main issue is with external systems unpredictability, we have limited control over the state of these external systems, making tests potentially very brittle. For example when code reads data from disk or a database. If there is a piece of functionality that reads and modifies files on disk we would have to…

Continuous testing python code with pytest: how to

In this article, we will look at simple and straightforward ways to set up continuous testing of python code for your local machine. After we complete these steps we will be able to get real time updates to test results in a terminal every time we save a code file. You can find an example project in the following repository. Why continuous testing The main motivator to having continuous testing is, instantly letting us know when a code change has broken some piece of functionality. Continuously testing python code will give us confidence that our code is robust. Furthermore, Continuous…

Automated testing for a Flask API: useful examples

In this article, we will look at simple, straightforward, and practical ways of automated testing of the flask REST API we built in this previous article. The completed project can be found in the following github repository: https://github.com/tmsdev82/collectors-items-at-rest Why continuous testing The main motivation for having continuous testing is that it instantly lets you know when a code change has broken some (piece of) functionality. It also lowers the bar to do major code refactoring, because we are assured that the tests are continuously running and if something goes wrong we immediately know about it before it becomes a problem.…

Dockerized Flask RESTful API: how to

We are going to build a simple dockerized Flask RESTful API for managing collectors items. We will do this by implementing a simple REST API that let’s a client application manipulate a collectors_item resource. The REST API we will build will allow create, read, update, and delete actions on collectors_items. We will use the Python library Flask to do this. Together with a number of Flask plugins to make things easier. At the end we will also dockerize this API. In will continue to build out this project in other tutorials. For that reason, we need a solid, scalable foundation,…