Blog | portalZINE NMN | Development meets Creativity

10. February 2019

Advanced Custom Fields – Free Your Gutenberg Blocks Data

IN BETA

ACF 5.8 Beta introduced an easy way to create your custom Gutenberg blocks. I am already using it heavily for a current project, to easily organize content and media assets.

Really powerful, when combined with Timber as well, which has been the foundation of many of my themes for years now ;)

ORGANIZE YOURSELF

Organizing data using ACF is nice, but sometimes you seek access to that saved block data directly. I hate it when I am confined to boundaries and the data flow is restricted or hidden. I need things to be accessible to choose the creative flow myself.

SIMPLE EXAMPLE

// Parse blocks from post content
$blocks  = parse_blocks($your_post_content);
$collect = array();

// Loop through the blocks
foreach($blocks as $block){

//Setup global block post data context
acf_setup_postdata( $block['attrs']['data'], $block['attrs']['id'], true );

// Get ACF fields
$fields = get_fields();

// I am using this to organize my assets.
// Each block of mine has a unique identifier as its first field:
// $uid = $block['attrs']['data'][array_keys($block['attrs']['data'])[0]]
// I would do:
// $collect[$uid] = $fields; 

// Collection of fields using the block id. 
$collect[$block['attrs']['id']] = $fields;

// Restore global context
acf_reset_postdata( $block['attrs']['id'] );

}

// Parse blocks from post content

$blocks = parse_blocks($your_post_content);

$collect = array();

// Loop through the blocks

foreach($blocks as $block){

//Setup global block post data context

acf_setup_postdata( $block['attrs']['data'], $block['attrs']['id'], true );

// Get ACF fields

$fields = get_fields();

// I am using this to organize my assets.

// Each block of mine has a unique identifier as its first field:

// $uid = $block['attrs']['data'][array_keys($block['attrs']['data'])[0]]

// I would do:

// $collect[$uid] = $fields;

// Collection of fields using the block id.

$collect[$block['attrs']['id']] = $fields;

// Restore global context

acf_reset_postdata( $block['attrs']['id'] );

}

There you go, enjoy some free block data :)

I was a big skeptic, when it comes to WordPress and the new Gutenberg editor, but combined with ACF + Timber its pure magic :) Looking forward to things to come!

Cheers
Alex

Enjoy coding …

5. February 2019

SVG Cleaner – streamline your vectors

svgcleaner has been around for some time and is constantly being optimized! It helps you clean up your SVG files, keeping them free from unnecessary data.

Temporary data used by the vector editing application
Non-optimal SVG structure representation
Unused and invisible graphical elements

Github project.

The GUI application adds batch file processing, decompression & compression and parallel cleaning jobs, GUI application.

23. January 2019

GREENTONIC – Agency for design & consulting

GREENTONICs key concept is sustainability, which encompasses consulting, concept, design and implementation. I have a close relationship with the agency and have done a couple of projects with and for them.

WordPress Backend
Custom template based theme (TWIG / TIMBER / SASS / Turbolinks & Prefetch)
Custom plugin for internal functionality
Detailed Product Presentation
Analytics
On-Page SEO / Off-Page SEO
AMP
Social Integration
Maintenance

GREENTONIC

23. January 2019

Villa Anna Speyer – Bed & Breakfast 2.0

Villa Anna Speyer – Classic Bed & Breakfast offering, with 3 double rooms & bathroom.

WordPress Backend
English / German / French
Custom template based theme (TWIG / TIMBER / SASS)
Custom plugin for internal functionality
Detailed room / offer overview
Analytics
On-Page SEO
AMP
Social Integration
Maintenance

Villa Anna Speyer

21. December 2018

Merry Christmas

Merry Christmas,
enjoy your off-time with friends and family, as well as the transition into the new year. Looking forward to our work together in 2019.

Even during this small holiday break, I will be keeping an eye on things :)
Kind regards
Alex

ps. During the christmas holidays, baked apples are a must-have for me. Quick recipe below:

Core the apples generously with an apple cutter
Fill the apples as desired, eg. with raisins , almonds or marzipan.
Bake in preheated oven at 200 ° C for about 30 minutes.
Remove baked apples from the oven and enjoy while still warm. Sprinkle with sugar and cinnamon. The brave among you, may also use some vanilla sauce ;)

7. June 2018

Youtube iFrame API and Cookieless Domain solution (GDPR / DSGVO)

GDPR / DSGVO REQUIREMENTS

The GDPR makes us jump through a lot of hoops to cleanup our websites and make all our code compliant. Many aspects of the GDPR are far from completely defined yet and there is a great uncertainty what is required, what can stay and what needs to be adjusted right now.

EMBED YOUTUBE VIDEOS

Embeding Youtube videos is one area, that many are afraid of. You need to mention the use of youtube in your data privacy policy.

Something like that :”Our website uses plugins from YouTube, which is operated by Google. The operator of the pages is YouTube LLC, 901 Cherry Ave., San Bruno, CA 94066, USA.

If you visit one of our pages featuring a YouTube plugin, a connection to the YouTube servers is established. Here the YouTube server is informed about which of our pages you have visited.

If you’re logged in to your YouTube account, YouTube allows you to associate your browsing behavior directly with your personal profile. You can prevent this by logging out of your YouTube account.

YouTube is used to help make our website appealing. This constitutes a justified interest pursuant to Art. 6 (1) (f) DSGVO.

Further information about handling user data, can be found in the data protection declaration of YouTube under https://www.google.de/intl/de/policies/privacy.”

IS THAT ENOUGH

The question remains, if that is actually enough?
Youtube allows you to switch to a cookieless embed on their website, that limits the data flowing to Google servers.

THE IFRAME API

But how do you use that programmatically, with the Youtube iFrame API?

The iFrame API documentation has not been updated since 2014 and does not mention any option to switch to the cookieless youtube host.

But there is an easy option, just add the host option “https://www.youtube-nocookie.com” to your calls :

var player;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
      	var firstScriptTag = document.getElementsByTagName('script')[0];
      	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

player = new YT.Player('player1', {
         
	    wmode: 'transparent',
            host: 'https://www.youtube-nocookie.com',
	    playerVars:{
		   wmode: 'transparent',
		   showinfo:0,
		   autohide:1,
            },
	  videoId: YOUR_VID_ID,
	  events: {
		  'onReady': onPlayerReady
		}
        });

var player;

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

player = new YT.Player('player1', {

wmode: 'transparent',

host: 'https://www.youtube-nocookie.com',

playerVars:{

wmode: 'transparent',

showinfo:0,

autohide:1,

videoId: YOUR_VID_ID,

events: {

'onReady': onPlayerReady

}

});

There we go, so simple and painless :)

The GDPR is a good thing, as it helps to secure our privacy. Those that are complaining now, are those that waited until the GDPR went live and did not take the time to really prepare soon enough.

BTW the email spam sent by so many services, was so not required, but helped me to clean up / delete those dormant accounts ;)

Enjoy coding!

18. May 2018

Elektro Scherer GmbH in Ludwigshafen

Elekro Scherer – offers electric services & installations of all kinds

WordPress
Fresh new design ( GREENTONIC – Agentur Speyer )
Twig & Timber based custom theme / templates
Responsive Styling with SASS
DSGVO integration
Server Configuration & Optimisation
SSL Tweaks

Elektro-Scherer.de

21. April 2018

Pimp my Log – Log viewer for your web server

Pimp my Log is a web app written in PHP. It displays server logs friendly.

By default, Pimp My Log supports :

Apache web server
NGINX web server
IIS web server
PHP log files

Key features:

Display any text and multi-line logs in your web browser
Chrome, Safari, Firefox, IE9+, Opera are supported
Be notified on your desktop as soon as a new log line is available
Be notified when log file is rotated
Apply a search filter (plain text or regular expression) on the log file
Refresh logs : Pull to refresh, push key stroke R, click on the refresh button or set an auto-refresh timer
Show/hide columns during runtime to improve readability
Mark lines during runtime to improve readability
Sort lines and view new logs lines directly in list
Export logs in various formats ( JSON, XML, CSV, RSS, ATOM, …) and expose them as webservices

Pimp my Log

9. March 2018

Pretty checkboxes and radio buttons in pure CSS

Easily add beautiful checkboxes and radio buttons in pure CSS. Highly customizable via SCSS.

Basic
- Shapes – Square, Curve, Round
- Variants – Default, Fill, Thick
- Colors – Primary, Success, Info, Warning, Danger
- Color types – Solid, Outline
- Animations – Smooth, Tada, Jelly, Pulse, Rotate
Switch – iOS style – Outline, Fill, Slim
Responsive
No JavaScript
Custom Font Icons
SVG Icons
Image support
Toggle between icons / SVG’s / images
Lock
State – Focus, Hover, Indeterminate
Supports frameworks – Bootstrap, Foundation, Sematic UI, Bulma, …
SCSS customization
Supports all modern browsers, including mobile devices
Print friendly

  <!-- add class p-default -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state">
            <label>Default</label>
        </div>
    </div>

    <!-- add class p-fill -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state">
            <label>Fill</label>
        </div>
    </div>

    <!-- add class p-thick -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state">
            <label>Thick</label>
        </div>
    </div>

<label>Default</label>

</div>

</div>

<label>Thick</label>

</div>

GitHub

6. March 2018

WooCommerce Appointments Enhanced with an Availability Calendar

WordPress WooCommerce Appointments

WooCommerce Appointments is a commercial booking plugin that allows you to setup appointments with WooCommerce. It has full integration into Google calendar to track appointments of your staff.

Staff availability can be set globally or via each staff members profile. While this is nice, I was looking for an option to actually handle availability via another Google Calendar as well. That was a must have feature for a current project.

What do you do, if that feature is not available yet ? You poke the code!

The magic entry point for the staff availability is the user meta “_wc_appointment_availability“, which is made available through includes/class-wc-product-appointment-staff.php.

A couple of weeks ago I asked support for a simple filter hook to alter the availability on demand from the outside.

The development team added the feature in one of the latest releases, making wc_appointments_staff_availability the entry point for my custom availability changes.

The filter hook

add_filter( 'wc_appointments_staff_availability', 'availability_callback', 10, 3 );

function availability_callback($availability, $staff){
// Your changes here
return $availability;
}

add_filter( 'wc_appointments_staff_availability', 'availability_callback', 10, 3 );

function availability_callback($availability, $staff){

// Your changes here

return $availability;

}

Getting the data

You can either pull Google Calendar Events directly through the Google Calendar API or use the available iCal export option. In this quick example I will use the private calendar iCal export file.

The availability calendar

Lets setup a quick clean calendar, called “Availability”. So simple and catchy :)

Create a new calendar
Create some test events. WooCommerce Appointments supports multiple availability rules, but I am focusing on the time:range option and recurring events for this example. I might be extending on this a bit more in the future ! So for this example: Friday, timeframe 10:00 – 16:00 and repeating four times.
Go into settings and get the link to the privat ical export file

Parse iCal data

For this example I am using the PHP ICS Parser, but any other parser will do. Install it via composer: composer require johngrogg/ics-parser.

Lets create a quick little plugin to get us going and save it to /wp-content/plugins/CustomAvailability/smile.php

<?php
use ICal\ICal;

/*
Plugin Name: WooCommerce Appointments - Custom Availability
Plugin URI: https://portalzine.de
Description: Attach additional Google Calendar for staff availability
Version: 1.0
Author: portalZINE NMN
Author URI: https://portalzine.de
*/


require_once(PATH_TO_VENDOR_DIR."vendor/autoload.php");

class StaffCustomAvailability{
 
function __construct() {
  add_filter( 'wc_appointments_staff_availability', array($this, 'staffAvailability'), 10, 3 );
 }
 
function staffAvailability($availability, $staff){
// Your changes here
return $availability;
}

}

$StaffCustomAvailability = new StaffCustomAvailability();

<?php

use ICal\ICal;

Plugin Name: WooCommerce Appointments - Custom Availability

Plugin URI: https://portalzine.de

Description: Attach additional Google Calendar for staff availability

Version: 1.0

Author: portalZINE NMN

Author URI: https://portalzine.de

require_once(PATH_TO_VENDOR_DIR."vendor/autoload.php");

class StaffCustomAvailability{

function __construct() {

add_filter( 'wc_appointments_staff_availability', array($this, 'staffAvailability'), 10, 3 );

}

function staffAvailability($availability, $staff){

// Your changes here

return $availability;

}

$StaffCustomAvailability = new StaffCustomAvailability();

Set the availability

Its time to get the data into the system. I am only pulling and altering the availability for one single user in this example, the user with the USERID “3”. This should provide you with a good starting point.

function staffAvailability($availability, $staff){

// $staff holds the complete user data
// $availability is the current set of rules

// Only altering availability for  USERID 3

if($staff->data->ID == 3){
     $newSet = array();  
  try {
    // add the private ics file here
    $ical = new ICal('URL TO PRIVATE ICS FILE', array(
        'defaultSpan'                 => 2,     // Default value
        'defaultTimeZone'             => 'Europe/Berlin',
        'defaultWeekStart'            => 'MO',  // Default value
        'disableCharacterReplacement' => false, // Default value
        'skipRecurrence'              => false, // Default value
        'useTimeZoneWithRRules'       => false, // Default value
    ));

     } catch (\Exception $e) {
    die($e);
}

   $forceTimeZone = true;
        
   $events = $ical->sortEventsWithOrder($ical->events());
    // looping through all events
   foreach ($events as $event) {
        // Get Start and end date / time information
        $dtstart = $ical->iCalDateToDateTime($event->dtstart_array[3], $forceTimeZone);
        $dtend = $ical->iCalDateToDateTime($event->dtend_array[3], $forceTimeZone);
        
        // Define new time:range rule
        // Adding one rule per day 
       // Added Friday to the calendar + event recurring  4 times, which results in 4 new rules for staff member 3
        $newSet[] =  array(             
            'type' => "time:range",// rule type used for this example
            'appointable' => "yes",
            '[priority' => 10,
            'from' => $dtstart->format('H:i'), // start time 10:00
            'to' => $dtend->format('H:i'), // end time 16:00
            'from_date' => $dtstart->format('Y-m-d'), // start date -  Friday
            'to_date' => $dtend->format('Y-m-d') // end date - Friday
                       );
            $availability = $newSet;
          }
      
      
    }
return $availability;
}

function staffAvailability($availability, $staff){

// $staff holds the complete user data

// $availability is the current set of rules

// Only altering availability for USERID 3

if($staff->data->ID == 3){

$newSet = array();

try {

// add the private ics file here

$ical = new ICal('URL TO PRIVATE ICS FILE', array(

'defaultSpan' => 2, // Default value

'defaultTimeZone' => 'Europe/Berlin',

'defaultWeekStart' => 'MO', // Default value

'disableCharacterReplacement' => false, // Default value

'skipRecurrence' => false, // Default value

'useTimeZoneWithRRules' => false, // Default value

));

} catch (\Exception $e) {

die($e);

}

$forceTimeZone = true;

$events = $ical->sortEventsWithOrder($ical->events());

// looping through all events

foreach ($events as $event) {

// Get Start and end date / time information

$dtstart = $ical->iCalDateToDateTime($event->dtstart_array[3], $forceTimeZone);

$dtend = $ical->iCalDateToDateTime($event->dtend_array[3], $forceTimeZone);

// Define new time:range rule

// Adding one rule per day

// Added Friday to the calendar + event recurring 4 times, which results in 4 new rules for staff member 3

$newSet[] = array(

'type' => "time:range",// rule type used for this example

'appointable' => "yes",

'[priority' => 10,

'from' => $dtstart->format('H:i'), // start time 10:00

'to' => $dtend->format('H:i'), // end time 16:00

'from_date' => $dtstart->format('Y-m-d'), // start date - Friday

'to_date' => $dtend->format('Y-m-d') // end date - Friday

);

$availability = $newSet;

}

return $availability;

}

The example pulls and parses the ics file on every load, use a transient or REDIS to store data and only refresh in certain intervals.

Hope this gets you started! I build a simple interface around it, with a lot of more rule options. This makes the setup for each staff member a brise. Now each of them can setup a calendar easily and provide me with the ics link :) WooCommerce Appointments rocks …

IN BETA

ORGANIZE YOURSELF

SIMPLE EXAMPLE

Enjoy coding …

GDPR / DSGVO REQUIREMENTS

EMBED YOUTUBE VIDEOS

IS THAT ENOUGH

THE IFRAME API

Enjoy coding!

WordPress WooCommerce Appointments

The filter hook

Getting the data

The availability calendar

Parse iCal data

Set the availability

Enjoy coding ….