Neues Projekt mit GitHub verbinden 0

Schritte:


cmd: git init
cmd: git remote add origin https://github.com/username/Hello-World.git
SmartGit: Open repository
SmartGit: Ignore and commit files (manually)
cmd: git pull origin master
cmd: git push origin master

NetBeans LESS CSS Preprocessor und Maven Resources 0

Die folgenden Pfade sollen dabei helfen, eine Übersicht darüber zu bekommen, wohin Ressourcen aus einem JEE-Webarchiv bei einem Maven-Buildvorgang kopiert werden. Als Beispiel soll eine CSS-Datei mit dem Namen test.css dienen.

Weiterlesen …

Quellcode in NetBeans und Visual Studio auf- und zuklappen 0

Normalerweise erlaubt die IDE das auf- und zuklappen von Quellcode nur bei Klassen- oder Methodendefinitionen. In Microsoft Visual Studio kann aber Quellcode, der von den Direktiven #region und #endregion umgeben ist, im Ganzen zusammengeklappt werden. Im genauen Beispiel sieht das dann so aus:

#region Hello World!
void myFunctionOne()
{
  ...
}

void myFunctionTwo()
{
  ...
}
#endregion

Die NetBeans IDE verfügt mit editor-fold über eine ähnliche Verhaltensweise wie Visual Studio mit #region.

// <editor-fold defaultstate="collapsed" desc="Hello World!">
  protected void myFunctionOne(
    ...
  }
 
  protected void myFunctionTwo(
    ...
  }
// </editor-fold>

Screenshot:

netbeans-editor-fold

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;
  }
}
Microsoft Certified Professional Logo
 

Werbung


+Benny Neugebauer