Forem: Hossein Mobarakian

A Tale of WeakMap and WeakSet in JavaScript: The Guardians of Forgotten Secrets

Hossein Mobarakian — Fri, 29 Nov 2024 16:29:04 +0000

Once upon a time in the mystical land of JavaScript, two special data structures lived quietly in the shadows: WeakMap and WeakSet. They weren’t as flashy as their cousins, Map and Set, but they had a secret power that made them irreplaceable in the magical realm of memory management.

The Story Begins: The Problem of Forgotten Secrets

There was a wise old wizard named Dev, who often worked on large magical projects. He had a common problem: whenever he stored objects in a Map or Set, those objects stayed forever, like guests who wouldn’t leave a party. Even if they were no longer needed, they lingered, taking up valuable memory in the kingdom.

Dev thought, “What if there was a way to store secrets temporarily, without worrying about cleaning up after myself?”

The Arrival of WeakMap and WeakSet

One day, a mysterious scroll arrived with a message:

“Use WeakMap and WeakSet to handle your forgotten secrets. They will vanish when they are no longer needed.”

Intrigued, Dev summoned WeakMap and WeakSet.

WeakMap: The Keeper of Private Keys

WeakMap introduced itself:

“I hold key-value pairs, but my keys must be objects. If the key disappears, I’ll erase the pair without you needing to worry.”

Dev tested it out:

let key = { id: 1 }; // The magical key
let weakMap = new WeakMap();

weakMap.set(key, "This is a secret"); // Storing a secret

console.log(weakMap.get(key)); // Output: This is a secret

// If the key is forgotten:
key = null;

// The secret vanishes from WeakMap, cleaned by the garbage collector

WeakMap explained:

“I’m perfect for storing private metadata about objects, like tracking user sessions or caching results.”

WeakSet: The Silent Watcher

WeakSet stepped forward:

“I store objects as well, but only objects. If an object disappears, so will its membership in my set.”

Dev decided to try it:

let obj = { name: "Mystical Object" };
let weakSet = new WeakSet();

weakSet.add(obj); // Adding the object to the WeakSet

console.log(weakSet.has(obj)); // Output: true

// If the object is forgotten:
obj = null;

// The object is automatically removed from WeakSet

WeakSet continued:

“I’m ideal for tracking objects that need to exist temporarily, like DOM elements being observed for changes.”

Why WeakMap and WeakSet Are Special

As Dev worked with them, he realized why these structures were unique:

Automatic Cleanup: Objects in WeakMap and WeakSet are automatically garbage-collected when they are no longer referenced anywhere else.
No Size Property: They don’t have a size or an iterator, because they want to keep their secrets lightweight and invisible.
Memory Efficiency: They’re like the wind—holding things loosely and letting them go when the time is right.

The Moral of the Story

Dev was delighted with his new tools. WeakMap and WeakSet became his loyal allies for managing memory efficiently and keeping private data safe. The wizard learned that while they weren’t always the right choice, their magic was invaluable in the right situations.

And so, in the land of JavaScript, the secrets stayed safe, and memory was never wasted again.

Unlocking Better JavaScript Performance: Avoid These Common Pitfalls 🚀

Hossein Mobarakian — Sun, 24 Nov 2024 14:39:52 +0000

As JavaScript developers, optimizing code for performance is crucial. Here are three key insights into common practices that can impact your application's performance and how to handle them effectively:

1️⃣ How `console.log` Affects Application Performance 🖨️

The Problem:
While console.log is handy for debugging, overusing it—especially in production—can drastically slow down your app. Why? Logging to the console is a synchronous operation. Each console.log call halts your JavaScript execution momentarily, which can lead to noticeable performance bottlenecks, particularly in:

Loops
High-frequency event listeners (e.g., mousemove)
Production code where logs accumulate

Best Practices:

Remove unnecessary console.log statements before deploying your app.
Use conditional logging (if (process.env.NODE_ENV !== 'production')).
For debugging, consider tools like debug or browser developer tools.

2️⃣ Comparing Performance of Loops in JavaScript 🔄

Understanding how different loops perform can help you choose the right one for your use case. Here's a quick comparison:

Loop Type	Description	Performance
`for`	The classic loop, great for indexed iterations.	Fastest for simple iterations.
`forEach`	Array method, invokes a callback for each element.	Slightly slower than `for`.
`for...of`	Used for iterable objects (arrays, strings, maps, etc.).	Similar to `forEach`.
`map`	Creates a new array by transforming each element with a callback.	Slower; focuses on immutability.
`reduce`	Aggregates values in an array into a single value (e.g., sum, concatenation).	Slower; combines computation.

Key Takeaways:

Use for loops for maximum performance in simple iterations, especially when the number of iterations is large or performance is critical.
Choose forEach for cleaner syntax when you don’t need to break out of the loop or control iteration manually.
Use for...of for iterating over iterable objects (e.g., arrays, strings, maps), especially when readability is a priority.
Leverage map when transforming data into a new array, as it emphasizes immutability and functional programming. Avoid using it for side effects.
Apply reduce only when aggregating values into a single result, such as sums, averages, or building complex objects.

3️⃣ Avoid Using `await` Inside Loops ⏳

The Problem:
Using await inside loops like for, forEach, or for...of causes sequential execution, slowing down performance. For example:

for (let url of urls) {
  const response = await fetch(url); // Sequential execution
}

Here, each fetch waits for the previous one to finish. For multiple asynchronous operations, this approach is inefficient.

The Solution:

Use Promise.all for concurrent execution:

const responses = await Promise.all(urls.map(url => fetch(url)));

If order matters, consider carefully managing promises with chaining or async iterators.

Final Thoughts 💡

Understanding JavaScript performance quirks can make a huge difference in the efficiency of your applications. By minimizing unnecessary console.log usage, choosing the right loop, and avoiding await inside loops, you’ll write code that’s cleaner, faster, and more robust.

Which of these tips do you use most often? Share your thoughts in the comments! 👇

Using Map, Filter, and Reduce Effectively in JavaScript🔥

Hossein Mobarakian — Thu, 21 Nov 2024 14:00:34 +0000

JavaScript’s map(), filter(), and reduce() are essential tools for working with arrays, especially when dealing with arrays of objects. They let you write clean, functional code for transforming, filtering, and aggregating data. Here’s how you can use them effectively:

1. `map()` – Transforming Data

The map() method is perfect for creating new arrays by transforming each element.

📌 Use Case: Extracting or reformatting object properties.

Examples:

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 700 },
];

// Example 1: Extract product names
const productNames = products.map(product => product.name);
console.log(productNames); // ['Laptop', 'Phone', 'Tablet']

// Example 2: Apply a discount to all prices
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));
console.log(discountedProducts);
// [
//   { name: 'Laptop', price: 900 },
//   { name: 'Phone', price: 450 },
//   { name: 'Tablet', price: 630 }
// ]

2. `filter()` – Picking the Right Data

Use filter() to create a subset of data based on a condition.

📌 Use Case: Filtering objects based on their properties.

Examples:

const employees = [
  { name: 'Alice', role: 'Developer' },
  { name: 'Bob', role: 'Designer' },
  { name: 'Charlie', role: 'Developer' },
];

// Example 1: Filter developers
const developers = employees.filter(employee => employee.role === 'Developer');
console.log(developers);
// [
//   { name: 'Alice', role: 'Developer' },
//   { name: 'Charlie', role: 'Developer' }
// ]

// Example 2: Filter employees whose names start with 'A'
const namesStartingWithA = employees.filter(employee => employee.name.startsWith('A'));
console.log(namesStartingWithA);
// [{ name: 'Alice', role: 'Developer' }]

3. `reduce()` – Combining Data

The reduce() method aggregates data from an array into a single value or object.

📌 Use Case: Summing values or building new structures.

Examples:

const orders = [
  { id: 1, amount: 100 },
  { id: 2, amount: 200 },
  { id: 3, amount: 300 },
];

// Example 1: Calculate the total amount
const totalAmount = orders.reduce((total, order) => total + order.amount, 0);
console.log(totalAmount); // 600

// Example 2: Group orders by amount threshold
const groupedOrders = orders.reduce((groups, order) => {
  const category = order.amount > 150 ? 'High' : 'Low';
  groups[category] = groups[category] || [];
  groups[category].push(order);
  return groups;
}, {});
console.log(groupedOrders);
// {
//   Low: [{ id: 1, amount: 100 }],
//   High: [{ id: 2, amount: 200 }, { id: 3, amount: 300 }]
// }

Chaining Example

You can combine these methods to process data step by step.

const users = [
  { name: 'Alice', age: 25, isActive: true },
  { name: 'Bob', age: 30, isActive: false },
  { name: 'Charlie', age: 35, isActive: true },
];

// Get active users, double their age, and calculate the total
const totalAge = users
  .filter(user => user.isActive) // Active users
  .map(user => ({ ...user, age: user.age * 2 })) // Double their age
  .reduce((sum, user) => sum + user.age, 0); // Sum their ages

console.log(totalAge); // 120 (Alice: 50, Charlie: 70)

Why Use These Methods?

Efficiency: Perform operations without manual loops.
Readability: Your code is easier to understand.
Immutability: They don’t modify the original array.

Mastering these methods with arrays of objects will supercharge your JavaScript skills! 🚀 Let me know your favorite use case in the comments! 👇

Mastering Destructuring and Spread/Rest Operators in JavaScript ✨

Hossein Mobarakian — Wed, 20 Nov 2024 16:14:23 +0000

JavaScript developers, are you ready to simplify your code and make it cleaner, more readable, and powerful? Let’s dive into Destructuring and the Spread/Rest Operators! 🚀

1. What is Destructuring?

Destructuring allows you to unpack values from arrays or properties from objects into distinct variables. Instead of verbose, repetitive code, destructuring provides a concise way to extract and use data.

// Without Destructuring
const user = { name: "Ali", age: 25, country: "Iran" };
const name = user.name;
const age = user.age;

// With Destructuring
const { name, age } = user; // 👌 Clean and elegant!
console.log(name, age); // Output: "Ali", 25

📚 Use Cases:

Extracting multiple object properties.
Working with function arguments.

2. Spread Operator (`...`)

The Spread Operator expands elements of an array or object into individual elements.

// Expanding an array
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5]; 
console.log(moreNumbers); // Output: [1, 2, 3, 4, 5]

// Merging objects
const user = { name: "Ali", age: 25 };
const updatedUser = { ...user, country: "Iran" };
console.log(updatedUser); // { name: "Ali", age: 25, country: "Iran" }

📚 Use Cases:

Cloning arrays/objects.
Merging multiple arrays/objects.

3. Rest Operator (`...`)

The Rest Operator collects the rest of the elements into a new array or object.

// Rest with arrays
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // Output: 1
console.log(rest);  // Output: [2, 3, 4]

// Rest with objects
const { name, ...otherDetails } = { name: "Ali", age: 25, country: "Iran" };
console.log(otherDetails); // Output: { age: 25, country: "Iran" }

📚 Use Cases:

Grouping the remaining array items.
Simplifying dynamic arguments for functions.

4. Bonus: Destructuring with Functions

You can destructure directly in function parameters to write more readable and functional code.

function greet({ name, country }) {
  console.log(`Hello ${name} from ${country}!`);
}

const user = { name: "Ali", age: 25, country: "Iran" };
greet(user); // Output: Hello Ali from Iran!

🧑‍💻 Pro Tip: Combine destructuring with spread/rest for maximum productivity in your JavaScript projects!

Which feature do you find most useful? Let me know in the comments below! 💬

Full Backup in Nodejs(Files and Database backup)

Hossein Mobarakian — Sun, 16 Jun 2024 07:08:01 +0000

NodeFullBackup is an npm package crafted specifically for comprehensive backup solutions. It seamlessly integrates MongoDB backup functionality with file backup capabilities, ensuring that all your critical data is securely preserved. This package is ideal for anyone looking to enhance their data resilience strategy without the hassle of managing multiple backup tools.

Installation

Getting started with NodeFullBackup is quick and easy. Simply install the package via npm using the following command:

npm i @double-man/node-full-backup

Simple Usage

Integrating NodeFullBackup into your project requires minimal effort. Just copy the snippet below into your codebase:

import FullBackup from '@double-man/node-full-backup';

const backup = new FullBackup({
    outputPath: path.resolve('./backup'),
    folders: [path.resolve('./public')],
    expireDays: '1d',
    cronExpression: '0 */6 * * *',
    database: {
        username: 'database_username',
        password: 'database_password',
        database: 'database_name',
        host: 'localhost',
        port: 27017
    }
});

backup.start();

Your support helps this repository grow. Please consider starring it if you find it useful!

Parameters

NodeFullBackup offers a wide range of parameters to tailor your backup process according to your specific needs. Here’s a breakdown of the available options:

Parameter	Type	Description
outputPath	String	Destination folder path for backup files.
outputNamePrefix	String	Prefix for backup file names.
cronExpression	String	Cron expression for scheduling backups.
outputType	String	Format of the output file ('zip' or 'tar').
files	String[]	Array of file paths to include in the backup.
folders	String[]	Array of folder paths to include in the backup.
expireDays	String	Number of days after which old backup files will be removed.
afterBackup	Function	Callback function providing access to the backup file path.
database	Object	Configuration details for MongoDB database backup.

Database Configuration

When configuring MongoDB backups, ensure you provide the necessary details:

Parameter	Type	Description
username	String	Username for database access.
password	String	Password for database access.
database	String	Name of the MongoDB database to backup.
host	String	Host address of the MongoDB database.
port	Number	Port number for MongoDB connection.

Upload Backup To Google Drive

NodeFullBackup supports seamless integration with Google Drive for automated backup uploads. Implement the following within the afterBackup callback:

import FullBackup, { uploader } from '@double-man/node-full-backup';

const backup = new FullBackup({
    ...
    afterBackup: (filePath) => {
        uploader.googleDrive(path_of_google_key_json, filePath, google_drive_folder_id);
    }
});

backup.start();

Ensure you obtain your Google JSON key as described in the guide and activate Google Drive service to enable automated uploads.

Conclusion

NodeFullBackup offers a robust solution for MongoDB database and file backups, tailored to meet the needs of developers and organizations alike. By integrating NodeFullBackup into your workflow, you can enhance data protection with minimal effort, ensuring your projects are safeguarded against data loss effectively.

Explore our documentation further to learn how NodeFullBackup can strengthen your backup strategy and provide a reliable safety net for your digital assets. Get started today and fortify your data resilience with NodeFullBackup.

What do you think about your life as a developer?

Hossein Mobarakian — Mon, 11 Mar 2024 10:52:02 +0000

Hi guys, I hope you have a great day😉.

The important thing we have is our time and our life, But we are a developer, and most time we work on something new, and most of these things are for other people and we get money for continuing this circle. Right other jobs are like this also.

Most time people pick up more success for themselves not for each other. I don't know if these sentences are correct or not, But I know some things for us are wrong.

Rich people use other people to be richer than past, This is not about all rich guys but most of them, But if they don't need us afterward sometimes they will leave us aside also. Do we haven't share of the project?

On the other hand, Some developers don't work correctly and they are lazy at work. I think these two issues are linked together.

So developers let's develop our lives and help me by asking these questions😎:

How do we receive freedom, Is it possible?
How we can do something that we want, not other people want?
How developers can help each other to achieve this purpose?
Are we born for other people's lives?
Why do people not get results on the same work equally according to efforts? Almost it is the opposite.
If the current way is right how we can find some rich people to work with?
If you have any other questions you can ask in comments🗨️

What is a Factory Design Pattern? It Is For You!

Hossein Mobarakian — Sat, 09 Mar 2024 11:16:46 +0000

Hi guys, I'm returning after a few years😁, I hope you have a happy day.
In this article I'll explain what Factory is in your project; it may exist in your projects.
Did you think about some libraries that work with some payment methods at the same place with the same code? Or did you think about how cross-platform libraries work?
Yes, You think right! These could have a Factory design pattern under the hood.
So talking is enough, Let's jump into it.

Factory Design Pattern

I try to explain this design pattern with an example for you. Suppose somebody can imitate popular people's voices. For all of the sounds that makes, he will make some jobs(the same job for all of the voices). some jobs like:

breading enough
changing the larynx situation
then start taking

See, these steps are the same but the sound frequency is different.
You can think about these steps as an interface and their implementation, and different voices will use this interface for their implementation according to these steps.
if some imitator can imitate 4 voices, he has 4 classes with that interface, and when he wants he can switch between voices without changing executing steps.
So this is the reason why imitator can imitate voices because they know and they have an interface in their body😁.
When we use factory design in our project or our body, we can learn and implement related things and knowledge faster and easier, without the need for huge changes. That is why some can learn better about languages than others or exercise better than others.
You should have this approach in your projects if your project can have expansion in some part in the future.

You can see code samples and more technical information about Factory design patterns in this beautiful website:
https://refactoring.guru/design-patterns/factory-method

Let's have some fun:🎶

Create a custom cursor for your website

Hossein Mobarakian — Sat, 10 Jul 2021 16:56:09 +0000

Hi, Do you think about how you can create a custom cursor for your website?
This section will show you how to create custom cursors quickly and easily. We must take simple step (Create a HTML file and paste the codes below into it)

    <div class="mouse" id="mouse">
        <img src="https://i.postimg.cc/NFx1b2f7/pack2586.png" alt="">
    </div>

    <style>
        body,
        html {

            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        * {
            cursor: none;

        }

        .mouse {
            width: 20px;
            height: 20px;
            background-color: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        .mouse img {
            width: 40px;
        }
    </style>

    <script>
        document.onmousemove = function (e) {
            var mouse = document.getElementById("mouse");
            console.log(mouse.style);
            mouse.style.left = e.pageX + 1 + "px";
            mouse.style.top = e.pageY + 1 + "px";
        }
    </script>

Create a chat app with Nodejs and Reactjs

Hossein Mobarakian — Thu, 24 Jun 2021 07:07:41 +0000

Hello, in this section I'll show you how to create a simple chat app with Nodejs and Reactjs.
To install dependencies we need, Run the command below:
npx create-react-app chatapp-client cd chatapp-client npm i socket.io-client
After building the client app, We must create a server app to communicate between users.
cd .. mkdir chatapp-server && cd chatapp-server npm i socket.io express cors
Well, we completely installed dependencies, So we can import and expand our code.

Server side codes

Now, create index.js file in chatapp-server directory and put this code in to it:

const express = require("express");
const app = express();
const sockets = require('socket.io');
const cors = require("cors");
const usernames = [];
let messageId = 0;
const messages = [];

app.use(cors());
app.get("/", (req, res) => {
    res.send("salam");
})

const server = app.listen(80, () => {
    console.log("server started at 80!");
});

const io = sockets(server, {
    cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"]
    },
});

io.on("connection", function (socket) {
    console.log(socket.id + "- is connected");

    socket.on("username", (username) => {
        usernames.push({ username, socketId: socket.id });
        io.emit("updateUsers", usernames);
    })

    socket.on("message", (message) => {
        if (messages.includes(message) == -1) return 0;
        message.id =messageId;
        messageId++;
        io.emit("reciveMessage", message);

    })

    socket.on("disconnect", () => {
        usernames.forEach((username, index) => {

            if (username.socketId == socket.id) {
                usernames.splice(index, 1);
                console.log("disconnected:" + username.username);
            }

        })
    })
});

Client side codes

Good, in the next step open App.js in chatapp-client/src/ and importing this codes:

import './App.css';
import { useEffect, useState , useReducer } from 'react';
var socket = io("ws://localhost:80", {});
var cacheMessages = [];

function App() {

  const [username, setUsername] = useState("#" + Math.floor(Math.random()*9999999));

  useEffect(() => {
    socket.emit("username", username);
  }, []);

  return (
    <div className="App">

      <UserList username={username}/>
      <Messages username={username}/>



      <MessageInput username={username} />
    </div>
  );
}

const UserList = ({username}) => {
  const [users, setUsers] = useState([]);
  socket.on("updateUsers", (data) => {
    setUsers(data);
  })
  return (
    <ul className="users">
      {
        users.map((user) => {
          return (<li className={(user.username == username)?"user my-id":"user"} key={user.socketId}>{user.username}</li>);
        })
      }
    </ul>
  );
};

const Messages = ({ username }) => {
  const [messages, setMessages] =useReducer(
    (state, newState) =>{
      for (const index in state) {
        if(state[index].id == newState.id) return state;
      }
      return [...state, newState]
    },
    []
  );

  useEffect(()=>{
    cacheMessages=messages;

  },[messages]);

  socket.on("reciveMessage", (data) => {

    let youCanAddMessage = true;
    cacheMessages.forEach(message => {
      if (message.id == data.id) youCanAddMessage = false;
    })
    if (!youCanAddMessage) return 0;

    setMessages(data);

  })
  return (
    <div className="message-box">
      {
        messages.map((message) => {
          return (<p className="message" key={message.id}> <span className={(message.username ==username )?"my-id":""}>{message.username +": "}</span>{message.text}</p>);
        })
      }
    </div>
  );
};

const MessageInput = ({ username }) => {
  const [text, setText] = useState("");

  function messageHandler(e) {
    setText(e.target.value);
  }

  function sendMessage(e) {
    e.preventDefault();
    socket.emit("message", { username, text, id: 0 });
    setText("");

  }

  return (
    <div className="input">
      <input className="message-input" onChange={messageHandler} value={text} />

      <button className="send-button" onClick={sendMessage}> send </button>
    </div>
  );
}
export default App;

Do some styles into App.css:

body{
  background-color: rgb(13, 29, 53);
}
.users{
  list-style:none;
  width:180px;
  position : fixed;
  height: 100%;
  left:0;
  padding: 0 10px;
  margin: 0;
  top: 0;
  background-color: rgb(13, 29, 53);
  color: #fff;
}
.users .user{
  cursor:pointer;
  padding: 5px 0px;
}
.my-id{
  color: rgb(166, 166, 253);
}
.input{
  position: fixed;
  left: 200px;
  bottom: 0;
  height: 50px;
  width: calc(100% - 200px);
  background-color: rgb(13, 29, 53);
}
.input .message-input{
  width: calc(100% - 100px);
  height: 90%;
  margin: 0;
  padding: 0;
  padding-left: 20px;
  border-radius:8px;
  background-color: rgb(5, 14, 29);
  border: none;
  color: white;

}
.input .send-button{
  height: 90%;
  margin: 0 5px;
  width: 60px;
  border-radius:8px;
  background-color: rgb(26, 57, 104);
  color: #fff;
  border: none;
}
.message-box{
  width: calc(100% - 210px);
  position: fixed;
  left: 200px;
  top:0;
  height: calc(100% - 60px);
  border: 1px solid rgb(5, 14, 29);
  padding-left: 5px;
  border-radius: 8px;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgb(5, 50, 80) rgb(5, 14, 29);

}
.message-box::-webkit-scrollbar {
  width: 11px;
}

.message-box::-webkit-scrollbar-track {
  background: rgb(5, 50, 80);
}
.message-box::-webkit-scrollbar-thumb {
  background-color: rgb(5, 50, 80) ;
  border-radius: 8px;
  border: 3px solid rgb(5, 14, 29);
}
.message{
  padding: 10px;
  border: 1px solid rgb(5, 14, 29);
  border-radius:8px ;
  color:#fff;
  cursor:pointer;
}

Guys, this article has ended, and in the next article, I'll show you how to share files between users.
What do you like I'm creating for you in the next projects? Leave a comment to me. I hope you enjoy this article, I see you later.

Create an Instagram downloader API with Nodejs

Hossein Mobarakian — Thu, 17 Jun 2021 20:52:36 +0000

Hi, I'm Hossein, In this article, I'll show you how to create your Nodejs Instagram photo and image downloader.
To start our project we need to install dependencies:
npm init npm install node-html-parser axios
After installation dependencies have done, Create an index.js file and put the codes below into it:

const axios = require('axios');
const { parse } = require("node-html-parser");

const instagramPostLink = "https://www.instagram.com/p/CD5um-vHA33/";

async function getPostLink(url) {

  url = url + 'embed' + '/captioned';


  let res = axios.get(url).then(async (response) => {
    const root = parse(response.data);

    let link = "";
    if (response.data.search("video_url") != -1)
      link = getVideoLinkFromHtml(response.data);
    else
      link = root.querySelector('img.EmbeddedMediaImage').getAttribute("src");





    while (link.search("&amp;") != -1) {
      link = link.replace("&amp;", "&");
    }
    let caption =await getCaptionFromHtml(response.data);

    return {link,caption};

  });

  return res;

}

async function getCaption(url) {


  url = url + 'embed' + '/captioned';

  let res = axios.get(url).then((response) => {

    let caption= getCaptionFromHtml(response.data);

    return caption;

  });

  return res;

}

async function getCaptionFromHtml(html) {


  const root = parse(html);

  let caption=root.querySelector('.Caption')?.text;
  if(caption == undefined)
      caption="No caption";

  caption=caption.replace("view all comments","");
  return caption;

}

function getVideoLinkFromHtml(html) {
  let crop = "{\"" + html.substring(html.search("video_url"), html.search("video_url") + 1000);

  crop = crop.substring(0, crop.search(",")) + "}";

  return JSON.parse(crop).video_url;
}

(async ()=>{
    await getPostLink(instagramPostLink);
})();

Some trouble with download the Instagram app is it needs a login, So we are use the embed Instagram posts to download that.
And Instagram can't block this way, Because so many sites use that.

Do you like to create animated emojis for your website? Click this link.

Animated emojis for web #first_one

Hossein Mobarakian — Thu, 17 Jun 2021 10:22:21 +0000

Hi guys, I'm back today, To teaching you an amazing and fun project, I hope you help me to completing that into a GitHub repository.
Well, Let's do that and start our project which is a CSS and JavaScript project!

HTML file

<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">
    <title>animation emoji</title>

</head>

<body>

    <span class="anim anim-laugh"></span>

    <script src="./lib/animoji.js"></script>
    <link rel="stylesheet" href="./lib/animoji.css">
</body>

</html>

JavaScript file

To add different part of our character into HTML tag we need some JavaScript codes:

window.onload = function() {
    main();
}

function main() {
    let laugh = document.querySelectorAll(".anim.anim-laugh");

    laugh.forEach(element => createLaughEmoji(element));
}

function createLaughEmoji(element) {
    var circle = createElementWithClass("span", "circle");
    var semiCircle = createElementWithClass("span", "semi-circle");
    var foursquare = createElementWithClass("span", "foursquare");
    var closeEyeLeft = createElementWithClass("span", "eye-left");
    var closeEyeRight = createElementWithClass("span", "eye-right");
    var eyeDiv = createElementWithClass("span", "eye-div");

    eyeDiv.append(closeEyeLeft);
    eyeDiv.append(closeEyeRight);
    semiCircle.append(foursquare);

    element.append(circle);
    element.append(semiCircle);
    element.append(eyeDiv);
}

function createElementWithClass(tag, className) {
    var element = document.createElement(tag);
    element.classList.add(className);

    return element;
}

CSS file

After adding our character parts into the HTML tag we are going to add CSS styles and animation, To animating our character:

.anim {
    display: block;
    width: 200px;
    height: 200px;
    min-width: 20px;
    min-height: 20px;
}

.anim span {
    display: block;
    position: relative;
}

.circle {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-color: rgb(255, 235, 191);
}

.semi-circle {
    width: 60%;
    height: 30%;
    border-radius: 0 0 150px 150px;
    background-color: rgb(247, 170, 134);
    margin: -40% auto 0;
    overflow: hidden;
}

.foursquare {
    width: 100%;
    height: 30%;
    background-color: #fff;
}

.eye-right {
    min-width: 10%;
    width: 10%;
    height: 10%;
    background: rgb(65, 65, 65);
    margin: 0% 0 0;
    border-radius: 100%;
}

.eye-left {
    min-width: 10%;
    width: 10%;
    height: 10%;
    background: rgb(65, 65, 65);
    margin: 0% 0 0;
    border-radius: 100%;
}

.eye-div {
    width: 100%;
    height: 100%;
    margin: -60% 0 0;
    display: flex!important;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.anim-laugh .eye-div {
    animation: 3s infinite laugh-eyes;
}

.anim-laugh .eye-right, .anim-laugh .eye-left {
    border-radius: 150px 150px 0 0;
    background: none;
    border: 2px solid rgb(65, 65, 65);
    border-bottom: none;
    min-width: 20%;
    width: 20%;
    height: 10%;
}

.anim-laugh .semi-circle {
    animation: 3s infinite laugh-mouth;
}


@keyframes laugh-eyes {
    0% {
        width: 100%;
        margin: -50% 0 0;
        transform: rotateZ(0deg);
    }
    25% {
        width: 60%;
        margin: -50% 10% 0;
        transform: rotateZ(-10deg);
    }
    50% {
        width: 100%;
        margin: -50% 0 0;
        transform: rotateZ(0deg);
    }
    75% {
        width: 60%;
        margin: -50% 30% 0;
        transform: rotateZ(10deg);
    }
    100% {
        width: 100%;
        margin: -50% 0 0;
        transform: rotateZ(0deg);
    }
}

@keyframes laugh-mouth {
    0% {
        margin: -40% 20% 0;
        transform: rotateZ(0deg);
    }
    25% {
        margin: -60% 15% 0;
        transform: rotateZ(-10deg);
    }
    50% {
        margin: -40% 20% 0;
        transform: rotateZ(0deg);
    }
    75% {
        margin: -60% 25% 0;
        transform: rotateZ(10deg);
    }
    100% {
        margin: -40% 20% 0;
        transform: rotateZ(0deg);
    }
}

Preview

Create dev.to podcast player

Hossein Mobarakian — Tue, 15 Jun 2021 07:43:06 +0000

Hi, I'm hossein and in this article, I will show you how to create a custom audio player (dev.to podcast player). I hope this article useful for you.

Create HTMl and CSS file

Put the codes below in your HTML file:

<!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">
    <title>dev.to podcast player</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>
    <div class="podcast-player">
        <img src="https://pixabay.com/get/g6bb610f7df4003373488a34d2f0fb260ed1c5a03e91d748b4a4867eef316d3ca1d902c3051859b512d9a52661eb2fd32_1280.jpg?attachment=" alt="" id="cover" class="cover">
        <p id="play-btn"><i id="play-btn-icon" class="far fa-play-circle"></i></p>
    </div>

    <script src="main.js"></script>
</body>
</html>

Now we need to add some styles to our project and make a circle for the display podcast cover.Create a style.css file in your project folder and write these codes into that:

body{
    background-color: #ccc;
    text-align: center;
}
.cover {
    background-color: red ;
    border-radius: 100%;
    object-fit:cover;
    width: 250px;
    height: 250px;
    position: relative;
    animation: 10s infinite rotation;
    animation-timing-function: linear;
    animation-play-state: paused ;
}
#play-btn{
    color: #fff;
    font-size: 80px;
    position: relative;
    margin: -170px auto 0;


}
#play-btn-icon{

    background-color: rgba(106, 178, 238, 0.575);
    border-radius: 100%;


}
.podcast-player{
    width: max-content;
    height: max-content;
    text-align: center;
    margin: 50px auto;
}

@keyframes rotation {
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(359deg);
    }
}

After creating an interface for our podcast player we must do some javascript code to play, pause, etc.

Create main.js file

The last part of this project has started. create a main.js file and write codes below into it:

let state={
   isPlayed:false,
};
let audioLink ="http://chtbl.com/track/B4E5G4/audio.operations.fm/episode-8-working-from-home.mp3";
let audio = new Audio(audioLink);

let playButtonIcon = document.getElementById("play-btn-icon");
let cover = document.getElementById("cover");

playButtonIcon.addEventListener("click",function (){
    changePlayState();

});


function changePlayState(){
    state.isPlayed = !state.isPlayed;
    cover.style.animationPlayState= (state.isPlayed)?"running":"paused";
    changePlayIcon();
    changeAudioPlayState();
}

function changePlayIcon(){
    playButtonIcon.classList.remove("fa-play-circle");
    playButtonIcon.classList.remove("fa-pause-circle");
    if(!state.isPlayed)
        playButtonIcon.classList.add("fa-play-circle");
    else
        playButtonIcon.classList.add("fa-pause-circle");
}

function changeAudioPlayState(){
    if(state.isPlayed) 
       return audio.play();

    audio.pause();
}

If you have question ,You can leave a comment.

Forem: Hossein Mobarakian

A Tale of WeakMap and WeakSet in JavaScript: The Guardians of Forgotten Secrets

The Story Begins: The Problem of Forgotten Secrets

The Arrival of WeakMap and WeakSet

WeakMap: The Keeper of Private Keys

WeakSet: The Silent Watcher

Why WeakMap and WeakSet Are Special

The Moral of the Story

Unlocking Better JavaScript Performance: Avoid These Common Pitfalls 🚀

1️⃣ How console.log Affects Application Performance 🖨️

2️⃣ Comparing Performance of Loops in JavaScript 🔄

3️⃣ Avoid Using await Inside Loops ⏳

Final Thoughts 💡

Using Map, Filter, and Reduce Effectively in JavaScript🔥

1. map() – Transforming Data

2. filter() – Picking the Right Data

3. reduce() – Combining Data

Chaining Example

Why Use These Methods?

Mastering Destructuring and Spread/Rest Operators in JavaScript ✨

1. What is Destructuring?

2. Spread Operator (...)

3. Rest Operator (...)

4. Bonus: Destructuring with Functions

Full Backup in Nodejs(Files and Database backup)

Installation

Simple Usage

Parameters

Database Configuration

Upload Backup To Google Drive

Conclusion

What do you think about your life as a developer?

What is a Factory Design Pattern? It Is For You!

Factory Design Pattern

Create a custom cursor for your website

Create a chat app with Nodejs and Reactjs

Server side codes

Client side codes

Create an Instagram downloader API with Nodejs

Animated emojis for web #first_one

HTML file

JavaScript file

CSS file

Preview

Create dev.to podcast player

Create HTMl and CSS file

Create main.js file

1️⃣ How `console.log` Affects Application Performance 🖨️

3️⃣ Avoid Using `await` Inside Loops ⏳

1. `map()` – Transforming Data

2. `filter()` – Picking the Right Data

3. `reduce()` – Combining Data

2. Spread Operator (`...`)

3. Rest Operator (`...`)