javascript - Raoul Kramer - Web Application Developer

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

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

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

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

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

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 your mobile phone switches

web performance optimization

LazyScripts v0.3.x released

LazyScripts 0.3.x released - with MutationObserver support

web performance optimization

Lazy Load JavaScript[s]

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

frontend

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

javascript

mobile optimised html5 background video handler

In April 2016 I was developing a website with heavy use of background videos. There were many sections, all with their own full-screen background video starting playback on viewport visibility and stopping it otherwise. At that time, iOS 9.3.1 did not support background videos at all and so

js

jquery event delegation in plain js

When you add an event handler, do you delegate it? Thanks to jQuery, I do. jQuery 1.3 shipped a function called .live() with which you could add event handlers for elements, that are in your DOM and/or may appear later - and I am talking about January 2009!