DEV Community: Sk Shoyeb

Props In React JS Functional Components

Sk Shoyeb — Mon, 30 Oct 2023 15:07:00 +0000

In this article we will learn about how to use pro*ps in react JS* and what is props in react JS. Props is a very important concept if you are learning frontend development.

What is Props

In simple way props means properties. So, passing a props meaning pass some properties from parent component to child component. In development we pass our necessary data as a prop from parent component to child component.

`import { useState } from 'react'
import './App.css'
import Card from './components/Card'

function App() {

  return (
    <>
      <h1>Props</h1>
      <div style={{display:"flex", justifyContent:"space-between", width:"90%", margin:"auto"}}>
      <Card title="This is Blog No 1" des="This is the descroption of blog no 1" btn="Read Blog 1"/>
      <Card title="This is Blog No 2" des="This is the descroption of blog no 2" btn="Read Blog 2"/>
      <Card title="This is Blog No 3" des="This is the descroption of blog no 3" btn="Read Blog 3"/>
      </div>
    </>
  )
}

export default App`

The above code is of app.jsx. So app.jsx is parent component and Card is child component. I have used Card component 3 times and passing props or data of title, des and btn. The datas are different but props are same.

Let's see how to get and use those props in our child component.

`const Card = (props) => {
  return (
    <>
    <div className='card'>
        <div className='card-container'>
            <h2>{props.title}</h2>
            <p>{props.des}</p>
            <button>{props.btn}</button>
        </div>
    </div>
    </>
  )
}`

All the props are passed as a object and we get it as a functional argument. Then used the values with there keys. Also, we can de-structure the values and use them. Like the following example.

`const Card = ({title, des, btn}) => {
  return (
    <>
    <div className='card'>
        <div className='card-container'>
            <h2>{title}</h2>
            <p>{des}</p>
            <button>{btn}</button>
        </div>
    </div>
    </>
  )
}`

Hope you understood about what is props. I have created a tutorial video about props. You also can watch it for understand in better way.

Props In React JS In Hindi | What is Props in Hindi | MERN Stack Course - YouTube

Props In React JS In Hindi | What is Props in Hindi | MERN Stack CourseIn this video we will learn about props in react. If you want to know what is props in...

youtube.com

Python Free Udemy Course For Beginners 2023

Sk Shoyeb — Wed, 08 Mar 2023 07:50:06 +0000

*Python free Udemy course for beginners 2023: * Here I will share my free Python Udemy course for beginners in 2023. The course is beginner friendly and easily understandable.

Python Free Udemy Course For Beginners 2023

This course I created for the beginner students. This course has covered all the basic concepts of programming in Python through lectures, quiz and tasks.

Already more than 2,200 students enrolled for these free Python course in Udemy. This course has 4.3 star rating till now. Hope you will enroll for this course and learn Python.

Course Description

Welcome, to my Python 3 For Beginners in 2023 course. If you are a beginner and want to learn Python then this course is right for you. This course is designed according to the beginner's knowledge and industry requirements.

Throughout the course, students will learn how to write Python code and build their own simple programs, including applications such as calculators, games, and basic data analysis tools. They will also learn how to use Python's built-in functions and libraries to make their programming tasks more efficient.

The course will start by introducing students to the basics of programming, including the concepts of variables, data types, and control structures such as loops and conditional statements. Students will then learn how to use Python's functions and modules to write more complex programs and perform tasks such as input/output, file handling, and error handling.

By the end of the course, students will have a solid understanding of Python programming and be able to write their own simple applications. They will also be prepared to continue learning and exploring more advanced topics in Python and other programming languages.

Overall, Python Programming for Beginners is an excellent course for anyone looking to learn programming and gain a solid foundation in one of the most popular and versatile programming languages in use today.

Enroll Now For Free Python Course For Beginners

Free Java Course Udemy

If you want to learn Java you can also check Free Java Course Udemy for Beginners.

3 Best Node Js Project Ideas to Get Quick Job

Sk Shoyeb — Sat, 21 Jan 2023 09:09:10 +0000

Node.js is a powerful platform for building server-side applications, and it's no surprise that it's in high demand among employers. Whether you're a beginner or an experienced developer, working on a Node.js project is a great way to showcase your skills and increase your chances of landing a job.

Here are the top 3 Node.js project ideas that will help you get a job:

3 Best Node Js Projects

A real-time chat application:

Building a real-time chat application with Node.js is a great way to showcase your skills in web sockets, real-time data handling, and user authentication. Employers are always looking for developers who have experience in building real-time applications and can handle the challenges that come with it.

A RESTful API:

Creating a RESTful API is a great way to showcase your skills in routing, handling different types of requests, and building scalable and maintainable applications. Employers are always looking for developers who can create and maintain APIs that can handle a large number of requests and can be easily integrated into other systems.

A web scraping tool:

Building a web scraping tool with Node.js is a great way to showcase your skills in web scraping, data extraction, and data manipulation. Employers are always looking for developers who can extract data from websites and can turn it into actionable information that can be used to make business decisions.

These are just a few ideas to get you started, but the possibilities are endless with Node.js. Remember to keep in mind the needs of your potential employer while working on your project and take into account the skills they require to increase your chances of getting a job.

Why You Should Not Learn Web3 As A Beginner

Sk Shoyeb — Wed, 11 Jan 2023 07:02:09 +0000

There are a few reasons why someone who is just starting to learn about programming and web development may not want to immediately dive into learning about web3 and blockchain technology.

New Technology

Web3 and blockchain are relatively new and rapidly evolving technologies. This means that there is a lot of uncertainty and change in the ecosystem, which can make it difficult to know what to learn and where to focus your efforts. Additionally, the technology is still evolving and many of the use cases for it are not yet fully realized, which can make it difficult to see the practical applications of what you are learning.

Complex For Beginners

Web3 and blockchain development can be quite complex and difficult to understand for beginners. These technologies involve advanced concepts such as cryptography, decentralized networks, and smart contracts, which can be challenging to grasp without prior knowledge and experience. Additionally, because these technologies are new and evolving, there may not be as many resources and tutorials available to help beginners learn the basics.

Fundamental Concepts

If you are just starting to learn programming, it may be more beneficial to focus on more fundamental concepts and skills before diving into web3 and blockchain development. By learning the basics of programming languages such as JavaScript, Python, or Java, you will be building a strong foundation that will serve you well as you continue to learn and grow as a developer.

Less Job Market

It's also worth noting that the job market for web3 and blockchain developers is still relatively small and niche. While the demand for these skills is increasing, it's not yet clear how the market will evolve and mature. As a beginner, it may be more beneficial to focus on learning web development skills that are more in demand, such as full-stack JavaScript or Java development. This will give you a better chance of finding a job and building a career in the short-term.

Decentralize Concepts

One of the important thing is about web3 is that it require a good understanding of the concept of decentralization, and how it works, this is not something easy to grasp for beginner developer, and need a lot of time to get familiar with, it may be a good idea to first learn more about the general concepts of decentralization, distributed systems, and consensus algorithms before diving into the specifics of web3 and blockchain development.

Conclusion

While web3 and blockchain technology have a lot of potential and are exciting to learn about, as a beginner, it may not be the best idea to immediately dive into learning about them. It may be more beneficial to focus on building a solid foundation in programming and web development, and to gain a better understanding of the concepts of decentralization before diving into more specialized and complex technologies like web3 and blockchain.

It's important to keep in mind that it's not a must to learn web3 and blockchain, it's just one of the many technologies out there, and there is always something new and interesting to learn, it's up to you to find the area that interest you the most and focus on that.

Why You Should Learn Vue js 3 In 2023

Sk Shoyeb — Tue, 10 Jan 2023 07:29:01 +0000

Vue.js is a progressive JavaScript framework that is becoming increasingly popular among web developers. If you're considering learning a new JavaScript framework in 2023, Vue.js is definitely worth considering. Here are some reasons why you should learn Vue.js in 2023.

Vue.js is easy to learn

Vue.js has a gentle learning curve, which makes it easy for developers who are new to JavaScript frameworks to pick up. Its syntax is similar to that of other popular JavaScript libraries, so if you're already familiar with libraries like React or Angular, you'll find Vue.js familiar and easy to learn.

Vue.js is lightweight

Vue.js is a lightweight framework, with a runtime size of only 18-21KB. This makes it ideal for building small to medium-sized applications, as it won't add a significant amount of overhead to your project.

Vue.js is performant

Vue.js has a fast rendering engine, which makes it highly performant. This is especially important when building applications that rely on real-time data, as Vue.js can quickly and efficiently update the view when data changes.

Vue.js is flexible

Vue.js can be used in a variety of different ways, depending on the needs of your project. You can use it as a lightweight alternative to full-blown frameworks like Angular, or you can use it in combination with other libraries to build complex, feature-rich applications.

Vue.js has a strong community

Vue.js has a strong and active community of developers who contribute to the development of the framework, as well as create and maintain a large number of plugins and integrations. This means that you'll have a wealth of resources and support available to you when working with Vue.js.

Vue.js is used by top companies

Vue.js is used by a number of top companies, including Adobe, GitLab, and Alibaba. This shows that Vue.js is a trusted and reliable choice for building web applications, and it's likely to continue to be widely used in the future.

Vue.js is easy to integrate

Vue.js is easy to integrate with other libraries and frameworks, so you can use it to build applications that utilize a variety of different technologies. This makes it a versatile choice for developers who need to work with a range of different tools and technologies.

Vue.js is great for prototyping

If you're working on a project that requires rapid prototyping, Vue.js is a great choice. Its simplicity and ease of use make it easy to quickly put together a prototype or MVP (minimum viable product) of your application.

Vue.js is component-based

Vue.js is component-based, which means that you can break your application down into smaller, reusable pieces. This makes it easier to manage and maintain your code, as you can work on one component at a time without affecting the rest of the application.

Vue.js has a robust ecosystem

In addition to the core Vue.js framework, there is a robust ecosystem of plugins and integrations available to extend the functionality of your application. This includes tools for testing, debugging, and performance optimization, as well as integrations with other libraries and frameworks.

Vue.js is constantly improving

The Vue.js team is actively working on improving the framework, and they regularly release new versions with new features and improvements. This means that you'll be able to take advantage of the latest and greatest developments in Vue.js as they become available.

Vue.js has great documentation

The Vue.js documentation is comprehensive and easy to follow, which makes it easy to get started with the framework and find answers to any questions you may have. There is also a large amount of community-generated content available, such as blog posts, tutorials, and video courses, which can help you learn Vue.js more quickly and effectively.

Vue.js is fun to use

Finally, Vue.js is just plain fun to use. Its simplicity and ease of use make it enjoyable to work with, and its lightweight runtime means that you don't have to worry about dealing with a lot of boilerplate code or configuration.

In conclusion, there are many good reasons to learn Vue.js in 2023. It's easy to learn, lightweight, performant, flexible, and has a strong community. It's also widely used by top companies and easy to integrate with other libraries and frameworks. If you're looking to learn a new JavaScript framework in 2023, Vue.js is definitely worth considering.

Vue.js is a great choice for developers who want to build web applications in 2023. It's easy to learn, lightweight, performant, flexible, and has a strong community. It's also great for prototyping, component-based, has a robust ecosystem, is constantly improving, and has great documentation. Plus, it's just plain fun to use. If you're looking to learn a new JavaScript framework in 2023, give Vue.js a try.

Laravel 9 Full Tutorial For Beginners In Hindi 2022

Sk Shoyeb — Sun, 31 Jul 2022 20:15:00 +0000

Laravel9 is one of the trending backend development frameworks in India. Laravel has boost up the usage of PHP in industry. There are a lot of jobs available for Laravel.

If you are a beginner and want to start web development, then you can learn Laravel.

Laravel9 Full Tutorial In Hindi

Conclusion

Give me your feedback or should I create Laravel videos in episode wise.

How to get a High paying MERN Job

Sk Shoyeb — Fri, 01 Jul 2022 20:17:54 +0000

Iv you are passionate about web development then you are very familiar with MERN stack. This is one of the most popular technology stack nowadays. So lets talk about how to get a high paying MERN job as a fresher.

Why MERN

MERN is a full stack technology based on JavaScript frameworks. MERN consist of Mongo DB, Express JS, React JS and Node Js. Mainly React JS is used in front end. Node and Express are used in Backend and Mongo DB is for database.

MERN is one of the popular stack technology in India as well as in global. This stack is based on JS. So you not need to learn different languages for Frontend and backend separately. And MERN is suitable for making scalable web apps.

How to get a high paying MERN job for Freshers

Well, if you want to be a MERN stack developer and want a high salary package then follow the rules.

Big product based startups and also service based startups pays MERN stack developers a lot. This tips that I am writing, are from many MERN stack Developers in my network and my friends. You can get 30,000 to 1,00,000 rupees jobs as a fresher as MERN stack developer.

Lets follow the tips given below:

1. Strong Fundamentals & Concepts

JavaScript is easy to learn but it has some concepts that you should know if you are going for MERN stack developer role. You should be clear about this concepts if you are giving an JS interview for a high paying job.

The some of the important JS concepts are - scope, hoisting, closures, asynchronous JS, higher order functions etc.

2. Build Full Stack Projects

Build at least 3 full stack projects. Projects are very important for cracking a MERN interview and getting a high salary package. Because projects shows your development skills and knowledge. And companies need it.

Your projects should be live and codes should be available on Github. So that the interviewer can check your web app and ask questions from that.

Try to build a clone project like Netflix clone, Instagram clone etc. But try some different touch in UI and don't tell the interviewer that I have made a clone of this app. Rather than tell him I am made OTT streaming app or social media app. Because if you tell them you have made Netflix clone or Instagram clone in many cases they ask system design related questions about the app.

3. Data Structure & Algorithm

Most of students avoid this. But DS and Algo is very important if you want to crack a medium level start up that will give you a high salary package. Work on your DS and Algo skills. Solve Array and String related questions in Leetcode.

If you properly follow the above industry inside tips you will get a high paying MERN stack job in 2022.

How To Get Web Development Freelancing Projects As Fresher & My Experience

Sk Shoyeb — Sun, 16 Jan 2022 15:58:43 +0000

How to get web development freelancing projects when you are a student and what is it's benefits. I will also share my experience how I got my first freelancing project.

Benefits of Having Freelancing Projects

Well, I am not sharing how you can get projects for your web development agency. Here I am sharing you can get projects for learning more and learn how real works are done in real projects.

If you have any freelancing projects that will help you in cracking web development interviews. Because in my first web development interview the interviewer asked do you have done any freelancing projects.

Secondly these projects helps you in developing your skills.

Video

This video is in Hindi. If you know Hindi this will be helpful to you.

How I Got My First Project

I got my first project through my senior of my college. He has a startup and he needed a developer. Then he call me and asked some questions for testing my knowledge and saw my personal projects. Then he gave me the project and I was the backend developer. I sharped my skills when I was working with them. This also helped in getting my job.

How to Get Web Development Freelancing Projects

Make good connections with your seniors who are also doing freelancing, job or have startups. Then can give you projects and also help you in learning new things. They can also help you in getting job refers.

LinkedIn is the best social media to get projects. Make a professional LinkedIn profile. Share your knowledge there and also share your personal projects also.

Many startups also need freelance web developers for their on going projects. You can find small startups and mail them. Write about your skills, your projects and share your resume. If they needed they will contact you.

These were some tips on how you can get web development projects if you are a fresher. Comment below how you got your first project.

What Is Web 3.0 Explained

Sk Shoyeb — Wed, 05 Jan 2022 07:18:28 +0000

After Meta verse, web 3.0 is now became a trending a topic in internet. Everybody want to know about what is web 3.0. What changes will web 3.0 make in programming field and technology.

Well I am here to explain you what is web 3.0 and also what are web 1.0 and 2.0.

What is Web 3.0

Web 3.0 is the new era of internet where the whole internet will shift towards the blockchain and decentralized technology. This will make internet more secure than web 3.0.

What is Web 1.0 and 2.0

Web 1.0 is the starting era of internet. You also can say it read only era. In this era people use internet to get only information. Or there was no interaction between user and internet. There you could not take data from user this present days.

You can consider static websites or personal websites as web 1.0 website. This era continued from 1996 to 2004.

After social media's, search Engine, Blogs came, the internet changed fully. Now user can interact with internet. Internet can take your information and use it to make profit from you. This is the web 2.0. We are using most of web 2.0.

The search engine, social media, streaming platform, ecommerce websites, blogs like dev.to are the part of web 2.0. From 2005 to 2016 is considered as web 2.0 era. But we have not shifted in web 3.0 fully.

Web 3.0

After 2016 web 3.0 is started. Where the blockchain technology and cryptocurrency is now in boom. After the announcement of Metaverse, people are also excited about web 3.0.

As you know blockchain is a decentralized technology. Recently we heard news about data leaks of many big companies. So they want to safe their data. And decentralized technology is perfect for safe data. This is why companies will use blockchain technology and this will be future.

Hope, you understand now what is web 3.0. If you have any idea or information, that can be valuable to people, you can share in comment box.

3 Full Stack Web Development Project Ideas For Final Year Project & Resume

Sk Shoyeb — Sun, 02 Jan 2022 07:24:32 +0000

Many students ask me about web development project ideas for their college or resume. Even most of my friends are confused what projects they should make.

Well after reading this article I hope you will have no doubt about it. And after adding these projects in your resume, you will get job offers like me.

Web Development Project Ideas

Students think that they should make something extraordinary. That they loose their time about thinking their extraordinary project. But this is wrong.

You should make a common project but add something unique feature in it that other students don't do. I will share the features with you.

E-commerce Project

E-commerce website is a common project. You can make a e-commerce website and add some extra feature that others don't.

You can add premium membership feature in the e-commerce website. Like if they purchase a premium membership plan they will get 15% off and fastest delivery.

You also can add refer and earn system or affiliate marketing system. Where people can refer a product with a refer link. And if someone purchase from the link, the man will get 10% commision of the product.

Adding these features are not very difficult. You can add this features in any backend language or framework like php, laravel, node etc.

3 Level Blog

Blogs are also very common project. But most people make 2 level blogs like admin panel where he can write post and front user where users can read post.

But you have to make blog like medium. Here will be a writer panel, admin panel and a frontend. Writer will register and write post from writer panel. The post will be submitted to the admin for review. The admin will review the post and approve it. After that the post will be published in frontend.

You can also make a e-learning site like udemy with this same idea.

Clone Websites

Well this idea is only for your resume. Make clone of a famous web application. You can make clone of Netflix, YouTube, Hotstar. Clone of social media's like Facebook, Instagram is quite difficult.

I will share more project ideas in future with you. If you have any project ideas you also can share in comment box.

I also share project ideas in my Instagram handle. If I worth, can I get a follow from you in my Instagram. Hope these project ideas will help in choosing projects for resume and college.

5 Websites To Get Free Icons For Web Development

Sk Shoyeb — Thu, 30 Dec 2021 08:33:14 +0000

In this article I will discuss about 5 websites to get free icons for web design. Specially Frontend developers need custom and modern icons when they develop a website. So this article will help you in finding icons quickly.

Fontawesome

Fontawesome is the world's most popular icon CDN. Most of developers use fontawesome icons. Here you can get free web icons, social media brand icons, icons for logos, vector icons, material icons etc.

Flaticon

Flaticon is my personal favourite resource for downloading modern and custom icons, stickers. Here you can get stickers and icons of all things like vegetables, material icons, web icons, social media icons. These icons make your website more attractive.

Dryicons

Dryicons contains more than 6000 **vector graphics **and icons. These icons are also very colorful. You can use these in UI and UX design and web design.

Icons8

This is one of the famous resource for icons and design elements download. Here you can get free design elements, photos, graphics, svg, music for your video. I have used this 2 or 3 times before.

Iconfinder

Iconfinder is the world largest icon and graphic element marketplace. Many developers don't know about this website. There are free and premium products. You can access over 200,000 icons, illustrations, 3d graphics for free. You can use these elements in your website or UI UX designs.

Hope this article is helpful to you. If yes, I just need a heart on this post. If I am missing any resource for icons tell me in comment box. Thanking you.

5 Tools That Saves Development Time

Sk Shoyeb — Mon, 27 Dec 2021 08:02:03 +0000

If you want to be a good developer, you should be aware about time. Developers use many time saving methods or tools. In this article I will share 5 tools that will help you in saving development time.

MockFlow

MockFlow is a cloud based mockup design software. Web designers and software developers use this for product design and layout design. You can also say this is a alternative of Figma.

MockFlow provides you easy user interface to design your product. You don't have to spend time in learning this tool like photoshop.

JSON Formatter

JSON Formatter is an online JSON validator or formatter tool. You can easily validate your JSON code and also format it. It reduce much time in writing JSON.

FingerprintJS

FingerprintJS is a very useful Javascript library which is use to implement fingerprint validator in website. You can easily make fingerprint validation in your application with just some line of codes.

CSS Color Picker

CSS Color picker is a chrome extension. This helps in getting color code of any element in browser just clicking the mouse pointer in the element. Using this tools you can get color code of any design.

Flaticon

Flaticon provides you free custom icons that you can use in your website. The icons are very attractive.

These were the 5 time saving development tools. Hope the tools will also help you in saving time.