DEV Community: Sascha Bardua

Best practises to build GDPR-compliant cookie banners with Klaro

Sascha Bardua — Fri, 04 Jun 2021 14:50:15 +0000

🇪🇺 What are the current guidelines in Europe for GDPR?

The General Data Protection Regulation (GDPR) is the toughest privacy and security law in the world. Though it was drafted and passed by the European Union (EU), it imposes obligations onto organisations anywhere, so long as they target or collect data related to people in the EU. The regulation was put into effect on May 25, 2018.

What is GDPR, the EU’s new data protection law?

The GDPR will levy harsh fines against those who violate its privacy and security standards, with penalties reaching into the tens of millions of euros. Source

European countries are obliged to implement the GDPR. As of now it’s recommended to go the extra mile and be as law-compliant as possible, even if cookie laws are not fully implemented in many countries yet and rather count as guidelines.

Personal data is any information that relates to an individual who can be directly or indirectly identified: Names and email addresses, but also location information, ethnicity, gender, biometric data, religious beliefs, web cookies, and political opinions.

The overall objectives are to increase transparency, accountability and data security. And ultimately give back control to the user, who [as a data subject] has these rights:

The right to be informed
The right of access
The right to rectification
The right to erasure
The right to restrict processing
The right to data portability
The right to object
Rights in relation to automated decision making and profiling.

Since 2016 the EU parliament is working on a draft for “ePrivacy”, which takes data privacy some steps further: by holding accountable providers of web browsers, regulating machine-to-machine communication (see Internet of Things, e.g. GPS data), an obligatory end-to-end encryption, opt-in cookie consent (cookies need to be proactively approved, before they can be used), the opposite is opt-out (the user can revoke cookies afterwards and is not proactively informed).

📔 Guide: How to choose a cookie consent tool for your website?

For each use, case or business model there are different factors and requirements that need to be considered. At Taikonauten we went through such an evaluation ourselves to offer our clients the most efficient solution and reduce development and UX overhead.

Our criteria to choose a third party cookie consent provider:

Hosting - server location, open source

Where is the server located? Which are the valid laws for that server location? Can we host the service ourselves? Is the service even open source?

Scalability per domain

How does pricing scale for new domains or subdomains? Are subdomains included? What about sub pages? Is the pricing fixed or dynamic?

Ease of integration

How easily can the tool be integrated? Are there npm packages or JS frameworks? Are there CMS plugins available? Is the tool compatible with Frontend frameworks like React or Vue.js? What about client-side or server-side rendering? How complete and helpful is the documentation?

Multi-Language Support

Does the tool support multiple languages? Can we adjust the tools for multiple regions with different legislation?

Customisation & Styling

Can we customise aspects of the cookie banner such as branding, colors, fonts and texts? Do we need to hack CSS rules or are there properties, configuration files or JS frameworks to do so? Can all texts be replaced?

Automation

Can websites be scanned regularly and automatically to update the cookie declaration? Can the contents of the cookie declaration be automated?

Other features

What about A/B testing? Can consent data be exported?

💡 6 Tips for implementing Law-Compliant Cookie Banners

Take data privacy of your users seriously and make it part of technical conception and UX design.

Get legal support up front if you’re designing or developing websites. Be on the safe side and avoid unnecessary costs and efforts later.

Stay up to date with latest regulations and install a privacy manager in your team or company, dedicated to this topic.

Reduce coding overhead by using a third-party cookie and consent management tool.

Prepare for scalability: think of what happens when the website adds multi-language support, new domains/ subdomains or the number of users increases. Consider that each consent tool has different payment plans and scale less good for different scenarios.

If you work with multiple clients, pick a tool that covers 90% of your cases in order to reduce your tech stack.

What did we choose at Taikonauten

At Taikonauten we build websites for different clients, each with very individual requirements: from corporate websites, online shops and digital service platforms. Trust and credibility towards their clients is a key ingredient for their success, which needs to be reflected in the choice of technology. As such, Klaro’s open-source approach and its highly customizable, versatile set of features made us choose Klaro as our go-to cookie consent tool. Read this article to learn more about how we work with Klaro in our projects.

💬 What is your take on data privacy at the faces of design and web development? Let us know in the comments below!

Evaluation and tweaks using Strapi Headless CMS + GraphQL

Sascha Bardua — Tue, 25 May 2021 10:43:18 +0000

Recently we developed a career website. We faced the challenge to mitigate the risks of integrating legacy code while staying in scope, on budget and on time during project execution. Key requirements were the integrating of APIs such as Salesforce and XING. We had limited access to the previous developers, which increased risks due to potential unforeseen bottlenecks.

The approach we chose was to find a lightweight CMS backend with just enough functionality to match our specifications without being overly complex for our developers and our client (who maintains the website contents).

From the various headless CMS options we compared (e.g. Contentful, Prismic, Netlify CMS and Kirby) we identified, that Strapi is the most suitable for our case. Strapi (a NodeJS Vue.JS based CMS) convinced is with its minimalistic UI and its simple integration with our React and GraphQL frontend tech stack.

What’s good about Strapi?

minimal and clean UI
very simple role and user management
drag & drop builder for data types (collections), pages and modules
intuitive content management
GraphQL integration + playground (plugin needs to be installed in CMS admin panel)
growing community and continuous development
self-hosted CMS (great for data privacy!)

Where is room for improvement?

long initial installation process (using Docker containers)
out-of-the-box Docker image was not ready to be easily integrated with Gitlab CI/CD and Ansible
documentation a bit weary around JWT authentication process for users and content
still early development with some bugs (e.g. our docker container needs to restart every time we make a change in the data model/ schema)

Conclusion: How did Strapi work for our project?

The initial struggles to set up Strapi using Docker ultimately ended up saving us valuable time during the development of the website. We build our React components and could map them nicely with the CMS data schema (see in hacks below). Querying the data was easy using GraphQL. The Strapi + GraphQL playground made writing queries super simple while being able to debug a query live. In the end, this tech stack reduced the overall development time by almost 30%.

This freed up development time we then used to integrate and debug legacy code while staying on schedule. The existing Strapi REST API was well documented, so we built workflows to sync data between Salesforce APIs and our own database.

Our client likes Strapi because of its intuitive UI and as developers, we can enforce input restrictions such as limiting text lengths, required form fields and more to maintain content quality (and prevent breaking the designs).

3 tweaks when developing with Strapi

(1) Remove query limit

Initially, the returned GraphQL queries are limited to 100 entries. This can be changed using a settings.json in /extenstions/graphql/config. See more in the documentation.

{
  "endpoint": "/graphql",
  "tracing": false,
  "shadowCRUD": true,
  "playgroundAlways": false,
  "depthLimit": 7,
  "amountLimit": 1000,
  "federation": false
}

(2) Visualize Strapi markup as HTML

We used React Markup to visualize Rich Text contents. Some formatting like underlines needs to be handled manually, however.

(3) Coherent information architecture in front- and backend

We mapped the React component properties 1:1 to our Strapi data models. This creates consistency throughout the technologies:

CMS Backend:

GraphQL queries:

We also used GraphQL fragments to make code reusable and easily changed when the CMS schema changes.

export const BUTTON_FRAGMENT = `
  title
  className
  fontColor
  buttonColor
  type
  route
`;

React component with Typescript:

export type ButtonProps = {
  title: string,
  className?: string,
  fontColor?: string,
  buttonColor?: string,
  type?: string,
  onClick?: () => void,
  route?: string,
};

const Button = (props: ButtonProps): JSX.Element => {
  <ButtonEl className={`${props.className || ''} button`} onClick={props.onClick}>
  ...
  </ButtonEl>
};

export default Button;

Creative Technology in Times of Crisis

Sascha Bardua — Tue, 02 Feb 2021 16:41:29 +0000

Creative technology and empathy are crucial in times of uncertainty. A snapshot of how a health crisis forcefully digitalises our society to satisfy social needs and help.

Since the term digitalisation started to enter our business and personal lives it was hard to grasp its true meaning. We just didn't really experience it with our own eyes and hands. The forceful digitalisation of our daily life in times of the Corona pandemic makes the term somewhat more tangible.

We experience digitalisation in time of crisis in many ways:

We seek information online. We already got information from online news and forums. Now we see a rise in new apps and websites and increased use of social media to provide us with real-time data about the pandemic, the spread of the virus, the situation of our favourite local shops or findings ways to help neighbours, friends and family.

We seek help online. Spending our time locked up at home, we face new challenges. It’s our mental health and wellbeing, inability to go outside and do groceries or in the worst cases even domestic violence. The internet is the first go-to point for these personal challenges.

We shop online. Your local bakery, coffee shop, supermarket, retailers and doctors suddenly needed to offer their products and services online. Often without having any experience with the hidden required digital infrastructures, logistics, online payment workflows and IT-security. New platforms took this opportunity to offer digital marketplaces for small businesses, digitalise the Point of Sale, offer virtual customer experiences or help selling vouchers to support your locals.

We learn online. School fast-tracked their concepts of digital classrooms built on rudimental digital infrastructures. Online courses and personal education gave free access to their courses and made visible the digital illiteracy.

We take action online. Suddenly we comfort a friend during a video call or organise our neighbourhood community in huge Telegram groups. Online communities and mobile apps became the platforms where we offer our help to people we can’t meet, where businesses form alliances in existence-threatening circumstances and people work on projects initiated by national online hackathons.

We trigger change online. Democracy and activism are finding their way online using web technologies, social media and decentralised organisation. This could be online petitions for basic income during Corona or even finding new ways to make climate change activism digital.

We experience culture online. Museums, galleries, bars and clubs started to offer virtual exhibitions or even offered live streaming from the club with local DJs with a full-on financial concept to rescue and support the club scene.

We need creative thinking and empathy to review the ways we use and engage with web and mobile technologies.

To tackle new challenges in these rapidly changing circumstances for both people and organisations, we need to review how we use and engage with web and mobile technologies. Because the internet is our portal to offering and consuming the online world. Building user-friendly, accessible and safe digital products decide who we include. For this, creative thinking and empathy are substantial.

We need to find ways to seamlessly integrate technology into our daily activities and routines. We need to find fast, scalable solutions for the most pressing and sometimes health-threatening problems. We need to find ways to make technology super easy to understand for everyone, particularly for non-millennials or tech-lovers. We need to make the digital world accessible for everyone on all devices at any time. We need to invest in digital literacy as part of education and life-long learning no matter their age. We need to empower people to think digital and develop and maintain their own digital products. And we need to prepare businesses to run smoothly after the crisis, building on newly digitalised infrastructures, tools and processes.

This how we did this at Taikonauten:

Schweigen macht Schutzlos

Weißer Ring launched their German campaign Schweigen macht Schutzlos to raise awareness and prevent domestic violence. We helped design and build a website and online shop to buy masks and donate. A brilliant example how digital complements traditional campaigning to increase reach and impact.

bothAnd

bothAnd is a pan-European community of engaged citizens and domain experts working together for more clarity, transparency, and orientation around data privacy during the corona crisis. We helped design this digital platform to easily access and share the most relevant information on which public servants and technologists take action to serve everyone in need.

Food for Thought 🍕

How can we make technology accessible for everyone?
How can we train digital literacy for young and old?
What can we learn from the current crisis?

The real challenges of using Mac Catalyst

Sascha Bardua — Fri, 08 Nov 2019 10:30:30 +0000

Introduction

In our latest project we tried to leverage the abilities brought by Mac Catalyst to make our iOS app Mac-compatible. However simple it was announced, the reality was and still is covered in pitfalls and challenges. In this post we'd like to share key insights and learnings, which we had porting our app. We are still looking for answers and are excited to get more input from this great community.

Adapt your information design

Working on a desktop app is fundamentally different from working on mobile devices. The way we interact with our environment, where we look for information and where we use the app have a massive impact on the overall app design and its information structure. We started with mobile-only designs and had to learn, that it's not quite that simple to bring it to macOS. Here are some implications which need to be reflected in the information architecture of your designs:

You will need an iPad app as a stepping stone from iOS to macOS. There is no way to avoid that step.
Desktop navigation happens mostly at upper part of your screen or its window margins. Did you consider putting your commands and actions into the main menu, a toolbar or sidebar? Did you design for segments instead of tabs?
Mobile apps usually hide information until it's needed. Desktop resolution allows for showing more data or hide it in context menus or the menu bar. Did you rethink where the user finds all available information in a desktop-friendly way?

Let's look at the example of the new JIRA macOS app:

Make all components and actions Mac-compatible

Apps can make use of various UI elements, such as dialogs, prompts and push notifications. It is crucial to check whether all of these work as expected when being ported by Mac Catalyst.

Add click capabilities

Most of the native iOS components map touch handlers to click handlers. However, we have designed our own complex components building on a bottom-sheet navigation and touch-optimizing all user inputs in there. For cases like this, it makes sense to double-check all event handlers and test their "clickability". Does the click event handler return the same object and data than the touch event handler?

Connect menu commands to React code

To follow the Apple-given guidelines for an optimal Mac integration we need to write Swift code. For instance, we do need to put in menu commands which functionality is coded in React Native classes but called in a Swift file in Xcode. Bridging React code and native code is essential.

We will update this article continuously and add new insights and code examples, once we fix some fundamental building issues. We appreciate all help solving a problem, which stops us: Undefined symbols for architecture x86_64 React Native 0.61.2