Patrick Brosset captainbrosset

## frustrations.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                captainbrosset
                / frustrations.md
            
            
              Created
              January 4, 2023 10:30
            
              
                List of frustrations when working with the web
              
          
Having to support specific browsers.
Avoiding or removing a feature that doesn’t work across browsers.
Making a design look/work the same across browsers.
Achieving visual precision on stylized elements (e.g., buttons).
Lack of capabilities to implement specific use cases.
Making web sites/applications accessible.
Making web sites/applications performant.
Making web sites/applications secure.
Using web technologies in a native or hybrid context (e.g, using WebViews, Electron, CEF).
Working with different tracking protection and data storage policies in browsers.


## dom-mutation-logger.js
function logMutation(mutation) {
    console.log(mutation);
}

const mutationObserver = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      // Build a reason object that will let the user know what exactly happened
      let details = null;
      if (mutation.type === "attributes") {
        details = {

## codeswing.json
{
  "scripts": [],
  "styles": []
}

## badges.html
<!DOCTYPE html>
<meta charset="utf8">
<style>
html {
  font-family: consolas, monospace;
  font-size: 16px;
}

ul, li {
  padding: 0;

## clip-mask.ts
// This is our mask element, a 100%/100% semi-transparent
// element sitting on the whole UI.
const mask = ...;

// Start defining a path used to clip the mask.
// First, go around the outer perimeter.
const polygon = ['0 0', '100% 0', '100% 100%', '0 100%', '0 0'];

// And then clip away the highlighted areas from the mask.
// To do this, we go around their shapes, in reverse direction.

## svg-clip.css
svg {
  clip-path: path("M100,100L200,100L200,150L250,150L250,250L150,250L150,200L100,200L100,100Z");
}

## position.css
.tooltips-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

## generate-path.ts
// Get the first segment's start point.
const points = [segments[0].start];

// And append the end point of each segment, one by one, after that.
for (const segment of segments) {
  if (!segment) {
    continue;
  }
  points.push(segment.end);
}

## order-segments.ts
// Our list of all segments. Each one being an object like
// {start: {x, y}, end: {x, y}}
const allSegments = [...];

// Start at the first segment.
const orderedSegments = [allSegments[0]];

while (true) {
  // The previous segment.
  const previous = orderedSegments[orderedSegments.length - 1];

## get-coordinates.ts
// Get the coordinates of the element.
const rect = element.getBoundingClientRect();
// Apply any offset that might be configured for it.
for (const {direction, size} of offsets) {
  if (direction === Direction.Top) {
    rect.y -= size;
    rect.height += size;
  }
  if (direction === Direction.Right) {
    rect.width += size;
	function logMutation(mutation) {
	console.log(mutation);
	}

	const mutationObserver = new MutationObserver((mutations) => {
	for (const mutation of mutations) {
	// Build a reason object that will let the user know what exactly happened
	let details = null;
	if (mutation.type === "attributes") {
	details = {
	<!DOCTYPE html>
	<meta charset="utf8">
	<style>
	html {
	font-family: consolas, monospace;
	font-size: 16px;
	}

	ul, li {
	padding: 0;
	// This is our mask element, a 100%/100% semi-transparent
	// element sitting on the whole UI.
	const mask = ...;

	// Start defining a path used to clip the mask.
	// First, go around the outer perimeter.
	const polygon = ['0 0', '100% 0', '100% 100%', '0 100%', '0 0'];

	// And then clip away the highlighted areas from the mask.
	// To do this, we go around their shapes, in reverse direction.
	svg {
	clip-path: path("M100,100L200,100L200,150L250,150L250,250L150,250L150,200L100,200L100,100Z");
	}
	.tooltips-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	// Get the first segment's start point.
	const points = [segments[0].start];

	// And append the end point of each segment, one by one, after that.
	for (const segment of segments) {
	if (!segment) {
	continue;
	}
	points.push(segment.end);
	}
	// Our list of all segments. Each one being an object like
	// {start: {x, y}, end: {x, y}}
	const allSegments = [...];

	// Start at the first segment.
	const orderedSegments = [allSegments[0]];

	while (true) {
	// The previous segment.
	const previous = orderedSegments[orderedSegments.length - 1];
	// Get the coordinates of the element.
	const rect = element.getBoundingClientRect();
	// Apply any offset that might be configured for it.
	for (const {direction, size} of offsets) {
	if (direction === Direction.Top) {
	rect.y -= size;
	rect.height += size;
	}
	if (direction === Direction.Right) {
	rect.width += size;