Kopieer codes eenvoudig van websites met SnappySnippet

Als webontwikkelaar vinden we af en toe enkele inspirerende elementen op een website waardoor je je afvraagt ​​hoe ze dat ding hebben gebouwd. Dan zou je erover nadenken om een ​​kopie van die code te krijgen. Zowel Chrome Devtools als Firebug of Firefox hebben de functie geleverd die het voor ons gemakkelijk maakt om HTML en CSS van een website te kopiëren.

Deze hulpmiddelen werken echter alleen om HTML of CSS te kopiëren; u kunt deze hulpmiddelen niet gebruiken om de CSS te kopiëren die is gerelateerd aan het HTML-element dat u hebt geselecteerd. Stel dat u bijvoorbeeld een HTML-element selecteert dat een aantal onderliggende elementen bevat, als volgt.

 voorleggen 
Door je in te schrijven, ga je akkoord met onze voorwaarde en voorwaarde

Elk element bevat zijn eigen specifieke stijlregels die zich in het stylesheet bevinden. Sommige HTML-elementen hebben mogelijk een aantal stijlregels overgenomen, waardoor het zowel lastig zou zijn om zowel HTML als CSS te kopiëren . Hier is waar je dol bent op een tool als SnappySnippets.

Ermee beginnen

SnappySnippet is een Chrome-extensie (download die hier), die na installatie je een nieuw tabblad met de naam SnappySnippet geeft in Google Chrome DevTools. Dit is waar we SnappySnippet zullen bedienen.

Om het uit te testen, hebben we een webpagina met een aantal HTML-elementen opgesteld, die een heel mooi, eenvoudig webinlogformulier vormen. Elk van deze HTML-elementen nemen CSS-codes over. Om al deze codes op een traditionele manier te kopiëren met de normale functionaliteit van de browser DevTools, zal het een beetje werk kosten.

Met SnappySnippet is alles echter veel eenvoudiger.

Selecteer eerst welk element u wilt kopiëren en open vervolgens het SnappySnippet-tabblad en klik op de knop Een fragment van geïnspecteerd element maken .

Zoals u in de onderstaande schermafbeelding kunt zien, wordt het element dat we hebben geselecteerd gekopieerd met de onderliggende elementen en geplaatst in het HTML- deelvenster aan de linkerkant. Alle stijlregels die deze HTML-elementen vormen, worden ook gekopieerd en in het CSS-deelvenster geplaatst.

De instellingen

Met SnappySnippet kunnen we de code-uitvoer instellen. Onder de twee panelen die worden gebruikt voor het plaatsen van de HTML en CSS, vindt u het paneel Instellingen . U kunt verschillende dingen instellen, zoals het verwijderen van de CSS-eigenschap met de prefix -webkit- van de uitvoer, het invoegen van de prefix voor de ID die aan de HTML-elementen wordt gegeven, enzovoort.

Code delen

Webontwikkelaars zijn mogelijk bekend met een codesharingplatform zoals Codepen . Op deze websites kunnen webontwikkelaars stukjes werkcodefragment delen . Het is als een sociale netwerksite, maar in plaats van statussen en selfies te delen, delen we codes. Met SnappySnippet kunt u de codes verzenden die u naar Codepen, JSFiddle en JSBin hebt gekopieerd.

Om de code te verzenden, moet u ervoor zorgen dat u bent ingelogd op de betreffende website waar u uw codes naartoe wilt sturen. Dit is ook om ervoor te zorgen dat de codes onmiddellijk in uw account worden opgeslagen. Klik vervolgens op een van deze drie deelknoppen.

De codes die u kopieert, komen precies overeen met wat u op de website ziet.

Laatste gedachte

SnappySnippet is een erg handig hulpmiddel voor het kopiëren van codes, maar vergeet dit niet te gebruiken als een middel om andere codes van ontwikkelaars te plagiëren . Wat je ook kopieert, streef naar een leerdoel, in de hoop iets nieuws te leren van de gebruikte technieken. Blatant kopiëren is niet toegestaan, of het auteursrechtelijk beschermd is of niet. Gebruik deze tool goed.

Hoe Chrome de oorlog van de browsers won [Infographic]

Volgens StatCounter regeert Chrome nog steeds supremeren als de favoriete voorkeursbrowser, voor IE, Firefox, Safari, Opera en andere browsers. Het afgelopen jaar leidde Chrome gestaag tot bijna de helft van het gebruikersaandeel voor browsers op desktops, tablets en consoles ondanks de algemene klacht over de neiging tot crashen en zwaar geheugengebruik

(Technische en ontwerptips)

Google AutoDraw - AI Autocorrectie die uw gekrabbel verhelpt

Tekenen kan moeilijk zijn, vooral als je iemand als ik bent die absoluut geen artistiek talent heeft. Maar als je gewoon met een simpele doodle binnen een mum van tijd naar buiten wilt komen, kun je Google's nieuwste op kunst gebaseerde kunstmatige intelligentie-experiment AutoDraw laten doen.Gebouwd op dezelfde technologie die Google's Quick, Draw

(Technische en ontwerptips)