Ron Valstar

Experiment: Mosquitos

Dead mosquitos that are dead

Experiment: Condens

Condens on a window pane in pure CSS

Sparrow

Bjirds

Look ma; no CSS

A demonstration of viewing websites without CSS by removing all style elements via JavaScript, inspired by Firefox Reader View and 1995-era web aesthetics. Implementation of theme switching using localStorage to toggle between default and high-contrast mo …

Birds

Asymmetry

Experiment: circles

Recursive CSS

Added alpha to MCPicker

A snail heart

Implementing search in a static site

A seedling

Experiment: eggs

Single element eggs

Prerendering with JSDOM

You don't need cloud services for prerendering. Using JSDOM you can easily setup a build script that renders HTML for every page.

Shadow DOM

Modern animation for the web

Experiment: Leafs

Single element leafs

Experiment: Pink cheese

Cheese holes

Random in CSS

Experiment: Ladybugs

Single element ladybugs

Experiment: Lines

Perlin noise something

Experiment: Spokes

Perlin noise spokes

Something new

Experiment: Forest animation

Forest animation

Using toggable user preference media features

How to easily use prefers-media-queries and make them adjustable through user preferences.

Signals

Thoughts about signals, some history, and an easy explanation on inner workings.

A freelance developers toolbox, ten years later

Ten years ago I made a list of software and tools I use as a freelancer. This is the same list in its current state.

Don't put your email address in source files

Don't put your email address in source files

How to easily implement custom local ESLint rules

Easy instructions on how to implement custom local ESLint rules. Custom rules are a great addition to your standardized configuration.

Scrollbar thickness

A simple solution to determining the scrollbar thickness for the current browser or device.

To determine touch-, mouse- or keyboard input and use it

A practical guide on how to determine the way your application is used in terms of touch-, mouse- or keyboard interaction.

Experiment: Rotate

Rotating nested elements with animated background

Moire and glitches

A single background with repeating gradients exhibit moire interference patterns and glitches.

Randomness in generative code

Experiment: CSS background with radial gradients

A single background with radial gradients seeded with a prng and animated with Perlin noise.

JSFiddles

Implementing CSS color functions

fast giant lists

Cypress and `device-width`

The basics of CSS page transitions

Basic structure and example of a page transition in a single page application.

Useful custom Cypress commands

Some useful Cypress custom commands to make your tests cleaner

React styled-components and SASS/LESS variables

A simple solution on how to use Sass variables in React styled-components.

Rendering HTML to an image

MC Picker

Front-end logic without JavaScript

Using string literals sparingly

Experiment: bezier

Refactoring for speed

Updating a Cypress alias

To update a Cypress alias on the fly we can create and overwrite Cypress commands to update DOM aliases by traversing up the selector tree.

A use case for JavaScript generators

I’ve always ignored JavaScript generators and iterators partly because I never really encountered a clear real life use case.