Eugene's Coding Blog

So this is my personal blog where I talk about tech stuff I encounter. Right now I am working on coding.blog and CODEDOC, and trying to push capabilities of JAMStack blogs to their limits.

linkLatest Posts

linkYet Another Frontend Framework

So a while back, I was working on CONNECT-platform. The web-based editor for connect platform is built using Angular, and I had a lot of headache optimizing it to a marginally acceptable level of performance. The issue was Angular's change detection, as it got pretty confused due to the rather complicated flow of data in the editor.

I ended up doing more work for pushing Angular out of my way, along with the fact that explicitly controlling the change propagation flow simply meant a lot of the benefits of Angular were already gone. As a result, I decided to create Yet Another Frontend Framework, built around explicit description of flow of change.

linkA Place to Blog Coding

Medium was not the best place to write blogs on programming to begin with, but with the paywall-or-promote-it-yourself policy, it is not the place for proper coding blogs anymore.

This drove me to start working on coding.blog, which is a semi-centralized blog-platform for programming:

• You write markdown and use an open-source stack to build your blog. This means you maintain full ownership of your content, can publish it anywhere, move it anytime, etc, while being able to create elegant and feature-rich blogs for programming with the same convenience of Medium.

• You can then publish your blog also to coding.blog, which gives you a nice domain <your>.coding.blog, and spreads the word about your writings so that you can keep focused on writing quality pieces. It will also provide features for direct financial support by the community and revenue sharing through curation subscriptions.

The blog you are reading now is (rather obviously) a coding.blog blog. We are scaling up our operation to allow everyone to seamlessly create their own coding blog, but for now you can enlist in our prospective creators list and reserve your preferred subdomain.

linkProject CODEDOC

Doing lots of open-source projects, I felt the need for a proper modern and convenient but extremely customizable documentation tool, so I created CODEDOC.

linkPokemon Fun

Just for the fun of it, have this snippet of a simple frontend that gets pokemon information from their name, using CONNECTIVE HTML and RxJS:

1link/** @jsx renderer.create */

2link

3linkimport { Renderer, ref } from '@connectv/html';        // @see [CONNECTIVE HTML](https://github.com/CONNECT-platform/connective-html)

4linkimport { ajax } from 'rxjs/ajax';                      // @see [RxJS](https://learnrxjs.io)

5linkimport { BehaviorSubject, merge } from 'rxjs';         // @see [RxJS](https://learnrxjs.io)

6linkimport { switchMap, debounceTime, mapTo, map, share } from 'rxjs/operators';  // @see [RxJS](https://learnrxjs.io)

7linkimport { not } from 'rxmetics';                        // @see [RxMetics](https://loreanvictor.github.io/rxmetics)

8link

9link

10linkconst POKE_API = 'https://pokeapi.co/api/v2/pokemon/';

11link

12linkconst name = new BehaviorSubject('charizard');

13linkconst data = name.pipe(

14link  debounceTime(300),                                                     // --> wait a bit until typing is finished

15link  switchMap(name => ajax.getJSON(POKE_API + name + '/')),                // --> get pokemon info

16link  map(res => JSON.stringify(res, null, 2)),                              // --> make it presentable

17link  share(),                                                               // --> share it so we don't do multiple requests

18link);

19linkconst loading = merge(name.pipe(mapTo(true)), data.pipe(mapTo(false)));  // --> when typing, loading is true, when data is here, its false

20link

21linkconst renderer = new Renderer();

22linkrenderer.render(

23link  <fragment>

24link    <input type="text" placeholder="pokemon name" _state={name}/>

25link    <pre hidden={loading}>{data}</pre>

26link    <div hidden={not(loading)}>Loading ...</div>

27link  </fragment>

28link)

29link.on(document.body);