Rozwój FrontEnd: CodePen czy Sublime Text?

CodePen czy wysublimowany tekst?

CodePen czy Sublime Text? Jeśli mówimy o programowaniu stron internetowych, nazwa HTML, CSS i JavaScript przychodzi nam od razu. Można się tam dostać na kilka sposobów. Parzysty, jeśli otworzymy notatnik, zaczniemy pisać „html”. Prawdą jest, że aby zobaczyć wynik tego, co programujesz z padu, będziesz potrzebować żmudnej procedury, aby zauważyć postęp.

Witryny te są głównymi placówkami zabaw dla programistów aplikacji dla użytkowników. Aby dowiedzieć się więcej o zaletach i wadach tych programów, przeanalizujemy je dogłębnie w tym artykule (przynajmniej wszystko, co wiemy). Jak zawsze powtarzam, z pewnością niektórzy z was tutaj lepiej znają temat. Jeśli tak, skomentuj wszystko, co nam tu umyka. Chętnie porozmawiamy!

Dzisiaj będziemy analizować CodePen, JSBin, Plunkr, sublime, CSSDeck, Dabblet i LiveWeave. Które są najbardziej znane i najczęściej używane w tym środowisku. Oczywiście jest ich więcej.

Ale dla wszystkich, którzy nie wiedzą, o co chodzi w FrontEnd lub BackEnd, wyjaśnijmy trochę. Front-End lub interfejs to część wizualna, którą użytkownik nawigujący będzie mógł zobaczyć w sieci. BackEnd będzie częścią kontrolowaną przez administratora witryny. W programowaniu, jeśli wprowadzisz kod za pomocą narzędzia, które wyświetla wynik jednocześnie, będzie to nazywane front-end.

CodePen

Dla wielu najbardziej kompletne narzędzie wszystkiego, o czym mówimy. Używany jako narzędzie internetowe, które jest najbliższe społeczności, aby pokazać Twoją pracę. Rodzaj YouTube od programisty. W ten sposób możesz zobaczyć pracę programistów powiązanych z siecią i skontaktować się z nimi, jeśli masz jakiekolwiek zainteresowanie, zobaczyć ich profil, śledzić ich w sieciach, a nawet subskrybować ich kanał, aby zobaczyć wszystkie ich przyszłe projekty.

Prezentacja treści, wsparcie i skróty klawiaturowe

Najciekawsza jest prezentacja CodePenaPonieważ wystarczy kilka kliknięć, aby od razu przejść przez cały proces. Z bardzo dobrze oddzielonymi wierszami html, css i javascript. Oprócz części wizualnej, którą możesz przeplatać w górę iw dół, aby wyraźnie zobaczyć swoje postępy. W ten sposób pomaga dobrze rozróżnić każdy język. Coś, co przydaje się nowszym programistom.

Twoje wsparcie internetowe, sprawia, że ​​jest to bardziej znośne, gdy chcesz zacząć używać czegoś, czego tak naprawdę nie znamy zbyt dobrze. To nie znaczy, że jest dla Ciebie lepsze, to zależy od naszych potrzeb. Ale tak, aby trochę lepiej poznać środowisko, zanim zdecydujesz się zainstalować cokolwiek na komputerze „nieznanego” pochodzenia.

Jeśli jesteś jednym z tych, którzy są przyzwyczajeni do używania przypadków całkowicie klawiatura podczas pracy, CodePen będzie dla Ciebie wspaniały. Potrzebne są inne narzędzia wtyczki aby móc używać skrótów klawiaturowych do wypełniania środowiska. To sprawia, że ​​praca jest nieco bardziej niewygodna (choć równie skuteczna po zainstalowaniu). CP. Standardowo integruje system, który sprawi, że wypełnisz te same wiersze kodu, które są powtarzane, tak jak w przypadku listy. Piszesz, jak ma wyglądać lista i klikasz Tab.

Wersja Pro pozwala również na wiele innych opcji w cenie od 9,00 € za pakiet podstawowy do 29,25 € za pakiet „Super”. Możliwość aktualizacji na kilku urządzeniach jednocześnie, co robimy na jednym. Również tryb kooperacyjny, „tryb nauczyciela” itp. Skorzystaj, jeśli chcesz tutaj.

JSBin

JSBin to narzędzie, które możemy zakwalifikować jako bezpośrednie. Ponieważ po przejściu na jego domenę internetową, będzie on gotowy do natychmiastowego przygotowania kolejnego projektu. I choć jego pierwsza inscenizacja nie jest zbyt atrakcyjna, to jest wygodna.

JSBin jest prosty, z podstawową strukturą utworzoną w html, aby nie tracić czasu, będziesz przeplatać się między różnymi językami, aby zakończyć pracę. Najpierw jest HTML, potem CSS, Javascript i na koniec Twoja praca wizualna. I chociaż wydaje się to trudniejsze, będziesz mieć te same typy skrótów bez instalowania czegokolwiek. Bezpośrednio z przeglądarki.

Jednak bardziej niewygodne było dla mnie poprawne przeglądanie kodu, gdy jest on ukryty z powodu kolejnych kolumn. Ponieważ w przypadku laptopa musisz zrezygnować lub zrezygnować z gładzik i nie jest zbyt płynny.

Ma tylko dwie raty, bezpłatną lub płatną. Jest to trochę droższe niż CodePen, chociaż jeśli płacisz to rocznie, jest bardziej opłacalne, jeśli możesz zapłacić 120 €.

Pokład CSS

Pokład CSS

Środowisko pracy Pokład CSS różni się od przedstawionego powyżej. Podzielony tylko na dwie kolumny, kod wizualny, CSSDeck działa z trzema wierszami w dół, którymi dzieli różne typy języka. Z prezentacją w formie portalu społecznościowego i czystszym środowiskiem pracy w jasnym kolorze. Wydaje się, że to proste narzędzie. Chociaż czasami nie oznacza to, że jest negatywny.

Przy ponad sześćdziesięciu tysiącach zarejestrowanych użytkowników i ponad dwustu pięćdziesięciu tysiącach utworzonych projektów, wyszukiwanie i znajdowanie tego, co chcesz, nie będzie trudne. Język jak zawsze, jeśli może być niedogodnością dla tych, którzy nie znają angielskiego, ale w tym sieci społecznych Wizerunek jest bardzo ważny, więc nie sądzę, że jest to duże wyzwanie.

plunkr

plunkr to najmniej atrakcyjne narzędzie, z jakim do tej pory się spotkałem. Prezentacja jest aglutynowana w przekazach i braku obrazów. Ładowanie treści jest powolne i na pierwszy rzut oka niezbyt przydatne. Ponadto uporządkowanie według daty sprawia, że ​​każde programowanie, nieważne jak proste, może znajdować się na pierwszym miejscu. Aby zobaczyć coś bardziej interesującego, przejdź do zakładki z napisem: «Popularne«. To znaczy, jeśli nie przetłumaczyłeś tego wcześniej w Google.

Powiedz też, że według sieci są one w wersji 1.0.0. To wyjaśnia nieco projekt, prezentację i możliwe błędy, które można znaleźć podczas przeglądania sieci.

Zaletą, jeśli zabraknie Ci pomysłów, nie będziesz musiał opuszczać ani otwierać kolejnej karty w Plunkr, ponieważ bezpośrednio z prawego paska bocznego możesz chodzić z innymi projektami i natychmiast je przeglądać. Ułatwi ci to szybkie zbieranie pomysłów i jednoczesne ich zastosowanie w projekcie.

bałwanka

bałwanka to proste narzędzie, wchodzisz i tworzysz. Chociaż możesz zarejestrować się i mieć swoją nazwę użytkownika za pośrednictwem GitHub, nie jest to coś, co wyróżnia się zbytnio w Internecie. Z tłem w gradiencie od żółtego do czerwonego, w części wizualnej i białym tłem w części kodu (jak zwykle), prezentowany jest projekt Dabblet, chociaż można go zmienić z zakładki CSS. Dla mnie lepiej jest mieć to puste, ponieważ ten gradient daje tylko trochę życie a

Podczas edycji możesz skonfigurować wyświetlane karty z łatwością. Nawet jeśli chcesz przełączyć się na kolumny lub wiersze w celu wygodnego przeglądania w zależności od osoby, która edytuje. Zmiana rozmiaru czcionki, zapisywanie jako anonimowe bez rejestracji lub walidacji kodu HTML to kolejne możliwości, które Dabblet oferuje na pierwszy rzut oka. Chociaż nie jest to pierwsza opcja, którą bym wybrał, być może warto wziąć ją pod uwagę w przyszłych wersjach, jeśli zostaną zaktualizowane.

Jedną z rzeczy, które najmniej mi się podobały, ale które mogą spodobać się świetnym programistom, jest to nie masz możliwości umieszczenia etykiety w tabeli i napisania jej samodzielnie. Oznacza to, że umieść HTML i kliknij kartę i automatycznie napisz „html” i „/ html”. Coś, co w innych aplikacjach, jeśli jest zrobione.

LiveWeave

żywy splot

LiveWeave Jest bardzo podobny do innych, nie ma nic, czego inni nie mogą zaoferować pod względem użyteczności. To, co podkreślamy w tym projekcie, to jego wygląd, ciemny kolor podobny do CodePen, ale z kwadratowym rozkładem. Możliwość zmiany rozmiaru do smaku. Istnieje również tryb kasowania i «nie na miejscu« gdzie edytowany kod nie zostanie odzwierciedlony wizualnie, dopóki go nie aktywujesz. Nie jest to funkcja, która jest dla mnie bardzo przydatna, jako projektant ważne jest, aby zawsze widzieć, co edytujesz w czasie rzeczywistym, ale na pewno ktoś z niej skorzysta. I choć jak zawsze można się zarejestrować, to użytkownik nie ma wiodącej roli. Ponieważ nawet jeśli się nie zarejestrujesz, możesz zapisać swój projekt.

Sublime Text

To narzędzie jest zupełnie inny od tego, co widzieliście do tej pory w analizie. Sublime Text nie jest zasobem internetowym, ale aplikacją. Z jednej strony z pewnością bardziej przydatne będzie posiadanie go na pulpicie. Szczególnie z powodu możliwych awarii Internetu lub zawieszania się z powodu nadmiaru i możliwej utraty pracy. Z drugiej strony nie jest tak wizualnym narzędziem jak poprzednie. Oprócz tego, że społeczność nie ma możliwości współdzielenia projektów.

Wszystko tutaj jest od podstaw. Musisz utworzyć zakładki, aby umieścić wiersze kodu i zmienić ich nazwy, aby wiedzieć, który z nich jest. Jeśli pierwszy to HTML, drugi CSS ... lub odwrotnie. Nie ma też skrótów do tego, czym będzie całkowicie ręcznie, z wyjątkiem cytatów.

Wnioski

Wszystkie programy są podobne z pewnymi osobistymi akcentami każdej firmy, które prowadzą do ich zalet i wad. Każdy wybierze ten, który najbardziej mu odpowiada, zalecam używanie CodePen lub CSSDeck dla środowiska i sieci społecznościowej, którą obsługuje. Ale jeśli jeszcze podobał Ci się inny, zostaw komentarz i wyjaśnij swoje powody, na pewno się przydadzą.


Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.