Codewith.it: Nuova Versione 2023, Tutta da Scoprire

Indice dei contenuti

Nel lontano 2019, mi è venuta l’idea di creare il mio playground di codice HTML, prendendo spunto da quelli già esistenti e popolari. Così è nato Codewith.it, il più importante code playground italiano sul web.

Ora, quattro anni dopo, nel giugno 2023, sono tornato con la nuova versione di Codewith.it, ancora più affidabile e potente che mai.

La nuova versione è stata completamente riscritta da zero e offre numerose nuove funzionalità, così come molte altre che sono state rivisitate e migliorate. In questo articolo, oltre alle novità, desidero parlare dell’evoluzione della nostra piattaforma, di cui siamo estremamente orgogliosi.

Codewith.it, un progetto tutto italiano

Codewith.it è la nostra piattaforma, nata su BytePost nel 2019 (le sue fondamenta sono ancora visibili in questa pagina) e successivamente trasferita su un dominio dedicato, “editor-html.it”, per poi trovare la sua sede definitiva su “codewith.it”. Il nome stesso è stato creato come un gioco di parole in inglese, “Code with it“.

Inizialmente, la nostra piattaforma consisteva semplicemente in una pagina statica con un editor HTML in tempo reale e anteprima dinamica (non molto distante da quella attuale).

Qui l’articolo dedicato alle prime versioni.

Man mano che abbiamo progredito, attraverso una serie di miglioramenti, abbiamo implementato numerosi strumenti, tra cui un sistema di salvataggio dei file e di registrazione degli utenti, nonché la possibilità di condividere i file e di implementarli su siti esterni (fino alla nostra versione 6).

Alla fine del 2022, con un po’ di audacia, ho decisi di riscrivere completamente il codice dell’editor.

Parliamo di dati

Dopo quattro anni, posso finalmente fornire informazioni riguardanti i dati e le statistiche della piattaforma.

Nel breve periodo, con grande sorpresa, la piattaforma ha ricevuto un’ottima accoglienza da parte degli utenti, registrando un notevole numero di visite e attualmente superando diverse migliaia di iscrizioni.

valutazione 4.6 dagli utenti Codewith.it

Alla pubblicazione della nuova versione, l’editor ha ricevuto un punteggio di 4.6 su più di 350 valutazioni tramite il sistema di rating integrato.

Inoltre, con grande sorpresa e piacere, da un’analisi del traffico interno (effettuata personalmente utilizzando i dati forniti dagli iscritti e non da servizi esterni) abbiamo rivelato che la piattaforma è molto utilizzata da gruppi di persone provenienti da scuole e università.

NOTA: i dati raccolti sono stati forniti personalmente dagli utenti iscritti (indirizzi email, IP pubblico e preferenze). Nessuna piattaforma esterna fa utilizzo di questi dati.

Release 6/2023 (v7)

Cosa c’è di nuovo?

Codewith.it 2023 ha subito un’importante trasformazione nel codice, presentando poche similarità con la versione precedente, ad eccezione dei dati salvati.

La nuova piattaforma gestisce i dati in modo più efficiente e sicuro. L’editor offre agli utenti strumenti di analisi e controllo per HTML, CSS e JavaScript più precisi.

Tra le principali features troviamo:

HTML Elements inspector – permette di visualizzare il codice HTML o CSS di un elemento semplicemente facendo clic su di esso, e viceversa, dal codice alla finestra di anteprima
JavaScript console migliorata – la nuova versione integra una console di debug dedicata, integrata nell’editor anziché essere “locale” nella finestra di anteprima, come accadeva nella versione precedente.
Interfaccia rivista e semplificata – Riconosco che la vecchia versione aveva troppi pulsanti e ciò creava confusione. La nuova è più pulita e ogni pulsante è accompagnato dalla propria didascalia.
Real Time CSS – modificando il codice CSS dell’editor, la finestra di anteprima visualizzerà in tempo reale le modifiche sugli stili senza aggiornarsi.
Questo porta minor tempi di risposta e minor sovraccarico del browser.
Nuovo motore editor. Codewith.it ora adotta “Monaco editor” come “motore” per la scrittura del codice, lo stesso usato da Visual studio code e molti altri noti editor di codice.
Libreria immagini con Shortcodes – una delle mancanze della vecchia versione era l’impossibilità di integrare o caricare immagini direttamente nell’editor, costringendo gli utenti a fare affidamento su servizi esterni.
Ora invece diamo la possibilità di caricare immagini e di usarli tramite shortcode (es. [img1] o [img8] etc..) e di salvarle con il file.

E molto altro.

Cosa abbiamo rimosso

Alcune funzioni non sono state ereditate nella nuova versione, principalmente causate dall’inutilizzo da parte degli utenti.

Tra queste troviamo principalmente strumenti di minor rilievo:

Strumento Lorem Ipsum text generator
Strumento conta caratteri e parole (che potete trovare qui su BytePost)
Integrazione con Google Drive per il salvataggio e importazione dei dati

Bilingue

Come la vecchia versione, abbiamo mantenuto la variante inglese del sito, con traduzione completa ed efficiente delle pagine.

Per ora non prevediamo l’aggiunta di altre lingue oltre l’inglese e italiano.

Un sito più social

Da oggi, abbiamo introdotto nuove funzionalità che permettono agli utenti di gestire in modo più efficiente il proprio profilo utente, aggiungere amici e collaborare con loro su file e progetti.

La piattaforma si è evoluta verso un approccio più sociale e incentrato sulla collaborazione. Ora gli utenti possono aggiungere amici e lavorare insieme su file e progetti. Sarà possibile apportare modifiche ai file in modo reciproco, mantenendo uno storico di backup per monitorare le modifiche effettuate.

Inoltre, abbiamo implementato un sistema di notifiche che permette agli utenti di rimanere aggiornati sulle attività dei loro amici. Saranno informati di eventuali modifiche apportate ai file condivisi e riceveranno notifiche relative alle attività degli amici.

Queste nuove funzionalità rendono la piattaforma più interattiva e promuovono la collaborazione tra gli utenti, consentendo loro di lavorare insieme in modo più efficace e di rimanere sempre connessi alle attività degli altri.

Editor & References

Da tempo, Codewith.it ha integrato una sezione di riferimento per referenze HTML, CSS e JavaScript, che funge da sorta di “wiki” contenente definizioni degli elementi HTML e esempi didattici.

Oggi, siamo lieti di annunciare che queste referenze sono state perfettamente integrate nell’editor. Ora, con una semplice ricerca, gli utenti possono ottenere informazioni dettagliate su uno specifico elemento e visualizzare il codice di esempio in tempo reale.

Questa integrazione permette agli utenti di accedere rapidamente alle informazioni di riferimento mentre lavorano sull’editor, migliorando l’efficienza e facilitando l’apprendimento delle caratteristiche e delle possibilità offerte dagli elementi HTML, CSS e JavaScript.

Sia che si tratti di una definizione di un elemento HTML, di un’espressione CSS o di un’istruzione JavaScript, gli utenti possono contare su questa funzionalità per avere sempre a portata di mano le informazioni di cui hanno bisogno, rendendo la piattaforma ancora più utile e completa come risorsa per lo sviluppo web.

Nota: La wiki è ancora in via si sviluppo e mancano molti dati per il completamento (Lo faccio da solo e per ora ho veramente poco tempo per metterci le mani 😅).

Prossimi aggiornamenti

Dopo la pausa estiva riprenderò con l’editor, cercando di integrare nuove features.

Prevedo di integrare (tra le maggiori caratteristiche):

Un sistema di abbonamento per gli iscritti, che consenta si sbloccare nuove funzioni e privilegi rispetto al piano di iscrizione base.
Piattaforma di streaming real-time per il lavoro di gruppo.
Integrazione dei commenti e sistema di messaggistica
Feed utente più dinamico e preciso
Integrazione dei framework più veloce
Nuovi linguaggi di programmazione JS-based
Migliorie generali

Iscriviti a Codewith.it e alla nostra newsletter per restare aggiornato sui futuri aggiornamenti.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti: