DEV Community: Luca Argentieri

A new GSAP Nuxt Module

Luca Argentieri — Mon, 17 Mar 2025 21:00:55 +0000

Are you tired of importing GSAP into every file?
Are you tired of register every single plugin?
You can’t wait to create your own animation, right?
NOW YOU FINALLY CAN!

With the new GSAP Nuxt Module you can:

Auto-import GSAP

export default defineNuxtConfig({
  modules: ['gsap-nuxt-module'],
})

<script setup>
const elementRef = ref(null)

onMounted(() => {
  gsap.to(elementRef.value, {
    x: 100
  })
})
</script>

<template>
  <div ref="elementRef">GSAP me!</div>
</template>

Dynamically Register Plugins

export default defineNuxtConfig({
  modules: ["gsap-nuxt-module"],
  gsap: {
    plugins: ["Draggable"],
  },
});

Use provided Composables

<script setup>
const Draggable = useDraggable()

const elementRef = ref(null)

onMounted(() => {
  Draggable.create(elementRef.value)
})
</script>

<template>
  <div ref="elementRef">Drag me!</div>
</template>

You can find more examples here and test it in the playground.

Why?

GSAP is a library that I use daily with Nuxt, I wanted to create a module that was in the first place comfortable for me, hoping it can be useful for many others.

I wanted to make the installation and use of GSAP as simple and clean as possible, favoring the maximum developer experience.

What's next?

I have some new features to implement, for example I would like to integrate the plugins for GSAP Club members.

Can I contribute?

Sure, the plugin is open source and available to anyone who wants to contribute to the wonderful Nuxt and GSAP communities.

Thanks and feedback

Thank you for reading this article and I invite you to ask me questions, create issues on github, propose a feature and contribute to the module.

Ah and if you want to click the star! ⭐

Repo: https://github.com/LucaArgentieri/gsap-nuxt-module
NPM: https://www.npmjs.com/package/gsap-nuxt-module
Nuxt: https://nuxt.com/
GSAP: https://gsap.com/

The notifications hell

Luca Argentieri — Wed, 27 Nov 2024 07:00:00 +0000

Notifications' Hell is a chaotic nightmare filled with abandoned work chats, aimless alerts, and endless distractions.

Every day, we are overwhelmed by numerous notifications, media alerts, emails, and app reminders. At work, tools like Slack, Discord, and Telegram inundate our screens with updates, pings, and unread badges.

For some, the constant chatter becomes overwhelming. As that little red number increases, the risk of missing important messages grows. The flood of notifications makes it difficult to stay focused.

Navigate the chaos

How can we navigate the chaos of notifications and create a more effective communication workflow that enables us to focus on what truly matters?

Sharing Is Caring

What applications do you use to communicate with your team, and have you found any tools that enhance this process to make it smoother or more efficient?

Discuss!

What is the ideal workflow between the design and frontend team when you have tight deadlines?

Luca Argentieri — Tue, 19 Nov 2024 17:11:11 +0000

I’m sharing this short story to outline a workflow I experienced and invite you to share your thoughts on this fundamental topic.

The last project I worked on (an e-commerce platform) took 5 weeks to complete the design and development phase.

After receiving the brief, the design and dev teams immediately met to align on the project. They discussed technical constraints and how to deliver the first layout for client approval.

The design team presented the layout using Figma's prototype preview, which allowed the client to experience the site with interactions and simulations. The client approved the design, and the team moved on to finalize their work.

When development started, the dev team encountered significant issues:

The Figma file was unorganized, with layouts scattered.
There were no components, variables, or hover states.
The only way to understand behaviors was through presentation mode.

In the rush to meet deadlines, the design team prioritized the client experience but overlooked the needs of the developers. The work was completed in time but this led to inefficiencies and frustration during the development phase.

Why This Matters

In order to maintain a healthy work environment and ensure seamless collaboration between design and development, what can be done?

Let's Discuss

Has something similar happened to you? Share your thoughts and ideas to help avoid these situations and improve team workflows!

What is the ideal workflow between backend and frontend teams when you have short deadlines?

Luca Argentieri — Wed, 13 Nov 2024 07:19:36 +0000

Unfortunately, it’s not always possible to have ideal development times, so I was wondering if it is possible to improve the workflow between two teams (backend and frontend in my case), improving the development experience for everyone.

Feel free to share your workflow, articles, or just your thoughts.

Discuss!

A new customizable vue video player

Luca Argentieri — Wed, 24 Jan 2024 13:47:42 +0000

Hey developers!

Today, my team at display.studio released a new Vue library! We are excited to contribute to the open-source community by creating useful tools that are highly customizable and easy to implement.

Library Link

First of all, what is it and why?

There are a lot of video player libraries but we found them hard to customize, heavy, and not easy to use in our nuxt projects.
Our library is available for every vue and nuxt project.
Guide to installation

Our goal

We have developed a wrapper with minimal logic, which provides you with all the props and events of the video tag.

Example:

<script setup>
import { VuePlayer } from '@display-studio/vue-player'
</script>

<template>
    <div>
        <VuePlayer src="" poster="">
           <MyCustomControls />
        </VuePlayer>
    </div>
</template>

By default, the controls of the native video tag are disabled to allow you to utilize your custom controls.

Inside the VuePlayer instance, you can use the useVuePlayer function which provides you with:

togglePlay
playing
toggleMute
videoMuted

With these elements, you can customize your controls with different text or SVG.

<script setup>
import { useVuePlayer } from '@display-studio/vue-player'
const player = useVuePlayer()
</script>

<template>
  <div class="vue-player__controls">
    <button @click="player.togglePlay()" class="vue-player__controls-toggleplay">
      {{ player.playing ? "pause" : "play" }}
    </button>
    <button @click="player.toggleMute()" class="vue-player__controls-togglemute">
      {{ player.videoMuted ? "unmute" : "mute" }}
    </button>
  </div>
</template>

We started a discussion on GitHub to talk about new features such as implementing a fullscreen function in useVuePlayer to customize and place where you prefer.

Anyone who wants to contribute is welcome!
We are open to listening to feedback on bugs and new feature requests.

Thank you!

Shoe Discord Bot

Luca Argentieri — Mon, 07 Feb 2022 20:06:26 +0000

Hello, wonderful people of the internet and welcome to my first post in dev.to community.
I'm here today to present my shoe discord bot and all its features.

- First of all, why? 💡

Well, I had in mind to build a bot to stay updated on the prices and upcoming releases of the sneakers. The biggest problem was finding the right API, but we managed to find a guy who did a huge job, put together: StockX FlightClub, Goat, and Stadium Goods API, cool right?
With this mega API, we started studying discord.js and the project started.

Shoe Discord Bot 🤖👟

Idea 💡

We had in mind to build a bot to stay updated on the prices and upcoming releases of the sneakers.
The biggest problem was finding the right API, but we managed to find a guy who did a huge job, put together: StockX FlightClub, Goat and Stadium Goods API, cool right?

With this mega api we started studying discord.js and the project started.

API 👟

Sneaks-API by @druv5319

A StockX API, FlightClub API, Goat API, and Stadium Goods API all in one.

Sneaks API is a sneaker API built using Node.JS, Express, and Got. The Sneaks API allows users to get essential sneaker content such as images, product links and even prices from resell sites while also collecting data and storing it within a database.
Read more...

Setup 📦

First create an application from here

Go in Bot and create a new bot
Go in 0Auth2/General
Select in AUTHORIZATION METHOD In-App Authorization
Tick bot in SCOPES
Tick administrator in BOT PERMISSIONS
Copy CLIENT ID

Now move in Bot tab and tick

Presence Intent
Server Members Intent
Message Content Intent

Invite the bot in your discord server with this link template: https://discord.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&scope=bot

Clone the repo

git clone https://github.com/LucaArgentieri/Shoe-Discord-Bot.git

Run

npm i

Create a .env file and put bot token (you can copy it from dev portal -> bot -> token)

BOT_TOKEN_KEY=DISCORD_BOT_TOKEN_HERE

Run

npm run start

Use commands in chat! 🎉

You can use heroku or others for host your bot and have fun

Commands 🤖

Some names are temporary

$help
For information on generic resell prices or based on the desired number.

$retail Yeezy(example)
To get information about a shoe at retail.

$nextDrop
To stay updated on upcoming releases.

$todayDrop
To stay updated on the releases of the day.

$monthDrop
To stay updated on the releases of the current month.

$infoShoesNumber Yeezy 11(example)
To get information about a shoe with number.

$mostPopular
To see the most popular scapre in the last three months.

Thanks to all Contributors 👩‍💻👨‍💻

If you like star ⭐️ and share!

This is a personal project that I use to learn, everyone is free to use it and can contribute to the code.

I let you the link to my repo and thank you for reading, see you in the next post.

Bye!