My 2020 working projects

At the end of 2019 the project Wenyan programming was quite popular among Chinese community. I thought Cirru is capable of building something similar. I started jiuzhang-lang(or 九章编程 in Chinese) and had fun for a while. At least it’s runnable on browser and on Node.js CLI tool

Image for post
Image for post

Later I tried to fix another project of Cirru after fixing Cirru HTML, CirruScript. CirruScript was an early experiment running JavaScript in Cirru syntax. I updated dependencies and updated the REPL a bit after a break of years. It’s not useful though but might be helpful if I want to play with another REPL than CoffeeScript.

Lilac is another project since I noticed I would built myself a data validator based on skills I developed in building Respo. The core idea is the validation rules is actually a lazy tree, built up with help of functions. Functions are like lazy expressions, they do not evaluate before they got the arguments. And a lazy tree can theoretically express any structure of data. Then came Lilac. And it was quite a useful tool in my followed projects.

Since I finished a prototype of Phlox last year, I figured out I could build a very simple game based on Phlox, which is pixel-way. I got a small piece of record of playing the game released on 微博. It quite funny in the first days but turned out to be too simple and kind of boring.

Image for post
Image for post

The game pixel-way meanwhile made me feel that Phlox has bugs and Phlox is capable of building more interesting demos. So I added more shapes and components. I’m not sure but probably there were only rects and circles in Phlox before Feb and after some work in Feb and Mar now several shapes and components are provided, which can be find on Phlox Demos. Meanwhile I added Lilac in Phlox for props validation.

Image for post
Image for post

Another tiny tool I made is HN Reader. It’s simple. Just a tiny reader calling open APIs on Firebase. But I like the UI I build for myself. It’s a lot more convenient to use.

Image for post
Image for post

With help of Phlox I was able to start working on shiny demos based on PIXI, under the repo circling-tree. The name was quite random. Very soon I added several more demos to the project. The process was started in Feb but got evolved in several weeks.

Image for post
Image for post

Since Phlox got more and more components for controlling points and numbers, I could build UIs in more interactive ways.

Image for post
Image for post

Maybe you should just play the demos by yourself: http://repo.quamolit.org/circling-tree/ . I got maybe hundreds of screenshots, some of them are quite funny. I still played that a lot in Mar.

Image for post
Image for post
Image for post
Image for post

Also try…

Another thing I tried was to experiment a tiny parser based on the idea of Lilac. Previously I learnt about parser combinators and built a Clojure version of it. Debugging the parser was a nightmare since states are tremendous. I thought about collecting the information of the steps parsing the code. lilac-parser looked like a interesting way of doing visualization. Although the project itself turned out to be really slow and by no means useful in real world.

Image for post
Image for post

Another major change happened to Respo and its components. I made breaking changes in order to add a feature similar to hooks into Respo. The docs has been updated and I wrote a Chinese post explaining that. But it was breaking changes, I have to update a bunch of related projects updating the way how states are handled. And that took quite long time.

And I still find myself joy in playing with curves generated from Phlox as well.

Image for post
Image for post
Image for post
Image for post

One more thing is I noticed it would be helpful so I picked Stack Editor and updated deps and designs to make it new again. It was early version for Calcit Editor today. The implementation was a lot simpler and people may explore.

I did some improvements to Phlox by connecting to by pre-existed Cumulo projects. Added a workflow for cumulo phlox and a demo of that is Factwo, a tool with which people may drag points to draw characters, collaboratively.

Image for post
Image for post

Also two new components are added to Phlox, one is messages and the other is slider-point.

Image for post
Image for post
Image for post
Image for post

Another thing I tried with Phlox is to draw an axis showing function graphs.

Image for post
Image for post

Inside the project a DSL is used to describe math expressions, called calc-dsl. I found it interesting to have a tiny calculator doing math, so I created a standalone package running this calculator.

I did some updates to Calcit Editor and hn-reader as well, mostly trivial changes.

I bought a new Pad and tried Phlox on Chrome for Android. Turned out PIXI needs special events for tablets, so I changed Phlox to support touch events. It worked as usual.

I got a small change to try Flutter and made a very simple app for display device information, nothing more. Develop experience is quite nice for me. But I didn’t dig further.

Still I made some improvements to lilac-parser and calcit-editor. One thing to mention is the “Picker Mode” which helps in auto-completing variables from current file or namespace imports, or just random node. I iterated it for a while and now it works for some cases.

Image for post
Image for post

Later I recorded a screencast(Chinese voice) introducing Calcit Editor features to some of my friends.

https://www.bilibili.com/video/BV1zV411C76P/

Another thing I added is a tiny Chrome extension for inserting random text into input/textareas, for mocking data during development. It inserts mostly Chinese words, but also use letters and numbers randomly.

Using phlox, I made a new graph called waving-rails, still generating nice shapes with a bunch of lines.

Image for post
Image for post

Another tool I tried to make was a data viewer of EDN(like JSON but for Clojure). It was nice but turned out not to be very useful.

Image for post
Image for post

And WeChat launched new feature called “拍了拍”(pat and pat), people got addicted to that sentence creating game inside chatrooms for some weeks. I was inspired and tried to built a sentence creating game as well called Patlepat. Kind of a boring toy, but proving the usage of Cumulo’s solution.

Image for post
Image for post

When I used HCL color for picking brightness friendly colors, I added a tiny tool called Color Ring for doing that. Look shiny anyway.

Image for post
Image for post

Another task worth mentioning was a lilac-parser. I figured out it would be used as a string replacer as well, so I added such a function called replace-lilac. Quite brilliant idea I think.

There are several refinements and fixes in Calcit Editor and Respo libraries too.

To optimize performance of Respo and Phlox a bit, I added a new library called Memof, which is like function memoization solution but I added caching invalidation strategy in it. That means Respo and Phlox, also Recollect will try to have memoize their rendering functions, and removes low frequent caches. This is an essential optimization to all my rendering frameworks. The work started in June but mostly done in July, it was quite a lot refinements in different repositories.

Also I make some changes to clojars-outdated for checking deps.edn file as well.

And I made an experiment adding lifetimes of some famous people in a graph for comparing. I can zoom in/out to compare. Not useful as well.

Image for post
Image for post

Starting August I’m trying to build things in Nim, mainly a runtime for the snapshot file from Calcit Editor. At first I made some change to Calcit Editor so that it emits code in a single file of EDN. Then I worked on a library called cirru-edn trying to load that.

It’s quite different experience writing Nim after using ClojureScript for so long(although I use TypeScript at work). Nim has types and lots of new syntax, I have to learn as I need them. And I’m slowly shifting my mind to a static language, which is like syntax sugar for C. It’s quite powerful though.

That took a long while. I made some bugfix and improvements to existing libraries too, that were quick trivial compared to the complicated of Nim.

In September I mainly worked on calcit-runner, which was previously called interpreter.nim for Cirru syntax. It made use of the libraries of Cirru Parser and Cirru EDN. I used Clojure a lot, so this interpreter, the semantics of the language, is mostly learnt from Clojure. It also brought me chance to implement Macros myself, defmacro based on Cirru syntax. It was quite like Clojure’s defmacro.

Clojure has its own implementation for persistent data, actually I’m not skilled enough for know details of it’s Java implementation. So I tried to implement it in a simpler way, with Nim, but only using 3 branches. That’s why it’s called “ternary tree”. It took me quite some time to fix the bugs, and for performance, that was being looked into late in October. I’m happy that the library, structural sharing, actually works in my interpreter!

So besides calcit-runner, I added a new operator in lilac called pick-type+, which is supposed to reduce the performance penalty in or+ operator, with an extra :type field. And it would help optimizing props checking performance in Phlox.

Too much for calcit-runner and ternary-tree. I’ll update later about October…

I put last 3 months together since the work in these months are all concentrated around calcit-runner and the projects are collected at:

Quite some APIs are added to calcit-runner to make it a decent tools for runner my code, to generate HTML, to render shapes on canvas, and to do other scripting. There are several libraries I migrated from my previous ClojureScript projects:

  • Lilac, which is a data validator
  • Phlox, which is a canvas drawing tool inspired by virtual DOMs, running on Nim and Cairo. however the final code is a lot different with it’s origin, Quamolit/phlox which based on PIXI.
  • Memof, memoizations library for phlox.
  • stir-template, utility functions for generating HTML.

The most important piece is Phlox. In the first months of 2020, I made a few toys with Quamolit/phlox and now I can use calcit-lang/Phlox, the latter occupies a lot less memory, despite that it’s also simplified a lot. At first I wonder I might fail to wind up Cairo on top of Nim, but luckily Phlox is working well. Now I can draw things with calcit-runner:

Image for post
Image for post

And while I’m drawing things, it also forces me to revisit my design solutions and implementation in calcit-runner and to fix the missing pieces. Now there are 200+ operators(including aliases) implemented in calcit-runner, that makes it adequate for basic scripting(although that’s still a distance from a general programming language):

And another demo I made with Phlox is for my old project dual-balanced-ternary, which is a notation of representing value on a 2-D plane.

Image for post
Image for post

It’s not shown in the pictures but they are interactive demos for introducing dual-balanced-ternary to people. I think at least it’s already a lot better than reading my READMEs…

Image for post
Image for post

I struggled a lot, still in 2020. I’m going to be 30'y old in the summer of 2021. Life changes, while I’m still struggling. I have several friends in my age and they are making cool pieces of projects, with more solid code. I had a plan to learn PureScript and to enhance the tools I made, but like always, I found myself intrigued by those shiny and interactive pieces, and struggling to make tools for myself for reaching them. And it will still be my 2021 probably.

And happy new year!

FP, GUI & writing, tiye.me. Chinese Blog: https://segmentfault.com/blog/jiyinyiyong

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store