Creating Web Component and deploying to github page!

Creating Web Component and deploying to github page

Posted by : spradeep on Nov 12, 2023

Category : Web Component, UI, github page

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

Here is an example of web component, The web component can be deployed in github page and source code is available for fork.

Create a Javascript file and define a class

class MyFirstWebComponent extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `<h1>Hi Pradeep Kumar Saraswathi</h1>`;
    }
  }
customElements.define('my-first-web-component', MyFirstWebComponent);

Create a html file to incluide JS code that creates a web component

<!doctype html>
<html>
  <head>
    <title>This is my first web component!</title>
    <script src="MyFirstWebComponent.js"></script>
  </head>
  <body>
    <my-first-web-component></my-first-web-component>
  </body>
</html>

If you want to try online fork this repo. and deploy it as a github page

https://github.com/pradeepin2/create-web-component/tree/main

About Pradeep Kumar Saraswathi

PMTS UI at Salesforce, based in California, United States

Email : pradeepin2@gmail.com

Website : https://spradeep.com

About Pradeep Kumar Saraswathi

Hi, I am Pradeep Kumar Saraswathi, globally renowned expert in Building Advanced Digital Platforms and Artificial Integration into Digital platforms with over 18 years of experience across B2B (Business-to-Business), B2C (Business-to-Consumer) and SaaS (Software as a Service) Industries and Technology. I have in-depth knowledge in architecting, developing, and implementing web-based user interfaces and advanced digital platforms, including Digital Experience Platforms, Content Management Platforms, and Analytics Platforms. my expertise drives digital transformation by revolutionizing how businesses interact with customers, ultimately creating significant competitive advantages in todays digital landscape. Currently, I serve as Principal Member of Technical Staff (PMTS) in Software Engineering at Salesforce. In this principal role, I am responsible for development of advanced digital platforms, specifically the Digital Experience Platform at Salesforce, enabling businesses to build digital experiences with clicks, not code. My work impacts millions of users monthly and supports billions of registered users, driving over a billion page views each month, showcasing my pivotal role in shaping the future of digital interactions at scale. Before joining Salesforce, I was an User Interface Architect at Gainsight, where I was responsible for the UI Architecture of Gainsight's Digital Analytics and Data Processing platforms, where my contributions were instrumental in shaping Gainsight’s platform, significantly improving functionality and impact on customer engagement and satisfaction. I have been an integral and played crucial role as part of a successful start-up to unicorn (valued at over $1 billion), from inception to acquisition. Alongside my corporate commitments, I am passionate about sharing my knowledge and experience in Digital experiences technology and AI Integration. I hold a patent for my innovation at work in Creating a Platform-agnostic WYSIWYG (what you see is what you get) Canvas. Which is an innovative methodology to enable customers to create their Digital experiences like Email, Website, Apps using Digital experience platform with clicks. I am member of W3C representing Salesforce in driving web standards. I have applied for patent for my novel methodoloy on Integration of AI into Digital experience platform, which enables customers to create Digital experiences like Email, SMS, Forms using Artificial Intelligence in Digital experience platform.

Categories

Web Component, UI, github page

Web Component, UI, github page, Typescript

Web Component, HTML Web Component, Javascript Web Component

Server Side Rendering, SSR, Web Component, HTML Web Component, Javascript Web Component

Client Side Rendering, CSR, Web Component, HTML Web Component, Javascript Web Component

Useful Links

Publications and Patents