Javascript Archives | portalZINE NMN | Development meets Creativity

2. December 2020

cubicFUSION Themes for Klaro!

“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.

var cm_event = document.createEvent('Event');

cm_event.initEvent('consentModalOpen', true, true);

document.addEventListener('consentModalOpen', function (e) {
    console.log("consentModalOpen")
}, false);
	
document.addEventListener("DOMContentLoaded", function(e) {        

        var cm_target 	= document.getElementById( "klaro" ),
			cm_visible 	= false;	

        var observer 	= new MutationObserver(function(mutationRecords) {          

            if(document.querySelectorAll('#klaro .cookie-modal').length > 0 && cm_visible == false){	
                cm_visible = true;
                document.dispatchEvent(cm_event);
              
            }else{
                cm_visible = false;
            }
        });

      observer.observe(cm_target, {
        childList: true, 
        subtree: true, 
        characterDataOldValue: true 
      });
});

var cm_event = document.createEvent('Event');

cm_event.initEvent('consentModalOpen', true, true);

document.addEventListener('consentModalOpen', function (e) {

console.log("consentModalOpen")

}, false);

document.addEventListener("DOMContentLoaded", function(e) {

var cm_target = document.getElementById( "klaro" ),

cm_visible = false;

var observer = new MutationObserver(function(mutationRecords) {

if(document.querySelectorAll('#klaro .cookie-modal').length > 0 && cm_visible == false){

cm_visible = true;

document.dispatchEvent(cm_event);

}else{

cm_visible = false;

}

});

observer.observe(cm_target, {

childList: true,

subtree: true,

characterDataOldValue: true

});

6. November 2020

Welcome Dashboard with Gutenberg – cubicFUSION Admin Enhancer 0.2.5

What’s new / What changed ?

Admin Enhancer is the first free plugin released under the cubicFUSION brand. The plugin is still work in progress, but a tool that is already used within some of my client projects. I am using this plugin to centralise things I love & need, when sending out a finished website or project.

NEW: DASHBOARD GUTENBERG / DASHBOARD TEMPLATES
NEW: ADMIN TOOLBAR
UPDATE: SHORTCODES

Addons included …

This version includes a new addon “GUTENBERG DASHBOARD“, that allows you to build a White-Label Admin Dashboards using the Gutenberg Editor.

It integrates with the SHORTCODES addon and allows to drop in the dashboard widgets via its own Gutenberg Block.

The Block provides settings to overwrite CSS from the admin widgets, allowing you tweak them a bit — for better visual integration. The Dashboard template itself can be tweaked using CSS and Sass via SCSS now 😉

I am also releasing the first integration of the “ADMIN TOOLBAR” addon, which allows you to tweak some of the admin toolbar and footer options (Hide WP Logo, Hide Toolbar on Frontend, Hide Menu Items ..)

Already working on 0.3 … ENJOY!

cubicFUSION – Admin Enhancer
WordPress Repository

13. June 2020

How to access Gutenberg Block Text-Selections / Text-Formats and other Mysteries

Gutenberg Documentation

While Gutenberg is becoming more stable with each release, documentation is only growing slowly. Many parts are outdated, superficial or completely undocumented.

For more complex or individual requirements you have to dive deep. Gladly the browser console allows you to easily checkout what is driving the editor.

Open your browser developer console and start exploring wp. / wp.data. / wp.api. .

What each function does, can be read in the Block Editor Handbook.

This is all nice, but how do I actually use these?

At this stage of the development, many things are still changing. So using the API direcly is mostly a matter of reading the documentation, checking the implementation within the core codebase and using trial & error.

Some mysteries have already been solved by others or they provide the right lead. Check Stack Overflow and especially the WordPress Development area for solutions.

Its still like a treasure hunt most of the time LOL Perfect for those that love to solve puzzles :)
Just my cup of tea or better coffee!

Do I need to learn React?

It surely is a benefit, as the whole Gutenberg Editor is build upon React. But for simple tweaks its not a must. But once you start going deeper, you will see the benefit and will learn to love React yourself.

What about ES6, ESNext vs ES5?

ECMAScript 6 is also known as ES6 and ECMAScript 2015.

ES5 is on its way out and ES6 is supported on all modern browsers since end of 2016.

Older browsers can be supported using a polyfill, that augments those browsers and allows them to use the new ES6 features.

React and also Gutenberg builds on the new Javascript functionality, but ES5 examples can also be found.

You can also easily compile ES6 to ES5 using Babel in your development environment or online.

Solving Mysteries!

I will be using the following sections to highlight some things that puzzled me and might help others to get a grip on things. I will be extending this, as I discover or solve more Gutenberg mysteries :)

I will keep the example code in ES5 for now, as that is the easiest way to start tinkering. I will also focus on things that can be used from external code. Most of the small code snippets are connected to each other.

Mystery 1: Text Selection & Formats

These little code snippets are all connected and showcase how to retrieve a selection from a block and change or remove a text format.

Wait for domReady

Make sure the editor has loaded and the DOM can be accessed.

wp.domReady(function() {
  // Your code here
});

wp.domReady(function() {

// Your code here

});

Access the active block

wp.data.select('core/block-editor').getSelectedBlock();

// Block ID - reference
var blockUID = wp.data.select('core/block-editor').getSelectedBlock().clientId;

wp.data.select('core/block-editor').getSelectedBlock();

// Block ID - reference

var blockUID = wp.data.select('core/block-editor').getSelectedBlock().clientId;

Access active block selection

// Start of selection
var selectionStart = wp.data.select('core/block-editor').getSelectionStart();

// End of selection
var selectionEnd = wp.data.select('core/block-editor').getSelectionEnd();

// Start of selection

var selectionStart = wp.data.select('core/block-editor').getSelectionStart();

// End of selection

var selectionEnd = wp.data.select('core/block-editor').getSelectionEnd();

The actual offset can be found within the OBJECT.

wp.data.select('core/block-editor').getSelectionEnd().offset;

1	wp.data.select('core/block-editor').getSelectionEnd().offset;

Get block HTML content

// Get block
var block = wp.data.select('core/block-editor').getSelectedBlock();

// Attributes
var blockAttributes = block.attributes;

// Content
var blockContent = block.attributes.content;

// Get block

var block = wp.data.select('core/block-editor').getSelectedBlock();

// Attributes

var blockAttributes = block.attributes;

// Content

var blockContent = block.attributes.content;

Create Richtext object

 var richTextContent = wp.richText.create(
{
  blockContent 
});

var richTextContent = wp.richText.create(

{

blockContent

});

Get active text formats

var activeTextFormats = blockContent.formats;

1	var activeTextFormats = blockContent.formats;

Check if format is active for selected text

This function is documented, but wont work from the outside that easily. This normally checks the isActive state of the component. Here a small workaround using Lodash.

var formatToCheck = "core/text-color";
var formatToCheckisActive = true;

if(_.find(value.formats&#91;selectionStart], { type: formatToCheck }))
{
  formatToCheckisActive = false;			
}

var formatToCheck = "core/text-color";

var formatToCheckisActive = true;

if(_.find(value.formats[selectionStart], { type: formatToCheck }))

{

formatToCheckisActive = false;

}

Formats are saved within the Richtext object under formats and the text formats are stored within arrays that correspond to the actual index + range of the selection. So if a text-color has been applied from index 4 to 8, you will find the corresponding array for that.

Works well and does the trick for now. Here the output from the developer console, showing the arrays for an 18 character long paragraph:

formats: Array(18)
0: Array(1)
0: {type: "core/bold"}
length: 1
__proto__: Array(0)
1: Array(1)
0: {type: "core/bold"}
length: 1
__proto__: Array(0)
2: &#91;{…}]
3: &#91;{…}]
4: &#91;{…}]
14: &#91;{…}]
15: &#91;{…}]
16: &#91;{…}]
17: &#91;{…}]
length: 18
__proto__: Array(0)

formats: Array(18)

0: Array(1)

0: {type: "core/bold"}

length: 1

__proto__: Array(0)

1: Array(1)

0: {type: "core/bold"}

length: 1

__proto__: Array(0)

2: [{…}]

3: [{…}]

4: [{…}]

14: [{…}]

15: [{…}]

16: [{…}]

17: [{…}]

length: 18

__proto__: Array(0)

Apply a new text format to selection

I am using the core/text-color format with applyFormat as an example, can be anything.

richTextContent = wp.richText.applyFormat(
    richTextContent, 
    { type: 'core/text-color',
        attributes:{class: "some-color-class"} 
    }, 
    selectionStart, 
    selectionEnd
);

richTextContent = wp.richText.applyFormat(

richTextContent,

{ type: 'core/text-color',

attributes:{class: "some-color-class"}

selectionStart,

selectionEnd

);

Insert text at start of selection

insertObject can insert content at the start of the selection, with the rest between selectionStart and selectionEnd getting removed. There is also insert, which allows you to simply add a HTML string into the Richtext value.

richTextContent = wp.richText.insertObject(
    richTextContent,  
    'core/text-color', 
    selectionStart, 
    selectionEnd
);

richTextContent = wp.richText.insertObject(

richTextContent,

'core/text-color',

selectionStart,

selectionEnd

);

Remove text format from selection

removeFormat allows you to remove a text format from the current selection.

richTextContent = wp.richText.removeFormat(
    richTextContent,  
    'core/text-color', 
    selectionStart, 
    selectionEnd
);

richTextContent = wp.richText.removeFormat(

richTextContent,

'core/text-color',

selectionStart,

selectionEnd

);

Would be nice to use toggleFormat here, but that works within native components and not by selection index as the two calls above.

Convert Richtext value to HTML

var prepNewHTML = wp.richText.toHTMLString(
    {richTextContent } 
);

var prepNewHTML = wp.richText.toHTMLString(

{richTextContent }

);

Replace current block content

wp.data.dispatch( 'core/block-editor' ).updateBlock( blockUID, {
    attributes: {
      content: prepNewHTML
    }
} );

wp.data.dispatch( 'core/block-editor' ).updateBlock( blockUID, {

attributes: {

content: prepNewHTML

}

} );

Whats Next?

I will add some more Gutenberg examples in the future.

Enjoy coding and keep tinkering :)

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

22. March 2020

Heidelpay Academy – Certified Agencies

Heidelpay

ENGLISH: The heidelpay Group is one of the fastest growing German tech companies for international payment transactions. Founded by Mirko Hüllemann in 2003, the company relies on its own innovative solutions such as the secured invoice purchase, purchase by instalments, direct debit and online bank transfers. In addition, heidelpay also cooperates with more than 200 well-known providers of credit cards and wallet solutions.

As a payment institute approved by the German Federal Financial Supervisory Authority BaFin and with over 16 years of experience in e-commerce and at the POS in its favour, the heidelpay Group enables companies of all sizes to make payments worldwide. The full-service payment service provider covers the entire spectrum of electronic payment processing: from processing, procurement, monitoring and risk management to accounts receivable management. Its fully scalable and modular solutions are used by 30,000 national and international customers. The various payment methods are available for e-commerce, m-commerce and stationary points of sale. “

GERMAN: Die heidelpay Group ist eines der am stärksten wachsenden, deutschen Tech-Unternehmen für den internationalen Zahlungsverkehr. Das von Mirko Hüllemann im Jahr 2003 gegründete Unternehmen setzt dabei auf innovative, eigene Lösungen, wie Rechnung, Ratenkauf, Lastschrift und Online-Überweisung. Daneben arbeitet heidelpay mit über 200 namhaften Anbietern von Kreditkarten oder Wallet-Lösungen zusammen.

Als von der Bundesanstalt für Finanzdienstleistungsaufsicht (BaFin) zugelassenes Zahlungsinstitut mit über 16 Jahren Erfahrung im E-Commerce und am POS zu seinen Gunsten ermöglicht die heidelpay-Gruppe Unternehmen jeder Größenordnung den weltweiten Zahlungsverkehr. Der Full-Service-Payment-Dienstleister deckt das gesamte Spektrum der elektronischen Zahlungsabwicklung ab: von der Abwicklung über die Beschaffung, Überwachung und das Risikomanagement bis hin zum Forderungsmanagement. Die voll skalierbaren, modularen Lösungen werden von 30.000 nationalen und internationalen Kunden genutzt. Für E- Commerce, M-Commerce und den stationären Point of Sale stehen die verschiedenen Zahlungsmethoden zur Verfügung.

Heidelpay Academy

ENGLISH: On March 19th I took part in the Heidelpay Academy, to be able to support my customers in the integration of all innovative solutions offered by Heidelpay.

I have been a partner since last year and have already integrated direct debit via Heidelpay for a customer.

GERMAN: Am 19.03. habe ich an der Heidelpay Academy teilgenommen, um meinen Kunden in der Zukunft verstärkt bei der Einbindung der innovativen Lösungen von Heidelpay zu unterstützen.

Ich bin schon seit letztem Jahr Partner und habe bereits für einen Kunden das Lastschriftverfahren über Heidelpay integriert.

Heidelpay Academy

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.”

6. September 2019

Finally! GreenApe Shop goes live!

Together with my partners in crime (Dorit & Micha), we have finally opened our own personal online store.

We have been selling our single origin coffees (1st Single Malt Whisky Coffee, Basic – Single Origin Arabica, Kill me Quick Espresso -Single Origin Robusta), teas (Kräuterschorle – Kräutertee, Feuerkieker – Schwarztee) and rum (Fortune Teller – Double Aged Barbados Rum) using the Amazon Marketplace for the past 2 years.

No more Amazon

GreenApe has been a side project for the past years and I never wanted to deal with the maintenance of our own store. But its time to move on and do our own thing. Amazon has removed so many useful features over the years or added a new fee on top of other fees. Even though Amazon provides access to a large amount of customers, for small companies the fees build up quickly.

Our own

With our own store we can finally do bundles, coupons again and better optimized shipping. It will also allow me to better testdrive some new interesting features for my customers ;) Yeah its kind of my new toy or shopping lab! Its fun being able to work on untested new SEO features, structured data, merchant tools, shopping ads and tracking of all of those.

Locations

We have been selling in Germany for the past 2 years, but that might be changing in the future depending how well the new store shapes up :)

If you live in Germany, love good coffee, tee or rum … say Hi!

GreenApe – Makes Your Life Better
Homepage
Shop
Contact us

17. August 2019

Keeping Development Credentials Secure

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

DB_HOST=localhost
DB_USER=username
DB_PASS=password

DB_HOST=localhost

DB_USER=username

DB_PASS=password

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.

&lt;?php
require_once __DIR__.'/../vendor/autoload.php';

$dotenv = new Dotenv\Dotenv(__DIR__.'/../');
$dotenv->load();
?>

<?php

require_once __DIR__.'/../vendor/autoload.php';

$dotenv = new Dotenv\Dotenv(__DIR__.'/../');

$dotenv->load();

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 …

30. May 2019

Have you heard of GatsbyJS?

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

What they have to say …

Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.
Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.
Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.
Performance Is Baked In. Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources, and more to ensure your site is fast — no manual tuning required.
Host at Scale for Pennies. Gatsby sites don’t require servers so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on services like GitHub Pages and Netlify.

What I have to say …

While researching some popular static site generation tools, GatsbyJS comes up often. I have played with NuxtJS and Hugo in the past, but what I REALLY like about GatsbyJS is the plugin / modular system. You can build your website with plain-old React and CSS styles, but make your development more efficient by adding node_modules.

Also being able to import any data source with ease, using GraphQL, is amazing. And when it comes to content management, you can easily hook a headless WordPress or Drupal setup into the mix and consume their REST APIs :)

I am not switching my own website to GatsbyJS anytime soon, but its another tool in my toolbox for future project consideration !

There are many tutorials on Youtube about getting started, maybe something to consider for the next freetime testdrive ;) Enjoy …

GatsbyJS @ Github

18. May 2019

Screenshot Service with Node.js

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

Black & White

Klaro! Tweaks

Missing events for consent modal open / closed …

What’s new / What changed ?

Addons included …

Gutenberg Documentation

This is all nice, but how do I actually use these?

Do I need to learn React?

What about ES6, ESNext vs ES5?

Solving Mysteries!

Mystery 1: Text Selection & Formats

Wait for domReady

Access the active block

Access active block selection

Get block HTML content

Create Richtext object

Get active text formats

Check if format is active for selected text

Apply a new text format to selection

Insert text at start of selection

Remove text format from selection

Convert Richtext value to HTML

Replace current block content

Whats Next?

Enjoy coding and keep tinkering :)

Admin Themes / Login Page

Menu Editors & User Groups

User Profiles

Admin Dashboard Replacements

Heidelpay

Heidelpay Academy

No more Amazon

Our own

Locations

.env Files for Environment Variables

Encrypted .env files

Apache Pull – setting environment variables

Infrastructure Secret Management

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

What they have to say …

What I have to say …

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