Come ho utilizzato ChatGPT per scrivere un bookmarklet JavaScript personalizzato

Diario di programmazione: questo fine settimana ho usato l'intelligenza artificiale per creare un piccolo aiuto per la scrittura davvero interessante che mi farà sicuramente risparmiare tempo e clic del mouse ogni giorno. Ecco come.

Negli ultimi mesi abbiamo dedicato molto tempo all'esplorazione di come ChatGPT possa aiutarci a scrivere codice. In questo articolo ti guiderò attraverso il processo di utilizzo di ChatGPT per fare proprio questo.

Come parte del mio flusso quotidiano, c'è un fastidio che volevo affrontare. Creare i riferimenti "Also" nei miei articoli ZDNET richiede una serie di passaggi. Per riferimento, eccone uno di questi link. Anche:

Per farlo sono necessari una serie di passaggi (mostrati di seguito), che volevo eliminare. Ne faccio un sacco nella maggior parte degli articoli e non solo è fastidioso, ma è duro per il mio polso.

Ma è possibile, senza scrivere una sola riga di codice, creare un bookmarklet JavaScript per eliminare questo fastidio? I non programmatori possono realizzare piccoli progetti come questo?

La risposta è si. Ma non è così veloce o intuitivo come potresti desiderare.

Ho registrato ciascuno dei passaggi che ho intrapreso per creare questa funzionalità in una serie di voci di registro simili a un diario. Tendo a lavorare su progetti come questo facendo un po', registrando i miei pensieri e le mie osservazioni, poi mi allontano per lasciare che penetrino nel mio cervello mentre lavoro su altri incarichi con scadenza. Poi torno, faccio un po' di più e scrivo un po' di più.

Leggendo le voci del registro, sarai in grado di farti un'idea del processo di programmazione di ChatGPT attraverso la richiesta. Alla fine, discuterò di tutti gli spunti che il processo mi ha aiutato a scoprire.

Iniziamo.

Voce di registro 001 - venerdì, 14:10

Quindi, ho appena deciso che è ora che ChatGPT scriva del codice per me. C'è un'attività ripetitiva che svolgo sempre, più volte durante il giorno, ed è ora di avere un pulsante che mi faccia risparmiare passaggi. Ci penserò mentre lavorerò su un altro articolo.

Voce di registro 002 - venerdì, 14:45

Si scopre che non è così facile. Non puoi semplicemente dire a ChatGPT di "scrivimi un pulsante che mi faccia risparmiare passaggi". In realtà devi essere in grado di descrivere cosa vuoi che faccia. Questa è un'abilità tutta da sola.

Ora, fortunatamente, lavoro a programma da decenni, quindi so come creare una specifica e anche semplicemente descrivere ciò che voglio. Tempo di pensare. Tornerò.

Voce di registro 003 - venerdì, 16:02

Ok, quindi prima devo essere in grado di descrivere quello che voglio. Una volta che l'ho descritto, posso provare a fare in modo che ChatGPT mi fornisca il codice per automatizzare questo processo. Voglio qualcosa che riduca i clic necessari per creare i nostri collegamenti Anche.

Tale collegamento è costituito da alcuni elementi:

• La stringa "Anche: ". Nota che ha i due punti seguiti da uno spazio
• Il nome di un articolo, trasformato in un collegamento ipertestuale
• Il tutto fatto in grassetto

Sembra abbastanza semplice, ma ecco i passaggi che faccio ogni volta che voglio realizzarne uno.

1. Trova l'articolo che desidero "Anche". Non lo automatizzerò perché è diverso ogni volta.
2. Vai alla pagina di quell'articolo. Anche questo non lo automatizzerò. Ma voglio automatizzare tutto ciò che segue.
3. Copia il titolo dell'articolo
4. Passare al CMS ZDNET e cliccare sulla riga dove voglio inserire il file Also.
5. Digitare la stringa "Anche: "
6. Fai clic su "Anche:" e seleziona Incolla e abbina stile dal menu Modifica. Non posso usare la scorciatoia da tastiera ^V perché altrimenti otterrò un carattere del titolo enorme. E non posso utilizzare la scorciatoia da tastiera Incolla e abbina stile perché richiede la pressione di troppi tasti contemporaneamente per essere eseguita in modo affidabile ogni volta.
7. Ora torna all'articolo e copia l'URL.
8. Torna al CMS
9. Seleziona il titolo appena incollato
10. Digitare ^K come scorciatoia, che apre la finestra di dialogo Inserisci collegamento.
11. Incolla l'URL, fai clic su OK.
12. Seleziona l'intera riga
13. Il testo è in grassetto.

Sono fondamentalmente 11 passaggi, un sacco di clic del mouse, alcuni clic e trascinamenti e un sacco di pressioni di tasti. Voglio ridurlo a un clic e un incolla.

Voce di registro 004 - venerdì, 16:57

Questa era sicuramente una descrizione del mio processo e descrive anche un paio di problemi. Ma non dice nulla su cosa voglio esattamente in un nuovo strumento. Affinché ChatGPT possa scrivere il codice, deve sapere cosa voglio che faccia. Più tempo per pensare.

Voce di registro 005 - venerdì, 19:12

Ho deciso che, invece di creare un'estensione per Chrome, creerò un bookmarklet JavaScript. Sono facili da aggiungere a una barra dei segnalibri e non richiedono molti problemi di installazione aggiuntivi. Tutto quello che devi fare è fare clic con il pulsante destro del mouse sulla barra dei segnalibri, scegliere Aggiungi pagina e (1) inserire il titolo. Il JavaScript stesso viene incollato nel campo URL (2).

Ecco una prima bozza di ciò che voglio che faccia questo nuovo bookmarklet.

Voglio creare un bookmarklet JavaScript. Quando premuto, recupera l'URL corrente della pagina corrente. Recupera anche il titolo della pagina. Inserisce negli appunti una porzione di testo RTF costituito dalla stringa "Anche: " seguita da un collegamento RTF con il titolo del collegamento e l'URL recuperato. L'intero blocco di testo RTF deve essere in grassetto.

Se riesco a fare in modo che ChatGPT mi dia qualcosa che funzioni, tutto quello che dovrò fare è fare clic sul pulsante, passare al CMS, trovare il mio posto e incollare. Più veloce.

Ora, tutto quello che mi resta da fare è... tutto.

Voce di registro 006 - Sabato, 8:30

Sono coraggioso. Ho deciso di fornire la descrizione esatta sopra a ChatGPT e vedere se mi fornirà un codice che funzioni. Ehi, vale la pena provare.

Voce di registro 007 - Sabato, 8:41

Beh, non ha funzionato assolutamente. Tutto ciò che ha fatto è stato conservare tutto ciò che era precedentemente nei miei appunti. Ma parte della risposta di ChatGPT mi ha fatto riflettere.

È anche importante menzionare che document.execCommand('copy') è contrassegnato come obsoleto nei browser moderni (ad esempio Chrome, Firefox), poiché suggeriscono di utilizzare l'API Appunti, ma per quanto ne so, interruzione nel 2021, l'API Appunti non supporta la copia diretta del testo RTF negli appunti.

Quindi, il codice che conosce potrebbe essere obsoleto. Proviamo a vedere se possiamo utilizzare i plugin di ChatGPT Plus con il plugin WebSearchG.

Beh, anche quello non ha funzionato. Invece del codice, sono stato inviato a siti come Stack Overflow per leggere articoli su come gestire i dati degli appunti.

Questo non va bene. Sto cercando di fare in modo che ChatGPT esegua la programmazione per me. Proviamo l'interprete di codice aggiuntivo ChatGPT Plus e vediamo se può essere d'aiuto.

Voce di registro 008 - Sabato, 9:08

Nemmeno quello ha funzionato. Ha risposto con:

Sfortunatamente, per quanto ne so, a settembre 2021, non esiste un modo diretto e universalmente supportato per copiare il testo RTF negli appunti utilizzando JavaScript.

Ratti! Sventato di nuovo! È ora di prendere un altro caffè.

Voce di registro 009 - Sabato, 10:27

Ci ho pensato per un po' (e mi sto alimentando con altro caffè). Forse è necessario affrontare la frase “supportato universalmente”. Sto modificando la mia prima riga da "Voglio creare un bookmarklet JavaScript". a "Desidero creare un bookmarklet JavaScript in Chrome".

Vediamo cosa fa.

Voce di registro 010 - sabato, 10:33

Beh no. Questo mi ha restituito l'HTML in forma di testo. Non è qualcosa che posso incollare direttamente nel CMS. Ne ho bisogno per restituire il testo RTF negli appunti.

Voce di registro 011 - Sabato, 11:20

Sto pensando che forse ChatGPT Plus non ha utilizzato Code Interpreter, anche se era abilitato. Per utilizzare i plugin, a volte devi dire esplicitamente a ChatGPT di farlo. Proviamo questa come riga di apertura:

Utilizza l'interprete di codice per le chiamate API del browser correnti. Voglio creare un bookmarklet JavaScript.

O si. Che funzioni! Controlla. Questo è stato creato con un solo clic sul mio bookmarklet:

Voce di registro 012 - Sabato 13:04

Il fatto che funzioni così bene è semplicemente fantastico.

Detto questo, non mi piace " | ZDNET" alla fine della stringa. Quindi vedrò se riesco a convincerlo a rimuoverlo.

Voce di registro 013 - sabato 14:27

Il pranzo è stato carino. Scorfani freschi e catturati in natura proprio qui, nel Pacifico nord-occidentale. È piuttosto economico perché è una cattura locale. Un po' di limone e Old Bay. Cibo per la mente. E con quello…

Sono a un punto decisionale interessante. Ci sono tre modi in cui posso procedere.

Uno è provare a modificare il prompt originale per aggiungere le nuove funzionalità che desidero. Questa è la scelta migliore se devo iniziare una sessione completamente nuova.

Il problema di questo approccio è che ChatGPT non restituisce sempre gli stessi risultati quando viene posta la stessa domanda. Quindi, se gli do un suggerimento prolungato, potrei ottenere qualcosa che funziona, potrei ottenere qualcosa che funziona parzialmente, oppure potrebbe decidere di andare completamente oltre e raccontarmi i titoli delle opere di William Shakespeare in Klingon colloquiale.

Il secondo approccio è scrivere un prompt che chieda a ChatGPT di modificare il codice precedentemente fornito con la nuova funzionalità. Funzionerà se la sessione è ancora attiva.

Un terzo approccio consiste nel fornire a ChatGPT il codice generato in precedenza e chiedergli di apportare modifiche. Mi piace questo approccio, ma è un po' più complicato.

Per ora proverò il secondo approccio. Vedrò se riesco a convincerlo a eliminare la stringa " | ZDNET" alla fine del titolo. Proviamo questo come suggerimento:

Modifica il codice generato in precedenza e rimuovi la stringa " | ZDNET" alla fine di tutti i titoli in cui esiste. Rendi questa funzionalità senza distinzione tra maiuscole e minuscole.

Ok, quindi questo ha rotto la sceneggiatura. Come la volta precedente in cui non funzionava, sto semplicemente mantenendo tutto ciò che era precedentemente negli appunti.

Proviamo la prima opzione, modificando il prompt completo. Aggiungerò il mini-prompt alla fine del prompt principale, avvierò una nuova sessione e vedrò se ne traggo qualche soddisfazione.

Al mio primo tentativo, non è riuscito. Ma poi ho specificato che volevo creare "un bookmarklet JavaScript per Chrome" e ha funzionato!

Controlla. Ecco anche due collegamenti creati con il mio bookmarklet scritto dall'intelligenza artificiale.

…E..

Il codice finale

Funzionalmente, il mio codice è completo. Ecco il blocco di codice finale fornito da ChatGPT:

Ed ecco il prompt finale che ho finito per utilizzare. Tieni presente che ciò richiede ChatGPT Plus, GPT-4 e il componente aggiuntivo Code Interpreter.

Utilizza l'interprete di codice per le chiamate API del browser correnti. Voglio creare un bookmarklet JavaScript per Chrome.

Quando premuto, recupera l'URL corrente della pagina corrente. Recupera anche il titolo della pagina. Se il titolo della pagina termina con " | ZDNET" (senza distinzione tra maiuscole e minuscole), rimuove quella stringa dalla fine del titolo.

Inserisce negli appunti una porzione di testo RTF costituito dalla stringa "Anche: " seguita da un collegamento RTF con il titolo del collegamento e l'URL recuperato. L'intero blocco di testo RTF deve essere in grassetto.

Approfondimenti e osservazioni

Questo progetto è stato completato quasi esattamente 24 ore dopo averlo iniziato. Ovviamente non ho impiegato 24 ore di lavoro. Direi che probabilmente sono stati circa 90 minuti di lavoro effettivo, intervallati da altro lavoro, fine settimana in famiglia e un po' di tempo per pensare.

Ciò ha richiesto molta riflessione.

Ho scritto molto JavaScript. Anche se non ho avuto a che fare con il rich text, ho sicuramente l'esperienza di codifica per averlo scritto da zero. Non ci avrei messo solo 90 minuti per scriverlo, ma probabilmente avrei potuto completarlo in un fine settimana.

La codifica basata sull’intelligenza artificiale ha una mentalità molto diversa. Sebbene sia la realizzazione della propria codifica che l'utilizzo dell'intelligenza artificiale richiedano una comprensione molto chiara di ciò che si desidera che il codice faccia, il modo di costruire il prodotto finale è molto diverso.

L'ho già detto in precedenza, ma è stato dimostrato qui: scrivere codice utilizzando l'intelligenza artificiale è molto simile alla gestione di un altro programmatore. La codifica è sintassi e algoritmi, una fusione mentale tra il mio cervello e il mio sistema di sviluppo.

Con il codice, soprattutto con un progetto così piccolo come questo, è abbastanza facile capire perché qualcosa non funziona. Ma con il codice generato dall’intelligenza artificiale, chi lo sa? Ci sono molte supposizioni. Nemmeno l'intelligenza artificiale lo sa davvero. Un minuto ti dirà che "non può farlo" e il minuto dopo lo fa.

Sembra molto più come negoziare con Scotty di Star Trek (che diceva sempre al Capitano Kirk che non poteva essere fatto o citava un tempo di consegna eccessivo in modo che in seguito avrebbe fatto bella figura) che cesellare un codice funzionante dal grezzo ASCII prodotto da ogni tastiera.

Ci sono luoghi in cui sapere come funziona il codice ha aiutato a istruire l'IA. Ad esempio, gli ho detto di filtrare per ZDNET ma di ignorare maiuscole e minuscole. Questo perché so che potremmo trovare ZDNET, ZDNet e forse altri formati. Non posso dirti quante volte sono stato punto da una dipendenza dal caso.

Avevo anche bisogno di sapere che l'output prodotto si chiama "rich text". Questo non è qualcosa che probabilmente qualcuno senza esperienza di programmazione saprà. Quindi, per una persona del genere, potrebbe esserci stata molta più frustrazione nel convincere l’intelligenza artificiale a inserire i dati giusti negli appunti.

Come parte di questo esperimento, non mi permetterei di toccare il codice. Oltre a copiarlo da ChatGPT e incollarlo nel mio bookmarklet, non ho toccato, modificato, cambiato o migliorato il codice JavaScript.

Tuttavia, ho ottenuto un bookmarklet funzionante che farà, senza dubbio, risparmiare a me (e ai miei redattori) tempo e fastidio. E questo è molto bello. Sono davvero entusiasta di avere questa funzionalità. Poiché faccio così spesso queste righe e sono così noiose, questa nuova funzionalità a due clic mi rende molto felice. Darò questo punto alle capacità di codifica di ChatGPT.

Basta non confondere il fatto che ChatGPT scriva un'applicazione molto piccola e precisa con il pensiero che possa affrontare un grande progetto. Sono necessarie tutte le competenze di gestione del progetto, specifiche di prodotto, gestione del team, produzione e test. Quelli non si sostituiscono facilmente con un'intelligenza artificiale.

Se vuoi costruire qualcosa per uso personale, provalo e raccontacelo. Cosa chiederesti a ChatGPT di creare per te? Quali funzionalità potrebbe offrire un bookmarklet per farti risparmiare tempo? Fateci sapere nei commenti qui sotto.

Puoi seguire gli aggiornamenti quotidiani sui miei progetti sui social media. Assicurati di iscriverti alla mia newsletter di aggiornamento settimanale su Substack e seguimi su Twitter su @DavidGewirtz, su Facebook su Facebook.com/DavidGewirtz, su Instagram su Instagram.com/DavidGewirtz e su YouTube su YouTube.com/DavidGewirtzTV.