frontend - Raoul - Web Application Developer

Raoul - Web Application Developer

frontend

A collection of 17 posts

viewport sizes device pixel ratio

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

gracefully deprecating your legacy codebase

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

build a sapper/strapi website

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

vue.js, axios, interceptors and toast-notifications

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 router pagination

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 static page generator with dynamic pages

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

css dark-mode/light-mode - rethought

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

CSS, Dark-Mode and Custom Properties

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

Remove dust from a legacy project

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

Lazy Load JavaScript[s]

web performance optimization

Lazy Load JavaScript[s]

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

WebP image and background usage in web projects

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

deliver webfonts from your domain

frontend Featured

deliver webfonts from your domain

Webfonts may be the last tweak for your user experience (UX). And if you look around, chances your blog theme uses a webfont from a third party are very high. In this post, I do not talk about webfont perfomance, flash of unstyled text or something like this. No, this

platform webfont

platform webfont

Thanks to "cssweekly" and their link to "30 Seconds of CSS" - I saved very much research myself. I do not like webfonts very much. I like eBay's Font Loading Strategy - your webapp user will not experience a flash of unstyled text (FOUT)

set up ubuntu bash and vscode on windows 10 for web development

set up ubuntu bash and vscode on windows 10 for web development

One windows 10 feature, the ability to run a native linux shell in windows, made me curious. I usually use ubuntu as working desktop, but sometimes I am on a windows desktop, doing some web development and wish to have a linux shell at my fingertips without rebooting or virtualboxing.

jquery event delegation in plain 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!