FrontEnd Development: CodePen eller sublim tekst?

CodePen eller sublim tekst?

CodePen eller sublim tekst? Hvis vi taler om webprogrammering, kommer navnet på HTML, CSS og JavaScript til os med det samme. Der er flere måder at komme derhen. Også selvom, hvis vi åbner et notesblok, kan vi komme i gang med at skrive "html". Det er rigtigt, at for at se resultatet af det, du programmerer fra en pad, skal du have en besværlig procedure for at bemærke fremskridt.

Disse sider er de vigtigste legepladser for udviklere af applikationer til dagens brugere. For at lære mere om fordele og ulemper ved disse programmer, vil vi analysere dem dybt i denne artikel (i det mindste alt hvad vi ved). Som jeg altid siger, kender nogle af jer her sikkert emnet mere. Kommenter i så fald alt, hvad der undslipper os her. Vi diskuterer gerne!

I dag skal vi analysere CodePen, JSBin, Plunkr, sublim, CSSDeck, Dabblet og LiveWeave. Hvilke er de mest kendte og de mest anvendte værktøjer i dette miljø. Der er selvfølgelig flere.

Men for alle jer, der ikke ved, hvad FrontEnd eller BackEnd handler om, lad os forklare lidt. Frontend eller grænseflade er den visuelle del, som den navigerende bruger kan se på nettet. BackEnd vil være den del, som webstedsadministratoren kontrollerer. Hvis du ved programmering indtaster kode gennem et værktøj, der viser resultatet samtidigt, kaldes dette front-end.

CodePen

For mange det mest komplette værktøj af alt, hvad vi taler om. Brugt som et webværktøj, der er den nærmeste ting til et samfund for at vise dit arbejde. En slags Youtube fra programmøren. I dette kan du se de programmer, der er tilknyttet internettet, og kontakte dem, hvis du har nogen interesse, se deres profil, følge dem på netværk og endda abonnere på deres kanal for at se alle deres fremtidige projekter.

Præsentation af indhold, support og tastaturgenveje

CodePen-præsentationen er den mest interessanteFor med blot et par klik kan du straks gennemgå processen. Med meget godt adskilte linjer af html, css og javascript. Ud over den visuelle del, som du kan sprede op og ned for tydeligt at se dine fremskridt. Det hjælper således med at differentiere hvert sprog godt. Noget der kommer godt med for nyere programmører.

Din websupport, gør det mere tåleligt, når du vil begynde at bruge noget, som vi ikke rigtig kender så godt. Det betyder ikke, at det er bedre for dig, det afhænger af de behov, vi har. Men ja, at lære miljøet bedre at kende, inden du forpligter dig til at installere noget på computeren af ​​"ukendt" oprindelse.

Hvis du er en af ​​dem, der er vant til at bruge casi helt tastatur, når du arbejder, vil CodePen være vidunderligt for dig. Andre værktøjer har brug for Plugins at kunne bruge tastaturgenveje til at udfylde miljøet. Dette gør jobbet lidt mere ubehageligt (selvom det er lige så effektivt, når det er installeret). CP. Det integrerer som standard et system, der får dig til at udfylde de samme kodelinjer, som gentages, som det kunne være på en liste. Du skriver, hvordan du vil have listen, og klik på Tab.

Pro-versionen giver også mange flere muligheder til en pris på 9,00 € for basispakken til 29,25 € for "Super" -pakken. At kunne opdatere på flere enheder samtidigt, hvad vi gør i en. Også en samarbejdsmodus, en "lærermodus" osv. Fordel, hvis du vil her.

JSBin

JSBin er et værktøj, som vi kunne kvalificere som direkte. Da når du først går til dets webdomæne, vil det være klar til at begynde at udarbejde dit næste projekt uden forsinkelse. Og selvom den første iscenesættelse ikke er særlig attraktiv, er den behagelig.

JSBin er enkel, med den grundlæggende struktur oprettet i html for ikke at spilde tid, vil du krydse mellem de forskellige sprog for at fuldføre arbejdet. Først er der HTML, derefter CSS, Javascript og endelig dit arbejde visuelt. Og selvom det virker vanskeligere, har du de samme typer genveje uden at installere noget. Direkte fra browseren.

Jeg fandt det imidlertid mere ubehageligt at se koden korrekt, når den først er skjult på grund af de efterfølgende kolonner. Da du med den bærbare computer skal give op eller ned med pegefelt og det er ikke meget flydende.

Det har kun to rater, gratis eller betalt. Dette er lidt dyrere end CodePen, men hvis du betaler det årligt, er det mere rentabelt, hvis du kan betale € 120.

CSSDeck

CSSDeck

Arbejdsmiljøet for CSSDeck er forskellig fra den, der er set ovenfor. Opdelet i kun to kolonner, visuel kode, fungerer CSSDeck med 3 rækker ned, hvormed det deler de forskellige sprogtyper. Med en præsentation i form af et socialt netværk og et renere arbejdsmiljø i lys farve. Det virker som et simpelt værktøj. Selvom det undertiden ikke betyder, at det er negativt.

Med mere end tres tusind registrerede brugere og mere end to hundrede og halvtreds tusinde projekter oprettet, vil det ikke være svært at søge og finde det, du ønsker. Sproget som altid, hvis det kan være en ulempe for dem, der ikke kender engelsk, men i dette sociale netværk Billedet er meget vigtigt, så jeg synes ikke, det er en stor udfordring.

plunkr

plunkr det er det mindst attraktive værktøj, som jeg hidtil er stødt på. Præsentationen er agglutineret i meddelelser og manglende billeder. Indlæsning af indhold er langsom og ikke særlig nyttig ved første øjekast. Derudover gør ordren efter dato enhver tidsplan, uanset hvor enkel, kan være i første position. For at se noget mere interessant, skal du gå til fanen, der siger: «Mest viste«. Det vil sige, hvis du ikke har oversat det med Google før.

Sig også, at de ifølge internettet er i version 1.0.0. Så dette forklarer lidt designet, præsentationen og de mulige fejl, du finder, når du surfer på nettet.

Som en fordel, hvis du løber tør for ideer, behøver du ikke at forlade eller åbne en anden fane i Plunkr, da du direkte fra højre sidepanel kan gå med andre projekter og se dem med det samme. Dette vil gøre det lettere for dig at samle hurtige ideer og anvende dem på dit projekt på samme tid.

Dablet

Dablet det er et simpelt værktøj, du går ind og opretter. Selvom du kan registrere dig og have dit brugernavn gennem GitHub, er det ikke noget, der skiller sig meget ud på nettet. Med en baggrund i en gul til rød gradient, i den visuelle del og en hvid baggrund i kodedelen (som normalt) præsenteres Dabblet-projektet, selvom du kan ændre det fra CSS-fanen. For mig er det bedre at have det blankt, da denne gradient alt, hvad der giver, er lidt vida a

Når du redigerer, kan du konfigurere de faner, du ser let. Selv hvis du vil skifte til kolonner eller rækker for behagelig visning afhængigt af den person, der redigerer. Ændring af skriftstørrelse, gemning som anonym uden at registrere eller validere HTML-koden er flere muligheder, som Dabblet tilbyder ved første øjekast. Selvom det ikke er den første mulighed, jeg vælger, kan det være at tage hensyn til i fremtidige versioner, hvis de opdateres.

En af de ting, jeg kunne lide mindst, men som store programmører måske kan lide, er at du har ikke mulighed for at oprette en etiket og få den til at skrive sig selv. Dvs. sæt HTML og klik på fanen og skriv "html" og "/ html" automatisk. Noget, der i de andre applikationer, hvis det er gjort.

LiveWeave

livevævning

LiveWeave Det ligner meget de andre, det har intet, som de andre ikke kan tilbyde med hensyn til nytte. Hvad vi fremhæver ved dette projekt er dets design, en mørk farve svarende til CodePen, men med en firkantet fordeling. At kunne ændre størrelsen at smage. Der er også den klare tilstand og «ude af køen« hvor koden, du redigerer, ikke afspejles i det visuelle, før du aktiverer den. Det er ikke en funktion, som du finder meget nyttig, som designer, det er vigtigt altid at se, hvad du redigerer i realtid, men nogen vil helt sikkert finde dig noget at bruge. Og selvom du som altid kan registrere dig, har brugeren ikke en førende rolle. Da selvom du ikke registrerer dig, kan du gemme dit projekt.

Sublime Text

Dette værktøj det er helt forskelligt fra det, du hidtil har set i analysen. Sublim tekst er ikke som en webressource, men som en applikation. På den ene side er det helt sikkert mere nyttigt at have det på skrivebordet. Især på grund af mulige internetnedbrud eller fryser på grund af overskydende og det mulige tab af arbejde. På den anden side er det ikke et så visuelt værktøj som de foregående. Ud over ikke at have mulighed for et samfund til at dele projekter.

Her er alt fra bunden. Du skal oprette faner for at placere kodelinjerne og omdøbe dem for at vide, hvilken der er. Hvis den første er HTML, den anden CSS .. eller omvendt. Det har heller ingen genveje til, hvad det vil være helt manuel, bortset fra tilbudene.

Konklusion

Alle programmer er ens med visse personlige detaljer ved hvert firma, der fører til at have fordele og ulemper i dem. Hver og en vælger den der passer bedst til dem, min anbefaling er at bruge CodePen eller CSSDeck til miljøet og det sociale netværk, det håndterer. Men hvis du kunne lide en anden mere, skal du efterlade en kommentar og forklare dine grunde, de vil helt sikkert være nyttige.


Efterlad din kommentar

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *

*

*

  1. Ansvarlig for dataene: Miguel Ángel Gatón
  2. Formålet med dataene: Control SPAM, management af kommentarer.
  3. Legitimering: Dit samtykke
  4. Kommunikation af dataene: Dataene vil ikke blive kommunikeret til tredjemand, undtagen ved juridisk forpligtelse.
  5. Datalagring: Database hostet af Occentus Networks (EU)
  6. Rettigheder: Du kan til enhver tid begrænse, gendanne og slette dine oplysninger.