nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Ontwikkelaar: debug DOM-elementen op uw pagina met één regel code

Hoe vaak heb je moeite om een specifiek probleem te vinden dat je CSS-lay-out in de war schopt? Van ontbrekende sluitingslabels tot onjuist genestelde broers en zussen, zijn CSS-problemen een dertien in een dozijn. En met deze CSS-lay-out-debugger is het proces nu een stuk eenvoudiger geworden .

Deze ene regel code doorloopt de DOM en geeft een overzicht van elk element met een andere kleur. Op deze manier kun je beter visualiseren hoe je CSS werkt (of niet werkt) en snel probleemgebieden opmerken .

Met GitHub kunnen ontwikkelaars kleine stukjes code opslaan met de naam Gists. Deze zijn allemaal open source en gratis te bewaren voor eigen gebruik . Dat is de reden waarom deze CSS-foutopsporing zo handig is. Het combineert de moderne bekwaamheid van Chrome DevTools met de eenvoud van bookmarks voor browsers .

Als u deze code wilt gebruiken, moet u eerst de versie die u het leukst vindt, kopiëren van de pagina Gist. Dan plak je die code in je Terminal-venster en voer je het uit . Je zou moeten eindigen met een resultaat als dit :

Het is nu mogelijk om deze code op te slaan als een bookmarklet in de browserwerkbalk. Maar als u een Chrome-gebruiker bent, kunt u deze JS-code opslaan als een codefragment dat veel eenvoudiger te gebruiken is.

Dit codefragment kan telkens opnieuw worden teruggeroepen met één klik op de knop. U kunt elke pagina, vol met deze kleurrijke CSS-contouren, parseren voor DOM-elementen van zowel ouders als kinderen.

U moet zich echter niet alleen beperkt voelen tot Chrome. Dit fragment werkt voor alle belangrijke browsers, waaronder Firefox, Safari, Opera en Internet Explorer.

En voor iedereen die benieuwd is hoe dit werkt, kunt u de geannoteerde versie bekijken met opmerkingen voor elke regel code.

Deze Gist zit vol met verwante opmerkingen van gebruikers en updates van andere ontwikkelaars die helpen om het kleiner en efficiënter te maken. Maar in de huidige staat is dit een van de eenvoudigste manieren om een DOM te debuggen met een enkele regel code .

20 coole dingen die Google Search kan doen

20 coole dingen die Google Search kan doen

U kunt veel dingen doen op Google Zoeken maar Google Zoeken blijft gewoon geven. Van paaseieren tot handige snelkoppelingen waarmee je bijna wilt dat je wilt en wat je nodig hebt, Google Zoeken is een onmisbaar hulpmiddel aan het worden voor studenten, reizigers, nieuwsgierigen en verveelden.In deze post gaan we kijken naar 20 nuttige en leuke dingen die je goed kunt doen op Google Zoeken, zaken als het converteren van eenheden, spelletjes spelen, woorden vertalen, wiskundige problemen berekenen en oplossen, Google gebruiken als een timer, een vluchtstatus in realtime en meer

(Technische en ontwerptips)

Maak professioneel ogende afbeeldingen De makkelijke manier met Canva

Maak professioneel ogende afbeeldingen De makkelijke manier met Canva

Goed uitziende graphics is een van de beste manieren om lezers naar je blog of website te trekken. Maar zelf professionele beelden bedenken, is gemakkelijker gezegd dan gedaan. Grafische ontwerpsoftware is vaak duur, gecompliceerd of beide, en als je al bezig bent met je blog, dan heb je waarschijnlijk niet de tijd om jezelf te leren hoe je iets als Adobe Photoshop moet gebruiken

(Technische en ontwerptips)