[{"data":1,"prerenderedAt":708},["ShallowReactive",2],{"tag-frontend":3},[4,243,450],{"id":5,"title":6,"body":7,"categories":224,"coverImage":226,"date":227,"description":228,"extension":229,"meta":230,"navigation":231,"path":232,"seo":233,"stem":234,"sticky":231,"tags":235,"__hash__":242},"articles/otto-anni-dopo-dallarchitettura-wordpress-al-boom-dei-siti-headless.md","Otto anni dopo: dall’architettura WordPress al boom dei siti headless",{"type":8,"value":9,"toc":213},"minimark",[10,25,36,41,59,64,86,89,93,98,118,121,125,128,182,186,193,204],[11,12,13,14,24],"p",{},"Nel 2016, al Meetup WordPress di Roma, parlavo di ",[15,16,20],"a",{"href":17,"rel":18},"https://blog.enricodeleo.com/modern-gentlemens-wordpress-un-nuovo-approccio-al-web",[19],"nofollow",[21,22,23],"strong",{},"“Modern Gentlemen’s WordPress”",", un approccio metodico e strutturato per creare applicazioni WordPress mantenibili e performanti. Guardando indietro, quel talk fu una riflessione sullo stato dell’arte e una guida per affrontare il caos di plugin, temi pesanti e customizzazione spesso inefficiente.",[11,26,27,28,31,32,35],{},"Oggi, a distanza di otto anni, il panorama dello sviluppo web è radicalmente cambiato. Le parole chiave del 2024 sono ",[21,29,30],{},"headless CMS"," e ",[21,33,34],{},"frontend moderni",", con framework come Nuxt3 che dominano la scena. In questa retrospettiva, voglio analizzare cosa è cambiato e come WordPress continui a essere rilevante, ma in modi completamente nuovi.",[37,38,40],"h2",{"id":39},"il-passaggio-allheadless-cms","Il passaggio all'headless CMS",[11,42,43,44,46,47,50,51,54,55,58],{},"Se nel 2016 WordPress era prevalentemente utilizzato come piattaforma monolitica, oggi si sta affermando sempre più come ",[21,45,30],{},". Questo approccio separa completamente il backend dal frontend: WordPress si occupa di gestire contenuti e API, mentre il frontend viene sviluppato con tecnologie come ",[21,48,49],{},"Nuxt3",", ",[21,52,53],{},"React",", o ",[21,56,57],{},"Next.js",".",[60,61,63],"h3",{"id":62},"perché-scegliere-unarchitettura-headless","Perché scegliere un'architettura headless?",[65,66,67,74,80],"ul",{},[68,69,70,73],"li",{},[21,71,72],{},"Performance superiore",": Caricamenti più rapidi grazie a frontend ottimizzati per il rendering statico o server-side.",[68,75,76,79],{},[21,77,78],{},"Flessibilità",": Il backend WordPress può alimentare diverse piattaforme (sito web, app mobile, chatbot).",[68,81,82,85],{},[21,83,84],{},"Esperienza utente avanzata",": Un frontend moderno permette di implementare interfacce altamente interattive e dinamiche.",[11,87,88],{},"WordPress, con la sua API REST nativa e GraphQL tramite plugin come WPGraphQL, si adatta perfettamente a questo paradigma. Il tuo contenuto rimane centralizzato, ma puoi costruire esperienze utente al passo con le aspettative del 2024.",[37,90,92],{"id":91},"perché-nuxt3-è-il-frontend-ideale","Perché Nuxt3 è il frontend ideale",[11,94,95,97],{},[21,96,49],{},", basato su Vue 3, si è affermato come una delle soluzioni più robuste per lo sviluppo di frontend headless. Rispetto al Nuxt2 del 2016, questa nuova versione offre:",[65,99,100,106,112],{},[68,101,102,105],{},[21,103,104],{},"Prestazioni migliorate",", grazie a Vue 3 e Vite per il bundling.",[68,107,108,111],{},[21,109,110],{},"Supporto nativo per il rendering universale",", fondamentale per SEO e performance.",[68,113,114,117],{},[21,115,116],{},"Modularità e scalabilità",", con un ecosistema che facilita l’integrazione con CMS, autenticazione e servizi cloud.",[11,119,120],{},"Con Nuxt3, puoi costruire siti che combinano il meglio del rendering statico (SSG) e server-side (SSR). Questo lo rende perfetto per e-commerce, blog e applicazioni web avanzate.",[37,122,124],{"id":123},"come-coniugare-wordpress-e-nuxt3","Come coniugare WordPress e Nuxt3",[11,126,127],{},"Ecco una roadmap per implementare un sito headless con WordPress e Nuxt3:",[129,130,131,149,165],"ol",{},[68,132,133,136,137],{},[21,134,135],{},"Preparare WordPress come CMS headless",":",[65,138,139,146],{},[68,140,141,142,145],{},"Utilizza ",[21,143,144],{},"WPGraphQL"," o la REST API per esporre i dati.",[68,147,148],{},"Ottimizza WordPress per funzionare come API server (disabilita temi e plugin non necessari).",[68,150,151,136,154],{},[21,152,153],{},"Costruire il frontend con Nuxt3",[65,155,156,159,162],{},[68,157,158],{},"Configura un’app Nuxt3 per consumare l’API di WordPress.",[68,160,161],{},"Implementa il rendering universale per ottenere un’ottima indicizzazione e prestazioni.",[68,163,164],{},"Integra strumenti moderni per immagini (Nuxt Image) e analytics.",[68,166,167,136,170],{},[21,168,169],{},"Deployment",[65,171,172],{},[68,173,174,175,50,178,181],{},"Sfrutta piattaforme moderne come ",[21,176,177],{},"Vercel",[21,179,180],{},"Netlify",", o container su cloud per una distribuzione rapida.",[37,183,185],{"id":184},"conclusioni","Conclusioni",[11,187,188,189,192],{},"Dal 2016 a oggi, la filosofia “Modern Gentlemen” ha trovato una sua naturale evoluzione. Oggi non si tratta solo di costruire applicazioni ben strutturate, ma di ",[21,190,191],{},"connettere i migliori strumenti disponibili"," per offrire esperienze utente eccezionali. Nuxt3 e l’approccio headless sono un esempio lampante di come possiamo adattarci a un web sempre più dinamico.",[11,194,195,196,203],{},"Se vuoi approfondire questo approccio, ti invito a esplorare il mio boilerplate open source ",[21,197,198],{},[15,199,202],{"href":200,"rel":201},"https://github.com/enricodeleo/wpacked",[19],"wpacked",", che rimane una solida base per chi vuole iniziare a lavorare con WordPress in maniera moderna.",[11,205,206,207,212],{},"Hai provato a creare un sito headless con WordPress e Nuxt3? Parliamone nei commenti o scrivimi ",[15,208,211],{"href":209,"rel":210},"https://www.linkedin.com/in/enricodeleo",[19],"su LinkedIn",". Sarebbe interessante confrontarci sulle sfide e sulle opportunità che questa architettura porta nel 2024.",{"title":214,"searchDepth":215,"depth":215,"links":216},"",2,[217,221,222,223],{"id":39,"depth":215,"text":40,"children":218},[219],{"id":62,"depth":220,"text":63},3,{"id":91,"depth":215,"text":92},{"id":123,"depth":215,"text":124},{"id":184,"depth":215,"text":185},[225],"dev","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/otto-anni-dopo-dallarchitettura-wordpress-al-boom-dei-siti-headles.jpg","2024-12-11T12:00:00.000Z","Una retrospettiva sull'evoluzione delle applicazioni WordPress dal 2016 al 2024 e la rivoluzione dei siti headless con Nuxt3.","md",{},true,"/otto-anni-dopo-dallarchitettura-wordpress-al-boom-dei-siti-headless",{"title":6,"description":228},"otto-anni-dopo-dallarchitettura-wordpress-al-boom-dei-siti-headless",[236,237,238,239,240,241],"wordpress","nuxt3","headless","vue3","frontend","cms","tzHRnbi4BAHubpIahh1b0Mmoc57Fdi72dWvb8ayO_fo",{"id":244,"title":245,"body":246,"categories":433,"coverImage":434,"date":435,"description":436,"extension":229,"meta":437,"navigation":231,"path":438,"seo":439,"stem":440,"sticky":231,"tags":441,"__hash__":449},"articles/vue-js-e-il-framework-front-end-piu-hot-del-momento.md","Vue.js è il framework front-end più hot del momento",{"type":8,"value":247,"toc":423},[248,254,259,262,268,274,277,281,288,294,301,305,308,315,322,326,333,340,349,355,359,362,368,377,380,384,390,393,411,415],[11,249,250],{},[251,252,253],"em",{},"In questo post vorrei parlare delle caratteristiche che mi hanno fatto innamorare di Vue.js e che a mio avviso sono alla base dell'incredibile tasso di crescita di questo framework su GitHub e non solo.",[11,255,256],{},[251,257,258],{},"Questo non significa che strumenti come React ed Angular (2+) non siano a mio avviso validi, ma semplicemente che trovo che Vue.js sia la soluzione più bilanciata per iniziare un nuovo progetto.",[11,260,261],{},"La scelta di un framework o di una libreria per lo sviluppo di un nuovo progetto (ad esempio una web app) non è solo una scelta personale.",[11,263,264,267],{},[21,265,266],{},"L'adozione di una libreria piuttosto che di un'altra potrebbe avvantaggiare o svantaggiare nel prosieguo dello sviluppo"," ed incidere nei tempi, costi di manutenzione così come le performances dell'applicazione stessa nel tempo man mano che il progetto cresce.",[11,269,270,271,58],{},"Da professionista del settore ho lavorato con tutti i maggiori framework frontend in circolazione (Angularjs, Angular, React, Vue.js, Ember), eppure ",[21,272,273],{},"sono finito per prediligere Vue su tutti",[11,275,276],{},"Per non ridurre l'argomento del post ad una narrazione da fanboy, vorrei affrontare qui punto per punto le caratteristiche che ho trovato più interessanti e che motivano questa mia predilezione.",[37,278,280],{"id":279},"popolarità-️","Popolarità ?️",[11,282,283,284,287],{},"Osservando i trend di crescita in termini di star su GitHub notiamo una ",[21,285,286],{},"ascesa vertiginosa"," del gradimento verso \"il nuovo arrivato\" rispetto ai più longevi Angular e React.",[11,289,290,293],{},[21,291,292],{},"Vue ha addirittura superato React"," alla fine del 2018.",[11,295,296],{},[297,298],"img",{"alt":299,"src":300},"Trend di crescita di Vue.js su GitHub","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/image.png",[37,302,304],{"id":303},"caratteristiche","Caratteristiche",[60,306,78],{"id":307},"flessibilità",[11,309,310,311,314],{},"Forse la cosa che apprezzo di più: Vue è pensato per essere adottabile ",[251,312,313],{},"progressivamente",". Questo significa che posso decidere di volta in volta se utilizzarlo come una semplice libreria per arricchire una sola porzione di una pagina web, con un footprint bassissimo (= peso aggiuntivo dovuto all'introduzione della libreria) oppure come un framework completo e dotato di strumenti robusti.",[11,316,317,318,321],{},"Vue infatti è suddiviso in moduli perfettamente progettati ed oliati per lavorare fra loro, ma ",[21,319,320],{},"completamente opzionali",". Questo mo consente di selezionare solo ciò di cui ho realmente bisogno e non appesantire la struttura dell'applicazione con moduli inutilizzati.",[60,323,325],{"id":324},"stabilità","Stabilità",[11,327,328,329,332],{},"Vue.js è un ",[21,330,331],{},"framework stabile",". Con questo non intendo dire che non crasha, ma che la sua sintassi è fatta per rimanere stabile nel tempo.",[11,334,335,336,339],{},"Se hai sviluppato software che abbia una certa importanza business (o se hai intenzione di farlo) converrai con me che ",[21,337,338],{},"è fondamentale poter contare su uno strumento che, se aggiornato nel tempo, non richiede la riscrittura delle funzionalità sviluppate"," ad ogni aggiornamento delle dipendenze (chi ha detto Angular?).",[11,341,342,343,348],{},"Ti basti pensare che al rilascio della versione 2 del framework ",[15,344,347],{"href":345,"rel":346},"https://vuejs.org/v2/guide/migration.html",[19],"il 90% delle api sono rimaste invariate",", garantendo un processo di migrazione quasi totalmente indolore.",[11,350,351,352,58],{},"In contesti business questo significa ",[21,353,354],{},"meno costi e tempi più brevi nella manutenzione dell'applicazione",[60,356,358],{"id":357},"developer-experience","Developer Experience",[11,360,361],{},"Si parla sempre di User Experience, ma chi pensa a noi sviluppatori? Ecco, Vue.js lo fa.",[11,363,364,365,58],{},"Gli sviluppatori come me amano Vue.js non solo per la sua tecnologia, ma anche perché è ",[21,366,367],{},"disegnato per rendere la nostra vita più semplice possibile",[11,369,370,371,376],{},"Oltre a strumenti comodi come la CLI o l'",[15,372,375],{"href":373,"rel":374},"https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd",[19],"estensione DevTools"," di una efficacia e semplicità d'uso disarmanti, possiamo contare su una documentazione ufficiale completa e veramente ben fatta.",[11,378,379],{},"La struttura stessa del framework consente una curva di apprendimento davvero molto bassa e perfetta anche per i newbie che si approcciano per la prima volta allo sviluppo di una applicazione.",[37,381,383],{"id":382},"curioso-di-iniziare-ad-utilizzare-vuejs","Curioso di iniziare ad utilizzare Vue.js? ?",[11,385,386,387],{},"Il web è pieno di tutorial e documentazione in merito (specialmente in inglese e cinese). Nonostante questo ho voluto creare un piccolo ",[21,388,389],{},"testo interamente in italiano che possa aiutare a muovere i primi passi.",[11,391,392],{},"Il testo illustra i principi del framework da un punto di vista operativo, accompagnando ogni elemento con esempi pratici e mini-progetti.",[11,394,395,396,403,404,58],{},"Il libro è ",[21,397,398],{},[15,399,402],{"href":400,"rel":401},"https://amzn.to/30T952A",[19],"disponibile su Amazon in versione Kindle"," oppure ",[15,405,408],{"href":406,"rel":407},"https://amzn.to/3839ulN",[19],[21,409,410],{},"in versione cartacea",[37,412,414],{"id":413},"dubbiopinioni","Dubbi/Opinioni?",[11,416,417,418,58],{},"Parliamone nei commenti o contattami ",[15,419,422],{"href":420,"rel":421},"https://www.facebook.com/therealenricodeleo",[19],"sulla mia pagina Facebook",{"title":214,"searchDepth":215,"depth":215,"links":424},[425,426,431,432],{"id":279,"depth":215,"text":280},{"id":303,"depth":215,"text":304,"children":427},[428,429,430],{"id":307,"depth":220,"text":78},{"id":324,"depth":220,"text":325},{"id":357,"depth":220,"text":358},{"id":382,"depth":215,"text":383},{"id":413,"depth":215,"text":414},[225],"https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/pov-thumb.jpg","2020-01-26T13:09:09.000Z","Vue è il framework frontend con il tasso d'adozione più alto tra gli sviluppatori, e per ottime ragioni.",{},"/vue-js-e-il-framework-front-end-piu-hot-del-momento",{"title":245,"description":436},"vue-js-e-il-framework-front-end-piu-hot-del-momento",[442,240,443,444,445,446,447,448],"vue","javascript","es6","development","code","react","angular","50xkfcsY2lGCAjAHsR6yYxtqw4ZBkLo8DpveLDx6vL4",{"id":451,"title":452,"body":453,"categories":694,"coverImage":695,"date":696,"description":697,"extension":229,"meta":698,"navigation":231,"path":699,"seo":700,"stem":701,"sticky":231,"tags":702,"__hash__":707},"articles/i-10-migliori-plugin-visual-studio-code-per-qualsiasi-front-end-developer.md","Visual Studio Code: i 10 migliori plugin per qualsiasi front-end developer",{"type":8,"value":454,"toc":682},[455,462,469,472,476,483,489,501,505,511,517,520,524,530,536,539,543,549,555,558,562,568,574,583,587,593,599,602,606,612,617,620,624,630,641,645,651,657,663,667,673,679],[11,456,457,458,461],{},"Tutti amiamo Visual Studio Code: l'",[21,459,460],{},"editor gratuito e moderno"," sviluppato da Microsoft pensato per scrivere, ottimizzare e debuggare applicazioni web e cloud.",[11,463,464,465,468],{},"Visual Studio Code è disponibile su tutte le piattaforme (Windows, MacOS, Linux) ed è ",[251,466,467],{},"estendibile"," grazie all'ausilio di plugins, che ne aumentano le capacità introducendo funzionalità e comportamenti.",[11,470,471],{},"Al di là di casi specifici, a seguire quelli che secondo me sono i plugin imprescindibili per poter vivere bene quando si sviluppano webapp frontend.",[37,473,475],{"id":474},"live-server","Live Server",[11,477,478],{},[15,479,482],{"href":480,"rel":481},"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer",[19],"https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome",[11,484,485],{},[297,486],{"alt":487,"src":488},"Explorer Window Control","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/vscode-live-server-explorer-menu-demo-1.gif",[11,490,491,492,497,498,58],{},"Questo plugin è in grado di creare un web server locale utile per testare la web app, risolvendo molti dei problemi che possono presentarsi effettuando la preview su protocollo file anziché http. Il pezzo forte è il ",[251,493,494],{},[21,495,496],{},"livereload",", e cioè l'",[21,499,500],{},"auto-aggiornamento della pagina ad ogni salvataggio del sorgente che stiamo scrivendo",[37,502,504],{"id":503},"bracket-pair-colorizer","Bracket Pair Colorizer",[11,506,507],{},[15,508,509],{"href":509,"rel":510},"https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer",[19],[11,512,513],{},[297,514],{"alt":515,"src":516},"Screenshot","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/example.png",[11,518,519],{},"Le parentesi (tonde, quadre, graffe) sono il pane quotidiano di ciascun developer. Quando l'applicazione inizia ad avere una certa complessità può essere difficile individuare inizio e fine dei blocchi/parentesi senza un aiuto. Questo plugin fa proprio questo: colora in maniera diversa ed evidenzia le parentesi per rendere immediatamente individuabile la coppia di parentesi di interesse per capire immediatamente dove iniziano e dove finiscono.",[37,521,523],{"id":522},"auto-close-tag","Auto Close Tag",[11,525,526],{},[15,527,528],{"href":528,"rel":529},"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag",[19],[11,531,532],{},[297,533],{"alt":534,"src":535},"Usage","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/usage.gif",[11,537,538],{},"Questo plugin piazza automaticamente un tag di chiusura ogni volta che questo è necessario.",[37,540,542],{"id":541},"path-intellisense","Path Intellisense",[11,544,545],{},[15,546,547],{"href":547,"rel":548},"https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense",[19],[11,550,551],{},[297,552],{"alt":553,"src":554},"IDE","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/iaHeUiDeTUZuo.gif",[11,556,557],{},"Path Intellisense suggerisce automaticamente il percorso di file e cartelle man mano che viene digitato. Comodissimo per chi detesta dover verificare e/o aprire le cartelle interessate per individuare il file corretto da includere (sia esso JS, CSS ecc).",[37,559,561],{"id":560},"git-lens","Git Lens",[11,563,564],{},[15,565,566],{"href":566,"rel":567},"https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens",[19],[11,569,570],{},[297,571],{"alt":572,"src":573},"Git Code Lens","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/code-lens.png",[11,575,576,577,582],{},"Questa estensione integra ",[15,578,581],{"href":579,"rel":580},"https://git-scm.com/",[19],"git"," direttamente all'interno del sorgente, mostrando di volta in volta chi e quando ha modificato un determinato blocco o riga del sorgente. Perfetto per tutti coloro che sono soliti sviluppare applicazioni a più mani e desiderano avere il polso della situazione.",[37,584,586],{"id":585},"better-comments","Better Comments",[11,588,589],{},[15,590,591],{"href":591,"rel":592},"https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments",[19],[11,594,595],{},[297,596],{"alt":597,"src":598},"Annotated code","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/better-comments.PNG",[11,600,601],{},"Arricchisce i commenti variando colore ed evidenziandone immediatamente il significato.",[37,603,605],{"id":604},"colorize","Colorize",[11,607,608],{},[15,609,610],{"href":610,"rel":611},"https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize",[19],[11,613,614],{},[297,615],{"alt":214,"src":616},"https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/demo.gif",[11,618,619],{},"Visualizza il colore corrispondete al codice colore selezionato (supporta hex, rgb, rgba, hsl) aiutando qualsiasi web designer a comprendere immediatamente il colore utilizzato nel codice.",[37,621,623],{"id":622},"material-theme","Material Theme",[11,625,626],{},[15,627,628],{"href":628,"rel":629},"https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme",[19],[11,631,632,633,640],{},"Applica un tema ",[15,634,637],{"href":635,"rel":636},"https://material.io/",[19],[251,638,639],{},"material"," a tutto l'editor.",[37,642,644],{"id":643},"material-icon-theme","Material Icon Theme",[11,646,647],{},[15,648,649],{"href":649,"rel":650},"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme",[19],[11,652,653],{},[297,654],{"alt":655,"src":656},"file icons","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/fileIcons.png",[11,658,659,660,662],{},"Applica l'icona giusta al file o cartella giusti, in stile ",[251,661,639],{},". Adoro il modo in cui queste icone rendono tremendamente esplicita la tipologia di file e cartelle di cui si sta parlando.",[37,664,666],{"id":665},"sort-lines","Sort lines",[11,668,669],{},[15,670,671],{"href":671,"rel":672},"https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines",[19],[11,674,675],{},[297,676],{"alt":677,"src":678},"Usage animation","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/usage-animation.gif",[11,680,681],{},"Ordina alfabeticamente le righe di codice selezionate, regalando una incredibile sensazione di ordine al sorgente.",{"title":214,"searchDepth":215,"depth":215,"links":683},[684,685,686,687,688,689,690,691,692,693],{"id":474,"depth":215,"text":475},{"id":503,"depth":215,"text":504},{"id":522,"depth":215,"text":523},{"id":541,"depth":215,"text":542},{"id":560,"depth":215,"text":561},{"id":585,"depth":215,"text":586},{"id":604,"depth":215,"text":605},{"id":622,"depth":215,"text":623},{"id":643,"depth":215,"text":644},{"id":665,"depth":215,"text":666},[225],"https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/vscode-plugins.jpg","2019-09-27T21:18:09.000Z","A grande richiesta 10 dei plugin che più raccomando per una esperinza di coding veramente zen.",{},"/i-10-migliori-plugin-visual-studio-code-per-qualsiasi-front-end-developer",{"title":452,"description":697},"i-10-migliori-plugin-visual-studio-code-per-qualsiasi-front-end-developer",[446,445,703,704,240,705,706],"editor","extensions","ide","vscode","VBW7MYbSjbadO7QdRGK8tU1AbwFYM6naHmqeQzWSB6Y",1777303095760]