“Klaro [klɛro] is a simple consent management platform (CMP) and privacy tool that helps you to be transparent about the third-party applications on your website. It is designed to be extremely simple, intuitive and easy to use while allowing you to be compliant with all relevant regulations (notably GDPR and ePrivacy).”

The tool is developed by KIPROTECT and can be found on Github.

Black & White

As I integrated Klaro on a couple of websites so far, I decided to make my work a bit easier and start building some basic clean themes for it.

I have a basic white and black&white theme so far. The download includes a testdrive folder, to showcase the themes. The white theme is also used on this website ;)

I really hate those standard consent management modals, that integrate badly into the website native design.

Klaro does a good job allowing to override its core theme and makes it a bit more pleasant. We do have to live with those modals from now on ;)

The themes are Sass-based and provide easy configuration options.

Enjoy!

cubicFUSION Themes for Klaro! @ Github

Klaro! Tweaks

Klaro is still missing some things, will collect some workarounds here for you to play with.

Missing events for consent modal open / closed …

Updates: Github Discussion
– 0.7.10 also adds custom callbacks to services (onAccept, onDecline, onInit) NICE!

Used a simple MutationObserver to do some magic for now, without diving into the core Klaro code for now. I am sure they already have an event listener or watcher setup.

You might have heard about Structured Data, Schema.org and JSON-LD.  

Search engines read structured data and use it to enhance search engine results. Structured data helps search engines to understand and categorize page content.

Example

This structured data, in JSON-LD format, describes a simple Article.

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet. But not all structured data endpoints are actually used by Google, Bing or other search engines yet.

Allowed Structured Data

Google provides a detailed overview of structured data allowed and used for search results.

There are basic enhancements you can use, like the Article structured data above. There are also many other more specific uses, like Video, LocalBusiness, Events, FAQ, Job Postings, Recipe and so on. Bing also provides a basic overview, but their documentation is scattered and feels incomplete.

How to integrate Structured Data

If you use a modern CMS, many structured data endpoints are already integrated out of the box (Article, Website, Logo, Person …).

Also modular content management systems often offer additional functionality through plugins, those help integrate structured data directly. Some do it better than others!

But if you really want to dive deep and integrate all those little things, structured data is still far more powerful when added manually. Especially things like events, products, job listings, courses, Q&A can greatly be enhanced by hand.

Alex@portalZINE

Validating Structured Data

Google and Bing offer validation tools for structured data. Both integrate it into their Webmaster Tools. You can also use the JSON-LD Playground to validate the JSON-LD itself or RDFa Play, Structured Data Linter, Facebook Debugger, Schema.org Generator and many other tools.

Need help?

I am a huge structured data fan and have been working with it for years now. I am constantly looking for new supported structured data endpoints, to enhance my own or customer websites & data.

Google constantly updates their documentation and highlights experimental structured data endpoints. Like Speakable for example, that highlights sections of a websites that are best suited for audio playback.

Fresh structured data helps to promote your content and enhance SEO, directly enhancing your discoverability and your search engine position. Your content becomes more meaningful for search engines, making it easier for them to promote it to the right potential user. It also ties into the GO GREEN concept, as you are reducing bounces of your website for users getting offered the wrong content.

Things like recipes and how-tos are already pushed to the top of the search index. A perfect way to promote your website and get noticed.

Have fun using or discovering structured data!

Development today relies on multiple teams, services, and environments all working in unison. A topic that always comes up, when setting up a new development environment: How do we secure important credentials, while not making it too complicated for the rest of the team?

The key when working with version control systems like Git, is to keep any type of credentials out of the versioning system. These can be API keys, database or email passwords.

Even if its a private repository, development environments might change. It can be a simple staging & live website setup you are maintaining.

.env Files for Environment Variables

The simplest way in PHP is to use .env files to store your credentials outside of the public accessible directory structure. So outside the public_html, but still within the reach of the executing environment to read it. Variables are accessible through $_ENV['yourVar'] or getenv("yourVar"), once included in your code.

To make it simple you can use the popular package vlucas/phpdotenv, which reads and imports the file automatically.

Don’t fool yourself, if an attacker finds a way into your system, these variables can be easily read. This is just hiding the file from public access and provides some convenience while developing or sharing code.

Encrypted .env files

Some people propose to encrypt / decrypt environment variables using a secret key. But if an attacker can access your data, he can also find the secret key.

There are some nice packages that offer just that. You have to decide if those fit your ammo.

• The psecio/secure_dotenv library provides an easy way to handle the encryption and decryption of the information in your .envfile. @Github
• johnathanmiller/secure-env-php – Env encryption and decryption library. Prevent committing and exposing vulnerable plain-text environment variables in production environments. The lib provides a nice guided interface to encrypt your .env file. @Github
• beyondcode/laravel-credential – Add encrypted credentials to your Laravel production environment. You can edit and encrypt using php artisan credentials:edit. @Github

Apache Pull – setting environment variables

The Apache2 environment variables are set in the /etc/apache2/envvars file. These variables are not the same as the environment variables of your Linux system; they are stored and manipulated in an internal Apache structure.

The /etc/apache2/envvars file holds variable definitions such as APACHE_LOG_DIR (the location of Apache log files), APACHE_PID_FILE (the Apache process ID), APACHE_RUN_USERS (the user that run Apache, by defaultwww-data), etc.

You can open and modify this file in a text editor of your choice. This is nice, but far from simple and requires a server restart. This is something which helps you when hardening security on a live deployed setup.

There are dynamic approaches, but you can do some research for that yourself :) Skipped that rabbit hole for now …

Infrastructure Secret Management

Handling secrets completely detached is another possibility. This is surely an overkill for most cases, but using an Infrastructure Secret Management concept might be worth looking into, if you are working on bigger scale projects that involve multiple development teams and setups. These services also often deal with secret rotation.

HashiCorp Vault – “Vault is a tool for securely accessing secrets. A secret is anything that you want to tightly control access to, such as API keys, passwords, certificates, and more. Vault provides a unified interface to any secret, while providing tight access control and recording a detailed audit log.”

You can deploy your own vault on your own infrastructure or test out a hosted version, which is free for Open Source projects. HashiCorp Vault

You will find a bunch of Hashicorp related packages that will help you to integrate a vault into your project workflow (scmrus/php-vault-env , poc-webapp-vault).

While this is nice, you will need to cache / store credentials somewhere, as you don’t want to query the vault on every single access.

The Hashicorp Vault is not the only Infrastructure Secret Management solution. There is a nice Github Gist that lists other solutions and a nice feature matrix.

Amazon also provides a solution called AWS Secrets Manager, which makes a lot of sense, when you build and deploy on AWS already :)

What a rabbit hole, once you start researching solutions :)
Have fun …

Manet is a REST API server which allows capturing screenshots of websites using various parameters.

The Node.js server can use SlimerJS or PhantomJS as headless browser engines.

I have build similar with CasperJS, but this is far better for those that want a simple straight solution.

@GitHub

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

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 :)

1. Create a new calendar
2. 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.
3. 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

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.

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 …

Enjoy coding ….