Jeroen van Kleef

Namary

2022-04-02T17:00:00+02:00

Namary.nl was a personal blog turned coding experiment. I wanted to make a static weblog rather thant just installing Wordpress, theming that and call it a day.

So static. Lot of work right? Well, yeah. But not as much as you’d think. I’ve used Pelican as a CMS. This Python project creates static files in a little more developer friendly way. It takes markdown files and creates HTML out of that with a Jinja2 based templating system.

The template was made with the help of Bootstrap and CSS.

This website lives on in the code of this website and Tinkers and Toymakers.

Project Details

Client: Me(!)

Date: Spring 2022

Tinkers and Toymakers

2022-04-01T17:00:00+02:00

I always wanted to create a place where I could publish my code. A place where I can publish what I am passionate about.

I considered creating a WordPress install for this. Which would be fine. Template on it would be fine. It would run fine. But I wanted to save as much resources for the projects I would be implementing. A static site seemed like a good idea and a fun idea to implement.

The site was made with Pelican, a Python based CMS using Jinja2 templating and Bootstrap 5.

Project Details

Date: Spring 2022

Project URL: https://tinkersandtoymakers.com

Heads Up Display

2022-04-01T17:00:00+02:00

The Heads Up Display (HUD) was a project to create better insights into real-world data for the communications department of the disaster management department of Groningen. This web app leans heavily on external data provided by sources like the RIVM, KNMI, Google and the fire department. The Python collects the data, creates graphs, classifies trends and then color codes the trends according to sentiment. This creates one relatively simple to read collection of colored bars, which will show you at a glance what issues are currently going on.

This application is mainly built in Python. It creates all the graphs and then builds the webpage. There was no possibility on the infrastructure to run something like Flask. The page itself is static HTML based on Bootstrap.

This webapp was built as a proof-of-concept to show the worth of constant data monitoring in a crisis management environment. It was made on a 0 dollar budget.

The detail page shows the graphs of data which in turn feed the colors on the main display. This way you get to delve into the data and see why the color shows as elevated. As an extra, there was an email script added to send notifications too.

Project Details

Client: Veiligheidsregio Groningen

Date: Summer 2022

3Noord spokespersons

2021-12-01T17:00:00+01:00

This web app (pwa) was made for the cooperative disaster management departments in the north of the Netherlands. It contains pre written tweets and social posts for several disaster types. As with many other things, social media content during a crisis is shared between the different governmental organizations in different regions.

This tool, which is a static HTML/JS progressive web app based on Bootstrap facilitates that. Just to make life easier on the colleagues who are on duty during a disaster. It uses web intent to transfer information to the social client of choice and is backed by a simple home made offline CMS written in Python to make management easier.

Project Details

Client: Veiligheidsregio Groningen

Date: Winter 2021

Ukrant (.nl)

2021-07-01T17:00:00+02:00

Ukrant is the local university newspaper for the RuG in Groningen. I advised them on the technical aspects of their website. When I started out consulting with them, their website was throwing pages full of errors every minute. As a result, the site was suffering blackouts whenever there was a spike in traffic. Working with their designers we took care of the errors and the blackouts.

But the code of the site was slowing it down, creating problems retaining users. It was clear that a new base code was needed to make sure the site would not suffer future blackouts.

Due to severe budget constraints the choice was made to buy into a pre-made template and customize that where needed. This kept costs within budget and resulted in a code base that isn't throwing errors and is maintained by the original creator.

This project was an excercise in making the most out of a complicated situation. But the result is that their site doesn't suffer blackouts anymore and their page loads have gone down 6 fold.

Project Details

Client: Universiteitskrant

Date: 2021

Project URL: https://www.ukrant.nl

Newsflash

2021-04-01T17:00:00+02:00

Thanks to Wordpress plugins the CMS can be extended to do a lot of tasks. One of those tasks can be a self contained newsletter tool. Newsflash was made for the local crisis management department of the province of Groningen for informing employees of the organization during the covid crisis.

The website itself is pretty standard. I wanted to make sure the colleagues could do as much as possible without me being involved. So got them a standard theme that is well documented and uses Elementor as a page builder.

It used the API of Mailchimp to actually send the newsletters to the users. This was all done by the editors of the newsletters themselves as the time of the IT department at that time was pretty much 0.

This is another project with basically 0 budget, both in time and in money. So that informed a lot of the choices here.

Project Details

Client: Veiligheidsregio Groningen

Date: Spring 2021

Wie is de Bock (.nl)

2020-12-01T17:00:00+01:00

In the north of the Netherlands there is a longstanding tradition of shooting with carbide. This isn't without some danger. The Veiligheidsregio Groningen along with some of its partners are running a yearly campaign to educate participants in how to do this safely.

Apart from social media channels there needed to be a website for participants to get more information.

This website was made under intense pressure and we had to deliver the MVP in under 7 hours to comply with the deadline. The result needed to be easy to use, easy to maintain and had to look better than the old site which was extremely dated. The total budget, apart from hours, was 125 euro.

Project Details

Client: Veiligheidsregio Groningen

Date: December 2020

Project URL: https://wieisdebock.nl/

Veiligheidsregiogroningen.nl

2020-09-01T17:00:00+02:00

One of the biggest projects I've worked on so far was the corporate website of the Veiligheidsregio Groningen. At the time the Veiligheidsregio had a website that was made by an external company. Because the CMS that was used was rather restrictive and dated, the Veiligheidsregio wanted a Wordpress-based website.

The goal was to create a website that was as light on maintenance as possible without sacrificing the freedom that Wordpress affords. A designer created the design based on a widely used commercial theme. At that point I took over and negotiated contracts with a hoster and made sure that the setup was resilient enough for the expected peaks in traffic the Veiligheidsregio could expect. Then I managed (and executed) the migration to the new site.

Project Details

Client: Veiligheidsregio Groningen

Date: May-September 2020

Project URL: https://veiligheidsregiogroningen.nl/

The website has since been fully renewed, see the screenshot for the design at the time. It is still based on Wordpress so migration was a much easier experience than the last time.

Covid Data collection Portal

2020-04-01T17:00:00+02:00

This data portal was a project that needed to be set up within the same day. With only a few hours on the clock, we needed to build a portal with forms that collected data from several municipalities on COVID-related subjects. This to facilitate the exchange of data between municipalities and the disaster management department of Groningen.

We made it in about 5-6 hours, everything included with a 50 dollar budget. There was no time for design, so it was basic through and through. It is based on a standard WordPress install with a basic theme. On the back-end, the forms filled a database which was then read out to distribute the data to the agencies involved.

The portal was taken offline after it had fulfilled its use about 3 months after it was built.

Project Details

Client: Veiligheidsregio Groningen

Date: Spring 2020

Tags: Wordpress

Spokespersons App

2020-04-01T17:00:00+02:00

The spokespeople at the Groningen firebrigade pull double duty when they are on call: they both have to facilitate the media and they need to inform the general public. The media usually call but the general public obviously doesn't. The way to inform the public is usually through social media, especially via Twitter However as you can imagine, this double duty isn't always easy especially in crisis situations.

This web app takes at least some of the workload of their shoulders. It saves them hours of work when they are in the field since they do not have to write all the messages from scratch.

It gives them some standard messages they can tweet, with an easy to use link that (through the magic of web intent) puts the text straight in their app. They don't have to think about the text (that was pre-cleared) they just simply can press 'Tweet' and move on to the next task.

Project Details

Date: 2020

Project URL: https://woordvoerders.veiligheidsregiogroningen.nl/

Tooling Obi4wan

2019-09-01T17:00:00+02:00

Anyone who used OBI4WAN (an online business intelligence software package) knows of its power. However, it is difficult to master if you want to use all it offers.

The internal tooling I created for the Veiligheidsregio Groningen fixes several issues with OBI4WAN. It was a web based tool written in HTML and JS to help create valid search queries with minimal effort an (almost) zero possibilities for errors.

Another effect of this was that our crisis response is now much quicker. The tooling ensured that it is possible to deliver a social media analysis in as little as 15 minutes rather than the hour+ it used to take. This meant that our spokespeople could respond much quicker to new facts on the ground.

Project Details

Client: Veiligheidsregio Groningen

Date: Summer 2019

Project URL: https://omgevingsanalisten.veiligheidsregiogroningen.nl/

Blijfkalm (.nl)

2019-04-01T17:00:00+02:00

When the corona epidemic hit, I wanted to help out. Ofcourse working at the disaster management department at the time was one thing. However I wanted to help out in my own way too. This website helped to get the message out for government messages to manage covid spread.

The site has a focus on sharing the information that is on the page. It gets you in a loop using meta-data to get you to share and reshare the information that is offered.

Project Details

Date: 2020

Project URL: https://www.jeroenvankleef.nl/static/work/projects/blijfkalm

Podgront (.nl)

2017-09-01T17:00:00+02:00

Podgront was a startup podcasting company founded in 2017. At that time I was working with them to get their website and infrastructure running. It is based on Wordpress and was done on a very limited budget.

The site needed to house both articles and some of the podcasts that the company is creating. Like a Puppy podcast and a medieval cooking podcast.

By 2021 the company had outgrown the website and is now on its way to creating a new site for their expertise center.

Project Details

Client: Podgront

Date: 2017

Factcheck

2017-07-01T17:00:00+02:00

When you Google, you get a lot of extra search results that might not be what you are looking for. Normally you don't really mind and just scroll through. But not all information is harmless, especially for people in a vulnerable position like cancer patients.

This page is a proof of concept to show what a search engine would look like if it showed only authoritative information. It was build with a custom Google search field and a hand curated list of websites of authorative sources. This to still provide the information but make it a walled garden experience.

Project Details

Date: 2017

Project URL: App

Toevalstreffer

2016-04-01T17:00:00+02:00

Together with author Ton van der Laan from the Leeuwarder Courant I worked on ‘Drugsvlucht’ or ‘Toevalstreffers’ as the story is called.

This is one of the four long reads I developed at the paper. Since Leeuwarder Courant (and Dagblad van het Noorden) we're relatively small organizations, only 3 people were working on this project.

The long read was made in HTML and CSS with the help of a framework to speed up development as resources were very limited. It took about a week to finish.

Project Details

Client: Leeuwarder Courant

Date: November 18th, 2016

Tooling DvhN

2016-04-01T17:00:00+02:00

When working with journalists, you’ll find out soon that they are masters at writing text or creating audio or video. But tech skills are rather uncommon. This creates a challenge when you are collectively creating a website or other digital product where some technical knowledge will help get the work done much better and quicker.

This means that they needed some help with getting articles into the CMS. That particular CMS (Escenic) had a lot of options but wasn’t very user friendly.

The tooling was there to make sure every editor could create custom HTML items in their articles. This gave them a lot of freedom in how to create their article and how to tell their stories. Thanks to these custom elements, the stories were told in a much more rich and enticing way.

Obviously it’s a joy for me to see that these tools were used for years even after I moved on to another job.

Project Details

Client: Dagblad van het Noorden

Date: 2016

Het Stemmencircus

2015-07-01T17:00:00+02:00

Stemmencircus is a book written based on the interactive possibilities in Apple Books. It was meant to be a work in progress during the 2016 US presidential elections as a sort of guide and scrap book during the entire process.

Coming from blogging about the US elections 4 years earlier, this felt like a next step in trying to bring a information to an audience that would be particularly interested in the elections.

As it turned out it was a fun but rather limited project. The possibilities at the time were a lot more limited than for example what modern day websites are capable of.

But it was worthwhile and you can check out the result for free in the links below.

Project Details

Date: 2015

Store (Apple - Free): Apple Books Download (Free): Ebook - PDF

Lotgenoten

2015-04-01T17:00:00+02:00

The third part of four long reads made by the editors of Dagblad van het Noorden. I developed these long reads as part of my job as a digital coordinator at the paper.

This particular piece is about the earthquakes in Oklahoma that resemble the earthquakes in Groningen, The Netherlands.

The long read was made in HTML and CSS with the help of a framework to speed up development as resources were very limited. It took about a week to finish.

Project Details

Client: Dagblad van het Noorden

Date: 2015

Thuisfront

2015-04-01T17:00:00+02:00

Colleagues Bas van Sluis and Liselotte Schüren made this portrait of the home front of the soldiers of the dutch military. They were on a military mission in Mali while their families were waiting for them at home.

This long read was the second in a string of four that I made for Dagblad van het Noorden and the Leeuwarder Courant.

The long read was made in HTML and CSS with the help of a framework to speed up development as resources were very limited. It took about a week to finish.

Project Details

Client: Dagblad van het Noorden

Date: 2015

Dagblad van het Noorden

2014-09-01T17:00:00+02:00

As a journalist at the digital desk I worked on many articles. I enjoyed my time at Dagblad van het Noorden. The digital desk was only a small operation back then. Being able to build it out and make some cool stuff was a privilege.

My work spanned not just writing but also adding new features to the site, developing tooling for the journalists and training the print journalists to work effectively online.

Articles

These articles are all in Dutch.

Tech

General news

Project Details

Client: Dagblad van het Noorden

Date: 2014-2018

Het verdriet van Groningen

2014-04-01T17:00:00+02:00

Het verdriet van Groningen was the first long read for Dagblad van het Noorden inspired by snowfall by the NY Times.

It was a considerable risk for the company to do this project since the resources were very limited at the time and digital projects were not a priority.

The development of this long read took about 6 working days. I made it using only HTML and CSS and used Skeleton framework to take care of some of the base functions. There were no possibilities to use a CMS like Wordpress as the servers available to us did not support this. Money and time was very limited too, so as simple a set up as possible was the only way to go.

Project Details

Client: Dagblad van het Noord

Date: 2014

De Uitlegfabriek

2014-04-01T17:00:00+02:00

De Uitlegfabriek was a startup making YouTube explainers. At the time it was an innovative way to explain (difficult) subjects that were in the news. The animations were hand drawn by an animator and were live recorded in a (very) small studio.

I did the research, wrote scripts and did the occasional voice over.

Project Details

Date: 2014

Project URL: https://www.youtube.com/channel/UCKOpDcw281lESaVUmVvgzNg/videos

NRC Handelsblad

2012-09-01T17:00:00+02:00

Writing for one of the biggest papers in the country was an interesting experience. I was an intern for the political desk in The Hague. While I mostly did smaller jobs, I got to write two obituaries describing the lives of two political figures. The amount of love their fellow politicians had for them was very special. I got to write down their memories in these articles.

Articles

These articles are all in Dutch.

Project Details

Client: NRC Handelsblad

Date: 2012

Magazine Comment

2010-09-01T17:00:00+02:00

Comment Magazine is the communication sciences magazine of the Commotie Student Organization. At the time the magazine needed an update because of regulations coming from the University of Groningen (RuG).

Part of this update was a new look and feel. But the content needed an update too. The focus of the content in previous years was more on the student organization and not so much on communication sciences.

As editor-in-chief I led the talented team of students that made these changes. The process lasted about a year and 4 editions to arrive at the final form you see in the image and in the pdf below.

Project Details

Client: Commotie

Date: 2008-2010

Project URL: Download - PDF

OOG TV&Radio

2007-09-01T17:00:00+02:00

The local public broadcaster OOG is an institution in the city of Groningen. They produce a news site, radio and television programs 7 days a week. I started out as an intern, working graveyard shifts writing for the teletext system.

At some point I started writing for the website and ended up starting a new program called OOG Forum.

I have really fond memories of working here, as the people were such a joy to work with.

Zuiderzeelijn (+live)

The Zuiderzeelijn was a project to get a high speed rail connection to the city of Groningen in The Netherlands. The project was ultimately cancelled due to the high cost, leaving the province and city with only conventional train connections to cities like Amsterdam.

This audio is all in Dutch.

Report:

Live: Part 1:

Part 2:

Sugar Factory

The sugar factory in Groningen is one of the most iconic parts of the city. The factory is close to the city and whenever the production season hits, the entire city smells of sugar.

School protest 2007

At the Grote Markt in Groningen hundreds of middle school children protested the new norms for their education. The main problem: they were required to be more at school than there were lessons available to them, leading to hours spent in large study halls just doing homework. This was not what they wanted out of their education, sparking a protest.

Project Details

Client: OOG TV

Date: 2007