ASP.Net 5: In welchem NuGet-Paket ist der gewünschte Typ?

Mit ASP.Net 5 (ehemals vNext) kommen etliche Neuerungen auf einem zu. Eine der grössten dürfte das dynamisch zusammenstellbare .Net Core sein. Statt wie bisher das ganze .Net Framework zu verwenden, kann man nun nur noch das nutzen, was man wirklich benötigt.

Diese Flexibilität bringt nicht nur Vorteile, sondern auch neue Herausforderungen: In welchem der unzähligen NuGet Pakete liegt der von mir benötigte Typ? Und wie finde ich das heraus ohne das ganze .Net Framework nachzubauen?
ASP.Net 5: In welchem NuGet-Paket ist der gewünschte Typ? weiterlesen

Kurz-Tipp: Responsive Design einfach testen mit Window Resizer

Wer heutzutage Webapplikationen erstellt wird kaum um das Thema Responsive Design herum kommen. Dabei geht es um die Anpassungsfähigkeit einer Webseite an verschiedene Bildschirmgrössen. Schliesslich soll die Anwendung nicht nur auf dem Laptop bedienbar sein sondern auch auf dem Smartphone zum Verweilen einladen.

Die technische Seite wird durch Frameworks wie Bootstrap gut abgedeckt und dürfte den meisten Entwicklern bekannt sein. Wenn es allerdings ums Testen der einzelnen Auflösungen geht stutzt man das Browserfenster meist von Hand zurecht. Dies mag zwar ein gangbarer Weg sein, doch ist dies mühsam und ungenau.

Viel einfacher und schneller ist es eine entsprechende Erweiterung für den Browser zu installieren. Davon gibt es für jeden Browser mehr als genug, doch kaum eine kommt an Window Resizer von Ionut Botizan für Chrome heran. Diese Erweiterung ist auf genau einen Zweck optimiert und lässt einem die voreingestellten Fenstergrössen um beliebige eigene Formate erweitern.

Window Resizer

Für mich gibt aber eine Tastenkombination den Ausschlag Window Resizer zu verwenden: Mittels [Strg] + [Umschalt] + [Abwärtspfeil] lässt sich sehr schnell durch die einzelnen Fenstergrössen durchschalten. Dies ist sehr praktisch wenn man nicht nur wissen will ob eine bestimmte Grösse funktioniert sondern ob alles noch wie gewünscht aussieht.

Hat man sich einmal an die damit gewonnene Flexibilität gewöhnt will man so eine Erweiterung nicht mehr missen.

Praktische Helfer rund um AngularJS

Wenn man sich ein wenig tiefer mit AngularJS beschäftigt stösst man bald einmal an eine steile Lernkurve. Was mit einfachem Data Binding angefangen hat wird plötzlich sehr kompliziert – vor allem wenn es an Direktiven geht. Mit den richtigen Helfern lässt sich allerdings viel vereinfachen. Einige dieser praktischen Werkzeuge und Pakete möchte ich heute vorstellen.

 

Batarang

Eines der häufigsten Probleme auf die ich treffe sind fehlende Daten. Objekte sind nicht dort wo ich sie erwarte oder Listen enthalten nicht die gewünschten Elemente. Aus einer kleinen Änderung wird so schnell eine endlose Suche nach dem Grund eines fehlgeschlagenen Data Bindings.

Batarang ist eine Erweiterung von Chrome und kann nicht nur als Profiler und Debugger verwendet werden, sondern auch zum anzeigen des Scopes. Dies vereinfacht die Suche nach den richtigen Objekten ungemein. Die Handhabung für die einfachen Aufgaben hat man sehr schnell im Griff, für alle anderen Möglichkeiten empfiehlt sich ein Blick in die Anleitung.

Batarang

 

Mehrere Browser zusammen verwenden

Als erstaunlich hilfreich hat sich für mich die Verwendung mehrerer verschiedener Browser erwiesen. Die Fehlermeldungen im Internet Explorer sind gelegentlich besser als die im Firefox, während dieser hin und wieder bessere Meldungen erzeugt als Chrome. Und um es richtig spannend zu machen liefert dann Chrome wiederum die besseren Meldungen als der Internet Explorer.

Kurzum: Um bei einem Problem die bestmögliche Unterstützung durch die Tools für Webentwickler zu bekommen muss man alle 3 Browser installiert haben. So kann man im Fehlerfall zwischen den Browsern hin und her wechseln bis man die Ursache des Problems angezeigt bekommt.

 

Plunker

Hin und wieder genügt der Debugger nicht und es führt nichts an einem 2. Paar Augen vorbei. Um ein Minimalbeispiel ohne grossen Aufwand zugänglich zu machen hat sich für mich der Service von Plunker (Plnkr.co) als äusserst hilfreich erwiesen.

Neben der Community-Funktion gibt es vor allem einen guten Editor der einem die aktuellsten Pakete von AngularJS, Bootstrap und vielen mehr einfach integrieren lässt. So kann man sehr schnell eingrenzen ob das Problem an der eigenen Installation liegt oder ob auch auf einem funktionierenden System die gleichen Probleme bestehen.

Plunker

 

ngMock

AngularJS hat ein eigenes Mocking-Framework. Gerade wenn man Webservices nutzt die nicht unter der eigenen Kontrolle stehen oder man auf eine aufwändige lokale Installation verzichten will ist ngMock eine gute Hilfe. Damit ersetz man zwar keine durchgängigen Tests, aber man kann Probleme eingrenzen die im eigenen Code liegen.

 

ngAnimate

Um den Wechsel zwischen den einzelnen Masken und Seiten ein wenig spannender zu gestalten kann einem ngAnimate viel Arbeit abnehmen. Die entsprechenden Hooks können direkt im Code mit der gewünschten Animation verknüpft werden, was einem sehr viel Tipparbeit erspart.

 

Animate.css

Wer wie ich nicht gerne CSS-Animationen von Hand schreibt sollte unbedingt die vorgefertigten Skripte von Animate.css ausprobieren. In diese Animationen wurde sehr viel Arbeit gesteckt um einen möglichst angenehmen Bewegungseffekt zu erzielen. Um darauf aufzubauen genügt es die entsprechende CSS-Datei einzubinden und an der passenden Stelle aufzurufen.

 

Jasmine

Das JavaScript-Testframework Jasmine hatte ich hier schon kurz beschrieben. Je mehr man mit AngularJS macht desto wichtiger wird es automatisch die bestehende Funktionalität zu überprüfen. Jasmine hat sich diesbezüglich bei mir bewährt und ich kann dieses Framework nur empfehlen.

 

Fazit

Mit den richtigen Werkzeugen kann man auch bei AngularJS viel Zeit und Frust einsparen. Da diese alle kostenlos zur Verfügung stehen gibt es keinen Grund nicht einmal einen Blick auf das eine oder andere Tool zu werfen.

Wie immer freue ich mich über weitere Vorschläge um meine Arbeit noch ein wenig einfacher zu gestalten.

Buch-Rezension zu “Training Guide: Programming in HTML5 with JavaScript and CSS3”

HTML5 & CSS3 Training GuideWer sich für die Zertifizierung 70-480 “Programming in HTML5 with JavaScript and CSS3” vorbereitet trifft bald einmal auf den gleichnamigen Training Guide von Glenn Johnson. Dieser ist nicht nur auf der offiziellen Seite zur Prüfung als Vorbereitungsmaterial aufgeführt, sondern folgt auch dem Aufbau der Trainingsbücher von Microsoft Press für die .Net 4 Zertifizierungen.

Diese Bücher waren mal besser und mal schlechter geeignet
um neben der Prüfung auch im Praxisalltag eingesetzt zu werden. Man konnte sich damit aber immer gut auf die Zertifizierung vorbereiten. Mit diesem Training Guide ist dies leider nicht der Fall.

 

Prüfungsumfang nicht abgedeckt

Noch im Intro gibt es einen kleinen und wichtigen Hinweis der gerne überlesen wird:

This book covers some of the topics and skills that are the subject of the Microsoft certification exam 70-480. If you are using this book to complement your study materials, you might find this information useful. Note that this book is designed to help you in the job role; it might not cover all exam topics.

Wie gross die Lücke zwischen Training Guide und Prüfung ist hängt von der Interpretation der bewerteten Fähigkeiten ab. Man wird aber kaum um zusätzliche Bücher und viel eigenen Code herumkommen um sich gut vorzubereiten.

Da das Buch aber dennoch sehr auf die Prüfung fokussiert ist sind in der Praxis zusammenhängende Arbeiten über mehrere Kapitel verstreut. Ein ständiges hin und her ist damit unvermeidlich und schmälert den Nutzen abseits der Zertifizierung erheblich.

 

Zielpublikum?

Bisher ist mir nicht klar an wen sich dieses Buch eigentlich richtet. Als Vorbereitung für die Prüfung fehlt zu viel, für den Praxisalltag passt die Struktur nicht. Da die Grundlagen ebenfalls nur unzureichend behandelt werden ist es auch nicht als Einstiegsbuch in die Themen HTML5 und CSS3 geeignet.

Übrig blieben somit noch die Entwickler die ihre ModernUI-Anwendungen nicht mehr in C# sondern in HTML5 und JavaScript schreiben wollen. Allerdings wird dieses Thema nur im 1. Kapitel behandelt und was dort steht hilft einem auch nur bei der Auswahl der richtigen Visual Studio Version.

 

Alternativen

Als zwingende Ergänzung und je nach Wissensstand auch als Alternative kann ich diese Bücher empfehlen:

In diesen 3 Büchern wird weit mehr behandelt als für die Zertifizierung notwendig ist, allerdings helfen einem diese Konzepte wartbaren Code zu schreiben. Den Zeitaufwand dürfte man so schnell eingespart haben.

 

Fazit

Trotz zahlreicher guter Erklärungen kann ich dieses Buch nicht weiterempfehlen. Der mit dem Titel implizierte Hauptzweck der Prüfungsvorbereitung wird zu wenig umgesetzt und als Praxisbuch sind die behandelten Themen zu verzettelt.

Wer sich weder für die Zertifizierung noch für Windows Store Apps interessiert findet mit “HTML 5 and CSS 3” eine deutlich bessere Alternative.

 

Zum Buch

Training Guide: Programming in HTML5 with JavaScript and CSS3” von Glenn Johnson, 2013 Microsoft Press, ISBN 978-0-7356-7438-7, 682 Seiten, Englisch

Buch-Rezension zu “HTML5 and CSS3 (2nd edition)”

HTML5 and CSS3HTML5 und CSS3 sind in aller Munde. Wo man auch hin sieht findet man schöne Beispiele die mit den neusten Browser-Versionen wunderbare Möglichkeiten bieten. Was aber macht man wenn die eigenen Seitenbesucher noch mit IE 8 unterwegs sind? Verzichtet man auf diese Möglichkeiten? Oder bastelt man eine Umgehungslösung?

Brian Hogan lieferte mit seinem Buch “HTML5 and CSS3” ein praxisbezogenes Handbuch um auch in solchen Situationen zu bestehen. Er beschreibt leicht verständlich den aktuellen Stand der HTML5 Spezifikation und wie man diesen in die eigene Webseite integriert. Dabei legt er sehr grossen Wert auf die Abwärtskompatibilität und erklärt eingehend wie man mittels Modernizr ein vergleichbares Verhalten auch für ältere Browser anbieten kann.

Seine Beispiele haben mir sehr geholfen um mich ins Thema HTML5 einzuarbeiten. Da diese nur genau das jeweils besprochene Feature behandeln musste ich nicht lange den Code nach den richtigen Anweisungen durchsuchen. Dies ist vor allem beim erweitern der eigenen Webanwendung sehr hilfreich. Da hat man meistens nicht Zeit um zahlreiche Beispiele nochmals nachzuvollziehen nur um die 2-3 Zeilen Code zu finden, die einem noch fehlen. Wer sich selber von den Beispielen überzeugen will findet diese bei PragProg.com.

Wer allerdings noch nie etwas mit HTML gemacht hat wird mit diesem Buch nicht glücklich. Dies ist definitiv kein Einsteigerbuch sondern richtet sich an Leute die über Erfahrung mit HTML 4 verfügen und möglichst auch schon jQuery verwendet haben. Erfüllt man diese Voraussetzungen führt aus meiner Sicht kein Weg an diesem Buch vorbei.

 

Fazit

Weder ist HTML5 nur unnötiger Schnickschnack noch braucht man zwingend den neusten Browser. Mit ein wenig Rücksichtnahme kann man sehr wohl die neuen Möglichkeiten von HTML5 und CSS3 auch für “richtige” Web-Anwendungen nutzen.

Das Buch von Brian Hogan liefert einem die nötigen Grundlagen um ohne grosses googeln loszulegen. Da seine Beispiele sehr praxisrelevant sind eignen sie sich auch gut um den eigenen Code darauf aufzubauen. So kann man schnell erste Ergebnisse erzielen und schrittweise die eigenen Anwendungen Richtung HTML5 weiterentwickeln.

 

Zum Buch

HTML5 and CSS3 (2nd edition)” von Brian P. Hogan, 2013 The Pragmatic Programmers, ISBN 978-1-9377-8559-8, 300 Seiten, Englisch

Bootstrap auf Version 3 aktualisieren

So praktisch Bootstrap für optisch ansprechende Webseiten auch ist, so gibt es doch etwas was man bedenken muss: Wie jede andere Abhängigkeit in einem Software-Projekt muss auch Bootstrap aktualisiert werden. Was harmlos tönt kann schnell recht aufwendig werden, vor allem wenn so viel geändert wurde wie beim Wechsel von 2.x auf 3.0.

 

Zahlreiche Veränderungen

Zwischen Version 2 und 3 gab es bei Bootstrap zahlreiche Veränderungen. Unzählige CSS-Klassen wurden umbenannt, JQuery wird nun direkt verwendet und Responsive Webdesign ist ab sofort zwingend. Wenn diese Veränderungen auch allesamt in die richtige Richtung gehen, so bedeutet dies vor allem Arbeit.

Bevor man sich an die Arbeit macht auf Version 3 zu aktualisieren sollte man sich unbedingt den Migrationsleitfaden anschauen. Darin werden alle Klassen aufgeführt die verändert, entfernt oder neu hinzugekommen sind. Da alles was in dieser Liste enthalten ist angepasst werden muss sollte man sich die nötige Zeit nehmen und die Liste in Ruhe durchlesen.

Beim Grid-System gibt es ebenfalls Änderungen. Neu gibt es 4 Grid-Grössen die über die col-XX- Klasse definiert werden. Wenn man vor hat das Grid zu verändern sollte man dies gleich von Anfang an machen. Ansonsten darf man ein zweites Mal die CSS-Klassen umbenennen.

 

Suchen und Ersetzen

Der Wechsel von den alten auf die neuen Klassen lässt sich am einfachsten mittels Suchen und Ersetzen bewerkstelligen. Wer sich an die Standardvorlage gehalten hat dürfte mit dieser Tabelle schon weit kommen:

2.x 3.0
btn-danger btn btn-danger
btn-success btn btn-success
alert alert-error alert alert-danger
row-fluid row
span2 col-md-2
span3 col-md-3
span4 col-md-4

 

Die Vorlage plündern

Wer noch den Internet Explorer 8 unterstützen muss schaut sich am besten gleich das Starter-Template an und kopiert dort die entsprechenden Header-Zeilen heraus:

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

JQuery und die JavaScript-Teile von Bootstrap können ebenfalls dort entnommen werden und gehören ans Ende der Seite direkt vor den Body-Tag:

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../../assets/js/jquery.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>

 

Wo es komplizierter wird

Die Probleme beginnen meist bei den eigenen Anpassungen. Durch Veränderungen in der Vererbungshierarchie stimmen plötzlich die Abstände zwischen den Rändern nicht mehr ganz genau überein. Bis dies wieder stimmt kann man in den CSS Dateien hin und her experimentieren. Allerdings kann es so vorkommen dass der eine CSS-Fehler den man in der Liste jagt seine Ursprung an einer ganz anderen Stelle hat.

Statt sich diesen Problemen auszusetzen sollte man besser eine Seite wie Bootply.com benutzen. Dort kann man im Browser eine Bootstrap-Vorlage nach seinen Wünschen verändern und sich die Auswirkungen gleich anzeigen lassen.

Bootply

Wenn es dort geht und bei der eigenen Datei nicht liegt es wohl doch eher am eigenen Code und nicht an Bootstrap…

 

Fazit

Ich bin nach wie vor von Bootstrap überzeugt. Man muss sich allerdings bewusst sein das man sich den Zeitgewinn bei der Erstellung der Seite mit einem zusätzlichen Wartungsaufwand erkauft. Dies gilt nicht nur für Bootstrap, sondern für jede Abhängigkeit. Ob sich dieser Zusatzaufwand lohnt muss jeder für sich selber entscheiden.