CSS | Nerdpress.org

[Symfony 2] AsseticBundle, Less CSS & YUI Compressor unter OSX installieren

admin — Thu, 25 Aug 2011 16:55:02 +0000

Das AsseticBundle ist ein Wrapper um Assetic, ein geniales Tool, um statische Assets für Webprojekte zu verwalten. AsseticBundle ist extrem einfach zu verwenden, einfach die entsprechende Filter-Chain via yaml konfigurieren, um mehr muss man sich nicht kümmern. Natürlich allerdings müssen die zugrundeliegenden Abhängigkeiten im Vorfeld installiert sein. In unserem Falle benötigen wir den Yui-Compressor als jar-File und Less CSS. Less ist ein node.js Modul, was bedingt, dass wir zuvor node.js installieren müssen.

Also node.js via macports holen:

$ sudo port install nodejs

Und den node.js-eigenen Package-Manager:

$ sudo port install npm

Mit diesem installieren wir als nächsts less, und zwar “global” (via -g)-Flag (“global” bedeutet, dass das Modul unter $nodejs_lib_path/../node_modules abgelegt wird, ansonsten wird es im aktuellen Arbeitsverzeichnis unter ./node_modules installiert):

$ sudo npm install -g less

Damit haben wir alles, um unsere less CSS Stylesheets kompilieren zu können.

Als nächstes holen wir uns den Yui-Kompressor, diesen habe ich mir einfach aus dem Netz gezogen und unter app/java/yuicompressor-2.4.6.jar abgelegt (Die Binary findet ihr unter http://developer.yahoo.com/yui/compressor/).

Nun die Konfiguration:

app/config.yml:

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~
        less:
          node: /opt/local/bin/node
          node_paths: [/opt/local/lib/node, /opt/local/lib/node_modules]
        yui_css:
          jar: %kernel.root_dir%/java/yuicompressor-2.4.6.jar

Zu beachten sind die “node_paths”. Der node.js-Modulpfad muss explizit angegeben werden, sonst kann node.js die require()-Statements nicht auflösen (das sind sozusagen die node.js-“Classpaths”). /opt/local/lib/node zeigt auf Core-Module, in /opt/local/lib/node_modules liegt unser less.

Um den Yui-Kompressor zu aktivieren, reicht der simple Pfad zur .jar-Datei.

Nun müssen wir nur noch unser Twig-Layout anpassen:

src/Nerdpress/DemoBundle/Resources/views/layout.html.twig:



    
        
        {% stylesheets
                '@NerdpressDemoBundle/Resources/public/css/main.css'
                '@NerdpressDemoBundle/Resources/public/css/layout.css'
        	filter='less,?yui_css'
                combine=true
        %}
          
        {% endstylesheets %}

Das “?” vor dem Filter “yui_css” bedingt, dass die CSS-Compression nur angeschaltet wird, wenn der Debug-Parameter auf false steht. “Combine” bedeutet, dass alle CSS-Dateien in einer einzigen, großen Datei zusammengefügt werden, und “less” bedeutet letztlich, dass alle CSS-Dateien mittels less CSS precompiled werden.

That´s it. Die Seite im Browser öffnen und das Ergebnis bewundern. Viel Spaß! Symfony ist schon was feines…

The post [Symfony 2] AsseticBundle, Less CSS & YUI Compressor unter OSX installieren first appeared on Nerdpress.org.

HTML5 – Sammlung von Ressourcen, Dokus und Browser-Fallbacks

admin — Sat, 27 Nov 2010 16:48:43 +0000

Hier mal eine anfänglich kleine Sammlung zum Thema HTML 5 generell – grob kategorisiert. Vervollständigungen und Streichungen willkommen.

Cross Browser Helper

Audio/Video

Html 5 Audio and Video – What you must know (en)

http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

Video accessiblity (en)

http://wearehugh.com/public/2010/08/html5-video-accessibility/Your text to link…

Canvas

Reference Guide (de)

http://canvas.quaese.de/

Canvas beginners guides (en)

http://www.brighthub.com/internet/web-development/articles/38744.aspx
http://www.visitmix.com/Articles/Translating-CANVAS-with-HTML5

Canvas demos & tutorials (en)

http://www.canvasdemos.com/

Cookbooks & Tutorials

Html 5 cheatsheet

http://websitesetup.org/html5-cheat-sheet/

WHATWG Weblog (en)

http://blog.whatwg.org/

Html 5 laboratory (en)

http://www.html5laboratory.com/

Dive into Html 5 (en)

http://diveintohtml5.org/

Html5 Playground (en)

http://www.html5rocks.com/

Tag reference (en)

http://www.w3schools.com/html5/html5_reference.asp

Fancy tag reference (en)

http://joshduck.com/periodic-table.html

Html5 Techniques – Ultimate collection of tutorials (en)

http://www.tutoriallounge.com/2010/11/html5-techniques-ultimate-collection-of-tutorials/

Useful html 5 code snippets (en)

http://www.onextrapixel.com/2010/11/15/useful-html5-code-snippets-you-can-use-today/

Geolocation using the Google API (en)

http://papermashup.com/html5-geo-location-using-the-google-api/

Fun with html5 forms

http://thinkvitamin.com/code/fun-with-html5-forms/

Blog-Artikel & andere Quellen

Webkrauts Artikel zum Thema (de)

http://www.webkrauts.de/category/html5-einfuehrung/

What beautiful Html5 code looks like (en)

http://css-tricks.com/what-beautiful-html-code-looks-like/

48 Flash killing HTML 5 demos (en)

http://www.hongkiat.com/blog/48-excellent-html5-demos/

HTML 5 facts & myths (en)

http://www.smashingmagazine.com/2010/09/23/html5-the-facts-and-the-myths/

Learning to love html 5 (en)

http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/

Designing a html 5 layout from scratch (en)

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

The post HTML5 – Sammlung von Ressourcen, Dokus und Browser-Fallbacks first appeared on Nerdpress.org.

SlickMap CSS – visuelle Sitemaps in HTML / CSS

Max Girkens — Sun, 30 May 2010 12:46:41 +0000

visuelle Sitemaps in XHTML / CSS.
Ein Stylesheet um unordered Lists als Sitemap darzustellen.

http://astuteo.com/slickmap/
http://astuteo.com/slickmap/demo

The post SlickMap CSS – visuelle Sitemaps in HTML / CSS first appeared on Nerdpress.org.

[Jquery]Namespaces via CSS-Selector adressieren

admin — Thu, 29 Apr 2010 21:38:59 +0000

Vielleicht braucht es mal jemand, jedenfalls lassen sich “genamespacete” Tags in einer DOM (XML)document Instanz recht einfach mittels \: als Separator adressieren. Ein Beispiel: Ich möchte ein Dublin-Core Metadatum aus einem beliebigen Feed lesen:

(function($) {

  $('item').each(function() { $(arguments[1]).find('dc\:creator').[...]() } );

})(jQuery);

Dies entspricht wohl rein syntaktisch nicht ganz dem entsprechendem CSS3-Proposal (einzusehen unter http://www.w3.org/TR/css3-selectors/#typenmsp). Ich habe beide Möglichkeiten interessehalber auch einmal in einem aktuellen FF3.6 und Chromium getestet:



  Hanswurst liebt käse

Ergebnis: Naja, klappt nicht. Eventuell hat jemand eine Idee oder kann mich korrigieren?

The post [Jquery]Namespaces via CSS-Selector adressieren first appeared on Nerdpress.org.

vim2html

admin — Tue, 09 Feb 2010 12:32:02 +0000

Meinen Lieblingseditor vim brauche ich an dieser Stelle ja nicht en detail vorzustellen.

Ein Feature allerdings, über das ich erst nach jahrelanger Nutzung gestolpert bin, passt sehr gut ins nerdpress: 2html.

Was dieses Kommando macht?

Na, HTML-Code aus dem Inhalt des aktuellen Puffers as is erzeugen – optional mit Zeilennummern und CSS-Code.

Und so geht das:

Syntaxhighlighting einschalten
```
:syntax on
```

den Code erzeugen

:runtime! syntax/2html.vim  [oder :TOhtml]

vim springt direkt in das neue split-Fenster, dort sollte man den Code direkt speichern
```
:w
```

fertig.

Falls man die Zeilennummern drin haben möchte, hilft vor der HTML-Erzeugung folgendes Kommando

:let html_number_lines = 1

Und wenn es CSS sein soll, statt der älteren Font-Tags, geht auch das

:let html_use_css = 1

Einfacher geht es kaum… oder?

The post vim2html first appeared on Nerdpress.org.

Eclipse Galieo mit Aptana und PDT

Max Girkens — Tue, 12 Jan 2010 20:35:04 +0000

Aptana hatte sich ja in den letzten Versionen am PHP Support versucht.
Was mir als großem Fan von PDT garnicht so gut gepasst hat.
Damit war nämlich die Variante Aptana (als Eclipse Plugin) mit PDT zu kombinieren eher schwierig, soweit ich mich erinnern kann.

Jetzt hat Aptana das Vorhaben aber an den Nagel gehängt.
Und das macht die Sache meiner Meinung zu einer guten Kombination mit PDT, wenn man Eclipse für Webentwicklung benutzt.

Die neueste Version vom Aptana Plugin lässt sich super in Eclipse Galileo mit PDT installieren.
Und kommt auch sehr unauffällig daher, also auch ohne “you got new messages” , was man aus früheren Versionen noch in Erinnerung haben mag.

Ich benutze Aptana auch fast nur wegen seiner, meiner Meinung nach, sehr guten JS und CSS code-completion, outline und Syntax-Highlighting. Der YAML Editor ist auch ziemlich cool.
Mit der Kombination wird Eclipse wieder zu meinem Favoriten in der IDE Welt.

…zumal in Kombination mit
subversive (SVN)
RSE (SSH, FTP remote editing)
und bald hoffentlich auch egit (GIT)

The post Eclipse Galieo mit Aptana und PDT first appeared on Nerdpress.org.

Zen-Coding: Doping fürs Markup-Tippen

admin — Sun, 22 Nov 2009 12:47:58 +0000

Tim hat recht, das ist ‘ne nette Idee. Das Video angucken!

The post Zen-Coding: Doping fürs Markup-Tippen first appeared on Nerdpress.org.

Kleines Addon, große Wirkung.

admin — Sat, 21 Nov 2009 18:12:47 +0000

Check das aus. Dieses kleine, aber feine Addon erlaubt es, alle Stylesheets via Kontextmenu-Auswahl oder F9-Taste zu aktualisieren. Der Clou dabei: Das ganze geschieht on-the-fly, ohne dass ein Page-Reload nötig wäre. Jeder leidgeplagte RIA-Entwickler wird angesichts der offensichtlichen Macht dieses Addons in Ehrfurcht erstarren. Denn dadurch lässt sich der Zeitaufwand fürs CSS-Styling um mindestens 90% verringern, und dann macht diese Tätigkeit sogar wieder sowas wie Spaß.

Jeder, der mal mit Dojo, Firebug und der XmlHttpRequest-Konsole hantiert hat, wird sich sicher nur unter Schmerzen an die ewigen Ladezeiten zurückerinnern können. Mit diesem Mini-Addon spart man sich das andauernde Warten wenigstens beim Skinnen.

Einige Wermutstropfen gibt es allerdings: Mittels @import-Direktive eingebundene CSStylesheets werden nicht aktualisiert, Mac-User haben einen gewissen Eingewöhnungsaufwand, während der PC-Jünger einfach nur die F9 mit der F5-Taste tauschen muss ;). Und ihr Javaentwickler werdet weiterhin starke Nerven beim ewigen Deployment beweisen müssen. Aber dafür werdet ihr ja schließlich auch absolut überbezahlt ;)

Tschüss! Ahso, hiernochmalderlink: https://addons.mozilla.org/en-US/firefox/addon/46211/

The post Kleines Addon, große Wirkung. first appeared on Nerdpress.org.

CSS rounded corners feat. DD_roundies

Max Girkens — Sat, 05 Sep 2009 20:49:29 +0000

runde Ecken lassen sich ja in einigen Browsern mittels der entsprechenden proprietären border-radius CSS Eigenschaft gut realisieren. zB:

.roundie {
    -moz-border-radius:5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius:5px;
}

Klar, dass der feine IE da von Haus aus nicht mithalten kann. Zum Glück für ihn gibt es aber Drew Dillers’ DD_roundies.
Das Skript fixed diese IE’sche Unzulänglichkeit und man kann runde Ecken auch da ohne zusätzliches Markup haben.

viel Code braucht es dazu auch nicht:

good thing.

für den Opera hilft das aber vorerst alles nichts. Da bleibt es eckig.

The post CSS rounded corners feat. DD_roundies first appeared on Nerdpress.org.