tsoto.net

In diesem Thema sammeln wir nützliche Tools für Webdesigner und -entwickler rund um HTML, CSS3, JavaScript und was es sonst noch so gibt. Das Thema wird nach und nach erweitert und Vorschläge können gerne direkt hier gepostet werden.

---

Kategorien

Web
Allgemein
CSS3
JavaScript

Bild & Grafik
Bild & Grafik: Allgemein
Icons

Browser-Erweiterungen
Chrome

Sonstiges
IDE Erweiterungen
Alles andere

---

Allgemein

CSS Lernkurse
Ein umfangreicher CSS Lernkurs.
Link: https://web.dev/learn/css/

Ultimative Coding Ressourcen
Link: https://github.com/PizzaPokerGuy/ultimate-coding-r...-resources

Nützliche Übersicht über Entwickler Skills
Link: https://andreasbm.github.io/web-skills/

Bibliothek mit Testmethoden von größeren Firmen
Link: https://github.com/abhivaikar/howtheytest

Sammlung von Tools und Ressourcen
Link: https://www.designgems.co/

---

CSS3

CSS Filter Library
Link: https://bansal.io/filters-css

CSS Reset: reseter.css
Damit lassen sich z.B. von verschiedenen Browsern vordefinierten CSS-Angaben zurücksetzen. Sehr praktisch um Webseiten Cross-Browser kompatibel zu gestalten.
Link: https://github.com/krishdevdb/reseter.css

Artikel bzgl. CSS Reset oder Normalize
Link: https://elad.medium.com/normalize-css-or-css-reset...75175c5d1e

Fünf ungewöhnliche Methoden Pseudo-Elemente zu nutzen
Link: https://blog.logrocket.com/5-css-pseudo-elements-y...w-existed/

Mausposition in CSS
Ein eher experimenteller Versuch die Mausposition via CSS zu ermitteln.
Link: https://css-tricks.com/how-to-map-mouse-position-i...ion-in-css

Neon-Leuchtschrift mit CSS
Neon-Texte mit CSS text-shadow erstellen.
Link: https://css-tricks.com/how-to-create-neon-text-wit...-with-css/

Chart CSS
Ein Framework um alle mögliche Arten von Daten und Statistiken via CSS darstellen zu können, wie z.B. Balken-, Kurven- oder Linienstatistiken.
Link: https://chartscss.org/

A Complete Guide to Custom Properties
Viele nützliche Tipps bzgl. Custom Properties in CSS.
Link: https://css-tricks.com/a-complete-guide-to-custom-...roperties/

Ultimativer Guide zu Flexbox
Link: https://css-tricks.com/snippets/css/a-guide-to-fle...o-flexbox/

---

JavaScript

Zeichnet handgemalte-ähnliche Bilder
Link: https://github.com/pshihn/rough

Konvertiert Texte zu Handschrift
Link: https://github.com/alias-rahil/handwritten.js

console.log wie ein Profi verwenden
Link: https://denic.hashnode.dev/use-consolelog-like-a-p...like-a-pro

---

Bild & Grafik Allgemein

Vergrößert und verbessert Bilder
Vergrößert Bilder und Fotos mithilfe einer KI.
https://icons8.com/upscaler/

---

Icons

Mono Icons
Eine Sammlung von Open Source Icon-Sets.
Link: https://icons.mono.company/

---

Browser-Erweiterungen: Chrome

Durchsucht Seiten mit "Natürlicher Sprache" statt exakten Begriffen
Link: https://github.com/model-zoo/shift-ctrl-f

---

IDE Erweiterungen

Integriert eine Spielwiese (wie CodePen, JSFiddle) in Visual Studio Code
Link: https://github.com/lostintangent/codeswing

---

Sonstiges

Webseiten als Desktop-App ausliefern
Link: https://github.com/jiahaog/nativefier

magnificent app
Korrigiert fehlerhafte Eingaben im Terminal
Link: https://github.com/nvbn/thefuck

stream-unzip
Python-Funkion um ein Stream unzip für Dateien in einem ZIP-Archiv auszuführen, ohne die komplette ZIP-Datei in den Speicher zu laden.
Link: https://github.com/uktrade/stream-unzip

Allgemein

# Ultimative Coding Ressourcen
https://github.com/PizzaPokerGuy/ultimate-coding-r...-resources

# Nützliche Übersicht über Entwickler Skills
https://andreasbm.github.io/web-skills/

# Bibliothek mit Testmethoden von größeren Firmen
https://github.com/abhivaikar/howtheytest

# Sammlung von Tools und Ressourcen
https://www.designgems.co/

---

CSS

# Ultimativer Guide zu Flexbox
https://css-tricks.com/snippets/css/a-guide-to-fle...o-flexbox/

# CSS Filter Library
https://bansal.io/filters-css

# CSS Resetter
https://github.com/krishdevdb/reseter.css

# Artikel bzgl. CSS Reset oder Normalize
https://elad.medium.com/normalize-css-or-css-reset...75175c5d1e

# 5 seltene Methoden Pseudo-Elemente zu nutzen
https://blog.logrocket.com/5-css-pseudo-elements-y...w-existed/

Experimente

# Map Mouse Position in CSS
https://css-tricks.com/how-to-map-mouse-position-i...on-in-css/

---

JavaScript

# Zeichnet handgemalte-ähnliche Bilder
https://github.com/pshihn/rough

# Konvertiert Texte zu Handschrift
https://github.com/alias-rahil/handwritten.js

# console.log wie ein Profi verwenden
https://denic.hashnode.dev/use-consolelog-like-a-p...like-a-pro

Experimente

# Entfernt Personen in Echtzeit aus Videos
https://github.com/jasonmayes/Real-Time-Person-Rem...on-Removal

---

IDE Erweiterungen

# Integriert eine Spielwiese (wie CodePen, JSFiddle) in Visual Studio Code
https://github.com/lostintangent/codeswing

---

Chrome Erweiterungen

# Durchsucht Seiten mit "Natürlicher Sprache" statt exakten Begriffen
https://github.com/model-zoo/shift-ctrl-f

---

Iconsets

https://icons.mono.company/

---

Weiteres

# Vergrößert und verbessert Bilder
https://icons8.com/upscaler/

# Webseiten als Desktop-App ausliefern
https://github.com/jiahaog/nativefier

# magnificent app... Korrigiert fehlerhafte Eingaben im Terminal
https://github.com/nvbn/thefuck

Ist Dreamweaver veraltet?