Laboratory

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, and 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, and image/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 content value 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 images: 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 Speech^alpha: 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, touch device orientation, scale text and pinch zoom factor.