Skip to content

Instantly share code, notes, and snippets.

Avatar

Bramus! bramus

View GitHub Profile
@bramus
bramus / bookmarklet.md
Last active Dec 6, 2022
Mastodon User Page Bookmarklet
@bramus
bramus / windows-viewports.md
Last active Oct 17, 2022
Interop 2022 Viewport Investigation: Behavior on a Windows Touch Screen Device
View windows-viewports.md

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
bramus / generate.js
Created Apr 22, 2022
Generate CSS @scroll-timeline definitions
View generate.js
// 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} {
View astro-env-vars.md
  • Install @snowpack/plugin-dotenv

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

plugins: [

@bramus
bramus / script.js
Last active Feb 20, 2022
Text-to-Speech with the Web Speech API
View script.js
// 🗣 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
bramus / generate.js
Created Sep 3, 2021
Generate CSS ScrollTimelines
View generate.js
// 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 = `
View DOMBuilder.coffee
class DOMBuilder
@build: (tag) ->
# create element
el = document.createElement(tag)
# set options
for attribute, value of arguments[1]
switch (true)
@bramus
bramus / generate.js
Created May 20, 2021
Generate CSS ScrollTimelines
View generate.js
// 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 {
View changeValueInObject.js
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),
},