DEV Community: lguaregua

A Step-by-Step Guide to Strapi with Docker, PostgreSQL, and TypeScript

lguaregua — Wed, 15 May 2024 00:32:34 +0000

Dive deep into the essential configurations of our comprehensive boilerplate that integrates Strapi, Docker, PostgreSQL, and TypeScript for full-stack development.

Looking for the actual code? No problem! You can access the complete setup on our GitHub boilerplate. If you find it useful, don't forget to star the repository ⭐ and share your thoughts through comments! Your feedback helps us improve and grow. ❤️

Understanding the Docker Configuration

Dockerfile.local

This file builds our Strapi application's Docker image based on Node.js, specifically using an Alpine Linux variant for a lightweight environment. It installs necessary system dependencies like vips-dev for image processing which Strapi often requires, especially for media handling. The Dockerfile also handles the installation of NPM packages and builds the Strapi project.

Docker Compose Setup

In our docker-compose.yml, we define the services required for our application: the Strapi service and a PostgreSQL service. Docker Compose allows us to manage multiple containers as a single application.

Setting Up TypeScript with Strapi

To use TypeScript in Strapi, we configure it through a tsconfig.json file. This configuration file allows us to specify compiler options and include/exclude files for our project.

Conclusion

With this setup, you have a powerful boilerplate that leverages Strapi, Docker, PostgreSQL, and TypeScript to kickstart your full-stack development projects. Feel free to customize and extend it according to your needs.

Access the complete setup on our GitHub boilerplate. If you find it useful, don't forget to star the repository ⭐ and share your thoughts through comments! Your feedback helps us improve and grow. ❤️

Happy coding!

The Two Pillars of Algorithm Performance: Time and Space Complexity

lguaregua — Sun, 04 Jun 2023 21:18:48 +0000

Hey Coders!

Have you ever looked at your code and wondered why it's taking ages to run, or why it's eating up your memory like there's no tomorrow? Well, fret no more! Let's dive deep into the world of Time and Space complexities and decode their mysteries!

Time Complexity – The Need for Speed

Simply put, time complexity is how long your code takes to run. But as the cool kids of computer science say, we express it using Big O notation – because who doesn't like a little math in their life?

O(1): Constant Time - When your code is lightning fast and doesn't care about the size of the input, it's got O(1) complexity. Like when you just get the first item from an array:

function getFirst(arr){
    return arr[0];
}

O(n): Linear Time - This one's a straight shooter. Your code takes time proportional to the input size. A good old-fashioned linear search is a perfect example:

function linearSearch(arr, target){
    for(let i = 0; i < arr.length; i++){
        if(arr[i] === target){
            return i; 
        }
    }
    return -1; 
}

O(n^2): Quadratic Time - Here's when things start to slow down a bit. For every input, you're running another loop – like a clumsy bubble sort:

function bubbleSort(arr){
    let len = arr.length;
    for(let i = 0; i < len; i++){
        for(let j = 0; j < len - i - 1; j++){
            if(arr[j] > arr[j+1]){
                let temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    return arr;
}

O(log n): Logarithmic Time - Now, this is where it gets fancy. Your code becomes faster as the input size increases, like with a binary search:

function binarySearch(arr, target){
    let left = 0;
    let right = arr.length - 1;
    while (left <= right) {
        const mid = left + Math.floor((right - left) / 2);
        if (arr[mid] === target) {
            return mid;
        }
        if (arr[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }
    return -1;
}

Space Complexity – How Much Room Do You Need?

Space complexity is all about how much memory your code needs. Because while time is money, memory isn't free either!

If your code creates a new array of the same size, the space complexity is O(n). Like doubling the elements of an array:

function doubleArray(arr){
    let newArray = [];
    for(let i = 0; i < arr.length; i++){
        newArray.push(2 * arr[i]);
    }
    return newArray;
}

If your code uses a fixed amount of space no matter the size of the input, it has O(1) space complexity. Like summing up an array:

function sumArray(arr){
    let sum = 0;
    for(let i = 0; i < arr.length; i++){
        sum += arr[i];
    }
    return sum;
}

So, there you have it, folks! Understanding time and space complexities is a game-changer. It helps us write more efficient code, and who doesn't love that? But remember, balancing time and space efficiency is an art. So keep experimenting, keep coding, and most importantly, keep having fun!

Stay tuned for more exciting dives into the world of coding!

PaceTrace ⏳: A Lightweight Progress Bar CLI Library

lguaregua — Thu, 01 Jun 2023 18:20:46 +0000

Hey there, fellow code enthusiasts! 🖐️

Ever found yourself staring at the screen, waiting for an endless script to finish or a gigantic file to upload? 😓 Well, I've been there, done that. After some sleepless nights of coding and tons of coffee ☕, I'm proud to present: PaceTrace, a progress bar library for Node.js that's as customizable as it is user-friendly!

🌟 Here's What PaceTrace Can Do 🌟

So, why should PaceTrace be your new darling in the vast sea of progress bar libraries? 🌊 Let's dive in:

Make it your own: With PaceTrace, you choose your progress bar's length and appearance. Stick with the trusty '=' or '#', go for a sleek '█', or add some fun with '⣿', '★', '♥', or even a character of your own choosing! 🌈
Pick a side... or the middle: Left? Right? Center? Your progress bar, your call! 🎯
Show or hide the progress percentage: It's your choice whether to display the progress percentage or keep it hidden. 🕵️
Play with the format: PaceTrace lets you set your progress bar format. You can use placeholders for the bar, percentage, current value, and total value. 🛠️
Automatic stop and clear: Configure PaceTrace to pause the progress bar automatically when it's done, or even wipe the console clean. 🧹
Cursor visibility: If you prefer not having the console cursor showing while the progress bar is active, simply hide it. 🐭

📦 Installation: A Walk in the Park 🌳

Getting PaceTrace on your system is a breeze. All it takes is a simple npm command:

npm install pace-trace

For those of you using yarn, fear not! We've got you covered:

npm install pace-trace

🚀 How Do You Use PaceTrace? 🚀

Getting PaceTrace up and running is as easy as pie 🥧. Just import it, create a new instance, and you're off to the races:

import PaceTrace from 'pacetrace';

const progress = new PaceTrace(100, { barStyle: 'star' });

Then, increment or decrement the progress to your heart's content:

progress.increment(10);
progress.decrement(5);

When you're ready to show off the progress bar, simply call the log method:

progress.log();

👨‍💻 Behind the Scenes 👩‍💻

PaceTrace is brought to life with TypeScript, promising type safety and providing Visual Studio Code users with top-notch IntelliSense support. And of course, we've got a suite of tests to ensure the library is as reliable as it gets, covering both main functionalities and those tricky edge cases. 💪

🎈 Wrapping Up 🎈

In a nutshell, PaceTrace is here to jazz up your console output with a customizable progress bar. It's open-source and just an npm install away. So, what are you waiting for? Give it a whirl and drop a line to let me know your thoughts. Happy coding! 🚀🎉

🤝 Let's Collaborate and Innovate Together 🚀

PaceTrace is more than just a library; it's a testament to the power of open-source collaboration. Your insights, your creativity, and your passion can take it to new heights.

So, don't be a stranger! If you've got a great idea or a constructive critique, we're all ears. Feel free to open issues, submit pull requests, or just drop a 🌟 if you like what you see. After all, it's the thoughts and contributions from you, the amazing coding community, that keep the wheels of innovation turning.

Here's where the magic happens: PaceTrace on GitHub

Together, we can make PaceTrace an even more powerful tool for Node.js developers worldwide. Ready to jump in? Let's code a better tomorrow, one progress bar at a time! 🛠️🌐🎉

Extending Strapi plugins 🚀 Ultimate guide 👨‍💻

lguaregua — Thu, 18 May 2023 13:01:47 +0000

Hey folks! 🤙

You've chosen the right post if you're keen on flexing your JavaScript muscles and going on a coding adventure with Strapi. Strapi, the open-source CMS powerhouse, comes with a plugin system that is all about flexibility and adaptability, and today, we're going to nudge it a bit to suit our unique requirements. 🧗‍♂️

The Mission 🎯

Our goal was simple but crucial - to ensure that users don't keep leaning on their old faithfuls when resetting their passwords. The good news is that Strapi provides a plugin system that we can tweak to ensure users always choose new passwords.

The Preparation 📝

Before we dive into the code, here are a few important points to keep in mind:

We can apply this approach to various methods declared in Strapi plugins. Whether it's register, forgotPassword, resetPassword, user or any other method within the @node_modules/@strapi/plugin-<name-of-the-plugin> (in our case users-permissions), you can bend it to your will.

To extend a Strapi plugin, create a new folder inside src/extensions/. This is where you'll make your changes without disturbing the core plugin code.

In the new folder, add a file named strapi-server.js or strapi-server.ts and place your custom code there. Now, let's see how this works in practice!

The Code 🚀

Check out the final solution below:



const utils = require('@strapi/utils');

module.exports = (plugin) => {

const { ValidationError } = utils.errors;
const originalControllers = {
    callback: plugin.controllers.auth.callback,
    resetPassword: plugin.controllers.auth.resetPassword,
}

plugin.controllers.auth.resetPassword = async (ctx) =&gt; {
    const { password, passwordConfirmation } = ctx.request.body;
    // Fetch user
    const user = await strapi
        .query('plugin::users-permissions.user')
        .findOne({ resetPasswordToken: ctx.params.code });

    // Compare old and new passwords
    const validPassword = await strapi.plugins['users-permissions'].services.user.validatePassword(password, user.password);

    if (validPassword) {
        throw new ValidationError('Passwords cannot match previous passwords');
    }

    await originalControllers.resetPassword(ctx);
}

return plugin;



};

Dissecting the Code 🧐

Let's take a magnifying glass to this code snippet:

We're using Strapi's utility library, which has a plethora of helpful tools.
We're exporting a function that accepts a plugin as an argument.
Within this function, we're preserving the original controllers for callback and resetPassword.
Then, we're defining a new resetPassword function. This doesn't discard the original function; rather, it only executes after we've added our own validation.
In this new function, we're retrieving the user requesting the password reset.
We're then comparing the new password against the old one with Strapi's built-in password validation method.
If the new password is the same as the old one, we're raising a validation error.
Finally, we execute the original resetPassword function, allowing Strapi to perform its usual magic.

By extending the resetPassword method this way, we add our custom behaviour while maintaining the core Strapi functionality intact. It's akin to a skillful remix of a classic song - you maintain the original melody while adding your unique spin! 🎵

That's all, folks! Get out there and make Strapi work for you. As always, remember to test your code thoroughly to ensure it behaves as expected. Happy coding! 👨‍💻👩‍💻