Toivotko koskaan, että olisi olemassa verkkosovellus tai laajennus, jonka avulla voit luoda ja jakaa käyttöliittymäprototyyppejä lennossa?
Me kaikki teemme! Meillä kaikilla on ajatuksia siitä, miltä haluamme sivustojemme tai sovelluksiemme näyttävän ja tuntuvan.
Joten, keksit todella upean suunnittelun, etkä muista tarkasti, kuinka teit sen?
Nyt sinun on löydettävä tapa jakaa se. Tämä voi kestää päiviä, jopa viikkoja, jos yrität jakaa melko monimutkaisen suunnittelun.
Ei ole mitään syytä odottaa verkkosovelluksesi prototyyppien tekemistä. Luo ne nyt Dabbletilla.
Vedä ja pudota elementtejä, muotoile ja tallenna se. Lähetä se suunnittelijalle tarkistettavaksi tai kopioi se esitykseen. Mahdollisuudet ovat rajattomat.
Mikä on Dabblet?
Käyttäminen ripaus, voit kokeilla pieniä CSS- ja HTML-koodinpätkiä reaaliajassa.
Et tarvitse etuliitteitä CSS-koodiisi, kun käytät tätä. GitHub-sisältöjen avulla voit tallentaa sisältösi, julkaista sen muille sivustoille ja jakaa sen muiden kanssa.
Tämä on loistava tapa jakaa koodinpätkiä muiden kehittäjien kanssa ja saada palautetta.
Miten se toimii?
Heti kun koodi on kirjoitettu, visuaalinen tulos näkyy välittömästi sen päällä. JavaScript on ainoa poikkeus, koska olisi ärsyttävää käyttää sitä jokaisella näppäinpainalluksella ja saattaa jopa aiheuttaa selaimen käyttökelvottomuuden tietyissä tilanteissa.
Käyttämällä "Suorita JS" -vaihtoehtoa JavaScript-välilehdellä tai pikanäppäimellä (Ctrl + Enter tai Cmd + Enter) suorittaa JavaScriptin, kun Dabblet suoritetaan. Asetukset-valikon avulla voit muuttaa tätä tyyliä.
Kehittäjänä voit vaihtaa koodauksen välillä kaikilla kolmella kielellä samanaikaisesti tai nähdä valmiin tuotteen.
Ominaisuudet
Seuraavat ovat Dabbletin ominaisuudet, jotka sinun pitäisi tietää:
Nopea CSS-muokkaus: Voit nopeasti lisätä, muokata ja poistaa CSS-ominaisuuksia. Muutokset näkyvät sivulla reaaliajassa.
Syntaksin korostus: CSS- ja HTML-koodin syntaksi on korostettu, joten se on helppo lukea ja ymmärtää. Koodi vahvistetaan myös kirjoittaessasi. Voit halutessasi myös piilottaa koodilaatikon.
Automaattinen täydennys: Dabblet tarjoaa automaattisen täydennyksen CSS-ominaisuuksille ja arvoille. Tästä voi olla paljon apua, kun luot tai muokkaat tyylitaulukoita.
Valmiiksi rakennetut CSS-tyylitaulukot: Voit käyttää valmiita CSS-tyylitaulukoita suosituilta verkkosivustoilta. Näiden avulla voit nopeasti ja helposti lisätä tyylejä omalle verkkosivustollesi.
Päätuki: Dabblet tukee GitHub Gists -palvelua, jonka avulla voit tallentaa ja jakaa koodinpätkäsi muiden kanssa helposti.
Live-esikatselu: Voit nähdä koodimuutosten tulokset reaaliajassa lataamatta sivua uudelleen. Jos esimerkiksi muutat tekstin väriä, näet muutoksen heijastuvan tekstiin kirjoittaessasi.
Pikanäppäimet: Dabbletissa on pikanäppäimet yleisiin tehtäviin, kuten uuden tyylisäännön lisäämiseen tai kommentointiin.
Useita katselutiloja: Dabblet tarjoaa useita katselutiloja, joiden avulla voit nähdä koodin ja tulokset vierekkäin tai ylä- ja alapuolella.
Plussat
- Nopea CSS
- Vaikka olisit kirjautunut sisään, voit silti tallentaa incognito-tilassa.
- Sisäiset CSS-arvojen esikatseluohjelmat eri parametreille, kuten kulmille, väreille, kestolle jne.
- Kaikki on XHR-edettu, joten sivu ei koskaan päivity, ei edes tallennettaessa.
- Runsaasti pikanäppäimiä.
- Kaikki koodi on automaattisesti muotoiltu (paitsi merkintä).
- Vankka dokumentaatio alusta alkaen.
MIINUKSET
- Käyttöliittymä on aluksi hieman ylivoimainen, mutta siihen tottuu.
- Ei projektitason hallintaominaisuuksia (vielä).
Dabblet-integraatiot
Minkä tahansa alustan on integroitava muihin palveluihin, eikä Dabblet ole poikkeus. Seuraavassa on joitain integraatioita, joita Dabblet tarjoaa:
Google Analytics
Voit helposti lisätä Google Analytics -seurantakoodisi Dabblet-sivuille. Tämän avulla voit seurata sivujen katselukertoja ja muita Dabblet-tilastoja.
Ubuntu
Dabbletilla voidaan luoda Ubuntu-teemoja. Voit luoda uuden Dabbletin, lisätä CSS- ja HTML-koodin ja esikatsella teemaa verkkoselaimessa.
DigitalOcean
Ainutlaatuinen pilvipalveluyritys tarjoaa pilvipalveluita yrityksille, joiden avulla ne voivat kasvattaa toimintaansa tehokkaammin.
Mitä Dabblet tekee sillä?
Voit nyt luoda, hallita ja ottaa käyttöön Dabblettejasi DigitalOcean Spaces.
Näin voit säilyttää kaikki koodinpätkäsi yhdessä paikassa ja helpottaa niiden jakamista muiden kanssa.
Vaihtoehtoja Dabbletille
Vaihtoehtoja on aina olemassa, ja samaan tapaan tässä on muutama pohdittavaksi Dabbletin suhteen:
Pastebin.com
Ohjelmoijat käyttävät yleensä verkkosivustoa lähdekoodin tai määritystietojen fragmenttien tallentamiseen. Kuka tahansa voi kuitenkin laittaa mitä tahansa tekstiä sille varattuun tilaan.
JS Bin
JS Bin on ilmainen JavaScriptin testaustyökalu. Tulos voidaan jakaa lyhyen URL-osoitteen kautta, kun Javascript on syötetty yhteen ruutuun ja HTML toiseen. Käytä valikkoa, jonka avulla voit valita joistakin yleisimmin käytetyistä JS-kirjastoista.
CssDeck
Tämä työkalu sopii erinomaisesti testitapausten luomiseen ja vaihtamiseen muiden kanssa, jotka voivat auttaa sinua koodauspyrkimyksissäsi. Eri vaihtoehdoilla voit jopa tehdä yhteistyötä projekteissa välittömästi muiden ohjelmoijien kanssa.
Plunker
Plunker on digitaalinen alusta, jossa verkkokehittäjät voivat ideoida, tehdä yhteistyötä ja jakaa ajatuksiaan.
Voit esimerkiksi aloittaa sanalla "Hei, maailma!" ohjelmia millä tahansa kielellä ja lisää koodinpätkiä, merkintöjä ja kuvakaappauksia luodaksesi monipuolisen oppimiskokemuksen.
Viimeinen sana
Lopuksi totean, että Dabblet on hyödyllinen työkalu verkkokehittäjille, erityisesti niille, jotka etsivät tapoja nopeasti ja helposti testaa heidän koodiaan.
Erilaisten ominaisuuksiensa ja integraatioidensa ansiosta tälle alustalle on vaikea löytää käyttöä.
Kokeile jo tänään!
Jätä vastaus