kulturbanause® blog » Bookmarklet http://blog.kulturbanause.de Artikel, Tipps und Trainings zum Thema Web Design, WordPress, Photoshop und Social Media Tue, 21 May 2013 21:45:24 +0000 de-DE hourly 1 http://wordpress.org/?v=3.4.2 CSS-Files automatisch nachladen: CSS refresh http://blog.kulturbanause.de/2012/09/css-files-automatisch-nachladen-css-refresh/ http://blog.kulturbanause.de/2012/09/css-files-automatisch-nachladen-css-refresh/#comments Mon, 10 Sep 2012 07:49:30 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=8576 css-refresh-logoMein Workflow bei der Umsetzung einer Website sieht normalerweise etwa so aus: Sobald ich das grobe HTML-Markup geschrieben habe, lege [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> css-refresh-logo

Mein Workflow bei der Umsetzung einer Website sieht normalerweise etwa so aus: Sobald ich das grobe HTML-Markup geschrieben habe, lege ich die CSS-Datei an und füge Style-Angaben hinzu. Dabei wechsle ich permanent zwischen dem Code-Editor, der Debug-Konsole des Browsers und dem Browser selbst. Ich schreibe einige Zeilen Code, speichere das Stylesheet, und überprüfe das Ergebnis im Browser. Dazu muss ich jedes Mal den Browser neu laden um die Änderungen auch sehen zu können. Und weil ich ungern Zeit verschwende, nutze ich ein Bookmarklet um die Seite immer automatisch aktuell zu halten. Das Tool ist zwar nicht gerade neu, aber dennoch ungemein praktisch.

Script oder Bookmarklet?

CSS refresh ist ein kleines JavaScript das die CSS-Datei einer Website automatisch aktualisiert sobald eine Änderung stattgefunden hat. Ihr könnt das Script entweder hier herunterladen und per script-Tag im Quellcode der Website einbinden, oder alternativ ein Bookmarklet verwenden. 

<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>
Screenshot der Website von CSS-Refresh
Screenshot der Website von CSS-Refresh

Da das Tool funktioniert übrigens nur in einer Serverumgebung.

CSSrefresh uses a XMLHttpRequest to get the modification time of the CSS-files, therefore it only works in a server environment.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/09/css-files-automatisch-nachladen-css-refresh/feed/ 17 Bookmarklet: Texte einer Website im Browser editieren http://blog.kulturbanause.de/2012/02/bookmarklet-texte-einer-website-im-browser-editieren/ http://blog.kulturbanause.de/2012/02/bookmarklet-texte-einer-website-im-browser-editieren/#comments Tue, 14 Feb 2012 08:50:43 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=7254 bookmarkletHäufig möchte man seine Texte so schreiben, dass sie nicht nur verständlich und gut lesbar sind, sondern dass sie auch [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> bookmarklet

Häufig möchte man seine Texte so schreiben, dass sie nicht nur verständlich und gut lesbar sind, sondern dass sie auch im Layout gut aussehen. Ein Beispiel wären Texte für verschiedene Teaser-Elemente die alle gleich lang sein sollen.
Der Pixelgangster hat vor einiger Zeit den entsprechenden JavaScript-Code veröffentlicht, mit dem der "Design Mode" im Browser eingeschaltet werden kann. Anschließend ist es möglich die Texte der Website live zu editieren. Besonders benutzerfreundlich wird diese Methode wenn ihr den Code als Bookmarklet abspeichert. Anschließend könnt ihr per Klick auf das Bookmarklet den Bearbeitungsmodus ein- und ausschalten.

Bookmarklet anlegen

Erstellt ein neues Lesezeichen und ersetzt die Adresse mit dem nachfolgenden JavaScipt-Code.


Lesezeichen-Manager in Google Chrome


javascript:(

function () {
    if (document.documentElement.contentEditable === false || document.designMode === "off") {
        document.body.contentEditable='true';
        document.designMode='on';
        void 0;
    } else if (document.documentElement.contentEditable === true || document.designMode === "on") {
        document.body.contentEditable='false';
        document.designMode='off';
        void 0;
    }
})();

via stackoverflow.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2012/02/bookmarklet-texte-einer-website-im-browser-editieren/feed/ 3