Önskar du någonsin att det fanns en webbapp eller tillägg som låter dig skapa och dela UI-prototyper i farten?
Det gör vi alla! Vi har alla idéer om hur vi vill att våra webbplatser eller appar ska se ut och kännas.
Så du kom på en riktigt bra design och kommer inte riktigt ihåg exakt hur du gjorde det?
Nu måste du hitta ett sätt att dela det. Detta kan ta dagar, till och med veckor, om du försöker dela en ganska komplex design.
Det finns ingen anledning att vänta med att göra dina webbappprototyper. Skapa dem nu med Dabblet.
Dra och släpp element, stil och spara det. Skicka den till en designer för granskning eller kopiera den helt enkelt till en presentation. Möjligheterna är oändliga.
Vad är Dabblet?
Använda dabblet, kan du experimentera med små bitar av CSS- och HTML-kod i realtid.
Du behöver inga prefix i din CSS-kod när du använder detta. GitHub ger dig möjlighet att lagra ditt innehåll, lägga upp det på andra webbplatser och dela det med andra.
Det här är ett bra sätt att dela kodavsnitt med andra utvecklare och få feedback.
Hur fungerar det?
Så fort koden har skrivits är den visuella utdata direkt synlig ovanpå den. JavaScript är det enda undantaget, med tanke på att det skulle vara irriterande att köra det vid varje knapptryckning och kan till och med göra att webbläsaren blir oanvändbar i vissa situationer.
Genom att använda alternativet "Kör JS" på JavaScript-fliken eller kortkommandot (Ctrl + Enter eller Cmd + Enter) körs JavaScript när en Dabblet körs. Alternativmenyn låter dig ändra denna stil.
Som utvecklare kan du växla mellan att koda på alla dessa tre språk samtidigt eller att se den färdiga produkten.
Funktioner
Följande är funktionerna i Dabblet som du bör känna till:
Snabb CSS-redigering: Du kan snabbt lägga till, redigera och ta bort CSS-egenskaper. Ändringar kommer att återspeglas på sidan i realtid.
Syntaxmarkering: CSS- och HTML-kod är syntaxmarkerade, vilket gör det lätt att läsa och förstå. Koden kommer också att valideras när du skriver. Du kan också välja att dölja kodrutan om du föredrar det.
Automatisk komplettering: Dabblet erbjuder automatisk komplettering för CSS-egenskaper och värden. Detta kan vara till stor hjälp när du skapar eller redigerar stilmallar.
Förbyggda CSS-formatmallar: Du kan komma åt förbyggda CSS-stilmallar från populära webbplatser. Dessa kan användas för att snabbt och enkelt lägga till stilar på din egen webbplats.
Huvudstöd: Dabblet stöder GitHub Gists, så att du enkelt kan lagra och dela dina kodavsnitt med andra.
Live förhandsvisning: Du kan se resultatet av dina kodändringar i realtid utan att ladda om sidan. Om du till exempel ändrar färgen på en text kommer du att se förändringen reflekteras på texten medan du skriver.
Tangentbordsgenvägar: Dabblet har kortkommandon för vanliga uppgifter, som att lägga till en ny stilregel eller kommentera.
Flera visningslägen: Dabblet erbjuder flera visningslägen, som låter dig se koden och resultaten sida vid sida eller ovanför och under varandra.
Fördelar
- Snabb CSS
- Även om du är inloggad kan du fortfarande spara inkognito.
- Inline CSS-värdeförhandsgranskare för olika parametrar som vinklar, färger, varaktighet etc.
- Allt är XHR-ed, så sidan uppdateras aldrig, inte ens när du sparar.
- Kortkommandon i massor.
- All kod är automatiskt formaterad (förutom markdown).
- Gedigen dokumentation från början.
Nackdelar
- Gränssnittet är lite överväldigande till en början, men man vänjer sig vid det.
- Inga hanteringsfunktioner på projektnivå (ännu).
Dabblet-integrationer
Alla plattformar måste integreras med andra tjänster, och Dabblet är inget undantag. Följande är några av de integrationer som Dabblet erbjuder:
Google Analytics
Du kan enkelt lägga till din Google Analytics-spårningskod på Dabblet-sidor. Detta gör att du kan spåra sidvisningar och annan statistik för din Dabblet.
ubuntu
Dabblet kan användas för att skapa Ubuntu-teman. Du kan skapa en ny Dabblet, lägga till CSS- och HTML-kod och förhandsgranska temat i en webbläsare.
DigitalOcean
Ett unikt molnvärdföretag tillhandahåller molntjänster till företag, vilket gör att de kan växa sin verksamhet mer effektivt.
Vad gör Dabblet med det?
Du kan nu skapa, hantera och distribuera dina Dabblets på DigitalOcean Spaces.
Detta gör att du kan hålla alla dina kodavsnitt på ett ställe och gör det enkelt att dela dem med andra.
Alternativ för dabblets
Alternativ finns alltid närvarande, och i samma veva, här är några för en att fundera över när det kommer till Dabblet:
Pastebin.com
Programmerare använder vanligtvis webbplatsen för att spara källkod eller fragment av konfigurationsdata. Däremot kan vem som helst lägga in vilken text som helst i det avsedda utrymmet.
JS Bin
JS Bin är ett gratis testverktyg för JavaScript. Resultatet kan delas via en kort URL när Javascript har angetts i en ruta och HTML i den andra. Använd en meny som låter dig välja från några av de mest använda JS-biblioteken.
CssDeck
Det här verktyget är utmärkt för att skapa och utbyta testfall med andra som kan hjälpa dig i dina kodningssträvanden. Med olika alternativ kan du till och med samarbeta i projekt omedelbart med andra programmerare.
Plunker
Plunker är en digital plattform där webbutvecklare kan brainstorma, samarbeta och dela sina tankar.
Du kan till exempel börja med ett "Hej världen!" programmera på valfritt språk och lägg till kodavsnitt, markdowns och skärmdumpar för att skapa en rik inlärningsupplevelse.
Sista ordet
Sammanfattningsvis är Dabblet ett användbart verktyg för webbutvecklare, särskilt de som letar efter sätt att snabbt och enkelt testa deras kod.
Med dess olika funktioner och integrationer är det svårt att inte hitta en användning för denna plattform.
Ge det ett försök idag!
Kommentera uppropet