It's super easy.

Step 1: Create a Custom Filter

• Go to JIRA's Filters tab and select View all filters.

• Click Create filter.

• Make sure JQL is selected.

Step 2: Use JQL to Filter for Your Backlog

In the search box, enter criteria matching your project's key and the statuses that represent your backlog column:

project = YOURPROJECTKEY AND status in ("Backlog", "Open", "To Do")

Replace YOURPROJECTKEY and statuses with your actual project information.

To find your project key, look at the top left of each ticket. You should see something like WORDS-123. "WORDS" would be the project key in this example.

Step 3: Export Your Results

Once your tickets appear, click the Export button in the top-right corner and select your preferred format (CSV, Excel, etc.).

That's it—you're now ready to organize and prioritize your backlog however and wherever you want!

Tip: Save the filter so you can return for easy exports in the future.

What's Next?

At this point, I'd usually transfer my list of tickets into a Google Sheet and organize them based on my favorite prioritization model at the time. But lately, I've been importing the CSV directly into a prioritization tool I'm working on. I'll share the link for that when it's ready...

Hopefully, Atlassian makes exporting JIRA board tickets more straightforward one day—but until then, JQL it is!

1. Frontend Functionality:

• Test all buttons and clickable elements
• Pay attention to hover states and CSS cursors
• Test forms
  • Do they submit successfully?
  • Do they accept special characters (* ^ - ~)?
  • Is the intended data making it to its destination?

2. Backend Functionality:

• Test CMS authorability
  • Does rich text output correctly?
  • Do special characters (* ^ - ~) display correctly?
  • Do different module options work?
• Verify analytics and event tracking implementation
  • Are the necessary tracking scripts present?
  • Are the necessary events/goals being tagged and tracked properly?

3. Design and Compatibility:

• Check alignment and spacing of webpage elements
• Check that all intended fonts and styles are loaded
• Check that font headings follow the intended design/hierarchy
• Check less obvious pages and elements including popups and modals
• Ensure the design is consistent with mockups
  • on Desktop
  • on Mobile
  • on Tablet
• Also review...
  • In different screen resolutions
  • On different browsers (Chrome, Firefox, Edge, etc.)
  • On different operating systems (Android, Apple)

4. Accessibility:

• Check that the website is compatible with screen readers
• Ensure color contrast is sufficient for users with visual impairments
• Ensure the website is navigable by keyboard alone

I use the WAVE browser extension to automate this.

5. SEO:

• Check for presence and proper use of header tags (H1, H2, H3, etc.)
• Ensure all images have alt tags

I use the Ahrefs SEO Toolbar to quickly check these.

6. Performance:

• Check the website's load time
• Check Core Web Vitals

I use Lighthouse in Chrome DevTools to automate this.

My 90% Use Case: Modifying Content

I don't always use JavaScript. But when I do, it's usually to change website content I can't reach in the CMS. I almost always use a combination of querySelector and innerHTML to do something like this:

<script defer>
document.querySelector('.class #ID').innerHTML = 'Replacement content here';
</script>

When that doesn't cut it, these other JavaScript methods probably will:

Selecting Elements

• By ID: document.getElementById('elementId')
• By Class: document.getElementsByClassName('className')
• By Tag Name: document.getElementsByTagName('tagName')
• Query Selector: document.querySelector('.class #id')

Selecting Elements Within an Iframe

• Manipulate Embedded Content: document.getElementById('iframeId').contentWindow.document

Changing Content

• Changing Text: element.innerText = 'New Text'
• Alternative for Changing Text: element.textContent = 'New Text'
• Changing HTML: element.innerHTML = '<b>New HTML Content</b>'

Changing Styles

• Changing a Style: element.style.color = 'red'
• Adding a CSS Class: element.classList.add('className')
• Removing a CSS Class: element.classList.remove('className')

Modifying Attributes

• Setting an Attribute: element.setAttribute('src', 'newImage.jpg')
• Removing an Attribute: element.removeAttribute('disabled')
• Getting an Attribute: element.getAttribute('src')

Adding and Removing Elements

• Creating an Element: document.createElement('div')
• Appending an Element: parentElement.appendChild(newElement)
• Removing an Element: parentElement.removeChild(elementToRemove)
• Replacing an Element: parentElement.replaceChild(newElement, oldElement)

Event Handling

• Adding an Event Listener: element.addEventListener('eventType', function)