Replacing jQuery with Vanilla JavaScript

Discover how jQuery became essential for front-end development with cross-browser support, css selectors, animations, and plugin architecture, and how the landscape shifted toward vanilla JavaScript.

Explore replacing jQuery with vanilla JavaScript by embracing modular code, native DOM APIs like querySelectorAll, and fetch for asynchronous tasks in modern browsers.

The lecture outlines upcoming lessons on replacing jQuery with vanilla JavaScript, covering manipulation, class attributes, and using native methods with simple one-file demos.

Learn how to add, check, remove, and toggle classes on elements using jQuery, including multiple class handling and state-based toggling. Then see how these concepts translate to vanilla JavaScript.

Replace jQuery with vanilla JavaScript by using document.querySelector and querySelectorAll to select elements and manipulate classes with classList, including add, remove, toggle, and replace.

Learn to verify feature support in a front-end compatibility page, distinguish full and partial browser support, and address vanilla JavaScript DOM tasks when legacy browsers limit classList operations.

Learn how to clone HTML elements in jQuery, including copying event handlers with the data and events flag, and manage click events before moving to vanilla JavaScript.

Explore copying HTML elements in vanilla JavaScript with cloneNode for deep copies, compare vanilla event handling to jQuery, and decide when to copy nodes versus their children.

Demonstrates wrapping and unwrapping HTML elements with jQuery, including creating new parents, wrapping selected elements, and wrapping all content, then preparing to implement these with vanilla JavaScript.

Explore wrapping html elements with vanilla javascript by selecting elements with querySelectorAll, iterating with forEach, and updating innerHTML using template literals, contrasting with jQuery wrap.

Explore how jQuery handles event handlers versus JavaScript, wrapping a button with a wrapper to apply a white background and preserve click functionality.

Discover how to insert one element into another using vanilla JavaScript, replacing jQuery methods with native equivalents, including append, prepend, wrap, and content extraction via text.

Explore how to insert elements in vanilla JavaScript using before and after techniques, including insert before and insert after, to position new nodes relative to existing ones.

Learn how to remove HTML elements with vanilla JavaScript, compare detach and remove, and understand unwrap and element wrapping, including effects on event handlers and memory.

Explore two vanilla javascript replacement methods to swap elements with new content, using the first or second parameter for replace all or replace with, illustrated by a querySelector example.

Explore the difference between HTML attributes and DOM properties using a link example. Attributes hold initial HTML values, while properties reflect the current state, as shown in the inspector.

Explore how vanilla JavaScript uses properties for checkbox state, and how jQuery uses prop and attr to read or set values.

Demonstrates manipulating CSS with vanilla JavaScript using the CSX approach, retrieving computed styles, and setting multiple properties via objects, while handling browser quirks and camelCase names.

Discover vanilla JavaScript techniques to replace jQuery, from getElementById and style properties to getComputedStyle. Employ destructuring, shorthand properties, template literals, and Object.entries to manage CSS dynamically.

Apply vanilla JavaScript styling to a collection of elements by using a style object and setting properties with square bracket notation, including cssText and inline styles.

Master element dimensions in vanilla javascript for replacing jQuery, by computing height, offset, and bounding client rect, and compare with jQuery techniques, using parseInt and style properties.

Explore CSX hooks to access properties, apply automatic prefixes, and handle escaped selectors, then use a class-based CSS approach with a function to manage prefixes instead of jQuery.

Learn how to replace jQuery selectors with vanilla JavaScript using querySelectorAll and CSS selectors, and navigate zero-based versus one-based indexing with even and greater-than selectors.

Replace jQuery with vanilla JavaScript by manipulating an element's class list to trigger flip and animated effects, using the CFS library's animations and noting polyfill limitations for old browsers.

Explore traversing and modifying elements with vanilla JavaScript, converting node lists to arrays, and using map, filter, and reduce to work with siblings and previous elements.

Explore how jQuery events define and handle element events with a concise API, including attach, trigger, on/off patterns, focus events, and native event listener alternatives.

Replace jQuery with vanilla JavaScript by showing how to handle video playback and events with standard event listeners. Explore one-time bindings and browser inconsistencies, using concise arrow-function callbacks.

Explore the document ready concept in jQuery and its vanilla JavaScript equivalents, compare DOMContentLoaded and window load, and learn how web components and custom elements shape DOM manipulation.

Master form serialization in vanilla JavaScript by exploring serialization techniques for multi selects and checkboxes. Compare serialize and serializeArray, work with formData, and base64 encode characters for URL transmission.

Explore retrieving form values in vanilla JavaScript by using document.querySelector, handling inputs like checkboxes, radio, and multi-select options, and compare with jQuery getters.

Explore web components as an umbrella for four techniques, including HTML templates, custom elements, shadow DOM, and modules, and learn how imports and exports fit into vanilla JavaScript.

Explore building web components by creating custom elements that extend HTMLElement, use the connectedCallback lifecycle, register with the customElements registry, prefix tag names, and define attributes.

Explore GitHub's case study on removing jQuery, adopting querySelectorAll and custom elements, and applying progressive enhancement for accessibility, SEO, and resilient front-end design.

Explore html templates and custom elements, defining new tags and cloning template content with deep copy in connected callbacks. See how templates keep content non-rendered until cloning and insertion.

Learn how Shadow DOM provides style encapsulation by attaching an open shadow root to a custom element, preventing outer styles from affecting inner content.

Discover how the browser fetch API handles requests and responses with promises, including status checks and error handling, and contrast it with older Ajax and jQuery patterns.

Discover how async and await let you write asynchronous JavaScript in a synchronous-like style, awaiting fetch results, assigning them to constants, and streaming the JSON body.

Explore deferred and callbacks in jQuery, learning how to chain actions, manage pending and resolved states, and convert to promises, plus a publisher-subscriber pattern for central messaging.

Create and manage promises in vanilla JavaScript using new Promise with resolve and reject, then chain results. Explore Promise.all and Promise.race to coordinate multiple promises, including timing with setTimeout.

Explore jQuery data operations: attach key-value data or metadata to elements, read and remove data, use simple or complex values, and store in local storage.

Learn how the dataset property links data attributes to JavaScript properties, update attributes via data attributes, and validate attribute usage for custom elements in vanilla JavaScript.

Explore how jQuery queues animations and operations, manage events, and control execution order. Learn how vanilla JavaScript requires building your own queue mechanisms and event handling.

Explore the core concepts of a global object, no-conflict mode, the ready event, and managing externally loaded scripts when replacing jQuery with vanilla JavaScript.

Explore the internals and properties of the jQuery-like library, including context with a version number and npm's package.json as the single source of truth, and count elements with length.

Explore miscellaneous jQuery utilities and how vanilla JavaScript handles them with forEach, spread operators, and object merging in modern browsers.

Explore how to read a browser usage table and a compatibility map to plan JavaScript feature use across browsers, incorporating polyfills, shims, TypeScript, and Babel transpilation.

Chromium underpins Microsoft Edge, Google Chrome, and Opera, shaping the modern browser landscape. This dominance prompts questions about browser diversity and the need for older browsers.

Explore shims and polyfills for adding new functionalities to old browsers, including session storage simulations, npm packages, and guidelines for including scripts only when necessary.

Explore polyfills, especially core-js, as shims for modern features. Learn to include only needed parts via global or modular versions, with babel integration to reduce bundles.

Explore Babel’s role in translating modern JavaScript features into older syntax, from template literals to let and classes, and compare it with TypeScript’s static typing and transpilation.

Explore Babel configuration with presets and core, npm workflows, and a hands-on demo app that shows converting sets to arrays to use array methods for older browser compatibility.

Explore configuring Babel to transpile modern JavaScript to older browsers using preset-env and browserslist, via a CLI and a configuration object that targets browsers like Internet Explorer 8.

Explore Babel configuration with core-js to optimize builds, differentiate runtime and development dependencies, and enable smart usage-based polyfilling that performs tree-shaking to remove unused code.

Learn how Babel and polyfills enable modern JavaScript to run in older browsers through transpiling and bundling, with IE testing and progressive removal as usage declines.

Download the full presentation and work through all the examples to learn replacing jQuery with vanilla JavaScript. Start using vanilla JavaScript daily to gradually achieve success.

Promote bonus courses and materials in Polish and English, including JavaScript and backend resources. Learn how to receive time-limited coupon codes by joining the official page and mailing list.