Bramus bramus

Windows On-Screen Keyboard vs. Viewports

Device: Dell XPS 13 9380 with Windows 10 Enterprise (19044.1949)
I had to enable a few things before I could trigger the OSK / show the button in the task bar
- Don't recall which ones though :-/
Windows has various concepts for the OSK. If you hit CTRL+WIN+O for example a totally different OSK - one that floats and cannot be docked - pops up

Checking out which Video URLs are allowed when embedding them on GitHub …

Repo File URL	Repo Raw URL	Repo Raw URL (alt)	GitHub User Content URL	GitHack URL
https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/videos/visual-viewport-desktop-overscroll--chrome-with-flag.mp4	https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/videos/visual-viewport-desktop-overscroll--chrome-with-flag.mp4?raw=true	https://github.com/web-platform-tests/interop-2022-viewport/raw/main/explainers/videos/visual-viewport-desktop-overscroll--chrome-with-flag.mp4	https://user-images.githubusercontent.com/213073/186432071-118cfacc-62df-492e-82c7-0226d6dc9ed4.mp4	https://raw.githack.com/web-platform-tests/interop-2022-viewport/main/explainers/videos/visual-viewport-desktop-overscroll--chrome-with-flag.mp4

plugins: [

	// Code that generates the CSS Scroll-Timelines for https://codepen.io/bramus/pen/xxRZZdK
	const generateCSS = () => {
	let css = '';
	document.querySelectorAll('li').forEach((li, i) => {
	const id = li.getAttribute('id');

	css = `
	${css}

	@scroll-timeline scroll-in-cards-${id} {

	// 🗣 Text-to-Speech with the Web Speech API's SpeechSynthesis
	// @link https://gist.github.com/bramus/e27fcb783f469b6585007a7453e1bb5a
	// @ref https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis
	((text) => {

	// Create an Utterance (= speech request)
	const utter = new SpeechSynthesisUtterance(text);

	// Set the voice
	utter.voice = window.speechSynthesis.getVoices()[0];

	// This little piece of JS was used to generate the scroll-timelines
	// used in the demo at https://codepen.io/bramus/pen/wveWXdw

	const generateCSS = () => {
	let css = '';
	document.querySelectorAll('.slide').forEach((li, i) => {
	const id = li.getAttribute('id');
	const parentId = li.parentElement.getAttribute('id');

	css = `

	class DOMBuilder

	@build: (tag) ->

	# create element
	el = document.createElement(tag)

	# set options
	for attribute, value of arguments[1]
	switch (true)

	// This little piece of JS was used to generate the scroll-timelines
	// used in the demo at https://codepen.io/bramus/pen/LYbBoRj

	const generateCSS = () => {
	const css = [];
	document.querySelectorAll('section[id]').forEach((section, i) => {
	const id = section.getAttribute('id');

	css.push(`
	@scroll-timeline section-${id}-enter {

	<p>UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite since writing this post. The spec also got renamed to Scroll-Driven Animations. This post details an older version of the syntax and has not been updated to reflect these changes.</p>

	<p>To learn more about the new syntax, visit <a href="https://scroll-driven-animations.style/" target="_top">https://scroll-driven-animations.style/</a>.</p>