Raoul - Web Application Developer

frontend

viewport sizes device pixel ratio

Today I was device testing a website and at some point I realised that I don't have a clue what viewport size, the device I was testing on has. device pixel ratio The manufacter tells 2560px times 1600px, but do these values matter in web design? Quick answer

strapi.io

run strapi4 or strapi5 on plesk obsidian 18

In this short guide, I will demonstrate how to host a strapi4 or strapi5 on a linux server managed with plesk obsidian. Let's get started! strapi4 setup (4.25.13) In your strapi4 folder (repository) add a file named index.js and put that content into it: // /<

sveltekit

run sveltekit on (linux) plesk obsidian hosting

It's been a while since I focussed on my sveltekit passion and since then sveltekit and plesk made some progress. Sveltekit might feel demanding when you try to host it yourself on a linux plesk server and this post demonstrates how to set up your hosting. tl;dr;

web performance optimization

gracefully deprecating your legacy codebase

You're running a legacy codebase, supporting browser from 2013 and you want to avoid that your users are unable to use your service with your next release or you want to enrich your user experience with a new feature, but not writing more legacy code and not ship

sapper

run a sapper app on a plesk server

I started to write a SvelteKit/plesk hosting guide, but due to ECMAScript modules syntax SvelteKit is using, I ran into trouble to get it working, even with a manual installed Node.js v14.16.0 on my plesk server. I will stay tuned on this topic but today I

sveltekit

build a SvelteKit/strapi website

It is spring 2021 and somehow SvelteKit got released in an early stage. I am really thrilled about the next version of svelte/sapper because in the last months my excitement about Svelte/Sapper only got bigger. Today (or yesterday) the SvelteKit docs got public and even SvelteKit is in

web performance optimization

*.avif *.webp images css background usage progressive enhanced with image-set

Part 3 of my new image formats as background-image journey (part 1, part 2). Avif and webp images bring a positive impact on every webpage's payload performance. Today (March 16 2021) avif works only in chromium based browsers and webp have "partial support" in macOS safari,

strapi.io Featured

build a sapper/strapi website

Rich Harris stalled sapper development on his talk at the svelte summit 2020 and the svelte@next thing looks really promising. In fact I tried directly to move a sapper page to svelte@next and it seems, that - for now - it is a little early for that. UPDATE

web performance optimization Featured

avif and webp images as css background images

UPDATE: I was late at the image-set party, please read this blog post, how to support avif and webp images in your project. Safari is late at the webp party, whilst Firefox and chromium-based browsers heading to the avif party. This means I need to extend my webp feature detection

strapi.io

deploy/run/host strapi on plesk obsidian as node application

My last months are really focused on strapi.io topics and what you read here is just the tip of (my strapi) iceberg because I write about my side project(s). My colleagues and I at @bold ventures are working on new and overhauled projects with strapi since may this

strapi.io

deliver images via strapi custom route and koa.js context object

In my strapi powered band website journey I created a Song collection type to store mp3 files and some of their meta data (title, artist, duration...). Most of the mp3s include a cover image, a photo taken during the rehearsal, overhauled with gimp and I want to access these images

strapi.io

upload media files to strapi within a node process

I enjoy the ease of use strapi.io. At @boldventures we started in may 2020 with our first strapi project and today (august 2020) the count of strapi projects is on three with more to come. On my band website I am switchting from my nuxt.js/express.js-api to

vue.js

vue.js, axios, interceptors and toast-notifications

I usually use axios when it comes to Asynchronous JavaScript and XML (ajax) or more modern Asynchronous JavaScript and JSON (ajaj). I like that axios runs in the browser and in node.js, and with a promise polyfill in IE11 as well - and projects I usually do, do support

vue.js

vue.js router pagination

One downside of browser rendered frontend frameworks is the temptation to hide structure or logic from your visitor. Your App might have a store, or component/route based data and produces on this hidden data a view. But on reload your visitor starts with your first page, or unfiltered list

nuxt.js

nuxt.js static page generator with dynamic pages

With Nuxt.js you have the choice - will you deliver server side rendered pages over a node.js infrastructure, will you take the single page application approach like a Vue.js app or will you use Nuxt.js as a static site generator with npm run generate? Static site

jest Featured

unit testing cookie or localstorage code with jest

Imagine - you enter a website and first thing you see is a cookie banner telling you the website is heavily built on cookies and is not able to run without it and you have to accept these cookies… (PS: raoulkramer.de uses no cookies - mouse drop) You write

gdpr

follow up: wordpress webfont delivery via own domain

Yesterday (I started the draft of this post on may 13 2018, 12 days before GDPR got applicable in the EU) I wrote about how to deliver webfonts from your domain and noticed, that wordpress themes need insights on this topic too. Today (january 13 2020) I write about replacing

frontend

css dark-mode/light-mode - rethought

So, you read my last blog entry about "CSS, Dark-Mode and Custom Properties" and start to build for every website a light and a dark theme, to support your visitors. That's nice - and then you like your light theme more than the dark theme and

frontend

CSS, Dark-Mode and Custom Properties

The other day, I was reading about "dark mode" and about the prefers color scheme media query, and... how cool is that? Often a customer requirement is to support the IE 11 and than you put yourself under that ie11-rock to "play it safe". On private

web performance optimization

LazyScripts v0.3.x released

LazyScripts 0.3.x released - with MutationObserver support

web performance optimization

Remove dust from a legacy project

Years go by, platform code grows, browser platform support changes, and there you are: +300 Kilobytes of minified JavaScript code is shipped, same in CSS and the Chrome Code Coverage Tool shouts a huge blob of unused code in your face… Your legacy project collected dust along the way! In

nodejs

Deploy a Nuxt.js application on a Plesk Onyx (v)Server as node.js application

Sadly, I started this topic for an Ember.js application a long time ago, and did not finished it. Now my focus switched to Nuxt.js applications, sorry Ember.js. I am building a Nuxt.js progressive wep application, using express, running on this same server, my ghost blog runs

ghost

2019 Update: Install Ghost (2.27.0) on Plesk Onyx (17.8.x) or Plesk Obsidian (18.x) vServer with docker

Today I moved my blog to a new vServer running Ubuntu 18.04 with Plesk Onyx (or Plesk Obsidian) and Docker support (inclusive). Februar 2021: Missing docker support on your plesk server? Have a look at Fatih Battals blog post how to setup a ghost installation without docker on your

web performance optimization

Lazy Load JavaScript[s]

my idea of lazy loading javascript files - like you already do with images and iframes…

frontend Featured

WebP image and background usage in web projects

UPDATE: I was late at the image-set party, please read this blog post, how to support avif and webp images in your project. With Firefox 65 joining the WebP party and thanks to the incredible squoosh app, WebP becomes more than just a lighthouse proposal. So it is time to