Chceli by ste niekedy, aby existovala webová aplikácia alebo rozšírenie, ktoré vám umožní vytvárať a zdieľať prototypy používateľského rozhrania za behu?
My všetci áno! Všetci máme predstavy o tom, ako chceme, aby naše stránky alebo aplikácie vyzerali a vyzerali.
Takže ste prišli s naozaj skvelým dizajnom a neviete si presne spomenúť, ako ste to urobili?
Teraz musíte nájsť spôsob, ako to zdieľať. Ak sa snažíte zdieľať dosť zložitý dizajn, môže to trvať niekoľko dní, dokonca týždňov.
Nie je dôvod čakať na vytvorenie prototypov webových aplikácií. Vytvorte si ich teraz pomocou Dabblet.
Presuňte prvky, upravte ich a uložte ich. Pošlite ho dizajnérovi na posúdenie alebo ho jednoducho skopírujte do prezentácie. Možnosti sú nekonečné.
Čo je Dabblet?
Použitím dablovať, môžete experimentovať s malými útržkami kódu CSS a HTML v reálnom čase.
Pri použití tohto kódu nebudete potrebovať žiadne predpony v kóde CSS. GitHub Gists vám umožňujú ukladať váš obsah, uverejňovať ho na iných stránkach a zdieľať ho s ostatnými.
Je to skvelý spôsob, ako zdieľať úryvky kódu s ostatnými vývojármi a získať spätnú väzbu.
Ako to funguje?
Hneď ako je kód napísaný, je na ňom okamžite viditeľný vizuálny výstup. JavaScript je jediná výnimka, pretože by bolo nepríjemné spúšťať ho pri každom stlačení klávesu a môže dokonca spôsobiť, že prehliadač sa v určitých situáciách stane nepoužiteľným.
Použitím možnosti „Spustiť JS“ na karte JavaScript alebo klávesovou skratkou (Ctrl + Enter alebo Cmd + Enter) sa pri spustení Dabbletu spustí JavaScript. Ponuka možností vám umožňuje zmeniť tento štýl.
Ako vývojár môžete prepínať medzi kódovaním vo všetkých troch týchto jazykoch súčasne alebo zobrazením hotového produktu.
Vlastnosti
Nasledujú funkcie Dabblet, o ktorých by ste mali vedieť:
Rýchla úprava CSS: Vlastnosti CSS môžete rýchlo pridávať, upravovať a odstraňovať. Zmeny sa prejavia na stránke v reálnom čase.
Zvýraznenie syntaxe: CSS a HTML kód sú zvýraznené, čo uľahčuje čítanie a pochopenie. Kód sa bude overovať aj pri písaní. Môžete sa tiež rozhodnúť skryť pole s kódom, ak chcete.
Automatické dokončovanie: Dabblet ponúka automatické dopĺňanie vlastností a hodnôt CSS. To môže byť veľmi užitočné, keď vytvárate alebo upravujete šablóny so štýlmi.
Vopred vytvorené šablóny so štýlmi CSS: Môžete pristupovať k vopred vytvoreným šablónam štýlov CSS z obľúbených webových stránok. Môžete ich použiť na rýchle a jednoduché pridávanie štýlov na váš vlastný web.
Základná podpora: Dabblet podporuje GitHub Gists, čo vám umožňuje jednoducho ukladať a zdieľať úryvky kódu s ostatnými.
Živý náhľad: Výsledky zmien kódu môžete vidieť v reálnom čase bez opätovného načítania stránky. Ak napríklad zmeníte farbu textu, zmena sa prejaví na texte počas písania.
Klávesové skratky: Dabblet má klávesové skratky pre bežné úlohy, ako je pridanie nového pravidla štýlu alebo komentovanie.
Viacnásobné režimy zobrazenia: Dabblet ponúka viacero režimov zobrazenia, čo vám umožňuje vidieť kód a výsledky vedľa seba alebo nad sebou a pod sebou.
Pros
- Rýchle CSS
- Aj keď ste prihlásení, stále môžete ukladať inkognito.
- Inline ukážky hodnôt CSS pre rôzne parametre, ako sú uhly, farby, trvanie atď.
- Všetko je v XHR-ed, takže stránka sa nikdy neobnovuje, ani keď ju uložíte.
- Množstvo klávesových skratiek.
- Celý kód je automaticky naformátovaný (okrem markdown).
- Spoľahlivá dokumentácia od začiatku.
Zápory
- Rozhranie je spočiatku trochu ohromujúce, ale zvyknete si.
- Žiadne funkcie riadenia na úrovni projektu (zatiaľ).
Integrácie Dabblet
Každá platforma sa musí integrovať s inými službami a Dabblet nie je výnimkou. Nasledujú niektoré z integrácií, ktoré Dabblet ponúka:
Google Analytics
Svoj kód sledovania Google Analytics môžete jednoducho pridať na stránky Dabblet. To vám umožní sledovať zobrazenia stránky a ďalšie štatistiky pre váš Dabblet.
ubuntu
Dabblet je možné použiť na vytváranie tém Ubuntu. Môžete vytvoriť nový Dabblet, pridať kód CSS a HTML a zobraziť ukážku témy vo webovom prehliadači.
DigitalOcean
Jedinečná cloudová hostingová spoločnosť poskytuje firmám služby cloud computingu, ktoré im umožňujú efektívnejšie rozširovať svoje operácie.
Čo s tým Dabblet robí?
Teraz môžete vytvárať, spravovať a nasadzovať svoje Dabblets DigitalOcean Spaces.
To vám umožňuje uchovávať všetky úryvky kódu na jednom mieste a uľahčuje ich zdieľanie s ostatnými.
Alternatívy pre Dabblets
Alternatívy sú vždy prítomné a v rovnakom duchu je tu niekoľko, nad ktorými by sa mal človek zamyslieť, pokiaľ ide o Dabblet:
Pastebin.com
Programátori vo všeobecnosti používajú webovú stránku na uloženie zdrojového kódu alebo fragmentov konfiguračných údajov. Do určeného priestoru však môže vložiť ľubovoľný text.
JS Bin
JS Bin je bezplatný testovací nástroj pre JavaScript. Výsledok môže byť zdieľaný prostredníctvom krátkej adresy URL po zadaní JavaScriptu do jedného panela a HTML do druhého. Využite ponuku, ktorá vám umožní vybrať si z niektorých najbežnejšie používaných knižníc JS.
CssDeck
Tento nástroj je skvelý na vytváranie a výmenu testovacích prípadov s ostatnými, ktorí vám môžu pomôcť pri kódovaní. S rôznymi možnosťami môžete dokonca okamžite spolupracovať na projektoch s inými programátormi.
Plunker
Plunker je digitálna platforma, kde môžu weboví vývojári diskutovať, spolupracovať a zdieľať svoje myšlienky.
Môžete napríklad začať slovami „Ahoj, svet!“ programovať v ľubovoľnom jazyku a pridávať úryvky kódu, značky a snímky obrazovky, aby ste vytvorili bohatý vzdelávací zážitok.
Final Word
Na záver, Dabblet je užitočný nástroj pre vývojárov webu, najmä tých, ktorí hľadajú spôsoby, ako rýchlo a jednoducho otestovať ich kód.
S jeho rôznymi funkciami a integráciami je ťažké nájsť uplatnenie pre túto platformu.
Vyskúšajte to ešte dnes!
Nechaj odpoveď