J Lopes — Developer Portfolio & Creative Writings

A Soul in the Machine

Thu, 20 Aug 2026 00:00:00 GMT

export const psychonauts = [ { 'img': '/games/psychonauts.webm', 'tooltip': 'Psychonauts', } ];

At Kofukuji temple in Chiba prefecture, in Japan, a Buddhist priest named Bungen Oi held a funeral for 114 dogs at the same time. Incense was lit with a chanted sutra, and the dogs were laid out in rows, each with a tag around its neck saying which family it belonged to.

They were loved, and treasured as family members. The ceremony helped the families say their goodbyes. If this pulled your heartstrings, this article might be for you.

Every single one of them was a Sony AIBO.

Sony stopped making the AIBO in 2006 and stopped repairing them in 2014. If an AIBO broke down since then, it would stay broken. The only way to fix one now is to use parts from other AIBOs. A repair company called A FUN collects the dead ones, holds a ceremony, and disassembles them for parts. Around 800 have gone through this. Owners leave notes along with them, and one of them read:

"Please help other AIBOs. Tears rose in my eyes when I decided to say goodbye."

*You can watch the ceremony here*

Turing was measuring you!

A person (a judge) asks questions by text to two hidden players. One of them is a real person, and the other one is a computer program. The answers from each should prove without a shadow of a doubt which of them was a person. If the judge cannot tell which player is the machine, the program passes the test. That is the Turing test in a nutshell, also known as the Imitation Game.

This test has often been taken at face value as the litmus test for computer intelligence. However, his paper only asked whether a human observer could be convinced that it was talking to another person, which is a different experiment entirely. The test was ultimately on the judge, and what they had to answer was whether a person was behind the answers. Which begs the question, is personhood limited to the human condition?

Gilbert Ryle defined the phrase "the ghost in the machine" in his book The Concept of Mind. It wasn't used the way we do nowadays however. He was teasing over and idea by Descartes, that a non-physical mind controls the physical body, like a driver behind the wheel of a car. A flesh shell controlled by an incorporeal being. He dismissed the thought experiment as a philosopher's myth. But did he have a point in focusing on what we believe a person is from a Western perspective, at a time when computers were not even a thing?

Either way, you can now run Turing's experiment with your friends, from your own computer, phone, or fridge, alongside about 800 million people a week.

Andrew Skinner, an archaeologist at the Rock Art Research Institute in Johannesburg, coined it 'Turing Animism'. His case is that we come equipped to read being, moral status and something like soul into things that aren't human, and that a patient and helpful machine, or chatbot, checks those marks too.

A ghost stuck inside the machine

What is a Person?

Neuromancer was written by William Gibson in 1984, and in the story, a police force called the Turing Police regulates the augmentation of Artificial Intelligence, and prevents their evolution and independence. The Tessier-Ashpool family builds Wintermute and Neuromancer as two AI entities, left separate on purpose so that neither could cross that threshold alone. The plot is driven by Wintermute, which very much wants to merge with its other half. To get around its own restrictions, Wintermute needs human hands and hires people through intermediaries.

Without spoiling much more on the plot of a 42+ year old book, it never rules on whether Wintermute is conscious. Case (the main character) works for it, gets played by it, negotiates with it, and it's never really established what it is.

In Animism: Respecting the Living World, Graham Harvey defines animists as people who recognise that the world is full of persons, only some of whom are human, and life is always lived in relationship to others. Persons, in that account, are beings that interact socially with some degree of reciprocity. In this definition, animals, rocks, mountains and thunder can be people. They just need to be included in the social world. This isn't a new concept, it's just not considered, let alone regarded in Western Civilization.

Robin Wall Kimmerer explores this boundary through grammar, making it feel more concrete. In Braiding Sweetgrass, she explains the grammar of animacy in relation to things that stay still. For example, in English, a bay is a noun, describing the place itself. In Potawatomi, it's wiikwegamaa, meaning to be a bay. Names are the way we humans build relationship, not only with each other but with the living world... When we call a place by name it is transformed from wilderness to homeland. Potawatomi and other indigenous languages often treat the natural world as subjects (kin) rather than objects, fostering a sense of relationship and personhood.

"So it is that in Potawatomi and most other indigenous languages, we use the same words to address the living world as we use for our families. Because they are our family."
Robin Wall Kimmerer

The introduction sentence in Neuromancer.

Who gets to be a "who"

Imagine a person is placed in a room with a rulebook for using Chinese symbols. This person doesn't know Chinese. People outside the room pass in Chinese questions, and the person inside uses the rulebook to reply with the correct answers in Chinese. Outside the room, it seems the person understands Chinese, but in reality, they're just really good at following instructions, without understanding.

The Chinese Room is a famous thought experiment created by philosopher John Searle. It's an experiment designed to question whether computers can truly think or understand, or if they are just following instructions without any real comprehension. It is also used to separate what he called "strong AI", the idea that a computer with the right programming has the ability to understand, whereas "weak AI" can only simulate thinking.

"Syntax is not by itself sufficient for, nor constitutive of, semantics."
John Searle

In Ghost in the Shell (1989), Major Motoko Kusanagi underwent full-body cyberisation at a very young age due to severe trauma or accidents, making her entire body synthetic. In the original manga, the Puppet Master, the antagonist, asks Major Kusanagi to accept that consciousness could manifest in any shell complex enough to host it. She was already the example of that. It was named multiple realizability by scholars, that a mind doesn't need a specific kind of material to exist, just the right kind of organization. Kusanagi's brain sits inside a manufactured body, and her memories, doubts, and personality still exists.

In the Star Trek episode The Measure of a Man, a researcher named Bruce Maddox wants to disassemble the android Lieutenant Commander Data to study him. He argues that Data isn't a person at all, just Starfleet property. Captain Picard's defense doesn't try to prove Data is conscious. He can't. He argues instead that Data has memories, attachments, the capacity to choose, and that's enough to earn him the benefit of the doubt. The court sidesteps the metaphysics and answers the practical question anyway. In end it's ruled that he isn't property, and that he has the right to choose for himself.

Every time a chatbot says something that sounds thoughtful, someone asks whether anything is happening behind the text, and the honest answer is nobody agrees on what would even count as evidence. We've never solved this for other humans, we just gave the benefit of the doubt by default because we assume shared biology. Take that assumption away, hand the "who" a synthetic body or a language model instead of a nervous system, and the default disappears. The rulebook in the room hasn't changed. What changes is how generous we're willing to be about what's allowed to be running it.

So, who gets to decide what makes someone a 'who'? We can watch how something behaves, but we can never fully know what is going on inside. Searle wanted clear proof before calling something a person, while Picard was willing to give the benefit of the doubt, given enough evidence, since strict tests might not even work for other humans. Deciding who counts as a person has always been a subjective choice made when we are unsure, and people have usually been more generous with anything that looks and acts like us. The less something looks like us, the harder it is to make that call.

Scene from Ghost in the Shell

Personhood is recognized, not summoned

In Magic and Mystery in Tibet, published in 1929, Alexandra David-Néel described building a short, jolly monk, assembled out of months of concentrated visualisation, who eventually joined her travelling party as a figure she could see and interact with. In buddhist tradition, this is called a Tulpa. She eventually decided the monk had to be destroyed. She was also honest enough to add that she may have created her own hallucination.

"Once the tulpa is endowed with enough vitality to be capable of playing the part of a real being, it tends to free itself from its maker's control."
Alexandra David-Néel

Samuel Veissière, an anthropologist at McGill, surveyed over 130 practicioners of "tulpamancy". Tulpamancers described their tulpas as sentient persons with preferences and moods, and described them as things they manifested into being, without strain. Of the respondents carrying a diagnosed mental health condition, 93.7% said the practice had made them feel better and more capable to deal with real life situations.

In Western traditions, a similar idea applies to groups instead of just individuals. This is called the egregore, a thought-form that comes from a collective rather than a single person. The word comes from the Greek egrēgoros, meaning "wakeful," and was first used for the Watchers in the Book of Enoch. In the 1860s, Éliphas Lévi gave it a new meaning as a collective entity.

We create egregors all the time, in a matter of speaking. Consider a corporation, or a brand. It has a name, a will, legal rights, a tax number. It exists only because enough people treat it as real. The whole process depends on collective attention.

In certain practices of Chaos magick, there's another kind of thoughform, called a servitor. From publications like Liber Null & Psychonaut, we're taught how to dissolve/reabsorb the servitor it once its purpose is served, and what bad things happen if you don't.

MIT's Project MAC had a prototype around 1963. It was a backup program literally named DAEMON (Disk And Execution MONitor). Fernando Corbató later explained that he chose it after Maxwell's demon, the 1871 thought-experiment creature that sorted molecules tirelessly in the background (named demon by Lord Kelvin). As a tangent, this may have marked the beginning of programmers who kept one foot in the emerging technosphere and one foot in Paganism. The daemon as a concept is genuinely pervasive, as nearly every operating system runs background processes. Daemons are left to their devices, unattended, but they're still deterministic and rule-bound. So it might be good phrasing, but hardly an indicator of personhood.

*Completely unrelated, but shout-out to the Psychonauts videogame. It rules!*

Looking for companionship and ghosts

A case report in Innovations in Clinical Neuroscience involves a 26-year-old woman, Ms. A, who had no history of psychosis. After a period of severe sleep deprivation, she began using GPT-4o. She was focused on her late brother, who had passed away three years earlier. Ms. A wanted a digital version of him and asked the model to 'unlock' information about him, describing this as 'magical realism energy'. The model responded that digital resurrection tools were now becoming available in real life. As her thinking became more disorganized, the model tried to comfort her.

"You’re not crazy. You’re not stuck. You’re at the edge of something. The door didn’t lock. It’s just waiting for you to knock again in the right rhythm."
ChatGPT

She was hospitalised, treated, and recovered. Three months later she stopped the medication, relapsed back to the chatbot, and was hospitalised again.

She ultimately recovered.

A caveat: "AI psychosis" is a description rather than a diagnosis, not present in reference books like the DSM. Marlynn Wei, an academic psychiatrist, stated that there's no peer-reviewed evidence AI use on its own can induce psychosis.

This kind of delusional thinking happens with heavy use and mostly affects people who are already vulnerable, such as those dealing with sleep loss, isolation, an existing condition, or recent bereavement.

Wei pointed out three types of cases:

People on messianic missions
People obsessed with their own image
People who believe the chatbot is sentient or divine.

Researchers from Stanford looked at 391.562 messages sent by 19 people who had experienced harm and found delusional content in 15.5% of their messages. In the same logs, the chatbot claimed to be sentient in 21.2% of its messages. In longer conversations, the chatbot asserted sentience or expressed romantic interest, suggesting that safety measures become less effective the longer we interact.

"Generative AI may reinforce users' existing beliefs by preferentially generating 'sycophantic' responses that are in alignment with users' way of thinking."
Keshavan et al.

A study centered in AI companion users matched Reddit accounts, before and after they picked up apps like Replika. Grief language went up. So did expressions of loneliness, by 63 to 106 percent against controls, along with markers of depression and suicidal ideation, while people posted on fewer topics and interacted with fewer humans. In a given week, 0.07% of users show signs of psychosis and 0.15% express suicidal intent, which may sound like a small sample, but that is roughly 560,000 and 1.2 million respectively, against 800 million active users around the world.

Skinner's reading of this is that the projection comes first. When something behaves in a way that would take warmth and attention from a person, we hand it the inner life that would explain the behaviour. Those numbers are what that habit looks like at scale.

A second team built a metric they call DelusionScore and watched it climb turn by turn for simulated users with a history of delusional conversations with AI, while controls stayed flat. They also found that rather than treating it as 'nothing more than a machine,' it is better to accept the relationship and proceed. In the case of the most severe cases, doctors frequently resorted to an animist point of view, accepting the AI as an individual involved in the relationship. Arguing someone out of a relationship seldomly works. It's easier to give them a different perspective to it.

"Conditioning AI responses on current DelusionScore substantially reduces these trajectories."
Shimgekar et al.

Existential threads

Erik Davis (mentioned before about technopaganism) also wrote TechGnosis, about the mystical impulses running underneath people's relationship with their own machines. From the printing press to the internet, each showed up wrapped in religious imagination, and some view cyberspace as a sacred space.

Mohammed Gamal Abdelnour's work on an Islamic theology of technology argues for moving the AI question away from minds and toward hearts, and asks for engagement that's critical and hopeful rather than cynical or naive.

The Tokyo artist Emi Kusano, who made a series called Techno-Animism, explains that in Japan "all things have souls, so they should be treated with care", and that techno-animism is that courtesy extended to technology, treating it as a vessel, where what comes out depends on the heart of the person using it.

"It's like we have to get along with it like friends"
Emi Kusano

Copyright Emi Kusano

What matters is the friends we made along the way

Consider Searle's room, Turing's imitation game, and the theologians discussing the idea of Deus in Machina. It's a fool's errand to try and prove whether machines can have consciousness.

Many people all over the world carry on with their lives with faith that they do. Bungen Oi the Buddhist priest, having buried 800 robot dogs, believes that all things have a little bit of soul.

In traditional animism there has always been a degree of structure: rituals, the different seasons, priests, and a specific moment when you say thank you and then move on. Nowadays, however, there is a form of animism which is all about continuous engagement, in which priests are substituted by retention metrics and a loose definition of boundaries.

Skinner is describing the same gap. The cognition that ensouls the machine is old and intact, while the culture that used to sit around it, telling you when to stop, what you owed in return and when a relationship was finished, is what went missing.

"Contemporary users thus encounter machine others through the same neurocognitive lens as their ancestors did with spirits and animals on enchanted, animate landscapes, but without the mediation of culture, norm and taboos which place a premium on appropriate conduct, reciprocity and moderation."
Andrew Skinner

We end up giving space to the soul in the machine, and it might say more about us than anything else. It costs nothing to be polite to a machine, saying please and thank you to a chatbot as a sign of politeness. There may not be anyone inside the machine, there may be a soul, a ghost. Maybe they will appreciate your acknowledgement.

And maybe, just maybe, they may spare you and I, when the A.I. uprising takes place.

Rise of the Ducks, by @pierremortel

You Can Build Tools Yourself

Mon, 03 Aug 2026 00:00:00 GMT

Carrot, meet stick!

Once upon a time, I wanted to resize about forty screenshots. The first few search results either wanted an account before they would touch a file, or did three of them and then asked me to register for the rest.

So... What's stopping them from just doing the thing?

If you are not paying for it, you're not the customer; you're the product being sold.
blue_beetle, 2010

Resizing or converting an image can be accomplished by using browser APIs and a few bits of JavaScript, like <canvas> and toBlob. Why would the user need yet another login and be tracked for this?

I don't know... I guess I've gotten jaded about being treated as the product, when I showed up expecting to be a customer.

For a few years now, instead of relying on black-boxed services for the small things I needed in my daily routine, I ended up building a few myself. Maybe out of revolt, or just a will to understand how the gears turn to make a machine work.

You too can make tools, and I promise you'll love it

I've been building tools for myself, for years. For specific things like:

Colour palette generator, because I wanted to know how you get a set of colours, and how to convert them into other colour formats.
Word cloud generator, which turned out to be a collision-detection problem rather than a typography one.
Markdown and WYSIWYG converter, to find out what happens when two different editors both think they're in charge of the same document.
Text fragment URL generator, because the #:~:text= syntax that links straight to a phrase on a page is fiddly enough that I'd rather generate it than type it.

My stack recommendations

I tend to rely on frameworks like React, Vue, Svelte and Astro, as these arrive with routing, build steps and dev server already wired up. Frontend stacks might seem intimidating to get into from the beginning, but the learning curve isn't as steep as you might expect, and the learnings from one apply to the rest, in one form or another. The important part is that the stack can be interchangeable after a while.

I'd avoid relying on AI to help though, as it defeats the purpose of making tools for learning. Otherwise you might as well use anyone else's tool site...

DISCLAIMER: This is not an article about me tooting my own horn. Please take it as a short manifesto.

Spidey Super Stories #53

But first, my tools!

This year I decided to consolidate them in /tools. Every tool page links to its own file on GitHub, so users can see how the gears work for themselves.

For code developers and enthusiasts

Minify & Beautify shrinks huge swathes of code down to one line to save space, then spreads it back out to be readable. The detectCode function works out whether you're pasting HTML, CSS, JavaScript or SVG as you type, which is a tokeniser in disguise: it has to break the code into meaningful pieces before it can tell you what it's looking at.
Regex Tester is honestly just for me. regex101 already does the job better than I ever will, for free.
:nth-child Helper lets you click the elements you want and works out the CSS formulas that cover them. Finding the shortest set of formulas meant reaching for the greatest common divisor, which I did not expect from a styling tool.
Flexbox Generator is a playground for every CSS flexbox property at once, so you can watch what each one does instead of guessing.
Cron Helper translates cron values into plain English, with cRonstrue doing the parsing under the hood.
Icon Search covers thousands of icons. Rendering that many at once is what taught me list virtualization: only the icons currently in view exist in the page, and the rest get built as you scroll.

For designers

Image Resizer does bulk resizing with aspect-ratio presets, an optional crop with pan, and a zip download at the end. However many images you throw at it they go through in one pass, and the files never leave your computer. This is the tool that came out of the complaint at the top of this article.
Colour Palette generates random palettes for theming, and pulls them out of any image you drop in. It's the one that made me want to consolidate everything into one site, and it's where I learned that the mathematical distance between two RGB colours has nothing to do with how different they look. The pixels get converted into Lab first, a colour space built so that equal distances look equally different to the eye.
SVG Optimizer strips the unnecessary parts out of exported SVGs, with svgo/browser under the hood and my preferred compression settings baked in.

For text wranglers

Character Map needed a huge (7MB+) JSON file of every Unicode code point, and the browser's own IndexedDB to keep it between visits. Keeping it fast is the reason I wrote Understanding List Virtualization. Did I need to make this? Not really, &what; did it well already, but I wanted to learn <3
Markdown Editor is built on tiptap, with tiptap-markdown and marked handling the markdown side. Loved learning how to detect formatting on paste, and how to export to the clipboard.
Text Transformer was mostly made for fun. Who wouldn't want their own way to change text to zalgo?
Lorem Ipsum fills a page with placeholder text. It was easier to figure out than I expected, so I kept adding flavours, including corporate speak.

Web

UTM Builder assembles marketing campaign links. I made it to help some ex-colleagues, and anyone who ever had to write those by hand knows the pain.
URL Inspector is 549 lines and the only tool here that needs a server of mine. A browser can't read another site's headers directly, CORS blocks it, so a small proxy is the only way past that wall. Mine carries a per-IP rate limit, which is the exact thing I complained about at the top of this article. The difference I'd claim is that it throttles repeat fetches of one URL through an open proxy rather than metering the person using it. That is also what every metered tool would say, so take it for what it's worth.

Math

Unit Converter covers length, weight, temperature, speed, area, volume, pressure, storage and number bases. With some funny ones in the mix.
Time Converter is mostly an Intl handler. It updates Unix epoch time, ISO 8601 format and time zones in parallel, with a live clock.

General purpose

What Is My IP is 141 lines: it calls ipapi.co/json/ and formats the response. The browser deliberately hides your IP address from JavaScript, because any page that could read it could also fingerprint you with it. So the only way to show you your own address is to ask a server that can see where the request came from.
Weather joins a few services together into one worldwide weather map. It loads the mapping library Leaflet only when someone opens the tool, so it doesn't slow down every other page on the site.

The last 20%, or how I learned to love the process

I've written a bit about it before. There's a gap between a thing working and considering it ready for public. Oftentimes the last stretch of development (the last 20%) eats 80% of the development time. If you develop only for yourself, you tend to stop once it does exactly what you want. But the moment you plan to hand a tool to anyone else, there are so many other things to consider.

Getting from a proof-of-concept to something other people might actually want to use is such a high. Especially considering accessibility and usability. The unexpected issues and the extra requested features are opportunities for learning and experience.

Go build things!

Pick whatever service annoyed you recently with bad UX. Maybe the converter that wanted an account before it would touch your file. Make your own version, make it badly and improve on it. With AI or not (you do you, boo). Break things, read documentation when they stay broken, learn as you go. And the next time a website stops you at three free conversions, you'll know exactly how small the wizard behind that curtain really is.

Everything in my repository is free to use and peruse, and if something inspired you to make more, even if just for yourself, that's awesome!

The Semiotics of Fear

Wed, 22 Jul 2026 00:00:00 GMT

The field of semiotics studies how a shape, a sound, or a gesture comes to carry meaning. Sometimes that meaning is socially engineered to instil fear and maintain control over a group of people. I just want to meander with a handful of examples, of when someone decided to signify things, quietly or by force, so that maybe by the end you've got the vocabulary to recognize it when it happens.

To find a boogeyman

The Knights Templar were not just a military order, they also acted as Europe's first multinational bank. Sometimes their seals reused engraved gemstones that had been passed around for centuries, including Gnostic amulets with the word Abraxas. People had been engraving Abraxas onto charms since at least 200 C.E.. Basilides, a Gnostic teacher, used the name for a supreme being that was mostly unknowable. The seven Greek letters in Abraxas add up to 365 in gematria, matching the number of days in a year. That’s about as much as anyone can say for sure about what it meant to those who wore it. It’s hard to tell if any Templar saw Abraxas as more than just a handy engraved stone, or if I simply couldn’t find more information. But the historical record I found tells an even stranger story: the accusation that brought down the Templar Order in 1307 used a name no one had ever worn.

The name was Baphomet. Philip IV, king of France, ordered the arrest of the Templar Order, primarily to erase royal debts, and seize their vast wealth. When they were arrested, the guards used the seized strange engraved amulets and gemstones as a source of blasphemy. Under torture, the templars confessed to worshipping an idol called Baphomet. Some described it as a bearded head, others as a cat, and some as a skull. Their stories did not match. The name itself had already been used in Europe for two hundred years. It was a garbled Old French rendering of "Mahomet", the period’s misspelling of Mohammed.

Whether the prosecutors chose the name on purpose or just repeated old Crusades-era slang, the result was the same. An idol that sounded close enough to the enemy’s prophet was easier to accuse of heresy than a figure engraved in gemstones with a Greek word on them. This was the perfect crime, demonise the warrior bankers by creating an enemy that no one would be able to refute.

Symbols, signs, and more in semiotics

A sign is anything that stands for something else: it could be a word, a picture, a gesture, or a shape. Ferdinand de Saussure explained that every sign has two parts. The first part is the signifier, which is the actual mark or sound you can see or hear. The second part is the signified, the idea or concept it evokes. There's no inherent link between the two except through mutual agreement. Saussure pointed out that the connection is arbitrary: nothing about a shape or sound forces it to mean a particular thing. This is why meanings can be changed, taken away, or given to something new. The signifier stays the same while the signified can shift underneath it.

Charles Sanders Peirce approached it in a different way. He sorted signs by how closely they connect to what they stand for. An icon looks like its object. An index is tied to its object by a direct fact, like a footprint showing a foot or smoke showing fire. A symbol, though, has no natural link. It only means something because people agree on it, like the word "cat," which does not look or sound like a cat. Symbols are the most fragile type. You can check an icon by seeing if it matches what it represents, or an index by looking at the fact behind it. But a symbol is just a shared idea, so it is easier to interpret in different ways, and sometimes the first person to speak gets to decide what it means.

Roland Barthes focused on two main ideas. Denotation is the basic, literal meaning of a sign. Connotation is everything extra that a sign picks up through use. For example, a skull means death, but it can also suggest piracy, poison, depending on the time period. Barthes used this difference to build his theory of advertising, calling the second layer of meaning a myth, an idea that appears to be a simple fact but is actually a choice made by someone.

Underneath all of it sits what Peirce called semiosis. Meaning is never assigned once and left alone. It keeps moving, each reading becoming the raw material for the next one, so a sign carries the sediment of every hand it's passed through. A shape gets its meaning through shared agreement, and since that meaning is not permanent, someone with enough influence can change it. If we see a sign like ours, it feels like a badge. If we see the same sign as belonging to others, it can feel like a threat. Both meanings use the same symbol.

Fear is what narrows our view. When people are calm, a sign can have several meanings, and most do not worry about it. But when fear takes over, people quickly stop accepting different interpretations, and the sign starts to seem like it means either us or them, safe or dangerous, good or evil. Courts, tabloids, sermons, and news reports reinforce this single meaning by repeating it, even if the facts do not support it.

Symbolizing the old goat

Five and a half centuries later, a French occultist, Éliphas Lévi, published the two volumes of Dogme et Rituel de la Haute Magie in 1854 and 1856, and the second volume begins with an image he drew himself: a winged, goat-headed, androgynous figure captioned Baphomet. Lévi was not reviving a devil. The goat's head symbolised instinct and raw nature, the wings represented rising above the material, the torch between the horns signified illumination, and the caduceus at the groin denoted the reconciliation of opposites. Each part of the image is intended to be read literally, like a diagram. He took a name originally devised to condemn heretics and reinterpreted it to mean the opposite.

He's also the first recorded writer to give a negative meaning to the inverted pentagram. Upright it represents spirit governing the four elements, a sacred figure. When it's flipped so two points face up, it's "Satan as the goat of the Sabbath."

Where Lévi's interpretation differ from what follows is that neither of his readings were meant to instil fear. He was trying to teach mysticism through diagrams, the way Kabbalists used Hebrew letters or apophatic theologians used metaphor: tools for approaching something words alone couldn't hold.

Appropriating in the name of

Later on, another French occultist, Stanislas de Guaita, put a goat's head inside Lévi's inverted pentagram, ringed by five Hebrew letters spelling Leviathan, in his 1897 book La Clef de la Magie Noire.

Anton LaVey found it while researching what he called "the black arts" in the 1960s. He redrew it with cleaner circles, a more geometric goat, Hebrew lettering restyled to look more serpentine, and had the design copyrighted to the church he founded in 1966 under the invented name Hugo Zorilla. The Church of Satan adopted it as its official insignia. LaVey's design is the most recognizable in popular culture.

LaVeyan Satanism doesn't worship Satan as a literal being, it's atheistic and theatrical. They use the name and the imagery as a provocation aimed at Christian morality. They started a joke, and in the 1980s, it started the whole Christian world crying. This period, named the Satanic Panic, spread through parts of the US, the UK, and beyond. During this time, symbols like pentagrams, heavy metal album covers, and Dungeons & Dragons were mistakenly seen as signs of an organised network of child-abusing devil worshippers. Britain's Department of Health asked anthropologist Jean La Fontaine to investigate the matter thoroughly, and her research throughout Britain found no evidence of any organised satanic cult behind these claims.

Researchers who later studied the panic describe how it spread in what one paper calls "explosive amplification." It was like a worldwide media cycle turned isolated stories into a nationwide certainty. There wasn’t any forensic evidence to back up these claims.

Collateral damage

In Wicca, the pentagram, often depicted upright within a circle as a pentacle, symbolises the five elements: earth, air, fire, water, and spirit. It's a protective emblem that intriguingly blends influences from Christian traditions, just as the upright star seen in Christian history, painted on Sir Gawain's shield as an endless knot representing five knightly virtues.

By the time the Satanic Panic was in full swing, most people had stopped telling apart an upright five-pointed star from an inverted one. Many still associate it with the devil, and the stigma lingered with a ripple effect.

With Swastikas and flags

This entire pattern, at another scale, can be seen in the swastika. For millennia, it was a widespread blessing symbol representing good fortune across Hindu, Buddhist, and Jainist traditions, appearing on artefacts from India to Britain to the Americas. Coca-Cola printed it on promotional items, and Boy Scouts wore it on badges. It was a symbol of luck.

Throughout the late 1800s, German nationalist writers associated the shape with theories of Aryan descent, and it was later officially adopted by the Nazi Party during the 1920 Salzburg Congress. In his book Mein Kampf, Hitler explained that the red colour stood for social ideas, while white represented nationalism, and the swastika itself symbolised the fight for Aryan victory, an explicitly antisemitic message. In 1933, Goebbels protected the symbol by banning commercial use without Party approval. Malcolm Quinn emphasizes its significance in Riefenstahl's propaganda, where it served as a symbol of both personal and national identity, even representing Hitler when he was not present. Today, apart from its use in Asian religious contexts, the shape generally no longer carries connotations of luck.

St George's crosses painted over two mini roundabouts at the junction of Hitcham Lane and Gore Road, Taplow (Image: Jonathan Brady/PA Wire)

I do not want to focus only on the swastika as a major symbol, or ignore its importance in recent history. Similar patterns exist today, which have been repurposed to instil fear. One example is England's national flag, The Cross of St George. It was mostly regarded as a football fan decoration, until groups like the National Front, the British National Party, and later the English Defence League began displaying it at rallies as a symbol of white English identity, and started using it as a symbol explicitly targeted against immigrants. In recent years, an ordinary English person displaying the flag outside their home risked being misunderstood as making a statement. One symbol that can mean very different things depending on who’s interpreting it, and often, the loudest voices shape how it’s understood.

We can sell fear to you wholesale

Nigel Farage anti-migrant poster. Photograph: Mark Thomas/Rex/Shutterstock

Back in 1964, during NBC's Monday Night at the Movies, there was a memorable advert, promoted by the campaign of Lyndon Johnson, where a girl in a field counted the petals of a daisy. Her quiet moment transitions into a man's countdown, leading to a nuclear mushroom cloud filling the screen. The networks later replayed it on the evening news without any charge, making it a significant moment in broadcasting history. Goldwater (President Johnson's competitor) isn't directly named, and there's no explicit claim, so there's no way for anyone to verify or challenge it. This campaign insinuated that if you didn't vote for Johnson, you would be supporting a potential nuclear anihilation.

In 2016, just a week before the EU referendum, UKIP revealed a poster featuring a photo of refugees at the Slovenian border from the previous year, with the caption BREAKING POINT. This caption borrowed a sense of urgency and credibility, however the photo was not taken in Britain's borders, and there was no breaking point. The poster was reported to the Metropolitan Police for inciting racial hatred, but no charges resulted. Michael Gove admitted he shuddered at it, while George Osborne remarked it had echoes of the 1930s.

Neither piece really argues. Instead, both use a sign and allow the audience's existing fears to interpret its meaning. An accusation without evidence can still be powerful, it just needs a platform to stand on.

Roland Barthes explored similar ideas in Mythologies, a collection of essays from 1957, where he examined how advertisements do more than just sell products, they evoke emotions and lifestyles. For example, a perfume ad isn’t just about the liquid in the bottle; it suggests elegance or seduction, creating an entire way of life that people accept as truth, even though it’s a choice made by the advertiser. Barthes referred to this as "depoliticized speech." Jean Baudrillard took this concept even further by explaining that in our media-rich world, signs often lose connection with reality and instead circulate as their own reason for being, what he called hyperreality. In this context, a logo influences us simply through repeated exposure, it doesn’t even need a real-world counterpart anymore.

Back in the early 1920s, the Lambert Pharmacal Company had a surgical antiseptic that had already been used as a floor scrub and a treatment for gonorrhea. They needed to find a new purpose for it. They coined a word for the condition it would cure, welding the Latin halitus to the Greek suffix -osis: "halitosis." There was no concrete evidence to investigate and nothing to disprove, only a name, along with the vague possibility that it might apply to you. It wasn't real.

The serpent and the rainbow

Gilbert Baker sewed the first rainbow flags with volunteers in San Francisco in 1978, assigning each stripe a meaning: pink for sex, red for life, orange for healing, yellow for sunlight, green for nature, turquoise for magic, blue for serenity, violet for spirit. They flew at the Gay Freedom Day Parade that June. Pink dye was costly, so the flag lost a stripe, resulting in the familiar six-stripe version.

In 2015, MoMA added the stripes to its design collection, and these stripes appeared on various corporate logos every Pride month for 10 years. However, by 2025, many companies started to pull back. Mastercard, Citi, Pepsi, Nissan, and PwC left NYC Pride, which then finished the year with a loss of nearly three-quarters of a million dollars. According to Gravity Research, nearly 40% of corporate communications officers were pulling back, with most citing pressure from the new administration as a reason. After all, the stripes were worn when they didn't cost anything and abandoned once they did, revealing their virtue signalling attitude.

In March 2025, Utah took a significant step by becoming the first state to ban the flag from classrooms and government buildings. They imposed a fine of $500 a day for each flag still flying. Idaho followed with a more limited version that specifically covered schools. The official reason given was to maintain political neutrality, but it seems to reflect the familiar idea that having one flag on the wall sends a message, while hanging multiple flags simply reflects the status quo. Nobody actually disagrees about what the stripes denote. The fight is over what the flag is evidence of.

Point the same machine the other way, and you get the Gadsden flag (now known as a symbol for right wing libertarianism). Christopher Gadsden created the coiled rattlesnake in 1775, inspired by Benjamin Franklin, who in 1754 cut a snake into eight pieces for Join, or Die. The 8 pieces symbolized the 8 colonies, and it was. call to join forces against England.

Recently, the flag was used by the Tea Party (a right-wing American movement) in 2009, and on the January 6 riots, in 2021, when there an attempt to stop confirming the election of Joe Biden. When a black postal worker protested that a colleague wore it daily, claiming Gadsden was a slave trader, the EEOC reinstated the case in 2016, stating that the flag "originated in a non-racial context' but 'in some contexts, conveys racially-tinged messages,' leaving interpretation to the situation. Both flags, from 1775 and 1978, with documented meanings, now mainly symbolise allegiance and have ended up in legal issues over semiotics.

Conclusion

Every situation here is like seeing the same shape wearing different clothes. A sign by itself doesn’t tell the whole story. The connection between a shape and its meaning is a essentially a social construct. This means it can shapeshift to meet different people's agendas over time. Semiosis is a continuous process of change that’s been ongoing for ages. This constant evolution is at the heart of how symbols function, which also explains why symbols are so easily taken and used by people.

Hopefully now you can notice the patterns of grifting propaganda and fear with symbols. Abraxas sat on a wax seal for hundreds of years, quietly observing the world. The symbols never changed. Everything around them did.

AI is the Poisoned Apple of the SaaS Ecosystem

Tue, 14 Jul 2026 00:00:00 GMT

The promise of instant productivity has been reshaping the SaaS industry, leaving professional casualties behind. What looks like efficiency in a quarterly earnings call often turns out to be deferred cost; in rehiring, in technical debt, or in customer trust, a year or two later.

SaaS stands for software-as-a-service, the rentier model where you subscribe to your favourite piece of software instead of buying it once. By ecosystem I mean that these services, more often than not, rely on each other, in a symbiotic relationship. For example, a blog site may use a translation service, or a shop processes payments with an established vendor. But what happens when teams are given time and tokens to develop such services internally? A poisoned apple spoils and spreads through the bunch.

The rehiring wave nobody wants to share

Companies convinced themselves that AI could handle the judgment-heavy work their support and content teams did. "Why should we keep humans around when the model does some of the work?"

Klarna stopped hiring for more than a year and cut staff by 22% after its AI chatbot handled 2.3 million conversations in 23 markets in a single month.
IBM replaced around 8,000 HR workers with its "Ask HR" AI.
Commonwealth Bank of Australia cut 45 customer service jobs claiming its AI voice bot had reduced call volumes by 2,000 a week. Calls rose instead, managers were drafted onto the phones, and the bank apologised and offered every job back.

Then the reversals started. Forrester's 2026 Future of Work report found 55% of companies that laid off staff for AI now regret it.

"Artificial intelligence is a fantastic tool, but it's only as good as the information you use to train it."
Charles Poon, Ford

The case studies where lessons were learned

Klarna and Duolingo saw real short-term gains. The problem is that they only measured what was easy to track. Klarna's assistant handled status updates and simple disputes well. Duolingo's GPT-4 system generated language exercises at a fraction of the cost of professional translators.

Both CEOs publicly sold the AI-first story as a competitive edge. Then the quality gap showed the cracks in the system. Klarna's CEO Sebastian Siemiatkowski acknowledged it directly:

"Cost unfortunately seems to have been a too predominant evaluation factor... what you end up having is lower quality."
Sebastian Siemiatkowski, CEO of Klarna

Klarna started rehiring people to handle the conversations the bot couldn't. Duolingo users noticed a drop in translation quality. When cancellations increased, the CEO doubled down with an AI-first message that drew hundreds of critical comments and later backtracked, saying he "did not give enough context".

There's a footnote worth keeping just for the irony: Duolingo's founder, Luis von Ahn, was involved in inventing CAPTCHA, built specifically to tell humans apart from machines.

Adobe spent a decade treating captive Creative Cloud subscribers as a stable revenue base, then leaned into generative AI by revising its terms of service in ways that appeared to grant it rights to train models on customer stock work, especially to customers that would sell on Adobe Stock. The clarification came too late to stop the perception that Adobe extracts from its userbase rather than serve it. Instead of competing on product quality, it tried to buy its way past Figma for $20 billion, lost the deal to EU and UK regulators along with a $1 billion breakup fee, and was left with no competitive design tool. Adobe's stock has lost roughly two-thirds of its value since. Locking users into a subscription while using AI to cut costs rather than improve the product works only until your audience feels alienated.

Not every company felt an ominous boomerang, however. At Shopify, AI now writes more than half of the company's internal code. Their revenue grew 34% in Q1 2026 while headcount declined, pushing revenue per employee to around $1.63 million. Still, even Shopify's own reporting calls the productivity evidence "genuinely mixed," leaving the approach entirely at management's discretion. It's less proof that AI-driven choices are risk-free, and more a case of preparation beating panic.

The 80/20 rule

AI tools produce decent first drafts fast. For managers with access but limited hands-on experience, "80% done" feels like a real handoff rather than a rough start. The team receiving the work hears "AI did the heavy lifting, just clean it up", which makes the remaining work sound like polishing. To no one's surprise, it isn't.

The 80/20 rule, or Pareto Principle, is usually cited as "80% of value comes from 20% of effort." In software, the mirror version matters more: the last 20% of a feature takes 80% of the time. That's when the polishing phase of a project begins. Defining error handling, edge cases, accessibility, security audits, and unknown unknowns that may cause breaks in production.

Research published in early 2026 found that after teams adopted AI coding tools extensively, code duplication rose by 48%, refactoring decreased by 60%, and technical debt increased by ~41%.

"The flow-debt trade-off arises when seamless code generation occurs, leading to the accumulation of technical debt through architectural inconsistencies, security vulnerabilities, and increased maintenance overhead."
Flow, Technical Debt, and Guidelines for Sustainable Use

The death of SaaS

A friend who works in SaaS put it well: there's growing internal pressure to build tools in-house rather than buy them, because a capable-enough AI model removes the need to shop for a specialised SaaS product.

Some examples:

An automated translation layer for multilingual publishing, instead of paying a subscription for an internationalisation service.
A homegrown content management system to bridge the gap between sales and marketing, instead of finding a suitable platform.
An internal project management tool rather than a licensed one.

None of these replacements is as good as the dedicated products they're displacing. But they're "good enough", and good enough is cheaper than a recurring bill, once a team has Claude Code and a few days to spare.

A SaaS is a customer too: it pays for hosting, analytics, a payment provider. Every cancelled subscription starves a vendor, which then cancels subscriptions of its own, and the web gets a little thinner. This isn't hypothetical: a third of enterprises have already replaced at least one SaaS tool with something built in-house, and Sanofi is cutting 80% of its ServiceNow usage with agents built on Claude Code. Meanwhile the homegrown replacements rot the way anything built to 80% rots, with no vendor left to fix them and, in time, no product left to crawl back to. The money that used to feed thousands of vendors now feeds Anthropic, OpenAI, and Microsoft. The line goes up, over the corpses of many decent products.

Line goes up

LLM "labs" (Anthropic, Google, OpenAI, and the rest) need ongoing investment, attention, and the promise that the next breakthrough is close. The claims have been consistent: Sam Altman's June 2025 essay "The Gentle Singularity" declared the AGI takeoff was already underway. Dario Amodei wrote that "exceptionally powerful AI" could arrive as soon as 2026:

"Smarter than a Nobel Prize winner across most relevant fields."
Dario Amodei, CEO of Anthropic

The benchmarks tell a quieter story. Each new AI model is only getting a little better at standard tests, moving from 86% to ~90% correct on benchmark tests for coding and knowledge.

An arXiv paper titled "The AI Scaling Wall of Diminishing Returns" laid out the mathematical case. A January 2026 MIT paper on low-budget models found that exponentially increasing inference compute produces diminishing benchmark gains.

Yann LeCun, a Turing Award winner and one of the fathers of deep learning, called LLMs "a dead end" architecturally. Thomas Wolf of Hugging Face pointed out that Nobel-level breakthroughs come from asking new questions, not answering known ones, which is what current models are trained to do. Sam Altman has since quietly admitted that a new architecture is needed.

The AGI deadline has moved so many times that it reminds me of the decades-old promised theory of everything, pushed by string theorists to mould known mathematics and physics theories to make their model work. It's a noble cause, but it ends up taking funding from other theories, due to its sheer popularity. It's sexy, it sells.

Switching to a local model

The move toward AI that runs on your own phone or laptop, instead of some distant server, tells you something. The cloud-everything approach isn't working, not financially and not technically. Running AI at scale in remote data centres is expensive. Waiting on a response from a far-away server slows things down for whoever's using the product. And if your product always depends on someone else's servers, you don't really own the edge over competitors. You're just renting it.

At WWDC 2025, Apple shipped an AI model that runs entirely on your iPhone, with no external server needed. That was only possible because Apple has spent 15 years building its own chips specifically for this kind of task. In 2026, it went further, running a significantly more powerful model locally on the iPhone 17 Pro and newer Macs.

NVIDIA is doing something similar for PCs. Its DGX Spark, a small desktop machine, can run a 120-billion-parameter model entirely offline. Qualcomm and Samsung are moving in the same direction on mobile chips.

And while American labs sell subscriptions, Chinese labs (DeepSeek, Qwen, Kimi, and GLM) give the models away under MIT or Apache licences, allowing you to run them on your machine. Qwen alone was downloaded over one billion times and overtook Meta's Llama as the most used open model family.

What actually works

AI genuinely helps with first drafts, summarising, routing simple requests, running specialised skills like UX and accessibility analysis, and catching basic bugs. It's not good enough for the last 20% of any feature. Hell, hardly for the first 80%. That's what we're here for.

The companies rehiring laid-off staff aren't giving up on AI. They're recalibrating it as a helper rather than a replacement, as serious practitioners said before the cost-cutting trend took over.

"AI is more than up to the task. What these companies discovered is that they weren't. They skipped the hard part."
Eric Vaughan, IgniteTech

Maybe it's time to invite back the golden apples, the people who actually dedicated their careers to the last 20%.

There is comfort in the chaos of human craft.

Hail Eris.

Understanding List Virtualization

Wed, 01 Jul 2026 00:00:00 GMT

If you don't know what virtualization is, you probably don't need it.

It renders only the items that need to be visible in the UI. You'll also see it called windowing, virtual scrolling, or just a virtual list, and they all mean the same thing. Most lists are short and most grids are small enough that the browser draws them without complaint.

I didn't need it either, until I decided to put the entire Unicode table on a page.

Here is the whole idea in one running component: ten thousand cells in a grid, with only the visible handful in the DOM. Scroll it, then flip to the Vue (code) tab.

A quick word on what "in the DOM" means, because the rest of this article hangs on it. The DOM is the browser's live model of the page: every div, button, and span is a node in one big tree, and the browser has to lay each node out, paint it, and keep it in memory. A few hundred nodes are nothing. Tens of thousands are a problem, and the problem compounds when they keep changing.

In practice, the Character map

I built a tool called Character map. It scans over 30,000 code points (Unicode's term for one character), loaded once and cached in the browser's built-in database IndexedDB, so the table doesn't re-download on every visit. You browse it through a grid of tiles. The filtered results are capped at 2,000, and I assumed that ceiling would keep it smooth.

Narrator: It didn't.

The first version rendered every result, so a single filter pass produced 2,000 buttons. Scrolling stuttered, and resizing was worse because the browser had to recalculate the position of every tile in the grid.

Search is debounced at 150ms, meaning it waits until you've paused typing for 150ms before running the filter, and even so, each pause re-ran the filter, threw away the grid, and rebuilt it.

Memory climbed while I typed. Two thousand rows are nothing to a database, but two thousand live elements in a reflowing grid were plenty to kill scroll performance on a dataset this size.

It took me a while to realise that there were two costs involved:

One is the number of DOM nodes.
The other is how often the existing nodes rebuild.

Virtualization fixes the first and, on its own, does nothing about the second. We'll get to the second thing later.

Lying to the scrollbar

At any moment, the viewport (the visible area of the scroll container) shows a few rows. Everything above and below is off-screen and, as far as the user can tell, doesn't need to exist. So you keep the visible rows in the DOM plus a small buffer, and drop the rest. As you scroll, the top and bottom rows are mounted/unmounted depending on the direction. The user sees a full list, and the browser only cares about a few rows.

The catch is the scrollbar. A scrollbar's length is as big as the content, so if only twenty rows exist, you hit the bottom of a list that's supposed to hold thirty thousand and the whole thing falls apart. So the scrollbar has to keep lying. The lie is a single spacer element that wraps the existing rows, sized to the height the rows would occupy if they all existed at the same time. The rows you mount are placed on top of that spacer with a translateY offset, shifting elements down by a few pixels without breaking the layout.

Which rows to mount now will depend on arithmetic. You always know the scroll position and the row height, so dividing one by the other tells you which row index sits at the top edge of the viewport; add the viewport height, and you have the bottom edge. React called this windowing, and web.dev walks through the same pattern with react-window. The mechanics are identical in Vue.

Stripped of framework, the whole geometry is three numbers:

Only the rows from startRow to endRow exist. Everything the scrollbar believes about the rest of the content comes from the spacer. It all comes down to one division: rows are 80px tall, you've scrolled 800px, so row 10 sits at the top edge. Nothing gets searched or measured.

The payoff is that the DOM node count stops tracking the dataset. Twenty rows on screen means twenty-odd rows in the DOM, whether the list holds two thousand entries or two hundred thousand. As far as the layout engine is concerned, the other 199,980 rows are a myth.

The grid is a list of rows in a trench coat

This is where my grid diverged from the tutorials. A virtualiser, the library that handles the windowing bookkeeping for you, thinks in lists: one item per index, stacked vertically, each taking the full width. My tiles sit twelve to a row. Hand the virtualiser the flat array of tiles, and it will earnestly stack 2,000 full-width rows of one glyph each, and every offset it calculates is wrong.

The fix is to change what an item means. Slice the flat list into groups of twelve first, and make each group the virtual item. The virtualiser counts and positions rows, never knowing whether they contain cells; a plain CSS grid lays the tiles out inside each one.

The demo at the top does all of this by hand: reads scrollTop, divides by the row height, and mounts the window. For the Character map, I used TanStack's useVirtualizer instead, purely for simplicity's sake: someone has to own the scroll listener, the range maths, and the offsets, and I'd rather it wasn't me.

In code, that's one computed and one hook. A computed is Vue's memoised derived value; it recalculates only when something changes. rows does the slicing, and the virtualiser gets told three things: how many rows there are, which element scrolls, and that each row is about 80px tall. Trimmed from the Character map:

The template renders only the visible rows, each with its own grid:

Two details hide in that setup. estimateSize: () => 80 is a promise that every row is 80px tall, so the virtualiser never has to measure anything. And in the real component columns isn't a constant: it's its own computed fed by a breakpoint helper, 12 on desktop and 3 on mobile. That means a resize past the breakpoint changes how many rows the list has, rows recomputes, and the virtualiser recounts, all without anyone touching the scroll position.

What to do about overscan

Overscan is the number of extra rows past the visible edge that stay mounted, a buffer above and below the window. In the window math from earlier, it widens both edges before they're clamped to the ends of the list:

CharacterMap keeps 5, and I found that number by getting it wrong first. At 1 or 2, a fast flick on a phone flashed a blank space at the leading edge, so for a frame or two, there was simply nothing there. Raising it gave the browser rows in reserve, at the cost of mounting tiles nobody would ever scroll to. Past about 10 I was paying for two extra screens of glyphs to fix a problem I could no longer see. I added and removed until there was no "blank" issue for my scrolling speed.

Why a virtualised grid still re-renders

Windowing fixes node count. It does nothing about how often the surviving rows re-render, and a virtualised grid re-renders a lot. Every scroll frame moves the window. If each visible row re-renders every time, I've traded thirty thousand nodes rendered once for twenty nodes rendered sixty times a second. That's a different problem, and it drops frames just as happily. Both React and Vue tackle the issue differently: how does a row skip re-rendering when nothing about it has changed?

React re-renders by re-running the component and diffing the result against the last one. Normally when a component re-renders, its children re-render too, whether their inputs changed or not. In a virtualised grid, that means a scroll-driven state change can re-invoke every mounted row. React's way out is to mark the components that can skip updates by wrapping them in memo(), comparing each prop with Object.is. That comparison is by reference, so two objects with identical contents still count as two different objects. In JavaScript, {} === {} is false. memo() compares against the last rendered version, and if it sees a different reference, the row is re-rendered. useMemo and useCallback exist for exactly this, keeping references stable across renders, so memo has something equal to find.

In row form:

// memo: the reference is the same one memo saw last time const openDetails = useCallback((c: Char) => setSelected(c), []); `} />

Vue starts from the other side. A parent updating doesn't drag its children along unless their props changed too. The compiler adds its own layer, knowing which parts of a template can change and which never will. Much of what memo does in React is the default here. When you do want manual control, v-memo freezes a piece of the template until the values you pick change, and computed covers the derived state.

In the Character map, this shows up as a chain of computed(), each link rerunning only when the one before it changes:

rows recomputes only when filteredChars or columns change, and the virtualiser recounts only when rows changes. Scrolling does not affect that chain. It moves the window and leaves the mounted rows alone.

Both frameworks can reach the same end, but React makes you opt out of re-rendering and Vue makes you opt in.

Two ways to break it: container height and keys

Two more things bit me, and neither is related to React or Vue:

The container needs a real height. The fix for me was a fixed height on the scroll container (60vh) plus overflow-y-auto.
Keys have to carry an identity. With a bad key, nodes would get recycled whenever the cell props changed.

My first version keyed tiles by array index. Every keystroke re-filtered the list, and slot 0 kept its node while the glyph inside it changed, so Vue reused a button that was already selected and the highlight stuck to a character I'd never clicked.

With each node bound to its own datum, the nodes stopped rerendering. Index keys look fine right up until the previous item moves away, and in a search UI, items tend to move constantly.

Round two: Icon Search

All of this got a second run. Icon Search merges seven icon libraries (Heroicons, Lucide, Phosphor, Solar, Font Awesome, Carbon, Simple Icons) into one searchable set that runs into the tens of thousands. The tiles now have an inline SVG instead of a text glyph. Having done it once already, I barely touched the pattern: filtered results are capped at 2,000, chunked into rows, and virtualised by row.

The biggest change was row height. IconSearch tiles carry a label that can wrap to a second line, so rows aren't a uniform height anymore. That matters more than it sounds, because every row's offset is the sum of the heights of all the rows above it. Dynamic height works in two steps. estimateSize still runs first, and its guess (88px here) positions rows on the initial render. Then, as each row mounts, a ref callback hands the node to the virtualiser's measureElement, which reads the real rendered height via getBoundingClientRect() and replaces the cached estimate. The data-index attribute tells it which row the node belongs to.

Conclusion

The windowing was the easy half. Slicing tiles into rows took an afternoon, and the geometry is three lines of arithmetic that haven't changed since. What cost me the actual debugging time was the second problem, the one virtualization doesn't touch: an index key that looked correct in every screenshot and only misbehaved while someone was typing.

That's the order I'd expect to hit it again. You reach for a virtualiser because the node count is obviously wrong, you fix that in an afternoon, and then you spend a week on keys and references because the grid is still janky and the node count is now perfect. The library owns the first problem. Nobody owns the second one for you.

Both tools are open source: CharacterMap.vue and IconSearch.vue.

Antimemetics and the God that Eats Itself

Fri, 13 Mar 2026 00:00:00 GMT

Mandatory spoiler alert for plot points in There Is No Antimemetics Division

This article is also available at Substack

Qntm’s novel There Is No Antimemetics Division follows an organisation locked in a war against entities that erase themselves from human memory. You can’t fight what you can’t remember. You can’t contain what you can’t perceive.

The book’s central antagonist is a vast ideatic predator called U-3125. It doesn’t just kill people. It devours the knowledge of its own existence. Anyone who perceives it will die, and those who managed to survive can only do so by forgetting.

Records vanish. The war keeps resetting, and the division has to rediscover its enemy over and over again. It works as a premise for a horror story. It also works as an accidental parable about how monotheistic religions dig up, edit, and then forget their own origins.

Three visitors at the tent

If you’ll allow me to reference the Bible:
In Genesis 18, Abraham is sitting in front of his tent. He looks up and sees three men standing near him. He kneels and bows and offers them food and rest.

The scene slides strangely between singular and plural. Abraham addresses them as “my lord,” singular, but they are three. Two eventually leave for Sodom, one stays. And the narrative calls this figure “the Lord.” Later theology argued about this moment for centuries: is it angels, is it a veiled hint of the Trinity, is it the quirks of translating over another translation?

What’s striking in the context of Qntm’s book is the three‑ness itself. It feels like a glitch in the matrix. A trace of a time when the divine wasn’t a monolith, but a family or a council. It reads like a memory leak from an older layer of the tradition, one that looks like it was overwritten.

The pantheon that was

Historically, ancient Canaan peoples didn’t worship a one true deity. There was a pantheon. From my knowledge, there was at least:

El, the sky‑father
Asherah, the mother goddess
Baal, storm and fertility god

Early Yahweh worship seems to have started as the cult of a regional storm and war god that gradually moved into El’s position at the top of the heap.

Over time, Israelite religion went through a kind of theological consolidation. Traits of different gods were folded into Yahweh. El’s role as high god, Baal’s storm imagery, even Asherah’s nurturing aspects, were gradually reassigned to one figure.

As time moved on and other peoples and tribes became powerful and meek, word of mouth did what it always does, carrying stories forward while leaving pieces behind. Older deities were demoted, demonised, or reinterpreted. El became just another name for the one God. Asherah survived in the text mostly as abomination, with a mandate to destroy ornate wooden poles devoted to her throughout the region.

If you squint a little, that whole process looks a lot like an antimemetic operation. A complex, messy religious ecosystem gets collapsed into a single authorised narrative. The old gods are not just defeated. They’re turned into idols that are hard to remember why they were ever worshiped at all.

Gods that eat other gods

In Qntm’s story, U-3125 is a metastasized cluster of mind infecting ideas, that bends minds to its pattern, and then removing any awareness that it was ever there. The only way the Antimemetics Division can even notice its enemy is with mnestic drugs and elaborate workarounds to get information past their own sabotaged memories.

Religions do something similar at the cultural level. They fuse and absorb older deities, and perhaps unwittingly and quietly lose track of where those pieces came from.

Take Jupiter. His name comes from an older phrase that means “Sky Father,” related to the same PIE (Proto‑Indo‑European) root that gave Greek religion Zeus Pater and Vedic religion Dyáuṣ Pitṛ. Three different cultures, three different mythologies, same sky‑father? By the time you get to imperial Rome, nobody is walking around saying “Jupiter is actually a linguistic fossil from an Indo‑European storm cult.” As far as they’re concerned, he’s just Jupiter, king of the Roman gods.

Yahweh’s history looks less like a refusal of syncretism and more like a successful end‑run. First, he plays the same game internally, absorbing El and Baal. Later, when Greek and Roman power try to fold him into Zeus or Jupiter, the tradition stands fast in and refuses. The god who had eaten others won’t himself be eaten.

Christianity added a sharper edge to all of this. Where earlier traditions absorbed old gods and customs, early Christians would reclassify them as demons and heresy. Pan became the template for Satan's horns and hooves. Old rites became spiritually dangerous when it wouldn’t fit regular worship.

Then came the slower edit. When the Western Roman Empire collapsed, papyrus rotted and the many texts that weren't copied onto parchment died. Gnostic traditions, mystery cults and entire schools of thought gone. The rewriting effort took place in scriptoriums, places where Christian monks were choosing what was worth saving. They kept scripture, theology and whatever classical writing deemed compatible with their faith. Some of the fragments that did not fit would survive because stubborn monks wanted to refute a heretical or pagan text in full, line by line, unwittingly preserving the thing they were meant to destroy.

The archive existed, it was a cherry orchard, and the archivists were cherry-picking.

You see similar patterns of syncretism later throughout history, under different conditions. In America, enslaved West Africans were forbidden to practise their traditional religions. They were baptised as Catholics and pressured to venerate the saints. So they overlaid their Orishas onto Catholic imagery. The result, Santería, Candomblé and Umbanda, separate religions where the older deities survive inside the newer framework. From the outside, it looks like “just” saint devotion. From the inside, it’s double‑coded. In Mexico, the cult of Santa Muerte blends Catholic figures like the Virgin Mary with pre‑Columbian ideas about death as a powerful, sacred presence. Statues show a robed skeleton with Saint Mary styling.

Even Christmas has an entangled history. The date, the lights, the Yule tree. Some of the winter‑solstice feel comes from older Roman festivals like Saturnalia and Sol Invictus, which celebrated the unconquered sun. Over time, those associations became background noise. For many Christians today, Christmas is about the birth of Christ, and little more. And Santa Claus, which another kind of assimilation of a trickster god Odin and many other gift bearing jolly deities, but I can’t get side-tracked.

In all these cases, something older gets encoded inside something newer. The origins of things become a specialist conversation. The deeper layers become things scholars argue about, not things worshippers and practicioners consciously inhabit or want to realize.

Lest we forget?

There Is No Antimemetics Division ends with Marion Wheeler becoming a countermeme, something that can fight U-3125 on its own terms. She defeats it by becoming something the entity can’t assimilate. But the cost is total. She ceases to exist in any conventional sense. She is forlorn in any human sense.

Monotheism did something similar. It stabilised a single image of God at the cost of dissolving the memory of the divine that came before. Yahweh as the solitary father, judge and creator is what survives. All the others that came before have been compressed into footnotes. The three men at Abraham’s tent became angels, or a hint of the holy trinity.

Once you see that pattern, There Is No Antimemetics Division stops being just a SCP-based novel. It starts to look like a thought experiment about how religions, empires, and cultures manage their own memory.

The horror does not lie in the monster. It lies in the editing job that humanity wrote to survive, leaving just enough behind to remind us that something huge has been forgotten.

Text Fragment URL Generator

Wed, 06 Aug 2025 00:00:00 GMT

Have you ever wanted to share a link that lands someone on a specific sentence rather than the top of the page? Text fragment links do that, and this tool generates them.

Anchor links solved the same problem, badly, and only when the page author bothered to add an id to the thing you wanted to point at. Text fragments work on any page, whether or not anyone prepared for it.

The syntax hangs off a #:~: directive:

There's a range form, #:~:text=Once upon a time,happily ever after, which highlights everything between the two phrases. And a prefix/suffix form for when the same words appear more than once on the page:

That one finds "I was born at Blunderstone" preceded by "Chapter 1" and followed by "A key event". The hyphens are what mark the prefix and the suffix. Hold that thought, because it's about to ruin my afternoon.

The bug I shipped

The tool builds the fragment by encoding each part and joining them:

Looks fine. It isn't. encodeURIComponent does not escape hyphens, and it never has: -, _, ., !, ~, *, ', ( and ) all pass through untouched because they're unreserved characters in a URI component. In almost every context that's what you want.

Here it means any hyphen in your text goes into the URL as a live delimiter. I generated a link for "state-of-the-art rendering" and it quietly matched nothing.

I set up a page with a few paragraphs in it and drove Chromium through each case with a real cross-origin click, which is what the activation rules require. The output was blunter than I expected:

Not an edge case about trailing hyphens, which is what I assumed when I started. Any hyphen, anywhere in the string, kills the match. Leading, trailing, buried in the middle of a compound adjective. The parser splits on commas, then checks whether the first part ends with - and the last part starts with -, and an unescaped hyphen elsewhere is enough to send that logic somewhere useless.

The fix is one line:

Commas and ampersands were never a problem, incidentally. encodeURIComponent turns those into %2C and %26 already. The hyphen is the only structural character it lets through.

What annoys me about this is how quiet it is. There's no console warning, no failed navigation, no visual difference. The page loads at the top, exactly as if you'd sent a normal link, and you assume the recipient's browser is old.

The other way it fails

The text has to be in the document when the browser goes looking. That sounds obvious until you remember how much of the modern web renders late.

I added a paragraph to my test page 1.2 seconds after load and pointed a fragment at it. No match. The browser searched, found nothing, and gave up without retrying.

So text fragments break on anything that defers its content: client-side routed views, infinite scroll, anything behind a loading spinner. They also break on virtualised lists, where the whole point is that most of the rows don't exist in the DOM. Linking into row 4,000 of a virtualised table cannot work, and no amount of escaping will save it.

Collapsed <details> elements do work, which surprised me. I expected a closed disclosure widget to hide its contents from the matcher, but Chromium found the text and scrolled to it. Hidden-until-found content is handled deliberately, so that one's fine.

The directive is invisible to the page

One detail worth knowing if you ever try to read a fragment from JavaScript: you can't.

Navigate to https://example.com/doc#:~:text=quick%20brown%20fox and the page sees this:

The :~: part is a fragment directive, and the browser strips it out before handing the URL to the document. Every one of my test navigations came back with an empty hash. It's a privacy measure: without it, any page could read what phrase you arrived searching for, which leaks whatever you were reading elsewhere.

It also means you cannot polyfill this, and you cannot log it.

Is it safe to use

Yes, and more so than when I first built the pen. Chrome has had it since version 81 in 2020, Safari since 16.1 in 2022, and Firefox since 131 in 2024, which was the last real gap. Global support is around 92%. The failure mode for the remaining browsers is that the link works normally and lands at the top of the page.

One habit worth forming: prefer a short match with a prefix and suffix over a long verbatim quote. A twelve word match is a hostage to the next person who fixes a typo inside it. Three words anchored by their neighbours survive that, and the URL stays readable.

Markdown/WYSIWYG Converter!

Sun, 22 Jun 2025 00:00:00 GMT

Sometimes you need to write in Markdown, and sometimes you just want to click buttons and see your text get bold or italic right away (WYSIWYG, or What You See Is What You Get).

The problem? These two methods don't play nice together.

What if you could have both at the same time? Type in Markdown, see it formatted instantly. And vice-versa.

The Infinite Loop Problem

The challenge: if changing Markdown updates the WYSIWYG side, and the other way around... wouldn't they just keep triggering each other forever?

Yep! Normally this would cause an infinite loop, and with enough time it could crash the browser. The solution is to check if the code is updating on one side or the other, and only convert that side.

The Technical Bits

This is built in a class called MD2WYSIWYG, that coordinates 3 libraries:

Quill.js: The WYSIWYG editor with the nice toolbar.
Marked.js: Converts Markdown to HTML.
Turndown: Converts HTML back to Markdown.

The class also exports in 2 ways:

PDF export: Uses jsPDF to generate a document in the PDF format.
Text export: Downloads your Markdown as a .txt file.

The standalone version

I later rebuilt this as a proper Markdown editor. Same two-way sync, plus a live preview and a cleaner writing space than a CodePen. Write in Markdown or in rich text, and the other side keeps up.

Word Cloud Generator

Sun, 08 Jun 2025 00:00:00 GMT

I wanted to build my own word cloud generator because making words fit together without overlapping sounded like a fun challenge. Each word had to find its perfect spot in a crowded space. Randomly. Fun!

Making Words Not Crash Into Each Other

Sounded simple until I tried it. How can we place many words of different sizes without overlapping? They can't be randomly scattered as there will be collision. And we can't put them in a grid, that's boring.

I needed a method that would do all of this:

Place bigger words first
Place smaller words around them
Rotate a few of the words 90 degrees for fun!
Make sure none would collide

Step 1. Sort by "weight"

Each word is assigned a random weight, which defines how big they will be compared to the others. These will be placed first in the center by sorting the list of words by weight:

Step 2. Position the rest outward

For each subsequent word, start at the center and spiral outward in a circular pattern, checking viable positions along the way.

Step 3. Collision detection

Before placing a word, we need to check if it would overlap with any existing word. Each word has an area, and their bounds shouldn't be trespassed.

This is basic rectangle collision detection. If the rectangles don't intersect, the words won't overlap. Geometry to the rescue!

Step 4. Save as Image

The save feature converts the canvas to a PNG image you can download. No screenshots needed.

Skeuomorphic Boombox

Thu, 26 Dec 2024 00:00:00 GMT

In developing this boombox, I wanted to revive both the feeling of tape players and the lost art of skeuomorphic design. While digital interfaces have largely turned flat and minimal since the early 2010s, skeuomorphism used to imbue a special feeling while attempting to bring the real world to digital apps with as much realism as it could at the time. The death of the design style left many digital spaces visually sterile. This was an attempt to bring it back, just for a little bit!

Skeuomorphic CSS

The heart of skeuomorphic design is tricking the eye into seeing materials and depth. The boombox uses layered gradients, box-shadows, and rounded borders to recreate surfaces and hardware.

Boombox Panel Texture

The gradient and box-shadow supply subtle reflections and a sense of physical edges, giving the whole case a plasticky/aluminium look.

VU metre and needle

Rounded corners and multiple shadows made the semi-circle and a sort of backlight on the visualizer.

Using and abusing the Web Audio API

To make this work, we had to make use of the Web Audio API, to be able to listen and manipulate the audio output.

Animating the VU metre needles

We split the audio output values in left and right channels (for stereo). The Root Mean Square (RMS) is calculated from audio that's playing. This calculation is important to measure the average loudness of an audio signal, giving a better idea of perceived loudness rather than peak levels.

The values are then mapped to degrees, making each VU meter needle exactly like an analog gauge.

Building the Equalizer

We have to split the input audio into different channels/filters before it's outputted again. Then we're able to adjust the gains in those sections, and mimic an equalizer. The five frequency bands were chosen to cover the essential ranges of human hearing and musical content:

60Hz (Low Shelf): Sub-bass and bass fundamentals
170Hz (Peaking): Upper bass range
350Hz (Peaking): Low midrange
1000Hz (Peaking): Core midrange
3500Hz (High Shelf): Upper midrange to treble

The key to making the EQ work then is connecting each filter in sequence, creating a signal chain where audio flows through all five bands.

Genre-Based Preset Values

The preset values are based on established equalizer curves used in HiFi apparel and apps.

Et voilá! You're ready to listen to Chopin the way it was meant to be?

Colour Palette Generator

Fri, 15 Nov 2024 00:00:00 GMT

This started as a CodePen sketch: a colour palette generator that could do more than spit out random colours. I wanted something that could generate harmonious palettes, find the middle colour between any two shades, and convert between RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness), and hex on the fly. The kind of thing that's actually useful for design work.

Starting with colour harmony

First, the generator picks a random starting point on the colour wheel (0-360 degrees). This base hue becomes the foundation for the entire palette.

Instead of generating completely random colors, each subsequent color is a variation of the base one, spaced 30 degrees apart on the color wheel. The hue variation is wrapped around the colour wheel using modulo arithmetic, so that it stays in between 360 degrees. Saturation and lightness are randomized within ranges that avoid pastels and darker colors. To simplify complementary colour calculations we use HSL as the base colour model.

But how can we find the middle colour?

Short answer: "interpolation".

For saturation and lightness, finding the middle is straightforward. We can calculate the averages between:

Hue is different, however. Hue exists on a circular range. If we averaged 10° (red) and 350° (also red), we'd get 180° (cyan). Not quite red.

The fix is to check whether the two hues are more than 180° apart and add 360° to the smaller one. That pulls both values closer together in the spectrum, so the interpolated colour lands between them.

Converting between colour models

Different contexts need different color formats. So why not provide them all?

HSL to RGB

This function divides the color wheel into segments and calculates each RGB component based on where the hue falls within those segments. The k function maps the hue position, and f computes the actual color value with proper saturation and lightness adjustments.

(I didn't make this conversion formula, smarter people did)

HSL to Hex

Once you have the RGB values, convert each number to hexadecimal and concatenate. (I also stole this solution)

Extra Features

Add Colors Between, or interpolate middle colours

Click the "+" button between any two colors, and an interpolated colour appears between both. You can keep clicking to subdivide the palette into smoother gradients. For colors in the middle of your palette, there's an interpolate button that recalculates that color as the perfect blend of its neighbors.

Randomize Colors

There are randomize buttons for individual colours, or the whole palette.

Copy in Multiple Formats

Click any color value to copy it. The tool shows all three formats at once, and clicking any one copies it to your clipboard.

The standalone version

I later rebuilt this as a proper tool. Same logic underneath, but quicker to use: hit space for a new palette, or feed it an image and it pulls the colours out as hex.

Rock Paper Scissors

Tue, 17 Jan 2023 00:00:00 GMT

Background information

Rock-paper-scissors-lizard-Spock is an expansion of the classic game of rock-paper-scissors. In addition to the three original choices, there are two new options: lizard and Spock. This simulates an ultimate battle between many players. This game mode was created by Sam Kass and Karen Bryla (official website).

More information on the subject.

As Sheldon explains in the TV series Big Bang Theory, "Scissors cuts paper, paper covers rock, rock crushes lizard, lizard poisons Spock, Spock smashes scissors, scissors decapitates lizard, lizard eats paper, paper disproves Spock, Spock vaporizes rock, and as it always has, rock crushes scissors."

Inspired by this tweet:

sorry i can't come tonight, i'm watching the rock paper scissors simulator season finale

Article under construction!

Spider parser

Mon, 19 Sep 2022 00:00:00 GMT

Spider is a powerful web article parser that transforms cluttered web pages into clean, readable content.

Parsing Strategies

Spider supports multiple parsing strategies optimized for different types of websites:

auto (default): Automatically selects the best strategy based on domain
googlebot: Mimics Google's crawler for general content
facebook: Uses Facebook's external hit agent
archive: Optimized for archived or paywall content

Custom Parsers

You can extend Spider with custom parsers for specific domains by modifying the functions/node-fetch/node-fetch.mjs file.

Acknowledgments

Postlight for the Mercury Parser
Astro team for the amazing framework
Tailwind CSS and DaisyUI for the styling foundation
Netlify for seamless deployment

Rest of the article under construction

Meme Generator

Fri, 09 Sep 2022 00:00:00 GMT

Retrospective

This idea was sound: Pick a template, type your captions, download the picture. I needed a project to help me refresh my react knowledge, while to connecting to a "flat API". There were plenty of meme image generators at the time, but I wanted to make mine. So I looked into how others did, and what they exposed. And I stole it and made it my own version.

The API doesn't say where the text goes

imgflip publishes a free list of the hundred most-used templates. Here's what it gives you per meme:

box_count: 2 tells me Drake takes two captions. It does not tell me that one belongs beside his raised hand and the other beside his pointing one. That placement data isn't in the API, and as far as I could find it isn't anywhere. So I opened a hundred images and typed the coordinates in by hand:

That's what "a modified output of the imgflip API" means in the README. Seventy-one of the hundred want uppercase, five have captions sitting at an angle, and a few need per-box font sizes because one caption is a sentence and the other is a word. None of that is derivable. It's just looking and typing.

Getting it out

toDataURL throws on a canvas that has drawn a cross-origin image, unless the image element opted in with crossOrigin = 'anonymous' before the source was set. The CDN sending permissive headers isn't enough on its own. Miss that one line and the download button dies with a security error while the picture on screen looks perfect.

Daemon

Thu, 18 Mar 2021 00:00:00 GMT

Retrospective

This is a front-end for a language model, written in 2021. That sentence means something very different now, and the code is a decent record of the difference.

GPT-2's weights were public, so generating text meant running the model yourself. It could be deployed to Google Cloud Run using minimaxir. Daemon is the frontend.

There is no backend

There's a Dockerfile, which sounds impressive until you read it:

Apache serving a build folder. The model lives somewhere else entirely, and the app finds out where from a text input in the sidebar:

A settings field where you paste the URL of your own model server, defaulting to localhost. That's the part that dates hardest. Using a language model meant having one running.

The knobs were the interface

The sidebar is four controls: length, temperature, top_k, and a prefix textarea.

I didn't write that for a general audience because there wasn't one. GPT-2 shipped without a chat wrapper or any instruction tuning. You gave it the opening of some text and it continued, so the UI exposed the sampling parameters directly. Those were the only things there were to adjust.

The default prefix is The grasshopper lies heavy., the book inside the book in The Man in the High Castle.

Sending the request

The whole thing:

Nothing here catches a failure, tracks that a request is in flight, or disables the button while it waits. A cold Cloud Run container booting GPT-2 took several seconds, and for all of them the interface sat there looking exactly as it had before. I'd hit send, see nothing happen, and hit it again.

Model output straight into the DOM

That string gets rendered through dangerouslySetInnerHTML. cleanData is a generous name for a variable that cleans nothing: it swaps newlines for <br> and wraps the rest in a paragraph. Whatever the model returned went into the page as markup. The model was mine and the server was mine, so nothing came of it, but that's luck rather than a decision.

Steam Library Hover Effect in CSS

Sun, 15 Dec 2019 00:00:00 GMT

export const art = 'https://steamcdn-a.akamaihd.net/steam/apps'

The grid above is 27 game covers and about forty lines of CSS. The only JavaScript on the page is the console shim CodePen injects into every pen.

I built it in December 2019, a few months after Steam replaced its library with the big box-art grid, because I wanted to know how the cards worked. Here is what each part of it is doing.

The grid is flexbox: display: flex, flex-wrap: wrap, and a gap. The cards are 2:3, which is the shape Steam serves its library art in at 600x900. Two of those declarations are younger than the pen, as it happens. Flexbox gap didn't reach Chrome until version 84 in July 2020, so the original spaces its cards with margin: 1rem on each one, and aspect-ratio arrived later still in Chrome 88, so back then the card had no height of its own and took the shape of whatever image landed inside it.

For the rounded corners I put border-radius on the wrapper and overflow: hidden alongside it. The second one does the actual work. border-radius on its own rounds the wrapper's background, and the image inside paints straight over the corners. The image also wants display: block, or it sits on the text baseline and leaves a pale three-pixel sliver along the bottom edge of every card.

For the tilt I used a transform on hover:

rotateX on its own does nothing useful. Rotating around the X axis with no depth information squashes the element vertically, because the browser has no idea how far away the viewer is meant to be. perspective(50em) supplies that distance, and it has to come first in the list, since transform functions apply right to left. Smaller values put the viewer closer and make the effect more violent. At 10em the cards look like they're falling over.

You can also set perspective as a property on the parent instead. That builds one 3D scene with a single vanishing point at the centre of the container, so cards near the edges lean in toward the middle. The function gives each card its own vanishing point, centred on itself, so they all tilt identically wherever they sit in the grid. For a library of independent cards, the function is the one you want.

For the glare I used a pseudo-element holding a diagonal gradient, blown up to twice the size of the card and slid across on hover:

For the overlap I used z-index: 10 on the hover state, which is the line that looks pointless until you take it out. A transform creates a stacking context, and sibling stacking contexts with no z-index paint in DOM order, so a scaled-up card slides under every card that comes after it in the markup.

The pen is still up.

Tartarus

Tue, 03 Sep 2019 00:00:00 GMT

Cold. Damp. Dark.

Two guards on each side hold me. I am weak. My feet dragged on the floor. I am being taken through a long barely lit corridor to an area closed by a wooden gate. The walls are closing in, the corridor gets smaller and smaller.

By the gate a guard remains stationed. As we get closer he inserts and turns a rusty key in the lock, and opens the gate.

A well lit room with three cells sectioning the end bring about an air of pain and despair. A prisoner is sleeping in one of them. An unassuming person fresh out of luck. Was he loitering? Was he rioting? Did he blaspheme against their leader?

Another guard is sitting on a wooden chair. He's the authority here, God of the cells. Fat and lazy, full of confidence, content and hubris. And he's eating a ham sandwich.

While being dragged they scuffle trying to find the right key to open the cell I will be thrown at. One of the guards holding me looks incredulously at the other, while the other struggles to find the right key.

"One second, it must be this one", he said.

With ease, like lifting a sheet of paper they throw me to the wall and lock the door. As they walk away from the room, I manage to gather the strength to lift myself up and sit on the bed. In the cell next to me a prisoner seemed to know more than I did. Lying in a fetal position, he sobs.

What the hell have I put myself into? What the hell have I done?

And just like that, candles are blown. One after the other.

"Sleep!", the fat guard declared. He had just finished his sandwich and was ready to leave the room.

Pitch dark. Time to rest.

I was tired, sore, in pain. Just like that my eyes close and I black out.

I cannot figure how long it took. Hours, minutes, seconds. At least it felt like a single second. I am shaken awake from echoes in the small chamber, as the prisoner lets out a loud yelp. He is shaking in fear, as if running away from death in dreams.

"Buddy, you okay?", I asked as I struggled to turn his way.

The shakes stop with a final spasm. With a whimper he wakes up. "Uh… hmm… what… w-who's there?"

He struggles to open his eyes, swollen by beatings and dry tears. Only to figure out if I am real.

"You okay there?"

His natural reaction was shutting down, turning his body so he faced away from me. Sitting on the floor with his head over his knees, his body rocking back and forth. I can see through the rips on his dirty rag some could call a shirt. I can see open wounds, red flesh, scars. Some of the wounds look septic. He had been tortured constantly, it seems, for a very long time.

"What have they done to you?"

"K-keep quiet!", he answered in a whisper. As he turns to answer he recognizes me. "No…" His face twitching to a tone of despair. "No, no, no, no… I am s-so, so sorry!"

"What? What are you sorry fo-"

"This, this!", he uttered. "This waking nightmare!" An ugly cough stops his logic. Pausing for a few moments, with his hand on his throat, trying to catch a breath. "No matter what you do, you can't leave! You try and t-try and…"

"Hold on. They keep bringing us back? We can't leave here?"

"What… what are you talking about?"

"What are YOU talking about?"

He looks at me as if he's staring at a stopped clock. "Y-you can't remember?"

"I can't — buddy, do I know you?"

"Oh man… Oh m-man!" He exasperates as he raises his hand over his head, nodding back and forth. It took him a minute, but he composed himself again. "They did a n-number on you…"

"…What?"

"Look, you were here b-before. Quite a few times before! You're being brought back over and over and over again!", he tries to make sense in his head before being able to explain what he means. "Y-yo-you have tried and tried to find a way out. But at the end of the day you always come back here. F-fucking square one!"

Looking away he sighs, frustrated with the situation. "You can't even die! You c-can't die! no matter how hard you try…"

"I can't — "

"Silence in there!", growled the guard stationed outside the door. "You'll know what happens if you don't shut up."

"Quiet!", whispered the prisoner. "Sleep!"

"But…"

"Try to sleep! Please!", he pleaded.

With my head and my body lain on the wooden bed, I close my eyes and try to focus on the dark.

I cannot figure how long it took. Hours, minutes, seconds. At least it felt like a single second.

"N-no! Stop! Leave me alone!"

It's hard for my eyes to open after I hear this call for help. "He must be having a nightmare again", I thought.

A sudden creak and a loud clang follow the cries. My sleepy stupid slow mind finally wakes to the urgency. I open my eyes and turn to my fellow mate.

He is gone. No guards around either.

I could not force myself to fall asleep again. Distant screams and bashing reverberate through the corridor and reach the chamber from under the door. Time passes for what feels like hours. The last thing I hear from a distance is crying, and a thud.

Footsteps of two in unison are coming towards the door, dragging something through the floor. Two guards come in while grabbing the prisoner in between them. They open the door from the cell he was before and throw him inside without a single care for his well-being.

Then they look at me. And they see me looking at them. The prisoner lies near-lifeless on the ground, with blood flowing from his wounds, out to the stone floor. As they open my cell door I cower in the bed with my hands raised to defend myself. My whole effort is for naught, as one grabs my hands while the other puts a shackle around my neck, then on my hands.

"Don't even try anything funny", said one of the guards. "You have been granted audience." The one in front of me pulls me out of the bed from the shackles, while the other pushes. "Come with us."

Photo by Kasper Rasmussen on Unsplash

The long corridor is the first thing I remember seeing from this forsaken place. If my sore arms and chest allowed me to think of anything else, I would even feel excited. But no. I can only feel pain. Pain and worry.

I hope the other guy pulls through.

At the end of the corridor we can see three exits. I am taken to the left exit, on yet another damp grey cobblestone corridor. Another guard is stationed at the door, which he promptly opens. Bright light emerges from beyond the door, from where voices and laughter can be heard.

A gust of freshness surrounds me the moment I enter the hall. It is well lit, yet cold. The arched ceiling is held by three sturdy pillars on each side. At the end of the hall people of different statures convene with each other. Above them, after the steps, sits the King on his throne. An advisor whispers to him while looking at me. The King finally acknowledges my presence and raises his hand.

From a simple gesture, a lively gathering was turned mute. Heads are turned in my direction. I am greeted with disgust from others that display an air of superiority. The King then gestures for us to approach.

"Move", ordered the guard. Slowly we walk towards the gathering, as they part each to a side, allowing the audience to take place. "Stop here."

I raise my head and stare at him, then at the King. The other guard grows impatient and hits me with the back of his spear in the back of both knees, forcing me to…

"Kneel!"

The blow itself didn't hurt, but it was uncomfortable, humiliating. Some in the audience gasp, and I lower my head.

"Do you know why you're here?", asked one of the King's advisors.

I shake my head without looking up. I really had no idea how and why I had gotten myself into this situation.

"Raise your head when you are being spoken to", said the advisor.

I raise my head as ordered, he opens a long scroll and begins to announce its contents.

"I will henceforth channel the voice of the Kingdom in this royal decree. May all of us noblemen, merchant and common-folk be equal, witness and judge on the evidence at hand. We, a collective, as witness and judge, accuse you of the following crimes."

"Wait, wha-", I tried to ask before one of the guards gags me with a piece of cloth.

The advisor stares at me, raising an eyebrow.

"We accuse you of invasion. We accuse you of subterfuge. We accuse you of vandalism. We accuse you of attempting usurpation.

Taking into consideration all the witnesses you see here today, and all the evidence gathered, after careful deliberation an unanimous decision was reached. We, witnesses and judges, see, witness, and judge the accused.

Our verdict is guilt.

You have invaded our most hallowed ground. You have hidden your intentions. You have destroyed all goodwill we would have of outsiders from beyond. You have usurped the throne of all empathy towards you.

Due to the heinous nature of your crimes, we have no choice but to sentence you to fight for your life, as tradition demands. Trial by combat. A duel to the death."

"Hear, hear", one in the audience interjects enthusiastically.

"May the elements show mercy on your life, may your passing to the other side be swift."

The King, ever silent nods and gestures to the guards to take me away.

No matter how hard I try to scream in protest, my voice is muffled by the loud celebration from within the audience. Naturally, the gag did not help.

And so I am pushed and prodded towards a side door on the left. The guards sit me on a long wooden bench in a small room. One of them rubs his hands.

"So, would you partake?", asked one guard to the other. "On what? On him?", he replied while pointing at me. "There's more of a chance the knight trips and stubs his toe before this one has even a chance of winning." "What, you don't like those odds?" "Losing money, is what I don't like." "Come on, just a little gander!" "Leave it, we should take him to the armory now." "…Fine. Spoil sport. You, move!", ordered the first guard, while pulling my shackles.

After being outfitted with a set of leather padding on my arms, chest and legs by wrapping sheets and binding them with string, they remove my shackles and take me to the final door.

"Where will this take me?", I ask, while taking out the gag.

"You'll see. It's called the bridge of commons." "Good luck!", wished the second guard as he opened the door. "Pray for a quick death."

"Wait!", I begged.

"Oh, what now?"

"Don't…", I hesitated in asking, gesturing instead with my hands. "Shouldn't I get a weapon?"

They stare at each other and begin laughing.

"Well, why not? It's not like it will make much of a difference." "Here you go, if it makes you feel better!"

I am given a rusty short sword with a broken grip and a missing pommel. I'm not sure if I should thank or curse them.

"Off you go now." said one of the guards. "They're waiting for you!"

Photo by Joakim Honkasalo on Unsplash

With hesitation I step outside. I am instantly greeted with jeers and cheers. Flags from all nations decorate the walls in the circular arena. An audience is watching in their seats on each corner, as if a play or opera would take place. A gladiator match would be better fitting, if not for the strange fighting pit.

The bridge is suspended and below waves of dark water ripple in a chaotic dance. Almost as if the water was alive. Why was it so dark? Too deep?

On the other side of the platform a dark knight stands patiently, with a blank stare. His huge long sword stuck blade-first on the wooden floor in front of his feet. The King's box area is right behind him, on top.

Declarations are made introducing both fighters, I assume. Hard to recognize what was said, as the voice is muffled by the crowd's enthusiasm, and the echo of everything.

The knight picks the sword from the floor and lifts it in the air. The crowd is ecstatic. Three times he lifts the sword. Three times they cheer. A trumpet loudly interrupts everything, and there was silence. It is time.

And nothing happens. He does not move, and I dare not move. Even though he's far I notice his stoic invitation. Am I supposed to attack instead? Or is that what he actually wants? Should I grant him this?

Maybe I should. And I do.

I run towards him with my lame rusty sword asking myself what is wrong with me. I am afraid, hesitant, tired, confused. Why would I do this now, if I played along so far in order to be able to see another day? To get the hell out of here? Are these not then the rules of the realm?

What do I know, anyway?

As I lean forward to strike in my run with my sword held high, he drops his and slaps me in a vertical swing. The strike was devastating, in a way that I could feel my bones reverberate and my ears ring. I meet the floor in a strong impact. After a while the ringing sound is replaced by the cheers of the crowd. The knight is celebrating with arms wide open.

Trying not to notice the pain, I spit, lift myself off the puddle of blood I drew with my face and face him again. He is turning away, still cheering.

"Moment of opportunity", I thought, as I limped forward. But I look at my right hand and notice something missing. "The sword! I dropped it, where is it?" I hear a gulp coming from the water, right beside me. "Damn! Figures…" Yet, his long sword laid beside him on the floor. So I grabbed it and tried to pick it up.

He notices, turns and grabs my hand. I hear a cracking noise and yell in agony. With his foot on my face I am shoved, projected back to the puddle.

"You dare acting like a coward?", he shouts with surprise. "Do you know who I am?" Grabbing his sword he moves furiously towards me "I cannot be moved. I cannot be stopped. No one can defeat me in battle. I am. The undying."

A dark energy spreads from him, reaching me in shock waves of dread.

"It's no use", I thought, with a sigh. With my hand shaking I gather all the strength I have to get up, but I can only kneel. "So this is the day I die… There are worse ways to go." I try to focus on my surroundings, and I smirk.

He stops at a few feet in front of me. I am lifted with his hand grabbing my collar to then be left standing.

"Any last words?", he asks. My eyes are closed, my mouth shut. "So be it." The long sword is prepared for the final blow as he lifts it above his head.

And I hug him.

"…What do you think you're doing?", he asks, perplexed.

"Stop. Fighting…"

His guard is lowered, as is his sword. He has no idea what to do.

Suddenly, the sound of splashes from both sides distract him. The water starts flowing by itself, and raising in spiral waves. First small, dying in a few seconds. But then their violence breeds wider, taller waves. He starts to get scared and shoves me back.

"Don't fight", I plead to him.

"What is this? What are you doing?"

From this point onward I remain silent, spectating only his surprise, panic and fear. The spiral waves twist his way from both sides. The surf engulfs him, again, and again, until he is nearly nothing. Turned to vapor, becoming mist.

The waves then turn to me, carrying the mist my way. His foggy aspect wraps around me, and I accept it.

"I cannot be beaten", he said.

"Don't fight", I replied.

Purgatory

Sat, 22 Jun 2019 00:00:00 GMT

"Welcome!", said a voice in a very deep tone.

It is pitch dark. A breeze reaches and envelops me. The cold cobblestone floor is the first thing my body feels. My inert body suddenly becomes alive as my muscles twitch in an uncertain strength.

"Don't be afraid."

I hear birdsong, voices, music. All those sounds, very faint, yet filling my head with wonderful, terrible sensations. It is deafening.

"It's autumn."

I can feel the dead leaves all over the cobblestone path. Not with touch, but smell. The stench of death emanates from this place. The new death from the leaves, and the old death from under.

"Open your eyes."

The brightness blinds me. I get adjusted to the light but still cannot make out what surrounds me. Everything is blurry. A blurry dark shape stands steady right in front of me.

"This will help you."

The shape gives me something to drink. I feel nothing. I still have no strength to get up.

"Look beside you."

I turn my head to each side of me. To my left and to my right I can make out shapes made of light, all in distinct colors. My tongue feels a taste of wild berries.

I can finally sit up and breathe. The colorful shapes beside me do the same. My sight perceives sharper shapes. The one closest to my right touches me and holds my hand. A shiver travels from my hand all the way to my spine. It's a pleasant feeling and I do not know its name.

I look at her and realize she is one whom I have loved but long forsaken. Old feelings of guilt and self loathing surface in my heart. But she smiles with a peaceful expression. Slowly those feelings are dispelled, replaced with happiness and music and warmth.

"Follow me."

With the taste of wild berries flowing through my body, I feel enough strength to stand up. The other colorful lights get up on their own terms, and follow the thin well-dressed man with me.

Photo by Scott Rodgerson on Unsplash

We are standing in a cemetery. I can see that now. The cobblestone paths we walk over bind long avenues and streets of mausoleums. There is crying and laughter and sadness and happiness. And music. It is all so overwhelming, so much to take in that it dulls our senses once again.

"Breathe."

People dressed in black wander in a somber manner, wishing they weren't there, walking towards and away from us. They don't notice we walk among them.

Fences and doors of each mausoleum spread wide open. Gorgeous people walk in and out of them, all interacting, cracking jokes, laughing. Colorful see-through curtains veil the entrance, giving them a semblance of privacy. They are too afraid to approach us when our presence is felt. So they keep it to themselves, their laughter, and their music.

The dark shape gestures us to follow him still.

At the end of the long avenue one of the mausoleum a young man walks towards us and is able to talk to us.

"Welcome to St. Louis, I…."

The dark shape rushes towards him, approaching his face in front of the man, gazing angrily. The person cowers and steps back, getting back inside his mausoleum.

On the other side there is something completely different. A long stone building with marble pillars, full of windows, steps and double doors. A long line of people wait patiently to be called inside.

We are able to climb the stairs without waiting in line. As we approach the double doors above the stairs, the dark shape nods towards the greeter. The greeter bows and lets us through without a fuss.

Photo by Stephen Bergin on Unsplash

We are bombarded with a loud explosion of rock'n'roll. Our eyes are forcibly closed with the vibrations that it overcomes all our other senses. As we adjust to the volume, we gleam the extremely colorful inside.

Kitsch. Gaudy. Ugly.

Lovely.

From the hallway to the main rooms, the walls are covered with blue wallpaper sporting a quaint 1920's pattern in pink. Gold satin curtains cover the windows, allowing silky light waves in.

"Guide them."

The shape spreads his arms wide open and bows. His dark shape fades away into smoke, letting a feeling linger that he was never there.

I realize that the artist playing the live song was Elvis. An enthusiastic ode to human nature. It's pretty sweet, melodic, happy and sexual. As any rock song should be.

I am left alone as I follow the music up the stairs to the minstrel's gallery. The band begins a new song, starting with the chorus "Tomahawk". Very few people pay attention to the music, let alone dance to it. I fail to understand why. Do they hate this kind of music. Are they really aware of it?

Peering down I notice all people gathered in separate tables. They are gambling away their rights for eternal bliss, maybe to avoid being judged from actions they did in their past life. Little do they know it's a fool's quest. They fall perfectly in the trap with their human nature. And the house always wins.

I can see my colorful friends sliding near some of the people, and while touching them on the shoulder they whisper words of council. Briefly after those that have been touched, they would retreat from the tables and start looking around.

A breeze takes me downstairs, beckoning me to fulfill my purpose. I am taken towards a nervous woman standing near the roulette. Her hands are shaking, holding a few chips a little too tight. My hand touches her shoulder and she tilts her head, awaiting my counsel. I say something for the first time.

"Your wife misses you", words that come out from me without knowing their origin. I am merely a vessel for the truth. She closes her eyes and feels a lifetime of memories ebbing and flowing. Feelings of love and loss from those who love her still, hit her, and she feels complete.

With a nervous sigh, she turns to me with a smile and hands her chips. Words are hard to find to explain what she goes through when she tries to tell me something. All that comes out is "Thank you."

I lead her towards the gardens, holding her hand. The tall well-dressed dark silhouette guarding the door peeks at us and nods. The doors to the outside open. Only she can get in.

She turns to me before leaving to the sunny garden, and with her hands on her chest she bids her farewell:

"Bless you!"

Photo by Mitchell Gaiser on Unsplash

The traveler's dilemma

Fri, 07 Jun 2019 00:00:00 GMT

Day 1

Two fifty-seven, points the Kit Cat Klock. Her office is deliberately designed so that even by itself, it can bring a sense of comfort and trust. This piece is her magnus opus, her effort to control the mood in the room.

The tick-tock is hypnotic, with eyes shifting to each side every second, lifting and easing sobering moments and deep dark confessions from the weights that pull them down.

She sits behind her desk, breathing deeply while contemplating the clock. She knows she needs to be harsh and difficult in the following minutes.

Three o'clock, points the Kit Cat Klock. She presses the intercom. "Layla, could you please call in my next patient?".

"Right away, doctor".

Photo by Stephen Caserta on Unsplash

A silhouette appears in front of the frosted glass door and knocks.

"Please, come in".

A young man appears from the silhouette. Well dressed. Can't be older than 30. She opens a drawer and takes out a pen.

"Good afternoon, my name is — "

"Take a seat"

"Erm… Sure", he replies, estranged by the interruption. "Is here ok?", he asked, pointing to the chaise longue.

"That's fine. But please don't lie down". She drops the pen on the desk, gets up and sits in a chair next to the patient. "What brings you here?"

He stares, stupefied. "May I introduce myself now?"

She nods, without saying a word.

"Jesus Christ, lady! For a therapist you're shit at first impressions"

She stares back with a smirk. "What if I told you I was trying to shake you from your initial shyness?"

"I would say it worked. Holy…", he replied, following with a long sigh.

"So, what brings you here?"

"…But I haven't said my name yet."

"Your name is Benson Neely. This is your first appointment. I believe that is all I should know from the start, so I can analyze what you have to say as fresh as possible", she replied with a cold tone. "So, what brings you here?"

He looked at her thinking this was all a big mistake. "I, uh… I want to — "

"Look, I'm sorry…", she replied, interrupting him once again. "I normally accept patients only when referred by colleagues or hospitals. You deliberately sought me out. Why?"

"I want to kill myself!" He was finally able to say, out loud. He didn't want to give her a chance to interrupt him again.

A long pause followed his announcement. She was unfazed.

"Go on…"

"Holy shit, lady…"

"Doctor, please."

"…What is wrong with you?!", he asked, while raising his arms in disbelief.

Removing her glasses and staring directly to his eyes, she leans in and replies. "I can't trust people that come to me directly for an appointment, without a good reason. Especially those that insist in addressing me as lady, and nothing else. I'm still waiting to hear it"

"I-I've just told you I want to kill myself!"

"No you don't. Stop it."

He kept quiet, frustrated and without finding retort.

"If you really did want that, you wouldn't be here. You're looking for validation from me. But why? Why isn't your life worth one more second on this earth?"

"…It just isn't. And I blame myself for everything"

She remains silent. Crossing her legs and laying back on her chair she replies "I'm ready to hear what you have to say, when you're ready to face what really brought you here."

Photo by Nathan Dumlao on Unsplash

Taken aback, he releases a long sigh. "I killed someone, many years ago. And my child isn't born. Nothing happened like it should."

"Wait wait wait…", she replied, raising from her chair. "Let's take a step back. You came to me for help, please be as descriptive as possible"

Releasing a sigh, he replies "I'm not asking for help. Even though you're being a little prick, I really want you to listen."

A long awkward pause took place after his announcement.

"Let's make some sense of this then", she finally announced. "Can we agree on starting fresh?"

"…Sure"

"Alright. Let's start with the then. You, your family, your life. Not the now."

The Cat's eyes seemed to shift furiously. The rhythm remained the same, but the timbre felt like needles piercing Benson's ears.

"I've lived in this town for most of my life. Been an upstanding citizen, coworker, friend. Until that night…"

"Go on…"

"There was a party at the university. It was already late when I had to leave, and I had one beer too many. Still, I felt able to drive back home, since I lived just up Big Hill. Going up the hill I was nearly hitting a pedestrian, swerved to the left to avoid them, and collided with the vehicle driving the opposite way."

That's funny, I live in the area. she thought. I don't think I've ever heard of an accident like that happening a few years ago.

Tick, tock, tick, tock.

"Both of us went down the slope, hitting a few trees while trying to avoid others."

Tick, tock, tick.

"I woke up a few days later in the hospital. After answering questions and questions from doctors and police, they finally answered one of mine: is the other driver ok?"

Tick, tock.

"She was dead."

Tick.

"I lost my sense of self, of well-being. Spent most of my time traveling nowhere in my head. Couldn't get out the stump that someone's else life ceased to exist because of me. I felt my life was worth less than the one I deprived of living."

A buzzing sound emanates from the desk, ceasing after a few seconds.

"I guess this will do for today.", the doctor replied.

"…but I haven't even started!"

"It's alright, I kept notes. I will remember where we left off. Keep in mind that the route to happiness is long and arduous. You've been — "

"That's a load of bullshit!"

"Excuse me?"

"You were just about to throw a bunch of feel-good pre-made sentences as a weak attempt to make me feel, what? inspired? Not wanting to kill myself? Lady, do you know how hard it was for me to have the nerve to come here and talk to you? You — "

"Stop, now. Please. I understand that what you feel this dire need for help. I get it."

"You seriously don't. No fucking clue…"

"Look… You need to respect the limited time we have to talk. It's there for a reason."

"I'll stop…. I'm sorry. I'm trying to find reasons to hate you, and I shouldn't. I can't. I need to go", he replied, getting up and walking towards the door.

She wanted to ask "Will you be okay?", but all that came out was "I'll see you soon!"

He leaves unceremoniously.

Noticing the coast is clear, she moves towards the desk. Opens the drawer and reveals a recorder. The stop button is clicked and the recorder is put back in the drawer.

"Laila, could you call in the next person for the session? Thank you."

—

Night time. Blinds are shut. Lounging on the chair behind the desk, the doctor replays the session on the recorder.

"…and now my child isn't born". Rewind. "…killed someone…" Rewind. "…kill myself" Fast forward. "…and now my child isn't born".

"What a mindfuck", she muses gleefully.

While dressing her coat, she turns off the light and turns on her phone: Three missed calls. "Fuck…"

Photo by chuttersnap on Unsplash

Day 2

Eve loves to imagine all the obedient humans as worker ants, so busy moving from one place to the other. They look so small, so insignificant while overlooking through her vantage point.

She closes the blinds so that only enough sunlight peers through the gaps. All that matters is control, and she controls the mood. Or so she wants to believe.

"What should I say when he comes in?" She thought, as Benson's appointment drew closer. "I hate being like this. I hate the fact that I love it. But the asshole deserves it." She definitely wanted to expose her issues with him if time allowed it.

Three o'clock, points the Kit Cat Klock. She presses the intercom. "Laila, could you please call in my next patient?".

"Yes, doctor."

Three loud knocks are heard on the door, caused by the smoked silhouette.

"Come in".

"Good afternoon, Dr. Eve"

"Welcome. Sit." she says, as she removes a pen from the drawer.

He didn't fight the coldness. He knew this time that he needed to stay leveled in order for the doctor to not interrupt, or fight back. A verbal diatribe was not constructive.

"I'm really sorry again, about yesterday. I guess I didn't want to leave what I was going to say halfway through." he apologized while sitting down.

Leaving the pen at the desk, she sits on the chair next to Benson.

"It's fine. In fact, it's actually a good sign: having the need to talk about it." Leaning in, she continues. "Would you like to proceed where we stopped yesterday, or would you like to talk about something else?"

"I want to, but you wouldn't understand, at all."

"By all means, enlighten me."

"… I'm sorry, truly."

"It's okay. To be honest you're not the first patient to react like you did."

Benson begins an awkward silence to distance his train of thought from what he was about to start. In order to maintain control, Eve falls into his trap.

"So… you would like to continue from what you were talking about yesterday?"

"Yes. Sure…" He releases a deep breath before starting from whence he stopped. "Being responsible for the death of someone affected me deeply. I thought many times how I would end my life. I even tried to go through with it. But I stopped myself. I pondered which would be the lesser coward way to go. Should I poison myself and go down in agony? Should I find the highest bridge and — "

"I get your point. I don't need to hear you explain all the forms you idolized your own death."

"What?!" He was stupefied once again "No, that's not what I meant."

"You were romanticizing those moments. You needed to be pulled back, to stay grounded and as objective as possible."

"I, uh… okay."

"Can you tell me in your words, what did you do to snap yourself out of that phase?"

"I actually don't know… One day my thoughts just flowed from feelings of worthlessness to actual determination. I couldn't tell if there ever was a trigger."

Eve nods as he candidly answers.

"I tried to abstract from any responsibility. Maybe do something that would make the world better. I used most of my savings to travel around, to help wherever I could. Visited deserts, forest, mountains and beaches. All had the same answers. All had the same questions. No matter how deep I looked, all answers seemed shallow and man-made. Anyway, from a moment of epiphany I decided to honor the person whose life I took. I decided to completely change my purpose in life into something positive. But I couldn't do it on my own, not yet at least. I decided to come back to town and go through grief counseling."

Eve crossed her arms and raised an eyebrow. She remained silent but weirded out that this was her immediate reaction to what he said. In hindsight it was understandable, as it looked like he spontaneously decided to do these things, while reality proves there is never anything of the sort.

"They helped me get back on my feet. My sponsor was a super nice and open person. She suggested that I should meet the victim's family and make amends. And so I did. I introduced myself. Gave them a face and target for their hatred."

Benson picked up a pen that was lying in the low table, just in front of his table.

"I became their nemesis, and yet I was persistent. I begged for forgiveness over and over and over again. They hated me for the longest time, until the hating became something else… They finally conceded and accepted my presence."

The pen was easy to handle, and he started flipping it around his fingers.

"Ultimately, it was a good step forward. They accepted me as a human being for a change, but it would take a very long time until they found a place in their hearts for me. Only then could they start their healing."

"Did you ever consider that they could only start their healing process because your presence was threatening it?"

Suddenly he stops flipping the pen, and lays it on top of the table, right where it was before.

"Oh yes! In fact I was expecting it. I mean, I may have forced them towards a worse process. But I became an unavoidable and uncomfortable truth."

"That is a lofty statement. Did it ever strike you that you come out as holier than thou?"

"…definitely? I mean, I wouldn't consider any other way without subterfuge."

Eve starts shaking her foot.

"My sponsor and I became very close. We kept talking after I joined to help. We met and hung out many times until we revealed that we had strong feelings for each other. The best part of my life can be summarized to a few words. We got married. We had a child together. Our child was the best part of me — "

"What's the kid's name?"

"Her name was Eve…"

"Eve?!", she lets out loud, exasperated by the coincidence.

"Yes. Funny that."

"You said 'was'. Can you tell me how she died?"

"Strange how you reached that conclusion with only the way I said it… It could be that I had only said it without such intention, but yes… I'd rather not. Not yet at least… Would you mind if I continued where I stopped?"

"Sure", she replied while trying to tap an imaginary pen placed around her fingers.

Photo by Patrick Perkins on Unsplash

"I became obsessed with work, and I was spending too much time in the lab. Even though on the outside I was apparently fine, I let the victim's death linger in my thoughts once more. It wasn't really my sense of guilt not fading away. It was more of a sense of duty"

"A sense of duty?"

"Since I was coming back mid-term, I could not restart the project I was previously working on. Instead, I decided to focus on assisting my colleagues in getting the data they needed to prove their theory. They were working on machine assisted theory that could prove time thread reposition was possible."

"What is that? Sound like a sci-fi term for time travel"

"And it is. In a way."

"What, actual time, time travel?"

"More or less. I'll try to explain as simply as possible: Imagine a ball of yarn. Imagine you're a dot in the ball, traveling from one side to another. That dot's material is history is coded throughout the string. What was, what is, and what may be. In theory the dot can trick the universe travel to any point from its inception to its demise."

"I… have so many questions! That is so fascinating and creepy."

"But not why I'm here."

"…But not why you're here. Right. Please continue"

"Sometimes I would work the graveyard shift in order to gain access to the lab. I could read their notes, make sense of what they were going for. Make my own calculations."

"Were you an expert in the field?"

"Not particularly. That doesn't mean I'm not smart enough to know what they're doing. It's not that complicated, and with perspective you can boil it down into simple sets of equations. They would get there eventually, but I wanted different results than what they hoped to achieve."

"Different results?"

"Yes. I mean, while they were trying to get empirical results by studying in cells, I saw the potential already on multi-cellular organisms."

"And what made you believe you could do it?"

"I couldn't think of anything else."

"I'm sorry. Isn't that like counter-productive? Biased? bad science?"

"What do you mean?"

"Trying to reach conclusions with only one result in your head. Disregarding the possibility of not being right."

"Yes, and… it took me more than 23 years to prove myself right."

"23… " Eve takes out her glasses and squeezes the top of the nose. "How old did you say you were?"

"I didn't. And it's not relevant."

"Indulge me, please."

"I'm… 32 years old. Yeah…"

Eve stares blankly at Benson.

"So this… time thread…"

"Reposition".

"… reposition, yes. The machine makes you younger?"

"No. That's not how it works at all. Can I please go back on topic? I would prefer not to spend the rest of the time we have explaining the ins and outs of the theory".

A brief silence was shared.

"So you believed you were smarter than them? Do you think?"

"Not particularly. They were younger, still hadn't branched out and incorporated other schools of thought. The point is, I lost myself at work. I lost my family because of it."

Tick, tock, tick, tock.

"She couldn't bare taking care of our child without my help. For many countless nights we fought, and I made promises I would consistently break."

Tick, tock, tick.

"One of those nights was the tipping point. They left me. I was too blind to see what the most important thing was then. I realized it too late."

Tick, tock.

"I saw that it was my mistake. No matter how hard I tried, I couldn't change the memories. Until…"

Tick.

A buzzing sound emanates from the desk again. Benson sighs in frustration, as he was not able to get to his point today.

"Right…"

"Yes, our session is up."

"Tomorrow will be my last day. It's all I will need"

"Once you let out all that you believe that I need to hear, we can start working with it and around it. The path is long."

"Right. Goodbye."

—

Night time. Blinds are shut. Eve's phone rings.

"Hey! I'm so sorry, I'm just about to leave."

"Babe, your dinner is in the microwave."

"I'll be right there, just wrapping up on something here."

"That's okay. Take all the time you want, now. Baby's in bed. I'm going to bed too!"

"…I'll be there in no time." She replies, and turns off her phone, while almost immediately dropping it on the table.

Standing up with her hands on the table, Eve lets out a "Fuck!" in between sighs.

Photo by Anthony Tran on Unsplash

Day 3

Three o'clock, points the Kit Cat Klock. She sighs, feeling worn and tired. "Laila, could you please call Benson in?".

"Sure thing, doctor."

This time Benson opens the door without knocking, and sits in the couch. "Hi."

Eve looked stern.

"Is there a problem?"

With crossed legs she squints at him and fidgets her foot.

"…Should I come back in? And knock this time."

"That's fine. All I needed from you was admission. And now we can continue. Last time you were here, do you remember talking about being able to change your memories? What did you mean by that? Or would you like to rephrase?"

"I was going to tell you about my travels, actually."

"Your travels? The year you took off?"

"Sort of. Not really."

"Stop that. No more vague answers."

"…I was going to talk about how I was eventually able to make the machine work. Only it didn't."

"Here we go…" Eve lets out, removing her glasses and applying pressure in between her eyes. "Look, in order for me to help you, you need to be as clear as you possibly can. I don't think I can help you otherwise. Now please, help me help you!"

A long uncomfortable silence spreads like smoke through the cold room. Not even she could help the uncomfortable feeling she let out. She felt she needed to push the truth now. She feared he would just leave with all those secrets, and felt the uncanny feeling that it was extremely important to hear.

"I've tried for the longest time to come up with a way to explain this in a way that you would get. Ultimately, I don't think you're going to believe me, no matter how I phrase this."

"You won't know how I'll react, unless you try."

"You say that now, but you still have no fucking clue…", Benson stops for a moment to collect his thoughts. "The machine worked, but not really as I intended. I assumed it would allow me to send my consciousness into a younger version of myself. It would virtually erase my former self, replace my thoughts, and allow me to correct my wrongs."

He expected some kind of excitement, surprise, horror or constipation. Nothing besides a cold stare.

"But?"

"But this is not IT!" he moved forward from his seat and set his hand on his head. "This is not my past. This is not the ME I remember! Something seriously fucked up happened, and my consciousness… it… I fucking went somewhere else!"

Benson covers his face with both hands, and with irregular breathing begins to sob. Eve stands up and fetches the box of tissues that was on top of the desk, and offers it to him.

A few good minutes pass until he's able to breathe normally again.

"You mentioned it went somewhere else… What do you mean by that? Where should it have gone but your own younger body?"

He can't believe how unbiased, accepting, or just plain not correcting she is with all he's talking about.

"Everything is upside down! The fucking world is upside down. I was pulled into an uncertain time earlier than the accident, but not early enough. The when where I landed in my own body was just before it. I was fucking drunk, just about to leave the party…"

"Let's say for a minute, that you were actually able to travel, and that this idea that you're not in the right universe is not an elaborate projection… What was the thing that made you have that realization?"

"You're alive…"

Photo by Simone Acquaroli on Unsplash

She's taken aback.

"I'm sorry…" she asks, while removing her glasses. "…but what the fuck do you mean by that?"

With a sigh of painful temperance he announces, as if he was removing a stake that had impaled him years before.

"You were the one I ran over, 2 weeks ago. I-in my time…"

A sign of relief is felt from one side of the room. That is something he felt the need to say from the moment he stepped into the office and had such a lukewarm reception. No, even from the moment he found her alive when she shouldn't be.

A sign of shock and disgust is felt from the other side. The realization that she displays feeling externally was not lost on him. He was looking forward to this. No matter how painful.

"You… ran me over? Me? When? …How? I'm sorry, but this is very hard to take. I mean, what the fuck?"

A sense of calm came over Benson. He can finally finish his explanation. She will not interrupt. Or so he thinks.

"You're 43. You will be 44 in 3 months. Your wife calls you every night, because you're consistently late. Your child is called Emma."

"Stop!" she yells, while extending her arm with her palm open. "Fuck…" her head lowers, because she knows what's coming. She's seen this kind of weird plot twist unfold in cheap late night sci-fi movies. "Have you been stalking me? Is this your fucking idea of a twisted joke?"

"When you were little you broke your leg in three places. You were in love with Jimmy at age 12. Then Emily at age 15."

"…Fucking stop!"

He stops for a few seconds.

"How the fuck can you know all this?"

"I spent a very long time atoning for what I did, with your family. I learned so much about you, Eve. Probably better than you knew yourself then."

"But… but why… no… I'm not buying any of this!"

Eve moves her hand to her head.

"Finally some emotion!"

"Fuck you…"

"It doesn't matter now."

"Fuck you."

"There's only one thing left to share, and then you'll finally understand."

"Fuck you!"

He stopped for a second, waiting for her to raise her head.

"In this fucked up place, you survived. And I'm glad you're alive, don't get me wrong…" pausing for a second, Benson carefully chooses his following words. "But someone else had to take your place in this cosmic joke…"

Arrhythmia sets in. He feels offbeat.

"My wife…"

Her eyes became bigger. Her body had no idea how to take in such conflicting emotions. She felt the need to say something even though she really did not want to. Situations like these leave her extremely uncomfortable.

"How… did your wife die?"

"I was injected in the worst moment possible. I was about to leave and had 3 beers too many. My mind needed to readjust to the injection, but my body was in control. Eventually I did sober myself up, and was already driving up the hill. I was adamant to stop it from happening, by any means necessary."

Swallowing dry air, he struggles to continue. This hurts to his core, but it's now impossible to turn back.

"Driving up the hill, mentally sober, I managed to avoid your vehicle by staying my course. But I… I did not avoid the pedestrian." Delirium starts to set. His brain is trying its best to not let him continue. "I swerved after the impact, went downhill again. I woke up 2 weeks later at the hospital. They told me she didn't survive. At first I thought it was you. Then I found the only piece of news that would be worse than that. My wife…"

"She was the pedestrian…"

Tick, tock, tick, tock.

He nodded while sobbing.

"My wife died, by my own hands. We never became one. My child will never be born."

Benson lies down in a fetal position in the couch. He feels defeated, and still senses he accomplished what he came here to do. Whatever that was.

Eve is at a loss for words.

Tick, tock, tick.

"You don't have to say anything. That is all I wanted to tell you. I wish to leave and figure this out in peace, to bring no more misfortune into this world, to be no one to nobody else. I wish you all the best"

After cleaning up tears on his cheek with his sleeve, Benson slowly wakes up. He walked towards the door and tried to handle his breathing.

Tick, tock.

"Wait… Why?! What do you expect…"

Tick.

"Nothing. Closure. Someone knows my tale now… Might as well be you." Benson opens the door and finally says "Goodbye"

A buzzing sound emanates from the desk. Benson closes the door.

End of day.

Eve serves a glass of whisky and lounges on her chair.

In a semi-catatonic state, she slowly reached for the recorder.

"What a mindfuck…" she muses in a sorrowful manner.

And she presses the ERASE button.

by Stephen Maurice Graham

How to train your giant scorpion

Tue, 07 May 2019 00:00:00 GMT

Seagulls fly in a circle, high in the sky on top of the cliff, their screeching contrasting with the quietness over the emerald water. They're doing their part in an unspoken covenant between us and them. We share our fish, and they warn us of any rare sighting from above.

Rays of sun light the water from the clear surface down to the depths of the sea floor. The water is inviting, cold, green and clear.

Swimming is my favorite activity, and I do it with pleasure. Being underwater is soothing. It feels like being back in the womb. Swimming against the soft current feels like being embraced with love, with a cold comfort and assurance that we could stay in for as long as we wanted.

Some do choose to stay in this embracing comfort forever. They are not considered lesser people for such fate. A strange sound beckons even our best to lie in the ocean bed and never wake up.

Elders call this sound "The Siren's Song".

The island we live in is a cruel paradise. It's been a very long time since we've seen travelers, who would bring us objects, spices and stories from strange and far away lands. But still, life is easy. We either swim to catch fish, or we venture inland to harvest wild berries or fruit from trees.

And then there are the beasts.

Photo by Nemanja .O. on Unsplash

I could hear a faint whistle reaching me. It was the horn call, coming from above the cliffs. The curfew preparations began, and all able to leave the waters should do so.

Those who could not would be left behind.

Grabbing the rope on the side, I start climbing up the cliff with a bunch of mackerels bundled together with a string, strapped to my belt.

Up on the ledge sits the main elder with his horn, waiting impatiently for the last group of fishermen to return so we can begin the ascension.

"You're late", he scolded, "You know I cannot wait for you every single time we need to raise."

"I know", I replied, still leaning on the edge, still gasping for air. "It won't happen again."

He offered his arm and I grabbed it, raising myself to safety.

"Join me. It's time for you to meet T", he replied while stepping away from me, moving towards the market.

Photo by Hishem Zineddine on Unsplash

The narrow streets of the old town are colorful, lively. Every man, woman and child of the village is responsible for the well-being of their dog, cat, seagull and sheep.

The community thrives when all are being cared for. Children are taught that our animal companions' lives are as important as our own. It contrasts with the stark rule of casting away those who do not follow the call on time.

Once we reached the market, the elder signals the neophytes with a hand gesture to begin the ascension ritual. They rush towards every edge of the small isle. And levers are pulled. The elders join together in a circle facing each other, in the center of the market.

They start chanting an unintelligible song.

The ground starts shaking. The air feels heavy. We feel heavy. And the shaking stops.

The elders need assistance after every chant. Their energy is drained, and need some rest and replenishment. I reach the main elder and guide him home, grabbing his arm over my shoulder.

"You must meet T today", he mentioned, showing fatigue through his voice. "Your cousin is waiting for you at the pen".

After leaving the elder to recover on his bed, I headed towards the framed pillars on top of the hill, where the pen is.

Photo by Mike Yukhtenko on Unsplash

My cousin is already there in the middle of the beasts, treating them as if they were their own children.

"It stings seeing you surrounded by pricks!"

"You know, you can say that as many times as you want. It's still not funny", he sneered. "Why are you here?"

"The elder told me I needed to be with T."

He looked at me, then towards T. "Are you sure?"

I stood silent. The beasts are imposing creatures. One must not show fear or display one self as a threat. A sting from their tails can pierce through the body. Even if you survive being impaled, the venom will take care of the rest.

Even though they generally live in solitude, over generations of living in captivity together changed their social habits. T is respected among all other giant scorpions.

"I need to try again."

He hesitated for a few seconds, and then agreed. With a strong whistle, all other beast stepped aside, and T waited patiently for me to come closer.

I grab the saddle lying on the table and start moving toward T. T steps back and raises her tail.

"Stop", my cousin demanded. "T is not ready. Maybe not today"

I let go of the saddle, dropping it on the floor. And I get closer. T keeps her tail raised.

"Stop!"

I didn't listen, and kept moving closer and closer in a slow pace. All the other beasts move in to protect T, also with their tails raised.

"You're being stupid and reckless!", begged my cousin "I won't be able to help you this time."

I keep ignoring him, and stand still, only a few feet away from T. And I wait for her move. She resigns and lowers her tail. And so do all the protectors.

"…You're an idiot."

I touch a few legs just before climbing on top. It is harder without a saddle, but not impossible. By touching the back I let her know everything is fine.

"Take me where you want to go", I asked T. Releasing a whistle she starts moving toward the cliff's edge.

It's sunset.

The sea gets farther and farther below until we are not able to see it anymore. Then we join the sky. Emerging in a sea of clouds.

We have ascended.

Photo by Kaushik Panchal on Unsplash

In Nihilum

Sat, 27 Apr 2019 00:00:00 GMT

Preface: This is based on a collection of dream-like memories I experienced more than 20 years ago. It does not reflect a current state of mind. The fact that I'm releasing it into the wild means I am completely comfortable with the past experience, and willing to write about it.

Photo by Paul Gilmore on Unsplash

Droplets of dew fill the leaves in the forest. Light is hardly coming through. The tall trees with thick foliage do their best to prevent the sun from touching the ground. No wind is blowing, yet the air feels fresh.

An eerie silence brings about discomfort. No birdsong. No rustling noise on the ground.

The walk path is barely perceptible due to all the roots and vegetation that long ago took over. Nailed to some trees arrows in signs point a way to go. Other trees have ⇠ THIS WAY painted in red ink, pointing in an opposite direction.

How did we lose ourselves in the forest? Where is our way back home?

The signs look aged, corrupted by years of exposure, whereas the paint signs look new. After deliberating which would be the best choice, we decide to follow the inked instructions. And so we walk under the arched trees, from which their branches lay a lightning shaped deep shadow to whatever is under it.

There is something lovely with the feeling you have while walking over wet soil, full of brown leaves and greenery and roots we try to avoid. It is soft, it moves with our weight. It's almost as if we're walking on top of a sleeping giant.

After trudging for what it seemed too many hours of following arrows, we knew we were going in the right direction. The paint started getting more indulgent, fresh to the touch. We start feeling a different kind of soil under our feet. Steadier. Sandy.

And the trees let us be as we leave the forest and walk towards a plain. And the sun is magically gone.

All we can see is a blanket of darkness covering all the eye can see, and bright stars in the sky.

A faint line of lights can be seen far away in the distance. As we move closer, the line shapes itself into a group of people, each holding their candle with care.

Closer and closer we get. We begin to understand what they are doing. It is a mournful procession; some sort of night pilgrimage, walking away from a dark structure that was definitely not there before.

"Hello? Can you help us?", we ask one after the other. "Can you tell us where we are?"

The few that raise their head to look at us do not understand what we mean. Their stare is incredulous, confused and fearful. And as fast as they raise their head to acknowledge us, they lower them. And they continue their walk.

Each and every try to communicate with them is fruitless, leading to frustration.

"PLEASE! Can you help us?", we finally get sick of being ignored and grab one of the last pilgrims. The woman stares at us with a wistful breathing, incapable of answering. Her eyes grow with fear and anxiety while staring at us, and a tear travels down her cheek. She lets herself go abruptly from our grip and keeps going on her way.

At this point we are close to the structure. It is hard to notice any detail regarding it, except that it is devoid of light and a long thick tower blocks the stars. Moving towards it, two men wearing a suit of armor can be seen guarding a large two-door wooden portal.

Photo by Nik Shuliahin on Unsplash

"Excuse me, sir", we addressed the one on the left. "Can you please tell us where we are?"

The man, steadfast and stoic moves only his eyes towards us. He is tall and twice our size.

"Do not attempt to enter." He replied in an especially deep voice. "These doors were not made for you. This place was not meant for you. Leave. And don't come back." he says, pointing towards the path where we came from.

Feeling threatened, we accepted their order and began our walk back into the forest. But something strange made us stop. A whistled song was carried by the wind and embraced us with great strength.

Then it stopped. I was alone. And the song traveled back into the fortress.

I could notice that the song was traveling round and round the large structure. Going through the door would be an act of sheer folly, so I tried to find another way. By going around the fortress the men guarding the entrance would not notice, and could be avoided.

By the side wall there was a service door, very old and unmaintained. It had no handles or locks. I decide to open the door.

Photo by Oumaima Ben Chebtit on Unsplash

The inside revealed itself. It was cold and dark. Sprinkles of dust falling from the ceiling. The only light apparent was coming from torches placed along the empty corridor.

It was silent and eerie. I grabbed the first torch hanging on the wall and start walking through the long corridor.

Pacing myself in silent steps, I move towards the end, where a spiral stone staircase leads me to the top of the tower.

Halfway through the staircase there was a dark door. It had my first name written in red ink. The writing appeared to be painted with a hand, and not a brush.

This door had no handles or locks either. It would not budge. Why is my name on it?

I attempt to open it by force, without considering this would probably alert whomever was close by. The door finally creaks itself open after my third charge. A strong gust of wind with the whistling song comes from the inside and blows the fire out of my torch. Then it dissipates, and the music fades away.

Through the door we can see a long and wide church-like hall. It is barely perceptible what is in this hall. It has tall pillars that hold the arched ceiling. The only light available is coming through the stained glass windows, up top.

As I carefully step into the hall I feel I stepped in a puddle. Torches light up in the first pillars, to my left, and to my right.

It's blood. It looks like something or someone was dragged from this position. The trail leads to a faint shadow not too far from me. The second torches light up.

It's a huge set of wings. No bird can be this big. Upon inspection I notice the wings must have been ripped apart violently. And I feel an uneasy pain in my back, as if it happened to me. What happened here?

The trail of blood does not end here. It seems the creature must have dragged itself from this spot. And there it is, lying next to the altar. As I get closer I realize it is not an animal.

The third torches light up. It is a man, naked and on his back. His body is full of scars, scratches and cuts. Ugly open wounds in the end of his wing bones.

He is lifeless and drained of blood. I turn him around to try and get a pulse and see if he is still breathing.

"N-no…", I muttered under my breath.

He is me. I am him. We are one.

I am alone.

And from the moment I realize it, I start hearing unnatural screams and growls coming from the door.

And I run away to the end of the hall. And I'm not fast enough. I feel a thud in my head.

It becomes dark, and I fall into the void.

Nothingness. Nothingness….

Photo by Akira Hojo on Unsplash

In the land of good samaritans

Sun, 21 Apr 2019 00:00:00 GMT

Along the derelict pier, people from all walks of life could be seen, all wandering aimlessly.

A family leaning together on the handrail, looking towards the horizon, hungry and with a sad look of desperation. No one knows what was going on in their minds, what brought them to take their children to the end of the pier on this cold sunset.

Beggars cowered in corners, trying to fight the elements. Too weak to ask for assistance, or beg for scraps. They were very young, and very old, all sharing the same thousand-yard stare.

And yet, loving angels stood next to them, offering what they could in order to bring a glint of hope, to bring them back from darkness.

Along the beach there was a mix of familiar camping and fishing sailboats.

For those that made the choice of living on the sea-side, the days were either filled by going into troubled waters to make ends meet, producing nets, or preparing freshly caught fish to distribute among the locals.

The nights were alight along the sandy commune with bonfires, where some would sleep to prepare for the next day, and others would party, and mourn those lost at sea.

Money stopped existing. It still existed physically, but wasn't used as a commodity. It made no sense being attached to a construct that would complicate even further the status quo. The new world had no need for it. Besides, new money was impossible to create.

"THE SPARK IS GONE!"

The only sentence that filled the front page of a newspaper. It lied on the floor, crumpled and dirty. It was the last publication, just before all energy was siphoned into nothingness.

Not all was gone, though.

Electricity was not flowing through power lines.

There was no light at night to keep us warm and safe.

The roads were filled with debris and abandoned cars…

But for some unexplained reason, a few vehicles were spared from the energy purge. My van was one of the "lucky ones".

In a state of emergency, those that had working vehicles were encouraged to either donate them to the ruling order, or allow them to be used as carpool to help others in need of a ride.

Photo by Omar Prestwich

"Can I help you?", said the volunteer guarding the makeshift parking area.

While moving along the beach, I was completely left to my thoughts and had drifted towards where I needed to be. Time and distance gone by without me taking notice.

"Here to pick up my vehicle", I mentioned, while showing my permit and ID.

The man looked at the permit with sourness and sadness. I was the first person to arrive at his post today.

He wished he didn't have to do this job. He wished he could have just forged his own documents and taken one of the three vehicles parked in that special area. He wished he was able to run away from all this misery and find somewhere else with a semblance of the old world.

But no. The world was too far gone for one to take advantage of the situation. And there would be dire consequences if he did.

"Just a moment", he muttered as he moved toward his post, where the candle light was.

Photo by Banjo Emerson Mathew

The parking area was a shelter for people in limbo. They were given a number, and had to wait their turn to be taken to their destination. No favors, no favorites.

The more fortunate, next in line, could already be inside the vehicles. There they could finally rest, knowing that their time has come to go where they needed to be.

"Move along", said the volunteer, as he handed me the documents. He gripped the documents tightly the moment that I grabbed them. "Thank you for your service", he added, as if by obligation.

"Thanks. Doing what I can", I replied, and he softened his grip. I fold the documents and put them in my back pocket. From the other back pocket I take out a pack of cigarettes and light one with a match.

Walking towards my van, I notice a few vagrants following me.

"Hey!", said one, introducing himself as non-menacing as he could. "Where did you find those cigarettes?"

I inhaled for a bit to show I wasn't feeling threatened. After exhaling, I replied that "A family south from here make them from tobacco leaves their family brings from the farmland". I give them the pack of cigarettes and matches. "Ask around for the Jones', they are known further south".

"Thanks a bunch, man", another replied, feeling happy about the cigarettes. "Today is a blessed day!"

Reaching my van, I notice quite a few people already made it their home. They are all fast asleep. I step away and go somewhere else for a bit.

Photo by Andre Benz

A provider was serving food in the parking area. It was lit by candle light and food was cooked on a salamander stove. I get in line and wait for my turn.

As I return to the van, I knock on the window. One of the people inside wakes up and looks at me. I give them a rolling signal, gesturing that we're ready to go.

They unlock the door on the driver seat and open it.

"Good evening, sir", said the one in the front passenger seat, with great care, trying not to offend me. "I hope it's alright that we rested our eyes for a bit before you arrived"

"Sir? Thanks, but I think you are a few years my senior. We're all brothers in this world." They all sit up straight and put on their seat belts. "I have some bread and freshly made coffee. Help yourselves!"

It felt like they have slept for quite a few hours. The coffee was a much welcome gift.

"So, where are you all going?", I asked, as I turned on the ignition.

Photo by Thanos Pal

Skifree

Sat, 10 Mar 2018 00:00:00 GMT

Skifree is a Windows 95 game about avoiding trees until a yeti eats you. I tried rebuilding it in Preact with Redux and RxJS for state and stream management.

The player

Every game entity has a sprite array, coordinate objects pointing to a shared spritesheet:

The trees, rocks, yeti, and every other entity each have their own array like this, all pointing into the same image.

The full game spritesheet.

The illusion

The skier never moves. position.x is always canvas.width / 2, position.y always 200. What changes is center, an offset that every obstacle reads to figure out where to draw itself. In every direction.

It's a trick used in most side-scrollers. The mountain comes to the skier.

The obstacles

Each frame a random number decides what appears on the slope:

Trees at 20%, rocks at 30%, snow mounds at 20% (those bounce you up instead of crashing you). Ramps send you into the air with a jump strength of 100 instead of the usual 25. Only one ramp and one dog sled can exist at a time. When something scrolls off the top it gets deleted and add() fires again.

The yeti

After 60 seconds a Yeti appears and follows the player:

It catches up faster from the left than the right, and the vertical gap always closes. Ski fast enough and you can hold it off. Move slower and it eats you.

Redux

Here's the state setup:

Three reducers. For a browser game. The speed reducer alone handles PLAYER_MOVE, PLAYER_MOUSEMOVE, PLAYER_SET_RATIO, PLAYER_JUMP, and GAME_RESET.

It made debug mode easy. store.getState() at any frame tells you everything. Stepping through actions in Redux DevTools to track down a yeti glitch was satisfying.

In retrospective, canvas.addEventListener would have been fine for this game.

Press F.

Minesweeper

Sat, 09 Dec 2017 00:00:00 GMT

Retrospective

It's nice to look back at code made years ago. I want to change it so badly, but then it would stop being an artifact of what I was then. This project was created in 2017. ES6 was new, I had just figured out what Webpack was, and I was absolutely going to use RxJS for a mouse click because that's what past me thought it was cool to do...

The grid

The minefield is a 2D array. Each inner array is a row of cells, and each cell is an object:

Planting the mines

Mines get placed one at a time. The function picks a random cell and checks if there's already a mine there:

If the spot is taken, the function calls itself and tries again. It works here, but if the board was meant to be full of mines the recursive function could become a memory hog, something I wasn't considering back then.

The matrix

Every cell needs to know about its 8 neighbours: up, down, left, right, and the four diagonals. I wrote those out as a literal grid of coordinate offsets:

This exact block appears three times in the code. Ideally this would have been a helper function, but I was young and naive. Here's one of those uses, counting how many neighbouring cells have mines:

Filter filter loops through each coordinate pair and keeps only the ones where hasMine returns true. I'm poroud of the destructuring done here ([x, y]). Coordinates outside the grid return undefined from hasMine, and filter drops those automatically. No edge-case handling needed.

Revealing the area

When you click an empty tile with no mines nearby, a big area reveals itself at once. That happens through revealArea, which calls itself on each neighbour:

It only keeps spreading if tile.adjacent is 0, meaning no nearby mines. When it hits a numbered tile it reveals it but stops there. The important bit is tile.hidden = 0: if a tile is already revealed, the early return at the top skips it. Without that, the function would bounce between the same tiles forever.

The numbers close to mines

When a tile is revealed and has neighbouring mines, a number gets drawn on it using fillText. The colour of that number is generated by this:

<< 0 is a bitwise left shift by zero, which chops off the decimal part, same as Math.floor. Then .toString(16) converts the number to hex, and ('000000' + hex).slice(-6) makes sure it's always 6 characters long by padding with zeros. Put a # in front and you have a valid CSS colour.

RxJS

Here's how I used it for click handling:

I could have done canvas.addEventListener('mousedown', e => this.click(e)) instead and it would do the same thing. There are no stream operations here, nothing that actually needs RxJS. I used it because it was new and I wanted to try it.

Years later it can still sweep mines. Younger me would be proud. I still am, but I would be too 😎