Web development

Looping video with autoplay

Looping a video with autoplay. Either with YouTube or html5 video tag

Games JavaScript

Bishops Swap Game

The Bishops Swap Game is a classic puzzle from the 7th Guest. Here is the start position of it: The end position is the same, except that the black and white bishops have swapped: the black bishops are on the top row, the white bishops are on the bottom row. Move the bishops to get […]

Gutenberg Wordpress

Match editor style to front-end

If you create a theme for WordPress, you will probably want the front-end and the back-end (the editor) look alike in most cases. It’s not that hard if you know how to do it. wp_enqueue_style You could use the enqueue_block_editor_assets hook to add styles, using wp_enqueue_style. This is how the twentytwenty theme does it. It […]

Animation Graphics JavaScript Web development

Move eased dot along a curve

Demonstration of the effect of timing functions on an animation, using a Bezier curve controller. How to use: Drag the handles (green dots) of the control below to adjust the way the red dot runs its loop. It starts and ends in its ‘home’, but the speed may vary, and the dot may even temporarily […]

Animation JavaScript

Move a dot along a path

Create a dot moving along a path using SVG and JavaScript

Geometry Graphics Mathematics

Bouncing in a box

How to intersect a parabola with a line, and other graphics solutions.

Geometry Mathematics

Angle bisector theorem

Intuitive approach to proof of angle bisector theorem

3D Blender

Modeling a worm with bones

Trial and error tutorial: How to model a simple worm that wriggles using an armature.

3D Blender

Scaling in Blender: mind Object vs. Edit mode

When modelling a 3D object in Blender it is important to be aware whether you are in Object Mode or Edit Mode when you change the shape of an object. A mistake that is easily made is to deform an object in Object Mode, and then to find that tools in Edit Mode do not […]

Animation CSS JavaScript Web development

Animation on page load

To bring a webpage to life, you may want to start an animation when the content of the page appears. For example, a text or an image fades in, or moves to certain position, or grows to a certain size, etc.
Here is a basic method to kick off a page load transition