Kris Kofler

Challenge

To have better understanding of front-end web solutions and problems they solve, I decided to build my own React-like UI library.

Solution

A small set of functions written in vanilla JavaScript. Designed to run in browsers and can be easily bundled with your application using bundlers like esbuild. The solution is built with functional programming pattern and greatly relies on recursive functions.

This library is inspired by Vue.js, React and Grecha.js 🥣.

Features

• Virtual DOM

• Components
  Creates HTML elements with a single function. It supports nesting, custom tags, attributes, event listeners, properties, and classes.

• State Management
  Provides global state shared between all components ($state) and individual memory allocated per component instance ($componentState).

• Router
  Has hash based router.

• Element Referencing & On Mount Hook
  Provides $on_mount hook to execute JavaScript after render and elements can be accessible via custom reference.

Demo application built with Render.js

To-Do List (source):

Challenge

Build a framework for visual portfolio websites with automatic image optimisation and simple content management without complexity of a CMS.

Solution

Page content is stored as a regular Markdown files. The idea is to call Pug template with parameters inside a markdown file, similar to MDX or WordPress shortcodes. The injection command syntax is based on original markdown comments, no need to modify standard Markdown parser. The command is detected with regular expression pattern - this triggers Pug template to load and compile to HTML. Output is injected back to markdown document.

The framework automatically handles image sizes. On build it generates requested image sizes and converts everything to WebP if required. Each image recorded in JSON file with id based on its original name. Then you call source sets of images just by calling id.

• lazysizes - handles client-side image size variants
• sharp - resizes images on build
• ffmpeg - creates video thumbnail images on build

Websites powered by portfolio framework:

• nadia.vizg.co.uk
• juliana.kofler.work

Goal

Make development of World of Warcraft (WoW) UI add-ons more efficient and pleasant experience. I’ve built all my WoW add-ons with NIUI framework.

Solution

WoW game engine allows scripting with Lua. This gives enthusiasts an opportunity to modify the default UI or even add new bespoke features, like automating actions or specific events tracking. Due to security, Lua inside WoW has some limitation (e.g. Lua file imports are not allowed). That makes the development inconvenient and messy.

At first I started using Node.js scripts to organise my Lua files, but then the scripts became complex. I ended up with building full-featured framework for all my WoW add-ons. Main problems the framework solves:

• Automatic Import - no need to list files in configurations for each addon anymore. The framework automatically scans for all .lua or .yaml files and imports them on build. If a specific loading order is important, the framework has an option to set sequences.

• Core & Modules - the generated output is split in two main types. The single core addon and multiple modules. The core acts like a shared library, widely reusable code and static resources, like databases, are with the core. The modules are actual add-ons.

• Scope - Scope in WoW is global and variables are not protected. To solve that issue, the framework wraps the core features and modules in a single global Lua root table on build.

• Organisation - Directories and files in source code are represented as keys in the global root table. E.g. MyModule/MyFeature.lua in source is ROOT.MyModule.MyFeature in Lua runtime.

• Less Boilerplate - usually an add-on can be a single Lua file, but some features are only available for XML, TOC or specific Lua files. The framework has optimised patterns for those features. Everything can be configured individually for each addon and all the tedious code will be generated. I used Pug for XML generation and custom parser for Table of Contents (TOC) files.

• Databases - the only way to keep large amounts of static data is loading data as Lua tables in memory on start. The framework uses YAML files for databases. On build, .yaml is converted to Lua tables and injected into add-on files.

• Quick Reload - WoW loads individual files only once on application start. It also has a function to reload UI components without full restart. Reloading UI doesn’t load new files, but does reload the content of already loaded ones. I used that feature to create quick reload with nodemon. The framework wraps the whole addon in a single Lua file and just rebuilds it, now testing an UI feature in game feels like refreshing pages in a browser - no need to waste time on restarts.