From 88327226f594685e750c1321f70badbba7247925 Mon Sep 17 00:00:00 2001 From: David Maciejewski Date: Wed, 20 Nov 2024 15:25:49 +0100 Subject: [PATCH] Added Assets --- src/pages/assets.mdx | 37 ++++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/src/pages/assets.mdx b/src/pages/assets.mdx index de7a279..59e9a5d 100644 --- a/src/pages/assets.mdx +++ b/src/pages/assets.mdx @@ -110,11 +110,6 @@ import Lead from '@components/Lead.astro' [Mockaroo](https://mockaroo.com/) : Mock-Service zum erstellen von realistischen Testdaten. -## Services - -[NoCodeForm](https://nocodeform.io/) -: Endpoint für HTML-Formulare. - ## Optimierungen Assets solltest du immer optimieren, bevor du diese in deiner Website verwendest. stets optimieren, damit sie schneller geladen werden können. Biete ggf. auch alternative Bildformate wie WebP[^2] oder AVIF[^3] an. @@ -135,21 +130,32 @@ Assets solltest du immer optimieren, bevor du diese in deiner Website verwendest [PX to REM Converter](https://nekocalc.com/px-to-rem-converter) : Du möchtest `rem` statt `px` verwenden? Dann ist dieser Converter genau richtig für dein Design. -[Fluid Type Scale Calculator](https://www.fluid-type-scale.com/) +[Font Size Clamp Generator](https://clamp.font-size.app/) +: Erstellt CSS-`clamp()`-Regeln für Schriftgrößen. + +[Fluid Type Scale Calculator](https://www.fluid-type-scale.com/) NEU : Generiert `font-size`-Variablen für die Verwendung von CSS `clamp()`. [Modern fluid typography editor](https://modern-fluid-typography.vercel.app/) : Erstellt für `clamp()` die drei Werte. +[`` Generator](https://kbd.hsuan.xyz/) +: Erstellt ``-HTML-Elemente zur Anzeige von Tastaturbefehlen in Texten und Dokumentationen. + +### Farben und Kontraste + +[APCA Contrast Calculator](https://flowpoint.ai/tools/apca) NEU +: Kalkuliert den APCA-Kontrast zwischen zwei Farben. APCA steht für „Advanced Perceptual Contrast Algorithm“ und berücksichtigt die menschliche Wahrnehmung. + +[Auto tint with APCA](https://apca.digitallymarked.com/) NEU +: Testet, ob Schwarz oder Weiß als Textfarbe besser zu einer Hintergrundfarbe passt. + [Leonardo Contrast Colors](https://leonardocolor.io/tools.html) : Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe ermitteln. [Colour Contrast Checker](https://colourcontrast.cc/) : Prüft Vorder- und Hintergrundfarben auf hohen Kontrast, damit diese gut gelesen werden können. -[`` Generator](https://kbd.hsuan.xyz/) -: Erstellt ``-HTML-Elemente zur Anzeige von Tastaturbefehlen in Texten und Dokumentationen. - ### Inhalte [Meta Tags Toolkit](https://metatags.io/) @@ -158,23 +164,24 @@ Assets solltest du immer optimieren, bevor du diese in deiner Website verwendest [LanguageTool](https://languagetool.org/de) : Prüft deine Texte auf Rechtschreibung und Grammatik. -## Tools +## Tools und Services -Hier habe ich für euch Helfer installiert, die ich meiner auch relativ oft benötige. +[NoCodeForm](https://nocodeform.io/) +: Endpoint für HTML-Formulare. [MarkdownDown](https://markdowndown.vercel.app/) -: Konvertieren Sie jede Webseite in ein sauberes Markdown mit heruntergeladenen Bildern. +: Konvertiere jede Webseite in ein sauberes Markdown mit heruntergeladenen Bildern. ## Code-Beispiele Du hast eine Idee, weißt aber noch nicht wie du sie umsetzen kannst? Hier habe ich dir ein paar meiner Codepens aufgeführt. +[Picture-Element: Art direction Image](hhttps://codepen.io/macx/pen/wvZamyR)) NEU +: Mobil-optimierte Art-Direction-Images mit `picture`-Element und `srcset`. + [Sticky Back-To-Top Button](https://codepen.io/macx/pen/eYeNMpJ) : Zurück-nach-oben-Button, der erst beim scrollen erscheint. Die Demo nutzt den Intersection Observer. Wird auch auf dieser Seite verwendet. -[Responsive Images](https://codepen.io/macx/pen/NWNrRQg) -: Mobil-optimierte Art-Direction-Images mit `picture`-Element und `srcset`. - [CSS Grid](https://codepen.io/macx/pen/NWNrRQg) : Bild-Gallerie ohne Media-Queries.