teleren/devto huggingface dataset:
Is Angular losing popularity?
Tags: angular, react, javascript, typescript
Published: 2023-06-17 03:49:37

Angular is not necessarily losing popularity, but rather experiencing fluctuations in terms of developer interest and adoption. The perception of a technology's popularity can vary based on various factors, including the rise of competing frameworks, changes in development trends, and the preferences of developers and organizations.

Here are a few reasons why some developers may perceive Angular to be losing popularity:

1. Competition from Other Frameworks: Over the years, new JavaScript frameworks and libraries have emerged, such as React and Vue.js, which have gained significant popularity. This has led to increased competition among frameworks, and developers may choose alternatives based on their specific needs or personal preferences.

2. Learning Curve: Angular has a steep learning curve compared to some other frameworks, especially for developers who are new to TypeScript and the Angular ecosystem. This can discourage some developers from adopting Angular and opting for frameworks that are perceived as more beginner-friendly.

3. Size and Complexity: Angular is a full-featured framework that comes with a lot of built-in functionality. This can make it seem heavyweight and complex for smaller projects or simple use cases. Some developers prefer lightweight solutions that allow for more flexibility and customization.

4. Industry Trends: Development trends can shift over time, and the popularity of certain frameworks may rise and fall based on these trends. For example, the rise of serverless architecture, microservices, and the increasing focus on front-end performance might influence the choice of frameworks or libraries used in projects.

5. Developer Preferences: Ultimately, developers have their own preferences and may choose a framework based on their familiarity, comfort, and past experience. Some developers may naturally gravitate towards frameworks they find more enjoyable or efficient to work with.

It's important to note that Angular still has a large and active community, and many organizations continue to use and invest in Angular for their web and mobile development projects. Angular offers a robust ecosystem, strong tooling support, and a mature framework that can handle complex applications effectively.

The popularity of a framework is subjective and can fluctuate over time. It's essential to evaluate frameworks based on your project requirements, team expertise, and long-term goals to make an informed decision.
Why and When to Choose Angular
Tags: angular, typescript, javascript, programming
Published: 2023-06-17 03:48:05

You should consider choosing Angular when your project aligns with the following characteristics and requirements:

1. Large-scale Application: Angular is particularly well-suited for building large-scale applications with complex requirements. Its opinionated structure and architecture provide a solid foundation for managing the complexity of such applications.

2. Full-Featured Framework: Angular is a comprehensive framework that offers a wide range of built-in features and tools out-of-the-box. It includes features like routing, form handling, data binding, dependency injection, and more. If you need a complete solution that covers various aspects of application development, Angular can be a good choice.

3. Enterprise-Level Support: Angular is developed and maintained by Google, which provides a high level of stability, support, and ongoing updates. If you're working on an enterprise-level project that requires long-term support, Angular's backing by a major company can be advantageous.

4. TypeScript Integration: Angular is built with TypeScript, a statically-typed superset of JavaScript. If you prefer static typing, object-oriented programming, and compile-time error checking, Angular's tight integration with TypeScript can provide enhanced development experience, code maintainability, and better tooling support.

5. Scalability and Performance: Angular's architecture, including features like lazy loading, ahead-of-time (AOT) compilation, and tree shaking, contributes to the scalability and performance of applications. It enables efficient code organization, optimizes the bundle size, and offers mechanisms for handling large datasets and rendering dynamic content.

6. Mobile and Desktop Development: With the help of frameworks like Ionic or NativeScript, Angular can be used to develop cross-platform mobile applications or even desktop applications. If you're looking for a framework that supports multi-platform development, Angular can provide the necessary tools and integrations.

7. Robust Community and Ecosystem: Angular has a large and active community, which means you can find extensive resources, tutorials, and support. Additionally, Angular has a mature ecosystem with a wide range of libraries, plugins, and tools available for various needs.

Remember, the choice of a framework should always consider your project's specific requirements, your team's expertise, and long-term goals. Evaluate Angular based on factors like project complexity, scalability, team preferences, and the need for an extensive ecosystem and community support.
Intro
Published: 2023-06-17 03:45:10

Hello, world!

I'm Kelly, a passionate full-stack software developer since 2009. My love for technology ignited in my early teenage years, marking me as a true tech enthusiast.

Over the past 13 years, I've witnessed the evolution of numerous technologies. With this experience, I can discern what is beneficial, sustainable, and worth adopting.

I am the founder and CEO of Bloomnet Digital Technologies Limited and have been involved in founding and co-founding various startups and tech innovations. Additionally, I have built a professional career in the Fast-Moving Consumer Goods (FMCG) industry as a Business Intelligence Analyst, working with over three major multinational companies in Nigeria.

Though I've always wanted to write about technology, procrastination often held me back. Today, I've decided to break that cycle and start sharing my knowledge and insights. Someone out there might benefit from what I have to offer.

Through this platform, I aim to express my thoughts on technology, share my experiences, and provide helpful code snippets for learners.

I look forward to an exciting journey in technical writing here on dev.to.

Join me, learn with me, and remember, I'll be doing things my way.

Cheers,
Kelly
What is the UseEffect Hook and How to use it properly
Published: 2023-06-17 01:59:24

In React, the useEffect hook has become a powerful tool that allows developers to perform side effects in functional components. useEffect is usefull in many scenarios whether you need to make a call to an API, subscribe to events, or clean up resources, useEffect provides a clean and concise way to handle these events.  this post is aimed to explain what the useEffect hook is and how to use it effectively in your React apps.

Understanding useEffect:
The useEffect hook is a built-in function in React that allows you to perform side effects after rendering a component. Side effects include things like data fetching, subscriptions, or manually changing the DOM. useEffect is called after every render by default, but you can control when useEffect is called using dependencies.

Using useEffect:
To start using the useEffect hook, you first need to import it from the 'react' library:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4ugkxv7k0vme21o8pr5.png)



The basic syntax of the useEffect hook looks like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/023c17bx5z2a38iyz4hj.png)



The first argument to useEffect is the function that will be executed as a side effect. The optional second argument, 'dependencies,' is an array of values. If any of the values in the dependency array change, the effect will re-run. If you want the effect to run only once, pass an empty dependency array.

Example 1: Fetching data with useEffect

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4e688nhisnfcgpy1zuc.png)



In this example, we use the useEffect hook to fetch data from an API. The effect is triggered only once when the component mounts (empty dependency array). It sets the fetched data to the 'data' state using the 'setData' function.

Example 2: Subscribing to events with useEffect


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62y4d5tf5mkvpgwhioem.png)




In this example, the useEffect hook is used to subscribe to the scroll event. The effect runs once when the component mounts, adds an event listener for scroll events, and removes it when the component unmounts (cleanup code).

Conclusion:
The useEffect hook is a fundamental tool in React for handling side effects. By understanding this hook and using the provided examples, you can leverage this hooks fuctionality to fetch data, subscribe to events, and perform other necessary operations in your functional components. Remember to use the dependency array wisely to control when the useEffect hook should run. With useEffect, you can write cleaner, more concise code in your React applications.
Add Facebook Pixel Event Tracking in NextJS App Directory
Tags: nextjs, facebook, react, facebookpixel
Published: 2023-06-17 03:31:38

Facebook Pixel is a powerful tool that allows you to track and optimize conversions from Facebook ads, build custom audiences, and measure the effectiveness of your marketing campaigns. 

And this how to itegrate facebook pixel with easy with [react-facebook-pixel](https://www.npmjs.com/package/react-facebook-pixel)

Create component in directory component (for example) 
`src/components/pixel-events.tsx`

```tsx
"use client";
import React, { useEffect } from "react";
import { usePathname, useSearchParams } from "next/navigation";

export const FacebookPixelEvents: React.FC = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    import("react-facebook-pixel")
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init("FACEBOOK_PIXEL_ID"); //don't forget to change this
        ReactPixel.pageView();
      });
  }, [pathname, searchParams]);

  return null;
};

```

And then can be imported into a layout.
```tsx
import { Suspense } from 'react'
import { FacebookPixelEvents } from '../components/pixel-events'
 
export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
 
        <Suspense fallback={null}>
          <FacebookPixelEvents />
        </Suspense>
      </body>
    </html>
  )
}
```
BOOST CODING BY 3x
Tags: webdev, javascript, python, devops
Published: 2023-06-17 03:30:00

🚀 Boost Your Developer Productivity 4x with These 3 Must-Use AI Tools! 🚀

**DON'T WANNA READ THE LONG POST?**
[FIND THE LINK TO ALL AI](https://www.aiforme.wiki/?category=Code%20explanations)
Calling all developers! Are you ready to level up your coding game and unleash your full potential? Look no further because I've got three game-changing AI tools that will revolutionize the way you work! Get ready for some serious productivity gains! ✅

1️⃣ [AI Code Mentor](https://www.aiforme.wiki/ai/tools/AI%20Code%20Mentor): 💡 Simplify your coding journey with AI Code Mentor! This tool provides personalized learning experiences and advanced machine learning algorithms to help you understand complex code. Say goodbye to confusion and hello to efficient learning. Connect with @AICodeMentor for an enlightening coding experience!

2️⃣ [ExplainDev](https://www.aiforme.wiki/ai/tools/ExplainDev):
 🧠 Unlock the power of understanding with ExplainDev! This AI-powered tool explains code in plain language, offers guidance for skill improvement, and provides contextual answers to technical questions. It's like having a knowledgeable mentor by your side. Follow @ExplainDev for coding enlightenment!

3️⃣ [Whatdoesthiscodedo](https://www.aiforme.wiki/ai/tools/Whatdoesthiscodedo): 
❓ Curious about what that code snippet does? Whatdoesthiscodedo, powered by GPT4, has got your back! This VS Code extension explains any code you provide and offers additional explanations from its library. Use it as an aid to unravel code mysteries. Check it out and evaluate the results for compatibility and accuracy!

Don't settle for average when you can achieve greatness! These AI tools will turbocharge your development process and supercharge your productivity. So, click the link in the comments to discover more about these amazing tools!

**Get ready to code like a rockstar! 💻💪**

[FIND THE LINK TO ALL THE TOOLS](https://www.aiforme.wiki/?category=Code%20explanations)🌐💻 

#AIToolsForDevelopers #SuperchargeProductivity
Upload Multiple Files to S3 using Terraform
Tags: aws, terraform, infrastructureascode, s3
Published: 2023-06-17 02:51:53

## Introduction
Whether to make a static website or just backing up files, we often need sending files to s3 buckets. The simplest way is to run `s3 cp` or `s3 sync` commands, but integrating these commands in CI/CD causes a problem, they will always run and even if there is no change, the files will be updated which can take a lot of time depending on file size. 
As terraform is stateful, we can just use terraform aws resources to provision files to s3 bucket. I will show you three ways you can achieve this, and also tell which works better for which situation. 
Let's get started.

## Method1: Provision Files using s3 cp / s3 sync
We can use a terraform null resource to run `s3 cp` or `s3 sync` command like this - 
```
resource "null_resource" "update_source_files" {
    provisioner "local-exec" {
        command     = "aws s3 sync app/ s3://my-s3-bucket" 
    }
}
```
Bu there is a problem, this alone can't detect if a file content is changed. Thus it will not update files after the first apply.

## Method2: Provision file using template_files module
Alternatively you can use this module to provision files -
```
module "template_files" {
    source                  = "hashicorp/dir/template"
    base_dir                = "app"
}

resource "aws_s3_object" "objects" {
    for_each                = "${module.template_files.files}"
    bucket                  = "s3://my-s3-bucket"
    key                     = each.key
    content_type            = each.value.content_type
    source                  = each.value.source_path
    content                 = each.value.content
    etag                    = each.value.digests.md5
}
```

This works like a charm. But there's a problem. It takes a lot of times to plan and apply. The module traverses each files. For one of our frontends, we had around 1500 files and it took 20 minutes to plan apply in CICD. 
If time is not a deal breaker to you then you can use this. 

## Method3: Provision files using s3_bucket_object
Finally, this is another way - 
```
resource "aws_s3_bucket_object" "provision_source_files" {
    bucket  = "s3://my-s3-bucket"
    for_each = fileset("app/", "**/*.*")

    key    = each.value
    source = "app/${each.value}"
}
```
> fileset("app/", "**/*.*") means to take every files in the app directory.

This works just like method2. But it's way faster. from 19 minutes it took only 6 minutes in whole. 

## Conclusion: Best method?
If you are using your cli, you can use the first method. I often use this as an on the go solution. But with `null resource` it becomes useless unless somehow file change is tracked. The second method is time consuming. So I would suggest the 3rd method. 
But hey, no solution is perfect for everyone. That's why we have multiple solutions for a problem (every problems). So just try and find what suits better for your problem. 

Best wishes.
Create s3 Bucket with Terraform
Tags: aws, terraform, s3, infrastructureascode
Published: 2023-06-17 01:49:09

## Introduction
Welcome to the world of Infrastructure as Code. In this tutorial we will learn how to create an s3 bucket with terraform following just 3 Steps (2 actually)! 

## Step1: Setup AWS cli (ignore if already installed)
Whether it's your local machine or CI/CD platform, you will need to setup AWS-CLI there. 
1. Install -
Assuming you have python installed you can just run this command on your terminal/cmd -
```
pip install awscli
``` 
Or `pip3` if you have multiple python version installed.

Else you can just follow [official aws cli installation doc.](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)

2. Configure CLI
Run this command on terminal -
```
aws configure
```
And paste your access key, secrete access key and region and default output format as prompted -
```
AWS Access Key ID: MYACCESSKEY
AWS Secret Access Key: MYSECRETKEY
Default region name [us-west-2]: my-aws-region
Default output format [None]: json
```

That's it. Now you can start running terraform code and start making magics.

## Step2: Create s3 bucket
This is the simplest way to create an s3 bucket with terraform - 
```
# declare cloud provider first
provider "aws" {
    region      = "your-aws-region"
}

# to interact with aws resources
terraform {
    required_providers {
      aws = {
        source  = "hashicorp/aws"
        version = "~> 4.30"
      }
    }
}

# create s3 bucket named my-lovely-bucket
resource "aws_s3_bucket" "demos3" {
    bucket = "my-lovely-bucket"   
}
```

You can download the code from [here](https://github.com/ashraf-minhaj/AWS-IaCs-with-Terraform/tree/main/1001.%20Create%20S3%20Bucket%20with%20TF/Terraform).

## Step3: Apply
That's it. Now go inside the terraform directory, start a terminal in that folder and run -
```terraform init```
It will download necessary things along with a '.tstate' file. After than you can just apply. But it's good practice to see the possible changes first using plan then apply. So, run - 
``` 
terraform plan 
```
It will output possible changes list, make sure you go through and if you are ok just run - 
```
terraform apply
```

That's it!! Your changes (creating a bucket) will be applied on aws! Go to aws console and check it for yourself. 

> Remember: While learning, to avoid unexpected bill please destroy resources after playing around.

To Destroy 
``` terraform destroy ```

## Conclusion
I hope you had fun. Best wishes for your cloudy journey ahead!
Flow of the request created when you type https://www.google.com in your browser and press Enter.
Tags: programming, dns, webdev, security
Published: 2023-06-17 01:35:35



![Flow of request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9u0vyk993c2419vth8l.png)



When you access any page through the browser, processes are undertaken to arrive at the final content you see on your screen.

Here's an outline illustrating the flow of the request created when you type "https://www.google.com" in your browser and press Enter:

**1**. Browser sends a request to the DNS (Domain Name System) resolver to resolve the domain name "www.google.com" into an IP address.
**2**. DNS resolver responds with the IP address of the Google server.
**3**. Browser initiates an encrypted connection (HTTPS) with the server IP address on port 443.
**4**. The encrypted request passes through firewalls, which monitor and filter network traffic.
**5**. The request reaches a load balancer (e,g lb-01), which acts as an intermediary between the browser and the web servers.
**6**. The load balancer forwards the request to an appropriate web server (e.g web-01) within the Google infrastructure.
**7**. The selected web server receives the request and processes it.
**8**. The web server generates an HTML response, which could be a pre-existing web page or dynamically generated content.
**9**. If required, the web server communicates with an application server or backend services to fetch additional data or perform specific tasks.
**10**. The application server interacts with the database to retrieve the necessary information.
**11**. The application server sends the retrieved data back to the web server.
**12**. The web server combines the data with the HTML template to generate a complete web page.
**13**. The web server responds to the browser with the requested web page.
**14**. The browser receives the response and renders the web page for the user to view.

In this flow, the request starts from the browser, goes through DNS resolution, traffic encryption, firewall, load balancer, web server, application server, and database, and finally, the response is sent back through the same path to reach the browser for rendering.

Please note that this is a simplified overview, and the actual infrastructure and processes involved may vary depending on the specific implementation and configuration of the Google infrastructure.
Advanced Authentication in Node.js with Auth0
Tags: auth0, node
Published: 2023-06-16 22:52:55

Introduction:

Node.js provides an ideal environment to create server-side applications, with the possibility to employ different authentication strategies. One of the powerful tools you can use is Auth0, a flexible, drop-in solution to add authentication and authorization services to your applications. This blog will explore advanced usage of Auth0 with Node.js.

Prerequisites:
1. Basic knowledge of Node.js and Express.js
2. Familiarity with Auth0
3. An Auth0 account

Creating a Node.js Application:

Create a new directory for your application and initialize it with a package.json file. This can be done by running the following commands:
```bash
mkdir myAuthApp && cd myAuthApp
npm init -y
```

Setting Up Auth0:

Sign up or log into your Auth0 account. Create a new 'Regular Web Application' and note down your 'Domain', 'Client ID', and 'Client Secret'. These values will be used later.

Implementing Auth0 in Node.js:

Install necessary packages by running: `npm install express dotenv passport passport-auth0 express-session`.

Create a .env file and add the following lines, replacing the placeholders with the credentials from Auth0.
```bash
AUTH0_CLIENT_ID=YOUR_CLIENT_ID
AUTH0_DOMAIN=YOUR_DOMAIN
AUTH0_CLIENT_SECRET=YOUR_CLIENT_SECRET
AUTH0_CALLBACK_URL=http://localhost:3000/callback
SESSION_SECRET=YOUR_RANDOM_VALUE
```

Configuring Passport:

Passport is the authentication middleware for Node.js. Passport-Auth0 strategy is employed for the Auth0 implementation. Set up passport with Auth0 strategy like this:
```javascript
const passport = require('passport');
const Auth0Strategy = require('passport-auth0');

let strategy = new Auth0Strategy(
  {
    domain: process.env.AUTH0_DOMAIN,
    clientID: process.env.AUTH0_CLIENT_ID,
    clientSecret: process.env.AUTH0_CLIENT_SECRET,
    callbackURL: process.env.AUTH0_CALLBACK_URL || 'http://localhost:3000/callback'
  },
  function(accessToken, refreshToken, extraParams, profile, done) {
    return done(null, profile);
  }
);

passport.use(strategy);

passport.serializeUser(function(user, done) {
  done(null, user);
});

passport.deserializeUser(function(user, done) {
  done(null, user);
});
```

Securing Routes:

To secure routes, you can use the 'ensureLoggedIn' middleware from 'connect-ensure-login' package. It will redirect unauthenticated users to the login page.
```javascript
const ensureLoggedIn = require('connect-ensure-login').ensureLoggedIn();
app.get('/user', ensureLoggedIn, (req, res) => {
    res.send(req.user);
});
```

Conclusion:

Auth0 offers a robust, highly customizable authentication and authorization service. It's easy to integrate with a Node.js application and can take a lot of the work off your shoulders when it comes to managing user authentication. The above guide gives a glimpse into the advanced application of Auth0. Always remember to keep your sensitive data secure and never expose your secrets in the client-side or public repositories.