Combining Adonis, React and Tailwind together under a single monorepo codebase.
Inspired by Amir Hosein Samili’s post on managing Adonis and Vue as a monorepo, I want to show you how we can replicate this approach with React. As a bonus, we’ll add in Tailwind as our CSS framework, but you can choose whatever styling methodology or framework that floats your boat. The goal is to let both our apps live together and allow the server pass the routing and styles down to the client.
Please note we’ll be following the same flow as the referenced article, but making some changes and additions to meet our React/Tailwind needs. …
Creating a flexible soft delete feature for MySql database tables using AdonisJS
If you want to soft delete data in Adonis v5, unfortunately it is not built into the core architecture. If you aren’t familiar with the concept of soft deletes, it is the concept that when you delete data from the database, you aren’t actually deleting it, but rather setting a flag to indicate that it is in a deleted state. These rows shouldn’t return in database queries, but still exist if needed in the future.
Soft deletes bring a few advantages to the table depending on your business requirements.
- You may legally be required to keep the data either in…
A comprehensive starter solution to making API calls structured and manageable in code architecture and development teams.
In my article, “ Architecting Frontend Projects To Scale”, we took a look at organizing our frontend code base in a way to make scaling and succeeding as a team much easier. In this article we’re going to take a small dive into the services layer of our code organization. Specifically, we will look at a simple solution for managing 3rd party APIs or our own data sources in such a way that will help us avoid some of the frustrations with managing our code base as APIs change over time.
When we first start building out features, most of…
Scaling React apps with clean code structure and standards
I, like any other web developers and engineers, prefer to make my work life as sane as possible. Having structure not only keeps life a little more pleasant, but is critical to scaling and even allows creativity to flourish! Having a clear structure and consistent plan in my code keeps me performant, allows me to better plan for scaling, avoid unnecessary refactoring code sessions, and understand the app hierarchy without having to re-learn each component or service every time I need to change or upgrade features.
Pretty much most developers who start out with most JavaScript frameworks use a built-in…
How a common JavaScript utility function became a React Hook
Since the release of React Hooks in version 16.8.0, developers have found countless ways to use them to their advantage. These advantages come in the form of easily managed theme states to wrappers that makes dealing with the React lifecycle a little bit easier. Most of these are glorified utility functions that have been upgraded to work seemlessly in the React environment. They (these hooks) usually handle their scope of work closely with the component that is implementing their functionality.
I as well, made a hook… that no one needs. This hook is called useHandleChange. A hook that manages the…
How to resolve relative paths cleanly in JavaScript and TypeScript by using webpack aliases.
Reference Mistakes Make Developers Look Bad
If you were to ask me what are one of the most common mistakes are in basic web development, I would, without hesitation, tell you that reference errors are one of the big ones out there. Whether they are with variables or package imports, I encounter and solve many problems for myself and other developers that make these mistakes constantly. Specifically with package imports, I wanted to stop dealing with changing all the path locations every time files were refactoring and improved.
You are probably familiar with what this looks like with some example code below.
import { UserCard }…Observing the performance of loops and methods when dealing with arrays of objects.
If you are starting with part 2, be sure to check out part 1 by clicking here!
Non-Primitive Values
In part 1, we took a look at how different loops and methods are used to find the index or value from an array of primitive values, and what the performance implications were when using each one of them. In part 2, we will do the same thing, but target non-primitive values. In particular, we will make use of the non-primitive: Object. …
Breaking down the performance and biases of JavaScript loops and methods when working with various data sets.
Introducing Loops and Methods
We’re going to take a look at the various loops and methods provided in JavaScript to find out which ones are more efficient for the data you are iterating over. The reason I’ve taken the time to put this together comes from watching the evolution of developers and how they use and form opinions about various loops and methods.
Everyone starts with your basic for loop. Once a new developers learns this, their minds are blown and life becomes easier. This mind blown experience happens over and over as new methods are introduced. What is interesting, is that as soon…
A short guide to creating a new object from multiple objects.
This guide will show you how to merge two or more JavaScript objects into a new object. The new object will contain the properties of all the objects that were merged together. JavaScript provides multiple ways to accomplish this task with a lot of different methods. Here, we will take a look at three of the more popular approaches. These are:
Spread Operator
The spread operator was introduced with ES6 and allows us to merge multiple arguments or objects and returns a new combined value…
Michael McShinsky
Fullstack Software Engineer
