Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Mativve

Jak korzystać z codepen i jsfiddle

Promowane odpowiedzi

Mativve    1,260

Witajcie!

Z racji tego, że coraz częściej widzę wśród nowych użytkowników dłuuuuuuugie linie kodu z ich stroną bez możliwości podglądu online postanowiłem zrobić ten poradnik :P Najlepiej zrobić to na naszym hostingu ale jeśli nie posiadamy go, można wykorzystać kilka ciekawych narzędzi z internetu. Postaram się wytłumaczyć mniej więcej zasadę działania tych narzędzi.

 

1. jsfiddle.net

Spoiler

 

Jest to narzędzie służące do prezentowania (najlepiej) małego skrawka kodu z którym mamy problem.

Wchodząc na stronę naszym oczom ukazują się 4, odpowiednio opisane, okienka.

 

W pierwszym lewym górnym kopiujemy sam kod HTML bez znaczników body, head oraz script, obok z prawej strony mamy pole do CSSa.

Pod polem do HTMLa mamy pole do JSa. Ostatnie pole to pole podglądu. 

 

Aby rozpocząć podgląd musisz w menu na górze kliknąć Run. Jeśli chcesz zapisać projekt musisz kliknąć Save (Posiadając konto, zapisze się ono w proflu). Po zapisie pojawi się link z wygenerowanym kodem który potem wklejasz do tematu z problemem.

 

Dodatkowe funkcje:

  • W polu HTML, CSS i JS możemy, poprzez kliknięcie w nazwę z zębatką, wybrać ustawienia np: kodowanie, zmianę CSS na SCSS, wersja JSa
  • Dodawać zewnętrzne linki JS w polu External Resources z lewej strony
  • Współpraca z innymi przez wciśnięcie Collaborate (Osobiście testowałem i działa to, według mnie, słabo ;) )
  • Tidy pozwala na uporządkowanie naszego kodu

 

 

2. codepen.io/

Spoiler

 

W przeciwieństwie do jsfiddle, codepen posiada możliwość podglądu kodów innych użytkowników, którzy czasem potrafią stworzyć zwariowane rzeczy np: w samym css'ie :P 

Tutaj możemy budować prawie całą witrynę. Bez posiadania konta, możemy tworzyć anonimowe kody dlatego najlepiej założyć sobie darmowe konto.

 

/* Wszystkie czynności poniżej opisane są tworzone na zalogowanej wersji */

Po wejściu na stronę mamy ostatnie tzw: "Pens'y" społeczności. Aby dodać własny, musimy kliknąć Create w menu po prawej stronie i wybrać New Pen.

 

Pojawi nam się układ 3 okienek (na górze i dużego na dole), możemy zmienić ten układ klikając Change View - posiadając konto, zapiszę się ono jako domyślne.

 

Analogicznie jak w jsfiddle pola są odpowiednio opisane, każde z nich posiada ustawienia lecz nieco bardziej rozbudowane niż jsfiddle.

 

• W ustawieniach HTML'a możemy wybrać sobie preprocesor czy też zawartość znacznika head (Dlatego nie dodajemy go w polu do HTML'a).

 

• W ustawieniach CSS'a również możemy wybrać sobie preprocesor, bazę CSSa (normalize.css lub reset.css). Możemy dodać również zewnętrzne arkusze stylów lub skorzystać z Quick-add w którym m.in. znajdziemy bootstrapa 3 i 4, foundation czy też animation.css.

 

• W ustawieniach JS'a, tak jak w pozostałych, możemy wybrać preprocesor, dodać zewnętrzy skrypt lub skorzystać z opcji Quick-add w którym znajdują się m.in. Angular, jQuery, jQuery UI, Three.js, Vue czy też React.

 

Codepen ma o tyle wygodną funkcję, że po wprowadzonych zmianach nie trzeba nic wciskać. Wystarczy poczekać kilka sekund i podgląd zaraz się uaktualni.

 

W Ustawieniach lub klikając pisak w nazwie Untitled możemy zmienić nazwę naszego projektu, dzięki czemu będziemy mogli rozróżnić go w gąszczu innych projektów.

 

Po dokonanych zmianach należy zapisać projekt klikając Save po czym skopiować link do tematu z problemem.

 

Poradnik stworzyłem dla początkujących użytkowników zaczynających przygodę z w/w stronami. Myślę, że jasno opisałem korzystanie z nich tak aby każdy, kto ma problem z własnym kodem, mógł go Nam udostępnić a tym samym szybciej uzyskać pomoc.

 

Miłego dnia/popołudnia/wieczorka

Mativve

 

 

/* Zakaz kopiowania na inne strony bez zgody autora posta */

  • Lubię to! 2

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.


×