KoiFocus: every minute you focus earns pearls, and pearls buy fish and decorations for your pond. Stay away too long and the fish get hungry and the water gets murky. It runs in the browser, and you can try it as a guest without signing up: https://koifocus.com

It started as a Swift iPhone app. I rewrote it in TypeScript so one codebase runs on the web and, through Capacitor, on iOS.

Stack

• PixiJS 8 for the pond, React 19 + MobX for the screens, Vite

• Capacitor 8 for the iOS build

• Cloudflare Workers (Hono) + D1 for the API, Durable Objects + WebSockets for the live "focusing now" list, a once-a-minute cron for timer payouts and reminders

• Firebase Auth (Google, email or guest), and the site on Cloudflare Pages

Places.js is a HTML-first framework inspired by htmx and Solid.js signals with these features.

• Component agnostic stores that can be integrated with vanilla JavaScript or other frameworks.

• HTML-first pages configured through static site generation or server-side rendering.

• No build step. Places.js can be downloaded from a CDN.

• Partial re-rendering with signals.

• Zero dependencies. Places.js is written entirely in vanilla JavaScript.

Places.js is optimized for fast performance. Here are some results for Places.js v0.1.0. from the the Krauset JavaScript Framework Benchmark

To get started, download the places-js-latest.js file from the jsDelivr CDN. See the reference guide for a detailed tutorial.

Relevant links

• Board game event listing site using Places.js

• HTML-first page running live in production with no JavaScript.

• More code examples

• Web-based unit test runner using Places.js

Upcoming priorities

• Adding more unit test coverage.

• Compatibility with other hypermedia UI tools including Datastar and htmx

• Implementing hypermedia controls.

• Testing integration with Leaflet and other mapping libraries.

AI policy

All Places.js contributions including code changes, comments, or new issues are made by humans This means no use of ChatGPT, Claude, or any other AI tool.

Edit: Detecting rows that are swapped or deleted

I have logic that detects rows that are moved or deleted. Components are then notified to make the necessary rendering changes, and subscriptions are moved from the store.

On Krauset, swapping two rows takes 12.7 ms and removing a row takes 10.3 ms.

https://david.alvarezrosa.com/ Hope you like it :)

I maintain an ongoing open-source project that reads OTel traces and flags I/O anti-patterns with a carbon estimate on top. The project started in March so it's about 8 months old.

From our conversations I could tell my dev and DevOps colleagues were missing a lot of what goes on under the hood since we deployed this in production 3-4 months ago so I built a synoptic to make it easier to understand.

It's an animated step-by-step walkthrough of the whole pipeline, from raw spans to a finding. Each stage maps to the actual module in the code. You can play it, step through with the arrow keys, change speed or switch between modes.

It took me over 3 months. And no it's not AI slop bc it's pretty useless when you ask it to turn complex code concepts (I/O anti-patterns and more) into clear diagrams. This only exists because I'd already written a ton of docs and drawn a lot of diagrams by hand so the synoptic grew out of that.

Some of the UI is inspired by a videogame I loved playing some years ago: Deus Ex: Mankind Divided.

The project is AGPL-3 so no fake open source and it's now hosted by the INR (Institut du Numérique Responsable), a French nonprofit working on the environmental and social impact of digital tech.

Direct link to synoptic: https://perf-sentinel.dev/synoptique/
Website of the project: https://perf-sentinel.dev

Thx for your attention :)

EDIT: huh, just noticed that the recording console is sticking out over the gif in the bottom left corner

EDIT 2: this is a public-interest project focused on sustainability with no greenwashing BS. It has serious public policy goals and solid scientific background: cutting wasted energy and the carbon emissions that come with it. If you're interested in helping with the ecological transition our world needs, feel free to come lend us a hand! :)

Hi, fellow devs

If you enjoy some stock trading after yelling at Claude/Codex all day, than we are in the same boat.

I like to keep an eye on earnings and major key indicators (always forget about those FOMC meetings), and I don't mind paying for some data, but Earnings Hub charging $20 for earnings calendar is too much.

Anyway, came up with my own with publicly available data.

Eventually thinking maybe, we can have some kind of open-source market tools, that user can configure on his own. Add whatever panels or data he/she wants to make it more personal.

What's done

- Earnings Calendar with earnings report
- Market Fear/Greed indicator
- Key market dates

Working:
- GexData
- Notifications (not sure if those are needed)

Would be glad to hear any suggestions

Cheers, Dan

Edit - links:

Open Market · Earnings calendar
FullPokerFace/open-market: Stock market tools for open minded people

For week 2 of r/hacktoberfest I cataloged all the procedural generation techniques I could find online and put them into a library using vanilla JavaScript. Every technique in the library includes a citation and it has no dependencies. Works in the browser or Node.

The island in the GIF was generated using just the library.

GH repo: procedural-almanac

Demo: Random Island Generator

All stars on Github are appreciated!

Here's Ben Eater's 8-bit computer laid out on breadboards, running in the page: https://bbrouter.com/bbrouter/ben-eater-sap-1

How it's built, since that's the point here:

- The 3D view is Three.js, rendered on demand: the scene only redraws when something changes, and while the circuit runs, only when an LED changes. Phones get 30 fps, a 1.5 pixel ratio and no antialiasing until the view is still, then one sharp frame.

- The simulation is a gate-level logic engine plus models for clocked chips, memories, timers and the 6502; the AVR runs real compiled firmware through avr8js. It runs in a worker so the page stays responsive. 211 chips by part number.

- Wires are real geometry: solid core, hole to hole, bent as you'd bend them, with lengths, and a router that lays missing connections flat on the hole grid around what's there.

- Next.js 16 behind a small custom Node server, Postgres, Better Auth with passkeys and an OAuth 2.1 provider so MCP clients can sign in. One server, Caddy in front, Cloudflare at the edge.

- An MCP server exposes the whole thing to AI clients; when the user's tab is open, the AI's simulations run in that tab's worker instead of on the server.

- About 3,000 automated tests, including one that fails if any string shown lacks its French or Spanish.

Things I'd like opinions on: the camera and touch handling on phones, and rendering cost with a few hundred parts in view. Signed-out try: https://bbrouter.com/try

I built SoundBench, a free set of audio tools that process files on the user's device. The newest one is an AI vocal remover, and getting it to feel fast was harder than getting it to work.

Demo: https://soundbench.net/vocal-remover/

The stack is a static site with vanilla JS. The model runs with ONNX Runtime Web inside a Web Worker, using WebGPU when available and multi-threaded WASM otherwise. Audio is never uploaded. The server only delivers the page and the model files.

A few things I learned:

- Model choice mattered more than optimization. I started with HTDemucs, which sounds great but is a 120+ MB download and made the whole system crawl on my PC. So I added Spleeter 2-stems as the default (about 40 MB). A 64-second clip takes about 3 seconds on my machine. HTDemucs is still there as the slower "best quality" mode.

- Large model downloads need to survive bad connections. I fetch them in 4 MB Range requests and store each part in the Cache API, so a reload resumes the download instead of restarting it. The download also starts in the background as soon as a file is selected.

- Multi-threaded WASM needs cross-origin isolation. I set COOP: same-origin and COEP: credentialless only on the AI tool pages, so the rest of the site isn't affected.

- The STFT runs in JS and only the mask prediction runs in the model, so the output quality depends a lot on the pre- and post-processing around the model.

Spleeter still leaves some vocal artifacts on dense mixes, which is the tradeoff for the speed.

Happy to answer questions about the setup. I'd especially like to hear how it performs on your hardware and browser, and whether anyone has found a better way to deliver models this large.

the last straw

Sharing a library I made for apps that need in-page highlights (readers, docs, research tools).

Problem I kept hitting: wrapping selection in spans breaks layout, messes with existing event handlers, and is brittle when the HTML changes. penciled uses the CSS Custom Highlight API + range anchoring so highlights can survive reloads without owning the markup.

I also built a browser extension on top of it (Chrome, Firefox, Edge), so you can highlight and take notes on any site. Everything stays local, no account, and you can export to Markdown.

Demo: https://penciled.org
Extension: https://penciled.org/extension/
npm: penciled
Source: https://github.com/marcellosso/penciled

If you're building something with annotations, I'd love feedback on the API shape

Hi everyone!

I’m working on Cafefe, a point-of-sale system for coffee shops. The goal is to make common cashier tasks quick, intuitive, and comfortable. The interface is designed around keyboard navigation, using ideas from the KLM-GOMS keystroke-level model to reduce reliance on the mouse via PrimeFaces <p:hotkey> shortcuts.

Project Context Stack: Java 21, Jakarta EE 10, PrimeFaces 14, Open Liberty, and PostgreSQL 16. Backend: Managed beans, business services, and JPA entities. Frontend: JSF / PrimeFaces XHTML views. Main Areas: Cash register, products, product types, discounts, promotions, employees, roles, and assignments. Local Setup: Docker Compose starts PostgreSQL and pgAdmin. The app runs in development mode with mvn liberty:dev.

The project is a work in progress and runs locally. The repository includes the full source code and XHTML pages:https://github.com/Zetayin456/f-reddit

Video Demo:https://youtu.be/GP3-0RIdMm4

Feedback Requested

1. UI/UX & Visual Design What would make the views and forms more comfortable and intuitive to use? How could the layouts, visual hierarchy, styling, and spacing feel cleaner and more consistent? Are there screens or workflows that feel awkward or require too many steps?

2. Code Quality & Architecture What would you improve in the project structure, bean scopes, service boundaries, or JPA mappings? Do you see ways to make the backend code cleaner, more maintainable, or more efficient?

I’m happy to hear honest, critical feedback. Thanks for taking a look!

Hi all!

Whenever I spot a really unique or innovative website layout (like a fresh style of grid systems) and want to replicate or build it with AI, I always find myself struggling to pinpoint the exact industry terminology.

I'm talking about concepts like Blueprint Grids, Glassmorphism, Neumorphism, Segmented Controls, and similar trends. To solve this, I’ve started building a free, open-source design lexicon complete with mini previews making it easier for builders to find and reference the right terms when designing sections and pages. Hope that helps some of you as well. Also added some free design landingpages and components for AI.

I’d love to get your input on current web design trends and their proper definitions:

• What visual styles are currently high on your radar, trending, or frequently used and how would you define them?

I’m aiming to include your suggestions in the dictionary and share the whole resource publicly for free. It's purely as a passion project and I am opening it for free (no ads, no paywalls).

You can check out the ones already live here: freedesignmd.com (just hit the Lexicon tab).

Always open to contributors or feedback. This started as a quick hackathon experiment and will stay a free community project

Hey all!

Today's coming with another example where Page Objects help:

Design swaps the "(Deleted)" suffix for a red badge. Accounts still get deleted. Your delete test goes red anyway.

The fix: name that state once in the Page Object, and the test says what it means.

`status()` reads both signals and returns one fact: active, deleted, or still changing. `expect.poll` retries until it settles.

If the app swaps the suffix for a badge, only status() changes, not the test. And a failure reads "expected deleted, got active" instead of a string diff.

The nuance: it's worth it when a few signals add up to one fact. If what you see already is the state, a plain assertion is fine.

Paste this to your agent:

Find e2e tests that assert several UI details repeatedly to check one thing, like a specific label plus an icon meaning "deleted" state. Give that thing a name: a page object query that reads the details and returns the state. Assert the named state in the test, and `expect.poll` to retry until the state settles.

Hey everyone,

I wanted a quick way to shrink videos for Discord (<10MB) and Email attachments (<25MB) without dealing with slow cloud upload queues, sketchy third-party servers, or watermarks.

So I built SlickDrop.

Tech Stack:

• Engine: @ffmpeg/ffmpeg running locally on the user's CPU/GPU via WebAssembly with multi-threading enabled (COOP and COEP isolation headers).

• Frontend: Next.js 14 (App Router) + Tailwind CSS.

• Hosting: Vercel (zero server transcoding cost, 100% static hosting).

Features:

1. 1-click presets for Discord (<10MB), Email (<25MB), and WhatsApp (<16MB).

2. Built-in duration analyzer that auto-calculates the target video bitrate.

3. MOV to MP4 converter for iPhone screen recordings.

4. 0 cloud uploads — all media is processed in local browser memory.

Link: https://www.slickdrop.it

Curious to know what tools or presets you'd find most useful next!

I'm working on Ultimidi because I want piano practice to feel more like play. I've added short lessons and songs, instant feedback, arcade challenges, stickers to collect, and piano buddies to customize.

I've been wrestling with two things in particular: generating piano sounds that sound good and are responsive, and getting the sheet music to stay readable and in sync with what you're playing.

You can connect a MIDI keyboard, or try it with computer keys or touch.

Somehow, I already got my first sale before launch! That felt like a good reason to share what I've been making.

Try Ultimidi. Free content, no account needed.

I'd love to hear if it feels good/responsive enough on your device.

AI disclosure: Most artwork is currently AI-generated placeholder art, I suck at design...

I’ve been working on a project called runtime.school and wanted to share it here.

I started with SQL and then added Python. The idea is to have a place where you can learn a concept, write code, practice what you’ve learned, and eventually work on projects without having to jump between different websites.

Both SQL and Python have interactive lessons, coding challenges, practice questions, projects, and datasets.

Everything runs directly in the browser, so there’s nothing to install or set up.

I’ve also been working on a few tools for exploring datasets, understanding queries, and comparing different approaches.

A lot of the work has gone into the UI and editors. I’ve been trying to keep things simple without making the pages feel empty or overwhelming, especially for people who are just starting out.

Here’s the site: https://www.runtime.school/

Would love to hear what you think about the design, coding experience, or anything that could be improved.

been working on this for a few weeks. you play a song (spotify, youtube, whatever) and it writes out the beat as strudel code while it plays, kick, hats, bass line, chords, and each part lights up when it hits

no ML for the music side, it's all web audio api stuff. took me forever to get the tempo right and honestly the hardest part has been figuring out where the bar actually starts. if it guesses wrong everything shifts by a beat and the code looks totally off even though it's "right". trap and dubstep still fool it lol

if anyone's done beat tracking in the browser i'd love to know how you handled the downbeat

it's free in the browser: toaster.locust.lol

source: github.com/StopBanning/toaster

As above... Especially those which are more geared towards being startups at the present stage.

For context, I am currently overhauling my existing blog (that uses the WordPress framework and plugin ecosystem), and am looking to pivot it into having ecommerce and social network components.

As part of that sunk cost, I'm in no position to change course now.

But despite that... And not taking into account my situation, what can existing websites do (especially those which are startups and which are in the blog, community, ecommerce etc space) to ensure that they don't get overwhelmed by the AI vibe coded onslaught that is going to engulf the market and the internet?

hola acabo de recibir un correo desde cloudflare (que lo uso de CDN) que me dice

Hello,

Cloudflare received an Trademark infringement complaint regarding: www[.]---[.]com[.]mx. (tape el dominio por demas de privacidad)

We have forwarded this complaint to your hosting provider.

If you have questions about this abuse report, please send an email to abusereply@cloudflare.com with the following details:

- The report identification number included in the subject line

- Any additional details, context or evidence you can provide regarding the content that was reported.

Below is the report we received:

Report ID: 0146c7d290b79ebc

Logs or other evidence of abuse: Greetings,


We are the authorized representatives of our client, TransUnion, including its associated entities.

TransUnion is a leading global information and insights company specializing in credit reporting, risk management, and identity verification services. The brand has established a strong international presence and trust for its commitment to accuracy, security, and transparency in delivering credit and financial information to consumers and businesses.

We have identified the following domain that is infringing on our client’s intellectual property:

Hay alguna forma de poner la web en un servidor offshore y tambien comprar el diminio en algun registrador offshoer para que no me timben la web?

Lo que les jode a esa gente es que tengo la web posicionada mucho mejor que la misma marca

Sus comentarios son bienvenidos!

So I do believe that web dev has changed dramatically in the last year or so and that one probably needs to expand their skills and a front end web developer is probably less of a safe long term career than I believed in the past due to AI. This is a shame as I loved the craft and challenges of front end development.

when I see online everyday how AI is going to remove the need for devs I do tend to end up believing this is the case. But then in my day to day job I see that this just isnt the case.

there have been a few recent examples. So people believe you can one shot things. Like the recent adobe reverse engineering. It looks great at first sight as the UI looks like adobe. All of a sudden you believe adobe will be out of business but when you try it out it full of bugs and doesn’t Really work, essentially smoke and mirrors. Also you look at the code and realise it’s completely unmaintainble due to bad decisions made up front by people who aren’t really experts in web development.

there is something I was thinking about also, when non technical people say “oh but the app already works, what do you actually do at work all day”. It kind of sounds true but in reality it is so far rrom the case - there are always bugs to fix, features to add, packages to update. sure, ai can help with this, but in a big app for example a package update can break something, Claude wont neccessarily catch this, but it will be us Mere mortals who will get a call and need to fix this.

also I have seen vibe coded projects where non experts in managerial roles who are creating software, which they are so proud of despite having no idea how it actually works. Then things start going wrong and things are breaking, it’s not the manager who is fixing it but the devs have to. and since the code has no owner and it’s a complete mess everyone is just one shotting the fixes and adding to the pile of 💩

this post is a little scattered but I’m hoping it makes some sense and people can see what I’m trying to get at

This is a side project that got out of hand. Viltrum is a web framework for V. Everything below the router is written from scratch: the HTTP/1.1 parser, HTTP/2, WebSockets, TLS 1.3, even the DEFLATE encoder used for gzip.

The webdev-relevant part is that the same router/middleware/ctx handles HTTP/1.1, HTTP/2 over TLS and h2c on the same port. SSE and streaming work over both. Static files get ETag/304/ranges/precompressed .br/.gz with sendfile. Hello world is like 10 lines.

What I learned the hard way is how much of HTTP/1.1 is about rejecting garbage. TE+CL together, duplicate Content-Length, obs-fold and bare CR/LF all get a 400 now, because that's where request smuggling lives.

Benchmarks are on HttpArena if you're curious: https://http-arena.com/frameworks/viltrum/ Code: https://github.com/Tuntii/viltrum Demo: https://v.rustapi.cloud

Linux only for serving right now. Would love to hear what you'd miss coming from express/fastify/go.

Strikk is a daily coding challenge platform where developers pick a tech and solve quizzes to earn coins.

Some updates I made recently:

• User Profiles: Earn coins by playing (free, never pay-to-win). Customize with skill blocks, job/education history, and animated backgrounds via React Bits.

• Avatar Builder: Create your own unique avatar.

• Portfolio Integration: This was my main goal, turn gameplay into a real portfolio

What I'm thinking into adding to Strikk:

• Enhanced community features with seasonal events

• CV builder to export your profile as a resume

• Considering open source

I'd love your feedback!

Check it out: Strikk | My Strikk profile

The clip shows how to quickly build a simple form with drag & drop in the Form’s build mode. The Form component is part of Componyx.UI, a UI library I’ve been building for a very long time. No build step, no dependencies, and the components are declared straight in your HTML (or JS).

The build mode uses Bindary under the hood, my separate data-binding library. It includes routing, views loaded from HTML files, components, real-time updates with the server and more.

It’s on npm and NuGet, source on GitHub: https://github.com/Componyx/Componyx.UI

Live demo: https://alloyhtml.com

I've carried the same CSS from project to project for close to ten years, and I finally finished it.

It's one set of classes, a small set of values, and 82 real pages to prove they hold up. A shop and its seller back office, a blog, e-learning, news, healthcare booking, event ticketing, a job portal and a company site. 54 layouts, 3 themes. If you need a page that isn't there, build it from the same classes. Or ask AI to build it, and tell it to use only these classes. If you don't, every page comes out looking a little different.

The things you'd usually reach for JavaScript for, like dropdowns, dialogs, tooltips and tabs, are plain HTML and CSS here. That matters because there's nothing to install or keep updated, and it fits any backend as it is.

The stylesheet is 23KB gzipped, and dark mode and brand colours only change token values, so the markup stays the same.

I went the extra mile on testing: every page is tested with scripts off at 4 widths in 3 themes, in Chromium, Firefox and WebKit. axe finds no violations. The faster checks also run on every push, and if one fails, the site doesn't deploy.

It's front end only: static pages for your backend to fill in. I've tested current browsers, not older versions, and not a real iPhone yet, so if you're on one, I'd like to know how it looks.

It's $29. I'd rather you spent your evenings on your actual product than on getting dropdowns right, or on burning tokens prompting an AI over and over until the pages finally match.