DEV Community: Jane Ori

Violence at my boundary.

Jane Ori — Fri, 05 Jun 2026 12:36:47 +0000

My childhood was a constant state of fear and severe physical and mental abuse.

Trigger warning, that ^ ad nauseam.

My mother made no apparent effort to end the cycles of abuse she suffered.

I see her face in my mind as a wide-eyed absent minded look of pure hatred and immediate intent to harm.

I was 33 years old the last time she hit me in the face and chest repeatedly until I could get my arms around her tight enough to repeat "I'm sorry I forgive you."

I hear her voice with the vile glee of schadenfreude when she attempts to manipulate someone against me, humiliate me, or give herself room to breathe from the avalanches of imagined bullshit she seemingly drowns in.

I think it's partially because I looked like my father but I have no idea what trauma causes a mother to express almost exclusively hatred to her oldest child their entire life.

She hasn't used my name once without first deadnaming me and pretending to correct it quickly.

She spilled hatred and contempt onto every question, hope, and dream I dared to speak my whole life.

The moment someone else paid attention and began to notice is the rare glimpse of kindness towards me I'd experience so she could save face.

But I knew better than to take advantage of something she'd hold over me because she already made me feel awful for thinking about it.

"Did you hear that, they said it's okay for you to do ballet with your sister!"

"No, I don't want to."

"I don't know why he's always like this! I guess he doesn't want to! Oh well!"

I have done my absolute best trying to heal from this trail of violence and hatred and especially try to not let anyone experience it from me.

I still have one single trigger, I know what it is, and I think I know what I need to do to end it.

Some of my earliest memories are witnessing my mother yelling and fighting with my birth father.

One night she made sure I knew what cheating meant after he had no choice but to borrow his friend's car to drive home one night during the final split.

I wasn't even in 1st grade yet.

She stormed inside screaming after he kept her from damaging the car and she locked the front door. He begged me through the window to unlock it, I looked towards mom and she was staring at me with pure hatred

"don't you fucking dare touch that door."

I looked back to my father and cried helpless. I have absolutely no memory of my little sister or baby brother during that.

It felt like a week later, a new guy showed up.

She continuously shared reasons to hate my father and in contrast reasons to like the new guy.

She explained she met the him at her half sister's funeral several states away just prior to the fight with my father -- where she made sure I knew what cheating was. 🙄

The new guy became dad shortly after and then brought 2 new siblings with him.

A brother a couple months younger than me, and a sister a little younger than my full blood sister.

Technically they're my half cousins because dad was my mom's deceased half-sister's husband who she "met" at the funeral.

It took one quiet moment in my room to understand who actually cheated and when.

I learned to be extremely vigilant in understanding timing and taking in information without ascribing truth to it.

I learned to feel the mood of a person without words and to test uncertainty by enthusiastically saying "I love you!" and digesting the reality behind the nuance of the surface response from mom and dad.

He beat all of us with his belt. And later the boys, the oldest of which was me, got "the tearjerker" - a piece of wood that used to hold up the box spring on an old wooden bedframe and now used to beat us.

Somehow she was even more cruel to them than to me.

My brother from dad's side told her "I love you mom!" right after I did, using the same tone of child-like happiness without knowing it was just part of my test to be over the top so she wouldn't call out the truth of it if she knew.

We were all in the car out in the middle of nowhere in a wooded swamp after they went fishing off a broken bridge.

I felt like something was scary and tense. She was normal/reserved tone when replying to my "I love you mom!" but my heart broke for my brother when she turned to dad instead of him and said "oh I'm going to like this one, he loves me even when I'm mad at him."

He didn't fucking do anything.

I never heard him happy again.

We stopped, my parents got out, went to the trunk, dad opened the big paper map so we couldn't see through the trunk-hood gap from inside into the trunk.

They whispered and I felt tension rise. It felt like an hour before they came back in. By then mom was irritated at dad, dad was silent.

My mind sat with a feeling that the five of us kids just survived.

I told on my brother-cousin in 3rd grade for something stupid I don't remember.

Hours later, while in the bath upstairs, I hear the usual screams and "I didn't do that" from a child as mom screamed with insanity and beat the shit out of my someone. It didn't even cross my mind that I told on him earlier because it was something petty and minor and couldn't be relevant.

She stomped upstairs burst through my bathroom door and started beating the shit out of me.

I screamed over and over "what did I do?! what did I do?!"

She bloodied my nose and repeatedly held my head under the water.

She finally yelled and said

"you said your brother blah blah blah!"

My mind exploded into bewilderment at the horrible distortion of what I actually said.

I yelled through blood, snot, and tears

"No I didn't! I said (minor nonsense)."

I became really really good at repeating things I heard or said verbatim over the years.

She stood straight up, her entire energy dropped into deadpan nothing, she looked towards the window and said a neutral volume "Oh." then walked out and back downstairs without another signal of awareness.

The neighbor two doors down on the opposite side of the house called child protective services for the first time.

The second time was while my dad beat me with his open hand in my face and with the tear jerker on my butt & thighs for several minutes because I was too scared to walk up to him and allow him to do it just once.

It was part of the punishment to have to willingly come into beating range so he didn't have to reach for us.

That was the first time I wore makeup. Mom put it on my face to cover the old bruises and fresh marks. CPS has (had?) to call to inform the parents they're coming. FUCKING STUPID.

Mom told me in a panic while putting the makeup on

"that's it, that's enough to do it, we're going to jail. They're going to take you away. You'll never see your siblings again."

She noticed that last one struck so she repeated it over and over until they got there.

They started by interviewing us individually but my little brother was too young and they asked me to go with him.

He answered every question point blank with the truth, I interrupted every time and downplayed it and made it seem like he was exaggerating. I lied. I didn't want to lose him. I didn't know what else to do.

After my 18th birthday my dad changed completely. It was gradual for only a short time then so much more reserved and kind, soft, seemingly all at once. It was the first time in my life I saw someone actually change. His growth continued and is the only reason we still sometimes talk.

I was so fucking hateful by that time though. I did everything I could to learn. I studied Buddhism, I felt the love of Ram Dass and Thich Nhat Hanh, and I held onto the sage advice from the few good teachers I encountered.

My first relationship lasted 3 and a half awful years, into sophomore year of college. I told her I'd kill her if she ever cheated, she cheated, she never admitted it but I tasted the condom then the guy told me along with our manager from work where we met.

It turned me on more than ever.

But I wasn't allowed to like that let alone admit it, so I put on the pressure with name-calling and constant lack of trust. She cheated again in college more than once.

"How do I taste?"

She didn't use a condom that time - still never admitted it but the buried trans girl inside of me was living vicariously through her.

"Fine, like normal, the back of my throat is drying out a little though."

She cancelled my phone her parents were paying for and that's how things officially ended between us.

I had no way to contact anyone so I spoke to God and begged him to not let me go through that again. To not let me ever do that to someone else again.

I had 2 non-committed, unlabeled, very short relationships in college after that.

In the last days of college my friend put her wig on me and I saw myself in the mirror. She noticed me transfixed and quietly took this photo

Playfully and with curiosity in her tone, she looked at me

"You seem to be enjoying this a little too much. 😏"

"I've kinda always wanted to."

"You know you can, right?"

"Yeah, but, you know, I have to get a job so... No."

For the next 12 years I stayed single, male expressing, not one kiss or hand held. I just worked on figuring myself out.

Every time I'd get close to a new relationship, it would fall apart and my life path would bend.

I was 430lbs, jobless, and alone with my cat the day I accepted the label, I am transgender.

I watched lilly Jo Hanson's coming out video and it clicked a giant vault door lock in my energy bigger than my body.

I watched it again and I bawled.

I watched it over and over and I bawled for weeks straight with bursts of laughter and self love pouring into every crack.

I had an epiphany that unlocked it all.

Being transgender isn't something you do, it's something you are.

I knew well when something was my bullshit or someone else's in every conflict. If I was logically sound and in harmony with my beliefs and perspective when I took an action, I don't give half a bit what you think about it. I can feel when my actions come from misalignment and I do the shadow work to heal it and I apologize when I realize it.

So in my mind, if transgender was something you do, I couldn't stand living as the woman in my heart in the world we're in. I would feel like I needed to justify it in the face of spite and I hated attention so there's no way I'd even buy the kilts or tunic that had been on my Amazon wishlists for years.

The moment I realized it's something you are, something I obviously am, there wasn't a God that could stop me from transitioning. No justification needed, it just is.

No attention wanted, I'm just plain Jane.

I've gradually lost 200lbs (90kg) since that day. Not from effort, from the natural unfolding of a happier life.

I had an incredibly fun 6 month relationship since then and I was so damn proud of the person I was. She unlocked so much for me, I was suddenly straight up promiscuous. 11 weeks, 30 people, mostly men, PrEP and DoxyPep, and a whole new confidence. I love myself and I finally felt free to explore this side of me.

One big karmic cycle kept coming up over and over though.

The moment I detect someone acting without integrity, I give them a single chance to course correct before I show my teeth.

If you double down on a lack of integrity, I get vicious and see my mother's hatred living through me.

I do not want to live with this cycle repeating.

I've come to the brute force awareness that the moment I detect a double down on a lack of integrity, I am on a metaphysical boundary on my life path.

That relationship is over and cannot be recovered through any actions on my part.

I have one singular option - to walk away.

Nothing gives me the right to impose my perspective on anyone else's life path. They made their choice, twice. They are living their version of their truth and it is simply incompatible with mine.

Walk away and stand tall, argue and make myself small, or bend to their nonsense and make myself even smaller.

I'm done showing my teeth though. If you saw them, I guarantee it's because you violated that one single boundary that I still carry OR I did something I needed to learn from and fix and you received an apology.

I am not perfect but

I am proud of who I am.

I just walked away from a six figure Staff Engineer offer.

They approached me, they appreciated my tech writing and my extensive list of open source work. (some of which are listed here) We made plans to talk.

Five great interviews went by.
I signed the offer letter.
I was genuinely excited for the role.
Then they took a couple days "for the lawyers to draft their standard employment agreement." 🚩

Their employment agreement contained two awful clauses that made my stomach drop when seen together.

These are the 2 clauses

First, this one which doubts the employee's integrity to the point they feel it necessary to add "Best effort" to the AT WILL employment agreement.

5 Best Efforts. During Employee’s employment with Company, Employee will serve Company faithfully and to the best of Employee’s ability and will devote Employee’s full business and professional time, energy, and diligence to the performance of Employee’s job duties. Employee will comply with Company’s policies and practices as they exist from time to time. Employee will promptly communicate to Company all business, commercial and investment opportunities or offers presented to Employee, or of which Employee becomes aware, that relate to Company’s business. During Employee’s employment with Company, Employee will not, directly or indirectly, compete with Company, be employed by or provide services to any other person or entity, or engage in any other business activity, without prior written approval from Company. Employee may, however, engage in passive personal investment activities, so long as the activities do not compete with Company, violate Company policies or interfere with Employee’s job duties.

🚩 unless they approve it in writing first:
🚩 It blocks my ability to get paid for writing.
🚩 It blocks my ability to get paid for speaking.
🚩 It blocks my ability to continue development on my open source work.
🚩 It blocks my ability to develop new things or even use any new features that excite me.

All of this is specifically outside of work and on my own equipment.

Literally trying to micromanage everything I do, everything that attracted them to me.

And it's web dev - everything is indirectly related to everything.

And my OS work is directly related to some of their work.

I have seen barely similar clauses and I always get them removed or neutralized with amendments because of the nature of my OS efforts.

This is by far the most overreaching variant I have ever witnessed though.

The next one is INFURIATING to me and I didn't even bring it up in my first response.

11 Remedies. Employee acknowledges that violation of this Agreement would have a materially detrimental effect upon Company, the monetary loss from which would be difficult, if not impossible, to measure. If Employee breaches or threatens to breach any term of this Agreement, Company will be entitled as a matter of right to injunctive relief and reasonable attorneys’ fees, costs, and expenses associated with enforcing this Agreement, in addition to any other remedies available at law or equity. Employee waives any right Employee may have to a jury trial to determine Company’s right to recover attorneys’ fees and costs under this Agreement, or to determine the reasonableness of those attorneys’ fees and costs. Nothing in this Agreement will limit Company’s remedies under any applicable Uniform Trade Secrets Act or elsewhere.

(emphasis mine)

This clause is so one-sided and revolting it makes my skin crawl.

🚩 No verbiage of the prevailing party - even if they lose, they can legally assign all of their "reasonable" costs to me.

I've done my reflection and I'm confident it was unnecessary to grasp, argue, plead, or show my teeth at all.

I offered if they agreed to 3 interlinked amendments, it would mostly neutralize both and I wouldn't have to point out how awful they were.

They agreed to two. ☣️

I should have just walked away when they rejected the 3rd amendment.

But this was my response, the violence at my boundary.

[Redacted],

I had excellent conversations with everyone on the team and I am excited by the potential of the company in full and individually by each of the members I talked to.
I trust that we are already fully working together, shoulder to shoulder, looking at this employment agreement and working to fix it together.
Not just for me, not just for the image of your company, but for all future employees you attempt to hire.

Here is section 5 in full to continue discussion:

5 Best Efforts. [...]

This clause directly implies that your legal team doesn't have trust in my integrity to give my best effort - even though the agreement is at-will and you are free to terminate employment any moment you felt like I wasn't giving my best effort. Your legal team's mistrust and now insistence to micromanage what I do outside of work on my own equipment and restrict my multiple streams of income is wholly unacceptable.

I apologize for any perceived harshness but I will no longer move forward with the employment agreement unless it is removed in full.

Further, since your legal team's intentions have been magnified here, it forces a closer look at their egregious, one-sided, fear based, power hungry lack of integrity in section 11. Here it is in full for reference:

11 Remedies. [...]

Your perception of how I've labeled it is a direct reflection of the energy your legal team has inserted into your employment agreement.

Either remove this entirely as well or introduce some integrity by replacing the sentence beginnig with "If Employee breaches or threatens to breach..." with the following:

In any legal action or arbitration arising out of or related to this Agreement, the prevailing party shall be entitled to recover its reasonable attorneys' fees, costs, and expenses from the non-prevailing party, in addition to any other relief to which it may be entitled.

Additionally, the next sentence should be similarly bi-directional to the benefit of the prevailing party and not one-sided.

Happy to continue once these issues are fixed.

You want leaders, not captured pokemon.

// Jane

If you want to work with ME - I'd love to chat.

If you want me afraid of punishment, unable to live as myself, unable to follow my excitement outside of work without a zero trust leash around my neck, unable to play with new tech without permission, you can't have me.

I refuse to be anyone less than I've grown to be.

I love myself. I love the work I do. I love each of my open source contributions. I love my grind and drive. I love my passion. I love my integrity.

I'm available and eager to be part of a team again. :)

Happy pride month 🏳️‍⚧️

Open Contact 👽

Please keep the comments on-topic and reach out with anything else through my socials! Happy to help, love to see what you've created using my OS contributions.

PropJockey	CodePen	DEV Blog	GitHub

Mastodon	LinkedIn	X	Bluesky

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

PayPal	Ko-fi	Venmo

BTC	XRP	ETH

bc1qe...usgn9	rw2ci...nWKQg : 459777128	0x674...beF54

Abhorrent Employment Agreements.

Jane Ori — Thu, 04 Jun 2026 22:53:57 +0000

I recently received (and later rejected) a six figure Staff Engineer position.

They approached me, they appreciated my tech writing and my extensive list of open source work. (some of which are listed here) We made plans to talk.

Five great interviews went by.
I signed the offer letter.
I was genuinely excited for the role.
Then they took a couple days "for the lawyers to draft their standard employment agreement." 🚩

Their employment agreement contained two awful clauses that made my stomach drop when seen together.

However, if they agreed to 3 interlinked amendments I proposed, it would mostly neutralize both and I wouldn't have to point out how it made me feel.

They agreed to two. ☣️

My biggest flaw is showing my teeth when I witness someone double down on a lack of integrity.

Or maybe it's that I got mad at all. I don't know.

I make no apologies because my life experience has made me feel like it's necessary, but I know it's not. I forgive myself because I always deliberately grow when I see a pattern. BUT THIS ONE IS PERSISTENT.

I need to end this karmic cycle in my life.

In order to do that, I need to ask for your help. For your perspective that my life has not provided.

I need to open myself up to be seen authentically for who I am, in this direction, at moments like this in my life.

I ask: How do you navigate something like this without wanting to rip their heads off?!

It's extremely rare for someone to double down on a lack of integrity so most of you will be surprised to hear this about me if you've witnessed me anywhere normally.

Unless of course, some sh*tbag quietly spread rumors when I got mad at them instead of using the opportunity to look in the mirror - and then you heard it from them.

Just kidding. kind of

That sentiment is part of the structure I need to dismantle here.

I want to think of myself as kind, I feel like that is the sentiment most people have of me.

But I know I am a c-unit if you trip this perceived-lack-of-integrity that's trying to take advantage of me, "boundary" that I'm carrying around.

It is code I need help debugging.

In the words of Paul Selig, "what you damn, damns you back".

You don't have to align to Paul's beliefs, but I know it to be true in my life, so it is the experience I have lived. Because I also believe that my beliefs create my experience of my life.

The abhorrent* combination of clauses.

*- in my opinion, with a degree of acknowledged anger behind it

First, this one which doubts the employee's integrity to the point they feel it necessary to add "Best effort" to the AT WILL employment agreement.

5 Best Efforts. During Employee’s employment with Company, Employee will serve Company faithfully and to the best of Employee’s ability and will devote Employee’s full business and professional time, energy, and diligence to the performance of Employee’s job duties. Employee will comply with Company’s policies and practices as they exist from time to time. Employee will promptly communicate to Company all business, commercial and investment opportunities or offers presented to Employee, or of which Employee becomes aware, that relate to Company’s business. During Employee’s employment with Company, Employee will not, directly or indirectly, compete with Company, be employed by or provide services to any other person or entity, or engage in any other business activity, without prior written approval from Company. Employee may, however, engage in passive personal investment activities, so long as the activities do not compete with Company, violate Company policies or interfere with Employee’s job duties.

🚩 unless they approve it in writing first:
🚩 It blocks my ability to get paid for writing.
🚩 It blocks my ability to get paid for speaking.
🚩 It blocks my ability to continue development on my open source work.
🚩 It blocks my ability to develop new things or even use any new features that excite me.

All of this is specifically outside of work and on my own equipment.

Literally trying to micromanage everything I do, everything that attracted them to me.

And it's web dev - everything is indirectly related to everything.

And my OS work is directly related to some of their work.

I have seen barely similar clauses and I always get them removed or neutralized with amendments because of the nature of my OS efforts.

This is by far the most overreaching variant I have ever witnessed though.

The next one is INFURIATING to me and I didn't even bring it up in my first response.

11 Remedies. Employee acknowledges that violation of this Agreement would have a materially detrimental effect upon Company, the monetary loss from which would be difficult, if not impossible, to measure. If Employee breaches or threatens to breach any term of this Agreement, Company will be entitled as a matter of right to injunctive relief and reasonable attorneys’ fees, costs, and expenses associated with enforcing this Agreement, in addition to any other remedies available at law or equity. Employee waives any right Employee may have to a jury trial to determine Company’s right to recover attorneys’ fees and costs under this Agreement, or to determine the reasonableness of those attorneys’ fees and costs. Nothing in this Agreement will limit Company’s remedies under any applicable Uniform Trade Secrets Act or elsewhere.

(emphasis mine)

This clause is so one-sided and revolting it makes my skin crawl.

🚩 No verbiage of the prevailing party - even if they lose, they can legally assign all of their "reasonable" costs to me.

My first response.

I did my absolute best to give them a chance to agree to amendments that neutralize them enough to the point where I'm not worried about the rest becoming a problem.

I suspect I have already made mistakes here and I need genuine feedback on how you would handle this differently than me so I can learn how to fix my anger that comes later.

Note: The final page I reference here was where I listed my prior inventions, it had a single line available for entry.

The email:

Hello [redacted]!

I had a great weekend! I watched "I Swear" in a local theater which was incredibly touching and eye opening.

The document is agreeable. Since I have an extensive set of prior inventions, I need the final page of the document to be replaced with the 3 pages I've attached here.

In addition to the prior inventions list, I have also included the requested "prior written consent" for section 5 Best Effort that allows me to continue my current engagements outside of Company time/equipment without interference.

Please include your signature and date on the final lines of that written prior consent form before sending me the revision so I may sign the complete document that includes your approved written consent.

I am very excited to onboard and work with you all as well! :D

Thank you!
// Jane

The three pages of prior inventions was necessary to safeguard most of my work from "invention assignment" clauses I won't even talk about here.

Obviously I shouldn't have said it was agreeable when it's clearly not... It's literally dishonest which is itself a lack of integrity and authenticity, so I'm not totally blind to my faults here...

Whatever my karma is though, it's deeper, and I need someone's insight who has some perspective that I'm totally missing here.

My mindset is "if they agree to these 3 amendments, I don't need to talk about the problems, and we can move forward peacefully, together."

The 3 amendments:

Prior Written Consent for section 5, Best Effort:

Independent Speaking and Writing:
Employee may, utilizing their own time and personal equipment, engage in paid or unpaid writing, publishing, and speaking engagements. Permitted topics include web development
methodologies, cascading style sheets (CSS) architecture, advanced programming techniques, data encoding (including steganography and related concepts), information security, and any subjects related to the Intellectual Property disclosed as Prior Inventions in Attachment 1.

Individual prior written consent from the Company is only required for writing or speaking engagements that would directly disclose or utilize Company Confidential Information or specific Company Work Product.

Continuation of Prior Inventions:
Employee retains the sole right, title, and interest to continue the development, commercialization, and sale of the software, games, physics simulations, and systems disclosed in Attachment 1. Such continued development shall be conducted on Employee's own time and
utilizing personal equipment, and all resulting income shall remain the sole property of Employee.

Future Independent Development:
Furthermore, Employee may author, conceive, and commercialize new independent software, games, and applications during the term of employment without prior written consent, provided such development: (a) is conducted entirely on Employee's own time, (b) utilizes only personal equipment, and (c) does not directly relate to, or compete with, the Company's current business or specific Work Product.

They rejected amendment 3, which cripples #1 and makes #2 rocky enough that they might pull the hairpin trigger on their "Remedies" clause if I made something clever or added a new feature.

I did my best responding to them rejecting the 3rd amendment but it took more than a full day for them to respond and in that time the "Remedies" clause really ate at my mind.

My second response.

This is where my teeth show after they doubled down, which is probably too late into my karmic cycle to address it.

I had the presence of mind to direct it at their "legal team" instead of at the CEO I was talking to.

While I suspect some of you will think I've done okay, and it would be comforting to my ego to hear, I most need to hear from the people who get mad at me for what I do and say here. Please. Tell me your perspective. Tell me what you would have done. Tell me what you would have been feeling because what I feel is as close to rage as I get.

I am sick of this happening to me. And I know it's because something in me doesn't see what is probably obvious to someone reading this.

If you are watching this show and yelling at the screen, THIS IS YOUR CHANCE FOR THE SCREEN TO ACTUALLY LISTEN.

Note: This is incredibly uncomfortable for me to share so please do allow me some grace while you point out what's obvious to you.

I am not proud of it, I was holding back anger, it's obvious in the tone, it feels bad, and I don't know how to fix it.

[Redacted],

I had excellent conversations with everyone on the team and I am excited by the potential of the company in full and individually by each of the members I talked to.
I trust that we are already fully working together, shoulder to shoulder, looking at this employment agreement and working to fix it together.
Not just for me, not just for the image of your company, but for all future employees you attempt to hire.

Here is section 5 in full to continue discussion:

5 Best Efforts. [...]

This clause directly implies that your legal team doesn't have trust in my integrity to give my best effort - even though the agreement is at-will and you are free to terminate employment any moment you felt like I wasn't giving my best effort. Your legal team's mistrust and now insistence to micromanage what I do outside of work on my own equipment and restrict my multiple streams of income is wholly unacceptable.

I apologize for any perceived harshness but I will no longer move forward with the employment agreement unless it is removed in full.

Further, since your legal team's intentions have been magnified here, it forces a closer look at their egregious, one-sided, fear based, power hungry lack of integrity in section 11. Here it is in full for reference:

11 Remedies. [...]

Your perception of how I've labeled it is a direct reflection of the energy your legal team has inserted into your employment agreement.

Either remove this entirely as well or introduce some integrity by replacing the sentence beginnig with "If Employee breaches or threatens to breach..." with the following:

In any legal action or arbitration arising out of or related to this Agreement, the prevailing party shall be entitled to recover its reasonable attorneys' fees, costs, and expenses from the non-prevailing party, in addition to any other relief to which it may be entitled.

Additionally, the next sentence should be similarly bi-directional to the benefit of the prevailing party and not one-sided.

Happy to continue once these issues are fixed.

You want leaders, not captured pokemon.

// Jane

Their final response more than a day later.
Jane,

Thanks for the note, and for the time you spent speaking with the team. Appreciate your candor.

Want to briefly clarify that the agreement was not intended to suggest mistrust or micromanagement; it was our counsel’s effort to account for circumstances we do not expect, but still need to protect against in a standard employment context.

That said, I hear your concerns and respect your decision. Given where we are, it's best that we not move forward with the employment relationship.

I'm sorry we weren't able to get this across the line. I appreciated getting to know you and wish you the very best.

Best,
[Redacted]

My final response.
[Redacted],

No worries at all! I wish you all the best on your journey. What you're planning to build ([Redacted]) was really exciting to learn about - not just as a potential participant, but also as a guaranteed user eager to have access to such a tool!

Looking forward to seeing it!

Farewell! 👋 💚
// Jane

I need your perspective.

Especially the ones who think you see something obvious and feel like I'm daft for not realizing it.

THIS SUCKS but I cannot have this exact same nonsense happening to me over and over and over again.

Reality is a mirror, the answer is inward, but I have searched for years to fix this poison in me and cannot find it without whichever repressed, hidden part of me is represented in you. I know it's just a defense mechanism trying to protect me from something but I feel like a dog barking at its shadow oblivious to wtf it is.

I invite Open Contact 💚👽

Please keep the comments on-topic and reach out with anything else through my socials! Happy to help, love to see what you've created using my OS contributions.

PropJockey	CodePen	DEV Blog	GitHub

Mastodon	LinkedIn	X	Bluesky

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

PayPal	Ko-fi	Venmo

BTC	XRP	ETH

bc1qe...usgn9	rw2ci...nWKQg : 459777128	0x674...beF54

CSS - The single coolest API technique you can imagine.

Jane Ori — Thu, 07 May 2026 23:15:51 +0000

To simply call Kizu's Cyclic Space Toggles an upgrade to my Space Toggle technique is like calling apple computers an upgrade to apples. I'll prove it, slowly.

my Space Toggles are a checkbox
no matter how complex the downstream implications are, or how many properties the space toggle toggles, your input is a single binary on and off so there are only ever two states produced by a single toggle. (two space toggles is 4 states, three toggles is 8, 4 is 16, it's binary so it does get cooler fast! But... you're adding multiple input toggles to reach that, which means the API you expose tells your dev users to set multiple properties. And it's hard enough to tell a dev to set even a single CSS property without hiding it behind a class name. lol)

Kizu's invention, Cyclic Space Toggles, are much more.

Instead of a one-bit checkbox, you get an N-bit radio-button set, or a dropdown select. The dev user's single input option is now determining any number of alternative states internally, and each one of those is itself a traditional (inverted) Space Toggle.

To get an intuitive perspective on what that means, think of any dropdown - a language selector - and imagine the implications of replacing it with a single checkbox.

On the surface alone, that's a good measure of the difference I'll demonstrate.

Keep in mind for this read, for both of our toggles Global User Reach is ~95-97%. Cyclic Space Toggles are only slightly less reach because of a spec-"bug" I hit with early Space Toggle research and in July 2020 managed to convince them to address it, shipping the fix cross-browser shortly after.

That means nearly everyone can benefit from and use what is shown here today.

Inverted? Space Toggle? CSS APIs? Catch-me-up!

First, a standard space toggle is two states, initial and a space .

initial

initial is effectively an undefined, falsey state that on the surface allows the fallback of a var() to be used. --x: var(--falsey, fallback). When it's used in the value of another property, without a fallback, the property using it also becomes entirely falsey.

--falsey-too: var(--falsey);

This is one of several falsey-state triggers the spec calls IACVT (invalid at computed value time).

A var(--reference) that was never defined is initial by default. A variable set to or including the keyword initial is also, equally, falsey.

(space)

(space) is effectively an inert truthy state that blocks the fallback without changing the rest of the value it's used in.

--space: ;
--just-blue: var(--space) blue;

In spec terms today, it's known as <empty> and setting a var with no value at all (not even a space) became valid, whereas it used to be invalid without the space. You should always include a space for best browser compatibility.

Space Toggle

Now, combine them into a toggle:

--space-toggle: ;
--blue-or-falsey: var(--space-toggle) blue;
/* blue */

--space-toggle: initial;
--blue-or-falsey: var(--space-toggle) blue;
/* falsey */

Now you can conditionally set any number of other properties with it.

border: 1px solid var(--blue-or-falsey, red);
background: var(--blue-or-falsey, linear-gradient(black, cyan));

and even build more half-toggled references

--rem-or-falsey: var(--space-toggle) 1rem;
--white-or-falsey: var(--space-toggle) white;
font-size: var(--rem-or-falsey, 10px);
color: var(--white-or-falsey, red);

you can add multiple space toggles into a single property and if any of them are falsey, the whole thing is falsey, giving you the binary permutations.

Inverted?

The standard space toggle is perfect for logic gates and going as far as a full fledged actually-programatic, not hardcoded at all beyond saying where the turds are located, 100% CSS implementation of minesweeper.

When you expose a space toggle as an CSS API endpoint, however, the library/component/etc will typically have implemented their CSS with the space toggle defined as a space (truthy), making their developer users set it to initial as the API endpoint to flip it.

CSS implementation:

--use-my-feature: ;
--currently-disabled: var(--use-my-feature) none;
border-style: var(--currently-disabled, solid);
background: var(--currently-disabled, url("/img/cat.gif"));

CSS API docs:

Set `--use-my-feature` to `initial` for a great time.

The API tells them to turn off a space toggle to turn on a feature. Hence, inverted.

For a long time, the only way "flip" a space toggle programmatically was with an animation, so if a library implemented it as initial by default without that animation layer, they didn't have great ways to define a default state. For example:

Wonky CSS implementation:

--use-my-feature: initial;
--currently-disabled: var(--use-my-feature, none);

border-style: var(--currently-disabled);
/* ^ technically works because `solid` is the default property value when ` ` is attempted. */

background: var(--currently-disabled) url("/img/cat.gif");
/* ^ technically works because it's invalid as "none cat" until flipped to the valid (space) cat `  cat` */

CSS API docs:

Set `--use-my-feature` to ` ` for a great time with a wonky backstory.

Inversion history

When I first invented the space toggle, it was an intentional prayer for augmented-ui v2's CSS-based API (rather than HTML/class/attr based API) that got answered by some external divine ping telling me to read the specification over and over. Once I tuned into what God was trying to show me, a fire was lit and I ran with it.

Tangent, demo, showcase, tangent, demo showcase, spreading all over CSS world on social media and gaining a much wider audience than I was accustom to. So much fun. :)

Then I got pulled into another thrilling tangent and in July 2020, I created and released css-media-vars before finishing augmented-ui v2 because the combination of space-toggles and media queries was so good that I've used css-media-vars in every website I've done since then. (until its successor, breakpoint-system) The standard space-toggle was perfect for that use case because the user was defining both of the states and I was only shipping the toggles.

So for augmented-ui, when it came time to finalize the API in August 2020, (after realizing that it was much cleaner in my code if we start with it "on" to define our "off" state by default) I had to decide either stick with the messy code and tell my users to write an empty space to turn on the feature (to which they'd surely raise an eyebrow), or tell them to ...initialize it with "initial" which seemed legit. Easy choice except... there's another trade-off that's been resolved in the spec (as previously mentioned) but it was actually very problematic at the time to default it to initial in a library that's intended to be nested, so it required an entire separate "reset" layer in between nestings to avoid. A problem css-media-vars didn't directly have because it was on :root. I was hesitant to make that trade off, but decided to move forward with it and add a huge annoying Caveat Sand Storm section to the docs to explain it.

After all that time, when Lea Verou wrote about the space toggle in October 2020, she proposed them as inverted by default (without warning about the spec nesting problem D:). So... there may not be a consensus in the wider CSS loving audience on which variant is "inverted" because she had orders of magnitude more reach than I did at the time... buuut I maintain my perspective on which is which, and I've digressed!

Cyclic Space Toggles

Imagining cyclic space toggles as a dropdown is a great mental entry.

You can programmatically respond to each option individually in your CSS code, knowing if it's selected or not.

This is a Super Saiyan space toggle to our Saiyan space toggle, for several reasons.

All of these API --option vars are inverted space toggles (the kind we prefer in making APIs - our users make them initial while we use space to set defaults internally!), and they're all interlinked, only one option resolves to initial, the rest are space. You can add any number of --options you want, and they can all have completely different effects on the broader library internals.

A key difference here is that with the standard space toggle, the toggle itself is what the library/component author uses to control their internal state AND that same var is what our user modifies by setting it to initial (or to a space).

With cyclic vars, the API is our dev user setting the --select to one of our --option vars, internally we only use each of the --option vars because --select is always initial.

The dropdown analogy... is a veil.

One of the most heavily desired features CSS library authors have wanted since variables were introduced is the ability to make shorthand properties so our users can specify multiple related states in a single declaration.

WE WERE SO CLOSE TO GETTING THAT WITH CUSTOM FUNCTIONS, but in a gutting last moment change that was originally expected and planned to happen comma-separated var() values passed as arguments no longer spread by default like they do in standard functions rgb(var(--rgb)). So there's still no way implemented in any browser to dissect a custom property set to multiple values.

I'm not exaggerating even slightly, there are an enormous number of benefits to csvargument spreading in custom functions, removal of that, aside from being another irritating inconsistency in CSS, is the single biggest nerf I've ever witnessed to an incredible potential. Custom shorthands is a footnote on the tip of the iceberg of the potential in csvargument spreading. DEPRESSING.

BUT! We have a surprise here.

If space toggles were new-born Saiyans, cyclic space toggles are Super Saiyan God (Blue) Super Saiyans. The abilities ARE THAT MUCH MORE POWERFUL; I'M NOT KIDDING EVEN A LITTLE!

I don't even know if Kizu realizes all of this yet, but just wait for the details here. 🥵🤤

The dropdown... is actually a multi-select. The implications of this in CSS API development are awesome!

If your dev user sets:

--select: var(--option-1) var(--option-2);

then both options are initial and the rest are still space.

This is a custom boolean only shorthand API. It's a far cry from actual shorthands I'm begging for, but man it is AWESOME for now!

CSS library/component authors can specify any number of related boolean (space toggle) options and their dev users can flip all of them on in a single declaration.

Real world use case

I've already shipped a CSS library using this!

With breakpoint-system's fluidity option I allow users to opt-in to a subset of their globally defined breakpoints.

This causes the internals to skip the missing breakpoints as if they weren't part of the set for a specific design. Among other effects, the built in fluid design vars "breakpoint units" will now scale seamlessly from the lower breakpoint up to the next one included without resetting on the skipped one.

.promotion-page-layout {
  --bp-fluidity: var(--fluid-xxs)
    var(--fluid-sm)
    var(--fluid-lg);
}

This makes the whole system behave as if there were only those 3 breakpoints defined, while their global set remains untouched on other pages/layouts.

I've even used this multi-select idea in other features within the library that are currently undocumented!

Where else would we use it?

If a theming library had variants, you could provide an API like:

--use-theme: var(--blue-theme)
  var(--button-states)
  var(--text-emphasis)
  var(--override-preference-to-dark-mode)
;

And internally, because space toggles can be combined logically, the library would know how to emphasize the text in the blue theme on a button, which could be different from in a paragraph or in the yellow theme.

An avatar-building CSS library like CSS-Peeps could take its current CSS type-grinding API:

  --peep-head: long-straight;
  --peep-face: rage;
  --peep-body: striped-tee;

and instead do:

--peep: var(--head-long-straight)
 var(--face-rage)
 var(--body-striped-tee)
;

Tailwind could go from awful dom pollution repeated a thousand times

<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition px-4 py-2 text-sm md:px-8 md:py-4 md:text-lg">
  Click Me
</button>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition px-4 py-2 text-sm md:px-8 md:py-4 md:text-lg">
  Click Me Too
</button>

to a reusable CSS-based API

<button class="tailwind my-tw-button">
  Click Me
</button>
<button class="tailwind my-tw-button">
  Click Me Too
</button>

.my-tw-button {
  --tailwind: var(--bg-blue-600)
    var(--hover:bg-blue-700)
    var(--text-white)
    var(--font-bold)
    var(--rounded-lg)
    var(--transition)
    var(--px-4)
    var(--py-2)
    var(--text-sm)
    var(--md:px-8)
    var(--md:py-4)
    var(--md:text-lg)
  ;
}

Which is such a great idea, I might even implement it myself. Internally, inside the media queries where those responsive classes are defined, it instead would check if those specific space toggles were flipped.

I could probably port all of the base tailwind classes to this cyclic space toggle version in a single day.

Open Contact 👽

Please do reach out - I'd LOVE to hear what you think!

PropJockey	CodePen	DEV Blog	GitHub

Mastodon	LinkedIn	X	Bluesky

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

PayPal	Ko-fi	Venmo

BTC	XRP	ETH

bc1qe...usgn9	rw2ci...nWKQg : 459777128	0x674...beF54

100% CSS: repeat(--n, anything)

Jane Ori — Sat, 02 May 2026 19:33:36 +0000

Ages ago when CSS grids came with a repeat() function to simplify defining repetitive columns and rows, I was not alone in wishing for this function to be made generic and work in any context.

After seeing Wes Bos on BlueSky wishing for this exact concept, specifically for repeating segments in a shape() definition, I chimed in with my +1's on making repeat() generic across CSS

Without delay, @noamr opened an issue for the w3c csswg to get that ball rolling.

Moments later I was struck by that inspiration that seems to come from God/heaven/the universe/source, full of the excitement of "I can do that now!" and I began banging out a custom function in codepen, on my phone, to bring our hopes into the present instead of waiting for an official implementation.

Here is CSS --repeat() in full

@function --repeat(--n, --x) {
  --bit7: calc(round(down, var(--n) / 128));
  --val6: calc(var(--n) - var(--bit7) * 128);

  --bit6: calc(round(down, var(--val6) / 64));
  --val5: calc(var(--val6) - var(--bit6) * 64);

  --bit5: calc(round(down, var(--val5) / 32));
  --val4: calc(var(--val5) - var(--bit5) * 32);

  --bit4: calc(round(down, var(--val4) / 16));
  --val3: calc(var(--val4) - var(--bit4) * 16);

  --bit3: calc(round(down, var(--val3) / 8));
  --val2: calc(var(--val3) - var(--bit3) * 8);

  --bit2: calc(round(down, var(--val2) / 4));
  --val1: calc(var(--val2) - var(--bit2) * 4);

  --bit1: calc(round(down, var(--val1) / 2));
  --bit0: calc(var(--val1) - var(--bit1) * 2);

  --pow0: var(--x);
  --pow1: var(--pow0) var(--pow0);
  --pow2: var(--pow1) var(--pow1);
  --pow3: var(--pow2) var(--pow2);
  --pow4: var(--pow3) var(--pow3);
  --pow5: var(--pow4) var(--pow4);
  --pow6: var(--pow5) var(--pow5);
  --pow7: var(--pow6) var(--pow6);

  result: if(style(--bit0 = 1): var(--pow0); else: ;)
    if(style(--bit1 = 1): var(--pow1); else: ;)
    if(style(--bit2 = 1): var(--pow2); else: ;)
    if(style(--bit3 = 1): var(--pow3); else: ;)
    if(style(--bit4 = 1): var(--pow4); else: ;)
    if(style(--bit5 = 1): var(--pow5); else: ;)
    if(style(--bit6 = 1): var(--pow6); else: ;)
    if(style(--bit7 = 1): var(--pow7); else: ;);
}

And hands on:

How it works

Ultimately what any non-iterative repeat() function actually is just casting the number-of-times-to-repeat parameter into the unary number base using the 2nd parameter as the symbol representing "1".

--repeat(4,1);
/* 1111 */

The easiest way to convert to unary in CSS is to first convert it to binary because ...the most apt way to describe what it means to read a binary number in the context of a --repeat() function is to say:

For each bit:

if it's 1,
  add the corresponding power of two to the total value.

If it's 0,
  add 0 (or just do nothing) to the total value.

For example, what is 0b10111?

  1 x 2^4 (1 x 16)
+ 0 x 2^3 (0 x 8)
+ 1 x 2^2 (1 x 4)
+ 1 x 2^1 (1 x 2)
+ 1 x 2^0 (1 x 1)
------------------
23

So converting to unary from there becomes a sequence of known concatenations (additions) rather than an arbitrary length from a direct conversion. Ultimately, the corresponding binary bit represents a boolean flag - do we include this specific known set in the final concatenation or not?

(1 yes) 1111 1111 1111 1111
(0 nah) 1111 1111
(1 yes) 1111
(1 yes) 11
(1 yes) 1
---------------------------
(0b10111) 1111 1111 1111 1111  1111  11  1

(the spaces are for human readability and not actually part of unary)

Converting decimal to binary in CSS

Long long ago when Ana Tudor pointed out how she simulates mod() on twitter (which had been known to her even longer), I hadn't even begun playing with custom properties of the Houdini spec yet, but I realized how much potential was in that idea to do something impossible CSS - to add binary operators to the language. I released css-bin-bits a month later - it works exactly like the start of this repeat function:

We use rounded integer casting (which is the same as floor(n) or round(down, n, 1), after division of powers of two, in sequence, to bite off the most significant bit of an input number:

x = 23; # 0b10111

dec = x / 16; # 1.3125

0or1 = int-round-down-floor(dec) # 1

x - 0or1 * 16 = 5 # 0b00101

...

just do that until the last bit and you've converted your input from decimal into binary, with each bit in its own var.

You do have to assume a maximum value. The --repeat() function I provided supports 8 bits, 255 total repeats.
(css-bin-bits supports multiple 16 bit values)

In modern CSS, you implement this sequence exactly like this:

  --bit7: calc(round(down, var(--n) / 128));
  --val6: calc(var(--n) - var(--bit7) * 128);

  --bit6: calc(round(down, var(--val6) / 64));
  --val5: calc(var(--val6) - var(--bit6) * 64);

  --bit5: calc(round(down, var(--val5) / 32));
  --val4: calc(var(--val5) - var(--bit5) * 32);

  --bit4: calc(round(down, var(--val4) / 16));
  --val3: calc(var(--val4) - var(--bit4) * 16);

  --bit3: calc(round(down, var(--val3) / 8));
  --val2: calc(var(--val3) - var(--bit3) * 8);

  --bit2: calc(round(down, var(--val2) / 4));
  --val1: calc(var(--val2) - var(--bit2) * 4);

  --bit1: calc(round(down, var(--val1) / 2));
  --bit0: calc(var(--val1) - var(--bit1) * 2);

Start with the most significant bit supported, divide by that corresponding power of two, round that result down, if it's 1, subtract that power of two from --n and use that value for the next step... continue until the last bit.

Converting binary to unary in CSS

We mentioned earlier that it's concatenating known sets of the symbol back-to-back, based on powers of two.

So we must generate the list of known sets up to our maximum.

First, to repeat any CSS variable is straight forward:

  --x: 👽;
  --pow0: var(--x);
  --pow1: var(--pow0) var(--pow0);
  /* --pow1 = 👽 👽 */

That's 2^0 and 2^1 taken care of.

Since each power of 2 is double the previous, we just complete the set by doubling the previous until max:

  --pow2: var(--pow1) var(--pow1);
  --pow3: var(--pow2) var(--pow2);
  --pow4: var(--pow3) var(--pow3);
  --pow5: var(--pow4) var(--pow4);
  --pow6: var(--pow5) var(--pow5);
  --pow7: var(--pow6) var(--pow6);

and we inch towards the billion laughs attack.

CSS has protections for the billion laughs attack built in! During development of augmented-ui v2 in early 2020 after I invented the Space Toggle, I actually triggered Chrome's new protection limit and Anders (who is very often the one responsible for implementing incredibly awesome CSS features in Chrome) bumped up their low-ish limit to something very comfortable for all of CSS since we had legitimate use cases!

Now that we have our sets built out, we just need to check each of our bits with the new if(style()), output the corresponding --powX variable if it's 1, else an empty "space" in a concatenation block, and we're done!

  result: if(style(--bit0 = 1): var(--pow0); else: ;)
    if(style(--bit1 = 1): var(--pow1); else: ;)
    if(style(--bit2 = 1): var(--pow2); else: ;)
    if(style(--bit3 = 1): var(--pow3); else: ;)
    if(style(--bit4 = 1): var(--pow4); else: ;)
    if(style(--bit5 = 1): var(--pow5); else: ;)
    if(style(--bit6 = 1): var(--pow6); else: ;)
    if(style(--bit7 = 1): var(--pow7); else: ;);

if(style()) is such incredible work, once it's baseline, it makes the Space Toggle completely obsolete and already does far more and far cooler things than Space Toggle alone can do.

It's even properly short-circuited - so those --powX variables are not computed unless they are used. (Only the dependency tree for them is calculated, which is a simple straight line from --pow7 ... to --pow0 to --x)

Like always, my work feels inspired/guided, and comes with amazing synchronicities leading up to it. I had absolutely no idea this if(style( = )) syntax existed, and it doesn't work with if(style( : )) syntax. But the day prior, in a completely unrelated thread, I saw T. Afif post a link to an article teaching about it. When my assumed implementation didn't work using :, I got a tap on my brain, swapped the syntax to what I just learned about, and suddenly it worked! Thank you my friend!

--repeat() use cases and demos!

I've packaged it up for easy use anywhere just by importing it into your CSS file:

@import url("https://unpkg.com/@propjockey/doubledash.css@0.0.2/functions/repeat.css");

Use it in content

Use it with text-shadow

--repeat-join(--n, --join, --x)

The minimum value for --n is 1, we can pass a comma as a parameter by wrapping it in the do-not-spread curly braces operator as shown in the codepen.

We modify the original repeat function by subtracting 1 from --n before turning it into binary. We add --join to --x for --pow0, which then duplicates join everywhere before --x --n minus 1 times.

Then on the output we use --x directly once first, then conditionally concatenate all the --powX values like before.

Code on github here

Leave a star while you're there!

Use it with drop-shadow() in a filter

Use it to repeat line segments in shape()

Use it for any part of any property!

Need to repeat subsets your animation-* property list without using the default looping of the full list?
This solves it!

Need to repeat any subset of any parallel-array CSS properties?
This solves it!

Need to repeat steps in your conic-gradient() only a few times?
This solves it!

Need to repeat something not listed? Leave a comment!

Open Contact 👽

Please do reach out if you need help with any of this, have feature requests, or want to share what you've created!

PropJockey	CodePen	DEV Blog	GitHub

Mastodon	LinkedIn	X	Bluesky

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

PayPal	Ko-fi	Venmo

BTC	XRP	ETH

bc1qe...usgn9	rw2ci...nWKQg : 459777128	0x674...beF54

CSS Breakpoint Units - design with pixels and get fluid UX for free while automatically solving two of the oldest accessibility problems.

Jane Ori — Sat, 18 Apr 2026 20:16:19 +0000

I've created many NPM packages and invented many hacks focused on helping us all easily create beyond what's typically considered possible. It drives me.

This idea, I swear was given to me by higher powers and backed with so much excitement and perfectly sequenced synchronicities... Nobody would believe the details.

A new breakpoint-system

Using my tan(atan2()) scalar idea, I take a <length> like 100cqw and turn it into its pixel equivalent as a <number>.

For example, 1rem length becomes the number 16.

Writing up to 10 user-configurable <number> vars as pixel-based breakpoint locations, (maybe called sm, md, lg, etc)

I combine it all with abs(), clamp(), min(), max(), and calc() into registered <integer> results to create bit flags. 0 or 1.

Each flag represents the results of comparing those breakpoints to 100cqw as a number. Is the number less than the breakpoint? Greater than or equal to? In between two of them?

100cqw becomes the width to query against, the bit flag comparisons are the results of each query.

This opens up 3 API paths

calc() switches, @container style() queries, and if(style()) queries.

aspect-ratio: calc(
  var(--qlt-md) * (5 / 7) +
  var(--qin-md) * (4 / 3) +
  var(--qgte-lg) * (16 / 9)
);

.biggest-heading {
  @container style(--qlt-md: 1) {
    font-size: 20px;
  }
  @container style(--qin-md: 1) {
    font-size: 24px;
  }
  @container style(--qgte-lg: 1) {
    font-size: 28px;
  }
}

grid-template-areas: if(
  style(--qlt-md: 1): "a" "b" "c" "d" "e" "f";
  style(--qin-md: 1): "a a" "b c" "b d" "b e" "f e";
  style(--qgte-lg: 1): "a a a a" "b b c d" "b b f e";
);

calc() can do all of these at the same time using keyframes of an always-paused animation, setting all 3 properties in each keyframe.

You choose your API to choose your user reach. The library reach is 91% as of April 2026.

This is the solution to web development.

Designers win. Developers win. Accessibility wins. Your users win.

Even the consciousness of the idea itself wins because it becomes a source of ease for everyone involved.

Everything we've come to accept goes away as everything we've hoped for takes its place. With less effort.

Automatic accessibility win #1

100cqw does not include the scrollbars, media queries do. If a user's system accessibility is configured for scrollbars to always be on and maybe even set to a bigger size, historically you deliver your 1024 breakpoint design in an unknowable smaller available space.

For years engineers have been left to work around it without even reliably being able to detect it in CSS, let alone measure it or have the skill to adjust a designer's vision appropriately for every potential scenario.

With breakpoint-system, scrollbar gutters biting into a 1024 viewport just won't trip the 1024 breakpoint yet so there's plenty of room for the smaller design still.

and it gets so much better later because of Breakpoint Units.

Designer and developer wins that are such a relief, your first response may be to doubt it.

We use rem and its decimal fractions everywhere because it is the best solution to support our user's system font size increases for accessibility.

Just use pixels anyway.

We're supposed to use em for breakpoints for the same reason, but it's extremely rare to see it in practice.

No guilt. Keep using pixels.

Designers, devs, and project managers know the max length of our content, especially titles, and we already plan for that as a team.

Keep doing that.

Which of us is responsible for making designs not look terrible, squished, janky, cut-off, overflowing, or just broken when the user's system font size is 20px - a full 25% bigger?

Pixels don't do that, so let's all just use pixels.

We want a fluid design that scales with the view width, respects rem, is aware of the starting size, surrounding breakpoints, and ending size, and isn't a nightmare to re-calc() if designs change later.

Only the breakpoints you choose to include for designs of this specific layout/component exist as screen sizes.

Like designing physical playing cards. It's finally safe to ignore all other scenarios and in-between screen sizes.

So pixels are the best choice here too.

Pixels. :)

You never need to use rem again.

Breakpoint Units take care of all of this automatically in the background and they map 1:1 with your pixels.

Automatic accessibility win #2

For over a decade authors like Zell Liew have written about the importance of using em in your media query breakpoints yet we have largely collectively avoided it. There are two main reasons for this: pixels are easier to work with, and you need to make adjustments to every breakpoint design and every block of css inside every media query to allow the intended effect without causing weird max caps in the wrong scenarios, etc. Effectively it doubles the effort to be mindful in both design and dev.

Taking a step back for a moment.

When we tan(atan2()) 1rem into a number, and divide it by the expected 16, we get a scalar telling us how much the user has adjusted their system font size for accessibility.

20 / 16 = 1.25

We shift your pixel based breakpoints for this user by that amount.

This is equivalent to what using em in media query breakpoints does.

HOWEVER, when combined with this pixel philosophy of my breakpoint-system and Breakpoint Units, your user will never see text smaller than their preference, your designs won't break, they don't have to pinch-pan-zoom, nothing overflows.

Breakpoint Units automatically show the previous design, magnified beyond where it would have changed to a bigger design and flawlessly meets the requirement.

Their experience of your designs is exactly the same as any other user's experience, just bigger as if the website thought their tablet was a phone and scaled up to fill their screen.

Neither designers nor devs need to plan for this or make extra effort. It happens in the background automatica11y.

The smallest breakpoint has no smaller design to show.

Technically this is a caveat - but it requires no new effort.

The status quo for your smallest designs remains important:
Nearly everything is just stacked in a single column, nothing is vertically constrained, and break word is expected. In your smallest defined breakpoint range only, our typography breakpoint units directly express the user's magnification.

(Breakpoint Units never actually expand for the system font size outside of that smallest range. The math and UX just makes it seem like that's the reason they've grown to meet the requirement!)

Hands-on learning

@propjockey/breakpoint-system

You will never build a personal site or app again without using breakpoint-system as the foundation once you've experienced it. Neither will I.

It has solved so many problems, some over a decade old, for so many different groups of people at once, and packaged the API so well, that any full-feature design system built in the future will either use @propjockey/breakpoint-system directly as a foundation or it must ...replicate it to keep up.

Once your team has begun experiencing the zero friction handoffs in addition to all of the relief it delivers on the surface, you will agree with what I already know is true

I have created the new baseline expectation.

https://propjockey.breakpoint-system.com

https://github.com/propjockey/breakpoint-system

https://www.npmjs.com/package/@propjockey/breakpoint-system

Open Contact 👽

Please do reach out if you need help with any of this, have feature requests, or want to share what you've created!

PropJockey	CodePen	DEV Blog	GitHub

Mastodon	LinkedIn	X	Bluesky

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

PayPal	Ko-fi	Venmo

BTC	XRP	ETH

bc1qe...usgn9	rw2ci...nWKQg : 459777128	0x674...beF54

Customizing the MacOS Terminal with help from AI

Jane Ori — Fri, 06 Mar 2026 14:36:27 +0000

After spending a year traveling the world, I've acquired a new Macbook Air and had to set up my terminal interface again.

I do not normally enjoy this process but I loved it this time.
A continuous conversation with AI (Gemini specifically) lead to every random idea I had becoming realized in my .zshrc file.

There are some goodies in here I suspect you'll enjoy too.

Basic settings and imports

# # # # # # # # # # # # #
# import things we need #
# # # # # # # # # # # # #

# load 'live' hooks to execute things every call,
# load TAB completion
autoload -Uz add-zsh-hook compinit

# # # # # # # # # # # # #
# Enable Tab Completion #
# # # # # # # # # # # # #

# 1. Prevent duplicate entries in paths
typeset -U FPATH PATH
# 2. Add Homebrew to FPATH for even better tab completion (if it's not present already)
FPATH="/opt/homebrew/share/zsh/site-functions:${FPATH}"
# 3. Enable TAB completion
compinit

# # # # # # # # # # # # #
# Toggling Misc options #
# # # # # # # # # # # # #

# make ls pretty
export CLICOLOR=1

Basic aliases

# make the current terminal tab aware of things just installed or changed
alias reload='source ~/.zshrc'

# shortcut to go to my main projects folder
alias pj="cd ~/Desktop/PropJockey"

# Launch Gemini in a frameless chrome window
alias gemini="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app=https://gemini.google.com/app"

Whenever you modify the .zshrc file, which I did about a hundred times during this, you either have to open a new tab or run the command I've aliased with a simple "reload".

I wound up installing Gemini using Chrome's built in "Install as App" feature which had the added benefit of getting Gemini in my dock. 🤙 Sweet.

Lock Function

One of the first things I do when setting up a mac is turn sleep into hibernate. When I close the lid, I'm done for the night, no reason to sleep.

sudo pmset -a hibernatemode 25

Unfortunately, no matter how you've configured your lock screen settings, after only a minute idle on the lock screen, the mac gets bored and falls asleep, which in my case hibernates it and I have to sit through memory reloading from the harddrive to log back in.

The fix:

First create a shortcut using the Shortcuts app that ships with mac. It's great

Add a new shortcut, search for the lock screen action, add it, name it "LockMac", and you're ready for the script

# Lock the screen without sleeping the system and keep it awake until ctrl + c to quit
# alias lock='shortcuts run "LockMac" && caffeinate -i -d -t 3600'
# ^ great but this is better because I don't have to ctrl + c!
lock() {
  # Start caffeinate in the background, disown it, hide its output, and save its Process ID (PID)
  caffeinate -i -d -t 3600 &>/dev/null &!
  local caff_pid=$!

  shortcuts run "LockMac"

  # Give macOS a bit to register the locked state
  sleep 3

  # The Magic Loop: Poll the Mac's hardware registry. 
  # This specific string ONLY exists while the screen is actively locked.
  while ioreg -n Root -d1 | grep -q "CGSSessionScreenIsLocked"; do
    sleep 2
  done

  # You're back! Kill the caffeinate process silently
  kill $caff_pid 2>/dev/null

  # Print a Bifrost-styled welcome back message
  # print -P "%F{cyan}🛸 Welcome back. Sleep prevention disabled.%f"
}

I always have at least one terminal open so I just type lock and I'm off to the bathroom in my hostel. The mac stays wide awake the whole time so I can simply type my password and continue.

I use this often

Automatic Node & NPM version mismatch warning

One of the things any seasoned node developer has done time and time again is accidentally run their project with the wrong version, or worse, installed packages.

I wanted to prevent that as best as I could so I requested a function that alerts the node version and the version specified in .nvmrc or package.json with pass/fail indicators based on a comparison of the values.

# Checks current versions against .nvmrc or package.json requirements
nvi() {
  # 1. Ensure Node is actually installed
  if ! command -v node &> /dev/null; then
    print -P "%F{red}✘ Node.js is not installed or not in PATH.%f"
    return 1
  fi

  local current_node=$(node -v)
  local current_npm=$(npm -v)
  local req_node=""
  local req_npm=""

  # 2. Look for project requirements (.nvmrc takes priority for node)
  if [[ -f ".nvmrc" ]]; then
    req_node=$(cat .nvmrc | tr -d '\n' | tr -d '\r')
  fi

  # Fallback to package.json engines if it exists
  if [[ -f "package.json" ]]; then
    if [[ -z "$req_node" ]]; then
      # Safely extract engines.node using Node itself
      req_node=$(node -e "try { console.log(require('./package.json').engines.node || '') } catch(e) {}" 2>/dev/null)
    fi
    # Extract engines.npm
    req_npm=$(node -e "try { console.log(require('./package.json').engines.npm || '') } catch(e) {}" 2>/dev/null)
  fi

  # 3. Print Current Versions
  print -P "%F{magenta}Current Node:%f %F{cyan}${current_node}%f"
  print -P "%F{magenta}Current NPM:%f  %F{cyan}v${current_npm}%f"

  # 4. Evaluate and Print Requirements (if they exist)
  if [[ -n "$req_node" || -n "$req_npm" ]]; then
    echo ""
    print -P "%F{242}Project Requirements:%f"

    # Node Requirement Check
    if [[ -n "$req_node" ]]; then
      # Extract just the major version number for a reliable comparison
      local clean_current=$(echo "$current_node" | grep -oE '[0-9]+' | head -1)
      local clean_req=$(echo "$req_node" | grep -oE '[0-9]+' | head -1)

      if [[ "$clean_current" == "$clean_req" || "$current_node" == *"$req_node"* ]]; then
        print -P "%F{green}✔ Node:%f ${req_node}"
      else
        print -P "%F{red}✘ Node:%f ${req_node} (Mismatch detected)"
      fi
    fi

    # NPM Requirement Check
    if [[ -n "$req_npm" ]]; then
      local clean_current_npm=$(echo "$current_npm" | grep -oE '[0-9]+' | head -1)
      local clean_req_npm=$(echo "$req_npm" | grep -oE '[0-9]+' | head -1)

      if [[ "$clean_current_npm" == "$clean_req_npm" || "$current_npm" == *"$req_npm"* ]]; then
        print -P "%F{green}✔ NPM:%f  ${req_npm}"
      else
        print -P "%F{red}✘ NPM:%f  ${req_npm} (Mismatch detected)"
      fi
    fi
  fi
}

Just run nvi (Node Version Information) and we're golden...

...but we could be platinum if we called this automatically when you change directory into one with node expected!

# # # # # # # # # # # # #
# Run nvi automatically #
# # # # # # # # # # # # #

auto_check_node_env() {
  # Check if we are in a folder with Node files
  if [[ -f "package.json" || -f ".nvmrc" ]]; then
    echo "" # Add a blank line for visual breathing room
    nvi
  fi
}
# Attach it to the 'Change Directory' hook
add-zsh-hook chpwd auto_check_node_env

🤌 Great success.

Now every time I cd into the root of one of my node projects, it runs this command so I'll be shown without needing to remember to check. I stopped short of letting it nvm into the "right" version automatically hah

The Beautifully Colorful Path Highlighting and Git Info

First, I installed this color theme called Bifrost:

Then, for the current directory path, I wanted to grey out the roots of the path, highlight the project name by detecting if it's in a git repository, then highlight everything after the project name in a different color.

The end result is the most significant parts being easy to distinguish and effortlessly identified at a glance. I. Love. It.

There's all kinds of other stuff in here like basic git status indicators, the branch, separate counts of staged and unstaged files, etc.

The first part of the prompt is something that is slightly redundant indicating complete vs a failed reason, followed by a completion timestamp of the previous command AND the number of seconds the previous command took (if it was more than one).

A couple line breaks after that and the typical PROMPT shows up.

# # # # # # # # # # # # #
# Meta info of last cmd #
# # # # # # # # # # # # #

# 1. Capture the start time of a command
preexec() {
  timer=${timer:-$SECONDS}
}
# 2. Calculate the difference and format it
calculate_timer() {
  if [[ -n "$timer" ]]; then
    timer_show=$(($SECONDS - $timer))
    if [[ $timer_show -ge 1 ]]; then
        export ELAPSED="%F{yellow}${timer_show}s %f"
    else
        export ELAPSED=""
    fi
    unset timer
  else
    # THE FIX: If no command was run, clear the old time!
    export ELAPSED=""
  fi
}
add-zsh-hook precmd calculate_timer


# # # # # # # # # # # # #
# Best git aware prompt #
# # # # # # # # # # # # #

# look inside the variables every time the PROMPT is printed
setopt PROMPT_SUBST

# Fetch the Mac Display Name
DISPLAY_NAME=$(id -F)

# Define the raw escape codes for Dim and Reset
DIM=$'\e[2m'
RESET=$'\e[22m'
# %{${DIM}%}%F{yellow}%~%f%{${RESET}%}

set_surgical_path() {
  local exit_code=$? # capture exit code of previous command

  local repo_root
  # Get the absolute path to the repo root
  repo_root=$(git rev-parse --show-toplevel 2>/dev/null)
  local GIT_INFO="" # Start with a blank slate

  if [[ -n "$repo_root" ]]; then
    local full_path=$(pwd)

    # 1. Everything BEFORE the repo root
    # We take the directory of the repo_root (its parent)
    local parent_dir=$(dirname "$repo_root")
    local prefix="${parent_dir}/"
    prefix="${prefix/#$HOME/~}" # Clean up Home path

    # 2. The Repo folder itself
    local repo_name=$(basename "$repo_root")

    # 3. Everything AFTER the repo root
    # We remove the repo_root path from the full_path
    local suffix="${full_path#$repo_root}"

    # Assemble: Dim Prefix + Bright Repo + Dim Suffix
    DYNAMIC_PATH="%{${DIM}%}%F{white}${prefix}%f%{${RESET}%}"
    DYNAMIC_PATH+="%F{magenta}${repo_name}%f"
    DYNAMIC_PATH+="%F{blue}${suffix}%f"
    # Get the branch name, fallback to short hash if in detached HEAD
    local git_branch=$(git branch --show-current 2>/dev/null || git rev-parse --short HEAD 2>/dev/null)

    # Check for Action States (Merging / Rebasing)
    local git_action=""
    if [[ -f "$repo_root/.git/MERGE_HEAD" ]]; then
      git_action="%F{yellow}(merge)%f "
    elif [[ -d "$repo_root/.git/rebase-merge" || -d "$repo_root/.git/rebase-apply" ]]; then
      git_action="%F{yellow}(rebase)%f "
    fi

    # Check Clean/Dirty Status
    local git_state=""
    local git_status=$(git status --porcelain 2>/dev/null)

    if [[ -z "$git_status" ]]; then
      git_state="%F{green}✔%f" # Perfectly clean
    else
      # Check for staged changes (+) and unstaged/untracked files (*)# Count lines matching staged (column 1) and unstaged/untracked (column 2)
      local staged_count=$(echo "$git_status" | grep -c '^[AMRCD]')
      local unstaged_count=$(echo "$git_status" | grep -c '^.[MD?]')

      # If there are staged files, add the yellow count
      if [[ "$staged_count" -gt 0 ]]; then
        git_state+="%F{yellow}+${staged_count}%f"
      fi

      # If there are unstaged/untracked files, add the red count
      if [[ "$unstaged_count" -gt 0 ]]; then
        # Add a space for readability if we also have staged files (e.g., +2 *3)
        [[ -n "$git_state" ]] && git_state+=" "
        git_state+="%F{red}*${unstaged_count}%f"
      fi
    fi

    # Assemble the final Git string
    GIT_INFO=" on %F{cyan}${git_branch}%f ${git_action}${git_state}"
  else
    # Not in a repo: Show the whole path dimmed
    DYNAMIC_PATH="%{${DIM}%}%F{magenta}%~%f%{${RESET}%}"
  fi

  # Define the Prompt
  # %D{%H:%M:%S} = Hour:Minute:Second
  # %n = username
  # %~ = current directory (shortened)
  # %# = % for users, # for root (I replaced this with: %(!.#.$))
  # %(!.#.$) = # for root, $ for users
  # The %(?.X.Y) syntax means: If last exit code was 0, show X, else show Y ## %(?.%F{green}Completed.%F{red}Stopped)%f

  local nl=$'\n' # ${nl}
  local status_line=""
  if [[ $HISTCMD -ne $LAST_HISTCMD ]]; then
    local status_text=""

    # 2. The Exit Code Skyscraper
    case $exit_code in
      0) status_text="%F{green}Completed" ;;

      # The "Oh, I meant to do that" code
      130) status_text="%F{yellow}Stopped" ;; # SIGINT (Ctrl+C)

      # The "Wait, what just happened?" codes
      126) status_text="%F{magenta}Denied (126)" ;; # Permission denied / Not executable
      127) status_text="%F{magenta}Not Found (127)" ;; # Typo in command name

      # The "Violent Crash" codes
      137) status_text="%F{red}Killed / Out of Memory (137)" ;; # SIGKILL (Often the Out-Of-Memory killer)
      139) status_text="%F{red}Segfault (139)" ;; # SIGSEGV (Memory access violation)
      143) status_text="%F{yellow}Terminated (143)" ;; # SIGTERM (Graceful kill command)

      # The Catch-All for standard script errors
      *) status_text="%F{red}Exit code: ${exit_code}" ;;
    esac

    status_line="${nl}%{${DIM}%}${status_text}%f%{${RESET}%} %F{242}at %D{%H:%M:%S}%f ${ELAPSED}${nl}${nl}"
  fi
  LAST_HISTCMD=$HISTCMD

  local name_path_git="%F{magenta}${DISPLAY_NAME}%f in ${DYNAMIC_PATH}${GIT_INFO}"
  local input_indicator="${nl}%{${DIM}%}%F{yellow}%(!.#.$)%f%{${RESET}%}"

  PROMPT="${status_line}${name_path_git}${input_indicator} "
}

# 4. Tell the surgical path function to run before every prompt
add-zsh-hook precmd set_surgical_path

The final touch

Place a little 👽 Extra Terrestrial emoji in right prompt so I can scroll up the wall of text and find my inputs a little more easily.

# # # # # # # # # # # # #
# A little splash of me #
# # # # # # # # # # # # #

RPROMPT='👽'


# # # # # # # # # # # # #
# This was a triumph. ♫ #
# # # # # # # # # # # # #

# I'm making a note here: Huge success.


# # # # # # # # # # # # #
# Things added by tools #
# # # # # # # # # # # # #

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

Open Contact 👽

Please do reach out if you need help with any of this, have feature requests, or want to share what you've created!

PropJockey	CodePen	DEV Blog	GitHub

Mastodon	LinkedIn	X	Bluesky

My heart is open to receive abundance in all forms, flowing to me in many expected and unexpected ways.

PayPal	Ko-Fi	Venmo

BTC	XRP	ETH

bc1qe...usgn9	rw2ci...nWKQg : 459777128	0x674...beF54

100% CSS: Fetch and Exfiltrate 512 bits of Server-Generated Data Embedded in an Animated SVG

Jane Ori — Fri, 17 Jan 2025 21:41:08 +0000

This is a direct followup to to Getting 32 bit API Response Data in CSS

In CSS, 16 bits of response data, placed both in the intrinsic width and in the intrinsic height, was a huge improvement from not being able to get API response data at all (without JavaScript)...

However, in the days after I figured it out, my mind leaned in one direction:
It would be way more fun if it was 16 bits 32 times instead of just twice.

Packing 512 bits into an SVG for Exfiltration

I was meditating before bed and got struck with another inspired thought -

"What if it was possible for the image document itself to animate its own intrinsic size?"

The usual chain of realizations after an inspired thought each flashed with understanding on how it could be accomplished... I just needed to figure out if such an image type existed.

I grabbed my phone and and searched across all the animated image formats I knew of, seeing if any of them were capable of it. svg, webp, apng, gif, maybe weird video formats? I couldn't find any.

In the morning, something in me said to keep digging at SVG.

I tried embedded CSS, media queries, use'd defs, more use'd defs, diving into the numerous SVG animate docs, trying to trick them, and read up on other ideas and animation related properties - nothing could let me set height or width.

But that last link made me think...

...what about viewBox? I'd have some other hurdles to tackle but... Is that possible to animate?

vvv
IT IS!!
^^^

Sorting out the solution space

Now the problem is, if you don't set width and height attributes on the root svg element then try to use the svg as content on a pseudo, it renders 0px x 0px because it's a vector document and no longer has an intrinsic size.

So I searched and added preserveAspectRatio to it... Still 0x0... but then in my CSS, I pinned the width to 10px and let the preserved aspect ratio of the viewBox determine the height (which I can change with an animation embedded in the SVG) aaand... the html element containing it grew to the expected height.

:3

If there was only one frame, this took my original 32 bits and cut it in half; since only one dimension can be exfiltrated while the other is static.

BUT! Now, my 2nd dimension was time and the first is at the mercy of time, so there's more than enough data to be had.

How exciting!

I learned all I could about how to control the animation in SVGs and whipped up a server side script to generate my first animated SVG:

<?php
  header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate
      attributeName="viewBox"
      dur="' . $dur . 's"
      fill="freeze"
      begin="0.1s;"
      values="' . $values . '" 
      keytimes="' . $keytimes . '"
      repeatCount="indefinite"
      calcMode="discrete"
    />
  </svg>';
?>

(why php?! - because I already had a server I've been paying for for years, set up to run php out the gate.... And even though I've earned a wonderful living knowing JavaScript and node really well, sometimes it's fun to look up every single function, operator, and syntax to progress through something you know you can do without knowing specifics. lol)

Now let's fork my first CodePen from the previous article to see CSS responding to and changing size --vars as the SVG ticks along:

Confirmed! We can read the size change. Like in the previous article, in the end, it'll be using the view-timeline measurement technique instead this tan(atan2()) technique.

It cooks my cpu so we'll want to remove it from content when the exfiltration completes.

Conceptually, how to procedurally exfiltrate 1D + time

The demo above isn't very useful on its own. It reports a copy of the height whenever it's there but we need to save it... and what good is a bunch of 16 bit values if you don't know and can't trust the order?

I know I can accumulate values in CSS with the CPU Hack and mathematically determine which --var gets incoming values updated instead of just holding its previous value, so I won't worry about CSS specifically. How, in general, could we exfiltrate 1D over time?

Sentinel values to the rescue!

The size of the measuring area we use doesn't HAVE to be limited to 16 bits even if I want to limit the data packets themselves to 16 bits. So we can pack some sentinels in there too. css-api-fetch ships with the ability to handle values up to 99999, which is well above 65535 (the 16 bit ceiling).

So what do we need to know?

What problems might we run into?

If two values in our data are the same back-to-back, we need an interruption to know it's two distinct packets. I already decided we'll be aiming for 512 bits, so we need the SVG's animation to have a maximum of 32 16-bit data frames, with sentinel frames in between...

If the CPU is feeling heavy, the SVG animation may appear to skip discrete steps entirely. That means we need some way of always knowing what step we're on. So rather than a single "between data frames" sentinel, let's use the data index (1 based like CSS nth-* selectors) as the sentinel value, making it its own discrete step before the discrete step showing the data for that index.

Sentinel index -> data -> sentinel index -> data ...

That lets us know when it loops too, potentially when we hit sentinel 1.

But how do we know that it didn't skip to a different data frame and accidentally have us record it in the wrong slot?

We need to let it loop and keep going until it's right, and the best way to know if data is correct is a checksum! So we need another data frame, and a sentinel for that value.

Creating the Checksum Algorithm

I could use css-bin-bits to XOR all the data, but it's quite heavy and isn't needed anywhere else - let's settle on an alternative that's simple to do in CSS.

Mathematically, if you take a 16 bit value, divide it by 256 (floor to integer), and take the 16 bit value again modulo by 256, you get the high and low bytes. Add those 8 bit values together and you're at 9 bits. This feels like a reasonable checksum approach, let's circle back to this though.

We don't have to stay in 16 bit range to compute the checksum as long as the final checksum is 16 bits, so let's just sum all (up-to) 32 values.

We've got to be careful about incorrect storage writes due to skipped frames though, so let's add the even index values twice so there's some semblance of order.

That sum, 16 bit values, 32 times, plus an additional 16 times, is about 22 bits. Divide and module 11 bits on each side circling back to the earlier thought, then add those together, giving 12 bits as our checksum response.

Seems reasonable... It's not completely error proof but the SVG would have to be skipping several steps to mess it up in a way to MAYBE generate the same checksum now... In any case, let's also send back the data length and include that in the checksum as well, just by adding it as the last step of our checksum. The max data length (number of 16 bit values we want to handle) is only 32, so adding the length value to the 12 bits doesn't come anywhere near pushing us over 16 bits. Yay!

spoiler: this is what I did but CSS became lossy somewhere around 21 bits so I split it up and effectively did the same algorithm but in smaller chunks at a time. Server side uses the alg exactly as described.

Technically with the setup we've described, it doesn't matter what the order is in the animation as long as each sentinel tells you what index the next frame is supposed to be in the data.

One more thing, let's put the data length value first in the response and add a sentinel for that too (sentinel in the SVG animation before the value, as with the rest of the data).

That's 34 sentinels. The SVG viewBox height can't be 0 and CSS will benefit from allowing 0 to represent no data internally, so let's say we have 35 sentinels with 0 deliberately unused.

All data frames now get embedded in the SVG with 35 added to their value. Length and checksum data values ALSO get 35 added to the viewbox value. viewBox heights in the SVG Animation representing the sentinels will have values 0 to 34 (skipping 0) and each tell us exactly what the next frame in the SVG Animation represents.

CSS side, we just check if the raw measurement is greater than 34, it's data so subtract 35 from it, if it's less than 35, it's a sentinel.

Beginning to Exfiltrate the 512 bits with CSS

After I finished the PHP side to generate the SVG animation as detailed, I thought on specific ways to begin the CSS for this exfiltration process.

Here's the PHP code!

<?php
  header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate
      attributeName="viewBox"
      dur="' . $dur . 's"
      fill="freeze"
      begin="0.1s;"
      values="' . $values . '" 
      keytimes="' . $keytimes . '"
      repeatCount="indefinite"
      calcMode="discrete"
    />
  </svg>';
?>

There are a few ways to accomplish this in CSS and potentially many more coming with recent spec additions.

My first approach is the easiest conceptually - using a view-timeline for every piece of data and doing the same thing over and over. It was working but I groaned through my progress in displeasure with how gross it was. That'll be nearly 40 animations on :root if I continued.

So I went to sleep.

When I woke up, I laid there several moments looking out the window smiling with that just-woke-up-or-meditated buzzy feeling, then a firehose of thoughts rushed into my head. I rolled over, grabbed my notebook and the closest pen, sat up in bed, and started writing down the algorithm to exfiltrate it with just 6 CSS animations.

Literally solved on paper; This is EXACTLY how it's implemented.

I got up, got on my computer, ignored my previous work, and opened a new CodePen.

I set up the 4 html elements indicated among the chicken scratch there, then flooded the CSS panel with notes around 4 empty class selectors corresponding to them. It won't be on :root now but we can place anything that relies on it inside.

Not a single piece of functionality was added until the notes were copied from the paper and written in more specific detail in CodePen.

When I was done, I just read the notes and started implementing what they said, all the way to the final working result.

(I wrote "20" instead of "35" because I was going to test with 256 bits)

I'll dive into how it works. Because of view-timeline and timeline-scope, you can set data up to flow in in kind of a Klein Bottle shape if you can picture the surface animating and getting sucked into the "hole", back up to the narrow top to poor down over the surface again, gaining size and complexity through dom layers, and then loop back up through the blackhole into the higher consciousness (:root).

It's mostly vertically cyclic (rather than mostly horizontally cyclic or statically cyclic)

Exfiltrating the 512 bits with CSS

The notes we slightly tweaked and made more clear:

256 test -> 512 final

and I added a presentation node inside which is great because I can show the internals too as the algorithm executes.

but here is the final notes without all the implementation and presentation noise. This exactly describes how it all works.

It may not be in good form for an article to have this many details embedded externally but I will be breaking down each chunk to show how it's implemented.

Main Controller

At the top of this structure is 4 timeline values and their animations. So let's just plop those in.

The key piece of data flow that this enables, is it gives us the ability to lift data nested deep in the DOM back up to a host (timeline scope). It's not efficient, so we want to limit how often we do this. Each registered property and it's animation can vertically host a single piece of data. The data's value is determined by the inline or block view position of an element somewhere deep in the structure - we'll get to that part later.

(see the looping example previously embedded above for a clearer picture of the data flow)

The four pieces of data we're lifting here are:

--xfl-cpu-phase - this is a numeric value 0 to 4 that signals what phase of the CPU Hack is currently being executed. (a single 'frame' of the CPU Hack is 4 to 5 CSS render frames, one loop of the phases 'ticks' the CPU Hack) I will demonstrate this more specifically later in this article.

--xfl-raw-data - this hosts the height of the SVG wherever the SVG is in its animation cycle. Our raw data. As said before, if this value is less than 35, this discrete step of the SVG animation is a sentinel value. If it's greater than 34, this discrete step of the SVG animation is our 16 bit value + 35, which corresponds to what the previous sentinel indicated.

--xfl-data-type - this is the most recent sentinel value. This value does not change until the next sentinel is encountered. There is a 1 CSS frame delay from setting --xfl-raw-data to setting this value.

--xfl-data-value - this is the current data value after 35 was subtracted from the raw value, or 0 if we haven't reached this step of the sequence yet. There is a 1 CSS frame delay from setting --xfl-data-type to setting this value.

I've also preemptively wrapped svg-animation-current-state-reporter in a condition that only has functionality and only loads the animated SVG while the process is incomplete. (so all the internals are removed from memory and the heavy animated svg is removed from rendering when we finish)

The keyframe values go from a max value for that piece of data to 0. I'll explain later why these are backwards - look for the image of Uno Reverse cards.

CPU Exfiltrator

Next we set up the basic boilerplate for a CPU Hack

The CPU Hack boilerplate is just following a variable name pattern to set up capture and hoist animations.

If we have 1 integer --xfl\\1 that we want to cycle horizontally (over time), we register it and we set up capture and hoist animations like so:

@keyframes capture {
  0%, 100% {
    --xfl\\1-captured: var(--xfl\\1);
  }
}

@keyframes hoist {
  0%, 100% {
    --xfl\\1-hoist: var(--xfl\\1-captured, 0);
  }
}

Then complete the cyclic assignment on the .cpu-exfiltrator element where the two CPU animations are hosted. I'll do it for just one of the values for now:

  --xfl\\1: calc(
    var(--xfl\\1-hoist, 0) + 1
  );

In Chrome, they won't statically cycle (become the initial value) unless both animations are running at the same time. Which is a FANTASTIC side effect of what's likely an optimization of paused animations setting numeric properties.

Finally, since we're using a new automatic version of the CPU Hack (you don't have to :hover to cycle the phases like in the original hack), we wire in the --xfl-cpu-phase var from previous (hosted on the parent element here, so we can use style queries to respond to it) and control the play state of our animations.

We also output --cpu-next-phase which will later be lifted back to the top and set the next value for --xfl-cpu-phase using its view position and timeline scope.

I've added an additional phase to keep the CPU Hack paused until the SVG Animation measurement has successfully locked in the next --xfl-data-type

  @container style(--xfl-cpu-phase: 4) {
    animation-play-state: paused, paused;
    --cpu-next-phase: calc(
      min(1, var(--xfl-data-type)) * 4
    );
  }

(as it is now, data-type is still always 0 so once next phase is wired in, this will already be looping the CPU Hack. Once we have a data-type sentinel it won't loop until we've cleared it deliberately with the 0 sentinel)

Later, we'll also add the noted condition to prevent CPU phase 1 from starting until data is all in place. That will ensure that between data type (sentinel) being locked in and data value (raw - 35) being locked in, we want to leave the CPU Hack in its capture phase. So it's "ready to be ready" as Abraham Hicks might say.

I'll go ahead and register all the 32 values plus checksum and length that we expect the SVG Animation to report.

Since registration of --xfl\\1 to --xfl\\32 is a big block and the CPU animations are just boilerplate too, I'll move all those to the bottom of the hack setup to be ignored moving forward.

Automatic CPU Hack

This wires the next cpu phase up to the --xfl-cpu-phase value

.cpu-phase-cycle-request0r {
  display: block;
  position: absolute;
  overflow: hidden;
  background: hotpink;
  width: 100px;
  height: 10px;
  bottom: 100vh;
  &::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: calc(25px * var(--cpu-next-phase));
    background: lime;
    view-timeline: --xfl-cpu-phase inline;
  }
}

There's some CSS boilerplate here to make the element be a scroll container and put it off screen. The important part is:

view-timeline: --xfl-cpu-phase inline;

which says where the right edge of this pseudo element falls in its 100px wide parent, wire it up as a "progress" from the left to our animation that moves from 0 to 4... So 25px is 25% complete, which maps to 1 when 25% is between 0 and 4.

image sourced from a google search leading to twitter

TECHNICALLY the animation is 4 to 0 and TECHNICALLY it's measuring from the right edge of the pseudo as view progress towards the right. So 25px wide pseudo is 75% from the right of its 100px wide scroll parent and maps to a value of 1 when 75% is between 4 and 0.

It's easier to understand if you don't cognitively process the reverse reverse math and just accept the end result is a simple progress 0 to 4 because the max value in the animation is 4 (again ignoring that the animation starts at 4).

Let's also write the ready state that holds the CPU in phase 0 until the data is ready. The note is on line 64 of our demos:

Data ready = data-type > 0 && raw-frame-data - 35 === data-value

  --xfl-data-is-ready: calc(
    min(1, var(--xfl-data-type, 0)) *
    (1 - min(1, max(
      (var(--xfl-raw-data, 0) - 35) - var(--xfl-data-value, 0),
      var(--xfl-data-value, 0) - (var(--xfl-raw-data, 0) - 35)
    )))
  );
  @container style(--xfl-cpu-phase: 0) {
    animation-play-state: running, paused;
    --cpu-next-phase: var(--xfl-data-is-ready);
  }

Wait, === in CSS?

These are quite outdated now and I'd do them differently today, written before clamp() was baseline, but I always open this old codepen to mindlessly copy paste numeric comparators when I need them. It'd be a good article to update these and explain them but here you go in the meantime: https://codepen.io/propjockey/pen/YzZMNaz

Reading the SVG Animation

This is initially VERY similar to the CPU Exfiltrator section because it's the same technique, measuring and moving data from here up the DOM to where it's hosted (scope).

We'll be measuring and reporting the last 3 values for the base element we set up initially.

On ::before we'll render the SVG and set --xfl-raw-data using block view position which is the measurement of the animated SVG's height. (remember, we'll pin the width to 10px)

On ::after we'll set --xfl-data-type inline (sentinel values 0 to 34) and --xfl-data-value block (16 bit values).

The parent will need to be wide enough to render the SVG (at least 10px) and accurately provide measurements for the sentinel values (0 to 34).

The parent will also need to be tall enough to measure 16 bit values (+ 35). Since we set a max value in the first step of 100k, we'll just use that even though it's about 30% bigger than we need.

And move it off screen to the top and left so it doesn't cause scrollbars.

Therefore,

.svg-animation-current-state-reporter

gets

  position: absolute;
  background: rgba(255, 0, 0, 0.5);
  width: 34px;
  /* --xfl-data-type keyframes are 34 to 0 b/c max data-type = 34 */
  height: calc(var(--xfl-max) * 1px);
  bottom: calc(var(--xfl-max) * 1px + 100vh);
  left: calc(-100vw - 100px);
  overflow: hidden;
  font-size: 0px!important;
  line-height: 0px!important;
  margin: 0px;
  padding: 0px;

and before becomes

    &::before {
      content: url('http://css-api.propjockey.io/api.svg.php?');
      position: absolute;
      background: lime;
      left: 0px;
      top: 0px;
      width: 10px!important;
      --height: 2135px;
      font-size: 0px!important;
      line-height: 0px!important;
      view-timeline: --xfl-raw-data block;
    }

and ::after gets

  position: absolute;
  width: 1px;
  height: 1px;
  left: calc(
    var(--TODO_SENTINEL_VALUE, 0) * 1px - 1px
  );
  top: calc(
    var(--TODO_DATA_VALUE, 0) * 1px - 1px
  );
  background: black;
  view-timeline: --xfl-data-type inline, --xfl-data-value block;

Essentially the storage medium here for these after values is the view position of a 1px square pseudo against its parent scroll container. We subtract 1px in the left and top calcs because the pseudo itself is 1x1 and we want it to report 0 when the corresponding value is 0.

This is all very similar to what was done previously.

There are several complexities to how we calculate what these values should be, as the note indicates:

/* there's 4 stages here
// 1) cpu tells us to reset to 0s
// 2) cpu is in phase 0 (capture running) and stays until these stages finish
//   a. if svg animation frame (based on raw) is type, set type else use prev
//   3. if svg animation frame (based on raw) is data, set data else use prev
// 4) CPU is executing, our job is to hold prev values and ignore the SVG ani
*/

The key to understanding how to solve this is that any comparator value is set to either 0 or 1. 1 if it's true, 0 if it's false. Then multiply it by some value. If it's false, the result stays 0, otherwise it becomes whatever the value is.

Ana Tudor goes into great depth of how this idea works here

Then, if we do that comparison twice, with a different or opposite comparison for the second value, and add them together (Ensuring at most one of the comparators is 1) then the addition of two of them is just saying "else if".

if not ready * use the old value + else
if is ready * use this new value

This is how we hold onto the sentinel value through the duration of the SVG Animation's discrete step for the value after the type has already been reported.

The CSS code implementing it begins on line 191 here, just above the big block of --xfl\\... property registrations we put towards the bottom
@property --xfl\\1 { syntax: "<integer>"; initial-value: 0; inherits: true; }
...
and it contains additional notes:

Setting specific CSS --var values (addressed assignments)

The logic we just touched on is exactly the same concept we use for all of the --xfl\\1, 2, 32 values.

  --xfl-set\\1: calc(
    (1 - min(1, max(
      1 - var(--xfl-data-type, 0),
      var(--xfl-data-type, 0) - 1
    ))) * var(--xfl-data-is-ready)
  );
  --xfl\\1: calc(
    var(--xfl-set\\1) * var(--xfl-data-value, 0) +
    (1 - var(--xfl-set\\1)) * var(--xfl\\1-hoist, 0)
  );

You read --xfl-set\\1 as if --xfl-data-type gte 1 use --xfl-data-is-ready with an implied else 0

--xfl-data-is-ready was established earlier as a flag holding us in phase 0 until it's time to flip to phase 1.

That means our condition is && logic. Both flags must be 1 to pass.

Then you continue to read --xfl\\1 as if --xfl-set\\1 use --xfl-data-value (the current SVG Animation value) else if NOT --xfl-set\\1 use --xfl\\1-hoist (the previous value the CPU hack was holding for --xfl\1)

This is highly repetitive, and describes almost the entirety of the rest of this exfiltration.

The final steps are running basic calc() and mod() math to build the checksum as described earlier, then adding if the computed checksum === the checksum embedded in the SVG Animation to the CPU Hack so we know when it's complete. All more of the same.

So now it's time. :)

Presenting: The CSS Animated SVG Exfiltration Hack

Because I wanted to show each and every piece of this hack one value per element, the presentation for this is obnoxiously heavy. Over 2000 lines of HTML and over 400 lines of CSS. Plus I'm using css-bin-bits to convert each register to binary, etc.

(Click rerun in the bottom right of the codepen frame to see it happen in real time!)

No JavaScript!

Open Contact 👽

Please do reach out if you think this is neat and wish to learn more! Always happy to answer questions.

PropJockey.io	CodePen	DEV Blog	GitHub	Mastodon

🦋@JaneOri.PropJockey.io

𝕏@Jane0ri

100% CSS:
's border knockout behavior for any element !

Jane Ori — Wed, 08 Jan 2025 06:31:03 +0000

Legend has it, there will come a day when the beautiful fieldset border knockout effect will be possible with any html element.

And I have great news: In Chrome, that day is today!

Fieldset? Legend?

If you're unfamiliar, here's the border knockout effect on a fieldset with a legend:

fieldset legend examples in a slightly modified screenshot from VanillaHTML

The width of the legend (title) is clipping a hole in the border of the fieldset automatically.

While technically possible to just use <fieldset> and <legend> anywhere, it's generally not recommended to use a <fieldset> outside of a <form> and without any <input> elements inside of it, as the primary purpose of a fieldset is to semantically group related form inputs. Using it in unrelated contexts goes against its intended meaning and can negatively impact accessibility for screen readers.

Fieldset border legend knockout behavior anywhere

This is not trivial to accomplish so I hid every bit of the complexity that I could to make it as close to trivial to replicate:

@import the fieldset-legend utility in your css.
Add the fieldset-legend class to the wrapper
Set the --fl-left property to any <length-percentage> value (even negative values if you wish)

And the library will position the :first-child so it's vertically centered with the top of the element and knock out the stuff behind it!

To create a gap around the title, add padding to the :first-child however you want to.

The biggest gotcha here is you can't put plain text nodes directly in the fieldset-legend wrapper, text has to be nested inside of their own elements.

Also, technically fieldset's border knockout doesn't sink to the bottom of the legend element and clip the background too, like it does above.

If you prefer the knockout to only sink through the border, you can provide an additional <length> property, --fl-sink and set it equal to your border width:

Does it do anything else?

It does!

`--fl-left` alternatives

Instead of --fl-left, you could instead use --fl-center.
If you set --fl-center to 0px, the title will be centered horizontally along the top edge.
If you set it to -10px, it will be offset to the left of center by 10px.
Set it to 15px and it will shift right of center by 15px.

Instead of --fl-left or --fl-center, you could also use --fl-right with the expected behavior.

All 3 of these are <length-percentage> and can be positive, 0px, or negative.

`--fl-top` option

By default, the title element is vertically centered with the top edge of the outer element. Setting --fl-top to a negative <length> lifts it, and to a positive length drops it.

By default, the bottom edge of the title is how far down the knockout sinks into the element, so remember you can control that as well with --fl-sink described previously!

The fieldset-legend container also automatically applies a margin-top to cover the height of the title poking above the element. The rule setting this has 0 specificity so it can easily be overwritten if you prefer another value.

Title as `:first-child` alternatives

It may be important for you to place other elements, such as screenreader-only page jumps, prior to the title inside the fieldset-legend container.

Place a class fieldset-legend-title on any ONE of the direct descendants of your fieldset-legend element and the library will lift that element to the same desired position at the top, leaving :first-child alone.

`fieldset-legend` uses the `::before` pseudo

You can make it use the ::after pseudo instead, just change the class name from fieldset-legend to fieldset-legend-after

`fieldset-legend` no pseudo?

This is advanced usage but...

You can inset: 0px; an element inside the wrapper, customize it however you want, and use fieldset-legend-custom instead of fieldset-legend or fieldset-legend-after.

This drops all of the library's clipping and gives you a custom mask to use anywhere inside of the fieldset-legend-custom element.

For example, if you wanted to use this with your favorite sci-fi shaping library, augmented-ui:

Fallback behavior

The limiting feature support required to use this utility is timeline-scope.

Container style queries are also required.

This is what the first demo in this article looks like in non-Chrome browsers:

It applies the same mechanical styling to minimize differences, such as a non-static position and isolation: isolate; but most notably, it moves the title back inline and does two !important things:

The title color becomes currentColor - the content behind the title switches from the body to the inside of your fieldset-legend container, which may have a very different background. Using currentColor ensures the content is readable because the rest of the content in your not-a-fieldset is likely already set appropriately.
Along the same lines, I can't know if your title element already had its own background (though if it did, you don't need this utility to position it over the border) so the background is forced to transparent, ensuring currentColor on the fieldset-legend's background, which in most cases will already be readable.

To determine specific fallback behavior, you can set
--fl-fallback-title-color and --fl-fallback-title-background which will be used in place of currentColor or transparent in the event it is rendered somewhere without support.

And this is what the custom demo above looks like in browsers that don't support fieldset-legend:

Further fallback support

If you know how to use my old Space Toggle technique, the library also provides:

--fl-supported, which will be a space when supported and initial when not supported

and

--fl-not-supported, which is the opposite.

Open Contact 👽

Please do reach out if you need help with any of this, have feature requests, or want to share what you've created!

PropJockey.io	CodePen	DEV Blog	GitHub	Mastodon

🦋@JaneOri.PropJockey.io

𝕏@Jane0ri

GETting your IP Address with CSS - and other 32 bit API responses - without JavaScript!

Jane Ori — Mon, 06 Jan 2025 18:30:13 +0000

Just over a week ago while scrolling YouTube shorts after work on a Friday, looking for something to want, this 35 second video stopped me and took 100% of my attention

After one and a half playthroughs, I paused it, tilted my head back and stared off into space as ideas rushed into my mind.

"I could make Chess in CSS with the CPU Hack."

"Could I connect it to that tablebase without JS?"

"The only way CSS can reach out to a server is with background ima---!!!

It can also use url() as content on a pseudo element, which can resize the parent, then inset: 0px an absolute position container inside of it and I can measure that with tan(atan2()) aaand that's my GET request's response data...

If the element resizes based on that content, it would be useful to have it off screen to avoid causing scrollbars - plus better DX for anyone using would if it didn't need a weird one-off setup that you had to build inside of... So how do I get the data out --

I've known how to lift data to :root since the CPU Hack since it already does that on a much smaller scale but never had a reason to try..."

Then I paused as my eyes darted around without any awareness of my physical surroundings, looking for edge cases among the components I've assembled - "What can't be done here?"

...

"I'd have to @container style(--x: N) wrap my urls so gamestate can choose what ones to use but I'd only have a hardcoded list of possible endpoints until we get url() param()...
AH WAIT! I could also generate the necessary request url and prompt the player to SMEAR it into the page, shrouded as the UI to confirm their move..."

I leaned back and splayed my fingers and palms, panning my eyes across the room slowly as excitement built inside me.

"16 bits on the width and 16 bits on the height is huge but well within possible..."

"I think that's it! I can do it!"

The rest of this plot exposition isn't directly relevant, but I'm enjoying the moment so I'll leave the writing here for anyone reading along

So I started building my chess board in CodePen, where all my ideas start their journey into realization.

"I guess it's time to learn Chess so I know how to build the API request and to determine if ~32 bits was enough response data for it to communicate the CPU move..."

I played Chess briefly back in my teenage IRC-loving, game hacking days and quit at the end of a losing streak with hysterical laughter when I devised a way to cheat every move of a match and still lost. (I made my friend go first then used the move he wrote in IRC against the "expert" computer player in the chess game I downloaded, then communicated to him what the CPU did as my move.)

I was COMPLETELY oblivious to how much of Chess I knew absolutely nothing about.

I searched for existing APIs I could just wrap, assuming I'll generate an image on my server use the height/width as the response data. I quickly found chess-api.com which can respond with a next move given "FEN" as input.

I learned FEN, which lead to even more discovery of how much I didn't know about Chess. I knew I could generate the SMEAR Hack to build the gamestate in FEN format, and most importantly, I measured that I could indeed bitpack the important response data move: "b7b8q" into 32 bits. (It's an 8x8 board and I know where everything is, not much fundamentally has to be provided in the response.)

Now, I know with more certainty I can program Chess against a CPU Player in 100% CSS.

I also knew at that moment, I should definitely rewatch The Queen's Gambit because I absolutely loved it and can't wait to pick up on new details.

The universe is talking to me and I'm putting the excitement into action to keep the loop flowing.

Time to test the CSS API URL GET ALL CAPS TRAIN idea and see if it works.

Demoing the basics

First, establish appropriate background noise for this endeavor, The Queen's Gambit.

Next, confirm measuring an image.

Easy enough! Just make sure all the content inside stays absolute so it doesn't change the size of the container holding the image.

Throw in a test for changing what URL we GET...

Proof of concept confirmed, next leg of this journey was lifting the response data to :root so I can make all the setup invisible and at least 65535px off screen to the top and left.

I knew this was going to be heavy, esoteric CSS+HTML and I make things that help people make things, so right from the start, I built this with the intention of making it an easy-to-use library.

In version 1, Copy plop some specific (bulky) HTML in your page with a handful of options built in to make the requests and do the :root lift for you.

Import the library and specify the API endpoint from your CSS,

@import url(https://unpkg.com/css-api-fetch@1/api-fetch.css);

@container style(--api-id: 1) {
  .api-fetch { --api-fetch: url(https://css-api.propjockey.io/ip-address.php); }
}

And the data will be on :root for the rest of your app once it's ready.

But it gets better, fast!

First Public Demonstration, Chrome Only, :root

GETting a user's IP Address with CSS.

I'm not going to go into super specific implementation details in this post of how exactly that CSS+HTML lifts the data to :root in that original public demo because a couple of CSS loving friends pointed me in a much easier direction I hadn't learned about!

but I will put this quick summary here for anyone interested

:root:has(.specific-element:hover) { ..state... }

If the specific-element descendant knows it's :hover, it can change to put a different element on top of where it currently is which causes the next element to be hovered, then :root:has(...:hover) changes its state based on that element too, in a loop.

The CPU Hack lets us accumulate the state as different elements are :hover'd.

So if the data we want to lift is '512', we can sequence 'thousands', 'hundreds', 'tens', and 'ones', telling the child to present an element 0 to 9 representing the value it's holding in that position.

.api-transfer-value-0:hover, ...5:hover, 1, 2.

Child knows what numeric position we're asking for because state cascades, :has() lifts the value because the child presented the corresponding digit for us to :hover and read at :root.

The CPU Hack accumulates it into one value then tells the child to stop reporting after the ones position is saved.

The HTML in the demo linked above reveals a bit of what setup is required for that. The CSS code for it is here in v1 of css-api-fetch.

Second Public Demonstration - Cross Browser, no :root

The only difference here is that I don't lift it to :root and instead leave it in the container, DX requires you to wrap all of your content that needs access to the data in an absolutely positioned element inside of the hack's context.

In my original exposition I mentioned that I wanted to avoid this scenario, but it's cross browser and it has its uses too. Plus, it's not like you can't build your whole app inside the specific html setup.

You can see in the HTML tab just how much less effort is involved in there.

Just 4 specific nested html elements are required in the cross-browser version, then you build anything you want using your response data inside of that.

Third Public Demonstration - Chrome Only, :root, trivial

Kizu mentioned it might be possible to simplify so I went digging, then after not quite putting the dots together, T. Afif showed a possible way in that direction, I learned a ton from that article but was unsatisfied with the division and precision loss so I dove into the articles and amazing tools Bramus made and came up with a variation that satisfied my use cases.

As you can see in the CodePen's HTML the setup is so simple it's literally one line of HTML to fetch and your response data is on :root. In this case I used a second element to present the data too. AMAZING!

I packaged it up for a v3 release making all the handoff mindless, putting the measuring stuff off screen already set up since it's not important.

I posted about the release, then T. Afif linked a different article demonstrating a similar view-timeline configuration for measuring that I worked out for this - without the division! :)

I highly recommend reading all the work I've linked above, there's some exciting, talented CSS people sharing their ideas -- and knowing something is possible opens entire worlds of cool ideas!

What is `css-api-fetch` doing?

Importing css-api-fetch and adding a single line of html, you can fairly easily do API requests in your CSS and not have to consider the complexity of view-timeline yourself. I made it so you don't have to think about it, but for the curious, here's the concept and setup the library uses internally:

Two animations setting a --ints from the max values your API will respond with to 0
host (scope) the animations and their timelines on :root
create a measuring element sized to the max values your API will respond with, with non-static position, overflow hidden, etc to make it suitable for reading view/scroll positions.
Throw it absolute offscreen to the top left so it doesn't cause scrollbars on your app.
load the image url() inside of a nested size container's pseudo element's content and set view-timelines for both inline and block corresponding to the animations in step 1&2.
The animations now report the size of the image to the whole document

Here's a demonstration of all 6 of the steps above, step 4 is commented out so you can see it. We'll use Lorem Picsum to emulate specific height & width api responses easily.

That's the fundamentals but the library sets up 4 separate API request/responses that you can use simultaneously without knowing how it works.

What's `css-bin-bits`?

All 3 of the public releases have demonstrations that use a library I made ages ago, css-bin-bits that makes it super easy to do bitwise operations on 16 bit integers in 100% CSS and you don't usually have to write any calc() yourself - the library takes care of it all. For the 32 bit IP Address, using css-bin-bits I was able to limit the size of the image to exactly 16 bits on a single dimension.

Without bitpacking the 32 bit IP Address into two 16 bit values, T. Afif demonstrates you could use a 255255px by 255255px measuring container and split the response data out with decimal math - skipping css-bin-bits. css-api-fetch supports you setting any maximum, shipping with 99999 as the default maximum, much more than 16 bits (65535), but not quite 255255 lol.

How do you set up an API to respond with data in the image?

The lightest and most trivial way to pack data into the width and height of an image is to make the server respond with a bare-minimum SVG.

Here's how the IP address is packed and served in PHP, for example:

<?php
  header('Content-type: image/svg+xml');

  $adr = $_SERVER['REMOTE_ADDR'] ?: '255.255.255.255';
  $hex = str_pad(implode(array_map('dechex', explode('.', preg_replace('/[^\d\.]/', '', $adr), 4))), 8, '0', STR_PAD_LEFT);
  /* rx returns first 4 hex chars, removing up to 3 leading 0's */
  $width = hexdec(preg_replace('/(^0{0,3})|(.{4}$)/', '', $hex) ?: '0');
  /* rx returns the last 4 hex chars, removing up to 3 leading 0's */
  $height = hexdec(preg_replace('/^.{4}0{0,3}/', '', $hex) ?: '0');

  echo '<svg xmlns="http://www.w3.org/2000/svg" width="' . $width . 'px" height="' . $height . 'px"></svg>';
?>

The API requests you set up could easily accomplish a handful of low hanging fruit that CSS can't otherwise do without JavaScript

RNG
Current Time
TimeZone
Country Code
Operating System
or connection to any other api if you wrap it - such as chess-api

What comes next?

Chess?!

Not yet! Plus, Lilian has already made Chess in CSS!

// Detect dark theme var iframe = document.getElementById('tweet-1838643820428165565-495'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1838643820428165565&theme=dark" }

I'm not sure how it works or if there's a publicly available demo, but I'm sure she'd answer any questions! :)

For now, my excitement is focused elsewhere......

I want more than 32 bits per request.

I want 512 bits per request.

No JavaScript.

Open Contact 👽

Please do reach out if you need help with any of this, have feature requests, want to share what you've created, or wish to learn more.

PropJockey.io	CodePen	DEV Blog	GitHub	Mastodon

🦋@JaneOri.PropJockey.io

𝕏@Jane0ri

CSS Type Casting to Numeric: tan(atan2()) Scalars

Jane Ori — Mon, 09 Oct 2023 05:48:34 +0000

In current browser implementations of CSS, you cannot divide by length types; calc(100vw / 5px) does not work. It will eventually because it's in the spec, and with enough support it may happen soon. But for now, no way to produce scalars based on size.

With, technically, one up-and-coming exception, atan2().

atan2() accepts 2 params, effectively the slope, rise over run, y divided by x, atan2(height, width) and returns the angle from the bottom of the slope looking to the top.

Then, did you know? tan(atan2(height, width)) is the scalar <number> between the two dimensions.

No, I did not know that; is that true?

That's right... One could scale all kinds of dimensions, using simple trigonometry functions.

Really...?

If one were so inclined.

tan(atan2()) is just a scalar

No need to dive into normal trig things; pretty graphs, maps, and geometric art, etc.

Fundamentally, tan(atan2()) is just a scalar between two dimensions.

For this article I'll focus on identity scaling as a means to typecast into a numeric value but there are many ways to use this and compare any two dimensions now.

Screensize

One thing many people want is the ability to have the numeric pixel width (or height) of the viewport to find the aspect-ratio or do other calcs down the line.

I solved screensize in 100% CSS previously with a binary search using The CPU Hack but I realized today it's so much easier and faster with tan(atan2()):

What is the numeric pixel value of 100vw?

should be as easy as

:root {
  --px-width: tan(atan2(100vw, 1px));
}

but atan2 is super buggy in browsers right now. (mixing vw and px was intended to work)

Chrome returns 100 in this case, which is strange/undesirable.

Firefox returns 0 in this case because of the mixed units failing. If both are vw or both are px, Firefox correctly returns 100.

Safari seems to always return 0 from tan(atan2(Y, X)) for any Y and any X. With or without units, mixed or matching. (edit: Unless you wrap it in calc())

So for now we first need 100vw as NNNpx, which is easy in CSS because that's what happens automatically if you register a var as <length> then set it to a value like --100vw: 100vw

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

Now this works in Chrome exactly as hoped:

:root {
  --100vw: 100vw;
  --px-width: tan(atan2(var(--100vw), 1px));
}

--px-width is the width of the screen as a, usually integer, number

here it is live including one for 100vh too:

get font-size and more

You can use this same idea for any container query units, calc sizes containing mixed units, find out the px size of rem, anything you want. Just register a length, set its value, and convert to numeric px with tan(atan2()).

Easy peasy! Potentially super useful.

Works with <time> too

:root::after {
  --ms: tan(atan2(12s + 1ms, 1ms));
  counter-reset: val var(--ms);
  content: "Numeric ms value of 12s + 1ms is: " counter(val);
  /* counter prints 12001 */
}

That's all numeric typecasting identity scalars, and it's fun to think about all the ways you can mix calcs now, but there's even more cool stuff tan-atan2 can-a-can-do, perhaps for a future article ~

The Trig (update)

The trig behind this isn't necessary to know to use it, but I had a couple questions come up in private about it:

tan( angle ) is a function that takes an angle then produces a result that's equal to "opposite over adjacent" - the height divided by the width of a right triangle:

atan( ratio ) is a function that takes the value of height divided by width and returns the angle; the inverse of tan().

atan2( Y, X ) is a programming language's adaptation of atan() that takes the height (Y) and width (X) as separate arguments instead of dividing them before passing, then returns the same thing atan would have.

So what this trick is doing is kind of silly in most worlds (and probably why nobody pointed it out sooner) because we're using two trig functions instead of division that calc() implementations can't do yet.

atan2( Height, Width ) = angle from the picture above

tan( angle ) = Height / Width from the picture above

tan( atan2( Height, Width ) ) = Height / Width

@property --MyFullInlineSize {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --MyEm {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
div.in-a-container {
  --MyFullInlineSize: 100cqi;
  --MyEm: 1em;
  --MyNumEmsWide: tan(atan2(
    var(--MyFullInlineSize),
    var(--MyEm)
  ));
  --MyNumPxWide: tan(atan2(
    var(--MyFullInlineSize),
    1px
  ));
}

The End

If you think this is useful, fun, or interesting, it's the kind of thing I do in my free time! So please do consider following me around the web:

PropJockey.io	CodePen	DEV Blog	GitHub	Mastodon

and 𝕏@Jane0ri

👽💜
// Jane Ori

PS: I've been laid off recently and am looking for a job!

https://linkedin.com/in/JaneOri

Over 13 years of full stack (mostly JS) engineering work and consulting, ready for the right opportunity!

[CSS Fix] When justify-content: space-evenly overflows, un-center the content

Jane Ori — Tue, 26 Sep 2023 14:42:27 +0000

Bramus has shown us a clever scroll animation based Space Toggle that allows our styles to respond based on weather the element can scroll or not.

https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/

Pop over there to see how it works, continue here to see how I've used it ~

When we use space-evenly

When content spans the full width of your page in columns, like itineraries, house banners, etc,
justify-content: space-evenly; is subjectively the best looking layout for it.

(that's .justify-evenly if you tailwind)

What space-evenly breaks

If a column section is set to space-evenly but the code allows more columns to be added and scrolled horizontally, you'd probably expect overflow-x: auto; to do it well.

Here's 7 columns with overflow-x: auto; and the same code as shown previously:

At least 1.7 columns are totally inaccessible, scrolled off to the left in the unreachable negative scroll positions.

Why space-evenly breaks on overflow

This answer on stackoverflow does a great job explaining the 'why':

I found the CSS specs describe a "fallback alignment" in case the spacing cannot be applied. For space-between this is start whereas for space-evenly this is center, unfortunately. This explains the observed overlap difference.

Nevertheless, the spec also mentions

A future level of this module may allow the fallback alignment to be specified explicitly.

so perhaps with time we may be able to set the fallback to start.

Until that time I've found a workaround: set min-width on the container. To avoid excessive width, wrap the container in a scrolling parent element. Demo here.

author: Paul

Where is the CSS-Only fix to space-evenly overflows?!

It starts in this article from Bramus, then adapting his Space Toggle into our solution, we create a class to replace .justify-evenly here:

@keyframes detect-scroll {
  from, to { --can-scroll: ; }
}
.justify-evenly-until-scroll {
  --start-if-can-scroll: var(--can-scroll) start;
  justify-content: var(
    --start-if-can-scroll, space-evenly
  );
  animation: detect-scroll linear;
  animation-timeline: scroll(self inline);
}

Making a note here, huge success - and we added inline to the animation-timeline: scroll(self inline) to make it respond to horizontal scroll instead.

Swap .justify-evenly in the html with our new .justify-evenly-until-scroll and you get:

Hooray!

Who am I?

If you think this is useful, fun, or interesting, it's the kind of thing I do in my free time! So please do consider following me here, on CodePen, and on X as well!

👽💜
// Jane Ori

PS: I've been laid off recently and am looking for a job!

https://linkedin.com/in/JaneOri

Over 13 years of full stack (mostly JS) engineering work and consulting, ready for the right opportunity!

PropJockey.io	CodePen	DEV Blog	GitHub	X

UPDATE:

Wait? Nope! Continue, but, heads up:

Bramus (and someone privately) informed me of a new feature with a slight superset of browser support over animation scroll():

justify-content's safe keyword

https://drafts.csswg.org/css-align-3/#overflow-values

It currently works with justify-content: center safe; but if you specifically want space-evenly (I do!), this hack is currently the only working solution.

All the previous demos use grid, here it is with flex, first using space-evenly safe which doesn't do anything yet. Then, further down, same hack as used on the grid demos above, also works on flex.

Thank you!

Expert CSS: The CPU Hack

Jane Ori — Sun, 17 Sep 2023 03:33:01 +0000

A "CPU Hack" implies unlocking the ability for continuous crunching of data and re-evaluation of state.

For example, if cyclic vars didn't automatically fail to invalid (initial) state in CSS, this would continuously increment the value of --frame-count here:

body {
  --input-frame: var(--frame-count, 0);
  --frame-count: calc(var(--input-frame) + 1);
}

Spoiler alert: You actually can do this in CSS, without ever touching JS, I'll show you how!

The 5 Observables

First, let's establish a handful of observations of advanced CSS animation usage so the final demonstration isn't entirely unexpected.

Not directly related to "The 5 Observables"

1. Animation State Rules Over All (almost)

The property assignments set by Animation State trump all Selector State property assignments.

body background is always hotpink in this example:

  body {
    animation: example 1s infinite;
    --color: blue;
    background: var(--color);
  }
  body:hover {
    --color: green;
  }
  body:has(div:hover) {
    --color: red;
  }
  @keyframes example {
    0%, 100% { --color: hotpink; }
  }

This is (partially) why Animation State is not allowed to alter properties that control animations. As in, you cannot^[1] animate the value of animation-play-state.

(otherwise, once started, a self-setting animation could only be stopped by JS removal of the element it lives on since the animation could set its own animation value and stay alive no matter what other selector states tried to stop it.^[2])

Paused animations are no exception; whatever the value is when it's paused still trumps other states.

[1] Technically there's an unrelated hack that allows this, dealing with inheritance and invalid compute states, but the animation-frame timing of that hack is unreliable for CPU ticking.

[2] This is what went wrong with Ultron.

2. Property Assignments in a Keyframe Can Use var()

body {
  animation: example 1s infinite;
  --color: blue;
}
body:hover {
  --color: green;
}
body:has(div:hover) {
  --color: red;
}
@keyframes example {
  0%, 100% { background: var(--color); }
}

In this example, the background color is blue by default, green if hovering, or red if hovering specifically within a div. The color changes as the user interacts.

3. --var Assignments on Keyframe Results are Cached

We can test this by adding a little indirection to the background color assignment:

body {
  animation: example 1s infinite;
  --color: blue;

  background: var(--bg);
}
body:hover {
  --color: green;
}
body:has(div:hover) {
  --color: red;
}
@keyframes example {
  0%, 100% { --bg: var(--color); }
}

No matter what, the background is always blue because it first evaluated as blue and changes to --color are not re-computed.

Even if the animation is paused, the cached value does not change when states in the background change.

(paused animations use the cached value)

4. Changing An Animation Property Breaks The Cache

By altering the animation-duration while the user :hovers, the animation cache is recomputed.

body {
  animation: example 1s infinite;
  --color: blue;
  background: var(--bg);
}
body:hover {
  --color: green;
  animation-duration: 2s;
}
body:has(div:hover) {
  --color: red;
  animation-duration: 3s;
}
@keyframes example {
  0%, 100% { --bg: var(--color); }
}

The end result here is exactly the same as in #2 above; the background color is blue by default, green if hovering, or red if hovering specifically within a div.

Note: Safari has a bug where it does NOT recompute the cache when an animation property changes, so we've entered Chrome-only territory (firefox can't animate --vars yet)

If we "changed" the animation-duration to 1s, it would not technically change, and the cache does not recompute.

You begin to get interesting behavior if both :hover states use the same value that's different from the default state.

body {
  animation-duration: 1s;
}
body:hover {
  animation-duration: 2s;
}
body:has(div:hover) {
  animation-duration: 2s;
}

Let's show this one live:

depending on where your mouse enters the screen (from the top vs bottom), you'll get different colors that "lock" to one or the other until you mouse out.

5. Two Animations

What if instead of pseudo selector state changing the value of --color, we made another animation that changed it?

Our example animation still sets --bg based on --color, so we can expect it to still have the same caching behavior.

Changing an animation property of our example animation should also, still, cause it to recompute its cache.

So, finally, the example animation should accept whatever the current --color value is from another animation and cache it with its state.

Here's what that would look like:

body {
  animation: color 3s step-end infinite,
    example 1s infinite;

  background: var(--bg);
}
body:hover {
  animation-play-state: running, paused;
}
div::after {
  content: "color preview";
  background: var(--color);
}

@keyframes color {
  0%, 33% { --color: blue; }
  33%, 67% { --color: green; }
  67%, 100% { --color: red; }
}
@keyframes example {
  0%, 100% { --bg: var(--color); }
}

Note: Even though we're pausing the example animation on :hover, that still constitutes a change from the default running state so it re-computes and pauses in the same CSS paint frame.

and here's what it feels like:

The bg locks to whatever it was when you entered, then re-computes and re-locks to whatever it is when you leave.

Persistence! NEAT!

The CPU Hack Begins

The previous information implies something extremely interesting; grabbing the cached value from an animation does not recompute it, so it shouldn't cause an invalid cyclic state if the source of the cached value is one step removed.

Double capture, compute once, manage the timing... Should be possible.

We have the example animation conditionally capturing the value from either normal selector states or from another animation.

Let's imagine it's capturing a number instead of a color, like the --frame-count from the opening of this article.

And we'll rename it from example to capture.

body {
  animation: capture 1s infinite;

  --input-frame: 0;
  --frame-count: calc(var(--input-frame) + 1);
}
@keyframes capture {
  0%, 100% { --frame-captured: var(--frame-count); }
}

Wouldn't it be great if we could set --input-frame to that --frame-captured value?

We know that doing it directly would be cyclic because all 3 of these assignments exist in the same frame:

--input-frame = --frame-captured
--frame-count = --input-frame + 1
--frame-captured = --frame-count

If we capture the captured value though and make sure both captures aren't running at the same time, the capture-capture could hoist that value back to --input-frame...

Let's try. We'll call the captured capture hoist.

Also, since we don't want them ever running at the same time (because that would definitely be cyclic), let's start them off paused to be safe.

body {
  animation: hoist 1ms infinite,
    capture 1ms infinite;
  animation-play-state: paused, paused;

  --input-frame: var(--frame-hoist, 0);
  --frame-count: calc(var(--input-frame) + 1);
}
body::after {
  counter-reset: frame var(--frame-count);
  content: "--frame-count: " counter(frame);
}
@keyframes hoist {
  0%, 100% { --frame-hoist: var(--frame-captured, 0); }
}
@keyframes capture {
  0%, 100% { --frame-captured: var(--frame-count); }
}

Now, in order to test this, we also want to set up some dom that we can hover in a specific order to trigger the animation-play-state in the right order. No gaps between the elements and we'll give them classes phase-0, etc

The first phase is definitely capturing the original output. So we'll keep hoist paused and let our old friend capture run first:

body:has(.phase-0:hover) {
  animation-play-state: paused, running;
}

We can stop hovering that element to pause both, which will capture --frame-count, or we can go ahead and set up another element to explicitly do that:

body:has(.phase-1:hover) {
  animation-play-state: paused, paused;
}

And, finally? The moment of truth, test if we can run hoist while capture is paused, which should give us enough room to avoid the cyclic dependency and plop that output back that the top as input... which should give us our first 2

body:has(.phase-2:hover) {
  animation-play-state: running, paused;
}

Here it is live, :hover the cursor from top to bottom to complete a loop:

The CPU Hack

Eureka!

We could make the user pet the dom with their cursor all day orrrr we could move the dom under the cursor the moment it needs to be to automatically trigger :hover

Let's figure that out!

We'll need hovering .phase-0 to automatically "goto" .phase-1, then hovering that will "goto" .phase-2...

And then hovering .phase-2 needs to return to a paused, paused state to avoid any single frame running a compute for both animations at the same time.

Remember: playing or pausing an animation causes it to re-compute on that frame, so changing from running, paused straight to paused, running is actually, for one frame, running both at the same time.

So we need to "goto" a state that will then "goto" .phase-0. Since .phase-1 is paused, paused and "goto" 2, we'll duplicate it and make the new .phase-3 also pause both but "goto" 0 instead.

Let's add this CSS to what we had:

body:has(.phase-3:hover) {
  animation-play-state: paused, paused;
}

And we'll use this for the HTML:

<ol class="cpu">
  <li class="phase-0"></li>
  <li class="phase-1"></li>
  <li class="phase-2"></li>
  <li class="phase-3"></li>
</ol>

Here's a recap of each phase if interested

.phase-0 (hoist paused, capture running)
1. Hoist Value is Frozen
2. Assign Captured = Output Value
3. GOTO .phase-1
.phase-1 (hoist paused, capture paused)
1. Hoist Value is Frozen
2. Assign Captured Value = Output Value
3. Freeze Captured (at the end of this css paint frame)
4. GOTO .phase-2
.phase-2 (hoist running, capture paused)
1. Captured Value is Frozen
2. Assign Hoist Value = Captured Value
3. GOTO .phase-3
.phase-3 (hoist paused, capture paused)
1. Captured Value is Frozen
2. Assign Hoist Value = Captured Value
3. Freeze Hoist (at the end of this css paint frame)
4. GOTO .phase-0

Next, we'll style this .cpu element so each of its children take up its whole area when their width becomes 100%, z-stacked on top of each other in dom order.

.cpu { position: relative; list-style: none; }
.cpu > * {
  position: absolute;
  inset: 0px;
  width: 0px;
}
.cpu > .phase-0 { width: 100%; }
.cpu > .phase-0:hover + .phase-1 { width: 100%; }
.cpu > .phase-1:hover + .phase-2 { width: 100%; }
.cpu > .phase-2:hover + .phase-3 { width: 100%; }

This should be the final piece; each phase triggers the next and they'll only happen for one CSS Paint Frame each. Let's see it live!

Note: we also needed to register the output var (--frame-count) or else it will suddenly stop working at 100 because of calc() technically becoming nested each iteration. Casting it to integer prevents this and is much more efficient. The demo above has the @property code included.

Also, technically, one small cleanup you could make:

Drop the --input-frame var, just --frame-hoist directly, it's cleaner.

The Rest of the Owl

So you have a CPU in CSS. What can you do with it?

100% CSS Compute Integer --width and --height of the Screen

100% CSS Image-Mouse-Coordinate Zoom on Hover

100% CSS Conway's Game of Life Simulator - Infinite Generations, 42x42

100% CSS Breakout, play it here:

The End!

If you think this is useful, fun, or interesting, it's the kind of thing I do in my free time! So please do consider following me here, on CodePen, and on X as well!

👽💜
// Jane Ori

PS: I've been laid off recently and am looking for a job!

https://linkedin.com/in/JaneOri

Over 13 years of full stack (mostly JS) engineering work and consulting, ready for the right opportunity!

DEV Community: Jane Ori

Violence at my boundary.

Open Contact 👽

My heart is open to receive abundance in all forms,flowing to me in many expected and unexpected ways.

Abhorrent Employment Agreements.

My biggest flaw is showing my teeth when I witness someone double down on a lack of integrity.

The abhorrent* combination of clauses.

My first response.

My second response.

I need your perspective.

I invite Open Contact 💚👽

My heart is open to receive abundance in all forms,flowing to me in many expected and unexpected ways.

CSS - The single coolest API technique you can imagine.

Inverted? Space Toggle? CSS APIs? Catch-me-up!

initial

(space)

Space Toggle

Inverted?

Inversion history

Cyclic Space Toggles

The dropdown analogy... is a veil.

Real world use case

Where else would we use it?

Open Contact 👽

My heart is open to receive abundance in all forms,flowing to me in many expected and unexpected ways.

100% CSS: repeat(--n, anything)

Here is CSS --repeat() in full

How it works

Converting decimal to binary in CSS

Converting binary to unary in CSS

--repeat() use cases and demos!

Use it in content

Use it with text-shadow

Use it with drop-shadow() in a filter

Use it to repeat line segments in shape()

Use it for any part of any property!

Open Contact 👽

My heart is open to receive abundance in all forms,flowing to me in many expected and unexpected ways.

CSS Breakpoint Units - design with pixels and get fluid UX for free while automatically solving two of the oldest accessibility problems.

A new breakpoint-system

This opens up 3 API paths

This is the solution to web development.

Automatic accessibility win #1

Designer and developer wins that are such a relief, your first response may be to doubt it.

Automatic accessibility win #2

The smallest breakpoint has no smaller design to show.

Hands-on learning

@propjockey/breakpoint-system

Open Contact 👽

My heart is open to receive abundance in all forms,flowing to me in many expected and unexpected ways.

Customizing the MacOS Terminal with help from AI

Basic settings and imports

Basic aliases

Lock Function

Automatic Node & NPM version mismatch warning

The Beautifully Colorful Path Highlighting and Git Info

The final touch

Open Contact 👽

My heart is open to receive abundance in all forms, flowing to me in many expected and unexpected ways.

100% CSS: Fetch and Exfiltrate 512 bits of Server-Generated Data Embedded in an Animated SVG

Packing 512 bits into an SVG for Exfiltration

Sorting out the solution space

Conceptually, how to procedurally exfiltrate 1D + time

Creating the Checksum Algorithm

Beginning to Exfiltrate the 512 bits with CSS

Exfiltrating the 512 bits with CSS

Main Controller

CPU Exfiltrator

Automatic CPU Hack

Wait, === in CSS?

Reading the SVG Animation

Setting specific CSS --var values (addressed assignments)

Presenting: The CSS Animated SVG Exfiltration Hack

Open Contact 👽

100% CSS: 's border knockout behavior for any element !

Fieldset? Legend?

Fieldset border legend knockout behavior anywhere

Does it do anything else?

--fl-left alternatives

--fl-top option

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.

100% CSS:
's border knockout behavior for any element !

`--fl-left` alternatives

`--fl-top` option

Title as `:first-child` alternatives

`fieldset-legend` uses the `::before` pseudo

`fieldset-legend` no pseudo?

What is `css-api-fetch` doing?

What's `css-bin-bits`?