Best practice: Truthy and falsy values in JavaScript 0

The following example shows how the types of functions and objects can be used to detect the capability of a web browser. The example shows the detection of the WebRTC functionality in a standard way and then uses the ternary operator and the behaviour of truthy and falsy values to refactor the code. The business logic is written in a self-executing function.

Weiterlesen …

JEE: Texte aus Resource Bundle laden 0

Die nachfolgend dargestellten Möglichkeiten zeigen, wie Zeichenketten (engl. Strings) aus einem Resource Bundle (bestehend aus einer Properties-Datei) geladen werden können.

Weiterlesen …

Aktueller CSS Media-Query zur Anzeige von hochauflösenden Bildern 0

Ich habe heute einen sehr interessanten und aktuellen Artikel über die Einbindung von CSS Media-Queries zur Anzeige von Grafiken auf hochauflösenden Displays gelesen. Der Ursprung liegt in der Markteinführung des Apple iPhone 4 und folgender CSS-Deklaration:

.image {
  background-image: url("images/200_200.png");
  width: 200px;
  height: 200px;
}
 
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .image {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Inzwischen verfügen aber auch Smartphones mit Android oder Windows-Phone Betriebssystemen über die Möglichkeit zur Darstellung von hochauflösenden Grafiken auf hochauflösenden Displays. Im Wandel der Zeit hat sich daher auch die zur verwendende CSS Media-Query-Eigenschaft angepasst (siehe Retina Display Ready With Media Query):

@media 
/* WebKit based browsers (Chrome, Safari, latest Opera) */
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
/* Older Firefox browsers (prior to Firefox 16) */
only screen and (min--moz-device-pixel-ratio: 2),   
/* Opera Mini & Opera Mobile */
only screen and (-o-min-device-pixel-ratio: 3/2),  
/* Kindle Fire, Kindle HD */
only screen and (min-device-pixel-ratio: 1.5),  
/* The standard way: dots-per-physical-inch */
only screen and (min-resolution: 2dppx),
/* dppx-Fallback: dots-per-CSS-inch */
only screen and (min-resolution: 192dpi) {
  .image {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Der empfohlene Weg ist demnach die Verwendung des Kriteriums “min-resolution”. Googles Chrome-Browser zeigt in der Developer Console sogar eine Meldung an, falls ein anderer Media-Query verwendet wird:

Consider using ‘dppx’ units instead of ‘dpi’, as in CSS ‘dpi’ means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual ‘dpi’ of a screen.

Für die Unterstützung älterer Geräte müssen weiterhin die anderen Eingrenzungen verwendet werden. Damit die Media-Queries wie erwartet funktionieren, muss im HTML-Dokument folgendes HTML-Tag im Kopfbereich gesetzt werden:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Die Zukunft verspricht jedoch eine Ablösung des Viewport-Meta-Tags durch folgende CSS-Angaben (siehe An introduction to meta viewport and @viewport):

@-webkit-viewport { width: device-width }
@-moz-viewport { width: device-width }
@-ms-viewport { width: device-width }
@-o-viewport { width: device-width }
@viewport { width: device-width }

Um der Flut an herstellerspezifischen Angaben gerecht zu werden, empfehle ich die dynamische Stylesheet Sprache Less in Kombination mit LESS Hat 2. Wer nur LESS benutzen möchte, der kann sich mit folgendem Mixin behelfen:

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 2)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)",
~"only screen and (min-resolution: 2dppx)",
~"only screen and (min-resolution: 192dpi)";
 
.image {
  background-image: url("images/200_200.png");
  width: 200px;
  height: 200px;
  @media @highdensity {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

JSF-Komponenten dynamisch erstellen 0

Variante 1:

import javax.faces.context.FacesContext;
import javax.faces.application.Application;
import javax.faces.component.html.HtmlInputText;
 
...
 
FacesContext context = FacesContext.getCurrentInstance();
Application app = context.getApplication();
HtmlInputText input = (HtmlInputText) app.createComponent(HtmlInputText.COMPONENT_TYPE);

Variante 2:

import javax.faces.component.html.HtmlInputText;
 
...
 
HtmlInputText input = new HtmlInputText();

JSF-Speicherort für Ressourcen (CSS / JS, …) 0

Damit in einer JSF-Seite verschiedene Dateien (Cascading Style Sheets, JavaScripts, …) aufgefunden und inkludiert werden können, müssen diese Dateien unter einem bestimmten Hauptordner abgelegt werden. Standardmäßig gültig sind dafür folgende Pfade:

src\main\webapp\resources
src\main\resources\META-INF\resources

Die jeweiligen Dateien können dann mit Angabe ihres Unterordners (library) und Namens (name) eingebunden werden:

Beispiel

  <h:outputStylesheet library="libs/pikaday/1.2.0" name="pikaday.css" />
  <h:outputScript library="libs/pikaday/1.2.0" name="pikaday.js" />

Java 8 Lambdas in Action 0

Zur Veranschaulichung der mit Java 8 eingeführten Lambda-Ausdrücke, möchte ich hier kurz ein paar Code-Beispiele zeigen, die den Einsatz von Lambdas demonstrieren. Die Beispiele basieren auf einer Demo von Paul Sandoz auf der Java 8 Launch Party 2014 in Berlin.

Weiterlesen …

Microsoft Certified Professional Logo
 

Werbung


+Benny Neugebauer