Forem: ABIDULLAH786

Updated content

ABIDULLAH786 — Mon, 23 Jun 2025 15:48:08 +0000

ABIDULLAH786

Jul 22 '23

JavaScript New Arrays Methods: ECMAScript 2023

#javascript #programming #beginners #tutorial

Comments 1

3 min read

CKEditor5 With Custom Image Uploader in React

ABIDULLAH786 — Sat, 21 Sep 2024 05:56:47 +0000

Spent almost 2 days figuring out a proper way to use CKEditor5 image uploader. I’ve tried ckFinder, SimpleUploader, etc. but none of them worked maybe because none of the documentations made any sense to me 😂. Luckily, I found a Stack Overflow conversation and somehow got what I needed working with just some minor tweaks.

My Goal

Every time a user copy and paste, drag and drop, or upload an image into my text editor, It will trigger an API that saves the image into an S3 bucket and returns the image S3 URL, then embeds that image back to the text editor.

Installation:

Install CKEditor5 to react here.

Implementation:

Editor Code

import React, { useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

function Editor() {
    const [editorData, setEditorData] = useState();

    return (
        <div>
            <CKEditor
                editor={ClassicEditor}
                data={editorData}
                onReady={(editor) => {
                    console.log("Editor is ready to use!", editor);
                }}
                onChange={(event, editor) => {
                    const data = editor.getData();
                    setEditorData(data);
                    console.log({ event, editor, data });
                }}
                onBlur={(event, editor) => {
                    console.log("Blur.", editor);
                    console.log(editorData)
                }}
                onFocus={(event, editor) => {
                    console.log("Focus.", editor);
                }}
            />
        </div>
    );
}

export default Editor;

output

Till now you can face the issue (as in below image) while uploading the image in editor.

due to this issue your image will not attach into editor. to resolve this issue you have to add the image toolbar plugin in editor config.

Here is the editor updated code:

import React, { useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

function Editor() {
    const [editorData, setEditorData] = useState();

    return (
        <div>
            <CKEditor
                editor={ClassicEditor}
                data={editorData}
                onReady={(editor) => {
                    console.log("Editor is ready to use!", editor);
                }}
                onChange={(event, editor) => {
                    const data = editor.getData();
                    setEditorData(data);
                    console.log({ event, editor, data });
                }}
                onBlur={(event, editor) => {
                    console.log("Blur.", editor);
                    console.log(editorData)
                }}
                onFocus={(event, editor) => {
                    console.log("Focus.", editor);
                }}
                config={{
                    image: {
                        toolbar: [
                            'imageTextAlternative',
                            'toggleImageCaption',
                            'imageStyle:inline',
                            'imageStyle:block',
                            'imageStyle:side',
                        ]
                    },
                }}
            />
        </div>
    );
}

export default Editor;

Now you will see the image after inserting it in editor.

Uploading Image to server

Till now you must noticed it that every thing in the we are adding or writing in saved into single state variable. the problem will arise when you want to to have the Full Stack application Editor will all feature. Because getting all content of editor getting in on place cause the issue of extracting the image/video files before saving the text in database, as you know it is not recommended to store the files into database.

Here the challenge of extracting the files form single object arise. because we don't know at which line and where the files are added/attached in the editor.

to overcome this issue we will use the custom image uploader adopter which will take the file at the time of attaching to editor and send it to server and get the result/url back and automatically it will render that uploaded url into editor

here is the code for that

// CustomeUoload.js

class CustomUploadAdapter {
    constructor(loader) {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }

    upload() {
        return this.loader.file.then(file => new Promise((resolve, reject) => {
            // Customize your upload logic here.

            // but for siplicity i am using the dummy url and evrytime sending back the same request
            const url = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png"
            resolve({ default: url })
        }));
    }

    abort() {
        // Abort the upload process if needed.
    }
}

export default function CustomUploadAdapterPlugin(editor) {
    console.log(editor)
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new CustomUploadAdapter(loader);
    };
}

Now you have to call the above CustomUploadAdapterPlugin component into your editor and add it into config as follows.

...
   config={{
      ...
      extraPlugins: [CustomUploadAdapterPlugin],
   }}
...

Actual Code

Here’s the full code, no more talking. Enjoy! but not too much 😊.
editor.js file

// editor.js
import React, { useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CustomUploadAdapterPlugin from "./customUpload";

function Editor() {
    const [editorData, setEditorData] = useState();

    return (
        <div>
            <CKEditor
                editor={ClassicEditor}
                data={editorData}
                onReady={(editor) => {
                    console.log("Editor is ready to use!", editor);
                }}
                onChange={(event, editor) => {
                    const data = editor.getData();
                    setEditorData(data);
                    console.log({ event, editor, data });
                }}
                onBlur={(event, editor) => {
                    console.log("Blur.", editor);
                    console.log(editorData)
                }}
                onFocus={(event, editor) => {
                    console.log("Focus.", editor);
                }}
                config={{
                    image: {
                        toolbar: [
                            'imageTextAlternative',
                            'toggleImageCaption',
                            'imageStyle:inline',
                            'imageStyle:block',
                            'imageStyle:side',
                        ]
                    },
                    extraPlugins: [CustomUploadAdapterPlugin],
                }}
            />
        </div>
    );
}

export default Editor;

costomupload.js file

// costomupload.js

class CustomUploadAdapter {
    constructor(loader) {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }

    upload() {
        return this.loader.file.then(file => new Promise((resolve, reject) => {
            // Customize your upload logic here.

            // but for siplicity i am using the dummy url and evrytime sending back the same request
            const url = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png"
            resolve({ default: url })
        }));
    }

    abort() {
        // Abort the upload process if needed.
    }
}

export default function CustomUploadAdapterPlugin(editor) {
    console.log(editor)
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new CustomUploadAdapter(loader);
    };
}

Now open the terminal type below command if you’re using create-react-app

npm start

And here is our final result

Conclusion

Thanks for reading my article ❤, if you have any problem just comment below and I will help you.

If the post was useful to you, leave me a clap 👏 and follow me, it helps me a lot. Thank you ❤️

Checkout my Blogger, Twitter, Linkedin and GitHub for more amazing content!

Essential YouTube Channels for Mastering Web Development

ABIDULLAH786 — Tue, 16 Jul 2024 06:33:24 +0000

In today's digital age, YouTube has become a treasure trove of knowledge, especially for those looking to dive into web development. Whether you're a beginner or a seasoned developer, there are channels tailored to meet your learning needs. Here’s a curated list of must-follow YouTube channels, categorized by language and focus area, to help you enhance your web development skills. Channels marked with a ✅ are particularly noteworthy for their exceptional content.
If you found any channel is missing please comment it below so that i can updated the list accordingly.

YT Channels in Urdu
YT Channels in English
Mock Interviews YT Channels
Advanced Concepts Channels (System Designs / DSA / Code Review / Podcasts)
Recommend by fellow developers

1. Channels in Urdu

Piyush Garg | 🔗

Piyush Garg’s channel covers various aspects of web development, making it a valuable resource for Urdu-speaking learners. Content covered such as Git, JavaScript and react with projects.

Easy Engineering Classes | 🔗

This channel offers extensive coverage on subjects like DBMS, Java, Data Structures, Operating Systems, Cloud Computing, and more. It's particularly useful for students preparing for exams that require a strong grasp of theoretical concepts.

Chai Aur Code ✅ | 🔗

Chai Aur Code covers comprehensive content on Frontend, Backend, and cloud concepts, making it an excellent resource for web development enthusiasts.

Coder Dost | 🔗

Coder Dost provides a wealth of content related to Frontend and Backend development. The channel also offers mock interviews, adding practical value to theoretical knowledge.

Frontend Master | 🔗

Frontend Master delves into in-depth JavaScript and React concepts. The channel also features shorts that provide quick problem-solving tips, making it a comprehensive resource for frontend developers.

Akshay Saini ✅ | 🔗

Akshay Saini's channel specializes in advanced JavaScript and React. It’s an excellent resource for those looking to deepen their JavaScript knowledge.

Geeky Shows | 🔗

Geeky Shows offers tutorials on various programming languages, web designing, and cloud services, making it a versatile channel for tech learners.

2. YT Channels in English

Coding Homework | 🔗

Coding Homework is the go-to channel for programming challenges across various languages, helping developers assess and hone their skills.

Durga Software Solutions ✅ | 🔗

This channel provides detailed courses on Python, C, C++, Java, Android, Databases, and more. The content, especially by Durga Sir, is known for its depth and clarity.

Hitesh Choudhary ✅ | 🔗

Hitesh Choudhary’s channel covers a wide range of topics, including Frontend and Backend development, the latest tech trends, new frameworks, open-source products, and AWS.

DarkCode | 🔗

DarkCode is the place to learn inspiring design techniques using HTML and CSS, perfect for those looking to enhance their design skills.

Online Tutorials | 🔗

This channel is another excellent resource for learning creative design using HTML and CSS.

freeCodeCamp.org ✅ | 🔗

freeCodeCamp.org offers full-length courses on a wide range of subjects, making it a comprehensive learning platform for web developers.

Code Evolution ✅ | 🔗

Code Evolution covers both Frontend and Backend development, and includes content on DSA in JavaScript for beginners.

Cosden Solutions | 🔗

This channel is dedicated to React resources, making it ideal for developers focused on React.

Code With Antonio | 🔗

Code With Antonio focuses exclusively on Next.js development.

Codewithguillaume | 🔗

Another excellent resource for Next.js, providing specialized content for developers.

Kunal Kushwaha | 🔗

Kunal Kushwaha’s channel offers courses on DSA, Networking, Git, Java, and more, making it a comprehensive resource for various aspects of programming.

Traversy Media ✅ | 🔗

Traversy Media covers a wide range of web development and programming tutorials, from HTML, CSS, and JavaScript to frontend frameworks like React and Vue, and backend technologies like Node.js, Python, and PHP.

Web Dev Simplified ✅ | 🔗

This channel provides tutorials on the latest web technologies, including HTML, CSS, JavaScript, and React, making it a go-to resource for web developers.

3. Mock Interviews YT Channels

Anurag Singh ProCodrr (Urdu) | 🔗

Anurag Singh ProCodrr offers resources for learning Frontend development with live professional interview demos.

Dev. Aditya | 🔗

Dev. Aditya provides mock interviews to help developers assess their Frontend skills.

4. Advanced Concepts Channels (System Designs / DSA / Code Review / Podcasts)

Coderbyte | 🔗

Coderbyte features mock interviews and DSA preparation resources, making it a valuable channel for technical interview preparation.

ByteByteGo ✅ | 🔗

ByteByteGo is renowned for its system design tutorials, featuring visually appealing graphics and detailed explanations.

Gaurav Sen | 🔗

Gaurav Sen’s channel is ideal for software developers looking to improve their skills in algorithms, system design, and engineering best practices.

Hussein Nasser | 🔗

This channel covers system design concepts, best coding practices, and more, providing valuable insights for advanced developers.

Low Level Learning ✅ | 🔗

Low Level Learning discusses low-level programming concepts and tech vulnerabilities, offering in-depth technical knowledge.

Josh Tried Coding | 🔗

This channel offers code reviews and best coding tips, making it a valuable resource for improving code quality.

Love Babbar | 🔗

Love Babbar’s channel provides content related to placements, detailed information, and podcasts, helping developers prepare for job interviews.

5. Recommended by fellow developers

Design Course | 🔗

This channel provides amazing content related UI/UX via crash courses.
Recommended by @skosananeo

javascriptmastery | 🔗

JavaScript Mastery YT channel has amazing Full Stack real-world projects in next.js.
Recommended by @skosananeo

These YouTube channels are invaluable for anyone looking to enhance their web development skills, prepare for interviews, or stay updated with the latest trends and technologies in the field.

Connect with me on Twitter, Linkedinand GitHub to stay updated and join the discussion!

Introduction to Sets in JavaScript: A Comprehensive Guide

ABIDULLAH786 — Sat, 26 Aug 2023 08:40:48 +0000

Introduction

This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!
👉 Click Here

When it comes to managing collections of unique values in JavaScript, the Set object has proven to be an invaluable tool. ECMAScript 6 (ES6) introduces sets, which offer a simple means of storing and editing data without duplication. This blog post will describe the properties of sets in JavaScript, their distinct characteristics, methods of manipulation, and situations where they can be used.

Understanding Sets in JavaScript

A Set in JavaScript is an ordered collection of unique values. This means that a value can appear only once in a Set, ensuring data integrity and efficient element retrieval. Unlike arrays, Sets are not indexed by positions, so you can't access elements using numerical indices. Instead, you interact with Set elements through their values.

Creating Sets

Creating a Set is a simple task. You can initialize an empty Set or create one populated with values:

const emptySet = new Set();
const setA= new Set(['some text', 1, 2, 3, 4]);

Adding and Removing Elements

To add an element to a Set, you use the add() method:

setA.add('abidullah786');

Removing an element can be done using the delete() method:

setA.delete(2);

Checking for Element Existence

The has() method allows you to check if a specific element is present in a Set:

console.log(setA.has('abidullah786')); // Output: true
console.log(setA.has(2)); // Output: false

Set Size

The number of elements in a Set can be obtained using the size property:

console.log(setA.size); // Output: 5

Iterating Through Sets

Sets support various methods for iteration, including forEach(), for...of loops, and the values() method:

setA.forEach(element => console.log(element));
for (const element of setA) {
    console.log(element);
}
const setIterator = setA.values();
for (const element of setIterator) {
    console.log(element);
}

Set Methods for Manipulation

In addition to the fundamental features mentioned above, Sets offer powerful methods for manipulating data. Here are some notable ones:

add(): Adds an element to the Set.
delete(): Removes a specific element from the Set.
clear(): Removes all elements from the Set.
size: Returns the number of elements in the Set.
has(): Checks if an element exists in the Set.
forEach(): Executes a provided function once for each element.
values(): Returns an iterator for the values.
entries(): Returns an iterator for key-value pairs.

Common Use Cases

Sets find their applications in a variety of scenarios:

Removing Duplicates: Easily eliminate duplicate values from an array by converting it to a Set and then back to an array.
Membership Checking: Quickly check whether an item exists in a collection without iterating.
Data Uniqueness: Ensure that incoming data is unique by storing it in a Set and checking for duplicates before adding.
Tagging and Categorization: Create Sets of tags or categories to efficiently manage data classification.

Conclusion

In this blog we've delved into the foundational aspects of JavaScript Sets. We've covered how Sets distinguish themselves from arrays, how to create and manage Sets, and the essential methods for manipulating data within them. By mastering these fundamental concepts and methods, you're laying a solid foundation for exploring more advanced Set operations, which we'll dive into in the second part of this series. Stay tuned for Part 2, where we'll uncover advanced Set manipulation methods and explore their applications in greater depth.

Feel Free to comment your thoughts regarding the topic

Connect with me on Twitter, Linkedinand GitHub to stay updated and join the discussion!

Embracing Node.js: A Game-Changer for Top Tech Companies

ABIDULLAH786 — Fri, 18 Aug 2023 01:10:24 +0000

Introduction

In recent years, Node.js has emerged as a powerhouse for building scalable and high-performance server-side applications. Its event-driven, non-blocking I/O model has attracted top tech giants, empowering them to develop robust applications and services that can handle massive traffic and deliver outstanding user experiences. In this article, we will explore how some of the world's leading companies have harnessed the power of Node.js to transform their digital landscapes.

1. Netflix: Redefining Application Performance

When it comes to streaming services, Netflix stands tall among the giants. To meet the demands of its global audience, Netflix switched from Java to Node.js. The results were awe-inspiring as the application's performance skyrocketed. By reducing the startup time from a staggering 40 minutes to just one minute, Node.js enabled Netflix to deliver content faster and more efficiently.

2. LinkedIn: From Ruby on Rails to Node.js

LinkedIn, the renowned professional networking platform, also jumped on the Node.js bandwagon. Migrating from Ruby on Rails to Node.js helped LinkedIn boost application performance by 20 times. Moreover, the shift led to an astounding 90% reduction in infrastructure costs while handling the same, if not higher, traffic. LinkedIn's Node.js-powered platform proved to be a game-changer for their server-side development.

3. PayPal: Scaling with Node.js

PayPal, a global leader in online payment solutions, adopted Node.js as a replacement for Java, seeking to optimize scalability and performance. The transition was a resounding success, as Node.js enabled PayPal to scale its infrastructure at 50% reduced costs for handling similar loads. Additionally, the switch led to a significant reduction in the lines of code, streamlining code maintenance efforts.

4. Uber: Powering Real-Time Services

Uber, the ride-hailing giant, relies heavily on real-time data processing to match drivers with riders and provide a seamless experience. Node.js came to their rescue, providing a scalable, event-driven architecture that meets the demands of millions of users worldwide. Its non-blocking I/O model allowed Uber's applications to handle concurrent requests with ease, ensuring swift responses and efficient service.

5. Walmart: E-Commerce at Scale

Walmart, one of the world's largest retailers, faces the challenge of serving millions of online shoppers simultaneously. To cater to such demand, Walmart turned to Node.js for building scalable and responsive applications. Node.js helped Walmart deliver a lightning-fast shopping experience while keeping infrastructure costs in check.

6. eBay: Embracing Real-Time Bidding

eBay, the renowned e-commerce giant, requires a real-time bidding system to handle an enormous number of transactions. Node.js proved to be an ideal fit for this purpose, allowing eBay to build real-time, event-driven applications that ensure smooth auction experiences for users across the globe.

7. Medium: Publishing Simplified

Medium, the popular online publishing platform, adopted Node.js for its flexibility and ease of development. Node.js empowered Medium to handle a vast amount of content efficiently, providing authors and readers with a seamless publishing experience.

8. Trello: Organizing with Node.js

Trello, the widely-used project management tool, leveraged Node.js to create a real-time collaboration platform. With Node.js, Trello users can work together on projects, boards, and tasks in real-time, making teamwork more effective and efficient.

9. NASA: Space Exploration with Node.js

Even in the vastness of space, Node.js finds its place. NASA has utilized Node.js to develop data-intensive applications that analyze and process data from space missions efficiently. Node.js ensures that crucial mission data is processed in real-time, contributing to the success of space explorations.

10. Groupon: Seamless Couponing

Groupon, the popular deals and discounts platform, integrated Node.js to enhance its user experience. With Node.js, Groupon can efficiently handle large volumes of coupon redemption and ensure users receive the best deals in real-time.

11. IBM: Innovating with Node.js

IBM, a technology giant, adopted Node.js for various projects and services, including cloud applications and Internet of Things (IoT) solutions. Node.js empowers IBM to build scalable and responsive applications that cater to the ever-changing needs of businesses and consumers.

12. Microsoft: Node.js for Various Projects

Microsoft, another tech giant, has embraced Node.js for a wide range of projects and services. From Azure cloud applications to IoT solutions, Node.js plays a crucial role in Microsoft's ecosystem, contributing to enhanced performance and user experiences.

13. Yahoo!: A Strong Node.js Advocate

Yahoo! has been a strong advocate of Node.js, incorporating it into various products and services. By leveraging Node.js, Yahoo! has enhanced the responsiveness of its web applications, providing users with a seamless and engaging online experience.

14. Reddit: Community with Node.js

Reddit, the front page of the internet, utilizes Node.js to power its dynamic and real-time content delivery. Node.js enables Reddit to handle millions of users, comments, and posts with ease, fostering an active and engaging community.

15. Airbnb: Scaling with Node.js

Airbnb, the online marketplace for vacation rentals, leveraged Node.js for its backend systems to handle an ever-growing user base and facilitate real-time interactions between hosts and guests. Node.js proved instrumental in Airbnb's journey towards becoming a global hospitality leader.

16. Pinterest: Visual Discovery with Node.js

Pinterest, the visual discovery and idea-sharing platform, has integrated Node.js into its architecture to ensure smooth and responsive interactions for its millions of users. With Node.js, Pinterest delivers personalized content and recommendations in real-time.

17. Mozilla: Web Technology with Node.js

Mozilla, the organization behind the Firefox web browser, embraced Node.js to develop web technologies and applications. By using Node.js, Mozilla can create feature-rich and performant web applications that cater to its vast user base.

18. Salesforce: Salesforce1 with Node.js

Salesforce, a leading customer relationship management (CRM) platform, integrated Node.js into its Salesforce1 platform. Node.js empowers Salesforce to build scalable, real-time applications for sales, marketing, and service professionals.

19. Twitch: Real-Time Streaming with Node.js

Twitch, the live streaming platform for gamers, relies on Node.js for its real-time chat and streaming features. Node.js ensures that millions of gamers can interact and stream their content seamlessly.

20. Coursera: Online Learning with Node.js

Coursera, the online learning platform, embraced Node.js for building responsive and scalable applications that serve a diverse global audience. Node.js enables Coursera to deliver high-quality educational content efficiently.

Conclusion

The success stories of these top companies serve as a testament to the power of Node.js, inspiring others to embrace this technology and unlock its potential to deliver exceptional user experiences and stay ahead in the ever-evolving digital landscape. Node.js has undoubtedly revolutionized the way companies build and scale their server-side applications, offering unmatched performance, scalability, and cost optimization. As more companies continue to adopt Node.js, we can expect its influence to grow further, propelling the tech industry into new frontiers of innovation and possibilities.

Celebrating a Milestone: 2400+ Followers and 4200+ Reads on My dev.to Blog!

ABIDULLAH786 — Thu, 17 Aug 2023 02:15:00 +0000

I am thrilled to share a moment of joy and accomplishment as my dev.to blog recently crossed two remarkable milestones - 2400+ followers and 4200+ reads in the past month!

Here's a snapshot of the stats:
Readers this Month: 4272
Reactions this Month: 398
Comments this Month: 23
New Followers this Month: 2441

It's incredible to see the growing support and engagement from the vibrant developer community on dev.to. I am truly grateful to each one of you for being a part of this journey and making it all possible.

Success on dev.to

While celebrating this achievement, I would like to take a moment to reflect on the strategies that have contributed to this success. I think increasing your blog's organic traffic and engagement requires a thoughtful and strategic approach. Here are some valuable tips that have helped me increase the reach of my dev.to blog:

1. Create quality content

Providing valuable, relevant, and high-quality content is the foundation of any successful blog. Focus on the needs and interests of your target audience and strive to be a trusted resource in your field.

2. Keyword research

Identify and use relevant keywords and phrases that resonate with your audience. Use keyword research tools to find valuable keywords with moderate search volume and low competition.

3. On-page SEO

Optimize your blog posts for search engines by naturally incorporating your target keywords into your content, title tags, meta descriptions, titles, and URL structure.

4. Mobile-friendly design

In today's digital age, a mobile-friendly blog is essential. Make sure your blog is responsive and provides a seamless experience across different devices.

5. Page loading speed

Improving your blog's loading speed will improve user experience and can have a positive impact on search engine rankings.

6. Internal Links

Create a network of internal links in your blog to direct users to relevant content. Internal linking helps search engines understand your blog structure and improves user navigation.

7. Building backlinks

Earn backlinks from reputable websites and blogs. Backlinks from authoritative sources signal to search engines that your content is trustworthy and valuable.

8. Guest Posts

Writing guest posts for other blogs in your niche allows you to reach new audiences and build relationships with other bloggers, which can potentially lead to more backlinks and exposure.

9. Promotion on social networks

Share your blog posts on various social media platforms to increase visibility and encourage social sharing. Interacting with your audience and participating in relevant groups or communities can also increase your blog's reach.

10. Regular updates

Constantly update your blog with new content. Active and regularly updated blogs are favored by search engines.

11. Use rich snippets

Implement structured data markup to improve the appearance of your blog in search engine results, potentially improving click-through rates and attracting more organic traffic.

12. Targeting long tail keywords

Focusing on more specific, less competitive long-tail keywords can drive targeted traffic and be easier to rank for.

13. Promote on email newsletter

Leverage your email list to promote your blog posts to subscribers. Email marketing can be a powerful tool to increase your traffic and engage your audience.

14. Monitoring and analysis

Use tools like Google Analytics to track your blog's performance and determine which strategies are driving the most organic traffic. Use this data to refine your approach and focus on what works best.

Remember that getting significant organic traffic is a gradual process that requires dedication and patience. As you apply these strategies, be consistent in delivering value to your audience and nurturing your community. Over time, your blog will continue to grow and have a positive impact on the developer community.

Connect with me on Twitter, Linkedinand GitHub to stay updated and join the discussion!

Thank you all once again for your unwavering support and encouragement. Let's continue to learn and grow together in this exciting journey of development and knowledge-sharing! 🚀

Top Resources for High-Quality Images, Vectors, and Icons

ABIDULLAH786 — Wed, 16 Aug 2023 02:04:55 +0000

This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!
👉 Click Here

Greetings, fellow creators and developers! 🌟

As developers, designers, and creators, we are constantly in pursuit of the perfect visual elements to enhance our projects. Whether it's a stunning image that captures the essence of a blog post, a vector illustration that adds a touch of uniqueness to a website, or icons that bring clarity to our user interfaces, the right resources can make all the difference. In this blog post, I'm thrilled to share with you a curated list of top-notch sources for images, vectors, and icons that will undoubtedly elevate your creative endeavors.

🗨️ Have you found any cool websites that I haven't mentioned here? If you have, please leave a comment and tell us about them. This blog is like a friendly group where we help each other. By working together, we can find even more great tools to make our projects look awesome. Let's start exploring and discover all the amazing visuals out there!

Images and Vectors

Pexels - A World of Breathtaking Visuals
Pixabay - Where Creativity Knows No Bounds
Unsplash - Unleash Your Creativity with Free High-Resolution Images
Undraw - Elevate Your Projects with Wonderful Vectors
Vecteezy - A Hub for Stunning Vector Graphics
Burst by Shopify - Bursting with Free High-Resolution Images
CleanPNG - Transparent Backgrounds Made Easy

Icons

Font Awesome - The Icon Toolkit for All Your Needs
Iconfinder - Discover and Customize Icons with Ease
SVGRepo - A Treasure Trove of Freely Usable SVG Icons
Iconmonstr - Meticulously Crafted Icons for Your Projects
Material Icons from Material-UI - Seamless Integration with Material Design
Icons8 - Customize and Integrate Icons Effortlessly
Icon Archive - Exploring a Vast Collection of Icons
Google Fonts Icons - Typography and Icons in Harmony

1. Images and Vectors

1.1. Pexels

Pexels is a true gem when it comes to finding high-quality, free-to-use images and videos. With a vast collection spanning various themes and subjects, Pexels is a go-to destination for breathtaking visuals.

1.2. Pixabay

Pixabay offers a diverse range of images, illustrations, and videos, all available under the Creative Commons Zero (CC0) license. This means you can use them for any purpose without worrying about attribution.

1.3. Unsplash

Unsplash boasts a massive library of freely usable, high-resolution images. With its user-friendly interface and powerful search capabilities, finding the perfect image has never been easier.

1.4. Wonderful Vectors from Undraw

Undraw provides a stunning collection of open-source vector illustrations that can add a touch of elegance to your projects. The illustrations cover a wide array of concepts and can be customized to suit your needs.

1.5. Vecteezy

Vecteezy is a hub for vector graphics, offering a plethora of vector art created by talented artists. You can find vectors ranging from icons to intricate illustrations, all available for free.

1.6. Burst by Shopify

Similar to Unsplash, Burst by Shopify offers high-quality images for free. It's particularly useful for e-commerce projects and provides a diverse range of photos to choose from.

1.7. CleanPNG

CleanPNG specializes in transparent background PNG images. If you're looking for images without the hassle of removing backgrounds, this is the place to explore.

2. Icons

2.1. Font Awesome

Font Awesome is a beloved icon toolkit with a comprehensive library of icons that can be easily integrated into your projects. It offers both free and pro versions, catering to different needs.

2.2. Iconfinder

Iconfinder hosts a vast collection of icons created by various designers. The platform allows you to explore, customize, and even purchase icons for your projects.

2.3. SVGRepo

SVGRepo is a treasure trove of SVG icons that you can freely use in your projects. The icons are conveniently categorized, making it simple to find the right ones for your needs.

2.4. Iconmonstr

Iconmonstr provides a diverse set of icons, all meticulously crafted and available in various formats. You can search for icons by name or browse through categories.

2.5. Material Icons from Material-UI

Material-UI offers a collection of Google's Material Design icons that seamlessly integrate with Material-UI components. These icons follow the Material Design guidelines, ensuring a consistent look and feel.

2.6. Icons8

Icons8 offers a wide range of icons that you can customize in terms of size, color, and style. The platform also provides tools to integrate icons directly into your design workflow.

2.7. Icon Archive

Icon Archive hosts an extensive collection of icons, covering diverse themes and styles. While some icons may require downloading, they provide an excellent resource for enhancing your projects.

2.8. Google Fonts Icons

Google Fonts Icons is a part of Google Fonts that offers a wide array of icons that you can easily integrate into your web projects. It's a fantastic way to maintain consistency across your typography and icons.

Conclusion

In a world where visuals play a pivotal role in capturing attention and conveying messages, having a reliable arsenal of images, vectors, and icons is indispensable. These resources can save you time, elevate the aesthetics of your projects, and ensure that your creative vision comes to life seamlessly. Remember to respect the licensing terms of each resource and give credit where it's due.

Connect with me on Twitter, Linkedin and GitHub to stay updated and join the discussion!

Ultimate Guide & Resources to Enhancing Your ReactJS Skills || 16 GitHub repositories

ABIDULLAH786 — Tue, 15 Aug 2023 01:40:03 +0000

This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!
👉 Click Here

Introduction

Hey there, fellow developers! 🚀 If you're passionate about ReactJS like I am, you're in for a treat. Whether you're a newbie or a seasoned pro, I've curated a list of fantastic resources that will take your React skills to the next level. Let's dive into the world of React together!

React Developer Roadmap
ReactJS Fundamentals
30 Days of React
Higher-Order Components (HoCs)
React 18 Workshop
Under the Hood of ReactJS
React Use
React Bits
Awesome React Components
React Redux TypeScript Guide
Beautiful React Hooks
React Cheatsheets
React Hooks Cheatsheet
React DnD
React in Patterns
Real-World React Apps

1. React Developer Roadmap

Navigate your React journey like a pro with this comprehensive developer roadmap - a must for every React enthusiast.

2. ReactJS Fundamentals

Kickstart your journey with the fundamentals of ReactJS. Here's the ReactJS guide to get you started.

3. 30 Days of React

Challenge yourself with the 30 Days of React series, perfect for honing your skills day by day.

4. Higher-Order Components (HoCs)

Unravel the power of HoCs in React with this insightful resource here.

5. React 18 Workshop

Stay ahead of the curve by exploring the upcoming React 18 features through this insightful workshop.

6. Under the Hood of ReactJS

Ever wondered what makes React tick? Unveil the magic with this detailed exploration here.

7. React Use

Discover a collection of custom React hooks for supercharging your app's functionality.

8. React Bits

Master the art of React with these bite-sized React Bits - quick tips and tricks for efficient development.

9. Awesome React Components

Explore a curated list of awesome React components that can save you time and effort.

10. React Redux TypeScript Guide

Level up your React app's state management with this guide to using Redux with TypeScript here.

11. Beautiful React Hooks

Elevate your coding experience with these beautifully crafted hooks for a delightful development process.

12. React Cheatsheets

Quickly reference the essentials with these handy React cheatsheets.

13. React Hooks Cheatsheet

Get a grasp on React hooks with this concise cheatsheet to streamline your coding process.

14. React DnD

Explore complex drag-and-drop interactions with React DnD. Perfect for building intricate interfaces.

15. React in Patterns

Elevate your coding style with these tried-and-true React design patterns.

16. Real-World React Apps

Ready to build real-world apps? Gain inspiration from these hands-on projects.

Conclusion

These GitHub repositories are your gateway to expanding your ReactJS prowess. Each one offers invaluable insights, examples, and communities ready to assist. If you know of any other incredible repositories that aren't listed here, feel free to comment below. Let's collaborate and create an even more comprehensive resource for React developers.

Remember, the key to mastering React is consistent practice and a willingness to learn. So go ahead, explore these links, and keep building amazing things with React

I'm curious to hear your thoughts! Feel free to share your comments.

Let's connect on Twitter, LinkedIn, and GitHub to stay updated and join the conversation!!

Let's Connect and Collaborate! || My Inbox

ABIDULLAH786 — Mon, 14 Aug 2023 03:16:22 +0000

Hey there, awesome community! 👋 I'm thrilled to have you following my journey here on dev.to. Whether you're into coding, tech trends, or just looking for a friendly chat, I'm here to connect and collaborate with you.

Feel free to reach out and stay in touch through these channels:

📬 Direct Messages: While dev.to doesn't have a built-in messaging system, you can always drop a comment on any of my posts specially in this post comment section, and I'll be sure to respond. Let's keep the conversation going right here!

🐦 Twitter: Connect with me on Twitter @Abidullah_786, where I share more insights, articles, and updates from the tech world.

📧 Email: For more in-depth discussions, collaborations, or inquiries, you can also shoot me an email at abidullah.se@gmail.com

Looking forward to hearing from you and exploring the exciting world of tech together! 🚀👩‍💻👨‍💻

HTML Interview Questions with Answers and Code Examples Part-4

ABIDULLAH786 — Mon, 14 Aug 2023 02:14:42 +0000

This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!
👉 Click Here

Introduction

Imagine you're building a house. HTML (Hypertext Markup Language) is like the strong foundation that holds everything together. Knowing some cool HTML tricks can make you a superstar in job interviews.

Welcome back to the second part of our series! We're going to start from the basics and gradually climb up to advanced concepts, just like taking steps up a ladder of knowledge.

In this series, we're unlocking the answers to the first 10 tricky HTML interview questions. Don't worry, we'll keep it super easy with examples. These answers will give you a boost of confidence during interviews, showing off what you know. Let's dive into these questions!

If you're curious to learn more about HTML and its magic, check out the official guide from the World Wide Web Consortium (W3C) at HTML — World Wide Web Consortium.

For nifty tips and tricks on making HTML work like a charm, the Mozilla Developer Network (MDN) has a user-friendly guide just for you. Discover it at HTML — Mozilla Developer Network.

And if you're interested in making your website easy for everyone to use, the Web Accessibility Initiative (WAI) website is a goldmine of helpful resources. Find them at Web Accessibility Initiative.

Remember, these extra resources can provide more information to help you grasp HTML better, along with the questions and examples we're covering.

How can you create a responsive image that scales with the screen size?
What is the purpose of the <figure> and <figcaption> tags?
How can you add a background image to a webpage using HTML?
How can you create a responsive video that adjusts to different screen sizes?
How can you embed an audio file in HTML?
Explain the purpose of the defer attribute in <script> tags.
Explain the purpose of the pattern attribute in <input> tags.
How can you make an HTML element draggable?
How can you create a sticky/fixed navigation bar in HTML?

1- How can you create a responsive image that scales with the screen size?

👉 Answer:

Use the max-width CSS property set to 100% to make an image responsive. This ensures that the image’s width adjusts to fit the container while maintaining its aspect ratio.

<img src="image.jpg" alt="A responsive image" style="max-width: 100%;">

2- What is the purpose of the <figure> and <figcaption> tags?

👉 Answer:

The tag is used to encapsulate media content, such as images or videos, along with an optional caption provided by the <figcaption> tag. It helps associate the media with its description.

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>A breathtaking view of nature.</figcaption>
</figure>

3- How can you add a background image to a webpage using HTML?

👉 Answer:

To add a background image to a webpage, you can use the background-image CSS property within the <style> tag or in an external CSS file.

<style>
  body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

4- How can you create a responsive video that adjusts to different screen sizes?

👉 Answer:

To create a responsive video, use the max-width CSS property and set the height to auto. Wrap the video element in a container to maintain its aspect ratio.

<style>
  .video-container {
    max-width: 100%;
    height: auto;
  }
</style>

<div class="video-container">
  <video src="video.mp4" controls></video>
</div>

5- How can you embed an audio file in HTML?

👉 Answer:

To embed an audio file, use the <audio> element and specify the source file using the src attribute. You can include additional attributes like controls to add playback controls.

<audio src="audio.mp3" controls></audio>

6- Explain the purpose of the defer attribute in `<script>` tags.

👉 Answer:

The defer attribute is used to indicate that the script should be executed after the HTML content has been parsed. It helps improve page load performance by allowing other resources to load in parallel.

<script src="script.js" defer></script>

7- Explain the purpose of the pattern attribute in <input> tags.

👉 Answer:

The pattern attribute is used to specify a regular expression pattern that the input value must match. It is commonly used for form field validation.

<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="XXX-XXX-XXXX">

8- How can you make an HTML element drag-gable?

👉 Answer:

To make an HTML element drag-gable, use the drag-gable attribute and set it to true. You can then define event handlers to control the drag-and-drop behavior.

<div draggable="true">Drag me!</div>

9- How can you create a sticky/fixed navigation bar in HTML?

👉 Answer:

To create a sticky/fixed navigation bar, use CSS to set the position of the navbar to fixed and specify a top or bottom value.

<style>
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
  }
</style>

<div class="navbar">
  <!-- Navigation links -->
</div>

10- How can you embed a YouTube video in HTML?>

👉 Answer:

To embed a YouTube video, use the <iframe> tag with the video’s embed code provided by YouTube.

 <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allowfullscreen
 >
 </iframe>

Conclusion

In this part of our series on tricky HTML interview questions, we've dived into some really cool stuff like responsive images, video embedding, sticky navigation, and more. By understanding these tricks, you'll feel super confident in your interviews. Stay tuned for the next part, where we'll unravel even more amazing HTML secrets!

I'm curious to hear your thoughts! Feel free to share your comments.

Let's connect on Twitter, LinkedIn, and GitHub to stay updated and join the conversation!

HTML Interview Questions with Answers and Code Examples Part-3

ABIDULLAH786 — Sun, 13 Aug 2023 06:56:33 +0000

This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!
👉 Click Here

Introduction

Welcome back to third part of our series! We're going to start from the basics and gradually climb up to advanced concepts, just like taking steps up a ladder of knowledge.

If you're curious to learn more about HTML and its magic, check out the official guide from the World Wide Web Consortium (W3C) at HTML — World Wide Web Consortium.

For nifty tips and tricks on making HTML work like a charm, the Mozilla Developer Network (MDN) has a user-friendly guide just for you. Discover it at HTML — Mozilla Developer Network.

And if you're interested in making your website easy for everyone to use, the Web Accessibility Initiative (WAI) website is a goldmine of helpful resources. Find them at Web Accessibility Initiative.

Remember, these extra resources can provide more information to help you grasp HTML better, along with the questions and examples we're covering.

How can you create an unordered list with custom bullet points using HTML?
How can you create a dropdown menu in HTML?
How can you create a table with HTML?
How can you create a tooltip for an element using HTML?
Explain the purpose of the meter element in HTML5.
Explain the purpose of the element in HTML5.
What is the purpose of the element in HTML5?
How can you disable the browser’s default form validation in HTML?
What is the purpose of the tag in HTML?
How can you embed a YouTube video in HTML?

1- How can you create an unordered list with custom bullet points using HTML?

👉 Answer:

You can customize the bullet points of an unordered list using CSS by assigning a specific image or shape to the list-style-image property.

<style>
  ul {
    list-style-image: url("bullet.png");
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

2- How can you create a dropdown menu in HTML?

👉 Answer:

To create a dropdown menu, use the element along with elements to represent the menu items.

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

3- How can you create a table with HTML?

👉 Answer:

Use the <table>, <tr>, and <td> tags to create a table structure, where <tr> represents a table row and <td> represents a table data cell.

<<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

4- How can you create a tooltip for an element using HTML?

👉 Answer:

To create a tooltip, you can use the title attribute on an HTML element. When the user hovers over the element, the tooltip text will be displayed.

<a href="#" title="This is a tooltip">Hover me</a>

5- Explain the purpose of the meter element in HTML5.

👉 Answer:

The <meter> element represents a scalar measurement within a known range. It is commonly used to display measurements, such as disk space usage or progress indicators.

<meter value="75" min="0" max="100">75%</meter>

6- Explain the purpose of the `<datalist>` element in HTML5.

👉 Answer:

The <datalist> element provides a list of pre-defined options for an field. It offers autocomplete functionality and helps users select options easily.

<input type="text" list="options">
<datalist id="options">
  <option value="Option 1">
  <option value="Option 2">
  <option value="Option 3">
</datalist>

7- What is the purpose of the `<time>` element in HTML5?

👉 Answer:

The <time> element represents a specific point in time or a duration. It helps provide semantic meaning to dates and times on a webpage.

<p>My birthday is on <time datetime="2021-10-07">Oct 7, 2021</time>.</p>

8- How can you disable the browser’s default form validation in HTML?

👉 Answer:

Use the novalidate attribute on the <form> tag to disable the browser’s default form validation. This allows you to implement custom validation logic.

<form novalidate>
  <!-- Form fields -->
</form>

9- What is the purpose of the `<iframe>` tag in HTML?

👉 Answer:

The <iframe> tag is used to embed external content, such as web pages or videos, within an HTML document.

 <iframe 
    src="https://dev.to/abidullah786/" 
    width="500" 
    height="300">
 </iframe>

10- How can you embed a YouTube video in HTML?>

👉 Answer:

To embed a YouTube video, use the <iframe> tag with the video’s embed code provided by YouTube.

 <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allowfullscreen
 >
 </iframe>

Conclusion

n this part of our series on tricky HTML interview questions, we've explored important concepts. These include making lists with custom styles, creating dropdown menus, building tables, adding tooltips, understanding the and elements, using for dates, and more. By learning these, you'll be better prepared for technical interviews. Stay tuned for the next part, where we'll dive into more advanced HTML questions.

We're curious to hear your thoughts! Feel free to share your comments.

Let's connect on Twitter, LinkedIn, and GitHub to stay updated and join the conversation

Mastering HTML Interview Questions Part-2: Explore autofocus, span, blockquote and progress tag

ABIDULLAH786 — Sat, 12 Aug 2023 01:35:13 +0000

This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!
👉 Click Here

Introduction

Welcome back to the second part of our series! We're going to start from the basics and gradually climb up to advanced concepts, just like taking steps up a ladder of knowledge.

If you're curious to learn more about HTML and its magic, check out the official guide from the World Wide Web Consortium (W3C) at HTML — World Wide Web Consortium.

For nifty tips and tricks on making HTML work like a charm, the Mozilla Developer Network (MDN) has a user-friendly guide just for you. Discover it at HTML — Mozilla Developer Network.

And if you're interested in making your website easy for everyone to use, the Web Accessibility Initiative (WAI) website is a goldmine of helpful resources. Find them at Web Accessibility Initiative.

Remember, these extra resources can provide more information to help you grasp HTML better, along with the questions and examples we're covering.

How can you set the default checked state for a checkbox or radio button in HTML?
Explain the purpose of the autofocus attribute in <input> tags
What is the purpose of the span element in HTML?
What is the purpose of the <blockquote> element in HTML?
Explain the purpose of the contenteditable attribute in HTML.
What is the purpose of the <progress> element in HTML5?
How can you create a hyperlink that sends an email when clicked?
How can you create an ordered list in HTML?
How can you create an unordered list in HTML?
How can you create an ordered list with uppercase Roman numerals in HTML?

1- How can you set the default checked state for a checkbox or radio button in HTML?

👉 Answer:

To make checkboxes or radio buttons start checked, use the checked attribute.

<input type="checkbox" id="myCheckbox" checked>
<label for="myCheckbox">Check me</label>

2- Explain the purpose of the autofocus attribute in <input> tags

👉 Answer:

Autofocus makes an input field ready for typing as soon as a webpage loads.

<input type="text" name="username" autofocus>

3- What is the purpose of the span element in HTML?

👉 Answer:

Think of <span> as a tiny box for styling parts of a larger text block. It has no semantic meaning on its own but is useful for styling or targeting specific parts of the content.

<p>My name is <span class="highlight">Abidullah786</span>.</p>

4- What is the purpose of the <blockquote> element in HTML?

👉 Answer:

The <blockquote> element shows quoted content, setting it apart from the rest such as a quote from another source. It helps distinguish quoted content from the surrounding text.

<blockquote>
  <p>This is a quoted text.</p>
</blockquote>

5- Explain the purpose of the contenteditable attribute in HTML.

👉 Answer:

The contenteditable attribute lets you edit an element's content, like a word processor. It can be applied to any HTML element, enabling rich text editing within the browser.

<div contenteditable="true">You can edit this.</div>

6- What is the purpose of the <progress> element in HTML5?

👉 Answer:

The <progress> element represents the progress of a task or process, providing a visual indication of the completion percentage.

<progress value="69" max="100"></progress>

7- How can you create a hyperlink that sends an email when clicked?

👉 Answer:

Use mailto: in the href attribute to create an email link.

<a href="mailto:contact@example.com">Send email</a>

8- How can you create an ordered list in HTML?

👉 Answer:

Use <ol> for numbered lists.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

9- How can you create an unordered list in HTML?

👉 Answer:

Use <ul> for lists without numbers.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

10- How can you create an ordered list with uppercase Roman numerals in HTML?

👉 Answer:

Use the type attribute of the

<ol type="I">

<ol type="I">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Conclusion

In this second part, we've dived into HTML essentials, empowering you to conquer interviews with confidence. From checkbox tricks to crafting lists and email links, your HTML prowess is growing. Stay curious for our next advanced HTML installment, where we'll build upon this foundation. Keep practicing, and let's continue this journey together!

We're excited to hear your thoughts! Share your comments below.

Let's connect on Twitter, LinkedIn, and GitHub to stay updated and join the conversation!

Forem: ABIDULLAH786

Updated content

JavaScript New Arrays Methods: ECMAScript 2023

CKEditor5 With Custom Image Uploader in React

My Goal

Installation:

Implementation:

Editor Code

output

Uploading Image to server

Actual Code

Conclusion

Essential YouTube Channels for Mastering Web Development

Table Of Contents

1. Channels in Urdu

Piyush Garg | 🔗

Easy Engineering Classes | 🔗

Chai Aur Code ✅ | 🔗

Coder Dost | 🔗

Frontend Master | 🔗

Akshay Saini ✅ | 🔗

Geeky Shows | 🔗

2. YT Channels in English

Coding Homework | 🔗

Durga Software Solutions ✅ | 🔗

Hitesh Choudhary ✅ | 🔗

DarkCode | 🔗

Online Tutorials | 🔗

freeCodeCamp.org ✅ | 🔗

Code Evolution ✅ | 🔗

Cosden Solutions | 🔗

Code With Antonio | 🔗

Codewithguillaume | 🔗

Kunal Kushwaha | 🔗

Traversy Media ✅ | 🔗

Web Dev Simplified ✅ | 🔗

3. Mock Interviews YT Channels

Anurag Singh ProCodrr (Urdu) | 🔗

Dev. Aditya | 🔗

4. Advanced Concepts Channels (System Designs / DSA / Code Review / Podcasts)

Coderbyte | 🔗

ByteByteGo ✅ | 🔗

Gaurav Sen | 🔗

Hussein Nasser | 🔗

Low Level Learning ✅ | 🔗

Josh Tried Coding | 🔗

Love Babbar | 🔗

5. Recommended by fellow developers

Design Course | 🔗

javascriptmastery | 🔗

Introduction to Sets in JavaScript: A Comprehensive Guide

Introduction

Understanding Sets in JavaScript

Creating Sets

Adding and Removing Elements

Checking for Element Existence

Set Size

Iterating Through Sets

Set Methods for Manipulation

Common Use Cases

Conclusion

Embracing Node.js: A Game-Changer for Top Tech Companies

Introduction

1. Netflix: Redefining Application Performance

2. LinkedIn: From Ruby on Rails to Node.js

3. PayPal: Scaling with Node.js

4. Uber: Powering Real-Time Services

5. Walmart: E-Commerce at Scale

6. eBay: Embracing Real-Time Bidding

7. Medium: Publishing Simplified

8. Trello: Organizing with Node.js

9. NASA: Space Exploration with Node.js

10. Groupon: Seamless Couponing

11. IBM: Innovating with Node.js

12. Microsoft: Node.js for Various Projects

13. Yahoo!: A Strong Node.js Advocate

14. Reddit: Community with Node.js

15. Airbnb: Scaling with Node.js

16. Pinterest: Visual Discovery with Node.js

17. Mozilla: Web Technology with Node.js

6- Explain the purpose of the defer attribute in `<script>` tags.