So i wanted to try it myself and migrated a former gulp build to esbuild.

But as it showed the gulp build was not so modern, as it was just Sass and Javascript minification. No ES6, No React, no JSX with inline styles.

So Esbuild was not working out of the box but needed some extra config and the Sass plugin.

npm i -d esbuild esbuild-plugin-sass

Also I had to rewrite the Javascript to use ES6 modules, but this was fortunatly easy.

When using a plugin we need to create our own build file and configure esbuild to use the Sass plugin.
esbuild.js:

const esbuild = require('esbuild');
const sassPlugin = require('esbuild-plugin-sass');

esbuild.build({
  entryPoints: ["main.js"],
  bundle: true,
  minify: true,
  format: 'iife',
  platform: 'browser',
  outfile:"main.min.js",
  plugins: [sassPlugin()]
}).catch((err) => {
  console.log(err)
})

Ok, but where are the Sass files now?
With ES6 you can import styles and then esbuild & the sassPlugin can follow this path from the entrypoint file and create the CSS file from the source Sass file.

So in main.js import the styles:

import $ from 'jquery'
import './style.scss'
...

Now you can call the esbuild.js file:

node ./esbuild.js

(Yeah no file watchers here, just manual trigger ;))

This will bundle the javascript to main.min.js and also create a main.min.css file.

Then include this in your HTML

<link rel="stylesheet" href="/main.min.css"> 
<script src="/main.min.js"></script>

and you are done. :)

(If there is more extensive documentation available concerning assetic + CompassFilter, please stop reading on and let me know!)

If you take a look at the filter class itself (it is CompassFilter in the generic Assetic\Filter namespace), you should recognise several option values that you can use in your application wide config.yml file.

But first you have to install the framework plugin following these instructions.

After adding the framework plugin by ruby’s own package manager “gem” (hopefully replaced by composer in the near future ;-)) by typing something like

$ gem install zurb-foundation

the only thing remaining to do is to load the framework plugin by assetic. To do so, put the folloging lines to your config.yml assetic section (as you would do it when using the compass command line interface, refer to the output of

$ compass help compile

.)

The yaml file should look like this:

assetic:
    read_from: %kernel.root_dir%/web
    debug: %kernel.debug%
    use_controller: %kernel.debug%
    filters:
        compass:
            plugins: ['zurb-foundation'] 
            # load foundation                                     
            # framework as you would do by typing
            # $ compass compile --require 
            # zurb-foundation [...]
            # [ ... ]

Now you should be able to import the foundation library files by using the @import statement in your *.sass/*.scss files:

@import "foundation";

Have fun!

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:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        {% stylesheets
                '@NerdpressDemoBundle/Resources/public/css/main.css'
                '@NerdpressDemoBundle/Resources/public/css/layout.css'
        	filter='less,?yui_css'
                combine=true
        %}
          <link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="all" />
        {% 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…

Cross Browser Helper

Html 5 Validator (en)

http://html5.validator.nu/

Html5 Browser capability test (en)

http://html5test.com/

Html readyness – fancy browser comparison (en)

http://html5readiness.com/

Modernizr – Cross-Browser Html5 & CSS3 Support (en)

http://www.modernizr.com/

Html5Shiv – Html5 for IE (en)

http://code.google.com/p/html5shiv/

IE-7 js – Standard complient IE 7 (en)

http://code.google.com/p/ie7-js/

Html 5 CSS-Reset (en)

http://html5reset.org/
http://html5doctor.com/html-5-reset-stylesheet/

HTML 5 Boilerplate – Best Practices, Scripts und Server-Konfigurationen

http://html5boilerplate.com/ (en)
http://de.html5boilerplate.com/ (de)

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/

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

(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:

<style type="text/css">
/*<![CDATA[*/
  @namespace hanswurst url(https://www.meins.int)

  hanswurst|kaese
  {
    color: red;
  }
/*]]>*/
</style>
<hanswurst:kaese>
  Hanswurst liebt käse
</hanswurst:kaese>

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

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/

.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:

<script src="DD_roundies.js" type="text/javascript">
</script>
<script type="text/javascript">
DD_roundies.addRule('.roundie', '5px');
</script>

good thing.

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