marcus-at-localhost

function handleConnectionChange(event){
	if(event.type == "offline"){
		console.log("You lost connection.");
	}

	if(event.type == "online"){
		console.log("You are now back online.");
	}

	// add to <html>, because <body> might get changed if you use unpoly, turbolinks etc.

marcus-at-localhost

Heartbeat with Greenlet Web Worker Helper

A Pen by Marcus Obst on CodePen.

License.

marcus-at-localhost

Mind the Gap - CSS Grid Hide a Column

Depending on how the CSS grid is set up, you can't just hide a column and reflow the rest of the grid. If the column has a fixed with, the space is preserved, if the column width is 0 after hiding the grid gap adds up. The only way to fix it is to reflect the changes in the grid template.

A Pen by Marcus Obst on CodePen.

License.

marcus-at-localhost

// https://makandracards.com/makandra/41488-using-google-analytics-with-unpoly
up.on('up:history:pushed', function(event) {
  console.log(location.pathname);
});

marcus-at-localhost

details summary {
  cursor: pointer;
  outline: none !important;
  display: inline-block;
  padding: 8px 12px;
  padding-top: 10px;
  border-radius: 4px;
  overflow: hidden;
  background: #F09825;
  color: white;

marcus-at-localhost

<?php
ob_end_flush();
ob_implicit_flush();
for ($i = 0; $i < 10; $i++)
{
  echo "$i\n";
  sleep(1);
}

marcus-at-localhost

// https://pineco.de/using-turbolinks-with-vue/

document.addEventListener('turbolinks:load', () => {
    new Vue({
        el: '#app',

        beforeMount() {
            if (this.$el.parentNode) {
                document.addEventListener('turbolinks:visit', () => this.$destroy(), { once: true });

marcus-at-localhost

document.addEventListener('turbo:load',  () => {

  // Select the node that will be observed for mutations
  const targetNode = document.getElementById('bookmarks');

  const callback = (mutationsList, observer) => {

    for(const mutation of mutationsList) {
      if (mutation.type === 'childList') {

marcus-at-localhost

<script type="text/javascript">
  // [Matomo tracking code goes here]

  // Send Matomo a new event when navigating to a new page using Turbolinks
  // (see https://developer.matomo.org/guides/spa-tracking)
  (function() {
    var previousPageUrl = null;
    addEventListener('turbolinks:load', function(event) {
      if (previousPageUrl) {
        _paq.push(['setReferrerUrl', previousPageUrl]);

marcus-at-localhost

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On
    RewriteBase / # <= add this

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .