3. March 2023

Bookstack: Embed local CSV files

What is Bookstack

BookStack is an open-source, web-based platform for organizing, storing, and sharing knowledge and documentation. It was developed to provide a user-friendly and intuitive interface for creating and managing knowledge bases, wikis, and other types of structured content.

BookStack allows users to create books, chapters, and pages, and to organize them hierarchically. Users can also add images, files, and links to their content, and collaborate with others by assigning roles and permissions. BookStack also supports full-text search, version control, and commenting, making it easy to find and update information.

BookStack is written in PHP and uses the Laravel framework, and it is available for free under the MIT License.

What are you using it for?

This is my internal homelab documentation system, I use it for private and client related content. Bookstack is fast, clean and well documented. It has really elevated the way I store and access important reminders / how-tos and documentation.

The system provides API access and has many ways to tweak it. Bookstack documentation.

Why display CSV files?

CSV stands for “Comma-Separated Values”. It is a simple file format used to store tabular data, such as spreadsheets or databases, in plain text. In a CSV file, each line represents a row of data, and each column is separated by a comma (or sometimes a semicolon or tab).

There are always CSV exports or other data stored in CSV format, that i need quick access to sometimes.

Bookstack allows to add files to pages and insert links to them, but it does not embed or parse those files in any way. There are similar hacks to mine, this example allows to embed PDFs and here the main Hacks page.

Lets get started!

We need something to parse the CSV file and something to display the information in a nice visual & flexible grid.

I am choosing Papa Parse for the CSV parsing, wrote about it a long time ago and still using it actively for many projects.

Papaparse can handle CSV files with different delimiters, encodings, and line endings, and can also handle complex data formats, such as quoted values, escaped characters, and multi-line cells. The library is widely used in web applications, data analysis tools, and other software that deal with CSV data.
Grid.js is my library of choice to display the parsed information in a nice grid.

Grid.js is a modern and open-source JavaScript library for building responsive and customizable data tables in web applications.

It provides a simple and intuitive API for creating, styling, and populating tables with data from various sources, including JSON, CSV, and Excel files.

Grid.js supports features such as sorting, filtering, pagination, column resizing, and cell formatting, as well as advanced features such as tree grids, custom renderers, and editable cells. The library also includes built-in plugins for exporting data to different formats, such as CSV, Excel, and PDF.

Include the file in Bookstack

Included and linked CSV files look something like that in source.

<p id="bkmrk-samplecsvfile_2kb.cs">
<a href="https://bookstack.instance/attachments/12" target="_blank" rel="noopener">SampleCSVFile_2kb.csv</a>
</p>

<a href="https://bookstack.instance/attachments/12" target="_blank" rel="noopener">SampleCSVFile_2kb.csv</a>

</p>

Tweak the header

The settings allow you to add custom code to your instance. Another option would be to tweak template files, but its easier to do these light tweaks using the header customizer.

This can be found under: https://bookstack.instance/settings/customization

Add required libs

Either link them externally or better use locally stored versions of these.

Papa Parse
Grid.JS

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/papaparse@5.4.0/papaparse.min.js"></script> 
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

Find CSV links in the page and append to link

This searches the page_content for elements that have “.csv” in their textContent.
Gets textContent and the href of the link.
The link is passed to Papa Parse for processing.
On completion the data result is split into the header row and the rest.
That data is passed to Grid.JS and added to a container element after the link.
Grid.JS provides a ton of configuration options, I added the most common as a starting point. This includes different ways to style the grid.

<script>
function init() {
    document.querySelectorAll('.page-content  a').forEach((node, i) => {
        let parent = node;
        let unique = i;
        let text = node.textContent
        let link = node.href

        if (text.search(".csv") !== -1) {            
            let header;
            let rows = [];
            let json = JSON.parse(node.getAttribute("title"));

            Papa.parse(link, {
                download: true,
                header: false,
                complete: function(results) {
                    results.data.map(function(data, index) {
                      if(!!json){                         
                        let removeValFrom = json.remove_cols;
                      	data = data.filter(function(value, index) {
     			  return removeValFrom.indexOf(index) == -1;
			})
                      }
                        if (index == 0) {
                            header = data;
                        } else {
                            rows.push(data);
                        }
                    });
                    const csv_wrapper = document.createElement("div");
                    csv_wrapper.setAttribute("id", "csv_wrapper_" + unique_id);
                    parent.after(csv_wrapper);

                    new gridjs.Grid({
                        search: true,
                        columns: header,
                        data: rows,
                        fixedHeader: true,
                        sort: true,
                        pagination: {
                            limit: 6
                        }
                    }).render(document.getElementById("csv_wrapper_" + unique_id));

                }
            });
        }
    });
}
window.addEventListener('DOMContentLoaded', init);
</script>

function init() {

document.querySelectorAll('.page-content a').forEach((node, i) => {

let parent = node;

let unique = i;

let text = node.textContent

let link = node.href

if (text.search(".csv") !== -1) {

let header;

let rows = [];

let json = JSON.parse(node.getAttribute("title"));

Papa.parse(link, {

download: true,

header: false,

complete: function(results) {

results.data.map(function(data, index) {

if(!!json){

let removeValFrom = json.remove_cols;

data = data.filter(function(value, index) {

return removeValFrom.indexOf(index) == -1;

})

}

if (index == 0) {

header = data;

} else {

rows.push(data);

}

});

const csv_wrapper = document.createElement("div");

csv_wrapper.setAttribute("id", "csv_wrapper_" + unique_id);

parent.after(csv_wrapper);

new gridjs.Grid({

search: true,

columns: header,

data: rows,

fixedHeader: true,

sort: true,

pagination: {

limit: 6

}

}).render(document.getElementById("csv_wrapper_" + unique_id));

}

});

}

});

}

window.addEventListener('DOMContentLoaded', init);

</script>

Github: Will be adding more hacks, as I clean some of them up :)

A bonus

You can use the title attribute to pass some config data, in JSON format. Currently only to strip columns, but will extend that a bit more for flexible usage ;)

portalZINE NMN | Development meets Creativity | json grid js

{"remove_cols":[0,1,2,3,6,7,8,9,10]}

1	{"remove_cols":[0,1,2,3,6,7,8,9,10]}

The result

Should look something like that …

portalZINE NMN | Development meets Creativity |

Enjoy coding …

14. January 2023

Übersicht – Using your Desktop for more !

What is Übersicht?

“Übersicht” is a German word that means “overview” or “summary” in English. The name of the software was chosen because it allows users to have a quick overview of various information on their desktop. It’s also a play on words, because in German the name of the software can be translated as “super sight” which refers to the ability to have a lot of information at a glance.

Übersicht is a lightweight and powerful application that allows users to create and customize desktop widgets using web technologies such as HTML, CSS, and JavaScript. With Übersicht, you can create widgets that display information such as the weather, calendar events, system resource usage, and more. The widgets can be customized to display the information in any format and can be positioned anywhere on the desktop, allowing you to create a personalized and efficient workspace.

Übersicht widgets are created using a simple and user-friendly interface that allows you to preview and edit the widget’s code. The widgets are also highly customizable, allowing you to change the appearance and behavior of the widgets to suit your needs. Additionally, Übersicht widgets can be shared with other users, and there are a variety of widgets available for download from the developer’s website.

The application is open-source and free to use, and it’s also lightweight, it won’t affect your computer performance. Overall, Übersicht is a powerful and versatile tool for creating custom desktop widgets on macOS.

Custom Desktop Widgets / MenuBar Enhancements

There are several other tools similar to Übersicht that allow you to create custom desktop widgets. Some of the most popular alternatives include:

Geektool (Mac): is a powerful and flexible tool for creating custom desktop widgets on macOS. It allows you to display information such as the weather, calendar events, system resource usage, and more.
I used it for a while, but never really got into it any deeper. It has been a resource hog for some as well.
xbar (Mac): is an open-source tool that lets you put the output from any script/program in your macOS menu bar. This is a complete rewrite of BitBar in Go.
This will also make into my workflow :)
SwiftBar :Add custom menu bar programs on macOS in three easy steps: Write a shell script.Add it to SwiftBar … there is no 3rd step!
Conky (Mac / Limnux) is a free, light-weight system monitor for X, that displays any kind of information on your desktop. It can also run on macOS, output to your console, a file, or even HTTP.
Hologram Desktop (Mac / Free / InAppPurchases)
WidgetWall (Mac / Paid) : Looks nice, but too limited for me.
Beaconly (Mac / Free / InAppPurchases ): Beaconly is a flexible, easy to use data aggregating menu app that ties relevant information to you, beautifully one click-away in your macOs menu bar.
Rainmeter: is a Windows-only tool similar to Übersicht. It allows users to create custom desktop widgets using a variety of pre-built skins or by creating your own skins using HTML, CSS, and JavaScript.
This is the goto solution for any Windows user!

What are you using these for?

With many external systems in play, its always crucial to keep an eye on things. I have build nice dashboards, using Grafana, InfluxDB, NetData and Prometheus. But they are either displayed in a browser window or on a separate screen.

If you have 2 / 3 monitors or an ultra-wide screen, you have a lot of Desktop real-estate you can use.

That is something that I have been looking at for years, but only tried for a short period of time. This year I want to really build out desktop and menu widgets , that help me to get an even better overview of things and help reduce repetitive tasks.

I will share links to things I like and share access to the widgets I build myself or tweaked.

Übersicht – desktop widgets / working & planned

These are the current things that are in progress or planned.

RSS Widget: This allows me to easily fetch the latest news from the websites I visit multiple times each day.
You can already find a first version of the widget on Github, forked from Eric Dasque.

I have two widgets currently setup on the left and right of my ultra-wide screen. Gathering information from all my Youtube subscriptions, tech websites and news outlets.

Its using Go for the command line and i rewrote parts to make it completely template-based to allow flexible output variations.
I have some other ideas, but those will make it into future versions. This is still based of the Classic widget architecture, but I also plan to move it to the JSX architecture.
Weather widget for Openweather: Straight forward Openweather widget forked from Li Xueli. Displays the current weather and allows to expand to show the next 7 days.
This is build on the new JSX architecture of Übersicht. I did a couple of tweaks and removed the geo-location. Changes will be shared soon.
Fancy Clock / Date / Week
I have a basic version working.
Email: Building a widget that combines IMAP, Gmail and local Mail.
I have a basic version working.
Asana: Pull latest tasks.
A basic version is already working.
Grafana: Dashboard integration
Netdata
Glances
Uptime Monitoring: Uptime Kuma / UptimeRobot / Statping
Cloudflare: Stats
MQTT / Node-Red / N8N

portalZINE NMN | Development meets Creativity | uebersicht weather

portalZINE NMN | Development meets Creativity | uebersicht rss

xbar – Extend Menu Bar / working & planned

Nothing to share yet ….

10. January 2023

Git Tweaks & Workarounds 2023

“Git is a DevOps tool used for source code management. It is a free and open-source version control system used to handle small to very large projects efficiently. Git is used to tracking changes in the source code, enabling multiple developers to work together on non-linear development.”

Many use Github to host remote Git repositories, but you can use other hosts like: BitBucket, Gitlab, Google Cloud Source Repositories …. You can also host your own repository on your local NAS or remote server.

Will use this article for common problems I encoutered and possible solutions.

GIT PUSH FAILS (Mac M1)

Push failed in Github Desktop and using Push from the command-line. The best bet is to experiment with different git config options.

The core.compression 4 worked for me and the push went through nicely.

git config --global core.compression 0
git config --global core.compression 1
git config --global core.compression 2
git config --global core.compression 3
git config --global core.compression 4

git config --global core.compression 0

git config --global core.compression 1

git config --global core.compression 2

git config --global core.compression 3

git config --global core.compression 4

Other config option that can be tweaked are

git config --global http.postBuffer
git config --global https.postBuffer
git config --global ssh.postBuffer

git config --global http.postBuffer

git config --global https.postBuffer

git config --global ssh.postBuffer

Solutions: WordPress + MultiSite + WPML + Simplied folder structure

THE QUESTION

A while back a potential customer asked me, if it is possible to restructure a WordPress Multisite setup and WPML with a more simplified and custom url structure?

THE ROUGH IDEA

1 . BASE.website web.site (with possibly different languages)

web.site/de/
web.site/en/

2. SUB.website web.site/nl-nl/

Languages would normally be added like this:

web.site/nl-nl/de/
web.site/nl-nl/en/

The customer wanted it to be restructured / simplified like this:

web.site/de-nl/
web.site/en-nl/

This basically mimics the structure of a single WPML website with custom languages, but with all the benefits of a multisite.

THE SOLUTION

This is nothing that WPML or WordPress Multisite provides out of the box.
I built a prototype setup to make it work.

Not something that I would propose for anyone, as it requires a lot of tweaks for anything that handles dynamic links (plugins, hooks, core systems, page.builder …)

Its doable :)

BASIC URL HANDLING

One thing that needs to be tweaked globally, is the mapping of the new url structure.

So web.site/nl-nl/en/ needs to become web.site/en-nl/

This needs to be handled on the server side, by proxying the original to the new structure.
This can be easily done using Apache or NGINX.

With that web.site/nl-nl/en/ will be proxied to web.site/en-nl/, but any core navigation will not work yet.

This is the fastest solution that I came up with, within the hour I gave myself ;)

There surely are other options, like the core rewrites / restructuring of the core shorturl handling. But these approaches might break things in far more areas.

Using the proxy approach, keeps the core as it is. The solution needs to be as simple as possible, allowing to maintain it in the future :)

HOOKS TO THE RESCUE

Just for the basic setup a couple of hooks are required to make this work, more might be needed depending on the plugins in use.

Here a couple of examples ….
WordPress site_url

add_filter( 'site_url', 'custom_site_url' );

function custom_site_url( $url )
{
    if( is_admin() ) // you probably don't want this in admin side
        return $url;

    return  str_replace( "/nl-nl/en/","/en-nl/", $url);
}

add_filter( 'site_url', 'custom_site_url' );

function custom_site_url( $url )

{

if( is_admin() ) // you probably don't want this in admin side

return $url;

return str_replace( "/nl-nl/en/","/en-nl/", $url);

}

WordPress Nav Links

add_filter( 'post_link',  'changePermalinks', 10, 3);
add_filter( 'page_link', 'changePermalinks', 10, 3);
add_filter( 'post_type_link',  'changePermalinks', 10, 3);
add_filter( 'category_link',  'changePermalinks', 11, 3);
add_filter( 'tag_link',  'changePermalinks', 10, 3);
add_filter( 'author_link',  'changePermalinks', 11, 3);
add_filter( 'day_link',  'changePermalinks', 11, 3);
add_filter( 'month_link','changePermalinks', 11, 3);
add_filter( 'year_link',  'changePermalinks', 11, 3);

function changePermalinks( $url, $post, $leavename=false ) {
    $url = str_replace("/nl-nl/en/","/en-nl/", $url);
    return $url;
}

add_filter( 'post_link', 'changePermalinks', 10, 3);

add_filter( 'page_link', 'changePermalinks', 10, 3);

add_filter( 'post_type_link', 'changePermalinks', 10, 3);

add_filter( 'category_link', 'changePermalinks', 11, 3);

add_filter( 'tag_link', 'changePermalinks', 10, 3);

add_filter( 'author_link', 'changePermalinks', 11, 3);

add_filter( 'day_link', 'changePermalinks', 11, 3);

add_filter( 'month_link','changePermalinks', 11, 3);

add_filter( 'year_link', 'changePermalinks', 11, 3);

function changePermalinks( $url, $post, $leavename=false ) {

$url = str_replace("/nl-nl/en/","/en-nl/", $url);

return $url;

}

WPML

add_filter( 'icl_ls_languages', 'wpml_url_fix');

function wpml_url_fix( $languages ) {
 
  global $wpml_url_converter;
 
  $abs_home = $wpml_url_converter->get_abs_home();
  foreach( $languages as $lang => $element ){


    $languages[$lang]['url'] = str_replace( "/nl-nl/en/","/en-nl/", $languages[$lang]['url'] );
    
  }
  return $languages;
}

add_filter( 'icl_ls_languages', 'wpml_url_fix');

function wpml_url_fix( $languages ) {

global $wpml_url_converter;

$abs_home = $wpml_url_converter->get_abs_home();

foreach( $languages as $lang => $element ){

$languages[$lang]['url'] = str_replace( "/nl-nl/en/","/en-nl/", $languages[$lang]['url'] );

}

return $languages;

}

Rankmath

add_filter( 'rank_math/frontend/canonical', function( $canonical ) {
	return str_replace( "/nl-nl/en/","/en-nl/", $canonical);
});

add_filter( 'rank_math/frontend/canonical', function( $canonical ) {

return str_replace( "/nl-nl/en/","/en-nl/", $canonical);

});

This will not cover every angle, but will give you a starting point! I love my puzzles and there always is a viable solution :)

Need something similar … get in touch!

Happy coding …

9. September 2021

Destination Youtube: Sync WooCommerce Products & Youtube Videos

INTRODUCTION

This is not a tutorial, but more like sharing a nice geeky road-trip ;)

I have a pretty good understanding of the Youtube Data API, as I have actively used it on portalZINE TV in the past, to upload videos and dynamically link them to my local post-types.

For one of my latest customer projects (TYPEMYKNIFE / typemyknife.com), the task was a bit more complicated and the goal was to make it as future-proof as it can be with the Google APIs :)

Prerequisites / References to get you started:

Youtube Data API Documentation
Google Cloud Console
OAuth 2.0 Playground / Generating a refresh token for Youtube API calls (a bit old, but close enough)
Google API SDK / Composer
OAuth 2 Simplified / Getting Started with OAuth 2.0

portalZINE NMN | Development meets Creativity | youtube data api

THE GOALS

The goal for the setup was to actively synchronize WooCommerce products with linked / attached videos, with their source at Youtube.

As the website is multilingual, WPML integration is critical as well. And as Youtube allows localization of title and description, that can be added into the mix quiet easily in the future ;)

The following product attributes should be mirrored and optimised for Youtube:

Product Title
Product Description (5000 character limit at Youtube)
My customer already has a pretty long and detailed description, which is perfect for Youtube!
We average around 2900-3000 characters.
Product Tags (500 character length limit at Youtube)

The following attributes should be integrated into the description to enrich the Youtube description:

Introduction
Product Link to WooCommerce Product / Shop
Socials
Legal Information
Hash Tags (local post-type to add recurring / important hash tags)
Outro

All of these attributes will be collected internally and assigned using a simple template system, which allows the customer to move parts around freely and freely layout the description for Youtube.

The following stats will be collected for review:

Products without a video linked (no relation)
Products with the same video linked (duplication)
Videos without a product in the system
Total amount of videos / amount of video-pages (50 videos max per page)
Total amount of products with videos

Youtube SEO

These are the relevant key aspects, that help to get your videos more views.

Relevant text featuring at least 1,000 characters
Keywords that are relevant on Google Search and YouTube and describe your video
Hashtags, can also be used within the text
Timestamps Links to related content / affiliate links

portalZINE NMN | Development meets Creativity | youtube data api auth

PREPARING AUTH / OAUTH2 AT GOOGLE

In the past access to the Youtube Data API was far easier and less limited, when it comes to offline / none expiring OAuth2 refresh tokens.

When you are building a server-side application that is only available to your customer or moderators, it makes no sense to run that app through the Google App verification. Your app will never be used in public.

The Youtube Data API and its scopes, are defined as sensitive and therefor require third-party security assessment for public access.

The scopes I am requesting are https://www.googleapis.com/auth/youtube.upload + https://www.googleapis.com/auth/youtube.

Because of that its far easier to just setup OAuth 2 in test mode and restrict access to your customer and specific additional accounts only (up to 100 test users allowed). What all these account need, is access to your own or Brand Youtube Channel.

Preparation in the Google Cloud Console:

Activate Youtube Data API
Create OAuth2 Client ID
- Name
- Allowed Redirects
Setup OAuth-Consent Screen
- Name of the App
- Support Email
- Logo
- Allowed Domains
- Typ: External
- Setup all test-users, all of these need access to your Youtube channel already

A detailed description can be found here.

You can circumvent verification for the consent screen, by using an organisation setup at Google. Here some infos about that. With that setup offline refresh tokens should work fine.

Update: Just tried that, but wont work with a branded youtube account, even though the cloud user has admin access to it. Not giving up yet, but Google / Youtube really makes it difficult to just have a simple offline solution for specific tasks ;) BTW also forced the login hint, to make sure the right account is logged in : $client->setLoginHint(‘YourWoreksapceAccount’); !

You might have heard of the “The League of Extraordinary Packages“. It is a group of developers who have banded together to build solid, well tested PHP packages using modern coding standards.
They also offer an OAuth2-client + OAuth2 Google extension that can be used.

SERVER SETUP

On the server, the Google API PHP SDK can be easily integrated using Composer.

In my customer plugin I neatly separated all relevant areas in classes & traits:

Online Authentification, with a 60 minute session
Offline Authentification, with a 1 week expiration (might explain that in more detail in the future.)
Error handling and debug information
Listing of videos
Updating of videos
Updating of tags
Updating hashtags
Backup old data locally, before update. There should always be an option to restore, especially with 500 videos :)
Settings & templates
REST routes / endpoints

You can check the expiry time of your access token by accessing:
https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=YOUR_TOKEN
“A Google Cloud Platform project with an OAuth consent screen configured for an external user type and a publishing status of “Testing” is issued a refresh token expiring in 7 days.” – Google

Basic Auth example from the SDK:

<?php
 
// Call set_include_path() as needed to point to your client library.
set_include_path($_SERVER['DOCUMENT_ROOT'] . '/directory/to/google/api/');
require_once 'Google/Client.php';
require_once 'Google/Service/YouTube.php';
session_start();
 
/*
 * You can acquire an OAuth 2.0 client ID and client secret from the
 * {{ Google Cloud Console }} <{{ https://cloud.google.com/console }}>
 * For more information about using OAuth 2.0 to access Google APIs, please see:
 * <https://developers.google.com/youtube/v3/guides/authentication>
 * Please ensure that you have enabled the YouTube Data API for your project.
 */
$OAUTH2_CLIENT_ID = 'XXXXXXX.apps.googleusercontent.com';
$OAUTH2_CLIENT_SECRET = 'XXXXXXXXXX';
$REDIRECT = 'http://localhost/oauth2callback.php';
$APPNAME = "XXXXXXXXX";
 
 
$client = new Google_Client();
$client->setClientId($OAUTH2_CLIENT_ID);
$client->setClientSecret($OAUTH2_CLIENT_SECRET);
$client->setScopes('https://www.googleapis.com/auth/youtube');
$client->setRedirectUri($REDIRECT);
$client->setApplicationName($APPNAME);
$client->setAccessType('offline');
 
 
// Define an object that will be used to make all API requests.
$youtube = new Google_Service_YouTube($client);
 
if (isset($_GET['code'])) {
    if (strval($_SESSION['state']) !== strval($_GET['state'])) {
        die('The session state did not match.');
    }
 
    $client->authenticate($_GET['code']);
    $_SESSION['token'] = $client->getAccessToken();
 
}
 
if (isset($_SESSION['token'])) {
    $client->setAccessToken($_SESSION['token']);
    echo '<code>' . $_SESSION['token'] . '</code>';
}
 
// Check to ensure that the access token was successfully acquired.
if ($client->getAccessToken()) {
    try {
        // Call the channels.list method to retrieve information about the
        // currently authenticated user's channel.
        $channelsResponse = $youtube->channels->listChannels('contentDetails', array(
            'mine' => 'true',
        ));
 
        $htmlBody = '';
        foreach ($channelsResponse['items'] as $channel) {
            // Extract the unique playlist ID that identifies the list of videos
            // uploaded to the channel, and then call the playlistItems.list method
            // to retrieve that list.
            $uploadsListId = $channel['contentDetails']['relatedPlaylists']['uploads'];
 
            $playlistItemsResponse = $youtube->playlistItems->listPlaylistItems('snippet', array(
                'playlistId' => $uploadsListId,
                'maxResults' => 50
            ));
 
            $htmlBody .= "<h3>Videos in list $uploadsListId</h3><ul>";
            foreach ($playlistItemsResponse['items'] as $playlistItem) {
                $htmlBody .= sprintf('<li>%s (%s)</li>', $playlistItem['snippet']['title'],
                    $playlistItem['snippet']['resourceId']['videoId']);
            }
            $htmlBody .= '</ul>';
        }
    } catch (Google_ServiceException $e) {
        $htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',
            htmlspecialchars($e->getMessage()));
    } catch (Google_Exception $e) {
        $htmlBody .= sprintf('<p>An client error occurred: <code>%s</code></p>',
            htmlspecialchars($e->getMessage()));
    }
 
    $_SESSION['token'] = $client->getAccessToken();
} else {
    $state = mt_rand();
    $client->setState($state);
    $_SESSION['state'] = $state;
 
    $authUrl = $client->createAuthUrl();
    $htmlBody = <<<END
  <h3>Authorization Required</h3>
  <p>You need to <a href="$authUrl">authorise access</a> before proceeding.<p>
END;
}
?>
 
<!doctype html>
<html>
<head>
    <title>My Uploads</title>
</head>
<body>
<?php echo $htmlBody?>
</body>
</html>

100

101

102

103

104

105

106

107

<?php

// Call set_include_path() as needed to point to your client library.

set_include_path($_SERVER['DOCUMENT_ROOT'] . '/directory/to/google/api/');

require_once 'Google/Client.php';

require_once 'Google/Service/YouTube.php';

session_start();

* You can acquire an OAuth 2.0 client ID and client secret from the

* {{ Google Cloud Console }} <{{ https://cloud.google.com/console }}>

* For more information about using OAuth 2.0 to access Google APIs, please see:

* <https://developers.google.com/youtube/v3/guides/authentication>

* Please ensure that you have enabled the YouTube Data API for your project.

$OAUTH2_CLIENT_ID = 'XXXXXXX.apps.googleusercontent.com';

$OAUTH2_CLIENT_SECRET = 'XXXXXXXXXX';

$REDIRECT = 'http://localhost/oauth2callback.php';

$APPNAME = "XXXXXXXXX";

$client = new Google_Client();

$client->setClientId($OAUTH2_CLIENT_ID);

$client->setClientSecret($OAUTH2_CLIENT_SECRET);

$client->setScopes('https://www.googleapis.com/auth/youtube');

$client->setRedirectUri($REDIRECT);

$client->setApplicationName($APPNAME);

$client->setAccessType('offline');

// Define an object that will be used to make all API requests.

$youtube = new Google_Service_YouTube($client);

if (isset($_GET['code'])) {

if (strval($_SESSION['state']) !== strval($_GET['state'])) {

die('The session state did not match.');

}

$client->authenticate($_GET['code']);

$_SESSION['token'] = $client->getAccessToken();

}

if (isset($_SESSION['token'])) {

$client->setAccessToken($_SESSION['token']);

echo '<code>' . $_SESSION['token'] . '</code>';

}

// Check to ensure that the access token was successfully acquired.

if ($client->getAccessToken()) {

try {

// Call the channels.list method to retrieve information about the

// currently authenticated user's channel.

$channelsResponse = $youtube->channels->listChannels('contentDetails', array(

'mine' => 'true',

));

$htmlBody = '';

foreach ($channelsResponse['items'] as $channel) {

// Extract the unique playlist ID that identifies the list of videos

// uploaded to the channel, and then call the playlistItems.list method

// to retrieve that list.

$uploadsListId = $channel['contentDetails']['relatedPlaylists']['uploads'];

$playlistItemsResponse = $youtube->playlistItems->listPlaylistItems('snippet', array(

'playlistId' => $uploadsListId,

'maxResults' => 50

));

$htmlBody .= "<h3>Videos in list $uploadsListId</h3><ul>";

foreach ($playlistItemsResponse['items'] as $playlistItem) {

$htmlBody .= sprintf('<li>%s (%s)</li>', $playlistItem['snippet']['title'],

$playlistItem['snippet']['resourceId']['videoId']);

}

$htmlBody .= '</ul>';

}

} catch (Google_ServiceException $e) {

$htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',

htmlspecialchars($e->getMessage()));

} catch (Google_Exception $e) {

$htmlBody .= sprintf('<p>An client error occurred: <code>%s</code></p>',

htmlspecialchars($e->getMessage()));

}

$_SESSION['token'] = $client->getAccessToken();

} else {

$state = mt_rand();

$client->setState($state);

$_SESSION['state'] = $state;

$authUrl = $client->createAuthUrl();

$htmlBody = <<<END

<h3>Authorization Required</h3>

<p>You need to <a href="$authUrl">authorise access</a> before proceeding.<p>

END;

}

<!doctype html>

<html>

<head>

<title>My Uploads</title>

</head>

<body>

<?php echo $htmlBody?>

</body>

</html>

A simple upload example can be found here .

 try{

    // REPLACE this value with the video ID of the video being updated.
    $videoId = "VIDEO_ID";

    // Call the API's videos.list method to retrieve the video resource.
    $listResponse = $youtube->videos->listVideos("snippet",
        array('id' => $videoId));

    // If $listResponse is empty, the specified video was not found.
    if (empty($listResponse)) {
      $htmlBody .= sprintf('<h3>Can\'t find a video with video id: %s</h3>', $videoId);
    } else {
      // Since the request specified a video ID, the response only
      // contains one video resource.
      $video = $listResponse[0];
      $videoSnippet = $video['snippet'];
      $tags = $videoSnippet['tags'];

      // Preserve any tags already associated with the video. If the video does
      // not have any tags, create a new list. Replace the values "tag1" and
      // "tag2" with the new tags you want to associate with the video.
      if (is_null($tags)) {
        $tags = array("tag1", "tag2");
      } else {
        array_push($tags, "tag1", "tag2");
      }

      // Set the tags array for the video snippet
      $videoSnippet['tags'] = $tags;

      // Update the video resource by calling the videos.update() method.
      $updateResponse = $youtube->videos->update("snippet", $video);

      $responseTags = $updateResponse['snippet']['tags'];

      $htmlBody .= "<h3>Video Updated</h3><ul>";
      $htmlBody .= sprintf('<li>Tags "%s" and "%s" added for video %s (%s) </li>',
          array_pop($responseTags), array_pop($responseTags),
          $videoId, $video['snippet']['title']);

      $htmlBody .= '</ul>';
    }
  } catch (Google_Service_Exception $e) {
    $htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',
        htmlspecialchars($e->getMessage()));
  } catch (Google_Exception $e) {
    $htmlBody .= sprintf('<p>An client error occurred: <code>%s</code></p>',
        htmlspecialchars($e->getMessage()));
  }

try{

// REPLACE this value with the video ID of the video being updated.

$videoId = "VIDEO_ID";

// Call the API's videos.list method to retrieve the video resource.

$listResponse = $youtube->videos->listVideos("snippet",

array('id' => $videoId));

// If $listResponse is empty, the specified video was not found.

if (empty($listResponse)) {

$htmlBody .= sprintf('<h3>Can\'t find a video with video id: %s</h3>', $videoId);

} else {

// Since the request specified a video ID, the response only

// contains one video resource.

$video = $listResponse[0];

$videoSnippet = $video['snippet'];

$tags = $videoSnippet['tags'];

// Preserve any tags already associated with the video. If the video does

// not have any tags, create a new list. Replace the values "tag1" and

// "tag2" with the new tags you want to associate with the video.

if (is_null($tags)) {

$tags = array("tag1", "tag2");

} else {

array_push($tags, "tag1", "tag2");

}

// Set the tags array for the video snippet

$videoSnippet['tags'] = $tags;

// Update the video resource by calling the videos.update() method.

$updateResponse = $youtube->videos->update("snippet", $video);

$responseTags = $updateResponse['snippet']['tags'];

$htmlBody .= "<h3>Video Updated</h3><ul>";

$htmlBody .= sprintf('<li>Tags "%s" and "%s" added for video %s (%s) </li>',

array_pop($responseTags), array_pop($responseTags),

$videoId, $video['snippet']['title']);

$htmlBody .= '</ul>';

}

} catch (Google_Service_Exception $e) {

$htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',

htmlspecialchars($e->getMessage()));

} catch (Google_Exception $e) {

$htmlBody .= sprintf('<p>An client error occurred: <code>%s</code></p>',

htmlspecialchars($e->getMessage()));

}

portalZINE NMN | Development meets Creativity | youtube data api list

UPDATING A SINGLE VIDEO
BULK VIDEO UPDATES

All operations to and from the Youtube Data API are rate limited. What is important for us, are the queries per day.

The default quota is 10.000 queries per day, sounds a lot, but is easily gone after updating 150-200 videos. You can request this limit to be raised, but again a lot of paperwork and questions that are just not needed.

The above limit just means, that you need to cache as many queries as possible, to only query live when needed ;)

Something you learn fast, when experimenting with different things! I hit that limit multiple times in the first few days, with around 500 videos in the queue.

Different operation cost you different amount of units

A read operation that retrieves a list of resources — channels, videos, playlists — usually costs 1 unit.
A write operation that creates, updates, or deletes a resource usually costs 50 units.
10.000 / 50 are 200 updates per day :)
A search request costs 100 units.
A video upload costs 1600 units. Glad we are not handling the upload as well, but technically easy ;)

It also helps to use the Google Developer Playground to testdrive the Youtube Data API with your own credentials while optimising your own code.
You can define your own OAuth 2.0 configuration by clicking the cog in the upper right corner.

I setup the bulk updating to allow splitting it over multiple days, if required. For this an offline refresh token is needed, as the standard token expires after 60 minutes.

My customer can also just update a single video, when changes are applied to the product or a new product has been added.

If more frequent updates are required, I will ask for a raise of the queries per day. You can circumvent the limit by using multiple Google Cloud Platform accounts with new OAuth credentials, but really an overkill right now. I have done that in the past ;)

LAYOUT & DESIGN

The GUI is just based of Bootstrap, to make it simple and clean. Using my own wrapper to make it work within the WordPress admin.

For all ajax operations, I am using htmx and _hyperscript, which I will talk about in another article in the future.

Really neat and clean way to build single page interfaces.

The whole plugin runs of its own REST API endpoint. Just love using WordPress as a headless system.

I used TWIG / Timber for the templates, to separate logic and layout. Timber has been my goto solution for years now. It drives my own and many customer websites.

portalZINE NMN | Development meets Creativity | road ends

CONCLUSION

This has been a lot of fun, maybe a bit too much LOL

I do geek-out about many of my projects, but this experience helped me to bring my WordPress toolbox to the next level. This will help to drive other things in the future.

Working so deeply with the Youtube Data API has been fun and feels so easy now, after all remaining problems have been solved.

Would have loved this during my portalZINE TV days ;)

I you read all this, you just earned yourself a badge for completion ;)

Need something similar or something else? Just say hi and we can talk.

ENJOY CODING ….

29. August 2021

WPML – Going multilingual with WordPress

Getting started

“WPML (WordPress Multilingual) makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs.” – WPML

I have been running and setting up multilingual websites for more than 12 years. WordPress and related integrations have gladly come a long way to make our life’s a lot easier.

For basic content WPML is almost plug & play, but I do see more and more sites / customers struggling with more complex setups. WPML is one of the most popular multilingual plugins and is used on x00.000 of websites.

Just so you know, WPML is a commercial solution!

Settings for almost everything

The amount of settings has increased a lot over the years and offers possible solutions for almost any content / plugin setup.

But for more complex setups, I would suggest to hire a professional to look over the settings or study the plugin documentation carefully.

Especially with a lot of content, it can quickly increase problems and the need to revisit specific content over and over again.

How to translate

WPML lets you translate any text that comes from themes / theme frameworks (DIVI, Elemetor, Gutenberg …), plugins, menus, slugs, SEO and additionally supported integrations (Gravity Forms, ACF, WooCommerce …).

You can translate content internally for yourself, using translation management to translate with an internal team of translators or get help from external translators / translation services.

The latest version also offers AI translations, which allows you to get a decent start for most of your content.

In addition to the above, WPML String Translation allows you to translate texts that are not in posts, pages and taxonomy. This includes the site’s tagline, general texts in admin screens, widget titles and many other areas.

Is it worth its money

Well, I am a bit biased. I have not looked much at other solutions for the past 5 years, as it offers all I really need.

I have used it on projects from 2 to 15 languages and it scales nicely. At least with proper hosting attached!

Anything can be tweaked through the API, Hooks and custom integrations. I have build additional WPML tools for my customers, to streamline some of the repeating / boring tasks.

Their support is responsive and the forum already provides a huge amount of answers to most of the questions that might come up.

If you develop / maintain multiple customer websites with multilingual content, the investment is quickly
amortized. I do offer WPML to my maintenance package customers, maybe something to consider ;)

Its an essential solution in my WP toolbox.

WPML 4.5

WPML 4.5 is on its way and will include a “Translate Everything” feature, among other fixes and enhancements.

Translate Everything allows you to translate all of your site’s content automatically as you create it. You can then review the translations on the front-end before publishing.

WPML / Documentation

9. April 2021

VR is here! Are you already infected?

Watching from the sidelines

VR has not just arrived, but it finally arrived for me and the masses ;)

I have been watching VR evolving from the sidelines for the past few years. Its been a fun ride, from the first prototypes to what we have now.

The biggest problem in the past, has been image quality and the huge upfront investment for me. With the latest generation all of this has completely changed.

As a developer …

I am constantly keeping up with new technologies and have been diving into WebVR for some time now.

Its so easy to export your own simple Unity VR project into WebVR and integrate it into your own web projects.

Unreal Engine also provides options to work on VR projects. Or build upon the WebXR API.

Microsoft also has a foot in the door, with MRTK (Allows to integrate teleporting easily / Releases).

Oculus Quest 2

With the announcement of the Oculus Quest 2 last year, I finally decided to dive in myself. Standalone VR allows me to concentrate on WebVR and experiment, while still having the option to expand into the linked PC-universe in the future as well.

PC Link / PC Rig / PC VR

I have no plans to invest into a beefy gaming rig yet, but have been trying out cloud solutions using Shadow and Paperspace Gaming / Paperspace $10 Coupon (KS4Q2TA).

Update: Latency is the biggest problem with these solutions and it can be a hit & miss! My Paperspace experience was close to perfect for pure desktop experiences, for VR sadly not :) Can not testdrive Shadow right now, as the waitinglist is already showing September 2021 LOL CRAZY! Local latency can be greatly optimized by using Wi-Fi 6 or Wi-Fi Direct.

With the current GPU prices, building a machine makes hardly any sense. I would love to build a small form-factor PC with a Shuttle XPC for example ;) Maybe later this year ….

I invested in VR-Comfort for now ;) I transformed the Oculus Quest 2 into a FrankenQuest with the DAS-Mod (HTC VR VIVE Deluxe Audio Strap). Loving the new look, audio and perfect weight balance :) Perfect for longer sessions.

Building a VR READY PC in 2021

I am officially infected. I decided to upgrade an old computer to minimum VR specs, to at least tryout PC-VR :)
The final build is ghetto and really a tight fit, but it works perfectly :)

For 2021 and the current shortages, this is a big win! The whole upgrade was about 400 EUR, with 250 EUR for the new GPU.

Here are my current PC-VR specs:

Area	Before	After / Comment
PC	Fujitsu P900 – i3	Nice clean case. Mainboard D2990 (ultra small μATX). Really tiny! This would normally not be my dream mainboard, but I am using what I have :) Trying to keep costs low.
Power Supply	Stock	EVGA 600 W1. Better cooling and needed power for the GPU.
CPU	i3 – 2120	i7 2600K . Big change in overall performance.
CPU Cooler & Fan	Stock	Be Quiet Pure Rock Slim BK030. (Had to do some mods to install it)
RAM	8GB	Enough for now.
GPU	NVIDIA 1030 GTX – Low profile	NVIDIA 1060 6gb Inno3D. That card takes up all slots, had to add a riser card to play with some USB 3.0 cards :)
USB3	USB2	Inateck PCIe USB 3.0 – KTU3FR-4P , again connected via a riser card! Make sure that the card gets proper power (green light on the card itself), that is why another Inateck card failed to connect or had random disconnects ;) That card charges and connects perfectly with the Oculus Quest 2. I was almost giving up and glad I found a working solution ;)
USB LINK		Using a 3m long cable from KIWI Design, works without any problems and has secure fit on the Oculus Quest 2
Bluetooth	–	Bluetooth 4.0 – Asus BT-400

All that is required, has been added and now the PC VR universe is open for exploration :) As hardware is getting more expensive every week, I updated a second machine with comparable specs and have 2 machines that can run VR with entry /decent specs :)

Interesting Platforms

There are many new platforms providing access to new tools and often an easy access to a broader community. Some of them with nice build tools in VR.

Facebook Horizon Venues (Beta Access only)
REC Room
Altspace VR (Unity World Builder) / Altspace VR for Enterprise + Microsoft Mesh
Microsoft Mesh Platform / Mixed Reality Developer Program
Firefox Hubs (Mozilla Spoke)
VRChat
Sansar
VIRCadia
Tivoli Cloud (Blender Tools)

Open Source

“OpenXR is an open, royalty-free standard for access to virtual reality and augmented reality platforms and devices. It is developed by a working group managed by the Khronos Group consortium.”

You will find a bunch of efforts on the way, to build the next open multi-platform VR solution.

Building experiences in VR

Building with Unity is always an option, but not the best solution for those that are just getting started or for those that just want a simple starting point to experiment ;)

Zoe – Immersive 3D Creation Platform
Create content directly in VR or using Unity :) Zoe is a perfect tool for Educators & Institutions.
A-Frame. A web framework for building 3D/AR/VR experiences. Make 3D worlds with HTML and Entity-Component For Quest, Rift, WMR, SteamVR, mobile, desktop
OpenSpace 3D – OpenSpace3D is a free and open-source platform, designed to create virtual and augmented-reality applications or games. If you are a 3D artist, a designer, a lab researcher, or just someone with a lot of passion and curiosity, you don’t need software development skills to use our platform.
Amazon Sumerian is a set of tools for creating high-quality virtual reality (VR) experiences on the web. With Sumerian, you can construct an interactive 3D scene without any programming experience, test it in the browser, and publish it as a website that is immediately available to users.
Mozilla Spoke – Create 3D social scenes for Hubs
Wonderland Engine is a development platform for web-based graphics applications. It comes with an accessible 3D editor application – the Wonderland Editor – and an efficient WebAssembly based runtime that runs in the browser.

VR Office

Another evolving area is the office space. Some of the platforms above already dive into that area, like XRDesktop. But Oculus / Facebook itself is working on its Infinite Office integration.

Other solutions help to mirror your PC within VR and open new ways for collaboration:

The biggest problem is the mirroring of the keyboard. As soon as that is solved, this might become usable. Immerse VR provides an option to overlay a virtual representation of your keyboard, by mapping your real-life keyboard in VR.

Communities

Always important to stay informed. Here some communities are frequently visit:

Tools

Oculus TrayTool – It’s a free application that helps you get the most out of your Oculus Rift & Oculus Quest, when connected via Link.

Here to stay

VR is here to stay, I would have never though it would take off 2020 / 2021. But we all face new challenges and technology is evolving to make space for new possibilities.

Not all gaming

While gaming / fitness / social are the entry point for VR currently, this whole market will expand quickly in 2021.

Really looking forward to new possibilities and another facet of my developer life.

Looking forward meeting some of you in the VR-Multiverse :)

Enjoy coding ….

14. May 2020

2020: WordPress Admin White Label Solutions ( Personal Favorites )

I am always looking for easy ways to white label the WordPress administration for myself and my clients. A nice personal touch for each project and an easy way to declutter the interface.

These are my personal favorites, that I use on a regular basis.

Admin Themes / Login Page

There are a lot of solutions out there, but many break easily and are really heavy to load. Some of these solutions I tried also break easily on new WordPress Upgrades. The first two below are currently my favorites.

Slate Pro ( Commercial )
“Slate Pro is a powerful WordPress admin theme plugin that reimagines WordPress with a clean and simplified design. White label your WordPress install with custom colors, a custom login screen, custom admin branding, and more. Slate Pro is now multisite compatible! Network activate to control the look of all sub-sites.”

Slate Pro is a clean and simple admin theme, that does not try to alter the interface completely. Small changes that make a difference. Color adjustments, logos, simple menu & widget enhancements and login page tweaks. Compared to other solutions it has been a stable experience, even after multiple WordPress Updates.

This is an install and enjoy solution!
Kodeo Admin UI ( Free – Open Source )
“Kodeo Admin UI turns your WordPress backend into a clean and modern user interface. All elements are well designed and arranged for the best user experience.”

Kodeo is another clean interface, that goes further than Slate Pro. Many areas of the admin theme have been changed. It works well with most 3rd party plugins, but I have had problems with some plugins doing their own little interface tweaks.
With Kodeo your WordPress Admin completely transforms and gives it a really modern & clean look.

This is an install and tweak solution! You might need to trim certain CSS properties to make it work for everything.
Material WP ( Commercial )
“Material Design version of the WordPress Admin Interface”

I have used this once or twice in the past. Its more of a honorable mention. The admin theme transforms the interface completely, but can feel sluggish on slower servers. It has an impressive set of options and gets regular updates.

This is again an install and tweak solution! It works with most of the 3rd party plugins and Gutenberg, but some things might need to be trimmed by hand.

Menu Editors & User Groups

When sharing the administration with your customer, you often need to make it as simple a possible for them. Depending on your setup, the menu becomes cluttered and overwhelming really fast.

I often trim menus for each user role, to make only those options accessible that are really needed.

Admin Menu Editor Pro ( Free / Commercial )
This tool has been part of many of my projects and has been a solid solution for years. You can hide & move menus, create new menus, tweak menus by user role, hide plugins and also tweak the admin toolbar with an extra addon.
Worth every penny! There is a free version available, that might just provide enough functionality for your next project.
Groups ( Free )
“Groups is designed as an efficient, powerful and flexible solution for group-oriented memberships and content access control. It provides group-based user membership management, group-based capabilities and access control for content, built on solid principles. Groups is light-weight and offers an easy user interface, while it acts as a framework and integrates standard WordPress capabilities and application-specific capabilities along with an extensive API.”

This plugin allows you to add new user groups easily and can tie into the plugin above.

User Profiles

When sharing the administration with multiple users, its always nice to add some personality to the user profiles as well.

WP User Profiles
“WP User Profiles is a sophisticated way to edit users in WordPress.”

The plugin provides other small addons, like WP User Avatars. Neat plugin to tweak admins, editors and other users.

Admin Dashboard Replacements

cubicFUSION Admin Enhancer (Free)

This is a new plugin I am currently working on. The current shortcodes addon can help you integrate dashboard widgets into the dashboard builders below.

I am also working on my own dashboard builder, that requires none of the solutions below and builds upon WordPress core functionality.
Dashboard Welcome for Elementor (Free)

“Dashboard Welcome by PowerPack Elements gives you full control over the WordPress welcome panel using Elementor.

You can personalize the dashboard with content and design built with Elementor. You can add heading, contact information, form, video, images, affiliate links, etc.

While the above plugin is free, you need a Elementor Pro License to use it!
Dashboard Welcome for Beaver Builder (Free)

“Welcome by Beaver Addons gives you full control over the WordPress welcome panel using Beaver Builder.

You can personalize the dashboard with content and design built with Beaver Builder. You can add heading, contact information, form, video, images, affiliate links, etc.”

Even though the plugin above is free, Beaver Builder is a commercial plugin!
Divi Dashboard Welcome ($22)

“Divi Dashboard Welcome gives you control over the WordPress Dashboard Welcome screen …”

The plugin requires the Divi Page Builder. Both plugins are commercial!

Enjoy
Alex

18. November 2019

Structured Data – I love it!

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.

{
  "@context": "http://schema.org",
  "@type": "Article",
  "author": "John Doe",
  "interactionStatistic": [
    {
      "@type": "InteractionCounter",
      "interactionService": {
        "@type": "WebSite",
        "name": "Twitter",
        "url": "http://www.twitter.com"
      },
      "interactionType": "http://schema.org/ShareAction",
      "userInteractionCount": "1203"
    },
    {
      "@type": "InteractionCounter",
      "interactionType": "http://schema.org/CommentAction",
      "userInteractionCount": "78"
    }
  ],
  "name": "How to Tie a Reef Knot"
}

{

"@context": "http://schema.org",

"@type": "Article",

"author": "John Doe",

"interactionStatistic": [

{

"@type": "InteractionCounter",

"interactionService": {

"@type": "WebSite",

"name": "Twitter",

"url": "http://www.twitter.com"

"interactionType": "http://schema.org/ShareAction",

"userInteractionCount": "1203"

{

"@type": "InteractionCounter",

"interactionType": "http://schema.org/CommentAction",

"userInteractionCount": "78"

}

"name": "How to Tie a Reef Knot"

}

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!

16. November 2019

Building Low Carbon Websites

I signed the Sustainable Web Manifesto a couple of weeks ago. The manifesto perfectly reflects how I have been handling my business and my projects.

I created a special “GO GREEN” subsection to talk about the topic in more detail and give you some more context about the areas I can help you with.

We all share and use the web, just as we all share and live on this planet. This manifesto is a public declaration of a shared commitment to create a sustainable internet.
https://www.sustainablewebmanifesto.com/

CLEAN – The services we provide and services we use will be powered by renewable energy.
EFFICIENT – The products and services we provide will use the least amount of energy and material resources possible.
OPEN – The products and services we provide will be accessible, allow for the open exchange of information, and allow users to control their data.
HONEST – The products and services we provide will not mislead or exploit users in their design or content.
REGENERATIVE – The products and services we provide will support an economy that nourishes people and planet.

“If we embrace sustainability in our work, we can create a web that is good for people and planet.”

What is Bookstack

What are you using it for?

Why display CSV files?

Lets get started!

Include the file in Bookstack

Tweak the header

Add required libs

Find CSV links in the page and append to link

A bonus

The result

What is Übersicht?

Custom Desktop Widgets / MenuBar Enhancements

What are you using these for?

Übersicht – desktop widgets / working & planned

xbar – Extend Menu Bar / working & planned

GIT PUSH FAILS (Mac M1)

THE QUESTION

THE ROUGH IDEA

1 . BASE.website web.site (with possibly different languages)

2. SUB.website web.site/nl-nl/

THE SOLUTION

BASIC URL HANDLING

HOOKS TO THE RESCUE

Happy coding …

INTRODUCTION

THE GOALS

PREPARING AUTH / OAUTH2 AT GOOGLE

SERVER SETUP

UPDATING A SINGLE VIDEOBULK VIDEO UPDATES

LAYOUT & DESIGN

CONCLUSION

ENJOY CODING ….

Getting started

Settings for almost everything

How to translate

Is it worth its money

WPML 4.5

Watching from the sidelines

As a developer …

Oculus Quest 2

PC Link / PC Rig / PC VR

Building a VR READY PC in 2021

Interesting Platforms

Open Source

Building experiences in VR

VR Office

Communities

Tools

Here to stay

Not all gaming

Enjoy coding ….

Admin Themes / Login Page

Menu Editors & User Groups

User Profiles

Admin Dashboard Replacements

Example

Allowed Structured Data

How to integrate Structured Data

Validating Structured Data

Need help?

Have fun using or discovering structured data!

UPDATING A SINGLE VIDEO
BULK VIDEO UPDATES