FrontEnd-ontwikkeling: CodePen of sublieme tekst?

CodePen of sublieme tekst?

CodePen of sublieme tekst? Als we het hebben over webprogrammering, komt de naam HTML, CSS en JavaScript meteen bij ons binnen. Er zijn verschillende manieren om er te komen. Zelfs, als we een notitieblok openen, kunnen we aan de slag met het schrijven van "html"​ Het is waar dat als u het resultaat wilt zien van wat u vanaf een pad programmeert, u een moeizame procedure nodig heeft om de voortgang op te merken.

Deze sites zijn de belangrijkste speeltuinen voor ontwikkelaars van applicaties voor gebruikers van de dag​ Om meer te weten te komen over de voor- en nadelen van deze programma's, gaan we ze in dit artikel diepgaand analyseren (althans alles wat we weten). Zoals ik altijd zeg, kennen sommigen van u hier het onderwerp zeker beter. Als dat zo is, geef dan hier commentaar op alles wat ons ontgaat. We gaan graag met u in gesprek!

Vandaag gaan we CodePen, JSBin, Plunkr, subliem analyseren, CSSDeck, Dabblet en LiveWeave. Welke zijn de bekendste en meest gebruikte tools in deze omgeving. Natuurlijk zijn er meer.

Maar voor iedereen die niet weet waar FrontEnd of BackEnd over gaat, laten we het een beetje uitleggen. De front-end of interface is het visuele gedeelte dat de navigerende gebruiker op internet kan zien​ De BackEnd is het deel dat de sitebeheerder beheert. Als u bij het programmeren code invoert via een tool die het resultaat tegelijkertijd weergeeft, wordt dit front-end genoemd.

CodePen

Voor velen de meest complete tool van alles waar we over praten. Gebruikt als een webtool die het dichtst bij een gemeenschap staat om uw werk te laten zien. Soort van YouTube van de programmeur. Hierin kun je het werk zien van de programmeurs die bij het web zijn aangesloten en contact met hen opnemen als je interesse hebt, hun profiel bekijken, hen volgen op netwerken en zelfs abonneren op hun kanaal om al hun toekomstige projecten te bekijken.

Presentatie van inhoud, ondersteuning en sneltoetsen

De CodePen-presentatie is het meest interessantOmdat u met slechts een paar klikken het proces meteen kunt doorlopen. Met zeer goed gescheiden regels html, css en javascript. Naast het visuele gedeelte, dat u op en neer kunt doorkruisen om duidelijk uw voortgang te zien. Zo helpt het om elke taal goed te differentiëren. Iets wat handig is voor nieuwere programmeurs.

Uw webondersteuning, maakt het draaglijker wanneer u iets wilt gaan gebruiken dat we niet zo goed kennen. Dat betekent niet dat het beter voor je is, het hangt af van de behoeften die we hebben. Maar ja, om de omgeving een beetje beter te leren kennen voordat u zich ertoe verbindt iets op de computer van "onbekende" oorsprong te installeren.

Als u een van degenen bent die eraan gewend zijn casi volledig toetsenbord als je werkt, CodePen zal geweldig voor je zijn. Andere tools nodig plugins om sneltoetsen te kunnen gebruiken om de omgeving in te vullen. Dit maakt het werk een beetje ongemakkelijker (hoewel net zo effectief na installatie). CP. Het integreert standaard een systeem waarmee u dezelfde regels code invult die worden herhaald, zoals het zou kunnen zijn in een lijst. U schrijft hoe u de lijst wilt weergeven en klikt op Tab.

De Pro-versie biedt ook veel meer opties voor een prijs van € 9,00 voor het basispakket tot € 29,25 voor het “Super” -pakket. Op meerdere apparaten tegelijk kunnen updaten wat we in één doen. Ook een coöperatieve modus, een "leerkrachtmodus", enz. Profiteer als je hier wilt.

JSBin

JSBin is een tool die we als direct kunnen kwalificeren​ Als u eenmaal naar zijn webdomein gaat, is het klaar om zonder vertraging te beginnen met het opstellen van uw volgende project. En hoewel de eerste enscenering niet erg aantrekkelijk is, is hij wel comfortabel.

JSBin is eenvoudig, met de basisstructuur gemaakt in html om geen tijd te verspillen, zul je de verschillende talen afwisselen om het werk te voltooien. Eerst is er HTML, dan CSS, Javascript en tenslotte uw werk visueel. En hoewel het moeilijker lijkt, heb je dezelfde soorten snelkoppelingen zonder iets te installeren. Direct vanuit de browser.

Ik vond het echter ongemakkelijker om de code correct te bekijken, als deze eenmaal is verborgen vanwege de volgende kolommen. Omdat u met de laptop moet opgeven of opgeven met de trackpad en het is niet erg vloeibaar.

Het heeft slechts twee termijnen, gratis of betaald. Dit is een beetje duurder dan CodePen, maar als je het jaarlijks betaalt, is het winstgevender als je € 120 kunt betalen.

CSSDeck

CSSDeck

De werkomgeving van CSSDeck verschilt van het bovenstaande​ Alleen verdeeld in twee kolommen, visuele code, werkt CSSDeck met 3 rijen naar beneden waarmee het de verschillende soorten taal verdeelt. Met een presentatie in de vorm van een sociaal netwerk en een schonere werkomgeving in lichte kleur. Het lijkt een eenvoudig hulpmiddel. Hoewel dat soms niet betekent dat het negatief is.

Met meer dan zestigduizend geregistreerde gebruikers en meer dan tweehonderdvijftigduizend gemaakte projecten, zal het zoeken en vinden van wat je zoekt niet moeilijk zijn. De taal zoals altijd, als het een ongemak kan zijn voor degenen die geen Engels kennen, maar hierin sociaal netwerk De afbeelding is erg belangrijk, dus ik vind het geen grote uitdaging.

plunkr

plunkr het is de minst aantrekkelijke tool die ik tot nu toe ben tegengekomen​ De presentatie is geagglutineerd in berichten en gebrek aan afbeeldingen. Het laden van inhoud is traag en op het eerste gezicht niet erg handig. Bovendien zorgt de sortering op datum ervoor dat elke programmering, hoe eenvoudig ook, in de eerste positie kan staan. Om iets interessants te zien, moet u naar het tabblad gaan met de tekst: «meest bekeken​ Tenminste, als u het nog niet eerder met Google heeft vertaald.

Zeg ook dat ze volgens het web in versie 1.0.0 zitten. Dit verklaart dus een beetje het ontwerp, de presentatie en de mogelijke fouten die u tegenkomt tijdens het surfen op internet.

Een voordeel als je geen ideeën meer hebt, u hoeft geen ander tabblad in Plunkr te verlaten of te openen, aangezien u rechtstreeks vanuit de rechterzijbalk kunt lopen met andere projecten en ze direct kunt bekijken. Dit maakt het gemakkelijker voor u om snelle ideeën te verzamelen en deze tegelijkertijd op uw project toe te passen.

ploeteren

ploeteren het is een eenvoudige tool, je gaat erin en maakt​ Hoewel u zich kunt registreren en uw gebruikersnaam kunt krijgen via GitHub, is het niet iets dat veel opvalt op internet. Met een achtergrond in een geel naar rood verloop, in het visuele gedeelte en een witte achtergrond in het codegedeelte (zoals normaal is), wordt het Dabblet-project gepresenteerd, hoewel je dit kunt wijzigen vanaf het tabblad CSS. Voor mij is het beter om het leeg te hebben, omdat dat verloop slechts een klein beetje geeft leven a

Wanneer u aan het bewerken bent, kunt u de tabbladen configureren die u ziet gemakkelijk. Zelfs als u wilt overschakelen naar kolommen of rijen voor een comfortabele weergave, afhankelijk van de persoon die aan het bewerken is. De lettergrootte wijzigen, anoniem opslaan zonder te registreren of de HTML-code valideren zijn meer mogelijkheden die Dabblet op het eerste gezicht biedt. Hoewel dit niet de eerste optie is die ik zou kiezen, kan het zijn om in toekomstige versies rekening mee te houden als ze worden bijgewerkt.

Een van de dingen die ik het minst leuk vond, maar die geweldige programmeurs misschien leuk vinden, is dat je hebt niet de mogelijkheid om een ​​label te tabelleren en het zelf te laten schrijven​ Dat wil zeggen, plaats HTML en klik op het tabblad en schrijf automatisch "html" en "/ html". Iets dat in de andere applicaties als het is gedaan.

LiveWeven

levend weefsel

LiveWeven Het lijkt erg op de anderen, het heeft niets dat de anderen niet kunnen bieden in termen van bruikbaarheid. Wat we benadrukken over dit project is het ontwerp, een donkere kleur vergelijkbaar met CodePen maar met een vierkante verdeling. De grootte kunnen veranderen proeven. Er is ook de duidelijke modus en de «ongepast« waar de code die u bewerkt niet visueel wordt weergegeven, totdat u deze activeert. Het is niet een functie die ik erg handig vind, als ontwerper is het belangrijk om altijd in realtime te zien wat je bewerkt, maar iemand zal er zeker iets aan hebben. En hoewel u zich, zoals altijd, kunt registreren, heeft de gebruiker geen hoofdrol. Omdat u, zelfs als u zich niet registreert, uw project kunt opslaan.

Sublime Text

Deze tool het is totaal anders dan wat je tot dusver in de analyse hebt gezien​ Sublime Text is niet als webbron, maar als applicatie. Aan de ene kant is het zeker handiger om het op de desktop te hebben. Vooral vanwege mogelijke internetcrashes of bevriezingen door eigen risico en mogelijk verlies van werk. Aan de andere kant is het niet zo'n visuele tool als de vorige. Naast het niet hebben van de mogelijkheid van een gemeenschap om projecten te delen.

Alles is hier helemaal opnieuw​ U moet tabbladen maken om de regels code te plaatsen en ze een andere naam geven om te weten welke het is. Als de eerste HTML is, de tweede CSS .. of vice versa. Het heeft ook geen snelkoppelingen voor wat het zal zijn volledig handmatig, behalve de aanhalingstekens.

Conclusie

Alle programma's zijn vergelijkbaar met bepaalde persoonlijke accenten van elk bedrijf die ertoe leiden dat er voor- en nadelen in zitten. Ieder kiest degene die het beste bij hen past, mijn aanbeveling is om CodePen of CSSDeck te gebruiken voor de omgeving en het sociale netwerk dat het behandelt​ Maar als je er nog een leuk vond, laat dan een opmerking achter en leg je redenen uit, ze zullen zeker nuttig zijn.


Laat je reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

*

*

  1. Verantwoordelijk voor de gegevens: Miguel Ángel Gatón
  2. Doel van de gegevens: Controle SPAM, commentaarbeheer.
  3. Legitimatie: uw toestemming
  4. Mededeling van de gegevens: De gegevens worden niet aan derden meegedeeld, behalve op grond van wettelijke verplichting.
  5. Gegevensopslag: database gehost door Occentus Networks (EU)
  6. Rechten: u kunt uw gegevens op elk moment beperken, herstellen en verwijderen.