FrontEnd-Entwicklung: CodePen oder erhabener Text?

CodePen oder erhabener Text?

CodePen oder erhabener Text? Wenn wir über Webprogrammierung sprechen, fällt uns sofort der Name HTML, CSS und JavaScript ein. Es gibt verschiedene Möglichkeiten, dorthin zu gelangen. Sogar, Wenn wir einen Notizblock öffnen, können wir "html" schreiben.. Es ist wahr, dass Sie ein mühsames Verfahren benötigen, um den Fortschritt zu sehen, was Sie von einem Pad aus programmieren.

Diese Websites sind die wichtigsten Spielplätze für Anwendungsentwickler für Benutzer des Tages. Um mehr über die Vor- und Nachteile dieser Programme zu erfahren, werden wir sie in diesem Artikel eingehend analysieren (zumindest alles, was wir wissen). Wie ich immer sage, kennen sicherlich einige von Ihnen das Thema besser. Wenn ja, kommentieren Sie alles, was uns hier entgeht. Wir diskutieren gerne!

Heute werden wir CodePen, JSBin, Plunkr, sublime analysieren, CSSDeck, Dabblet und LiveWeave. Welches sind die bekanntesten und am häufigsten verwendeten Tools in dieser Umgebung? Es gibt natürlich noch mehr.

Aber für alle, die nicht wissen, worum es beim FrontEnd oder BackEnd geht, lassen Sie uns ein wenig erklären. Das Front-End oder die Benutzeroberfläche ist der visuelle Teil, den der navigierende Benutzer im Web sehen kann. Das BackEnd ist der Teil, den der Site-Administrator steuert. Wenn Sie in der Programmierung Code über ein Tool eingeben, das das Ergebnis gleichzeitig anzeigt, wird dies als Front-End bezeichnet.

CodePen

Für viele das vollständigste Werkzeug von allem, worüber wir reden. Wird als Web-Tool verwendet, das einer Community am nächsten kommt, um Ihre Arbeit zu zeigen. Eine Art von Youtube vom Programmierer. Hier können Sie die Arbeit der mit dem Web verbundenen Programmierer sehen und sie kontaktieren, falls Sie Interesse haben, ihr Profil anzeigen, ihnen in Netzwerken folgen und sogar ihren Kanal abonnieren, um alle ihre zukünftigen Projekte anzuzeigen.

Präsentation von Inhalten, Support und Tastaturkürzeln

Die CodePen-Präsentation ist die interessantesteDenn mit nur wenigen Klicks können Sie den Vorgang sofort durcharbeiten. Mit sehr gut getrennten Zeilen von HTML, CSS und Javascript. Zusätzlich zum visuellen Teil, den Sie nach oben und unten verteilen können, um Ihren Fortschritt klar zu sehen. Dies hilft, jede Sprache gut zu unterscheiden. Etwas, das für neuere Programmierer nützlich ist.

Ihr Web-Supportmacht es erträglicher, wenn Sie etwas verwenden möchten, das wir nicht wirklich gut kennen. Das bedeutet nicht, dass es besser für Sie ist, es hängt von den Bedürfnissen ab, die wir haben. Aber ja, um die Umgebung ein wenig besser kennenzulernen, bevor Sie sich verpflichten, etwas auf dem Computer "unbekannten" Ursprungs zu installieren.

Wenn Sie einer von denen sind, die es gewohnt sind, sie zu benutzen Fälle CodePen ist eine perfekte Tastatur, wenn Sie arbeiten. Andere Werkzeuge benötigen Plugins um Tastaturkürzel verwenden zu können, um die Umgebung auszufüllen. Dies macht die Arbeit etwas unangenehmer (obwohl sie nach der Installation genauso effektiv ist). CP. Es integriert standardmäßig ein System, mit dem Sie dieselben Codezeilen ausfüllen können, die wiederholt werden, wie es in einer Liste sein könnte. Sie schreiben, wie die Liste angezeigt werden soll, und klicken auf Tab.

Die Pro-Version bietet außerdem viele weitere Optionen für einen Preis von 9,00 € für das Basispaket bis 29,25 € für das „Super“ -Paket. In der Lage sein, auf mehreren Geräten gleichzeitig zu aktualisieren, was wir in einem tun. Auch ein kooperativer Modus, ein "Lehrermodus" usw. Profitieren Sie, wenn Sie hier wollen.

JSBin

JSBin ist ein Tool, das wir als direkt qualifizieren könnten. Sobald Sie zu seiner Webdomain gegangen sind, können Sie unverzüglich mit der Erstellung Ihres nächsten Projekts beginnen. Und obwohl die erste Inszenierung nicht sehr attraktiv ist, ist sie komfortabel.

JSBin ist einfach: Mit der in HTML erstellten Grundstruktur, um keine Zeit zu verschwenden, wechseln Sie zwischen den verschiedenen Sprachen, um die Arbeit abzuschließen. Zuerst gibt es HTML, dann CSS, Javascript und schließlich Ihre Arbeit visuell. Und obwohl es schwieriger zu sein scheint, haben Sie die gleichen Arten von Verknüpfungen, ohne etwas zu installieren. Direkt vom Browser.

Ich fand es jedoch unangenehmer, den Code korrekt anzuzeigen, sobald er aufgrund der nachfolgenden Spalten ausgeblendet ist. Da muss man mit dem Laptop mit dem aufgeben oder runter Trackpad und es ist nicht sehr flüssig.

Es gibt nur zwei Raten, kostenlos oder kostenpflichtig. Dies ist etwas teurer als CodePen. Wenn Sie es jedoch jährlich bezahlen, ist es rentabler, wenn Sie 120 € bezahlen können.

CSSDeck

CSSDeck

Das Arbeitsumfeld von CSSDeck unterscheidet sich von der oben gezeigten. CSSDeck ist nur in zwei Spalten unterteilt, visueller Code. Es arbeitet mit drei Zeilen nach unten, mit denen die verschiedenen Sprachtypen unterteilt werden. Mit einer Präsentation in Form eines sozialen Netzwerks und einer saubereren Arbeitsumgebung in hellen Farben. Es scheint ein einfaches Werkzeug zu sein. Obwohl das manchmal nicht bedeutet, dass es negativ ist.

Mit mehr als sechzigtausend registrierten Benutzern und mehr als zweihundertfünfzigtausend erstellten Projekten wird es nicht schwierig sein, das zu suchen und zu finden, was Sie wollen. Die Sprache wie immer, wenn es für diejenigen, die kein Englisch können, eine Unannehmlichkeit sein kann, aber in dieser sozialen Netzwerken Das Bild ist sehr wichtig, daher halte ich es nicht für eine große Herausforderung.

plunkr

plunkr Es ist das am wenigsten attraktive Werkzeug, auf das ich bisher gestoßen bin. Die Präsentation ist in Nachrichten und fehlenden Bildern agglutiniert. Das Laden von Inhalten ist langsam und auf den ersten Blick nicht sehr nützlich. Darüber hinaus macht die Bestellung nach Datum jeden Zeitplan, egal wie einfach er auch sein mag, an erster Stelle. Um etwas interessanteres zu sehen, sollten Sie zu der Registerkarte gehen, auf der steht: «Am häufigsten gesehen«. Das heißt, wenn Sie es noch nicht mit Google übersetzt haben.

Sagen Sie auch, dass sie laut Web in Version 1.0.0 sind. Dies erklärt ein wenig das Design, die Präsentation und die möglichen Fehler, die Sie beim Surfen im Internet finden.

Als Vorteil, wenn Ihnen die Ideen ausgehenSie müssen keine andere Registerkarte in Plunkr verlassen oder öffnen, da Sie direkt von der rechten Seitenleiste aus mit anderen Projekten gehen und diese sofort anzeigen können. Auf diese Weise können Sie schneller Ideen sammeln und gleichzeitig auf Ihr Projekt anwenden.

basteln

basteln Es ist ein einfaches Werkzeug, das Sie erstellen. Obwohl Sie sich über GitHub registrieren und Ihren Benutzernamen haben können, ist dies im Web nicht besonders hervorzuheben. Mit einem Hintergrund in einem gelben bis roten Farbverlauf im visuellen Teil und einem weißen Hintergrund im Codeteil (wie üblich) wird das Dabblet-Projekt angezeigt, obwohl Sie es auf der Registerkarte CSS ändern können. Für mich ist es besser, es leer zu haben, da dieser Gradient nur ein wenig ergibt Lebensversicherung a

Während der Bearbeitung können Sie die angezeigten Registerkarten konfigurieren leicht. Selbst wenn Sie zu Spalten oder Zeilen wechseln möchten, um eine bequeme Anzeige zu erhalten, abhängig von der Person, die gerade bearbeitet. Das Ändern der Schriftgröße, das Speichern als anonym ohne Registrierung oder Validierung des HTML-Codes sind weitere Möglichkeiten, die Dabblet auf den ersten Blick bietet. Obwohl dies nicht die erste Option ist, die ich wählen würde, kann es sein, dass sie in zukünftigen Versionen berücksichtigt wird, wenn sie aktualisiert werden.

Eines der Dinge, die mir am wenigsten gefallen haben, die aber großen Programmierern gefallen mögen, ist das Sie haben nicht die Möglichkeit, ein Etikett zu tabellieren und es selbst schreiben zu lassen. Das heißt, setzen Sie HTML und klicken Sie auf die Registerkarte und schreiben Sie automatisch "html" und "/ html". Etwas, das in den anderen Anwendungen getan wird.

LiveWeave

Liveweave

LiveWeave Es ist den anderen sehr ähnlich, es hat nichts, was die anderen in Bezug auf Nützlichkeit nicht bieten können. Was wir an diesem Projekt hervorheben, ist sein Design, eine dunkle Farbe ähnlich CodePen, aber mit einer quadratischen Verteilung. In der Lage sein, die Größe zu ändern zu schmecken. Es gibt auch den Clear-Modus und den «aus der Reihe« Der von Ihnen bearbeitete Code wird erst dann im Bild angezeigt, wenn Sie ihn aktivieren. Es ist keine Funktion, die Sie als Designer sehr nützlich finden. Es ist wichtig, immer in Echtzeit zu sehen, was Sie bearbeiten, aber jemand wird Sie mit Sicherheit verwenden. Und obwohl Sie sich wie immer registrieren können, spielt der Benutzer keine führende Rolle. Selbst wenn Sie sich nicht registrieren, können Sie Ihr Projekt speichern.

Sublime Text

Dieses Werkzeug Es ist völlig anders als das, was Sie bisher in der Analyse gesehen haben. Sublime Text ist keine Webressource, sondern eine Anwendung. Einerseits ist es sicher nützlicher, es auf dem Desktop zu haben. Insbesondere aufgrund möglicher Internetabstürze oder Einfrierungen aufgrund von Übermaß und möglichem Arbeitsverlust. Andererseits ist es kein so visuelles Werkzeug wie die vorherigen. Zusätzlich dazu, dass eine Community nicht die Möglichkeit hat, Projekte zu teilen.

Hier ist alles von Grund auf neu. Sie müssen Registerkarten erstellen, um die Codezeilen zu platzieren und sie umzubenennen, um zu wissen, um welche es sich handelt. Wenn das erste HTML ist, das zweite CSS .. oder umgekehrt. Es gibt auch keine Abkürzungen für das, was es sein wird komplett manuell, bis auf die Anführungszeichen.

Fazit

Alle Programme sind ähnlich, mit bestimmten persönlichen Details jedes Unternehmens, die zu Vor- und Nachteilen führen. Jeder wird den auswählen, der am besten zu ihm passt. Ich empfehle, CodePen oder CSSDeck für die Umgebung und das damit verbundene soziale Netzwerk zu verwenden. Aber wenn Ihnen noch einer gefallen hat, hinterlassen Sie einen Kommentar und erläutern Sie Ihre Gründe, sie werden sicherlich nützlich sein.


Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert mit *

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.