Projects

CodingBooth

CodingBooth delivers fully reproducible, isolated development environments — anywhere, on any machine. Run a browser-based VS Code workspace, a Jupyter notebook, or even an entire Linux desktop inside a container, with every file owned by you, not root. The container's user is mapped to your host UID and GID, so files you create or modify inside the booth are owned by you on the host, just as if they were created locally.

Your environment lives with the project: a single .booth/ folder defines the toolchain, and one command brings up the exact same setup on any teammate's machine. No setup guides, no dependency drift, no “works on my machine.”

Install and try:

# Install
curl -fsSL https://raw.githubusercontent.com/NawaMan/CodingBooth/main/install.sh | bash

# Try an example
booth example try snake-zig my-snake
cd my-snake
booth

CodingBooth ships with multiple variants — base, notebook (Jupyter), codeserver (browser VS Code), desktop-xfce, and desktop-kde — plus a declarative Boothfile format that compiles to a Dockerfile. This very blog you're reading uses CodingBooth to host its Svelte + Firebase dev environment.

GeekPresent

GeekPresent is for people who'd rather write HTML than wrestle a slide editor. You build presentations with HTML, CSS, and Svelte components — each slide is its own SvelteKit route, the whole deck is a static site, and it deploys straight to GitHub Pages. If you already know front-end, you already know how to make slides.

You design on a fixed 1280×720 canvas and place things with normal CSS — including pixel-exact absolute positioning, where left: 640px means the same thing on every screen — and the framework scales the whole slide to fit any window. List your slides once in pages.ts, and arrow keys, the on-screen nav bar, and the Table of Contents are wired up for you.

// src/routes/slides/pages.ts — define the order, then add a folder per slide
export const pages = [
    { path: "title.html", title: "Title" },
    { path: "intro.html", title: "Introduction" },
    { path: "demo.html",  title: "Demo" },
];

Each slide is just a Svelte component, so state, events, and reusable pieces work as usual:

<script>
  import ContentPage from '$lib/templates/ContentPage.svelte';
</script>

<ContentPage title="Introduction" subtitle="What we'll cover">
  <ul>
    <li>First point</li>
    <li>Second point</li>
  </ul>
</ContentPage>

Because each slide is its own route folder, slides diff cleanly one file at a time and can colocate their own assets. A SCALED / FIXED toggle lets you present scaled-to-fit or pin the canvas 1:1 with speaker notes, a </> Source button pops a slide's own source so the deck documents itself, and the same components also compile into a long-form, scrollable Text — give the talk, then publish the reader-friendly version with no rewrite.

FunctionalJ

FunctionalJ is a library for writing functional style code in Java. It aims be a practical expansion to functional programming added in Java 8. FunctionalJ is a pure Java library with all code written in Java so its usages will be just like other Java library. No additional build steps or tools are required outside of adding dependencies. FuncionalJ works with Java 8 and up.

@Struct
void Employee(
        String firstName,
        String lastName) {}

@Struct
void Department(
        String   name,
        Employee manager) {}

...
val departments = FuncList.of(
        new Department("Sales",   new Employee("John", "Doe")),
        new Department("R&D",     new Employee("John", "Jackson")),
        new Department("Support", new Employee("Jack", "Johnson"))
);

// Prints: [Doe, Jackson, Johnson]
System.out.println(departments.map(theDepartment.manager.lastName));

The code above show a few feature of FunctionalJ. One is the Struct type. Struct annotation generate a value object class which are immutable and null strict. Struct also comes with lens (which is seen used in the code as well), quick validation and exhaustive builder. Another feature shown here is the lazy-evaluated immutable functional list. Learn more at FunctionalJ.io.

DefaultJ

DefaultJ is a Java library to provide a default value of any class. It support multiple strategies of getting the default value. It can be use as a simple but powerful dependency injection utility. In that aspect, it injects value base on the class, very much similar in principle with Guice. How DefaultJ has may ways specifying default value. And this is done within the code without external configuration. Even better, the code can specify the way to use default without depending on DefaultJ. Only when a code requries the default value, DefaultJ is then needed.

public class Car {
    @Default
    public static Car newInstance() { return new Car(); }

    public String go() {
        return "Zoom!";
    }
}

public class Driver {
    private Car car;
    public Driver(Car car) {
        this.car = car;
    }
    public String drive() {
        return car.go();
    }
}

...
Car myCar = DefaultProvider.instance.get(Car.class);
assertEquals("Zoom!", myCar.go());

Driver myDriver = DefaultProvider.instance.get(Driver.class);
assertEquals("Zoom!", myDriver.drive());

As you can see, DefaultJ can get default values of the Car and Driver. In case of Car, since there is @Default on a static method that return Car, DefaultJ use that to create an instance. In case of Driver, its has a constructor requiring a Car instance so DefaultJ create a Car instance and use that to create a Driver instance. Calling default constructor is one of the strategy DefaultJ uses. Factory method is another strategy. DefaultJ has 14 built-in strategies for getting default values.

It is important to note that DefaultJ does not require the annotation @Default to be from DefaultJ. The annotation can be from any package. It just has to have RUNTIME retention. This allow any code to specify default value providing strategy without depending on DefaultJ.

NullableJ

Java Utility used to deal with 'null'. It is designed to used with Lombok @ExtensionMethod. This means it will be the most beneficial when used with @ExtensionMethod although you can use the utilities without that. The use of Lombok's extension methods particularly magnify the value of null-safety done to all the utility methods.

For example, you can write code like this:

// string CAN BE NULL.
return string._whenMatches("^[0-9]+$").map(Integer::parseInt).orElse(-1);
//            ^^^^^^^^^^^^

The above code parse the string to an int or return -1 if the string is null or does not contains an integer.

RiotComponent

RiotComponent adds methods, properties or events to the root element so that it can be accessed from the outside. Methods allow the parent element to call functions in the child elements. Properties expose settable values of the child elements to the parent. When set the child will be notified so that appropriate actions (such as update) can be done. Events will allows the child elements to notify the parent element when something happened.

Plus! In the line of the minimalist approach of RiotJs, the RiotComponent is sized less than 1K!

<count-down id='count' label='Count: ' start=5></count-down>

... the 'count-down' tag code is absent for brevity. ...

var count = document.getElementById('count')
// Use `on(...)` to listen to event `zero`.
count.on('zero', function() {
    alert('It is ZERO!')
    // `label` is a property, changing it here trigger an update.
    count.label = prompt('Enter new label (or "STOP at " to stop the timer): ', "STOP at ")
    if (!(count.label === 'STOP at ')) {
        // `restart()` is a callable method to restart the counter.
        count.restart()
    }
})

Try the above out here Live demo on jsFiddle

RiotAutoMount

RiotAutoMount listen to element insert event and check if the inserted element is a riot element. If it is, riot.mount(...) will be run on it.

Simply import the script.

<script src="riot-automount.min.js"></script>

NPM

npm install riotautomount

LayoutMode

LayoutMode helps to organize CSS rules for responsive website.

LayoutMode allows CSS rules to be organized into modes which are in turn controlled by media query. In the nutshell, LM decouple media query and the CSS rules. With LM, media queries can be created to select named modes. The modes are, then, translated to classes of body element. The actual style CSS rules can then be tied to the modes of the body.

Before

{MediaQuery} ==> {CSS rules}

With LM

{MediaQuery} ==> {modes (body.mode-XXX)} ==> {CSS rules}

As the mode appears the class on the body element, you can use that as a qualifier to style anything under body ... and that is everything.

You can also have multiple mode at the same time as they are independent. For example, you may have 'compact' and 'spacious' for different resolution and also have 'normal-contrast' and 'high-contrast' for font size and color scheme. Then at one time, the mode might be ['spacious', 'high-contrast'].

Try the above out here Live demo on jsFiddle