Skriptx | How to create an cross platform android app with Apache Cordova

Lets follow the documentation from apache cordova

npm install -g cordova

cordova create MyApp

cordova platform add browser

cordova platform add android

Now navigate to your project root folder

npm install npm-run-all -D

Edit your package.json as below

“scripts”: {

“test”: “echo \”Error: no test specified\” && exit 1″,

“watch”: “chokidar \”www/**/*\” -c \”cordova prepare browser\””,

“run”: “cordova run browser”,

“start”: “npm-run-all –parallel watch run”

Execute npm start so you can start coding as required.

Download Android Studio and update the environment variables. Download Gradle binary and unzip it.

Update the path in Environment variables

You should not get any error on below commands

gradle -v

adb –version

sdkmanager –list

To install cmdline-tools

Goto Android Studio -> Tools -> SDK Manager and check and install the latest command line tool

To know the android sdk location use Android Studio -> Settings -> Android SDK

Now run cordova build android you shall get the apk file

Enable Developer Mode on your phone:

Go to: Settings > About phone > Tap "Build number" 7 times
Then go to: Settings > Developer options > Enable "USB debugging"

Connect your phone via USB

Open Command Prompt on your PC, navigate to your project directory:

cd platforms\android\app\build\outputs\apk\debug

Run the install command:

adb install app-debug.apk

Let’s customize your app’s name, icon, and that mysterious “watermark” icon (called the adaptive icon).

🎯 1. Change the App Name

The name “Hello Cordova” comes from your project’s default config.xml.

✅ Edit `config.xml` in the root of your project:

<name>Your App Name</name>

Example:

<name>Fart Madness</name>

Then rebuild your app:

cordova build android

🎨 2. Change the App Icon

Cordova uses a plugin called cordova-plugin-splashscreen and checks for icon definitions in config.xml.

✅ Step-by-step:

a) Create your icon:

Best size: 512×512 PNG
Save it as: res/icon.png

b) Install icon plugin (if not already):

cordova plugin add cordova-plugin-splashscreen

c) Update `config.xml` with icon definitions:

<platform name="android">
    <icon src="res/icon.png" density="mdpi" />
    <icon src="res/icon.png" density="hdpi" />
    <icon src="res/icon.png" density="xhdpi" />
    <icon src="res/icon.png" density="xxhdpi" />
    <icon src="res/icon.png" density="xxxhdpi" />
</platform>

You can also use tools like cordova-res to auto-generate icons.

💧 3. What Is That “Watermark” Icon?

That semi-transparent or background-layer icon is the adaptive icon — used in newer versions of Android (8.0+).

It consists of:

A foreground layer (your icon)
A background layer (optional background shape)

✅ Fix it properly:

Create two icons:

icon-foreground.png
icon-background.png

Use a plugin like:

cordova plugin add cordova-plugin-adaptive-icon

Or manually replace icons under:

platforms/android/app/src/main/res/mipmap-anydpi-v26/

Files:

ic_launcher.xml
ic_launcher_round.xml

You can generate adaptive icons using tools like:
👉 https://easyappicon.com/

✅ Summary:

What	Where to Change
App Name	`config.xml` → `<name>Your App Name</name>`
App Icon	Add icons and define in `config.xml` or use `cordova-res`
Adaptive Icon	Replace foreground/background icons in `res/` folder or use plugin

Let me know if you want help generating adaptive icons from your current logo — I can create the XML or guide you through it.

Working with arrays in JavaScript is common — but what happens when an array contains other arrays inside it? That’s called a nested array, and sometimes, you just want to flatten it into one single-level array.

In this post, we’ll explore:

✅ What it means to flatten an array
🔧 Different methods to do it
💻 JavaScript code examples

🧱 What is a Nested Array?

A nested array means an array that contains one or more arrays inside it. For example:

arr = [1, [2, 3], [4, [5, 6]]];

Your goal is to flatten it to:

[1, 2, 3, 4, 5, 6]

Have you ever wondered whether the binary representation of a number is the same forwards and backwards? That’s exactly what a binary palindrome is!

In this blog, we’ll walk through:

✅ Converting a number into binary
🔍 Checking if the binary number is a palindrome
💻 Writing a simple Python program to do both

🔢 What is Binary?

Binary is a number system using only 0s and 1s — the language computers speak. For example:

5 in binary is 101
9 in binary is 1001

🔁 What is a Palindrome?

A palindrome is something that reads the same forwards and backwards.

Examples:

"121" is a palindrome
"101" is a palindrome
"110" is not a palindrome

So we’re going to take a number, convert it into binary, and check if the binary string is a palindrome.

Conclusion

Checking if a number’s binary is a palindrome is simple and fun. It also gives you insight into how binary works and how strings can be manipulated in Python.

Next time you’re working with binary numbers, try checking their symmetry — you might discover some hidden patterns!

The below program will sort an array of integers in ascending order.

const nos = 123496758789456;
console.log(nos);
const sorted = sorter(nos).join('')
console.log(sorted);

function sorter(nos){

    const splitted = nos.toString().split('');

    for(let i = 0; i < splitted.length; i++){

        for(let j = i+1; j < splitted.length; j++){

            if(parseInt(splitted[j-1]) > parseInt(splitted[j])){
                let temp = splitted[j-1];
                splitted.splice(j-1, 1);
                splitted.splice(j, 0, temp);
            }
        }
    }

    return splitted;

}

Discover 5 compelling reasons to use @skriptx2/jspaginator: an open-source, lightweight, and versatile pagination solution. Easy to configure, not restricted to tables, and seamlessly integrates with any framework like React, Angular, or Vue.

Open Source:
- Fully open-source, offering transparency and the flexibility to customize as per your project requirements.
- Backed by an active community ensuring continuous improvements and support.
Lightweight:
- Minimal dependency and optimized for performance, making it an ideal choice for projects where speed and resource-efficiency matter.
- No unnecessary bloat ensures faster load times and seamless operation.
Not Restricted to Tables:
- Unlike many paginators, @skriptx2/jspaginator works with a variety of data structures, including lists, cards, grids, or any custom UI components.
- Versatile enough to support dynamic data visualization needs.
Easy Configurations:
- Simple, developer-friendly APIs to configure items per page, navigation controls, and pagination styles.
- Intuitive options make it quick to set up, even for beginners.
Easy Integration with Any Framework:
- Compatible with popular frameworks like React, Angular, Vue, or plain JavaScript, ensuring smooth adoption into existing projects.
- Saves development time by blending seamlessly with your current tech stack.

Github Link: https://github.com/skriptxadmin/jspaginator

NPM Link: https://www.npmjs.com/package/@skriptx2/jspaginator

Creating your own NPM (Node Package Manager) module is a powerful way to contribute to the JavaScript ecosystem, showcase your skills, and solve real-world problems. NPM is the largest package registry, hosting thousands of reusable code snippets that make developers’ lives easier. By developing your own module, you can share your solutions, streamline repetitive tasks, and even gain recognition in the tech community.

Whether you’re building a utility library, a custom tool, or a unique feature, the process of creating an NPM module involves coding, documentation, testing, and publishing. It’s an excellent learning experience that enhances your understanding of modular development, package management, and open-source collaboration. Plus, once published, your module becomes a reusable building block that others can integrate into their projects with a simple command.

In this guide, we’ll walk you through the step-by-step process of creating, packaging, and publishing your very own NPM module, empowering you to leave your mark on the JavaScript world.

Create two folders, one for the library we are going to build and another we are going to view the demo

Lets start with npm init on both folders

Install parceljs on the library folder with following link

Create src/index.ts

Add some code to index.ts

Open package.json and update (All codes are available in the above link)

Install parceljs on the demos folder with following link

Create src/{foldername}/index.html, style.css, app.js files

Link your script and style file to html file

Now go to package.json and update the file as below

Note the source should be updated from .js to .html

Now open your command prompt in the demos folder and run

npm link ../library

If you have the library in some other folder, map it properly.

Import the library in app.js file

Run npm start on demos folder

Run npm run watch on library folder

That’s it. If you don’t see the change, delete the import line and retype it. Thing will work

Swayam Free Courses

We do not hold any responsibility on the below information provided.

SWAYAM is a programme initiated by Government of India and designed to achieve the three cardinal principles of Education Policy viz., access, equity and quality. The objective of this effort is to take the best teaching learning resources to all, including the most disadvantaged. SWAYAM seeks to bridge the digital divide for students who have hitherto remained untouched by the digital revolution and have not been able to join the mainstream of the knowledge economy

This is done through a platform that facilitates hosting of all the courses, taught in classrooms from Class 9 till post-graduation to be accessed by anyone, anywhere at any time. All the courses are interactive, prepared by the best teachers in the country and are available, free of cost to any learner. More than 1,000 specially chosen faculty and teachers from across the country have participated in preparing these courses.

When designing user interfaces, small details can make a significant difference in creating a polished and user-friendly experience. One such detail is the color of placeholder text in input fields. By default, browsers use a standard style for placeholder text, but with CSS, you can easily customize it to align with your design. Here’s how you can do it.

What Is Placeholder Text?

Placeholder text is the light gray text that appears inside input fields, offering guidance or hints to users about what they should enter. For example, in a login form, a placeholder might read, “Enter your email address.”

Why Customize Placeholder Text Color?

Customizing placeholder text color can:

Enhance the visual appeal of your form.
Improve readability for specific design themes.
Align placeholder styles with your brand’s color scheme.

CSS Pseudo-Class for Placeholder Styling

To customize placeholder text, use the ::placeholder pseudo-element in your CSS. Here is a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Placeholder Color</title>
    <style>
        input::placeholder {
            color: #888888; /* Change to your desired color */
            font-style: italic; /* Optional: Customize font style */
        }

        /* Optional: Style the input field */
        input {
            border: 1px solid #ccc;
            padding: 8px;
            border-radius: 4px;
            width: 100%;
            max-width: 300px;
        }
    </style>
</head>
<body>
    <form>
        <label for="name">Name:</label><br>
        <input type="text" id="name" placeholder="Enter your name"><br><br>
        <label for="email">Email:</label><br>
        <input type="email" id="email" placeholder="Enter your email">
    </form>
</body>
</html>

Browser Compatibility

Most modern browsers support the ::placeholder pseudo-element, but some older browsers use vendor prefixes. To ensure compatibility, include the following CSS:

input::-webkit-input-placeholder { /* Chrome, Safari, Edge */
    color: #888888;
}
input:-moz-placeholder { /* Firefox 18- */
    color: #888888;
}
input::-moz-placeholder { /* Firefox 19+ */
    color: #888888;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #888888;
}

Additional Tips

Contrast Matters: Ensure sufficient contrast between the placeholder text and the input background for readability.
Consistency: Keep placeholder styling consistent across your form fields.
Do Not Overdo It: Avoid using placeholder text as a replacement for labels; placeholders should provide hints, not serve as the primary form descriptor.

Conclusion

Customizing the placeholder text color is a simple yet impactful way to enhance the design of your forms. By following the steps outlined above, you can create visually appealing and user-friendly input fields that align with your project’s overall design. Experiment with different colors and styles to find what works best for your application!

Centering a div is a common requirement for web developers, but it can sometimes feel like a challenge due to the numerous methods available. Whether you’re working on a simple static website or a complex web application, understanding the different ways to center a div will make your work easier and your layouts cleaner. In this article, we’ll explore various techniques for centering a div both horizontally and vertically.

1. Using CSS Flexbox

Flexbox is a modern and versatile layout tool in CSS that makes centering elements straightforward. Here’s how you can center a div both horizontally and vertically using Flexbox:

<div class="parent">
  <div class="child">Centered Div</div>
</div>
.parent {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center;    /* Vertical alignment */
  height: 100vh;          /* Full viewport height */
}
.child {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

Flexbox requires the parent element to have display: flex and then uses justify-content and align-items for alignment.

2. Using CSS Grid

CSS Grid is another powerful layout system that simplifies centering. Here’s an example:

<div class="parent">
  <div class="child">Centered Div</div>
</div>
 .parent {
  display: grid;
  place-items: center; /* Centers both horizontally and vertically */
  height: 100vh;
}
.child {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
}

The place-items: center shorthand centers the child element in both dimensions with minimal effort.

3. Using Text Alignment for Horizontal Centering

For simple horizontal centering, you can use the text-align property on the parent and make the child an inline-block element:

<div class="parent">
  <div class="child">Centered Div</div>
</div>
.parent {
  text-align: center; /* Horizontal alignment */
}
.child {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: lightcoral;
}

This method is quick but only works for horizontal alignment.

4. Using Positioning and Transform

The position and transform properties can be combined for precise centering:

<div class="parent">
  <div class="child">Centered Div</div>
</div>
.parent {
  position: relative;
  height: 100vh;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the element */
  width: 200px;
  height: 100px;
  background-color: lightyellow;
}

This method works well for both horizontal and vertical centering.

5.Using Table and Table-Cell Display

The table-cell method mimics the behavior of tables to center content:

<div class="parent">
  <div class="child">Centered Div</div>
</div>
.parent {
  display: table;
  width: 100%;
  height: 100vh;
}
.child {
  display: table-cell;
  vertical-align: middle; /* Vertical alignment */
  text-align: center;    /* Horizontal alignment */
  width: 200px;
  height: 100px;
  background-color: lightpink;
}

While less common nowadays, this technique can be useful for older projects.

6.Using Inline Styles for Quick Centering

For quick, one-off use cases, you can use inline styles to center elements:

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <div style="width: 200px; height: 100px; background-color: lightgray;">Centered Div</div>
</div>

This approach isn’t recommended for large-scale projects but can be handy for rapid prototyping.

7.Using Margin Auto for Horizontal Centering

If you only need horizontal centering, margin: auto is an effective method:

<div class="parent">
  <div class="child">Centered Div</div>
</div>
.parent {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}
.child {
  margin: auto; /* Centers horizontally */
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

Conclusion

As you can see, there are multiple ways to center a div, each suited for different scenarios and browser requirements. For modern projects, CSS Flexbox and Grid are highly recommended due to their simplicity and flexibility. However, understanding other techniques like positioning, margin: auto, and table-cell can be beneficial for working with legacy code or specific use cases.

Experiment with these methods and choose the one that fits your needs! Happy coding!

In today’s era of responsive web design, creating websites that adapt seamlessly to different devices is essential. Detecting screen sizes dynamically is a crucial part of ensuring a consistent user experience. While CSS media queries are the backbone of responsive design, there are times when JavaScript needs to step in and detect screen sizes on the fly for more dynamic functionality.

This is where the jsMediaQuery utility comes into play. By leveraging this JavaScript tool, developers can efficiently detect screen sizes and take appropriate actions in real-time. In this blog, we’ll explore why and how to use jsMediaQuery for screen size detection.

Why Use jsMediaQuery?

While CSS media queries handle most of the work for responsive layouts, there are scenarios where JavaScript-based detection becomes necessary. For instance:

Dynamic Content Changes: When you need to dynamically load or modify content based on the screen size without a page refresh.
Custom Animations: Triggering JavaScript animations that depend on the viewport size.
Optimized API Calls: Fetching resources or adjusting behavior (e.g., loading lighter assets for smaller screens).
Cross-Compatibility: Managing edge cases where CSS media queries might fall short, such as interactive components requiring JavaScript intervention.

Get Started

Include this library in your project to take control of your responsive design needs without writing repetitive CSS media query code.

jsMediaQuery allows developers to handle these scenarios effortlessly while maintaining code clarity and reusability.

Installation

npm install @skriptx2/jsmediaquery

Code Usage

import { MediaQuery } from "@skriptx2/jsmediaquery";

MediaQuery.sm(); // returns true if between 577px and 767px

MediaQuery.get(); // returns breakpoints

🎯 1. Change the App Name

✅ Edit config.xml in the root of your project:

🎨 2. Change the App Icon

✅ Step-by-step:

a) Create your icon:

b) Install icon plugin (if not already):

c) Update config.xml with icon definitions:

💧 3. What Is That “Watermark” Icon?

✅ Fix it properly:

✅ Summary:

🧱 What is a Nested Array?

🔢 What is Binary?

🔁 What is a Palindrome?

Conclusion

Swayam Free Courses

What Is Placeholder Text?

Why Customize Placeholder Text Color?

CSS Pseudo-Class for Placeholder Styling

Browser Compatibility

Additional Tips

Conclusion

1. Using CSS Flexbox

2. Using CSS Grid

3. Using Text Alignment for Horizontal Centering

4. Using Positioning and Transform

5.Using Table and Table-Cell Display

6.Using Inline Styles for Quick Centering

7.Using Margin Auto for Horizontal Centering

Conclusion

Why Use jsMediaQuery?

Get Started

Installation

Code Usage

✅ Edit `config.xml` in the root of your project:

c) Update `config.xml` with icon definitions: