bramus

🚚 The bookmarklet has moved to https://github.com/bramus/mastodon-profile-redirect/

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),
			},