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:


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.

Learn More

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.

Learn More

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:

1/** @jsx renderer.create */

2

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

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

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

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

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

8

9

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

11

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

13const data = name.pipe(

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

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

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

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

18);

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

20

21const renderer = new Renderer();

22renderer.render(

23 <fragment>

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

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

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

27 </fragment>

28)

29.on(document.body);

Try It

Hero Image by Anas Alshanti from Unsplash.

Hero Image by Monika Pot from Unsplash.

Latest PostsYet Another Frontend FrameworkA Place to Blog CodingProject CODEDOCPokemon Fun

Home

On Reactive Programmingchevron_right
Yet Another Frontend Frameworkchevron_right
Other Articleschevron_right