bramus

Windows On-Screen Keyboard vs. Viewports

Setup / General

• 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

The Good

bramus

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

bramus

// 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} {

bramus

• Install @snowpack/plugin-dotenv

  npm i --save @snowpack/plugin-dotenv
  

• Configure Astro via astro.config.mjs to use @snowpack/plugin-dotenv

plugins: [

bramus

// 🗣 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];

bramus

// 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 = `

bramus

class DOMBuilder

	@build: (tag) ->

		# create element
		el = document.createElement(tag)

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

bramus

// 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 {

bramus

const changeValueInObject = (object, key, value) => {
	if (key.indexOf('.') !== -1) {
		const keyParts = key.split('.');
		const firstPartOfKey = keyParts.shift();
		return {
			...object,
			[firstPartOfKey]: {
				...(object[firstPartOfKey] ?? {}),
					 ...changeValueInObject((object[firstPartOfKey] ?? {}), keyParts.join('.'), value),
			},

bramus

The addition of an aspect-ratio property would indeed solve this specific issue. Glad to see it's being discussed (once wrote an extensive post on this myself).

Thinking further on this, this solution is somewhat limited: it only solves the aspect ratio problem.

A more broader solution could be the introduction of a val() function. It would work like the var() function – which reads the value of a custom property – but then for reading values from other properties. The function would yield the computed value of the given property. Combine it with calc() and you're good to go.

In code, it would result in something like this:

.box {