Place button on wiki Page.

Kalai Arasan

By: kalaiarasanpandi

10 January 2025 at 14:14

I got a task, that to add a cody in wiktionary side. For do this we have knowledge of Wiki Gadget.

Create an Account on wiki page:

If we want to change in wiki page. First we want to create account in wiki.
Then we create a own javascript page for make change.
The changes can be seen in our page only.
If we want to change globally, i have a knowledge of Gadget_kitchen in wiki.

Find the place that have to change

Go to wiktionary site and seach any word it.
open F12 to view inspect and find the place heading usi.
I found in
- body -> div(mw-page-container) -> div(mw-page-container-inner) -> div(mw-content-container) ->main -> header.
- header contains nav, h1, div(title-shortlink-container), div(vector-dropdown.
- h1 must be copy and button place near to h1 or div(title-shortlink-container).

Create common.js page and paste the code

After create account on Wiktionary.
Type this url :https://en.wiktionary.org/wiki/User:UserName/common.js.
Re-place the UserName with your userName.
Paste the below code on the editor.

Code:

const observer = new MutationObserver(() => {
    const heading = document.querySelector(".title-shortlink-container");
    if (heading) {
        // Create the button element
        const button = document.createElement("button");
        button.textContent = "Copy Text";
        button.style.marginLeft = "10px"; // Add some spacing from the container

        // Insert the button next to the .title-shortlink-container
        heading.insertAdjacentElement("afterend", button);

        // Add an event listener to copy the text
        button.addEventListener("click", () => {
            const textToCopy = heading.textContent.trim(); // Get only the container's text
            navigator.clipboard.writeText(textToCopy).then(() => {
                alert("Text copied: " + textToCopy);
            }).catch(err => {
                console.error("Failed to copy text: ", err);
            });
        });

        observer.disconnect(); // Stop observing once the element is found
    }
});

// Observe the document for dynamic changes
observer.observe(document.body, { childList: true, subtree: true });

Code Explanation :

Use Document. querySelector for get the element of the .title-shortlink-container class. This class is for shortURL className and assign to variable Heading.
If the Heading is not null. Then we create the button and styles.
The Button is placed next to link. Use heading.insertAdjacentElement(“afterend”, button);
Button action create a function in addEventListener.
Get the link by heading.textContent and store in textToCopy
For copy the text use navigator.clipboard.writeText(textToCopy)
Then pop alert for the event.
if error catch throw error message.

Problem faced (dynamically loaded content)

First i use DOMContentLoaded. It cannot work in wiki.
Then i use Polling (Setintervel for a Certain time). It works partcially.
Then i use MutationObserver. I works perfectly to all pages.

Reference:

https://ta.wikipedia.org/wiki/Special:MyPage/common.js

https://stackoverflow.com/questions/24344022/how-to-use-mutationobserver

https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript

Place button on wiki Page.

Journey of Full stack developer

By: kalaiarasanpandi

10 January 2025 at 14:14

I got a task, that to add a cody in wiktionary side. For do this we have knowledge of Wiki Gadget.

Create an Account on wiki page:

If we want to change in wiki page. First we want to create account in wiki.
Then we create a own javascript page for make change.
The changes can be seen in our page only.
If we want to change globally, i have a knowledge of Gadget_kitchen in wiki.

Find the place that have to change

Go to wiktionary site and seach any word it.
open F12 to view inspect and find the place heading usi.
I found in
- body -> div(mw-page-container) -> div(mw-page-container-inner) -> div(mw-content-container) ->main -> header.
- header contains nav, h1, div(title-shortlink-container), div(vector-dropdown.
- h1 must be copy and button place near to h1 or div(title-shortlink-container).

Create common.js page and paste the code

After create account on Wiktionary.
Type this url :https://en.wiktionary.org/wiki/User:UserName/common.js.
Re-place the UserName with your userName.
Paste the below code on the editor.

Code:

const observer = new MutationObserver(() => {
    const heading = document.querySelector(".title-shortlink-container");
    if (heading) {
        // Create the button element
        const button = document.createElement("button");
        button.textContent = "Copy Text";
        button.style.marginLeft = "10px"; // Add some spacing from the container

        // Insert the button next to the .title-shortlink-container
        heading.insertAdjacentElement("afterend", button);

        // Add an event listener to copy the text
        button.addEventListener("click", () => {
            const textToCopy = heading.textContent.trim(); // Get only the container's text
            navigator.clipboard.writeText(textToCopy).then(() => {
                alert("Text copied: " + textToCopy);
            }).catch(err => {
                console.error("Failed to copy text: ", err);
            });
        });

        observer.disconnect(); // Stop observing once the element is found
    }
});

// Observe the document for dynamic changes
observer.observe(document.body, { childList: true, subtree: true });

Code Explanation :

Use Document. querySelector for get the element of the .title-shortlink-container class. This class is for shortURL className and assign to variable Heading.
If the Heading is not null. Then we create the button and styles.
The Button is placed next to link. Use heading.insertAdjacentElement(“afterend”, button);
Button action create a function in addEventListener.
Get the link by heading.textContent and store in textToCopy
For copy the text use navigator.clipboard.writeText(textToCopy)
Then pop alert for the event.
if error catch throw error message.

Problem faced (dynamically loaded content)

First i use DOMContentLoaded. It cannot work in wiki.
Then i use Polling (Setintervel for a Certain time). It works partcially.
Then i use MutationObserver. I works perfectly to all pages.

Reference:

https://ta.wikipedia.org/wiki/Special:MyPage/common.js

https://stackoverflow.com/questions/24344022/how-to-use-mutationobserver

https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript

ANAND SUNDARAMOORTHY SA
Why HTML, CSS is a foundation for Web Development
5 December 2024 at 17:39

Why HTML, CSS is a foundation for Web Development

ANAND SUNDARAMOORTHY SA

By: ANAND SUNDARAMOORTHY SA

5 December 2024 at 17:39

In the vast world of web development, HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) serve as the fundamental building blocks for creating websites. Why HTML and CSS are not replaceable?

Any idea about it?

Today in the blog we did not discuss the boring history of web development. We discuss why HTML and CSS are a base for web development. Even in advanced technologies Like React JS and Angular JS, the base is HTML and CSS. Come on guys, let’s take a dive.

As a small Intro, HTML is the backbone of any webpage. It provides the structure, content, and layout for web pages by using a set of predefined tags and elements. As simple it’s a Skeleton for the Webpage.

CSS controls the visual presentation of the HTML structure. It defines how the HTML elements should be styled, such as their colors, fonts, spacing, and layout. Here CSS is simply the Skin for Webpage.

Even with the advent of advanced frameworks like React.js, Vue.js, and Angular.js. HTML and CSS remain irreplaceable because these technologies operate on top of them. Every framework and library still relies on HTML for structure and CSS for styling. For example,

Normal HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

In React:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Example</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const App = () => {
            return (
                <div>
                    <h1>Hello, World!</h1>
                </div>
            );
        };

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>

</html>

Here you see guys, the React is written under the HTML. Why?

In the beginning stage of web development, they start with HTML and CSS only. Then, as it continued evolving, it became base and mandatory. So, only use any frameworks in any language.

Like

Python — Flask, Django

Java — Spring, Spring Boot

JavaScript — React JS, Angular JS.

They paired/collaborated with HTML and CSS.

Finally, I think we understand, that HTML and CSS will always remain the core of web development, no matter how advanced frameworks or libraries become. These foundational technologies are irreplaceable because they provide the structure and styling necessary for any web page. While tools like React, Angular, and Vue offer enhanced functionality and interactivity, they still rely on HTML for content structure and CSS for styling. As web technologies continue to evolve, HTML and CSS will adapt, but their fundamental role in web development will never change. So, mastering these technologies is essential for every web developer, as they are the building blocks that power the internet.

VS Raj
HTML- ChessBoard
10 January 2025 at 02:57

HTML- ChessBoard

VS Raj

By: vsraj80

10 January 2025 at 02:57

<!DOCTYPE html>

<html>

<head>

<style>

html{

background-color: gray;

}

body{

width:400px;

height:400px;

margin:0 auto;

margin-top: 50px;

background-color: red;

}

.row{

width:50px;

height:50px;

float:left;

}

.color1{

width:50px;

height:50px;

background-color:white;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

.color2{

width:50px;

height:50px;

background-color:red;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Elavarasu
JAVASCRIPT
25 October 2024 at 09:56

JAVASCRIPT

Elavarasu

By: Elavarasu

25 October 2024 at 09:56

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

Chrome – V8-engine
Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

Variables declared outside any function or block have global scope.
These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

Variables declared within a function are local to that function.
They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

Elavarasu
JAVASCRIPT
25 October 2024 at 09:56

JAVASCRIPT

Elavarasu

By: Elavarasu

25 October 2024 at 09:56

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

Chrome – V8-engine
Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

Variables declared outside any function or block have global scope.
These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

Variables declared within a function are local to that function.
They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

Normal view

Create an Account on wiki page:

Find the place that have to change

Create common.js page and paste the code

Code:

Code Explanation :

Problem faced (dynamically loaded content)

Reference:

Create an Account on wiki page:

Find the place that have to change

Create common.js page and paste the code

Code:

Code Explanation :

Problem faced (dynamically loaded content)

Reference: