Categories
Tech

Show 3 cards next to each other and rest follow below similar, how should I write code in css using flex?

Hello,

To display 3 cards next to each other using CSS flex, you can use the flex-wrap property with a value of wrap, combined with the flex property to set the size of each card. Here is an example:

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
  <div class="card">Card 6</div>
  <div class="card">Card 7</div>
  <div class="card">Card 8</div>
  <div class="card">Card 9</div>
</div>

CSS:

.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex-basis: calc(33.33% - 10px); /* Set the width of each card to one-third of the container minus some margin */
  margin-right: 10px; /* Add some margin between the cards */
  margin-bottom: 10px; /* Add some margin below the cards */
  background-color: #f5f5f5;
  padding: 10px;
  box-sizing: border-box;
}

In this example, the card-container element is set to display: flex, which makes its child elements align horizontally in a row. The flex-wrap: wrap property allows the cards to wrap onto the next row when there isn’t enough space for them all to fit on one row. The flex-basis property is used to set the width of each card to one-third of the container minus some margin, and the margin-right and margin-bottom properties add some spacing between the cards. The box-sizing: border-box property ensures that the padding of each card is included in its width calculation.

Source: AI Interaction Channel

Happy Learning!

Categories
Javascript Tech

What is Event Loop & Micro and Macro Tasks in JavaScript?

Hello,

The basic concept behind the event loop working in Javascript engine!

Event Loop is a mechanism in JavaScript that handles asynchronous tasks in a non-blocking way. When JavaScript code is executed, it is run inside an event loop, which continuously checks if there are any tasks to be executed in the queue. The event loop is responsible for running the tasks in the queue, and it does this in a specific order.

The Event Loop in JavaScript has two main components: the Call Stack and the Callback Queue. The Call Stack is responsible for keeping track of the execution of the synchronous code. When a function is called, it is added to the top of the call stack, and when the function returns, it is removed from the top of the call stack.

The Callback Queue, on the other hand, is responsible for keeping track of the asynchronous tasks. When an asynchronous task is completed, it is added to the Callback Queue. The event loop continuously checks the Callback Queue to see if there are any tasks that can be executed. If there is a task, it is moved to the Call Stack, where it is executed.

Microtasks and Macrotasks are two types of tasks in JavaScript that are executed by the event loop.

Microtasks are tasks that are executed immediately after the current task has completed. Microtasks are executed before the next rendering of the web page, which means that they have a higher priority than Macrotasks. Some examples of Microtasks include Promises, MutationObserver, and process.nextTick in Node.js.

Macrotasks, on the other hand, are tasks that are executed after all the Microtasks have been executed. Macrotasks include tasks such as setTimeout, setInterval, and I/O operations in Node.js.

In summary, the Event Loop in JavaScript is responsible for handling asynchronous tasks in a non-blocking way. The Event Loop has two main components, the Call Stack and the Callback Queue. Microtasks and Macrotasks are two types of tasks that are executed by the event loop, and they have different priorities. Microtasks are executed before Macrotasks and are used for tasks that need to be executed immediately after the current task has completed, while Macrotasks are used for tasks that can be executed at a later time.

Source: AI Interaction Channels

Happy Learning!

Categories
Javascript Tech

How to identify closed 5km range co ordinates from given co ordinates

Hello,

This nice question and other below I have learned recently! Let see how its answered.

To identify the closed 5km range coordinates from a given set of coordinates, you need to first calculate the difference in latitude and longitude between the given coordinates and find the minimum and maximum values.

Here’s the basic formula:

Latitude range:

  • min latitude = given latitude – (5 / 111.2)
  • max latitude = given latitude + (5 / 111.2)

Longitude range:

  • min longitude = given longitude – (5 / (111.2 * cos(given latitude)))
  • max longitude = given longitude + (5 / (111.2 * cos(given latitude)))

Note: In the above formula, (5 / 111.2) is used to convert 5km to degrees. The value of 111.2 is the approximate number of km per degree of latitude. The value of (111.2 * cos(given latitude)) is used to convert 5km to degrees of longitude.

Once you have calculated the minimum and maximum values of latitude and longitude, you can create a bounding box by combining them. The coordinates within this bounding box would be considered as closed within a 5km range of the given coordinates.

Can you tell me more on last results?

Sure! The last results I mentioned are the coordinates of a bounding box that defines a closed area within a 5km range of a given set of coordinates.

A bounding box is a rectangular area that encloses a set of points or coordinates. In this case, the bounding box encloses the coordinates that are within a 5km range of the given coordinates. The minimum and maximum latitude and longitude values that were calculated earlier define the boundaries of this bounding box.

By combining the minimum and maximum latitude and longitude values, you get a rectangular area that encloses all the coordinates that are within a 5km range of the given coordinates. Any coordinate that lies within this rectangular area can be considered to be within a 5km range of the given coordinates.

This information can be useful in various applications, such as mapping, geolocation-based services, or location-based searches. For example, if you want to search for all the restaurants within a 5km range of a given location, you can use the bounding box coordinates to filter out the restaurants that are outside the 5km range.

Can you tell me more with example for bounding box calculations?

Sure, here’s an example of how you can calculate the bounding box coordinates for a given set of coordinates within a 5km range.

Let’s assume that the given coordinates are:

Latitude: 37.7749 Longitude: -122.4194

To calculate the bounding box coordinates:

  1. Calculate the minimum and maximum latitude:
  • min latitude = 37.7749 – (5 / 111.2) = 37.7692
  • max latitude = 37.7749 + (5 / 111.2) = 37.7807
  1. Calculate the minimum and maximum longitude:
  • min longitude = -122.4194 – (5 / (111.2 * cos(37.7749))) = -122.4257
  • max longitude = -122.4194 + (5 / (111.2 * cos(37.7749))) = -122.4131

So, the bounding box coordinates would be:

min latitude: 37.7692 min longitude: -122.4257 max latitude: 37.7807 max longitude: -122.4131

This means that any coordinate that lies within the rectangular area defined by these bounding box coordinates would be considered to be within a 5km range of the given coordinates (37.7749, -122.4194).

Well hope you understand from the given formulation and examples how can create a boundingbox for the range we need to search in for against our given co-ordinates, lets deep in further how we can implement and take this up with our Javascript Skills!

Nice, how I we can use this in Javascript?

Here’s an example of how you can calculate the bounding box coordinates for a given set of coordinates within a 5km range using JavaScript:

function getBoundingBox(lat, lng, distance) {
  const RADIUS_OF_EARTH_KM = 6371;
  const latRadian = lat * (Math.PI / 180);
  const degLatKm = RADIUS_OF_EARTH_KM * Math.cos(latRadian);
  const degLonKm = RADIUS_OF_EARTH_KM;
  const latDegree = distance / degLatKm;
  const lngDegree = distance / degLonKm;

  return {
    minLat: lat - latDegree,
    minLng: lng - lngDegree,
    maxLat: lat + latDegree,
    maxLng: lng + lngDegree
  };
}

const coordinates = { lat: 37.7749, lng: -122.4194 };
const boundingBox = getBoundingBox(coordinates.lat, coordinates.lng, 5);

console.log(boundingBox);

In this example, the getBoundingBox function takes the latitude, longitude, and distance as input parameters. The distance is the radius of the bounding box and is specified in kilometers. The function first converts the latitude and longitude to radians and calculates the number of kilometers per degree of latitude and longitude. The minimum and maximum latitude and longitude values are then calculated using these values and the given distance. Finally, the bounding box coordinates are returned as an object.

Nice, How to I use the bounding box with real test case example?

Here’s an example of how you could use the bounding box coordinates with a real-world test case. Let’s say you have a list of restaurants and their coordinates, and you want to search for all the restaurants within a 5km range of a given location.

const restaurants = [
  { name: "Restaurant A", lat: 37.7820, lng: -122.4464 },
  { name: "Restaurant B", lat: 37.7696, lng: -122.4138 },
  { name: "Restaurant C", lat: 37.7816, lng: -122.4140 },
  { name: "Restaurant D", lat: 37.7711, lng: -122.4336 },
  { name: "Restaurant E", lat: 37.7634, lng: -122.4359 },
];

const searchLocation = { lat: 37.7749, lng: -122.4194 };
const searchRadius = 5;
const boundingBox = getBoundingBox(searchLocation.lat, searchLocation.lng, searchRadius);

const filteredRestaurants = restaurants.filter(restaurant => {
  return (
    restaurant.lat >= boundingBox.minLat &&
    restaurant.lat <= boundingBox.maxLat &&
    restaurant.lng >= boundingBox.minLng &&
    restaurant.lng <= boundingBox.maxLng
  );
});

console.log(filteredRestaurants);

In this example, the restaurants array contains the list of restaurants and their coordinates. The searchLocation object contains the location for which you want to search the restaurants. The searchRadius specifies the radius of the search in kilometers.

The boundingBox is calculated using the getBoundingBox function, as shown in the previous example. The filteredRestaurants array is then created by filtering the restaurants array based on whether their coordinates fall within the bounding box or not. Finally, the filtered restaurants are logged to the console.

Hope this give us nice insight for the questions we have and need to develop as we develop advance things.

Source: Some AI Interaction Channels

Happy Learning!

Categories
Javascript Tech

Closures in JavaScript

A closure in JavaScript is a function that has access to variables in its outer scope, even after the outer function has returned. A closure is created when a function is defined inside another function and the inner function references variables in the outer function’s scope.

Closures allow you to preserve the state of a function’s variables even after the function has returned, and they can be used to create powerful and flexible functions that can be reused in different parts of your code.

Here’s a simple example of a closure in JavaScript:

function outerFunction(x) {
return function innerFunction(y) {
return x + y;
}
}

const add5 = outerFunction(5);
console.log(add5(3)); // 8

In this example, the outerFunction returns the innerFunction, which has access to the x variable in its outer scope. When we call outerFunction(5), it returns the innerFunction with x set to 5, and we assign it to the add5 variable. When we later call add5(3), it returns the result of x + y, which is 8.

Closures are an important concept in JavaScript, as they can be used to create functions that have private variables, to implement object-oriented concepts like classes and prototypes, and to manage state and data in complex applications.

Source: AI Interaction Channel

Happy Learning!

Categories
Blog Learning Learning

Picture tag in HTML

The <picture> tag in HTML is a semantic element that is used to define multiple source images for a single content. The <picture> element is used to specify multiple sources for an image, allowing the browser to choose the most appropriate source based on the user’s device and screen size. This allows you to display images that are optimized for different devices, without having to rely on JavaScript or CSS media queries.

Here’s an example of how you might use the <picture> tag:

<picture >
  < source srcset="large.jpg" media="(min-width: 800px)">
  < source srcset="small.jpg" media="(max-width: 799px)">
  < img src="small.jpg" alt="A picture">
</ picture >

In this example, the < source > elements define different sources for the image, based on the screen size of the user’s device. If the screen is at least 800 pixels wide, the browser will choose the large.jpg image, while if the screen is smaller than 800 pixels, it will choose the small.jpg image. The <img> element is used as a fallback for browsers that do not support the <picture> element.

hope you understand the basic concepts and use of Picture Tag in HTML

Source: AO Interaction Channel

Categories
Learning

What is the life cycle of an HTML request

Hello, Welcome

The life cycle of an HTML request can be divided into following stages:

  1. Request initiation: The request is initiated by the browser, usually in response to a user action, such as clicking a link, submitting a form, or refreshing the page.
  2. DNS Lookup: The browser checks the local cache and DNS servers to resolve the domain name to an IP address. If the domain name has not been resolved before, the browser will initiate a DNS lookup to obtain the IP address of the server.
  3. TCP Connection: The browser establishes a TCP connection with the server. This is the underlying communication channel that will be used to send the HTTP request and receive the response.
  4. Request sent: The browser sends an HTTP request to the server. The request includes information about the type of operation being performed (e.g., GET, POST, PUT, DELETE), the URL being requested, and any additional data that may be required (e.g., form data).
  5. Server processing: The server receives the request and processes it. This may involve retrieving data from a database, processing data, or generating a response.
  6. Response sent: The server generates an HTTP response and sends it back to the browser. The response includes information about the status of the request, the type of data being returned, and the actual data itself.
  7. Response received: The browser receives the response and processes it. This may involve updating the contents of the page, displaying an error message, or redirecting to another page.
  8. Resource loading: If the response includes references to additional resources (e.g., images, stylesheets, scripts), the browser will initiate separate requests for each of these resources.
  9. Page rendering: The browser uses the information in the response to render the final page.

This entire process can take place in a matter of milliseconds, allowing the user to interact with the web page in near-real-time.

Source: AI Interaction Channel

Happy learning!

Categories
Learning Tech

How to write basic Test case for React component using Jest or Enzyme

Lets quickly straight dive into it

import React from "react";
import { shallow } from "enzyme";
import TestComponent from "./TestComponent";

describe("TestComponent", () => {
  it("renders correctly", () => {
    const wrapper = shallow(<TestComponent />);
    expect(wrapper).toMatchSnapshot();
  });

  it("contains a button", () => {
    const wrapper = shallow(<TestComponent />);
    expect(wrapper.find("button").length).toEqual(1);
  });

  it("simulates click events", () => {
    const mockCallBack = jest.fn();
    const wrapper = shallow(<TestComponent handleClick={mockCallBack} />);
    wrapper.find("button").simulate("click");
    expect(mockCallBack.mock.calls.length).toEqual(1);
  });
});

In this example, the describe block creates a test suite for the TestComponent and the it blocks define individual test cases.

The shallow function from Enzyme is used to render a shallow version of the component.

The toMatchSnapshot assertion is used to check that the component is rendering correctly.

The find method is used to locate elements within the shallow render, and the simulate method is used to trigger events on those elements.

The jest.fn function is used to create a mock callback that can be passed as a prop to the component and tested.

Happy Learning.

Categories
Learning Tech

10 Key tips on preparing for ReactJS Interview

Hello,

Lets quickly go through the 10 keys, for preparing for React Js Interview

  1. React basics: Familiarize yourself with React concepts such as components, JSX, state, props, lifecycle methods, hooks, etc.
  2. React-Redux: Understand how to use Redux with React for state management.
  3. React Router: Learn how to handle routing in React applications.
  4. React performance optimization: Know how to optimize the performance of React applications, including techniques like lazy loading, memoization, and using shouldComponentUpdate.
  5. React hooks: Knowledge of React hooks and how they can be used in place of class components.
  6. React testing: Understand how to test React components using tools like Jest and Enzyme.
  7. Familiarity with CSS: Good understanding of CSS, including CSS-in-JS solutions like styled-components.
  8. JavaScript concepts: Good understanding of JavaScript concepts like closure, asynchronous programming, and ES6 syntax.
  9. Git: Knowledge of Git and how to use it for version control.
  10. Problem solving skills: Be prepared to solve algorithmic problems and explain your thought process.

Hope you enjoy learning!

Categories
Learning Tech

Very basic of How to create a React Fiber/React Js Project from scratch

Here is the basic process to create a project with React Fiber:

  1. Install Node.js and npm (Node Package Manager) if you don’t have them installed already.
  2. Use npm to create a new React project by running the following command in your terminal or command prompt:
    npx create-react-app my-app
  3. Navigate to the newly created project directory:
    cd my-app
  4. Start the development server by running:
    npm start
  5. The development server should now be running on http://localhost:3000 in your browser.
  6. You can now start building your React Fiber application by modifying the files in the src directory.
  7. When you’re ready to deploy your application, run the following command to create a production build:
    npm run build

This should give you a basic understanding of how to create a React Fiber project. If you’re new to React, it may be helpful to go through some introductory tutorials before diving into your project.

Happy Learning!

Categories
Blog Tech

How to generate Public & Private SSH Keys on Windows?

Hello, Lets Begin.

Open a Command Prompt/Terminal Window.

Important Alert!: Before going further, there is very important to know. If you have already generated a private/public key pair, don’t do it again!.

Where to find those keys or check if generated or not?

Okay, lets quickly see that step, Open Explorer window and type in address of explorer %userprofile%/.ssh it will open the window for you.

Typing %userprofile%/.ssh

Result of opening the above path. if you already have files will be listed otherwise it would be empty, so you can continue following reading next few steps to generate up the same.

.ssh list keys if already generated on your system or otherwise it list empty

Follow steps if no keys are available in the case.

Lets go back to our open Terminal Window/Command Prompt enter command:

ssh-keygen -b 4096

You are prompted to answer a few questions.

First is “Enter file in which to save the key” Press enter to use the default location.

The next question is “Enter passphrase.” This step is optional, but good to have for better security. Use whatever you like or skip, and then press enter.

Then confirm the passphrase or enter if none.

Once done new keys will be saved to same path under .ssh

For example: C:\your-username\.ssh\id_rsa.pub

Then you can use both the files to upload it under your hosting server to make a communication with your server through terminal window.

To make a connection to hosting server from terminal windows, that’s another topic we will cover them later in new post.

Hope this solves your finding.

Happy Learning