jQuery 4 FINALLY released... (What!) - CourtneyR.dev's 2nd Brain

jQuery 4 FINALLY released... (What!?) 🔗 **Source:** [jQuery 4 FINALLY released... (What!?)](https://www.youtube.com/watch?v=HNp8naNxS0w) > [!note]+ Document Notes > tags: [jquery, javascript, web-development] > author: Theo - t3․gg > source: YouTube > reference: https://www.youtube.com/watch?v=HNp8naNxS0w > date created: 2024-12-22 10:30 > > # 🏷️ Title: jQuery 4 FINALLY released... (What!?) >  ## 🧰 Action Inbox - [H1] Consider jQuery 4 migration impact — legacy browser support dropped #modernization - [H2] Evaluate slim build adoption — 19.5KB alternative available #performance - [H3] Review deprecated function usage — native JS replacements exist #refactoring ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [jQuery 4.0.0 Release](https://jquery.com/) - [Modern Browser Support](https://caniuse.com/) ## 📝 Summary - jQuery 4.0 released after 8 years, marking first major update since 2016 - Drops support for Internet Explorer 10 and below, modernizes codebase - Still powers 88% of websites, largely due to WordPress usage - Breaking changes include removal of functions now native to JavaScript - Offers slim build at 19.5KB for modern development needs ## 📖 Main Content jQuery 4 represents a significant modernization effort for the 20-year-old library that still powers the majority of websites. The release drops legacy browser support, migrates to ES modules, and removes functions that are now native to JavaScript. While jQuery may seem outdated compared to modern frameworks like React, it remains crucial infrastructure for existing applications and demonstrates how JavaScript has evolved to incorporate many features that once required external libraries. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/HNp8naNxS0w?t=0) — [H1] jQuery 4 Release Timeline - Key idea: First major version since 2016, after 2 years in beta - Evidence: "20 years after jQuery was first introduced" #### ⏱️ [00:23](https://youtu.be/HNp8naNxS0w?t=23) — [H2] Current Usage Statistics - Key idea: jQuery remains widely adopted across the web - Evidence: "88% of all websites still use it, thanks mostly probably to WordPress" #### ⏱️ [00:45](https://youtu.be/HNp8naNxS0w?t=45) — [H3] Breaking Changes Approach - Key idea: Major version used for accumulated breaking changes - Evidence: "trimming legacy code, removing deprecated APIs and never documented functions" #### ⏱️ [01:05](https://youtu.be/HNp8naNxS0w?t=65) — [H1] Browser Support Changes - Key idea: Legacy Internet Explorer support officially dropped - Evidence: "Support for Internet Explorer 10 and below... dropped" #### ⏱️ [01:35](https://youtu.be/HNp8naNxS0w?t=95) — [H2] Modern Browser Requirements - Key idea: Modernized browser support matrix implemented - Evidence: "iOS versions earlier than the last three, Firefox versions earlier than the last two" #### ⏱️ [01:55](https://youtu.be/HNp8naNxS0w?t=115) — [H1] ES Module Migration - Key idea: Source code modernized from AMD to ES modules - Evidence: "should now play nicely with Vite, Webpack, and modern build systems" #### ⏱️ [02:25](https://youtu.be/HNp8naNxS0w?t=145) — [H1] Removed JavaScript Functions - Key idea: Native JavaScript has replaced many jQuery utilities - Evidence: "isArray, parseJSON, trim, now isNumeric isFunction, and loads loads more" #### ⏱️ [03:15](https://youtu.be/HNp8naNxS0w?t=195) — [H2] Focus Event Handling Fixed - Key idea: Browser consistency allows native focus behavior - Evidence: "all supported browsers except Internet Explorer have the exact same order" #### ⏱️ [03:50](https://youtu.be/HNp8naNxS0w?t=230) — [H2] Modernization Opportunities - Key idea: Additional jQuery features have modern alternatives - Evidence: "deferreds and callbacks which can be replaced with promises" #### ⏱️ [04:15](https://youtu.be/HNp8naNxS0w?t=255) — [H3] Slim Build Option - Key idea: Reduced bundle size for modern development - Evidence: "slim build strip out a load of these extra modules, making it just 19.5 kilobytes" #### ⏱️ [04:45](https://youtu.be/HNp8naNxS0w?t=285) — [H3] Historical Bug Fixes - Key idea: Long-standing issues finally resolved - Evidence: "oldest I could find was from 2014... jQuery autopromoting JSON to JSONP" #### ⏱️ [05:15](https://youtu.be/HNp8naNxS0w?t=315) — [H3] CSS Unit Handling Fix - Key idea: Automatic pixel appending behavior corrected - Evidence: "jQuery CSS setter would automatically append pixels to any number that didn't specify a unit" #### ⏱️ [05:45](https://youtu.be/HNp8naNxS0w?t=345) — [H2] jQuery's Ongoing Relevance - Key idea: Legacy infrastructure remains important despite modern alternatives - Evidence: "boring, simple, and old tools are actually the ones holding the web together" ## 📚 References - [jQuery Official Website](https://jquery.com/) - [WordPress Usage Statistics](https://wordpress.org/) - [Browser Support Documentation](https://jquery.com/browser-support/) ## 🗣️ Paraphrase - jQuery 4 drops Internet Explorer 10 support and migrates to modern ES modules for better tooling compatibility - Many utility functions removed because JavaScript now provides native implementations for array checking, JSON parsing, and string trimming - A slim build reduces bundle size to 19.5KB by removing legacy features that have modern CSS or Promise-based alternatives ## 📰 Newsletter **jQuery 4.0 Brings Modern Tooling to the Web's Most Popular Library** After 8 years, jQuery released its first major update, modernizing the 20-year-old library while maintaining compatibility for the 88% of websites that depend on it. The update drops Internet Explorer 10 support, migrates to ES modules for better Webpack/Vite integration, and removes functions now native to JavaScript. For WordPress developers, this represents a careful balance between modernization and stability. The new slim build at 19.5KB offers performance benefits, while the full version maintains backward compatibility for existing themes and plugins. **Key benefits:** Better build tool integration, smaller bundle options, and alignment with modern JavaScript standards. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Evaluate jQuery 4 compatibility with WordPress core, update dependency management - Themes: Review theme compatibility, test with new slim build option - Plugins: Audit plugin dependencies, migrate from deprecated jQuery functions - Performance: Assess slim build adoption impact on Core Web Vitals #### Community - Contributors: Create migration guides for common jQuery patterns to native JavaScript - Maintainers: Update coding standards documentation for jQuery 4 compatibility ## 🧪 Hypotheses - WordPress sites using jQuery slim build will see improved Core Web Vitals scores - Legacy jQuery function removal will accelerate adoption of native JavaScript patterns - ES module support will improve developer experience in modern WordPress build processes - jQuery 4 adoption rate will correlate with Internet Explorer usage decline ### 📊 Methodology - Performance testing: Compare full vs slim jQuery builds on representative WordPress sites - Compatibility analysis: Automated testing of popular themes/plugins against jQuery 4 - Developer survey: Measure adoption barriers and migration pain points ### ❓ Questions - How will WordPress core handle the jQuery 4 migration timeline? - What percentage of WordPress plugins rely on deprecated jQuery functions? - Can the slim build become the default for new WordPress installations? ### 🔮 Future Research - Long-term jQuery usage trends in the WordPress ecosystem - Performance impact analysis of jQuery alternatives in WordPress themes - Developer productivity metrics for native JavaScript vs jQuery patterns ### 💡 Implications - Practice: Developers need to audit and update jQuery-dependent code - Policy: WordPress may need staged migration strategy for jQuery 4 adoption - Security: Dropping legacy browser support reduces attack surface - Education: Training materials needed for jQuery to native JavaScript migration - Funding: Investment required for compatibility testing and migration tooling ### 🧠 Learning Styles Assessment Reading level estimate: 8th grade (accessible technical content) #### 👀 Visual learners - Present: Usage statistics, browser support matrix implied - Improve: Timeline diagram showing jQuery evolution, browser support comparison chart #### 🔊 Aural learners - Present: Video format with clear narration - Improve: Downloadable audio summary, technical term pronunciation guide #### 🗣️ Verbal learners - Present: Clear definitions, historical context, analogies to language evolution - Improve: Glossary of technical terms, comparison stories #### 🧩 Kinesthetic learners - Present: Installation commands, practical migration examples - Improve: Step-by-step migration checklist, hands-on compatibility testing guide #### 🧠 Logical learners - Present: Chronological progression, cause-effect relationships - Improve: Decision tree for jQuery vs native JavaScript choices #### 🧑‍🤝‍🧑 Social learners - Present: Community discussion prompts, shared experiences - Improve: Migration experience sharing forum, peer review guidelines #### 🧘‍♀️ Solitary learners - Present: Self-directed exploration suggestions, individual reflection - Improve: Personal migration assessment worksheet, self-paced learning path #### 🌿 Naturalistic learners - Present: Web ecosystem evolution analogies - Improve: Technology lifecycle comparisons, sustainability impact discussion ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive content - Improve: Alt text for any visual elements, ARIA labels for technical concepts #### Keyboard navigation - Present: Standard video player controls - Improve: Timestamp navigation shortcuts, transcript interaction #### Contrast and readability - Present: Standard YouTube player interface - Improve: High contrast mode support, custom subtitle styling #### Text resizing and reflow - Present: Responsive video player - Improve: Scalable transcript text, mobile-optimized technical details #### Media and captions - Present: Auto-generated captions available - Improve: Professional transcript with technical term accuracy #### Forms and interactions - Present: Standard comment interface - Improve: Accessible code example interactions, keyboard-friendly demos ### 🌍 DEIB Assessment #### Cultural breadth - Present: English-focused content, Western web development perspective - Improve: Multi-language jQuery adoption data, global usage examples #### Inclusive language - Present: Gender-neutral technical language, accessible explanations - Improve: Define technical jargon consistently, avoid cultural idioms #### Neurodiversity support - Present: Clear section breaks, consistent structure - Improve: Content outline upfront, predictable information hierarchy #### Representation - Present: Focus on technical content over personal representation - Improve: Diverse developer use case examples, varied project contexts #### Psychological safety - Present: Non-judgmental tone about legacy technology use - Improve: Validation of different technical choices, migration anxiety acknowledgment ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Browser evolution → jQuery adaptation (timestamp 3:15) - Inductive strength: 88% usage statistics → continued relevance (timestamp 0:23) - Causal reasoning: ES module adoption → better tooling integration (timestamp 1:55) - Analogical strength: Language evolution comparison to library evolution (timestamp 2:45) #### Fallacies - Appeal to popularity: High usage statistics don't necessarily validate technical merit - False dilemma: Presents jQuery vs modern frameworks as binary choice rather than contextual decision #### Tone of voice - Overall tone: Informative and respectful, balancing nostalgia with pragmatism about modern development ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on accusers present - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Positive framing of legacy technology, respectful treatment of different technical choices ## 🎯 Conclusion jQuery 4 represents a thoughtful modernization of critical web infrastructure, balancing backward compatibility with forward progress. For WordPress developers, this update offers opportunities to improve performance while maintaining the stability that has made jQuery endure for two decades. The key is strategic migration planning that respects both legacy applications and modern development practices. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] jQuery maintains massive web presence despite age > [!quote] [jQuery 4 FINALLY released... (What!?)](https://www.youtube.com/watch?v=HNp8naNxS0w) by [[Theo - t3․gg]] via [[YouTube]]. Published 2024. Accessed 2024-12-22. > "88% of all websites still use it, thanks mostly probably to WordPress." Demonstrates jQuery's continued relevance in modern web development ecosystem, particularly through WordPress integration. [view highlight](https://www.youtube.com/watch?v=HNp8naNxS0w#H1) #webdev #statistics ID:rw_jquery_usage_2024 ### [H2] Native JavaScript evolution reduces library dependencies > [!quote] [jQuery 4 FINALLY released... (What!?)](https://www.youtube.com/watch?v=HNp8naNxS0w) > "You can now do pretty much all of these in JavaScript itself without the need for an additional library." Shows how language evolution can make previously essential libraries optional for new development. [view highlight](https://www.youtube.com/watch?v=HNp8naNxS0w#H2) #javascript #evolution ID:rw_js_native_functions --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Legacy browser support drives library evolution - Major version releases provide opportunity to drop outdated compatibility requirements - Pointer to timestamp 1:05 - Links: [[Browser-Support-Strategy]] [[Breaking-Changes-Management]] #### [Z2] Bundle size optimization through modular architecture - Slim builds allow modern performance while maintaining full compatibility options - Pointer to timestamp 4:15 - Links: [[Performance-Optimization]] [[Library-Architecture]] --- ### ✏️ Fleeting Queue - [F1] Research WordPress jQuery 4 migration timeline — core team communications #fleeting #wordpress - [F2] Compare jQuery slim build performance metrics — real-world testing needed #fleeting #performance - [F3] Document deprecated jQuery functions — migration guide creation #fleeting #documentation --- ## Full Transcript [00:00] jQuery 4 is finally here. And no, don't [00:02] worry, you haven't traveled back in [00:03] time. This is just our first major [00:05] version update since 2016. It's been in [00:07] beta for 2 years, and it comes 20 years [00:10] after jQuery was first introduced. And [00:12] it might surprise you to learn that [00:14] jQuery is still pretty important. 88% of [00:16] all websites still use it, thanks mostly [00:19] probably to WordPress. But you can also [00:20] see there's still some pretty big names [00:22] that are running it, too. I mean, if it [00:24] ain't broke, don't fix it. Except this [00:26] update might actually break some things [00:27] as they've used this one to make all of [00:29] the breaking changes they've wanted to [00:30] make for years, including trimming [00:32] legacy code, removing deprecated APIs [00:34] and never documented functions, and just [00:36] a whole host of bug fixes. So, let's [00:39] just dive right in, take a look at the [00:40] key changes, and just how far J Career [00:43] has come in 20 years. [00:49] For the first big change, Paul went out [00:51] for Internet Explorer 10 and below. [00:53] Support for this has now been dropped, [00:55] but don't panic if you're watching this [00:57] on Internet Explorer 11. Support for [00:59] that won't be dropped until jQuery 5. [01:01] So, you still have some time to hit that [01:02] subscribe button. Alongside this, they [01:04] also drop support for Edge Legacy, iOS [01:06] versions earlier than the last three, [01:08] Firefox versions earlier than the last [01:10] two and also Android browser. So, you [01:12] can see we are really modernizing now. [01:14] In fact, the next three changes are all [01:16] about that. So, moving on to change [01:18] number two now. Migrating the jQuery [01:20] source code from AMD to ES modules. So, [01:22] it should now play nicely with V, [01:24] Webpack, and modern build systems with [01:26] no tricks required. So, why not give it [01:28] a go and install it in your next project [01:30] just for a little bit of fun or maybe [01:32] for some nostalgia. And talking of [01:33] nostalgia, this update will actually [01:35] show you just how far JavaScript has [01:37] come because for change number three, [01:38] they've removed a bunch of jQuery [01:40] functions because JavaScript has just [01:42] caught up. They include things like is [01:44] array, pass, JSON, trim, now is numeric [01:47] is function, and loads loads more. You [01:49] can now do pretty much all of these in [01:51] JavaScript. itself without the need for [01:53] an additional library. I mean, it's kind [01:55] of crazy that we need an additional [01:56] library to do some of these in the first [01:58] place, but that's the way that languages [02:00] have to evolve. And talking of evolving, [02:03] browsers also evolve as well. So, for [02:05] change number four, the last big one of [02:07] the modernization updates, they finally [02:09] fixed focus order. If you didn't know, [02:11] for years, browsers didn't actually [02:12] agree on an order of focus and blur [02:14] events. So, jQuery had its own [02:16] definition so it would be consistent [02:18] across all of them. But now since [02:20] they're deprecating the old browsers, [02:21] all supported browsers except Internet [02:24] Explorer have the exact same order. So [02:26] jQuery is no longer going to override [02:28] the native behavior. You can really see [02:30] the team focused on making jQuery modern [02:32] here as much of what made jQuery useful [02:34] in the past has just been added to [02:36] JavaScript eventually. Anyways, there is [02:38] still a few things in jQuery that can be [02:40] modernized, like that deferreds and [02:42] callbacks which can be replaced with [02:43] promises unless you're on Internet [02:45] Explorer 11. or there's some animations [02:47] that people do with jQuery that are now [02:48] pretty easy to do in CSS. So, if you do [02:51] want to take it one step further, [02:53] they've actually made that slim build [02:54] strip out a load of these extra modules, [02:56] making it just 19.5 kilobytes. And I [02:59] actually think this is quite a good [03:00] approach to still offer those functions [03:02] in the full package for those that might [03:03] need them, but then offer a slim build [03:05] that doesn't have any of the extras that [03:07] are unneeded these days. So, that's it [03:09] for the key headline changes, but [03:10] obviously there's been a ton of bug [03:12] fixes and minor tweaks, some of them [03:14] dating back years. The oldest I could [03:16] find was from 2014 and it related to [03:18] jQuery autopromoting JSON to JSON P [03:21] which has now been fixed. And there's [03:22] even an issue from 2015 which I actually [03:25] remember running into where jQuery CSS [03:27] setter would automatically append pixels [03:29] to any number that didn't specify a [03:32] unit. This too has now been fixed. [03:34] There's loads more that you can go and [03:36] explore yourself in there. There's even [03:37] some casual fixes like fixing typos, but [03:39] obviously these would take a while to [03:41] cover in this video. And personally, I [03:43] just wanted to take a look at jQuery, [03:45] see how far it's come, as it's such an [03:47] awesome piece of web development [03:48] history. And perhaps it's even rude to [03:50] say history when it's still so actively [03:52] used and maintained. Now, obviously, I [03:55] wouldn't go and use jQuery today instead [03:57] of React or whatever modern framework, [03:59] but it just serves as a reminder that [04:01] the web is built on layers of [04:02] technology, and sometimes the boring, [04:05] simple, and old tools are actually the [04:06] ones holding the web together, [04:08] especially those important legacy apps [04:10] that no one dares to update. So, I'm [04:12] curious to those of you still here, did [04:13] you use jQuery or do you still use it? [04:16] Let me know in the comments below. While [04:17] you're there, subscribe. And as always, [04:19] see you in the next one.