PageSourceSearch

https://9elements.com/blog/

html 9elements.com collected 2026-10-02 05:19:08 UTC 196,439 bytes, 26 lines download raw bytes

1<!doctype html><html lang="en" class="no-js"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="google-site-verification" content="TTRv5qHeg_tBqm_4NaXdK8ZJNrgMZCsC-M4LlsPl_Po"><title>Blog - 9elements</title><link rel="canonical" href="https://9elements.com/blog/"><meta property="og:site_name" content="9elements"><meta property="og:title" content="Blog - 9elements"><meta property="og:type" content="website"><meta property="og:url" content="https://9elements.com/blog/"><meta name="twitter:card" content="summary_large_image"><meta property="og:image" content="https://9elements.com/assets/images/meta/social-share.png"><meta name="twitter:image" content="https://9elements.com/assets/images/meta/social-share.png"><meta property="og:image:alt" content="page image for 9elements"><meta name="twitter:image:alt" content="page image for 9elements"><meta name="description" content="Combining finest craftsmanship with elegant design to ship innovative digital experiences."><meta name="twitter:description" content="Combining finest craftsmanship with elegant design to ship innovative digital experiences."><meta property="og:description" content="Combining finest craftsmanship with elegant design to ship innovative digital experiences."><link rel="icon" href="/assets/images/meta/favicon.svg" type="image/svg+xml"><link rel="icon" href="/assets/images/meta/icon-180.png" sizes="180x180"><link rel="alternate" type="application/atom+xml" title="The 9elements blog" href="https://9elements.com/blog/rss.xml">
1<script>document
2        .documentElement
3        .classList
4        .remove("no-js");
5      document
6        .documentElement
7        .classList
8        .add("js-active");</script>
8<link rel="stylesheet" type="text/css" href="/assets/fonts/MyFontsWebfontsKit.css?ba32-4dff-20e6"><style>@charset "UTF-8";@keyframes swing{0%{transform:rotate(4deg)}to{transform:rotate(-4deg)}}@keyframes scale{0%{transform:scale(.98)}to{transform:scale(1.02)}}@keyframes flicker{0%,12%,20%,30%,4%,40%,50%,8%,to{filter:saturate(0)}10%,2%,6%{filter:saturate(1.4)}25%,35%,45%{filter:saturate(1.6)}80%{filter:saturate(3)}}@keyframes flicker-light{0%,12%,20%,30%,4%,40%,50%,8%,to{filter:saturate(0);opacity:.5}10%,2%,6%{filter:saturate(1.4);opacity:.6}25%,35%,45%{filter:saturate(1.6);opacity:.6}80%{filter:saturate(3);opacity:.7}}@keyframes shake_icon{0%,30%,60%,90%{transform:translate(-50%,-50%) rotate(0deg)}10%,50%,70%,to{transform:translate(-50%,-50%) rotate(-2deg)}20%,40%,80%{transform:translate(-50%,-50%) rotate(2deg)}}@keyframes circle-rotation{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes swipe-down{0%{opacity:1;transform:scaleY(.001)}to{opacity:1;transform:scaleY(1)}}@keyframes menu-flicker-2{0%{opacity:0;-webkit-clip-path:polygon(0 0,100%0,100% 2%,0 2%);clip-path:polygon(0 0,100%0,100% 2%,0 2%)}1%{opacity:1;-webkit-clip-path:polygon(0 0,100%0,100% 2%,0 2%);clip-path:polygon(0 0,100%0,100% 2%,0 2%)}30%,to{opacity:1;-webkit-clip-path:polygon(0 0,100%0,100% 100%,0 100%);clip-path:polygon(0 0,100%0,100% 100%,0 100%)}60%{opacity:1;-webkit-clip-path:polygon(0 0,100%0,100% 90%,0 90%);clip-path:polygon(0 0,100%0,100% 90%,0 90%)}}@keyframes menu-flicker-3{0%{opacity:0;-webkit-clip-path:polygon(0 1%,100% 1%,100% 2%,0 2%);clip-path:polygon(0 1%,100% 1%,100% 2%,0 2%)}1%,to{opacity:1;-webkit-clip-path:polygon(0 1%,100% 1%,100% 2%,0 2%);clip-path:polygon(0 1%,100% 1%,100% 2%,0 2%)}50%{opacity:1;-webkit-clip-path:polygon(0 90%,100% 90%,100% 100%,0 100%);clip-path:polygon(0 90%,100% 90%,100% 100%,0 100%)}}@keyframes glow{0%,30%{filter:brightness(1)}20%,50%{filter:brightness(2)}70%{filter:brightness(5) blur(5px)}to{filter:brightness(.7)}}:root{--color-black:#000504;--color-gray-dark:#313945;--color-gray-light:#717780;--color-white:#fff;--color-primary:#00fdcf;--color-secondary:#0000ff;--space-3xs:clamp(0.25rem, 0.23rem + 0.08vw, 0.31rem);--space-2xs:clamp(0.5rem, 0.48rem + 0.08vw, 0.56rem);--space-xs:clamp(0.75rem, 0.72rem + 0.16vw, 0.88rem);--space-s:clamp(1rem, 0.97rem + 0.16vw, 1.13rem);--space-m:clamp(1.5rem, 1.45rem + 0.25vw, 1.69rem);--space-l:clamp(2rem, 1.93rem + 0.33vw, 2.25rem);--space-xl:clamp(3rem, 2.9rem + 0.49vw, 3.38rem);--space-2xl:clamp(4rem, 3.87rem + 0.66vw, 4.5rem);--space-3xl:clamp(7rem, 6.77rem + 1.15vw, 7.88rem);--space-4xl:clamp(12rem, 11.61rem + 1.97vw, 13.5rem);--space-3xs-2xs:clamp(0.25rem, 0.17rem + 0.41vw, 0.56rem);--space-2xs-xs:clamp(0.5rem, 0.4rem + 0.49vw, 0.88rem);--space-xs-s:clamp(0.75rem, 0.65rem + 0.49vw, 1.13rem);--space-s-m:clamp(1rem, 0.82rem + 0.9vw, 1.69rem);--space-m-l:clamp(1.5rem, 1.3rem + 0.99vw, 2.25rem);--space-l-xl:clamp(2rem, 1.64rem + 1.81vw, 3.38rem);--space-xl-2xl:clamp(3rem, 2.61rem + 1.97vw, 4.5rem);--space-2xl-3xl:clamp(4rem, 2.98rem + 5.1vw, 7.88rem);--space-3xl-4xl:clamp(7rem, 5.29rem + 8.55vw, 13.5rem);--text-step--2:0.875rem;--text-step--1:clamp(0.781rem, 0.757rem + 0.12vw, 0.875rem);--text-step-0:clamp(1rem, 0.967rem + 0.16vw, 1.125rem);--text-step-1:clamp(1.125rem, 1.092rem + 0.16vw, 1.25rem);--text-step-2:clamp(1.25rem, 1.184rem + 0.33vw, 1.75rem);--text-step-3:clamp(1.438rem, 1.257rem + 0.9vw, 2.125rem);--text-step-4:clamp(2rem, 1.638rem + 1.81vw, 2.8rem);--text-step-5:clamp(2.5rem, 1.513rem + 4.93vw, 5rem);--text-step-6:clamp(2.938rem, 1.079rem + 9.29vw, 8.125rem)}.bg-black{background-color:var(--color-black)}.color-black,.forward-box.forward-box--inverted .forward-box__headline h3{color:var(--color-black)}.color-gray-light,.wdd-tabbed nav label:active{color:var(--color-gray-light)}.color-white{color:var(--color-white)}.font-serif{font-family:"Bitter",Georgia,serif}.leading-flat{line-height:1.1}.text-step--1{font-size:clamp(.781rem,.757rem + .12vw,.875rem)}.text-step-0{font-size:clamp(1rem,.967rem + .16vw,1.125rem)}.text-step-3{font-size:clamp(1.438rem,1.257rem + .9vw,2.125rem)}.text-step-6{font-size:clamp(2.938rem,1.079rem + 9.29vw,8.125rem)}.weight-bold{font-weight:800}*,::after,::before{box-sizing:border-box}body,figure,h1,h2,h3,p,ul{margin:0}body,html{min-height:100%}html{scroll-behavior:smooth;font-size:clamp(100%,67.1% + .33vw,125%)}body{text-rendering:optimizeSpeed;line-height:1.5}@media (max-width:24em){body{word-break:break-word}}a{text-decoration-skip-ink:auto;color:inherit}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select{font:inherit}ol:where([role=list]),ul:where([role=list]){list-style-type:none;padding:0}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;scroll-behavior:auto!important}}:root{--column-width:min(((100vw - (var(--space-m) * 2)) / 24), (96rem / 24));--wrapper-offset:max(0px, (100vw - 96rem) / 2);--container-width:110rem;--page-padding:1.375rem;--grid-fixed-width:48rem;--grid-fixed-part:minmax(0, var(--grid-fixed-width));--fr-width:calc(
9    (
10        min(100vw - (var(--page-padding) * 2), var(--container-width)) -
11          var(--grid-fixed-width)
12      ) / 12
13  );--big-screen-padding:max(
14    50% - var(--container-width) / 2 - var(--page-padding),
15    0px
16  )}body{font-family:"Campton",sans-serif}h1,h2,h3{line-height:1.1}::selection{color:var(--color-white);background:rgba(0,0,255,.99)}:focus-visible{outline:2px dashed var(--color-secondary);outline-offset:4px}@media print{.user-toggle,footer,header{display:none}}.letter-spacing{letter-spacing:.2em}.skip-link:not(:focus),.sr-only{border:0;clip:rect(0 0 0 0);margin:0;overflow:hidden;padding:0;position:absolute;width:1px;height:1px;white-space:nowrap}.uppercase{text-transform:uppercase}.blog-article-grid{--blog-grid-gap:var(--space-xl-2xl);max-width:76rem;margin-inline:auto;display:flex;flex-wrap:wrap;gap:var(--blog-grid-gap)}.blog-article-grid>*{flex-grow:0;flex-basis:100%}@media (min-width:42.5em){.blog-article-grid>*{flex-basis:calc((99% - var(--blog-grid-gap))/2)}}.blog-article-grid>:nth-of-type(1){flex-basis:100%}@media (min-width:64em){.blog-article-grid>:nth-of-type(1){flex-direction:row}.blog-article-grid>:nth-of-type(1) .blog-article__content{flex-basis:60ch}.blog-article-grid>:nth-of-type(1) .blog-article__image{height:30rem;max-width:41rem}}.offset-grid{display:grid;grid-template-columns:repeat(10,1fr) minmax(0,48rem) repeat(2,1fr);gap:var(--space-s-m)0}.stack-m>*+*,.stack-xs-s>*+*{margin-top:var(--stack-space, 1em)}.stack-m>*{--stack-space:var(--space-m)}.stack-xs-s>*{--stack-space:var(--space-xs-s)}.wrapper{width:min(100% - var(--space-s-m)*2,var(--wrapper-max, 96rem));margin-inline:auto}.accessibility-example__audio-button button.active .accessibility-example__audio-icon{background-image:url(/assets/images/pause.svg);background-repeat:no-repeat;background-size:contain}@container (aspect-ratio < 1.3){.bento-item--mockup picture:first-of-type{display:block}}@container (aspect-ratio >= 1.3){.bento-item--mockup picture:first-of-type{display:none}}@container (aspect-ratio < 1.3){.bento-item--mockup picture:last-of-type{display:none}}@container (aspect-ratio >= 1.3){.bento-item--mockup picture:last-of-type{display:block}}.blog-article{position:relative;
16transition:box-shadow .1s ease-out,background .1s ease-out;color:var(--text-color);display:flex;flex-direction:column;gap:var(--space-s) var(--space-xl)}.blog-article__content{margin-top:0;display:flex;flex-direction:column-reverse;justify-content:flex-end}.blog-article__content footer{display:flex;flex-direction:column;flex-grow:1}.blog-article picture{flex-shrink:0}.blog-article__image{width:100%;height:auto;object-fit:cover}.blog-article__link{margin:0;position:absolute;inset:0;outline-offset:8px}@media (any-pointer:fine) and (any-hover:hover){.blog-article:hover{background:var(--secondary-color, var(--color-primary));box-shadow:0 0 0 var(--space-s) var(--secondary-color, var(--color-primary))}.blog-article:hover .blog-article__link,.blog-article:hover footer{color:currentColor}}.blog-article:focus-visible{outline-offset:8px}.blog-meta--preview::before{content:"";display:block;width:100%;height:2px;background:currentColor;margin-bottom:var(--space-xs)}@media (min-width:42.5em){.blog-meta--preview::before{width:min(100%,14rem)}}.blog-meta__name{font-style:normal;line-height:1.2}.blog-meta__name a{text-decoration:none;position:relative;z-index:2;outline-offset:2px;display:inline-block;line-height:1.2;border-bottom:2px solid transparent}.blog-meta__name a:hover{border-color:currentColor}.blog-meta__name p{font-family:"Campton",sans-serif;letter-spacing:.2em}.dark-light .author a:focus-visible,.dark-light .blog-article:focus-visible,.dark-light .blog-article__link:focus-visible{outline:2px dashed var(--highlight-color)}.dark-light{background:var(--bg-color);transition:background .3s ease-in-out;color:var(--text-color)}.dark-light .section{background:0 0}.blog-content :where(p,li){font-family:"Bitter",Georgia,serif;letter-spacing:.01em}.blog-content :where(p,li):empty{display:none}.blog-content :where(p,li) a{border-bottom:.15em solid;text-decoration:none}.blog-content :where(p,li) a:hover{color:var(--highlight-color)}.blog-content :where(picture,figure):has([data-size=full_width]){grid-column:full-width}.blog-content :where(picture,figure):has([data-size=l]){grid-column:l}.blog-content :where(picture,figure):has([data-size=xl]){grid-column:xl}.blog-content .cp_embed_wrapper{aspect-ratio:2/3;grid-column:l}@media screen and (min-aspect-ratio:2/3){.blog-content .cp_embed_wrapper{aspect-ratio:1}}@media screen and (min-aspect-ratio:1){.blog-content .cp_embed_wrapper{aspect-ratio:16/9}}.blog-content .cp_embed_wrapper iframe{height:100%}.bulb-container{font-size:1rem;perspective:800px;position:relative;z-index:20;pointer-events:none}.bulb-container:after{content:"";width:1.125em;height:.5em;background:url(../assets/images/bulb-top.png);background-size:100% 100%;position:absolute;left:calc(50% - .5625em);top:0}.light-bulb{pointer-events:auto;font-size:1rem;width:2.5em;height:9em;transform-origin:center top;animation:swing 3s ease-in-out infinite alternate;position:absolute;left:calc(50% - 1.3rem);top:calc(clamp(4em,8vmin,12vw) + .5rem);transform-style:preserve3d;transition:transform .5s ease-out;cursor:pointer;display:block;background:0 0;border:0;-webkit-appearance:none;appearance:none;padding:0}@media (min-width:42.5em){.light-bulb{width:3.375em;height:11.5em;left:calc(50% - 1.6875rem);top:calc(clamp(4em,8vmin,12vw) + .875rem)}}.light-bulb:focus{outline-offset:1rem;outline:0}.light-bulb:active .light-bulb__image img,.light-bulb:focus .light-bulb__image img,.light-bulb:hover .light-bulb__image img{outline:0;animation:flicker 2s linear infinite alternate}.light-bulb:active .light-bulb__image:before,.light-bulb:focus .light-bulb__image:before,.light-bulb:hover .light-bulb__image:before{outline:0;animation:flicker-light 2s linear infinite alternate}.light-bulb__image{outline:0;transform-style:preserve3d;display:block;transform-origin:center top;animation:scale 2.5s -1.5s ease-in-out infinite alternate;position:relative}.light-bulb__image:before{content:"";position:absolute;left:calc(50% - 1px);bottom:0;width:.625em;height:.625em;background:0 0;border-radius:50%;z-index:-1;box-shadow:0 0 6.375em 4em var(--light);opacity:.6;transform:scaleY(.7) translateY(-1em) translateX(.4em);transform-origin:center top}.light-bulb__image img{display:block;filter:Saturate(var(--saturation));width:3.375em}.button{font-weight:800;line-height:1.1;--button-color:var(--color-white);color:var(--button-color, var(--color-white));display:inline-block;text-decoration:none;border:1px solid currentColor;padding:var(--space-xs) var(--space-m);font-size:var(--text-step-0);background:0 0;
16cursor:pointer;text-align:center;min-width:7.5rem}@media (any-pointer:fine) and (any-hover:hover){.button:hover{background:var(--button-color, var(--color-white));color:var(--color-black)}}.button:focus-visible{outline:2px dashed var(--button-color);outline-offset:5px}.chapter-intro{position:relative;background:var(--color-black);background-image:radial-gradient(circle closest-side,rgba(30,41,48,.8)0,#000504 85%),linear-gradient(#000504 0,#000504 100%),url(/assets/images/keyvisual/noise.png);background-size:100% 90%,100% 12%,10em 7.5em;background-repeat:no-repeat,no-repeat,repeat;background-position:center top,center bottom -2px,center center;color:var(--color-white);padding-block:clamp(7.5rem,2.927rem + 19.51vw,20rem) var(--space-3xl)}.chapter-intro[data-level=subchapter]{padding-block-start:clamp(12rem,9.091rem + 14.55vw,20rem);padding-block-end:var(--space-3xl-4xl)}.chapter-intro--transparent{background:0 0;color:unset}.branding svg,.chapter-intro>*{position:relative;z-index:2}.clients{position:relative}@media (max-width:45rem){.clients picture{max-width:13rem;margin-inline:auto}}@media screen and (min-width:67rem){.clients{height:54em}}@media (min-width:75em){.clients::after,.clients::before{content:"";position:absolute;width:3.5em;height:3.125em;background-image:url(/assets/images/quotes/quotationmark.svg);left:-5.5em;top:1.5em;background-size:cover}.clients::after{left:auto;top:auto;right:-5.5em;bottom:-5em;transform:rotate(180deg)}}.no-js .user-toggle{display:none}:root .dark-light{--color-mode:"light";--text-color:var(--color-black);--text-color-rgb:0 0 0;--bg-color:var(--color-white);--bg-color-rgb:255 255 255;--highlight-color:var(--color-secondary);--secondary-color:var(--color-primary);--light:var(--color-white);--saturation:0;--top-navi-color:var(--color-black);--top-navi-background:var(--color-white);--top-navi-accent:var(--color-secondary);--prism-background:#f5f2f0;--prism-text:var(--color-black);--prism-token:slategray;--prism-punctuation:#999;--prism-operator:#9a6e3a;--prism-selector:#690;--prism-property:#905;--prism-keyword:#07a;--prism-function:#dd4a68;--prism-border:transparent}@media (prefers-color-scheme:dark){:root{--color-mode:"dark"}:root:not([data-user-color-scheme]) .dark-light{--text-color:var(--color-white);--text-color-rgb:255 255 255;--bg-color:var(--color-black);--bg-color-rgb:0 0 0;--highlight-color:var(--color-primary);--secondary-color:var(--color-secondary);--light:var(--color-primary);--saturation:1;--top-navi-color:var(--color-white);--top-navi-background:var(--color-black);--top-navi-accent:var(--color-primary);--prism-background:#f5f2f0;--prism-text:var(--color-black);--prism-token:slategray;--prism-punctuation:#999;--prism-operator:#9a6e3a;--prism-selector:#690;--prism-property:#905;--prism-keyword:#07a;--prism-function:#dd4a68}}:root[data-user-color-scheme=dark] .dark-light{--text-color:color-mix(in srgb, var(--color-white) 90%, transparent);--text-color-rgb:255 255 255;--bg-color:var(--color-black);--bg-color-rgb:0 0 0;--highlight-color:var(--color-primary);--secondary-color:var(--color-secondary);--light:var(--color-primary);--saturation:1;--top-navi-color:var(--color-white);--top-navi-background:var(--color-black);--top-navi-accent:var(--color-primary);--prism-background:#0c0020;--prism-text:#ff7064;--prism-token:#846fa2;--prism-punctuation:#8de4ff;--prism-operator:#eeedef;--prism-selector:#77b7ff;--prism-property:#b78aff;--prism-keyword:#d3c1c0;--prism-function:#36f9f6;--prism-border:color-mix(in srgb, var(--text-color) 15%, transparent)}.forward-box{padding:var(--space-l-xl);display:flex;position:relative;z-index:2;overflow:hidden}.forward-box.forward-box--inverted{background:var(--color-black)}.forward-box,.forward-box.forward-box--inverted .forward-box__headline{background:var(--color-white)}.forward-box.forward-box--inverted a{--button-color:var(--color-black)}@media (any-pointer:fine) and (any-hover:hover){.forward-box.forward-box--inverted a:hover{background:var(--button-color, var(--color-white));color:var(--color-white)}}.forward-box a.button:focus-visible{outline-offset:34px;outline:2px dashed var(--color-primary)}@media (max-width:80rem){.forward-box{flex-direction:column}}@media (max-width:50rem){.forward-box{padding:var(--space-s-m) var(--space-s-m) var(--space-2xl) var(--space-s-m)}}.forward-box__headline{background:var(--color-black);padding:var(--space-l-xl) var(--space-xl-2xl) var(--space-l-xl) var(--space-l-xl);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:var(--space-l);flex-grow:1}.forward-box__headline h3{font-weight:400;font-size:var(--text-step-3);color:var(--color-primary);font-style:italic;text-transform:uppercase}.forward-box__headline h3 strong{font-style:normal}.forward-box__headline:has(+.forward-box__content) h3{margin-block-start:var(--space-l);align-self:flex-end}@media (max-width:80rem){.forward-box__headline:has(+.forward-box__content) h3{margin-block-start:0;align-self:flex-start}}.forward-box__headline:not(:has(+.forward-box__content)) h3{margin-inline-end:8.5rem}@media (max-width:80rem){.forward-box__headline:not(:has(+.forward-box__content)) h3{margin-inline-end:0}}@media (min-width:81rem){.forward-box:not(:has(.forward-box__content)) .forward-box__headline{padding:var(--space-2xl) var(--space-3xl)}}.forward-box:has(.button:hover) .forward-box__decoration .forward-box__decoration-icon{animation:shake_icon .5s infinite}.forward-box__decoration{background:var(--color-primary);border:2.5rem solid var(--color-primary);margin:-2.5rem;border-radius:999px;display:block;transition:scale 2s ease;flex-shrink:0;align-self:flex-start;position:absolute;right:calc(var(--space-m) + 2.5rem);z-index:2}
16@media (max-width:80rem){.forward-box__decoration{display:none}}.forward-box__decoration .forward-box__decoration-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6rem;height:auto}@media (max-width:80rem){.forward-box__decoration .forward-box__decoration-icon{width:5rem}}.forward-box__decoration .forward-box__decoration-circle{width:8rem;height:8rem;transform-origin:center;animation-name:circle-rotation;animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:linear}@media (max-width:80rem){.forward-box__decoration .forward-box__decoration-circle{width:7rem;height:7rem}}.forward-box__decoration .forward-box__decoration-circle .letter-wrap{position:absolute;font-size:var(--text-step-0);font-weight:800;width:8rem;height:8rem;transform-origin:center;text-transform:uppercase}@media (max-width:80rem){.forward-box__decoration .forward-box__decoration-circle .letter-wrap{width:7rem;height:7rem}}.forward-box__decoration .forward-box__decoration-circle .letter-wrap .letter{position:absolute;color:var(--color-black);transform:rotate(-50deg);min-width:1.25ch;text-align:center}.link-hover-image.is-active{opacity:1}.job{display:flex;flex-direction:column;justify-content:space-between;border:2px solid var(--color-white);color:var(--color-white);padding:var(--space-l);min-height:16rem;transition:.5s ease;transition-property:background-color,color;text-decoration:none}.job:hover{background:var(--color-white);color:var(--color-secondary)}.job:focus-visible{outline:2px dashed currentColor;outline-offset:-5px}.transition{transition:opacity .5s ease;opacity:1}.language-select{z-index:100;position:absolute;top:2vh;right:1em;text-transform:uppercase}.language-select__list{list-style:none;display:flex;margin:0;padding:0}.language-select__item{padding-inline-end:.5em;font-weight:300;font-size:.8em}.language-select__item+li{padding-inline-start:.5em;padding-inline-end:0;border-left:1px solid var(--color-gray-light)}.language-select__link{text-decoration:none;color:var(--top-navi-color, var(--color-white))}.language-select__link:hover{color:var(--top-navi-accent, var(--color-primary));opacity:1}.language-select__link:focus-visible{outline:2px dashed var(--top-navi-accent, var(--color-primary));outline-offset:2px}@property --captured-length{syntax:"<length>";initial-value:0;inherits:false}.logo{--captured-length:var(--base-height);--area:pow(
17    tan(atan2(var(--captured-length), 1px)),
18    2
19  );--diff:sqrt(
20    var(--area)
21    /
22    (var(--width) * var(--height))
23  );--scaled-height:calc(1px * var(--height) * var(--diff));height:clamp(var(--base-height)*var(--logo-min-size-factor),var(--base-height) + (var(--scaled-height) - var(--base-height))*var(--strength),var(--base-height)*var(--logo-max-size-factor))}.branding,.menu-button{width:var(--button-size);position:fixed;left:50%;transform:translateX(-50%);top:var(--button-inset-top);z-index:1000}.branding:before{content:"";position:absolute;inset:5px;background:var(--color-black);z-index:-1}.js-active .branding{display:none}html.navi-open{overflow:hidden}.navi-open body{overflow:hidden;height:100dvh}.menu-button{top:var(--button-offset-top);cursor:pointer;pointer-events:auto;perspective:800px;border:0;padding:0;background:0 0;-webkit-appearance:none;-moz-appearance:none;list-style:none}.menu-button::-webkit-details-marker{display:none}.menu-button:focus-visible{outline:2px dashed var(--color-primary);outline-offset:5px}.menu-button[aria-expanded=true]:focus-visible{outline:2px dashed var(--color-secondary)}.menu-button__card{width:100%;padding-bottom:100%;height:0;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.81,.18,.33,1.73)}.menu-button__back,.menu-button__front{position:absolute;left:0;top:0;right:0;bottom:0;backface-visibility:hidden;transform-style:preserve-3d}.menu-button__back svg,.menu-button__front svg{width:100%;height:100%;display:block;position:relative;z-index:2}.menu-button__front:before{content:"";position:absolute;left:2px;top:2px;right:2px;bottom:2px;background:var(--top-navi-background, var(--color-black))}
23.menu-button__back svg rect,.menu-button__front svg path{fill:var(--top-navi-color, var(--color-white))}.menu-button__back{transform:translateZ(-1px) rotateY(180deg);background:#fff;box-shadow:0 0 0 2px #fff inset}.menu-button__back svg path{fill:var(--top-navi-background, var(--color-black))}@media (hover:hover) and (pointer:fine){.menu-button:focus .menu-button__card,.menu-button:hover .menu-button__card{transform:rotateY(180deg)}}.menu-button:focus .menu-button__card{transform:rotateY(180deg)}.shape-overlays{width:100vw;height:calc(100vh + 100px);pointer-events:none;position:fixed;top:-50px;left:0;z-index:8}[open] .shape-overlays{pointer-events:auto}.shape-overlays__rect{opacity:0}[aria-expanded=true]~.shape-overlays .shape-overlays__rect{animation:swipe-down .6s ease-out both}[aria-expanded=true]~.shape-overlays .shape-overlays__rect:nth-of-type(2){animation-delay:.15s}[aria-expanded=true]~.shape-overlays .shape-overlays__rect:nth-of-type(3){animation-delay:.3s}@supports (-webkit-clip-path:polygon(0 0,100%0,100% 75%,0 100%)) or (clip-path:polygon(0 0,100%0,100% 75%,0 100%)){[aria-expanded=true]~.shape-overlays .shape-overlays__rect{animation:menu-flicker-2 .6s linear both}[aria-expanded=true]~.shape-overlays .shape-overlays__rect:nth-of-type(2){animation-name:menu-flicker-3}[aria-expanded=true]~.shape-overlays .shape-overlays__rect:nth-of-type(3){animation-name:swipe-down;animation-delay:.1s;animation-timing-function:ease-in-out}}@media (prefers-reduced-motion:reduce){.shape-overlays .shape-overlays__rect{animation-duration:0s!important}.shape-overlays .shape-overlays__rect:nth-of-type(1),.shape-overlays .shape-overlays__rect:nth-of-type(2){display:none}}.shape-overlays__rect:nth-of-type(1){fill:url(#gradient1)}.shape-overlays__rect:nth-of-type(2){fill:url(#gradient2);transform:translateY(-1px)}.shape-overlays__rect:nth-of-type(3){fill:#fff;transform:translateY(-1.5px)}.global-menu{--button-offset-top:1rem;--button-size:clamp(4em, 8vmin, 12vw);font-size:1rem;width:100vw;min-height:calc(var(--button-size) + var(--button-offset-top));top:0;left:0;position:fixed;z-index:900;text-align:left;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;transition:display 0s 1s linear;-webkit-overflow-scrolling:touch;pointer-events:none}.global-menu .skip-link:not(:focus),.global-menu .sr-only{visibility:hidden}.navi-open .global-menu{height:100dvh;pointer-events:auto}.global-menu__main-menu{position:relative;z-index:10;margin:0 auto;width:100%;perspective:800px;perspective-origin:center 50%;counter-reset:navigation;visibility:hidden;height:0;pointer-events:none;background:rgba(255,255,255,.3333333333);padding-block-start:6.5em;padding-inline:max(1.5rem,(100% - 80rem)/2)}@media screen and (min-width:64em) and (min-height:48em){.global-menu__main-menu{padding-block-start:0;display:flex;flex-direction:column;justify-content:center}}[aria-expanded=true]+.global-menu__main-menu{height:100vh;height:100dvh;visibility:visible;pointer-events:auto}.global-menu__main-item{counter-increment:navigation;opacity:0;transform:translateY(0) translateZ(-3em);transform-origin:center bottom;pointer-events:none;padding:.5em 0;transition:transform 0s,opacity 0s;transition-timing-function:ease-in;border-top:2px solid rgba(0,5,4,.1);display:flex}.global-menu__main-item:first-child{border-top:none}@media screen and (min-width:52em){.global-menu__main-item{align-items:center;position:relative}}@media screen and (min-width:90em){.global-menu__main-item:nth-child(-n+4):before{content:"0"counter(navigation);font-weight:400;font-size:1.625em;position:absolute;left:-2.6em;top:50%;transform:translateY(-50%);color:var(--color-black)}.global-menu__main-item:nth-child(-n+4):after{content:"";position:absolute;left:-1.5em;width:2em;height:2px;background:#717780}}.global-menu__main-item--bottom{padding-block-end:6.5em;border-top:2px solid;padding-top:1em;flex-wrap:wrap;gap:var(--space-m-l)}.global-menu__main-item a{display:block;visibility:hidden;text-decoration:none;transition:visibility .1s 0s linear}.global-menu__main-item a:hover{text-decoration:underline;text-decoration-skip-ink:none;text-decoration-color:var(--color-secondary);text-decoration-thickness:.25em}.global-menu__main-item a:focus-visible{outline:2px dashed var(--color-secondary);outline-offset:5px}.global-menu__main-item>a{font-size:2em;flex-basis:34%;flex-grow:0;margin-inline-end:2em;line-height:1.2}@media screen and (min-width:52em){.global-menu__main-item>a{font-size:3em;padding-left:1rem;margin-inline-end:.5em}}@media screen and (min-width:64em){.global-menu__main-item>a{font-size:3.125em;flex-basis:30%}}@media screen and (min-width:64em) and (min-height:56em){.global-menu__main-item>a{font-size:3.5em}}.global-menu__main-item--bottom a{font-size:1.25em;display:inline-block;flex-basis:unset}.global-menu__submenu{display:flex;flex-direction:column;flex-grow:9999;list-style-type:none;padding:0;color:var(--color-black)}@media screen and (min-width:52em){.global-menu__submenu{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}}.global-menu__submenu li{flex-grow:1}.global-menu__submenu a{padding:.5em 0;opacity:0;transition:opacity .6s 0s ease-out,transform .6s 0s ease-out;transform:translateY(-50%);line-height:1.2}@media screen and (min-width:64em){.global-menu__submenu a{padding:0;font-size:1.2em}}[aria-expanded=true]+ul .global-menu__main-item{opacity:1;transform:translateY(0) rotate(0);pointer-events:auto;transition-timing-function:ease;transition-duration:.8s,.7s}[aria-expanded=true]+ul .global-menu__main-item a{visibility:visible;transition-delay:0s}.global-menu__main-item:nth-of-type(1),[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(1){transition-delay:.15s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(1) .global-menu__submenu a{opacity:1;transition-delay:.6s;transform:translateY(0)}.global-menu__main-item:nth-of-type(2){transition-delay:.1s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(2){transition-delay:.3s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(2) .global-menu__submenu a{opacity:1;transition-delay:.7s;transform:translateY(0)}
23.global-menu__main-item:nth-of-type(3){transition-delay:.05s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(3){transition-delay:.45s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(3) .global-menu__submenu a{opacity:1;transition-delay:.8s;transform:translateY(0)}.global-menu__main-item:nth-of-type(4){transition-delay:0s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(4){transition-delay:.6s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(4) .global-menu__submenu a{opacity:1;transition-delay:.9s;transform:translateY(0)}.global-menu__main-item:nth-of-type(5){transition-delay:-.05s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(5){transition-delay:.75s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(5) .global-menu__submenu a{opacity:1;transition-delay:1s;transform:translateY(0)}.global-menu__main-item:nth-of-type(6){transition-delay:-.1s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(6){transition-delay:.9s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(6) .global-menu__submenu a{opacity:1;transition-delay:1.1s;transform:translateY(0)}.global-menu__main-item:nth-of-type(7){transition-delay:-.15s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(7){transition-delay:1.05s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(7) .global-menu__submenu a{opacity:1;transition-delay:1.2s;transform:translateY(0)}.global-menu__main-item:nth-of-type(8){transition-delay:-.2s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(8){transition-delay:1.2s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(8) .global-menu__submenu a{opacity:1;transition-delay:1.3s;transform:translateY(0)}.global-menu__main-item:nth-of-type(9){transition-delay:-.25s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(9){transition-delay:1.35s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(9) .global-menu__submenu a{opacity:1;transition-delay:1.4s;transform:translateY(0)}.global-menu__main-item:nth-of-type(10){transition-delay:-.3s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(10){transition-delay:1.5s}[aria-expanded=true]+ul .global-menu__main-item:nth-of-type(10) .global-menu__submenu a{opacity:1;transition-delay:1.5s;transform:translateY(0)}.top-navigation{color:var(--top-navi-color, var(--color-white));position:absolute;z-index:20;top:2rem;right:2rem;padding-right:max(5rem,7vw)}.navi-open .top-navigation{z-index:1}@media screen and (min-width:90em){.top-navigation{right:6vw;top:5vh}}.top-navigation__list{display:none;list-style-type:none;padding:0;margin:0;counter-reset:navigation;column-count:2;column-gap:2em;grid-template-columns:auto auto;grid-gap:0 2em;grid-auto-flow:dense}@media screen and (min-width:64em){.top-navigation__list{display:block;display:grid}}.top-navigation__item{counter-increment:navigation;position:relative}.top-navigation__item:nth-child(-n+4){break-before:avoid;grid-column:1}.top-navigation__item:nth-child(n+5){grid-column:2}.top-navigation__item:nth-child(-n+4):before{content:"0"counter(navigation);font-weight:400;font-size:.875em;position:absolute;left:-3em;top:.3em}.top-navigation__item:nth-child(-n+4):after{content:"";position:absolute;left:-1.2em;top:.7em;width:.7em;height:2px;background:var(--color-gray-light)}.top-navigation__link{text-decoration:none;display:block;color:var(--top-navi-color, var(--color-white));font-weight:700;font-size:1em;line-height:1.5;transition:transform .2s ease-out;transform:translateX(.001em)}@media screen and (min-width:90em){.top-navigation__link{font-size:1.125em}}.top-navigation__link:hover,.top-navigation__link[aria-current=page]{text-decoration:underline;text-decoration-color:var(--top-navi-accent, var(--color-primary));text-decoration-thickness:.2em;text-decoration-skip-ink:none;text-underline-offset:.125em}.top-navigation__link:focus-visible{outline:2px dashed var(--top-navi-accent, var(--color-primary));outline-offset:0}.nav{line-height:1;font-weight:900;margin-inline-start:var(--space-s)}.nav a,.person{position:relative}.nav a{text-decoration:none;display:block;color:var(--color-white)}.nav a[aria-current=page]:before,.nav a[data-state=active]:before{content:"";display:block;width:100%;height:.25rem;position:absolute;top:100%;left:0;margin-top:.25rem;background:var(--color-primary)}.person{width:16.25em;aspect-ratio:1;grid-row:span 7;overflow:hidden}.person img{width:100%;height:auto;aspect-ratio:1}.person:focus{outline:0}.person:where(:hover,:focus):before{content:"";
23background:url(/assets/images/noise.gif);background-size:auto;position:absolute;left:0;top:0;right:0;bottom:0;mix-blend-mode:soft-light;opacity:.4;z-index:5}.person:where(:hover,:focus):after{content:"";background:url(/assets/images/glitch-overlay.svg);background-size:100% 100%;position:absolute;left:0;top:0;right:0;bottom:0;mix-blend-mode:overlay}.person:where(:hover,:focus) img{animation:glow .8s ease-out both}.person:where(:hover,:focus,:focus-within) .person__bd{transition:opacity .3s .3s ease-out,height 0s .2s ease-out;opacity:1;pointer-events:auto;height:100%}.person:where(:hover,:focus,:focus-within) .person__bd>*{transform:translateY(0);transition:transform .3s .3s ease-out}.text{font-family:"Bitter",serif;font-size:1.2em;grid-row:span 7;padding:1em;display:flex;align-items:center;text-align:center}.image,.image img{width:100%;height:auto;aspect-ratio:1}.image{grid-column:span 1;grid-row:span 7;position:relative}.image img{object-fit:cover}@media screen and (min-width:15em){.image{grid-column:span 2;grid-row:span 14}}code[class*=language-]{color:var(--prism-text);background:0 0;text-shadow:0 1px var(--bg-color);font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.4;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection{text-shadow:none}code[class*=language-] ::selection,code[class*=language-]::selection{text-shadow:none}@media print{code[class*=language-]{text-shadow:none}}:not(pre)>code[class*=language-]{background:var(--prism-background);padding:.1em;border-radius:.3em;white-space:normal}.scroll-indicator.scrolled{opacity:0}.section__intro{position:relative}.section__intro-headline{grid-column:5/-2}.section__intro-body,.section__intro-links{grid-column:11}.section__intro-body a{color:var(--color-primary)}.section__intro-links a{color:var(--text-color);display:inline-flex;gap:.5ch;align-items:center;text-decoration:none}.section__intro-links a:is(:hover,:focus-visible){color:var(--color-primary)}@media screen and (min-width:77em){.section__intro-links{grid-column:5/span 4;grid-row:2}.section__intro-links a{padding-left:.2em;padding-top:.25em}}.showcase__image:has(a):where(:hover,:focus):before{content:"";background:url(/assets/images/noise.gif);background-size:auto;position:absolute;left:0;top:0;right:0;bottom:0;mix-blend-mode:soft-light;opacity:.4;z-index:3}.showcase__image:has(a):where(:hover,:focus):after{content:"";background:url(/assets/images/glitch-overlay.svg);z-index:3;background-size:100% 100%;position:absolute;left:0;top:0;right:0;bottom:0;mix-blend-mode:overlay}.showcase__image:has(a):where(:hover,:focus) img{animation:glow .8s ease-out both}.showcase__image:has(a):where(:hover,:focus,:focus-within) .showcase__overlay{transition:opacity .3s .3s ease-out,height 0s .2s ease-out;opacity:1;pointer-events:auto;height:100%}.showcase__image:has(a):where(:hover,:focus,:focus-within) .showcase__overlay>*{transform:translateY(0);transition:transform .3s .3s ease-out}.showcase__image img.active{opacity:1;z-index:2}.skip-link{position:absolute;top:var(--space-s);left:var(--space-s);z-index:9}.skip-link:focus-visible{outline:2px dashed var(--color-primary)}.site-foot{position:relative;padding-block:var(--space-2xl-3xl) var(--space-l)}@media screen and (min-width:54em){.site-foot{display:grid;grid-template-columns:3fr minmax(26ch,7fr) minmax(min-content,70ch) 3fr;grid-template-rows:1fr 1fr auto auto}}@media screen and (min-width:64em){.site-foot{grid-template-columns:5fr minmax(36ch,13fr) var(--grid-fixed-part) 5fr}}@media screen and (min-width:104em){.site-foot{padding-inline:0}}.site-foot a{text-decoration:none;color:inherit}.site-foot a:hover{color:#00fdcf}.site-foot__brand{grid-column:2;grid-row:1;margin:-.75em 0 2em}.site-foot__brand img,.site-foot__brand svg{display:block;width:13.125em;height:3.625em}.site-foot__address{grid-column:2;grid-row:2;font-style:normal;line-height:1.75;font-weight:700;margin:0 0 2em}.site-foot__address *{font-style:normal}.site-foot__address a{text-decoration:none;color:#fff}.site-foot__address a:focus-visible{outline:2px dashed var(--color-primary)}.site-foot__social-media{grid-column:3;grid-row:3;align-self:end;margin-bottom:2em}.site-foot__social-media a{display:inline-block;width:1.25em;height:1.25em;margin-right:1em;border-radius:100px}.site-foot__social-media a:focus-visible{outline:2px dashed var(--color-primary);outline-offset:7px}.site-foot__social-media svg{width:100%;height:100%}@media screen and (min-width:50em){.site-foot__social-media{text-align:right}.site-foot__social-media a{margin:0 0 0 .75em}}.site-foot__subline{margin-top:0;grid-column:2/-2}.footer-menu a,.site-foot__subline a{text-decoration:none}.site-foot__subline a:focus-visible{outline:2px dashed var(--color-primary)}@media screen and (min-width:50em){.site-foot__address,.site-foot__brand,.site-foot__social-media{margin-bottom:0}.site-foot__subline{margin-top:3.75em}}.footer-menu{grid-column:3;grid-row:1/3;line-height:1.75em;margin:0 0 2em}@media screen and (min-width:50em){.footer-menu{margin-bottom:0}}.footer-menu__main-menu,.footer-menu__submenu{list-style-type:none}.footer-menu__main-menu{margin:0;padding:0;column-count:2;column-width:8em}@media screen and (min-width:50em){.footer-menu__main-menu{display:grid;grid-template:2em 1fr 2em 2em 1fr/1fr 1fr min-content;grid-auto-flow:column;grid-gap:0 .5em;column-width:12em}}.footer-menu__main-item{width:100%;margin:0 1em 1em 0;position:relative;counter-increment:navigation;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;grid-row:span 2}.footer-menu__main-item>a,.footer-menu__main-item>button{font-size:var(--text-step-0);color:#fff;font-weight:700;display:inline-block;line-height:1.2;margin-bottom:.25em;background:0 0;border:0;padding:0}.footer-menu__main-item>a:hover,.footer-menu__main-item>button:hover{color:#00fdcf}.footer-menu__main-item>a:focus-visible,.footer-menu__main-item>button:focus-visible,.footer-menu__sub-item a:focus-visible{outline:2px dashed var(--color-primary)}@media screen and (min-width:50em){.footer-menu__main-item{margin-bottom:.5em;margin-right:0;white-space:nowrap}.footer-menu__main-item:nth-child(2){grid-column:2}.footer-menu__main-item:nth-child(n+5){grid-row:span 1}.footer-menu__main-item:nth-child(4){grid-row:span 3}}@media screen and (min-width:74em){.footer-menu__main-item:nth-child(-n+4):not(.footer-menu__main-item--numberless):before{content:"0"counter(navigation);font-weight:400;font-size:.875em;position:absolute;
23left:-3.6em;top:-.2em}.footer-menu__main-item:nth-child(-n+4):not(.footer-menu__main-item--numberless):after{content:"";position:absolute;left:-1.5em;top:.6em;width:1em;height:2px;background:#717780}}.footer-menu__submenu{margin:0;padding:0}.footer-menu__sub-item{font-size:var(--text-step-0);line-height:1.25;padding:.5em 0;color:var(--color-gray-light)}@media screen and (min-width:50em){.footer-menu__sub-item:last-child{margin-bottom:1em}}.social{background-color:var(--color-gray-dark);text-align:center}.social footer{background-color:var(--color-white);position:relative;padding:var(--space-m) var(--space-s);margin-top:calc(var(--space-2xl) + 5rem)}.social footer::before{content:"";position:absolute;background-image:url(../assets/images/brushes/brush-01.svg);background-size:contain;background-repeat:no-repeat;background-position:bottom left;width:100%;height:5rem;bottom:100%;left:0}.case{display:flex;flex-direction:column-reverse;background:var(--color-black);color:var(--color-white);height:100%;padding-inline:var(--space-l);padding-block:var(--space-l) var(--space-xl);position:relative;margin-inline:var(--space-m)}@media screen and (min-width:60em){.case{height:30em;display:flex;justify-content:center;align-items:center;margin-inline:0}}[class^=bulb]{transform-origin:center;transform-box:fill-box}</style></head><body class="dark-light"><header><a class="skip-link | button" href="#main-content">Skip to content</a><div class="branding"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82 82"><path fill="#FFF" fill-rule="evenodd" d="M0 0h82v82H0V0zm61.6 51c.3.2 2 1.5 2.2 1.4l-4.5-4a104 104 0 0 1-5.4-4.4c-3.3-3-6.7-5.8-10.1-8.7.2 0 .4-.2.5-.3.2-.3.5-.2.8-.4 0 0 .6-.3.5-.4.3-.1.5-.5.9-.5l.3-.3c.5-.5 1.1-1 1.7-1.3.4-.3.7-.6 1.1-.7.2-.3.5-.4.8-.6l1.5-1 .9-.6.8-.6c.5-.2.8-.7 1.3-.8l.3-.2.6-.5 1.8-1.1.4-.2c.5-.5 1.2-.8 1.7-1.2l1.1-.7-2.7 1.6c0-.2.2-.3.3-.3a12.8 12.8 0 0 0 1.8-1.5l.3-.2H60L57.6 25l-.9.5-1.5 1h-.3l.1-.2 1.2-.7 1.5-1 2.6-1.7.2-.1c0-.2-.2 0-.2 0l.5-.5c.2-.2.4-.4.7-.4v-.1l-.4.2h-.3c-.1-.3 0-.3.1-.3l.7-.5c-.3 0-.6.3-.8.3l-1 .2c-.3.1-.4.3-.7.3.2-.3.6-.4.7-.8h-.1l-1.2.7c-.2 0-.3.1-.4 0l.2-.2.7-.4.8-.5 1-.6c-1 .2-1.7.8-2.5 1.2v-.2l-.7.2c.1-.1.4-.2.5-.5l.8-.4 1-.6c-.4 0-.6.2-.8.3l.5-.5-.5.2v-.3s-.4.3-.6.2l.7-.6c-.4 0-.7.2-1 .3l-3 1.6-2.5 1.5-.3.2c-.3 0-.5.3-.8.4l-1.7 1-2.8 2-2 1.4-1.1.7-2.3 1.6-1.7 1.3-.5.4c-2.8-2.4-5.6-4.6-8.4-7.1l-4.2-3.7c-.4-.4-.7-.9-1.3-1-.3-.2-.5 0-.7 0-.4-.2-2 2.1-2 2.1-.3.5-1.3 1.2-1.2 2 .2 1 2 2.2 2.7 2.8 1.5 1.3 3 2.1 4.4 3.4l2.8 2.5 2.9 2.4.3.3-2.3 2-4.2 3.6-1.4 1-.9.9-.7.7-1.1.8-1.5 1.4c-.2.2-.5.5-.4.8 0 .6 0 1.2.2 1.8.2.5.3 1 .2 1.4v.2c.1.6.6 1.6.8 1.8 0 .1.2.3.4.3.3.1.3.1.3.4l.6-.4.6-.4.4-.4c.7-.7-1.2.6-.4-.1l2.4-2.1 2.2-2 2.9-2.5.5-.4v.2l2-1.7 1.7-1.4.5-.4 1.9-1.5 1 1 1.7 1.4 1.5 1.2-1.3-1.3c.6.1 3.5 2.6 4 3 .1-.4 1.5.9 1.8 1.1l3.7 3.2-.2-.4-.4-.7c.9.5 1.6 1.4 2.4 2l-.1-.5 1 .7c.3-.3.5.1.8.4 1 .5 2 1.4 3 2-.5-.4-1.3-1-1.5-1.6l.2.1-3.2-3c.8-.3 1.2 1 1.8 1l-.5-.5c.2-.2 1 .8.9.7l.6.5v-.1c.1 0 .7.6.9.6.4.3 1.4 1.5 2 1.5a1 1 0 0 1-.4-.4c.6.4 1 1 1.7 1.3l-.3-.3 1 .6c.3-.3-2.6-2.5-2.5-2.5l-.5-.4c.2 0-.4-.6-.3-.7L61 51c.1-.2-1.9-1.3-2-1.6l2.8 2a.8.8 0 0 1-.2-.4zm-.4 7l-1.5-.2c-.2 0-1-.2-1 0l-1.1-.2-1.5.2h-5.2l-17.5.3c-.9-.1-2-.2-2.8-.1a59.1 59.1 0 0 0-8.4-.4c-.3 0-.2.2-.4.4-.3.3 0 .5-.2.9 0 0 0 .4.2.4-.1.3-.3.3-.2.6.1.6-.2 1.4 0 1.8l.1.7c.2.1.2.2.2.4.1.3.3.2.5.3H24c.4.1 1 .2 1.3.1.4 0 2.6.2 3 .1a238 238 0 0 0 27.8-.5h.7c.6 0 1.3-.3 1.8-.5.3 0 .5-.1.5-.3l.6-.2c.2 0 .2-.6 0-.8-.6-.2-.2 0-.5-.6 0-.2 1.5-.3.7-.4-.3 0 .8-.3.7-.4-.1 0-.6-.6-1-.6 0-.4 1.7-.4.7-.6-1.6-.1.6-.2 1-.4z"></path></svg></div><template id="burger-template"><button class="menu-button menu-trigger" type="button" aria-hidden="true" aria-expanded="false" aria-label="Menu" aria-controls="nav-container"><div class="menu-button__card" aria-hidden="true"><div class="menu-button__front"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82 82"><path fill="#FFF" fill-rule="evenodd" d="M0 0h82v82H0V0zm61.6 51c.3.2 2 1.5 2.2 1.4l-4.5-4a104 104 0 0 1-5.4-4.4c-3.3-3-6.7-5.8-10.1-8.7.2 0 .4-.2.5-.3.2-.3.5-.2.8-.4 0 0 .6-.3.5-.4.3-.1.5-.5.9-.5l.3-.3c.5-.5 1.1-1 1.7-1.3.4-.3.7-.6 1.1-.7.2-.3.5-.4.8-.6l1.5-1 .9-.6.8-.6c.5-.2.8-.7 1.3-.8l.3-.2.6-.5 1.8-1.1.4-.2c.5-.5 1.2-.8 1.7-1.2l1.1-.7-2.7 1.6c0-.2.2-.3.3-.3a12.8 12.8 0 0 0 1.8-1.5l.3-.2H60L57.6 25l-.9.5-1.5 1h-.3l.1-.2 1.2-.7 1.5-1 2.6-1.7.2-.1c0-.2-.2 0-.2 0l.5-.5c.2-.2.4-.4.7-.4v-.1l-.4.2h-.3c-.1-.3 0-.3.1-.3l.7-.5c-.3 0-.6.3-.8.3l-1 .2c-.3.1-.4.3-.7.3.2-.3.6-.4.7-.8h-.1l-1.2.7c-.2 0-.3.1-.4 0l.2-.2.7-.4.8-.5 1-.6c-1 .2-1.7.8-2.5 1.2v-.2l-.7.2c.1-.1.4-.2.5-.5l.8-.4 1-.6c-.4 0-.6.2
23-.8.3l.5-.5-.5.2v-.3s-.4.3-.6.2l.7-.6c-.4 0-.7.2-1 .3l-3 1.6-2.5 1.5-.3.2c-.3 0-.5.3-.8.4l-1.7 1-2.8 2-2 1.4-1.1.7-2.3 1.6-1.7 1.3-.5.4c-2.8-2.4-5.6-4.6-8.4-7.1l-4.2-3.7c-.4-.4-.7-.9-1.3-1-.3-.2-.5 0-.7 0-.4-.2-2 2.1-2 2.1-.3.5-1.3 1.2-1.2 2 .2 1 2 2.2 2.7 2.8 1.5 1.3 3 2.1 4.4 3.4l2.8 2.5 2.9 2.4.3.3-2.3 2-4.2 3.6-1.4 1-.9.9-.7.7-1.1.8-1.5 1.4c-.2.2-.5.5-.4.8 0 .6 0 1.2.2 1.8.2.5.3 1 .2 1.4v.2c.1.6.6 1.6.8 1.8 0 .1.2.3.4.3.3.1.3.1.3.4l.6-.4.6-.4.4-.4c.7-.7-1.2.6-.4-.1l2.4-2.1 2.2-2 2.9-2.5.5-.4v.2l2-1.7 1.7-1.4.5-.4 1.9-1.5 1 1 1.7 1.4 1.5 1.2-1.3-1.3c.6.1 3.5 2.6 4 3 .1-.4 1.5.9 1.8 1.1l3.7 3.2-.2-.4-.4-.7c.9.5 1.6 1.4 2.4 2l-.1-.5 1 .7c.3-.3.5.1.8.4 1 .5 2 1.4 3 2-.5-.4-1.3-1-1.5-1.6l.2.1-3.2-3c.8-.3 1.2 1 1.8 1l-.5-.5c.2-.2 1 .8.9.7l.6.5v-.1c.1 0 .7.6.9.6.4.3 1.4 1.5 2 1.5a1 1 0 0 1-.4-.4c.6.4 1 1 1.7 1.3l-.3-.3 1 .6c.3-.3-2.6-2.5-2.5-2.5l-.5-.4c.2 0-.4-.6-.3-.7L61 51c.1-.2-1.9-1.3-2-1.6l2.8 2a.8.8 0 0 1-.2-.4zm-.4 7l-1.5-.2c-.2 0-1-.2-1 0l-1.1-.2-1.5.2h-5.2l-17.5.3c-.9-.1-2-.2-2.8-.1a59.1 59.1 0 0 0-8.4-.4c-.3 0-.2.2-.4.4-.3.3 0 .5-.2.9 0 0 0 .4.2.4-.1.3-.3.3-.2.6.1.6-.2 1.4 0 1.8l.1.7c.2.1.2.2.2.4.1.3.3.2.5.3H24c.4.1 1 .2 1.3.1.4 0 2.6.2 3 .1a238 238 0 0 0 27.8-.5h.7c.6 0 1.3-.3 1.8-.5.3 0 .5-.1.5-.3l.6-.2c.2 0 .2-.6 0-.8-.6-.2-.2 0-.5-.6 0-.2 1.5-.3.7-.4-.3 0 .8-.3.7-.4-.1 0-.6-.6-1-.6 0-.4 1.7-.4.7-.6-1.6-.1.6-.2 1-.4z"></path></svg></div><div class="menu-button__back" focusable="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g id="t" fill="none" fill-rule="evenodd"><rect width="105" height="105" fill="#FFF"></rect><path id="MENU" fill="#000" fill-rule="nonzero" d="M30.929,45.36 L30.929,61 L27.042,61 L27.042,53.157 L23.569,58.516 L23.569,58.539 L21.407,58.539 L21.407,58.516 L17.911,53.111 L17.934,61 L14.047,61 L14.047,45.36 L16.945,45.36 L22.488,53.709 L28.031,45.36 L30.929,45.36 Z M41.576,48.741 L41.576,51.593 L48.522,51.593 L48.522,54.905 L41.576,54.905 L41.576,57.619 L49.511,57.619 L49.511,61 L37.689,61 L37.689,45.36 L49.511,45.36 L49.511,48.741 L41.576,48.741 Z M70.094,45.36 L70.094,61 L67.104,61 L59.606,52.421 L59.606,61 L55.719,61 L55.719,45.36 L58.686,45.36 L66.23,54.169 L66.23,45.36 L70.094,45.36 Z M91.183,45.36 L91.183,53.709 C91.183,58.562 88.377,61.345 83.892,61.345 C79.43,61.345 76.624,58.562 76.624,53.709 L76.624,45.36 L80.534,45.36 L80.534,53.778 C80.534,56.17 81.845,57.711 83.892,57.711 C85.939,57.711 87.273,56.17 87.273,53.778 L87.273,45.36 L91.183,45.36 Z"></path></g></svg></div></div></button></template><nav id="nav-container" class="global-menu" tabindex="-1"><ul class="global-menu__main-menu" role="list"><li class="global-menu__main-item"><a class="weight-bold color-black" href="/">Home</a></li><li class="global-menu__main-item"><a class="weight-bold color-black" href="/services/">Services</a><ul class="global-menu__submenu"><li class="global-menu__sub-item"><a href="/software-engineering/">Software Engineering</a></li><li class="global-menu__sub-item"><a href="/web-development/">Web Development</a></li><li class="global-menu__sub-item"><a href="/ai/">Machine Learning / AI</a></li><li class="global-menu__sub-item"><a href="/consulting/">Business Development</a></li><li class="global-menu__sub-item"><a href="/branding-and-design/">Branding &amp; Design</a></li><li class="global-menu__sub-item"><a href="/concept-and-ux/">Concept &amp; UX</a></li></ul></li><li class="global-menu__main-item"><a class="weight-bold color-black" href="/projects/">Projects</a></li><li class="global-menu__main-item"><a class="weight-bold color-black" href="/company/">Company</a><ul class="global-menu__submenu"><li class="global-menu__sub-item"><a href="/team/">Team</a></li><li class="global-menu__sub-item"><a href="/career/">Career</a></li></ul></li><li class="global-menu__main-item"><a class="weight-bold color-black" href="/blog/">Blog</a></li><li class="global-menu__main-item"><a class="weight-bold color-black" href="/de/info/">Updates</a></li><li class="global-menu__main-item"><a class="weight-bold color-black" href="/contact/">Contact</a></li><li class="global-menu__main-item global-menu__main-item--bottom"><a href="https://9esec.io/">Visit 9elements Cyber Security</a> <a href="/ventures">9elements Ventures</a></li></ul><svg class="shape-overlays" aria-hidden="true" focusable="false" viewBox="0 0 100 100" preserveAspectRatio="none"><defs>
23<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#00fdcf"></stop><stop offset="25%" stop-color="#00e8e4"></stop><stop offset="50%" stop-color="#00b1ff"></stop><stop offset="75%" stop-color="#0062ff"></stop><stop offset="100%" stop-color="#0000ff"></stop></linearGradient><linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="100%" stop-color="#00fdcf"></stop><stop offset="75%" stop-color="#00e8e4"></stop><stop offset="50%" stop-color="#00b1ff"></stop><stop offset="25%" stop-color="#0062ff"></stop><stop offset="0%" stop-color="#0000ff"></stop></linearGradient></defs><rect class="shape-overlays__rect" width="100" height="100"></rect><rect class="shape-overlays__rect" width="100" height="100"></rect><rect class="shape-overlays__rect" width="100" height="100"></rect></svg></nav><nav class="top-navigation" aria-label="Main Pages"><ul class="top-navigation__list"><li class="top-navigation__item"><a class="top-navigation__link" href="/">Home</a></li><li class="top-navigation__item"><a class="top-navigation__link" href="/services/">Services</a></li><li class="top-navigation__item"><a class="top-navigation__link" href="/projects/">Projects</a></li><li class="top-navigation__item"><a class="top-navigation__link" href="/company/">Company</a></li><li class="top-navigation__item"><a class="top-navigation__link" href="/blog/" aria-current="page" data-state="active">Blog</a></li><li class="top-navigation__item"><a class="top-navigation__link" href="/de/info/">Updates</a></li><li class="top-navigation__item"><a class="top-navigation__link" href="/contact/">Contact</a></li></ul></nav><nav class="language-select" aria-label="Language"><ul class="language-select__list"><li class="language-select__item"><a class="language-select__link | text-200 uppercase" rel="alternate" hreflang="de-DE" href="/de/blog/"><span aria-hidden="true">de</span><span class="sr-only" style="text-transform: none;">Zur deutschen Seite</span></a></li><li class="language-select__item"><a aria-current="page" class="language-select__link | text-200 uppercase" rel="alternate" hreflang="en-US" href="/blog/" style="text-decoration: underline;
24              text-decoration-thickness: 0.125em;
25              text-decoration-color: var(--top-navi-accent, var(--color-primary));
26              text-underline-offset: 4px;"><span aria-hidden="true">en</span><span class="sr-only" style="text-transform: none;">Switch to english</span></a></li></ul></nav></header><main tabindex="-1" id="main-content"><div class="user-toggle | bulb-container"><div role="status" class="sr-only | js-mode-status"></div><button class="toggle-button | light-bulb | js-mode-toggle"><span class="toggle-button__text | js-mode-toggle-text | sr-only">Enable dark mode</span><div class="light-bulb__image" aria-hidden="true"><img src="/assets/images/bulb-on.png" alt=""></div></button></div><div class="chapter-intro chapter-intro--transparent" data-level="subchapter"><div class="wrapper"><div class="section__intro | offset-grid"><h1 class="section__intro-headline | text-step-6 weight-bold leading-flat" style="max-width: 9ch">The 9elements Blog</h1><div class="section__intro-body | text-step-3 stack-m">Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code &amp; design.</div><div class="section__intro-links"><a href="/blog/rss.xml" class="section__intro-link | text-step-3"><svg style="width: 1em; height: 1em;" class="icon" aria-hidden="true" focusable="false"><use xlink:href="/assets/icons/icons.svg#svg-rss"></use></svg> <span class="sr-only">RSS Feed of the 9elements Blog</span></a></div></div></div></div><div class="blog-posts-wrap" style="padding-block: 0 var(--space-2xl-3xl);"><div class="blog-article-grid | wrapper" aria-label="All Blog Articles"><article class="blog-article" aria-label="Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod()."><img class="blog-article__image" alt="" src="/blog/yguO7yfqEK-840.webp" sizes="(min-width: 30em) 2000px, 100vw" loading="lazy" decoding="async" width="2000" height="680" srcset="/blog/yguO7yfqEK-840.webp 840w, /blog/yguO7yfqEK-1680.webp 1680w, /blog/yguO7yfqEK-2000.webp 2000w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod().</h3><p class="text-step-0 font-serif">Timetables are one of those components that look simple but contain a surprising amount of layout logic. For a project in 2026 I needed a version that supports multiple stages, adapts to the tallest session, and stays aligned across the entire...</p></div><a class="blog-article__link" href="/blog/building-a-multi-stage-timetable-with-modern-css-using-grid-subgrid-round-and-mod/"><span class="sr-only">Read more about Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod().</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2025-11-09"><span class="sr-only">published on&nbsp;</span>Nov 9, 2025</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="When Skill Became Obsolete: Art, Code, and the End of the Amateur"><img class="blog-article__image" alt="" src="/blog/uYiLFkPYoX-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/uYiLFkPYoX-386.webp 386w, /blog/uYiLFkPYoX-
26772.webp 772w, /blog/uYiLFkPYoX-1544.webp 1544w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">When Skill Became Obsolete: Art, Code, and the End of the Amateur</h3><p class="text-step-0 font-serif">Historically, the term “amateur” referred to a non-professional lover of the arts, someone who pursued artistic activities out of passion rather than for economic gain. In an era when the boundaries between professional artists and cultivated...</p></div><a class="blog-article__link" href="/blog/when-skill-became-obsolete-art-code-and-the-end-of-the-amateur/"><span class="sr-only">Read more about When Skill Became Obsolete: Art, Code, and the End of the Amateur</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2025-04-27"><span class="sr-only">published on&nbsp;</span>Apr 27, 2025</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="AI clothes swaps with Flux Redux &amp; Flux Fill"><img class="blog-article__image" alt="" src="/blog/KMtSh_ssb9-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/KMtSh_ssb9-386.webp 386w, /blog/KMtSh_ssb9-772.webp 772w, /blog/KMtSh_ssb9-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">AI clothes swaps with Flux Redux &amp; Flux Fill</h3><p class="text-step-0 font-serif">We have all seen amazing artistic or realistic images generated by AI. However, one main challenge for AI image generation is to find use cases that solve problems or boost process performance. One such use case is changing a Model's clothes to your...</p></div><a class="blog-article__link" href="/blog/ai-clothes-swaps-with-flux-redux-and-flux-fill/"><span class="sr-only">Read more about AI clothes swaps with Flux Redux &amp; Flux Fill</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2025-03-18"><span class="sr-only">published on&nbsp;</span>Mar 18, 2025</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/philipp-doll">Philipp Doll</a></p></footer></div></article><article class="blog-article" aria-label="Visualizing global health data on data.who.int"><img class="blog-article__image" alt="Visualization of healthy life expectancy at birth in years. World map with country shapes colored in different shades of blue according to the life expectancy. India is highlighted with 58.1 years in 2021." src="/blog/luMhBHD9RQ-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/luMhBHD9RQ-386.webp 386w, /blog/luMhBHD9RQ-772.webp 772w, /blog/luMhBHD9RQ-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Visualizing global health data on data.who.int</h3><p class="text-step-0 font-serif">For the past three years, 9elements has worked collaboratively with UK agency , helping the World Health Organization (WHO) to visualize global public health data on , WHO’s central data hub. Open health data plays a key role for guiding public...</p></div><a class="blog-article__link" href="/blog/visualizing-global-health-data-on-data-who-int/"><span class="sr-only">Read more about Visualizing global health data on data.who.int</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2025-01-10"><span class="sr-only">published on&nbsp;</span>Jan 10, 2025</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="Fine Tuning Flux.1-dev Model"><img class="blog-article__image" alt="" src="/blog/geWL0uS4mF-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/geWL0uS4mF-386.webp 386w, /blog/geWL0uS4mF-772.webp 772w, /blog/geWL0uS4mF-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Fine Tuning Flux.1-dev Model</h3><p class="text-step-0 font-serif">Let’s take a look at how to fine-tune a model. Flux.1 is an impressive image generation model from that has instantly become one of the most prominent image generation models. One significant benefit is that it can be fine-tuned with just a few...</p></div><a class="blog-article__link" href="/blog/fine-tuning-flux-1-dev-model/"><span class="sr-only">Read more about Fine Tuning Flux.1-dev Model</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2025-01-08"><span class="sr-only">published on&nbsp;</span>Jan 8, 2025</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/philipp-doll">Philipp Doll</a></p></footer></div></article><article class="blog-article" aria-label="Robust Session Storage in Phoenix Live View Sessions"><img class="blog-article__image" alt="Illustration of a cute robot handling multiple charts floating in the air" src="/blog/yRT3PJjc0c-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/yRT3PJjc0c-386.webp 386w, /blog/yRT3PJjc0c-772.webp 772w, /blog/yRT3PJjc0c-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Robust Session Storage in Phoenix Live View Sessions</h3><p class="text-step-0 font-serif">For an internal project called ‘ControlManiac’, which helps us with all the boring numbers juggling in our software studio, I had to add a global filter to the navigation bar, which lets me select the division I want to filter the data for on...</p></div><a class="blog-article__link" href="/blog/robust-session-storage-in-phoenix-live-view-sessions/"><span class="sr-only">Read more about Robust Session Storage in Phoenix Live View Sessions</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2024-11-27"><span class="sr-only">published on&nbsp;</span>Nov 27, 2024</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/daniel-hoelzgen">Daniel Hoelzgen</a></p></footer></div></article><article class="blog-article" aria-label="Building the Perfect Logo Strip"><img class="blog-article__image" alt="Four logos in a row. Above the headline says: Building the perfect logo strip" src="/blog/jz18VC_iB9-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/jz18VC_iB9-386.webp 386w, /blog/jz18VC_iB9-772.webp 772w, /blog/jz18VC_iB9-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Building the Perfect Logo Strip</h3><p class="text-step-0 font-serif">We've all been there: you're working on a website and need to display a row of logos—clients, partners, sponsors—you name it. However, logos come in all shapes and sizes, and making them look good together can be quite challenging. How do you get...</p></div><a class="blog-article__link" href="/blog/building-the-perfect-logo-strip/"><span class="sr-only">Read more about Building the Perfect Logo Strip</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2024-09-23"><span class="sr-only">published on&nbsp;</span>Sep 23, 2024</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="Responsive bar charts in HTML and CSS"><img class="blog-article__image" alt="Horizontal bar chart showing multiple bars with percentages next to them" src="/blog/3t66qhwt8W-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/3t66qhwt8W-386.webp 386w, /blog/3t66qhwt8W-772.webp 772w, /blog/3t66qhwt8W-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Responsive bar charts in HTML and CSS</h3><p class="text-step-0 font-serif">Building flexible data visualizations for international sites For our international clients, we have created dynamic charts and data visualizations for the web. Charts typically render shapes like lines and paths, rectangles and circles. They contain...</p></div><a class="blog-article__link" href="/blog/responsive-bar-charts-in-html-and-css/"><span class="sr-only">Read more about Responsive bar charts in HTML and CSS</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2024-07-04"><span class="sr-only">published on&nbsp;</span>Jul 4, 2024</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="Speed vs. Duration - A use case for mixed unit division"><img class="blog-article__image" alt="A colored circle and an outlined circle. An arrow connecting both circles. Above the headline is repeated &quot;Duration vs. Speed - A use case for mixed unit division&quot;" src="/blog/PJzjwJ9d4O-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/PJzjwJ9d4O-386.webp 386w, /blog/PJzjwJ9d4O-772.webp 772w, /blog/PJzjwJ9d4O-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Speed vs. Duration - A use case for mixed unit division</h3><p class="text-step-0 font-serif">Animating elements in CSS can be challenging, especially when you want to ensure smooth transitions across different screen sizes. One issue that I stumble upon quite often is the inability to divide two length values in CSS. For example,&nbsp; calc(100vw...</p></div><a class="blog-article__link" href="/blog/speed-vs-duration-a-use-case-for-mixed-unit-division/"><span class="sr-only">Read more about Speed vs. Duration - A use case for mixed unit division</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2024-06-27"><span class="sr-only">published on&nbsp;</span>Jun 27, 2024</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="Building a Rock Solid Auto Grid"><img class="blog-article__image" alt="Three rectangles aligned in a grid. The first two are colored while the third one only shows an outline. Above the title of the post is repeated: Rock Solid Auto-Grid" src="/blog/nJlE4eQkuQ-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/nJlE4eQkuQ-386.webp 386w, /blog/nJlE4eQkuQ-772.webp 772w, /blog/nJlE4eQkuQ-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Building a Rock Solid Auto Grid</h3><p class="text-step-0 font-serif">In this article, I'm sharing a customizable CSS auto-grid layout. It's a grid component that allows for adjustments in minimum column widths, horizontal and vertical gaps, and even the maximum number of columns to fit various design needs. Since CSS...</p></div><a class="blog-article__link" href="/blog/building-a-rock-solid-auto-grid/"><span class="sr-only">Read more about Building a Rock Solid Auto Grid</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2024-03-18"><span class="sr-only">published on&nbsp;</span>Mar 18, 2024</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="Hosting a ComfyUI Workflow via API"><img class="blog-article__image" alt="A futuristic robot facing multiple computer screens with neon blue lights in a high-tech control room." src="/blog/wjg1q73R9l-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/wjg1q73R9l-386.webp 386w, /blog/wjg1q73R9l-772.webp 772w, /blog/wjg1q73R9l-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Hosting a ComfyUI Workflow via API</h3><p class="text-step-0 font-serif">This article focuses on leveraging ComfyUI beyond its basic workflow capabilities. You have created a fantastic Workflow and want to share it with the world or build an application around it. By hosting your projects and utilizing this WebSocket API...</p></div><a class="blog-article__link" href="/blog/hosting-a-comfyui-workflow-via-api/"><span class="sr-only">Read more about Hosting a ComfyUI Workflow via API</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2024-02-13"><span class="sr-only">published on&nbsp;</span>Feb 13, 2024</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/philipp-doll">Philipp Doll</a></p></footer></div></article><article class="blog-article" aria-label="Stress testing Svelte until your browser breaks down crying"><img class="blog-article__image" alt="Meme of the author as a salesman at someone's door, saying &quot;Excuse me sir, do you have a moment to talk about our lord and savior Svelte?&quot;" src="/blog/D7An_uwG6_-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/D7An_uwG6_-386.webp 386w, /blog/D7An_uwG6_-772.webp 772w, /blog/D7An_uwG6_-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Stress testing Svelte until your browser breaks down crying</h3><p class="text-step-0 font-serif">Svelte is one of the best bets on technology we have ever made. It’s fast, easy to learn and very ergonomic to use. It gives our teams a quick way to build responsive web apps that can handle a ton of data and complex interactions. Together with&nbsp; ,...</p></div><a class="blog-article__link" href="/blog/stress-testing-svelte-until-your-browser-breaks-down-crying/"><span class="sr-only">Read more about Stress testing Svelte until your browser breaks down crying</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2024-01-29"><span class="sr-only">published on&nbsp;</span>Jan 29, 2024</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/julian-laubstein">Julian Laubstein</a></p></footer></div></article><article class="blog-article" aria-label="Blending AI and Artistry: A Journey in Digital Creation for a Fictional Movie Poster"><img class="blog-article__image" alt="AI generated image of a figure depicting Triton holding his trident, long hair flowing in the underwater landscape. At the center bottom of the image we see 5 app icons: Midjourney, openAI, Magnific AI, Photoshop and Figma." src="/blog/KjXLXplcud-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/KjXLXplcud-386.webp 386w, /blog/KjXLXplcud-772.webp 772w, /blog/KjXLXplcud-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Blending AI and Artistry: A Journey in Digital Creation for a Fictional Movie Poster</h3><p class="text-step-0 font-serif">There are many AI tools for image generation, and it seems like a new one is added every day. The results are often very impressive, yet they can also feel quite random. I wanted to try what I could achieve by setting a clear goal and striving to...</p></div><a class="blog-article__link" href="/blog/blending-ai-and-artistry-a-journey-in-digital-creation-for-a-fictional-movie-poster/"><span class="sr-only">Read more about Blending AI and Artistry: A Journey in Digital Creation for a Fictional Movie Poster</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2023-12-08"><span class="sr-only">published on&nbsp;</span>Dec 8, 2023</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="9elements x DISROOPTIVE x AI: Revolutionizing Workflow Efficiency"><img class="blog-article__image" alt="AI generated image depicting a figure in the center that's human on the left side and a futuristic robot on the right side. Where the figure is split, so is the background, in light and dark squares. Underneath the figure, there's a visualisation of an office workspace where people are looking at data visualisation. Behind the figure, there are frames that look like windows on a computer screen, saying 'before' and 'after', showing traditional web frames and flashy, colorful web frames." src="/blog/4GiYvdHDm3-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/4GiYvdHDm3-386.webp 386w, /blog/4GiYvdHDm3-772.webp 772w, /blog/4GiYvdHDm3-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">9elements x DISROOPTIVE x AI: Revolutionizing Workflow Efficiency</h3><p class="text-step-0 font-serif">Innovating a company from within is a complicated task. You need to identify painpoints in your current processes, you need to create benchmarks so that you can validate changes and you need to have hypotheses to get a gut feeling which are the most...</p></div><a class="blog-article__link" href="/blog/9elements-x-disrooptive-x-ai-revolutionizing-workflow-efficiency/"><span class="sr-only">Read more about 9elements x DISROOPTIVE x AI: Revolutionizing Workflow Efficiency</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2023-11-18"><span class="sr-only">published on&nbsp;</span>Nov 18, 2023</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/tobias-hoenel">Tobias Hönel</a></p></footer></div></article><article class="blog-article" aria-label="AI Glossary"><img class="blog-article__image" alt="AI generate image of a knitted astronaut sitting in a typical gamer boy's bedroom, working on his Macbook. Behind him are five large monitors and a few more laptops. There are also more, small, knitted plushies scattered around the desk." src="/blog/ESTp7Fjd0I-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/ESTp7Fjd0I-386.webp 386w, /blog/ESTp7Fjd0I-772.webp 772w, /blog/ESTp7Fjd0I-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">AI Glossary</h3><p class="text-step-0 font-serif">This Blog post aims to provide a basic overview of the concepts and buzzwords in the AI realm. This is not a technical deep dive or a blog post that explores nuances of different concepts. This blog post introduces each concept or term with a...</p></div><a class="blog-article__link" href="/blog/ai-glossary/"><span class="sr-only">Read more about AI Glossary</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2023-11-07"><span class="sr-only">published on&nbsp;</span>Nov 7, 2023</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/philipp-doll">Philipp Doll</a></p></footer></div></article><article class="blog-article" aria-label="Enhancing video search &amp; discovery in a Rails application by using Whisper and ChatGPT"><img class="blog-article__image" alt="A silver colored robot with blue glowing eyes and heart, working with an electrical pencil on a holographic tablet. Behind him there are futuristic depictions of screens showing braind with different levels of activity." src="/blog/wGvepUNLZU-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/wGvepUNLZU-386.webp 386w, /blog/wGvepUNLZU-772.webp 772w, /blog/wGvepUNLZU-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Enhancing video search &amp; discovery in a Rails application by using Whisper and ChatGPT</h3><p class="text-step-0 font-serif">Building a reliable search for a web application is hard. Building it for a video-based platform is even harder. For&nbsp; , a German platform offering bite-sized video courses for doctors, we relied on descriptions created by the lecturers who recorded...</p></div><a class="blog-article__link" href="/blog/enhancing-video-search-and-discovery-in-a-rails-application-by-using-whisper-and-chatgpt/"><span class="sr-only">Read more about Enhancing video search &amp; discovery in a Rails application by using Whisper and ChatGPT</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2023-11-01"><span class="sr-only">published on&nbsp;</span>Nov 1, 2023</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/daniel-hoelzgen">Daniel Hoelzgen</a></p></footer></div></article><article class="blog-article" aria-label="A JavaScript Testing Journey"><img class="blog-article__image" alt="Long exposure photo of a rocket shooting into the night sky, forming a glowing arc over the horizon" src="/blog/_5x9n9hJoK-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/_5x9n9hJoK-386.webp 386w, /blog/_5x9n9hJoK-772.webp 772w, /blog/_5x9n9hJoK-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">A JavaScript Testing Journey</h3><p class="text-step-0 font-serif">In software development, there are few topics&nbsp; as controversial as test automation . The first controversy revolves around the&nbsp; fundamental value of automated tests . What can automated testing achieve and contribute to correct, bug-free software...</p></div><a class="blog-article__link" href="/blog/a-javascript-testing-journey/"><span class="sr-only">Read more about A JavaScript Testing Journey</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2023-09-29"><span class="sr-only">published on&nbsp;</span>Sep 29, 2023</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="Using symbolic logic for mitigating nondeterministic behavior and hallucinations of LLMs"><img class="blog-article__image" alt="A glowing, futuristic brain-like structure floats in the center of a dark background, blending organic and mechanical elements with vibrant red and electric blue tones. Surrounding it are digital grids, floating data symbols, and glowing numbers &quot;1931,&quot; creating a high-tech, cyberpunk aesthetic. The edges feature scattered circuitry and glowing particles, resembling a digital network or interface." src="/blog/j0PoPm7RUp-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/j0PoPm7RUp-386.webp 386w, /blog/j0PoPm7RUp-772.webp 772w, /blog/j0PoPm7RUp-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Using symbolic logic for mitigating nondeterministic behavior and hallucinations of LLMs</h3><p class="text-step-0 font-serif">If you want an automated system to follow a given set of rules reliably, no matter how complex they are, symbolic logic is the perfect fit for the job. In particular, default logic is well suited when translating experts’ knowledge into...</p></div><a class="blog-article__link" href="/blog/using-symbolic-logic-for-mitigating-nondeterministic-behavior-and-hallucinations-of-llms/"><span class="sr-only">Read more about Using symbolic logic for mitigating nondeterministic behavior and hallucinations of LLMs</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2023-09-06"><span class="sr-only">published on&nbsp;</span>Sep 6, 2023</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/daniel-hoelzgen">Daniel Hoelzgen</a></p></footer></div></article><article class="blog-article" aria-label="variables2css – Writing a Figma plugin"><img class="blog-article__image" alt="A cool-toned purple background, with the text 'variables2css' in turquoise letters." src="/blog/2SbfVuh96W-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/2SbfVuh96W-386.webp 386w, /blog/2SbfVuh96W-772.webp 772w, /blog/2SbfVuh96W-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">variables2css – Writing a Figma plugin</h3><p class="text-step-0 font-serif">As developers, we often find ourselves faced with the task of translating design elements like colors, font sizes, and spacing into our code. Alternatively, as designers, we need to summarize and provide this information to the developers. At 9e,...</p></div><a class="blog-article__link" href="/blog/variables2css-writing-a-figma-plugin/"><span class="sr-only">Read more about variables2css – Writing a Figma plugin</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2023-08-24"><span class="sr-only">published on&nbsp;</span>Aug 24, 2023</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/kai-uwe-hella">Kai-Uwe Hella</a></p></footer></div></article><article class="blog-article" aria-label="From Hacks to Elegance: Transforming a Card Component with Modern CSS Wizardry"><img class="blog-article__image" alt="n abstract UI design concept with a dark blue background and a gradient pink-to-blue rectangular element on the right. A smaller dark card with white scribbles, resembling placeholder text, and a checkbox is centered on the design, surrounded by magenta grid lines indicating alignment and spacing." src="/blog/AUmcvYzPRe-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/AUmcvYzPRe-386.webp 386w, /blog/AUmcvYzPRe-772.webp 772w, /blog/AUmcvYzPRe-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">From Hacks to Elegance: Transforming a Card Component with Modern CSS Wizardry</h3><p class="text-step-0 font-serif">A few years ago, I had to build a card component that looked a little different than the usual cards you find on most websites. It turned out that this card led to one of my biggest estimation errors because I completely underestimated how...</p></div><a class="blog-article__link" href="/blog/from-hacks-to-elegance-transforming-a-card-component-with-modern-css-wizardry/"><span class="sr-only">Read more about From Hacks to Elegance: Transforming a Card Component with Modern CSS Wizardry</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2023-07-07"><span class="sr-only">published on&nbsp;</span>Jul 7, 2023</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="My Thoughts on CSS Day 2023"><img class="blog-article__image" alt="The CSS Day logo, in a blue, purple and pink gradient." src="/blog/52BSS5LE1J-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/52BSS5LE1J-386.webp 386w, /blog/52BSS5LE1J-772.webp 772w, /blog/52BSS5LE1J-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">My Thoughts on CSS Day 2023</h3><p class="text-step-0 font-serif">Last week, I had the incredible opportunity to attend my first&nbsp; &nbsp;in Amsterdam. It was an exceptional experience that left me brimming with newfound knowledge. While I felt confident about certain topics, such as the has-selector and container...</p></div><a class="blog-article__link" href="/blog/my-thoughts-on-css-day-2023/"><span class="sr-only">Read more about My Thoughts on CSS Day 2023</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2023-06-18"><span class="sr-only">published on&nbsp;</span>Jun 18, 2023</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="Building a combined CSS-aspect-ratio-grid"><img class="blog-article__image" alt="A grid showing two squares, one with a 4:3 aspect ratio and one with a 2:3 aspect ratio." src="/blog/YxzZolnmSU-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/YxzZolnmSU-386.webp 386w, /blog/YxzZolnmSU-772.webp 772w, /blog/YxzZolnmSU-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Building a combined CSS-aspect-ratio-grid</h3><p class="text-step-0 font-serif">Recently I was faced with the following problem: I had to build a layout that consists of several rows. In each row are two&nbsp; i mages with a fixed aspect ratio. The two images should have the same height and fill the entire row. The images' aspect...</p></div><a class="blog-article__link" href="/blog/building-a-combined-css-aspect-ratio-grid/"><span class="sr-only">Read more about Building a combined CSS-aspect-ratio-grid</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2022-04-21"><span class="sr-only">published on&nbsp;</span>Apr 21, 2022</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="More productive through less bullshit"><img class="blog-article__image" alt="A group of men sitting at a long table with their laptops, some full of stickers. The picture depicts a situation that looks like the last supper, or more likely: 'the last coding session'." src="/blog/slXkN2JrbB-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/slXkN2JrbB-386.webp 386w, /blog/slXkN2JrbB-772.webp 772w, /blog/slXkN2JrbB-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">More productive through less bullshit</h3><p class="text-step-0 font-serif">Corporate growth kills individuality – or at least it tries to. We found, at least for us, an approach to combat the slow death of our company culture while growing from a living-room-like office with a few team members to a global player with over...</p></div><a class="blog-article__link" href="/blog/more-productive-through-less-bullshit/"><span class="sr-only">Read more about More productive through less bullshit</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2021-06-07"><span class="sr-only">published on&nbsp;</span>Jun 7, 2021</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/joshua-schmitz">Joshua Schmitz</a></p></footer></div></article><article class="blog-article" aria-label="Testing Angular applications"><img class="blog-article__image" alt="The red angular logo on top of a purple background." src="/blog/xnGMttEiQ7-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/xnGMttEiQ7-386.webp 386w, /blog/xnGMttEiQ7-772.webp 772w, /blog/xnGMttEiQ7-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Testing Angular applications</h3><p class="text-step-0 font-serif">Automated software testing is a controversial topic in the programming community. Some developers are avid proponents of testing and test-driven development. Some developers recognize the value of automated testing but consider the effort to be...</p></div><a class="blog-article__link" href="/blog/testing-angular-applications/"><span class="sr-only">Read more about Testing Angular applications</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2021-05-05"><span class="sr-only">published on&nbsp;</span>May 5, 2021</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="Maintaining JavaScript applications in the long term"><img class="blog-article__image" alt="An illustration of a factory machine where feathers, carrots and cheese are the input. Out of the machine come cute rabbits with mouse-like curly tails and wings." src="/blog/mjF-tdwri2-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/mjF-tdwri2-386.webp 386w, /blog/mjF-tdwri2-772.webp 772w, /blog/mjF-tdwri2-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Maintaining JavaScript applications in the long term</h3><p class="text-step-0 font-serif">In 2019, I wrote an article on&nbsp; . As a follow-up, I’d like to describe a client project we are maintaining since 2014. The Organisation for Economic Co-operation and Development (OECD) is an intergovernmental body that collects data and publishes...</p></div><a class="blog-article__link" href="/blog/maintaining-javascript-applications-in-the-long-term/"><span class="sr-only">Read more about Maintaining JavaScript applications in the long term</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2021-01-11"><span class="sr-only">published on&nbsp;</span>Jan 11, 2021</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="The Devil's Albatross"><img class="blog-article__image" alt="Illustration of an albatross viewed from underneath with its wings spread, on its left side there is a logo container and on its right side there's some content. Another illustration shows this same content, but in a smaller box. This time, the logo is on top, then the albatross, and then the other content." src="/blog/bmIBcCkRY0-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/bmIBcCkRY0-386.webp 386w, /blog/bmIBcCkRY0-772.webp 772w, /blog/bmIBcCkRY0-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">The Devil's Albatross</h3><p class="text-step-0 font-serif">I'm fascinated with the concept of algorithmic layouts and got so used to building whole websites without using any media-query, that I sometimes forget they exist. (You got no idea what an algorithmic layout is? Long story short: It's a component...</p></div><a class="blog-article__link" href="/blog/the-devils-albatross/"><span class="sr-only">Read more about The Devil's Albatross</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2021-01-04"><span class="sr-only">published on&nbsp;</span>Jan 4, 2021</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="Telegram Service for Ethereum 2.0 Staking"><img class="blog-article__image" alt="A golden coin that says 'ethereum'." src="/blog/B1FFTDvfag-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/B1FFTDvfag-386.webp 386w, /blog/B1FFTDvfag-772.webp 772w, /blog/B1FFTDvfag-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Telegram Service for Ethereum 2.0 Staking</h3><p class="text-step-0 font-serif">On the 1st of December, the first phase of the Ethereum 2.0 transition from Proof of Work to Proof of Stake will start - and we're happy to be&nbsp; . We &nbsp;followed&nbsp; &nbsp;to set up a lighthouse client (we love Rust) developed by&nbsp; . But we have the feeling...</p></div><a class="blog-article__link" href="/blog/telegram-service-for-ethereum-2-0-staking/"><span class="sr-only">Read more about Telegram Service for Ethereum 2.0 Staking</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2020-11-30"><span class="sr-only">published on&nbsp;</span>Nov 30, 2020</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Developing on Windows with WSL2"><img class="blog-article__image" alt="A picture of a computer screen with VSCode opened on a ruby file. On top of this window, there's a smaller window with 'localhost:3000' as url. The website says 'Yay! You're on Rails!' with the ruby on rails logo above it." src="/blog/Qeef4m3DKl-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/Qeef4m3DKl-386.webp 386w, /blog/Qeef4m3DKl-772.webp 772w, /blog/Qeef4m3DKl-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Developing on Windows with WSL2</h3><p class="text-step-0 font-serif">Last week the keyboard of my MacBook Pro broke. One key just stopped working, and I have lived over months with double keystrokes. It was time to bring it to the Apple store and get it fixed. The dude in the Genius Bar told me it would take 10-14...</p></div><a class="blog-article__link" href="/blog/developing-on-windows-with-wsl2/"><span class="sr-only">Read more about Developing on Windows with WSL2</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2020-08-18"><span class="sr-only">published on&nbsp;</span>Aug 18, 2020</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Gradient angles in CSS, Figma &amp; Sketch"><img class="blog-article__image" alt="A rectangle with a hotpink, dark blue and turquoise gradient. There are multiple solid and dashed lines set to help understand the angle that this gradient is at." src="/blog/URgjOpSlvn-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/URgjOpSlvn-386.webp 386w, /blog/URgjOpSlvn-772.webp 772w, /blog/URgjOpSlvn-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Gradient angles in CSS, Figma &amp; Sketch</h3><p class="text-step-0 font-serif">Do you know the feeling when a subject never lets you go? In the last years, I have worked with different graphics programs and have written many lines of CSS. Even though it is now easy to copy CSS code for gradients directly from e.g. Figma, I...</p></div><a class="blog-article__link" href="/blog/gradient-angles-in-css-figma-and-sketch/"><span class="sr-only">Read more about Gradient angles in CSS, Figma &amp; Sketch</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2020-08-10"><span class="sr-only">published on&nbsp;</span>Aug 10, 2020</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="GPT-3 might be the iPhone moment for AI"><img class="blog-article__image" alt="" src="/blog/bOQ00YDYmh-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/bOQ00YDYmh-386.webp 386w, /blog/bOQ00YDYmh-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">GPT-3 might be the iPhone moment for AI</h3><p class="text-step-0 font-serif">GPT-3 is a transformer neural net topology that can be used for natural language processing (NLP) tasks. It is an unsupervised learning approach with the core idea that if you feed the net enough text, it eventually will be able to find patterns. It...</p></div><a class="blog-article__link" href="/blog/gpt-3-might-be-the-iphone-moment-for-ai/"><span class="sr-only">Read more about GPT-3 might be the iPhone moment for AI</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2020-07-22"><span class="sr-only">published on&nbsp;</span>Jul 22, 2020</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="What We Learned From Going 100% Remote As A Digital Agency"><img class="blog-article__image" alt="" src="/blog/6nY3mHHFce-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/6nY3mHHFce-386.webp 386w, /blog/6nY3mHHFce-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">What We Learned From Going 100% Remote As A Digital Agency</h3><p class="text-step-0 font-serif">Right about now I get this question a lot, not only from other team members, but from friends and family struggling with working from home the first time and dealing with all the changes that go together with this situation. Since I've worked...</p></div><a class="blog-article__link" href="/blog/what-we-learned-from-going-100-remote-as-a-digital-agency/"><span class="sr-only">Read more about What We Learned From Going 100% Remote As A Digital Agency</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2020-05-05"><span class="sr-only">published on&nbsp;</span>May 5, 2020</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/julian-laubstein">Julian Laubstein</a></p></footer></div></article><article class="blog-article" aria-label="Create Diagonal Layouts Like It's 2020"><img class="blog-article__image" alt="" src="/blog/2hacZUFS4Z-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/2hacZUFS4Z-386.webp 386w, /blog/2hacZUFS4Z-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Create Diagonal Layouts Like It's 2020</h3><p class="text-step-0 font-serif">Layouts with diagonal sections are quite popular for several years now. It is not&nbsp; the new hot stuff , and you will probably not find it in the articles titled "Design trends for 2020". But I think it is here to stay. It is one tool designers can...</p></div><a class="blog-article__link" href="/blog/create-diagonal-layouts-like-its-2020/"><span class="sr-only">Read more about Create Diagonal Layouts Like It's 2020</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2020-02-19"><span class="sr-only">published on&nbsp;</span>Feb 19, 2020</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="Ethereum 2.0"><img class="blog-article__image" alt="A silver coin with 'ethereum' written on it, surrounded by vibrant, warm colors." src="/blog/gpo
26IiW0xrI-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/gpoIiW0xrI-386.webp 386w, /blog/gpoIiW0xrI-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Ethereum 2.0</h3><p class="text-step-0 font-serif">We have always been big fans of Ethereum, and we've been on the&nbsp; &nbsp;to have invested into this idea early on. When the second big bubble of crypto was about to pop, &nbsp;disillusionment and doubts lured behind the corner: The technology that was supposed...</p></div><a class="blog-article__link" href="/blog/ethereum-2-0/"><span class="sr-only">Read more about Ethereum 2.0</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2020-02-14"><span class="sr-only">published on&nbsp;</span>Feb 14, 2020</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Volatile downloads with Elixir and Phoenix"><img class="blog-article__image" alt="A laptop showing a dashboard with a lot of data visualisation on it." src="/blog/jm3t7jYJYx-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/jm3t7jYJYx-386.webp 386w, /blog/jm3t7jYJYx-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Volatile downloads with Elixir and Phoenix</h3><p class="text-step-0 font-serif">At some point, almost every product served by a web application needs a reporting functionality for its admins. This may be a page showing a graph and a table, or a spreadsheet download. Admins can usually select a date range, and possibly provide...</p></div><a class="blog-article__link" href="/blog/volatile-downloads-with-elixir-and-phoenix/"><span class="sr-only">Read more about Volatile downloads with Elixir and Phoenix</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2019-07-10"><span class="sr-only">published on&nbsp;</span>Jul 10, 2019</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/thomas-stratmann">Thomas Stratmann</a></p></footer></div></article><article class="blog-article" aria-label="Sizing Blocks or Areas using CSS Custom-Properties"><img class="blog-article__image" alt="" src="/blog/UYc0o1-47C-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/UYc0o1-47C-386.webp 386w, /blog/UYc0o1-47C-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Sizing Blocks or Areas using CSS Custom-Properties</h3><p class="text-step-0 font-serif">One of the many challenges when it comes to writing CSS is choosing the right unit. Over the years there has been a lot of controversies whether to use&nbsp; px ,&nbsp; em &nbsp;or&nbsp; rem &nbsp;to size text. So I thought, why not add some custom properties to this mixture...</p></div><a class="blog-article__link" href="/blog/sizing-blocks-or-areas-using-css-custom-properties/"><span class="sr-only">Read more about Sizing Blocks or Areas using CSS Custom-Properties</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2019-06-17"><span class="sr-only">published on&nbsp;</span>Jun 17, 2019</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="Track-switching in a large Elixir web application"><img class="blog-article__image" alt="Two railroads and a railroad switch." src="/blog/gmRqCOB-Jf-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="7
2672" height="262" srcset="/blog/gmRqCOB-Jf-386.webp 386w, /blog/gmRqCOB-Jf-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Track-switching in a large Elixir web application</h3><p class="text-step-0 font-serif">We used a feature toggle to gradually re-build parts of the business logic of our app. We were then able to switch to the new logic, and seamlessly roll back to the old logic in case of unforeseen problems. We had to come up with two interesting...</p></div><a class="blog-article__link" href="/blog/track-switching-in-a-large-elixir-web-application/"><span class="sr-only">Read more about Track-switching in a large Elixir web application</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2019-02-20"><span class="sr-only">published on&nbsp;</span>Feb 20, 2019</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/thomas-stratmann">Thomas Stratmann</a></p></footer></div></article><article class="blog-article" aria-label="CSS Border-Radius Can Do That?"><img class="blog-article__image" alt="five differently shaped organic blobs, made with CSS." src="/blog/AN7Hq0z7yq-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/AN7Hq0z7yq-386.webp 386w, /blog/AN7Hq0z7yq-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">CSS Border-Radius Can Do That?</h3><p class="text-step-0 font-serif">TL/DR : When you use eight values specifying border-radius in CSS, you can create organic looking shapes. WOW. No time to read it all ?— we made a visual tool for you.&nbsp; During this year’s&nbsp; &nbsp; &nbsp;talked about&nbsp; . At the end of her talk, she...</p></div><a class="blog-article__link" href="/blog/css-border-radius-can-do-that/"><span class="sr-only">Read more about CSS Border-Radius Can Do That?</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2018-10-19"><span class="sr-only">published on&nbsp;</span>Oct 19, 2018</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="Maintainable test setup with scenario pipelines"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Maintainable test setup with scenario pipelines</h3><p class="text-step-0 font-serif">Shared test setup operating at the application level or below always made my test code hard to maintain. I stopped using test framework mechanics for this, in favor of concise repetitious setup pipelines at the start of each test. Abandoning a bad...</p></div><a class="blog-article__link" href="/blog/maintainable-test-setup-with-scenario-pipelines/"><span class="sr-only">Read more about Maintainable test setup with scenario pipelines</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2018-10-04"><span class="sr-only">published on&nbsp;</span>Oct 4, 2018</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/thomas-stratmann">Thomas Stratmann</a></p></footer></div></article><article class="blog-article" aria-label="Top 13 Websites to Learn How to Code in 2019"><img class="blog-article__image" alt="" src="/blog/fpar7ZjzGJ-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/fpar7ZjzGJ-386.webp 386w, /blog/fpar7ZjzGJ-772.webp 772w, /blog/fpar7ZjzGJ-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Top 13 Websites to Learn How to Code in 2019</h3><p class="text-step-0 font-serif">Don’t worry, I´ve got you covered. This article is about the best sites (mostly free) that teach you how to code. I have been a professional coder for several years now and I make my living with it, but guess what? I started of with some of these...</p></div><a class="blog-article__link" href="/blog/top-13-websites-to-learn-how-to-code-in-2019/"><span class="sr-only">Read more about Top 13 Websites to Learn How to Code in 2019</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2018-09-11"><span class="sr-only">published on&nbsp;</span>Sep 11, 2018</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/christian-kienast">Christian Kienast</a></p></footer></div></article><article class="blog-article" aria-label="The 100 Ether Rooftop"><img class="blog-article__image" alt="a helicopter view of a big, wooden rooftop in the Bochum Bermuda triangle." src="/blog/siIjX0VNFF-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/siIjX0VNFF-386.webp 386w, /blog/siIjX0VNFF-772.webp 772w, /blog/siIjX0VNFF-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">The 100 Ether Rooftop</h3><p class="text-step-0 font-serif">Our story begins in July 2015, when the Ethereum project released the genesis block, the very first block of the ether blockchain. Some people in our team followed the idea of Ethereum for some time already, and it didn’t take long until the...</p></div><a class="blog-article__link" href="/blog/the-100-ether-rooftop/"><span class="sr-only">Read more about The 100 Ether Rooftop</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2018-08-07"><span class="sr-only">published on&nbsp;</span>Aug 7, 2018</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/eray-basar">Eray Basar</a></p></footer></div></article><article class="blog-article" aria-label="Creating an animated SVG Neon light effect"><img class="blog-article__image" alt="Illustration with a classic theatrical light sign that says 'tickets'." src="/blog/I1hXRa58Ty-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/I1hXRa58Ty-386.webp 386w, /blog/I1hXRa58Ty-772.webp 772w, /blog/I1hXRa58Ty-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Creating an animated SVG Neon light effect</h3><p class="text-step-0 font-serif">We at&nbsp; &nbsp;organize an annual JavaScript conference called&nbsp; . The key visual shows a shaft tower and the conference name executed with a neon light effect. The main page features the full visual with flickering lights. This effect is created by using...</p></div><a class="blog-article__link" href="/blog/creating-an-animated-svg-neon-light-effect/"><span class="sr-only">Read more about Creating an animated SVG Neon light effect</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2018-07-25"><span class="sr-only">published on&nbsp;</span>Jul 25, 2018</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="On the Future of Web Development"><img class="blog-article__image" alt="" src="/blog/6SoZLnvAC_-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/6SoZLnvAC_-386.webp 386w, /blog/6SoZLnvAC_-772.webp 772w, /blog/6SoZLnvAC_-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">On the Future of Web Development</h3><p class="text-step-0 font-serif">Rust is a strongly typed, low-level programming language built for safety, speed, and concurrency from the ground up. It is mostly developed by&nbsp; Mozilla &nbsp;and has been battle tested by&nbsp; &nbsp;including&nbsp; Dropbox &nbsp;and the game studio&nbsp; . Mozilla’s new&nbsp;...</p></div><a class="blog-article__link" href="/blog/on-the-future-of-web-development/"><span class="sr-only">Read more about On the Future of Web Development</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2018-07-11"><span class="sr-only">published on&nbsp;</span>Jul 11, 2018</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/julian-laubstein">Julian Laubstein</a></p></footer></div></article><article class="blog-article" aria-label="Building a responsive image"><img class="blog-article__image" alt="" src="/blog/dkwcZAgM7p-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/dkwcZAgM7p-386.webp 386w, /blog/dkwcZAgM7p-772.webp 772w, /blog/dkwcZAgM7p-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Building a responsive image</h3><p class="text-step-0 font-serif">There are quite a few articles on the web that deal with responsive logos. The most popular example might be the&nbsp; &nbsp;that shows some very well known logos in different variations for &nbsp;different screen sizes. When I first saw this example, I thought...</p></div><a class="blog-article__link" href="/blog/building-a-responsive-image/"><span class="sr-only">Read more about Building a responsive image</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2018-05-29"><span class="sr-only">published on&nbsp;</span>May 29, 2018</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nils-binder">Nils Binder</a></p></footer></div></article><article class="blog-article" aria-label="First Facebook Developer Circle Ruhr"><img class="blog-article__image" alt="" src="/blog/_Eo2ywpaTv-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/_Eo2ywpaTv-386.webp 386w, /blog/_Eo2ywpaTv-772.webp 772w, /blog/_Eo2ywpaTv-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">First Facebook Developer Circle Ruhr</h3><p class="text-step-0 font-serif">As we are determined to strengthen our local tech community with events like the RuhrJS conference and PottJS Meetups, we are always happy to embrace new chances to do so. We took the opportunity to create a new forum for people to share their...</p></div><a class="blog-article__link" href="/blog/first-facebook-developer-circle-ruhr/"><span class="sr-only">Read more about First Facebook Developer Circle Ruhr</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2018-02-06"><span class="sr-only">published on&nbsp;</span>Feb 6, 2018</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/melina-jacob">Melina Jacob</a></p></footer></div></article><article class="blog-article" aria-label="#tragmit - a Rails platform to give children a brighter future"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">#tragmit - a Rails platform to give children a brighter future</h3><p class="text-step-0 font-serif">Our coders and tinkerers recently launched the new website for our client’s project&nbsp; &nbsp;(engl. #backit). The project aims to collect donations to support children with convicted parents in countries of extreme poverty. The team of Hoffnungsträger...</p></div><a class="blog-article__link" href="/blog/tragmit-a-rails-platform-to-give-children-a-brighter-future/"><span class="sr-only">Read more about #tragmit - a Rails platform to give children a brighter future</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2018-01-18"><span class="sr-only">published on&nbsp;</span>Jan 18, 2018</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/melina-jacob">Melina Jacob</a></p></footer></div></article><article class="blog-article" aria-label="Kickoff of the Facebook Developer Circle Ruhr"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Kickoff of the Facebook Developer Circle Ruhr</h3><p class="text-step-0 font-serif">9elements strives to bring local developers together. We successfully host the user group PottJS and the international conference RuhrJS in the Ruhr Area, but development is not all about JavaScript, right? First things first: Facebook Developer...</p></div><a class="blog-article__link" href="/blog/kickoff-of-the-facebook-developer-circle-ruhr/"><span class="sr-only">Read more about Kickoff of the Facebook Developer Circle Ruhr</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2017-12-22"><span class="sr-only">published on&nbsp;</span>Dec 22, 2017</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/madeleine-neumann">Madeleine Neumann</a></p></footer></div></article><article class="blog-article" aria-label="Streaming downloads in Elixir: a protocol love story"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Streaming downloads in Elixir: a protocol love story</h3><p class="text-step-0 font-serif">A tale about language features and HTTP streaming This might sound familiar to you: You want to measure how well a product is doing and need some kind of reporting mechanism that provides you with insightful KPIs. Surely you don’t want to log into a...</p></div><a class="blog-article__link" href="/blog/streaming-downloads-in-elixir-a-protocol-love-story/"><span class="sr-only">Read more about Streaming downloads in Elixir: a protocol love story</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2017-11-15"><span class="sr-only">published on&nbsp;</span>Nov 15, 2017</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/thomas-stratmann">Thomas Stratmann</a></p></footer></div></article><article class="blog-article" aria-label="Elixir child specifications became a lot easier"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Elixir child specifications became a lot easier</h3><p class="text-step-0 font-serif">and keep concerns separate along the way The official&nbsp; &nbsp;was dominantly about improvements for debugging. Here I want to talk about a seemingly small change to how supervisor children can be specified. This change demonstrates that the Elixir...</p></div><a class="blog-article__link" href="/blog/elixir-child-specifications-became-a-lot-easier/"><span class="sr-only">Read more about Elixir child specifications became a lot easier</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2017-11-02"><span class="sr-only">published on&nbsp;</span>Nov 2, 2017</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/thomas-stratmann">Thomas Stratmann</a></p></footer></div></article><article class="blog-article" aria-label="Elixir &amp; Phoenix, mp4 and the Safari"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Elixir &amp; Phoenix, mp4 and the Safari</h3><p class="text-step-0 font-serif">Learn how to serve mp4 files to the Safari browser. With&nbsp; &nbsp;we have a client where we heavily rely on Elixir and Phoenix. Welect is a service you can use to access premium content by paying with your attention by watching ads you choose by yourself....</p></div><a class="blog-article__link" href="/blog/elixir-and-phoenix-mp4-and-the-safari/"><span class="sr-only">Read more about Elixir &amp; Phoenix, mp4 and the Safari</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2017-06-12"><span class="sr-only">published on&nbsp;</span>Jun 12, 2017</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/daniel-hoelzgen">Daniel Hoelzgen</a></p></footer></div></article><article class="blog-article" aria-label="Ethereum - The world computer"><img class="blog-article__image" alt="" src="/blog/HwRFONFQgJ-38
266.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/HwRFONFQgJ-386.webp 386w, /blog/HwRFONFQgJ-772.webp 772w, /blog/HwRFONFQgJ-1544.webp 1544w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Ethereum - The world computer</h3><p class="text-step-0 font-serif">A lot of people might have heard of Ethereum, the new blockchain technology coming up as a successor to the bitcoin cryptocurrency. Although widely celebrated as the next big thing, the reaction to being stressed by the DAO hacker(s) recently and an...</p></div><a class="blog-article__link" href="/blog/ethereum-the-world-computer/"><span class="sr-only">Read more about Ethereum - The world computer</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2016-11-25"><span class="sr-only">published on&nbsp;</span>Nov 25, 2016</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/jacob-david">Jacob David</a></p></footer></div></article><article class="blog-article" aria-label="Why we bet on Elixir and Phoenix"><img class="blog-article__image" alt="" src="/blog/jnnP2rUFtC-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/jnnP2rUFtC-386.webp 386w, /blog/jnnP2rUFtC-772.webp 772w, /blog/jnnP2rUFtC-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Why we bet on Elixir and Phoenix</h3><p class="text-step-0 font-serif">Elixir and Phoenix are promising to become a productive foundation for creating backend applications. While the software ecosystem is not yet on par with Rails, we think that this technology is on a very good trajectory. It is already superior in a...</p></div><a class="blog-article__link" href="/blog/why-we-bet-on-elixir-and-phoenix/"><span class="sr-only">Read more about Why we bet on Elixir and Phoenix</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2016-10-26"><span class="sr-only">published on&nbsp;</span>Oct 26, 2016</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/thomas-stratmann">Thomas Stratmann</a></p></footer></div></article><article class="blog-article" aria-label="Babel, Rails 5 and Sprockets 4 with Sprockets Commoner"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Babel, Rails 5 and Sprockets 4 with Sprockets Commoner</h3><p class="text-step-0 font-serif">For some of our Rails projects we have replaced the Rails Asset Pipeline with Webpack and we're quite happy with it. Webpack has so many nifty features and combining it with Babel we can write next generation JavaScript today. But sometimes,...</p></div><a class="blog-article__link" href="/blog/babel-rails-5-and-sprockets-4-with-sprockets-commoner/"><span class="sr-only">Read more about Babel, Rails 5 and Sprockets 4 with Sprockets Commoner</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2016-08-09"><span class="sr-only">published on&nbsp;</span>Aug 9, 2016</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Retrospect RuhrJS"><img class="blog-article__image" alt="" src="/blog/O2YiQdI8BJ-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/O2YiQdI8BJ-386.webp 386w, /blog/O2YiQdI8BJ-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Retrospect RuhrJS</h3><p class="text-step-0 font-serif">Let’s wind back the clock for one and a half years. I just started my new job at&nbsp; &nbsp;and at that time I would have never give thought to organizing a conference. But soon after I became a part of 9elements I took over the responsibility for the...</p></div><a class="blog-article__link" href="/blog/retrospect-ruhrjs/"><span class="sr-only">Read more about Retrospect RuhrJS</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2016-08-03"><span class="sr-only">published on&nbsp;</span>Aug 3, 2016</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/madeleine-neumann">Madeleine Neumann</a></p></footer></div></article><article class="blog-article" aria-label="Install &quot;Let’s Encrypt&quot; with NGINX and Phusion Passenger"><img class="blog-article__image" alt="" src="/blog/pA0_AAq_cf-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/pA0_AAq_cf-386.webp 386w, /blog/pA0_AAq_cf-772.webp 772w, /blog/pA0_AAq_cf-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Install "Let’s Encrypt" with NGINX and Phusion Passenger</h3><p class="text-step-0 font-serif">We all need more SSL! But installing SSL certificates is a big PITA.&nbsp; &nbsp;is a new certificate authority (CA) offering free and automated SSL/TLS certificates. Certificates issued by Let’s Encrypt are trusted by most browsers in production today...</p></div><a class="blog-article__link" href="/blog/install-let-s-encrypt-with-nginx-and-phusion-passenger/"><span class="sr-only">Read more about Install "Let’s Encrypt" with NGINX and Phusion Passenger</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2016-06-14"><span class="sr-only">published on&nbsp;</span>Jun 14, 2016</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Changing versions of Elixir and Erlang"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Changing versions of Elixir and Erlang</h3><p class="text-step-0 font-serif">Version managers have been around in the ruby ecosystem for quite some time. You switch (cd) to a project using a different ruby version, and voilà, you are magically using the desired version of ruby. When running ruby, rails or any other binary...</p></div><a class="blog-article__link" href="/blog/changing-versions-of-elixir-and-erlang/"><span class="sr-only">Read more about Changing versions of Elixir and Erlang</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2016-01-19"><span class="sr-only">published on&nbsp;</span>Jan 19, 2016</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/thomas-stratmann">Thomas Stratmann</a></p></footer></div></article><article class="blog-article" aria-label="Quit your fucking Job! - Why we need to rethink German Company Culture"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Quit your fucking Job! - Why we need to rethink German Company Culture</h3><p class="text-step-0 font-serif">Yeah, just quit it. Why? Because, most probably you can get a much better one! Let me explain this bold statement in some detail. Working as a software engineer, I had the chance to take a peek into many different tech companies in Germany. In my...</p></div><a class="blog-article__link" href="/blog/quit-your-fucking-job-why-we-need-to-rethink-german-company-culture/"><span class="sr-only">Read more about Quit your fucking Job! - Why we need to rethink German Company Culture</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2015-12-08"><span class="sr-only">published on&nbsp;</span>Dec 8, 2015</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/wojtek-gorecki">Wojtek Gorecki</a></p></footer></div></article><article class="blog-article" aria-label="An Ember.js application with a Rails API backend"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">An Ember.js application with a Rails API backend</h3><p class="text-step-0 font-serif">Alright, fellow fullstack developers. In the last few weeks I had the chance to dive into Ember.js - and I would like to give you a complete example of a blog application with Ember CLI for the frontend and Rails as backend server. This article...</p></div><a class="blog-article__link" href="/blog/an-ember-js-application-with-a-rails-api-backend/"><span class="sr-only">Read more about An Ember.js application with a Rails API backend</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2015-09-10"><span class="sr-only">published on&nbsp;</span>Sep 10, 2015</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/wojtek-gorecki">Wojtek Gorecki</a></p></footer></div></article><article class="blog-article" aria-label="Project launched: WEF Inclusive Growth Report 2015"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Project launched: WEF Inclusive Growth Report 2015</h3><p class="text-step-0 font-serif">This week, the World Economic Forum launched&nbsp; &nbsp;with combined forces of 9elements and the&nbsp; &nbsp; &nbsp; &nbsp; . The report, which covers 112 economies, seeks to improve our understanding of how countries can use a diverse spectrum of policy incentives and...</p></div><a class="blog-article__link" href="/blog/project-launched-wef-inclusive-growth-report-2015/"><span class="sr-only">Read more about Project launched: WEF Inclusive Growth Report 2015</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2015-09-08"><span class="sr-only">published on&nbsp;</span>Sep 8, 2015</time><p class="author blog-meta__name"><span aria-hidden="true">By </span>
26<a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="The ethereal Frontier"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">The ethereal Frontier</h3><p class="text-step-0 font-serif">Some of you may have heard of the new big thing - You may have heard that&nbsp; &nbsp;co-founder Vitalik Buterin was&nbsp; &nbsp;within the Peter Thiel fellowship programme. That Ethereum which pre-sold it’s cryptocurrency, the Ether, last year gaining $18 million in...</p></div><a class="blog-article__link" href="/blog/the-ethereal-frontier/"><span class="sr-only">Read more about The ethereal Frontier</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2015-08-14"><span class="sr-only">published on&nbsp;</span>Aug 14, 2015</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/nicolas-luck">Nicolas Luck</a></p></footer></div></article><article class="blog-article" aria-label="German Valley Week Review"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">German Valley Week Review</h3><p class="text-step-0 font-serif">I just returned from my German Valley Week trip to San Francisco and the Silicon Valley.&nbsp; &nbsp;is an organized trip where entrepeneurs, investors and politicians from Germany visit disrupting startups ranging from new ones like Uber or Stripe to...</p></div><a class="blog-article__link" href="/blog/german-valley-week-review/"><span class="sr-only">Read more about German Valley Week Review</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2015-06-12"><span class="sr-only">published on&nbsp;</span>Jun 12, 2015</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Go in Production"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Go in Production</h3><p class="text-step-0 font-serif">Some of our&nbsp; &nbsp;are gaining&nbsp; &nbsp;lately. That’s why we need to scale some parts of the infrastructure. 9elements started the search for a language that gives us more performance but that’s also expressive and easy to write. Since Go is used by some high...</p></div><a class="blog-article__link" href="/blog/go-in-production/"><span class="sr-only">Read more about Go in Production</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2015-03-06"><span class="sr-only">published on&nbsp;</span>Mar 6, 2015</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Using qt-pods to share your code"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Using qt-pods to share your code</h3><p class="text-step-0 font-serif">Adding dependencies to your project can often be very painful, because technically there are many ways to include foreign code. In very simple cases you might just copy over code, in most cases you are going to link against a library and sometimes...</p></div><a class="blog-article__link" href="/blog/using-qt-pods-to-share-your-code/"><span class="sr-only">Read more about Using qt-pods to share your code</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2015-02-09"><span class="sr-only">published on&nbsp;</span>Feb 9, 2015</time><p class="author blog-meta__name"><span aria-hidden="true">By </span>
26<a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="New project: OECD Data Portal"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">New project: OECD Data Portal</h3><p class="text-step-0 font-serif">In July, we have launched a new client site, the&nbsp; . The OECD is an international organization that analyses national economies to coordinate the policies of its member states. The OECD conducts well-known studies like&nbsp; &nbsp;and publishes reports and...</p></div><a class="blog-article__link" href="/blog/new-project-oecd-data-portal/"><span class="sr-only">Read more about New project: OECD Data Portal</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2014-09-08"><span class="sr-only">published on&nbsp;</span>Sep 8, 2014</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="Our First Experience with Swift"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">
26Our First Experience with Swift</h3><p class="text-step-0 font-serif">Every other month or so we like to do a small Hackathon at 9elements. Last week, after months of hard client work, we finally had the chance to have one again. During the two-day long event, several teams gather to explore new technologies,...</p></div><a class="blog-article__link" href="/blog/our-first-experience-with-swift/"><span class="sr-only">Read more about Our First Experience with Swift</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2014-06-07"><span class="sr-only">published on&nbsp;</span>Jun 7, 2014</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/manuel-binna">Manuel Binna</a></p></footer></div></article><article class="blog-article" aria-label="External bundles with browserify and gulp"><img class="blog-article__image" alt="Comic showing Batman and Superman with a grim face looking into the camera. On Superman's Chest is a Gulp Logo while Batmans chest shows a witches hat" src="/blog/7NAL3c31Ac-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/7NAL3c31Ac-386.webp 386w, /blog/7NAL3c31Ac-772.webp 772w, /blog/7NAL3c31Ac-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">External bundles with browserify and gulp</h3><p class="text-step-0 font-serif">&nbsp;is a nifty little tool that was originally invented to let Node.js modules run in your browser. A nice side effect of this is that you can use browserify to split up your application’s JavaScript into a well organized modules and then smash them...</p></div><a class="blog-article__link" href="/blog/external-bundles-with-browserify-and-gulp/"><span class="sr-only">Read more about External bundles with browserify and gulp</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2014-06-04"><span class="sr-only">published on&nbsp;</span>Jun 4, 2014</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Visual storytelling using WebGL"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Visual storytelling using WebGL</h3><p class="text-step-0 font-serif">Recently we were working on a redesign of the&nbsp; &nbsp;website. Uformit, an online marketplace for personalized 3D design, was already presented at the&nbsp; &nbsp;in London and New York, but never announced to the public. It features a WebGL powered product...</p></div><a class="blog-article__link" href="/blog/visual-storytelling-using-webgl/"><span class="sr-only">Read more about Visual storytelling using WebGL</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2014-04-22"><span class="sr-only">published on&nbsp;</span>Apr 22, 2014</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/daniel-hoelzgen">Daniel Hoelzgen</a></p></footer></div></article><article class="blog-article" aria-label="Stripe vs. Paymill"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Stripe vs. Paymill</h3><p class="text-step-0 font-serif">As you might know 9elements is specialized in&nbsp; &nbsp;digital&nbsp; . One of the tasks that comes with almost every product is payments - after all you want to earn some money. When it comes to payments there are plenty of options out there and choosing the...</p></div><a class="blog-article__link" href="/blog/stripe-vs-paymill/"><span class="sr-only">Read more about Stripe vs. Paymill</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2014-02-28"><span class="sr-only">published on&nbsp;</span>Feb 28, 2014</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Signing Configuration Profiles with OpenSSL In Pure Ruby"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Signing Configuration Profiles with OpenSSL In Pure Ruby</h3><p class="text-step-0 font-serif">In one of our recent projects, we needed to implement the ability to sign automatically generated configuration profiles for iOS and OS X&nbsp; &nbsp;in the backend. If a configuration profile is signed and iOS / OS X successfully verifies its signature, the...</p></div><a class="blog-article__link" href="/blog/signing-configuration-profiles-with-openssl-in-pure-ruby/"><span class="sr-only">Read more about Signing Configuration Profiles with OpenSSL In Pure Ruby</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2013-11-21"><span class="sr-only">published on&nbsp;</span>Nov 21, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/manuel-binna">Manuel Binna</a></p></footer></div></article><article class="blog-article" aria-label="Webbzeug - procedural texture editor for your browser"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Webbzeug - procedural texture editor for your browser</h3><p class="text-step-0 font-serif">One night, shortly after we moved to our new office, Sascha and me where watching some demos on YouTube. You know those 64K executables you run, and think „how the heck they put all that content into 64K“ ?! Well one major idea is, procedural...</p></div><a class="blog-article__link" href="/blog/webbzeug-procedural-texture-editor-for-your-browser/"><span class="sr-only">Read more about Webbzeug - procedural texture editor for your browser</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2013-10-18"><span class="sr-only">published on&nbsp;</span>Oct 18, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/carsten-przyluczky">Carsten Przyluczky</a></p></footer></div></article><article class="blog-article" aria-label="Why JavaScript web applications should embrace traditional URLs"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Why JavaScript web applications should embrace traditional URLs</h3><p class="text-step-0 font-serif">In this article, I will first take a high-level look at modern frontend architectures: In a time where web apps easily surpass 1 MB of JavaScript, what should we try to achieve? Second, based on these considerations, I’m going to argue that...</p></div><a class="blog-article__link" href="/blog/why-javascript-web-applications-should-embrace-traditional-urls/"><span class="sr-only">Read more about Why JavaScript web applications should embrace traditional URLs</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing">
26<time datetime="2013-07-16"><span class="sr-only">published on&nbsp;</span>Jul 16, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="How we built the data visualization tool GED VIZ"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">How we built the data visualization tool GED VIZ</h3><p class="text-step-0 font-serif">Last week we released&nbsp; , a tool to create data visualizations for the web. It’s free to use and also&nbsp; ! See the&nbsp; &nbsp;for general information. GED VIZ is a large JavaScript (“HTML5”) application that runs in modern web browsers. It’s made using open...</p></div><a class="blog-article__link" href="/blog/how-we-built-the-data-visualization-tool-ged-viz/"><span class="sr-only">Read more about How we built the data visualization tool GED VIZ</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2013-07-10"><span class="sr-only">published on&nbsp;</span>Jul 10, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="GED VIZ: An HTML5 data visualization tool"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">GED VIZ: An HTML5 data visualization tool</h3><p class="text-step-0 font-serif">Good visualisations are more than just fancy graphics. They are a lot about storytelling, shedding light on important issues, and at the same time inspiring us to raise new questions. Building such visualisations can be a very time-consuming effort,...</p></div><a class="blog-article__link" href="/blog/ged-viz-an-html5-data-visualization-tool/"><span class="sr-only">Read more about GED VIZ: An HTML5 data visualization tool</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2013-07-09"><span class="sr-only">published on&nbsp;</span>Jul 9, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="JavaScript MVC frameworks: A Comparison of Marionette and Chaplin"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">JavaScript MVC frameworks: A Comparison of Marionette and Chaplin</h3><p class="text-step-0 font-serif">JavaScript application development is a hot topic and people are wondering which framework they should pick. In this post I’m going to compare two of them. &nbsp;and&nbsp; &nbsp;are frameworks on top of the popular&nbsp; &nbsp;library. Both seek to ease the development...</p></div><a class="blog-article__link" href="/blog/javascript-mvc-frameworks-a-comparison-of-marionette-and-chaplin/"><span class="sr-only">Read more about JavaScript MVC frameworks: A Comparison of Marionette and Chaplin</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2013-04-08"><span class="sr-only">published on&nbsp;</span>Apr 8, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="Customizing Core Data Migrations"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Customizing Core Data Migrations</h3><p class="text-step-0 font-serif">If you are using Core Data, need to change your database scheme but Core Data cannot infer the changes on its own. And you don’t want to dig into the&nbsp; , you have come to the right place. Custom migration is quite a powerful tool and you can perform...</p></div><a class="blog-article__link" href="/blog/customizing-core-data-migrations/"><span class="sr-only">Read more about Customizing Core Data Migrations</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2013-01-22"><span class="sr-only">published on&nbsp;</span>Jan 22, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/christopher-gretzki">Christopher Gretzki</a></p></footer></div></article><article class="blog-article" aria-label="Continuous Integration of iOS Projects using Jenkins, CocoaPods, and Kiwi"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Continuous Integration of iOS Projects using Jenkins, CocoaPods, and Kiwi</h3><p class="text-step-0 font-serif">This article explains the set up of a Continuous Integration (CI) environment for Xcode projects that use&nbsp; &nbsp;to implement unit tests. It shows how to configure&nbsp; &nbsp;to set up the correct Ruby environment for&nbsp; , how to install all necessary gems and...</p></div><a class="blog-article__link" href="/blog/continuous-integration-of-ios-projects-using-jenkins-cocoapods-and-kiwi/"><span class="sr-only">
26Read more about Continuous Integration of iOS Projects using Jenkins, CocoaPods, and Kiwi</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2013-01-16"><span class="sr-only">published on&nbsp;</span>Jan 16, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/manuel-binna">Manuel Binna</a></p></footer></div></article><article class="blog-article" aria-label="CocoaPods Best Practices"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">CocoaPods Best Practices</h3><p class="text-step-0 font-serif">&nbsp;is a relatively new way to manage Xcode library dependencies like the&nbsp; &nbsp;et al. If you are coming from the Ruby world you know this kind of workflow from&nbsp; . CocoaPods can be easily installed as a gem via ‘gem install cocoapods’ but this is where...</p></div><a class="blog-article__link" href="/blog/cocoapods-best-practices/"><span class="sr-only">Read more about CocoaPods Best Practices</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2013-01-09"><span class="sr-only">published on&nbsp;</span>Jan 9, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="A Box of Javascript Chocolates (part 1)"><img class="blog-article__image" alt="" src="/blog/JBZC4gmRIg-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/JBZC4gmRIg-386.webp 386w, /blog/JBZC4gmRIg-772.webp 772w, /blog/JBZC4gmRIg-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">A Box of Javascript Chocolates (part 1)</h3><p class="text-step-0 font-serif">There are a lot of awesome jQuery plugins and Javascript libraries out there, and with every new one it gets more difficult to keep track. Some might save you hours of work, others just add that teaspoon of UI love, that&nbsp; , that separates a good UI...</p></div><a class="blog-article__link" href="/blog/a-box-of-javascript-chocolates-part-1/"><span class="sr-only">Read more about A Box of Javascript Chocolates (part 1)</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2013-01-07"><span class="sr-only">published on&nbsp;</span>Jan 7, 2013</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/rin-raeuber">Rin Raeuber</a></p></footer></div></article><article class="blog-article" aria-label="Help us to create the best tool for publishing anything online."><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Help us to create the best tool for publishing anything online.</h3><p class="text-step-0 font-serif">Building websites today is usually a totally bloated and inefficient process: First, there is a designer who creates layouts and designs in photoshop. After that, the designs are iterated together with clients or teams. Making changes to the overall...</p></div><a class="blog-article__link" href="/blog/help-us-to-create-the-best-tool-for-publishing-anything-online/"><span class="sr-only">Read more about Help us to create the best tool for publishing anything online.</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2012-12-30"><span class="sr-only">published on&nbsp;</span>Dec 30, 2012</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/eray-basar">Eray Basar</a></p></footer></div></article><article class="blog-article" aria-label="Falk Mobile relaunch, the HTML5 way"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Falk Mobile relaunch, the HTML5 way</h3><p class="text-step-0 font-serif">No native code should be used for this application. The app is realized as a single-page web application using the popular JavaScript library&nbsp; &nbsp;with&nbsp; &nbsp;for the templates. The map component was built with the powerful&nbsp; . The backend was created...</p></div><a class="blog-article__link" href="/blog/falk-mobile-relaunch-the-html5-way/"><span class="sr-only">Read more about Falk Mobile relaunch, the HTML5 way</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2012-05-11"><span class="sr-only">published on&nbsp;</span>May 11, 2012</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/wojtek-gorecki">Wojtek Gorecki</a></p></footer></div></article><article class="blog-article" aria-label="Chaplin – an Application Architecture based on Backbone.js"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Chaplin – an Application Architecture based on Backbone.js</h3><p class="text-step-0 font-serif">Today we’re releasing the application architecture of moviepilot.com into the public: Meet Chaplin! In April 2011, Moviepilot, a successful Berlin-based startup, asked us to help building their new product&nbsp; . After having established an...</p></div><a class="blog-article__link" href="/blog/chaplin-an-application-architecture-based-on-backbone-js/"><span class="sr-only">Read more about Chaplin – an Application Architecture based on Backbone.js</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2012-02-24"><span class="sr-only">published on&nbsp;</span>Feb 24, 2012</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/mathias-schaefer">Mathias Schäfer</a></p></footer></div></article><article class="blog-article" aria-label="The digital carpenter."><img class="blog-article__image" alt="" src="/blog/mD6hHruz2Z-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="1544" height="525" srcset="/blog/mD6hHruz2Z-386.webp 386w, /blog/mD6hHruz2Z-772.webp 772w, /blog/mD6hHruz2Z-1544.webp 1544
26w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">The digital carpenter.</h3><p class="text-step-0 font-serif">Two years ago, Martin, author of the following post, was about to become a carpenter. Instead, he became our apprentice and a fellow webdeveloper. Needless to say how drastically this changed his perspectives. It was not an easy decision to take...</p></div><a class="blog-article__link" href="/blog/the-digital-carpenter/"><span class="sr-only">Read more about The digital carpenter.</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2011-10-21"><span class="sr-only">published on&nbsp;</span>Oct 21, 2011</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/martin-gauer">Martin Gauer</a></p></footer></div></article><article class="blog-article" aria-label="Live is beautiful."><img class="blog-article__image" alt="" src="/blog/pekQDT_WcR-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/pekQDT_WcR-386.webp 386w, /blog/pekQDT_WcR-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Live is beautiful.</h3><p class="text-step-0 font-serif">At Nodecamp 2011, we wanted to present a live tracker built with Node.js. After seeing the popular&nbsp; , I was wondering why not create something like that with live data. The appeal of watching the temporal dynamics within such a visualisation is...</p></div><a class="blog-article__link" href="/blog/live-is-beautiful/"><span class="sr-only">Read more about Live is beautiful.</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2011-07-14"><span class="sr-only">published on&nbsp;</span>Jul 14, 2011</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/eray-basar">Eray Basar</a></p></footer></div></article><article class="blog-article" aria-label="Next decade: The big bang technology."><img class="blog-article__image" alt="8 men sitting at a table typing on their laptops" src="/blog/c-lcvWF9iZ-386.webp" sizes="100vw, (min-width: 42.5em) 50vw, (min-width: 100em) 772px" loading="lazy" decoding="async" width="772" height="262" srcset="/blog/c-lcvWF9iZ-386.webp 386w, /blog/c-lcvWF9iZ-772.webp 772w"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Next decade: The big bang technology.</h3><p class="text-step-0 font-serif">Most of you might agree that the pace of web-evolution was impressively intense last year. (Yeah, &nbsp; , we just haven't found a new name for it yet.) From a business perspective, 2010 was also pretty good, with many services empowering smaller...</p></div><a class="blog-article__link" href="/blog/next-decade-the-big-bang-technology/"><span class="sr-only">Read more about Next decade: The big bang technology.</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2011-01-12"><span class="sr-only">published on&nbsp;</span>Jan 12, 2011</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Facebook's watching you, brother."><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Facebook's watching you, brother.</h3><p class="text-step-0 font-serif">There is a potential side-effect of the new facebook "like" button, which has currently not reached public awareness, but it probably should. It starts when you leave the facebook website. I usually don’t log out, my friends don’t log out, and in...</p></div><a class="blog-article__link" href="/blog/facebooks-watching-you-brother/"><span class="sr-only">
26Read more about Facebook's watching you, brother.</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2010-04-23"><span class="sr-only">published on&nbsp;</span>Apr 23, 2010</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/eray-basar">Eray Basar</a></p></footer></div></article><article class="blog-article" aria-label="The most epic tech-battles in 2010"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">The most epic tech-battles in 2010</h3><p class="text-step-0 font-serif">So we've seen a couple of 2010 lists lately, but from a technical perspective, we think they were missing some important stuff. The following list is a snapshot of heated-up discussions in our company about things that could shake up the web...</p></div><a class="blog-article__link" href="/blog/the-most-epic-tech-battles-in-2010/"><span class="sr-only">Read more about The most epic tech-battles in 2010</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2010-01-11"><span class="sr-only">published on&nbsp;</span>Jan 11, 2010</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/eray-basar">Eray Basar</a></p></footer></div></article><article class="blog-article" aria-label="Make OGG Video work with Rails"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Make OGG Video work with Rails</h3><p class="text-step-0 font-serif">We are currently working on some interesting project where we have the chance to distribute some video footage with the new&nbsp; &nbsp;<video>&nbsp;tag instead of “ye olde” flash player. Since there is a&nbsp; &nbsp;
26between the browser vendors you have to support&nbsp; &nbsp;for...</video></p></div><a class="blog-article__link" href="/blog/make-ogg-video-work-with-rails/"><span class="sr-only">Read more about Make OGG Video work with Rails</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2009-11-09"><span class="sr-only">published on&nbsp;</span>Nov 9, 2009</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="HTML5 Canvas Experiment"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">HTML5 Canvas Experiment</h3><p class="text-step-0 font-serif">HTML5 is getting a lot of love lately. With the arrival of&nbsp; ,&nbsp; &nbsp;and the new betas of&nbsp; &nbsp;and&nbsp; , browsers support some great new features including canvas and the new audio/video tags. Most interesting: modern mobile devices like the iPhone or...</p></div><a class="blog-article__link" href="/blog/html5-canvas-experiment/"><span class="sr-only">Read more about HTML5 Canvas Experiment</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2009-08-03"><span class="sr-only">published on&nbsp;</span>Aug 3, 2009</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Integrating Captchas with Django"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Integrating Captchas with Django</h3><p class="text-step-0 font-serif">Why do I need CAPTCHAs? As soon as your web project becomes bigger you will notice that bots are trying to spam your blog and to fake user inputs. When I created a blog with Django for a website with about 60.000 unique users per day I had to delete...</p></div><a class="blog-article__link" href="/blog/integrating-captchas-with-django/"><span class="sr-only">Read more about Integrating Captchas with Django</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2009-08-03"><span class="sr-only">published on&nbsp;</span>Aug 3, 2009</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/eray-basar">Eray Basar</a></p></footer></div></article><article class="blog-article" aria-label="Traits for ActiveRecords next TopModel"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Traits for ActiveRecords next TopModel</h3><p class="text-step-0 font-serif">In this post, two possible implementations of the ActiveRecord design pattern will be discussed. With the raise of Ruby on Rails, ActiveRecord became very popular to the IT crowd. by Sebastian To put the concepts of this pattern in a nutshell:...</p></div><a class="blog-article__link" href="/blog/traits-for-activerecords-next-topmodel/"><span class="sr-only">Read more about Traits for ActiveRecords next TopModel</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2008-05-08"><span class="sr-only">published on&nbsp;</span>May 8, 2008</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article><article class="blog-article" aria-label="Pimp my Firefox - The right way!"><div class="blog-article__content"><div class="stack-xs-s" style="margin-top: var(--space-xs-s);"><h3 class="text-step-3">Pimp my Firefox - The right way!</h3><p class="text-step-0 font-serif">&nbsp;really makes you more productive when developing web applications or websites. Not because of its good browser engine - but be
26cause of the countless add-ons. I would like to present some of my favorite plugins which are a must have for...</p></div><a class="blog-article__link" href="/blog/pimp-my-firefox-the-right-way/"><span class="sr-only">Read more about Pimp my Firefox - The right way!</span></a><footer class="blog-meta--preview | text-step--1 weight-bold color-gray-light uppercase letter-spacing"><time datetime="2008-02-18"><span class="sr-only">published on&nbsp;</span>Feb 18, 2008</time><p class="author blog-meta__name"><span aria-hidden="true">By </span><a rel="author" href="/blog/author/sebastian-deutsch">Sebastian Deutsch</a></p></footer></div></article></div></div><div class="forward-box forward-box--inverted"><div class="forward-box__headline"><h3>Be part of our <strong>technology enthusiastic</strong> family</h3><a class="button" href="/career">Open Positions</a></div><div class="forward-box__decoration"><img alt="" class="forward-box__decoration-icon" src="/assets/images/cta-icons/flag.svg"><div class="forward-box__decoration-circle"><span class="letter-wrap" style="transform: rotate(0.00deg)"><span class="letter">W</span> </span><span class="letter-wrap" style="transform: rotate(25.71deg)"><span class="letter">e</span> </span><span class="letter-wrap" style="transform: rotate(51.43deg)"><span class="letter"></span> </span><span class="letter-wrap" style="transform: rotate(77.14deg)"><span class="letter">a</span> </span><span class="letter-wrap" style="transform: rotate(102.86deg)"><span class="letter">r</span> </span><span class="letter-wrap" style="transform: rotate(128.57deg)"><span class="letter">e</span> </span><span class="letter-wrap" style="transform: rotate(154.29deg)"><span class="letter"></span> </span><span class="letter-wrap" style="transform: rotate(180.00deg)"><span class="letter">H</span> </span><span class="letter-wrap" style="transform: rotate(205.71deg)"><span class="letter">i</span> </span><span class="letter-wrap" style="transform: rotate(231.43deg)"><span class="letter">r</span> </span><span class="letter-wrap" style="transform: rotate(257.14deg)"><span class="letter">i</span> </span><span class="letter-wrap" style="transform: rotate(282.86deg)"><span class="letter">n</span> </span><span class="letter-wrap" style="transform: rotate(308.57deg)"><span class="letter">g</span></span></div><span class="sr-only">We are Hiring</span></div></div>
26<script src="/assets/js/dark-light-switch.js?hash=9e4adff4" type="module" defer=""></script>
26</main><footer class="bg-black color-white" id="footer"><div class="wrapper"><div class="site-foot"><div class="site-foot__brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 41"><g id="9elements-logo" fill="none" fill-rule="evenodd"><path id="Imported-Layers" fill="#FFF" fill-rule="nonzero" d="M0,41 L40.6334035,41 L40.6334035,0 L0,0 L0,41 Z M30.3318242,28.973041 C30.1688402,29.0358319 29.0462258,29.0801843 29.8408965,29.1708823 C30.3397265,29.2271948 29.5366597,29.2680588 29.5391291,29.4499532 C29.7035948,29.4449698 29.9525159,29.763908 30.0167217,29.7539411 C30.0256118,29.8017819 29.5233246,29.9363339 29.6295112,29.9522808 C30.0567269,30.0130784 29.2684768,30.0414838 29.3203354,30.1446404 C29.4685027,30.4386615 29.2477334,30.3389934 29.5253002,30.4735454 C29.6734675,30.5458048 29.6295112,30.8094272 29.5322146,30.8313542 C29.4052846,30.8602579 29.3667611,30.9295273 29.2506967,30.9394941 C29.2343983,31.0466374 29.1380896,31.0959732 29.0106657,31.1144118 C28.7350745,31.2180667 28.4258987,31.3361735 28.1275885,31.3670706 C27.9354649,31.3860076 27.9438611,31.4049445 27.7532191,31.3675689 C27.5482543,31.3949777 27.2356213,31.4124196 27.0311504,31.3919877 C26.8617458,31.4338483 24.3320359,31.5833506 24.1206505,31.5544468 C23.9522337,31.5908257 22.9402509,31.6262079 22.7323228,31.5958091 C22.522913,31.636673 20.7666365,31.6840154 20.5848846,31.6625868 C20.3715237,31.6999623 20.0425922,31.7159092 19.8287374,31.6865071 C19.6153765,31.7288661 19.2854573,31.7368395 19.0701208,31.7114242 C18.8612049,31.7507931 14.2201108,31.6391647 13.9939087,31.6042809 C13.7751149,31.6316896 12.6900363,31.5943141 12.474206,31.5574368 C12.2939357,31.5848456 12.0222957,31.5659086 11.8420254,31.5380015 C11.6316278,31.567902 11.3041781,31.5514567 11.0997072,31.4936492 C10.9821611,31.4607587 10.9046202,31.4782006 10.8547372,31.3605922 C10.8127565,31.2629174 10.8236221,31.2031165 10.7465751,31.1617542 C10.6552053,31.1134151 10.6497725,30.9036136 10.7095333,30.8253741 C10.6092734,30.6105891 10.7490446,30.208428 10.6685403,29.9119152 C10.6206329,29.7340075 10.7149661,29.7439743 10.8004092,29.5820135 C10.6996555,29.5889903 10.6779242,29.4085909 10.6897776,29.3742054 C10.7549712,29.1868292 10.6591564,29.0956328 10.7984337,28.9361637 C10.8819012,28.841479 10.8438716,28.7632395 10.9935206,28.7632395 C11.1016828,28.7632395 11.23207,28.7637378 11.3382566,28.7806814 C11.5693976,28.7627411 11.8691894,28.774203 12.0988488,28.8100835 C12.5685391,28.7776913 14.6818989,28.8554325 15.1382542,28.9286886 C15.57436,28.8972932 16.0964028,28.9286886 16.5315208,28.9810144 C16.9982479,28.9575924 24.8338292,28.8967948 25.2595633,28.8758645 C25.7267842,28.8539375 26.253272,28.7826748 26.7185174,28.8290205 C27.0518938,28.7732063 27.4805913,28.8065951 27.8095227,28.8713794 C28.1132657,28.8604159 28.2555063,28.7492859 28.5523348,28.7652328 C28.5711027,28.7343357 29.0264702,28.8354989 29.0743776,28.8379906 C29.1158645,28.7667278 29.5233246,28.8290205 29.6186456,28.8345022 C29.7238444,28.8419773 30.428133,28.9356654 30.3318242,28.973041 L30.3318242,28.973041 Z M30.568398,25.4393057 C30.5871659,25.502595 30.6197627,25.5579109 30.6676701,25.6052532 C30.1727913,25.3117305 29.739155,24.9389715 29.267489,24.6150499 C29.304037,24.7829908 30.310093,25.3351525 30.2488505,25.4492725 C30.2350216,25.479173 28.945966,24.5163784 28.9271981,24.5323253 C28.8466939,24.5911295 29.1440163,24.8991042 29.0812921,24.8846523 C29.0931455,24.8941208 29.3223109,25.0655501 29.2961347,25.0934571 C29.2432884,25.1133908 30.6765602,26.1967839 30.550618,26.3492762 C30.4992533,26.4100738 30.1090794,26.0497733 30.0567269,26.0243579 C30.0937687,26.0856539 30.1372312,26.1409697 30.1881019,26.1922988 C29.8833712,26.009906 29.6369195,25.7572472 29.3484872,25.5539241 C29.3870107,25.6261836 29.4403509,25.6874795 29.508014,25.7368152 C29.2669951,25.7388086 28.7568057,25.1263476 28.5493715,25.0027591 C28.4822023,24.9658819 28.1631487,24.6529238 28.1157351,24.6723591 C28.1103023,24.6917944 28.1157351,24.708738 28.1305519,24.7231899 C28.0100425,24.6658807 27.9053376,24.5901329 27.8159433,24.4949497 C27.82187,24.5462789 27.4825668,24.0569081 27.3467468,24.118204 C27.4297205,24.1989353 27.5126942,24.2806632 27.5936923,24.3628894 C27.3205706,24.4226903 27.1002952,23.7309932 26.7313586,23.8869739 C26.7614859,23.874017 28.25
2650124,25.3027603 28.2950176,25.4024285 C28.2905726,25.3904683 28.2066111,25.372528 28.2036477,25.3620629 C28.2945237,25.6675459 28.7158127,25.9530952 28.9237409,26.1763519 C28.4397277,25.8389751 27.9720128,25.3785081 27.4924446,25.1158825 C27.3042722,25.0127259 27.2445113,24.8143863 27.0637472,24.9175428 C27.0257176,24.9384731 26.6197392,24.6569105 26.5723256,24.6090698 C26.5634356,24.6838209 26.5762768,24.755582 26.6088736,24.8238547 C26.2300591,24.5213618 25.8705065,24.0768417 25.4264984,23.8610601 C25.5287339,24.0080707 25.6255365,24.1296659 25.6531944,24.1929552 C25.6848034,24.2642179 25.7346864,24.3130553 25.7499971,24.3942849 C25.1113959,23.8780037 24.4772399,23.3457756 23.86926,22.7926173 C23.737885,22.6730154 23.0632298,22.0470993 22.9570432,22.2384622 C22.740719,22.0406209 21.2931243,20.7912802 20.9958019,20.7304827 C21.2353391,20.9303174 21.4457367,21.1590558 21.6803349,21.3633756 C21.6235374,21.4072296 21.009137,20.8680247 20.9227061,20.7942703 C20.7710815,20.6676917 20.2895377,20.2411119 20.0746951,20.0432706 C19.9008455,19.8833031 19.7339103,19.7258274 19.5659874,19.5693484 C19.2533543,19.8175222 18.7239032,20.2670256 18.6493256,20.3273249 C18.5589435,20.4015777 18.4547325,20.4464284 18.3653383,20.5416115 C18.1248133,20.798257 17.8462588,21.0210154 17.5647409,21.2343053 C17.2076577,21.5034094 16.8910735,21.8223476 16.5300392,22.0989267 C16.5339903,22.0505877 16.5907878,22.0406209 16.5651054,21.9758365 C16.47176,22.0505877 16.3784146,22.1188604 16.2924776,22.1956049 C15.8084644,22.6176996 15.324945,23.0402927 14.844389,23.4643808 C14.4833547,23.7838173 14.1346676,24.116709 13.7667188,24.4276737 C13.362222,24.7665455 12.9759992,25.1278427 12.5739719,25.4702029 C12.1665118,25.8190415 13.1409589,25.1806668 12.7646139,25.5648876 C12.7018897,25.6281769 12.6273122,25.6824961 12.5492774,25.7258517 C12.4519809,25.7811676 12.38333,25.8663839 12.297393,25.9331615 C12.1981209,26.0089094 12.0800809,26.0627302 11.9640165,26.1310029 C11.975376,25.9989425 11.9743882,26.0029293 11.8454827,25.9640587 C11.7447289,25.9336599 11.6666941,25.8509353 11.6098966,25.7766825 C11.5264291,25.6675459 11.2928186,25.2105673 11.2157716,24.8766789 C11.2103388,24.8542535 11.2088571,24.8278415 11.213796,24.8074095 C11.277508,24.5547506 11.209351,24.3150487 11.1268712,24.0768417 C11.0251296,23.7897974 11.0364891,23.4912912 11.0122885,23.1967717 C10.9984595,23.0138806 11.1441574,22.8987639 11.2533073,22.7821521 C11.4819789,22.5359717 11.7076871,22.2793261 11.9689554,22.0690263 C12.1388539,21.9314842 12.301838,21.7740085 12.5097661,21.678327 C12.6673173,21.6060676 12.7601689,21.4480935 12.8816661,21.3284917 C13.0239067,21.1874613 13.1859029,21.0643711 13.3202413,20.9208489 C13.5153283,20.7115457 13.8072179,20.6049008 14.0018109,20.3936042 C14.1722033,20.2092181 15.8840297,18.7739963 16.1186279,18.5741616 C16.5073202,18.24426 16.8713179,17.9148566 17.2590223,17.5929284 C17.2037065,17.545586 17.1498724,17.4982437 17.0935688,17.4494062 C16.6401769,17.0537236 16.1329508,16.5927583 15.6612848,16.199069 C15.1940639,15.8083697 14.7347452,15.3857766 14.2680182,14.9771371 C13.5331083,14.3327823 12.8327708,13.9057042 12.0776114,13.276798 C11.6874375,12.9518797 10.8384388,12.3668275 10.7520079,11.847058 C10.6922471,11.4847641 11.1900893,11.1139985 11.3560366,10.8663231 C11.3496161,10.8762899 12.1032938,9.68774689 12.3403615,9.78641839 C12.410494,9.8158205 12.5038394,9.71266394 12.6712685,9.77595323 C12.9478475,9.88010647 13.1350322,10.1257885 13.3409847,10.3211382 C14.0042804,10.9530344 14.6972095,11.5520402 15.3842119,12.1535376 C16.8100754,13.4023799 18.1712391,14.4992282 19.563024,15.7171733 C19.644516,15.655379 19.7260081,15.5935848 19.8070062,15.5312922 C20.0924752,15.3120222 20.392761,15.1091974 20.6816872,14.8929175 C21.0481544,14.6208234 21.4220299,14.3591944 21.7954115,14.0930804 C21.9722245,13.9665018 22.1579275,13.84989 22.3302955,13.7173313 C22.6607086,13.4611841 23.0103835,13.2324456 23.3546255,12.9972287 C23.8178953,12.6822773 24.2851162,12.3733059 24.7523372,12.0618429 C25.0244711,11.8789518 25.3035196,11.7015424 25.5919519,11.5380866 C25.7164125,11.4683189 25.8186479,11.3541988 25.9623702,11.3083515 C26.0206493,11.2894145 26.0705323,11.2525373 26.1406649,11.2076866 C26.5367655,10.9540311 26.94225,10.7148275 27.3536613,10.4850923 C27.8529851,10.2055231 28.3478639,9.91598702 28.8634862,9.66382653 C28.9998001,9.59655051 29.1430285,9.49439063 29.3331765,9.48990556 C29.2304472,9.62096921 29.1059867,9.69621869 28.9909101,9.79887691 C29.1025294,9.85618611 29.3065064,9.68027178 29.3292254,9.72312909 C29.3608344,9.78243166 29.2763791,9.88459154 29.3020614,9.87163468 C29.376639,9.83475745 29.4428204,9.77246484 29.5435741,9.76598641 C29.4773927,9.87761477 29.3771328,9.9304389 29.2892202,10.0056884 C29.4245464,9.97977465 29.5267818,9.86166786 29.698162,9.84821266 C29.5282635,9.99572156 29.3415727,10.0525324 29.1820459,10.1561873 C29.0630181,10.2359219 28.9296676,10.2967195 28.8022437,10.3654905 C28.7973048,10.3669855 28.7894025,10.3684805 28.7894025,10.3714706 C28.7652018,10.509511 28.6264185,10.5389131 28.546902,10.6311062 C28.6787709,10.6246278 28.7864392,10.5668202 28.891638,10.4980492 C28.9336187,10.5309397 28.8708945,10.553365 28.8871929,10.5932323 C29.3188537,10.4312715 29.6803819,10.1163201 30.1313045,9.98874479 C29.9673326,10.0948914 29.8028669,10.2055231 29.6364256,10.307683 C29.5055445,10.3874175 29.3870107,10.4855907 29.249709,10.5598434 C29.1351262,10.620641 29.009184,10.6605083 28.9029974,10.7392462 C28.8664495,10.7666549 28.7884147,10.793067 28.823481,10.8508745 C28.8605228,10.9176522 28.9291737,10.9007086 28.9948612,10.861838 C29.1924176,10.747718 29.3914557,10.6420697 29.5904938,10.5339297 C29.6048166,10.5259563 29.6260539,10.532933 29.6443279,10.532933 C29.5899999,10.706854 29.4176319,10.769645 29.3144087,10.9176522 C29.435412,10.8992136 29.5050506,10.8125023 29.6058044,10.78160
2651 C29.7816296,10.7297777 29.9465892,10.6545282 30.1397006,10.6510398 C30.2661367,10.6480498 30.3896095,10.5598434 30.527899,10.5294447 C30.4222063,10.6031991 30.3120686,10.6749602 30.2088454,10.7556914 C30.1762485,10.7816051 30.0937687,10.7796118 30.1273533,10.8673198 C30.1663707,10.968483 30.228601,10.9106754 30.2819412,10.8902435 C30.341702,10.8663231 30.400969,10.8339309 30.459742,10.8050272 C30.4790038,10.794562 30.4953022,10.793067 30.5041922,10.8169873 C30.5111067,10.836921 30.5111067,10.8558579 30.4854243,10.861838 C30.3614577,10.88526 30.269594,10.972968 30.1722974,11.0437325 C30.074507,11.1159919 29.9821494,11.1972214 29.8863345,11.276956 C29.9036207,11.3422386 29.9772105,11.2216401 29.9895577,11.3028697 C29.9994356,11.3681524 29.9347358,11.3706441 29.9060901,11.3836009 C29.4299792,11.5963925 29.0437564,11.9532046 28.6101201,12.2317771 C28.424417,12.3503823 27.9147215,12.6623437 27.8505156,12.7012143 C27.6618493,12.8158327 27.4761462,12.9374278 27.2919249,13.0600197 C27.2682181,13.0749699 27.209939,13.0774616 27.241548,13.1392559 C27.2706876,13.1965651 27.3008149,13.1771298 27.3437834,13.1561995 C27.6159174,13.0246375 27.8836063,12.8776269 28.1137596,12.681779 C28.2584696,12.5591871 28.4333071,12.5158314 28.5819683,12.4106815 C28.7676713,12.2801162 29.4423265,11.8580215 29.720881,11.6910773 C29.8695422,11.6013759 29.8631216,11.5909107 30.0068439,11.6507117 C29.9693082,11.7105126 29.8937429,11.718486 29.8507744,11.7678218 C29.7144604,11.9133373 29.5643175,12.0394175 29.412693,12.1625077 C29.2684768,12.2806145 29.1168523,12.3887545 28.963746,12.4919111 C28.8995402,12.5342701 28.8427427,12.5776257 28.8066887,12.6518785 C29.276873,12.4256317 29.6902598,12.0957301 30.1535296,11.8550314 C30.0053622,12.022474 29.7974341,12.1022085 29.6206211,12.2277904 C29.344536,12.4256317 29.0240008,12.553207 28.7815003,12.8008824 C28.71927,12.8641717 28.6229612,12.8442381 28.5523348,12.9065307 C28.279707,13.1367642 27.9404038,13.2648378 27.6653065,13.4890912 C27.5640588,13.5728125 27.4494761,13.6385935 27.3521796,13.7272981 C27.3136561,13.7611853 27.277602,13.8000559 27.2242618,13.8115178 C26.960524,13.8698236 26.8118628,14.111519 26.5861546,14.2321175 C26.4434201,14.308862 26.3204412,14.4284638 26.1782006,14.4952415 C26.0078082,14.577966 25.8571714,14.6915878 25.7080163,14.795741 C25.4650219,14.9661736 25.2323993,15.1560415 24.988911,15.3299624 C24.8585237,15.4216572 24.6950458,15.4655112 24.594292,15.6040499 L24.5957737,15.6010599 C24.3917967,15.6852795 24.2372088,15.8447486 24.0569386,15.9648487 C23.7581345,16.1666768 23.4697021,16.380465 23.1901598,16.6092035 C23.1333623,16.6575426 23.0819977,16.7113634 23.0227307,16.7587058 L23.0276697,16.7527257 C22.8291255,16.7641875 22.7698585,16.9665139 22.5940333,17.03977 C22.6715742,17.082129 22.3856113,17.2092059 22.3653618,17.2241562 C22.2250967,17.321831 22.0616188,17.299904 21.9504933,17.4269809 C21.9015981,17.4817984 21.8003504,17.5415993 21.7099684,17.5959185 C23.3911735,19.0386153 25.0911464,20.4479234 26.7037007,21.9220157 C27.5630711,22.7078993 28.4777573,23.4434505 29.3954068,24.1730215 C29.9530098,24.6175416 31.4401157,26.0138928 31.6149531,26.1424647 C31.547784,26.202764 30.6814991,25.5324955 30.568398,25.4393057 L30.568398,25.4393057 Z M90.6077682,25.3137238 L99.0192265,25.3137238 L99.0192265,28.9346687 L86.5193382,28.9346687 L86.5193382,11.9003804 L90.6077682,11.9003804 L90.6077682,25.3137238 L90.6077682,25.3137238 Z M69.653947,28.9346687 L82.3795435,28.9346687 L82.3795435,25.3645546 L73.742377,25.3645546 L73.742377,22.2404556 L81.2781665,22.2404556 L81.2781665,18.7460892 L73.742377,18.7460892 L73.742377,15.4704946 L82.3795435,15.4704946 L82.3795435,11.9003804 L69.653947,11.9003804 L69.653947,28.9346687 L69.653947,28.9346687 Z M102.508567,28.9346687 L115.233669,28.9346687 L115.233669,25.3645546 L106.596503,25.3645546 L106.596503,22.2404556 L114.132292,22.2404556 L114.132292,18.7460892 L106.596503,18.7460892 L106.596503,15.4704946 L115.233669,15.4704946 L115.233669,11.9003804 L102.508567,11.9003804 L102.508567,28.9346687 L102.508567,28.9346687 Z M63.8467762,13.3495557 C65.0508825,14.4917531 65.7146721,16.0510617 65.7146721,17.739939 C65.7146721,19.0037315 65.2701702,20.2774908 64.2730042,21.8696899 L59.8625572,28.9346687 L55.2748033,28.9346687 L58.4742295,23.85508 L58.5004057,23.8137177 L58.3794024,23.806741 C54.6900363,23.5844809 52.112419,21.1211819 52.112419,17.8156868 C52.112419,14.1688282 54.9779748,11.5216414 58.9256459,11.5216414 C60.8562659,11.5216414 62.6041463,12.1709795 63.8467762,13.3495557 L63.8467762,13.3495557 Z M61.9260339,17.664
261912 C61.9260339,16.0834539 60.5861076,14.797236 58.938487,14.797236 C57.2908665,14.797236 55.9504463,16.0834539 55.9504463,17.6641912 C55.9504463,19.2459252 57.2908665,20.532143 58.938487,20.532143 C60.5861076,20.532143 61.9260339,19.2459252 61.9260339,17.6641912 L61.9260339,17.6641912 Z M128.489705,21.1281587 L122.393608,11.9003804 L119.37297,11.9003804 L119.37297,28.9346687 L123.436212,28.9346687 L123.436212,20.0975897 L127.368078,26.2311694 L129.611825,26.2311694 L133.517515,20.1499155 L133.517515,28.9346687 L137.606439,28.9346687 L137.606439,11.9003804 L134.561107,11.9003804 L128.489705,21.1281587 L128.489705,21.1281587 Z M178.155881,15.5716578 L183.588683,15.5716578 L183.588683,28.9346687 L187.677607,28.9346687 L187.677607,15.5716578 L193.084232,15.5716578 L193.084232,11.9003804 L178.155881,11.9003804 L178.155881,15.5716578 L178.155881,15.5716578 Z M204.924282,18.9464223 L202.544715,18.3902738 C201.339621,18.1281465 200.537048,17.741434 200.537048,16.7043866 C200.537048,16.1437531 200.779548,15.6817911 201.238373,15.3693314 C201.673491,15.0718219 202.295794,14.9148445 203.03663,14.9148445 C204.629429,14.9148445 205.576712,15.6459106 205.84934,17.0871124 L209.968391,17.0871124 C209.824669,15.738602 208.880349,11.5216414 202.761533,11.5216414 C200.796834,11.5216414 199.124025,12.0404142 197.92387,13.0211491 C196.713343,14.0118508 196.072767,15.4077036 196.072767,17.0582086 C196.072767,19.7303125 197.622103,21.3135415 200.948953,22.0401225 L203.753266,22.6710221 C205.003304,22.9107241 205.611284,23.4125533 205.611284,24.2064104 C205.611284,25.2155507 204.709439,25.7941244 203.13689,25.7941244 C201.131693,25.7941244 199.807077,24.910566 199.498395,23.3691977 L195.404532,23.3691977 C195.60604,25.3097371 196.45405,26.821205 197.92387,27.8612424 C199.242559,28.7946349 201.002293,29.2884908 203.011442,29.2884908 C207.257917,29.2884908 210,27.1246946 210,23.7773389 C210,21.172511 208.481779,19.7278208 204.924282,18.9464223 L204.924282,18.9464223 Z M142.222345,28.9346687 L154.947942,28.9346687 L154.947942,25.3645546 L146.310281,25.3645546 L146.310281,22.2404556 L153.846071,22.2404556 L153.846071,18.7460892 L146.310281,18.7460892 L146.310281,15.4704946 L154.947942,15.4704946 L154.947942,11.9003804 L142.222345,11.9003804 L142.222345,28.9346687 L142.222345,28.9346687 Z M170.528722,21.697264 L162.213573,11.9003804 L159.087736,11.9003804 L159.087736,28.9346687 L163.176166,28.9346687 L163.176166,19.3929357 L171.440939,28.9346687 L174.617646,28.9346687 L174.617646,11.9003804 L170.528722,11.9003804 L170.528722,21.697264 L170.528722,21.697264 Z"></path></g></svg></div><nav id="navigation" role="navigation" aria-label="Sitemap" class="footer-menu"><ul class="footer-menu__main-menu"><li class="footer-menu__main-item"><a class="weight-bold color-black" href="/">Home</a></li><li class="footer-menu__main-item"><a class="weight-bold color-black" href="/services/">Services</a><ul class="footer-menu__submenu"><li class="footer-menu__sub-item"><a href="/software-engineering/" class="color-gray-light">Software Engineering</a></li><li class="footer-menu__sub-item"><a href="/web-development/" class="color-gray-light">Web Development</a></li><li class="footer-menu__sub-item"><a href="/ai/" class="color-gray-light">Machine Learning / AI</a></li><li class="footer-menu__sub-item"><a href="/consulting/" class="color-gray-light">Business Development</a></li><li class="footer-menu__sub-item"><a href="/branding-and-design/" class="color-gray-light">Branding &amp; Design</a></li><li class="footer-menu__sub-item"><a href="/concept-and-ux/" class="color-gray-light">Concept &amp; UX</a></li></ul></li><li class="footer-menu__main-item"><a class="weight-bold color-black" href="/projects/">Projects</a></li><li class="footer-menu__main-item"><a class="weight-bold color-black" href="/company/">Company</a><ul class="footer-menu__submenu"><li class="footer-menu__sub-item"><a href="/team/" class="color-gray-light">Team</a></li><li class="footer-menu__sub-item"><a href="/career/" class="color-gray-light">Career</a></li></ul></li><li class="footer-menu__main-item"><a class="weight-bold color-black" aria-current="page" data-state="active" href="/blog/">Blog</a></li><li class="footer-menu__main-item"><a class="weight-bold color-black" href="/de/info/">Updates</a></li><li class="footer-menu__main-item"><a class="weight-bold color-black" href="/contact/">Contact</a></li><li class="footer-menu__main-item"><a href="https://9esec.io/">9elements Cyber Security</a></li><li class="footer-menu__main-item"><a href="/ventures">9elements Ventures</a></li></ul></nav><address class="site-foot__address text-step-0"><h2 class="sr-only">Address</h2><span class="street-address">Kortumstraße 19-21</span><br><span class="postal-code">44787</span> <span class="locality">Bochum</span>, <span class="country-name">Germany</span><br><a href="tel:+49-234-6894188" class="tel">+49 234 689 4188</a><br><a href="mailto:[email protected]">[email protected]</a></address><h2 class="sr-only">9elements on social media</h2><div class="site-foot__social-media"><a href="https://twitter.com/9elements" target="blank" aria-label="9elements on X, formerly Twitter"><svg style="" class="icon" aria-hidden="true" focusable="false"><use xlink:href="/assets/icons/icons.svg#svg-x"></use></svg> </a><a href="https://www.facebook.com/9elements/" target="blank" aria-label="9elements on Facebook"><svg style="" class="icon" aria-hidden="true" focusable="false"><use xlink:href="/assets/icons/icons.svg#svg-facebook"></use></svg> </a><a href="https://www.linkedin.com/company/9elements-agency/" target="blank" aria-label="9elements on LinkedIn"><svg style="" class="icon" aria-hidden="true" focusable="false"><use xlink:href="/assets/icons/icons.svg#svg-linkedin"></use></svg> </a><a rel="me" href="https://ruhr.social/@9elements" target="blank" aria-label="9elements on Mastodon"><svg style="" class="icon" aria-hidden="true" focusable="false"><use xlink:href="/assets/icons/icons.svg#svg-mastodon"></use></svg> </a><a href="https://dribbble.com/9elements" target="blank" aria-label="9elements on Dribbble"><svg style="" class="icon" aria-hidden="true" focusable="false"><use xlink:href="/assets/icons/icons.svg#svg-dribbble"></use></svg> </a><a href="https://www.instagram.com/9elements/" target="blank" aria-label="9elements on Instagram"><svg style="" class="icon" aria-hidden="true" focusable="false"><use xlink:href="/assets/icons/icons.svg#svg-instagram"></use></svg></a></div><div class="site-foot__subline | color-gray-light text-step-0"><a href="/imprint/" class="color-gray-light">Imprint </a>-<a href="/privacy/" class="color-gray-light">Privacy-Policy </a>-© 2026 9elements GmbH</div></div></div></footer>
26<script src="/assets/js/nav.js?hash=e8660b5f" type="module" defer=""></script>
26<script src="/assets/js/salesviewer.js?hash=03f7f667" type="module" defer=""></script>
26<noscript><img src="https://salesviewer.org/M3V8y1N3O3z6.gif" style="visibility:hidden;"></noscript>
26<script src="/assets/js/matomo.js?hash=af7bb8de" type="module" defer=""></script>
26</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.