Software development
Kaerus Software

KYH, 16 september 2026

Miia Klingstedt, PhD

PhD in Material Science,
Structural Chemistry / Crystallography, Electron Microscopy

And the natural step was, of course, webdevelopment

Unfortunately it is hard to motivate 3D-features in e-commece projects!
ROI is probably close to 0.

Kaerus Software 

For 15 years we have been focused on (mainly) e-commerce development. 

• Solutions architecture
• Development of storefronts [Front-end]
• Integrations and software development
• Managed and runned e-commerce SaaS solution

Much on the web is unsafe and unefficient...

Affects both businesses and people

Various attack types: Endpoint attacks, Phishing, Ransomware, Malware, DoS, DDoS, SQL injection. 

Making the web better

CMS & eCommerce

• Self-hosted - Keeping the business in control
• Easy to deliver quality solutions
• Adhering to legislation - GDPR, Accessibility and Cyber security (NIS2)

• Service-oriented architecture
• Security prioritised
• Server-side rendered

Service-oriented architecture - SOA

In between a monolith and microservice architecture

Storage and database options

• File-system or S3
• SQLite, PostgreSQL, CockroachDB

Security

Server-Side Rendering

SSR is an acronym for Server-Side Rendering and means that the server generates a final version of the HTML file which can be compared with Client Side Rendering (CSR), a technique where the client recieves a minimal HTML file which is further rendered by the client.

SSR vs CSR

{{ page | json}}

{
  "id":"189063cc-e29c-8209-8065-af3b0c3d03e1",
  "authorId":"18639375-58ce-84f4-a5ca-202209038dc8",
  "published":true,"createdAt":"2026-02-02T09:26:25.182Z",
  "updatedAt":"2026-08-22T06:32:20.91Z",
  "publishAt":"2026-02-02T09:27:17.314Z",
  "lang":"en",
  "handle":"about",
  "title":"About",
  "html":"\u003cp\u003eIn academic terms, a text is anything that conveys a set of meanings to the person who examines it. 
You might have thought that texts were limited to written materials, such as books, magazines, newspapers, and 
‘zines (an informal term for magazine that refers especially to fanzines and webzines). 
Those items are indeed texts—but so are movies, \npaintings, television shows, songs, political cartoons, online 
materials, advertisements, maps, works of art, and even rooms full of \npeople. 
If we can look at something, explore it, find layers of meaning \nin it, and draw information and conclusions from it, we’re looking at a \ntext.\u003c/p\u003e",
  "meta":{
    "h1":"About",
    "title":"About",
    "description":"test and debugging site for Cradle CMS",
    "keywords":"",
    "data":null
  },
  "format":"RTE"
}

Progressive enhancement - Front-end development approach

Why? Fails gracefully without Javascript and gives a good basis for accessibility and overall machine readability.

General steps

1. Web content and HTML
2. CSS for styles and layout
3. Functionality is added with JS

How to code with Cradle?

Basis: HTML + CSS + JS

+ Templating with Liquid.

<div class="card {{ settings.general_shadow }} bg-base-100 mb-1">
    <a href="{{ product | url }}" class="flex flex-col h-full">
      {% if settings.colCardOutBadge and product.quantity <= 0 %}
        <div class="absolute top-3 left-4">
          <span class="badge font-bold">{{ 'Out of stock' | t:'collection' }}</span>
        </div>
      {% endif %}
      {% let imgMaxHeight = settings.col_card_img_height %}
      {% let imgHeight = settings.col_card_img_height | remove:'max-' %}
      {% let imgClasses = settings.colCardImgPadding | append:" " | append:imgMaxHeight %}
      <figure class="min-h-40 {{ imgHeight }}">
        {% assign productImgWidth = 1450 | divided_by:productAmount %}
        {{ product | img_tag:productImgWidth,0,class:imgClasses }}
      </figure>
      <div class="card-body justify-between">
        <div class="flex flex-col">
          <h3 class="card-title">
            {{ product.meta.h1 }}
          </h3>
          {% if settings.colCardVendor %}
            <p class="text-sm">
              {{ product.vendor }}
            </p>
          {% endif %}
         </div>
         <div class="card-actions justify-between items-end">
           <div class="text-left flex flex-col">
             {% if product.variants.size > 1 and product.priceMin < product.priceMax %}
               <span class="font-bold text-lg mr-2">
                 {{ 'From' | t:'collection' }} {{ product.priceMin | money }}
               </span>
             {% else %}
               {% if product.compareAtPrice > product.price %}
              <s>{{ product.compareAtPrice | money }}</s>
              <span class="font-bold text-lg mr-2">{{ product.price | money }}</span>
            {% else %}
              <span class="font-bold text-lg mr-2" >{{ product.price | money }}</span>
            {% endif %}
          {% endif %}
        </div>  
        {% if settings.colCardAddToCart %}
          {% include 'buttonAddToDrawerCart' %}
        {% else %}
          <button class="btn btn-primary">{{ 'Read more' | t:'collection' }}</button>
        {% endif %}
      </div>
    </div>
  </a>
</div>

Impact

Why does server efficiency matter?

We can all make an impact...