Home Updates


How to make a simple image gallery in VUE3

One of the first exercises I do when learning a new frontend framework, is making a simple image gallery. To my mind it's a good litmus test for any Javascript framework as nine out of ten websites I make at the office has some way to browse through a set of images. Here's how I made the one this website uses. 

2D Shadows in Unity

One cool feature of 2D projects in Unity is that you can work with light sources and shadows. Here I'll explain the required steps to start rendering shadows based on sprites.

Using CSS transforms for micro-interactions in VUE3

I've seen some advertisements of Wix that show a few perspective tricks in CSS that look impressive. Now I would never use Wix myself, but whatever fancy bells and whistles are to be found in such services are usually fun things to try and replicate. Here's a simple code you can use to make a micro-interaction that adds a 3D illusion to an element by messing with it's transform styles in realtime.

A SEO friendly way to make menu's in VUE3

Since VUE3 doesn't care about SEO (but we do!), I've opted for a simple but effective way to design the navigation of the website. Basicly, all the dock component does is open and close itself. It isn't at all interested in the actual menu, which is added to a container using a slot. This keeps the menu available for webcrawlers, and we don't have to fetch the required data.

VUE3 Color Picker for CSS Root Vars

This component is used in the website's heading. When you click one of the buttons, a set of RGB values are ran through a method (pickColor) which sets two style properties: a regular one, and one with transparancy added for duotone rendering.

Using Vue3 in ProcessWire Templates

I finally made the switch from AngularJS to VUE for professional websites, and so my own website couldn't lag behind. It was surprisingly easy to get VUE3 working on a ProcessWire installation. This page covers the basics - you could wrap all of this code in a module if that's what you prefer. Official documentation often has a developer fiddle with NPM or Git without explaining what happens behind the hood, and I wanted to prevent that.