Categories
makitweb.com

How to add Select2 on Dynamic element – jQuery

Select2 jQuery plugin is easy to add on the <select > element. Need to call the select2() method on the selector to initialize.

If you adding select2 on a class or select element and when you add an element dynamically then select2 is not initialized on that element.

In this tutorial, I show how you can initialize select2 on dynamically created HTML <select > element using jQuery.

I am loading select2 data using jQuery AJAX in the example.

How to add select2 on Dynamic element - jQuery

Categories
stackify.com

What Is a Requirement Traceability Matrix?

When developing software applications, we want to make sure the application does what the software requirements say it’s supposed to do, and testing proves that it does. In this article, I’ll explore how to link requirements to test cases, and I’ll explain what a requirement traceability matrix is and how to build a simple one.

What Is a Requirement Traceability Matrix?

Wikipedia describes traceability matrices in general and software requirement traceability matrices in particular.

A requirement traceability matrix may be used to check if the current project requirements are being met, and to help in the creation of a request for proposal, software requirements specification, various deliverable documents, and project plan tasks.

I will use a simple example.  Let’s assume our application has a login screen that shields it from unwanted access and that we want a user to enter a valid username and password in order to access it.

So let’s start by creating some simple requirements.

Create Software Requirements

Typically, system requirements are described in bland language so that they’re clear … hopefully.  A few requirements for our simple example might read something like this:

  • 1.1 The system allows a valid user to access the application.
  • 1.2 The system requires the user to enter a valid username and password in order to access the application.
  • 1.3 The system prevents an invalid user from accessing the application.

Next, we add some numbers.  Without getting into any complex numbering systems, which are usually the norm for large and complex systems, we’ll use simple numbering.  However, complex projects often use modules and sub-modules to group and number requirements. Depending on the complexity, the numbering can become very involved, but we’ll keep things simple.

Now, let’s create a few specific test cases. I know these examples are very simple and that you will find many faults with them. However, I am purposefully keeping things simple so I can illustrate the most important aspects of developing an effective requirement traceability matrix.

Create Test Cases

Experience teaches us that we should always focus on testing the desired behavior before concerning ourselves with testing error cases. Usually, we refer to this as the “happy path test.†This “happy path†happens when everything lines up correctly. When user input is correct and the application functions correctly, we should see the expected outcome. Only after defining the happy path will we create two very simple error cases.

Test Case 1.1 – Log in Successfully

  1. Prerequisites: valid user account exists
  2. Enter valid username
  3. Enter valid password
  4. Click the login button
  5. Verify that the user can access the application and can see the application home page

Test Case 1.2 – Attempt to Log in With Bad Credentials

  1. Prerequisites: valid user account exists
  2. Enter an invalid user name and/or an invalid password
  3. Click the login button
  4. Verify that the user sees a validation error
  5. Verify that the user cannot access the application and keeps seeing the login screen

Test Case 1.3 – Attempt to Log in With Empty Credentials

  1. Leave username and/or password fields empty
  2. Click the login button
  3. Verify that the user sees a validation error indicating that fields are required
  4. Verify that the user cannot access the application and keeps seeing the login screen

Usually, there is a loose correlation between the numbering of test cases and the numbering of requirements. However, it is beyond the scope of this article to go into numbering schemes, as opinions and practices tend to differ greatly.

Trace Requirements to Test Cases

Useful test cases respond to system requirements. Consequently, when we write a specific test case, we will have one or more specific requirements that we want to satisfy. Depending on how rigorous and formal your test documentation has to be, you can write the applicable requirements into each test case. This is forward requirements tracing.

Trace Test Cases to Requirements

Another important goal for tracing requirements is the ability to quickly go backward. In our case, we want to be able to go from a specific test case back to the requirement that it satisfies.  This is called backward requirement tracing.

With these two main requirements, let’s build a simple requirement traceability matrix.

Build a Simple Requirement Traceability Matrix

A requirement traceability matrix has four basic components: requirement identifier, requirement summary text, test case identifier, and test case status.

Requirement ID Requirement Title Test Cases Test Case Status
1.1 Successful login TC 1.1 pass
1.2 Login requires user name & password TC 1.1
TC 1.3
pass
fail
1.3 Block invalid login TC 1.2
TC 1.3
pass
fail

Add More Information Only If Needed

Depending on the complexity of our application, we can add more information to our matrix.  First, we usually add a requirement category or module. As a result, we can quickly sort our information into these sub-groupings and make things easier to follow.

Requirement ID Category Requirement Title Test Cases Run 1
Status
Run 2
Status
1.1 Login Successful login TC 1.1
TC 1.3
pass
fail
pass
pass
1.2 Login Login requires username & password TC 1.1
TC 1.3
pass
fail
pass
pass
1.2 Login Block invalid login TC 1.2
TC 1.3
fail
fail
pass
pass

Note that the single Test Case Status column has been replaced with two columns. These new Run Status columns represent the status of each test case during a particular test run. We can obviously add more columns for each test run we’re performing. Consequently, our requirement traceability matrix provides a quick visual status of our application’s current condition. Thus, using this matrix we can go forward from requirements to test cases.  We can also go backward from the failed test cases to the requirements and flag issues quickly.

Keep Things Simple

The main purpose of a requirement traceability matrix is capturing the link between each requirement and its tests in a clearly visible way. If, on the other hand, there is too much information in your matrix and you keep having to search through it, your matrix is not serving its purpose. Every new column should be carefully analyzed before inserting it.

Requirement Traceability Matrix Today

By now you’re probably thinking that creating a requirement traceability matrix entails a lot of manual work.  Generally, I would agree that this is not in keeping with agile principles.  However, custom software development involving a contract often requires written software requirements. Consequently, it is only natural to create a requirement traceability matrix so we can prove that our application actually meets the requirements.

On the other hand, when software development happens in-house, work contracts are not required. In this case, user stories normally replace formal requirements.  Consequently, during agile development, we develop user stories in response to user input. In addition, user stories often change during development. Even when that happens, however, depending on the level of formality required by your company, you might still need to trace user stories to test cases. Modern tools like Prefix (which only supports Java and .NET) allow developers to create tests that respond quickly to requirements.

Do You Need a Requirement Traceability Matrix?

The answer really depends on your project. Frequently, software requirements constitute a formal work contract, which means that you most likely will need to develop a traceability matrix. On the other hand, when your development is in-house, agility becomes your main requirement, and investing time developing a complex requirement matrix would not be efficient. Instead, you might direct your resources toward automated testing, which responds to more fluid user requirements.

Categories
kinsta.com

How to Fix the Leverage Browser Caching Warning in WordPress

Google PageSpeed Insights is one of several useful tools for measuring website performance. However, some of its suggestions – like the ‘Leverage Browser Caching’ warning – may be confusing to inexperienced site owners.

When you break it down, caching isn’t all that tough to understand. With a few tweaks, you can implement this development best practice on your site to cut down loading times and improve your PageSpeed score.

In this post, we’ll kick things off with an introduction to the Leverage Browser Caching warning. Then we’ll share several tips for fixing this issue on your WordPress site.

Let’s jump in!

What Is the Leverage Browser Caching Warning?

In order to understand the Leverage Browser Caching warning, it helps to first know a bit about Google PageSpeed Insights. If you’re new to the platform, we recommend reading our complete guide, Google PageSpeed Insights: Scoring 100/100 With WordPress.

The Leverage Browser Caching warning is one of many ‘diagnostics’ Google PageSpeed used to return as a suggestion for improving your score like the following one:

leverage browser caching pagespeed insights

Leverage Browser Caching warning in Google PageSpeed Insights

In Version 5 of Google PageSpeed Insights, this message was replaced with the “Serve static assets with an efficient cache policy†warning:

pagespeed serve static resources

Serve static assets with an efficient cache policy warning in Google PageSpeed Insights

Despite the change in language and appearance, the solution to these warnings is the same.

Google suggests using browser caching to reduce page loading times and improve performance. In a nutshell, caching is when users’ browsers save static copies of your site’s pages. Then, on subsequent visits, this content can be re-loaded faster because the browser doesn’t have to contact your site’s server in order to access the requested resources.

However, every cached resource needs a specified expiration period. This tells browsers when content on your site has become outdated, so it can replace its cached copy with an updated version.

If you’re seeing the “Leverage Browser Caching†warning in your performance test results, it likely means one of two things:

  • The Cache-Control or Expires headers are missing from your site’s server or that of a third-party.
  • The necessary headers are present, but the expiration period is very short and therefore doesn’t have much impact on performance.

The solutions to this warning involve fixing one or both of these issues.

🚨Warning! Leverage Browser Caching🚨 If reading those words makes your heart race, you’ll want to check out this guide to fixing that dreaded messageâš¡ï¸Click to Tweet

How to Fix the Leverage Browser Caching Warning in WordPress (3 Methods)

There are a few different ways you might go about fixing the Leverage Browser Caching warning in WordPress, depending on what’s causing it. Here are three solutions you can try.

1. Add Cache-Control and Expires Headers

There are two headers related to browser caching: Cache-Control and Expires. At least one must be present to enable browser caching for your site, as this is how browsers determine how long they should retain resources before refreshing them.

A simple way to determine if this is what’s causing the Leverage Browser Caching warning is to look at the details given for each resource. In Google PageSpeed Insights Version 5, you’ll see “None†listed under Cache TTL instead:

pagespeed cache ttl

Cache TTL listings in Google PageSpeed Insights

As a handy reference, previous versions of Google PageSpeed Insights showed an “expiration not specified†message when the headers were missing:

Resources listed in the Leverage Browser Caching warning

Resources listed in the Leverage Browser Caching warning

While the Cache-Control header turns on client-side caching and sets the max-age of a resource, the Expires header is used to specify a point in time when the resource is no longer valid.

You don’t necessarily need to add both, as this can be redundant. Cache-Control is newer and is usually the recommended method. However, some web performance tools, such as GTmetrix, still check for Expires headers.

If you’re hosting at Kinsta, you don’t have to worry about setting these headers. All of our Nginx servers already include them. Those using a Content Delivery Network (CDN) should also already have these headers applied.

In the event that you’re using a different hosting provider, be sure to back up your site before following the steps below, as editing .htaccess could break your site if you’re not careful.

How to Add Cache-Control Headers in Nginx

To add Cache-Control headers in Nginx, you can add the following to your server’s configuration file:

location ~* .(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

This tells your server that the specified file types are not going to change for at least 30 days. It will keep the relevant files saved for that period of time before refreshing them.

How to Add Cache-Control Headers in Apache

If you have an Apache server instead, you can add the following code to your .htaccess file:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
        Header set Cache-Control "max-age=84600, public"
</filesMatch&gt

This snippet should be added before “#BEGIN WordPress†or after “#END WordPressâ€. In this case, the cache is set to expire after 84,600 seconds.

How to Add Expires Headers in Nginx

You can add Expires headers in Nginx by adding the following to your server block. In this example, you can see how to specify different expiration times based on file types:

    location ~*  .(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  .(pdf|css|html|js|swf)$ {
        expires 2d;
    }

How to Add Expires Headers in Apache

You can add Expires headers in Apache by adding the following to your .htaccess file:

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

You can then check your headers by running your site through Google PageSpeed Insights again and seeing if the warning persists.

Leave no website issue unsolved with expert WordPress support at your fingertips 24/7. Try Kinsta for Free.

2. Leverage Browser Caching for Google Analytics

Ironically enough, Google Analytics is sometimes the cause of the Leverage Browser Caching warning and an imperfect PageSpeed score. This is because it has a low cache expiration time of just two hours. This used to be the old warning:

leverage browser caching pagespeed insights analytics

Leverage Browser Caching warning for Google Analytics script

In PageSpeed Insights Version 5, this issue no longer results in a warning, but Google Analytics might still be listed as an unoptimized resource:

pagespeed passed analytics

Google PageSpeed Insights passed audits with Google Analytics script listing

You won’t be able to change this with Cache-Control or Expires headers because the resource isn’t on your server. However, there is a way to leverage browser caching for Google Analytics by hosting the script locally.

Please be aware, though, that this method is not supported by Google.

Leverage Browser Caching for Google Analytics with Complete Analytics Optimization Suite

If you want to resolve the above problem, there’s a free plugin called Complete Analytics Optimization Suite (CAOS) developed by Daan van den Bergh that you can use:

CAOS WordPress plugin

CAOS WordPress plugin

You can download CAOS from the WordPress Plugin Directory or by searching for it under Plugins > Add New in your WordPress dashboard.

Some additional benefits to hosting your analytics script locally include that it reduces your external HTTP requests to Google from two to one and it enables you to gain full control over the caching of the file. This means you can use the cache headers as we showed you earlier.

To get started, install the plugin and then enter your Google Analytics Tracking ID. The plugin adds the necessary tracking code for Google Analytics to your WordPress website, downloads and saves the analytics.js file to your server, and keeps it updated using a scheduled script in wp_cron().

We recommend also setting it to load in the footer:

caos settings

CAOS tracking code placement settings

Keep in mind that CAOS won’t work with other Google Analytics WordPress plugins.

Leverage Browser Caching for Google Analytics With WP-Rocket

Alternatively, you can use the WordPress caching plugin WP-Rocket to achieve the same goal:

wp rocket plugin

WP-Rocket WordPress plugin

This plugin’s Google Tracking Add-on enables you to host your analytics script locally with the click of a button. Simply toggle the status on under WP-Rocket > Add-ons.

WP-Rocket and its add-on are compatible with other Google Analytics plugins. As a premium tool, it comes at a price with licenses start ingat $49 per year.

3. Minimize Your Use of Third-Party Scripts

Sometimes the Google Analytics script can cause problems for your Google PageSpeed Insights score because it’s hosted on Google’s server, thus you aren’t in control of the cache.

The same is true for other third-party scripts. If you’re managing a business through your WordPress website, most likely you have additional third-party scripts running to track conversions, A/B tests, and more.

This might include scripts such as Facebook conversion pixels, Crazy Egg, Hotjar, and others. Unfortunately, unless you can find a way to host these scripts locally, there’s nothing much you can do to gain control of them.

One option for Facebook Pixel users is to use yet another WP-Rocket add-on. Ideally, you’ll want to minimize your use of third-party scripts if you want to improve your Google PageSpeed score. So it may be worth conducting an audit of your site and removing any scripts that aren’t necessary for running it.

If you ever measured site performance, there’s a high chance the Leverage Browser Caching warning isn’t new to you. But how do you fix that to make your site faster? Learn how to do it with this in-depth guide! 🚀🗿Click to Tweet

Summary

While not a definitive measure of your site’s performance, Google PageSpeed Insights is still a decent indicator of how it’s running. Improving your score by resolving warnings shown under the “Serve static assets with an efficient cache policy†can help make your website faster and more usable for visitors.

If you’re seeing this warning in Google PageSpeed Insights, you can resolve it by:

  1. Adding Cache-Control or Expires headers.
  2. Leveraging browser caching for Google Analytics.
  3. Minimizing your use of third-party scripts.

Have any other tips about fixing the leverage browser caching? Let us know in the comments section below!