FrontEnd fejlesztés: CodePen vagy Sublime szöveg?

CodePen vagy fenséges szöveg?

CodePen vagy Sublime Text? Ha webprogramozásról beszélünk, akkor a HTML, a CSS és a JavaScript neve rögtön eljut hozzánk. Számos módja van az eljutásnak. Még, ha kinyitunk egy jegyzettömböt, akkor munkába állhatunk a "html" írásával. Igaz, hogy a programozás eredményének megjelenítéséhez padról megnézheti, hogy fáradságos eljárásra lesz szüksége az előrelépés észleléséhez.

Ezek a webhelyek jelentik a fő játszóteret az aznapi felhasználók számára készült alkalmazások fejlesztői számára. Ha többet szeretne megtudni e programok előnyeiről és hátrányairól, azokat ebben a cikkben (legalábbis mindent, amit tudunk) alaposan elemezni fogunk. Mint mindig mondom, itt néhányan bizonyára jobban tudják a témát. Ha igen, kommentáljon mindent, ami itt elmenekül tőlünk. Szívesen megbeszéljük!

Ma elemezzük a CodePen, JSBin, Plunkr, fenséges elemzéseket, CSSDeck, Dabblet és LiveWeave. Melyek a legismertebbek és a leginkább használt eszközök ebben a környezetben. Természetesen vannak még.

De mindazok számára, akik nem tudják, miről szól a FrontEnd vagy a BackEnd, magyarázzunk el egy kicsit. A kezelőfelület vagy az interfész az a vizuális rész, amelyet a navigáló felhasználó láthat az interneten. A BackEnd lesz az a rész, amelyet a webhely rendszergazdája vezérel. A programozás során, ha egy olyan eszközön keresztül írja be a kódot, amely egyszerre jeleníti meg az eredményt, akkor ezt front-endnek hívják.

CodePen

Sokak számára a legteljesebb eszköz mindazokból, amiket beszélünk. Webes eszközként használják, amely a közösséghez a legközelebb áll ahhoz, hogy megmutassa munkáját. Egyfajta Youtube a programozótól. Ebben megnézheti az internethez kapcsolt programozók munkáját, és kapcsolatba léphet velük abban az esetben, ha bármilyen érdeklődése van, megnézheti profiljukat, követheti őket a hálózatokon, sőt feliratkozhat csatornájukra, hogy megtekintsék az összes jövőbeli projektjüket.

A tartalom, a támogatás és a billentyűparancsok bemutatása

A CodePen bemutató a legérdekesebbMivel csak néhány kattintással azonnal elvégezheti a folyamatot. Nagyon jól elkülönített html, css és javascript vonalakkal. A vizuális rész mellett, amelyet felfelé és lefelé is metszhet, hogy jól lássa a haladását. Ez segít az egyes nyelvek megkülönböztetésében. Valami, ami jól jön az újabb programozók számára.

Az Ön webes támogatása, elviselhetőbbé teszi, ha olyan dolgot szeretne elkezdeni használni, amelyet valójában nem nagyon ismerünk. Ez nem azt jelenti, hogy neked jobb, hanem a szükségleteinktől függ. De igen, hogy kicsit jobban megismerjem a környezetet, mielőtt vállalnám, hogy bármit telepítünk az "ismeretlen" eredetű számítógépre.

Ha Ön egyike azoknak, akik szokták használni casi teljesen billentyűzet, amikor dolgozik, a CodePen csodálatos lesz az Ön számára. Más eszközökre van szükség Plugins hogy billentyűparancsokat használhasson a környezet kitöltéséhez. Ez egy kicsit kényelmetlenebbé teszi a munkát (bár a telepítés után ugyanolyan hatékony). CP. alapértelmezés szerint integrál egy rendszert, amely arra készteti Önt, hogy ugyanazokat a kódsorokat töltse ki, amelyek megismétlődnek, amilyen lehet egy listában. Írja, hogyan szeretné megjeleníteni a listát, és kattintson a Tab gombra.

A Pro verzió sok további lehetőséget is lehetővé tesz, az alapcsomag 9,00 €, a „Super” csomagé pedig 29,25 €. Képes egyszerre több eszközön frissíteni, amit egyben csinálunk. Szintén kooperatív mód, "tanár mód" stb. Használja ki, ha ide akar.

JSBin

A JSBin egy olyan eszköz, amelyet közvetlennek minősíthetnénk. Mivel miután belépett a webtartományába, késedelem nélkül készen áll a következő projekt elkészítésére. És bár első rendezése nem túl vonzó, mégis kényelmes.

A JSBin egyszerű, az alapstruktúra html-ben van létrehozva, hogy ne pazarolja az idejét, a munka befejezéséhez a különböző nyelvek között veszi körül magát. Először HTML, majd CSS, Javascript és végül vizuálisan a munkád. És bár ez nehezebbnek tűnik, ugyanolyan típusú parancsikonokkal rendelkezik, anélkül, hogy bármit is telepítene. Közvetlenül a böngészőből.

Azonban úgy éreztem, hogy kényelmetlenebb a kódot megfelelően megtekinteni, miután az a következő oszlopok miatt el van rejtve. Mivel a laptopnál le kell mondania vagy le kell állnia a trackpad és nem túl folyékony.

Csak két részlet van, ingyenes vagy fizetett. Ez valamivel drágább, mint a CodePen, bár ha évente fizet, akkor jövedelmezőbb, ha fizethet 120 eurót.

CSSDeck

CSSDeck

A munkakörnyezet CSSDeck eltér a fentiektől. Csak két oszlopra osztva, a vizuális kódra, a CSSDeck 3 sorral lefelé dolgozik, amelyekkel felosztja a különféle nyelveket. Társadalmi hálózat és tisztább, világos színű munkakörnyezet formájában. Egyszerű eszköznek tűnik. Bár néha ez nem jelenti azt, hogy negatív.

Több mint hatvanezer regisztrált felhasználó és több mint kétszázötvenezer projekt létrehozásával a keresés és megtalálás nem lesz nehéz. A nyelv, mint mindig, ha kellemetlenséget okozhat azoknak, akik nem tudnak angolul, de ebben social network A kép nagyon fontos, ezért nem hiszem, hogy nagy kihívás.

plunkr

plunkr ez a legkevésbé vonzó eszköz, amellyel eddig találkoztam. Az előadás agglutinálódik az üzenetekkel és a képek hiányával. A tartalom betöltése lassú és első ránézésre nem túl hasznos. Ezenkívül a dátum szerinti rendezés bármilyen programozást, bármilyen egyszerű is, az első pozícióba hozhat. Ha valami érdekesebbet szeretne látni, menjen a következő fülre: «Legnézettebb«. Vagyis, ha még nem fordította le a Google-lal.

Mondja azt is, hogy a web szerint az 1.0.0 verzióban vannak. Tehát ez egy kicsit elmagyarázza a webböngészés során tapasztalt dizájnt, bemutatót és a lehetséges hibákat.

Előnyként, ha elfogynak az ötletei, akkor nem kell elhagynia vagy megnyitnia egy másik lapot a Plunkr-ban, mivel közvetlenül a jobb oldali sávból sétálhat más projektekkel, és azonnal megtekintheti őket. Ez megkönnyíti a gyors ötletek összegyűjtését és a projektben való egyidejű alkalmazását.

dabblet

dabblet ez egy egyszerű eszköz, bemész és létrehozsz. Bár regisztrálhat és megadhatja felhasználónevét a GitHubon keresztül, ez nem valami, ami kiemelkedne az interneten. Sárga vagy piros színátmenetű háttérrel, a vizuális részben és a fehér részben a kódrészben (a szokásos módon) megjelenik a Dabblet projekt, bár a CSS fülről módosíthatja. Számomra jobb, ha üres, mivel ez a színátmenet csak egy kicsit ad élet a

Szerkesztéskor konfigurálhatja a megjelenő füleket könnyen. Akkor is, ha oszlopokra vagy sorokra szeretne váltani a kényelmes megtekintés érdekében, a szerkesztéstől függően. A betűméret megváltoztatása, névtelenül történő mentés a HTML-kód regisztrációja vagy érvényesítése nélkül további lehetőségeket kínál a Dabblet első pillantásra. Bár nem ez az első lehetőség, amelyet választanék, lehet, hogy a későbbi verziókban figyelembe kell venni, ha frissülnek.

Az egyik dolog, ami a legkevésbé tetszett nekem, de ami a nagy programozóknak tetszhet, az az nincs lehetősége egy címke táblázatba foglalására és arra, hogy maga írja meg. Vagyis tegye a HTML-t, kattintson a fülre, és automatikusan írja a "html" és a "/ html" szót. Valami, ami a többi alkalmazásban megtörténik.

LiveWeave

élő szövés

LiveWeave Nagyon hasonlít a többiekhez, nincs semmi, amit a többiek nem tudnának kínálni a hasznosság szempontjából. Amit kiemelünk ebben a projektben, az a design, a CodePen-hez hasonló, de négyzet alakú eloszlású sötét szín. Képes változtatni a méreten megkóstolni. Van még a tiszta mód és a «soron kívül« ahol a szerkesztett kód nem jelenik meg a látványban, amíg nem aktiválja azt. Nem egy olyan funkció, amelyet nagyon hasznosnak találok, mint tervező fontos, hogy mindig valós időben lássuk, mit szerkeszt, de valaki biztosan megtalálja valamilyen használatát. És bár, mint mindig, regisztrálni is lehet, a felhasználónak nincs vezető szerepe. Mivel akkor is, ha nem regisztrál, elmentheti a projektjét.

Sublime Text

Ez az eszköz Teljesen különbözik attól, amit eddig az elemzés során látott. A Sublime Text nem webes erőforrás, hanem alkalmazás. Egyrészt biztosan hasznosabb, ha az asztalon van. Különösen az esetleges internetes összeomlások vagy lefagyások miatt a túlzott és az esetleges munkakiesés miatt. Másrészt nem annyira vizuális eszköz, mint az előzőek. Amellett, hogy nincs lehetősége egy közösségnek projektek megosztására.

Itt minden a semmiből van. Létre kell hoznia füleket a kódsorok elhelyezéséhez és átnevezéséhez, hogy megtudja, melyik. Ha az első HTML, a második CSS ... vagy fordítva. Nincs is hivatkozása arra, hogy mi lesz teljesen kézi, kivéve az idézeteket.

Következtetés

Minden program hasonló az egyes vállalatok bizonyos személyes vonásaihoz, amelyek előnyökkel és hátrányokkal járnak bennük. Mindegyik kiválasztja a legmegfelelőbbet, az én javaslatom a CodePen vagy a CSSDeck használata a környezet és az általa kezelt társadalmi hálózat számára. De ha tetszett még egy, írjon megjegyzést, és magyarázza el indokait, azok biztosan hasznosak lesznek.


Hagyja megjegyzését

E-mail címed nem kerül nyilvánosságra. Kötelező mezők vannak jelölve *

*

*

  1. Az adatokért felelős: Miguel Ángel Gatón
  2. Az adatok célja: A SPAM ellenőrzése, a megjegyzések kezelése.
  3. Legitimáció: Az Ön beleegyezése
  4. Az adatok közlése: Az adatokat csak jogi kötelezettség alapján továbbítjuk harmadik felekkel.
  5. Adattárolás: Az Occentus Networks (EU) által üzemeltetett adatbázis
  6. Jogok: Bármikor korlátozhatja, helyreállíthatja és törölheti adatait.