webksde

SASS & Compass: Errors OptionParser::InvalidOption and ArgumentError: different prefix

It seems these errors has something todo with generating source maps, … but who cares 😉
 
The solution:
Simply deinstall all versions of Compass and SASS (gem uninstall compass / sass). Now type „gem install compass –pre“ so you get the latest dev version of Compass and – as a dependency – SASS 3.3.4.
 
For me everything works fine, no errors anymore. Dev environment here is Netbeans Dev 20140404001.

    Use Smarty truncate function inside PHP (instead of substr)

    Working with the PHP substr() function is horrible, so if you have Smarty available you can use the truncate function inside your php files.

    smarty_modifier_truncate($string, $length = 80, $etc = '...',
    $break_words = false, $middle = false)
    

    For Example:

    smarty_modifier_truncate($oStartKategorie->cBeschreibung, 200)
    

     

      Adobe Photoshop, Illustrator, … CS6 Trial Downloaden (nicht CC!)

      Update 2019: Wer die Schnauze voll hat von Adobe sollte sich ganz dringend die Affinity Suite (Designer, Photo & Publisher) ansehen, lĂ€sst ĂŒberhaupt nichts vermissen, ganz im Gegenteil:

      https://affinity.serif.com/de/

      Benefits fĂŒr Webdeveloper:

      • Zentrale Verwaltung von Textstilen, samt Vererbungslogik
      • Erstellen von „Symbols“, wiederverwendbare Designbestandteile, die synchronisiert werden
      • Fantastisches Grid-Tool
      • uvm.

      Wer keine Lust auf den neuen Abo-Unsinn von Adobe hat und sich mal CS6 anschauen will, schaut bei der Suche nach der Trial in die Röhre. Die Downloadlinks auf diversen Websites verweisen komplett auf Adobe.com, wo dann die CC-Version als Download angeboten wird.

      Wunderbarerweise gibt es allerdings eine Seite fĂŒr CS6 Kunden welche Ihre DVD verlegt haben… oder wie auch immer. Das Setup unterscheidet sich nicht von dem welches als Trial angeboten wurde, kann somit weiterhin als 30-Tage Testversion installiert werden.

      Link findet Ihr unten!

        Netbeans Development Version – Fehlermeldungen deaktivieren – Disable Error Messages

        Um in der Dev Version von Netbeans die Netbeans eigenen Fehlermeldungen zu unterdrĂŒcken geht man folgendermaßen vor.

        1. Einen Editor mit Administrator Rechten starten
        2. Mit dem Editor Netbeans Installationsverzeichnis aufrufen (z. B. C:\Program Files\NetBeans Dev 201311260002)
        3. Im Ordner „etc“ die Datei „netbeans.conf“ öffnen
        4. Nach „netbeans_default_options“ suchen
        5. Dort folgende Option anfĂŒgen (ACHTUNG! Innerhalb der vorhandenen AnfĂŒhrungszeichen): „-J-Dnetbeans.exception.alert.min.level=99999 -J-Dnetbeans.exception.report.min.level=99999“
        6. Speichern, Netbeans starten, Fertig.

        Die Ausgabe der Fehlermeldungen hat bei der Dev Version natĂŒrlich den Sinn, den Entwicklern Fehler melden zu können. Das einfach beim Abschalten bedenken! Benötigt man, wie in meinem Fall zwingend die Dev z. B. aktuell fĂŒr die UnterstĂŒtzung von SASS, sind die teils extrem oft erscheinenden Fehler aber aus Sicht der ProduktivitĂ€t natĂŒrlich untragbar.

          JTL Shop 3: Regionen hinzufĂŒgen (Boxen)

          Aktuell ist der JTL-Shop 3 auf 4 Regionen begrenzt, wovon 2 standardmĂ€ĂŸig deaktiviert und nicht im template definiert sind. Das hinzufĂŒgen eigener Regionen ist aktuell nicht möglich (ohne die UpdatefĂ€higkeit zu zerstören). Ich zeige hier nun kurz auf wie die vorhandenen Regionen aktiviert und eingebunden werden.

          Die Anfrage eigene Regionen einfĂŒgen zu können, haben wir bereits an JTL herangetragen, Ihr seit herzlich eingeladen die Anfrage zu unterstĂŒtzen 😉 –> http://feedback.jtl-software.de/forums/214215-jtl-shop3/suggestions/5115506-definition-eigener-container-in-der-template-xml-

          Erste Anlaufstelle ist die Template.xml im Hauptverzeichnis des Templates, z. B. “/jtlshop/templates/JTL-Shop3-Tiny” dort nach dem Tag “<Boxes>” suchen. Hier gilt es nun fĂŒr die Aktivierung vorhandener Regionen den Wert “Available” von “0” auf “1” zu setzen.

          NĂ€chster Schritt ist, die Ausgabe im entsprechenden Templatefile zu definieren. In unserem Fall geben wir die Region “Bottom” in der footer.tpl respektive footer_custom.tpl aus.

          Die Kenntnisse zum Anpassen der umliegenden HTML Struktur setze ich an dieser Stelle voraus. Die Ausgabe der Region funktioniert dann folgendermaßen:

          “{load_boxes type=“bottom“ assign=“cBoxbottom“}{eval var=$cBoxbottom}”

          Im letzten Schritt im Backend unter “Admin -> Boxenverwaltung” die Box im neuen Bereich hinzufĂŒgen, die Region mit dem HĂ€kchen links oben zu aktivieren (!!!) und fertig! Die Box sollte nun angezeigt werden.

            Thunderbird Caldav Support mit Oauth (Google Calendar)

            Da nun schon seit einigen Tagen mein Kalender nicht mehr ging, was natĂŒrlich extrem unerfreulich ist, habe ich mir die Sache nun erneut vorgenommen. Huckepacklösungen wie die Extension Provider for Google Calendar funktionierte unzureichend und der Kalender sollte nun endlich wieder laufen.

            Also die letzte Thunderbird + Lightning Aurora Version installiert (26.0a2) und mit der neuen URL die CalDav Kalender wie gehabt neu angelegt: https://apidata.googleusercontent.com/caldav/v2/calid/events . Und schon lĂ€uft die Sache.

            Das OAuth Fenster popt nun korrekt auf und nach der BestĂ€tigung des Dialogs, erhĂ€lt man eine RĂŒckmeldung von Thunderbird, sowie nach einigen Sekunden den gewohnten Kalender.

            Downloadlinks unterhalb, der Einfachheit halber habe ich den englischen Release genutzt.

              HTML5 Video in Drupal – Video.js + Video.js Filter

              FĂŒr ein aktuelles Projekt bestand die Notwendigkeit, auf einfachem Weg HTML5 Videos in den Content einpflegen zu mĂŒssen. Hierzu nutzen wir die Module Video.js und Video.js Filter, ersteres stellt die Video.js Library (Achtung! Nicht die Library von Github nutzen, sondern die der Video.js Website) zur VerfĂŒgung, zweiteres stellt einen Textfilter zur VerfĂŒgung der es ermöglicht einen String mit Parametern einzupflegen. ZusĂ€tzlich setzen wir das File Entity Modul fĂŒr den Dateiupload ein.

              Problem ist hier nur, dass Videos in einem FTP Folder gespeichert werden mĂŒssen, was fĂŒr viele Kunden zu umstĂ€ndlich ist. Der Upload erfolgt nun also ĂŒber das benannte File Entity Modul, welches Dateien direkt ins File Verzeichnis lĂ€dt. Problem an der Stelle: In den Einstellungen des Video.js Filter Moduls lassen sich nur Unterverzeichnisse innerhalb von Files angeben. 

              Einfacher Trick an der Stelle: Da das Pfad Feld in den Video.js Filter Settings nicht leer bleiben darf, kann einfach ein „/“ eingetragen werden. Damit wird dann direkt das files Verzeichnis angesprochen.

              Alternativ steht noch das File Entity Path Modul zur VerfĂŒgung, was dann die Angabe von Unterordnern beim Dateiupload erlaubt.

              Noch ein Tipp zur generellen Nutzung: Es reicht folgende Angabe aus [videojs:{webks_beispielvideo.mp4|webks_beispielvideo.webm| … }] der Pfad wird automatisch durch die entsprechenden Settings des Video.js Filter Moduls ergĂ€nzt.

                Einstieg: Drupal & SASS + Compass (mit Prepro und Sassy)

                Der Einstieg in das Thema ist nicht ganz so leicht gemacht, daher hier eine kleine Zusammenfassung.

                Die GrundsĂ€tzlichen Möglichkeiten mit dem CSS Preprocessor zu arbeiten: Lokale Ruby Installation aufsetzen (http://thesassway.com/beginner/getting-started-with-sass-and-compass) und die daraus generierten .css Files auf den Webserver laden (fĂŒr die Entwicklung in meinen Augen völliger KĂ€se, außer man bindet den entsprechenden FTP Folder als Netzlaufwerk ein. Die Möglichkeit der direkten „Portierung“ zu CSS Files bietet SASS). Vorteil dieser Variante ist schlicht und ergreifend, dass man die tatsĂ€chliche SASS Lib nutzt und nicht die PHP Portierung.

                Wir wollten uns die zusĂ€tzliche Pflege lokaler Software und den Aufwand der Einrichtung allerdings schenken und setzen so auf die komplette online Variante mit den Modulen https://drupal.org/project/sassyhttps://drupal.org/project/prepro und der Library https://github.com/richthegeek/phpsass.

                Update: Inzwischen sind wir auf eine lokale Lösung mit Prepros umgestiegen, den Sync auf den Server erledigt unser Standard Tool WinSCP mit Hilfe der keepuptodate-Funktion, was inzwischen göttlich funktioniert. Die Entscheidung zum Umstieg erfolgte aufgrund etlicher Fehler in der PHP Portierung von SASS. Im kommerziellen Umfeld ist das nur mit EinschrĂ€nkungen zu genießen. 

                Die Einrichtung…

                … sollte jedem Drupalisten leicht von der Hand gehen: Module aktivieren, Lib in den vom Modul geforderten Ordner packen, aktivieren (nicht das Sassy Compass integration – Modul ĂŒbersehen!), prepro konfigurieren. Dann die .SCSS / .Sass Files im .info file des Themes eintragen und loslegen.

                Ein paar „Fakten“:

                • SCSS ist fĂŒr Einsteiger einfacher zu erlernen
                • SASS ist etwas kompakter zu schreiben
                • Die PHPSass Portierung des eigentlichen Ruby Projekts Sass ist sicher nicht perfekt, aber lĂ€uft im großen und ganzen rund genug um damit arbeiten zu können.
                • Compass ist in der PHPSass portierung bereits enthalten (die schönste ErklĂ€rung zu Compass ist sicher der Vergleich zu Javascript und jQuery – Compass ist Ă€hnlich hilfreich, stellt vordefinierte @mixins zur VerfĂŒgung. .

                Schöne Dokumente zum Thema:

                Hilfreiche Tools

                VerfĂŒgbare Editoren

                • Ich nutze Netbeans, welches in der aktuellen Dev Version (NetBeans IDE Dev (Build 201309191137)) SASS / SCSS ohne weitere Module unterstĂŒtzt (die Alternative ist das folgende Plugin: http://plugins.netbeans.org/plugin/34929 – welches bei mir allerdings nur unzureichend funktionierte)
                • Empfohlen wird weiterhin http://www.sublimetext.com/

                Du brauchst UnterstĂŒtzung bei deinem Drupal Webdesign-Projekt? Sprich uns an.

                  Sidebar auf gleiche Höhe wie den Content bringen (jQuery)

                  Das Problem besteht schon, solange es Webdesign gibt. Per CSS gibt es nur die bekannten Möglichkeiten per position:absolute; + top:0; + bottom:0; oder aber per background-image. Diese Möglichkeiten sind bei Flexiblen (responsive) Seiten allerdings oft unbrauchbar. Zudem hat die Absolute-Methode das Problem, dass hier die Sidebar keinesfalls lĂ€nger sein darf als der Content, sonst ĂŒberlappt diese in den Footer, oder sogar aus der Seite heraus.

                  Per jQuery ist das ganze natĂŒrlich kein wirkliches Problem:

                  /* Full Height Sidebar */
                  function fullHeightSidebar() {
                    (function($) {
                  
                      jQuery(window).load(function (){ // execute when document.ready scripts are finished
                        var heightContent = $('#content-column').height();
                        var heightSidebar = $('.region-sidebar-second').height();
                  
                        if( heightContent > heightSidebar){
                          $('.region-sidebar-second').css('height',heightContent);
                        }
                      });
                  
                    })(jQuery);
                  }
                  

                  Hier ist das ganze schon in ein Resize Script gekapselt, dieses mĂŒsst Ihr bei euch ggf. ergĂ€nzen, damit es dann auch live, on resize, etc. funktioniert.

                    Facebook Cover Foto QualitÀt

                    Zu diesem Thema wurde schon schwadroniert bis die Schwarte kracht, ich spare mir hier jetzt lange AusfĂŒhrungen und verrate einfach die Lösung 😉

                    1. Das Coverphoto muss exakt die Maße 851×315 aufweisen (Stand 18.08.2013 – sobald Facebook skalieren muss, ist das Ergebnis MATSCH.)
                    2. In Photoshop unter FĂŒr Web- und GerĂ€te Speichern als PNG-24 speichern.
                    3. Fertig. Das Ergebnis ist hier perfekt, kein QualitÀtsverlust feststellbar.