### Goal

Our goal was to take photos with most of the composition, lighting, colors, etc. done in camera. This way we were going to train to take photos correctly, and also have a good starting point to work from, instead of shooting random photos and editing the life out of it.

### Gear

We started by taking a look at Sui Generis’ website and the aesthetic of their current content. It looked rather old school and dreamy, which we very much liked to replicate. Our first step was to choose the kind of gear we were going to use for the photoshoot to reproduce the vibe. We already have digital and analogue photography gear, so that is why we opted for a mix of digital and analogue film cameras. It is indeed possible to mimic the analogue vibe using only digital gear, but we specifically chose to also shoot on film, because this would be more authentic and natural. Fake it ‘till you make it was not an option.

Both cameras used old lenses from Canon to have a more dreamy and nostalgic look. We choose 50mm lenses (75mm with a 1.5x crop on digital) to have the photos resemble what the human eye sees. As for the filmstock we wanted to shoot on, we chose two different vendors and types; Kodak Portra 400 and Fujifilm 200. Both types of filmstock have different specifications and outcomes and we wanted to check which film had the better look.

![Woman looking into the camera with a blurry background](https://www.datocms-assets.com/82535/1668507620-portra-400-7.jpeg?q=0.5)

### Concepting

After choosing the gear, we decided to create a concept board. The concept board was made up of shots with poses and types of portraits we would like to take photos of. The focus was to have some close up shots to make the pictures feel more personal, like you are standing next to the person, and some full body shots with some environment poking into the frame. We discussed this with Sui Generis to align our vision for the photoshoot. We also discussed the location and who was going to be the subject of the photos. Sui Generis took the lead in arranging the location, photo models and the outfit for the models. 

![Woman looking into the camera with a blurry background](https://www.datocms-assets.com/82535/1668507577-dsc03928.jpg?q=0.5)

### Photoshoot

On the day of the photoshoot we were looking around the chosen location for interesting spots. Because of the hard sunlight during that morning, we tried different places with both hard and diffused light. We took turns shooting digital and analogue photos, and tried to follow the concept board as a guideline.

We had a great time taking the photos. It was exciting to see how the models and we were going to work together. Fortunately, the models knew which poses worked the best, so we could focus on the composition and technical part of the photos. Besides looking at the composition, we had to see what the sunlight was doing with some of the pictures. For some shots we wanted to have the sunlight shine directly on the face of the model. To compensate for the harsh sunlight overexposing the image, we used a variable ND filter to have more control when using a wide open aperture.

![Two women looking into the camera with a blurry background](https://www.datocms-assets.com/82535/1668507603-dsc04241.jpg?q=0.5)

### Development & editing

After we were done with the photoshoot we headed back to our office and had two things to do simultaneously. First we had to deliver the rolls of film to our local photography shop to develop the film, and afterwards scan them in a high resolution with lossless format to give us headroom if we wanted to edit the photos afterwards. Secondly, we had to sift through almost a thousand digital shots to have a selection of what we liked and optionally wanted to touch up. 

For both digital and analogue photos, we chose to create an extra edited version of the original photos to play around with. For digital we added some black & white photos to be used as a teaser for the launch of Sui Generis’ new collection. And for analogue photos we created some cinematic shots with a different aspect ratio (2.4:1) that can be used as a banner on the webshop. The process of selecting photos, development and editing took a few days, resulting in a selection of almost 150 photos. Plenty to choose from :) See some of the results below!

![Woman looking into the camera with a blurry background](https://www.datocms-assets.com/82535/1668507565-dsc03835.jpg?q=0.5)

![Three women looking into the distance with a blurry background](https://www.datocms-assets.com/82535/1668507592-dsc04328.jpg?q=0.5)

![Two hats in the highlight](https://www.datocms-assets.com/82535/1668507612-dsc04262.jpg?q=0.5)

![Black and white photo](https://www.datocms-assets.com/82535/1666885613-dsc03799-2.jpg)


### Learnings

We are overall satisfied and pleasantly surprised by the outcome of the photoshoot, given that beforehand we only shot some photos non-professionally. We were especially surprised by how much weight was lifted from our shoulders, because we had done preparations regarding gear and concepting. Not to mention the good weather in October.

We also noticed that the workflow for digital and analogue photos are very different from each other. For digital you can punch in the color and whitebalance while shooting, and also have the ability to change it a lot afterwards. But for analogue photos you have to choose the right film, and are rather restricted with the outcome of the photos. We noticed that the Kodak Portra 400 film worked a bit better than the Fujifilm 200 in overall color performance, given that the Kodak film has more of an autumn/winter vibe, cooler tones, and overall nicer skin tones compared to the Fujifilm. But this might also be the way the film is scanned.

Do you also like the outcome of the photos? Why don’t you send us a message, and together we’ll have a look on how to level up your content :)


 How we approached our photoshoot with Sui Generis

## What is Instant Commerce?

Instant Commerce is an Amsterdam-based Software-as-a-Service (SaaS) company to help businesses build a fluid shopping experience for their customers. They use Shopify as the back office with the freedom to build your storefront completely custom by using its infinite block library or customize every block from no-code to custom HTML markup. This allows you to focus on the user experience, without worrying about the nuts and bolts of the tech behind it.

### Shopify as the e-commerce engine

Shopify is an easy-to-use e-commerce platform that helps small businesses build an online store and sell online. It manages your products, customers, orders, checkout, and more. It is designed to get you up and running in no time. The only downside to Shopify is the built-in themes. Besides the fact that thousands of other e-commerce sites use the same themes, you can't easily change the theme to differentiate yourself as a business. That’s where ***Headless Commerce*** comes in.

### Headless Commerce

Monolithic commerce formed the start of shopping online. It provided an all-in-one solution for selling products and managing and publishing content on the web. With monolithic commerce platforms, the front-end is connected to the back-end. This means that making changes to the front-end requires a change to the back-end. Changes are therefore difficult to implement.

![Image showcasing the difference between a monolithic architecture compared to a headless architecture, where as the monolithic has the front-end and back-end in one systems, the headless architecture splits the front-end and back-end into seperate systems where communication is done via APIs.](https://www.datocms-assets.com/82535/1666000589-blog-instant-commerce-1.jpg)

Headless commerce is the separation of the front-end from the back-end. This means that what visitors see and interact with is disconnected from the e-commerce back-end (e.g. Shopify) using APIs. This allows changes to be made to the front-end without any restrictions. It's no surprise that we're a big fan of headless commerce; it is flexible and allows you to customize basically anything your (e-commerce) heart desires.

## Why do we like Instant Commerce?

We don't have to reinvent the wheel; that is it. By using Instant Commerce, we know for sure that the e-commerce back-end is already integrated in such a way that we can easily build on top of it; we don't have to worry about any integrations. This ensures faster time-to-market, which also lowers initial costs for our customers. In addition, we can support our customers in the field of design, but the customer can easily change something themselves if desired.

## Should you go headless?

It all depends on your requirements and long-term goals. Need some guidance? Feel free to contact me via email or message me on [LinkedIn](https://www.linkedin.com/in/martijn-van-der-pol/). I'd love to show you the world of headless and show you what Headless Commerce can do for your business! 🚀

Partnering up with Instant Commerce 

## Why a dark theme?

Before designing anything it is good to think about why and how you want to use a dark theme. Are you providing the dark theme as a secondary option or will it be the default theme? Netflix has a dark color palette, because we most likely use it in low light environments. A dark theme also puts the focus on content – for example in the Spotify application, where the bright images stand out. If a dark theme does not fit your brand or use case, you can always provide it as secondary option because it has some benefits:

* Dark themes save lives (battery lives).
* They reduce eye strain in low light environments.
* Screen glare is reduced and thereby minimizes blue light.

Be aware that a dark theme could cause eye strain in bright light conditions, especially if users look at the interface for a longer time.

## Part 1: Choosing the right surface colors 🔲🔳

### Use a dark gray instead of true black

One aspect that is very important when choosing the right colors for a design, is
creating enough contrast while reducing eye strain. This applies to all color palettes, whether light or dark. True white (#FFFFFF) on true black (#000000) – or the other way around – creates a high contrast, but is not comfortable for our eyes. When designing a dark theme, it is recommended to use dark gray as a primary background color (Google recommends #121212).

![blog image contrast](https://www.datocms-assets.com/82535/1665569352-dark-theme-blog-image-contrast.jpg)


As you can see, white text on a dark gray surface has less contrast than white text on a true black surface and is therefore more comfortable for the eyes. This will be especially noticeable with longer areas of text. However, make sure there is enough contrast to meet the accessibility standards outlined in the [WCAG 2.0.](https://www.w3.org/WAI/standards-guidelines/wcag/) (don’t worry for now, more of this in part 2).

### Elevation

Elevation is the relative distance between components along the z-axis. For a dark theme Google advises to use a lighter surface color to indicate that a component is ‘on top’ of the other.

This means that you need to create different shades (lighter) from your base surface color (primary background color). You could copy the colors for 10 levels of elevation from Google Material Design or create them yourself.

A good way to do this is using a white overlay on your base surface color and play with the transparency.

![blog image elevation](https://www.datocms-assets.com/82535/1665569356-dark-theme-blog-image-elevation.jpg)


### Background and surfaces with a brand color

Dark themes don’t necessarily have to be black and gray only. If you are in love with your brand color, there are ways to translate this to your dark theme. In the example below we have a purple color as our brand color. To make a dark version of this we give it an opacity of 12% on a black background. This results in the darker purple used on the background of our app.

![blog image brand color](https://www.datocms-assets.com/82535/1665569339-dark-theme-blog-image-brand-color.jpg)


### The steps to follow

* Decide whether you want a gray background color or a dark version of your brand color.
* Create different shades from the background color for elevated components.

## Part 2: Add some colors 🌈

### The color palette explained

In part 1 we discussed the background color and surface colors. The next step is to choose a primary color that represents your brand. When you have your desired color it is time to create a color palette with the help of this [color picking tool](https://material.io/design/color/the-color-system.html#tools-for-picking-colors).

![blog image color palette](https://www.datocms-assets.com/82535/1665569343-dark-theme-blog-image-color-palette.jpg)

Ok, so what are we looking at here?

The ‘P’ stands for your chosen primary color. Based on the primary color the tool creates different shades by increasing and decreasing the saturation. Each shade is assigned with a number from 50-900. These numbers are tonal values and are used to identify a certain shade. In the example above the primary color has a tonal value of 500.

This is how you can use the generated shades:

* Choose one or more primary variant colors (any other color than the primary color). Variant colors can be used to create more diversity in your interface.
* Choose a color that works well in dark themes (anything from 50 to 400). High saturated colors don’t create enough contrast on a dark background.

So now you have a background color, surface colors and a primary color. Optionally, you can expand this with a secondary color, accent colors and an error color. In this case you can follow the same steps as we did with the primary color.

### 'On' colors

'On' colors are applied to text, icons and strokes that are placed on top of surfaces that use one of the base colors.

It’s important that there is enough contrast between the 'on; colors and the surface colors. Material Design suggests a white color on dark backgrounds and a black color on the primary color(s). You could also use one of your brand colors on a dark background, as long as it’s creating enough contrast.

### Meet the minimum contrast levels

There are many people who are visually impaired and have less than 20/20 vision. For your interface to be accessible it is important to meet the contrast ratios.

I will explain the next 4 scenarios and which minimum contrast ratios you have to meet in each case:

* White text on a default dark background.
* White text on a colored dark background.
* A non-white color on a default dark background.
* A non-white color on a colored dark background.

These are the tools that you can use to test the contrast ratios. When testing, make sure you test the 'on' colors with the lightest shade of your surface color.

* [Colorable](https://colorable.jxnblk.com/)
* [Contrastchecker](https://webaim.org/resources/contrastchecker/)

**Let’s go!**

1. White text on a default dark background
	 ![blog image white on dark](https://www.datocms-assets.com/82535/1665569362-dark-theme-blog-image-whiteondark.jpg)
   White text on a dark background can either be 100% white or a slightly darker white. These are the minimum contrast levels:

   * For 100% white: you don’t need to test.
   * For darker variations of white: 4.5:1 contrast ratio (exception: disabled state)

2. White text on a colored dark background
	 ![blog image white on color](https://www.datocms-assets.com/82535/1665569358-dark-theme-blog-image-whiteoncolor.jpg)
   White text on a colored dark background can also be 100% white or a slightly darker white. This is the minimum contrast level in both cases: 15.8:1 contrast ratio.

3. Non-white text on a default dark background
	 ![blog image color on dark](https://www.datocms-assets.com/82535/1665569349-dark-theme-blog-image-colorondark.jpg)
   Any non-white text on a default dark background should meet the minimum 4.5:1 contrast ratio.

4. Non-white text on a colored dark background
	 ![blog image color on color](https://www.datocms-assets.com/82535/1665569346-dark-theme-blog-image-coloroncolor.jpg)
   Any non-white text on a colored dark background should meet the minimum 4.5:1 contrast ratio.

## And lastly... Always test with both designs

Apple recommends testing on how the user interface looks in both light and dark appearances. Some assets, illustrations and images that work well in one appearance might not work in the other. If it is needed, tweak the colors and make two versions. Furthermore, consider providing a switch, so users can always see their preferred theme.

## Resources

* [Material Design Guideline (Dark Theme)](https://material.io/design/color/dark-theme.html)
* [Apple’s Human Interface Guideline (Dark Mode)](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/)
* [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/)
* [Use Contrast Guide](https://usecontrast.com/guide)
* [How to Design a Dark Theme for Your Android App](https://blog.prototypr.io/how-to-design-a-dark-theme-for-your-android-app-3daeb264637?gi=452f306997b4)


Websites on phones with a dark theme user interface

How to design a dark theme user interface

## What is Jamstack?

Jamstack is a web architecture that aims to make the web more responsive, secure, and scalable. It builds on many of the tools and workflows that developers love and get the most out of their time. Pre-rendering and decoupling are core principles that enable sites and applications to be delivered with more confidence and resilience than ever before.

### Security

The Jamstack removes multiple moving parts and systems from the hosting infrastructure. As a result, there are fewer servers and systems, and thus fewer vulnerabilities to cyber-attacks. The ability to serve pages and assets as pre-generated files allows for read-only hosting, further reducing attack vectors. Meanwhile, vendors with teams dedicated to securing their specific systems and providing high levels of service can provide dynamic tools and services.

### Scale

With heavy traffic loads, popular architectures add logic to cache popular views and resources. By default, Jamstack provides this. When sites can be served entirely from a CDN there is no complex logic or workflow to determine what assets can be cached and when. Everything on Jamstack sites can be cached in a content delivery network. With built-in redundancy, simplified deployments, and incredible load capacity.

### Performance

Page loading speeds have an impact on user experience and conversion. By generating pages ahead of time during a build, Jamstack sites eliminate the need to generate page views on a server at request time. Very high performance is possible without introducing expensive or complex infrastructure because all of the pages are already available on a CDN close to the user and ready to serve.

## DatoCMS

DatoCMS is a cloud-based headless CMS designed to work with static websites, mobile apps, and server-side applications of any kind. As an agency, it allows non-technical clients and team members to manage the content of their digital products within a web-based CMS.

### API-first

As I mentioned before in my [why your next CMS is headless](https://www.dev.kitchen/blog/why-your-next-cms-is-headless/) blog post, a headless CMS is simply a database that serves data over a REST or GraphQL API. The key difference is the presentation layer (front-end); unlike a traditional (coupled) CMS, a headless CMS does not have a defined front-end system or presentation environment. This means that headless is “**API only, UI anything**”. A headless CMS can push content to any device or channel with internet access through its API.

### Streaming

Thanks to the integration with [Mux](https://mux.com/), DatoCMS natively supports video encoding and streaming. Every video you upload to your DatoCMS project will be instantly available for streaming. Videos are encoded while the first viewers watch them, giving you the fastest publishing time possible. Encoded videos get cached on Mux's multi-CDN for future reuse as well. This way, delivering high-quality content is as easy as uploading a file.

### User Friendliness

Agencies sometimes overlook the importance of a user-friendliness Content Management System. Developers are not the ones working with the CMS; content managers are, and they are not always tech-savvy. I have my fair share of experience with CMSs, such as Umbraco, WordPress, Ghost, Sanity & more, but DatoCMS takes the cake; a simple and user-friendly interface to manage content.

## Partnership

By partnering with DatoCMS, we can support our clients even better by offering custom volume pricing tailored to the client’s needs, calls with DatoCMS engineers to provide the best solution for every challenge, and a cheaper pricing plan to enable smaller projects to enjoy DatoCMS and all its benefits. Check out [our partner page on DatoCMS.com](https://www.datocms.com/partners/dev-kitchen) or if you want to see what DatoCMS can do for you, feel free to contact us. We'd love to show you DatoCMS in action! 🚀


Proud to be an official DatoCMS Partner

First, let’s start with a little bit of context; I have been creating conversational applications since the beginning of time, so somewhere around 2017. Since then, I have been using Dialogflow exclusively to create conversational interactions. Not that I haven’t tried other conversational builders. Throughout the years I have used other open-source conversational tools, but none have convinced me to change platform.

Having said that, Google Actions Builder has for the first time made me think of changing tools. Google grabbed the Dialogflow mold and added great features that can compete with Dialogflow when creating conversational interfaces. Let’s see how Dialogflow differs from Google Actions Builder, and if it can replace Dialogflow.

## Dialogflow

![Dialogflow Console](https://www.datocms-assets.com/82535/1665576139-dialogflow.png)

As mentioned before, I have been using Dialogflow exclusively for the last couple of years to create conversational interfaces. That makes me somewhat of an expert on what it can do _pushes glasses up_. Here are a few reasons on why you should choose for Dialogflow:

* It is a mature platform for creating conversational interfaces. Meaning, most of the things you want to do with conversational, can be done with Dialogflow.
* There are a lot of integrations that are “ready to go” for Dialogflow, like Twitter, Facebook Messenger, Telegram, etc.
* Dialogflow has an extensive and well documented SDK that helps offload the logic of the conversation from the dashboard to code in the form of webhooks. More on this later on.
* Pre-built agent templates that help you get started with your new Dialogflow agent.

But nonetheless, there are a few things that bother me. For example:

* There is no clear overview or preview of how the dialogue flows 😉. A way to fix this is to offload the logic of the conversation to the webhook and document the flow in code. Not the cleanest or nicest way to handle this, but it works.
* No clear telegraphing of error and warning messages. Especially, if Dialogflow is combined with the Actions on Google SDK.
* To test your agent on Google Assistant, you have to use the Google Actions console.
* Following the context from one intent to another can easily get confusing. This can be partially fixed by offloading the conversation logic to the webhooks. But it is still a headache to check the context of every intent.

## Google Actions Builder

![Actions Builder Console](https://www.datocms-assets.com/82535/1665576134-actionsbuilder.png)

Google has released Actions Builder in June 2020. Actions Builder is made to be, from what I can tell, a replacement for Dialogflow. I’m going to keep it short and sweet by telling you that it is a good experience to design and create conversational interfaces in Actions Builder, because it fixes a lot of the aforementioned gripes that I have with Dialogflow. The following things are instantly noticeable:

* There is ample overview of the conversational flow. And also… TABS!
* The replacement for context is scenes. Scenes contain logic and structure for specific goals in a conversation, like slot-filling. This is great because you don’t have to think about how context changes throughout the conversation. Also, scenes are logical building blocks of your conversation flow and can be reused, which is very epic swag cool _dab_.
* Errors and warnings are properly telegraphed and are placed at the bottom of the screen, so users won’t search hopelessly on what they did wrong.
* Conversational design best practices are applied automatically for handling errors gracefully.

Wow! That’s a lot of great improvements. But, there are also some things that are not that great:

* If you are looking to deploy agents made in Actions Builder to third-party channels, then I have to disappoint you. Conversational agents made in Actions Builder can only be deployed on Google Assistant.
* In my experience it still is a bit buggy.
* Fulfillment options are a bit lackluster. Not a lot of options and not that well documented. Including the SDK.

## Conclusion

So… which one am I going to recommend? _drum roll please_ I think it is still too early to tell if people should use Google Actions Builder for their new conversational interfaces. There are some noticeable improvements compared to Dialogflow, that’s for sure. But, it is closed off to other third-party channels, which means it is not that flexible compared to Dialogflow. Another reason is that it is still very fresh, so it is still not that well documented. This is the biggest mood killer for most, I think.

## TL;DR

To sum up, or if you scrolled down and didn’t want to read the whole blog, here are my final points regarding the question:

* If you only create conversational interactions on Google Assistant and don’t have to use a lot of rich responses, by all means use Actions Builder. It’s nice and solves a lot of issues I have with Dialogflow.
* If you want to create conversational interactions and deploy it to multiple third-party channels that are also dependent on a lot of rich responses, then you should use Dialogflow. It is still the more grounded and mature platform for creating conversational interfaces.


Dialogflow vs Actions Builder, which one should I choose?

## WordPress in short

The initial release date of WordPress was May 27, 2003. This means WordPress is (almost) 17 years old already! Don’t get me wrong, age doesn't matter when it comes to tech - innovation does. Within those 17 years of existence, WordPress has grown to be the go-to CMS solution for many (small) businesses, blogs and personal websites. The WordPress principle is the same as it was back in 2003 though; websites built on top of WordPress specific templates which are written in PHP.

## Use-Cases

Why would you use WordPress in 2020? There are plenty of other CMS solutions that may suit a specific use-case better. WordPress is great for a lot of use-cases, because you can basically build anything with it. One big advantage is that non-tech savvy people can choose a template and directly start working with it. But what if you don’t want a commonly used template, but something truly unique? - That’s where you are going to need some coding skills to make your own WordPress specific PHP template.

Are you a casual food blogger that just wants to write about your daily food adventures? - WordPress is your friend. Are you someone who wants to take their business online? WordPress can be your friend, but it depends on what you want to achieve. Being unique will make you stand out among the competition, and having an overused WordPress template will not help you.

## Alternative

WordPress basically dominated the world wide web. I often encounter people who immediately think about WordPress when I start talking websites or Content Management Systems. But why? There are plenty of alternatives for creating websites and managing content! I will highlight one of my personal favorites; a statically generated website, using a [headless CMS](https://dev.kitchen/blog/why-your-next-cms-is-headless/).

I’m a big fan of not overthinking stuff. Is your goal to have a simple informative website with content that barely changes? If so, why would you choose a WordPress website, when a static website will do the trick even better? In contrast to a WordPress website, a static site has no rendering times, no maintenance and it’s easily deployable on a [Content Delivery Network (CDN)](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/) which makes the website “super-duper” fast!

Does that mean you can’t change the content afterwards? Of course not, but it depends if it’s needed. You can easily host a server which runs a headless CMS. The site will be generated based on the data provided by the headless CMS. In comparison to WordPress, a static site doesn’t query any databases for data, because that only happens **once** while generating the static pages.

On the other hand, if there’s no need to change the content often, it would be cheaper to pay a developer to make a content change then paying server costs every month. It all depends on your use-case and available budget.

## Conclusion

You can easily build websites using WordPress. But if you don’t have the knowledge to create a custom WordPress PHP template, you are stuck with choosing an overused template which decreases your chances of standing out among competitors. WordPress also requires a lot of maintenance; updating plugins, PHP versions, databases and of course WordPress itself.

![Ain't Nobody Got Time For That](https://media.giphy.com/media/10PcMWwtZSYk2k/giphy.gif)

Just think thoroughly about the use-case. Do you want complete freedom in regards to the design, UX and speed of your website? If so, WordPress isn’t the answer and you should probably contact us. We create fast, beautiful custom designed websites that just work 😇


Is WordPress the right solution for your next website?

## Where is the sun?

Our office is located in the middle of a large building, with a view on the interior of the building. This means that sunlight barely reaches our office. Sitting inside all day makes us unaware of what is going on outside.

We noticed that we really missed looking outside and especially to see what the current weather was. Therefore we wanted to mimic the weather conditions in our office and recreate the outside feeling.

## Then there was light!

We looked at the existing technologies in our office that could show us what the current weather conditions were, without asking Google. We came to the realization that we could use the Philips Hue RGB lamps to mimic the weather conditions.

How do we know what the current weather is? By using a weather API that can tell us the weather condition, we change the Philips Hue lights to the corresponding condition. The weather conditions that were interesting to us were rainy, sunny and overcast. Because the weather changes all the time, we chose to run it on a Raspberry Pi. To change the color of the Philips Hue lights, the Raspberry Pi can communicate directly with the lamps via the Philips Hue Hub.

![Impression](https://www.datocms-assets.com/82535/1665575858-weatherlights-impression.jpeg)

The result is that we can now interpret the weather based on the RGB lights in our office. As a side effect of the changing lights the office feels more dynamic, giving it a more outside-like feeling. We made a [quick video](https://youtu.be/3bxBlgvp2WE) to show what the different colors of the lights mean.

## Future prospects

In the future we would like to use other technologies to improve the experience. For example, using a camera to stream video of what is going on outside in conjunction with the lights. However, technology cannot fully replace hearing soft rain ticking on a window and feeling warm sunlight on your face. So maybe we will just move to a better office in the future! 😊


Mimicking weather conditions with lights

## Traditional CMS

In a traditional or coupled CMS, the CMS architecture tightly links the back-end to the front-end. Besides creating, managing and storing content, the back-end is also responsible for rendering the content in the front-end template. And guess what? The front-end code is hosted on the same server as well.

![Traditional CMS Architecture](https://www.datocms-assets.com/82535/1665574652-blog-traditional-cms.jpeg)

In short, a traditional CMS is comprised of:

* A database where content and digital assets are stored
* A content management back-end where content is created and managed
* An application where publishers and designers create and apply design schemas
* A front-end that renders the published content

With a traditional CMS, your content creators are writing and publishing on the back-end of the same system your website visitors are viewing. Platforms such as WordPress, Umbraco, and even Wix.com are examples of traditional CMS architecture, because **everything** is managed within the same system.

## Headless CMS

A headless CMS is a database which serves the data over a REST or GraphQL API. The key difference is the presentation layer (front-end); unlike a traditional (coupled) CMS, a headless CMS does not have a defined front-end system or presentation environment. Therefore, it gives you the ultimate freedom in regards to how and where you present your data. This means that headless is **_"API only, UI anything"_**.

A headless CMS can push content to any device or channel with internet access. It enables you to publish the same content to a website, an app, a voice application or any other device connected to the internet, because the content isn’t bound by a predetermined user interface.

![Headless CMS Architecture](https://www.datocms-assets.com/82535/1665574648-blog-headless-cms.jpeg)

In short, a headless CMS is comprised of:

* A database where content and digital assets are stored
* A content management back-end where content is created
* An API that connects the content management back-end to any device or channel
* The ability to connect to any user interface, allowing organizations to use a platform best suited for the content

## Headless benefits

At first, it makes sense to combine a set of tools within the same content creator-friendly system, but a traditional CMS has its drawbacks in comparison to a headless CMS. Let me give some clear benefits of why you should choose for a headless CMS:

* **Multiple channels:** Headless makes it easy to manage content in one place and distribute it among multiple channels such as a website, native app or even a voice application. It all follows the **create once, publish everywhere** philosophy.
* **Front-end agnostic:** Do you want to redesign your website? Simply create a project from scratch by using any preferred stack, because the most important thing is already waiting for you to be served; your content.
* **Performance:** A headless CMS gives you the possibility to statically generate your pages by using a static site generator such as [Gatsby](https://www.gatsbyjs.org/). Everybody should know that nothing beats static web pages; it’s fast, secure and more reliable than ever. Plus, you don’t need expensive servers to host your static website; a basic hosting provider will do.
* **Developer experience:** In the past I’ve worked on some websites using traditional CMSs. One thing I noticed while working on those projects, was the fact that the front-end code needed to be transformed into something the traditional CMS could render. In short, **every** change in the front-end led to an update in the CMS templates. This repetitive task needed to be taken care of by a back-end developer.

When using a headless CMS, the front-end code is independent from the back-end, which allows front-end developers to do front-end related stuff, and back-end developers to do back-end related stuff. When developers are happy, the work efficiency will thrive, which comes down to an awesome product and a happy client! 🎉

## Get started

Excited to try it out yourself? We strongly recommend [Strapi](https://strapi.io/):

> “A flexible open-source Headless CMS which gives developers the freedom to use their favorite tools and frameworks, while helping editors to easily manage their content and distribute it anywhere. By making the admin panel and API easily customizable and extensible through a plugin system, Strapi enables the world’s largest companies to accelerate content delivery while building better digital experiences.”

Need help or want to know what headless can do for you organisation? Feel free to contact us.


Blog