Update Dependencies, Optimize Webpack, Add Cookie Consent, and Enhance Security/Performance" by JuanPabloDiaz · Pull Request #1021 · tech-conferences/confs.tech

JuanPabloDiaz · 2025-07-08T17:00:54Z

This PR started with the idea of fixing the best practices report issue but ends up fixing additional issues such deprecate dependencies, starter script not running due to a compatibility issue after updating dependencies, adding scripts and more.

This pull request introduces several updates to the project, focusing on improving performance, enhancing user experience, and adding new functionality. Key changes include optimizations to the Webpack configuration, updates to package.json dependencies and scripts, the addition of a cookie consent banner, and enhancements to the Twitter follow button to respect user cookie preferences.

Webpack Configuration Updates:

Removed options for dropping console/debugger statements and pure functions in the Terser plugin, simplifying the configuration.
Disabled parallel processing in the CssMinimizerPlugin and removed split chunks and runtime chunk settings to streamline build processes.
Removed the generator configuration for static media files, removing image optimization options like quality settings. [1] [2]
Added namedExport: false to CSS module configurations for consistency. [1] [2]

`package.json` Updates:

Added new scripts (preview, clean) and metadata (description, license) for better project management.
Removed outdated dependencies such as babel-core, babel-preset-env, and tslint to modernize the codebase. [1] [2] [3]

Cookie Consent Banner:

Added a new CookieConsent component to display a banner for cookie preferences, with options to accept or decline. This includes SCSS styles for responsiveness and theme compatibility. [1] [2] [3] [4] [5]
Integrated the CookieConsent component into the App.tsx layout.

Twitter Follow Button Enhancements:

Updated the TwitterFollowButton component to check user cookie consent before loading Twitter widgets. If consent is not given, it displays a simple follow link instead. [1] [2] [3] [4]

Security and Performance Improvements:

Added security headers and a content security policy to the public/_headers file for enhanced security.
Updated public/index.html to improve font loading performance by using Google Fonts with proper URLs and preconnect directives. [1] [2]

…n script

Copilot

Pull Request Overview

This PR modernizes the build setup, removes deprecated settings, and adds user-facing cookie consent and Twitter follow improvements.

Simplify Webpack configuration and update build/start scripts.
Add CookieConsent component and integrate it into the app.
Update TwitterFollowButton to respect user cookie preferences.

Reviewed Changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/scenes/ConferenceList/components/OpenCollectiveContribution/OpenCollectiveContribution.tsx	Add explicit `height` attribute to prevent layout shift.
src/components/TwitterFollowButton/TwitterFollowButton.tsx	Inline fallback link added; cookie‐based widget loading.
src/components/CookieConsent/CookieConsent.tsx	New cookie banner component with accept/decline logic.
src/components/App/App.tsx	Integrate `<CookieConsent />` into application layout.
scripts/start.js	Adjust `WebpackDevServer` instantiation and shutdown APIs.
scripts/preview.js	New preview server script for built output.
public/index.html	Improve font loading performance via Google Fonts.
public/_headers	Add security and CSP headers.
package.json	Add `preview`, `clean` scripts; remove deprecated deps.
config/webpack.config.js	Remove console stripping, CSS optimizations, and code splitting.

Comments suppressed due to low confidence (2)

src/components/CookieConsent/CookieConsent.tsx:1

New interactive components like CookieConsent should have unit tests to cover banner visibility, accept/decline flows, and side effects (e.g., storage updates).

import React, { useState, useEffect } from 'react'

config/webpack.config.js:298

Removing parallel processing and code splitting can increase build time and bundle size. Please verify the impact on production bundle performance.

        new CssMinimizerPlugin(),

Copilot · 2025-07-08T17:06:45Z

src/components/TwitterFollowButton/TwitterFollowButton.tsx

+        href='https://twitter.com/ConfsTech'
+        target='_blank'
+        rel='noopener noreferrer'
+        style={{


[nitpick] Consider moving these inline styles into a CSS/SCSS module for consistency and easier theming.

src/components/CookieConsent/CookieConsent.tsx

Copilot · 2025-07-08T17:06:46Z

package.json

+    "preview": "node scripts/preview.js",
    "test": "node scripts/test.js",
    "lint": "eslint .",
+    "clean": "rm -rf build dist node_modules package-lock.json coverage .eslintcache",


Using rm -rf in npm scripts is not cross-platform. Consider using a tool like rimraf for Windows compatibility.

package.json

Copilot · 2025-07-08T17:06:47Z

public/_headers

+  Referrer-Policy: strict-origin-when-cross-origin
+
+  # Content Security Policy - allowing necessary external resources
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://platform.twitter.com https://cdn.syndication.twimg.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://opencollective.com data: https:; connect-src 'self'; frame-src https://platform.twitter.com; object-src 'none'; base-uri 'self'


Allowing 'unsafe-inline' for scripts/styles weakens CSP. Consider using nonces or hashes instead of 'unsafe-inline'.

Suggested change

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://platform.twitter.com https://cdn.syndication.twimg.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://opencollective.com data: https:; connect-src 'self'; frame-src https://platform.twitter.com; object-src 'none'; base-uri 'self'

Content-Security-Policy: default-src 'self'; script-src 'self' https://platform.twitter.com https://cdn.syndication.twimg.com; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://opencollective.com data: https:; connect-src 'self'; frame-src https://platform.twitter.com; object-src 'none'; base-uri 'self'

JuanPabloDiaz · 2025-07-08T17:11:33Z

Before	After

Co-authored-by: Copilot <[email protected]>

…n; clean up package.json

JuanPabloDiaz · 2025-07-08T17:49:01Z

I have made several updates to the site on previous PRs,including upgrading dependencies, removing deprecated ones, fixing contrast issues for better accessibility, and adopting best practices to boost performance.

What do you think? Any feedback is welcome!

CC: @cgrail, @nimzco

nimzco · 2025-07-08T18:08:38Z

Hey @JuanPabloDiaz !

That's amazing, thank you so much for your work on the website, that's super cool!

At a high level, all the changes look good to me (I haven't reviewed the code yet). That being said, given you're touching different things, I would suggest to break this PR into multiple PRs. Your PR description splits the work well already, so it's really just a code split at this point.

I'm suggesting that, in case where you have to revert a change for XYZ reason.

Let me know what you think :)

JuanPabloDiaz · 2025-07-08T18:57:40Z

Thanks @nimzco — totally agree with your point.
I’ll split this PR into smaller ones following the structure I outlined in the summary.
That way it’s easier to review and revert if needed.
I’ll start opening them shortly 🙌

JuanPabloDiaz · 2025-07-08T19:49:18Z

Hi @nimzco @cgrail!

Thank you for the feedback! 🙏

If I understand correctly, you were suggesting to break this into separate, focused PRs for easier review and potential rollbacks. I've taken your advice and split the comprehensive changes into 6 focused PRs:

refactor: optimize webpack configuration #1022 - Build process improvements
chore: modernize package.json and add utility scripts #1023 - Dependency modernization
feat: enhance security and performance #1024 - Headers and HTML optimizations
feat: add cookie consent banner for privacy compliance #1025 - Privacy compliance
feat: Twitter Button Cookie Integration #1026 - Respect user privacy choices
feat: improve OpenCollective contribution component #1027 - Component enhancements

Is this the kind of split you had in mind?

Hope this will make the review process much smoother. 🚀

JuanPabloDiaz · 2025-07-09T01:18:30Z

All split PRs have been merged Successfully! 🎉

The site has no conflicts. Closing this original PR since all changes are now incorporated through PRs 1022-1027.

nimzco · 2025-07-09T01:50:26Z

Nice! Great job!

JuanPabloDiaz added 5 commits July 8, 2025 11:38

improve best practice

727e4bd

refactor: update WebpackDevServer initialization and cleanup methods

d5475e8

feat: add preview script to serve built files and open in browser

0daaf52

chore(package): add description and license to package.json; add clea…

0ec20cc

…n script

chore: remove deprecated packages from dependencies

84f7a13

JuanPabloDiaz requested a review from Copilot July 8, 2025 17:05

Copilot AI reviewed Jul 8, 2025

View reviewed changes

JuanPabloDiaz and others added 3 commits July 8, 2025 13:11

Update package.json

701b137

Co-authored-by: Copilot <[email protected]>

Update src/components/CookieConsent/CookieConsent.tsx

2692a56

Co-authored-by: Copilot <[email protected]>

fix: update source-map-loader exclusions and adjust TypeScript versio…

2ea5b0d

…n; clean up package.json

JuanPabloDiaz changed the title ~~Best practice~~ Update Dependencies, Optimize Webpack, Add Cookie Consent, and Enhance Security/Performance" Jul 8, 2025

JuanPabloDiaz requested review from cgrail and nimzco July 8, 2025 17:54

JuanPabloDiaz self-assigned this Jul 8, 2025

JuanPabloDiaz closed this Jul 9, 2025

JuanPabloDiaz mentioned this pull request Jul 9, 2025

Dependency Update #1029

Merged

JuanPabloDiaz deleted the best-practice branch July 9, 2025 12:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Dependencies, Optimize Webpack, Add Cookie Consent, and Enhance Security/Performance"#1021

Update Dependencies, Optimize Webpack, Add Cookie Consent, and Enhance Security/Performance"#1021
JuanPabloDiaz wants to merge 8 commits intotech-conferences:mainfrom
JuanPabloDiaz:best-practice

JuanPabloDiaz commented Jul 8, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 8, 2025

Uh oh!

Uh oh!

Copilot AI Jul 8, 2025

Uh oh!

Uh oh!

Copilot AI Jul 8, 2025

Uh oh!

JuanPabloDiaz commented Jul 8, 2025

Uh oh!

JuanPabloDiaz commented Jul 8, 2025

Uh oh!

nimzco commented Jul 8, 2025

Uh oh!

JuanPabloDiaz commented Jul 8, 2025

Uh oh!

JuanPabloDiaz commented Jul 8, 2025

Uh oh!

JuanPabloDiaz commented Jul 9, 2025

Uh oh!

nimzco commented Jul 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

JuanPabloDiaz commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Webpack Configuration Updates:

package.json Updates:

Cookie Consent Banner:

Twitter Follow Button Enhancements:

Security and Performance Improvements:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

JuanPabloDiaz commented Jul 8, 2025

Uh oh!

JuanPabloDiaz commented Jul 8, 2025

Uh oh!

nimzco commented Jul 8, 2025

Uh oh!

JuanPabloDiaz commented Jul 8, 2025

Uh oh!

JuanPabloDiaz commented Jul 8, 2025

Uh oh!

JuanPabloDiaz commented Jul 9, 2025

Uh oh!

nimzco commented Jul 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JuanPabloDiaz commented Jul 8, 2025 •

edited

Loading

`package.json` Updates: