This content originally appeared on DEV Community and was authored by Ikoh Sylva
We kicked off the class with a review of our previous session, which you can find here. Following that, we delved into Beyond Beginner Concepts and much more!
Exploring Advanced Web Features
As developers progress beyond the basics, several advanced APIs and concepts become essential for creating responsive and efficient web applications. Here’s a look at some key tools and mechanisms.
1. Mutation Observer
This API allows developers to monitor changes in the DOM, such as when elements are added, removed, or modified. It is particularly useful for responding to dynamic updates without continuously polling the DOM.
Example:
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
console.log('Mutation detected:', mutation);
});
});
observer.observe(document.body, { childList: true, subtree: true });
2. Resize Observer
The Resize Observer API enables developers to listen for changes to the size of an element. This is beneficial for responsive designs that adapt to changes in layout.
Example:
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('Element resized:', entry.contentRect);
}
});
resizeObserver.observe(document.querySelector('.resizable'));
3. Intersection Observer
This API helps determine when an element enters or exits the viewport. It’s particularly useful for implementing lazy loading of images or triggering animations as elements come into view.
Example:
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Element is in view:', entry.target);
}
});
});
observer.observe(document.querySelector('.target-element'));
4. Selection and Range
The Selection and Range APIs allow developers to manipulate user-selected text and create dynamic content. This can enhance text editing experiences and custom user interactions.
Example:
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(document.querySelector('.text'));
selection.removeAllRanges();
selection.addRange(range);
5. Web Workers
Web Workers enable multi-threading in JavaScript, allowing for background processing without blocking the main thread. This is crucial for handling heavy computations or data processing tasks.
Example:
const worker = new Worker('worker.js');
worker.postMessage('Start processing');
worker.onmessage = (event) => {
console.log('Worker response:', event.data);
};
6. Service Workers
Service Workers act as a proxy between a web application and the network, enabling features like offline access and caching strategies. They are essential for building Progressive Web Apps (PWAs).
Example:
self.addEventListener('install', (event) => {
console.log('Service Worker installed');
});
7. Event Loop: Microtasks and Macrotasks
Understanding the event loop is crucial for managing asynchronous operations. Microtasks (like Promises) are executed before macrotasks (like setTimeout), influencing how tasks are prioritized in the execution queue.
Example:
console.log('Start');
setTimeout(() => {
console.log('Macrotask');
}, 0);
Promise.resolve().then(() => {
console.log('Microtask');
});
console.log('End');
// Output:
// Start
// End
// Microtask
// Macrotask
Understanding Network Requests
Network requests are fundamental in web development, enabling communication between client and server. Various APIs and techniques facilitate these interactions, enhancing functionality and user experience.
1. Fetch and Its API
The Fetch API provides a modern way to make network requests, replacing the older XMLHttpRequest. It supports promises, making it easier to handle asynchronous operations.
Example:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
2. Form Data
The Fetch API can handle form submissions easily with the FormData object, which automatically constructs a set of key/value pairs representing the form fields.
Example:
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(form);
fetch('/submit', {
method: 'POST',
body: formData,
});
});
3. Download Progress and Aborting Requests
While the Fetch API does not directly support progress tracking, it can be achieved with streams. Additionally, requests can be aborted using the AbortController.
Example:
const controller = new AbortController();
fetch('https://api.example.com/largefile', { signal: controller.signal })
.then(response => {
// Handle response
});
// To abort the request
controller.abort();
4. Cross-Origin Requests
Cross-origin requests are managed through CORS (Cross-Origin Resource Sharing), allowing secure access to resources from different origins.
Example:
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
mode: 'cors', // Enables cross-origin requests
});
5. URL Objects
The URL API allows for easy manipulation and construction of URLs, making it simpler to work with query parameters and paths.
Example:
const url = new URL('https://example.com?foo=bar');
url.searchParams.append('baz', 'qux');
console.log(url.href); // Outputs: https://example.com?foo=bar&baz=qux
6. XMLHttpRequest
Although largely replaced by Fetch, XMLHttpRequest is still used in some cases. It provides a way to make network requests and handle responses synchronously or asynchronously.
Example:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = () => console.log(xhr.responseText);
xhr.send();
7. Resumable File Upload
Resumable uploads allow large files to be uploaded in chunks, resuming from the last successful chunk in case of interruptions, often using protocols like HTTP/1.1 or specialized libraries.
8. Long Polling
Long polling is a technique that allows clients to receive real-time updates by keeping a request open until the server has new data to send.
9. WebSockets
WebSockets provide a full-duplex communication channel over a single TCP connection, ideal for real-time applications like chat services or live notifications.
Example:
const socket = new WebSocket('wss://example.com/socket');
socket.onmessage = (event) => {
console.log('Message from server:', event.data);
};
10. Server-Sent Events (SSE)
SSE allows servers to push updates to clients over a single HTTP connection, perfect for applications that require real-time updates without the need for constant polling.
Example:
const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
console.log('New event:', event.data);
};
Web Components
Web Components are a set of standards that enable developers to create reusable, encapsulated HTML elements. They enhance modularity and maintainability in web applications by allowing for the creation of custom elements.
1. Basics of Web Components
Web Components consist of three main technologies: Custom Elements, Shadow DOM, and HTML Templates. These technologies work together to provide a framework for building encapsulated and reusable components.
2. Custom Elements
Custom Elements allow developers to define new HTML tags and associated behavior. This means you can create elements that behave like standard HTML elements but with custom functionality.
Example:
class MyElement extends HTMLElement {
constructor() {
super();
this.textContent = 'Hello, Custom Element!';
}
}
customElements.define('my-element', MyElement);
In HTML, you can then use the new custom tag:
<my-element></my-element>
3. Shadow DOM
The Shadow DOM enables encapsulation of styles and markup. This means styles applied inside a shadow tree do not affect the outer document, and vice versa, preventing style conflicts.
Example:
class ShadowElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `<style>p { color: blue; }</style><p>Hello, Shadow DOM!</p>`;
}
}
customElements.define('shadow-element', ShadowElement);
4. Template Elements
The <template> element allows developers to define HTML fragments that are not rendered immediately. Instead, they can be cloned and inserted into the document when needed.
Example:
<template id="my-template">
<p>This is a template content.</p>
</template>
You can clone and use the template like this:
const template = document.getElementById('my-template').content;
document.body.appendChild(document.importNode(template, true));
5. Shadow DOM Slots and Composition
Slots enable the insertion of content from the light DOM into the shadow DOM. This allows for flexible composition of components.
Example:
class SlotElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<slot name="my-slot"></slot>
`;
}
}
customElements.define('slot-element', SlotElement);
In HTML:
<slot-element>
<div slot="my-slot">This goes into the slot!</div>
</slot-element>
6. Shadow DOM CSS
Styles defined within a shadow DOM are scoped to that shadow tree, preventing them from leaking into or being affected by styles in the main document.
7. Shadow DOM Events
Events can be dispatched from shadow DOM elements, enabling interaction with the light DOM. Developers can listen for these events in the outer document.
Example:
this.dispatchEvent(new CustomEvent('my-event', { detail: { message: 'Hello!' } }));
Pattern Matching
Pattern matching in JavaScript is primarily achieved through Regular Expressions (RegEx), a powerful way to identify and manipulate strings based on specific patterns.
1. Regular Expressions
Regular expressions are sequences of characters that define search patterns. They can be used for searching, validating, and replacing text.
2. Patterns and Flags
Regular expressions can include flags that modify their behavior. Common flags include:
g: Global search
i: Case-insensitive search
m: Multiline mode
3. Character Classes
Character classes define a set of characters to match. For example, [abc] matches any of the characters a, b, or c.
4. Unicode Support
The u flag enables support for Unicode characters, allowing patterns to match any Unicode character. For example, \p{...} can be used to match specific Unicode categories.
5. Anchors
Anchors define positions in the string:
^matches the start of a string.$matches the end of a string.
In multiline mode (with the m flag), ^ and $ will match the start and end of each line.
6. Word Boundaries
The \b character specifies a word boundary, helping to match whole words without including adjacent characters.
7. Escaping Special Characters
Special characters in regex (like . or *) need to be escaped with a backslash (\) to be treated as literal characters.
8. Sets and Ranges
Sets can define a group of characters, while ranges specify a span. For example, [a-z] matches any lowercase letter from a to z.
9. Quantifiers
Quantifiers specify how many times a character or group must appear:
+matches one or more times.*matches zero or more times.?matches zero or one time.{n}matches exactly n times.
10. Greedy and Lazy Quantifiers
Greedy quantifiers match as much text as possible, while lazy quantifiers (like *?) match as little as possible.
11. Capturing Groups
Capturing groups, defined by parentheses (…), allow you to extract parts of the matched string.
12. Backreferences
Backreferences (\N or \k<name>) can refer to previously captured groups within the same regex.
13. Alternation
The | operator provides a way to specify alternatives in a pattern, effectively acting as a logical OR.
14. Lookahead and Lookbehind
Lookahead (?=…) checks for a pattern ahead without including it in the match, while lookbehind (?<=…) checks for a pattern before the current position.
15. Catastrophic Backtracking
This occurs in regex when the engine has to explore many possibilities, leading to performance issues. Writing efficient regex can help avoid this.
16. Named Groups
Named groups, defined as (?<name>…), allow for easier reference and extraction of specific matches.
17. Sticky Flag
The y flag restricts the search to the exact position of the string, allowing for more precise matching.
18. Methods of RegExp and String
JavaScript provides various methods for regex, including:
test(): Tests for a match in a string.exec(): Executes a search for a match in a string.String methods like
replace(),match(), andsplit()also support regex.
19. RegExp Golf Exercise
This is a coding challenge that encourages developers to write the shortest regex possible to match specific strings.
20. Performance Tips
Optimizing regex patterns can improve performance. Avoiding unnecessary backtracking, using non-capturing groups when capturing is not needed, and being mindful of the complexity of the patterns can enhance efficiency.
Conclusion
This marks the conclusion of our JavaScript Course. While our instructor provided assignments, I won’t be sharing those to maintain exclusivity and adhere to AltSchool's Terms and Conditions. However, I’m happy to share my own assignment below.
Mini Project Assignment: Build a Simple Quiz App
Project Overview
Create a simple quiz application where users can answer questions and receive instant feedback on their performance. This project will help you practice JavaScript fundamentals, including DOM manipulation, event handling, and basic data structures.
Project Features
Question Display: Show one question at a time with multiple-choice answers.
Score Tracking: Keep track of the user's score as they answer questions.
Feedback: Provide immediate feedback after each question (correct/incorrect).
Final Score: Display the total score at the end of the quiz.
Restart Option: Allow users to restart the quiz after completion.
Instructions
1. Setup Your HTML Structure
Create a simple HTML layout with the following elements:
A title for the quiz.
A container for displaying questions and answers.
A button to submit answers.
A section to display the score and feedback.
2. Style Your App
Add some basic CSS to make your quiz visually appealing. Style the buttons, questions, and feedback messages.
3. Create a Question Array
Define an array of question objects, each containing a question, multiple-choice answers, and the correct answer.
4. Implement Quiz Logic
Use JavaScript to handle the quiz logic: displaying questions, capturing answers, checking correctness, and updating the score.
5. Test Your App
Run your quiz application in the browser. Test it by answering questions and check if the score updates correctly. Ensure the restart functionality works as intended.
This mini project is a great way to practice your JavaScript skills in a fun and engaging way. You can extend the application by adding features like timed questions, a leaderboard, or even animations. I hope you just enjoy coding this quiz app. Have fun!
Share Your Work
Once you’re done, upload your project on GitHub and GitHub Pages or any other free web hosting service.
Share your link using the hashtag #MyCloudJourneyWithSylva on social media and tag me. I’ll be sure to check it out!
I encourage you to dive deeper into the concepts we've discussed and continue practicing to refine your skills. If you have read all the way to this point thank you So much! I appreciate the effort. If you also found this interesting and would love to take the next steps in the application process do use my referral link below;
Apply here and use this Code: W2jBG8 during the registration process and by so doing, you will be supporting me while also getting a discount!
Special Offer: By signing up through the link and using the code shared, you’ll receive a 10% discount!
Don’t miss out on this opportunity to transform your future and also save while doing it! Let’s grow together in the tech space. Also feel free to reach out if you need assistance or clarity regarding the program.
I would love to hear your feedback and insights. Please leave a comment below to join the conversation!
I’m Ikoh Sylva, a passionate cloud computing enthusiast with hands-on experience in AWS. I’m documenting my cloud journey from a beginner’s perspective, aiming to inspire others along the way.
If you find my content helpful, please like and follow my posts, and consider sharing this article with anyone starting their own cloud journey.
Let’s connect on social media. I’d love to engage and exchange ideas with you!
This content originally appeared on DEV Community and was authored by Ikoh Sylva
Ikoh Sylva | Sciencx (2025-08-10T13:20:32+00:00) AltSchool Of Engineering Tinyuka’24 Month 6 Week 1. Retrieved from https://www.scien.cx/2025/08/10/altschool-of-engineering-tinyuka24-month-6-week-1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.