no.hideout-lastation.com
Paradis For Designere Og Utviklere


Kopier koder fra nettsteder enkelt med SnappySnippet

Som webutvikler kan vi noen ganger finne noen inspirerende elementer på et nettsted som gjør at du lurer på hvordan de bygde den tingen. Da ville du tenke på å få en kopi av den koden. Chrome Devtools samt Firebug of Firefox har faktisk sendt med funksjonen som gjør det enkelt for oss å kopiere HTML og CSS fra et nettsted.

Disse verktøyene fungerer imidlertid bare for å kopiere kun HTML eller CSS; Du kan ikke bruke disse verktøyene til å kopiere CSS relatert til HTML-elementet du valgte. For eksempel, la oss si at du velger et HTML-element som inneholder et par barnelementer, som følger.

Ved å sende inn er du enig i vår term og betingelse

Hvert av elementet deri har sine egne spesifikke stilregler som ligger i stilarket. Noen HTML-elementer kan ha arvet et par stilregler som ville gjøre kopiering av både HTML og CSS sammen vanskelig . Her er hvor du vil elske et verktøy som SnappySnippets.

Starter

SnappySnippet er en Chrome-utvidelse (få den her), som en gang installert, gir deg en ny kategori med navnet SnappySnippet i Google Chrome DevTools. Det er her vi skal operere SnappySnippet.

For å teste det, har vi utarbeidet en nettside som inneholder et par HTML-elementer som danner et veldig fint, enkelt webloggingsskjema. Hver av disse HTML-elementene arver CSS-koder. Hvis du vil kopiere alle disse kodene på en tradisjonell måte med vanlig funksjonalitet fra nettleseren DevTools, skal du ta litt arbeid.

Med SnappySnippet er alt imidlertid mye enklere.

Først velg hvilket element du vil kopiere, åpne deretter SnappySnippet-fanen og klikk på Opprett en utdrag fra inspisert element- knapp.

Som du ser på skjermbildet nedenfor, er elementet vi valgte kopiert inkuderende barnelementene og plassert i HTML- panelet på venstre side. Alle stilregler som former disse HTML-elementene blir også kopiert og plassert i CSS-panelet.

Innstillingene

SnappySnippet gjør det mulig for oss å angi kodeutgangen. Under de to rutene som brukes til å plassere HTML og CSS, finner du panelet Innstillinger . Du kan angi flere ting, for eksempel å fjerne CSS-egenskapen med -webkit- prefiks fra utdata, legge inn prefiks for ID-en gitt til HTML-elementene og så videre.

Kodedeling

Webutviklere kan være kjent med en kodedelingsplattform som Codepen . Disse nettstedene tillater webutviklere å dele deler av arbeidskodeutdrag . Det er som et sosialt nettverksside, men i stedet for å dele statuser og selfies deler vi koder. Med SnappySnippet kan du sende kodene du har kopiert til Codepen, JSFiddle og JSBin.

For å sende koden, pass på at du har logget på den respektive nettsiden der du skal sende kodene dine. Dette er også for å sikre at kodene umiddelbart blir lagret i din konto. Deretter klikker du bare på en av disse tre deleknappene.

Kodene du kopierer, kommer tilbake akkurat som det du ser på nettstedet.

Endelig tanke

SnappySnippet er et veldig praktisk verktøy for kopieringskoder, men husk å ikke bruke dette som et middel til å plagiere andre utviklerens koder . Uansett hvilken kopiering du gjør, sikte på et læringsformål, med håp om å lære noe nytt av de brukte teknikkene. Blatant kopiering er ikke kondensert, om den er beskyttet av opphavsrett eller ikke. Bruk dette verktøyet godt.

Legg Dra og slipp til nettsiden enkelt med Dragula

Legg Dra og slipp til nettsiden enkelt med Dragula

Leter du etter et gratis bibliotek for å håndtere dra og slipp-funksjoner ? Da er Dragula den eneste ressursen du trenger.Dette gratis skriptet lar deg legge til dra og slipp-funksjoner for ethvert element på siden din . Dette inkluderer støtte for React & AngularJS-rammene, sammen med vanilla JavaScript.Dra

(Tekniske og design tips)

Lokal markedsføringsguide for globale merker

Lokal markedsføringsguide for globale merker

Varemerker er i økende grad fokusert på å generere flere potensielle kunder lokalt, og en intelligent planlagt lokal markedsføringsstrategi er alt du trenger for å opprettholde dette enormt konkurransedyktige lokalområdet.I enklere termer refererer lokal markedsføring generelt til markedsførings teknikker som en bedrift i enhver bransje bruker til å markedsføre seg selv til området det opererer i. Lokal mar

(Tekniske og design tips)