Wojtek Wernicki

Web Development & Technologia

Jak udostępniać swój kod?

Dzisiaj na warsztat biorę serwisy pozwalające deweloperom udostępnić plik źródłowy lub całą stronę internetową, z łatwym dostępem do kodu źródłowego.

Jeżeli znacie inne, podobne strony, o których nie wspomniałem poniżej, dajcie o nich znać w komentarzu 😊 WAŻNA UWAGA! – ta strona jest ciężka i toporna, bo ładuje kod z 4 różnych źródeł. Dla lepszego komfortu przeczytaj ten wpis na komputerze z wykorzystaniem Wi-Fi.

GitHub Gist

Gist jest usługą pozwalającą na udostępnienie jednorazowo tylko jednego pliku dowolnego typu. Po wpisaniu nazwy pliku edytor rozpozna rozszerzenie i ustawi odpowiednie tabulacje czy kolorowanie składni. Gotowego Gista możemy udostępnić publicznie lub wybrać tryb prywatny, dzięki czemu dostęp do kodu będą mieć jedynie osoby posiadające URL strony.

Gist — wygląd strony, kod pliku

Gist

 

Dodatkowo Gist, tak jak i inne poniższe serwisy, pozwala na umieszczenie kodu na swojej stronie za pomocą JavaScriptu:

Pastebin

Pastebin ma praktycznie te same funkcjonalności co Gist. Jeden „paste” (wklejka) pozwala na wrzucenie kodu tylko jednego pliku. Zaletą jest możliwość ustawienia czasu autodestrukcji naszego kodu, mamy kilka interwałów czasowych do wyboru — od 10 minut do jednego miesiąca.

Pastebin — wygląd strony, kod pliku

Pastebin

Ogółem Pastebin ustępuje jednak Gistowi pod względem komfortu użytkowania. W darmowej wersji konta umieszczono reklamy, maksymalny rozmiar pliku to 500 kB, a dziennie możemy wrzucić ich jedynie 20.

JSFiddle

Przejdźmy do pełnowymiarowych edytorów online. JSFiddle daje nam możliwość edycję HTML, CSS i JavaScript. Niewygodne jest rozwiązanie dodawania zewnętrznych bibliotek CSS, musimy wklejać adres do każdej z nich ręcznie w pasku bocznym po lewej stronie.

JSFiddle — wygląd i kod strony

JSFiddle

CSS możemy zastąpić w opcjach SASS-em (konkretnie SCSS) oraz dołożyć do tego normalize.css. W ustawieniach JS-a czeka na nas wiele więcej możliwości wyboru — samych tylko języków mamy cztery, dodatkowo mamy do dyspozycji listę z najpopularniejszymi bibliotekami, m.in. jQuery, Angular i React.

JSBin

JSBin na pierwszy rzut oka wygląda ubogo, jednak są to tylko pozory. Jest to pełnoprawny edytor, który niczym nie ustępuje nawet aplikacjom desktopowym.

JSBin — wygląd i kod strony

JSBin

Podobnie jak w JSFiddle mamy zakładki dla HTML-a, CSS-a i JS-a, tutaj jednak podobieństwa się kończą. JSBin oferuje wbudowaną konsolę JavaScriptu, co jest pomocne w trakcie debugowania. Dodatkowo twórcy dołożyli od siebie do każdej z zakładek kompilatory. Dzięki temu do HTML-a można przetworzyć Markdown i Jade, do arkuszy styli Less, Myth, Stylus lub S*SS, a do skryptów m.in. ES6/Babel, React, TypeScript i CoffeeScript.

Warto też poświęcić uwagę ustawieniom konta po rejestracji. Można zarejestrować się przez GitHuba, co polecam ze względu na integrację z Gistem. Jedyną wadą dla darmowego użytkownika jest brak możliwości embedowania edytora na stronie.

CodePen

CodePen to jedyny mocny konkurent dla JSBina pod względem funkcjonalności. Podobnie jak poprzednik, ma podobne możliwości kompilacji styli i skryptów, wygrywa natomiast ilością bibliotek, które można dodać ad hoc z listy w ustawieniach danej strony – nie trzeba ich dodawać ręcznie do sekcji „.

CodePen — wygląd i kod strony

CodePen

W przeciwieństwie do JSBina, CodePen umożliwia embedowanie kodu strony. Warto też zaglądać na stronę główną serwisu, gdzie można zobaczyć wyróżnione projekty, które powstały właśnie dzięki temu narzędziu.

See the Pen CodePen – przykład do bloga by Wojtek Wernicki (@WojtekWernicki) on CodePen.

Jeżeli spodobał Ci się powyższy wpis, chcesz podzielić się z innymi swoimi przemyśleniami lub masz jakąś uwagę – udostępnij wpis i zostaw komentarz poniżej. Możesz też przeczytać jeden z polecanych wpisów. Dzięki, że tutaj jesteś ❤️


Źródła: tło wpisu

6 Comments

  1. Przeczytałem pierwszy akapit i się przestraszyłem. Mam komputer podłączony do Internetu kabelkiem, bez WiFi. Kabelek leci w świat z prędkością 360Mb/s, więc może jednak da radę… To jak, mogę czytać, czy mam najpierw lecieć do sklepu po antenkę WiFi?:]

  2. Andrzej Prusinowski

    26 kwietnia 2017 at 15:35

    Krok pierwszy: napisać na tyle dobry kod, żeby nie musieć się wstydzić, jak ktoś go przeczyta 😉

    • … albo porzucić wstyd i po prostu próbować licząc na rzeczową dyskusję z innymi uczestnikami forum / bloga / lub czasopisma / whatever

  3. Maciej Jaworski

    26 kwietnia 2017 at 21:19

    Wpis ciekawy 😉 jednak angular mimo wszystko to framework. 😛

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

© 2018 Wojtek Wernicki

Theme by Anders NorenUp ↑

%d bloggers like this: