Here is a list of case examples that you may explore to learn and adapt to your requirements.
- Accessible Gallery: Very simple to use. Technology stack: HTML, CSS, TypeScript.
- Supported mime-type by media audio or video: Check which MIME types specified by your browser that should be able to successfully play the audio and video.
- Check if a string is valid HTML using JavaScript: Determine if provided string is valid HTML using different mime-types like
text/html,text/xml,application/xml,application/xhtml+xml, andimage/svg+xml. - CSS background lazy loading: Can you lazy load CSS background images? It isn’t available out of the box, but it can be done using
IntersectionObserver. - CSS content hidden from the screen reader: Test hiding CSS
contentvalue from the assistive technologies like screen reader. - Detect browser zoom level example: A playground to test how different type of zoom level can be determined using JavaScript.
- Add, remove, and modify badge on the current web page favicon: An example of adding, modifying and removing a badge to the browser tab favicon using JavaScript.
- Improved lazy loading for video, audio, and image: Use this solution for lazy loading of video, audio or image files, but only when item is in the viewport within certain amount of time.
- Supported mime-type returned by MediaRecorder.isTypeSupported: Check, which mime-type is returned by MediaRecorder.isTypeSupported in your browser.
- Optimize image on the client side: Play with png and jpg image optimization on the client side only.
- Page To Speechalpha: Play with reading aloud text using the browser SpeechSynthesis interface of the Web Speech API.
- Accessibility and tooltip example: Tooltip variants with Anchor Positioning API and Popover API.
- Responsive images – live example: See how srcset and sizes are really working in a wild.
- All Google Docs URL parameters, functions, and commands: Try out all undocumented URL parameters for Google Docs Viewer live.
- What is my viewport size and other details: Determine viewport size, screen size, is touch device, orientation and scale text and pinch zoom factor.