
## What

Web development, particularly frontend development, is a chaotic space. From browser wars to framework wars, from the revealing module pattern to the birth of EcmaScript Modules, we are seeing a common theme, that is the pursuit of standardization and modularization. 

Web Components is such an initiative. It aims to standardize the building blocks of UI component development. It's not a framework like React.js or Angular, but a set of Web standards. It provides building blocks crucial for achieving encapsulation of both style and logic. It is a union of a bunch of specs, including **Shadow DOM**, **custom elements**, **HTML templates** and **some CSS features** tailored for use in Web Components.

For a living example of a simple Web Components UI library, you can take a look at my [Fantasia UI library](https://github.com/paladinze/fantasia). It illustrates a possible UI library development setup with somewhat decent DX. It was created to unify and facilitate reuse of some common components across my personal projects.

## The call for a unified component system
![one ring to rule them all](/assets/blog/web-component/one-ring.png)

The concept of UI components is nothing new. So is the concept of module systems. I would argue module systems are the basis of the rise of UI components. Their development and maturity are highly correlated. Modules provide the necessary means to package and encapsulate code, but have no tool for encapsulating styles on their own.

In the early days of Dojo Toolkit and AngularJS (Angular 1.0), a lot of efforts was on "supercharging" the HTML and utilizing the best module system approach (such as AMD and UMD) available at the time to encapsulate JavaScript and UI logic. The general approach is simple. Component libraries like Bootstrap provided UI elements by selectively grouping CSS together, and sprinkling some JavaScript on top.

Shortly after, React.js and Angular 2.0+ came out, both advocating for component-centered development in the form of declarative UI composition, convenient data binding, virtual DOM and modern tooling. However, the two crucial pieces of the puzzle is still missing, encapsulating styles and standardization.

## The State of UI Components

After Angular and React, the number of UI libraries exploded. We now have a bunch of UI libraries targeting every possible frameworks, each guided with its respective design system. With CSS modules, CSS-in-JS solutions and similar CSS scoping solutions, CSS has finally achieved some modularization through build process.

However, one cannot simply port a React component to an Angular app, since neither implementation is native to the browser. And library CSS is still not safe from the outside world (the light DOM) even with id hashing the carefully chosen CSS selectors. Not to mention, we even have some WebGL or WebGPU based 3D components that doesn't play with mainstream frameworks to begin with. This naturally gives rise to a more standardized approach, which is **Web Components**.

## The building blocks of Web Components
![building blocks of a web component](/assets/blog/web-component/building-blocks.png)

Web Components is actually the name given to a collection of Web standards.

The following is its core building blocks:

- **Custom elements**: custom native HTML elements or extended HTML elements
- **Shadow DOM**: DOM and style encapsulation 
- **CSS features**: CSS custom properties, `::part` pseudo-element selector, `:host` pseudo-class function etc.
- **Custom events**: custom DOM events that can be emitted from the web component and listened to from outside

There are roughly two types of Web Components:
- **Autonomous custom elements**: new custom element
- **Customized built-in elements**: extended builtin element

These features are quite powerful, because they allow developers to introduce new HTML elements that are respected by the browser natively and encapsulate styles within the new element, safe from modifications from the outside. They even allow for customization of existing HTML elements and supercharge them with additional functionalities.  

### Example: Customized built-in elements

To quickly demo the power of custom elements, this simple example shows how to enhance a native `<a>` tag with a confirmation on click.

```javascript
class SuperA extends HTMLAnchorElement {

  connectedCallback() {
    this.addEventListener('click', (event) => {
      if (!confirm('Are you prepared to leave?')) {
        event.preventDefault();
      }
    })
  }
}

window.customElements.define('super-a', SuperA, { extends: 'a' });
```

usage in HTML
```html
<h2>extend built-in tag</h2>
<a is="super-a" href='https://google.com'>A Super Link</a>
```

## A low-level standard with modern tooling
![stencil.js](/assets/blog/web-component/stencil.png)

Writing Web Components using its native API and lifecycle methods is very verbose, since it is basically raw DOM manipulations with localized CSS. To achieve better dev experience and wider adoption, an abstraction of some kind is a must. [Stencil.js](https://stenciljs.com/docs/introduction) is such an example. It is a compiler for Web Components with modern dev tooling.

Some of Stencil's main selling points include:

- tiny API surface 
- embrace modern module features
    - ESM
    - dynamic imports
- build-time tooling
    - JSX
    - TypeScript
    - not rely on framework during build time or runtime
- browser support
    - native support on most (partial support for IE11)
    - auto polyfill when needed

Here is an [awesome list](https://github.com/mappmechanic/awesome-stenciljs) of projects based on Stencil, while [Ionic](https://ionicframework.com/) is probably one of the most notable project using it.

## Design once, integrate everywhere
![integration](/assets/blog/web-component/integration.png)

ShadowDOM and custom elements by themselves are just independent building blocks that can be employed in any framework. For example, Angular can opt for Shadow DOM instead of the default Scoped CSS solution in terms of modularizing CSS. However, the real strength of Web Components lies in how they can be used as standalone implementations or the single source of truth of an UX design and later integrated with projects with drastically different tech stacks.

One possible strategy for achieving this setup:

- define the design
- create Web Components library using a compiler such as Stencil (published as a library, such as `@paladinze/fantasia`)
  - use design as the source of truth
  - encapsulate most of the UI logic and CSS
  - expose methods, events, CSS `::parts`, CSS custom properties for customization
- create very thin wrapper libraries for each tech stack targeted  (published as a library, such as `@paladinze/fantasia-react`)
  - use Web Components library as the source of truth
  - solve framework specific issues
- integrate
  - application just need to import from wrapper library (e.g. `@paladinze/fantasia-react`) directly.
  - customization done through interfaces exposed by the web component library


## Summary

As someone suffered a lot from framework fatigue, Web Components on the surface, looks just like another "framework" (even though it's not 😏). I am never too optimistic about any framework, as they usually come and go fairly quickly. 

Web Components, as an approach to standardize component development, might suffer the same fate if it does not see wide support and adoption. But I am reasonably optimistic in this case, because at the very least, its building blocks are worthwhile to learn, and they are already used one way or another in existing frameworks.


One Component to Rule Them All


## What

A WebGL-based 3D landing page for the portfolio.

## Features

- HTML and WebGL merging
  - HUD display
  - iframe embedding
  - HTML rendering
  - State managed through React and R3F
- staging
  - dynamic lighting using ambient, directional, spot lights
  - environment map
- animations
  - custom GLSL shaders for special effects
  - react spring based animation
- SDF-based text rendering
- models
  - GLTF models (with draco compression)
  - model animation
- tuning and debug
  - parameters tuning using Leva
- an easter egg


Zefolio


## What

An experiment on GLSL shader and Perlin Noise

The implementation for noise function is borrowed from [patriciogonzalezvivo/GLSL-Noise.md](https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83) 


## Noise on a sphere 

### Noise on wireframe  
![Noise on a wireframe](/assets/blog/perlin-noise/screenshot-6.png)


### Noise on vertices with UV

- mapping fragment color to UV
- changing vertices using noise

![Noise on a sphere](/assets/blog/perlin-noise/screenshot-1.jpg)

## Noise based on distance from origin

![Noise based on distance](/assets/blog/perlin-noise/screenshot-5.png)

## Simulate wave-like behavior

### wave-like behavior on a sphere
![wave-like behavior on plane](/assets/blog/perlin-noise/screenshot-7.jpg)

![wave-like behavior on plane](/assets/blog/perlin-noise/screenshot-3.png)

## Finally, apply the noise on image texture

### the original image
![original image](/assets/blog/perlin-noise/screenshot-9.jpg)

### change texel position
![change texel position](/assets/blog/perlin-noise/screenshot-4.png)

### apply noise on the texture plane
![apply noise on the texture plane](/assets/blog/perlin-noise/screenshot-10.png)

### change texel position with noise
![texel position with noise](/assets/blog/perlin-noise/cover.jpeg)



Perlin Noise


## What

A simulation on rigid body collisions of instanced meshes based on react-three-fiber and the Rust rapier library using WASM.

## Features
![Noise on a wireframe](/assets/blog/rigid-body-collision/screenshot-1.png)

- visualizing colliders and how their shapes affect collisions
- measure the performance impact of having many rigid bodies
- adjust global gravity to create floating effects
- create shockwaves by applying impulses on each rigid body
- exploring approaches of resetting (teleporting) dynamic rigid bodies

## visualizing colliders

![colliders](/assets/blog/rigid-body-collision/screenshot-2.png)

- colliders are the key to collision detections
- colliders are auto-generated using `box` primitive in Rapier
- they can also be overridden using a combination of custom geometries (useful for custom models)

## collision stress test
![more colliders](/assets/blog/rigid-body-collision/screenshot-4.png)

- since Rapier is based on Rust and ported to Web using WASM, its performance is visibly better than other JS-based libraries in the same domain, such as cannon-es.
- the performance was great with thousands of primitive meshes.

## create shockwave effects using simple impulses

![colliders](/assets/blog/rigid-body-collision/screenshot-5.png)

![colliders](/assets/blog/rigid-body-collision/screenshot-3.png)

Creating the shockwave effect is surprisingly simple, just need to loop through all the instanced rigid bodies and apply some kind of impulses (average net force times by time) on each of them.

## more than just meshes
Rigid bodies are not just meshes, they are representations of objects that encapsulates attributes of non-deformed objects. Things like repositioning (translating) items is much more involved in a world with physics. 

One can not just change a rigid body's position, since it would just teleport the object, while leaving its linear velocity and angular velocity unchanged. Depending on use cases, these attributes might need to be adjusted as well. Besides dynamic objects, there are also kinematic objects, they don't subject to the same physics constraints, but needed to be carefully taken care of to look natural 😜 .




Rigid Body Collisions


## What

This is an in-house Web3D editor project inspired by José Ferrão's [nunuStudio](https://github.com/tentone/nunuStudio). It modernized and improved on many aspects of the original design, while borrowing ideas from other web-based WebGL frameworks/editors such A-Frame and PlayCanvas. Here are some of the highlights:

- **Code editor**: integrated with Monaco editor for JavaScript and GLSL shader editing, with syntax highlight and auto-completion support for Three.js. 
- **Scene editor**: implemented realtime editing and inspection of Three.js scene objects, with full parameters support. 
- **Material editor**: improved support for inspecting and previewing materials and textures. 
- **Editor framework**: implemented serialization and caching using IndexDB. Implement save, import and export features.

## Scene editing
![Editor Screenshot](/assets/blog/web3d-editor/scene-editing.png)

## Post-processing
![Editor Screenshot](/assets/blog/web3d-editor/post-processing.png)

## Standalone deployment
![Editor Screenshot](/assets/blog/web3d-editor/standalone-deploy.png)




Mirage Web3D editor


## What
This is a summary of my personal experiences in working with JavaScript based monorepos at work and in personal projects. Since the concept of monorepos wasn't invented until the start of the 21st century, what I write here may not stand the test of time. Please take everything with a grain of salt.

For a living example of a modern JavaScript monorepo, you can take a look at my personal [Nx-based digital garden](https://github.com/paladinze/guts).

## The Birth of monorepo
![folder](/assets/blog/monorepo/folder.png)

At the very beginning, monorepo was purely a way of organizing code. It was more of a coding practice than hard science. The trend started when some smart guy discovered that he/she can put all his/her code into a single folder and upload them to a remote version control tool (possibly Perforce back then). 

However, despite its humble beginning, monorepo today carries way more importance than just code organization. It's now the basis of CI and CD, and it's also the infrastructure that glues all modern coding practices and digital assets together.

## Why monorepo today
![youtube comments](/assets/blog/monorepo/comment.png)

Different engineers and organizations have different views on monorepos. There are also many solutions in this space, with vastly different goals. Google, Microsoft and many other tech giants have their in-house build and code management solutions. It's their means to manage overwhelming amount of code assets. But apparently, not everyone is convinced with [this approach](https://youtu.be/W71BTkUbdqE). The massive infrastructure cost and human resource cost may not justify the investments. At least it's a decision that needs to be constantly debated.

To provide a dev experience on par with polyrepo, custom file systems, custom build systems (e.g. Bazel) and custom version control systems (e.g. Piper) needs to be built. Additionally, there needs to be new ways of managing and testing change-sets, new ways of managing permissions and conducting code reviews.

In contrary to many of the reasoning behind large tech companies adopting monorepos, many developers in the JavaScript ecosystem want monorepos because they want seamless integrations between tools that are currently scattered all over the place. They want to streamline the build and deployment process and make them configurable with the same set of rules. They want project boilerplate that just works, instead of spending most of the time struggling with configuring linters, style checks, type checks, build rules and dev frameworks.

## The tool of choice
![comparison](/assets/blog/monorepo/comparison2.png)

In the JavaScript space, the three most popular tools are Lerna, Nx and Turborepo. Here is a summary of their current states (2020-03) and my tool of choice (listed in the order of preference).

- **Nx (by Nrwl)** (my pick)
  - feature complete
  - rapidly evolving
  - proven track record through the Angular ecosystem (core members are from the Google's Angular team)
- Turborepo (by Vercel)
  - feature is currently a subset of Nx (but with similar roadmap) 
  - rapidly evolving
  - backed by Vercel (which is also behind Svelte and Next.js)
- Lerna (originally developed by Daniel Stockman, currently managed by Nrwl)
  - the oldest in the list
  - widely adopted (e.g. Babel is based on Lerna)
  - a tool for code organization, but lacks modern features (e.g. deep dependency analysis, build optimization, sharding caching)


## Why Nx and why it might not be your cup of tea

### The Good
![good](/assets/blog/monorepo/dep-analysis.jpeg)

- Killer features for everyone
  - deep dependency analysis => only build and test what you changed
  - automatic process-level caching => don't build same thing twice
  - task orchestration => npm script becomes reusable and sharable plugins
  - pre-configured scaffolding tools for common tech stacks 

- Killer features for organizations
  - shared caching => save public compute resource
  - near real-time dependency visualization => visualize impact of every change

### The Bad and Ugly
- code generator is opinionated and hard to extend
  - Nx standardized boilerplate creation through `generator` and `executor` plugins
  - the plugins sometimes have functionality that is very hard/impossible to change (e.g. webpack, rollup config), though they work for non-advanced use cases
- the plugins tend to lag behind latest versions
- hard to incorporate new tech stack (e.g. vite) into the system, unless invest in developing custom generator and executors
  - not always a small investment, as one have to maintain and test the plugins for future versions
- Nx and its dependencies (plugins & generators) need to be periodically migrated to newer version)
  - there could be bugs and incompatibilities may arise in the process.
- Dependency can only have a single version. (Inherited from Google's single version rule)
  - understandable for preventing legacy code, but needs lots of discipline to execute correctly in large scale.

## Poor man's silver bullet to personal project management

![good](/assets/blog/monorepo/silver-bullet.jpeg)

There <strong>are</strong> silver bullets in this world, as long as you can reduce the problem space with proper constraints. For personal projects working with common tech stacks that need reasonably optimized build and linter rules, tools like Nx and Turborepo are real godsends.  


## Examples of frontend monorepos
- [NativeScript](https://github.com/NativeScript/NativeScript): hybrid development framework
- [Storybook](https://github.com/storybookjs/storybook)：UI discovery and showcase
- [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint): TS support for ESLint
- [Babylon](https://github.com/BabylonJS/Babylon.js)：Web3D game engine

## Further reading
- [introduction and comparison of Monorepo tools](https://monorepo.tools/)


To Monorepo or Not To Monorepo


## What

An Eslint formatter that only shows what matters

## Features
- no over-reporting: only show top errors and warnings.
- identify bottlenecks: rank rule violations by their occurrences with intuitive distribution chart.
- actionable summary: clearly state and highlight must-fix issues.
- detailed errors：list top files with errors with clear rule name and file path.

<img width="750" alt="formatter demo" src="https://github.com/paladinze/eslint-formatter-bottleneck/blob/main/screenshots/demo.png?raw=true">


## Attribution

This package is inspired by [eslint-summary-chart-formatter](https://www.npmjs.com/package/eslint-summary-chart-formatter) and [eslint-formatter-stylish
](https://www.npmjs.com/package/eslint-formatter-stylish)


Bottleneck ESLint Formatter


## What

![qq-browser](/assets/blog/qq-browser/browser-list.jpeg)

QQ Browser is one of China's top mobile browsers with more than 50 million active users. As one of the main frontend dev on the team, I collaborated with the native iOS/Android teams, backend teams and search algorithm teams to maintain and develop the UI of the main tab (feeds tab).

## Features and app structure

The UI of the home tab alone is the joint efforts of multiple teams with vastly different technical backgrounds. It spans search, news articles showcase, video playback, ADs, mini-program hosting and many more areas. To make the design even more challenging, the home tab is also the host for many sub-channels, for which it needs to manage initialization, module preloading, data fetching and more. 

### Functional features
![qq-browser](/assets/blog/qq-browser/video.jpg)

Here is a short list of the key functional features:

- showcase news articles with vastly different styles and rules
- auto-playback and auto-pausing of videos corresponding to scroll actions
- let user enable/disable sub-channels
- store and react to user preferences and bookmarks
- deep links into other apps or mini-programs in the Tencent ecosystem
    - WeChat mini-programs
    - Tencent games
    - search results for popular keywords
- dark mode support and theming support

### Technical features

- UI performance optimization
  - pre-loading
  - pre-rendering
  - offline bundles
  - snapshotting
  - client-side caching
- managing the lifecycle of sub-channels
  - initialization
  - preloading
  - unmount
- collecting anonymous action data for machine learning models
  - feeds suggestions
  - search optimizations 
- dynamic bundle updates
  - transparently updates JS bundles without app update
- build and test
  - ESLint static testing
  - Jest Unit tests
  - CICD optimization
- monitoring and observability
  - OpenTelemetry-based tracing
  - mobile logging
  - web logging
  - log visualization and alert

## Key takeaway

This is one of the most complex projects I have ever worked on. It accumulated so many UI components (legacy or not) through the past 5 years, to the point that the components need to be numbered instead of properly named 😱. However, I also learned quite a lot through this project. It's hard to sum them up in one paragraph, but here the main ones:

1. Optimization is never enough, but preloading is your best bet.
2. People are never tired of lists, they are the most important UI components and data structures.
3. Coupling sucks, unless absolutely necessary, avoid deep inheritance, be wary of side effects. 


QQ Browser Mobile


## What

A crawler for Flutter's [pub.dev](https://pub.dev/) website

### Key Data

The simple crawler collects the following for the **Most Liked** packages

- number of likes
- project health (aka. pub points)
- popularity
- developer
- version
- null safety status
- supported platform
- official recognition (aka. flutter favourite status)


### Shortlist

The crawler will also collect data for **a subset of packages**, such as

- official packages from `Google`, `Flutter`
- `Firebase` packages
- `state management` packages


### Hybrid landscape

A list of hybrid tech stack used by leading brands.

Currently only stats for the hybrid lanscape in **China** is collected.



Best of Flutter


## What

A simulation of galaxy using Three.js particles. It turns out particle rendering is very performant despite a large number of them are used. 

## Tunable parameters
Many of the parameters can be adjusted and further remixed, such as:

- number of branches
- number of particles
- inside and outside color of the spiral


Galaxy Particle Simulation


## What

A distortion effect achieved solely using WebGL GLSL shaders. Bloom effect is achieved through post-processing of Three.js.

## Before and after comparison

![Before and after comparison](/assets/blog/starcraft-shader/before-after-compare.png)


Starcraft distortion shader


## What

This is a port/re-write of an existing mobile App written in React Native to a WeChat-based mini program for the WeChat native app. 

## Why

![ecosystem](/assets/blog/farming/ecosystem.jpg)

At first glance, it may seem strange to write an app for an app, when there was already an established solution published in the market. However, it all makes sense if you consider WeChat already has more than 1.24 billion users globally. It's also the dominant social network application in China. It's so dominant to the point that many people in China would consider it as a public infrastructure or utility. To some, it is the Internet. At the moment, for all companies that wish to break into the Chinese market, starting with a WeChat mini program is a must.

## An innovation architecture

![ecosystem](/assets/blog/farming/runtime.png)

WeChat is what we call a "super app" (just like Facebook). Naturally, it provides many interfaces for triggering native functions (payment, location service) or displaying native components. As the hosting platform, WeChat is a like an Operating System in that it's in charge of creating sandboxes and orchestrate communications with the WebView. Although WeChat mini programs is based on JavaScript, **it's not single-threaded!** For performance and security reason, mini programs are designed to have two threads. One responsible for the UI (the WebView Layer), another responsible for the logic (the Logic Layer). In many situations, this setup proves to be more performant or secure compare to regular web apps.

## A port and a rewrite

### The port

![digital farming in Thailand](/assets/blog/farming/kaset-go.png)

The original app was written in React Native. Naturally, most of the business logic can be easily translated to any JavaScript ecosystem. However, RN has more freedom in terms of opening links, use cameras and even deep linking into other apps. It's also performant since RN merely control native UI components, the bottleneck mostly lies in the communication channels across the JS bridge. On the flip side, WeChat mini program has a mix of native components provided by WeChat and webview UI components, and what can be done are always restricted by the WeChat platform.

### The rewrite

<div style="width: 75%; margin: auto">
    <img src="/assets/blog/farming/entry.png" alt="drawing" />
</div>

To target WeChat and maximize reuse of existing resources, `Taro` was chosen as the main hybrid development framework. It's an abstraction that sits above all existing mini program frameworks and React Native. It's framework-agnostic in terms of UI, thanks to its runtime, which is based on Web Components (using Stencil at the time of the rewrite). 

![WeChat mini program](/assets/blog/farming/screenshot-all.jpeg)

We (mostly two developers) re-wrote the whole app in less than three months, including a backend based on Node.js, Express, Discourse and the cloud infrastructure that goes with it. 

## A love-hate relationship

As web developers, we naturally embrace the openness of the Internet. WeChat mini programs are probably on the other side of the spectrum. Technically, it's an interesting ecosystem based on Web tooling, and it's providing real values to businesses. However, it is also a closed platform with heavy censorship in terms of content creation. Regardless, a lot can be learned from its technical and commercial success. 


Mini Program for Digital Farming


## What

- A 2D space shooter game based on Unity :)
- unity version: 2019.3.0f6

![demo gif](https://github.com/paladinze/Thunderbird/raw/master/demo.gif)

## Key features

- fast-paced space shooter
- configurable waves and waypoints
- alien invaders with different attack patterns
- scrolling background using particle effects

## Potential improvements

- weapon upgrade
- protective shield
- more levels
- more music
- more explosion effects


Thunderbird


## What

![Makecode](/assets/blog/makecode/cover.png)

Graphical programming is the art of creating computer programs using visual building blocks. It is a form of low-code or
no-code programming. It doesn't have the flexibility of traditional high-level languages like JavaScript, Python or C++,
but it provides a user-friendly interface for composing code constructs. It is so accessible that even a child can grasp
the basic coding concepts and create functional software within a matter of minutes. Needless to say, it has huge
potential in areas such as education, gaming, robotics and consumer electronics.

## State of the art

![state of the art](/assets/blog/makecode/state-of-the-art.png)

Visual programming has a long history of being used as a teaching tool for computer science education. In this process,
several program emerged as the dominant tools of the field. Two most notable ones
are [Scratch](https://scratch.mit.edu/)
from MIT Media Lab and [Makecode](https://www.microsoft.com/en-us/makecode) from Microsoft. As the visual programming
ecosystem expands, these tools are now more like meta programming frameworks. They can generate Python and JavaScript
code from visual blocks, and they have integrations with all kinds of software and hardware, such as Minecraft and
robotic platforms.

Use Microsoft Makecode as an example, it is a framework for creating visual code editors. Internally, it is called
Microsoft Programming Experience Toolkit (PXT). Manny fun and powerful editors came out of it. To name a few:

- [Micro:bit MakeCode](https://makecode.microbit.org/): an editor for micro:bit microcontrollers
- [Arcade](https://arcade.makecode.com/): a small game engine for arcade games
- [Minecraft](https://education.minecraft.net/en-us/get-started): code mod for Minecraft
- [pxt-turtle](https://hwestphal.github.io/pxt-turtle/#editor): a drawing programming similar to the original LOGO
  Turtle
- [other editors](https://makecode.com/labs)

## The building blocks

![building blocks](/assets/blog/makecode/building-blocks.png)

Since most graphical programming building blocks are just visual representation of the underlying JavaScript or Python
code, they also have the concepts of variables, loops, events and conditional statements. One thing that makes visual
programming different is that they have more constraints. For example, blocks must visually fit to be used together, and
some blocks (such as certain types of event listener blocks) can only be used once.

![building blocks](/assets/blog/makecode/event-listeners.png)
![building blocks](/assets/blog/makecode/while-loop.png)

As shown above, with these tools in hand, one can do almost anything a text-based language can do: recording states,
repeating actions and reacting to events etc.. Some graphical programming editors offered by game engines, such
as [Blueprints](https://docs.unrealengine.com/5.1/en-US/blueprints-visual-scripting-in-unreal-engine/) from Unreal
engine is a testament for this.

![building blocks](/assets/blog/makecode/microbit-javascript.png)
In case interaction with other software or hardware is required, one can create adapters in the form of editor
extensions. Extensions themselves can be written using JavaScript or Python and talk to the underlying C++ code of the
hardware. Then, they can then be exposed in the visual editor to the user as new visual block. Like this, different
levels of abstractions can be made depending on the need of the application, making them suitable for low-code
applications.

## Going deeper: Hardware programming using BBC Micro:bit

Microsoft Makecode and BBC Micro:bit is a perfect union of easy to use software and small but powerful hardware. I was
surprised by the ease of use of Arduino when I first enter the wonderful world of hardware programming, but the Micro:
bit and Makecode duo give "easy to use" a new meaning.

### Micro:bit

![building blocks](/assets/blog/makecode/microbit.png)

Micro:bit is a credit card-sized microcontroller (mini computer) with a Cortex®-M0 processor and an NXP Kinetis KL26 SoC
ARM processor. It is low-powered, so a simple battery is enough to light it up.

![building blocks](/assets/blog/makecode/board-sensors.png)

In terms of sensors, it includes a 3-axis accelerometer, 3-axis magnetometer, LED lights, programmable buttons and many
more. It can be physically linked to other devices via Bluetooth® Smart Technology, or talk to another Micro:bit using
onboard radio (just like a walkie talkie).

![building blocks](/assets/blog/makecode/input-to-output.png)

Furthermore, it is possible to combine it with all kinds of input devices and actuators, such as joysticks, servos and
motors.

## The dream project: robots that shoot rockets

### The idea

![building blocks](/assets/blog/makecode/spider-whole.png)

When I first saw the tiny micro:bit controller, the image of a spider robot shooting out rockets appears in my mind.
Though it is challenging to create a mechanical platform for such robots from scratch, there are ready-made toys on the
market providing similar mechanical capabilities, just lacking a **good brain**. This is where graphical programming
comes in.

### Destructuring

![building blocks](/assets/blog/makecode/spider-head.jpg)
![building blocks](/assets/blog/makecode/spider-movement.png)
The first step of innovation is destructuring (reverse-engineering). The above are some pictures I took when dissecting
a toy. The spider platform is powered by two DC motors, while the rocket launcher platform has another two DC motors for
adjusting pitch and firing.

### Brain transplant

![building blocks](/assets/blog/makecode/spider-program.png)
The making of the brain is much easier than anticipated. Micro:bit as the brain provides the thinking power. Since it
has built-in radio transmission capabilities and supports two-way communication. Using two Micro:bit together can easily
achieve remote control. Additionally, To make the robot move, shoot and adjusting turret pitch and rotation, it is as
simple as setting a rotation speed for the DC motors in the visual building blocks. After gluing the logic together using
event listener blocks, we have a smart robot in less than an hour. 








Graphical Programming


## What

A simple experiment of 3D text rendering, matcap material and geometry reuse.


3D Text with Matcap Material


## What

A **not-for-profit** course review app designed for South West Jiaotong University.

## Main features

- **course**
  - course name
  - prof info
  - homework & exam info
- **review** 
  - post and showcase review
  - tagging
  - common user interactions (like, dislike, collect) 
- **rank** 
  - a custom algorithm for evaluating course score (similar to IMDB) 
  - ranking for profs and courses based on multiple indicators
- **authentication**
  - anonymous guest account
  - JWT authentication
  - role-based authorization


Huoshui Course Review


## What

A simple block breaker game made with Unity.

## Demo

![demo gif](https://github.com/paladinze/UnityBlockBreaker/raw/master/block_breaker_02.gif)


Block Breaker


## What

A remix of Gabriele Cirulli's 2048, with a twist.


2048 - Angel Attack


## What

This is the main fundraising website for Mon Sheong Fundation's annual **Cathay Ball fundraising event** (2015). Its templates, page builder capability and backend are partially reused in events of the following years as well.

Mon Sheong Fundation is one of the biggest charitable organization in Toronto, Canada. Held every November, the [Cathay Ball](https://www.monsheong.org/news-and-events/annual-events/cathay-ball/) event is the pinnacle of its fundraising efforts. This website is the primary source of event details and event tickets.

## Features
![showcase](/assets/blog/charity/screenshot-2.png)

- a visually pleasing way of display different aspects of the event
  - ticket details
  - event schedule
  - raffle
  - event info
  - sponsors
  - Twitter images
- support online donations
  - Paypal integration
  - Chase bank integration
- generating tickets for successful donation
- backend for accountants to track tickets sold

## Showcase
![showcase](/assets/blog/charity/screenshot-1.png)
![showcase](/assets/blog/charity/screenshot-3.png)
![showcase](/assets/blog/charity/screenshot-4.png)
![showcase](/assets/blog/charity/screenshot-5.png)


ZE.

Thoughts, Stories and Dreams