Forem: Jaxongir

50 Most Asked JavaScript Interview Questions

Jaxongir — Thu, 02 Feb 2023 18:46:50 +0000

You've been learning JavaScript and planning to apply for jobs. Prepare for the interview by answering most asked 50 JavaScript interview questions.

What is JavaScript?
What is the difference between primitive and reference types in JavaScript?
What is the difference between == and ===?
What is a higher order function?
What is a pure function?
What is the function currying?
What is the difference between var, let, and const?
What is the difference between global and local scope?
What is the temporal dead zone?
What is hoisting?
What is closure?
How to compare two objects?
What are all the possible ways to create objects in JavaScript?
What is prototype chain?
What is the difference between Call, Apply and Bind?
What is JSON and its common operations?
What is the purpose of the array slice method?
What is the purpose of the array splice method?
What is the difference between slice and splice?
What are lambda or arrow functions?
What is IIFE(Immediately Invoked Function Expression)?
How do you decode or encode a URL in JavaScript?
What is memoization?
What are classes in ES6?
What are modules?
Why do you need modules?
What is a promise
What are the three states of promise?
What is a callback function?
Why do we need callbacks?
What is a callback hell and how to avoid it?
What is promise chaining?
What is promise.all?
What is the purpose of the race method in the promise?
What is a strict mode in javascript?
Why do you need strict mode?
How do you declare strict mode?
What is the purpose of the delete operator?
What is typeof operator?
What is undefined?
What is null?
What is the difference between null and undefined?
What is eval?
What is the difference between window and document?
How do you access history in javascript?
How do you detect caps lock key turned on or not?
What is isNaN?
What are the differences between undeclared and undefined variables?
What are global variables?
What are the problems with global variables?

What is JavaScript?

JavaScript is a dynamically typed, interpreted, scripting language. It supports different paradigms such as Functional, OOP, and Procedural. It's the only language that's executed right on the browser, that's why it's also called the language of the web.

dynamically typed - means that the variable can hold multiple types throughout its lifetime

let someVarName = "JavaScript" // JavaScript
someVarName = 12 // 12
someVarName = {name: "JavaScript"} // {name: "JavaScript"}
someVarName = false // false
someVarName = [1,2,3] // [1,2,3]

interpreted - means that instead of code being compiled and then executed like in languages such as C, C++, and Java, code in JavaScript code is executed with JIT compiler

What is the difference between primitive and reference types in JavaScript?

Primitive Types
Primitive types can hold only a single value while non-primitive types have multiple.
JavaScript primitive types

""
false
1
null
undefined
123n
Symbol("symbol")

Non-primitive or Reference types
Non-primitive types can contain multiple values of primitive at a time

const hobbies = ["Reading", "Calisthenics", "Swimming"]
const person = {
 name: "Jaxongir",
 age: 27,
 country: "Uzbekistan"
 hobbies
}

What is the difference between == and ===?

== - comparison operator compares only values not their types and if two of the same values of the different types are compared then type conversion happens. Which is one type converted to another type.

console.log(1 == "1") // true
console.log(false == "0") // true

=== - strict equal comparison operator first compares data types of the values. If they are the same type then values are compared else they aren't the same type regardless of whether the values are the same it returns false

console.log(1 === "1") // false
console.log(false === "0") // false

What is a higher-order function?

HOF(Higher order function) - is the function that takes another function as an argument and calls it within it's body or returns function as the value
Examples of HOF are: map, filter, for each, reduce, etc...

const nums = [1,2,3,4]
const multiplyNum = nums.map(num => num * 2)
console.log(multiplyNum) // [2,4,6,8]

const greet = (greeting)=> name => `${greeting} ${name}!`
const func = greet("Hello")
func("Jaxongir") // Hello Jaxongir!
func("Lola") // Hello Lola!

What is a pure function?

Pure function - is the function without any side-effects and it never mutates the argument and returns a copy of the same type as an argument.

// Impure function
const add = (num1, num2)=> {
 num1 = 10
 return num1 + num2
}

// Pure function
const add = (num1, num2)=> num1 + num2

What is the function currying?

Currying - is the functional programming technique of transforming function with the multiple arguments with the multiple function with the single argument

const curry = (f) => (a) => (b) => f(a, b);

const product = (num1, num2) => num1 * num2;

const curriedProduct = curry(product);

console.log(curriedProduct(20)(5)) // 100
console.log(curriedProduct(1)(10)) // 10
console.log(curriedProduct(0)(100)) // 0

What is the difference between var, let, and const?

let and const

let and const is ES6 features that introduced in 2015
- variables declared with either let or const is scoped {} which means that they are invisible outside {} that they are defined
- variables decalred with them is not hoisted which means is that we can't access before their defined var
var is ES5 feature and
- if variable is declared within function with var keyword then it's scoped within that function which means is that it's not accessible outside that function body it's defined
- in all other cases variables declared with var keyword is global scoped

if(10 > 0){
 var test = "right"
 let test2 = "test"
}
console.log(test) // right
console.log(test2) // ReferenceError: test2 is not defined

What is the difference between global and local scope?

global scope - when variables and functions are accessible globally. So when you declare let and const variable outside any {} they are globally scoped. and when variable declared with var outside function is global scoped
local scope - as long variables declared with let and const is within {} they are local scoped to the body of that {} and inwards

// global scope variable
const name = "Jaxongir"

// global scoped function
const func = ()=>{
 // local scoped variable
 let age = 25
}
func()
console.log(name) // Jaxongir
console.log(age) // ReferenceError: age is not defined

What is the temporal dead zone?

Temporal dead zone - is when variable declared with let or const is un-reachable. This happens cause they are not hoisted. Or even simpler they are invisible or in Temporal dead zone during from they are scoped within {} to memory is allocated for them

 const fuc = () => {
  console.log(name);
  console.log(age);
  var age = 27;
  let name = "Jaxongir";
};

fuc() // ReferenceError: Cannot access 'name' before initialization

What is hoisting?

hoisting - is when variables declared with var and function declarations moved to the top of the current scope before they are executed thus they are accessible before they are declared.

greeting("Jaxongir")

function greeting(name) {
  console.log("Hello " + name) // Hello Jaxongir
  console.log(age) // undefined
  var age = 26;
}

What is closure?

closure - is basically when function has always access to it's surrounding scope even after surrounding scope is already executed. Closure is created each time you create a function. Each time function is created that function can acccess variables, functions, objects defined in it's surrounding scope

let name = "Jaxongir";
const fun = () => {
  console.log(name) // Jaxongir
};
fun()

const outerFunc = (message)=>{
  let test = "string"
  const innerFunc = (text)=>{
   console.log(message, test, text) 
  }
}
const test = outerFunc("Hello")
test("JavaScript")

How to compare two objects?

For in depth explanation, have a look at this excellent stack overflow

const obj1 = {name: "Lola"}
const obj2 = {name: "Lola"}
JSON.stringify(obj1) === JSON.stringify(obj2) // true

What are all the possible ways to create objects in JavaScript?

// object literals
const person = {name: "Jaxongir}

// Object constructor
const person = new Object();
console.log(person);

// Object create method
const person = Object.create({});
console.log(person);

// singleton pattern
const person = new (function () {
  this.name = "Jaxongir";
})();

// Constructor function
function Person(name) {
  this.name = name;
}
const person = new Person("Jaxongir");


// ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}
const person = new Person("Jaxongir");
console.log(person);

What is prototype chain?

Prototype chain - is when object inherit it's properties and methods from it's prototype object
Root Constructor function that every other type inherits in JavaScript is Object

 const company = {
  companyName: "UZS",
};
const teacher = {
  fullname: "Jaxongir Rahimov",
  __proto__: company,
};
console.log(teacher.companyName) // UZS
console.log(teacher.fullname) // Jaxongir Rahimov

What is the difference between Call, Apply and Bind?

While there's difference how used between them, common thing between them is that to provide the context for this keyword within function body and pass in arguments
NOTE: they can only be called on function declaration not on arrow functions. Coz arrow function does not bind this keyword

call - calls the function with the provided this value and additional arguments. First argument is always going to be context of this or object and it can take n arguments

const person1 = {
  name: "Jaxongir",
  age: 27,
  country: "Uzbekistan",
  gender: "male",
  hobbies: ["Reading", "Calisthenics", "Swimming"],
};
const person2 = {
  name: "Lola",
  age: 21,
  country: "Russia",
  gender: "female",
  hobbies: ["Reading", "Knitting", "Swimming", "Badminton"],
};

function printBio(greeting) {
  console.log(
    `${greeting} ${this.gender === "male" ? "His name is" : "Her name is"} ${
      this.name
    } and is ${this.age} years old and is from ${
      this.country
    } and has following hobbies ${this.hobbies.join(", ")}`
  );
}
printBio.call(person1, "Hello") // Hello His name is Jaxongir and is 27 years old and is from Uzbekistan
printBio.call(person2, "Hello") // Hello Her name is Lola and is 21 years old and is from Russia

apply - calls the function providing the context of this value and passes array of arguments

function printBio(greeting) {
  console.log(
    `${greeting} ${this.gender === "male" ? "His name is" : "Her name is"} ${
      this.name
    } and is ${this.age} years old and is from ${this.country}`
  );
}
printBio.apply(person1, ["Hello"]);
printBio.apply(person2, ["Hello"]);

bind - returns new function which can be stored variable and when that function is called this set to the provided object and passed values

function printBio(greeting) {
  console.log(
    `${greeting} ${this.gender === "male" ? "His name is" : "Her name is"} ${
      this.name
    } and is ${this.age} years old and is from ${this.country}`
  );
}
printBio.bind(person1)("Hello");
printBio.bind(person2)("Hello");

What is JSON and its common operations?

JSON stands for JavaScript Object Notation that's used to send data on the network. Even Douglas Crockford, the ex-Atari employee and man who coined and popularized the term ‘JSON’, states he ‘discovered’ JSON rather than ‘invented’
It has mainly two operations
Parsing - Converting from text to original data

JSON.parse("{name: "Jaxongir"}") // {name: "Jaxongir"}

Stringification - Converting valid data to string format

JSON.stringify({name: "Jaxongir"}) // "{name: "Jaxongir"}"

What is the purpose of the array slice method?

Array slice method used to copy part of a string and array so that we can work with the copy of array instead of modifying it. It's used to prevent mutation. here's the link to slice

let fullname = "Jaxongir Rahimov"
console.log(fullname.slice(0, 10))

const people = ["Lola", "Jol", "Mat", Jaxongir"]
conosle.log(people.slice(0,2))

What is the purpose of the array splice method?

Array splice method is used to delete specified item in the given index or add single or multiple items in the given index. link to the splice

const people = ["Lola", "Jaxongir", "Test", "Horum"];

// Deleting single item in the given index
console.log(people); // ["Lola", "Jaxongir", "Test", "Horum"]
people.splice(2, 1);
console.log(people); // ["Lola", "Jaxongir", "Horum"]

// Adding multiple items in the given index
people.splice(2, 0, "Madina", "Nodira");
console.log(people); // ["Lola", "Jaxongir", "Madina", "Nodira", "Horum"]

What is the difference between slice and splice?

slice - return the copy of the array and it does not mutate array

const people = ["Lola", "Jaxongir", "Test", "Horum"];
console.log(people.slice(0,2)) // ["Lola", "Jaxongir")
console.log(peopl) // ["Lola", "Jaxongir", "Test", "Horum"]

splice - removes single or multiple items or add single or multiple items and it makes these changes in-place

const people = ["Lola", "Jaxongir", "Test", "Horum"];
people.splice(2, 1);
console.log(people); // ["Lola", "Jaxongir", "Horum"]

What are lambda or arrow functions?

arrow function - are ES6 feature with some differences than normal function declaraions

arrow functions don't have this keyword but it uses whatever value of this in it's surrounding scope
arrow functions can't be used to create constructor functions as for above mentioned reason
arrow functions don't have super args

const person = {
  name: "Jaxongir",
  test: () => {
    console.log(arguments) // ReferenceError: arguments is not defined
    console.log(this) // references to window object
  },
  test2() {
    console.log(arguments) // [2, 13, 321, 2]
    console.log(this) // {name: 'Jaxongir', test: ƒ, test2: ƒ}
  },
};

person.test();
person.test2(2, 13, 321, 2);

What is IIFE(Immediately Invoked Function Expression)?

IIFE - is the function as the name makes it obvious, executed immediately after it's declared. And it's mainly used to create Module design pattern, Singleton design patterns,

const person = (() => {
  let name = "Jaxongir";
  let age = 27;
  return {
    name,
    age,
  };
})();
console.log(person) // {name: "Jaxongir", age: 27}

How do you decode or encode a URL in JavaScript?

encodeURI - takes a string of url as a parameter and encodes it and return the encoded URI
decodeURI - takes encodedURI and returns the decoded url

const uri = "https://mozilla.org/?x=шеллы";
const encoded = encodeURI(uri);
console.log(encoded); // https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B
console.log(decodeURI(encoded)) // https://mozilla.org/?x=шеллы

What is memoization?

Memoization - is the technique in programming which optimizes the performance of the app by caching the result of the expensive function calls and returning the cached data as long as the same input occurs. And only performing that same expensive function calculation when different input is given

const fib = (num, memo = []) => {
  if (memo[num]) return memo[num];
  if (num <= 2) return 1;
  const res = fib(num - 1, memo) + fib(num - 2, memo);
  memo[num] = res;
  return res;
};

console.log(fib(5));

What are classes in ES6?

ES6 - classes allow to write JavaScript programs in OOP style like in Java or other OOP languages. While under the hood, ES6 classes converted into constructor functions and Prototypical inheritance comes to play, it's still easier to write OOP style code especially for those who's coming from OOP languages.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  eat(food) {
    console.log(`${this.name} eats ${food}`);
  }
  sleep(time) {
    console.log(`${this.name} sleeps at ${time}`);
  }
  wakeup(time) {
    console.log(`${this.name} wakesup at ${time}`);
  }
}
class Teacher extends Person {
  constructor(name, age, role, salary, hobbies) {
    super(name, age);
    this.role = role;
    this.salary = salary;
    this.hobbies = hobbies;
  }
  printBio() {
    console.log(
      `${this.name} is ${this.age} years old. And he is ${
        this.role
      } with the salary of $${
        this.salary
      }. His hobbies are: ${this.hobbies.join(", ")}`
    );
  }
}
const jaxongir = new Teacher("Jaxongir", 27, "Full-Stack mentor", 1500, [
  "Reading",
  "Calisthenics",
  "Swmming",
]);

jaxongir.eat("Caviar") // Jaxongir eats Caviar
jaxongir.sleep("23:00 pm") // Jaxongir sleeps at 23:00 pm
jaxongir.wakeup("09:00 am") // Jaxongir wakesup at 09:00 am
jaxongir.printBio() // Jaxongir is 27 years old. And he is Full-Stack mentor with the salary of $1500. His hobbies are: Reading, Calisthenics, Swmming

What are modules?

Modules - are containers for the related reusable code which can be imported in multiple files.

Why do you need modules?

Modules are great for data privacy, modularity, maintainability, namespacing, and reusability of the code. Basically they allow to think about the software in isolation which decreases the load in the brain and makes it easy to think about the overall structure of the program.

What is a promise

Promise - the object that indicates the result of the asynchronous actions which either could be failure (rejected) or successful (fulfilled).

const promise = new Promise(function (resolve, reject) {
  // promise description
});

const promise = new Promise(
  (resolve) => {
    setTimeout(() => {
      resolve("I'm a Promise!");
    }, 5000);
  },
  (reject) => {}
);

promise.then((value) => console.log(value));

What are the three states of promise?

3 states of Promise are as described below:

Fulfilled - when asynchronous request is successfully completed and response is given
Rejected - when asynchronous request is unsuccessfull and no response is given which could be due to network error, authentication or authorization error and so on
Pending - which is in between request being sent and response is coming back

What is a callback function?

callback - is the function that's passed as the argument to different function which then invoked inside that function body

const nums = [1, 2, 3, 4, 5];
const myMap = (callbackFunc, nums) => {
  newNums = [];
  for (const num of nums) {
    newNums.push(callbackFunc(num));
  }
  return newNums;
};
const modifiedNums = myMap((num) => num * num, nums);
console.log(modifiedNums) // [1, 4, 9, 16, 25]

Why do we need callbacks?

Callback function is very useful especially on asynchronous operations like: when data is fetched or failed callback is called to indicate whether request is success or failure. Or in events when user clicks the button, callback is fired to execute code within callback body.

const generateReportBtn = document.querySelector(".generate-report");
const generateReport = ()=>{
  // do something
}
generateReportBtn.addEventListener("click", generateReport)

const populatePeople = ()=>{
// do something
}
setTimeout(populatePeople, 2000)

What is a callback hell and how to avoid it?

Callback hell - is the term used to describe when callback function is nested within one another too deeply which makes it harder to debug this code as it's very unreadable to even author of this code. Solution is using async await or promise chaining.
Callback hell example. This gives me nightmares in my dreams

fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

What is promise chaining?

Promise Chaining - is the solution to callback hell that we saw above. Instead of nesting one callback within another callback, we use result of the previously fullfilled promise and return fullfilled promise for the next promise in the chain.

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

What is promise.all?

Promise.all - is the static method that takes arraf of iterable promises as an input and returns a single Promise which is the values of fulfilled promises in the array. The fulfilled promises are in the same order as their iterable promise. If any one the promise is rejected the whole operations is rejected. And even if last promise in the promise array is fulfilled, Promise.all() does not stop operation but waits until each and every promise is fulfilled.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// Expected output: Array [3, 42, "foo"]

What is the purpose of the race method in promise?

Promise.race - is the static method that takes an iterable promises as an input and returns the first resolved promise value.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// Expected output: "two"

What is a strict mode in javascript?

Strict mode - in JavaScript used to set javascript environment to be in sticter mode which avoid errors such as declaring variable without keywords var,let,const. Strict can be initiated for the whole environment or for specific function.

Why do you need strict mode?

We neeed strict mode because:

Eliminates some JavaScript silent errors by changing them to throw errors.
Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.
Prohibits some syntax likely to be defined in future versions of ECMAScript.

How do you declare strict mode?

We can enable strict mode by just typing "use strict" either globally or within specific function.

// Non strict mode
age = 27;
console.log(age) // 27

// Strict mode
"use strict";
age = 27;
console.log(age) // ReferenceError: age is not defined

What is the purpose of the delete operator?

delete operator - is used to delete a property of an object. if that property value is an object then reference to that object is lost

const person = {
  name: "John",
  age: 34,
  country: "USA",
};
console.log(person) // {name: "John", age: 34, country: "USA"}
delete person.country;
console.log(person) // {name: "John", age: 34}

What is typeof operator?

typeof operator - is a function which is used to know what is the type of the expression passed to it

console.log(typeof 1) // number
console.log(typeof "hello") // string
console.log(typeof false) // boolean
console.log(typeof []) // object
console.log(typeof {}) // object
console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof NaN) // number

What is undefined?

undefined - is primitive data type. When variable declared but not value's given then in the console it's result is undefined.

let name;
console.log(name) // undefined

What is null?

null - is also primitive data type. And it's used to indicate the absense of the value.

let name = null;
console.log(name) // null

What is the difference between null and undefined?

*null

null is primitive data type and indicates that no memory is allocated for the variable in the memory
when used on comparison converted to 0
typeof null is an object

undefined

undefined - is also primitive data type and indicates that memory is allocated for the variable and it's declared but no values is assinged
when used on comparison converted to NaN
typeof undefined is undefined

What is eval?

eval - function used to execute string of code as JavaScript script. string of code can be expressions, function calls etc..
Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval() - MDN

const add = (num1, num2) => num1 + num2;
console.log(eval("add(1, 9)")); // 10

What is the difference between window and document?

window

window object is the root level element on each page
it's by default available in every page
it's has methods like confirm, alert
document or DOM is the direct child property of itself

document

document or DOM is the direct child of the window object. and it's representation of HTML
it can be referenced via document or window.document
it let's access DOM elements via methods such as: querySelector, getElementById, querySelectorAll and more
it let's us to CRUD on the UI

How do you access history in javascript?

We can page history via using window object's history object. history object has back and forward methods.

// moves back to previous URI
window.history.back()

// moves forward to next URI
window.history.forward()

How do you detect caps lock key turned on or not?

We can detect whether caps lock key is activated or not by using KeyboardEvent.getModifierState() which returns boolean value true for caps lock key is activated and false for not activated. It's not only detects capslock but also ScrollLock, NumsLock as well.

const heading = document.querySelector("h1");

document.body.addEventListener("click", (e) => {
  const isCapsLockOn = e.getModifierState("CapsLock");
  if (isCapsLockOn) {
    heading.textContent = "CapsLock is Activated";
  } else {
    heading.textContent = "CapsLock is Deactivated";
  }
});

What is isNaN?

isNaN - is built-in function which is used to check whether the given input is NaN(Not a Number)

console.log(isNaN("1")) // false it's a number;
console.log(isNaN("st")) // true it's not a number

What are the differences between undeclared and undefined variables?

undeclared

variable is a variable which is not declared or assigned value when try to access it, error is thrown
no memory is allocated for them as they don't exist yet

undefined

variable is a variable which is declared but no value is assigned.
memory is allocated and when try to print in the console, undefined is declared

What are global variables?

global variables - are variables that are declared outside {} and function and they are accessible everywhere

// global variable
let name = "Jaxongir"

(()=>{
 console.log(name) // Jaxongir
})()

What are the problems with global variables?

There are many problems with the global variables such as:

namespace collision
maintanability
testability

10 ChatGPT Alternatives You Must Have

Jaxongir — Tue, 31 Jan 2023 05:05:39 +0000

ChatGPT has taken the world by storm in short period of time. While some look at with fear that AI takes over developer jobs, others use to increase their productivity. Don't worry AI never take developer jobs as long as you stay relevant by always learning new skills and of course AI'd be created by human, developers. In this post, I'm going to list out 10 other ChatGPT alternatives that need recognition and helps you become more productive.

1. ChatSonic

A revolutionary AI like Chat GPT - ChatSonic, the conversational AI chatbot is built to beat all the limitations of ChatGPT by Open AI. Unlock the future of automation and content with a Chat GPT alternative, ChatSonic!

2. Twain

Twain is the AI communication assistant for outreach

3. Marmof

With Marmof, you can create compelling and informative content 10X faster and more efficiently.

4. Rytr

A better, 10x faster way to write product descriptions.
Rytr is an AI writing assistant that helps you create high-quality content, in just a few seconds, at a fraction of the cost!

5. Easy-Peasy.AI

Create amazing emails. 10X faster with AI tools.
Easy-Peasy.AI is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster.

6. Peppertype

Your Virtual Content Assistant. Generate content that converts in seconds.

7. JasperChat

Interacting with artificial intelligence used to feel difficult, overwhelming, and a bit robotic... Now with Jasper Chat, have a natural conversation with AI that feels surprisingly human. Simply ask your friendly AI chatbot to generate ideas, revise your content, and even make you laugh.

8. Perplexity

Perplexity AI is an answer engine that delivers accurate answers to complex questions using large language models. Ask is powered by large language models and search engines. Accuracy is limited by search results and AI capabilities. May generate offensive or dangerous content. Perplexity is not liable for content generated. Do not enter personal information.

9. Replika

The AI companion who cares. Always here to listen and talk.
Always on your side

10. Mycharacter

A dApp built on the AI protocol that leverages the CharacterGPT Multimodal AI system to generate realistic, intelligent, and interactive AI characters.

Technique to Build Any Project as Web Developer

Jaxongir — Mon, 30 Jan 2023 16:52:32 +0000

Hi there! You've been coding for a while, and you can read and understand code examples that you see, you could follow along the courses and build projects with the instructor BUT when you want to build a project on your own from the scratch, you don't know where to start, what to do, how to do. Don't worry, when I was a beginner, I used to be just like you. In this post, I give you a solid framework so that you can build any project that you want to build from the scratch by yourself. This framework works with dynamic websites well but can be tailored to frontend only websites as well

NOTE: You don't have to be a full-stack developer to use this framework, it works as long as the website is not static which means that there's user interaction.

Step 1: Understand what you are building

Regardless of whether you're building small or super-duper complex applications, the first step is always going to be understanding exactly what you're building. So in this step understand what you're building by writing down a short but concise description of the project you're building. Mostly client is going to give you a project description if you're building it for the client else you've to define it.

Step 2: Define the project requirements

In this step, list out all of the project requirements which is going to be user interaction with the data.
E.g

User can log in/logout/register
User can add a product to the cart
User can purchase a product with his cart
The user can delete his account

Step 3: Define the data structure of the project and the relationship between the data

Data in any dynamic application is the heart of the application. And it's always free of project requirements or UI or backend frameworks. So define the data of the application and the relationship of data with other data if there's

E.g: Example for todo

const user = {
id: "unique id",
username: "user name",
password: "some password"
}

const todo = {
id: "unique id",
task: "some task",
completed: false,
user: "user-id"
}

Step 4: Define the data flow of the application

Once you define the data structure and relationships between data, now you've to define the data flow which emulates how the user interacts with the application

E.g: Example for todo

User register -> failure - if the username is already taken, display an error message in the UI -> success - goes to Login page
- User login -> failure - display error message in UI to explain what went wrong -> success - Todos home page
  - Create todo -> failure - display error message in UI, indicating what went wrong -> success - display newly added todo in the todos section
  - Edit todo -> failure - display error message in UI, indicating what went wrong -> success - display edited todo in the todos section
  - Delete todo -> failure - display error message in UI, indicating what went wrong -> success - display list of todos which must not include deleted todo

Step 5: Build API

Now we know what data looks like and how it's changed, we can build API

Install the necessary packages
Setup the server
Create a model with the given data
Create routes
Create the controller
Refactor

Step 6: Build UI

I'd assume that you'd use component-based frameworks like React, Angular, and Vue, or even if you're building just with HTML, learn to break UI into individual component containers. In this step break UI into components hierarchy and decide where the state's going to live.

Summary:
So in this post, you've learned the framework to build any web development project from scratch, I hope you've found it useful. I'd love to hear your feedbacks and you guys approach.

5 Full-Stack Project Ideas for 2023

Jaxongir — Wed, 18 Jan 2023 16:27:40 +0000

Hi everyone, it has been a long time since I wrote the last time and I've to say that I've really missed writing as it's one of my passions and I'm glad that I'm back. So anyway, I'd like to say Happy New 2023 to everyone of you. I wish this year to be one of the best years of all our lives that we'd achieve all the goals that we set for this year. In the first post of this year, I'm going to provide you guys with 5 Full-Stack project ideas that you can build this year that going to help you land your first or 2nd or 3rd+ dev job. But don't take the title too seriously that you can build these apps as frontend developer as well using BAAS. So good luck to you all

Technology Stack For All Projects

Choose YOUR_FAVOURITE_STACK. As long as you're creating APIs and connecting it with UI then you're good to go. And remember you're not limited to the requirements mentioned in this post, you can make them more complex and advanced as you can or make them more simpler based on your current skill level

1. Online Restaurant

Build website like Pizzahut or dominos where it should allow both takeaway and delivery where customer can choose food from the given menu and place his order with the online payment or by cash on arrival. This website'd have both admin and client modules. Admin's responsible for creating menu and updating the page content while Client display menu and allow the users to make orders

Requirements

User Module

User can signup & login via his phone number
User can add/remove food to his favourites list
User can add foods to cart
User can make payment online or by cash on arrival
User can subscribe for any news about restaurant

Admin Module

Admin can only login
Admin can CRUD products
Admin can CRUD product categories
Admin can update the page content CMS
Admin can accept/reject user order
Admin can view total sales of the restaurant by selecting from the list of dates
Admin can view all the orders history
Admin can see all the subscribers
Admin can view the invoices

2. Online Pharmacy

Build Ecommerse for pharmacy store where users can view all the available medicines in the company and make purchases after which products're delived to the customer. This app has two modules, Admin and Client. Admin is responsible for CRUD of the products and handling payments while Client lets users make purchases

Requirements

User Module

User can signup via his social media or email and password
User can login with his email and password or social media
User can see all the purchases he's made
User can change his profile info
User can add medicines to the cart
User can order medicine and apply coupon
User can leave a review on the product he's purchased
User can be refunded in case product is not up-to-date

Admin Module

Admin can only login
Admin can view all the pharmacists of the company
Admin can track the daily sales, weekly sales, monthly and yearly sales
Admin can CRUD medical companies
Admin can CRUD medicines
Admin can CRUD pharmacists
Admin can view individual pharmacist sale reports between 2 dates
Admin can see the report about the stock of the company
Admin can see the invoice for each order and print or download it
Admin can accept/reject the payment
Admin can refund the customer if the reason for that is valid

Pharmacist

Pharmacist can only login
Pharmacist can change his profile data
Pharmacist can see the sales statistics for the given period
Pharmacist can add purchase history for each medicine he's sold
Pharmacist can see the report of his sales between 2 dates

3. Chat App

Create chat app that allows users to CRUD groups or have one-on-one conversations, send photos, videos, make voice or video calls with others, change his profile info, block users, search all the authenticated users of the app and send the request, reject request

User Requirements

User can create account with his socials or email and password
User can login with his socials or email and password
User can CRUD group
User can add new user to the group
User can block/unblock user from the group
User can block/unblock person
User can search all the authenticated users of this app
User can make voice and video calls
User can send photos, audios, and videos

4. Online Language Course

Build Online Language app which lets users to choose all the possible language courses on the website and buy the course that suits to their level and goals. Teachers can CRUD blog posts, CRUD language courses.

Requirements

Admin Module

Admin can only login
Admin can CRUD teachers
Admin can accept/reject/refund payments by the users
Admin can view all the blogs by the teachers
Admin can enable/disable the blog by the teacher
Admin can enable/disable the course by the teacher
Admin can see the sale statistics for up to 10 years
Admin can see the reviews on each teacher
Admin can see the sale reports for each teacher

Teacher Module

Teacher can only login
Teacher can write blog posts
Teacher can create a language course
Teacher can create quizzes for each language course
Teacher can see all the reviews on him
Teacher can see history of students that bought his course

User Module

User can only login provided after his purchase which is valid duration of the course
User can leave review any time on the course as long as it's during the course
User can answer for the quizzes
User can see all the course he's taken and see the progress for each one

5. Expense Tracker

Build the app that lets the user to track his daily expenses and see the reports of his expenses for a week, month or a year

Requirements

User can register with his social media or email and password
User can login with his social media or email and password
User can CRUD his expense for today
User can see the statistics of his expenses for the any given period of time
User can print or download his expense record

Top 130 UI/UX, Web Developer Portfolio Inspirations

Jaxongir — Sun, 27 Nov 2022 17:44:29 +0000

Creating your portfolio from the scratch seems impossible. You look at the blank canva but don't know where to start. Don't worry, I've collected the best 130 Web Developer Portfolios on the internet that you can take an inspiration from. All the love and enjoy

1. findmatthew

2. chippd.github.io

3. ejosue

4. ybrikman

5. caferati

6. jtom.me

7. andrewborstein

8. adhamdannaway

9. kyleledbetter

10. rleonardi

11. driesvanbroeck

12. studiogruhl

13. loungelizard

14. wokine

15. danielspatzek

16. seanhalpin.design

17. denisechandler

18. y78.fr

19. toyfight.co

20. rezo-zero

21. mypoorbrain

22. femmefatale.paris

23. legworkstudio

24. jacekjeznach

25. lynnandtonic

26. bruno-simon

27. giftegwuenu

28. jason.af

29. brittanychiang

30. kemiadeleke

31. mxb.dev

32. seyi.dev

33. anniebombanie

34. jhey.dev

35. robbowen.digital

36. olaolu.dev

37. tamalsen.dev

38. cydstumpel

39. jesse-zhou

40. onyedika

41. kenjimmy

42. adeolaadeoti

43. thecraftsmen

44. rammaheshwari

45. vanholtz

46. lauren-waller

47. mattfarley

48. bepatrickdavid

49. dunks1980

50. p5aholic

51. itssharl

52. stevenmengin

53. tobiasahlin

54. stinkstudios

55. livier-guilleux

56. rafaelkfouri

57. heathershaw

58. builtbybuffalo

59. creativemints

60. buzzworthystudio

61. mixd

62. wemake

63. together

64. naum.studio

65. moreyum

66. ianlunn

67. pierre

68. dejan

69. sebkay

70. agence-belle-epoque

71. narrowdesign

72. taylorkmho

73. qodeinteractive

74. raoul-gaillard

75. colinsimpsondesign

76. ccccontemple

77. riccardozanutta

78. sii.im

79. mrcthms

80. vitosalvatore

81. juanferreras

82. jonny

83. robinmastromarino

84. paulstamatiou

85. dunks1980

86. emilyridge

87. timmyomahony

88. benadam

89. mcclintockliving

90. jonnyczar

91. simonpan

92. herasaqib

93. thekeendesigns

94. zhurankou

95. jeffbae

96. huzzahstudio

97. danielrakh

98. designbyroka

99. jeffkell

100. delacruzdynamics

101. tientdao

102. davidlng

103. srinivasan

104. varanda

105. tiffanyho

106. francestung

107. charityshi

108. doering

109. jennybounmivilay

110. aucadian

111. jeremyomeara

112. juliocreative

113. ryannicholasclark

114. erikbue

115. jennacoles

116. gabrielvaldivia

117. michaelevensen

118. peterchangsite

119. jacobottesen-uxportfolio.github.io

120. vlad

121. karoliskosas

122. vaxliu

123. sophgdn

124. aleksitappura

125. jerramurphy

126. jillymp

127. pratibhajoshi

128. abdussalam

129. tangerineindustries

130. krzimmermann

Build Animated Navigation Bar with JavaScript

Jaxongir — Sun, 27 Nov 2022 07:59:12 +0000

Hello fellow developers on the internet. How're you all doing? I hope everyone is doing great today!. In this post, we're going to be building the best navigation menu with JavaScript that you can find on the internet. Nah I'm joking 🤣. It's simple but useful that you can learn a trick or 2 from. So let's started

Steps

1. Create the directory

mkdir navigation-bar
cd navigation-bar
code .

2. Create Starter Files

Create empty html, css, and javascript files

3. Markup the Skeleton of the App

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Animation Navigation Menu</title>
</head>
<body>
    <header class="header">
        <div class="hamburger">
            <div class="hamburger__line"></div>
            <div class="hamburger__line"></div>
            <div class="hamburger__line"></div>
        </div>
        <div class="header__left">
            <a href="#" class="header__logo">RETRO</a>
            <div class="header__text-box">
                <h1 class="header__title">
                    <span class="header__title--top">
                        CREATIVE DESIGN
                    </span>
                    <span class="header__title--bottom">
                        INTRODUCING
                    </span>
                </h1>
                <div class="header__btns-box">
                    <button class="header__btn header__btn--1  btn btn--red">
                        Get Started
                    </button>
                    <button class="header__btn header__btn--2  btn btn--white">
                        Get Featured
                    </button>
                </div>
            </div>
        </div>
        <div class="header__right">
            <nav class="nav header__nav">
                <ul class="nav__list">
                    <li class="nav__item nav__item--1">
                        <a href="#" class="nav__link">HOME</a>
                    </li>
                    <li class="nav__item nav__item--2">
                        <a href="#" class="nav__link">GALLERY</a>
                    </li>
                    <li class="nav__item nav__item--3">
                        <a href="#" class="nav__link">CONTACT</a>
                    </li>
                    <li class="nav__item nav__item--4">
                        <a href="#" class="nav__link">LOCATION</a>
                    </li>
                    <li class="nav__item nav__item--5">
                        <a href="#" class="nav__link">TESTIMONIAL</a>
                    </li>
                    <li class="nav__item nav__item--6">
                        <a href="#" class="nav__link">PRICING</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <script src="./index.js"></script>
</body>
</html>

3. Open the live server and you should see following ugly texts

3. Now add the following styles

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}

a,button {
    display: inline-block;
}
a {
    text-decoration: none;
}


/* btn */
.btn {
    padding: 15px 25px;
    border-radius: 30px;
    border: 0;
    background: #fff;
    font-size: 17px;
    cursor: pointer;
}
.btn--red {
    background: rgb(255, 0, 60);
    color: #fff;
}



/* header */
.header {
    display: flex;
    min-height: 100vh;
}
/* menu open styles */
.header.is-menu-open .header__left {
    -webkit-clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
}
.header.is-menu-open .header__right {
    min-width: 50%;
    max-width: 50%;
}
.header.is-menu-open .nav__item {
    visibility: visible;
    animation: animate .5s ease-out backwards;
    opacity: 1;
}
.header.is-menu-open .hamburger {
    background: #000;
}

/* mobile screen styles */
.header.is-menu-open.is-mobile-screen .header__left {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    padding: 0;
    width: 0;
}
.header.is-menu-open.is-mobile-screen .header__right {
    min-width: 100%;
    max-width: 100%;
}
.header.is-menu-open.is-mobile-screen .hamburger {
    left: 40px;
    z-index: 9999;
    background: #000;
}



/* header left */
.header__left {
    flex: 1;
    padding: 40px 60px;
    width: 100%;
    background: url(https://images.unsplash.com/photo-1661961110671-77b71b929d52?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
    background-position: center;
    background-blend-mode: multiply;
}
.header__logo {
    color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
}
.header__text-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.header__title--top, .header__title--bottom {
    display: block;
}
.header__title--top {
    font-size: clamp(1.5rem, calc(2vw + 1rem), 2.5rem);
}
.header__title--bottom {
    font-size: clamp(2.5rem, calc(3.5vw + 1rem), 4.5rem);
}
.header__btns-box {
    margin-top: 30px;
}
.header__btn--1 {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.header__btn--2 {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


    /* header right */
.header__right {
    flex: 1;
    min-width: 0;
    max-width: 0;
    transition: all .3s ease-out;
}
.header__nav {
    position: absolute;
    top: 50%;
    right: 150px;
    transform: translateY(-50%);
}




/* hamburger menu */
.hamburger {
    position: fixed;
    top: 40px;
    right: 60px;
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 2px;
    cursor: pointer;
}
.hamburger__line {
    height: 3px;
    width: 20px;
    background: #fff;
}
.hamburger__line:not(:last-child) {
    margin-bottom: 5px;
}



/* nav */
.nav__list {
    list-style: none;
    text-align: right;
}
.nav__item {
    opacity: 0;
    visibility: hidden;
}
.header .nav .nav__item--1 {
    animation-delay: .1s;
}
.header .nav .nav__item--2 {
    animation-delay: .3s;
}
.header .nav .nav__item--3 {
    animation-delay: .6s;
}
.header .nav .nav__item--4 {
    animation-delay: .9s;
}
.header .nav .nav__item--5 {
    animation-delay: 1.2s;
}
.header .nav .nav__item--6 {
    animation-delay: 1.5s;
}
@keyframes animate {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.nav__item:not(:last-child) {
    margin-bottom: 30px;
}
.nav__link {
    position: relative;
    color: #111;
    font-size: 2rem;
    font-weight: bold;
}
.nav__link::before {
    position: absolute;
    left: 50%;
    content: "";
    bottom: 0;
    width: 0;
    height: 2px;
    background: #000;
    transition: all .3s ease-out;
}
.nav__link:hover::before {
    left: 0;
    width: 100%;
}

4. After saving, you should see something like this

5. Now let's make the app interactive

To do that add the following code which brings the app to life.

function getPersonInfo(one, two, three) {
  console.log(one);
  console.log(two);
  console.log(three);
}

const person = "Lydia";
const age = 21;

getPersonInfo`${person} is ${age} years old`;
const DOMNodes = (() => {
  const hamburgerBtn = document.querySelector(".hamburger");
  const header = document.querySelector(".header");
  return {
    hamburgerBtn,
    header,
  };
})();

let isMenuOpen = false;

const toggleMenu = () => {
  if (isMenuOpen) {
    DOMNodes.header.classList.remove("is-menu-open");
    isMenuOpen = !isMenuOpen;
  } else {
    DOMNodes.header.classList.add("is-menu-open");
    isMenuOpen = !isMenuOpen;
  }
};
const resizeMenu = () => {
  const windowWidth = window.innerWidth;
  console.log(windowWidth <= 850);
  if (windowWidth <= 850) {
    DOMNodes.header.classList.add("is-mobile-screen");
  } else {
    DOMNodes.header.classList.remove("is-mobile-screen");
  }
};

DOMNodes.hamburgerBtn.addEventListener("click", toggleMenu);
window.addEventListener("resize", resizeMenu);

Conclusion

So in this post, we've learned to build the most amazing and unique navigation bar that exist to this day on the internet. I'm very happy if you've enjoyed it. So good luck with your programming :)

Best UI/UX Resources Every UI/UX Designer Needs

Jaxongir — Sat, 26 Nov 2022 09:32:06 +0000

Whether you're beginner UI/UX designer or have been designing professionally, the following resources in this post, is going to take your UI/UX design skills to the next level

1. dribble

Explore the world’s leading design portfolios. Millions of designers and agencies around the world showcase their portfolio work on Dribbble - the home to the world’s best design and creative professionals.

2. behance

Behance is social media platform that lets creatives to display their artistic and creative work and connect with other artists

3. awwwards

A meeting point, where digital design professionals from across the globe find inspiration, impart knowledge and experience, connect, and share constructive, respectful critiques.

4. onepagelove

One Page Love is the leading showcase of beautiful One Page websites, templates and resources.

5. pttrns

Pttrns've thousands of curated mobile design patterns, get online advice, and connect with other designers from all over the world.

6. uxmovement

UX Movement is an independent publication that teaches you how to improve the user experience of your apps, websites, and interfaces through the tips, techniques, and best practices

7. screenlane

Screenlane is a website and newsletter that features the latest mobile design inspirations.

8. ecomm.design

eCommerce Website Design Gallery & Tech Inspiration
Browse a collection of the top 3805 eCommerce websites by Platform, Categories, Technologies & Traffic.

9. land-book

At Land-book, you’ll find a great variety of different types of websites. No matter what project you’re working on, there’s always something that might inspire and encourage you to do even better stuff. :)

10. muz.li

Designers' Secret Source. The best design inspiration - expertly curated for you. Muzli is a new-tab browser plugin and mobile app that instantly delivers relevant design stories and inspiration

11. pageflows

Design better user flows by learning from proven products

12. grabient

Grabient lets you generate linear web gradient

13. marvelapp

The best design articles every day.

14. designmodo

Designmodo is a team of tech experts, creatives and all-round digital gurus based all over the world. Create incredible websites and email newsletters with simple tools

15. nngroup

UX research and consulting firm trusted by leading organizations world-wide to provide reliable guidance on user experience.

16. smashingmagazine

Curated guides on major topics covered by Smashing articles, conference talks and others. Each guide brings together the best we have on that subject, to help you explore and learn.

17. uxdesign

Curated stories on UX, Visual & Product Design

18. sitepoint

UX design articles from UX experts

19. webdesignernews

Whether you’re looking to stay up-to-date on the latest industry news or find inspiration for your next project, Webdesigner News is your go-to source for news, articles and much more.

20. interaction-design

Your constantly-updated definition of User Interface (UI) Design Patterns and collection of topical content and literature

21. uxplanet

One-stop resource for everything related to user experience

22. lawsofux

Laws of UX is a collection of best practices that designers can consider when building user interfaces.

Best Websites to Learn Full-Stack Development

Jaxongir — Thu, 24 Nov 2022 18:00:10 +0000

Hi fellow developers on the internet. How're you all doing? I hope everything is doing great. So in this post, I'm going to list out top 10 the best FREE Full-Stack Development courses that you can find online. I've curated these awesome free courses on full-stack development so that you don't have to find reliable and the best free courses by yourself. Have a nice read ❤️️

1. The Odin Project

The Odin Project is for absolute beginners in the world of web development and those who have tried other resources without success. In reality, The Odin Project is for anyone who wants to work as a web developer, do freelancing work, build a startup, or just hack together a homepage for yourself. All the tools you need are here.

2. FreeCodeCamp

FreeCodeCamp is a community of millions of people around the world who are learning to code together. You can learn to code with free online courses, programming projects, and interview preparation for developer jobs. Every year, thousands of people who join the freeCodeCamp community get their first software developer job

3. App Academy Open

App Academy Open is a free platform that will help you learn to code, via our comprehensive curriculum (including JavaScript and Python), and ultimately get hired as a Software Engineer. Creating an account on App Academy Open is 100% free. It's a no gimmicks program where you'll get access to the same full-stack curriculum that students in App Academy's full-time, online immersive course receive. That means over 500 hours of content from readings, to videos, to projects, and more.

4. Full Stack Development for Beginners

Learn Full Stack Development through this free course to understand the basics and the advanced aspects of both front-end and back-end technologies. By the end of this free full stack development course, you will have comprehensive knowledge about technologies like Git Command, Angular, NodeJS, Maven, Jenkins, Selenium and Docker.

5. Full-Stack Web Development with React Specialization

Learn front-end and hybrid mobile development, with server-side support, for implementing a multi-platform solution.
The first two courses in this Specialization cover front-end frameworks: Bootstrap 4 and React. On the server side, you’ll learn to implement NoSQL databases using MongoDB, work within a Node.js environment and Express framework, and communicate to the client side through a RESTful API. Learners enrolling in this Specialization are expected to have prior working knowledge of HTML, CSS and JavaScript.

6. Application Development with Node.Js & Express

Create server-side applications using the Node.js JavaScript runtime. Extend your Node.js applications with third-party packages, including Express. Use npm to manage Node.js packages in your Node.js application. Write asynchronous callback functions and promises to complete asynchronous operations.

7. Become a Full-Stack Web Developer

Get the skills to work with both back-end and front-end technologies as a full-stack developer. You'll develop a solid foundation for working with servers and host configurations, performing database integrations, and creating dynamic, data-driven websites.

8. Full Stack Web Development with Angular Specialization

Learn front-end and hybrid mobile development, with server-side support, for implementing a multi-platform solution.
The first two courses in this Specialization cover front-end frameworks: Bootstrap 4 and Angular. On the server side, you’ll learn to implement NoSQL databases using MongoDB, work within a Node.js environment and Express framework, and communicate to the client side through a RESTful API. Learners enrolling in this Specialization are expected to have prior working knowledge of HTML, CSS and JavaScript.

9. Learning Tracks

A free full stack web dev curriculum by top developers. No need to go to a bootcamp, buy a video subscription, or get a computer science degree. Be a self-taught developer and learn full stack web development online with curated tutorials for free.

10. Learning Full-Stack JavaScript Development: MongoDB, Node, and React (2016)

Learn by doing! Learn full-stack JavaScript development by building a web application with MongoDB, Node.js, and React.js.
Learn how to use Node as a web server and an API server, how to consume data and build user interfaces with React, and how to read and write data with a MongoDB database. React allows you to build full-featured, data-driven applications faster and more efficiently than what is possible with JavaScript alone.

100+ Most Useful Github Repositories Every Programmer Needs

Jaxongir — Thu, 17 Nov 2022 17:45:31 +0000

Hi everyone! Today, I'll introduce you to the top 100+ repositories on github on most important topics on programming ranging from Frontend to Backend, DSA, to Design Patterns and System Design. These repositories are beneficial for any level from beginner to expert level programmers. I recommend to bookmark it for future as they'll be quite useful in years to come in your career. And they're going to be incredibly useful whether you're learning or preparing for the interview. Enjoy the read ❤️️

HTML

1. Html Head

A simple guide to HTML

elements

2. Html Boilerplate

A professional front-end template for building fast, robust, and adaptable web apps or sites.

3. Html Quizzes

Quizzes on HTML fundamentals

4. Html Interview Questions

HTML5 coding interview questions and answers for web developers.

CSS

1. Css Pro Tips

A collection of tips to help take your CSS skills pro.

2. Awesome Css

A curated list of frameworks, style guides, and cool nuggets of information for writing awesome CSS. It does not contain resources to learn CSS.

3. Awesome Css Learning

An awesome list limited to the best CSS learning resources

4. Awesome Css Frameworks

List of awesome CSS frameworks.

5. Animate Css

A cross-browser library of CSS animations. As easy to use as an easy thing.

6. Frontend Dev Bookmarks

Manually curated collection of resources for frontend web developers.

7. Css Grid Garden

Grid Garden is a game for learning CSS grid layout

8. Css Flexbox Froggy

A game for learning CSS flexbox

9. You don't need JavaScript

CSS is powerful, you can do a lot of things without JS.

10. 50 Projects 50 Days

50+ mini web projects using HTML, CSS & JS

11. Solved by Flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

12. Css Interview Questions

CSS Interview Questions Answered to help you get ready for your next coding interview.

14. Frontend Interview Questions

This repository contains a number of front-end interview questions that can be used when vetting potential candidates.

Frontend

1. Frontend Interview Handbook

Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas. This repository covers all you need to know for front end interviews:

2. Frontend Checklist

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

3. Frontend Performance Checklist

The only Front-End Performance Checklist that runs faster than the others

4. Frontend Bootcamp

Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux

5. Web Dev for Beginners

24 Lessons, 12 Weeks, Get Started as a Web Developer

6. Developer Handbook

An opinionated guide on how to become a professional Web/Mobile App Developer.

7. Spellbook of Modern Webdev

A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development

8. Web Fundamentals

Former git repo for WebFundamentals on developers.google.com

9. Design Resources for Beginners

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more

10. Frontend Collection

Notes for Front-end Software Engineers. Covers common data structure and algorithms, basic web concepts, HTML & CSS & Javascript.

JavaScript

1. You don't know JavaScript

This is a series of books diving deep into the core mechanisms of the JavaScript language. This is the second edition of the book series:

2. JavaScript Algorithms

Algorithms and data structures implemented in JavaScript with explanations and links to further readings

3. JavaScript Tutorial

GitBook teaching programming basics with Javascript. This book will teach you the basics of programming and Javascript. Whether you are an experienced programmer or not, this book is intended for everyone who wishes to learn the JavaScript programming language.

4. JavaScript30

30 Day Vanilla JS Challenge

5. JavaScript Test Driven Learning

This project is aimed to help the user further study Javascript with a test-driven approach. Each unit contains an annotated tutorial and a platform where you can test your understanding of the topic.

6. JavaScript Advanced Questions

A long list of (advanced) JavaScript questions, and their explanations

7. Clean Code JavaScript

Clean Code concepts adapted for JavaScript

8. Awesome JavaScript

A collection of awesome browser-side JavaScript libraries, resources and shiny things

9. Complete JavaScript Course

Starter files, final projects, and FAQ for my Complete JavaScript course

10. JavaScript Design Patterns

JavaScript Design Patterns

React.js

1. React Bits

React patterns, techniques, tips and tricks. A bit outdated but still useful.

2. React Atomic Design

How the Atomic Design methodology can create a great design system from scratch and make better developers.

3. React Patterns

React patterns & techniques to use in development for React Developer

4. Awesome React

A collection of awesome things regarding React ecosystem

5. React Typescript Cheatsheet

Cheatsheets for experienced React developers getting started with TypeScript

6. Beautiful React Hooks

A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development

7. Primer React

An implementation of GitHub's Primer Design System using React

8. React HackYourFuture

This repository contains all the material for the HackYourFuture module "React.js: Building dynamic UIs with modern JavaScript"

9. React

The React documentation website

10. React Boilerplate

A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Node.js

1. Awesome Node.js

Delightful Node.js packages and resources

2. Node Best Practises

The Node.js best practices list

3. Node.js Hackathon Starter

A boilerplate for Node.js web applications

4. Node.js Getting Started Heroku

Getting Started with Node on Heroku

5. Art of Node

A short introduction to Node.js

6. Node.js Guidelines

Tips, tricks, and resources for working with Node.js, and the start of an ongoing conversation on how we can improve the Node.js experience on Microsoft platforms.

7. Backendlore

Fellow developer's style of writing backend apps from which we can take great lessons.

8. Bullet Proof Node.js

Implementation of a bulletproof node.js API

9. Node Beginner

A comprehensive Node.js tutorial for beginners

10. Awesome Node.js Projects

Curated list of awesome open-source applications made with Node.js

Programming Roadmaps

1. Developer Roadmap

Interactive roadmaps, guides and other educational content to help developers grow in their careers.

2. C++ Roadmap

Roadmap for learning the C++ programming language for beginners and experienced devs.

3. Java Developer Roadmap

Roadmap to becoming a Java developer in 2022

4. Python Roadmap

Pyhon developer roadmap in 2022

5. DevOps Roadmap

DevOps Roadmap for 2022. with learning resources

6. PHP Developer Roadmap

This is PHP Developer Roadmap. Following this path will guarantee to become a good PHP Developer. The repository is created when working on the following YouTube video PHP Developer roadmap - How to Become a PHP Developer in 2021.

7. Machine Learning Roadmap

A roadmap connecting many of the most important concepts in machine learning, how to learn them and what tools to use to perform them.

8. React Roadmap

This is the "React learning roadmap in 2022. It's well suited for Intermediate to Advanced React developers

9. AspNetCore Developer Roadmap

Roadmap to becoming an ASP.NET Core developer in 2022

10. Cyber Security Roadmap

Cyber Security Roadmap in 2022

Algorithms and Data Structures

1. The Algorithms

Open Source resource for learning Data Structures & Algorithms and their implementation in any Programming Language

2. Awesome Algorithms

A curated list of awesome places to learn and/or practice algorithms. Inspired by awesome-awesomeness and all the other awesome Awesome libraries.

3. DSA Bootcamp Java

This repository consists of the code samples, assignments, and notes for the Java Data Structures & Algorithms bootcamp of Community Classroom.

4. The Complete FAANG Preperation

This repository contains all the DSA (Data-Structures, Algorithms, 450 DSA by Love Babbar Bhaiya, FAANG Questions), Technical Subjects (OS + DBMS + SQL + CN + OOPs) Theory+Questions, FAANG Interview questions, and Miscellaneous Stuff (Programming MCQs, Puzzles, Aptitude, Reasoning)

5. LeetCode Patterns

A pattern-based approach for learning technical interview questions

6. DSA on JavaScript

Data Structures and Algorithms explained and implemented in JavaScript

7. Algo Deck

An Open-Source Collection of 200+ Algorithmic Flash Cards to Help you Preparing your Algorithm & Data Structure Interview

8. Algorithms and Data Structures

180+ Algorithm & Data Structure Problems using C++

9. Leet Code DSA

Solutions to LeetCode problems; updated daily.

10. Algorithms

Atwood's Law applied to CS101 - Classic algorithms and data structures implemented in JavaScript

Design Patterns and System Design

1. Java Design Pattersn

Design patterns implemented in Java

2. System Design Primer

Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

3. Awesome Scalability

The Patterns of Scalable, Reliable, and Performant Large-Scale Systems

4. Python Patterns

A collection of design patterns/idioms in Python

5. Design Patterns for Humans

An ultra-simplified explanation to design patterns

6. Design Patterns PHP

sample code for several design patterns in PHP 8

7. Go Patterns

Curated list of Go design patterns, recipes and idioms

8. Awesome Design Patterns

A curated list of software and architecture related design patterns.

9. Modular Monolith with TDD

Full Modular Monolith application with Domain-Driven Design approach.

10. Domain Driven Hexagon

Learn Domain-Driven Design, software architecture, design patterns, best practices. Code examples included

11. Design Patterns in Typescript

Design pattern implementations in TypeScript

12. System Design Interview

System design interview for IT companies

13. System Design

Learn how to design systems at scale and prepare for system design interviews

14. Machine Learning Systems Design

A booklet on machine learning systems design with exercises. NOT the repo for the book "Designing Machine Learning Systems"

General

1. Awesome webcomponents

A curated list of awesome Web Components tools, articles and resources.

2. Big List of Naughty Strings

The Big List of Naughty Strings is an evolving list of strings which have a high probability of causing issues when used as user-input data.

3. Free Programming Books

Freely available programming books, podcasts.

4. Coding Interview University

The items listed here will prepare you well for a technical interview at just about any software company, including the giants: Amazon, Facebook, Google, and Microsoft.

5. Public APIs

A collective list of free APIs for use in software and web development

6. Build Your own X

Master programming by recreating your favorite technologies from scratch.

7. Automatic Udemy Course Enroller for Free

Do you want to LEARN NEW STUFF for FREE? Don't worry, with the power of web-scraping and automation, this script will find the necessary Udemy coupons & enroll you for PAID UDEMY COURSES, ABSOLUTELY FREE!

8. Sherlock Project

Hunt down social media accounts by username across social networks

9. SDE Interview Questions

Most comprehensive list 📋 of tech interview questions 📘 of companies scraped from Geeksforgeeks, CareerCup and Glassdoor.

10. Complete Placement Preparation

This repository consists of all the material required for cracking the coding rounds and technical interviews during placements.

11 Programming Blogs and Websites to Improve You as a Programmer

Jaxongir — Tue, 15 Nov 2022 06:43:31 +0000

Hi developers and designers. In today's post I'm going to share 11 of the incredible blogging websites on programming that I believe every developer should be reading from.

Disclaimer: I'm not sponsored by any of these resources in this post. They're so good, I can't just keep it to myself but share them so all can benefit

1. css wizardy

Blogs on this website are written by Harry who is an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. It contains excellent articles on CSS. I'm sure everyone finds something useful according to their needs

2. css tricks

CSS-TRICKS is a must to have website for any beginner to advanced web developers. All the articles in there are top-knotch and provides a great value. If you want to take your web development to a next level then this website is what you need.

3. javascript weekly

JavaScipt weejly is the newsletter website where they send you articles and challenges to do on weekly basis.

4. jstips

JS Tips is a collection of useful daily JavaScript tips that will allow you to improve your code writing

5. 30 seconds of code

30 seconds of code provides a wide variety of snippet and article collections for all your development needs. Explore individual language collections or browse through collections about specific topics and programming concepts.

6. patterns dev

Improve how you architect webapps. Patterns dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.

7. refactoring guru

Refactoring Guru makes it easy for you to discover everything you need to know about refactoring, design patterns, SOLID principles, and other smart programming topics.

8. alex kondov

This blog website by Alex Kondov is a full of great articles with great tips and best practises. I'm sure that you'll gain knowledge from his blog posts

9. react typescript cheetsheet

Cheatsheets for experienced React developers getting started with TypeScript

10. 97 Things Every Programmer Should Know

Pearls of wisdom for programmers collected from leading practitioners.

11. a list apart

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

8 Online Tools for Your Images and Videos and Screen Recording

Jaxongir — Tue, 08 Nov 2022 05:09:09 +0000

Hi everyone, in today' post I'm going to talk about 7 online tools that help you work with videos and images like compressing images and videos. And I also introduce you'll to the browser window screen recorder. So enjoy.

1. Motionbox

Simple Collaborative Video Editing For Creatives.
Motionbox exists to help creators and teams make better videos, faster. Get started today, no credit card required.
Free option provides 2gb storage, unlimited projects and a lot more

2. Vidmore

An easy-to-use Free Screen Recorder Online to capture to capture any area of your screen as a screencast video file losslessly.

3. FlexClip

Record your screen, webcam, and voice with one click.

4. Veed.io

Compress video and reduce video file size online for free without losing quality.

5. Webm to Mp4

Convert your WebM videos to MP4 with ease and completely free.

6. Webm to Gif

Easily convert WebM files to GIF animations online.

7. Image Compressor

This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG, GIF and PNG images to the minimum possible size while keeping the required level of quality.

8. Video Enhancer

Adjust contrast, brightness, saturation, and other video settings with this tool

21 Must Have JavaScript One Liners

Jaxongir — Mon, 31 Oct 2022 13:53:56 +0000

Hi guys, in this post, I'm going to introduce JavaScript one liners that make you better JavaScript developer as they are very useful in most practical cases

1. Reverse a string

const reverseString = (str) => str.split("").reverse().join("");
console.log(reverseString("hello guys!"));
// !syug olleh

2. Flatten an array

const flattenArray = (arr, flattenLevel = 1) => arr.flat(flattenLevel);
console.log(flattenArray([1, 2, [3, 4]]));
// [1,2,3,4]
console.log(flattenArray([1, 2, [3, 4, [5]]], 2));
// [1,2,3,4, 5]

3. Shuffle an array

const shuffleArray = (arr) => arr.sort((a, b) => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4, 5]));
// [2, 5, 4, 1, 3]

4. Get a random boolean value

const getRandomBooleanValue = () => Math.random() >= 0.5;
console.log(getRandomBooleanValue());
// false
console.log(getRandomBooleanValue());
// true

5. Find an average array value

const getAverageValue = (numbers) =>
  numbers.reduce((total, currEl) => total + currEl, 0) / numbers.length;
console.log(getAverageValue([1, 2, 3, 4]));
// 2.5
console.log(getAverageValue([100, 900]));
// 500

6. Detect a dark mode

const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

7. Scroll to the top of the page

const scrollToTop =() => window.scrollTo({top: 0, behavior: 'smooth'});

8. Find number of specified character in a string

const getCharAmount = (string, char) => string.split(char).length - 1;
console.log(getCharAmount("hello", "l"));
// 2
console.log(getCharAmount("hello", "q"));
// 0

9. Redirect URL

const redirectUrl = url => location.href = url;
redirectUrl("https://youtube.com");

10. Detect whether an array is empty

const isArrayEmpty = (arr) => !Array.isArray(arr) || !arr.length;
console.log(isArrayEmpty([1, 2]));
// false
console.log(isArrayEmpty([]));
// true

11. Return unique values from an array

const getUniqueArrayValues = (arr) =>
  arr.filter((i) => arr.indexOf(i) === arr.lastIndexOf(i));
console.log(getUniqueArrayValues([1, 2, 2, 3]));
// [1, 2, 3]

12. Get a selected text from DOM

const getSelectedText = () => window.getSelection().toString();

13. Check whether expression is an array

const isArray = (expression) => Array.isArray(expression);
console.log(isArray(1));
// false
console.log(isArray({ name: "Jaxongir" }));
// false
console.log(isArray(["JavaScript"]));
// false

14. Check a number if it's odd or even

const isOdd = (number) => number % 2 === 1;
console.log(isOdd(1));
// true
console.log(isOdd(2));
// false

15. Detect whether an element is in focus

const isElementFocussed = (element) => element === document.activeElement;

16. Convert celsius to fahrenheit and vice versa

const convertCelsiusToFahrenheit = (celsius) =>
  Math.floor((celsius * 9) / 5 + 32);
const convertFahrenheitToCelsius = (fahrenheit) =>
  Math.floor((fahrenheit - 32) * (5 / 9));

console.log(convertCelsiusToFahrenheit(21));
// 69
console.log(convertCelsiusToFahrenheit(-50));
// -58

console.log(convertFahrenheitToCelsius(33));
// 0
console.log(convertFahrenheitToCelsius(22));
// -6

17. Check if two arrays are the same

const isArraysTheSame = (arr1, arr2) =>
  arr1.length === arr2.length &&
  arr1.every((val, index) => val === arr2[index]);
console.log(isArraysTheSame([1, 2], [1, 2]));
// true
console.log(isArraysTheSame([1, 2], [1, 3]));
// false

18. Convert first character to an uppercase

const convertFirstCharToUppercase = (str) =>
  `${str[0].toUpperCase()}${str.slice(1)}`;
console.log(convertFirstCharToUppercase("jaxongir"));
// Jaxongir

19. Converting 24-hour clock to 12-hour clock

const convert24hTo12h = (hour) =>
  `${hour % 12 === 0 ? 12 : hour % 12}${hour > 23 || hour < 12 ? "am" : "pm"}`;
console.log(convert24hTo12h(1));

20. Replace character of string with another character

const replaceStringCharacter = (str, char) => str.replace(/e/i, char);
console.log(replaceStringCharacter("geat", "re"));
// great

21. Remove undefined or null from an array

const removeNullAndUndefined = (arr) =>
  arr.filter((val) => val != null || val != undefined);
console.log(removeNullAndUndefined([1, null, undefined, 4]));
// [1, 4]

Forem: Jaxongir

50 Most Asked JavaScript Interview Questions

Table of Contents

What is JavaScript?

What is the difference between primitive and reference types in JavaScript?

What is the difference between == and ===?

What is a higher-order function?

What is a pure function?

What is the function currying?

What is the difference between var, let, and const?

What is the difference between global and local scope?

What is the temporal dead zone?

What is hoisting?

What is closure?

How to compare two objects?

What are all the possible ways to create objects in JavaScript?

What is prototype chain?

What is the difference between Call, Apply and Bind?

What is JSON and its common operations?

What is the purpose of the array slice method?

What is the purpose of the array splice method?

What is the difference between slice and splice?

What are lambda or arrow functions?

What is IIFE(Immediately Invoked Function Expression)?

How do you decode or encode a URL in JavaScript?

What is memoization?

What are classes in ES6?

What are modules?

Why do you need modules?

What is a promise

What are the three states of promise?

What is a callback function?

Why do we need callbacks?

What is a callback hell and how to avoid it?

What is promise chaining?

What is promise.all?

What is the purpose of the race method in promise?

What is a strict mode in javascript?

Why do you need strict mode?

How do you declare strict mode?

What is the purpose of the delete operator?

What is typeof operator?

What is undefined?

What is null?

What is the difference between null and undefined?

What is eval?

What is the difference between window and document?

How do you access history in javascript?

How do you detect caps lock key turned on or not?

What is isNaN?

What are the differences between undeclared and undefined variables?

What are global variables?

What are the problems with global variables?

10 ChatGPT Alternatives You Must Have

1. ChatSonic

2. Twain

3. Marmof

4. Rytr

5. Easy-Peasy.AI

6. Peppertype

7. JasperChat

8. Perplexity

9. Replika

10. Mycharacter

Technique to Build Any Project as Web Developer

Step 1: Understand what you are building

Step 2: Define the project requirements

Step 3: Define the data structure of the project and the relationship between the data

Step 4: Define the data flow of the application

Step 5: Build API

Step 6: Build UI

5 Full-Stack Project Ideas for 2023

Technology Stack For All Projects

1. Online Restaurant

Requirements

User Module

Admin Module

2. Online Pharmacy

Requirements

User Module