Share
Toen ik een tijdje geleden over JSBin schreef, leidde dit zeker tot veel discussies en discussies over welke online codefragmentenredacteur de beste was. Een paar alternatieven werden weggegooid, vooral CodePen.
Met zoveel lezers die zo gepassioneerd en toegewijd zijn aan hun specifieke keuzes, wilde ik een opsomming schrijven die een deel van de coolheid van CodePen benadrukte. Ik zal zeggen dat dit geen vergelijkend artikel is, vooral omdat ik echt een hekel heb aan het doen van dat soort artikelen. Elk van deze hulpmiddelen is uniek en biedt een eigen waarde die in veel gevallen neerkomt op voorkeur van de gebruiker.
Er zijn zeker overeenkomsten tussen de tools, zowel in gebruikersinterface als in functionaliteit. Als we naar beide hulpprogramma's kijken, ziet u dat de gebruikersinterface met meerdere vensters vrij normaal is en niet zonder reden; het is heel intuïtief.
JSBin:
CodePen:
Met de multiparaanbenadering is het ongelooflijk eenvoudig om alle facetten van uw voorbeeldcode te visualiseren, zodat u snel markeringen of JavaScript kunt bijwerken en onmiddellijke resultaten kunt krijgen. En dat is waar deze tools over het algemeen voor zijn; snelle prototyping en testen van codefragmenten.
In aanvulling op de UI-overeenkomsten, bieden beide editors gebruikers de mogelijkheid om:
Vanuit mijn perspectief zijn dit allemaal cruciale functies voor elke code-bin-tool, waardoor een gebruiker niet alleen prototypen van front-end-code kan maken met behulp van de middelen die ze gewoonlijk gebruiken, maar ook toestaan om deze te delen op de meeste media die door ontwikkelaars worden gebruikt. Als technisch schrijver is de mogelijkheid om een live fragment in te voegen ongelooflijk belangrijk omdat het realtime feedback geeft om de code die ik maak te demonstreren, de concepten waarover ik schrijf te versterken, en tegelijkertijd echte feedback en code aan de lezer te geven.
In sommige gevallen komt de functiepariteit overeen met de kosten, ongeacht of deze functies beschikbaar zijn of niet. Als u bijvoorbeeld samenwerkingsfuncties wilt, biedt JSBin dat gratis aan, terwijl het een functie is die alleen beschikbaar is voor het Pro-niveauaanbod van CodePen. En om duidelijk te zijn (en ik heb dit al eerder gezegd), denk ik dat het prima is om te betalen voor geweldige functies. Dus of de functie nu gratis of op abonnementsbasis is, is naar mijn mening irrelevant, zolang het waarde toevoegt aan de gebruiker.
Van alle code bin tools die ik heb gebruikt, kan ik zeker zeggen dat CodePen veruit de meest esthetische en eerlijk is, het is logisch. CodePen's front-end ontwerp is gebouwd door de uiterst getalenteerde ontwikkelaar Chris Coyier, die een geweldig oog heeft voor het ontwerp van de gebruikersinterface. En het komt zeker tot uiting in de gepolijste look en feel van de tool.
Er is veel nagedacht over het bieden van eenvoudige toegang tot de veelheid aan belangrijke functies, terwijl ervoor wordt gezorgd dat de editor niet overvol is en de functies niet opdringerig zijn. Dit is belangrijk omdat viewport onroerend goed, in dit type gebruikersinterface, krap is. Alles in balans brengen, een fatsoenlijke codeerervaring bieden in meerdere talen en tegelijkertijd onmiddellijke resultaten bieden; Dat is inderdaad lastig en dwingt wat denken in termen van lay-out.
Dit is duidelijk zichtbaar in het gebruik van goed geplaatste pictogrammen in de kopteksten van elk scriptvenster.
Gebruikmakend van een veelgebruikte UI-pictogram voor instellingen (een versnelling), kunt u zien hoe het CodePen-team aardig wat belangrijke, complementaire functionaliteit heeft geconsolideerd die de ervaring met prototyping verbetert. Dit is wat ik bedoel, omdat de gebruikersinterface niet opdringerig is: intuïtieve snelkoppelingen naar extra functies aanbieden. Maar het is meer dan alleen extra functies toevoegen. Dit zijn echte tools die webontwikkelaars elke dag gebruiken en die belangrijk zijn om een legitiem idee te krijgen van de vraag of hun prototype wel of niet werkt.
Functies zoals de "Details"view toont CodePen's focus op het bieden van niet alleen een degelijke bewerkingservaring maar ook een sterke sociale invalshoek die gebruikers in staat stelt beter zicht te krijgen op het nut van de codefragmenten die ze delen:
Hoewel beide tools uitgebreide aanvullende functies bieden, toont CodePen mijns inziens een duidelijke neiging naar betere tools voor ontwerpers via de rijke ondersteuning voor Sass, LESS en Stylus, inclusief add-ons zoals Compass, Bourbon en Nib.
Maar hoewel het opvalt in CSS en markup, biedt CodePen niet zoveel als JSBin als het gaat om ondersteuning van JavaScript-bibliotheken. Dat wil niet zeggen dat het niet veel van de grote spelers omvat, maar met de overvloed aan nieuwe bibliotheken en frameworks die vandaag worden gebruikt, is er een duidelijk verschil in termen van ingebouwde ondersteuning:
CodePen:
JSBin:
Het is duidelijk uit deze schermafbeeldingen (die slechts gedeeltelijke afbeeldingen zijn) dat de breedte van JavaScript-framework-ondersteuning veel groter is dan CodePen, zowel in cijfers als in ondersteunde versies. CodePen biedt de mogelijkheid om een externe JavaScript-bron in uw codefragment op te nemen, maar het gemak van het kunnen klikken op een vervolgkeuzelijst en kiezen uit een reeks JS-frameworks is behoorlijk nuttig.
Er is echter één kenmerk dat voor mij totaal opvalt en dat is dit:
Dat is juist. CodePen omvat integratie met een van mijn favoriete browsertesttools, BrowserStack.com. Ik heb eerder over de service geschreven en ben er absoluut dol op vanwege de eenvoud voor het testen en de breedte van de dekking van de browser. Het is dus een groot pluspunt om CodePen te integreren. Maar het is meer dan die ene knop die het geweldig maakt. In de vervolgkeuzelijst kunt u bepalen welke browser u wilt targeten:
... die u vervolgens met dezelfde informatie naar BrowserStack leidt:
In termen van gemak is dit een duidelijke overwinning voor ontwikkelaars. Het is belangrijk op te merken dat u weg van CodePen wordt weggeleid wanneer u op de BrowserStack-knop klikt en u een BrowserStack-account nodig hebt om het te gebruiken.
CodePen wordt geleverd in een gratis editie en een meer feature-rijk Pro versie. Dit omvat functies voor live preview van code op meerdere apparaten, samenwerking met andere ontwikkelaars, thema-ingesloten codepennen en intuïtieve 'Professor-modus', wat erg handig is voor online training en lessen..
Van de beschikbare Pro-functies zijn de twee die ik het handigst vind de Rechtstreekse beelden en Asset Hosting waarbij de laatste ontwikkelaars toestaat om items zoals afbeeldingen en scriptbestanden te uploaden die direct in de codepen kunnen worden gebruikt.
Je vraagt je misschien af waarom dit nuttig is? Welnu, het alternatief is om een externe hostingoptie te vinden, zoals een CDN of je eigen server. Het rechtstreeks uploaden van uw eigen aangepaste JavaScript-bestand, afbeeldingen of stylesheet lost dat probleem op en maakt die assets direct beschikbaar voor gebruik in uw codestiften. Eenmaal geüpload, is het eenvoudig om op het item te klikken, de URL te pakken en in uw code te plaatsen:
Dit alleen verdient de $ 9 per maand om de service te gebruiken en het lijkt uniek voor CodePen.
De reden waarom ik het echt leuk vind Rechtstreekse beelden functie is omdat het testen van verschillende vormfactoren tegenwoordig ontzettend belangrijk is. Dit gebeurt door de koppeling van de pen naar het apparaat te sturen waarmee u wilt testen. Dat kan door het rechtstreeks in de URL-balk van de mobiele browser te typen of door het dialoogvenster Delen van CodePen te gebruiken om een tekstbericht naar een mobiel apparaat te verzenden:
Wanneer de pen wordt bijgewerkt op uw computer, geeft deze vrijwel onmiddellijk de wijzigingen op een willekeurig aantal apparaten weer.
CodePen is een geweldige tool. Het is zeer gepolijst en biedt veel functies met fantastische ondersteuning voor markup- en CSS-tooling. Het feit dat sommige functies alleen op abonnementen zijn gebaseerd, betekent niet langzamerhand dat ik het niet erg vind om goede software te ondersteunen. Ik zal zeggen dat sommige functies een standaard onderdeel van de service lijken te zijn, met name het maken van privé-pennen en live preview, vooral wanneer andere services dat al gratis aanbieden..
Naar mijn mening is het duidelijk dat, nadat ze zowel JSBin als CodePen hebben gebruikt, ze zeer vergelijkbare mogelijkheden delen en de keuze van de te gebruiken service uiteindelijk zal neerkomen op persoonlijke voorkeur. Sommigen houden misschien van de professionele gebruikersinterface van CodePen, terwijl anderen de uitgebreide breedte van JavaScript-framework-ondersteuning in JSBin wel waarderen. Het komt misschien gewoon neer op het gebruik van beide om verschillende taken uit te voeren, maar ik kan wel zeggen dat CodePen zeker de moeite waard is om te gebruiken en ik zal het toevoegen aan mijn instrumenten van de handel.
Accentsconagua