DEV Community: Stefan Fiedler

How to Docker? - The strategic value

Stefan Fiedler — Mon, 09 Aug 2021 08:35:25 +0000

Chances are you already know what Docker is, maybe you have already worked with it for a while or you just got started. Either way, you probably wouldn't want to go back. So for someone who might have missed out on the action, why is it that everyone keeps talking about Docker? Why should you switch and what strategic value will you gain?

This short introduction to virtualisation and containerisation is supposed to help you understand, how Docker can save you time, money and headaches. To understand why Docker is helpful in the first place, let's look at some of the most common issues when developing any kind of application, site or service.

But it works on my machine!

Imagine the following scenario: You are supposed to support your coworkers during the development of an existing application. The first thing you do is check out the git repository to pull the most recent source code onto your local machine. Next, you install the application dependencies, in this example, we are using composer and the node package manager.

So you might try to install the composer dependencies, but wait, what's that?

1- dealerdirect/phpcodesniffer-composer-installer v0.5.0 requires composer-plugin-api ^1.0 -> found composer-plugin-api[2.0.0] but it does not match the constraint.

Looks like you have a different composer version installed on your machine which is not compatible with the project. So you have to downgrade your composer installation to version 1.

Next, you install the frontend dependencies using the node package manager, is that another error?

1npm WARN notsup Unsupported engine for semver@7.3.2: wanted: {"node":">=10"} (current: {"node":"8.10.0","npm":"6.14.4"}) 2npm WARN notsup Not compatible with your version of node/npm: semver@7.3.2

Unsupported node version? This time we need to upgrade our locally installed version. But will this maybe break another project you have been working on? Do you have to down- and upgrade your tools every time you switch projects?

Local development and required services

Finally, after hours of figuring out the appropriate versions of all the required tools you almost have the application up and running. All you're missing is a database to store the app's data, an SMTP server to send emails and a Redis instance to cache pages.

You can imagine how all these services are again dependent on a specific version. Installing everything is going to take hours and even then you might run into more issues. Maybe you forgot to install a PHP extension and suddenly you have even more issues than when you started.

Wouldn't it be nice if we could somehow avoid facing these challenges?

Docker to the rescue!

This is where we meet Docker, an open platform for developing, shipping, and running applications.

The basic idea is to separate the application environment from your local machine. This environment should be the exact same for everyone working on the project, it should contain all required tools and services and it should be easily expendable/scaleable. Such an environment is called a container and the following summary from the official Docker website explains the main goal:

A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another. A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries and settings.

Source: What is a container? Official Docker explanation

Isn't this just a virtual machine?

Chances are, you have worked or at least heard of a virtual machine. It is basically a separate operating system running on top of your main operating system. Docker follows a similar route but avoids one main constraint - size. A normal VM-image (containing the whole operating system) is much larger in size than a Docker image. This can be accomplished by Docker utilising the main OS's kernel.

Integrations and the Docker-Hub

There are already plenty of integrations for docker. An example would be hosting providers, supporting or offering Docker image-based solutions. This also nicely integrates into existing continuous delivery and deployment pipelines.

We can't talk about Docker and not mention the Docker-Hub - a service build for finding and sharing images. You can find official vendor images for all kinds of use cases. Images range from simple web servers, database applications and even whole operating systems.

See for yourself by visiting the hub.

Docker - not if, but when?

Making the switch to Docker should not be a question of yes or no, but rather of when!

The long- and short term benefits are endless, here are our top three:

Speed: Developers are enabled to rapidly set up new or existing projects within minutes and share that same development environment with all team members.
Reusability: The same Docker image can then be used to speed up the deployment and save you the extra setup and maintenance of a traditional server.
Testability: Future updates can be tested and reviewed before being deployed to the production environment, decreasing the risk of running into issues post-deployment.

This article will be part of a series about Docker best practices at Taikonauten. Stay tuned and we're happy about feedback and questions you want to know more about.

GDPR Compliant User Consent Management with Klaro

Stefan Fiedler — Wed, 21 Apr 2021 13:44:59 +0000

Managing user consent while complying to the latest GDPR policies can be very confusing and frustrating - but it doesn’t have to be!

We would like to show you how to get started with Klaro - an open-source and GDPR-compliant consent management tool developed by the german company KIProtect.

If you are new to the whole GDPR and cookie consent topic, please read our article: Best practises to build GDPR-compliant cookie banners with Klaro

How to integrate Klaro GDPR-compliant consent management tool

To get started, we will need two things: a copy of the Klaro widget and a valid configuration.

Including the Klaro widget

To use the widget on your site, simply embed the latest release using the provided CDN. Please see the official integration documentation to get a detailed explanation of the different options. The following snippet will get you started:



<script defer 
        type="application/javascript"
        src="https://cdn.kiprotect.com/klaro/latest/klaro.js">
</script>

You can also download the latest release and self-host the widget using the following example:



<script defer 
        type="application/javascript" 
        src="klaro.js"> <!-- point to the downloaded file on your webserver/app -->
</script>

If you now reload the page, nothing will have changed yet. We are still missing the configuration.

Node.js integration

If you are using the node package manager, Klaro is also available as a Node.js module. Simply install it using:



npm install klaro

How to configure Klaro

After you have successfully included the widget using one of the options above, you create your configuration file. Klaro uses a central configuration object to reference all of your services (things like Google-Analytics or YouTube videos). It will also allow translations to be set and updated. There are many options and you should check the official configuration template to see all available settings.

A sample configuration for loading Google-Analytics might look like this:



var klaroConfig = {
    privacyPolicy: '/privacy.html',
    apps : [
        {
            name : 'google-analytics',
            default: true,
            title : 'Google Analytics',
            purposes : ['statistics'],
            cookies : [/^ga/i]
        }
    ]
}

The configuration needs to be present in order to get the Klaro-widget to show up. Let’s extend our previous example with our configuration:



<!-- INCLUDE WIDGET -->
<script defer 
        type="application/javascript"
        src="https://cdn.kiprotect.com/klaro/latest/klaro.js">
</script>

<!-- WIDGET CONFIGURATION -->
<script>
  var klaroConfig = {
      privacyPolicy: '/privacy.html',
      apps : [
          {
              name : 'google-analytics',
              default: true,
              title : 'Google Analytics',
              purposes : ['statistics'],
              cookies : [/^ga/i]
          }
      ]
  }
</script>

If you now reload the page, you should be greeted by the following consent-banner:

Let’s take a closer look at our configuration!



privacyPolicy: '/privacy.html'

This value represents the URL or path to your privacy policy. It is mainly used inside the individual translation texts, to make references to the privacy policy.



apps

An app is basically any service (tracking, embeds, etc.) that requires the user’s consent. Examples might be Google-Analytics, Matomo, Instagram, Facebook or Google Maps. This of course might also be your own cookies or services you provide.



name : 'google-analytics',    // internal name, reference when including 3rd-party scripts
default: true,                // should the option be enabled by default?
title : 'Google Analytics',   // displayed name in modal
purposes : ['statistics'],    // group (if multiple apps of the same kind)
cookies : [/^ga/i]            // regex matcher to determine cookies

How to update third-party scripts in Klaro

Now that we have the widget up and running, we need to make sure the third-party scripts are not loaded until the user has consented to the apps. As of right now, you might have a consent-banner but Google will still be tracking the user in the background and cookies might still get stored on the user’s system.

This is the default snippet used when including Google-Analytics. By default, this code would always execute once the page has been loaded.



 <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

First let’s prevent the script from executing by adding type="text/plain" to the script-tag.



<script type="text/plain">
  // GA tracking code
</script>

Next, we need to add a data-attribute to tell Klaro what the script’s original type was, by adding data-type="application/javascript"



<script type="text/plain"
        data-type="application/javascript">
  // GA tracking code
</script>

Last, we have to tell Klaro which of the previously defined apps corresponds to this script by adding the app name as the data-name="google-analytics” attribute. This is what you should end up seeing:



<script type="text/plain"
        data-type="application/javascript"
        data-name="google-analytics">
  // Info: data-name corresponds to name in configuration file 
  // GA tracking code
</script>

Now the page should not be executing the Google-Analytics script until the user has consented to the tracking. That’s the basic setup done! No more tracking without the user’s consent.

Helpful guides and snippets

Here are some common steps and configurations on how to get most out of your consent-widget:

How to change the default texts

In order to change the default texts, you need to define the corresponding translation inside your configuration. You can find the translation keys for each language in the official source code.

Let’s assume we want to update the default modal headline, text and button labels:



var klaroConfig = {
    privacyPolicy: '/privacy.html',
    apps : [
        {
            name : 'google-analytics',
            default: true,
            title : 'Google Analytics',
            purposes : ['statistics'],
            cookies : [/^ga/i]
        }
    ],
    translations: {
        'en': {
            'consentModal': {
                'title': 'My new fancy title!', // update the main title
                'description': 'A detailed description of what this is.', // main description
                'privacyPolicy': {
                  'text': 'Read our {privacyPolicy} right now!' // using {brackets} we can use placeholders
                }
            },
            'acceptSelected': 'Press me!' // override accept button label
        }
    }
}

Using these updated translations, this is what the new modal should look like:

Tip: Customise your Klaro widget even further by overwriting the default CSS classes.

How to show a consent overlay on embedded content

This is a very useful feature that not many people might know about. Imagine you are using embedded content like Facebook, Google Maps or Youtube. Users might not want to load all of the embedded content when visiting a site and might want to allow only individual elements. Check the official documentation for a detailed explanation.

Let’s assume you have an embedded Youtube video:



<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/nXkgbmr3dRA" frameborder="0" allow="encrypted-media;" allowfullscreen>
</iframe>

So let’s add Klaro and create a configuration including the following options:



var klaroConfig = {
    acceptAll: true,
    apps: [
        {
            purposes: ['marketing'],
            name: "youtube",
            contextualConsentOnly: true // this option enables inline consent
        }
    ]
}

We have added the contextualConsentOnly option. Using this configuration, we need to update our iFrame. Add the data-name=”youtube” attribute and update the src=”...” attribute by adding the data-src=”...” prefix.



<iframe width="560" height="315" 
        data-name="youtube"
        data-src="https://www.youtube.com/embed/nXkgbmr3dRA" frameborder="0" allow="encrypted-media;" allowfullscreen>
</iframe>

As you can see, the iFrame will no longer load initially and you can enable the external service right where it would be displayed on the page.

How to make a reusable React component

If you plan to reuse the component in multiple projects, we recommend putting all Klaro code into a dedicated component.



import React from 'react'
import '../../styles/cookies.scss' // Path to your cookie styles
import { CookieConfig } from './CookieConfig'; // Path to your config file

const Cookies = class extends React.Component {

  componentDidMount() {

    // Initialize Klaro cookie consent
    var Klaro = require('klaro');
    // we assign the Klaro module to the window, so that we can access it in JS
    window.klaro = Klaro;

    // we set up Klaro with the config
    Klaro.setup(CookieConfig);
  }

  render() {
    return (
      <></>
    )
  };
}

export default Cookies;

To use it, just add:



<Cookies />

Klaro offers scaleable, future-proof and developer friendly GDPR consent management

Having worked with different libraries and providers, Klaro has proven itself to be a great alternative. Any documentation is always a good indicator on the quality of the library and Klaro’s source code has been well documented. Klaro is free of charge and does scale well with any website or application. Together with the many customisation options, this consent management tool should cover most of your needs.

As always, make sure to carefully check your requirements before choosing a user consent management solution. We will be releasing an article on best practises for building GDPR-compliant cookie banners with third party tools soon. Stay tuned!

WordPress vs. Kirby CMS - 2021 Feature Comparison

Stefan Fiedler — Fri, 26 Feb 2021 15:36:47 +0000

In the past we at Taikonauten have used both Kirby and WordPress on a regular basis to create stunning projects. Choosing the right content management system is always a difficult decision, so let’s take a look at their unique strengths and differences and how they affect digital product development!

How do Wordpress & Kirby store their data?

The biggest and fundamentally most important difference is the way in which the data is stored:

WordPress being the most popular CMS requires a database to store its information such as users or blog posts. The database is a separate system that needs to be maintained and updated.

Kirby on the other hand utilises a hierachical file-based structure to store its contents in files and folders inside the physical file system, much like you would store and organise files on your desktop.

Not relying on a database eliminates the single point of failure (if the database fails - the page will no longer work) and Kirby’s powerful templating engine ensures much faster processing. Content can also be versioned much easier (GIT, SVN) as the files are stored in nested folders instead of database tables.

Differences in setting up Kirby or Wordpress

Kirby’s setup is done in a breeze – it’s easy, flexible and production ready in an hour leaving you more time to focus on developing the product. All that is required is a basic web server (Apache, Nginx) and PHP. You can simply drag and drop the files onto your server and should be able to instantly start using your new Kirby site.

WordPress’s setup has come a long way and most online platforms and providers offer a simple 1-click install. If you are installing WordPress manually however, the process get’s a little more complicated. First, you need to install and set up a new database. Next you will need to move the project files into your web server to serve them to the outside world. Finally when visiting your new WordPress site you’ll have to complete the installation process by following the instructions on the screen.

Getting Kirby up and running is much easier and faster compared to WordPress and the developers have also provided a great Starterkit download including lots of sample content so you can try it out yourself.

How to customise Kirby and WordPress using plugins and themes

WordPress itself is free and offers a wide range of commercial as well as free plugins and themes. You won’t need any programming knowledge in order to extend and change your site’s look and feel. The included plugin marketplace offers a
quick and easy way to add new features. Implementing new themes or plugins however will require a decent amount of very specific knowledge in order to use and extend the WordPress ecosystem.

Kirby in comparison is paid-per-domain but provides features like multi-language sites out of the box. The rather small library of external plugins will force you to implement custom solutions more often. These custom solutions however make use of the extensive library of pre-defined field types and building blocks for images, urls, texts and many more. Developing new features is much faster, easier and more intuitive compared to WordPress.

Where to find documentation and support using Kirby & Wordpress?

Kirby’s documentation is very organised and includes hundreds of code snippets and examples that you will most likely find very helpful. In case the documentation does not offer the right answer, the small but very technical community has proven to be incredibly helpful and the forum is constantly updated and moderated by the official developers.

WordPress also offers an extensive official documentation but the amount of content is very overwhelming and finding the right piece of information can be frustrating. WordPress attracts a huge audience generating content, which leads to more time being spent in doing research and validation than actual problem solving.

Which CMS is faster and safer?

This is where Kirby will outshine WordPress by a lot! Kirby’s page load time is much, much faster compared to WordPress. The many different caching options and providers, if used correctly, will result in speeds similar to static html pages.

Maintenance also matters: Kirby being a lightweight system is easier to keep in shape. Updates are usually very easy to install and won’t mess with your existing data.

A common issue with WordPress is having to wait for plugins or themes to update after the WordPress core has been updated. This is cause for security concerns and has proven to be a common target for many WordPress sites.

Which CMS is better?

There is no right or wrong when choosing your CMS but it can have a crucial impact on your project planning and development times. Times are changing quickly and so are the requirements for a modern website. Loading times and security concerns are becoming more important than ever. WordPress may offer a lot of extensions but how many of these are you actually going to end up using?

Kirby offers a future proof alternative that tries to fill the gap between a minimalistic static blog and a full blown e-commerce platform.

Consider both options before your next project and adapt to your customer’s needs with the future in mind.

What are your experiences? We’re curious!