DEV Community: Atif Riaz

Level Up Your Coding Skills for Free!

Atif Riaz — Sun, 09 Jun 2024 13:19:24 +0000

Are you ready to enhance your programming skills? Explore these fantastic free resources for web development, backend development, data, APIs, DevOps, and programming languages.

Web Development

🌐 HTML: w3schools.com/html
🎨 CSS: w3schools .com/css/
💎 Tailwind CSS:tailwindcss.com
⚡ JavaScript:javascript.info
🔷 TypeScript: typescriptlang.org/docs/
🔺 Angular: angular.io/tutorial
⚛️ React: react.dev
🌟 VueJS: vuejs.org
🔮 Svelte: svelte.dev/docs

Backend Development

🚀 Node.js: nodejs.org/en/learn/
🛤️ Ruby on Rails:rubyonrails.org
🎡 Laravel:laracasts.com
🎸 Django:djangoproject.com
🐹 Go:gobyexample.com
🦀 Rust: rust-lang.org/learn/
📱 Kotlin: kotlinlang.org/docs/tutorials/
🍏 Swift: docs.swift.org/swift-book/
🔧 ASP.NET:docs.microsoft.com/en-us/learn/aspnet/

Data & APIs

📊 SQL - dev.mysql.com/doc/
🔌 API: rapidapi.com/learn
🕸️ GraphQL: graphql.org/learn/
🍃 MongoDB:mongodb.com/docs/guides/
🐘 PostgreSQL:postgresql.org/docs/

DevOps & Version Control

🐙 Git and GitHub:git-scm.com
🐋 Docker:docker-curriculum.com
☁️ AWS:aws.amazon.com/training/
🛠️ Kubernetes: kubernetes.io/docs/tutorials/

Programming Languages

🐍 Python:learnpython.org
🖥️ C++:learncpp.com
🔷 C#:learn.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/
💻 Java:docs.oracle.com/javase/tutorial/
🦉 Haskell: haskell.org/learning/
📜 Perl: learn.perl.org

These resources are shared on my Twitter profile as well.
// Detect dark theme var iframe = document.getElementById('tweet-1799774568212468065-295'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1799774568212468065&theme=dark" }

Conclusion

These resources cover a wide range of programming skills and technologies. Dive in and start learning today to enhance your coding expertise and advance your career in technology. Happy coding! 🚀💻

Vite Server not Updating Changes after Save in Vue 3 with Nuxt js

Atif Riaz — Tue, 16 May 2023 13:24:42 +0000

Vite is a modern JavaScript build tool that provides fast development times and a great developer experience. One of the best features of Vite is hot reload, which allows you to see changes to your code without having to manually refresh the browser.

However, there are a few things that can go wrong with hot reload, and if you're having problems, it can be difficult to know where to start. In this blog post, we'll walk you through some of the most common problems with Vite hot reload and how to fix them.

Problems with Vite Hot Reload

There are a few common problems that can occur with Vite hot reload. These include:

File names not matching import statements: Make sure that the file names and import statements match exactly. For example, if your file is named task.js, your import statement should be import Task from "src/js/task.js".
Third-party libraries not supporting hot reload: Some third-party libraries don't support hot reload, which means that you'll need to manually refresh the browser to see changes.
Incorrect Vite configuration: Make sure that your Vite configuration is correct. You can find more information on the Vite website.

Troubleshooting Vite Hot Reload

If you're having problems with Vite hot reload, you can try the following:

Restart your Vite server.
Clear your browser's cache.
Try a different browser.

If you're still having problems, you can ask for help on the Vite Discord server.

Tips for Troubleshooting Vite Hot Reload

Here are some additional tips for troubleshooting Vite hot reload:

Use a consistent file naming convention. This will help to avoid errors caused by mismatched file names and import statements.
Avoid using third-party libraries that don't support hot reload. If you must use a third-party library that doesn't support hot reload, you can try using a CDN to load the library.
Keep your Vite configuration up to date. The Vite team is constantly adding new features and improvements, so it's important to keep your configuration up to date.

Conclusion

Hopefully, this blog post has helped you to troubleshoot Vite hot reload in Vue 3. If you're still having problems, please feel free to ask for help on the Vite Discord server.

If you have any questions or comments, feel free to reach out to me on my Twitter handle @iamatifriaz

How I started my web development career at the age of 19 with no coding background

Atif Riaz — Mon, 15 May 2023 06:15:44 +0000

If you're reading this, you're probably considering a career in web development. You might wonder if you have what it takes to be a successful developer.

I started my web development career at the age of 19, right after school. I had no CS degree and no coding background. Even then, I graduated in Commerce, which I shouldn't have. Later, I did my master's degree in Computer Sciences.

Now, I have 10+ years of web development and leading different frontend teams experience, a computer science degree, and a 6-figure monthly income.

It all started when a friend introduced me to HTML and CSS. At first, it was tough, but soon enough, I realized I was good at it and enjoyed doing it. Eventually, I started taking on small projects. And that's how my web development career started.

Despite not having any background in coding, I could teach myself everything I needed to know and become successful in this field. If I can do it, anyone can. So if you're interested in web development but don't know where to start, just take the plunge and go for it! You might surprise yourself with what you're capable of.

So, if you're wondering if you can make a successful career in web development, the answer is a resounding yes! Here are three tips to help you get started:

1. Believe in yourself

The most important thing you need to succeed in any field is confidence in your ability. This is especially true in web development, where you'll constantly need to learn new skills and technologies.

Believe in yourself and know that you can do it—you'll be surprised at how far that takes you.

2. Start learning coding basics

If you're starting from scratch, the best way to get into web development is to start learning coding basics. You don't need to go overboard and try to learn everything at once—just focus on the essentials.

Once you have a solid understanding of the basics, you can start learning more specific technologies and frameworks. But again, don't try to learn everything at once—take things one step at a time and focus on what you need to know for your current project.

3. Find a mentor

One of the best ways to learn anything new is to find someone who already knows what you want to learn and can help guide you through the process. This is especially helpful in web development, where the landscape is constantly changing, and it can be difficult to keep up with everything on your own.

A mentor can help you stay up-to-date on the latest trends, teach you new skills, and advise you when you're stuck. If you don't have a mentor, look for online resources or meetups where you can connect with other developers.

These are three tips to get you started on your path to becoming a successful web developer. Remember to believe in yourself, start learning coding basics, and find a mentor to help you along the way. You can achieve anything you want with hard work and dedication!

If you have any questions or comments, feel free to reach out to me on my Twitter handle @iamatifriaz

If you enjoyed this content, don’t forget to like, comment, and reshare!

Google I/O 2023: A Look at the Revolutionary Innovations in AI

Atif Riaz — Thu, 11 May 2023 20:18:02 +0000

Google's annual developer conference, I/O 2023, was just held, and it was packed with exciting announcements.

Here are some of the most revolutionary innovations that were unveiled in AI:

1. Bard

Bard is a new AI language model from Google AI that can generate text, translate languages, write different kinds of creative content, and answer your questions in an informative way.

It is still under development, but it has the potential to revolutionize the way we interact with computers.
Here are some of the things that Bard can do:
- Generate text: Bard can generate text in different styles, including news articles, blog posts, poems, code, scripts, musical pieces, emails, letters, etc.
- Translate languages: Bard can translate over 200 languages.
- Write different kinds of creative content: Bard can write different kinds of creative content, such as poems, code, scripts, musical pieces, emails, letters, etc.
- Answer your questions in an informative way: Bard can answer your questions in an informative way, even if they are open-ended, challenging, or strange.

2. Google unveils a list of future plugins for Bard

Google also unveiled a list of future plugins for Bard, including:

A code generation plugin
A math equation solver
A research paper writing assistant

These plugins will make Bard even more powerful and versatile, and they will help us to do things that we never thought possible.

3. Google releases "Help me write" in Gmail

Google also released a new feature called "Help me write" in Gmail.

This feature uses Bard to help you write emails more effectively.
It can suggest phrases, and complete sentences, and even generate entire emails for you.

4. Bard + Adobe Firefly announced

Google and Adobe also announced a partnership to integrate Bard with Adobe Firefly.

This integration will allow Bard to access Adobe's vast library of creative assets, such as images, videos, and music.
This will make it even easier for you to create beautiful and engaging content.

5. Google Unveils Gemini

Google also unveiled a new browser called Gemini.

Gemini is a stripped-down browser that is designed to be fast, secure, and private.
It is a great choice for users who are looking for a lightweight and distraction-free browsing experience.

6. Google X Adobe

Google also announced a new partnership with Adobe called Google X Adobe.

This partnership will focus on developing new AI-powered tools for creative professionals.
These tools will help creatives to be more productive and to create even more amazing content.

7. Google Photos' new "Magic Editor"

Google also announced a new feature for Google Photos called "Magic Editor."

This feature uses AI to automatically improve your photos.
It can adjust the brightness, contrast, and color of your photos, and it can even remove unwanted objects.

8. Google just announced Immersive View for Maps

Google just announced Immersive View for Maps.

This new feature allows you to explore places in 3D, right from your phone or computer.
You can walk around and see things from different angles, and you can even zoom in to see details like the texture of the buildings.

9. Google unveils PaLM 2

Google also unveiled PaLM 2, the successor to its powerful PaLM AI language model.

PaLM 2 is even more powerful than its predecessor, and it can perform even more complex tasks.
It is a truly groundbreaking achievement, and it has the potential to change the world.

These are just a few of the revolutionary innovations that were unveiled at Google I/O 2023. It was an exciting event, and it is clear that Google is committed to pushing the boundaries of what is possible with AI. I am excited to see what Google comes up with next!

If you have any questions or comments, feel free to reach out to me on my Twitter handle @iamatifriaz

30 Days Frontend Development Roadmap 2024

Atif Riaz — Thu, 22 Sep 2022 19:39:40 +0000

30 days Frontend Development Roadmap is a comprehensive guide to becoming a well-rounded front-end developer. In just 30 days, you will learn the skills and technologies you need to build beautiful, responsive websites and web applications.

This roadmap covers everything from HTML, CSS/CSS3, SASS, Less, and Javascript. By the end of this roadmap, you'll be able to build user interfaces that look great and work flawlessly on any device.

Whether you're just starting your coding journey or a seasoned veteran looking for a refresher, this roadmap is for you. So let's get started!

What is Frontend Development?

Frontend development is the practice of building user interfaces for websites and web applications. This can include designing and coding responsive website layouts to implementing interactive features like animations and forms.

No matter your level of experience, there's always something new to learn in front-end development. It can be tough to keep up with new technologies and emerging trends. That's where this roadmap comes in.

The Roadmap

This roadmap is divided into four sections, each covering a different aspect of frontend development:

HTML & CSS - In this section, you'll learn how to code with HTML and CSS, the two fundamental languages of the web.
Responsive Design - You'll learn how to make your websites look great on any device, from phones and tablets to laptops and desktops.
CSS Pre-Processors - In this section, you'll learn how to use CSS pre-processors like Sass and Less to streamline your CSS code.
JavaScript - In this section, you'll learn how to add interactivity to your websites with JavaScript. By the end of this section, you'll be able to build simple web applications.

So without further ado, let's get started on the Frontend Development Roadmap of 30 days!

Day 1: HTML & CSS

On day one, you will learn the basics of HTML and CSS. These two languages are essential for coding websites and web applications, so it's important to have a strong understanding of them.

What is HTML?

HTML (HyperText Markup Language) is the code to structure a website's content. It is made up of elements that are placed inside tags. For example, this paragraph is structured using the <p> tag.

What is CSS?

CSS (Cascading Style Sheets) is a code to style a website's content. CSS is made up of style rules that are applied to the HTML elements on a page. For example, this paragraph has a CSS rule that sets the font size to 18px.

How do I code with HTML & CSS?

To code with HTML and CSS, you will need a text editor. A text editor is a program that allows you to write and edit code. Some popular text editors include Sublime Text, Atom, and Visual Studio Code.

Once you have a text editor installed on your computer, you can create a new HTML file by creating a new file with the .html extension. For example, you could name your file my-first-website.html.

Then, you can start coding in HTML. Every HTML document starts with a doctype declaration, which tells the web browser what type of document to expect.

<!DOCTYPE html>

Next, you'll need the <html> element. This element encapsulates all the content on a webpage.

<HTML>
<!-- The content on your webpage goes here -->
</html>

Inside the <html> element, you can add any other HTML elements to structure your content. For example, you could add a heading element (<h1>) and a paragraph element (<p>).

<HTML>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</html>

You'll need to create a CSS file to style your HTML with CSS. You can do this by creating a new file with the .css extension. For example, you could name your file styles.css.

Then, you can start coding in CSS. Every CSS rule has two parts: a selector and a declaration. The selector is used to target the HTML element that you want to style. The declaration sets the element's properties, such as the font size or color.

h1 {
font-size: 18px; /* This is a declaration */
} /* This is a selector */

To apply your CSS rules to your HTML, you'll need to link your CSS file to your HTML file. You can add a <link> element inside your HTML document's <head> element. The <link> element has two attributes: href and type. The href attribute tells the browser where to find the CSS file. The type attribute tells the browser what type of file it is.

<HTML>
<head>
<link href="styles.css" type="text/css">
</head>

Now that you know the basics of HTML and CSS, you're ready to start coding!

Day 2: CSS Layouts

On day two, you will learn about CSS layouts. A CSS layout is a way of organizing your HTML elements on a webpage. There are three common types of CSS layouts:

Float Layout - The HTML elements are floated left or right in a float layout. This allows the elements to be next to each other instead of stacked on top.
Flexbox Layout - In a flexbox layout, the HTML elements are organized in a flex container. The flex container can be set to wrap the elements or to scroll horizontally or vertically.
Grid Layout - The HTML elements are organized in a grid layout. The grid can have multiple rows and columns, and the elements can span multiple rows and columns.

Day 3: CSS Positions

On day three, you will learn about CSS positions. CSS positions are used to position HTML elements on a webpage. There are four types of CSS positions:

Static - The element is positioned according to the document's normal flow. This is the default position.

Relative - The element is positioned relative to its normal position.

Absolute - The element is positioned relative to the nearest ancestor that has a position other than static.

Fixed - The element is positioned relative to the viewport.

Day 4: CSS Preprocessors

On day four, you will learn about CSS preprocessors. A CSS preprocessor is a program that allows you to write CSS code in a different language. The most popular CSS preprocessor is Sass.

Sass is a CSS preprocessor that adds extra features to CSS, such as variables and mixins. These features make Sass more powerful than regular CSS.

Day 5: Responsive Web Design

On day five, you will learn about responsive web design. Responsive web design makes a website look good on all devices (such as phones, tablets, and laptops).

There are many ways to make a website responsive. One way is to use media queries. Media queries allow you to target specific screen sizes and apply different CSS rules to each screen size.

Day 6: CSS Animations

On day six, you will learn about CSS animations. A CSS animation is a way of adding movement to an HTML element.

CSS animations are created using the @keyframes rule. The @keyframes rule defines the stages of the animation. Each stage has a different CSS style that will be applied to the element.

Day 7: CSS Transitions

On day seven, you will learn about CSS transitions. A CSS transition is a way of adding transition effects to an HTML element.

CSS transitions are created using the transition property. The transition property defines the transition effect's duration, delay, and easing.

Day 8: CSS Pseudo-Classes and Pseudo-Elements

On day eight, you will learn about CSS pseudo-classes and pseudo-elements. A CSS pseudo-class is a way of adding special styles to an HTML element.

CSS pseudo-classes are created using the : character. For example, the :hover pseudo-class can be used to add a hover effect to an HTML element.

CSS pseudo-elements are used to style parts of an HTML element that are not inside the HTML element. For example, the ::before pseudo-element can be used to insert content before an HTML element.

Day 9: Fonts

On day nine, you will learn about fonts. Fonts are the typefaces used on a webpage.

There are two types of fonts: system fonts and web fonts. System fonts are installed on a user's computer, while web fonts are downloaded from the internet.

Web fonts can be used to create custom typefaces for a webpage. The most popular font formats are WOFF, WOFF2, and EOT.

Day 10: Icons

On day ten, you will learn about icons. Icons are small images used to represent an action or a concept.

Icons can be created using a vector graphic program like Adobe Illustrator. Once the icons are created, they can be exported as SVG files.

SVG files can be used on a webpage by embedding them into the HTML code. Icons can also be added to a webpage using icon fonts. Icon fonts are fonts that contain icons instead of letters.

Day 11: SVGs

On day eleven, you will learn about SVGs. SVGs are vector graphic files that can be used on a webpage.

SVGs can be created using a vector graphic program like Adobe Illustrator. Once the SVG is created, it can be exported as an SVG file.

SVG files can be used on a webpage by embedding them into the HTML code. SVGs can also be added to a webpage using icon fonts. Icon fonts are fonts that contain icons instead of letters.

Day 12: The Box Model

On day twelve, you will learn about the box model. The box model is a way of adding margins, borders, and padding to an HTML element.

The box model comprises four properties: margin, border, padding, and content. The margin property defines the space outside of an element. The border property defines a line around an element. The padding property defines the space inside of an element. The content property defines the element's content.

Day 13: Flexbox

On day thirteen, you will learn about flexbox. Flexbox is a CSS layout mode that makes it easy to align and justify elements on a webpage.

Flexbox is made up of two properties: flex-direction and justify-content. The flex-direction property defines the direction of the elements. The justify-content property defines how the elements are justified.

Day 14: CSS Grid

On day fourteen, you will learn about the CSS grid. CSS grid is a CSS layout mode that makes it easy to create complex layouts.

CSS grid is made up of two properties: grid-template-columns and grid-template-rows. The grid-template-columns property defines the columns in a grid. The grid-template-rows property defines the rows in a grid.

Day 15: CSS Frameworks

On day three, you will learn about CSS frameworks. A CSS framework is a collection of HTML and CSS rules that can be used to style a webpage.

There are many CSS frameworks, but some of the most popular ones include Bootstrap, Tailwind CSS, ChakraUI, and Bulma.

CSS frameworks can be used to style a webpage quickly. They can also be used to create responsive web pages, which are pages that look good on all devices.

Day 16: JavaScript Basics

On day sixteen, you will learn about JavaScript basics. JavaScript is a programming language that can add interactivity to a webpage.

JavaScript code is written in files with a .js extension. The code is executed by the browser when the webpage is loaded.

JavaScript code can be added to a webpage using the <script> element. The <script> element can be placed in the <head> or <body> of an HTML document.

Day 17: Javascript Variables Var, let, const

On day seventeen, you will learn about variables. Variables are used to store values in a program.

JavaScript has three types of variables: var, let, and const. Var variables are global variables. Let variables are local variables. Const variables are constant variables.

Day 18: Data Types In Javascript

On day eighteen, you will learn about data types. Data types are used to define the type of data that a variable can store.

JavaScript has seven data types: string, number, boolean, null, undefined, object, and symbol. Strings are used to store text data. Numbers are used to store numeric data. Booleans are used to store true or false values. Null is used to store a null value. Undefined is used to store an undefined value. Objects are used to store data in a key-value format. Symbols are used to create unique identifiers.

Day 19: Operators In Javascript

You will learn about operators on day nineteen. Operators are symbols that are used to perform operations on variables.

JavaScript has six types of operators: assignment, arithmetic, comparison, logical, bitwise, and ternary. Assignment operators are used to assigning values to variables. Arithmetic operators are used to performing arithmetic operations on variables. Comparison operators are used to comparing two values. Logical operators are used to combining two Boolean values. Bitwise operators are used to performing bitwise operations on variables. The ternary operator is a conditional operator used to select one of two values based on a condition.

Day 20: If Statements And Loops In Javascript

On day twenty, you will learn about if statements and loops. If statements are used to execute code based on a condition. Loops are used to execute code multiple times.

JavaScript has three types of loops: for, while, and do-while. For loops are used to execute code a specific number of times. While loops are used to execute code until a condition is met. Do-while loops are used to execute code at least once and then repeat the code until a condition is met.

Day 21: Functions In Javascript

You will learn about functions on day twenty-one. Functions are pieces of code that can be executed multiple times.

Functions are declared using the function keyword. Functions can take arguments and return values.

Function arguments are variables that are passed into a function. Function return values are values that are returned by a function.

Day 22: Objects In Javascript

An object is a collection of key-value pairs. Keys are used to identifying values in an object. Values can be any data type.

JavaScript objects are created using the Object() constructor. Objects can be created using object literal.

An object literal is a comma-separated list of key-value pairs enclosed in curly braces.

Keys in an object literal must be unique. Values in an object literal can be of any data type.

Day 23: Arrays In Javascript

An array is a collection of values of the same data type. Arrays are indexed, meaning each value in an array has a numeric index.

JavaScript arrays are created using the Array() constructor. Arrays can be created using array literals.

An array literal is a comma-separated list of values enclosed in square brackets.

Values in an array can be of any data type.

Day 24: Date And Time In Javascript

The Date() object works with dates and times in JavaScript.

The Date() object has many methods that can be used to get the current date and time, format dates and times, and calculate dates and times.

Day 25: Math In Javascript

The Math object is used to perform mathematical operations in JavaScript.

The Math object has many methods that can be used to perform basic mathematical operations, generate random numbers, and calculate trigonometric functions.

Day 26: RegExp In Javascript

A regular expression is a pattern that can be used to match strings.

Regular expressions are created using the RegExp() constructor. Regular expressions can also be created using regular expression literal.

Regular expression literals are enclosed in slashes.

Day 27: Error Handling In Javascript

Error handling is dealing with errors that occur when your code is executed.

JavaScript has two types of errors: syntax errors and runtime errors. Syntax errors occur when your code is not valid in JavaScript. Error errors occur when your code attempts to do something that is impossible.

JavaScript has two ways of dealing with errors: try-catch statements and the throw keyword.

Try-catch statements are used to handle runtime errors. The throw keyword is used to generate custom errors.

Day 28: Cookies In Javascript

Cookies are small pieces of data stored on a user's computer. Cookies store information about a user, such as their name, email address, and password.

Cookies are created using the Cookie() constructor. Cookies are set using the setCookie() method. Cookies are retrieved using the getCookie() method.

Day 29: Event handling In Javascript

Events are actions in the browser, such as a user clicking a button or moving their mouse over an element.

JavaScript can respond to events using event handlers. Event handlers are functions that are executed when an event occurs.

There are many different events, each with a different set of properties.

Day 30: Window Object In Javascript

The window object is the global object in JavaScript. The window object has many properties and methods that can be used to manipulate the browser window.

Some of the most popular properties and methods of the window object include:

open() - opens a new browser window
close() - closes the current browser window
resizeTo() - resizes the current browser window to a specified width and height
scrollTo() - scrolls the current browser window to a specified position

Free Resources:

Here are the important resources to learn about frontend development:

Websites

W3Scchools: https://www.w3schools.com/
Codecademy: https://www.codecademy.com/
freeCodeCamp: https://www.freecodecamp.org/
MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web
Dash by General Assembly: https://dash.generalassemb.ly/
Scrimba: https://scrimba.com/g/gbootstrap4
The Odin Project: https://www.theodinproject.com/courses/front-end-development
Google Developers: https://developers.google.com/web/fundamentals/
Udemy: https://www.udemy.com/topic/front-end-development/
Coursera: https://www.coursera.org/specializations/front-end-javascript

Youtube channels

freeCodeCamp.org
The Net Ninja
Traversy Media
DevTips
Google Developers
LevelUpTuts
SeeSoCode
Academind
Codevolution
Web Dev Simplified

Summary:

This concludes the 30 Days Frontend Development Roadmap. We hope this helped give you a general overview of the concepts and technologies used in front-end development. If you have any questions or comments, feel free to reach out to me on my Twitter handle @iamatifriaz.

If you enjoyed this content, don’t forget to like, comment, and reshare!

Follow me for more free tips and free resources.

Happy coding!

P.S. I'm also on Hashnode and click here to read this article on it.

Gradient Text

Atif Riaz — Sun, 31 Jul 2022 20:31:01 +0000

Gives text a gradient color.

HTML

<h1 class="gradient-text">Gradient text</h1>

CSS

.gradient-text {
font-size: 100px;
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

Demo

How to Fix ERROR in Plugin 'react' was conflicted between 'package.json' and 'eslint-config-react-app'?

Atif Riaz — Mon, 09 May 2022 19:02:20 +0000

If you're seeing the error message "Plugin 'react' was conflicted between 'package.json' and 'eslint-config-react-app'" then it's likely that you have a conflict in your project's dependencies.
*There are a few ways to resolve this problem: *

Solution 1: Check the DIRECTORY name

Make sure the directory name is not capitalized. For example, the directory name "Reactapp/REACTAPP/React-app" will throw this error, but "reactapp/react-app" will not. Sometimes casing may cause issues.

Solution 2: downgrade to version 6.

If you're using yarn, you can **downgrade **to version 6.8.0 of the eslint-config-react-app package by running the following command:
yarn add --dev eslint-config-react-app@6.

Solution 3: Save the package.json file

If you're using a package manager other than yarn, you can try saving your project's package.json file (ctrl + s) and running the command again.

Solution 4: Uninstall eslint-config-react-app and reinstall it.

If the above solutions don't work, you can try uninstalling eslint-config-react-app and reinstalling it:
yarn remove eslint-config-react-app
yarn add --dev eslint-config-react-app

Solution 5: Remove the conflict from your project's dependencies.

If you're still seeing the error, it's likely that there is a conflict in your project's dependencies. You can try removing the conflicting dependency from your package.json file and running the command again.

If you're still seeing this error after trying these steps, please file a bug report at https://github.com/eslint/eslint/issues. Include your project's dependencies and versions, as well as your ESLint configuration.

Originally this post is added on my hashnode profile first and here is the link https://atifriaz.hashnode.dev/how-to-fix-error-in-plugin-react-was-conflicted-between-packagejson-and-eslint-config-react-app

Thanks!

💡 .filter() & .find(): JavaScript Array Methods

Atif Riaz — Wed, 10 Nov 2021 16:48:47 +0000

When working with an array in JavaScript, we may need to locate a single item within the collection. This may appear tiresome, but if we apply the right methods/procedures/techniques, it shouldn't be too tough.

There are various ways to extract the needed values from an array, but we'll utilize JavaScript's .find() and .filter() methods here.

A coding example
We have an array of appsArray:



const appsArray = [{  
    Name: 'Canva',  
    ID: 10  
}, {  
    Name: 'VS Code',  
    ID: 12  
}, {  
    Name: 'Github',  
    ID: 52  
}, {  
    Name: 'Adobe',  
    ID: 23  
}];

We need an app with an ID of 12

.find()

The find() method returns the first value from the collection that matches. It will not examine the other values in the array collection after it matches the value in findings.



appsArray.find(function(item) {  
    return item.ID === 12  
});  

//output: {Name: "VS Code", ID: 12}

.filter()

The filter() method returns the collection's matched values as an array. It will verify all of the values in the collection and return an array of the matching values.



appsArray.filter(function(item) {  
    return item.ID === 12  
});  

//output: [ {Name: "VS Code", ID: 12} ]

In Internet Explorer 11, the find() method does not work. All browsers, including Internet Explorer 9+, support the filter() method.

Using the snippet below, you can obtain the first matched value from the collection of filter() method results. This solution solves the find() method's IE compatibility problem.



appsArray.filter(function(item) {  
    return item.ID === 12
})[0];  

//output: {Name: "VS Code", ID: 12}

Conclusion

The find() technique is preferable for newer browsers, but if you care about Internet Explorer, you should use the filter() method.

.find() returns the first matching element, while .filter() returns an array of all matching elements.

// Detect dark theme var iframe = document.getElementById('tweet-1458472863929876488-63'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1458472863929876488&theme=dark" }

Hope you found this article useful, if you did, shoot me a comment to let me know. If you think I did something wrong, please also let me know in the comments.

Happy coding.

⚡JS Tip: Create Emoji Characters in JavaScript using String.fromCodePoint();

Atif Riaz — Thu, 16 Sep 2021 11:51:00 +0000

The String.fromCodePoint() method was added to ECMAScript 2015. The result of this method is a string (and not a String object).
Because fromCodePoint() is a static String method, you must call it as String.

let smile = String.fromCodePoint(128516); // '128516' is character code
let str = `I got you ${smile}!`;
console.log(str);
// output: "I got you 😄!"

Syntax

Here is the syntax:

String.fromCodePoint(num1)
String.fromCodePoint(num1, num2)
String.fromCodePoint(num1, num2, ..., numN)

Initially created on Twitter

// Detect dark theme var iframe = document.getElementById('tweet-1437788236332605449-521'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1437788236332605449&theme=dark" }

If you liked this article, be sure to ❤️ it.

6 Beginners Friendly Websites to Learn JavaScript [Free]

Atif Riaz — Tue, 15 Jun 2021 06:37:20 +0000

JavaScript is one of the most popular modern web technologies! As your JavaScript skills grow, your websites will enter a new dimension of power and creativity.
I'm gonna list down 6 platforms/websites from where you can learn JavaScript without spending a single penny:

w3schools
Learn JavaScript
JavaScript Info
Developer Mozilla
FreeCodeCamp
JavaScript30

1. w3schools

W3Schools is a web developers site, with tutorials and references on web development languages such as HTML, CSS, JavaScript, PHP, SQL, jQuery, Java, C++, C#, React, Node.js, and Bootstrap, covering most aspects of web programming.

Link: https://w3schools.com/js/

2. Learn JavaScript

Learn modern JavaScript from scratch, and practice in an intuitive environment. The challenges are inspired by modern real-world projects to make sure that you're learning the best practices, one step at a time.

Link: https://learnjavascript.online/

3. JavaScript Info

Here you start with basic and go on to advanced levels like OOP.

Link: https://javascript.info/

4. Developer Mozilla

JavaScript is arguably more difficult to learn than related technologies such as HTML and CSS. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two.

Link: https://developer.mozilla.org/en-US/docs/Learn/JavaScript

5. FreeCodeCamp

As you can see here you have a different section/certification. And first, you have tutorials then, in the end, you need to finish 5 projects to get that certification. Certification is free

Link: https://www.freecodecamp.org/learn

6. JavaScript30

Beginner to Intermediate developers and designers who want to become comfortable with both JavaScript fundamentals and working in the DOM without a library.

Also, you can check @wesbos Youtube channel

Link: https://javascript30.com/

Initially created on Twitter:

Muhammad Atif Riaz

@iamatifriaz

6 Beginners Friendly Websites to Learn JavaScript

🧵

#javascript #100DaysOfCode

21:26 PM - 14 Jun 2021

If you liked this article, be sure to ❤️ it.

7 Easy Steps to Secure a WordPress Site 🔐

Atif Riaz — Wed, 10 Mar 2021 17:02:16 +0000

WordPress is so widely used, any programmer working with it has to take great care to harden it against external attacks.

In a single incident last year alone, almost a million websites were attacked in a single month.

But there are some things you can do that will harden a WordPress site against attacks that will stop all but the most sophisticated threats.

Here are the 7 security steps to take on every WordPress site you work with:

Update WordPress to the Latest Version
Remove Unused Plugins and Update the Rest
Minimize User Permissions and Secure Logins
Disable PHP Execution in Untrusted Folders
Disable PHP Error Display
Disable Theme and Plugin Editing
Change site database default table prefix to something obscure

Initially created on Twitter:

Muhammad Atif Riaz

@iamatifriaz

Secure a WordPress Site in Seven Easy Steps👇👇

Because WordPress is so widely used, any programmer working with it has to take great care to harden it against external attacks.

1/n

#wordpress #webdev #100DaysOfCode #php #javascript

12:58 PM - 08 Mar 2021

If you liked this article, be sure to ❤️ it.

3 Ways to Clone Objects in JavaScript

Atif Riaz — Mon, 22 Feb 2021 10:36:15 +0000

Since Objects in JavaScript are reference values, you cant just Copy Using the =. But no worries, here are 3 different ways for you to Clone an Object

Spread
Object.assign
JSON

const food = { beef: '🥩', bacon: '🥓' }

// "Spread"
{ ...food }

// "Object.assign"
Object.assign({}, food)

// "JSON"
JSON.parse(JSON.stringify(food))

// RESULT:
// { beef: '🥩', bacon: '🥓' }