Over 1 Lakh educators have successfully set up their online business through Classplus and over \n7 Million students across 1100+ Indian cities are using Classplus for interacting with their educators

Classplus

This paper is available on arxiv under CC 4.0 license.
Authors:
(1) Hatem A. Alharbi, CSchool of Electronic and Electrical Engineering, University of Leeds, LS2 9JT, United Kingdom;
(2) Taisir E.H. Elgorashi, School of Electronic and Electrical Engineering, University of Leeds, LS2 9JT, United Kingdom;
(3) Jaafar M.H. Elmirghani, School of Electronic and Electrical Engineering, University of Leeds, LS2 9JT, United Kingdom. Table of Links Abstract & Introduction Related Works Repealing Net Neutrality Profit-Driven Model Results Conclusions & References Biographies III. REPEALING NET NEUTRALITY In this paper, we consider the economic concept of PED to study the impact of ISP’s price change on the number of users accessing CPs content. In the following subsections, we present the pricing scheme used in this work, followed by the developed network and pricing MILP model. A. Pricing scheme: In economics, the relationship between users’ demand and price is referred to as price elasticity of demand (PED) [40]. PED measures the percentage change in demand resulting from a one percent change in price. To decide the pricing strategy of a product, the seller looks at different sensitivities to various factors that may affect their decision to purchase a product. The dominant factor in determining PED is the users’ ability and willingness at any given price. Many factors have an effect on users’ behavior, such as substitution availability, market competition, frequency of purchase, the necessity of the product, and how much the product price represents in users into income. The PED is calculated as follows: In telecommunications, it is not an easy task to estimate an exact value of PED for various Internet applications as the factors that affect the elasticity change from area to another e.g. wealth, popularity of an application, quality of service provided by ISPs/CPs or competition between different CPs. However, PED for broadband subscriptions in Organization for Economic Co-operation and Development (OECD) countries has been analyzed in [41] by studying the relationship between price, income and broadband adoption. Additional factors have been included in [42], which are age and education to study PED for broadband subscriptions in Latin America and the Caribbean countries. They found that 1% decrease in price would lead to 0.43% and 2.2% increase in demand, respectively, over the two selected areas. B. Profit-Driven MILP Model: We develop a profit-driven MILP model where the objective is to maximize the total profit of an ISP offering core network infrastructure to CPs to deliver content from distributed clouds and/or fog nodes to their users. We consider a monopolist ISP who owns the network backbone, i.e. CPs have to subscribe to the monopolist ISP to reach their customers. According to the FCC, 40% of total US Internet subscribers only have a single ISP option in their area [43]. The ISP has the power to control the pricing scheme. Under the net neutrality repeal, the ISP can deliver CPs content of different data rate requirements at a varying price per bit rate. We consider three classes to represent different data rate requirements of CPs services: • Class A for high data rate content (i.e. UHD video service). • Class B for medium data rate content (i.e. HD video service). • Class C for low data rate content (i.e. SD video service). The ISP needs to optimize the price of the three classes to maximize its profit. We consider content with higher data rate, which causes extra burden on the core network, to be priced higher per bit rate than content with a lower data rate. End-users will perceive varied video definitions from CPs based on their CP subscribed class. We assume that CPs will transfer the ISP new prices to their users to maintain their profit margin. Therefore, for the sake of simplicity we consider CPs to offer the same classes to their users. We assume a certain number of users to initially subscribe to each class under net neutrality. As the ISP and consequently the CPs vary the per bit rate charges for the different classes, users can choose to upgrade, downgrade or unsubscribe to the service. The number of users subscribing to each class depends on the PED. We assume that users leaving class A will join class B, users leaving class B will join class C and users leaving class C will unsubscribe to the service. The ISP needs to optimize the price of the three classes to maximize its profit. We consider content with higher data rate, which causes extra burden on the core network, to be priced higher per bit rate than content with lower data rate. End-users will perceive varied video definitions from CPs based on their CP subscribed class. We assume that CPs will transfer the ISP new prices to their users to maintain their profit margin. Therefore, for the sake of simplicity we consider CPs to offer the same classes to their users. We assume a certain number of users to initially subscribe to each class under net neutrality. As the ISP and consequently the CPs vary the per bit rate charges for the different classes, users can choose to upgrade, downgrade or unsubscribe to the service. The number of users subscribing to each class depends on the price elasticity of demand (PED). We assume that users leaving class A will join class B, users leaving class B will join class C and users leaving class C will unsubscribe to the service. Before introducing the model, we define the parameters and variables used in the model: Parameters: Variables: Total ISP’s cost and revenue of delivering CP contents are calculated as follows: Cost of provisioning core, metro and access networks infrastructure (C): Revenue of delivering networking services to CP users (R): The model is defined as follows: The objective: Maximize total profit given as: Equation (4) gives the total profit in US dollar. The total profit is maximized by maximizing the revenue and minimizing the cost of serving users in different classes. Subject to: Revenue of each class: Constraint (6) calculates the number of users located in node d of class i in solution s. The number of users in class A is the number of users subscribing to the class as a result of its PED (from a look up table). In the case of class B, the number of users available to class B includes all users subscribing to the class B as a result of its PED plus any users downgrading their subscription from class A to class B. In the case of class C, the number of users available to class C includes users subscribing to class C as a result of its PED plus any users downgrading their subscription from class B to class C. Constraint (7) gives the price of each class based on the solution selected from the lookup table. Constraint (8) ensures that only one solution is selected. Constraint (9) calculates the number of users of class i in node d. Constraint (10) calculates the revenue the ISP achieves by delivering a service class by multiplying the class price by the total traffic in each class. Constraints on number of users and prices: Constraint (11) defines the minimum user percentage the CP service needs to maintain. Constraint (12) ensures that the price of a lower class does not exceed the price of upper classes, i.e. the price of class C does not exceed the price of class B and the price of class B does not exceed the price of class A. Constraint (13) ensures that the ratio of users in different nodes is identical. Core network traffic: Constraint (14) ensures that nodes with a fog built in its proximity are not served by a cloud. Constraint (15) calculates the download traffic from CP cloud to users in different nodes. User demands can be used to decide on datacenter locations as follows: Constraint (18) represents the flow conservation for IP layer in the IP over WDM network. It ensures that the total incoming traffic equal the total outgoing traffic in all node; excluding the source and destination nodes. Virtual link capacity constraint: Constraint (18) ensures that the traffic transmitted through a virtual link does not exceed its maximum capacity. Flow conservation constraint in the optical layer: Constraint (20) represents the flow conservation for the optical layer. It ensures that the total number of incoming wavelengths in a virtual link is equal to the total number of outgoing wavelengths in all nodes excluding the source and destination nodes of the virtual link. Physical link capacity: Constraint (22) represents the physical link capacity limit. It ensures that the number of wavelengths in virtual links traversing a physical link does not exceed the maximum capacity of fibres in the physical link. Total number of aggregation ports in a core node: Constraint (22) calculates the total number of router ports in each core node that aggregate the traffic from/to the clouds. The mathematical model given above maximizes the total profit of an ISP. To calculate the core network power consumption achieved from the profit- driven model, following parameters and variables are introduced; Parameters: Under the non-bypass approach [44], the IP over WDM network power consumption is composed of: This paper is available on arxiv under CC 4.0 license. Authors: (1) Hatem A. Alharbi, CSchool of Electronic and Electrical Engineering, University of Leeds, LS2 9JT, United Kingdom; (2) Taisir E.H. Elgorashi, School of Electronic and Electrical Engineering, University of Leeds, LS2 9JT, United Kingdom; (3) Jaafar M.H. Elmirghani, School of Electronic and Electrical Engineering, University of Leeds, LS2 9JT, United Kingdom. This paper is available on arxiv under CC 4.0 license. available on arxiv Authors: Authors: (1) Hatem A. Alharbi, CSchool of Electronic and Electrical Engineering, University of Leeds, LS2 9JT, United Kingdom; (2) Taisir E.H. Elgorashi, School of Electronic and Electrical Engineering, University of Leeds, LS2 9JT, United Kingdom; (3) Jaafar M.H. Elmirghani, School of Electronic and Electrical Engineering, University of Leeds, LS2 9JT, United Kingdom. Table of Links Abstract & Introduction Abstract & Introduction Related Works Related Works Repealing Net Neutrality Repealing Net Neutrality Profit-Driven Model Results Profit-Driven Model Results Conclusions & References Conclusions & References Biographies Biographies III. REPEALING NET NEUTRALITY In this paper, we consider the economic concept of PED to study the impact of ISP’s price change on the number of users accessing CPs content. In the following subsections, we present the pricing scheme used in this work, followed by the developed network and pricing MILP model. A. Pricing scheme: In economics, the relationship between users’ demand and price is referred to as price elasticity of demand (PED) [40]. PED measures the percentage change in demand resulting from a one percent change in price. To decide the pricing strategy of a product, the seller looks at different sensitivities to various factors that may affect their decision to purchase a product. The dominant factor in determining PED is the users’ ability and willingness at any given price. Many factors have an effect on users’ behavior, such as substitution availability, market competition, frequency of purchase, the necessity of the product, and how much the product price represents in users into income. The PED is calculated as follows: In telecommunications, it is not an easy task to estimate an exact value of PED for various Internet applications as the factors that affect the elasticity change from area to another e.g. wealth, popularity of an application, quality of service provided by ISPs/CPs or competition between different CPs. However, PED for broadband subscriptions in Organization for Economic Co-operation and Development (OECD) countries has been analyzed in [41] by studying the relationship between price, income and broadband adoption. Additional factors have been included in [42], which are age and education to study PED for broadband subscriptions in Latin America and the Caribbean countries. They found that 1% decrease in price would lead to 0.43% and 2.2% increase in demand, respectively, over the two selected areas. B. Profit-Driven MILP Model: We develop a profit-driven MILP model where the objective is to maximize the total profit of an ISP offering core network infrastructure to CPs to deliver content from distributed clouds and/or fog nodes to their users. We consider a monopolist ISP who owns the network backbone, i.e. CPs have to subscribe to the monopolist ISP to reach their customers. According to the FCC, 40% of total US Internet subscribers only have a single ISP option in their area [43]. The ISP has the power to control the pricing scheme. Under the net neutrality repeal, the ISP can deliver CPs content of different data rate requirements at a varying price per bit rate. We consider three classes to represent different data rate requirements of CPs services: • Class A for high data rate content (i.e. UHD video service). • Class B for medium data rate content (i.e. HD video service). • Class C for low data rate content (i.e. SD video service). The ISP needs to optimize the price of the three classes to maximize its profit. We consider content with higher data rate, which causes extra burden on the core network, to be priced higher per bit rate than content with a lower data rate. End-users will perceive varied video definitions from CPs based on their CP subscribed class. We assume that CPs will transfer the ISP new prices to their users to maintain their profit margin. Therefore, for the sake of simplicity we consider CPs to offer the same classes to their users. We assume a certain number of users to initially subscribe to each class under net neutrality. As the ISP and consequently the CPs vary the per bit rate charges for the different classes, users can choose to upgrade, downgrade or unsubscribe to the service. The number of users subscribing to each class depends on the PED. We assume that users leaving class A will join class B, users leaving class B will join class C and users leaving class C will unsubscribe to the service. The ISP needs to optimize the price of the three classes to maximize its profit. We consider content with higher data rate, which causes extra burden on the core network, to be priced higher per bit rate than content with lower data rate. End-users will perceive varied video definitions from CPs based on their CP subscribed class. We assume that CPs will transfer the ISP new prices to their users to maintain their profit margin. Therefore, for the sake of simplicity we consider CPs to offer the same classes to their users. We assume a certain number of users to initially subscribe to each class under net neutrality. As the ISP and consequently the CPs vary the per bit rate charges for the different classes, users can choose to upgrade, downgrade or unsubscribe to the service. The number of users subscribing to each class depends on the price elasticity of demand (PED). We assume that users leaving class A will join class B, users leaving class B will join class C and users leaving class C will unsubscribe to the service. Before introducing the model, we define the parameters and variables used in the model: Parameters: Variables: Total ISP’s cost and revenue of delivering CP contents are calculated as follows: Cost of provisioning core, metro and access networks infrastructure ( C ): C Revenue of delivering networking services to CP users ( R ): R The model is defined as follows: The objective: Maximize total profit given as: Equation (4) gives the total profit in US dollar. The total profit is maximized by maximizing the revenue and minimizing the cost of serving users in different classes. Subject to: Revenue of each class: Constraint (6) calculates the number of users located in node d of class i in solution s . The number of users in class A is the number of users subscribing to the class as a result of its PED (from a look up table). In the case of class B, the number of users available to class B includes all users subscribing to the class B as a result of its PED plus any users downgrading their subscription from class A to class B. In the case of class C, the number of users available to class C includes users subscribing to class C as a result of its PED plus any users downgrading their subscription from class B to class C. Constraint (7) gives the price of each class based on the solution selected from the lookup table. Constraint (8) ensures that only one solution is selected. Constraint (9) calculates the number of users of class i in node d . Constraint (10) calculates the revenue the ISP achieves by delivering a service class by multiplying the class price by the total traffic in each class. d i s i d Constraints on number of users and prices: Constraint (11) defines the minimum user percentage the CP service needs to maintain. Constraint (12) ensures that the price of a lower class does not exceed the price of upper classes, i.e. the price of class C does not exceed the price of class B and the price of class B does not exceed the price of class A. Constraint (13) ensures that the ratio of users in different nodes is identical. Core network traffic: Constraint (14) ensures that nodes with a fog built in its proximity are not served by a cloud. Constraint (15) calculates the download traffic from CP cloud to users in different nodes. User demands can be used to decide on datacenter locations as follows: Constraint (18) represents the flow conservation for IP layer in the IP over WDM network. It ensures that the total incoming traffic equal the total outgoing traffic in all node; excluding the source and destination nodes. Virtual link capacity constraint: Constraint (18) ensures that the traffic transmitted through a virtual link does not exceed its maximum capacity. Flow conservation constraint in the optical layer: Constraint (20) represents the flow conservation for the optical layer. It ensures that the total number of incoming wavelengths in a virtual link is equal to the total number of outgoing wavelengths in all nodes excluding the source and destination nodes of the virtual link. Physical link capacity: Constraint (22) represents the physical link capacity limit. It ensures that the number of wavelengths in virtual links traversing a physical link does not exceed the maximum capacity of fibres in the physical link. Total number of aggregation ports in a core node: Constraint (22) calculates the total number of router ports in each core node that aggregate the traffic from/to the clouds. The mathematical model given above maximizes the total profit of an ISP. To calculate the core network power consumption achieved from the profit- driven model, following parameters and variables are introduced; Parameters: Under the non-bypass approach [44], the IP over WDM network power consumption is composed of:

Impact of the Net Neutrality Repeal on Communication Networks: Repealing Net Neutrality

There are countless articles on the web about unit tests: , beginner's guides, mocking frameworks, test coverage tools, and more. However, the vast majority of these articles are either too "Hello World"-like or focus more on tools, while missing the key point — how to write unit tests that are useful and deliver the most value? TDD approach In this article, I'll share some best practices, which I believe will get your unit tests to the next level. This will be an example-driven article as in my view, this is the best way to explain things in programming. We're going to start with a code example (a C# class plus a few unit tests for this class) and highlight some important points related to what we want to test and how we're going to do that. Then we'll review one of the many ways (my favorite one) to structure unit tests. Finally, I'll share a few awesome libraries that I use in all my test projects. Ready? Lets' get started🍿 Example 1 UserManager public class UserManager : IUserManager
{
    private readonly IUserRepository _userRepository;
    private readonly IUserGuard _userGuard;

    public UserManager(IUserRepository userRepository, IUserGuard userGuard)
    {
        _userRepository = userRepository;
        _userGuard = userGuard;
    }

    public async Task ChangeEmail(int userId, string newEmail, CancellationToken ct = default)
    {
        var user = await _repository.GetUser(userId, ct);

        _guard.UserExists(user);
        _guard.UserIsAllowedToChangeEmail(user!);
        _guard.EmailIsValid(newEmail);
        _guard.EmailIsNew(user!, newEmail);

        user!.Email = newEmail;
        await _repository.Save(user, ct);
    }
} Test strategy We want to verify that all calls are to happen in the correct order and, most importantly, come before . In other words, validation has to go before the data is saved to the database. IUserGuard _repository.Save Make sure we pass the correct parameters to all methods that we call here. Our method calls . ChangeEmail _repository.Save We will save the object with the new email address. user Tests public class UserManagerTests
{
    public class ChangeEmail : UserManagerTestsBase
    {
        [Theory]
        [AutoData]
        public async Task Should_change_email(int userId,
                                              string newEmail,
                                              User user,
                                              CancellationToken ct)
        {
            // arrange
            Repository.GetUser(userId, ct).Returns(user);

            // act
            await Manager.ChangeEmail(userId, newEmail, ct);

            // assert
            Received.InOrder(() =>
                             {
                                 Guard.Received(1).UserExists(user);
                                 Guard.Received(1).UserIsAllowedToChangeEmail(user);
                                 Guard.Received(1).EmailIsValid(newEmail);
                                 Guard.Received(1).EmailIsNew(user, newEmail);

                                 Repository.Received(1).Save(Arg.Is<User>(x => x == user &&
                                                                               x.Email == newEmail),
                                                             ct);
                             });
        }
    }

    public abstract class UserManagerTestsBase
    {
        protected readonly UserManager Manager;
        protected readonly IUserRepository Repository;
        protected readonly IUserGuard Guard;

        protected UserManagerTestsBase()
        {
            Repository = Substitute.For<IUserRepository>();
            Guard = Substitute.For<IUserGuard>();
            Manager = new UserManager(Repository, Guard);
        }
    }
} Notes Instead of hardcoding test data, we generated random values using ( library). [AutoData] AutoFixture.Xunit2 To validate the order of method calls, we used ( — the best mocking library for .NET). Received.InOrder(...) NSubstitute We used in order to make sure we changed the email address before saving this object to the database. Arg.Is<User>(x => x.Email == newEmail) user Now we're going to add one more method to the class and unit test it. UserManager Example 2 public class UserManager : IUserManager
{
    private readonly IUserRepository _repository;
    private readonly IUserGuard _guard;

    public UserManager(IUserRepository repository, IUserGuard guard)
    {
        _repository = repository;
        _guard = guard;
    }

    // public async Task ChangeEmail(int userId, string newEmail, CancellationToken ct = default)
    // {...}

    public async Task ChangePassword(int userId, string newPassword, CancellationToken ct = default)
    {
        var user = await _repository.GetUser(userId, ct);

        if (user == null)
        {
            throw new ApplicationException($"User {userId} not found");
        }

        user.Password = newPassword;
        await _repository.Save(user, ct);
    }
} Test strategy This method has a statement, so we want to make sure that the correct branch of code runs depending on the condition in the statement. if if Instead of ignoring the exception, we want to validate the type of thrown exception along with its message. Same as in the previous example, we want to verify that we passed the object with an updated password to the method. user _repository.Save If an exception is thrown, then the the method must not get called. _repository.Save Tests public class UserManagerTests
{
    // public class ChangeEmail : UserManagerTestsBase
    // {...}

    public class ChangePassword : UserManagerTestsBase
    {
        [Theory, AutoData]
        public async Task Should_throw_ApplicationException_when_user_not_found(int userId,
                                                                                string newPassword,
                                                                                CancellationToken ct)
        {
            // act
            var action = () => Manager.ChangePassword(userId, newPassword, ct);

            // assert
            await action.Should()
                        .ThrowAsync<ApplicationException>()
                        .WithMessage($"User {userId} not found");

            await Repository.DidNotReceiveWithAnyArgs().Save(Arg.Any<User>(), Arg.Any<CancellationToken>());
        }

        [Theory, AutoData]
        public async Task Should_change_password_and_save(int userId,
                                                          string newPassword,
                                                          User user,
                                                          CancellationToken ct)
        {
            // arrange
            Repository.GetUser(userId, ct).Returns(user);

            // act
            await Manager.ChangePassword(userId, newPassword, ct);

            // assert
            await Repository.Received(1).Save(Arg.Is<User>(x => x == user &&
                                                                x.Password == newPassword),
                                              ct);
        }
    }

    public abstract class UserManagerTestsBase
    {
        protected readonly UserManager Manager;
        protected readonly IUserRepository Repository;
        protected readonly IUserGuard Guard;

        protected UserManagerTestsBase()
        {
            Repository = Substitute.For<IUserRepository>();
            Guard = Substitute.For<IUserGuard>();
            Manager = new UserManager(Repository, Guard);
        }
    }
} Notes For the the method we have two tests: the first test to validate that an exception gets thrown when a user is not found, and the second one to check that we are making a call to . ChangePassword _repository.Save Note how we test exceptions: instead of try-catch we create a delegate to the test method and then do . action.Should().ThrowAsync<ApplicationException>() Our tests are done now, let's take a look at the unit test coverage in order to make sure we don't miss anything and there is no untested code left. Test Structure To a large extent, the layout of a test project is a matter of taste. Here is what I prefer to do. For classes with more than one method (managers, services, etc) the structure of the related class with unit tests would be as follows: public class MyClassTests
{
    public class Method1 : MyClassTestsBase
    {
        [Theory]
        [AutoData]
        public async Task Should_return_A_when_X(parameters)
        {
            // arrange
            // ...

            // act
            // ...

            // assert
            // ...
        }

        [Theory]
        [AutoData]
        public async Task Should_throw_B_when_Y(parameters)
        {
            // arrange
            // ...

            // act
            // ...

            // assert
            // ...
        }
    }

    public class Method2 : MyClassTestsBase
    {
        [Fact]
        public async Task Should_return_A_when_X()
        {
            // arrange

            // act

            // assert
        }

        [Fact]
        public async Task Should_throw_B_when_Y()
        {
            // arrange

            // act

            // assert
        }
    }

    public abstract class MyClassTestsBase
    {
        protected readonly MyClass Instance;
        protected readonly IDependency1 Dependency1;
        protected readonly IDependency2 Dependency2;

        protected UserManagerTestsBase()
        {
            Dependency1 = Substitute.For<IDependency1>();
            Dependency2 = Substitute.For<IDependency2>();
            Instance = new MyClass(IDependency1, IDependency2);
        }
    }
} This is what it looks like for the test runner: Unit test structure for classes with a single method (message handlers, factories etc): public class MyHandlerTests
{
    private readonly MyHandler _handler;

    public MyHandlerTests()
    {
        _handler = new MyHandler();
    }

    [Fact]
    public void Should_do_A_when_X()
    {
        // arrange

        // act

        // assert
    }
} Alright, so we have an understanding of the key concepts of unit testing and learned the best way to structure our tests. Now let's check out a few brilliant libraries which, I'm absolutely sure, you'll love. Libraries and frameworks xUnit It’s usually a choice between xUnit, nUnit, and MSTest, and my personal preference goes for the former. A while ago when Microsoft started using xUnit in its projects, this framework became a default option. + Autofixture Cheat Sheet Instead of using hard-coded values for tests, Autofixture can generate random data for us. var fixture = new Fixture();
var firstName = fixture.Create<string>();
var numOfUsers = fixture.Create<int>();
var employees = fixture.CreateMany<Employee>(); nuget for attribute (the one we used in our examples). Autofixture.Xunit2 [AutoData] NSubstitute There are a few mocking libraries out there, but I find this one the most explicit, natural, and clean. A small bonus: — Roslyn analyzers to detect (during compilation) possible errors using NSubstitute. NSubstitute.Analyzers FluentAssertions Fantastic assertion framework with very detailed and well-structured . documentation A couple of examples taken from their docs: string actual = "ABCDEFGHI";
actual.Should().StartWith("AB").And.EndWith("HI").And.Contain("EF").And.HaveLength(9);

IEnumerable<int> numbers = new[] { 1, 2, 3 };

numbers.Should().OnlyContain(n => n > 0);
numbers.Should().HaveCount(4, "because we thought we put four items in the collection"); Isn't it beautiful? Stryker.NET Stryker offers mutation testing for your .NET Core and .NET Framework projects. It allows you to test your tests by temporarily inserting bugs in your source code. It's a very interesting tool that modifies the source code and expects tests to fail. If they don't, it complains about incomplete unit tests or poor test coverage. Summary We've analyzed two simple, yet important code examples that cover the most popular scenarios for unit testing. Learned one of the ways to structure and group tests, and make a list of essential libraries that will make your tests clean, explicit, and more effective. Cheers!

Best Practices to Write Unit Tests the Right Way

In Machine Learning, the problem of classification involves predicting the categorical class label to which the query data point belongs. And the confusion matrix is a of the . tabular representation classification model’s performance This tutorial will help you understand the confusion matrix and the various metrics that you can calculate from the confusion matrix. We’ll start by explaining what classification is, the types of classification problems, and how to interpret the confusion matrix for a binary classification problem. Let's get started. Table of Contents What is Classification? Types of Classification 2.1. Binary Classification 2.2.  Multiclass Classification General Structure of the Confusion Matrix How to Calculate Evaluation Metrics from Confusion Matrix 4.1. Accuracy 4.2 Recall 4.3 Precision High Precision vs High Recall - When to Choose What? Generating the Confusion Matrix in scikit-learn Generating the Classification Report in scikit-learn What is Classification? In essence, classification algorithms aim at answering the question: “Given points, what’s the class label of a previously test, or query data point?” labeled training data unseen A classification problem could be as simple as classifying a given image as that of a cat or a dog. Or it could be as complex as examining brain scans to detect the presence or absence of tumors. Types of Classification Binary Classification In this tutorial, we’ll focus on the binary classification problem.  In binary classification, the class labels and are used. 1 0 Suppose you’re given a large dataset of student loans containing features such as the name of the university, tuition and employment details. You’d like to predict whether or not a new student with a specific tuition fee and employment status will default on the student loan. Notice how you’re trying to answer the question “Will the student default on the loan?”—and the answer is either a ‘ ’ or a  ‘ ’. Yes No You might as well think of other examples, say, identifying spam emails - the answers in this case are ‘ ’ or ‘ ’. Spam Not Spam In these examples, the answers ‘Yes’, ‘Spam’ indicate relevant classes, and in practice are encoded as class , and 1 the answers ‘No’ and ‘Not Spam’ are encoded as class . 0 Using disease diagnosis as another example, if the problem is to detect the presence of a disease: label indicates that the patient has the disease; and label indicates the absence of the disease. 1 0 This classification problem where the data points belong to one of the two classes is called . And we’ll build on binary classification in this tutorial. binary classification Multiclass Classification You can also have classification problems where you have more than two classes, called multiclass classification. For instance, classifying an email as ‘ ’ or ‘ ’ is a binary classification problem, whereas, categorizing emails as ‘ ’, ‘ ’ or ‘ ’ is a multiclass classification problem. Spam Not Spam School Work Personal Now that you’ve gained an understanding of the types of classification, let’s proceed to understand the confusion matrix. General Structure of the Confusion Matrix The general structure of the confusion matrix for binary classification is shown below: Let’s now define a few terms: When the actual label is 1, and the classifier also predicted the label to be 1 True Positive (TP): When the actual label is 0, but the classifier falsely predicted it to be 1 False Positive (FP): When the actual label is 0, and classifier also predicted as 0 True Negative (TN): When the actual label is 1, but the classifier predicted the label to be 0 False Negative (FN): Let’s now head over to the next section to understand the evaluation metrics for classification. You’ll learn them by asking questions and following up with answers—and the answers explain what the metric signifies. How to Calculate Evaluation Metrics from Confusion Matrix Accuracy Accuracy answers the question: “How often is the model correct?” The number of times the classifier predicted class , plus the number of times it predicted class . correctly 1 correctly 0 Now, look up from the matrix above, it’s the count of And the total number of predictions is the sum of counts in all 4 quadrants. True Positive (TP) + True Negative (TN). This this leads to the formula for accuracy as given below: Accuracy = TP + TN/ (Total Predictions) where, Total Predictions = TP + TN + FP + FN At the outset accuracy may seem like a good metric for evaluation. However, it is not a reliable metric when you have an imbalance in the class labels. Suppose you’re designing a model to predict if a person has a particular medical condition that is rare—say, it affects only 0.5% of the population. So in a population of 1000 people, about 5 people will likely have the disease. You clearly have a class imbalance in this case! The majority class is class indicating that the person doesn’t have that particular medical condition. 0 In this case, a naïve model that predicts the majority class all the time will be 99.5% accurate. However, such a model clearly isn't very helpful. Can you see why this is the case? The confusion matrix for this example will look like this: You’re making 1000 predictions. And for all of them, the predicted label is class 0. And 995 of them are actually correct (True Negatives!) And 5 of them are wrong. The accuracy score still works out to 995/1000 = 0.995 To sum up, distort accuracy scores. And the model is projected to perform better than what is truly warranted. imbalanced class labels Examples include problems like: Credit card transactions that are potentially fraudulent A medical condition that affects a very small fraction of the total population If the percentage of the minority class is , a model that predicts the majority class all the time will have an accuracy score of . p% 1 - p As you might have guessed by now, the error rate is . 1-accuracy score Instead of saying “ ”, if you’d like to say , then you’re talking error rates! My model is correct 98% of the time “My model is wrong 2% of the time” So it’s now time to learn about other metrics that are more useful in measuring a model’s performance. Recall Recall answers the question: “When it is a , how often is the model correct? Or, What of the does the model ?” actually positive case fraction positive labels predict correctly In essence, it’s the number of relevant cases that have been found by the model. Now, go back to the confusion matrix and look up the row to identify which predictions correspond to an actually positive label—that is, class . Actual 1 As you can see, it’s the TP + FN count. And the number of times the model got it right is equal to the TP count. So here’s our formula for recall: Recall = TP/ (TP + FN) Our previous model for disease detection did not identify any positive cases—so the TP count = 0. And that leaves us with a recall score of 0. So the model has a recall score of 0 even though its accuracy score is 0.995. Precision Precision answers the following question: “When the is , how often is it ?” prediction positive correct Once again, go back to the confusion matrix and look up under the column to identify which predictions correspond to a predicted positive label. And it’s the , as shown below: Predicted TP + FP count Here’s our formula for precision: Precision = TP/ (TP + FP) In practice, you’ll often hear people talk about the . Precision-Recall Trade-off This means you cannot maximize both precision and recall, and will have to choose one over the other—depending on the problem at hand. Let’s discuss that in the next section. High Precision vs High Recall - When to Choose What? For the problem that you’re solving, ask yourself the question: Which is worse - a False Positive (FP) or a False Negative (FN)? If you cannot have a False Negative (FN) – Maximize recall If you cannot have a False Positive (FP) – Maximize precision Let's revisit the previous examples of and disease detection . spam detection In which of the above cases would you prefer a ? higher recall Well, you probably guessed it right. It’s in the case of disease detection that you cannot afford to have a False Negative—therefore, you’ll need a high recall. Why?🤔 You would rather misclassify a patient as having the disease—which is a . And you’ll follow up with additional medical examination, and be extra cautious—rather than misclassify someone with the disease as healthy. In the worst case it could cost the person's life. False Positive(FP) 📧 Let us now look at the example of . Here, can be dangerous. spam detection False Positives(FP) Recall that in the problem of spam classification tagging an email as is said to be predicting a positive label. spam A spam or two in your inbox does not cost much but what if an email from a recruiter was misclassified as spam? And you never cared to look at it?😟 You’d lose a potential job opportunity. And here’s where you should . maximize precision Not detecting a spam email ( ) is not as impactful as predicting a recruiter’s email to be spam ( ). So remember to ask yourself the above questions, and choose accordingly. False Negative False Positive And that concludes our discussion. And it’s time to write some code.⏳ Generating the Confusion Matrix in scikit-learn Download the code used in this tutorial from . my GitHub repo Now, let’s see how you can generate the confusion matrix in scikit-learn. You’ll have ground truth labels . y_true And you’ll have the predicted labels . y_pred Here are the steps: Generate the arrays Generate the confusion matrix To know more about the implementation of confusion matrix in sklearn, read the docs . here Generating Classification Report in scikit-learn ▶️ Here’s how you can generate the classification report with metrics like accuracy, precision, recall, and F1-score in scikit-learn. To summarize In this tutorial, you’ve learned: What is classification and its types, The general structure of the confusion matrix, How to calculate various metrics from the confusion matrix, and When to choose precision over recall and vice-versa. Congratulations on making it this far!🎉 📌Related Posts If you liked this post, here are a few other posts you may enjoy reading: ▶️ Document-Term Matrix in NLP: Count and TF-IDF Scores Explained ▶️ Learn K-Means Clustering by Quantizing Color Images in Python ▶️ 9 Best Data Engineering Courses You Should Take in 2022 If you’re looking to get started with Machine Learning, I wish you the very best in your journey! Happy learning and coding.🎉

Confusion Matrix in Machine Learning: Everything You Need to Know

Both Payal Kadakia (founder, ClassPass) and Sara Blakely (founder, Spanx) made the news by successfully selling their companies with unicorn status. They represent a new age of female executives who aren't satisfied with the status quo. Instead, their mindset and ideas turned their businesses into unicorn companies and disrupted the industry. So what are the 5 common traits of Payal and Sara that drive their success? 1. They followed their calling "When it's the darkest time of your life, it is usually the most fertile time for a change." Payal is a life-long dancer. She was not content working at her corporate job. For fulfillment, she devoted most of her after-work hours and weekend dancing. But finding an online class was a challenge, even with 30+ open browsers. She cannot be the only person wanting to do ballet and cannot be the only person frustrated in the search. The first ideation of ClassPass was born. Sara was a door-to-door fax machine salesperson for seven years. She had experienced people who ripped off her business card or shut the door regularly, and that was when she came up with the idea for Spanx. She was not satisfied with the pantyhoses in the market because she could not find a body-shaping pantyhose to wear with her cream-colored pants and open-toed shoes. Frustrated and disappointed with existing products, she decided she was the woman to launch a product to solve the problem. Spanx was born. Both Payal and Sara identified opportunities from inconveniences they were experiencing in their lives.  They saw a problem that needed solving and had the courage to pursue their callings. Sara shares with us, "When it's the darkest time of your life, it is usually the most fertile time for a change." 2. They always remember their “why” A true why and a vision that will propel them forward and get people on board. Both Payal and Sara identified problems and could not find products to solve them, so they came up with their products. But that is not enough. The current ClassPass model has been iterated over a number of times from the original idea. She had launched a few different products, but none could fully solve the problem. Each time, she had to go back to her why and encourage her team to start over. They needed to pivot and refine the product with market feedback without losing sight of their mission. Eventually, the product showed promising signs of market adoption. For Sara, the path was challenging from the start. She could not convince hosiery mills to make this idea of a footless, pantyhose-shaper concept. Everyone hung up on her. It took her two years before a mill was able to share in her vision and agree to partner with her. Payal and Sara went back to their why to seek clarity when in doubt. A true why and a vision that will propel them forward and get people on board. 3. They don’t have a limited mindset "Failure is a data point, not an endpoint." Fear of failure limits our potential because it makes us unwilling to try new things.
Having the right mindset established the foundation of Payal and Sara's success. Sara's dad framed the no-limit mindset and encouraged her to embrace failures since she was a kid. Her dad reframed failure for her. Failure didn't become about the outcome; it became about not trying. Throughout the journey of creating ClassPass, Payal pushed through limits by testing new business models and expanding into new markets. In her book, "LifePass" Payal reframed failure as "Failure is a data point, not an endpoint." 4. They practice authenticity Sara was not afraid of showing her feminine leadership, empathy, vulnerability, and authenticity during her 21 years of building Spanx. Authenticity is a vital component to Sara's success and one she recommends other entrepreneurs maintain. Being genuinely authentic throughout the journey has served her well. Payal was trying to separate her corporate life from artistic dancing life because she was afraid that coworkers would look at her differently. But she decided to invite 200 people from her entire corporate office to her dance show one day. Afterward, she received validation and support from her office. It paved the journey of creating ClassPass. 5. They are resilient "Resilience is like a muscle. The more you gut through something and not let it get you down or defeat you, the stronger your resilience muscle becomes." What shows more about resilience than spending two years finding a mill to produce the product for Spanx and pivoting companies several times before the idea of ClassPass. Sara said, "Resilience is like a muscle. The more you gut through something and not let it get you down or defeat you, the stronger your resilience muscle becomes." During the pandemic in 2020, ClassPass quickly pivoted the business into a video at-home workout model to continue encouraging customers to work out at home and provide revenue to its studio clients. According to a by PitchBook, during the pandemic in 2020, venture capital funding in the U.S. grew by 16% overall, but it dropped 3% for companies founded by women while companies with female founders better. report performed 63% I hope that this article can foster more female entrepreneurship by looking into the common traits of successful female entrepreneurs. After all, we might just need courage and take the leap of faith to start our own business.

The Female Founders of Unicorn Companies ClassPass and Spanx Share These 5 Traits, Do You?

Hey everyone! I recently tackled the task of integrating Webflow OAuth into my app, and as someone who doesn't code, I wanted to share my approach using Xano as a backend and Webflow as a frontend. If you're a coding pro, please bear with me—no throwing rotten tomatoes! This is one no-coder to another, hoping to smoothen your journey a bit. TLDR: I've compiled every step into a video for those who prefer visual learning, but you'll find a detailed text version of the process below. https://youtu.be/bTUatl6eTec?embedable=true Understanding OAuth Let's quickly grasp the fundamental concept of how OAuth operates. Picture this: you're on holiday and want to rent an apartment in a foreign country. You find an apartment building where you can rent a unit. Upon arrival, instead of being given keys to all the flats, the owner sends you a one-time code to access your specific flat's key lockbox. You use this code to open the lockbox and retrieve a key card, granting you access to the apartment during your stay. In this analogy, Webflow represents the apartment owner, the one-time code serves as an access code, and the key card is analogous to an access token. If you need access to any information about a user's Webflow projects—such as lists of pages, assets, collections, or forms—you'll require an access token. This token is used with any API requests sent to Webflow on behalf of the user. In the example below, I'll demonstrate building a simple Webflow app that displays information about the user's project without storing the access token in my database (although in real-world scenarios, it's advisable to store tokens associated with users). Step 1: Create a New Webflow App Navigate to your Webflow dashboard's "Apps & Integrations" tab and create a new app. Provide general information about your app, including its name, description, and home page URL. Specify the required permissions—I'll use a data client app in my example, granting "Read" access to "Sites." You can adjust these permissions later if needed. The crucial pieces of information we need here are the and , automatically generated for your app. Leave the Redirect URL field blank for now; we'll revisit it in the next step. Client ID Client Secret Step 2: Setting Up a New Webflow Project as the Frontend Create a new Webflow project with two pages: Home and Sites. On the Home page, add a button labeled "Show Sites," which will trigger a request to Webflow for the access code. Set the button's URL to , replacing YOUR_CLIENT_ID with the actual Client ID obtained earlier. Adjust the URL if your app requires additional permissions. https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread Clicking this button will display a permissions screen to the user, allowing them to choose which projects to grant access to. Upon authorizing the app, they'll be redirected to the Redirect URL—remember to copy the URL of the Sites page (the second page you created) and paste it into the Redirect URL field of your app. Upon completing this step, clicking "Show Sites" will redirect users to the Sites page, with the access code included in the URL. Step 3: Setting Up a Xano Project and Creating the First API Create a new project in Xano, and navigate to the APIs tab. Add a new API Group, and then within that group, add a new API Endpoint—let's call it "getToken." In the "getToken" endpoint: Add a text input named "accessCode" to receive the access code from the frontend. Make a POST request to with body parameters: https://api.webflow.com/oauth/access_token client_id: Your Client ID client_secret: Your Client Secret grant_type: authorization_code code: accessCode (using the variable from the input) Define the output of the first API request as "accessToken," which will be the access token associated with the user. Make a second API request (for demonstration purposes) to retrieve the user's site list—a GET request to . Include the following headers: https://api.webflow.com/v2/sites accept: application/json authorization: accessToken.response.result.access_token Define the output of the second API as "siteList," which represents the list of Webflow projects. Return the "siteList" in the response. Copy the API endpoint URL for later use. Step 4: Configuring a Frontend Request From Your Webflow Project Return to the Webflow project and open the Sites page—the page where users are redirected after granting access to their Webflow projects. Here, add the following JavaScript functions in the custom code area before the </body> tag. First, let's create the function to retrieve the sites: getSites() function getSites() {
  const url = window.location.search;
  const params = new URLSearchParams(url);
  const accessCode = params.get('code');
  const options = {
    method: 'POST',
    headers: {accept: 'application/json', 'content-type': 'application/json'},
    body: JSON.stringify({accessCode: accessCode})
  };
  fetch('YOUR_API_ENDPOINT', options)
    .then(response => response.json())
    .then(response => {
      const siteList = response.response.result.sites;
      showSites(siteList);
    })
    .catch(err => console.log(err));
} Then, let's create the function to display the retrieved sites: showSites() function showSites(sites) {
  const container = document.querySelector('#result');
  sites.forEach(site => {
    const siteDiv = document.createElement('div');
    siteDiv.classList.add('site');
    const siteContent = 
      `<h2>${site.displayName}</h2>
       <p><strong>ID:</strong> ${site.id}</p>
       <p><strong>Workspace ID:</strong> ${site.workspaceId}</p>
       <p><strong>Short Name:</strong> ${site.shortName}</p>
       <p><strong>Time Zone:</strong> ${site.timeZone}</p>
       <p><strong>Created On:</strong> ${site.createdOn}</p>
       <p><strong>Last Updated:</strong> ${site.lastUpdated}</p>
       <p><strong>Last Published:</strong> ${site.lastPublished}</p>
       <img src="${site.previewUrl}" alt="Preview">
     `;
    siteDiv.innerHTML = siteContent;
    container.appendChild(siteDiv);
  });
} Lastly, ensure that the function runs on page load: getSites() document.addEventListener('DOMContentLoaded', function() {
  getSites();
}); And there you have it! I hope this guide proves helpful for my fellow no-coders! Feel free to reach out if you have any questions or need further clarification. Happy coding!

No-Code Webflow OAuth: Make Authenticated Requests to the Webflow API Using Xano

নো-কোড ওয়েবফ্লো OAuth: Xano ব্যবহার করে Webflow API-তে প্রমাণীকৃত অনুরোধ করুন

No-Code-Webflow-OAuth: Stellen Sie mit Xano authentifizierte Anfragen an die Webflow-API

Webflow OAuth sin código: realice solicitudes autenticadas a la API de Webflow utilizando Xano

No-Code Webflow OAuth : effectuez des requêtes authentifiées à l'API Webflow à l'aide de Xano

नो-कोड वेबफ़्लो OAuth: Xano का उपयोग करके वेबफ़्लो API के लिए प्रमाणित अनुरोध करें

ノーコード Webflow OAuth: Xano を使用して Webflow API への認証済みリクエストを行う

코드 없는 Webflow OAuth: Xano를 사용하여 Webflow API에 인증된 요청 만들기

No-Code Webflow OAuth: Faça solicitações autenticadas para a API Webflow usando Xano

OAuth Webflow без кода: выполнение аутентифицированных запросов к API Webflow с помощью Xano

Kodsuz Webflow OAuth: Xano Kullanarak Webflow API'sine Kimliği Doğrulanmış İstekler Yapın

OAuth luồng web không mã: Thực hiện các yêu cầu được xác thực đối với API luồng web bằng Xano

无代码 Webflow OAuth：使用 Xano 向 Webflow API 发出经过身份验证的请求

In the latest version of Angular, we’re getting what is known as the new Control Flow syntax for our component templates. It will replace older directives for things like , , and *ngIf/else ngSwitch *ngFor In this post, we’re going to learn exactly what this change means for us and how to use it. Alright, let’s get to it. https://youtu.be/nUEERAOZKwg?embedable=true So, for those of us that are used to building things in Angular, we’re used to the structural directive , and the concept of using an for the else condition when needed. Well, we don’t need this anymore with the new Control Flow syntax. *ngIf ng-template Also, we no longer need to import the to use them. Let’s take a look at an example. CommonModule Angular Control Flow Syntax for If/Else Conditions Ok, here in our component we have this player object consisting of some data about NBA player LeBron James. app.component.ts protected player: Player = {
    name: 'LeBron James',
    games: 1421,
    points: 38652,
    fieldGoalPercentage: 0.505,
    threePointPercentage: 0.345,
    imageName: 'lebron-james'
}; If we were to imagine that, in the real world, data like this may come from an API request where it may contain data or just be undefined. We would then need to conditionally use it within our template. In this case, we want to show our player component and pass it the player data only when it’s been defined. So, we need to use an if condition. For the new syntax, it’s similar to other templating languages like PHP, razor, and others. We start with the symbol, then in parentheses, we add our condition. Here, it will be if our player value is truthy, and then we wrap whatever conditional item. In this case, it’s our player component, with a player input, and that’s it. @ app.component.html @if (player) {
    <app-player [player]="player"></app-player>
} Right now, of course, it’s showing because we have our data hard-coded. So, let’s go clear it out. protected player?: Player; And, when we save, now we can see that it’s properly removed when no data is provided. If we want to show a message when we have no data, we need to add an else statement. To do this, we just need to add another symbol, then the word "else", then a new set of curly braces where we wrap our message. @ @if (player) {
    <app-player [player]="player"></app-player>
} @else {
    <p>No player exists at this time</p>
} Then, when we save this, we see that our message is properly displayed because we now have no data. So, that’s the new syntax replacing the old . *ngIf/else Angular Control Flow Syntax for Switch Statements Next up, we have the new syntax for switch statements. We no longer need a wrapping element or in order to use an directive and each of its cases. In this example, we have a select control where we can choose Lebron, Kareem, or leave it as the default player. ng-container ngSwitch And, when we look at our data, we have three player objects, player one, LeBron, player two, Kareem, and player three, Karl Malone. protected player1: Player = {
    name: 'LeBron James',
    games: 1421,
    points: 38652,
    fieldGoalPercentage: 0.505,
    threePointPercentage: 0.345,
    imageName: 'lebron-james'
};
protected player2: Player = {
    name: 'Kareem Abdul-Jabbar',
    games: 1560,
    points: 38387,
    fieldGoalPercentage: 0.559,
    threePointPercentage: 0.056,
    imageName: 'kareem-abdul-jabbar'
};
protected player3: Player = {
    name: 'Karl Malone',
    games: 1476,
    points: 36928,
    fieldGoalPercentage: 0.516,
    threePointPercentage: 0.274,
    imageName: 'karl-malone'
}; What we want to do in the template is show the appropriate player to match the value of our form control. This control will be a value of a string matching either Lebron, Kareem, or Default. protected options = new FormControl<'LeBron' | 'Kareem' | 'Default'>('Default', { nonNullable: true }); So, back in our template, we’ll begin by adding the symbol followed by the word "switch", then in parentheses, the value that we’ll want to switch on, in this case, that will be our options control value. @ @switch (options.value) {} Now, for our first case, we add the symbol, then the word "case", followed by the value, LeBron for this case, in parentheses. Then, within curly braces, we add our player component with the player input, in this case, it will be player one because that was Lebron in our data. @ @switch (options.value) {
    @case ('LeBron') {
        <app-player [player]="player1"></app-player>
    }
} Now, we can simply copy all of this, paste it, then change the case to Kareem, and the input to player two this time for Kareem’s data. @switch (options.value) {
    @case ('LeBron') {
        <app-player [player]="player1"></app-player>
    }
    @case ('Kareem') {
        <app-player [player]="player2"></app-player>
    }
} And then, finally, we can add our default case. We’ll add the player component one last time here, and we'll pass it to player three for Karl Malone. @switch (options.value) {
    @case ('LeBron') {
        <app-player [player]="player1"></app-player>
    }
    @case ('Kareem') {
        <app-player [player]="player2"></app-player>
    }
    @default {
        <app-player [player]="player3"></app-player>
    }
} Ok, now when we save, we see Karl Malone since he was the default, and our control value is set to default when initialized. If we change to Lebron, the view is properly updated. And likewise with Kareem. So, that’s the new switch syntax; up next, we have the final example in this post, a for loop. Angular Control Flow Syntax for For Loops When adding for loops in angular, we used to need an element or for our directive. Then we would need to create a variable from a list of options, and then much of the time, we needed to add a function to help with performance. Well, it looks similar now but a little different. ng-container *ngFor trackby In this example, our list of players is larger and consists of all of these items. players.ts export const players = [
    {
        name: 'LeBron James',
        games: 1421,
        points: 38652,
        fieldGoalPercentage: 0.505,
        threePointPercentage: 0.345,
        imageName: 'lebron-james'
    },
    {
        name: 'Kareem Abdul-Jabbar',
        games: 1560,
        points: 38387,
        fieldGoalPercentage: 0.559,
        threePointPercentage: 0.056,
        imageName: 'kareem-abdul-jabbar'
    },
    {
        name: 'Karl Malone',
        games: 1476,
        points: 36928,
        fieldGoalPercentage: 0.516,
        threePointPercentage: 0.274,
        imageName: 'karl-malone'
    },
    {
        name: 'Kobe Bryant',
        games: 1346,
        points: 33643,
        fieldGoalPercentage: 0.447,
        threePointPercentage: 0.329,
        imageName: 'kobe-bryant'
    },
    {
        name: 'Michael Jordan',
        games: 1072,
        points: 32292,
        fieldGoalPercentage: 0.497,
        threePointPercentage: 0.327,
        imageName: 'michael-jordan'
    },
    {
        name: 'Dirk Nowitzki',
        games: 1522,
        points: 31560,
        fieldGoalPercentage: 0.471,
        threePointPercentage: 0.38,
        imageName: 'dirk-nowitzki'
    },
    {
        name: 'Wilt Chamberlain',
        games: 1045,
        points: 31419,
        fieldGoalPercentage: 0.54,
        threePointPercentage: 0,
        imageName: 'wilt-chamberlain'
    },
    {
        name: 'Shaquille O\'Neal',
        games: 1207,
        points: 28596,
        fieldGoalPercentage: 0.582,
        threePointPercentage: 0.045,
        imageName: 'shaquille-oneal'
    },
    {
        name: 'Carmelo Anthony',
        games: 1260,
        points: 28289,
        fieldGoalPercentage: 0.447,
        threePointPercentage: 0.355,
        imageName: 'carmelo-anthony'
    },
    {
        name: 'Moses Malone',
        games: 1329,
        points: 27409,
        fieldGoalPercentage: 0.491,
        threePointPercentage: 0.10,
        imageName: 'moses-malone'
    },
    {
        name: 'Elvin Hayes',
        games: 1303,
        points: 27313,
        fieldGoalPercentage: 0.452,
        threePointPercentage: 0.147,
        imageName: 'elvin-hayes'
    }
]; We want to list these players out in the template with a for loop. So, we start by adding the symbol again. Then, the word "for" is followed by parentheses. In these parentheses, we create our variable, we’ll call it "player." @ Then, like the old , we use the word "of", followed by our variable for our list of data, in this case, players. *ngFor @for (player of players) {
} Now, one of the key differences in the new syntax is that a track expression is mandatory. So, if we were to save this, we get an error letting us know what we’re missing. So, we need to add a semi-colon, followed by the word "track." Then we need to provide a unique value to track, something like an ID, but in our case, we’ll use the player name. @for (player of players; track player.name) {
} Ok, all that’s left now is to add our player component and pass it our player data. @for (player of players; track player.name) {
    <app-player [player]="player"></app-player>
} And now when we save, there’s our list of players. Angular For Loop Empty Template Now, what if our list was empty, and we wanted to show a message? Well, let’s clear out our list data. If we were to save right now, we'd just have a blank screen. To show a message in this case, back in our template, we can add an empty scenario for our for loop. And inside, we can add our message. @for (player of players) {
    ...
}
@empty {
    <p>There are no players to display at this time</p>
} Now, when we save, we see our message. Pretty easy, right? Angular For Loop Additional Properties Now, for those of you familiar with the old , you may be wondering about all of the old properties that we had available: *ngFor index first last even odd count Well, they all still exist in the new syntax too. We just add them much like we did before. We use the word "let" followed by the variable name we want to use, then equals and the name of the value prefixed with a dollar sign. @for (player of players;
      track player.name;
      let index = $index;
      let first = $first;
      let last = $last;
      let even = $even;
      let odd = $odd;
      let count = $count) {
    ...
} So, after adding all of these, let's say we want to display the count in a message before the first item in the list. So, we add a condition for the first item, then add a message with the string interpolated value for the list count. @if (first) {
    <strong>There are {{ count }} players in the list</strong>
} When we save, now we can see the message with the count before all items. And, let’s say we want to display the list item number next to the player name. We can do this by passing the item index to the player component. <app-player
    ...
    [index]="index"
    ...>
</app-player> Internally, this component adds one to its index value and places the string interpolated value before the name. We could also add some zebra striping by binding a class, even, to all of the even-numbered list items. <app-player
    ...
    [class.even]="even"
    ...>
</app-player> Now, we can see all of the even items are a little darker. And finally, we can highlight the first and last list items by binding a first and last class to those variables. <app-player
    ...
    [class.first]="first"
    [class.last]="last"
    ...>
</app-player> Here, we can see the first item gets a red border. And, when we scroll down to the bottom, the last item gets a blue border. Pretty straightforward, right? So, I think this is a pretty nice change. It’s pretty similar to what we’re used to but it’s a little more simple. It doesn’t require as many elements, s, and s, and it also doesn’t require any imports which is pretty nice. ng-container ng-template I guess, some things are simpler, some things are easier, and some things are just different. The Angular Control Flow Migration Schematic For those of you who may be worried about making this change to an existing codebase, don’t be. To migrate all of your existing s, s, and s, you can simply use the migration schematic which should hopefully update them without much work. *ngIf ngSwitch *ngFor ng g @angular/core:control-flow-migration Ok, so that’s pretty much all I have for Angular’s new control flow syntax. Want to See It in Action? Check out the demo code and examples of these techniques in the stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/ttnwwm?ctl=1&embed=1&file=src%2Fapp%2Fapp.component.ts&embedable=true

A Beginner-Friendly Guide On How to Use Angular's New Control Flow Syntax

Hey there, fellow coders! Today, we'll learn how to create a fully responsive dropdown menu using HTML, CSS, and JavaScript. Our goal? To showcase a sleek and versatile dropdown menu that adapts seamlessly to different screen sizes, enhancing user experience without the need for extensive tutorials. Overview: In this project showcase, we'll dive into the creation of a dropdown menu that's not just visually appealing but also functional across various devices. By leveraging HTML for structure, CSS for styling, and JavaScript for interactivity, we'll craft a dynamic menu that reflects modern web design principles. Key Highlights: We'll lay the groundwork with HTML, structuring our navbar and dropdown menu components to create a solid foundation for our project. HTML Structure: With CSS, we'll add style and finesse to our dropdown menu, ensuring it looks polished and professional on any screen. CSS Styling: : Using JavaScript, we'll inject interactivity into our dropdown menu, allowing users to seamlessly navigate their way through our site. JavaScript Functionality Let's Dive In: From its humble beginnings in HTML to its stylish makeover with CSS and JavaScript magic, we'll showcase the evolution of our menu in action. Dropdown Menu Html Code: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop Down Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            <img src="./navbar-icon.png" alt="">
        </div>
        <div class="toggle-btn">
            <div class="icon"></div>
        </div>
        <ul class="menu">
            <li><a href="#">home</a></li>
            <li><a href="#">About</a></li>
            <li class="submenu-wrapper">
                <a href="#">Skills<span> > </span>
                </a>
                <ul class="submenu">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">React.js</a></li>
                    <li><a href="#">Node.js</a></li>
                </ul>
            </li>
            <li><a href="#">Background</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <script src="./script.js"></script>
</body>
</html> Dropdown Menu CSS Code: @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*,
::before,
::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size:13px;
}

body{
    font-family: "Poppins", sans-serif;
    font-size:1rem;
    background: #222f37;
    color:#d6e0f9;
}

.navbar{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    background: #101d23;
    padding:0 5%;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    width:5rem
}

.logo img{
    width:100%;
}

.menu{
    list-style: none;
}

.menu li{
    position: relative;
    float:left;
}

.menu li a{
    font-family: "Poppins", sans-serif;
    font-size:1.2rem;
    color:#d6e0f9;
    display:block;
    text-decoration: none;
    padding:1rem 1.5rem;
}

.menu li a:hover{
    background: #495ca8;
}

.submenu{
    position: absolute;
    left:0;
    background: #101d23;
    display:none;
    transition: all .3s ease-in-out;
}

.submenu-wrapper:hover .submenu,
.submenu-wrapper:focus-within .submenu{
    display: initial;
}

.submenu li{
    width:100%;
    border-top:.1rem solid #222f37;
    list-style: none;
}

.toggle-btn {
    display: none; /* Initially hide the toggle button */
    z-index:1000;
}

.icon {
    position: relative;
    width: 1.5rem;
    height: .8rem;
    cursor: pointer;
    z-index:100;
}

.icon::before {
    top: 0;
    right:0;
    content: '';
    position: absolute;
    width: 2rem;
    height: .2rem;
    background-color: #d6e0f9;
    transition: all 0.3s ease-in-out;
}

.icon::after {
    bottom: 0;
    right:0;
    content: '';
    position: absolute;
    width: 1.5rem;
    height: .2rem;
    background-color: #d6e0f9;
    transition: transform 0.3s ease-in-out;
}

/* Rotate the before and after lines to create the close icon effect */
.icon.active::before {
    width:1.5rem;
    transform: rotate(-45deg) translate(-0.21rem, 0.21rem);
}

.icon.active::after {
    transform: rotate(45deg) translate(-0.21rem, -0.21rem);
}


@media (max-width: 991px){
    .toggle-btn{
        display: block;
    }

    .menu{
        width:100%;
        position:absolute;
        top:100%;
        left:0;
        background: #101d23;
        border-top: .1rem solid #222f37;
        display:none;
    }

    .menu.active{
        display:initial
    }

    .menu li{
        width:100%;
        border-top: .1rem solid #222f37;
    }

    .submenu{
        position: relative;
        width:100%;
    }

    .submenu li{
        background: #222f37;
        border-top: .1rem solid #101d23;
    }

    .submenu li a{
        padding-left:2rem;
    }
} Dropdown Menu JavaScript Code: const icon = document.querySelector('.icon');
    const menu = document.querySelector('.menu');
    const span = document.querySelector('.span')

    function toggleNavbar() {
        menu.classList.toggle('active');
        icon.classList.toggle('active');
    }

    document.querySelector('.toggle-btn').addEventListener('click', function () {
        toggleNavbar();
    }); On Large Screens On Small Screens: Check out the live demo and code: CodePen: GitHub Repo: Link to CodePen Link to GitHub Repo Also published . here

How To Build a Dropdown Menu With HTML, CSS and JavaScript

Where the agora meets the blockchain. It's not a revolution with blaring trumpets; it's the quiet evolution of governance. In the timeless drama of "Antigone" (442 BCE), King Creon faces the paradox of enforcing city laws at the expense of divine mandates. A tale that underscores the need for collective wisdom in navigating the complexities of governance. Now, imagine blending this ancient wisdom with a sprinkle of cutting-edge tech magic. That's the future I sketch here—one where the agora meets the blockchain, and democracy gets a contemporary makeover. Unveiling a Modern Agora: Athenian Vibes in a Digital Forum This vision begins by reviving the spirit of Athenian direct democracy in a digital agora—a virtual gathering place. Echoing the days when citizens actively shaped their city's fate, our agora is a nod to the ancient forums, now translated into digital conversations where citizens can voice their opinions and make decisions collectively. Building Trust in the Digital Age: The Subtle Magic of Blockchain Now, here's where the tech magic quietly slips in. Behind the scenes is blockchain, a digital ledger that ensures transparency and security without much fuss. Think of it as the quiet custodian of our democratic decisions, recording each move without the drama. It's the backstage hero, keeping our democratic show tamper-proof and trustworthy. Economic Empowerment: Councils for Every Voice Shifting gears to the economic stage, we introduce worker and consumer councils for democratic economic planning—modern assemblies inspired by the Athenian ethos of direct democracy, not the liberal representative “democracies” that function more like oligarchies. These councils give individuals a seat at the economic table, where they can shape production, influence working conditions, and even have a say in product design and distribution. It's democracy at work, quite literally. AI: The Wise Sidekick in Decision-Making This vision doesn't stop at historical echoes; it embraces the future with artificial intelligence (AI). AI algorithms work behind the scenes, offering councils a helping hand in decision-making. It's not about replacing human insights but enhancing them. The councils get a digital sidekick, making informed decisions a breeze. Governance in Layers: Nested Federated Assemblies In the governance realm, we're introducing nested federated assemblies—a multilayered approach inspired by ancient Greek polis. Local autonomy meshes seamlessly with global collaboration. It's a subtle self-reflective dance of decentralized decision-making that ensures decisions are finely tuned to local needs while tackling broader societal challenges, expressing self-awareness, and placing sustainable limitations on economic growth. Equity in Action: A Classless Society in the Making Addressing societal imbalances, this vision champions balanced divisions of labor and fair compensation. Automation steps in to handle the mundane, freeing individuals to pursue more fulfilling roles. It's a quiet revolution, striving to close the wealth and power gap and reimagine societal structures without much fanfare. Education: Nurturing the Informed Citizens of Tomorrow Education becomes the cornerstone, mirroring the essence of Athenian paideia, the city, and broader society. We're fostering critical thinking, technology literacy, and civic responsibility. Citizens graduate not just with degrees but with the tools and experiences to navigate the nuanced world of self-governance and economics. It's education as an invisible superpower. A Decisive Moment for Democracy: A Nudge from Castoriadis As we stand at this crossroads, philosopher Cornelius Castoriadis offers a gentle nudge. It's a call to shift perspectives, a subtle rebellion against the dominance of the economic sphere. Castoriadis invites us to reconnect with our essential mortality, shaping a future where autonomy triumphs over barbarism. A quiet revolution in the making, on the ontological plane. In conclusion, this future society weaves together the wisdom of antiquity with a sprinkle of contemporary tech enchantment. The agora meets the blockchain, and democracy gets a fundamental, yet low-key, makeover. It's not a revolution with blaring trumpets; it's the quiet evolution of governance, where ancient ideals dance with modern possibilities. Welcome to the future—a place where democracy isn't just a system but a subtle symphony of voices shaping our collective destiny. delegat0x is a libertarian anti-capitalist R&D Engineer in the crypto space. They write about the intersections between philosophy, politics, media, alternatives to capitalism, social movements, and collective autonomy. Image produced by delegate0x using DALL-E Also published here

CLASSPLUS

classplusapp.com

-- employees

Since n.d.

COMPANY RANKING

CLASSPLUS

EVERGREEN INDEX #3305

Representing this company? Click here to claim and customize this page!

Classplus WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

CLASSPLUS

classplusapp.com

-- employees

Since n.d.

COMPANY RANKING

CLASSPLUS

EVERGREEN INDEX #3305

RELATED COMPANIESRANK

STORIES ABOUT CLASSPLUS

Representing this company? Click here to claim and customize this page!

Classplus WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!