ulrischa

javascript:(function(){if(window.__bdx){window.__bdx();return}var d=document,h=d.documentElement,b=d.body||h,s=d.createElement('style'),p=d.createElement('pre'),x;function n(e){return e.tagName.toLowerCase()+(e.id?'#'+e.id:'')+(e.classList[0]?'.'+e.classList[0]:'')}function a(t,l,v){if(v&&v!='auto'&&v!='normal'&&v!='none')t.push(l+': '+v)}function i(e){var c=getComputedStyle(e),r=e.getBoundingClientRect(),t=[],q=e.parentElement,k=q&&getComputedStyle(q);t.push(n(e));t.push((r.width|0)+'x'+(r.height|0)+' @ '+(r.left|0)+','+(r.top|0));t.push('');t.push('Layout');a(t,'display',c.display);a(t,'position',c.position);a(t,'box-sizing',c.boxSizing);a(t,'z-index',c.zIndex);a(t,'overflow',c.overflowX==c.overflowY?c.overflowX:c.overflowX+' / '+c.overflowY);a(t,'opacity',c.opacity);t.push('');t.push('Size');a(t,'width',c.width);a(t,'height',c.height);a(t,'min-width',c.minWidth);a(t,'max-width',c.maxWidth);a(t,'min-height',c.minHeight);a(t,'max-height',c.maxHeight);t.push('');t.push('Box');a(t,'margin',c.marginTop+' '+c.ma

ulrischa

Baseline Zoo

A Pen by web.dev on CodePen.

License.

ulrischa

javascript:(()=>{try{const dump_storage=(name)=>{const result={name,ok:false,error:null,items:{}};let s=null;try{s=window[name];}catch(e){result.error=`Accessing window.${name} threw: ${String(e)}`;return result;}if(!s){result.error=`window.${name} is not available`;return result;}let len=0;try{len=s.length;}catch(e){result.error=`${name}.length threw: ${String(e)}`;return result;}const keys=[];for(let i=0;i<len;i++){try{keys.push(s.key(i));}catch(e){keys.push(null);result.error=(result.error?result.error+"\n":"")+`${name}.key(${i}) threw: ${String(e)}`;}}for(const k of keys){if(k===null)continue;try{result.items[k]=s.getItem(k);}catch(e){result.items[k]=null;result.error=(result.error?result.error+"\n":"")+`${name}.getItem(${JSON.stringify(k)}) threw: ${String(e)}`;}}result.ok=result.error===null;return result;};const payload={origin:location.origin,href:location.href,timestamp:new Date().toISOString(),localStorage:dump_storage("localStorage"),sessionStorage:dump_storage("sessionStorage")};const text=JSON.st

ulrischa

class ButtonInstall extends HTMLElement {
    connectedCallback () {
        this.button = this.querySelector('button');
        if (window.matchMedia('(display-mode: standalone)').matches) {
            this.button.remove();
            return;
        }
        if (!navigator.install) {
            this.button.remove();
            return;

ulrischa

javascript:(()=>{const selectedText=window.getSelection().toString().trim();if(!selectedText){alert("You need to select some text!");return;}const url=new URL(window.location);url.hash=`:~:text=${encodeURIComponent(selectedText)}`;navigator.clipboard.writeText(url.toString()).then(()=>{alert("Copied to clipboard:\n"+url.toString());}).catch(()=>{alert("Error: Could not copy to clipboard.\n"+url.toString());});})();

ulrischa

accordion-group {
	background-color: #f7f7f7;
	border-radius: 0.25em;
	display: block;
	margin-block-end: 1.5em;
	padding: 0.5em 1em;
	width: 100%;
}

accordion-group [accordion-trigger] {

ulrischa

/**
 * Don't show button until JavaScript is instantiated
 */
share-me:not(:defined) {
	display: none;
}

/**
 * Visually hide an element, but leave it available for screen readers
 * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css

ulrischa

<h2 class="main-heading" id="specific-heading">Dies ist eine Überschrift</h2>

ulrischa

<div class="main-content">
  <h2>Hauptinhalts-Titel</h2>
  <p>Das ist der erste Absatz.</p>
  <div class="sidebar">
    <h2>Sidebar Titel</h2>
    <p>Inhalt der Sidebar.</p>
  </div>
  <p>Das ist der zweite Absatz im Hauptinhalt.</p>
</div>

ulrischa

form tips - finished

A Pen by uli schaeffler on CodePen.

License.