BackStory

your app works flawlessly on desktop Chrome, kinda sorta on Android, but explodes into a caching catastrophe on iOS Safari. Sound familiar? That's exactly what bit me during a recent debugging marathon. We were simulating iOS environments, only to unearth ancient legacy logic that treated API responses like a choose your own adventure book based on...

Spoiler: it introduced sneaky inconsistencies that made our "responsive" design look like a bad magic trick. Buckle up, because this post dives into how user agent-based debugging saved the day, and why it's a double-edged sword

What is a user agent?

The user agent, often shortened to UA, is an HTTP request header that says what browser, engine, OS, and sometimes device is making the request. Example:

Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1

Browsers also expose this string client side as navigator.userAgent. Newer APIs expose structured data via navigator.userAgentData where supported.

Why you should treat user agent data with suspicion

• It is easy to spoof.

• Browser vendors change the format for privacy.

• It contains lots of historical cruft, making regex detection fragile.

• Relying on it for core logic creates brittle branches that are hard to test and maintain.

Simulating the Beast: DevTools to the Rescue

We went to finding solution on how we could debug this on a specific browser on a device, tried BrowserStack ,but it didn't help because we were looking for firefox on ios device
Can't afford a device farm? No problem. Modern dev tools let you override UAs like a pro, exposing those hidden branches without touching hardware.

Here's a dead simple way to spoof an iPhone UA in Chrome DevTools runnable right now:

// Open DevTools > Network > Network conditions > Custom user agent
// Paste this iPhone 14 Pro Max UA (real-world example)
const iOSUA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1';

// Test it in console:
console.log(navigator.userAgent.includes('iPhone')); // true after override

Step by step breakdown:

1. Fire up DevTools (F12), hit Network tab.

2. Click "More network conditions" (or Cmd+Shift+P > "Network conditions").

3. Uncheck "Use browser default," paste the UA, done.

We did this in a Next.js app that simulates an iOS WebView. Suddenly, API calls skipped the cache on "mobile," but fetched stale data on desktop.

How do we get this string

A buried isMobile() function sniffing UA for iOS/Android, then helping us fix it:

// DON'T DO THIS Classic legacy trash
function isMobile(ua = navigator.userAgent) {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
}

// Detect Firefox on iPhone
function isFirefoxOniPhone(ua = navigator.userAgent) {
  return /iPhone/i.test(ua) && /FxiOS/i.test(ua);
}

// simple api call we want on iphone to help us get some data 
function fetchData(url) {
  const ua = navigator.userAgent;

  // Special case: Firefox on iPhone
  if (isFirefoxOniPhone(ua)) {
    console.log("Firefox on iPhone detected");
    return fetch(url).then(res => res.json());
  }
}

console.log(fetchData(www.example.com))

Why User Agent Spoofing Helped Us Debug the Logic

In our case, the issue wasn’t really about caching or Safari itself, it was about code paths that depended on the browser environment.

Modern applications often contain conditional logic like this:

if (isMobile()) {
  bypassCache();
}

The problem is that these branches only execute under specific environments. If you’re testing on desktop Chrome, that part of the code may never run.

By overriding the User Agent string, we essentially tricked the application into believing it was running on a different device, in this case an iPhone browser.

Once the browser reported itself as iOS, our application started executing the mobile-specific code path, which immediately exposed the hidden logic responsible for the inconsistent behavior.

In other words, UA spoofing allowed us to:

• Reproduce a device-specific environment

• Trigger code paths that normally wouldn’t run on our machine

• Observe how the application behaves under those conditions

Without it, we would have needed a physical device or a remote testing environment to reproduce the issue.

The Real Lesson

User agent sniffing is often considered a fragile practice for production logic, but it can still be a powerful debugging technique.

It allows developers to simulate:

• different devices

• different browsers

• different environments

and verify how their application responds.

In our case, the browser wasn’t the real problem; The assumptions inside our code were.

JavaScript is the only language that will look you in the eye, say "yes, that's valid," and then silently ruin your production build. Every other language would throw an error or refuse to compile - but JavaScript? It coerces types, lies about typeof results, and changes this binding based on invisible rules

The typeof Operator's Big Lies

console.log(typeof [])
// Returns "object"

console.log(typeof {})
// Returns "object"

console.log(typeof Nan)
// Despite being "Not-A-Number"

console.log(typeof null)
// Returns "object"

JavaScript's typeof operator lies blatantly about arrays. An empty array [] is not an object, but typeof [] returns "object" because arrays inherit from Object.prototype. This historical bug from JavaScript's early days trips up developers constantly, same like typeof {}.

Even worse, typeof null returns "object" despite null being a primitive value. This dates back to JavaScript's original implementation where null had an object type tag that was never fixed for backward compatibility.

Array or Object

The real way to check arrays is Array.isArray([]), which returns true.

function isArrayOrObject(value) {
    if (value === null || typeof value !== 'object') {
        return false;
    }
    return Array.isArray(value) || Object.prototype.toString.call(value) === '[object Object]';
}

The real way to check arrays is Array.isArray([]), which returns true.

String Conversion Gotchas

JavaScript loves implicit toString() calls during concatenation.

42 + "0" // 420
[] + {}  // "[object Object]" 
null + "" // null

Number becomes "420" because + coerces the number to string first. But becomes [] + {} becomes "[object Object]" because array toString() joins elements (empty so nothing) and object falls back to default toString.

null + "" is "null", undefined + "" is "undefined".

The Deadly a++a Expression

let a = "1"; 
console.log(a+ +a); 

console.log(('b' + 'a' + +'a'+'a').toLowerCase());
// guess the output

Truthy and Falsy Ambush List

textif([]) console.log("truthy!");  // This runs
!![] === true                   // true
!!0 === false                   // true

Double negation !! value coerces anything to proper boolean: !![] is true, !!0 is false.

Only 6 falsy values exist:

false, 0, "", null, undefined, NaN.

Everything else is truthy, including [] (empty array), {} (empty object), "false" (string), and Infinity.

this Keyword: The Shape-Shifter

Regular functions get dynamic this based on the call site. Arrow functions capture lexical this from the surrounding scope.

textfunction Regular() {
  setTimeout(function() { 
    console.log(this);  // window/global
  }, 0); 
}

const Arrow = () => {
  setTimeout(() => { 
    console.log(this);  // Arrow's lexical this
  }, 0); 
};

Regular.call({x:1});  // logs window
Arrow.call({x:1});    // logs {x:1} if called in object method

Function Definitions Compared

• function declarations hoist completely (name + body movable to top)

• function expressions hoist only declaration (body undefined until assignment)

• Arrow functions are always expressions, no hoisting, no own this/arguments

textgreet();           // Works - fully hoisted
function greet() { console.log("Hi"); }

console.log(fn);   // undefined
var fn = function() {};

sayHi();           // ReferenceError - TDZ
const sayHi = () => console.log("Hi");

Bonus Production Killers

textNaN !== NaN                    // true - use Number.isNaN()
+[] === 0                          // true
+![] === 1                         // true
{} + [] === "[object Object]"      // true  
[] + {} === ""                     // true
JSON.stringify({a: undefined})     // "{}" - drops undefined properties

The Escape Plan

JavaScript doesn't break your code with errors - it transforms it into something subtly wrong that passes tests until production. Use TypeScript for safety, ESLint with strict rules, and always test edge cases. Your future self will thank you.

EduAgent is a lightweight AI teaching assistant designed to help educators and learners quickly generate study notes, flashcards, and quizzes from any learning material. Built in just thirty minutes, this MVP shows how easy it is to harness modern APIs and frontend frameworks to automate critical education workflows.

What We’ll Cover

• Project overview and goals

• Core features of EduAgent

• Step-by-step walkthrough on the build using Lyzr

• Key takeaways for rapid MVP development

Steps Used

1. Defining the Product’s Purpose

Start by listing what EduAgent can do

This clarity saves build time and guides every decision.​

2. Building using LYZR API

• Steps to Login to Lyzr Agent Studio

  • Go to https://studio.lyzr.ai/

  • Click "Sign Up" and choose Google, LinkedIn, GitHub, or enter your email.​

  • Complete the sign-up and verify your email if prompted.​

  • If you already have an account, click "Login" and enter your credentials.​

Steps to Create a Single Agent

1. After logging in, find the sidebar and click on the "Agents" section or "Agent Builder".​

2. Select “New Agent” or “+ Build Agent” to begin.​

3. Enter basic details:

   • Name: Give your agent a name

   • Description: Briefly describe what your agent does.​

4. Choose an LLM model from the provided list; adjust parameters if needed.

5. Define the agent’s role and instructions (what you want the agent to do, e.g., create notes, answer questions).​

6. (Optional) Attach any knowledge sources relevant to your agent—such as PDFs, web URLs, databases, or spreadsheets.​

7. Add features or built-in tools as needed (optional for advanced scenarios).​

8. Click "Create" to finalize your agent. It is ready for testing.​

9. Grab your API key.

10. Write functions to:

    • Send uploads to LYZR API (content extraction, transcription)

    • Fetch outputs: explanations, notes, flashcards, quizzes​

2. Setting Up the Frontend

Spin up a React app using a boilerplate tool like Create React App or Vite. Build UX components for content upload (text, PDF, video) and results display panels—for fast functionality and easy testing.​

• POST data to LYZR endpoints and handle API responses in your React state.

• Add basic styles for readability.

Conclusion

In half an hour, you can build a working MVP for an AI-powered teaching assistant using React and LYZR API. By focusing on the essential user workflow upload, analyze, and get actionable study aids, you can move from concept to demo faster than ever. EduAgent is proof that quality education automation is only a few lines of code away.

Objects have long been the go-to choice for storing key-value pairs in JavaScript. However, the Map data structure offers a more powerful and flexible alternative. Unlike objects, Map allows keys of any data type, maintains insertion order, and performs better in some cases.

In this guide, you'll learn everything about Map JavaScript, including how to use it effectively in real-world scenarios.

What is a Map?

A Map is a built-in JavaScript data structure that holds key-value pairs, where keys can be any type of value, including objects, functions, and primitive types.

Why Use Map Over Object?

Creating a Map

You can create a Map using the new Map() constructor:

const myMap = new Map();

Adding Key-Value Pairs

Use .set(key, value) to add entries:

myMap.set('name', 'Alice');
myMap.set(42, 'The Answer');
myMap.set(true, 'Boolean Key');

Accessing Values

Retrieve values using .get(key), ensuring you use the exact key reference:

console.log(myMap.get('name')); // Alice
console.log(myMap.get(42)); // The Answer

Checking Key Existence

Use .has(key) to check if a key exists:

console.log(myMap.has('name')); // true
console.log(myMap.has('age')); // false

Removing a Key

Delete a key-value pair using .delete(key):

myMap.delete(42);
console.log(myMap.has(42)); // false

Finding the Size

Use .size to get the number of elements:

console.log(myMap.size); // 2

Iterating Over a Map

You can loop through a Map using different methods:

Using forEach()

myMap.forEach((value, key) => {
    console.log(`${key} -> ${value}`);
});

Using for...of

for (let [key, value] of myMap) {
    console.log(`${key} -> ${value}`);
}

Converting Map to Array

If you need an array representation:

const entriesArray = Array.from(myMap);
console.log(entriesArray);

Using Arrays or Objects as Keys

Unlike objects, Map allows arrays and objects as keys:

const myMap = new Map();
const keyArray = [1, 2, 3];
myMap.set(keyArray, 'Array as Key');

console.log(myMap.get(keyArray)); // Array as Key ✅

Important Note: If you try to retrieve the value using a new array (myMap.get([1, 2, 3])), it won’t work because objects and arrays are reference-based, not value-based.

Clearing a Map

Use .clear() to remove all key-value pairs:

myMap.clear();
console.log(myMap.size); // 0

Real-World Use Cases

1. Caching Computation Results

const myMap = new Map();

const getSumofArray = (...arr) => {
    if (myMap.has(arr)) return myMap.get(arr);

    let computeSum = arr.reduce((initialValue, accum) => initialValue + accum, 0);
    myMap.set(arr, computeSum); //we can store arr as the key
    return computeSum;
};

console.time("Function Execution Time");
console.log(getSumofArray(1, 2, 3, 4, 5));
console.timeEnd("Function Execution Time");

console.time("Function Execution Time");
console.log(getSumofArray(1, 3, 4, 5));
console.timeEnd("Function Execution Time");

console.time("Function Execution Time");
console.log(getSumofArray(1, 2, 3, 4, 5));
console.timeEnd("Function Execution Time");

/***
output
15
Function Execution Time: 74.399ms
13
Function Execution Time: 0.078ms
15
Function Execution Time: 0.087ms

=== Code Execution Successful ===
**/

Using Map to cache computed values can speed up repeated function calls:

Conclusion

The Map data structure in JavaScript is a powerful alternative to objects for handling key-value pairs. It offers flexibility, better performance, and maintains insertion order. Whether you're working with complex keys (objects/arrays), tracking data efficiently, or improving performance, Map is a great choice.

What’s your favorite use case for Map? Let me know in the comments! 🚀

The Problem Statement

Given an array nums consisting of binary values (0s and 1s), rearrange the array so that all zeros appear on the left and all ones appear on the right. The function should do this in-place without using extra space, and it should return the modified array.

Input:

• nums: An array of integers consisting only of 0s and 1s.

Output:

• A reordered array where all 0s are moved to the left and all 1s to the right.

Example:

Input

nums = [0, 1, 1, 0, 1, 0, 0]

Output
[0, 0, 0, 0, 1, 1, 1]

  var twoSum = function(nums){
      let len = nums.length
      start = 0;
      end = nums.length -1;
      while(start<end){
          if(nums[start]>nums[end]){
             nums[start] = nums[start]+nums[end]
             nums[end]= nums[start] - nums[end]
             nums[start] = nums[start] - nums[end]
             start = start + 1
             end = end - 1
          }else if(nums[start]+nums[end]>0){
              end = end -1;
          }else{
          start = start + 1
          }
      }
      return nums
  }

   console.log(twoSum ([0,1,1,0,1,0,0]));

  /*output [
    0, 0, 0, 0,
    1, 1, 1
  ] *?

Why This Works

The two-pointer technique ensures that the array is processed efficiently with a time complexity of O(n). By using the conditions:

• The array is rearranged such that zeros are moved to the left.

• Ones are shifted to the right without additional memory allocation or external libraries.

A Closer Look at Swapping

The swapping logic avoids using a temporary variable by leveraging simple arithmetic:

• a = a + b

• b = a - b

• a = a - b

This is a clever trick but should be used cautiously. If the numbers are large, there’s a risk of exceeding the number limits in JavaScript.

When to Use This Pattern

The two-pointer approach is useful for:

• Rearranging or partitioning arrays.

• Finding pairs that meet specific criteria (e.g., sum, difference).

• Problems involving sorted arrays.

Second Approach

This approach counts the number of 1s and builds a new array accordingly.

Here’s the implementation of the twoSumNew function:

var twoSumNew = function(nums){
    const len = nums.length;
    let sum = 0;
    let newArray = [];
    for(let i=0; i<len;i++){
        if(nums[i]==1){
            sum += 1;
        }
    }
    for(let i=0; i<len; i++){
        if(i<len-sum){
            newArray.push(0)
        }else{
            newArray.push(1)
        }
    }
    return newArray
}

Explanation of the Code

1. Counting 1s: A for loop traverses the array and increments a sum variable for each 1 encountered. This gives the total number of 1s in the array.

2. Building the New Array: Another for loop iterates through the array:

   • If the current index is less than len - sum, it appends 0 to the new array.

   • Otherwise, it appends 1.

3. Return Statement: After constructing the new array, it is returned as the output.

Comparison of the Two Approaches

Conclusion

The twoSum function demonstrates how efficient array manipulation can be achieved using the two-pointer technique. Understanding the logic behind the swapping and condition checks helps in crafting similar solutions for other problems. Next time you encounter an array challenge, consider whether the two-pointer approach can simplify your solution!

function isPalindrome(str) {
   return str === str.split('').reverse().join('');

}

// Example usage:
console.log(isPalindrome("racecar")); // Output: true   // Output: false

• Removing Duplicates from an Array

Removing duplicates involves creating a new array that only contains unique elements.

function removeDuplicates(arr) {
    return [...new Set(arr)];
}

// Example usage:
console.log(removeDuplicates([9, 2, 2, 3, 4, 4, 5])); 
// Output: [9, 2, 3, 4, 5]

• flattenArray

flatten array can be directly done using the flat property of the array.

function flattenArray(arr) {
    return arr.flat(Infinity);
}
// Example usage:
console.log(flattenArray([1, [2, [3, [4, 5]]]]));

That's it for today's brief read. More will be coming in the next parts, so stay tuned. Follow for more updates.

Understanding the Purpose of Key Tags

Before diving into the specifics, let's grasp the fundamental role of key tags in React. Key tags provide React with a unique identifier for each element in an array, facilitating efficient DOM updates during re-rendering. When components are re-rendered due to changes in state or props, React relies on these keys to determine which elements have been added, removed, or reordered within a list.

The Importance of Key Tags in List Rendering

When rendering lists in React using the map() function, each iterated element should be assigned a unique key. This key acts as a marker for React to differentiate between list items, enabling it to optimize rendering performance. Without key tags, React may resort to inefficient methods, such as re-rendering the entire list, leading to suboptimal performance, especially with larger datasets.

Why Key Tags Belong in List Mapping

1. Maintaining Component State: Placing key tags within the list mapping function ensures that each list item maintains its own internal state. This is crucial for components with dynamic behavior or user interactions, as it prevents unintended side effects caused by state misalignment.

2. Optimizing Reconciliation: By assigning keys directly within the map() function, React can efficiently reconcile changes in the list structure. This results in faster rendering and better overall performance, particularly in scenarios involving frequent updates or reordering of list items.

3. Facilitating Component Identification: Key tags serve as a means of uniquely identifying components within a list, aiding in debugging and component inspection. Placing keys at the top level of mapped elements ensures unambiguous identification of individual components.

Avoiding Key Tags in Paragraph or Div Elements

While it may be tempting to assign keys to paragraph or div elements within list items, doing so can lead to unintended consequences. Placing keys at this level may cause React to overlook structural changes within the list, potentially resulting in rendering errors or inconsistencies.

Conclusion

In conclusion, the strategic use of key tags during list mapping is paramount for optimizing performance and maintaining code integrity in React applications. By assigning keys directly within the map() function and avoiding placement within paragraph or div tags, developers can ensure efficient list rendering and facilitate smoother user experiences.

Embrace the power of key tags in list mapping, and unlock the full potential of React's rendering optimizations in your projects!

In this article, we'll explore some lesser-known CSS selectors that can be incredibly powerful when used correctly. By understanding and implementing these selectors effectively, you can take your web design skills to the next level. Just a pro tip, this was asked in the Interview.

1. Descendant Selector (div p): The descendant selector targets all <p> elements that are descendants of a <div> element. This allows you to style paragraphs specifically within a particular section or container, without affecting other paragraphs on the page.

2. Child Selector (div > p): The child selector targets only the <p> elements that are direct children of a <div> element. This selector provides even greater specificity, ensuring that only paragraphs immediately nested within the specified <div> are styled accordingly.

3. Adjacent Sibling Selector (div + p): The adjacent sibling selector targets the <p> element that directly follows a <div> element. This can be useful for applying unique styles to paragraphs that immediately follow specific elements, such as headers or dividers.

4. General Sibling Selector (div ~ p): The general sibling selector targets all <p> elements that are siblings of a <div> element. This allows you to apply consistent styles to paragraphs that share the same parent element.

/* Selects all <p> elements that are descendants of a <div> element */
div p {
    color: blue; 
  }

  /* Selects all <p> elements that are direct children of a <div> element */
  div > p {
    color: red; 
  }

  /* Selects the <p> element that is immediately preceded by a <div> element */
  div + p {
    color: green; /* Example color */
  }

  /* Selects all <p> elements that are siblings of a <div> element */
  div ~ p {
    color: orange;
  }

Wondering what is the prirority for this ?

1. Inline styles: Styles defined directly within the HTML element using the style attribute. Inline styles have the highest specificity and will override any other styles applied externally.

2. ID selectors: Selectors targeting elements by their unique id attribute. They have a higher specificity compared to class selectors.

3. Class selectors, attribute selectors, and pseudo-classes: Selectors targeting elements based on their class names, attributes, or pseudo-classes (like :hover, :focus, etc.).

4. Element selectors and pseudo-elements: Selectors targeting HTML elements directly, such as div, p, a, etc., or pseudo-elements like ::before and ::after.

5. Universal selectors and combinators: Selectors that apply styles universally or based on relationships between elements, such as *, +, >, ~, etc.

By incorporating these advanced CSS selectors into your coding repertoire, you can achieve finer control over the styling of your web pages. Whether you're refining the layout of a complex website or adding subtle design touches to enhance user experience, mastering these selectors is sure to elevate your CSS skills.

Experiment with these selectors in your projects to gain a deeper understanding of their capabilities and nuances. With practice and creativity, you'll soon find yourself wielding CSS selectors like a true master, effortlessly crafting visually stunning web pages with precision and flair.

So, dive into the world of CSS selectors and unlock a new level of styling finesse for your web development endeavors.

let's jump to the code(I know most of you don't consider it to be the code) to directly learn different behaviors and the emphasis on using those tags and learning to use them correctly.

• <pre> Element

<h2> Dreams - By Langston Hughes</h2>
    <pre>
        Hold fast to dreams <br>
        For if dreams die <br>
        Life is a broken-winged bird <br>
        That cannot fly. <br>
    </pre>

• Pre will be rendered with a monospaced font and with all of your extra white space intact.

• It gives an extra indent to highlight the context.

• Useful when you want to showcase a block of code.

• Formatted Strings

 <h2>
    formatting
  </h2>
  <p>
      <div>I am looking to <strong>hire</strong> a team for dev work. </div>
      <div>I am looking to <em>hire</em> a team for dev work. </div>
      <div>I am looking to <small>hire</small> a team for dev work. </div>
      <div>I am looking to <sub>hire</sub> a team for dev work. </div>
      <div>I am looking to <super>hire</super> a team for dev work. </div>
      <div>I am looking to <ins>hire</ins> a team for dev work. </div>
      <div>I am looking to <del>hire</del> a team for dev work. </div>
      <div>I am looking to <mark>hire</mark> a team for dev work. </div>
  </p>

• <Strong> would bring emphasis to a particular word or sentence by making it bolder or increasing its font-weight

• <em> would emphasize the word enclosed in the tag

• <small> tag would reduce the font size of the given enclosed in the tag

• superscript and subscript can be achieved by the tags super and sub

• ins would underline the word enclosed and del will strike line

• mark is an interesting tag to highlight the keyword, just like highlighting a word in a line with the yellow marker

That's all for this topic, Let me know which is your favorite tag 🤗

23 - aptitude,technical MCQ questions AND 3 Coding questions (Medium to Hard)

Water tank problem and the question is here

You have exactly N water tankers. Each of the tanker has a capacity of Ci, and contains Wi, amount of water. You can transfer any amount of water from one tanker to another, any number of times. The total amount of water is the sum of the amount of water in all the tankers. You have to transport the total amount of water to another city You need to find the minimum number of tankers required to transport the total amount of water

Example

Consider N-2 C-[2,2] W-[1 ,1] You must determine the minimum number of tankers required: We can transfer water of tank 1 to tank 2. So, we required only 1 tanker.

Function description returns the count of c

N:Represents the number of tankers. C: An array of size N, represents the Capacity in the tankers

W: An array of size N, represents the current water in the tankers

Here is my approach

n = int(input())
count = 0
total_remaining = []
c = [int(y) for y in input("Enter multiple values\n").split()] [:n]
w = [int(x) for x in input("Enter multiple values\n").split()] [:n]
print("Water tanks are:",w)
print("Capacity is:",c)


total_capacity = sum(c)
print("total_capacity:",total_capacity)

total_water = sum(w)
print("total water:",total_water)


total_remaining= [c[i]-w[i] for i in range(min(len(w), len(c)))]
print(total_remaining)

for i in range(len(total_remaining)):
  if total_water>0: 
    count+= 1
    total_water -= total_remaining[i]
    print("remaing water is:",total_water)    
print("The water tanker required is:",count-1)

Comment a better Version here !

An Array is a collection of the elements of Similar Data-Type stored one after another in the memory.

why do we use array ?

• We can overcome the disadvantage of using many variables since variables are used to store more than one element of the same datatype.

Types of arrays.

• 1D Array
• 2D Array
• 3D Array

Syntax to declare

Datatypes array_name[expression];

Quick Note.

ArraySize = No of elements * size of datatype

Array indexing starts from 0

Different ways of array Initialization

• 1. Initializing all the memory location

No of elements = Number of Elements

Int a[5] = { 10,20,30,40,50}

• 1. Partial Array Initialization
     If the number of values initialized is less than the allocated memory then it is known as partial array initialization.

Int a[5] = { 10,20,30,40,70}

• 1. Initialization without size

The number of elements has not been specified to values specified.

int a [ ] = {10,20,30};

• 1. String Initialization Strings are defined as an array of characters with a null character in the end.

char str[50] = "GeeksforGeeks";

Program to Read Array and print it.

#include<stdio.h>


int main()
{
int i,arr[10], range;

printf("Enter the number of elements in array:\n");
scanf("%d", &range);

printf("Enter the array elements:\n");
    for(i=0; i<range; i++)
    {
    scanf("%d", &arr[i]);
    }

printf("aray elements are as follows:");
    for(i=0; i<range; i++)
    {
    printf("%d ", arr[i]);
    }

}

Problem

A data Compression software utilizes various steps to compress a string of data. One of the steps involves finding the count of characters that are not repeated in the string. Write an algorithm for the software developer to find the count of characters that are not repeated in the string.

Input : The Input consists of a string

Output : Print the non-repeated characters and the count of characters that are not repeated. if no characters are found print 0

My approach :

If you have a better way to solve this problem, do comment down below.

Before we jump to DNS configuration, let me walk through the setup that is required. Here are the following things I used for my setup.

• GitHub Pages for code hosting
• .Tech Domain with a free ssl certificate

you could use any other domain providers like Namecheap, Name.com, GoDaddy, etc.

Part A

DNS Configuration

DNS stands for Domain Name System. Since we cannot remember the IP address of the websites hosted we use the domain name, which is mapped to these IP addresses.

www.hosteddomain.com

• where www : is a label
• hosteddomain: second-level domain
• com: a top-level domain.

Lets us see how we can config now

• login to your domain provider dashboard, this is how it appears for .tech domains.

• click on Manage DNS

• you will be redirected to another window with such an interface. we can see that there are lot of different ways to setup a dns

There are two ways to configure the dns for GitHub custom domain.

1. A Records

A-records point to a specific IP address. Subdomains sometimes have A-records too. An A-record can point to any IP address.

• click on add record
• add value as @

• in the value provide the IP address provided by GitHub. You will need to add all these IP addresses by creating 4 different records.

  185.199.108.153
  185.199.109.153
  185.199.110.153
  185.199.111.153
  

  these are the IP addresses provided by the GitHub.

• add ttl value

• what is ttl value ?

Time To Live is the sort of expiration date that is put on a DNS record. The TTL serves to tell the recursive server or local resolver how long it should keep said record in its cache. You can get the TTL value by pinging an address.

you can provide any value above 7200s for your sites.

ping www.example.com

here is how example how it looks.

2. C Name

CNAME-Records (Canonical Domain Records) – CNAMEs should always point to an A-record, not another. It is one of the easy ways to config your dns.

• leave the host link blank

• select the value ,second radio button to point to your GitHub account

yourusername.github.io.

• add ttl value anything in mins.

If you are using CNAME or ALIAS records for your custom domain, you’re all set and your site should be accessible over HTTPS. If it is, and your site loads correctly over HTTPS, you can optionally enforce HTTPS in your repository’s settings. Users who request your site over HTTP will be upgraded to HTTPS.

check if your DNS is configured

dig www.example.com

> WWW.EXAMPLE.COM.                 IN      A
> WWW.EXAMPLE.COM          39812 IN   CNAME   YOUR-USERNAME.github.io.
> YOUR-USERNAME.github.io. 43192 IN      CNAME    GITHUB-PAGES-SERVER .

Part B

GitHub Setup

1. Go to your GitHub Repository settings.

2. Click on Pages.

3. Add your Custom Domain.

   • Click on Save
   • wait for GitHub to do Magic!
   • if you face any error we will troubleshoot in end of the section.

• GitHub will push CNAME file pointing to your domain name,If not you can create CNAME file.
• add your domain name
• commit the file If you use a static site generator to build your site locally and push the generated files to GitHub, pull the commit that added the CNAME file to your local repository.

Troubleshot errors

1.DNS misconfiguration

2.InvalidDNSError www.example.tech is improperly configured Domain's DNS record could not be retrieved. For more information, see Learn more (InvalidDNSError). We recommend you change this to a CNAME record pointing to username.github.io.

How to troubleshot

• Check your CNAME FILENAME.(it should be in uppercase)

• Check if your GitHub Setup is configured properly.

• Confirm your settings

• Domain Propagation Delay Occurs so wait for 24 to 48 hours to let your website to be live.

MarkDown language helps up in documenting the project in a better way, it is simply the lightweight markup language that helps in converting the text into markup language(html) which is easier to read. Lets us understand how to write this markdown language.

1. Heading

markdown supports different sizes of headings, which helps differentiate between the heading, title, and subtitle.

# I am highest size heading ( <h1> tag )
## I am a little smaller than the first ( <h2> tag )
### I am smaller than the second size ( <h3> tag )
#### I am smaller than the third size  ( <h4> tag )
##### I am smaller than the fourth size ( <h5> tag )
###### I am the smallest size of the heading. ( <h6> tag )

This is how it looks.

I am highest size heading

I am a little smaller than the first

I am smaller than the second size

I am smaller than the third size

I am smaller than the fourth size

I am the smallest size of the heading.

2. Linking Images

can be Linked following way using CDN link

!(alt-name of image)[path of the image]

3. Link

Link Can be used to represent different attachments and third-party software.

[Text that appears](Link)

4. Emphasis on the text

Making text Bold by enclosing them between two underscores or two asterisks.

__making text Bold__

or

**making text Bold**

The text could be made italics when enclosed between one asterisk or single underscores.

*making text Italian*

or

_making text Italian_

_*Bold and italian*_

5. Ordered List

ordered List used to represent different items like the stack, contributor guidelines, guide to starting the project which can be done following way.

1. first Item
2. Second Item 
3. Third Item

6. Unordered List

unordered List used to represent different items which can be done following way.

* Item
* Item 
* Item

7. Quote

> using greater than a symbol to Quote a statement.

These were some of the basic syntax that can be used everywhere. But to make it easy but github provides additional feature like

Task List

Tasklist helps to merge a pull-request submitted, which defines all the new feature added or changes done to source code.

-[X] task 1
-[] Not completed task

Emoji

Github Supports different emojis to make the documentation attractive.

Emojis supported on Github are predefined and enclosed between colon
:name:
:+1:

you can find all the name of the emojis here

markdown preview in vscode.

If you use vscode then you can install this extension Markdown Preview Enhanced written by Yiyi Wang which will make it easier for documentation.