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.

 Sende inn 
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.

20 nettsteder med uortodokse geometrielementer for din inspirasjon

Selv om argumentet om at de fleste Internett-brukere i dag alltid er "på farten", og som er mer opptatt av å få ting gjort på den raskeste og enkleste måten, er ganske sannsynlig, vil "kreative" neppe være enige om ideen om å forandre unikt og estetikk for forutsigbarhet.Derfor tar moderne designere en 45 graders sving når det gjelder flat design, og improviserer med unike vinkler og former . I sted

(Tekniske og design tips)

Lag HTML5-animasjoner enkelt med HTML5Maker

Vil du tegne lesere i, med animert og interaktivt innhold ? Mens dette pleide å være domenet til Flash - som resulterer i mye ladetid og potensielle kompatibilitetsproblemer - har HTML5 raskt blitt den dominerende metoden for å skape animert og interaktivt webinnhold.Selvfølgelig har ikke alle tid eller ferdigheter til å kode HTML5-innhold; Hvis du er en av disse personene, er kanskje HTML5Maker noe du bør prøve.HTML5M

(Tekniske og design tips)