Yonatan Kra

@yonatankra.com

288 Followers 82 Following

Javascript developer, web components groupie, design systems, web performance, gamer and a scifi and fantasy author. Father of 4, hence the jokes ;) https://yonatankra.com

A screenshot of a result page from an AI content detector. The top of the page reads "Your Text is Human written." Below this, there is a large, semi-circular progress bar. The bar is mostly light grey, with a small green and blue segment on the far left. In the center of the arc, it shows the text "5.83% AI GPT*," indicating the percentage of the text that was detected as AI-generated.

A simple visual mind map titled "WRITING GOALS SEPTEMBER." It contains a grid of nine rounded, rectangular boxes. Each box has a different color and contains a different goal. The goals are: "Read Hostage by Eli Sharabi," "Read Archangels Sisters: Spring of Souls by N.B. Shira," "Finish writing Jack's Bane first book," "Finish editing Dynazeer's first novel get at least 2/3 done," "Write two indie fantasy books reviews," "Complete the children's fantasy reading app," "Complete the outline for the Logicans book," "Spend time with family," and "Run."

A close-up screenshot of a software development environment, likely from an IDE or a terminal. The main text is a developer's comment celebrating a clear architectural decision. It says, "Perfect! Clear architecture decisions. Let me delete the premature implementation and start with tests following TDD." The text is followed by a console command to remove a file, rm src/services/MCPPlaywrightClient.ts, indicating the developer is deleting the existing code to start over with a test-driven development approach.

A screenshot of a "Table of contents" or list of articles. The list shows four entries in a light grey color, and four entries below them highlighted in a light green background with a green dot next to each title. The titles are: Jack's Bane (Tue, Jul 29, 2025), Mistakes, Mentors, and Magical Mishaps (Fri, Aug 1, 2025), Of Pigs, Honor, and Missed meals (Sun, Aug 3, 2025), Mud, Fury, and the Fish (Tue, Aug 5, 2025), Web of Intentions (Fri, Aug 15, 2025), A Web Well Done (Fri, Aug 22, 2025), Barn's Bane (Tue, Aug 26, 2025), and Beauty and the Bane (about 5 hours ago).

Anime-style fantasy illustration of two young adventurers in a chaotic battle scene. In the foreground, a dark-haired boy in a blue tunic kneels on the ground, wide-eyed and alarmed, with glowing sparks of orange magic bursting from his hand. Behind him stands a tall, muscular blond warrior in armor and a helmet, grinning confidently while gripping a large sword. Around them, enemies lie defeated on the forest floor, with a fire burning brightly in the background among tall trees. The mood is tense yet heroic, with a contrast between the sorcerer’s fear and the warrior’s bravado.

A stylized, cartoon-like illustration of a dramatic fantasy scene at dusk. In the foreground, a young man with blond hair and a red cape is aggressively lunging forward with a short sword. He looks angry and determined. To his right, another young man with dark hair is on the ground, tangled in ropes, with a frightened expression. Both are surrounded by several small, pink pigs. In the background, a massive, menacing spider with glowing red eyes looms over the scene, while two other smaller, shadowy figures with glowing eyes are visible to the far left. A wooden building and a horse are visible in the background, and the sky is a vivid orange. A jar with a small, green creature inside sits on the ground between the two main characters.

A stylized, cartoon-like illustration of a group of characters reacting to a spooky, night-time setting. In the foreground, a muscular man with spiky blond hair and a red cape looks terrified, holding up one hand in a defensive gesture while clenching a jar with a glowing, mischievous-looking creature in the other. Behind him, two wide-eyed pigs peek out from a wooden cart. To the left, a dark-haired figure with a glowing star on their chest looks on calmly, standing next to a grey horse with an equally stoic expression. The background is a dark, starlit sky with glowing red eyes and several large spiders lurking around a wooden building. The art style has a textured, slightly grainy filter over it.

An image presenting part of the "Thirteen" intro with a red circle around a possible typo

Anime-style fantasy illustration of a misty lakeside at dawn. A young sorcerer boy sits cross-legged near the water, looking annoyed, while an eccentric older wizard in patchwork robes leans in animatedly, gesturing as if lecturing. In the background, a muscular warrior stomps through the lake holding a small, angry, sharp-toothed fish. The scene is lighthearted and magical, with soft mist, fantasy lighting, and comedic character expressions.

Slide titled "The State of CD 2025." It summarizes findings from a study on nearly 100 organizations. The slide shows that most companies succeed in cultural aspects like autonomous teams, pipeline discipline, and process flow. However, many struggle with technical areas such as trunk-based development (35% adoption), test automation (42% coverage), and complete deployment pipelines (47%). It concludes that the top 10% of companies excel by investing in robust test automation, daily deployments, rollback pipelines, and observability.

Saitama from One-Punch Man, drawn in black and white manga style, looking unimpressed with a speech bubble saying 'OK'.

A screenshot of a Strava activity titled "Morning Run" by Yonatan Kra. The run covered a distance of 18.0 km with an elevation gain of 168 meters, completed in 1 hour and 23 minutes. A map shows the winding route taken through a residential area labeled "Modi'in-Maccabim-Re'ut," with various neighborhoods like "Haprahim," "Hanehalim," "Masua," and "Hashvatim" visible. The route itself is highlighted in orange, showing a roughly circular path with some extensions.

A screenshot of a GitHub issue timeline showing two recent actions:

1. YonatanKra closed the issue as "completed" 13 minutes ago.
2. github-project-automation moved the issue to the "Done" column in the "My App" project 13 minutes ago.

A screenshot of a running app showing a completed run of 17.01 km with a pace of 4:27/km and a time of 1 hour and 15 minutes

A browser developer console screenshot showing two lines of JavaScript code:

$0.validity

This line attempts to access the validity property of the selected element ($0).
The result is undefined, indicating that the selected element does not have a validity property.
$0.checkValidity()

This line attempts to call the checkValidity() method on the selected element.
An error message is displayed: "Uncaught TypeError: $0.checkValidity is not a function" indicating that the selected element does not have this method.
This suggests that the selected element is not an HTML form control element (like an input field, select, or textarea) that has built-in validation capabilities.

A running app screenshot highlighting a 16.09 km run with a 4:35/km pace and the achievement "You're the Local Legend on Up the queen."

A running app screenshot highlighting a 16.09 km run with a 4:35/km pace and the achievement "You're the Local Legend on Up the queen."

Animated GIF of the BlueSky Alt Meter website. The interface prompts users with the question, 'How good are you with Alt Text?' followed by instructions to enter their handle in an input field and click 'Start' to check their accessibility score. Below the handle input, there's a 'Filter Time' slider with two adjustable circular handles at each end, allowing users to set a time range.

An interactive graphic with sliders to express feelings of love. The 'How big is your heart?' slider is positioned towards the larger end, and the 'How much do you love me?' slider is near the middle. The 'Color of your Love' is displayed as red. Below, a simple red heart icon with a white highlight reflects the red color choice.

Illustration to depict a BlueSky bot. A robotic figure with fairy wings. The robot has a blue and silver metallic body, with details suggesting internal mechanics. The wings are large, delicate, and translucent. Above the robot's head floats a glowing blue butterfly with a faint halo.

A code coverage report showing 100% coverage for all tests in the find-altless-posts.ts, agent, components, app.ts, components/alt-text-meter, and alt-text-meter.ts files. The report includes statistics on statement, branch, function, and line coverage, all of which are 100%. The test suite took 395 milliseconds to run and passed all 32 tests out of 32.

A code coverage report showing 100% coverage for all tests in the posts.ts file. The report includes statistics on statement, branch, function, and line coverage, all of which are 100%. The test suite took 97 milliseconds to run and passed all 15 tests.

An email from Amazon Accounts Payable notifying the recipient, Yonatan Kra, about a royalty payment for Kindle Direct Publishing (KDP) sales in the US Kindle Store. The email provides details about the payment number, date, and a link to the Payment Report.

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

A Mandalorian helmet with the writing "this is the way"

A stopwatch with a lightning bolt inside, symbolizing the speed and efficiency of Vitest Fake Timers. The main header says: VITEST FAKE TIMERS. The sub-header says: SKIP TIME, ACCELARATE TESTS.

describe('name', 'open', () => {
it('should initiate open as false', async () => {
expect(element.open).toEqual(false);
expect(element.hasAttribute('qualifiedName', 'open')).toEqual(false);
});

it('should toggle the open attribute', async () => {
element.open = true;
await elementUpdated(element);
expect(element.hasAttribute('qualifiedName', 'open')).toEqual(true);
});
});

describe('MyClass', () => {

// no tests are needed because
// we just extend a third-party

});

import ThirdPartyClass from 'third-party-node-module';

class MyClass extends ThirdPartyClass {
constructor() {
super();
}
}

The image appears to be an interactive digital interface for custom talisman cards. The interface allows the user to perform various card manipulation actions, including shuffling, fanning, and spreading the cards.
The central card design remains static, but the interface provides controls at the top to shuffle, fan, flip, and spread the cards. When these controls are activated, the card or group of cards will smoothly transition between the different states, simulating the physical movement of shuffling, fanning, flipping, and spreading a deck of cards.
This interactive card interface allows the user to explore and manipulate the custom talisman card design in an engaging, dynamic way within the digital medium.

Code snippet demonstrating a Jest test case. The test checks whether the show() method of a dialog element sets the open property to true. The test sets open to false, calls show(), and then asserts that open is true using the expect function.

A scene from Star Trek featuring two characters standing in front of a replicator machine. The character on the right, Data, is wearing a Starfleet uniform and says, 'Why indeed sir, this replicator can make everything!' The text is overlaid in a meme-style format.

class Comp extends HTMLElement {
get p() {
return this.shadowRoot.querySelector('p');
}

constructor() {
super();
this.attachShadow({mode: "open"});
this.shadowRoot.innerHTML = '<p>Hey!</p>';
this.p.addEventListener('click', this.#eventHandler1);
this.p.addEventListener('click', this.#eventHandler2);
this.p.addEventListener('click', this.#eventHandler3);
}

#logger(msg) {
console.log(msg);
}

#eventHandler1(e) {
this.#logger('Handler1');
}

#eventHandler2 = (e) => this.#logger('Handler2');

#eventHandler3 = function(e) {
this.#logger('Handler3');
}
}

The hooded figure, the central character of the game Oaken, stands out among a group of diverse companions.

an image of X's Google play page Uninstalling the app

Robert De Niro meme: "You're good, you!"

A photo of the bald-headed Patrick Stuart, wearing a black jacket, gray sweater, and black pants, standing outdoors in front of a modern building. He holds a protest sign that reads 'Defend rights for women and girls – Amnesty International' and carries a plastic bag in his other hand. Above the image is a bold quote: 'People won’t listen to you or take you seriously unless you’re an old white man, and since I’m an old white man I’m going to use that to help the people who need it.'

A text snippet discussing the challenges of browser compatibility for web components, referencing a specific tweet and article for further information. Relevant to 2019 and not true today.

A tense standoff between two opposing forces. A determined female FBI agent and a stern male CIA agent face off, their body language conveying a clear disagreement. The FBI agent, with her team of sharp-suited colleagues, stands firm, while the CIA agent, flanked by his own operatives, exudes an air of authority. The scene is set in a dimly lit, modern hangar, emphasizing the seriousness of the situation.

A split screen. To the right side, there's a before screenshot of the "Follow me on" section of the website featuring Linkedin and Twitter. On the left is an after screenshot of the "Follow me on" section featuring Linkedin and Bluesky.

Meetup attendees standing in an old shelter that used to be a British bank safe more than 75 years ago.

A laptop preseting a neural network prenetation's header slide on a table. To its left are 4 noisemakers.

The writing: "I wonder what can a frontend dev talk about in KubeCon" with a laughing emoticons in the end