Ville du nogensinde ønske, at der var en webapp eller -udvidelse, der lader dig oprette og dele brugergrænsefladeprototyper på farten?
Det gør vi alle! Vi har alle idéer om, hvordan vi ønsker, at vores websteder eller apps skal se ud og føles.
Så du fandt på et rigtig godt design og kan ikke helt huske præcis, hvordan du gjorde det?
Nu skal du finde en måde at dele det på. Dette kan tage dage, endda uger, hvis du prøver at dele et ret komplekst design.
Der er ingen grund til at vente med at lave dine webapp-prototyper. Opret dem nu med Dabblet.
Træk og slip elementer, stil og gem det. Send det til en designer til gennemgang eller kopier det til en præsentation. Mulighederne er uendelige.
Hvad er Dabblet?
Ved brug af Dablet, kan du eksperimentere med små uddrag af CSS- og HTML-kode i realtid.
Du skal ikke bruge nogen præfikser i din CSS-kode, når du bruger denne. GitHub-gists giver dig mulighed for at gemme dit indhold, poste det på andre websteder og dele det med andre.
Dette er en fantastisk måde at dele kodestykker med andre udviklere og få feedback.
Hvordan fungerer det?
Så snart koden er indtastet, er det visuelle output øjeblikkeligt synligt oven på det. JavaScript er den eneste undtagelse, i betragtning af at det ville være irriterende at køre det ved hvert tastetryk og endda kan få browseren til at blive ubrugelig i visse situationer.
Brug af "Kør JS"-indstillingen på JavaScript-fanen eller tastaturgenvejen (Ctrl + Enter eller Cmd + Enter) vil køre JavaScript, når en Dabblet kører. Indstillingsmenuen giver dig mulighed for at ændre denne stil.
Som udvikler kan du skifte mellem at kode på alle disse tre sprog samtidigt eller at se det færdige produkt.
Funktionalitet
Følgende er funktionerne i Dabblet, som du bør kende til:
Hurtig CSS-redigering: Du kan hurtigt tilføje, redigere og fjerne CSS-egenskaber. Ændringer vil blive afspejlet på siden i realtid.
Syntaksfremhævning: CSS og HTML-kode er syntaks fremhævet, hvilket gør det nemt at læse og forstå. Koden vil også blive valideret, mens du skriver. Du kan også vælge at skjule kodeboksen, hvis du foretrækker det.
Autofuldførelse: Dabblet tilbyder autofuldførelse for CSS-egenskaber og værdier. Dette kan være meget nyttigt, når du opretter eller redigerer stylesheets.
Forudbyggede CSS-stylesheets: Du kan få adgang til forudbyggede CSS-stylesheets fra populære websteder. Disse kan bruges til hurtigt og nemt at tilføje styles til din egen hjemmeside.
Hovedstøtte: Dabblet understøtter GitHub Gists, så du nemt kan gemme og dele dine kodestykker med andre.
Live Preview: Du kan se resultaterne af dine kodeændringer i realtid uden at genindlæse siden. Hvis du for eksempel ændrer farven på en tekst, vil du se ændringen afspejlet på teksten, mens du skriver.
Tastaturgenveje: Dabblet har tastaturgenveje til almindelige opgaver, såsom tilføjelse af en ny stilregel eller kommentarer.
Flere visningstilstande: Dabblet tilbyder flere visningstilstande, som giver dig mulighed for at se koden og resultaterne side om side eller over og under hinanden.
FORDELE
- Hurtig CSS
- Selvom du er logget ind, kan du stadig gemme inkognito.
- Inline CSS værdi forhåndsvisninger for forskellige parametre som vinkler, farver, varighed osv.
- Alt er XHR-ed, så siden opdateres aldrig, heller ikke når du gemmer.
- Tastaturgenveje i massevis.
- Al koden er automatisk formateret (undtagen markdown).
- Solid dokumentation fra start.
ULEMPER
- Interfacet er lidt overvældende i starten, men man vænner sig til det.
- Ingen styringsfunktioner på projektniveau (endnu).
Dabblet integrationer
Enhver platform skal integreres med andre tjenester, og Dabblet er ingen undtagelse. Følgende er nogle af de integrationer, som Dabblet tilbyder:
Google Analytics
Du kan nemt tilføje din Google Analytics-sporingskode til Dabblet-sider. Dette giver dig mulighed for at spore sidevisninger og anden statistik for din Dabblet.
Ubuntu
Dabblet kan bruges til at skabe Ubuntu-temaer. Du kan oprette en ny Dabblet, tilføje CSS- og HTML-kode og forhåndsvise temaet i en webbrowser.
DigitalOcean
Et enestående cloud-hostingfirma leverer cloud computing-tjenester til virksomheder, hvilket giver dem mulighed for at vokse deres aktiviteter mere effektivt.
Hvad gør Dabblet med det?
Du kan nu oprette, administrere og implementere dine Dabblets på DigitalOcean Spaces.
Dette giver dig mulighed for at opbevare alle dine kodestykker ét sted og gør det nemt at dele dem med andre.
Alternativer til dabblets
Alternativer er altid til stede, og på samme måde er her et par stykker, som man kan overveje, når det kommer til Dabblet:
Pastebin.com
Programmører bruger generelt webstedet til at gemme kildekode eller konfigurationsdatafragmenter. Enhver kan dog sætte en hvilken som helst tekst i det dertil beregnede rum.
JS Bin
JS Bin er et gratis testværktøj til JavaScript. Resultatet kan deles via en kort URL, når Javascript er blevet indtastet i den ene rude og HTML i den anden. Gør brug af en menu, der lader dig vælge fra nogle af de mest brugte JS-biblioteker.
CssDeck
Dette værktøj er fantastisk til at oprette og udveksle testcases med andre, der kan hjælpe dig i dine kodningsbestræbelser. Med forskellige muligheder kan du endda samarbejde om projekter med det samme med andre programmører.
Plunker
Plunker er en digital platform, hvor webudviklere kan brainstorme, samarbejde og dele deres tanker.
For eksempel kan du starte med et "Hej, verden!" programmer på ethvert sprog og tilføj kodestykker, markdowns og skærmbilleder for at skabe en rig læringsoplevelse.
Final Word
Som konklusion er Dabblet et nyttigt værktøj for webudviklere, især dem, der leder efter måder at hurtigt og nemt teste deres kode.
Med dens forskellige funktioner og integrationer er det svært ikke at finde en brug for denne platform.
Prøv det i dag!
Giv en kommentar