DEV Community: JWP

Cielo Vista Software Update

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

How we built enterprise-grade, reusable components with zero build process and bulletproof error handling

By John Peters, Lead Developer at Cielo Vista Software • Published July 29, 2025

I'm excited to share a major milestone in our development journey at Cielo Vista Software. After months of intensive development, we've successfully completed Phase 1 of our advanced web component system—and the results are game-changing.

This isn't just another component library. We've built something fundamentally different: a robust, production-ready system that requires absolutely no build process while delivering enterprise-level reliability and performance.

🎯 What We Delivered

Metric	Achievement
Components Shipped	5 Production-Ready Modules
Architecture	Zero-Build System
Standards Compliance	100% Web Standards
Error Handling	Enterprise-Grade

Our component suite includes:

✅ Team Member Cards - Professional staff profiles with responsive image handling

✅ Service Cards - Interactive service presentations with expandable details

✅ Testimonial Cards - Client feedback display with rating systems

✅ Contact Information - Smart-linking contact modules

✅ Core Infrastructure - Advanced component registry with dependency management

💡 The Game Changer

"The foundation is solid, components are production-ready, and the system is prepared for scalable expansion. No build process required."

🔧 Technical Excellence

What makes this system special? It's all about the architecture decisions we made:

Shadow DOM Encapsulation: Every component is completely isolated, eliminating styling conflicts while maintaining optimal performance.

Progressive Enhancement: Components gracefully degrade when JavaScript fails, ensuring your content is always accessible.

Auto-Discovery System: Components automatically register themselves and handle dependencies—no manual configuration required.

Bulletproof Error Handling: Comprehensive fallback mechanisms mean your site keeps working even when individual components fail.

📊 Real-World Impact

The results from our integration testing speak volumes:

Category	Result
Performance	Optimal rendering across all deployment environments
Accessibility	WCAG 2.1 AA compliance achieved
Reliability	Graceful degradation in all failure scenarios
Developer Experience	Simple attribute-based configuration

🎨 Why This Matters

For too long, web components have been either overly complex or insufficiently robust for enterprise use. We've solved both problems:

For Developers: No build process, no compilation, no complex toolchains. Just drop components into your HTML and they work.

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

For Users: Lightning-fast loading, perfect accessibility, and experiences that work everywhere.

🚀 What's Next?

Phase 2 development is already underway with 5 additional components in the pipeline, plus analytics integration and A/B testing frameworks.

Want to learn more about our component system? Visit Cielo Vista Software or connect with me to discuss how these solutions can transform your development workflow.

Best Way to Fly

JWP — 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

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

CSS Selectors

30 Python Libraries

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

30 Python Libraries

The Platform Explosion: A Fragmented Tech Landscape

JWP — Tue, 25 Feb 2025 16:27:01 +0000

In the past few years, we've witnessed an explosion of platforms across multiple domains: AI chatbots, code generation tools, operating systems, and even terminal environments.

With each innovation, developers find themselves navigating an increasingly complex and fragmented ecosystem. Whether you're leveraging AI-powered assistants like ChatGPT, Claude, or DeepSeek, or choosing between Windows, Linux, or macOS for development, the choices seem endless.

In this article, we’ll explore this rapid expansion, its impact on developers, and strategies to stay productive amid the fragmentation.

AI Assistants & Code Generation: The Wild West of AI

Learning to effectively use AI tools can take anywhere from a few days to weeks, depending on familiarity with AI-assisted development and the complexity of the projects undertaken.

The AI revolution has brought an influx of tools designed to assist developers, each with its own strengths and weaknesses:

ChatGPT (OpenAI): One of the most widely used AI models, offering a mix of natural language assistance, coding help, and creative brainstorming.
Claude (Anthropic): Focused on safety and thoughtful AI responses, Claude provides a different approach to AI-powered interaction.
Sonnet (Google DeepMind): Part of Google’s Gemini AI ecosystem, Sonnet is an alternative to OpenAI’s models.
DeepSeek (Open-source): An emerging model with a focus on transparency and accessibility.
GitHub Copilot & Codeium: AI-assisted coding companions that provide real-time suggestions, helping developers write better code faster.

With so many AI assistants, developers must choose tools that align with their workflows. Some prefer OpenAI’s GPT for its large context window, while others favor Claude for its nuanced reasoning.

The challenge? Balancing AI assistance with actual coding skills to avoid over-reliance on these tools.

The Never-Ending OS Battle: Windows, Linux, macOS, Android, iPhone

Mastering an operating system environment for development can take months to years, as it involves understanding system internals, security, and optimization techniques.

For decades, developers have debated the merits of various operating systems. Today, the battle rages on:

Windows: Dominates in enterprise environments, with strong compatibility for .NET development and gaming.
Linux: The go-to choice for backend developers, server administrators, and those who prefer an open-source ecosystem.
macOS: The preferred OS for many mobile and web developers due to its Unix-based environment and seamless Apple ecosystem integration.
Android: The dominant mobile OS worldwide, widely used for app development with Kotlin and Java.
iPhone (iOS): Apple's mobile operating system, essential for Swift and Objective-C development.

The rise of containerization (Docker, Kubernetes) and cross-platform development tools (WSL, macOS virtualization, Windows Subsystem for Linux) helps bridge the gap, but OS choice still matters when it comes to compatibility and performance.

The Terminal Landscape: Bash, Zsh, PowerShell, Oh My!

Becoming proficient in terminal usage can take weeks to months, with advanced scripting skills requiring even more time to master.

Even something as fundamental as the terminal experience is no longer a one-size-fits-all decision. Developers now juggle:

Bash: The standard for Linux and macOS users, deeply integrated into the Unix philosophy.
Zsh: A more user-friendly and customizable alternative, often paired with Oh My Zsh.
PowerShell: The go-to shell for Windows users, offering deep integration with the Microsoft ecosystem.
Warp & Alacritty: New terminal experiences focused on modern developer workflows.

GitHub Codespaces: The Future of Cloud Development

GitHub Codespaces is transforming the way developers work by providing a fully-configured cloud-based development environment.

Developers can write, build, test, and deploy applications from anywhere, streamlining collaboration and reducing onboarding time.

Learning GitHub Codespaces can take a few days for basic workflows, but mastering its full potential—custom dev containers, pre-built configurations, and automation—can take weeks to months.

The Cloud: A Career in Itself

Cloud expertise is often a multi-year journey, requiring certification, hands-on experience, and ongoing learning as cloud technologies continuously evolve.

Cloud computing has become the backbone of modern software development. Each major cloud provider offers its own ecosystem, requiring specialized knowledge:

Amazon Web Services (AWS): The market leader in cloud computing.
Microsoft Azure: Preferred by enterprises using Microsoft technologies.
Google Cloud Platform (GCP): Known for AI and data analytics.
IBM Cloud & Oracle Cloud: Targeted at industries with high regulatory requirements.
Hybrid & Multi-Cloud: Many businesses now mix cloud providers, leading to new roles for cloud architects.

Navigating the Fragmentation: Strategies for Developers

Developers are increasingly becoming tool engineers who must make disparate systems communicate.

Here’s how to stay productive:

Tool Engineering: Mastering integration between platforms, APIs, and cloud services.
Standardize Your Toolset: Avoid unnecessary complexity by sticking to a core set of tools.
Leverage Cross-Platform Technologies: Use Docker, WSL, or cloud environments to reduce dependency.
Stay Flexible & Open to New Technologies: The tech landscape evolves rapidly.
Use AI as an Assistant, Not a Crutch: AI should enhance productivity, not replace critical thinking.

Summary: How Long to Become an SME?

With so many technologies discussed, becoming a subject matter expert (SME) in each one varies:

AI Assistants (ChatGPT, Claude, Sonnet, DeepSeek, Copilot, Codeium) → Weeks to months
Operating Systems (Windows, Linux, macOS, Android, iOS) → Months to years
Terminals & Shells (Bash, Zsh, PowerShell, Warp, Alacritty) → Weeks to months
Cloud Platforms (AWS, Azure, GCP, IBM Cloud, Oracle Cloud, Multi-Cloud) → Multi-year journey
Cloud Development Tools (GitHub Codespaces) → Days to months

How long will it take to master them all? The ever-evolving tech landscape means learning never stops!

🚀 How are you navigating this evolving tech landscape? Share your thoughts in the comments below! 🚀

Navigating the Pressure of Delivery: A Software Developer's Perspective

JWP — Sun, 23 Feb 2025 20:52:06 +0000

The world of software development is fast-paced and dynamic, and the pressure to deliver high-quality code under tight deadlines is a constant challenge. While many of the strategies to manage this pressure—such as agile methodologies, automation, and sprint planning—are owned by product managers, scrum teams, and managers, individual developers still play a critical role in execution. At the same time, it's essential that those leading the process—particularly scrum leaders—champion practices that safeguard the team's well-being.

Understanding the Developer's Dilemma Developers often find themselves caught between high expectations and processes that are set by others:

High Expectations, Tight Deadlines:
Stakeholders demand robust, bug-free code, yet the sprint goals and timelines are defined by the broader team.

Continuous Learning vs. Immediate Delivery: While technology evolves at breakneck speed, developers must integrate new tools and practices without compromising on delivery.

Quality vs. Quantity:
Even as you focus on writing excellent code, overall productivity is measured by sprint progress and organizational goals.

Recognizing Shared Ownership It’s important to acknowledge that many of the practices meant to manage delivery pressure are determined by others:

A. Agile Processes and Sprint Goals:
Agile teams rely on iterative sprint planning and backlog grooming rather than traditional milestones. These strategies are shaped by product managers and scrum teams.

B. Automation and DevOps Practices:
Although developers contribute technically, decisions about CI/CD pipelines and automated testing tools are typically made at the management level.

C. Sprint Planning and Backlog Prioritization:
Priorities are set through collective decision-making, allowing developers to concentrate on execution rather than planning.

What Developers Can Do Even when key processes are outside your direct control, you still have significant influence over your work. Here are some steps you can take:

A. Communicate Openly
Share your insights and challenges with managers and scrum teams.
Provide constructive feedback if sprint goals seem unrealistic or processes inefficient.

B. Focus on What You Can Control

Code Quality: Maintain high standards through code reviews, pair programming, and automated testing.
Efficient Workflows: Streamline your development process and advocate for tools that reduce repetitive tasks.
Self-Care: Prioritize work-life balance to maintain productivity and avoid burnout.

C. Participate in Continuous Improvement

Offer feedback during retrospectives to help shape more sustainable workflows.
Use your hands-on experience to suggest process adjustments.

D. Cultivate a Collaborative Culture
Recognize that successful delivery is a team effort.

Foster open communication and collaboration to ensure that everyone's perspective is considered.

What Scrum Leaders Must Do

Scrum leaders play a pivotal role in bridging the gap between strategic planning and execution. They should:

Remove Impediments:

Actively identify and eliminate obstacles that hinder the team’s progress, ensuring developers can focus on coding.
Advocate for Realistic Goals:
Collaborate with product managers and stakeholders to set achievable sprint goals that consider the team’s capacity and technical challenges.
Foster Open Communication:
Create an environment where concerns can be voiced without fear, ensuring that feedback from developers is integrated into planning and retrospectives.

Champion Team Well-Being:
Recognize early signs of burnout and promote a balanced work-life approach to maintain long-term productivity.

Turning Pressure into a Collective Strength The pressure to deliver in software development is inevitable, but when managed collectively, it can drive innovation and efficiency rather than leading to burnout. By focusing on what you can control, communicating effectively, and ensuring that leadership takes its share of responsibility, teams can transform delivery pressure into a catalyst for success.

Conclusion
Software developers face immense pressure to deliver exceptional work under challenging conditions. While many processes—like agile sprint planning—are managed by product managers and scrum teams, developers have a vital role in executing quality code and offering constructive feedback. Moreover, scrum leaders must actively remove impediments, set realistic goals, and foster an environment that values both performance and well-being.

In summary:
Failure to implement the crucial first step in what scrum leaders must do—removing impediments (E.1)—can set developers up for inevitable failure. If these obstacles remain unaddressed, developers will continually be hindered in their ability to deliver, eventually leading to missed deadlines, compromised code quality, and, ultimately, the risk of being fired.

Hallucination Engineer

JWP — Thu, 20 Feb 2025 21:59:35 +0000

In the realm of software development, the coveted title of Senior Software Engineer once symbolized expertise forged through tech migrations, legacy code revamps, and battles against imposter syndrome. However, in today's AI-driven landscape, a new persona emerges: the Senior Hallucination Engineer.

Diving into the Modern Tech World

🤓 Senior Software Engineer

✅ Writes, tests, and deploys code
✅ Resolves real-world bugs 🐞
✅ Applies algorithms to problem-solving
✅ Seeks assistance on Stack Overflow
✅ Assesses pull requests
✅ Enhances performance
✅ Addresses runtime errors

🤯 Senior Hallucination Engineer

✅ Writes, debugs, and interprets AI-generated illusions
✅ Rectifies AI-conjured hallucinations 👻
✅ Utilizes logic to unravel AI "creativity"
✅ Consults ChatGPT, then validates all content
✅ Reviews AI-spun narratives camouflaged as code
✅ Optimizes prompts to prevent AI from crafting new programming languages
✅ Tackles AI hallucinations pre-production

Crucial Duties of a Senior Hallucination Engineer

✅ Crafting Effective Prompts – Tailoring prompts for practical AI responses, not poetic C++ creations.
✅ Detecting Illusions – Distinguishing genuine AI outputs from "100% confidence" fabrications.
✅ Combatting GPT Fabrications – Addressing instances where AI asserts 2 + 2 = 5 with 80% confidence.
✅ Unraveling AI Logic – Deciphering why AI deemed an infinite loop a viable choice.
✅ Managing Expectations – Clarifying to management that AI complements, not replaces, developers, albeit adding to our workload.

The Future of Software Engineering?

As AI assumes a larger development role, engineers transition from coding to curation. Rather than meticulously crafting every code line, we now guide AI-generated concepts towards functionality, all while guarding against its vivid imagination.

So, the next time you see a Senior Software Engineer job posting, don’t be surprised if it includes “Experience in identifying and debugging AI hallucinations.” Welcome to the future of software development! 🚀

Create a Question/Answer Chatbot in Python

JWP — Wed, 11 Sep 2024 18:40:29 +0000

Using the NTLK Natural Language Toolkit

Step 1: Install Required Libraries

pip install nltk

Step 2: Import Libraries and Prepare Data

In this example, we’ll use NLTK for tokenization and some basic text processing.

import nltk
from nltk.chat.util import Chat, reflections

Download the NLTK tokenizer

nltk.download('punkt')

Step 3: Define Chatbot Responses

You'll create a list of patterns and corresponding responses. The chatbot will match user input against the patterns and provide the appropriate response.

Define the patterns and responses

pairs = [
    [
        r"my name is (.*)",
        ["Hello %1, how can I help you today?",]
    ],
    [
        r"hi|hey|hello",
        ["Hello! How can I assist you?",]
    ],
    [
        r"what is your name?",
        ["I am a chatbot created to assist you.",]
    ],
    [
        r"how are you?",
        ["I'm just a program, but thanks for asking!",]
    ],
    [
        r"sorry (.*)",
        ["No problem!",]
    ],
    [
        r"bye|goodbye",
        ["Goodbye! Have a nice day!",]
    ],
    [
        r"(.*) your (.*) favorite color?",
        ["I don't have preferences, but what's yours?",]
    ],
    [
        r"(.*)",
        ["I'm sorry, I don't understand that. Can you ask something else?",]
    ],
]

Initialize reflections and chatbot

python chatbot = Chat(pairs, reflections)

Step 4: Run the Chatbot

Finally, create a loop that allows users to interact with the chatbot.


def chatbot_conversation():
    print("Welcome to the Python Chatbot! Type 'bye' to exit.")
    while True:
        user_input = input("You: ")
        if user_input.lower() == 'bye':
            print("Chatbot: Goodbye!")
            break
        else:
            response = chatbot.respond(user_input)
            print(f"Chatbot: {response}")
#start
chatbot_conversation()

Step 5: Test Your Chatbot

Run the script, and you should be able to interact with your basic Python chatbot. The chatbot will respond based on the predefined patterns and responses.

Expanding the Chatbot
You can expand this chatbot by adding more complex patterns, integrating machine learning models for better understanding, or even using APIs like OpenAI's GPT for more advanced interactions.

Let me know if you need further help with this or any other enhancements!

Free online Maui discussion 09/12/24 10:00am CST

JWP — Tue, 10 Sep 2024 19:20:00 +0000

https://www.linkedin.com/events/freemauiintroduction7238972144041312256/

30 Minute demo. Open for questions afterward.

Separation of Concerns

JWP — Sat, 31 Dec 2022 18:26:26 +0000

One of the best things I've learned in my career is the Separation of Concerns Principal which guides us in setting up some rules for our web component (WC) library.

Rules

Here's the first three rules we will follow:

Use convention over configuration
All functions or methods to have only one concern.
Function or Method names must be carefully determined. This communicates what it does. It's a huge clue to developers down the road.

Convention over Configuration

Our convention, in order:

Declare a custom Element: customElements.define(
Define the tag name such as bing-search and remember it must have a hyphen. The tag name should always describe its sole function.
Declare a class and extend from HtmlElement as shown:

customElements.define(
  "bing-search",
  class extends HTMLElement {
    constructor() {
      super();
      this.initializeElements();
      this.addEventHandlers();

Add a constructor with the first line being this: super(); This is a requirement of WC.
Create generic method names that will be used in all other WCs where needed.

Functions Have One Responsibility

Don't write monolithic code unless you want a new job.

We can avoid this by using the Single Responsibility Principle; which works at both the ECMA module layer as well as the class and function layers.

The initializeElements Function

Notice this method initializes components by creating them and then adding them to the WC.

It does not do anything else!

    initializeElements() {
      this.bingsearch = "bingsearch";
      this.input = document.createElement("input");
      this.input.id = this.bingsearch;
      this.input.title = this.bingsearch;
      this.input.type = "input";
      this.input.value = this.getAttribute("searchstring");

      this.button = document.createElement("input");
      this.button.type = "submit";
      this.button.value = "Submit";
      this.bingsearchsubmit = "bingSearchSubmit";
      this.button.id = this.bingsearchsubmit;

      this.appendChild(this.input);this.appendChild(this.button);
    }

The addEventHandlers Function

addEventHandlers() {
      this.addEventListener("change", function (ev) {
        let element = ev.target;
        if (ev.target.id == this.bingsearch) {
          this.OpenSearch();
          return;
        }
      });

      this.addEventListener("click", function (ev) {
        let element = ev.target;
        if (ev.target.id == this.bingsearchsubmit) {
          this.OpenSearch();
          return;
        }
      });
    }

Both of these methods are different ways of doing the same thing, that's why we have a function named OpenSearch.

The OpenSearch Function

This function has a single responsibility, but was called in two different ways; therefore, it must be able to service both callers.

    //searchPattern = "https://www.bing.com/search?q=";
    OpenSearch() {
      let searchtext = this.input.value;
      let replaced = searchtext.replace(" ", "+");
      let url = `${this.searchPattern}${replaced}`;
      let win = window.open(url);
    }

The GUI

The Result

How to Reuse this WC

In your HTML just import the bingsearch.js script, and make a reference to <bing-search>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="bingsearch.js" defer></script>
    <title>Display Grid</title>
</head>
<body>

<h1>Bing Search</h1>
 <bing-search searchstring="single responsibility"></bing-search>
</body>
</html>

The Element View

Notice anything missing? Well yes we should always include ids and or names and titles on our custom elements.

Styling

JWP — Sat, 31 Dec 2022 00:36:22 +0000

In the previous article we introduced the Display-Grid Web Component which supports markup like this:

<display-grid>  
    <grid-col>Column A
        <p>Lorem ipsum...</p>
        <a href="SomeURL">Go Here</a>
    </grid-col>     
    <grid-col>Column B
        <p>Lorem ipsum...<p>
    </grid-col>
    <grid-col>Column C
        <p>Lorem ipsum...</p>
        <p>Lorem ipsum ...</p>
    </grid-col>     
</display-grid>

Automatic Styling

The idea is to allow for automatic CSS Grid markup; which looks like this, for three columns.

The number of columns are based on the number of <grid-col> subelements.

In the original article there was a bug related to the shadow root.

We Found a Bug

Not having a full understanding of
const shadowRoot = this.attachShadow({mode:"open"});
We created the shadowRoot the parent (display-grid) and one for each sub-element (grid-col).

The impact of this was indeterminate view rendering; which, was highly dependent on element and child element placement!

The fix was to not open up any shadowRoots!

The Fix

We wanted the parent (display-grid) to set all styling for itself and all it's (grid-col) children.

In the master (display-grid) element, we removed the shadowRoot code like this:

customElements.define(
  "display-grid",
  class extends HTMLElement {
    constructor() {
      super();
      //const shadowRoot = this.attachShadow({mode: 'open'});
      this.SetStyleByColumns();
    }

SetStyleByColumns

Then we altered this styling for this (parent) element and all the (grid-col) elements.

/**Based on the number of grid-col elements set up the grid column count to match */
SetStyleByColumns() {
  //grid-col is a custom element
  let cols = document.querySelectorAll("grid-col");
  // numberOfColumns returns something like "auto auto auto" for 3 columns
  const textContent = this.getStyleByCols(cols);
  this.style= document.createElement("style").textContent=textContent;
  for (let col of cols) {
    col.style = document.createElement("style").textContent = "padding:2rem;";

  }
}
getStyleByCols(cols) {
  var numberOfColumns = this.GetNumberOfGridColumnsToAdd(cols);
  var style = `background-color:#444;
    color:white;
    display:grid; 
    grid-template-columns:${numberOfColumns};
  `;
  return style;
}

GetNumberOfGridColumnsToAdd(cols) {
  var AutoCount;
  cols.forEach((item) => {
    if (AutoCount == undefined) {
      AutoCount = "auto ";
      return;
    }
    AutoCount += "auto ";
  });
  return AutoCount;
}

The result of the code above for the Display-Grid element:

And for each (grid-col) element:

The HTML Result

The Rendering

This taught us that we don't have a good understanding of how the shadowroot works. For now we don't need it and will study it later.

Other Information

This design is ok but not great. Due to specificity rules; by placing the styling at the element layer, there is nothing the user can do to override this except perhaps using the (forbidden?) !important keyword.

We could add a class style and test in lab to see if this opens a path for better user control.

No Binding

Another unforeseen issue in this design, is that it does not separate the data from the GUI, this means that something simple like sorting data (not needed for this example) is impossible. This current design re-renders all of the markup each time this page is reloaded.

In order for these components to be reusable, there must be considerations for easily styling this component for any situation. After all, Web Components are meant to be reused.

Display-Grid

JWP — Thu, 29 Dec 2022 23:41:58 +0000

Is there a way we can automatically utilize the grid css component but do it using only HTML?

    <display-grid>  
        <grid-col>Column a
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum inventore earum illo ipsam perferendis, totam, fugiat consectetur fugit consequatur id dolore alias autem expedita aliquid unde ea? Illo, facere animi!</p>
          <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">Using Grid Layout</a>
        </grid-col>     
        <grid-col>Column b
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi quia explicabo earum delectus sequi ex, facilis, incidunt harum quas impedit repellendus in error ullam illo deleniti ab enim, temporibus vero?</p>
        </grid-col>
        <grid-col>Column c
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit reiciendis laudantium ullam nam cumque laborum consectetur provident deleniti adipisci praesentium officiis quod sint commodi repudiandae sapiente, aperiam tenetur velit. Qui!</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque tempore, id corporis nisi mollitia saepe distinctio eius quia adipisci quas porro est nobis, vero molestias. Itaque mollitia at nulla incidunt.</p>
        </grid-col>     
    </display-grid>

The HTML above is saying "Display a Grid" and these are the grid columns.

The CSS is dynamically generated which makes thing seem to work well.

Defining the Web Component

customElements definition and the class with constructor:

customElements.define(
  "display-grid",
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: "open" });
      this.SetStyleByColumns(shadowRoot);
    }

Dynamically Setting the Style

    /**Based on the number of grid-col elements set up the grid column count to match */
    SetStyleByColumns(shadowRoot) {
      let cols = document.querySelectorAll("grid-col");
      var numberOfColumns = this.GetNumberOfGridColumnsToAdd(cols);
      var style = `
       display:grid; grid-template-columns:${numberOfColumns};
     `;
     const div = document.createElement("div");
     div.setAttribute("style", style);
     shadowRoot.appendChild(div);
      for (let col of cols) {
        var text = col.textContent;
        div.appendChild(col);
      }
    }

Get the proper number of Auto strings to add...

    GetNumberOfGridColumnsToAdd(cols) {
      var AutoCount;
      cols.forEach((item) => {
        if (AutoCount == undefined) {
          AutoCount = "auto ";
          return;
        }
        AutoCount += "auto ";
      });
      return AutoCount;
    }
  }

What's grid-col?

A simple definition of a new Web Element name. Nothing else.

customElements.define(
  "grid-col",
  class extends HTMLElement {
    constructor() {
      super();
    }
  }
);

How do I constrain the layout

Simply wrap display-grid with a div styled the way you want.<div id="container"> <display-grid> </div>