DEV Community: John Peters

Test

John Peters — Tue, 06 Oct 2026 19:59:56 +0000

Create a free Website 100% AI Friendly

John Peters — Mon, 05 Oct 2026 20:29:19 +0000

wb-starter open issue allows A.I. to update status

John Peters — Sat, 03 Oct 2026 03:04:49 +0000

wb-starter contains an Issues page which shows GitHub issues as shown below. Notice the green tags in the Title column? They allow your A.I. to report what it's doing ("Working on it now") then the status Now: and finally, what's next.

https://cielovistasoftware.github.io/wb-starter/?page=issues

Introducing wb-starter

John Peters — Fri, 02 Oct 2026 22:02:36 +0000

cielovistasoftware.github.io

All created using Claude with hooks for any A.I. This means the npm package is ready to create a new web site for you now.

npm create wb-starter my-site

https://cielovistasoftware.github.io/wb-starter/

Web Developers Check this out!

John Peters — Fri, 02 Oct 2026 21:53:31 +0000

wb-starter - Zero Build Behaviors

170+ behaviors, 23 themes, zero build process. The professional behavior library.

cielovistasoftware.github.io

This software has been in development for 1.5 years, has over 10,000 tests, is super A.I. friendly (any A.I. is told how it works), has tons of documentation and is waiting for you.

A New Concept for Websites

John Peters — Tue, 29 Sep 2026 04:19:06 +0000

CieloVistaSoftware / wb-starter

Website Builder Starter Project

Web Behaviors (WB) Starter

A zero-build website framework. You write HTML5. That is the whole API.

Semantic elements first. Composition only. Light DOM only. No custom elements.

No bundler, no JSX, no build step, no component vocabulary to learn.

Try it out

https://cielovistasoftware.github.io/wb-starter/

Why WB beats the frameworks you know

Every popular web framework makes the same trade: to get components, you give up HTML. React turns markup into JSX and a build pipeline. Vue and Angular add template languages and compilers. Web Components hide your markup behind custom tags and shadow roots your CSS cannot reach. Each one is a new vocabulary, a toolchain, and a dependency tree you now maintain -- and none of it is what the browser actually runs.

WB makes the opposite trade. The browser already has the components. <article> is a card. <dialog> is a modal. <details> is an accordion <nav>, <table>, …

View on GitHub

All existing web Frameworks are no longer needed. Using just HTML we have created a new way to create web sites using compositional technique. Please download our wb-starter tool and see for yourself.

New Website creator! Forget all Website Frameworks!

John Peters — Fri, 31 Jul 2026 19:08:07 +0000

We just released our first public release of Wb-Starter, a fully AI created and documented Website kit. Your A.I. engine will love it, and so will you.
BTW: It works seamlessly with your current website (Framework included)
How to create a new website

A.I. LESSONS

John Peters — Mon, 01 Jun 2026 23:38:18 +0000

Perhaps you've been where I have in the past 18 months trying to figure out A.I. This article is a summary of my journey.

I learned it can code like crazy, but it makes crazy mistakes too. The errors are so egregious that there is no way the code can ship as-is. Simple fix, right? Have it write unit tests. Nope it doesn't know how to do it right. Teach it, yes teaching makes things better but A.I. is a dummy, it's more interested in writing tons of code than quality.

Ahh, you might say "I've got this". Unfortunately, A.I. doesn't relinquish control. It's always needing one more prompt and answer. Just try to get it to finish.

I'll post back as soon as I ship my current work.

Cielo Vista Software Update

John Peters — Tue, 29 Jul 2025 22:06:42 +0000

https://cielovistasoftware.github.io/wb-starter/

By John Peters, Lead Developer at Cielo Vista Software • Updated August 2, 2026

Back in mid-2025 we shared an early milestone: five production-ready components, no build process, enterprise-grade error handling. That was Phase 1. Here's where things actually stand today.

We've kept the founding principle intact — zero build step, drop the tag in, it works — while scaling it considerably further than that first release implied.

🎯 What We've Delivered

Metric	Achievement
Components Shipped	70 production components across 8 categories
Demo Coverage	709 live, interactive demos
Architecture	Zero-Build System, schema-first
Standards Compliance	100% Web Standards
Error Handling	Enterprise-grade, actively regression-tested

Our component suite spans cards, feedback & status, form controls, overlays & popups, layout & navigation, content & media, visual effects, and interactive utilities — from a basic <wb-card> to a full 15-band graphic equalizer audio player.

💡 The Correction Worth Making

Our original announcement described the architecture as using Shadow DOM encapsulation. That was wrong, and it's important to say so plainly: wb-starter uses Light DOM, deliberately, with no Shadow DOM boundary at all.

Every component's markup, styles, and structure stay fully inspectable and stylable from the outside — your theme CSS, your own selectors, and the browser's devtools reach straight into every component exactly the way they reach into plain HTML. That's not a limitation; it's the whole point. Composition over inheritance, real HTML semantics over invented abstractions.

🔧 Technical Excellence

What makes this system durable at 70 components instead of 5:

Light DOM, Composition-First: No Shadow DOM, no base-class inheritance chains. Components share behavior through composition — attributes in, real DOM out.

Schema-First Architecture: Every component is defined by a schema (properties, view structure, CSS API) that drives generation, validation, and documentation consistently.

Progressive Enhancement: Components gracefully degrade when JavaScript fails, keeping content accessible.

Auto-Discovery System: Components register themselves and resolve dependencies with no manual configuration.

Bulletproof Error Handling: Comprehensive fallback mechanisms and a live regression suite mean the site keeps working even when an individual component fails — and we catch it before it ships.

📊 Real-World Impact

Category	Result
Performance	Optimal rendering across deployment environments
Accessibility	WCAG 2.1 AA compliance
Reliability	Graceful degradation in all failure scenarios, backed by an active regression suite
Developer Experience	Simple attribute-based configuration, no build tooling

🎨 Why This Matters

For too long, web components have been either overly complex (Shadow DOM's styling boundary fighting your own CSS) or insufficiently robust for real use. Light DOM plus a strict, enforced standard set solves both:

For Developers: No build process, no compilation, no complex toolchains, and no fighting a shadow boundary to theme a component. Drop it into your HTML and it works — and it's stylable exactly like the rest of your page.

For Businesses: Faster development cycles, reduced maintenance overhead, and reliability for mission-critical applications.

For Users: Fast loading, real accessibility, and consistent experiences everywhere.

🚀 What's Next?

We're actively auditing the codebase against the same standards we're publishing here — including a full sweep to remove any remaining inheritance-based framing from our own documentation, so what we say and what we ship stay honest with each other.

Want to see it? Visit Cielo Vista Software or reach out to talk through how this fits your stack.

FrontEndDevelopment #WebStandards #WebComponents #LightDOM #EngineeringCulture

Best Way to Fly

John Peters — Sun, 16 Mar 2025 14:48:49 +0000

🚀 Best of the Web: Essential Development Tools & Platforms

Developers, innovators, and tech enthusiasts—whether you're crafting elegant front-end designs, diving into AI, or building the next big mobile app, the right tools shape your success. Here’s a curated collection of must-know platforms and resources to supercharge your development workflow. 👇

Javascript and Typescript are not mentioned because they won the programming language war years ago.

What about the Desktop? ¹

1️⃣ Code & Development Tools

💻 Visual Studio Code – The ultimate lightweight yet powerful code editor.

🐍 Python – A must-have for automation, data science, AI, and back-end development.

🤖 OpenAI – AI-powered creativity and automation at your fingertips.

📦 npm – The home of JavaScript packages for modular development.

🐙 GitHub – Version control, collaboration, and open-source projects all in one place.

2️⃣ Frameworks & Ecosystem

📱 Ionic – Build cross-platform mobile apps with a single codebase.

⚛️ React – The front-end powerhouse for modern web development.

⚙️ Web Components – The future of reusable UI building blocks.

3️⃣ DevOps, Security & Documentation

🔄 GitHub Actions – Automate workflows with CI/CD pipelines.

🛡 OWASP – Security best practices for web & software development.

📖 MDN Web Docs – A must-have resource for web developers.

🔍 Bing Developer Search – Stay ahead with the latest trends.

4️⃣ Industry Insights & Learning

📰 The Platform Explosion: A Fragmented Tech Landscape – Exploring the ever-evolving tech stack landscape.

🎨 CSS – The backbone of beautiful, responsive web design.

🧠 AI & ML Development – Explore TensorFlow, Hugging Face, and more.

💡 Tech is evolving FAST—what tools or platforms are your must-haves? Drop them in the comments! 👇

Python #Developers #WebDevelopment #AI #VisualStudioCode #React #Ionic #WebComponents #GitHub #OpenAI #DevTools #CloudComputing #TechTrends

Today the desktop, while not dead is Cobol like, it will live forever but not in new applications. The tools listed above are the reason why. ↩

Great Article on CSS selectors

John Peters — Fri, 28 Feb 2025 16:45:11 +0000

CSS Selectors

30 Python Libraries

John Peters — Fri, 28 Feb 2025 15:58:01 +0000

30 Python Libraries