WebDev

Wiki

Tools

externe Links sind
mit ↗ markiert
emmet HTML & CSS
  • emmet ist ein Plugin für verschiedene Code Editoren, zur schnellen Erstellung (Kurzschreibweise) von XML-, HTML- und CSS-Code. Ist in VS code schon enthalten.
  • ul.testlist>li.item-$$$*5
    diese Kurzschreibweise ergibt folgenden code:
    <ul class="testlist">
      <li class="item-001"></li>
      <li class="item-002"></li>
      <li class="item-003"></li>
      <li class="item-004"></li>
      <li class="item-005"></li>
    </ul>
  • w25 -> width: 25px;
    w80p -> width: 80%;
    oh -> overflow: hidden;
    p10em! -> padding: 10em !important;
    db -> display: block;
    df -> display: flex;
    bgc:red -> background-color: red;
    c:black -> color: black;
    p2r-5r -> padding: 2rem 5rem;
    fxd:c -> flex-direction: column;
    h200+w200 -> height: 200px; width: 200px;
  • docs.emmet.io/cheat-sheet/
ASCII Art
  • Ist eine Kunstrichtung, die mit Buchstaben, Ziffern und Sonderzeichen einer nichtproportionalen Schrift kleine Piktogramme oder ganze Bilder darzustellen versucht.
    Um diese Bilder auf einer Website darzustellen, benötigt man das HTML pre tag.
  • www.asciiart.eu/
Kontrast checker
  • Mit diesem Tool kann man prüfen, ob die Textfarbe und die Hintergrundfarbe zusammen passen.
  • color.review
mailto Generator
  • Mit diesem Generator erstellt man sich Links, die dann im Email Programm geöffnet werden.
  • In dem body kann man vorgegebenen Text schreiben, aber leider kein Placeholder. Viele bereiten Texte vor und markieren die auszufüllenden Bereiche mit kursiv, mit # oder mit // und schreiben dazu "hier deinen Text" rein.
  • hellocoding.de/mailto-generator
hilfreiche Tools
Minifier / Beautifier
  • Minifizieren ist eine Technik, mit der Programmcode verkleinert wird, ohne seine Funktion zu verändern. Dies geschieht durch Entfernen von Leerräumen (Whitespace), sofern nicht syntaktisch erforderlich; Entfernen von Kommentaren; Verwenden alternativer, kompakterer Sprachkonstrukte; Umbenennen von Bezeichnern.
  • Von einer Minifizierung profitiert hauptsächlich JavaScript, aber auch CSS und HTML sind minifizierbar. Stark minifizierter JavaScript-Code ist für Menschen kaum noch lesbar und stellt damit eine einfache Form des Quellenschutzes dar. Man spricht daher auch von Verschleierung (obfuscation) oder Uglyfication.
  • selfhtml/minify
  • beautifytools.com
API
AI Tools
Marp
  • Marp ist ein Tool, womit man mit einer Extension in VS Code, sich Präsentationen erstellen kann. In der dafür benötigten Markdown Datei kann man auch HTML & CSS verwenden, sowie Bilder einfügen und dann zum Schluss als PDF oder HTML Datei speichern.
  • marpit.marp.app/markdown || Dokumentation
  • youtube.com/Programmieren mit Mario/Marp