Vijesti o Tehnologiji, Recenzije i Savjeti!

Stranice za demonstraciju vašeg koda

Napomena: Sljedeći članak će vam pomoći: Stranice za demonstraciju vašeg koda

Ove vam stranice omogućuju podijelite i pokažite svoj kod. Svi imaju preglede uživo kako bi drugi ljudi mogli vidjeti vaš kod na djelu. Ponekad se nazivaju “igrališta koda” ili “pješčanici”. Više od jednostavno mjesta za demonstraciju vašeg izvornog koda, mnoga od njih također su izvrsni alati za suradnju kodiranja i stvarni rad kodiranja. Na primjer, ako vam je potrebna pomoć u otklanjanju pogrešaka u izvornom kodu, upotrijebite jedno od ovih mjesta da biste podijelili svoj problematični kod, a zatim dajte vezu svojim gledateljima. To im daje prikladan način da mogu pregledati vaš izvorni kod i ponuditi rješenja.

CodePen

Na CodePen-u možete demonstrirati svoj kod u tzv Olovke.

Olovka se može sastojati od HTML-a, CSS-a i JS-a. CodePen ima mnogo značajki koje olakšavaju pokazivanje vašeg koda. Na primjer, podržava Sass i Less sintaksu i opciju “Quick-add” popularnih JS biblioteka kao što su jQuery i Angular.

Za inspiraciju potražite popularne olovke na web mjestu.

Liveweave je izvrstan uređivač izvornog koda na mreži. Također je, prema stranici, ultimativno igralište za web dizajnere i programere te odličan alat za testiranje, vježbanje i dijeljenje vaših kreacija. Ono što mi se sviđa kod Liveweavea je koliko je jednostavno dodati ovisnost treće strane u vaš demo.

Možete dodati Bootstrap, jQuery ili druge popularne pakete za web razvoj u dva klika. Liveweave

Ova platforma za demonstraciju koda malo je više okrenuta CSS-u, ali ima mogućnosti HTML-a i JavaScripta. Dobar dodatak je to što koristi -prefiks-free JS biblioteka prema zadanim postavkama, što znači da ne morate brinuti o prefiksu dobavljača za vaša CSS svojstva.

mrvicu

JS Fiddle ima gomilu značajki za demonstracije vašeg JavaScript koda. Ima više verzija razvojnih biblioteka kao što su jQuery, MooTools i React. Ima implementaciju alata za analizu koda JSHint ugrađenog u svoje sučelje.

JS Fiddle vam čak omogućuje simulaciju Ajax zahtjeva koristeći njegov Echo API. JS Gusle

Vrhunac ove aplikacije za demonstraciju koda je njezina sposobnost skaliranja vašeg pregleda uživo na dimenzije mobilnih uređaja i druge uobičajene veličine zaslona. Ova vam značajka može pomoći u otklanjanju pogrešaka vaših responzivnih prijelomnih točaka.

Povezano: Kako testirati responzivne dizajne Stranice za demonstraciju vašeg koda 1” width=”640″ height=”445″>

Plunker je online zajednica za stvaranje, suradnju i dijeljenje vaših ideja za web razvoj. Njegov uređivač koda bogat je značajkama. Uređivač koda ima: prijenos uživo tako da ljudi mogu gledati kako kodirate u stvarnom vremenu, račvanje koda, razvojne hrpe/predloške koje su pridonijeli korisnici, ugrađeno sučelje za crtanje koda i još mnogo toga. Pogledajte najgledanije demo snimke na Plunkeru.

Plunker

CSSDeck ima čisto korisničko sučelje. Ako tražite jednostavan alat za prikazivanje svog izvornog koda, ovo je dobar kandidat. Ljudi koji pogledaju demo koda mogu ostaviti komentare na njega, ali da bi to učinili, moraju registrirati račun ili se prijaviti sa svojim GitHub računom.

CSSDeck

code.reloado.com

Ovo je još jedan jednostavan alat za pokazivanje vašeg koda. Na raspolaganju vam je mnogo JS biblioteka. jQuery, Bootstrap, Prototype, Backbone, TwitterLib, Zepto i još mnogo toga.

code.reloado.com

Ovaj jednostavan alat za dijeljenje koda omogućuje vam demonstraciju koda na strani poslužitelja (PHP, Perl i tako dalje). Također rukuje softverskim programskim jezicima poput C++. Kada pokrenete svoj kod, Ideone će vam (i vašim recenzentima koda) pokazati izlaz vašeg koda.

Također će prikazati greške kompilacije koje nađe. Ideone

kodna ploča

codepad je još jedna opcija za demonstraciju vašeg koda na strani poslužitelja. Podržava programske jezike kao što su PHP, Ruby, C, C++, Python i druge.

kodna ploča

JS Bin alat je pun značajki za demonstracije vašeg izvornog koda. Ima čak i konzolu (sučelje naredbenog retka) za otklanjanje pogrešaka i provjeru koda. Konzola radi slično kao ona u Chrome Developer Tools.

Oh, a također JS Bin ima codecasting. JS Bin

Tinkerbin

Tinkerbin je jednostavno igralište koda koje ima sve značajke koje biste očekivali. Tinkerbin podržava CoffeeScript osim JavaScripta, Sass/SCSS/Less osim CSS-a i HAML osim HTML-a.

Tinkerbin

jqverzija

Ovo je izvrstan poligon za testiranje jQuery koda. jqversion ima više verzija jQueryja — čak ima i verzije kandidata za izdanje. Povezano: 11 stvari koje možda niste znali o jQueryju jqverzija

SQL fiddle

SQL Fiddle služi za demonstraciju vaših SQL izjava.

Može izvršiti naredbe MySQL, MS SQL, PostgreSQL, Oracle Database i SQLite. SQL fiddle

Zašto ove stranice?

Postoji mnogo stranica koje vam omogućuju da pokažete svoj izvorni kod. Nije moguće — pa čak ni korisno za vas — ako bih ih sve pokrio.

Kako bih ovaj popis učinio lakšim za rukovanje, stvorio sam razuman skup zahtjeva koje je stranica morala ispuniti. Ovi zahtjevi čine stranicu prikladnom za programere koji žele podijeliti svoje demonstracije koda. Stranica je morala zadovoljiti sljedeće kriterije:

  1. Ima pregled uživo
  2. Korisnik može spasiti njihov rad i moći podijeliti jedinstvenu poveznicu na njega
  3. Nije potrebna prijava za pristup dvjema gornjim značajkama. Stvaranje računa dodaje dodatni korak procesu dijeljenja koda. Također, ovaj kriterij koderima koji trebaju ili preferiraju anonimnost daje mogućnost neotkrivanja osobnih podataka.

Ovdje su druga sjajna mjesta koja možete pogledati. Ne zadovoljavaju gore navedeni kriterij “nije potrebna prijava”, ali su svejedno odlična web mjesta za pogledati:

  • Runnable — na ovoj stranici možete demonstrirati ne samo svoj front-end kod, već i svoj kod na strani poslužitelja (PHP, .NET, MySQL, Rails i mnoštvo drugih)
  • Compilr — lijep mrežni uređivač koda s mogućnostima demoiranja.
  • Python Fiddle — platforma za demonstraciju Python koda.

Gdje demonstrirate svoj kod?

Ako već koristite jednu ili više ovih stranica, molimo podijelite svoje savjete i priče na Twitter.

Povezani sadržaj

Stranice za demonstraciju vašeg koda 2Jakov Gube osnivač je Six Revisions. On je front-end programer. Povežite se s njim Twitter.

Table of Contents