Uncategorized

I came across the dvh = „dynamic view height“ unit a couple of years ago, where the browser support was very bad.

Now we have about 95%, which should be enough for most projects – if not @supports should do the trick, so DVH could be used as an progressive enhancement.

This is particularly useful when dealing with mobile browsers that hide the address bar when scrolling.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units

Credits @ Artur A on Stackoverflow.

• stackoverflow.com

Found a very nice solution on https://habr.com/en/sandbox/163605/ – seems to work very well if only required within CSS.

@media (pointer: coarse)  {
	/* mobile device */
}

@media (pointer: fine), (pointer: none) {
	/* desktop */
}

@media (pointer: fine) and (any-pointer: coarse) {
	/* touch desktop */
}

Check out https://habr.com/en/sandbox/163605/ for further information.

I’ve invested some time to create a Icomoon.io Package of Fork Awesome, based on the broken SVG icons from the current Fork Awesome release (1.2.0). I have basically resized and centered them, to fit the canvas size, so some icon sizes might be not perfect.

Fork Awesome 1.2.0 · A fork of Font Awesome, originally created by Dave Gandy, now maintained by a community. Fork Awesome is licensed under SIL OFL 1.1· Code is licensed under MIT License. Documentation is licensed under CC BY 3.0.

Nova has two simple snippets to print (custom) linkgroups, this snippet prints out list items without the list wrapper.

Link List with toggable submenus (like the regular sidebar menus)

{include file='snippets/linkgroup_recursive.tpl' linkgroupIdentifier='LINKGROUP_TEMPLATE_NAME' dropdownSupport=BOOL}

Link List with dropdown submenus (like the regular top-bar menu)

{include file='snippets/linkgroup_list.tpl' linkgroupIdentifier='LINKGROUP_TEMPLATE_NAME' dropdownSupport=BOOL}

To print out the links on your own, check out the code of those snippet templates.

Selbst eingebundene Videos via Consent Manager blockieren / freischalten

Im Beispiel sind nur die für den Consent Manager nötigen Attribute definiert, für ein umfangreicheres Beispiel, kann man sich beispielsweise das Core Video OPC-Portlet ansehen (\includes\src\OPC\Portlets\Video\Video.tpl).

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="needs-consent youtube" data-src="https://www.youtube-nocookie.com/embed/VIDEOID"></iframe>
    <a href="#" class="trigger give-consent" data-consent="youtube">Youtube Consent geben</a>
</div>

Das funktioniert so ohne weiteres Zutun, eine eigene Initialisierung o. Ä. ist nicht notwendig.

Javascript

Event-Listener

document.addEventListener('consent.ready', function(e) {
    console.log('consent ready!');
});
document.addEventListener('consent.updated', function(e) {
    console.log('consent updated!');
});

Consent prüfen

if (e.detail !== null && typeof e.detail.youtube !== 'undefined' && e.detail.youtube === true) {
    console.log('youtube consent given');
}

Offizielle Doku (zum jetzigen Zeitpunkt nur für Plugins/PHP dokumentiert): https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_privacy/consentmanager.html?highlight=cookie#jtl-shop-consent-manager

If you have trouble with your z-index using the transform property, you should try to set transform: translate3d(0,0,0) translateZ(1000px) on the element what should overlay the other element(s).

But be careful, this fucks up all your z-indexes, you have to add translateZ(xxxx) to all elements who should overlay your overlaying element. If you have some position: fixed elements inside your overlaying element, they will fail as well (you must move it outside any container on which you have applied the translateZ property).

Example:

// (Animated) element behind the page
.background-animation-element{
  position:absolute;
  left:50%;
  top:100px;
  z-index:1;
  transform: perspective(200px) rotateX(26deg);
  animation: whatever 1s;
  // ...
}
// Page wrapper in front of the element
.page-wrapper{
  // The part that should work in all major browsers - except safari:
  position:relative;
  z-index:50;
  // The Safari fix:
  transform: translate3d(0,0,0) translateZ(1000px);
}

• stackoverflow.com Kit Sunde

Seit geraumer Zeit konnte ich einige Videos nicht mehr abspielen, der Abspielversuch wurde – abhängig vom Film – mit der Meldung „Es ist ein Fehler aufgetreten“ quittiert. Gleiches beim Abspielen von Trailern.

Der Versuch das Problem per Chromecast zu umgehen schlug ebenfall mit der Meldung „Die Wiedergabe wird auf diesem Gerät nicht unterstützt. (Fehlercode: 119)“ fehl.

• 

• 

Die Lösung ist denkbar einfach: Öffnet die Einstellungen eures Android TV Geräts und sucht den Punkt „Apps“, bei Nvidia Shield auf erster Ebene der Einstellungen im Bereich „Allgemeine Einstellungen“ zu finden. Hier wählt hier nun „Google Play Filme & Serien“ und löscht zuerst den Cache. Ich habe direkt alles durchgezogen, daher kann ich nicht abschließend sagen was nun geholfen hat: Cache geleert, Daten gelöscht, Deaktiviert und wieder aktiviert.

Anschließend ließ sich – bis auf einen einzelnen Film („Suborbicon“) – alles wieder abspielen.