Kojin Glick

The Hollowcene

Fri May 16 2025 19:14:34 GMT-0700 (Pacific Daylight Time)

A peculiar hollowness has settled over our collective experience, a phenomenon that I would like to call "the Hollowcene." The term emerges as a necessary addition to our epochal lexicon, not merely as a clever neologism but as recognition of a profound shift in the texture of human existence, one that rivals the geological and biological transitions that have punctuated Earth's history.

The evidence surrounds us, if we care to notice it. Consider the eerie familiarity of scrolling through online spaces that seem populated yet oddly vacant: digital town squares where conversation flows continuously but often without the friction of genuine human exchange. The phenomenon known as "Dead Internet Theory" posits that vast swaths of online content are now generated by algorithms rather than people, creating the simulacrum of human culture rather than culture itself. Similarly, the internet folklore of "the Backrooms" captures our collective unease: endless, identical yellow corridors of corporate carpet and buzzing fluorescent lights, a purgatory of the mundane where one might wander forever without encountering another soul. The scenes feel familiar but lost, a bowling alley from a late 90s early 00s birthday party, yellowish wallpaper on a dentist's walls.

What distinguishes the Hollowcene from mere cultural malaise is its ontological dimension. Just as the Anthropocene marks humans becoming a geological force, reshaping the physical and biological world, the Hollowcene represents a fundamental alteration in how culture itself is constituted. The late cultural theorist Mark Fisher identified this condition as "hauntology," a state in which we find ourselves haunted by futures that never arrived, endlessly recycling nostalgic visions of pasts that never existed. We have, in effect, become unstuck in time, unable to imagine genuine futures while constantly revisiting simulations of memory.

The significance of naming this condition extends beyond academic exercise. The hollowing out of experience represents a rupture as consequential as the advent of agriculture or the Industrial Revolution: a restructuring of consciousness itself. When algorithmic entities can mimic human creativity, when digital spaces feel simultaneously crowded and abandoned, when the uncanny valley expands to encompass entire realms of interaction, we have entered a new relationship with reality that demands recognition.

Our experience has become increasingly mediated, creating a persistent layer of removal from direct engagement. This mediation is not merely technological but ontological, a transformation comparable to how writing once reshaped human cognition. The pervasive sense of unease, the feeling of navigating through empty replicas of meaning, constitutes a shared psychological condition that defines our era. We find ourselves like explorers in the Backrooms, surrounded by the familiar made strange, sensing that something fundamental has been extracted from beneath the surface of experience. In the Backrooms, the comforts of the past linger past their welcome. They're not supposed to be here, and yet their forceful assertion in this non-place makes us question the soothing sensation of familiarity.

In the Hollowcene, individuals have been given everything they want, so long as they allow a wall between ourselves and others. As long as you allow Meta, or X, or Snap mediate your relationship, your dopamine system will never go unused. But after a while, we started to mistrust the strange sounds from beyond the wall.

Indeed, the parallel to the Greek underworld is uncannily apt. We have become shades wandering the asphodel meadows, each of us insubstantial, each passing through one another without true contact. Like the souls in Hades who drink from Lethe to forget their former vitality, we sip continuously from streams of content that provide momentary salience while eroding memory. The mythic river Styx that separates the living from the dead finds its contemporary analogue in the interfaces that promise connection while ensuring separation, offering simulacra of intimacy that leave us perpetually unfulfilled. Plato's allegory of the cave finds renewed relevance as we mistake shadows on walls for reality, arguing fiercely about projections while remaining chained in place. The Hollowcene has transformed us into Tantalus figures, forever reaching for human connection that remains just beyond grasp, or perhaps into Sisyphean strivers, endlessly pushing the boulder of our curated personas uphill only to watch them roll back down with each refresh. What the ancients understood as divine punishment, we have somehow reimagined as technological progress, building ever more elaborate systems to maintain our isolation while convincing ourselves that we have never been more connected. The phantoms and wraiths of Greek mythology now take digital form, as we increasingly interact with algorithmic approximations of humanity, wondering why the exchanges leave us feeling so bereft of warmth.

The Hollowcene, then, represents not just cultural critique but an attempt to understand a critical juncture in human civilization, one that will leave as permanent a mark as any geological shift, even if its traces are not visible in strata of rock but in the architecture of consciousness itself. To define it is to begin the necessary work of understanding how to exist meaningfully within it, or perhaps how to find our way out of those endless, empty corridors.

The Intentional Toolmaker

Mon Feb 17 2025 22:52:55 GMT-0800 (Pacific Standard Time)

In the grand tradition of design philosophies, from the Unix credo to the Bauhaus ethos, there emerges a new paradigm for crafting tools that harmonize human and machine intelligence. We propose Intentional Tooling as a guiding principle for innovation – an approach that seeks to augment, rather than diminish, our capacity for intentional thought.

The tool-user dyad is not a zero-sum game, where one's gain is the other's loss. Rather, it's a symbiotic dance, where each partner informs and elevates the other. The pencil, that humble harbinger of creativity, exemplifies this synergy. It’s often said that notes are better remembered if they were written down, rather than typed or stored in our constantly-overwritten mental RAM. By our physical intervention on a medium that maps shapes to concepts, the pencil’s simplicity belies the complex mental calculations it enables – a testament to the transcendent power of human imagination.

But as we've progressed from physical to digital tools, our design philosophies have often prioritized expediency over intentionality. We've created instruments that amplify our baser tendencies, rather than nurturing our highest cognitive faculties. The social media feedback loop, for instance, has distilled interaction into a shallow distillate of clicks and likes – an alembicated reduction that belies the depths of cognitive transformation it's wrought upon us.

Here, we must acknowledge our own fallibility in mediating humanity's worst instincts. Be they our most evil thoughts, or our captured public institutions, we have failed to effectively align humans, let alone our generative creations. We're not omniscient judges of machine intelligence; rather, we're flawed collaborators, striving to create tools that elevate our shared potential.

Intentional Tooling seeks to reverse this trend by designing tools that promote, rather than degrade, intentionality. This means crafting instruments that:

Amplify Cognitive Frictions: Tools should introduce cognitive dissonance, prompting users to reconcile conflicting ideas and forge novel connections.
Encourage Embodied Cognition: By incorporating haptic feedback, spatial reasoning, and sensorimotor integration, tools can foster a more embodied understanding of complex concepts.
Nurture Metacognition: Tools should facilitate self-awareness, enabling users to recognize their own thought processes and adjust them in real-time.

By embracing Intentional Tooling, we can co-create a future where human and machine intelligence converge in a symbiotic pas de deux. Our tools will no longer be mere extensions of ourselves but rather collaborative partners that augment our intentionality. In this way, we'll ensure that the next revolution in tool-mediated evolution is one that elevates, rather than diminishes, our shared humanity.

The Intentional Toolmaker's manifesto reads: "Design for human-machine intelligence advancement, not degradation. Craft tools that amplify cognitive frictions, encourage embodied cognition, and nurture metacognition. Together, let us forge a future where intentionality flourishes – for in this dance between tool and wielder lies the very future itself, awaiting our creative touch.

DeepSeek and Monopoly Economics

Wed Jan 29 2025 10:39:58 GMT-0800 (Pacific Standard Time)

When a model makes headlines like this, the media’s “Breaking News” tunnel vision often obscures what’s important. Between the Mixture of Experts architecture, the Chain of Thought capabilities possessed by the R1 model, there’s a lot to discuss about the model in isolation. But DeepSeek hasn’t done anything particularly novel by itself. DeepSeek’s challenge to ChatGPT is fundamentally about the future of the AI economy, and whether the walls built by the partnership between OpenAI and the new administration are high enough to keep challengers, Chinese or otherwise, out.

What DeepSeek does

DeepSeek, as a family of models, uses an architecture called Mixture of Experts (MoE), originally pioneered by Mistral in France. In a Mixture of Experts model, parts of the neural network are specialized to certain tasks, and a traffic controller, sometimes called a router or a load balancer, directs certain requests to its entourage of “Expert” neural networks. When it generates new text, it’s also far more efficient because it doesn’t use the entire network in generation.

What DeepSeek did

DeepSeek scares Silicon Valley, not only because of what it does, but how it got there. DeepSeek trained a 607B parameter chat model, like OpenAI’s gpt-4o, and a 70B distilled reasoning model, like OpenAI’s gpt-o1. If we assume that the unit cost of a GPU-hour was around $2, the price tag for training them was $5.576 million. Though we don’t know exactly how much OpenAI spends on their models, we do know that in the year that OpenAI released gpt-4o, they spent $5 billion.

These discounts are passed to AI entrepreneurs in the almost 10x reduction in price to use the models for enterprise purposes. It is cheaper, by an order of magnitude, to build your AI product idea on DeepSeek than it is on ChatGPT. Some of this cost-reduction can be explained by the efficiency of training many domain experts rather than one massive oracle, but the shock in Silicon Valley and Wall Street reveals the emperor’s lack of clothing.

Model	Input Tokens* (per million)	Output Tokens (per million)
deepseek-chat	$0.07 - $0.27**	$1.10**
deepseek-reasoner	$0.14 - $0.55	$2.19
gpt-4o	$1.25 - $2.50	$10.00
gpt-o1	$7.50 - $15.00	$60.00

* The two prices represent the difference in cost of inputting a token that the large language model is already familiar with, vs a token that is new to the large language model.
** Expected cost after the promotional pricing that ends Feb 8.

The price of monopoly is the entire market

Wall Street and Silicon Valley are being faced with an important crossroads: continue pursuing monopoly economics in AI and lose the wholesale market to China, or prioritize their existing bottom line by nurturing a robust domestic AI economy.

The companies that make up “Silicon Valley” act predictably when they search for new markets to capture. When distributed systems became the standard computation paradigm in the 2010s, Silicon Valley was able to capture the market by turning the Cloud into economies of scale: branded data-centers, billions in broadband investment, and bulk priced access to their walled gardens. After OpenAI launched ChatGPT in 2022, investors predicted that AI adoption would follow Cloud adoption.

Huge losses are expected in these endeavors, since the real reward is the capture of the market. Since the typical threat to the monopolistic corporation is the antitrust enforcement of the government, Sam Altman and OpenAI have been hard at work trying to capture regulators through the Stargate Project. Between aligning the federal government’s pocketbook with their long term ambition to own and operate the infrastructure of AI in the United States, the current administration and OpenAI are making a bet that the future of AI is the same thing as the future of OpenAI.

If DeepSeek can operate at 10% the cost of OpenAI, where is the use for OpenAI, and OpenAI-branded datacenters? At the core of the Stargate Project is the assumption that AI entrepreneurs are only going to use OpenAI services to build the next generation of AI tooling. But that assumption can not stand a 90% cheaper competitor. Unless OpenAI is willing to reduce potential revenue by price matching, doubling down on the OpenAI monopoly is tantamount to handing a majority of the AI infrastructure market to China.

In order to keep AI entrepreneurial dollars in the United States, OpenAI and the new administration must start investing in open infrastructure. This consists of open research and a clear, simple path to competitiveness for smaller players.

Audience: The Currency of Technology

Mon Jan 20 2025 16:14:20 GMT-0800 (Pacific Standard Time)

The “technology” company is an unfortunate misnomer for what a tech company really is: an audience company. This is particularly true of any company involved in social media, but this trend is true at a more abstract level for all “technology” companies. Producing novel technologies is highly costly. Therefore, in the currently dominant mode of economic production today, all technologies produced are compensated by the exchange of capital for audiences. In other words, all technology companies are only in the business of “technology” as it pertains to securing enough users or customers to justify their acquisition. When a technology company interfaces with a venture capitalist firm, or a larger firm who wants to acquire them, capital is offered in proportion to the value of that technology’s audience.

From the perspective of tech companies, audiences - digital communities, populations, or market segments - are only valuable insofar as they accurately predict the consumption behavior of a group of individuals. Audience-makers seek to balance the trade-offs of two important features: audience size, and audience cohesion. Audience size determines the number of individuals who are given consumption signals. Audience cohesion determines the rate at which the audience will reliably respond to the consumption signals with a purchase. Audience cohesion also determines the extent to which a statement about a consumer applies to the entire audience. When audience sizes get too large, though, audience cohesion suffers, as scale limits the amount of commonality shared by individuals in this audience. When audience cohesion is too refined, audience size suffers, as the specificity of statements about audience members disqualify more and more people from the audience. While digital platforms certainly did allow the support for an unprecedented scale of audience-collection, this dynamic largely has had the same overall shape since the advent of market segmentation and cable television.

Content programming - the sequencing of media texts into regular time slots - is a form of audience making. In the era of cable television, audiences were formed by individuals tuning in, every week, for certain content programming provided by cable networks. From the perspective of cable watchers, content programming helps individuals build a routine to consume their favorite shows. From the perspective of the cable network, content programming creates virtual waypoints for market segments to congregate around. When individuals tune in to the same set of content programs, advertisers can make statements describing these individuals. Deals between advertisers and cable networks are made when an advertiser’s target audience matches a market segment established by a cable network.

Algorithmic feeds - the sequencing of media texts into an infinite-scroll feed - is a form of audience-making enabled by digital technology. In the era of social media companies and digital streaming, the relationship between individuals and the content they want to see is mediated by algorithms. For users, algorithms help users consume the content in which they have previously expressed interest. For tech companies, algorithms help steer individual users into behavioral groups according to how users express their interests. Algorithms help shape individual users on a platform into market segments. The digital nature of algorithmic audience-making allows companies to instantly combine and recombine user behaviors into countless permutations of market segments, creating highly specific audience lists at unprecedented scale. Moreover, unlike traditional content programming where audience segments were manually identified and tracked, algorithmic systems continuously and automatically update these audience lists in real-time as users interact with content, enabling dynamic and precise audience targeting.

AI-generated content - the sequencing of associative references into coherent, human-like media texts - represents the most recent manifestation of audience-making. Where algorithmic lists organize individuals into audiences by their association to discrete textual corpora like posts, creators or even hashtags, Transformer-based AI systems atomize this process further. Large Language Models have the capacity to ingest massive swaths of content at an inhuman scale, identify latent or hidden relationships between corpora, and then use those associations to produce convincingly human text. For users, content is now immanent to the digital platform itself; no longer is there a need for a creative producer of content to be at the other end of the digital platform. For tech companies, the latent space of the AI systems which stores the learned relationships between corpora becomes a map of content to users. When users interact with AI-generated content, they are simultaneously consuming and training the system on their preferences, creating a recursive loop of audience refinement that collapses the distinction between content creation and consumption. The business relationship between platforms and advertisers transforms as well - rather than matching pre-existing audiences to content, AI systems can dynamically generate content optimized for any desired audience segment, making the audience-content relationship fully programmable.

Technology companies may be simply audience companies, but how can one discount the degree to which the fundamental technology has changed, despite fulfilling the same strategic need? From negotiating market segments using Nielsen ratings to a fully-automated manager of conceptual preferences, the shape of audience-making has changed drastically, but the purpose of audience-making has not changed in the least.

Open Source vs Open Weights: The AI Transparency Paradox

Mon Jan 13 2025 21:49:44 GMT-0800 (Pacific Standard Time)

When Meta released their Llama 3.1 language models in July 2024, Mark Zuckerberg proclaimed it as a triumph for "open source AI." But while the model's architecture and weights were made public, its training data remained hidden. This raises a crucial question: what does "open source" really mean for artificial intelligence?

In traditional software, open source creates a specific relationship between creators and users. When you can read the source code, you know exactly how a program makes decisions. This transparency enables collaboration, faster bug detection, and continuous improvement. But AI turns this model on its head.

The fundamental challenge lies in two critical differences. First, while source code tells you everything about how traditional software works, an AI model's behavior is equally—if not more—shaped by its training data. Imagine having a building's blueprint but not knowing what materials were used to construct it. The corporate reluctance to share training data isn't just about maintaining competitive advantage. These datasets often contain a complex mix of copyrighted material, personal information, and data collected under ambiguous terms.

Second, traditional software is deterministic—you can trace any output back to specific lines of code. AI models, with their millions or billions of parameters, don't work that way. Small changes in training data can cause unpredictable ripples throughout the model's behavior. This breaks a fundamental assumption that makes open source collaboration work: the ability to understand how changes affect the program's behavior.

The beauty of open source software lies in "Linus' Law": given enough eyeballs, all bugs are shallow. But for this principle to work in AI, we need both transparent datasets and better interpretability tools. These aren't separate challenges—they're two sides of the same coin. Simply releasing model weights while keeping training data secret, as Meta has done with Llama 3.1, falls short of true openness.

We need innovative approaches that balance transparency with practical constraints. Representative, anonymized dataset samples could enable meaningful research without exposing sensitive information. Trusted third-party audits could ensure ethical standards without requiring full public disclosure. And advances in interpretability research could help us understand AI systems even when we can't trace their logic line-by-line.

Just as open source software built an ecosystem of programmers who collaborate daily, we need to build a new framework for AI development—one that enables meaningful oversight while acknowledging the unique challenges of building neural networks at scale.

Part One: A Flatland Parable on Dimensionality

Thu Dec 19 2024 18:43:22 GMT-0800 (Pacific Standard Time)

crossing dimensions is less fantastical that you think

This series is an attempt to capture the journey
to better understand weaponized linear algebra
as a thinker of words first, and numbers second.


These posts are dedicated to Maria,
who is subject to a far rougher version
of my thoughts than what appears here.

The most simple way humans experience dimensionality in information is via the fact that motion information exists in three-and-a-half dimensions. The main three components, describing spatial information, are the “x-dimension,” or the space computed, measured, and finally captured by the English word width, the “y-dimension,” captured by the English word, height, and the “z-dimension,” captured by the English word, depth. Like the other three spatial dimensions, we can measure it. But unlike the other three where we measure a value that involves computation, and we only get to observe a discrete slice of the “time-dimension” for our conceptual model of motion. We don’t actually traverse time in a moment like we traversed the x-, y-, or z-dimension to measure the earlier width, height, and depth.

For a moment, let’s consider a different situation. Rather than three computed values (x, y, z) and one observed value (time), we only have two (x, y) of the previous three computed values, and the same observed value (time). The following scenario may be more familiar to the Physics student as Flatland. In Flatland, Flatlanders experience motion in two and a half dimensions. Imagine drawing a Flatlander on a piece of paper, and then drawing a circle around them. It would be impossible for the Flatlander to move outside of that circle according to the laws of motion in Flatland. This is because the Flatlander can not use depth to leap over what appears to us as a line on a surface. Now, feeling a little guilty for abusing higher-dimensional powers and imprisoning a Flatlander, how could we, three and a half dimensional beings, prove our existence to these Flatlanders, even just to apologize?

Even removing the question of the existence of intelligent beings in these dimensions, could we prove to Flatlanders even the existence of higher dimensions? What miracle could we perform, with our powers as higher dimensional beings, to the Flatlanders to convince them of our existence? Let us draw them other objects in their world with the pencil we used to ensnare the first Flatlander we encountered. We noticed that there was nothing on the Flatlander’s head. While the Flatlander is astonished to see a hat, a sideways P, appear in their reality and cover their nose with its brim, the conclusion that this has anything to do with the existence of higher dimensions is still a major leap. The pencil, never truly crossing the plane represented by the piece of paper, still remains an extra-dimensional agent, completely outside of the Flatlander’s conception of reality.

What we need to do is to fully utilize the dimension of which the Flatlander is blissfully unaware, depth, since moving the sideways P around and rotating it doesn’t do much to convince the Flatlander of the existence of other dimensions. We need to do something that is impossible according to the laws of motion in Flatland. We reach into Flatland, spinning the hat so that the brim rotates around the cap until the brim faces backwards leaving their nose uncovered by the brim. This miracle truly astonishes the Flatlander. According to other Flatlanders observing the newly hatted Flatlander, the brim started to shrink until the hat was a skull cap, and then the brim slowly started to grow on the other side of the Flatlander※.

Together we built a very small spatial model in our minds by imagining this scenario with the Flatlanders. Very similar mathematics are central to the architecture of most state-of-the-art Large Language Models. To summarize with a mathematical perspective, we projected an object with spatial information in two-dimensional space to an object with spatial information in three-dimensional space, spun it in a way only possible with a third controllable value, and then reduced it back to an object in two-dimensional space. In other words, we unfolded a new value of information inherent to the world that was hidden to Flatlanders, so that we could transform the hat, before folding that value back into the Flatlander’s native two-dimensionality. From the Flatlander’s perspective, the key to the solution of multiple universes lies in the transformations that occurred in a space that is already hard for them to conceive of using the rules of their environment.

In the rest of the series, we will examine the outputs from Large Language Models like Flatlanders. Just like the Flatlander who is aware of some spatial transformation happening in a space they can't see, we know that something happens to words in a higher dimensional semantic space that allows Large Language Models to, well, model language so effectively. Keep in mind this simple conceptual model we created involving Flatlanders, as we will return to this simple world repeatedly to understand language models. Stay tuned!

※ Some Flatlanders begin to worship the Flatlander with the hat, thinking that these powers were unique to the One with the Hat. Other Flatlanders argued that it was an external and exacting power that spoke through the Behatted One. This caused a great deal of disagreement and often resulted in violence. For a while, many Flatlanders adopted one set of beliefs, not out of ideological conviction, but in fear of being prosecuted by roving bands made up of those who had committed to one belief. Still, there were other Flatlanders still who disagreed with the whole premise, because if there truly were great and mysterious higher powers, why didn’t they free the recently Imprisoned One.

Updates

Sun Oct 27 2024 10:35:57 GMT-0700 (Pacific Daylight Time)

Been a minute, eh? I feel like it has.

I had three serious looking jobs, one of which I have now.

I started the year as essentially a research monkey staring down the barrel of automation. The worst part is when I offered to help them automate, they gave me a banana and reminded me how shiny my computer was. I lasted around a month.

For the next week after that, I was driving into San Francisco to do a trial week with a bio-tech company as a software engineer. Bombed that harder than I could imagine. But I still got paid $500 per day. It's strange feeling both like I messed up, but still compensated at a higher annualized rate than I ever have.

Finally, I've settled where I expected to, and really where my skills belong. I've been working at CTEC full-time for a little more than six months. I do anything involving computers, which is the role I want. I spin up databases, create web-based services, do basic network analysis and statistics to back up what I'm saying.

I'm happy here. Took me a long time to rebuild my confidence in my abilities after the week of high-status failure. But as the season reminds us, I was born a varmint, and a varmint I will always be. Nothing wrong with that.

Using HTMX with Rust - A Quickstart Guide

Fri Jan 05 2024 10:18:32 GMT-0800 (Pacific Standard Time)

Introduction

If you've been following web development, you've probably seen the hype about htmx. In simple terms, it's a front-end web development framework in which the goal is to minimize the amount of javascript that gets shipped to the browser. The philosophy behind it seeks to return to the golden age of hypermedia-driven applications, which means that rather than receiving JSON data from the server, you receive whole html blocks that get swapped into your application with lightening speed.

This tutorial is a simple quickstart guide for building your first htmx application using Rust. Specifically, we'll be using the actix-web server framework for serving our requests, as well as the Tera templating engine to render the actual html. Follow along, or clone the repository here.

In order to follow along, you'll only need to install Rust. Optionally, you can make use of my favorite css framework, tailwindcss. You'll need to install Nodejs to add tailwind to your application. Let's get started!

Getting Started

To get started, initialize a new cargo project in the command-line terminal of your choice.

cargo new actix_htmx

This will create a directory called actix_htmx. It should look like this:

actix_htmx
+-- src
|   +-- main.rs
+-- Cargo.toml

To add the required Rust dependencies, we'll change directory to actix_htmx, and use cargo add to include them in our Cargo.toml:

cd actix_htmx
cargo add actix actix-web actix-files env_logger log tera

This will add the required dependencies for the actix-web server framework, logging utilities, and the tera templating engine.

Next, let's set up the /templates directory, which will house our html templates.

mkdir templates
touch templates/main.html

In the IDE of your choice, add the following boilerplate to your main.html.





	actix htmx
	
	





Hello World

This will be the entry point for your web application. Finally, we're ready to implement that actix-web server in Rust!

A Basic Actix-Web Server

In src/main.rs, replace the existing code with this:

use actix_web::{get, App, web::Data, HttpResponse, HttpServer, Responder};

use tera::{Tera, Context};


#[get("/")]

async fn home(tera: Data) -> impl Responder {

	HttpResponse::Ok().body(tera.render("main.html", &Context::new()).unwrap())

}

  

#[actix::main]

async fn main() -> std::io::Result<()> {

	env_logger::init();
	
	log::debug!("Starting Server");
	
	  
	
	let tera = Data::new(Tera::new("./templates/**/*.html").unwrap());
	
	  
	
	HttpServer::new( move || {
	
			App::new()
			
			.app_data(tera.clone())
			
			.service(home)
		
		})
		
		.bind(("127.0.0.1", 8000))?
		
		.run()
		
		.await
	
	}

Let's go through what this is doing. First, we import the required systems from our dependencies. Then we define a function that runs when the / path is hit with a GET request. This function returns an HttpResponse of OK (status code 200). In the body of that response is a string that renders the main.html template with an empty context. Finally, in the main function, we start an HTTP Server that runs our application. This application passes around the tera rendering so that all of our routes can render html with the .app_data() method. With the .service(), our application provides access to the / route, which stores the home function. This server is bound to the IP address 127.0.0.1, and the 8000 port. We can access this server with our browser at localhost:8000/ when we run the following command.

RUST_LOG=debug cargo run

You should see a web page with a header tag that reads "Hello World"! That being said, we definitely don't need htmx for this example, so let's add some more functionality.

Adding Counter Functionality

Let's implement a feature that allows the user to increment and decrement a counter, starting at zero. In our templates/main.html, replace the ... with the following snippet.

... rest of templates/main.html ...

	
	Counter: {{ counter_value }}

What's going on here? In our

...

tag, we're using a piece of context that we'll provide in our home function of our Rust code. We'll see in a moment how that's implemented. Button immediately below includes our first piece of htmx magic. Rather than using AJAX written in a javascript file, htmx elements can fetch data by themselves! hx-get creates a GET request to the corresponding endpoint, here /increment. In hx-target, we specify where we want the response to go, here replacing our counter ... element. The button below is essentially the same, but provides functionality to decrement the counter. Now let's implement the fun stuff in Rust.

First, let's add some new dependencies to the very top of the src/main.rs file. This will come in handy when dealing with application state.

use std::sync::Mutex
... rest of src/main.rs ...

I can't go into detail about what Mutex does. (Really, I do not have the ability nor the knowledge to explain all of the wonderful things it does.) Suffice to say, it enables thread-safe mutability of data, which means we can safely change the value across the entire application.

Next, let's add a struct that will house the state of our application. Below the imports, add the struct.

... rest of src/main.rs

struct AppStateCounter {

	counter: Mutex

}

... rest of src/main.rs ...

This is simple enough. Inside of our struct, we define an element that includes our magical Mutex, which stores an unsigned 32-bit integer.

Remember our templates/main.html has buttons that refer to a /increment and /decrement endpoint? The / route also needs context from tera to display the initial counter value. Let's implement our new route handlers next.

... rest of src/main.rs ...
#[get("/")]
async fn home(tera: Data, data: Data) -> impl Responder {

	let counter = data.counter.lock().unwrap();

	let mut home_context = Context::new();

	home_context.insert("counter_value", &*counter);

	HttpResponse::Ok().body(tera.render("main.html", &home_context).unwrap())

}


#[get("/increment")]
async fn increment(tera: Data, data: Data) -> impl Responder {

	let mut counter = data.counter.lock().unwrap();
	
	*counter += 1;
	
	log::info!("Incremented Counter Value: {}", *counter);
	
	let mut increment_context = Context::new();
	
	increment_context.insert("counter_value", &*counter);
	
	HttpResponse::Ok().body(tera.render("components/counter.html", &increment_context).unwrap())

}

  

#[get("/decrement")]
async fn decrement(tera: Data, data: Data) -> impl Responder {

	let mut counter = data.counter.lock().unwrap();
	
	*counter -= 1;
	
	log::info!("Decremented Counter Value: {}", *counter);
	
	let mut decrement_context = Context::new();
	
	decrement_context.insert("counter_value", &*counter);
	
	HttpResponse::Ok().body(tera.render("components/counter.html", &decrement_context).unwrap())

}
... rest of src/main.rs ...

These are relatively simple, but let's go through what they accomplish. In the function parameters, we've added a new item that pulls in our AppStateCounter for later use. In our / route, we pull out the numeric value from this struct. After creating a new Tera Context, we insert our counter value, and then pass it into our Tera rendering function in the response body. Our new /increment and /decrement route handlers are similar, pulling out the counter value and modifying it.

Finally, we'll add our new Tera template by creating a new templates/components directory, and adding a file called templates/components/counter.html. This is what it should look like:

Counter: {{ counter_value }}

Let's head back to our src/main.rs file, since we need to add everything to the application implementation in our main function. Replace the main function with the following implementation which incorporates our state into our actix-web application.

... rest of src/main.rs ...
#[actix::main]
async fn main() -> std::io::Result<()> {

	env_logger::init();
	
	log::debug!("Starting Server");
	
	  
	let tera = Data::new(Tera::new("./templates/**/*.html").unwrap());
	
	let counter = Data::new(AppStateCounter {
	
		counter: Mutex::new(0)
	
	});
	
	HttpServer::new( move || {
	
		App::new()
		
		.app_data(tera.clone())
		
		.app_data(counter.clone())
		
		.service(home)
		
		.service(increment)
		
		.service(decrement)
	
	})
	
	.bind(("0.0.0.0", 8000))?
	
	.run()
	
	.await

}

In this snippet, we added a counter implementation of our AppStateCounter struct, and passed it as application data into our application. We've also added two new routes for /increment and /decrement.

Finally, when we rerun our Rust application, we should be able to increment and decrement our counter! We've used essential parts of actix-web, htmx, and tera to create this lightweight and performant web application.

Optional: Add TailwindCSS

I love tailwindcss because it makes styling a breeze. If you're wondering how to implement tailwind outside of a javascript framework, this section is for you.

To initialize tailwindcss, use the following command, which requires Nodejs.

npx tailwindcss init

This will create a tailwind.config.js file in your project directory. In this file, add our templates to the content. This will make sure that tailwindcss generates the utility classes when we add them into our html templates. Your tailwind.config.js should look like this:

/** @type {import('tailwindcss').Config} */

module.exports = {

	content: ["./templates/**/*.html"],
	
	theme: {
	
		extend: {},
	
	},
	
	plugins: [],

}

Let's add a new /static directory to house or css files. Here, add a file called /static/main.css. Add the following directives to load tailwind.

@tailwind base;

@tailwind components;

@tailwind utilities;

To generate our final css files, use the tailwind command.

npx tailwindcss -i ./static/main.css -o ./static/tailwind.css

Running this, it will generate /static/tailwind.css.

In our src/main.rs file, add a new .service() under our .app_data() initializations. Your main function should now look like this:

... rest of src/main.rs ...

#[actix::main]

async fn main() -> std::io::Result<()> {

	env_logger::init();
	
	log::debug!("Starting Server");
	
	  
	
	let tera = Data::new(Tera::new("./templates/**/*.html").unwrap());
	
	let counter = Data::new(AppStateCounter {
	
	counter: Mutex::new(0)
	
	});
	
	  
	
	HttpServer::new( move || {
	
		App::new()
		
		.app_data(tera.clone())
		
		.app_data(counter.clone())
		
		.service(actix_files::Files::new("/static", "./static").show_files_listing()) // making /static files accessible to the client
		
		.service(home)
		
		.service(increment)
		
		.service(decrement)
	
	})
	
	.bind(("0.0.0.0", 8000))?
	
	.run()
	
	.await

}

Finally, alter your templates/main.html to include a link to our /static/tailwind.css file.





	actix htmx p5

	
	
	{# Adding a link to our tailwind.css #}
	





	Actix Htmx
	
	  
	
	Counter: {{ counter_value }}

Now when you run the server, the

`...`

element should appear larger!

You will have to rerun the tailwind output command every time you make a change, so I've implemented the following build script in build.rs:

use std::process::Command;

  

fn main() {

let _ = Command::new("npx")

	.arg("tailwindcss")
	
	.arg("-i")
	
	.arg("./static/main.css")
	
	.arg("-o")
	
	.arg("./static/tailwind.css")
	
	.output();

}

Simply put, everything the application is built, I use a process to run the tailwind output command, so I don't have to do it manually. Make sure to reference the build script in your Cargo.toml by adding build = "build.rs" under the edition line in the [package] section.

Conclusion

I've had a lot of fun learning htmx, and paring back my web applications with Rust. I built a whole web user interface around ollamathat's hosted publicly here using the stack I've just talked about. Go on and make cool things using web technology as they were intended to be used!

Project Gravity

Mon Oct 23 2023 18:05:08 GMT-0700 (Pacific Daylight Time)

Introducing Project Gravity

Project Gravity hosts SoftLandingGPT, an AI-enabled librarian for resources aimed at empowering bystanders to engage with people who may be falling down paths towards radicalization. The goal is to reach out to service providers like school counselors and community leaders to help connect them to the resources available in the countering targeted violence space.

Components

As Tech Lead, I was in charge of implementing everything. From the interface with OpenAI's API, to building custom moderation models on huggingface, this is definitely my most ambitious web-hosted software project yet. I wanted to go over the major features I've implemented in the last month.

AI-enabled, natural language directory

The centerpiece of Project Gravity is our SoftLandignGPT tool. Presented like an online chat, it pulls together resources we've found that might help equip a person who is unsure of how to engage with a loved one who is falling down a conspiracy rabbit hole. It uses websockets to connect with our backend, which interfaces with OpenAI's API. The conversation is preceded by several system prompts that give GPT-3.5 a more defined role, and equip it with research and resources that are pulled together by our team.

Custom hate speech classifier

After testing OpenAI's moderation endpoint, it became clear that we had more narrow requirements for a hate speech classifier. This triggers our "traffic light" system, in which we flag conversations as green, yellow, or red for internal review. So I trained a BERT model for four days on the measuring hate dataset provided by UC Berkeley's D-lab, to create our custom model. This was the first model I've ever trained from scratch and deployed on huggingface. We hope that by providing it with an open license for use, we demonstrate how committed we are to pushing the envelope for developing tools that can be used to counter targeted violence.

Content management by Sanity

Once again, Sanity comes to the rescue. Everything from our blog, to our research citations page, to the deployed resources, is hosted on Sanity, which allows for the whole team to get involved without pinging me everytime they find a new resource. It's incredible uptime, quick response, and incredible pricing plan made it a no brainer to integrate into the project. Thank you, Sanity!

Admin Dashboard

Though definitely a long-term goal, we want to aggregate important natural language trends from our conversations without breaching our privacy priority. With Google-based OAuth, team members can glean essential top level statistics and get key summaries from the database without messing with the database itself.

Custom link tracking

Suggested to us by our friends at the McCain Institute, I implemented a custom link passthrough service that counts all of the outbound links provided by our tool. This will help us spin up a business model, and demonstrate our value to our partners through hard data.

Try it out and tell me what you think!

I've had a blast implementing everything, but this isn't just a portfolio project. This is something that we think really has legs, and might turn into something much bigger than an Invent2Prevent competition entry. I'm honored to have had an integral part in building Project Gravity, and I hope you see the vision, too.

Man-in-the-middle for good?

Tue Sep 19 2023 19:19:01 GMT-0700 (Pacific Daylight Time)

As part of the Invent2Prevent competition, which is a Department of Homeland Security sponsored startup competition with the objective of creating counter-violent-extremism programs or tools, I had the following thought: what if you could set up an HTTPS proxy on youth-owned devices to identify possible extremist content so that parents could broach the conversation before the user got too deep in extremist content?

Obviously, this is a potentially dangerous line of thinking. Designed poorly, this allows parents unfettered access over their child’s web traffic, enabling parents to enact draconian limitations over their child’s growing interests.

But designed well, this could be a tool that offers a concerned parents, or school counselors a canary in the dark mines of digital extremist recruitment.

Rather than simply forward web traffic by pushing urls to be checked against some web-hosted database, a more sensitive solution would be to pull a url map of links associated with extremism. And by showing parents only deeply concerning patterns in their child’s consumption of digital media, it would prevent parents from using the tool repressively.

At the end of the day, the goal of the tool would be to enable genuine conversations between potential extremist recruits and their immediate, trusted and offline social network. But much more planning and clever design will be needed to ensure that this doesn’t simply enter the history books as another repressive internet tool or a back door for nefarious actors.

Lots to think about.

CTEC Progress

Fri Jun 09 2023 18:09:35 GMT-0700 (Pacific Daylight Time)

It's been a while since I've updated my blog here, and since I've been primarily busy with establishing myself at CTEC, I'll cover my progress there in some detail. We'll cover some of the reports I've finished up, and projects that are just starting to come into full swing as I start my full-time engagement with the center this summer.

Wagner Reports

Probably my biggest contribution so far has been the publication of three reports about the Wagner Group. They've been a lot of fun to write, and I've been able to flex all manners of methodological muscles and conquer all sorts of theoretical challenges. In addition to these reports, I was able to contribute to the Wall Street Journal's documentary about the Wagner Group, and CTEC earned a place in the acknowledgements!

The Changing Face of the Wagner Group: From Military Adventurism to Venture Capitalism

The first one, was largely my co-author's work, and it regards the financial empire of Yevgeniy Prigozhin. I was able to contribute editorial skills, as well as an open-source investigation into the hackathon that the Wagner Group undertook at their headquarters in St. Petersburg. This paper really got me thinking more deeply about the changing face of conflict, as nation-states are more restricted than ever in claiming territories and other exercises in strategic flexibility. The Wagner Group seems less like a private military company, and more like a strategic multi-tool for Russian foreign interests.

The Wagner Group’s Social Footprint: A Time-Series Sentiment Analysis of PMC World

I had a lot of fun writing and researching this one. I built a custom scraping tool for VK, and developed brand new proficiencies in Natural Language Processing, in Russian no less. By examining the sentiment of all engagements, both posts and comments, in the PMCWorld VK channel, I was able to find a distinctly, and statistically significant, positive period between Putin's speech calling Ukraine rightful Russian territory and the expansion of Russian aggression towards Ukraine. Not only this, text frequency analysis during this period revealed a lot of chatter involving the word "movie," which lead me to the discovery that Prigozhin had purchased a movie studio in order to release a propagandistic movie presenting the 2014 initiation of hostilities as victimizing for Russian speakers.

Despite my excitement, my challenge here was presenting these findings as descriptive rather than causal, and although I wanted to point to these discoveries as revolutionary evidence that Prigozhin was acting as a state propagandist drumming up support for the later invasion, I think I did well in holding this more bombastic statements back. This report was very helpful in teaching me how to present statistics-based discoveries in an even-handed matter. As Mark Twain said, "there are lies, damned lies, and statistics".

From Ideas to Action: Yevgeniy Prigozhin, Wagner Group, and the Operationalization of Duginism

This report was a lot more up my alley, at least in terms of what I've studied in my undergraduate career as a political scientist and media theorist. It's a rather in-depth analysis of Duginist thought, as well as brilliant open-source work by my colleague and myself in connecting Dugin and Prigozhin closely beyond theory and into the real world. Not much to say here, but definitely learned to appreciate the editorial work by the other full-time staff at CTEC who sought to make my work sound more like an academic work than a diatribe against "Russian thought." As they pointed out well, Russia is a large and multi-cultural place, and ascribing the thought of a particular esoteric thinker to the entire country reduces the credibility of my statements.

New projects

The project I'm engaging with this summer is probably my most ambitious software project as of yet. It's a fully native (and hopefully cross-platform) application that helps researchers conduct analysis of a particular social media platform. Luckily, there's well-founded reason why I think I can be successful despite being a one man team on a project that would usually take an entire software development studio. Tauri is an awesome framework with a frontend written in web-friendly languages like Typescript and HTML, and a powerful backend written in Rust. I've chosen Svelte as my frontend framework, which is an awesome framework to sketch out big ideas with little to know boilerplate. As a side note, the ability to write components with the following syntax makes my heart happy:

I've really made strides in my abilities and confidence as a Rust developer, and I've been able to bring ideas to life in Rust with speed and effectiveness. Also, this project features my most extensive attempt at project management and accountability, so luckily I have that cut out for me.

Wrapping up

I've been blessed to find a place to apply myself and learn so much in such a self-directed manner. The best part is that despite my personal development, I don't feel like I'm being selfish for applying my own perspective to solving problems, and my initiative has been treated as a plus and not as a minor annoyance. Hopefully I come back to this blog with good news about my projects.

LastPass, and the Foundation of Trust

Sat Jan 21 2023 18:33:53 GMT-0800 (Pacific Standard Time)

So, LastPass has famously dropped the ball. Late December 2022, tucked into the holiday season, LastPass announced that threat actors have obtained access to backups of encrypted vaults, and can attempt to brute force your master password to get all of the juicy secrets inside. More recently, the full extent of the breach is coming to light. Although the technical details are integral to making decisions, the communications by LastPass has been completely taken over by legal. The LastPass communications team has not released a blog since November, deeply entrenching the emerging tensions between LastPass's lawyers and the enterprise and personal customers (like me), who were affected. Password managers are a product whose value propositions are tied directly to trust and mutual understanding, and the current debate underscores the issues that arise when an open source community interacts with a closed source corporate bureaucracy.

As the Open Source Security Podcast does a good job in highlighting, the glaring issue is that LastPass's current communications strategy is actively confusing to their most important customers. When any security product fails, the response is going to be determined by the nature of the breach. Building clear next steps relies on clear communication between the technical teams of both sides. In this case, developers responsible for rotating API keys and updating credentials aren't even clear about what exactly the breach even was. Does the threat actor have access to vault metadata? If so, what did "encrypted vault" ever really mean? From what I can tell, a major contributor to the general sense of confusion is that developers have lost faith that the words used by LastPass in their promotional content and their crisis response are the same words that they use in their day to day life.

Trust relies on clear and open communication. The sense is that LastPass is prioritizing mitigating backlash by mediating the conversation that needs to happen about the consequences of the breach. In other words, LastPass has entered a vicious cycle of lying to their most affected customers, and rather than rebuilding developer confidence, they've turned their most valuable customers into their most outspken critics.

Happy New Year!

Tue Jan 03 2023 14:18:22 GMT-0800 (Pacific Standard Time)

It's been a while, since the end of last semester was a bit of a doozy. I just wanted to recap my 2022 and forecast my 2023 here in a few bullet points:

2022 Accomplishments

I started my grad program in Non-Proliferation and Terrorism Studies at the Middlebury Institute of International Studies at Monterey. It's been a fantastic year, with many fond memories to look back on:

I trialled the META Lab over the summer, and contributed to their Mirror Gap Analysis project. I ended up making a front-end and an API which went unused due to lack of organization. I also added a Course feature to their Wordpress, which ended up taking years of my life from me when the page went down hours before a meeting with the Provost. Between that and the overall disorganization, I don't really see myself at META Lab for an extended period of time. Factors relating to the personnel, who all joined as friends years ago, also contributed to the lack of clarity in mission or task.
- Takeaway: I hate Wordpress and PHP. Even student organizations need to engage in rigorous operations procedures, even if you're all friends.
I ended up at CTEC, whose mission and goals are much more clear than the META Lab, and has been doing significant work in the field. I joined Jason Blazakis' project, and in the coming weeks, it'll be published!! That was a whole process, but I think I learned how to work more smoothly with others and definitely how to work better with distributed systems. I have also been assigned to a couple other projects at CTEC where my role is a mixture of developer, system admin, and other techy positions we don't have the personnel to fill.
- Takeaway: Organizations with direction and focus actually offer entry-level positions more impact, whereas flat organizations need to be deliberate if they want to get anything done. Also, nohup rocks.
My Japanese skills have improved significantly after two semesters of being forced to do the Intermediate-Advanced and Advanced Japanese courses. Even my ability to throw together thoughts in writing has improved. Very excited to see more development.
- Takeaway: I'm still illiterate, but boy can I convince people I'm good at Japanese.

When it came to Moonstripe Design: 2022 was a big year:

I wrapped up a contract with PrivacyCode, adding their slider and blog systems.
I just finished a contract with Navab Law, adding their digital presence to the internet, and also engineering an email forwarder to ease client intake.
I also built the Open Ethereum Map and learned D3.

Socially, I've had a lot of fun. From backpacking trips, to hikes with grad school colleagues, I think I've really been able to start growing my social safety net for the first time since 2019.

2023 Goals

My goal of attending MIIS was to finally get published, and it's looking like a reality with CTEC. That being said, there are many more objectives this year to attain as well.

I want to see the CTEC paper all the way through.
Start a portfolio of research and expand on my research.
Build my knowledge of programming, and continue to develop devOps skills.
Finally utilize my Pi Cloud for something.
Go backpacking more.
Work on my posture.
Wake up earlier.
Cook more.

Otherwise, I'm just going to continue to be me. Starting with a trip to see friends down South.

Can't wait to see what 2023 brings!

Best,
Kojin

Big changes

Sun Aug 21 2022 22:38:04 GMT-0700 (Pacific Daylight Time)

Deno just released a fascinating blog article announcing new changes. There are two points that seemed extra interesting to me. First, looks like there's going to be a new HTTP server in Deno. Whoo.

More importantly, they've announced interoperability with npm packages in the next three months. WITHOUT npm install or /node_modules. Let's go!

I get that most people want Deno without any interface with Node, but the reality is that for the sake of critical mass adoption, Deno needs to be making all of the right decisions, even if it means accepting some old bad decisions. Mitigating the effect of Node overflow will look like exactly what they've promised: a /node_modules free life.

There will be no node_modules folder, no npm install; the packages will be automatically downloaded in the Deno cache.

Deno

Still, from this it's not super clear whether we'll need a package.json, though. I don't see why, if they'll be cached.

A Study in Threejs, Fresh and Product Pages

Sun Aug 07 2022 20:49:32 GMT-0700 (Pacific Daylight Time)

But why, though?

Because I can. Next question.

Let me see it.

Ok, here you go.

See it for your self!

Elaborate.

Fine. Fresh's real sell is the ability to churn out solid web development that makes use of reactivity, while having more the DX of making static HTML websites. It's raw, it's unstructured, it's fast. My obvious first instinct is to see how far I can push the solid web development stuff while having a developing experience like throwing pasta at a wall and seeing what sticks. A great stress test is the upper end of client asks for static product pages: 3D graphics!

Tutorial?

Coming soon.

Jammin' Out With Xerf

Thu Aug 04 2022 22:32:32 GMT-0700 (Pacific Daylight Time)

I just need to express my love an appreciation for Xearching for Sounds, an amazing music youtube channel.

A lot of the music is from the '70s through the '00s in Japan, and it has that jazzy, funky, pop-sound of the early internet era. There's something earnest in the music's glossy production and exuberant optimism in that era. Countless hours have been spent jammin' out to his tunes and coding. Some of the best programming music there is.

Mom's Art Needs a New Home

Thu Aug 04 2022 21:52:32 GMT-0700 (Pacific Daylight Time)

Mom's art needed a new home after the scammy build-a-site company, Virb went kaput.

Miwako Nishawa: Artist

I really like the SPA design. SPA's only really work if the content is essentially static, and the purpose of the website is simple. The perfect storm for my mom's woodblock career. (Also got a scroll spy working!)

Mapping Crypto: Part 2

Tue Aug 02 2022 19:23:32 GMT-0700 (Pacific Daylight Time)

Something a little better

Good news, everyone! (Futurama, anyone?) Crypto-Map: Ethereum is now live!

Initial features include: ability to hover over a node and see the wallet address, and hover over an edge and see the amount sent. You can click and drag the network apart, and it's kind of fun!

In order to get relatively live data on the blockchain, I'm using Alchemy's JSON-RPC enabled web-socket service.

Also, I gave up on using Rust for the initial build. If this gains traction and I need 1,000,000 concurrent users, I'll readdress the languages question. Or just learn Elixir. Good grief.

Next Steps

Making the UI better

It's nice to use d3, but under the hood, everything is spaghetti-code and weird transpilation of vanilla JS > Node.js > Typescript > Deno, so I need to make it a little more coherent.

Not just the current block

Best case scenario, we constantly update a back-end database when a block is finalized. This way, users of the map could access historical data, as well as explore the current block.

Actual realtime, not REST-lite

I may have said "web-socket" earlier, but I'm essentially using it like a REST-ful API service, where I just ask the alchemy endpoint for data on page load. Next, I want a system that subscribes to real-time additions to the block, and then animate the svg as it populates. Pie-in-the-sky stuff here.

To bigger and better maps

I can't wait to bring this to next semester's De-Fi and Web3 class.

Mapping Crypto: Part 1

Mon Aug 01 2022 19:23:32 GMT-0700 (Pacific Daylight Time)

A Long Time Coming

I've been poking at this project for a couple of months now. It started with a study of the petgraph crate to try to build a backend storage/graph builder service. A month or so later, I learned about Cloudflare's Ethereum Gateway. Since I have a couple of websites already using Cloudflare anti-DDoS services, I just attached a gateway to one of my domains. Finally, I got off my butt today to try to make at least something that works.

My Embarrasing Tangle of Tech

Oak: a server engine for Deno

I'm. Learning. Deno. I don't know why I'm now insisting I do everything in Deno and Typescript, but so be it. Quickly ran through the Oak docs, and built a REST API relay for the ethereum gateway. This is an entirely unnecessary step which can be replaced by something in Actix Web or something. Right now, it gets the current block number, retrieves the transactions from the block and serializes the information into json for Rust.

Petgraph Rust: building the graph

My main.rs is very simple. One function reads the json and deserializes it into Rust structs. Another turns those Rust structs into a node-based graph.

Graphviz Dot Utility: gui is just svg

The laziest step is using Graphviz's Dot Utility to generate the graph.

This is what it looks like.

But, it exists. Next steps are replacing the Oak demo with a Rust service, and then using Typescript and Fresh or React for the front-end.

Into Desolation Wilderness

Mon Aug 01 2022 15:57:32 GMT-0700 (Pacific Daylight Time)

July 29th

Meet Toby, then Stuart and Chloe in Berkeley, and then start driving towards Desolation around 18:30.

Stop on the way to meet Ari and Mari, get (far too many) groceries and eat In-N-Out.

Arrive at the Tell's Creek Trailhead/Equestrian Camp at 23:05.

Enjoy some late night gaffs, and then to bed around 1:30.

Protip: Make sure to be aware of nearby horse droppings
when camping at the trailhead parking lot.

July 30th

Wake up at 8:00.

Coffee, breakfast and packing before 10:30, hit the trail at 10:45.

The plan is to go from Tell's Creek Equestrian Camp to Lake No. 3.

Leaving the trailhead, the path was mostly flat and gravelled, accessible to vehicles. We passed a large meadow to our left, across which we could see Van Vleck Bunkhouse. We continued until we reached our first major fork towards the right, up Red Peak Trail. The path continued to get narrower as it turned into the forest, occasionally poking out into lush meadows. By the second mile, the tire ruts in the path were gone, and the path was only wide enough for non-motorized traffic. Just before the second third of the hike, the path drives a meandering trail through thick evergreen thickets, some of which seem to be very young. Many of the saplings by the trail were shorter than we were.

This continues through the second third, where the path follows the thicker forest that flanks both sides of the creek.

The final push, which is both more exposed and steeper than the rest of the hike, is where the lion's share of the 1,400ft of elevation are gained. Thanks to a challenging creek crossing, we lose the trail, and start to trailblaze onto the exposed rock. We're generally aware of the heading of Lake No. 3, but since there's no clear path ahead, momentum stalls. After a couple of failed attempts at refinding the trail, we decide to continue up the rock until we see trail. While trying to catch up to some folks, two simultaneous calf cramps humble my aggressive catch-up pace. (Thank you Ari and Toby for the electrolytes!)

Protip: Electrolytes. Water. Potassium. Cramps are the worst.

Finally, we catch the trail as it pokes above the forest and follows a ridge around 200m in front of us. Since it's a little lower than we got, we trace the topography of the ridge we're on until the trail reaches our elevation. Trails allow you to put your head down and just pound out distance and elevation. We regain our momentum to push to Lake No. 3. Right at the end of the journey, the trail splits towards the Lake from the Red Peak Trail. If we were to continue, we would reach Lake No. 5. The sky was mostly clear throughout the hike, and the temperature hovered around the upper 70s to mid 80s. We arrive at our campsite around 15:30, amounting to about 4:45 on the trail. We quickly take dives into the lake, preparing for our afternoon there.

Including us, there were 4 camps on Lake No. 3. For a camping spot by a Lake in the end of July, that's really good. The guy next to us, Max, turns out to be a solo backpacker. He's disappointed that the fish are gone. Apparently, Desolation Wilderness is undergoing a frog habitat renewal, meaning the lakes aren't being stocked as usual.

The lake sits on the Western slope of Red Peak, and the sunset slowly casts over the rest of Desolation Wilderness.

Dinner eaten, bear canisters packed by 23:00.

July 31st

Wake up to incessant buzzing at 7:00. I give up trying to go back to bed and I go to the bathroom, and catch Ari also awake. We take the bear canisters back to camp. Besides the ants in the trash, no animal interference occurred over the night. Toby's hammock calls to me, and I return to sleep until 9:30 to the sounds of others awake.

Coffee, oatmeal, and dips into the lake are done by 11:30. We start hiking towards the trailhead at 11:45. The way down is easier, and we identify exactly the place we went off track. We realize the trail is camoflaged by a lattice of dry runoffs for spring snowmelt, which carry sediment down and mimic the gravelly floor of an actual trail.

Right when it gets flat, Toby and I find this curious mushroom.

Chloe takes this candid photo of me on the way down.

Toby catches this amazing pull-focused shot.

We reach the cars at around 15:00. Some lunch, repacking, goodbyes, and then back home. Stu, Chloe, Toby and I get to Berkeley for pizza. Delicious.

Using Github as a CMS with Fresh

Fri Jul 29 2022 14:28:32 GMT-0700 (Pacific Daylight Time)

Something Mind-Bogglingly Easy

When I build a blog for a client, I try to consider a couple of things beforehand:

Where will I store the content?
How will I access the content?
How will I create the content?

By considering these things, I can settle on a front-end/content management stack that is effective at completing the task at hand. For example, when building PrivacyCode, I settled on using a server-side rendered React application with a Sanity content management system by answering those questions as follows:

I need to store it somewhere persistent, secure, and offsite.
I need a secure way of accessing the data, like GraphQL or a REST API.
Content needs to be draftable by a content team.

But for myself, these considerations are a little overkill. I'm not sharing anything critical to my business, and I don't have a content team to worry about. I'm optimizing for convenience, not security or propriety. Besides, as I add complexity to this blog project, it becomes harder to actually keep to a regular posting pattern. I actually do want to use it to chronicle what's going on in my life. Let's go back to those questions:

I can store my content somewhere easy and accessible.
I can access the content through a filesystem, rather than deal with a REST API or GraphQL.
I can create a Markdown file in that filesystem whenever I want.

I've dreamt of actually implementing something that looks decent with a skeleton this simple. Here's how I implemented it.

Fresh and Deno Deploy

I still haven't gotten to anything related to Github, but hopefully the groundwork I've laid will come in handy. Given that I'm starting with convenience, Fresh, a brand-new, Deno-based web framework, sounded like a great place to start. Not only is it basically a bare-bones, static version of React, it's also built in Deno, giving me access to Deno Deploy, a crazy awesome solution to hosting your content on the edge. I've seen demos of how fast these Deno containers can be spun up to serve content, so I wanted to see it for myself.

Fresh

Fresh is based on preact, so it's essentially a bare-bones, SSR only, React-ish application. It has some quirks to make it so bare-bones, like its novel islands system, which forces you to consider exactly where you want interactivity and the full suite of React-based tools.

Deno Deploy

Deno Deploy is a cool new edge deployment solutions specifically for Deno runtimes. They're super fast at this point, and allow you to use a free .deno.dev domain, or connect your own. Pricing is generous, and I don't anticipate breaching the freemium threshold.

Building the Blog

Without further ado, let's get developing. Make sure you've installed the Deno runtime with the following script.

deno --version

This command returns useful information, like the Deno version, v8 Engine version, and Typescript version.

Initialize your Project

The first time you do this, briefly consider all of the ways you've started React applications in the past. Maybe you're still new and you haven't found an alternative to Create-React-App yet. Maybe you're an absolute React wizard and you write your own babel and webpack configuration files. Regardless, think about all you did before seeing that spinning atom.

All you need to do to start a new fresh project is the following script:

deno run -A -r https://fresh.deno.dev my-blog

This copies the Fresh demo into a new directory called my-blog. Change directories to "my-blog" and start the demo:

cd my-blog
deno task start

It will prompt you twice. First, it will ask if you want to use @twind, a css-in-js version of Tailwind CSS. Type y to include. Then, it will ask if you use VS Code. Type y to include.

Pause a moment. Take a deep breath. Center yourself. You haven't typed the letters npm or npm -y init or npm install. That's the beauty of Deno.

Fresh's File Structure

When you initialized the Fresh project, it set up the following file structure in the my-blog directory:

my-blog
+-- /islands
|   +-- Counter.tsx <- interactive counter
+-- /routes
|   +-- /api
|       +--- joke.tsx <- example handler for fetching
|   +-- [name] <- loads pathname "/[name]"
|   +-- index.tsx <- loads pathname "/"
+-- /static
|   +-- favicon.ico
|   +-- logo.svg
+-- /utils
|   +-- twind.ts <- entrypoint for your styling
+-- deno.json <- stores commands and import map
+-- dev.ts <- set up development environment
+-- fresh.gen.ts <- auto-generated map for components
+-- import_map.json <- third-party Deno modules
+-- main.ts <- entrypoint for your app
+-- README.md

For the sake of my blog project, I added two more folders: "/components" to store my non-interactive, layout components and "/content" to store my Markdown files. In the "/content" folder, add a new file called "welcome.md" and populate it with:

content/welcome.md


# First Post

[The Current Time and Date]

Hello World!

I also removed the "/routes/api" folder and the "/islands/Counter.tsx" file, because they aren't essential to a blog, and those jokes are super corny and lame.

Building Out the Blog Index

If you're used to the flexibility of React Router DOM, you won't get that here. Instead Fresh internal routing is a lot more like Next.js, where the file structure templates out your application's routes.

Since the goal is simplicity, we're going to list out the blog contents on the home page. No need to get complicated with the routing, but I push you to add an "about" page, and make the home page as pretty as you can.

In "/routes/index.tsx", we need to set up the preact component like this:

routes/index.tsx

/** @jsx h */
import { h, Fragment } from "preact";
import { tw } from "@twind";
import { Handlers, PageProps } from "fresh/server.ts";

The first two lines set up preact's rendering engine, "h", and gives us access to the Fragment component. We won't worry too much about that here, but feel free to read more.

The third line sets up our css-in-js solution, @twind.

Finally, we import the Handlers and PageProps types from "fresh/server.ts".

Next, let's build the handler that populates our page with our blog content. In "myblog/routes/index.tsx", add the following:

routes/index.tsx

interface Post {
    slug: string,
    date: string,
    title: string
}

export const handler: Handlers = {
    async GET(req, ctx) {

        const blogArticles: Post[] = [];

        for await (const item of Deno.readDir('content/')) {
            if (item.isFile) {
                // console.log(item.name)
                const path = `content/${item.name}`
                const file = await Deno.readTextFile(path);
                const titleString = file.split("\n")[0];
                const dateString = file.split("\n")[2]

                blogArticles.push({
                    slug: item.name,
                    date: dateString,
                    title: titleString
                });
            }
        }

        return ctx.render({ blogArticles })
    },
};

The interface, Post, will help us know exactly what is relevant in each blog post.

The exported GET handler creates an array of Posts called blog articles and populates it with the the slug or pathname, date, and title of each post in "/content". Finally, we return the array in the render method of the second argument of the handler, ctx. This will pass our blog articles to our component.

Finally, we'll add the component itself:

routes/index.tsx

export default ({ data }: PageProps) => {
    return (
        
            Thoughts
            {
                data.blogArticles.map((e: Post) => (
                    
                        
                            {e.title.slice(2, e.title.length)}
                            {e.date}
                        
                    
                ))
            }
        
    );
}

When you pass information from your handler to your component, the data is stored in the data property of your component's props. Notice that we destructure data from the props of the unnamed render function to use in the render loop.

When you run the script:

deno task start

You should see a white page with your "Thoughts" header and information about your first "/content/welcome.md" post. If you click on the text, you will be taken to "localhost:800/welcome/", where you'll be greeted with a "Hello welcome".

Let's build that content page.

Making the Post Island

In order to build our blog routes, we need to take a brief detour into islands world.

In Fresh, interactivity like programatically rendering inner HTML requires a little bit of running around. Only components described in islands can have these interactive components. But here's the catch, islands can't pass complex props. They can only pass simple primitives like strings, arrays, and objects.

Let's build our first island called Post by creating the file "/islands/Post.tsx".

Islands are started like any other component, but now we can import hooks:

islands/Post.tsx

/** @jsx h */
import { h, Fragment } from "preact";
import { tw } from "@twind";
import { useRef, useLayoutEffect } from "preact/hooks";

This component will take in raw Markdown (here called "markup") and output an article.

islands/Post.tsx

export default function Post({ markup }) {
    const el = useRef(null)
    console.log('post', markup)
    useLayoutEffect(() => {
        if (el.current) {
            el.current.innerHTML = markup;
        }

    }, [])

    return (
        
            
        
    );
}

Building Out the Blog Routes

Making an individual blog article is like when you created the blog index, but this time we're also importing a Markdown parser. We do this by adding the following line to "import_map.json" like this:

import_map.json

{
    "imports": {
        "fresh/": "https://deno.land/x/fresh@1.0.1/",
        "preact": "https://esm.sh/preact@10.8.2",
        "preact/": "https://esm.sh/preact@10.8.2/",
        "preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.0?deps=preact@10.8.2",
        "@twind": "./utils/twind.ts",
        "twind": "https://esm.sh/twind@0.16.17",
        "twind/": "https://esm.sh/twind@0.16.17/",
        "markdown": "https://deno.land/x/markdown@v2.0.0/mod.ts", // our new module from deno.land/x cdn
    }
}

To be able to view the content of the Markdown article from your new Post island, we need to alter the "/routes/[name].tsx". Initialize the file we did before:

routes/[name].tsx

/** @jsx h */ 
import { h, Fragment } from "preact";
import { Handlers, PageProps } from "$fresh/server.ts";
import { Marked } from "markdown";
import Post from '../islands/Post.tsx'

Next, we're going to add another handler, but instead of pulling metadata from our "/content" folder, we'll be extracting the Markdown content into our component in the markup property. You can choose to make another type interface for the content, but since I'm not looping over anything, it's trival to remember that the markup content is stored in props.data.markup.

routes/[name].tsx

export const handler: Handlers = {
async GET(req, ctx) {
    const url = new URL(req.url).pathname.split('/')
    const file = url[1]

    const decoder = new TextDecoder("utf-8");
    const markdown = decoder.decode(await Deno.readFile(`./content/${file}.md`));
    const markup = Marked.parse(markdown)

    console.log(markup)

    return ctx.render({ markup: markup.content })
},
};

Finally, let's render the post in this component.

routes/[name].tsx

export default ({ data }) => {
    return (
        
            back to home
            
        
    );
}

Now, when we click on the first post in our blog index, it'll display a page with the post content! Very nice.

Deploying to Deno Deploy

There are some things we need to do to prepare our deployment.

First, we need to alter our "import_map.json" to affix our "fresh/server.ts" import. Right now, it's relative thanks to the "$". Make sure you're also removing the "$" each import across your app.

Next, let's change the "deno.json". Right now, the start command runs the development environment. Replace start with start:dev as the command that starts your development environment. Add a new start command, so your "deno.json" looks like this:

deno.json

{
    "tasks": {
        "start:dev": "deno run -A --watch=static/,routes/ dev.ts",
        "start": "deno run -A --watch=static/,routes/ main.ts"
    },
    "importMap": "import_map.json"
}

Finally, create an account on Deno Deploy by clicking the "Sign In" link. Deploying to Deno Deploy is as easy as connecting your Github account, selecting the repository that has your blog, and clicking "Link". Read more here.

In a few seconds, you should be able to see your new blog, hosted on "[slug].deno.dev".

Conclusion

Hopefully, your mind is as blown as mine was when I cranked this project out in 4 hours. Fresh and Deno provide a very streamlined DX that is hard to beat, especially given what's out there in the space currently.

You can find the source code for the project here and a live demo of the blog here.

Syntax Highlighting

Fri Jul 29 2022 10:45:32 GMT-0700 (Pacific Daylight Time)

Hopefully the below code renders as Typescript:

let order: number = 0;
order++;

And the below code renders as Rust:

use std::net;

fn main() {
    println!("Hello World");
};

Finally this code should pase as raw HTML:



    
        Title of the document
    

    
        
            The content of the document......

Time for tutorials

Welcome

Wed Jul 27 2022 23:57:32 GMT-0700 (Pacific Daylight Time)

To everyone and no one, hello.

On the other side of viral success, view counts in the millions, and the other isolated clusters of immense internet traffic, most of the internet lays empty. I’ve started a handful of online presences over my life: very few garnered even the attention of my in-person friends and family. I still wonder what all of those abandoned blogs are doing. They’re probably now trafficking pornography or other scams.

Perhaps this too will go the way of my adolescent blogs and course-mandated tweeting. But each time I start one of these, there’s a scene of wonder. Like walking into a desert, I lay feeble claim to a little corner of a vast, unknowable expanse.

On the Development and Deployment of Cyberwarfare II

Thu Apr 07 2022 14:52:00 GMT-0700 (Pacific Daylight Time)

On April 2nd, one of the world's largest wind turbine manufacturers, Nordex, was hit by a cyberattack. The German company's response took down most of its critical infrastructure down, in what some cybersecurity professionals identify as a telltale sign of ransomware. Although neither the company nor national agencies attribute the attack to any actor in particular, geopolitical indicators point to a connection to the Russian invasion of Ukraine. Regardless of who might be behind the attack, this attack highlights the unique strategic role that cybersecurity will play moving forward.

One of the most pressing implications of the Ukraine-Russia conflict is the future of European energy security. To keep this description brief, Europeans rely disproportionately on cheap Russian natural gas, and the continued domestic pressures to move away from producing alternative sources of energy like nuclear or natural gas regionally have only made things worse. Russia is therefore in a unique position to deny Europe an essential ingredient to Europe's standard of living.

In other words, Moscow is a strategic beneficiary to the recent harm caused by the Nordex intrusion. Without waiting for attribution or the unlikely event of a digital trail to the attackers, strategists in countries across the world should be alarmed by this event. Cyber-war is moving out of its fledgling phase - where it is relegated as a tactical tool - into geopolitical maturity as a strategic threat.

Lucas Kello, in his essay discussing the unique strategic space that cyber-war creates for itself, notes how cyber-warfare is offense-dominant. He argues that the costs of defending against an attacker are much higher than the costs of attacking an adversary. While I won't delve too much into his work, he is successful in his argument while addressing counter-points effectively.

What this means for the geopolitical landscape is significant. Not only can a relatively weak Russia rely on its strategic nuclear weapons in times of catastrophe, attacks like the one on Nordex can prolong the slow deterioration of Russia's conventional posturing. Russia now has effective strategic tools below the threshold of nuclear war, enabling it to use a substantially cheaper cyber-offense to wrestle concessions out of all but the world's most cyber-capable and wealthy entities, both public and private. By using cyber-war to jeopardize adversarial energy independence, Russia can alter the conditions of a ceasefire, armistice, or peace treaty by way of the conflict's mediators. The ability for asymmetrical conflict to exist outside of ostensible war is significant for Russia, as well as other actors who have faced international condemnation. When the lights go out, who is to blame?

On the Development and Deployment of Cyberwarfare I

Tue Mar 01 2022 13:30:00 GMT-0800 (Pacific Standard Time)

I don't think it's even necessary at this point to highlight the atrocity of the developing conflict in Ukraine. "War bad" is no longer the hot take it used to be, especially when one side of the conflict is both nuclear-capable and internationally cornered. But as terrifying as the news of Putin readying nuclear forces is, I am much more concerned with what happened hours before he declared its "special military operation".

Discovered on February 23rd, mere hours before the start of the latest round of hostilities, ESET research discovered Hermetic Wiper, malware designed to break into digital storage hardware and simply delete everything there

"Breaking. #ESETResearch discovered a new data wiper malware used in Ukraine today. ESET telemetry shows that it was installed on hundreds of machines in the country. This follows the DDoS attacks against several Ukrainian websites earlier today 1/n"

ESETresearch, Feb 23

Another Twitter user by the name of Thomas Roccia gave a great summary in how Hermetic Wiper works in the following days:

It's interesting to track the sudden appearance of a wiper during what can only be described as the year of ransomware. Essentially the difference between a ransomware attack and a wiper is recoverability: ransomware requires hackers to be able to exchange their pilfered data for compensation (typically Bitcoin or other cryptocurrency). Wipers like the one discovered in Ukraine, on the other hand, show no regard for the value of that data. Encrypted data can be recovered. A corrupted hard drive is much harder to ransom. As Roccia notes, one of the benefits of this sabotage is anti-forensic, in other words, covering the attackers' tracks.

This makes sense in context to Putin's escalation of the conflict. Rather than engaging Russia's digital capabilities in fundraising like in recent years, Putin is now gearing the growing cyberwar towards industrial and financial sabotage. We can expect is that these cyberweapons spill over to neighboring countries and perhaps across the world, and given the influx of major cybersecurity incidents in the last week, it's likely that variants and strains of this malware will be deployed in a similar way to Ukraine: as a clandestine first-strike against possible combatants.

Learning GraphQL and Apollo

Tue Sep 28 2021 20:07:00 GMT-0700 (Pacific Daylight Time)

Today was a good day.

It took me approximately 3 or 4 months to become fully comfortable with the traditional RESTful API and database experience with both SQL and MongoDB, and that was with an instructor paid to help us understand.

Today, it only took me a couple hours of development time to get my sanity.io content working with this scratch built React.js blog using GraphQL and Apollo.

2023 Edit: the current website you're looking at uses an entirely different stack. See this post.

Of course I'm not remotely a pro at using GraphQL, but I'm starting to see why it's appearing in more and more tech stacks for web developers. I'll outline what I'm seeing at this stage, more to see in a few months how much of an absolute newbie I'm being at this moment.

Compared to RESTful APIs, where most of the logic happens in controllers, middleware, and the arcane realm of the back-end, GraphQL presents itself as easier to manage as a front-end developer. Imagine the following scenario before GraphQL. A client is asking for a simple change to the layout, and as they aren't web-savvy, they're doing it in graphical terms. I want the categories of the posts to be here, the guy points to a spot on the mock up. The front-end developer, who the client is facing, nods their head but they know that in order to access that information, (let's assume at the very least it is stored in the database,) they're going to have to chat with the person responsible for building the controller for the API, who at the very least needs to add that requested information, namely the string values of the categories.

With GraphQL, all of the information that is stored in the database is readily accessible to the front-end developer. As soon as the client makes that request, the front-end developer can restructure their query to include the information, making it much smoother of a process to access that information and iterate in terms that are comfortable with the tech-savless client.

Well, at least that's how I imagine the strengths of this query language, you know, after using it for like maybe 90 minutes. I'm excited to find the limitations of the language, especially since I found out that a company that my friend is working at is actually switching back from GraphQL to RESTful APIs to transport data to the front-end. It seems, though, that in his case, he was dealing with lazy use of the query language, where the front-end folks were asking for way too much information and really blowing the performance of their product. GraphQL does seem a tad slower than a RESTful API, but for most use cases, I don't think it's a major performance issue.