DEV Community: Federico

How to Delete Multiple Instagram Comments at Once with a JavaScript Script

Federico — Sat, 29 Nov 2025 09:34:57 +0000

How to Delete Multiple Instagram Comments at Once Using JavaScript

Introduction

Instagram doesn’t provide a native option to delete multiple comments at once. If you have hundreds of spam or unwanted comments, doing it manually is a nightmare.

In this article, I’ll show you a simple JavaScript script that automates the process directly from your browser.

Why This Script?

Instagram only allows manual comment deletion.
This script simulates clicks on Instagram’s web interface.
You can delete comments in batches (e.g., 20 at a time).

Before You Start

You need to use Instagram Web from a computer. Here’s what to do:

Open your browser (Chrome, Edge, Firefox).
Go to Instagram Web and log in.
Navigate to Your Activity → Comments (this is where Instagram lists all your comments).
Open the Developer Tools Console:
- Press F12 or Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac).
- Click on the Console tab.

The Script

Paste this script into the console and press Enter:

(async () => {
    function simulateClick(el) {
        const evt = new MouseEvent("click", { bubbles: true, cancelable: true, view: window });
        el.dispatchEvent(evt);
    }

    async function deleteBatch(batchSize = 20) {
        const selectBtn = Array.from(document.querySelectorAll("span"))
            .find(el => el.textContent.trim() === "Select");
        if (selectBtn) simulateClick(selectBtn.parentElement);

        await new Promise(r => setTimeout(r, 1500));

        const checkboxes = Array.from(document.querySelectorAll('[data-testid="bulk_action_checkbox"] [role="button"]'));
        if (checkboxes.length === 0) return false;

        const batch = checkboxes.slice(0, batchSize);
        for (let i = 0; i < batch.length; i++) {
            simulateClick(batch[i]);
            await new Promise(r => setTimeout(r, 300));
        }

        const deleteBtn = await new Promise(resolve => {
            const interval = setInterval(() => {
                const btn = document.querySelector('[aria-label="Delete"]');
                if (btn && !btn.hasAttribute('disabled')) {
                    clearInterval(interval);
                    resolve(btn);
                }
            }, 500);
        });

        simulateClick(deleteBtn);

        await new Promise(r => setTimeout(r, 1500));
        const confirmBtn = Array.from(document.querySelectorAll('span'))
            .find(el => el.textContent.trim() === 'Delete');
        if (confirmBtn) simulateClick(confirmBtn.parentElement);

        await new Promise(r => setTimeout(r, 3000));
        return true;
    }

    await deleteBatch(20);
})();

How It Works

Activates the selection mode.
Selects up to 20 comments (you can change this number).
Clicks the Delete button when available.
Confirms the deletion in the popup.

Customizations

batchSize: Change the number of comments to delete per cycle.
Delays: If Instagram is slow, increase the setTimeout values.

Warnings

Works only on Instagram Web.
Don’t abuse it: Instagram may temporarily block actions if they’re too fast.
Use only on accounts you own.

Implementare Micro Frontend con Angular 19 e Module Federation: Shell + Runtime Integration

Federico — Sat, 08 Nov 2025 00:53:52 +0000

Step 1: Creare la Shell

Genera il progetto principale:

ng new shell-app --routing --style=scss

Aggiungi il supporto Module Federation:

ng add @angular-architects/module-federation --type host --port 4200

Esempio di configurazione `webpack.config.js`:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:4200/",
    uniqueName: "shell"
  },
  optimization: {
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      remotes: {
        mfeProduct: "mfeProduct@http://localhost:4201/remoteEntry.js",
        mfeProfile: "mfeProfile@http://localhost:4202/remoteEntry.js"
      },
      shared: {
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/common": { singleton: true, strictVersion: true },
        "@angular/router": { singleton: true, strictVersion: true }
      }
    })
  ]
};

Step 2: Creare un Remote

Genera un'app remota:

ng new mfe-product --routing --style=scss

Configura `webpack.config.js`:

new ModuleFederationPlugin({
  name: "mfeProduct",
  filename: "remoteEntry.js",
  exposes: {
    "./ProductModule": "./src/app/product/product.module.ts"
  },
  shared: {
    "@angular/core": { singleton: true, strictVersion: true },
    "@angular/common": { singleton: true, strictVersion: true }
  }
});

Step 3: Caricamento Dinamico (Runtime Integration)

Usa il helper loadRemoteModule:

import { loadRemoteModule } from '@angular-architects/module-federation';

export const routes: Routes = [
  {
    path: 'product',
    loadChildren: () =>
      loadRemoteModule({
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        remoteName: 'mfeProduct',
        exposedModule: './ProductModule'
      }).then(m => m.ProductModule)
  }
];

Best Practice

Standalone Components: Angular 19 supporta componenti standalone, riducendo la complessità dei moduli.
Shared Dependencies: Usa singleton: true per Angular core/common/router.
Errori comuni: Evita di condividere Angular come peerDependency (può causare NG0200 Circular DI).
Nx Monorepo: Per team grandi, Nx semplifica la gestione di più MFE con caching e generators.

Conclusione

Con Angular 19 e Module Federation puoi creare architetture scalabili, modulari e indipendenti. Questo setup permette:

Deploy indipendenti.
Aggiornamenti rapidi.
Riduzione dei conflitti tra team.

Architettura moderna dei frontend Leaflet-Angular App: Micro Frontend, Shell e Leaflet in Angular

Federico — Fri, 24 Oct 2025 20:43:58 +0000

Architettura moderna dei frontend: Micro Frontend, Shell e Leaflet in Angular

Introduzione

Nel contesto delle moderne applicazioni web, la crescente complessità e la necessità di scalabilità, manutenibilità e autonomia dei team hanno portato all'adozione di architetture distribuite anche nel frontend. I Micro Frontend rappresentano un paradigma architetturale che consente di suddividere un'applicazione frontend in moduli indipendenti, ciascuno gestito da un team dedicato, con il proprio ciclo di vita, stack tecnologico e pipeline di rilascio.

In questo articolo analizziamo come progettare un'architettura a micro frontend in Angular, integrando una shell principale con più MFE (Micro Frontend Applications), e focalizzandoci su un caso d'uso reale: la gestione di mappe interattive con Leaflet.

Perché scegliere i Micro Frontend?

Vantaggi principali:

Autonomia dei team
Deploy indipendenti
Scalabilità tecnica e organizzativa
Manutenibilità
Tecnologie eterogenee
Separazione dei domini funzionali (es. mappa, filtri, analytics, utente)

Architettura generale: Shell + MFE

Shell

La shell è l'applicazione contenitore che gestisce:

Il routing principale
Il layout condiviso (header, sidebar, footer)
L'integrazione dinamica dei MFE (via Webpack Module Federation)
Lo stato globale (NgRx, Redux, o soluzioni custom)
L'autenticazione e la gestione dei permessi (es. Keycloak)
La sessione utente condivisa

Micro Frontend (MFE)

Ogni MFE è un'applicazione autonoma, con:

Routing interno
Stato locale
Componenti e servizi propri
Pipeline CI/CD dedicata
Traduzione (file i18n)
Accesso alla sessione utente condivisa

Esempi di MFE in un'app geografica:

MFE	Dominio funzionale
`mfe-map`	Rendering mappa Leaflet, layer WMS, POI
`mfe-filters`	Filtri geografici e tematici
`mfe-details`	Dettagli POI, schede info, media
`mfe-analytics`	Grafici, KPI, heatmap
`mfe-user`	Profilo utente, permessi, ruoli

Integrazione tecnica con Angular e Module Federation

Configurazione base:

// webpack.config.js (esempio semplificato)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        mfeMap: 'mfeMap@http://localhost:4201/remoteEntry.js',
        mfeFilters: 'mfeFilters@http://localhost:4202/remoteEntry.js',
      },
      shared: {
        '@angular/core': { singleton: true },
        '@angular/common': { singleton: true },
        '@angular/router': { singleton: true },
      },
    }),
  ],
};

Integrazione della libreria interna di widget

Per garantire coerenza visiva e riuso dei componenti UI, è consigliabile creare una libreria interna (es. @company/widgets) contenente:

Componenti UI riutilizzabili (Button, Card, Modal, Table)
Servizi comuni (NotificationService, ThemeService)
Pipe e direttive condivise

Setup della libreria

Pubblicare la libreria su un registry privato (es. GitHub Packages, Verdaccio).
Aggiungere come dipendenza npm in ogni MFE e nella Shell:

npm install @company/widgets

Configurazione delle porte locali

Durante lo sviluppo, ogni MFE e la Shell girano su una porta diversa per facilitare il caricamento remoto via Module Federation.

Modulo	Porta	URL remoto
Shell	4200	http://localhost:4200/
mfe-map	4201	http://localhost:4201/remoteEntry.js
mfe-filters	4202	http://localhost:4202/remoteEntry.js
mfe-details	4203	http://localhost:4203/remoteEntry.js
mfe-analytics	4204	http://localhost:4204/remoteEntry.js
mfe-user	4205	http://localhost:4205/remoteEntry.js

Queste porte possono essere configurate nel file angular.json o tramite serve custom nei workspace multipli.

Comunicazione tra Shell e MFE tramite Event Bus

Per una comunicazione decoupled e scalabile, si può implementare un Event Bus basato su RxJS o CustomEvent.

Soluzione con RxJS (Shared Event Bus)

// event-bus.service.ts
@Injectable({ providedIn: 'root' })
export class EventBusService {
  private subject$ = new Subject<{ type: string; payload?: any }>();

  emit(event: { type: string; payload?: any }) {
    this.subject$.next(event);
  }

  on(type: string): Observable<any> {
    return this.subject$.asObservable().pipe(
      filter(event => event.type === type),
      map(event => event.payload)
    );
  }
}

Utilizzo

// MFE emette evento
this.eventBus.emit({ type: 'poiSelected', payload: poi });

// Shell ascolta
this.eventBus.on('poiSelected').subscribe(poi => {
  this.detailsService.loadDetails(poi);
});

Condivisione della sessione Keycloak tra Shell e MFE

Soluzioni per la gestione della sessione utente con Keycloak

Shared Auth Service come singleton

Una delle soluzioni più robuste per la gestione della sessione utente in un'architettura Micro Frontend è la definizione di un modulo auth-lib nella Shell, che espone un AuthService singleton contenente lo stato della sessione e i metodi di autenticazione.

Caratteristiche del modulo auth-lib

Stato della sessione utente (token, profilo, ruoli)
Metodi login(), logout(), isAuthenticated(), getToken()
Rinnovo automatico del token (es. con Keycloak JS Adapter)
EventEmitter o Subject per notificare i MFE su cambiamenti di sessione

Esportazione via Module Federation
Nel webpack.config.js della Shell:

// webpack.config.js
shared: {
  '@my-org/auth-lib': {
    singleton: true,
    strictVersion: true,
    requiredVersion: 'auto',
  },
}

Importazione nei MFE
Nel webpack.config.js del MFE:

remotes: {
  shell: 'shell@http://localhost:4200/remoteEntry.js'
}

Nel codice Angular del MFE:

import('shell/AuthService').then(({ AuthService }) => {
  const token = AuthService.getToken();
  if (AuthService.isAuthenticated()) {
    // procedi con chiamate protette
  }
});

Vantaggi

Centralizzazione della logica di sessione
Singleton garantito tra Shell e MFE
Decoupling funzionale: i MFE non gestiscono direttamente Keycloak
Facile estensione: supporto a ruoli, permessi, refresh token, ecc.

Asset multimediali (immagini, icone, font)

Ogni MFE può servire i propri asset statici tramite il proprio assets/ locale.
Per asset condivisi (es. logo, icone del design system), è consigliabile in una libreria condivisa.

Traduzioni i18n

Gestione delle traduzioni i18n con ngx-translate

Una delle possibili soluzioni è il servizio ngx-translate

File di traduzione

Ogni MFE può avere i propri file assets/i18n/en.json, it.json, ecc.

Esempio it.json:

{
  "LABEL": "Etichetta",
  "WELCOME": "Benvenuto"
}

Utilizzo nei template

<h1>{{ 'WELCOME' | translate }}</h1>
<button>{{ 'LABEL' | translate }}</button>

Cambio lingua runtime

La Shell può gestire il cambio lingua e notificare i MFE tramite EventBus o servizio condiviso:

this.translate.use('it');

Oppure

this.eventBus.emit({ type: 'localeChanged', payload: 'it' });

I MFE ascoltano e aggiornano:

this.eventBus.on('localeChanged').subscribe(locale => {
  this.translate.use(locale);
});

Questa architettura consente una gestione distribuita e coerente delle traduzioni, con supporto a localizzazione dinamica, modularità e autonomia dei team.

Architettura consigliata per chiamate API nei MFE

Facade per ogni MFE

Ogni Micro Frontend dovrebbe avere un proprio servizio o facade che incapsula le chiamate al backend relative al suo dominio funzionale. Questo approccio garantisce:

Isolamento del dominio (es. PoiService, UserService, AnalyticsService)
Testabilità e mocking facilitato
Manutenibilità e coerenza interna

Interceptor condiviso

Un HttpInterceptor comune, definito nella Shell o in una libreria condivisa, può essere utilizzato da tutti i MFE per:

Inserire il token JWT nella Authorization header
Gestire gli errori globali (es. 401 → redirect, 403 → access denied, 500 → fallback UI)
Loggare o tracciare le chiamate (es. OpenTelemetry, Sentry)

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('kc_token');
    const authReq = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });

    return next.handle(authReq).pipe(
      catchError(err => {
        if (err.status === 401) {
          // redirect alla Shell per login
        }
        return throwError(() => err);
      })
    );
  }
}

Come strutturare un'app Angular scalabile nel 2025

Federico — Fri, 24 Oct 2025 20:27:32 +0000

Come strutturare un'app Angular scalabile nel 2025

Introduzione

Molti progetti Angular crescono rapidamente e diventano difficili da mantenere. In questo articolo vedremo come strutturare un'app scalabile e modulare, pronta per crescere nel tempo.

1. Modularizzazione

Dividere l'app in moduli funzionali (feature modules) aiuta a mantenere il codice organizzato e a facilitare il lazy loading.

2. Lazy Loading

Caricare i moduli solo quando necessari migliora le performance iniziali dell'app.

const routes: Routes = [
  {
    path: 'cart',
    loadChildren: () => import('./features/cart/cart.module').then(m => m.CartModule)
  }
];

3. Gestione dello stato con NgRx

NgRx aiuta a centralizzare e prevedere lo stato dell'applicazione, utile in progetti complessi.

4. Testing

Utilizza Jest per test unitari veloci e affidabili. Organizza i test per modulo.

5. Best Practice

Usa i servizi per la logica di business
Evita logica nei componenti
Usa i resolver per caricare dati prima della navigazione
Documenta le decisioni architetturali

Conclusione

Una buona struttura iniziale è fondamentale per la scalabilità. Investire tempo nella progettazione dell'architettura ripaga nel lungo periodo.

Autore: Federico Croletti – Senior Frontend Consultant

Split Draw Precision

Federico — Fri, 25 Nov 2022 14:12:31 +0000

Through the split function I divide a pre-selected polygonal area.

But the precision is too strict and therefore the selection ends if the next selected point is too close

How do I set a different split precision?

DEV Community: Federico

How to Delete Multiple Instagram Comments at Once with a JavaScript Script

How to Delete Multiple Instagram Comments at Once Using JavaScript

Introduction

Why This Script?

Before You Start

The Script

How It Works

Customizations

Warnings

Implementare Micro Frontend con Angular 19 e Module Federation: Shell + Runtime Integration

Step 1: Creare la Shell

Genera il progetto principale:

Aggiungi il supporto Module Federation:

Esempio di configurazione webpack.config.js:

Step 2: Creare un Remote

Genera un'app remota:

Configura webpack.config.js:

Step 3: Caricamento Dinamico (Runtime Integration)

Best Practice

Conclusione

Architettura moderna dei frontend Leaflet-Angular App: Micro Frontend, Shell e Leaflet in Angular

Architettura moderna dei frontend: Micro Frontend, Shell e Leaflet in Angular

Introduzione

Perché scegliere i Micro Frontend?

Vantaggi principali:

Architettura generale: Shell + MFE

Shell

Micro Frontend (MFE)

Integrazione tecnica con Angular e Module Federation

Configurazione base:

Integrazione della libreria interna di widget

Setup della libreria

Configurazione delle porte locali

Comunicazione tra Shell e MFE tramite Event Bus

Condivisione della sessione Keycloak tra Shell e MFE

Shared Auth Service come singleton

Caratteristiche del modulo auth-lib

Vantaggi

Asset multimediali (immagini, icone, font)

Traduzioni i18n

Gestione delle traduzioni i18n con ngx-translate

File di traduzione

Utilizzo nei template

Cambio lingua runtime

Architettura consigliata per chiamate API nei MFE

Facade per ogni MFE

Interceptor condiviso

Come strutturare un'app Angular scalabile nel 2025

Come strutturare un'app Angular scalabile nel 2025

Introduzione

1. Modularizzazione

2. Lazy Loading

3. Gestione dello stato con NgRx

4. Testing

5. Best Practice

Conclusione

Split Draw Precision

Esempio di configurazione `webpack.config.js`:

Configura `webpack.config.js`: