Tipps & Tricks

Workflow SVG-Image

Dieser Artikel ist eine Zusammenfassung von Say “Hello” to SVG auf codeflowed.com 1. Vektorgrafik für Web optimieren Das SVG-File sollte so klein wie möglich sein. Die einzelnen Optimierungsschritte sind: In Illustrator alle Objekte selektieren Object -> Expand … (Fill und Stroke) Pathfinder -> Unite Das Ergebnis ist eine Vektorgrafik mit einer minimalen Anzahl an Pfaden und […]

Weiterlesen…

Sass-Mixin für Bootstraps responsive Breakpoints

Um in einem Bootstrap-Theme im CSS-File einfach und schnell unterschiedliche Screengrößen zu berücksichtigen, benutze ich ein spezielles Sass-Mixin. Es berücksichtigt sowohl die Breakpoint-Werte, als auch die -Namen des Bootstrap-Themes für die unterschiedlichen Größen. @mixin breakpoint($class) { @if $class == xs { @media (max-width: 767px) { @content; } } @else if $class == sm { @media […]

Weiterlesen…

Vektorgrafik in Webseite einbinden

Um eine Vektorgrafik in HTML5 einzubinden muss in der htaccess-Datei der Image-Typ hinzugefügt werden. Außerdem ist es sinnvoll, die Datei zu komprimieren. Damit der Web-Server das Bild wieder entpacken kann, muss entsprechender Encoder ebenso in die htaccess eingetragen werden. AddType image/svg+xml svg svgz AddEncoding gzip svgz Die svg-Datei im Terminal komprimimieren (Dateiname anpassen): gzip -9 […]

Weiterlesen…

Dropbox als Git Repository

Um meine Webseiten-Daten sowohl auf meinem stationären Rechner als auch dem MacBook einfach verfügbar zu haben, benutze ich die Dropbox als zentralen Git-Server. Es gibt natürlich spezielle Server im Netz, die ich benutzen könnte, allen voran GitHub. Aber da ich die Dateien nicht öffentlich auf dem Server haben möchte, müsste ich den Serverplatz bezahlen. Außerdem habe […]

Weiterlesen…

Die wichtigsten Terminal-Befehle

Eine sehr subjektive Liste mit Befehlen für die Terminal-App auf dem Mac, die ich immer wieder benötige (aber oft nicht mehr im Kopf habe…) Link zu einer Seite mit den wichtigsten Shortcuts für das Command-Line-Tool: lifehacker.com/5743814/become-a-command-line-ninja-with-these-time+saving-shortcuts Verzeichnis wechseln cd /site/files cd .. cd site Ordner erzeugen mkdir site File erzeugen touch file.txt File laden wget […]

Weiterlesen…

Mac: Quicktime-Video zu Ogg Theora wandeln

Flash stirbt. Sagen so einige. Und mit HTML5 und CSS3 ist ja auch eine Grundlage geschaffen, das Adobe-Produkt auf seinen Web-Seiten zu meiden. Der Programmierer, der auf einem Apple-Produkt arbeitet, steht trotz der vielleicht klammheimlichen Freude über den Niedergang Flashs vor einem neuen Problem: Er kann kein OGG. Da Firefox kein MPEG4-Format akzeptiert, Safari aber […]

Weiterlesen…