HoloLens? Hell yes!

Was kommt dabei raus, wenn Facebook eine Virtual Reality Brille und Google eine Brillengestell mit Display entwickelt? Richtig. Die Microsoft HoloLens als ziemlich geniale Kombi aus beidem aber trotzdem was völlig anderes.

Durch eine angenehme Verkettung von Umständen und Gegebenheiten habe ich zugriff auf die HoloLens und versuche auch mal etwas dazu zu sagen.

Grundsätzlich mal: Das Ding ist hammer! Man muss die HoloLens auf der Nase gehabt haben um das zu verstehen, aber fuck off da bekommt man als technisch affiner Mensch einen Nerdgasmus.

Mehr in kürze (hoffe ich :D)

Google Accelerated Mobile Pages (AMP) ausporbiert

Mit dem Accelerated Mobile Pages Project versucht Google uns das schlimmste zu nehmen, dass es gibt. Ladezeiten !
Die Idee dahinter ist ziemlich simpel. Wenn ich eine Information suche, bietet mir Google eine Vielzahl von Links an (kennt man ja) um die Seite aufzurufen muss ich aber zwei dinge tun. Erstens Die Google Suche verlassen und zweitens eine komplette Webseite laden.
Nicht unbedingt optimal.

Genau hier setzt das neue Projekt von Google an. Accelerated Mobile Pages kurz AMP . Ziel von AMP ist es dem Nutzer Webseiten in abgespeckter Form zu liefern. Der nette Nebeneffekt davon ist, dass sich die Ladezeiten um ein vielfaches verringert.

 

Konnte diese Funktion in den letzen Tagen testen und ich bin begeistert! Besonders in Momenten wo halt kein LTE in der Leiste zu sehen ist, sondern nur ein bescheidendes E merkt man die Geschwindigkeitsunterschiede extrem.

Weiterlesen „Google Accelerated Mobile Pages (AMP) ausporbiert“

Retina Grafiken SCSS Snippet (Inkl. IPhone 6+ @3x)

Für jeden der öfters mal mit SCSS Retina Grafiken abfangen möchte, hier ein kleines Snippet (Mixin) aus meiner Sammlung.

Funktioniert mit @2x und @3x – IPhone 6+ und alle High Res Geräte sind damit dann gleich abgedeckt !

@mixin retina_background ($path, $type, $size) {
  // $path = full path without format, /data/image
  // $type = file format  , png


  @media
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
    background-image:url('#{$path}@2x.#{$type}');
    background-size: $size;
  }
  @media
  screen and (-webkit-min-device-pixel-ratio: 3),
  screen and (min-resolution: 3dppx),
  screen and (min-resolution: 350dpi){
    background-image:url('#{$path}@3x.#{$type}');
    background-size: $size;
  }
}

Die Nutzung ist ultra Simpel :

SELECTOR{
  background-image: url('Kompletter Pfad zur Datei ');
  @include retina_background('Pfad zur Datei ohne Format Endung ', 'Format', Background Size);
}
----
UL.field_list {
  background-image: url('/resources/bild.png');
  @include retina_background('/resources/bild', 'png', 50%);
}