DEV Community: Sherotree

Plotkeep — a chart press that never phones home

Sherotree — Tue, 13 Oct 2026 23:44:23 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge: Week 2 (Side Hustle).

Live demo: https://plotkeep-pi.vercel.app/studio

Code: https://github.com/sherotree/plotkeep

Prize category: Best Use of Gemma.

What I built

Plotkeep is a static web app that turns a pasted table into a chart without sending the table anywhere.

You paste CSV, TSV, or cells copied from a spreadsheet — or a sentence if you only have the shape of the question. The app:

Parses the sheet in the tab (quoted fields, $4,200, European decimals, tab-separated paste).
Asks an open-weight Gemma model, running on the device, for a chart specification: type, encodings, title, one-or-two-sentence insight.
Validates that JSON with Zod against the real column names. If the model wraps the object in markdown, trails a comma, or invents a column called value, the error goes back to the model (up to three tries). After that, a deterministic heuristic draws anyway.
Renders with Apache ECharts. Export PNG or SVG. Follow-up prompts revise the spec (make it a pie, title to "June collected").

The product name in the brief was ChartLocal. I called it Plotkeep because the job is not “charts, but local” — it is keeping the plate on the desk.

There is no account, no Plotkeep API, and no telemetry on the CSV. The only network the studio uses, if you opt in, is the first download of Gemma weights (WebLLM / Hugging Face) or a call to 127.0.0.1:11434 if you already run Ollama.

Who would pay for this

A freelance operator who already bought a laptop with a GPU, who pastes client names and invoice totals into a chart generator, and who has noticed that “paste your CSV” often means “POST your CSV.”

That is a real irritation even if I am not going to invent a user interview. Aging reports, hours-by-client, a cafe’s Saturday SKUs — the sheet is small, the names are not public, and a $12/month hosted plotter is the wrong object. The silicon is already on the desk. Charging monthly for tokens the GPU can spend locally is a weird shape.

So the license idea is $29 once, per operator, extra personal machines allowed. This repo does not take payment. The Pro surfaces (saved plates in localStorage, 2×/3× PNG) unlock with the demo code PLOTKEEP-PRO so the paid edge is visible, not vapor. Free forever includes the heuristic engine, local Gemma, Ollama, and 1× export.

I am not claiming conversion rates. I am claiming the billing unit matches the cost structure: you pay for a press, not for inference.

Demo

Live: plotkeep-pi.vercel.app/studio. Repo: sherotree/plotkeep. To run locally:

npm install
npm run dev

Open /studio. The invoice sample is preloaded. Draw chart works with no model — that is deliberate. On this build it suggested a three-series line (invoiced / collected / overdue by month) and wrote “May leads invoiced at 6,100; Feb is the low at 3,100.” Load Gemma only if the browser has WebGPU and you can wait out a ~1.35 GB first fetch (cached after that). Screenshots of that flow live in docs/screenshots.

The screenshots below are real runs of Gemma 2 2B IT (gemma-2-2b-it-q4f16_1-MLC-1k) loaded in-tab via WebLLM, in Chrome on a Mac mini.

What went wrong, and how I fixed it

In my first round of testing, Gemma 2 2B misread the freelancer CSV. Asked "which client grew fastest?", it said "Client B grew the most, increasing from 1800 to 2600." That was wrong: client_c went from 900 to 4100, and client_b ended at 3100, not 2600. It also plotted only client_b.

So Plotkeep no longer trusts the model with arithmetic. For a parsed table it now computes the stats on device, in plain code: first and last value, min and max with their labels, absolute and percent change for each series, which series grew fastest, and the best and worst period. Those facts go into the Gemma prompt as ground truth. Gemma chooses the chart type and encoding and writes the wording. Every numeric series is plotted unless you ask for specific ones. After the model replies, a check compares the insight with the computed facts. If it credits the wrong series, names the wrong peak, or quotes a number that isn't in the table or the stats, the insight is replaced with a sentence built from the facts. The status line shows "facts checked on device" either way. In the reshoot above, Gemma's grounded answer passed the check: "Client C experienced the most significant growth, with a 355.6% increase over the period."

If you are on a machine without WebGPU, stay on the heuristic engine or point Ollama at gemma2:2b. The UI says which of those is true; it does not pretend a cloud fallback exists.

How I built it

Stack: Vite, React, TypeScript, Zod, Apache ECharts, @mlc-ai/web-llm. Gemma 2 2B IT is the default WebLLM id (gemma-2-2b-it-q4f16_1-MLC-1k); Gemma 3 1B is on the menu for smaller VRAM. Gemma 2 has no system role, so instructions are folded into the first user turn.

The useful engineering is not the prompt. It is treating the model as an untrusted spec compiler:

Schema first. The chart is a JSON object with type, x, y, optional series, title, insight. The table is not echoed back through the model. That keeps numbers honest and tokens short.
Bind, don’t trust. Column names are resolved case-insensitively and with a little fuzzy match. Unknown fields fail closed.
Retries are boring and they work. A 2B instruction model often returns “Sure, here is the JSON” plus a fence. extractJson peels that. Trailing commas get stripped. The next user turn is the Zod error, not a rewritten essay.
A fallback that is not a demo fake. Date-like column + numbers → line. Short mix → pie. Two numeric columns and no labels → scatter. Insight is computed from max/min/share so the caption still names a real row when Gemma is absent or rambling. Follow-ups without a model understand type changes and quoted titles; they do not understand “emphasize March” — that is what the weights are for.
Offline after first fetch. Fonts are Fontsource in the bundle (COEP would block Google Fonts anyway). WebLLM needs COOP/COEP for SharedArrayBuffer; Vite, vercel.json, and public/_headers set them. Weights cache in the browser. The heuristic path never needed a network.

I used ECharts instead of Vega-Lite because PNG/SVG export from a plate is a one-liner and the default dark plate looked like letterpress ink rather than a dashboard widget. That is a taste choice, not a moral one.

What is still thin: I did not fine-tune Gemma. The 1k-context build will choke if you paste a 200-column dump — the parser will accept it, the prompt truncates to 20 rows, and the spec may pick the wrong y. Pro is a localStorage flag, not Stripe. Ollama from a static host still needs OLLAMA_ORIGINS. Those are limits, not a backlog dressed up as vision.

Why open innovation matters here

A hosted chart-from-CSV feature is easy, and it is also a copy of the sheet on someone else’s GPU. For this job that is the whole product risk.

Open weights change the economics in four concrete ways:

Offline. After the first Gemma download, a cafe Wi-Fi dropout does not stop an aging chart.
Privacy. The rows never become a training example at a plotting vendor, because they never arrive.
Zero inference cost. The meter is electricity you already bought. That is why the paid thing is a license, not a token pack.
Swappable model. The spec schema does not care whether WebLLM loaded Gemma 2 2B, Gemma 3 1B, or Ollama’s gemma2:2b. If a better open-weight JSON-follower shows up in prebuiltAppConfig, it is a dropdown.

Gemma is the right default for this challenge because it is small enough to contemplate in a tab (2B, or 1B if the laptop is modest) and instruction-tuned enough to emit a short JSON object when you show it the schema and an example. It is not reliable enough to skip validation. Plotkeep’s bet is that validation plus a local model is the product, not a chat window with a screenshot of a chart.

If you bill by the hour and you are tired of uploading the hour sheet to draw a bar, the press is at /studio.

WCAG Color Contrast Explained: AA vs AAA, Large Text, and the Gray That Fails

Sherotree — Tue, 13 Oct 2026 16:37:14 +0000

I used to treat contrast as a box to tick at the end of a project. Then an audit flagged half our secondary text and most of our buttons, and I learned how close "looks fine to me" is to "fails WCAG."

This is what I wish I'd known earlier. The thresholds, the formula, and a small JS contrastRatio() function are in a gist: WCAG Color Contrast Ratio Cheat Sheet. Every number in this post comes from that script.

What the ratio actually means

A contrast ratio compares how bright two colors are, but not the way you'd guess. Each color gets turned into a "relative luminance" between 0 (black) and 1 (white). The formula weights green much more than blue, because our eyes are far more sensitive to green. Then you take (lighter + 0.05) / (darker + 0.05).

The result runs from 1:1 (same color) to 21:1 (black on white). So 4.5:1 doesn't mean "4.5 times different" in any intuitive sense. It's just the scale WCAG uses.

Because of that weighting, two colors that look equally "strong" can score very differently. Tailwind's red-600 (#dc2626) behind white text gets 4.82:1, while green-600 (#16a34a) gets only 3.29:1. Green is perceived as much lighter.

AA vs AAA

WCAG 2.x has two levels you'll actually run into:

AA is what most laws and contracts point to (ADA cases, EN 301 549 in the EU). Normal text needs 4.5:1.
AAA is stricter. Normal text needs 7:1.

I aim for AA everywhere and AAA for long-form body text, like docs, articles, and anything people actually read for a while. Hitting AAA across a whole product is hard and usually not required.

One detail that catches people: the ratio is not rounded. A color at 4.49:1 fails AA. I've seen "4.5" in a design tool that was really 4.47.

Large text gets a discount

Bigger, bolder text is easier to read, so the bar drops: 3:1 for AA and 4.5:1 for AAA. "Large" has a specific meaning: at least 24px regular, or about 18.66px (14pt) bold. A 20px medium-weight heading does not count, even though it feels big.

UI components count too

Since WCAG 2.1 there's a 3:1 rule for non-text things you need to see in order to use the interface: input borders, icons that carry meaning, focus indicators, chart lines, checkbox outlines. This is the one that bit me hardest.

The classic failure is a light gray input border. Tailwind's gray-300 (#d1d5db) on white is 1.47:1. It looks clean, but for a lot of people the field basically isn't there. You don't need a dark border, though. A border that's clearly visible, or a filled background with enough contrast, does the job.

The gray pitfalls

Gray text on white is where most contrast bugs live. These are the ones I check now:

#767676 on white is 4.54:1. That's the lightest pure gray that passes AA for normal text. Burn it into your memory.
#777777, one step lighter, is 4.47:1 and fails. Same goes for any "close enough" gray.
#999999, a very common "muted" color, is 2.84:1. It fails even the large-text bar.
Tailwind's gray-500 (#6b7280) is 4.83:1 on white, so it's fine. gray-400 (#9ca3af) is 2.53:1, so it isn't.

Backgrounds matter as much as text. gray-500 passes on white but drops to 4.39:1 on gray-100 (#f3f4f6) and fails. #767676 on #f5f5f5 is 4.16:1. So a gray that passes on your page background can fail inside a light gray card or table row. Check text against the surface it actually sits on.

Brand colors on white

The second big source of failures is the brand color, usually a bright blue or green. Designers want white text on it and it doesn't quite get there:

Bootstrap 4's #007bff with white text: 3.97:1. Fine for big buttons, fails for normal text.
Bootstrap 5 switched to #0d6efd: 4.50:1. It passes AA, but just barely.
Tailwind blue-500 (#3b82f6): 3.67:1. blue-600 (#2563eb): 5.16:1.
Tailwind green-500 (#22c55e): 2.27:1. You need green-700 (#15803d, 5.01:1) for white text.
Amber/yellow (#f59e0b) with white text is 2.14:1. With black text it's 9.77:1.

My fix is usually to keep the bright brand color for big surfaces and illustrations, and add a darker shade of the same hue for text and buttons. On yellows and oranges, I switch to dark text. It almost always looks better anyway.

How I check now

A simple trick: run a small script in CI that computes ratios for your design tokens (the gist function is enough for this) and fail the build if any text/background pair you actually use drops below the threshold. That catches regressions when someone tweaks a color.

For quick one-off checks while designing, I paste two colors into this colour contrast checker. It runs in the browser and shows AA/AAA pass or fail right away.

Also check the states people forget: hover, focus rings, placeholders, and text over images or semi-transparent overlays. Those are where audits find the leftovers.

Contrast isn't the whole accessibility story, but it's measurable and cheap to fix. Fixing it early beats finding out in an audit.

CSS Easing Explained: Picking the Right cubic-bezier() for Enter, Exit and Move Animations

Sherotree — Tue, 13 Oct 2026 16:37:09 +0000

For a long time I wrote transition: all 0.3s ease on everything and moved on. It worked fine. It also made every interface I built feel a little bit off, and I couldn't explain why until I started paying attention to easing.

This post is the mental model I use now. If you only want the values, I keep the full list of curves as CSS variables in a gist: CSS cubic-bezier() Easing Cheat Sheet.

Why easing matters at all

Nothing in the real world moves at a constant speed. A drawer you pull out speeds up and then slows to a stop. A ball you drop speeds up until it hits the floor. When a UI element moves linearly, your brain notices that it's "wrong" even if you can't say why.

Easing is how you describe that change in speed. In CSS, every timing function is really a cubic-bezier(x1, y1, x2, y2). The x axis is time and the y axis is progress, both from 0 to 1. Even the keywords are just presets: ease is cubic-bezier(0.25, 0.1, 0.25, 1) and ease-in-out is cubic-bezier(0.42, 0, 0.58, 1).

The most useful way to read a curve: a steep part means fast, a flat part means slow. That's really all there is to it.

Enter, exit, move

I use three rules and they cover about 90% of what I build.

Things entering the screen: ease-out. A modal, a toast, a dropdown. It should show up fast and settle gently. Ease-out puts the speed at the start, so the element looks like it reacts to the user right away and then slows down where the eye lands on it. My default is cubic-bezier(0.33, 1, 0.68, 1) (easeOutCubic). When I want something snappier, I use easeOutQuint, cubic-bezier(0.22, 1, 0.36, 1).

Things leaving: ease-in. Same logic in reverse. The element starts slowly and speeds up as it goes away, which reads as "it's gone." Exit animations should also be a bit shorter than enters. Nobody wants to watch something leave.

Things moving from A to B on screen: ease-in-out. A tab indicator sliding, a card changing position, a carousel. Both ends are visible, so the element should speed up and slow down: cubic-bezier(0.65, 0, 0.35, 1) (easeInOutCubic).

One thing I avoid is plain ease-in for enter animations. It feels laggy, because the slowest part happens right when the user is waiting for feedback.

.toast {
  transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1),
              opacity 250ms cubic-bezier(0.33, 1, 0.68, 1);
}
.toast[data-leaving] {
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.32, 0, 0.67, 0); /* easeInCubic */
}

Durations

Easing and duration go together. A good curve at the wrong duration still feels bad. These are the ranges I start from:

Hover, press, small color changes: 100–200ms
Dropdowns, tooltips, toasts: 150–250ms
Modals, drawers, page sections: 250–400ms
Big full-screen transitions: up to about 500ms

Bigger elements and longer distances can take a bit longer. On mobile, I go a little shorter than on desktop. If something feels slow, I almost always fix it by cutting the duration, not by changing the curve.

Also, stop using transition: all. List the properties (transform, opacity). It's cheaper to render, and you won't accidentally animate layout properties like width or top.

Overshoot with Back curves

cubic-bezier() lets the y values go outside 0–1 (the x values can't). If y goes above 1, the element shoots past its final value and settles back. That's the "Back" family:

/* easeOutBack: overshoots ~10% then settles */
.badge-pop { transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }

I like this on small playful things: a notification badge popping in, a like button, a checkbox tick. I'd never use it on a modal or anything large. On a big surface, a wobble feels sloppy instead of fun. A real bounce or elastic effect, with several wobbles, can't be done with one cubic-bezier. For that you need @keyframes or the newer linear() function.

Respect reduced motion

Some people get dizzy or nauseous from motion on screen, and they turn on "reduce motion" in their OS. Honoring that setting takes a few lines:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

I use 0.01ms instead of none so that transitionend and animationend events still fire and JS that waits on them doesn't break. A softer approach is to keep opacity fades and drop only the transforms (sliding, scaling, parallax). Those cause most of the trouble.

Keep curves in one place

My last tip is to put your curves in CSS custom properties and use only those:

:root {
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

Three or four named curves applied consistently do more for how an app "feels" than a dozen hand-tuned ones. The gist has the full Sine through Back set if you want more options.

When I need a custom curve, I drag the handles in a visual editor until it looks right, then copy the four numbers. Lately I've been using this cubic-bezier editor. It runs in the browser and doesn't need an account. Seeing the curve beats guessing numbers every time.

That's it: ease-out to enter, ease-in to leave, ease-in-out to move, keep it short, and respect reduced motion.

I built a free chart maker that runs entirely in the browser (CSV sankey, sunburst, hand-drawn)

Sherotree — Sun, 11 Oct 2026 09:50:23 +0000

I'm a solo indie developer, and BeCharts is my third product after UCharts and Uwarp.

The problem: every time I needed a quick chart for a post, a report or a slide, I had two options. Fight with spreadsheet styling, or write plotting code. I wanted something in between.

What BeCharts does

Import CSV/Excel or edit data in a table; the chart updates live
100+ templates, 20+ chart types (bar, line, pie, scatter, radar, sankey, sunburst, treemap, heatmap, funnel)
Live data sources: World Bank, EIA, stock prices, weather
AI-assisted dataset generation from a one-line prompt
Hand-drawn style and dark mode
Export PNG / SVG / PDF, plus JSON / HTML

No install and no account. The core features are free.

The honest indie numbers

My products earned about $1 for a long time, AdSense took ~7 applications, and they now make about $243/month combined.

Try it: https://www.becharts.com/

What would you want from a browser chart tool that this doesn't do yet?

Uwarp: 500+ Free Browser UI Tools (No Signup)

Sherotree — Sat, 26 Sep 2026 13:08:32 +0000

Default design tools often mean installers, accounts, or uploading files to someone else’s server.

Uwarp is a free collection of 500+ browser UI tools—image and audio conversion, SVG, color, icons, mockups, and a few training games—meant to run locally in your tab. No signup for the tools themselves.

What you can do

A few examples from the homepage:

Colour Contrast Checker — live WCAG ratio for foreground / background pairs
Tints and Shades — build scales from any hex, export HEX / RGB / CSS / JSON
Free SVG Icons — search Material Icons, Font Awesome, Heroicons, and more
Image to Pixel Art — convert photos with grid size and palettes, download PNG
MP3 Cover Adder — embed album art and edit ID3 tags in the browser
GIF to Live Photo — turn GIFs into Live Photo–ready .mov without uploading

There are also lighter “recall” games (color, shape, sound) if you want a break that still trains visual / audio memory.

Built for makers, too

If you ship a product, submit a curated listing for manual review. Approved tools can show up as link-out pages under /curated. Free curated submission is open; paid featured placement is not for sale yet.

There’s also a separate hardware check playground at hardware-test.uwarp.design if you need quick browser device detection.

Try it

Site: https://www.uwarp.design
Submit a product: https://www.uwarp.design/submit

If a tool saves you five minutes, share it with a teammate—or star related open-source bits when you find them. Feedback welcome.

SVG Cursors You Can Actually Ship: Introducing `@sherotree/cursors`

Sherotree — Sat, 26 Sep 2026 12:04:04 +0000

Default OS cursors are fine. For a product UI, they often feel generic.

I extracted the SVG hotspot cursors we use on Uwarp into a tiny MIT package: @sherotree/cursors.

What’s included

Four cursors with correct hotspot offsets baked into CSS:

default
pointer
grab
grabbing

Plus slightly smaller variants under a 1280px viewport width.

Install

npm install @sherotree/cursors

Global usage

import '@sherotree/cursors/style.css'

In Next.js App Router, import once from app/layout.tsx.

That sets body cursors, remaps common interactive selectors (a:hover, button:hover, [role=button], …), and overrides Tailwind’s .cursor-default / .cursor-pointer / .cursor-grab / .cursor-grabbing so those utilities keep the custom look.

Scoped usage

import '@sherotree/cursors/scoped.css'

<div class="sherotree-cursors">
  <!-- custom cursors only inside here -->
</div>

Jev Isn't a Chatbot — It's a System One Model for Typed Decisions

Sherotree — Mon, 21 Sep 2026 15:56:54 +0000

If you've built agents in 2025–2026, you already know the awkward middle:

Hand-written if rules are too brittle for fuzzy judgments ("is this urgent?", "which team?", "is this tool call safe?").
A frontier LLM can answer those questions — but it's slow, expensive, and returns prose you still have to parse.

Jev (from TypeSafe AI) is aimed squarely at that gap. It doesn't write essays. It reads your program's state and returns typed, calibrated decisions your code can branch on immediately.

This post is a practical intro for indie / SaaS builders who want the mental model, a first API call, and a few real patterns — not a press release.

What Jev actually is

TypeSafe calls Jev a System One model.

Think Kahneman: System Two is slow, verbal reasoning (what chat LLMs imitate). System One is the fast gut check. Jev is built for the software version of that gut check — routing, scoring, filtering, gating — at high volume.

You send:

state — the context (ticket text, JSON event, agent messages, …)
questions — one or more typed questions about that state

You get back structured answers with probabilities. No free-text. No "sorry, as an AI…" preamble.

Training focus is RLCD (Reinforcement Learning for Calibrated Decisions): when Jev says ~80% confidence, the goal is that it's right about ~80% of the time. That calibration is what makes thresholds usable in production instead of vibes-based prompt engineering.

Three question types (that's the whole surface)

Type	What you ask	What you get back
choice	Pick 1 of up to 255 labelled options	Winning key + per-option probabilities + confidence
score	Place input on an ordered 2–10 level scale	Fractional score + distribution
noul	Yes/no as a probability	`noul` in `[0, 1]`

You can ask several questions in one request. They evaluate in parallel and share the state cost — so batching beats a loop of tiny calls.

Tiny example: urgency gate

curl -X POST https://api.typesafe.ai/v1/systemone \
  -H "Authorization: Bearer $TYPESAFE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "jev-latest",
    "state": "Hi, I'\''ve been trying to connect Stripe for 3 days and it keeps failing. I'\''m losing sales. Please help ASAP.",
    "questions": {
      "is_urgent": {
        "type": "noul",
        "instructions": "The message conveys urgency or time-sensitivity"
      }
    }
  }'

A typical answer looks like:

{
  "is_urgent": {
    "type": "noul",
    "noul": 0.999
  }
}

Then your code stays boring (in a good way):

if (answers.is_urgent.noul > 0.7) {
  escalate(ticket);
}

No regex. No JSON-schema-from-an-LLM-that-sometimes-breaks. The type is fixed by the request.

Why this matters for agents (not just classifiers)

Agents spend most of their loop on tiny judgments:

Is this still needed?
Which model should handle this turn?
Is this tool call too risky?
Which queue should own this event?

Those used to be either brittle rules or another LLM round-trip. Jev is the middle lane: fast enough for the hot path, structured enough for code.

Public numbers TypeSafe / ecosystem write-ups commonly cite:

Latency roughly 70–500ms
Far cheaper than frontier LLMs on comparable classification-style tasks (pricing differs between direct TypeSafe access and hosted gateways — check the console you use)
Output tokens free on the decision API shape (you pay for input / state)

Use an LLM for generation and open-ended reasoning. Use Jev for the decisions around that generation.

Patterns that actually ship

1. Ticket / email triage

One state, multiple questions: route (choice), urgency (noul), lead quality (score). Auto-handle high-confidence cases; escalate the uncertain band.

2. Model routing

Ask Jev which tier should run this turn ("fast lookup" vs "architecture / high-stakes"). LangChain's experimental ModelRouterMiddleware is built around this idea.

3. Tool-call guardrails ("auto mode")

Before bash / delete / payment tools execute, ask a noul: "is this risky / irreversible?" Block or confirm when probability is high. Same pattern coding harnesses already use — now available as a cheap, open classifier layer.

4. Indie product glue

If you run SEO tools, support inboxes, or agent workflows (hello, build-in-public SaaS), Jev is a good fit anywhere you currently:

prompt an LLM just to get a label, or
maintain a growing pile of keyword heuristics

LangChain sketch

from langchain_typesafe import Noul, TypeSafeClassifier

classifier = TypeSafeClassifier()

response = classifier.invoke({
    "state": (
        "The deploy failed twice and customers are seeing 500s. "
        "Can someone look now?"
    ),
    "questions": {
        "urgent": Noul(instructions="Does this need attention right now?"),
    },
})

urgency = response.nouls["urgent"].noul

State can be text, structured data, or LangChain messages — handy inside middleware / nodes.

Ecosystem tips (beyond the core API)

The community moved fast after launch:

awesome-jev / jev-mcp style tooling around MCP clients
jevlang — Python "smart if" syntax for decision workflows
jev-router — route Claude Code / Codex turns to cheaper vs stronger models
browser / automation pilots that treat Jev as the chooser, not the writer

If you're exploring for a weekend project, start with one noul gate in an existing script. Don't rebuild your whole agent day one.

Practical gotchas

Pin model versions in production (jev-1.x.x) if thresholds matter — jev-latest can shift.
Batch questions on shared state instead of N sequential calls.
Use confidence / probability bands: auto-approve high certainty, human or LLM escalate the middle.
Jev is not a chat UX. Don't put it in front of end users as a conversational product. Put it inside the product.
Access paths vary (TypeSafe waitlist / console, gateways like OpenRouter / Vercel AI Gateway, or hosted metered keys). Pick one and keep the key server-side only.

Who's behind it (short)

TypeSafe AI was founded by Diogo Almeida (ex-OpenAI, co-inventor work around RLHF), with Erik Gafni and Sasha Sheng. The company came out of stealth in September 2026. The thesis is blunt: if AI is going to change work, people can't be the only consumers of intelligence — most of it should live quietly in software.

Bottom line

Jev won't write your README. It will decide, in under half a second, whether this ticket is urgent, which team owns it, and whether your agent should be allowed to run that delete.

For indie builders drowning in "tiny LLM calls that only return a label," that might be the most useful new primitive of the season.

Build UChart with KendoReact

Sherotree — Sun, 23 Mar 2025 03:09:12 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

UChart
Provides out-of-the-box chart templates and supports custom chart styles to help you quickly generate beautiful charts

Demo

Link: https://www.uwarp.design/
Repo:https://github.com/sherotree

KendoReact Experience

I use the Checkbox,Splitter,TabStrip,TabStripTab,Button,NumericTextBox,Notification,NotificationGroup,Fade,Dialog,Label,Slider,Switch on the Uchart, help me quickly build the UI part. KendoReact is very easy to get started with, It took me almost no time to use it in my projects.

🏆 Pick Your Champion - Netlify Dynamic Site Challenge

Sherotree — Sun, 12 May 2024 06:25:06 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast & Build with Blobs & Clever Caching.

What I Built

Pick Your Champion is an interactive Quiz, player can pick the ideal type here.

Demo

🚀 Pick Your Champion

📸 Screenshots

Platform Primitives

Netlify Image CDN

Integrated Netlify Image CDN to dynamically manipulate images at the time of delivery.
Utilized parameterized transformation by adjusting parameters like width, height, quality, format, fit, and position in the image URL.

Netlify Blobs
Use it to store voting data.

import { getStore } from '@netlify/blobs';

export default async (req: Request) => {
  const { searchParams } = new URL(req.url);
  const gameId = searchParams.get('gameId');
  const roleId = searchParams.get('roleId');

  const store = getStore(`pick-your-champion`);
  const data = (await store.get(gameId, { type: 'json' })) || {};
  const preCount = data[roleId] ?? 0;
  data[roleId] = preCount + 1;

  await store.setJSON(gameId, data, {
    metadata: {
      lastModified: new Date().toISOString(),
    },
  });
  return new Response(data);
};

Netlify's fine-grained cache control capabilities

Implement custom Cache-Control headers, utilize the Netlify-CDN-Cache-Control header for edge caching, and demonstrate cache invalidation using cache tags.

First fetching timing cost

Fetching from the cache

Response Headers

Netlify's cache control capabilities is so good, make the API 10 times faster from the cache!!!

🎨 Logo Hunter - Netlify Dynamic Site Challenge

Sherotree — Sun, 12 May 2024 03:55:18 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

Logo Hunter boasts a user-friendly interface that allows visitors to effortlessly find app logos from the App Store. At the same time, it was also released to the Figma plug-in community, designers can click the logo to place it in a Figma file.
The project utilizes Netlify's image CDN to fetch and optimize images dynamically. By applying resizing and format optimization, the project creates visually appealing galleries based on user input. This implementation guarantees efficient image delivery and a smooth user experience.

Demo

🚀 Logo Hunter

🎨 Logo Hunter in Figma

📌 Features

Find any app logo from the App Store by searching with keywords and filtering by country.
Transform the logo by adjusting parameters such as width, height, quality, format, fit, and position in the image URL.
You have the convenience of either downloading or copying the logo
Insert the logo to the Figma file

📸 Screenshots

Platform Primitives

Netlify Image CDN

Integrated Netlify Image CDN to dynamically manipulate images at the time of delivery.
Utilized parameterized transformation by adjusting parameters like width, height, quality, format, fit, and position in the image URL.

  const url =
    'https://uwarp.netlify.app/.netlify/images?url=' +
    artworkUrl512 +
 `&fit=${config.fit}&w=${config.size}&h=${config.size}&fm=${config.format}&q=${config.quality}&position=${config.position}`;

DEV Community: Sherotree

Plotkeep — a chart press that never phones home

What I built

Who would pay for this

Demo

What went wrong, and how I fixed it

How I built it

Why open innovation matters here

WCAG Color Contrast Explained: AA vs AAA, Large Text, and the Gray That Fails

What the ratio actually means

AA vs AAA

Large text gets a discount

UI components count too

The gray pitfalls

Brand colors on white

How I check now

CSS Easing Explained: Picking the Right cubic-bezier() for Enter, Exit and Move Animations

Why easing matters at all

Enter, exit, move

Durations

Overshoot with Back curves

Respect reduced motion

Keep curves in one place

I built a free chart maker that runs entirely in the browser (CSV sankey, sunburst, hand-drawn)

What BeCharts does

The honest indie numbers

Uwarp: 500+ Free Browser UI Tools (No Signup)

What you can do

Built for makers, too

Try it

SVG Cursors You Can Actually Ship: Introducing `@sherotree/cursors`

What’s included

Install

Global usage

Scoped usage

Links

Jev Isn't a Chatbot — It's a System One Model for Typed Decisions

What Jev actually is

Three question types (that's the whole surface)

Tiny example: urgency gate

Why this matters for agents (not just classifiers)

Patterns that actually ship

1. Ticket / email triage

2. Model routing

3. Tool-call guardrails ("auto mode")

4. Indie product glue

LangChain sketch

Ecosystem tips (beyond the core API)

Practical gotchas

Who's behind it (short)

Bottom line

Links

Build UChart with KendoReact

What I Built

Demo

KendoReact Experience

🏆 Pick Your Champion - Netlify Dynamic Site Challenge

What I Built

Demo

Platform Primitives

🎨 Logo Hunter - Netlify Dynamic Site Challenge

What I Built

Demo

Platform Primitives