Sviluppo FrontEnd: CodePen o Sublime Text?

CodePen o testo sublime?

CodePen o Sublime Text? Se parliamo di programmazione web, il nome di HTML, CSS e JavaScript ci viene subito. Ci sono diversi modi per arrivarci. Anche, se apriamo un blocco note possiamo metterci al lavoro scrivendo "html". È vero che per vedere il risultato di ciò che stai programmando da un pad, avrai bisogno di una procedura laboriosa per notare i progressi.

Questi siti sono i principali campi da gioco per gli sviluppatori di applicazioni per gli utenti del giorno. Per saperne di più sui vantaggi e gli svantaggi di questi programmi, li analizzeremo a fondo in questo articolo (almeno, tutto quello che sappiamo). Come dico sempre, sicuramente alcuni di voi qui conoscono meglio l'argomento. Se è così, commenta qui tutto ciò che ci sfugge. Saremo felici di discutere!

Oggi analizzeremo CodePen, JSBin, Plunkr, sublime, CSSDeck, Dabblet e LiveWeave. Quali sono i più conosciuti e gli strumenti più utilizzati in questo ambiente. Ce ne sono di più, ovviamente.

Ma per tutti voi che non sapete cosa sia il FrontEnd o il BackEnd, spieghiamo un po '. Il Front-End o interfaccia è la parte visiva che l'utente navigatore potrà vedere sul web. Il BackEnd sarà la parte controllata dall'amministratore del sito. In programmazione, se inserisci il codice tramite uno strumento che visualizza contemporaneamente il risultato, questo verrà chiamato front-end.

CodePen

Per molti lo strumento più completo di tutto ciò di cui parliamo. Usato come uno strumento web che è la cosa più vicina a una comunità per mostrare il tuo lavoro. Un tipo di Youtube dal programmatore. In questo potrai vedere il lavoro dei programmatori affiliati al web e contattarli in caso di interesse, vedere il loro profilo, seguirli sulle reti e persino iscriverti al loro canale per visualizzare tutti i loro progetti futuri.

Presentazione del contenuto, supporto e scorciatoie da tastiera

La presentazione CodePen è la più interessantePerché con pochi clic puoi completare il processo immediatamente. Con righe molto ben separate di html, css e javascript. Oltre alla parte visiva, che puoi alternare su e giù per vedere chiaramente i tuoi progressi. Contribuendo così a differenziare bene ogni lingua. Qualcosa che torna utile per i nuovi programmatori.

Il tuo supporto web, rende più sopportabile quando vuoi iniziare a utilizzare qualcosa che non conosciamo molto bene. Ciò non significa che sia meglio per te, dipende dalle esigenze che abbiamo. Ma sì, per conoscere un po 'meglio l'ambiente prima di impegnarsi a installare qualcosa sul computer di origine "sconosciuta".

Se sei uno di quelli che è abituato a usare CASI totalmente tastiera quando lavori, CodePen sarà meraviglioso per te. Altri strumenti necessari i plugin per poter utilizzare scorciatoie da tastiera per riempire l'ambiente. Ciò rende il lavoro un po 'più scomodo (anche se altrettanto efficace una volta installato). CP. Integra di serie un sistema che ti farà compilare le stesse righe di codice che vengono ripetute, come potrebbe essere in una lista. Scrivi come vuoi che appaia l'elenco e fai clic su Tab.

La versione Pro permette anche molte più opzioni per un prezzo di 9,00 € per il pacchetto base a 29,25 € per il pacchetto “Super”. Essere in grado di aggiornare in più dispositivi contemporaneamente ciò che facciamo in uno. Anche una modalità cooperativa, una "modalità insegnante", ecc. Approfitta se vuoi qui.

JS Bin

JSBin è uno strumento che potremmo qualificare come diretto. Dal momento che una volta entrato nel suo dominio web, sarà pronto per iniziare a disegnare il tuo prossimo progetto, senza indugio. E sebbene la sua prima messa in scena non sia molto attraente, è confortevole.

JSBin è semplice, con la struttura di base realizzata in html per non perdere tempo, dovrai alternare le diverse lingue per completare il lavoro. Prima c'è l'HTML, poi CSS, Javascript e infine il tuo lavoro visivamente. E anche se sembra più difficile, avrai gli stessi tipi di scorciatoie senza installare nulla. Direttamente dal browser.

Tuttavia, ho trovato più scomodo visualizzare correttamente il codice, una volta nascosto a causa delle colonne successive. Dal momento che, con il laptop, devi rinunciare o abbandonare con il trackpad e non è molto fluido.

Ha solo due rate, gratuite oa pagamento. Questo è un po 'più costoso di CodePen, anche se se lo paghi annualmente, è più redditizio, se puoi pagare € 120.

CSS Deck

CSS Deck

L'ambiente di lavoro di CSS Deck è diverso da quello visto sopra. Diviso in due sole colonne, visual-code, CSSDeck lavora con 3 righe in basso con le quali divide i diversi tipi di linguaggio. Con una presentazione sotto forma di social network e un ambiente di lavoro più pulito con colori chiari. Sembra uno strumento semplice. Anche se a volte, ciò non significa che sia negativo.

Con più di sessantamila utenti registrati e più di duecentocinquantamila progetti realizzati, cercare e trovare quello che vuoi non sarà difficile. La lingua come sempre, se può essere un inconveniente per chi non conosce l'inglese, ma in questo sociale rosso L'immagine è molto importante, quindi non credo sia una grande sfida.

plunkr

plunkr è lo strumento meno attraente che abbia mai incontrato finora. La presentazione è agglutinata nei messaggi e nella mancanza di immagini. Il caricamento del contenuto è lento e non molto utile a prima vista. Inoltre, l'ordinamento per data fa sì che qualsiasi programmazione, per quanto semplice, possa essere in prima posizione. Per vedere qualcosa di più interessante dovresti andare alla scheda che dice: «I più visti«. Cioè, se non l'hai mai tradotto con Google prima.

Dì anche che secondo il web, sono nella versione 1.0.0. Quindi questo spiega un po 'il design, la presentazione e i possibili errori che trovi durante la navigazione sul web.

Come vantaggio, se sei a corto di idee, non dovrai lasciare o aprire un'altra scheda in Plunkr, poiché direttamente dalla barra laterale destra puoi camminare con altri progetti e visualizzarli immediatamente. In questo modo sarà più facile raccogliere idee rapide e allo stesso tempo applicarle al progetto.

dabblet

dabblet è uno strumento semplice, entri e crei. Sebbene tu possa registrarti e avere il tuo nome utente tramite GitHub, non è qualcosa che spicca molto sul web. Con uno sfondo in una sfumatura dal giallo al rosso, nella parte visiva e uno sfondo bianco nella parte del codice (come è normale), viene presentato il progetto Dabblet, sebbene sia possibile modificarlo dalla scheda CSS. Per me, è meglio che sia vuoto, poiché quel gradiente tutto ciò che dà è un po ' vida a

Quando stai modificando, puoi configurare le schede che vedi facilmente. Anche se desideri passare a colonne o righe per una comoda visualizzazione a seconda della persona che sta modificando. Cambiare la dimensione del carattere, salvare come anonimo senza registrare o convalidare il codice HTML sono altre possibilità che Dabblet offre a prima vista. Sebbene non sia la prima opzione che sceglierei, potrebbe essere da tenere in considerazione nelle versioni future se vengono aggiornate.

Una delle cose che mi è piaciuta di meno, ma che potrebbe piacere ai grandi programmatori, è quella non hai la possibilità di tabulare un'etichetta e di farla scrivere da sola. Cioè, inserisci HTML e fai clic sulla scheda e scrivi "html" e "/ html" automaticamente. Qualcosa che nelle altre applicazioni se è fatto.

LiveWeave

live

LiveWeave È molto simile agli altri, non ha nulla che gli altri non possano offrire in termini di utilità. Ciò che evidenziamo di questo progetto è il suo design, un colore scuro simile a CodePen ma con una distribuzione quadrata. Poter cambiare la taglia da gustare. C'è anche la modalità clear e il «fuori dalle righe« dove il codice che modifichi non si rifletterà nell'oggetto visivo, finché non lo attivi. Non è una funzionalità che trovo molto utile, come designer, è importante vedere sempre ciò che modifichi in tempo reale, ma qualcuno lo troverà sicuramente utile. E sebbene, come sempre, ci si possa registrare, l'utente non ha un ruolo di primo piano. Dal momento che, anche se non ti registri, puoi salvare il tuo progetto.

Sublime Text

Questo strumento è totalmente diverso da quello che hai visto finora nell'analisi. Sublime Text non è una risorsa web, ma un'applicazione. Da un lato, sarà sicuramente più utile averlo sul desktop. Soprattutto a causa di possibili arresti anomali o blocchi di Internet dovuti a eccesso e possibile perdita di lavoro. D'altra parte, non è uno strumento visivo come i precedenti. Oltre a non avere la possibilità di una comunità per condividere progetti.

Qui tutto è da zero. È necessario creare schede per posizionare le righe di codice e rinominarle per sapere qual è. Se il primo è HTML, il secondo CSS .. o viceversa. Inoltre non ha scorciatoie per quello che sarà completamente manuale, ad eccezione dei preventivi.

Conclusione

Tutti i programmi sono simili con alcuni tocchi personali di ciascuna azienda che portano ad avere pro e contro in essi. Ognuno sceglierà quello più adatto a loro, il mio consiglio è di utilizzare CodePen o CSSDeck per l'ambiente e il social network che gestisce. Ma, se un altro ti è piaciuto di più, lascia un commento e spiega le tue ragioni, saranno sicuramente utili.


Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.