Laravel, with version 8, introduces a very practical wrapper for a docker environment: Laravel Sail. I personally find it way easier to use than Laravel Homestead, which had the same purpose of proposing a development environment in a virtual machine. Especially when it comes to deployment.

Photo by Dominik Lückmann on Unsplash

Coming from low-level software development, I’ve been used to this incredibly powerful tool that is a debugger. Placing breakpoints into my code, and being able to watch every variable while going through the code step by step is just great. …

Photo by Tobias Fischer on Unsplash

When starting a new project, you might want to ask yourself: “How am I gonna index the objects I store in my database?”

The fast answer is “I don’t care. Just use the default”. Which is incremental. And this is fine in lots of cases. But if you’re here, reading this article, it’s because this is not the answer you’re looking for. UUID has been brought to your attention and you want to know more about it. So let’s dig in it a little.

What is UUID?

Well, first of all, UUID stands for Universally Unique Identifier. You might encounter the acronym GUID…

7 tips for VueJS developers
7 tips for VueJS developers
Photo by Markus Winkler on Unsplash

Almost a year ago, I started a GitHub repository named “ Today I Learned”. It’s a place where I put the little tricks I learned while developing. I talk about it in this article : Ce que j’ai appris aujourd’hui ! I’ve been filling it up since, and I think it’s time I share with you my favorite tips about VueJS.

#1 Prevent VueJS to reuse a component when changing page

VueJS is built to make your app as fast as possible. And like many front-end frameworks, it does a great job at reusing graphic elements to avoid destroying and rebuilding them. It’s much faster this way!

But sometimes it…

Photo by Claudio Schwarz | @purzlbaum on Unsplash

Today, who would imagine working with colleagues, from home, with the tools we had 10 years ago ? I mean non-collaborative software, installed on your computer, and exchanging files by mail. Crazy, right ?

Collaborative software, like Google Docs, Office 360, and all those apps accessible from inside our web browsers are countless and keep adding up. They let many people write in the same document, edit the same mind-map, at the same time. And that is great ! Who doesn’t love it ? I think it’s one of the major innovations of the last decade. And it’ useful, even…

Photo by @dylandgillis from Unsplash

A month ago, I wrote a small tutorial introducing tiptap collaborative Editor. Since then, I have made two packages out of it. Though it is not mandatory to read it first, it will help you understand how those packages work under the hood.

The goal of this article is to show you how to use both of those packages together to add a nicely featured collaborative rich text editor to your VueJS application.

Also available in french

The ProseMirror socket server

To synchronize many editors, each of them must connect to a socket server. The server will collect modifications made on each editor and…

Form Input Elements and v-model in VueJS slots
Form Input Elements and v-model in VueJS slots
Picture from Kelly Sikkema on Unsplash

In this article, I’ll share with you the solutions I’ve found to a small issue I’ve encountered: using form input elements and the v-model attribute, in scoped slots.

Also available in french

Scoped slots and v-model

VueJS provides a pretty useful feature to make your code DRY ( Don’t repeat yourself): slots. If you are not aware of what slots are, I’ll give you an example. Dialog box is a good one. A dialog box always behaves the same way. When you open it, it creates a view appearing above the current view. This new view usually has a title, content, and some buttons…

In this article, I’m going to take you on an adventure with me. Let’s implement the real-time collaborative text editor using tiptap and our own server.

Also available in french

Tiptap is a renderless rich-text editor for Vue.js. Renderless means the developer has full control over markup and styling. It is based on ProseMirror, which is a toolkit for building rich-text editors that are already in use at many well-known companies such as Atlassian or New York Times.

Tiptap provides a simple but limited example of collaborative editing. For starters, it allows to only edit a single document. Naept…

In this article, I will show you a simple JavaScript algorithm to build a tree, using functional programming.

Also available in french

In my journey of developing Naept, I encountered the need to build trees. An easy example of what is a tree, are the chapters of a document. If the document is the trunk, all the main chapters are the branches of that tree. And all those main chapters may be divided into sub-chapters, which may be, in turn, again sub-divided in sub-sub-chapters, and so on…

Inside the database

The most simple thing to do when storing objects that constitute a tree…

VueJS ships with easy ways to integrate transitions between elements. Here, we are studying the particular case of lists and tables.

Also available in french

Without transitions, user experience is mediocre

In this article, we are going to work with a list of fruits displayed as a list and as a table. Indeed, setting up is slightly different in both cases.

This code, which will serve as a base for this article, does not show any transition. We can very well understand that a user may experience some difficulty in tracking what was changed every time the data is modified. I’m sure that the most…

When engaging in a software development project, the tutorial that got our foot on the ladder is rarely enough. We like to combine technologies, and eventually we find ourselves in a case that is a bit special. And in that particular case, it may become hard to find help on the web.

This article is about one of those special cases: the use of Laravel in a Docker multi-container environment, and of a Traefik container as a reverse-proxy. The Laravel application exposes an API, to which our front-end, a VueJS SPA (in another container), connects.

Here is a little schematic of the architecture

Also available in french

Let’s agree on some vocabulary


Julien Aupart

CTO and Full-stack developer @ Naept

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store