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


Visualiseer elke CSS-stylesheet met CSS-statistieken

Heeft u zich ooit afgevraagd hoeveel CSS-regels er in een stylesheet zitten? Of heb je ooit een visuele weergave van alle kleuren in een CSS-bestand willen zien? Met CSS-statistieken kunt u elke website aansluiten en een stapel onbewerkte CSS-gegevens trekken om uw nieuwsgierigheid te bevredigen.

En deze web-app gaat zoveel dieper dan alleen alle kleuren voor een stylesheet laten zien. U kunt alle z-indexwaarden, alle lettergroottes, alle mediaquery's visualiseren en zelfs een grafiek voor visuele specificiteit bekijken .

Deze app behandelt zo veel dat het praktisch onmogelijk is om alles in één keer te consumeren. Het geeft je een geweldig overzicht van elke website, gewoon door te laten zien wat er in hun stylesheet staat .

Ga om aan de slag te gaan naar de CSS Stats-website en sluit elke gewenste URL in . Je kunt ook kiezen uit een aantal voorgestelde sites zoals Facebook, Apple en Pinterest (onder andere).

Op de resultatenpagina ziet u de totale CSS-bestandsgrootte in kilobytes, samen met een lijst met de meest gebruikte eigenschappen en declaraties . Dit verschijnt allemaal als een lange lijst met getallen, dus het kan verwarrend zijn om eerst te lezen.

Maar hoe meer u deze app gebruikt, hoe leuker het wordt! Hier is een lijst met alles wat je op de statistiekenpagina vindt:

  • Totaal aantal eigenschappen, selectors en regels
  • Alle lettertypekleuren met voorbeelden & hexadecimale codes
  • Alle achtergrondkleuren met voorbeelden & hexadecimale codes
  • Alle lettergroottes met voorbeelden
  • Lijst met lettertypefamilies
  • Lijst met alle z-indexwaarden
  • Een staafdiagram van totale / unieke CSS-verklaringen
  • Specificiteitsgrafiek
  • Totale regelset grootte
  • Alle mediaquery's
  • De onbewerkte CSS-code en URL-links naar de afzonderlijke CSS-bestanden

CSS-statistieken is slim genoeg om alle CSS-bestanden te trekken en die gegevens samen te voegen . De ontwikkelaars doen er alles aan om het goed te laten werken.

En, het extra geweldige deel is de volledige GitHub repo met broncode voor het hele project . Dus je kunt dit downloaden en opnieuw hosten op je eigen server (lokaal of anderszins) om rond te spelen als je de code wilt onderzoeken.

U hebt de mogelijkheid om elk afzonderlijk CSS-bestand of alle stylesheets in een enkel domein te ontleden . Er is zoveel dat je kunt leren van het bestuderen van deze tool en het biedt een dieper inzicht voor ontwikkelaars die in de nitty-gritty details duiken.

Om zelf te testen, ga je naar CSS Stats en sluit je een website aan. Je zult versteld staan ​​hoeveel gegevens beschikbaar zijn en hoeveel je kunt leren van zo'n simplistische tool.

De beste web-apps van de maand - september

De beste web-apps van de maand - september

We hebben deze maand een geweldige verzameling webapps en hulpprogramma's voor u verzameld, die volgden op de samenvatting van vorige maand en we denken dat ze allemaal erg handig voor u zullen zijnDeze maand bevat onze selectie een handige webapp die u helpt om domeinen heel gemakkelijk te registreren en te beheren, een geweldige tool om u te helpen bij het beheren van de relatie met uw gebruikers die uw webapps gebruiken, een zeer nette en effectieve projectbeheertool en zelfs een sociale tool netwerk voor voedselrecepten

(Technische en ontwerptips)

Voordelen van pen en papier voor het ontwerpen op computer

Voordelen van pen en papier voor het ontwerpen op computer

Vertel eens, wanneer was de laatste keer dat je met pen en papier schreef? Het is niet verrassend om te weten dat je ze zelden gebruikt, omdat we het digitale tijdperk ingaan wanneer technologieën zoals laptop en tablet over de hele wereld tot bloei komen. Het cruciale feit is echter dat het gebruik van pen en papier beslist efficiënter is dan het gebruik van de computer als het gaat om schetsen, schrijven, ontwerpen, elke activiteit waarbij brainstormen betrokken is !H

(Technische en ontwerptips)