Ranit Sarker

JavaScript interview questions and answers

noreply@blogger.com (RanIT) — Thu, 28 Dec 2023 08:13:00 +0000

1. What is JavaScript?

JavaScript is a dynamic programming language that's used for web development, web applications, game development, and lots more. It allows to implementation of dynamic features on web pages that cannot be done with only HTML and CSS.

JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, that supports various types of programming styles such as object-oriented, imperative, and functional programming.

2. What are the data types in JavaScript?

Primitive Data Types:

Number:

Represents numeric values.

Example: let num = 42;

String:

Represents a sequence of characters.

Example: let str = 'Hello, World!';

Boolean:

Represents a logical value (true or false).

Example: let isTrue = true;

Undefined:

Represents a variable that has been declared but not assigned a value.

Example: let undefinedVar;

Null:

Represents the intentional absence of any object value.

Example: let nullVar = null;

Symbol (introduced in ECMAScript 6):

Represents a unique identifier.

Example: let sym = Symbol('unique');

BigInt (introduced in ECMAScript 2020):

Represents integers of arbitrary precision.

Example: let bigIntVar = 9007199254740991n;

Non-Primitive (Object) Data Types:

Object:

Represents a collection of key-value pairs.

Example: let obj = { key: 'value' };

Array:

Represents an ordered list of values.

Example: let arr = [1, 2, 3];

Function:

Represents a reusable block of code.

Example: function sayHello() { console.log('Hello!'); }

4. What is the DOM in JavaScript?

The Document Object Model (DOM) is a programming interface that represents the structure of HTML and XML documents. It allows JavaScript to access and manipulate

Basic setup of react router

noreply@blogger.com (RanIT) — Wed, 25 Oct 2023 13:56:00 +0000

1^st react router setup

npm create vite@latest name-of-your-project -- --template react

npm install react-router-dom localforage match-sorter sort-by

2^nd tailwind setup

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

3^rd daisy ui

npm i -D daisyui@latest

4^th open code .

5^th add tailwind extra settings

Go to tailwind.config.js and add this code

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

2^nd index.css add this code

@tailwind base;

@tailwind components;

@tailwind utilities;

6^th: daisy ui extra settings

Go to tailwind.config.js and add this code

7^th: fix that plugins: [require("daisyui")],

Go to .eslintrc.cjs file and add

8^th routers setup

1^st create one folder Routes > file Routes and setup routes

2^nd in main.jsx

Array.prototype

noreply@blogger.com (RanIT) — Sun, 06 Aug 2023 08:50:00 +0000

1. Array.prototype.includes()

The includes() the method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

2. Array.prototype.indexOf()

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

3. Array.isArray()

The Array.isArray() static method determines whether the passed value is an Array.

What is different by var, let, const

noreply@blogger.com (RanIT) — Sun, 30 Jul 2023 06:31:00 +0000

var

1. can declare value 2nd time

2. can assign value 2nd time

let

1. can't redeclare value 2nd time

2. can reassign value 2nd time

const

1. can't redeclare value 2nd time

2. can't reassign value 2nd time

tailwind css Typography

noreply@blogger.com (RanIT) — Fri, 21 Jul 2023 13:58:00 +0000

Typography:

1. font-size:

text-base = 16px or 1rem

text-lg > text-xl > text-2xl to text-9xl

2. font-family:

font-sans

font-serif

3. font-style:

italic

4. font-weight:

font-normal = 400

font-thin < font-extralight < font-light < font-norml < font-medium < font-samibold < font-bold < font-extrabold <font-black

5. letter-spacing:

tracking-normal = 0em

line-height:

landing-4 = 16rem

6. color:

text-white

text-color name-brightness(50-950)

CSS case

noreply@blogger.com (RanIT) — Wed, 19 Jul 2023 16:42:00 +0000

1. If you make one block element style margin: 100%; that will take the full width. But if we add any border or any other spacing that will make a horizontal scrolling.

Output:

2. if we make that block element width: auto; that type of scroll will not come and that is the default value of the block element width.

see no horizontal scroll bar.

CSS Specificity

noreply@blogger.com (RanIT) — Wed, 19 Jul 2023 16:20:00 +0000

Selector	Specificity Value	Calculation
p	1	1
p.test	11	1 + 10
p#demo	101	1 + 100
<p style="color: pink;">	1000	1000
#demo	100	100
.test	10	10
p.test1.test2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (the universal selector is ignored)

!important > inline css > id > class > element

Width and flex

noreply@blogger.com (RanIT) — Tue, 18 Jul 2023 10:42:00 +0000

Width:

auto
100%
max-content
min-content
fit-content
vw

Width auto: It will fit the element in available space including margin, border, and padding. That means margin, border, and padding include in that full width.

Width 100%: It will make content width 100%. margin, border, and padding will be added to this width and the element will overflow if any of these are added. That means margin, border, and padding are not included in that full width.

Max-content: Expands to fit the element's maximum content size.

Min-content: Collapses to fit the element's minimum content size.

Fix-content: Sizes the element based on its content's preferred size within the available space, combining aspects of both max-content and min-content.

vw: viewport wide. vw is a CSS unit that represents a percentage of the viewport's width.

Flex:

If flex-direction: row;

default value:

row is the default value of flex-direction.
start is the default value of justify-content.
stretch is the default value of align-items. (y-axis full height will take).

justify-content will work (x-axis or horizontal)
align-items will work (y-axis or vertical)

If flex-direction: column;

default value:

justify-content will work (y-axis or vertical)
align-items will work (x-axis or horizontal)

Interview question

noreply@blogger.com (RanIT) — Thu, 13 Jul 2023 08:01:00 +0000

1. what is the difference between flexbox and grid?

Responsive Website

noreply@blogger.com (RanIT) — Thu, 13 Jul 2023 07:53:00 +0000

1. viewport meta tag

2. CSS relative units

3. body max width and horizontal center align(margin: 0 auto;)

4. image fluid (width: 100%; of image)

5. to make 2 columns use flex and media query with "flex-direction: column;"

6. multiple column use grid layout

Fluid image

noreply@blogger.com (RanIT) — Thu, 13 Jul 2023 07:39:00 +0000

.responsive {
width: 100%;
height: auto;
}

If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto:

If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%:

.responsive {
max-width: 100%;
height: auto;
}

Media query

noreply@blogger.com (RanIT) — Thu, 13 Jul 2023 07:32:00 +0000

layout breakpoint:

Breakpoint	Class infix	Dimensions
X-Small	None	<576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px

Grid Layout

noreply@blogger.com (RanIT) — Thu, 13 Jul 2023 06:59:00 +0000

short code of visual studio:

.item{item -$}*20

Grid Layout:

1. grid work 2 dimensions. Horizontal and Vertical.

2. display: grid (That is the default). If we add another CSS property like "grid-template-columns" that grid will work. otherwise, the grid properly will not work.

3. grid-template-columns: 200px; that means 1 column and width 200px.

4. grid-template-columns: 200px 100px; that means 1 column with 200px width and 2nd column with 100px width

5. grid-template-columns: repeat(); here repeat is function. 2 values we have to add in that repeat. otherwise, that repeat will not work.

6. grid-template-columns: repeat(2, 200px); that mean 2 time repeat and those 2 column will 200px width.

7. grid-template-columns: repeat(2, 200px) 100px; that mean 2 time repeat and 1st 2 columns will with 200px width and after that 100px one column will create.

8. grid-template-columns: repeat(2, 200px) 100px 150px; that mean 2 time repeat and 1st 2 columns will with 200px width and after that 100px one column will create and after that 150px one column will create.

9. grid-template-columns: repeat(3, 1fr); that means 3-time repeat and all space will equal divide by that 3 columns.

10. grid-template-columns: repeat(3, 1fr) 2fr; that means 3-time repeat and all space will equal divide by that 3 columns and after that 2fr space will take. if 1fr take 200px that mean 2fr will take 400px.

11. grid-template-columns: 200px auto 100px; that means 1 column with 200px width and 3rd column with 200px width and the rest of all space will take at middle auto.

Fr is a fractional unit and 1fr is for 1 part of the available space.

Grid properties:

1. parent properties

grid-template-rows
grid-template
column-gap
row-gap
grid-gap
justify-items
align-items
justify-content
align-content
place-items
place-content

2. child properties:

grid-column: start/end
grid-row: start/end
justify-self
align-self
place-self

CSS Measuring Different Units

noreply@blogger.com (RanIT) — Wed, 12 Jul 2023 17:52:00 +0000

CSS Measuring Different Units:

Absolute Vs Relative

Absolute:

Pixels (px)
Inches (in)
Centimeters (cm)
Millimeters (mm)
Points (pt)
Picas (pc)

Relative:

Percentages (%)
Font size (em, rem)
Character size (ex, ch)
Vireport dimension (vh, vw)
Viewport max (vmax)
Viewport min (vmin)

The Difference Between Pseudo-Classes and Pseudo-Elements in CSS

noreply@blogger.com (RanIT) — Wed, 12 Jul 2023 13:11:00 +0000

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the <input> element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects <input> elements with a value within a specified range
:invalid	input:invalid	Selects all <input> elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"
:last-child	p:last-child	Selects every <p> elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects <input> elements with no "required" attribute
:out-of-range	input:out-of-range	Selects <input> elements with a value outside a specified range
:read-only	input:read-only	Selects <input> elements with a "readonly" attribute specified
:read-write	input:read-write	Selects <input> elements with no "readonly" attribute
:required	input:required	Selects <input> elements with a "required" attribute specified
:root	root	Selects the document's root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all <input> elements with a valid value
:visited	a:visited	Selects all visited links

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert content after every <p> element
::before	p::before	Insert content before every <p> element
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

HTML5 Tags

noreply@blogger.com (RanIT) — Thu, 06 Jul 2023 10:02:00 +0000

Tag	Description
`<a>`	Defines a hyperlink.
`<abbr>`	Defines an abbreviated form of a longer word or phrase.
`<acronym>`	Obsolete Defines an acronym. Use `<abbr>` instead.
`<address>`	Specifies the author's contact information.
`<applet>`	Obsolete Embeds a Java applet (mini Java applications) on the page. Use `<object>` instead.
`<area>`	Defines a specific area within an image map.
`<article>`	Defines an article.
`<aside>`	Defines some content loosely related to the page content.
`<audio>`	Embeds a sound, or an audio stream in an HTML document.
`<b>`	Displays text in a bold style.
`<base>`	Defines the base URL for all relative URLs in a document.
`<basefont>`	Obsolete Specifies the base font for a page. Use CSS instead.
`<bdi>`	Represents text that is isolated from its surrounding for the purposes of bidirectional text formatting.
`<bdo>`	Overrides the current text direction.
`<big>`	Obsolete Displays text in a large size. Use CSS instead.
`<blockquote>`	Represents a section that is quoted from another source.
`<body>`	Defines the document's body.
`<br>`	Produces a single line break.
`<button>`	Creates a clickable button.
`<canvas>`	Defines a region in the document, which can be used to draw graphics on the fly via scripting (usually JavaScript).
`<caption>`	Defines the caption or title of the table.
`<center>`	Obsolete Align contents in the center. Use CSS instead.
`<cite>`	Indicates a citation or reference to another source.
`<code>`	Specifies text as computer code.
`<col>`	Defines attribute values for one or more columns in a table.
`<colgroup>`	Specifies attributes for multiple columns in a table.
`<data>`	Links a piece of content with a machine-readable translation.
`<datalist>`	Represents a set of pre-defined options for an `<input>` element.
`<dd>`	Specifies a description, or value for the term (`<dt>`) in a description list (`<dl>`).
`<del>`	Represents text that has been deleted from the document.
`<details>`	Represents a widget from which the user can obtain additional information or controls on-demand.
`<dfn>`	Specifies a definition.
`<dialog>`	Defines a dialog box or subwindow.
`<dir>`	Obsolete Defines a directory list. Use `<ul>` instead.
`<div>`	Specifies a division or a section in a document.
`<dl>`	Defines a description list.
`<dt>`	Defines a term (an item) in a description list.
`<em>`	Defines emphasized text.
`<embed>`	Embeds external application, typically multimedia content like audio or video into an HTML document.
`<fieldset>`	Specifies a set of related form fields.
`<figcaption>`	Defines a caption or legend for a figure.
`<figure>`	Represents a figure illustrated as part of the document.
`<font>`	Obsolete Defines font, color, and size for text. Use CSS instead.
`<footer>`	Represents the footer of a document or a section.
`<form>`	Defines an HTML form for user input.
`<frame>`	Obsolete Defines a single frame within a frameset.
`<frameset>`	Obsolete Defines a collection of frames or other frameset.
`<head>`	Defines the head portion of the document that contains information about the document such as title.
`<header>`	Represents the header of a document or a section.
`<hgroup>`	Defines a group of headings.
`<h1> to <h6>`	Defines HTML headings.
`<hr>`	Produce a horizontal line.
`<html>`	Defines the root of an HTML document.
`<i>`	Displays text in an italic style.
`<iframe>`	Displays a URL in an inline frame.
`<img>`	Represents an image.
`<input>`	Defines an input control.
`<ins>`	Defines a block of text that has been inserted into a document.
`<kbd>`	Specifies text as keyboard input.
`<keygen>`	Represents a control for generating a public-private key pair.
`<label>`	Defines a label for an `<input>` control.
`<legend>`	Defines a caption for a `<fieldset>` element.
`<li>`	Defines a list item.
`<link>`	Defines the relationship between the current document and an external resource.
`<main>`	Represents the main or dominant content of the document.
`<map>`	Defines a client-side image-map.
`<mark>`	Represents text highlighted for reference purposes.
`<menu>`	Represents a list of commands.
`<menuitem>`	Defines a list (or menuitem) of commands that a user can perform.
`<meta>`	Provides structured metadata about the document content.
`<meter>`	Represents a scalar measurement within a known range.
`<nav>`	Defines a section of navigation links.
`<noframes>`	Obsolete Defines an alternate content that displays in browsers that do not support frames.
`<noscript>`	Defines alternative content to display when the browser doesn't support scripting.
`<object>`	Defines an embedded object.
`<ol>`	Defines an ordered list.
`<optgroup>`	Defines a group of related options in a selection list.
`<option>`	Defines an option in a selection list.
`<output>`	Represents the result of a calculation.
`<p>`	Defines a paragraph.
`<param>`	Defines a parameter for an object or applet element.
`<picture>`	Defines a container for multiple image sources.
`<pre>`	Defines a block of preformatted text.
`<progress>`	Represents the completion progress of a task.
`<q>`	Defines a short inline quotation.
`<rp>`	Provides fall-back parenthesis for browsers that that don't support ruby annotations.
`<rt>`	Defines the pronunciation of character presented in a ruby annotations.
`<ruby>`	Represents a ruby annotation.
`<s>`	Represents contents that are no longer accurate or no longer relevant.
`<samp>`	Specifies text as sample output from a computer program.
`<script>`	Places script in the document for client-side processing.
`<section>`	Defines a section of a document, such as header, footer etc.
`<select>`	Defines a selection list within a form.
`<small>`	Displays text in a smaller size.
`<source>`	Defines alternative media resources for the media elements like `<audio>` or `<video>`.
`<span>`	Defines an inline styleless section in a document.
`<strike>`	Obsolete Displays text in strikethrough style.
`<strong>`	Indicate strongly emphasized text.
`<style>`	Inserts style information (commonly CSS) into the head of a document.
`<sub>`	Defines subscripted text.
`<summary>`	Defines a summary for the `<details>` element.
`<sup>`	Defines superscripted text.
`<svg>`	Embed SVG (Scalable Vector Graphics) content in an HTML document.
`<table>`	Defines a data table.
`<tbody>`	Groups a set of rows defining the main body of the table data.
`<td>`	Defines a cell in a table.
`<template>`	Defines the fragments of HTML that should be hidden when the page is loaded, but can be cloned and inserted in the document by JavaScript.
`<textarea>`	Defines a multi-line text input control (text area).
`<tfoot>`	Groups a set of rows summarizing the columns of the table.
`<th>`	Defines a header cell in a table.
`<thead>`	Groups a set of rows that describes the column labels of a table.
`<time>`	Represents a time and/or date.
`<title>`	Defines a title for the document.
`<tr>`	Defines a row of cells in a table.
`<track>`	Defines text tracks for the media elements like `<audio>` or `<video>`.
`<tt>`	Obsolete Displays text in a teletype style.
`<u>`	Displays text with an underline.
`<ul>`	Defines an unordered list.
`<var>`	Defines a variable.
`<video>`	Embeds video content in an HTML document.
`<wbr>`	Represents a line break opportunity.

Semantic Elements in HTML

noreply@blogger.com (RanIT) — Thu, 06 Jul 2023 07:06:00 +0000

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Git and GitHub

noreply@blogger.com (RanIT) — Thu, 06 Jul 2023 05:55:00 +0000

VCS: version control system.

Git is a concept and GitHub is a website that provides that git concept.

git init

git add .

git commit -m"first commit"

git branch -M main

git remote add origin https://github.com/ranitsarker/portfolio1.git

git push -u origin main

when we will update the code we will use 3 lines

1. git add .

2. git commit -m "here one meaning full name"

3. git push

If you want to contribute to another project

1st make it a fork

2nd "git clone"

3rd always have to make a new branch so "git branch" will check on which branch you exit now.

"git checkout main" will help to back you from anywhere to the main branch.

"git checkout -b add-games" means a new branch created. here b mane new branch and "add-games" means brand name.

now for the update code:

1. git add .

2. git commit -m "here one meaning full name"

3. git push that will not work that time. That time

"git push --set-upstream origin add-games"

Web development full stack

noreply@blogger.com (RanIT) — Tue, 02 May 2023 02:59:00 +0000

6 ways:

way 1: PHP (WordPress Based), jQuery = WordPress Developer.

way 2: PHP-> Laravel, Vue = Web developer.

way 3: MongoDB, react, node js -> Express js = Web developer.

way 4: MongoDB, angular js, node js -> Express js = Web developer

way 5: Ruby -> Ruby on Rails = Web developer

way 6: Python -> django = cross-platform apps developer

Frontend

HTML

CSS-> Bootstrap, Tailwind CSS, Foundation, Bulma

JavaScript -> react, Vue.js, Angular, jQuery

Backend

PHP ->

Laravel (Framework)

Slim (Micro-framework)

Symfony Routing Component (Flexible and powerful routing system.)

Aura.Router (Lightweight and flexible routing library)

===

Python->

Django (Framework)

Flask (Lightweight framework)

Pyramid (Flexible and scalable framework)

Bottle (Minimalist framework)

===

Node.js ->

Express (Framework)

Koa (Lightweight framework)

Hapi (Framework)

Restify (Framework)

===

Ruby ->

Ruby on Rails (Framework)

Sinatra (Lightweight framework)

Hanami (Modern framework)

Ramaze (Lightweight and modular framework)

WordPress developer:

HTML, CSS, and JavaScript: Learn the basics of web development including HTML, CSS, and JavaScript. These are the foundational technologies used to build websites and web applications, including WordPress sites.

PHP: PHP is the server-side programming language used by WordPress. Learn the basics of PHP and object-oriented programming concepts to build custom themes and plugins for WordPress.

WordPress Core: Familiarize yourself with the WordPress core codebase, including how it works and how to contribute to the open-source project. This will help you better understand the inner workings of WordPress and how to create custom functionality.

Theme and Plugin Development: Learn how to build custom WordPress themes and plugins using PHP, HTML, CSS, and JavaScript. This includes understanding the WordPress template hierarchy, hooks, actions, and filters.

WordPress APIs: Explore WordPress APIs, such as the REST API and the Plugin API, to extend the functionality of WordPress and build custom applications that interact with WordPress.

Advanced Concepts: Dive deeper into advanced WordPress concepts such as custom post types, custom taxonomies, and custom fields to create complex and dynamic WordPress sites.

Performance Optimization and Security: Learn how to optimize the performance of WordPress sites, including techniques for caching, minification, and database optimization. Also, understand how to secure WordPress sites from hacking attempts and implement best practices for security.

Deployment and DevOps: Learn how to deploy WordPress sites to web servers, implement version control using tools like Git, and automate the deployment process using tools like Jenkins or Travis CI.

Community and Networking: Join the WordPress community, attend WordPress events, and network with other WordPress developers to learn from their experiences and collaborate on projects.

By following this learning path, you can become an advanced WordPress developer and build high-quality, professional WordPress sites and applications. However, it's important to note that there is always more to learn, and the WordPress ecosystem is constantly evolving, so staying up to date with the latest developments and best practices is key.

How to add custom role in paid memberhsip pro specific level

noreply@blogger.com (RanIT) — Sun, 09 Aug 2020 08:08:00 +0000

1) have to install https://www.paidmembershipspro.com/downloads/pmpro-customizations.zip

2) add that code

/*
	This code assumes you already have custom roles created
	for bronzemember, silvermember, and goldmember.
	Members signing up for membership level #1 get "Bronze Member" role.
	Members signing up for membership level #2 get "Silver Member" role.
	Members signing up for membership level #3 get "Gold Member" role.
	Members cancelling are given the subscriber role.
	Admin users are ignored.
*/
function my_pmpro_after_change_membership_level($level_id, $user_id)
{
	//get user object
	$wp_user_object = new WP_User($user_id);
  
	//ignore admins
	if(in_array("administrator", $wp_user_object->roles))
		return;

	if($level_id == 2)
	{
		//New member of level #2. Give them Silver Member role.
		$wp_user_object->set_role('stm_lms_instructor');
	}
	elseif($level_id == 0)
	{
		//Cancelling. Give them Subscriber role.
		$wp_user_object->set_role('subscriber');
	}
}
add_action("pmpro_after_change_membership_level", "my_pmpro_after_change_membership_level", 10, 2);

That code has to add in pmpro-change-role-custom-roles.php
When you will add that code you have to know which level ID will get which role user.
To pick up your website all roles without admin install user role editor plugin and then you have to go to users > users role editor and the select role and know what is role name and ID.

That role ID will go in that code ID parameter.

In my case, that role ID was: stm_lms_instructor.

Let me know if anything else.

Thank you.

How to add free SSL certification at Godaddy

noreply@blogger.com (RanIT) — Sat, 06 Jul 2019 05:23:00 +0000

Hello,

Without change nameserver address at Godaddy hosting we can add free SSL. We know that cloudflare.com give free SSL and we can add that SSL certification in your website but then we have to change domain nameserver to Cloudflare. But many clients are not want to change that nameserver.

So that information is:
WITHOUT CHANGING NAMESERVER OF DOMAIN - FREE SSL WILL ADD.

We will add free SSL with letsencrypt.org now. Follow these steps:

Step 1: Go to https://zerossl.com and go to free SSL certification wizard section and click on start.

Step 2: SEE

Step 3: SEE and click on next button

Step 4: SEE

Step 5: SEE

Step 6: SEE
Go to Cpanel File manager and that domain pointer folder. In that folder create one folder. NAME: .wellknown and in that .wellknown you will create another folder. NAME: acme-challenge.

In the acme-challenge folder, you will upload those verification 2 files. see and click the Verification next button.

Step 7: Go to Cpanel and click on SSL/TLS. SEE

Step 8: Click on install and manage SSL for your site (HTTPS).

Step 9:

Step 10:

Step 11: click on Intall Certificate button see

Done.

Step 12:

To redirect from main domain to https://
you can create a file .htaccess at your domain pointer folder
and add those 3 lines codes:

RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

SEE

That's it.

How to add Facebook login system at WordPress website

noreply@blogger.com (RanIT) — Thu, 20 Jun 2019 11:05:00 +0000

Hello,

Sometimes when we have tried to integrate facebook login system with WordPress website we face some problem so that I'm telling what will be right way within mins you can add that login system in your website anywhere and that will work 100%.

1st: We have to active plugin Super socializer

2nd: We have to create a Facebook login app

How:

1st: Go to https://developers.facebook.com and then click on add new app
Enter your app name and password of your facebook that app will create

Then select Integrate Facebook Login and click on continue

2nd: click on the quickstart

3rd: click on www and enter your website URL and click on save and click on continue.

4th: then you will get next button for 3 times but click on next, next, next.

5th: go to setting > basic and enter your domain name, add your privacy policy page (If your website has no page you can create one and you can keep empty) and also select the category of your website and click on save changes.

No need to change setting > advance page. Keep the same to the same setting that has already.

6th: go to facebook login > setting and then enter one URL at Valid OAuth Redirect URIs field
My website URL is https://tissuewholesale.com so that URL will be https://tissuewholesale.com/?SuperSocializerAuth=Facebook

so /?SuperSocializerAuth=Facebook you have to add after your website URL that is the main concern.
then click on save changes.

7th: status will be on see

8th: now collect app id and app secret

9th: go to plugin super socializer > social login from WordPress dashboard and add that app id and app secret and save that setting.

10th: you can off sharing button from here

11th: now that Facebook icon will show in your wp-admin login page automatically.

If you want to add that login icon in any other page then use shortcode. I will prefer that code

[TheChamp-Social-Linking title="Link your Social Accounts"]

For more shortcode, you can see that image

If anything else please knock with me at here

Thank you.

Changing default avatar size cropped/used by BuddyPress,

noreply@blogger.com (RanIT) — Sun, 23 Dec 2018 08:10:00 +0000

How to change BuddyPress Avatar Thumbnail size and Profile image:

1) create a bp-custom.php file in your wp-content/plugins directory.

2) add that codes
---

if ( ! defined( 'BP_AVATAR_THUMB_WIDTH' ) )
define( 'BP_AVATAR_THUMB_WIDTH', 80 ); //change this with your desired thumb width

if ( ! defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
define( 'BP_AVATAR_THUMB_HEIGHT', 80 ); //change this with your desired thumb height

if ( ! defined( 'BP_AVATAR_FULL_WIDTH' ) )
define( 'BP_AVATAR_FULL_WIDTH', 310 ); //change this with your desired full size,weel I changed it to 260 :)

if ( ! defined( 'BP_AVATAR_FULL_HEIGHT' ) )
define( 'BP_AVATAR_FULL_HEIGHT', 310 ); //change this to default height for full avatar

?>

---

Thank You.

How to install Zen Coding (now called Emmet) with Sublime Text 3

noreply@blogger.com (RanIT) — Mon, 02 Apr 2018 15:21:00 +0000

Hello,
Now I'm going to tell the full instruction of how to add Emmet on Sublime Text 3.

1st we have to install package controller.
go to https://packagecontrol.io/installation and collect code
I'm using Sublime Text 3
My code:

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

2nd open Sublime Text 3. go to view > show consol

3rd past that code and pass enter.

4th close this Sublime Text 3 application and open it again

5th after open Sublime Text 3 again go to tools and open command palette see

6th type inatall package and chick on it see

7th type emmet and click on it.

last you can see this page

8th restart sublime text 3 again.

Now you can enjoy your code. Type html:5 and ctrl + e !!!

Tanda Router configurations and WiFi configuration laptop and how to change admin password if you have not remember

noreply@blogger.com (RanIT) — Fri, 15 Dec 2017 20:20:00 +0000

Problem:
One Broadband internet that will run on one pc with router data cable and one laptop with wifi.
So you can follow this instruction
1st:
Open your Laptop
hardware: connect the broadband line to your laptop directly
click right on wifi icon and go to open network and sharing center

2nd:
go to change adapter setting

3rd
click on ethernet property or local area connection properly

4th
double click on internet protocol version 4 and setup all internet provider address. Select Use the following IP and put all field and select use the DNS server address and put all file. You can get those setting from your internet provider when they have given 1st connection on your personal computer or laptop directly with landline.

I will prefer you will want always setup connection directly on pc, not laptop. After their setup, you can collect that information

5th
Collect mac address. Open cmd and type ipconfig/all from your PC
you can see ethernet adapter physical address so copy this address and collect

6th
click on configure

then enter mac address on this value. Remember this mac address will be your pc mac address

7th
try to connect if not connect then collect username and password to your internet provider.

8th
click on setup new connection

and put your username and password

now the internet will be connected to a laptop with direct line.

Now Wifi Configuration:

9th

reset the router manually from router reset button

10th:

After rest router tanda will create a user and back part of the router there is a pin number that is the password of your wifi but not working

11th

and do

11th

click on advance and go to MAC Clone and add your pc mac address that is your pc mac address, change your admin password.

Laptop will be connected to a wifi connection

12th

connect internet provider line to the router and now pc will run from the direct router with data cable and laptop will be connected to wifi.

Thank You.