frontend
Create your first React web app: easy basics
In this tutorial, you will learn how to create your first simple React web app using TypeScript. You will learn how to set up the project, what all the parts are, and how to add components and some interactive elements. I wrote this tutorial as a basic foundation to help you on your way before you dive into bigger tutorials. We will go through each file and explain its purpose. By the end of this guide, you’ll have a solid understanding of how React is set up. Contents1 In this tutorial2 Prerequisites3 What is TypeScript?4 What is React?4.1 React components4.1.1…
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…