In some cases, an API could return an array containing multiple different values. In our case, we use Contentful for all our content related pages where we can have multiple different unrelated content models to build up a page. From a Contentful way of working this works fine, but when connecting to GraphQL we ran into some questions. How will you define your query, schemas, type definitions and keep it all structured?

Using fragments in the query

Our first approach was adding all the possible properties to the items query wherein the end we got a list of all possible properties and no clue which…

After competing in the Northern European Page Speed race last year we boosted the performance of our website but we didn’t want to drop the ball after the nice achievements we accomplished. But how do you know what the impact is of your new build feature, added content to your site or how to know if your website is still performing after every release? The answer is measure, measure, and measure because to measure is to know.

That’s why we teamed up with SpeedCurve as they offer the right selection of products like synthetic webpage tests and performance audits which…

At Wehkamp we wanted to collect and visualize the performance of our website. Of course there are third-party tools that can offer you this information, but we also wanted to collect the data ourselves and act upon it in realtime if needed. That’s why we thought of a service that could give us the performance data by auditing the website multiple times a day with Google’s Lighthouse.

Setting up Docker
As we are using an Alpine version of Node we need the Alpine Linux package management (apk) to get chromium. …

At Wehkamp we have a pretty nice, fast and optimized process in place for getting our code easily and automated to development and production environments in AWS. But somehow we were always a little bit reticent to turn on the full auto deployment for production. But why?

My philosophy is that the master branch should always be correctly tested and production ready. It should never block you from going to production!

I think the fear of giving up control or the worries/lack of confidence that you might actually break something in production made us a bit cautious. But what if…

Recently i was taking a course into Databricks and with that came a basic training in Python (as this is one of the supported languages). Although i already experimented a little bit with it in my past, my skills were a little bit rusty so the teacher gave us a simple task, create the Fizz-Buzz function which is also used by many software companies in a job interview to determine if a candidate can actually write some code.

So what is a ‘Fizz-Buzz’?
Mainly it’s a very simple programming task which has a function that can return different values depending on…

Our company was invited by Google to participate in this year’s Northern Europe Page Speed Race. The goal of this race was to get the highest absolute improvement of Lighthouse Performance Score of your website within two months.

Having fast and engaging mobile web experiences is critical to your user experience and your business. User expectations on mobile are growing constantly, and it’s critical to stay ahead of this demand for speed.

The pages that were part of this race and that we needed to improve were the home-, category overview, and product detail page. …

Integration testing with Cypress 101

Integration testing your application can be very hard, especially when u are still using selenium based tools. Luckily for us there’s a new player on the market, Cypress. It makes creating tests easy, stable and most of all very good fun to work with.

Create your first test
After setting it up, you can start adding your test files inside the cypress/integration folder. Good practice should be that you create a file for each page or section (like header, footer) that you what to test. Don’t put all tests into one large file.

Let’s start with creating a simple test…

I don’t think i have to tell you the importance of unit testing your code, so i’ll dive in directly to unit testing with Jest and Enzyme.

First of all what are Jest and Enzyme? Jest was created by Facebook and is a testing framework to test javascript and React code. Together with Airbnb’s Enzyme, which is a testing utility, makes it the perfect match to easily test your React application.

Snapshots to the rescue
Let’s start off easy with testing a simple pure stateless (a.k.a. dumb) component which renders a simple link element containing a title and an url.

Often when building sites, implementing Google Analytics is one of the requirements in your definition of done. Implementing all of those tags can lead to a spaghetti of code triggering events all over the place, but there is a way of keeping it nice and clean. In this case we’re pushing the events to Google Tag Manager which from there can be captured by Google Analytics. Together with the usage of React and Redux in your project, adding an analytics middleware could be the best solution. …

Nowadays React is the established way to go in the front-end Javascript world and combined with the power of ES6, Node JS and Webpack it’s bound to make a guaranteed success of your project. But what’s a good or even the most perfect setup at this moment? Let me help you with that by giving you some insights in our current setup.

Webpack 2 & Universal webpack
With the arrival of Webpack 2 it’s definitely time to hop on and use this version. Please upgrade when you’re still using Webpack 1, they have made an excellent migration guide available. The new…

Berry de Witte

lead front-end developer @ Wehkamp.nl

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store