Bram de Haan atelierbram

Start over in GitHub

Create a new branch to point to your old code
Delete all the code and commit on master
Start your rewrite on master

# checkout the master branch
git checkout master

Jigsaw Static Site - Set active class in navigation menu

Set a custom front matter variable "slug" in top of your post.blade.md file which is the same as the filename, here: this-post-example.blade.md

---
extends: _layouts.post
section: content
title: This Post Example
slug: this-post-example

Lazy loading video

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

You'll notice the addition of the poster attribute, which lets you specify a placeholder to occupy the <video> element's space until the video is lazy-loaded. As with the <img> lazy-loading examples, stash the video URL in the data-src attribute on each <source> element. From there, use JavaScript code similar to the Intersection Observer-based image lazy loading examples:

Responsive images in WordPress using srcset with Advanced Custom Fields Pro plugin

in functions.php:

add_filter( 'acf_the_content', 'wp_make_content_images_responsive' );

in template.php:

$image = get_field('my_image');

shrink-to-fit=no fixes zoom problem in iOS 9

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Create a persistent directory stack in zsh

First, make a new file with the following contents:

#!/usr/bin/env ruby

dirs = []
ARGF.each { |line| dirs.push(line) }

<?php $imgPlaceholder3x2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAAEElEQVR42mM88J8BCBghFAAfUgOBvlG2dAAAAABJRU5ErkJggg==";
if( !empty(get_the_post_thumbnail()) ) {
  the_post_thumbnail( 'post-thumbnail', array(
    'alt' => the_title_attribute( array(
      'echo' => false,
    ) ),
    'src' => $imgPlaceholder3x2,
    'data-src' => get_the_post_thumbnail_url(),
    'loading' => 'lazy',

PHP: Get the index inside a foreach loop

In the past, I’ve noticed that a lot of PHP beginners tend to struggle with the foreach loop. In some cases, it is because they have arrived from a language that only supports while loops and for loops.

Here is a basic example of a foreach loop:

<?php
foreach($array as $item){
 echo $item, '';

To prevent user from scrolling the screen you need to redefine touch move event:

document.ontouchmove = function(e){ e.preventDefault(); }

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>History popstate and hashchange Events</title>
	<link rel="stylesheet" href="./main.css" />
	</head>
	<body>