Describe the feature

• Create a Pride-themed header for the website and add it to the assets folder.

Advantages

• Fun seasonal headers.

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Pride-themed header created
• Pride-themed header added to assets

Ideally this needs refactoring in the following ways

• Pull it into its own class/file instead of being in the index.js
• Add tests for all scenarios
• Above should fix the issue

Describe the feature

• Create a Christmas themed header for the website and add it to the assets folder.

Advantages

• Fun seasonal headers.

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Christmas themed header created
• Christmas themed header added to assets

Describe the feature

• Remove Travis File

Advantages

• The project now builds using GitHub Actions

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Travis file is deleted

Describe the feature

Allow the user to install the website on their phone as a shortcut.

We can also prompt them with new content added should they wish to.

Advantages

This will cache pages to the OS for fast, offline reading and also allow them to access new content or messages. This could be very handy on event days.

Acceptance Criteria

• Prompts and installs on phone
• Can receive push notifications
• Cache updates with latest updates properly

• [ ]

Describe the feature

We want to add a sitemap to our site for SEO but also to enable us to reference when doing testing on the CI.

Advantages

It means we can automatically crawl a set of pages in our testing without manual intervention.

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

All pages show in sitemap.xml - [ ]

Describe the feature

The talks presented on at DDD East Midlands are voted on by attendees. We display only the title and description of submitted talks - and attendees vote on which ones they wish to see

The current process is a filtered list and then a google form to submit your top 8 in.

It would be great to have an amazon style "shopping basket" where you could add and remove talks from your basket until you have your final shortlist you want to submit.

Advantages

Easier voting process
Nicer UX

Describe the feature

The site currently has a score of 86 for Best Practices when Lighthouse is run against it.

The details of improvements that can be made are shown in the lighthouse report

To Get Lighthouse Score

• Open the site in Chrome
• Open developer tools
• Go to the Lighthouse tab in the dev tools
• Run.

Advantages

• Improving the Best Practices of the site

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Lighthouse score for Best Practices is increased to at least 90.

Describe the feature

• Add your name and why you like the East Midlands tech scene to the Hacktober page as per the instructions on the Hactober Page

• This can be picked up by multiple people

Advantages

• Gives us an awesome lists of reasons why people like to live and work in the East Midlands, UK

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Your name and reason why you like the east midlands tech scene is added to the list at the bottom of the page

Describe the feature

• Add pa11y to CI build to demonstrate how changes impact accessibility

Advantages

• Helps the repo keep an accessibility focus

Links

• pa11y

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Pally runs on every PR build

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

1. Visit the information page on desktop: https://www.dddeastmidlands.com/information/main-page/

Reproduces how often:

100% of the time

Expected behaviour

Images don't split across columns

Screenshots

Describe the feature

• We aren't UXers... in fact, two of us hardly do any front-end. We would love to find a way to make the content of our site more navigable and user-friendly.

Advantages

• People will be able to find the information they need and enjoy using our site.

Describe the feature

• There are a lot of sections shared commonly across the site (i.e. code of conduct information, travel information). It would good to have these in sharable components so the information only needs to be edited in one place

Advantages

• Makes the site more maintainable

Describe the feature

• Create an Autumn-themed header for the website and add it to the assets folder.

Advantages

• Fun seasonal headers.

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Autumn-themed header created
• Autumn-themed header added to assets

Describe the feature

• Scaling down images on the about page improve performance

• Resize images down then run it through an image optimising service such as tinypng online

Advantages

• Improves load time of page

Acceptance Criteria

• Images are still clear and match the screen size they are now
• ticketinfo.jpg is resized
• citycenter.jpg is resized
• dasorganizers.jpg is resized

Describe the feature

The site currently has a score of 77 for SEO when Lighthouse is run against it.

The details of improvements that can be made are shown in the lighthouse report

To Get Lighthouse Score

• Open the site in Chrome
• Open developer tools
• Go to the Lighthouse tab in the dev tools
• Run.

Advantages

• Improving the SEO of the site

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Lighthouse score for SEO is increased to at least 90.

Describe the feature

• Scaling down images on the venue page improve performance

• Resize images down then run it through an image optimising service such as tinypng online

Advantages

• Improves load time of page

Acceptance Criteria

• Image is still clear and match the screen size they are now
• thencc.jpg is resized

Describe the feature

The site currently has a number of errors when checked when checking for the Progressive Web App standards in Lighthouse.

The details of improvements that can be made are shown in the lighthouse report

To Get Lighthouse Score

• Open the site in Chrome
• Open developer tools
• Go to the Lighthouse tab in the dev tools
• Run.

Advantages

• Improving the Progressive Web App of the site

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Lighthouse errors for Progressive Web App is decreased

Describe the feature

Header changes based on the month of the year. The following issues have asked for people to create themed headers for the website:

• #166 Pride header (June)
• #165 Autumn header (September - November)
• #164 Winter header (December)

This issue asks that the header is set to these themes during set time periods

Advantages

• Automatically changing the header means no one has to do it manually.

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Header changes based on the month of year.

Describe the feature

We would like our site to be accessible and useable to as many people as we can achieve. As part of this initiative, we would like the site to be navigable mouse-free.

Advantages

• Increases the audience for DDD East Midlands

• Helps people access the information they may need about the event

Acceptance Criteria

• All links can be accessed without using a mouse

Resources

• Using tabindex

https://www.dddeastmidlands.com/ is not accessible via Internet Explorer

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behaviour:

1. Open IE
2. Attempt to access https://www.dddeastmidlands.com/
   3.You'll get the 'An unexpected error has occurred' error

What percentage of the time does it reproduce, if you know? 100%

Expected behaviour

It would be nice if it worked

Screenshots

Describe the bug

Since introducing a dropdown nav, a sideways scroll bar has been present on the live site. We would like for this to be removed.

Screenshots

Describe the feature

Change the social links which are now text links, to use fontawesome or a similar package that can display logos instead of text

Advantages

• Makes footer smaller

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• the links in the footer are changed to use fontawesome or similar

Describe the bug

For some of the buttons on the information pages page ( https://www.dddeastmidlands.com/information/main-page/ ) the hover turns pure white rather than giving the image an opacity of 0.4.

The css styles are done on sections

Describe the feature

Add the header and footer images to the SW cache for a more speedy result

Advantages

Prepares for a better offline experience

Acceptance Criteria

Images are loaded from the SW and reloaded if they change

• [ ]

Describe the feature

• Create a git workflow for prettier to run fixes and raise PR on this repository
• Remove prettier check from builds

Advantages

• Ensures linting without breaking builds

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Workflow is created that runs prettier:fix and raises a PR

Describe the bug

Since mocking out the imported font awesome css file as a blank object, there are errors everytime we run the unit tests as font awesome can't be detected.

There must be a better way to mock out this dependency or for Jest to allow import '@fortawesome/fontawesome-svg-core/styles.css'; in Footer.js without having formatting errors on run.

To Reproduce

npm run test from any command line tool or look at the build actions when it runs the tests

Reproduces how often:

What percentage of the time does it reproduce, if you know?

Expected behaviour

A clear and concise description of what you expected to happen.

Screenshots

Issue
The footer is responsive until the min-width is 567px. After that it becomes unresponsive and the content is hidden.

Expected behaviour

It is expected to be responsive across various screen sizes and devices.

Screenshots
Given below are screenshots of the issue. As you can see the footer contents are messed up.

Solution
@wordshaker I would like to work on this issue and I have a fix for it. Please assign me this task. The solution screenshot is provided below.

Describe the feature

We want to be able to see any Javascript errors and page metrics of the site.

To do this we can use the npm library https://www.npmjs.com/package/@ministryofjustice/opg-performance-analytics

The readme contains the setup instructions, I believe it would sit within the _app.js file alongside the other GA code.

This will send data to Google Analytics that we can monitor over time.

We don't currently have Google Analytics installed either which would need to be done first. The ticket for this is here #189

Describe the feature

We would like the DDD East Midlands website ran through accessibility testers and for issues to be raised based on the improvements that are made apparent by these tools

It would be great if we could meet the recommendations on the a11y Web Accessibility Checklist

Options for tools include:

• pa11y
• Lighthouse

But we don't mind what tools are used (not our area of expertise)

Advantages

• To make the site more accessible to a wider audience

Acceptance Criteria

• A tool has been used to highlight any accessibility fixes needed on the site

• Issues are raised for potential fixes/enhancements are are tagged with the accessibility label

Describe the feature

We currently use https://www.npmjs.com/package/react-ga to implement Google Analytics tracking on our site. However, we require now the gtag implementation to add new functionality.

In analytics.js we need to replace the npm library in here with https://www.npmjs.com/package/react-gtm-module and update the code within the functions to use this new library for tracking page views and events.

The Analytics ID is already in the file and should be used for this too. The readme on how to initialise and replicate the existing functionality is also in the npm docs.

Advantages

Be able to plug in new features that take advantage of gtag.

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

All existing tracking functionality still works - [ ]
react-ga is removed from the package.json file - [ ]

Describe the feature

Need a responsive subnav for the website.

https://react-bootstrap.github.io/components/navbar/

If someone could implement the react responsive Nav, I'd happily style it.

Mobile

Desktop

Describe the bug

I noticed, while contributing #101, that there's an _site folder in the repo.
Is that meant to be there, as it seems to be a duplicate of a number of files
in the top-level folder in the repo?

To Reproduce

Steps to reproduce the behaviour:

• Open _site
• Notice that this includes a number of files that already exist top-level

Reproduces how often:

100%

Expected behaviour

It does not exist

Screenshots

N/A

Describe the feature

We want to swap out our images so we can better support those who have poorer devices or bandwidth. We want to ideally do this automatically using a package like https://github.com/cyrilwanner/next-optimized-images so that we can be sure we are optimised as much as possible automatically.

Advantages

Speed, SEO and accessibility wins

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• All images have been converted to srcset that are appropriate
• All background-images are converted

Describe the bug

Vulnerability raised by CodeQL:

Redirecting to a URL that is constructed from parts of the DOM that may be controlled by an attacker can facilitate phishing attacks. In these attacks, unsuspecting users can be redirected to a malicious site that looks very similar to the real site they intend to visit, but which is controlled by the attacker.

Details can be seen here:

https://github.com/DDDEastMidlandsLimited/dddem-web/security/code-scanning/1?query=ref%3Arefs%2Fheads%2Fmain

Describe the bug

There are 5 files that get created in public when building the site to do with the service worker generation.

These need untracked from git and a gitignore rule added to stop the patterns of these files from being committed.

To Reproduce

Steps to reproduce the behaviour:

1. run npm build
2. Look in the public folder

Describe the feature

The site currently has a score of 59 for performance when Lighthouse is run against it.

The details of improvements that can be made are shown in the lighthouse report

To Get Lighthouse Score

• Open the site in Chrome
• Open developer tools
• Go to the Lighthouse tab in the dev tools
• Run.

Advantages

• Improving the accessibility of the site

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Lighthouse score for performance is increased to at least 90.

Describe the bug

The footer links are slightly off-center when viewed on a monitor/laptop

To Reproduce

Go to https://www.dddeastmidlands.com/ and scroll to the footer while viewing on a monitor/laptop

Reproduces how often:

100%

Expected behaviour

Footer should be centered while still having a gap between icons and links

Screenshots
(windows)

Describe the feature

Want to track visits to each page, and when they are uploaded, click-throughs on sponsors logos.

Is your feature request related to a problem? Please describe.

Nope. Just want those tasty, tasty insights.

Describe the feature

Creating this off the back of a Lighthouse audit that was ran for #50.

Certain images don't have alt text which isn't great for accessibility. Proposing an enhancement to add some alt text descriptions to images where sensible.

Advantages

• Makes the site more accessible.

Acceptance Criteria

• Images across the site have an alt tag with a sensible description to help users that rely on screen readers.

Describe the bug

• Initial click goes to https://www.dddeastmidlands.com/# instead of displaying the drop-down of links

To Reproduce

• Go to homepage https://www.dddeastmidlands.com
• Click About

Reproduces how often:

100%.

If you go to another page then click "About" it works

Expected behaviour

About should display the drop down of information pages.

Describe the feature

Add a simple (SW) Service Worker that caches CSS and JS

Advantages

Allows us to begin to introduce more advanced caching and offline techniques.

Acceptance Criteria

CSS and JS is cached on first visit. Thereafter it uses them from the SW cache until a new version is released

• [ ]

Describe the bug

On the page https://www.dddeastmidlands.com/information/main-page/ our banner images are too big for the site. Currently the page is 4.3mb in size.

We need to do the following.

• Go through each banner image and resize relatively to a max of 940px wide.
• Run each image through tinypng to remove any excess data

To Reproduce

Steps to reproduce the behaviour:

1. Go to 'https://www.dddeastmidlands.com/information/main-page/'
2. Open chrome dev tools
3. Go to the performance tab
4. Look at the size of the images before and after

Reproduces how often:

100%

Expected behaviour

• Sizes to be dramatically reduced.
• looks the same on mobile, tablet and desktop sizes

Screenshots

None

Describe the bug

NextJS needs updating to the most recent version of 9 to remove some security vulnerabilities.

Describe the feature

• A reactive page with images of our past speakers, their names and links to their social media

Advantages

• Shows our high quality speakers from our past events

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• Images must be displayed in a responsive way (viewable on mobile and desktop)
• Tests are made around this page
• Access to links/name of each speaker in some format

Describe the feature

Raising this issue in relation to Issue #50 .
Axe report show several instances of icons (e.g. Twitter, LinkedIn) being used without any discernible text for screen reader users - see example screenshot below. This is particularly noticeable on the Home Page footer and the Speakers page. Proposed fix is to add relevant aria-labels to these icons where they appear.

I am happy to take this on and raise a PR for it.

Advantages

• Links currently attached to icons, e.g. Speaker Twitter accounts and LinkedIn profiles will become accessible to screen reader users

Acceptance Criteria

• Axe or similar a11y testing tool should show no issues with icon links
• When tabbing through links with screen reader active, appropriate content should be announced on icon links e.g. "{ Speaker name: } Twitter"

Describe the feature

Currently, the colour theme for DDD East Midlands is in the theme.js and is configurable. It would be great if this could extend to logo and copy for other DDD events to fork the repository and apply it to their own event with ease.

There are a number of options:

• New repository based on this current repository for other DDD events to fork with easy configuration (preferred)

• Centralise this kind of configuration on the main site

However it's approached, use for others should be well documented.

Advantages

• Other DDD Events can use our site framework with ease (but with different colour scheme) and be consistent with our type of branding if they wish.

Acceptance Criteria

• Colour theme centrally configurable (see theme.js)
• Logo centrally configuarable
• Reference to DDD configurable
• Well documented for use.

Describe the feature

Upgrade nextjs

Dependabot tried to do this upgrade but there are breaking changes with webpack. See pull request #202

Advantages

• Fixes vulnerabilities

Acceptance Criteria

Functional and non-functional criteria that should be met by this work

• NextJS is upgraded to 10.0.8 and the website build and tests pass

Issue
The footer is responsive until the min-width is 567px. After that it becomes unresponsive and the content is hidden.
A clear and concise description of what the bug is.

Reproduces how often:

What percentage of the time does it reproduce, if you know?

Expected behaviour

It is expected to be responsive across various screen sizes and devices.

Screenshots
Given below are screenshots of the issue. As you can see the footer contents are messed up.

Solution
@wordshaker I would like to work on this issue and I have a fix for it. The solution screenshot is provided below.