Skip to content

Instantly share code, notes, and snippets.

View captainbrosset's full-sized avatar
👋

Patrick Brosset captainbrosset

👋
View GitHub Profile
@captainbrosset
captainbrosset / legacy-high-contrast.css
Created April 29, 2024 09:32
legacy -ms-high-contrast
@media (-ms-high-contrast: active) {
/* Your general contrast theme styles */
}
@media (-ms-high-contrast: black-on-white) {
/* Your specific light contrast theme styles */
}
@media (-ms-high-contrast: white-on-black) {
/* Your specific dark contrast theme styles */
@captainbrosset
captainbrosset / backward-compatible-high-contrast.css
Last active April 29, 2024 09:33
Backward compatible high-contrast/forced-colors mode
@media (-ms-high-contrast: active), (forced-colors: active) {
/* Your general contrast theme styles */
}
@media (-ms-high-contrast: black-on-white), (forced-colors: active) and (prefers-color-scheme: light) {
/* Your specific light contrast theme styles */
}
@media (-ms-high-contrast: white-on-black), (forced-colors: active) and (prefers-color-scheme: dark) {
/* Your specific dark contrast theme styles */
@captainbrosset
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.
@captainbrosset
captainbrosset / dom-mutation-logger.js
Last active November 14, 2022 13:03
Useful DevTools snippets
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 = {
@captainbrosset
captainbrosset / codeswing.json
Last active September 16, 2021 09:01
test gistpad codeswing
{
"scripts": [],
"styles": []
}
@captainbrosset
captainbrosset / badges.html
Created April 8, 2021 12:12
Color contrast improvement in DevTools
<!DOCTYPE html>
<meta charset="utf8">
<style>
html {
font-family: consolas, monospace;
font-size: 16px;
}
ul, li {
padding: 0;
@captainbrosset
captainbrosset / clip-mask.ts
Created March 5, 2021 09:42
Code snippets for the "How we built the DevTools Tooltips" article
// 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.
@captainbrosset
captainbrosset / svg-clip.css
Created March 5, 2021 09:39
Code snippets for the "How we built the DevTools Tooltips" article
svg {
clip-path: path("M100,100L200,100L200,150L250,150L250,250L150,250L150,200L100,200L100,100Z");
}
@captainbrosset
captainbrosset / position.css
Created March 5, 2021 09:36
Code snippets for the "How we built the DevTools Tooltips" article
.tooltips-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@captainbrosset
captainbrosset / generate-path.ts
Created March 5, 2021 09:34
Code snippets for the "How we built the DevTools Tooltips" article
// 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);
}