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

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.

Utwórz konto

Utwórz konto. To darmowe i bardzo proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się teraz


×