====== WebDev Tools ======

Übersichten

  * https://kinsta.com/de/blog/webentwicklung-tools/
  * Nützliche Websites [[https://devdojo.com/astrodevil/25-must-visit-killer-websites-for-developers]]

Tools

  * Chrome Dev Tools: https://developer.chrome.com/docs/devtools/
  * Figma: Online-Design Tool, https://www.figma.com/de/, https://www.figma.com/team_invite/redeem/aroxSW6kbAVOQ8deJFux6H
  * Farben: https://coolors.co/
  * Farben: https://encycolorpedia.de/
  * Code ausprobieren: https://codepen.io/
  * Farb-Kontrast checken: https://webaim.org/resources/contrastchecker/

===== Fonts =====

  * https://fontjoy.com/# -- Font pairings AI Tool
  * https://www.modularscale.com/ -- Font Scale Tool
  * https://www.typewolf.com/ -- Font Exploration
  * https://discover.typography.com/ -- Font Inspiration
  * https://chromewebstore.google.com/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh -- Identify Fonts on Websites
  * https://practice.typekit.com/ -- Typo Learning


===== Unsplash Platzhalterbilder =====

unsplash.com ist eine Online-Bilddatenbank mit User-generiertem Content, lizenzfrei. Durch den Aufruf mit Parametern erhält man perfekte Platzhalterbilder für Webdesigns o.ä.

<code>
Stamm-URL:
https://source.unsplash.com/

Dahinter die Parameter
random: zufälliges Bild
123x123: Bild-Dimensionen
?keyword: Schlagwort Bildersuche

Beispiel:
https://source.unsplash.com/random/1536x450/?future-technology

</code>


==== Eigene Collection ====

Als registrierter User kann man bei unsplash.com eigene Collections anlegen, um die Auswahl der gezeigten Bilder zu steuern. So kann unsplash.com auch für Produktiv-geschaltete Projekte genutzt werden.

<code>
Syntax:
https://source.unsplash.com/collection/[collection_id]/[width]x[height

Eigene Collection:
https://unsplash.com/collections/4759555/phoenixseo-collection

Hieraus wird dieser Aufruf:
https://source.unsplash.com/collection/4759555/1536x300

</code>

===== picsum.photos =====

Weitere Möglichkeit, Platzhalterbilder einfach per Parameterübergabe zu generieren. Anleitung direkt auf der Website:

  * https://picsum.photos/