Amit Padhiyar - Saatody

Today, The HTML canvas is very useful element for all developers who are creating web games, web controls, and web tools. In this post, I will explain about small use (but very important) of HTML Canvas is Convert HTML canvas (2d shapes and image) to image format and save image output in your device (local memory / hard drive / memory card). See the below three images All images file name is below with its URL. Picture1.png: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge9MKEaMz95QfnJ9V8_dB0keUqzrRONXVhNMf0Jjd70JCR2y9yD9Y7xhszimwpCjFCjysS3aulEdqXfC7INlU7qxi9B_PYoJ_Qrpf7NWyNtE8sRmjyNI4qoiLlVrQOvKIIxbjAuhx3nom7/s764/Picture1.png Picture2.png:  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSVJGrvKBqVHFYd0XF6F8qZ-q8upO19r0ApVMTe_A4b6HlD7KAjP2ivvNSzbQbs-oues6kTNaSjphuRYdewEnY20s1QDYRLuf2akkg4p3d2ahYUX8zrBp5EjeyAlyjPdveXVKDMRwtkYX6/s683/Picture2.png Picture3.png:  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5uvMT6462oSgXFOA6yRA6zXR-iB79VOIIoZYe0vYV

<div id="textbox" contenteditable="true">This is a paragraph. It is editable. Try to change this text.</div> <script> var textbox = document.getElementById("textbox"); textbox.addEventListener("keydown",function(event){ if(event.keyCode == 13){ var enterChar = String.fromCharCode(13); var regExp = new RegExp(enterChar,"g"); textbox.innerHTML = textbox.textContent.replace(regExp,""); } }); </script>

for(let i = 0; i < mostrarString.length; i++) { //break each sentence down to its own array of words let splitString = mostrarString[i].split(" "); let rebuiltString = ''; for(let j = 0; j < splitString.length; j++) { //if the word matches palabra variable and is the first occurrence in the sentence if(splitString[j] === palabra && splitString.indexOf(splitString[j]) === j){ //wrap it in a span tag rebuiltString += `<span style="color:red">${splitString[j]}</span>` } else { //otherwise add to new string as is rebuiltString += splitString[j] } //add a space except after last word if(i !== splitString.length - 1) { rebuiltString += " " } } const newItem = document.createElement('li'); //set the string as the innerhtml so the span tag renders newItem.innerHTML = rebuiltS

Shadow DOM is second most useful feature for web components after custom elements. It is useful for markup structure, style, and behavior hidden and separate from other code on the page. In short, It is known as encapsulation. Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (75 and onwards) supports it too; the old Edge didn't. The Shadow DOM is not new thing for browsers. Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree. This shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM. Shadow DOM Shadow host: The regular DOM node that the shadow DOM is attached to. Shadow tree: The DOM tree inside the shadow DOM. Shadow boundary: The place where the shadow DOM ends, and the regular DOM begins. Shadow root: The root node of the shadow tree. First we create simple custom element.

You can define several different callbacks inside a custom element's class definition, which fire at different points in the element's lifecycle. connectedCallback: Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. disconnectedCallback: Invoked each time the custom element is disconnected from the document's DOM. adoptedCallback: Invoked each time the custom element is moved to a new document. attributeChangedCallback: Invoked each time one of the custom element's attributes is added, removed, or changed. Which attributes to notice change for is specified in a static get observedAttributes method In Short... connectedCallback: Invoked when the custom element is first connected to the document's DOM. disconnectedCallback: Invoked when the custom element is disconnected from the document'

Define class with class name and outside of the define() function is the best way to create custom element. <script> class HelloMSG extends HTMLElement{ constructor(){ super(); console.log("constructor"); } } window.customElements.define("hello-msg",HelloMSG); </script> There is one thing that prove why i recommended to define HTML custom element like this. <script> const msg = new HelloMSG(); document.body.appendChild(msg); </script> For append my HTML custom element using JavaScript.

CustomElementRegistry The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. But, The CustomElementRegistry function, which is currently experimental (Expect behavior to change in the future). The CustomElementRegistry is available through the window.customElements property. Methods In my browser, The CustomElementRegistry can't work properly. So i will not use this property and i recommended window.customElements instead of CustomElementRegistry. CustomElementRegistry.define() CustomElementRegistry.get() CustomElementRegistry.upgrade() CustomElementRegistry.whenDefined() window.customElements The customElements read-only property of the Window interface returns a reference to the CustomElementRegistry object, which can be used to register new custom elements and get information about previously registered custom elements. How to check the window.customElements return CustomElementRegistry? There i

Web Components are set of features or suite of different technologies that allowing to create, encapsulation and interoperability of reusable HTML custom elements. There are main three technologies to create Web Components. Custom Elements Shadow DOM HTML Templates Custom Elements A set of JavaScript APIs that allow you to define custom elements and their behaviour. There are two parts to Custom Elements: autonomous custom elements and customized built-in elements. Autonomous custom elements are HTML elements that are entirely separated from native HTML elements; they are essentially built from the bottom up using the Custom Elements API. Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality. Shadow DOM A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element. And shadow DOM is a functionality that allows the web browser to render DOM elements without putting them into t

In this post, I am trying to create Blogger empty theme. So, This can help to make customize theme for Blogger. First, I will create Basic HTML Structure. HTML Basic Structure <!DOCTYPE html> <html> <head> </head> <body> </body> </html> This is simple structure. But still, This will give an error when we store it in Blogger theme editor. So what is the minimum requirement for creating empty theme? Put The XML Prolog At Top Of The Script It means Blogger theme markup is not in HTML but it is in XML format. It must come first in the document. <?xml version="1.0" encoding="UTF-8" ?> Put <b:skin> And <![CDATA[]]> In Head The <b:skin> is blogger API (Custome tag from Bloggger) that used for define CSS in your theme. While <![CDATA[]]> used for write data in between these strings includes data that could be interpreted as XML markup, but should not be.

GoraiyaJS will be web components based framework for front-end web designer. I am trying to include some basic and common component like Button, Label, TextInput, NumberInput, Checkbox, Radiobutton, and so on. Here is the little example of button.  If you want to add default button using GoraiyaJS then below little HTML code you will write and rest  (CSS and JavaScript) GoraiyaJS will handle. See at last demo of Button. The CSS and JavaScript will built-in inside GoraiyaJS Framework. So, It will become standard for your every websites. Program: <span class='gjs-button'> Button </span> Program: <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'/> <style> body{ padding:20px; font-family:roboto; } .gjs-button::selection{ background-color:transpare