Nicolas Hoizey nhoizey

## postcss.config.js
module.exports = {
  parser: "postcss-scss",
  plugins: [
    require("postcss-easy-import")({        // Enables globs in @import. See style.css.
      prefix: false,
      skipDuplicates: false,
      warnOnEmpty: false,
    }),
    require("postcss-advanced-variables"),  // Sass-style @ vars, looping, and @import
    require("postcss-custom-media"),        // Custom reusable media queries

## designMode.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                MathieuAlphamosa
                / designMode.md
            
            
              Last active
              April 1, 2022 11:45
            
          
    Design Mode - Bookmarklet

Ce bookmarklet permet d'éditer le contenu d'une page web.
Totalement copié inspiré de https://css-tricks.com/web-development-bookmarklets/
Comment installer un bookmarklet ? https://mreidsma.github.io/bookmarklets/installing.html
javascript: if(document.designMode!='on'){document.designMode='on';let div = document.createElement('div');div.id='design-mode-on';div.style.position='fixed';div.style.inset='0';div.style.zIndex=20000;div.style.pointerEvents='none';div.style.boxShadow='inset 0 0 0 6px fuchsia';document.body.appendChild(div);}else{document.designMode='off';document.getElementById('design-mode-on').remove();}void 0;

  
## getRelativeTimeString.ts
// from https://twitter.com/Steve8708/status/1504131981444980739
// simplified to a function body of 8 tidy lines
// no loop needed, no 2d array of 3-tuples needed
// just 2 arrays, a findIndex call, and some indexing :)

export function getRelativeTimeString(
  date: Date | number,
  lang = "en"
): string {
  const timeMs = typeof date === "number" ? date : date.getTime();

## fip.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              8 stars
            
          
                harperreed
                / fip.md
            
            
              Last active
              April 27, 2024 11:10
            
          
    FIP Radio

Main URL: fip.fr

Wikipedia: en.wikipedia.org/wiki/FIP_(radio_station)

Mobile apps: Android / iOS
Streams

Direct streams for your listening pleasure

  
## index.html
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

## index.html
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">

## grid-system.css
html {
  --max-width: 1200px;
  --columns: 6;
  --gutter: 1.5rem;
}
* {
  --grid: minmax(var(--gutter), 1fr)
    repeat(
      var(--columns),
      minmax(

## web-app-manifest.js
[web-app-manifest]
const response_bodies = $WPT_BODIES;

const manifestURLs = new Set(Array.from(document.querySelectorAll('link[rel=manifest]')).map(link => {
  const base = new URL(location.href).origin;
  const href = link.getAttribute('href');
  return new URL(href, base).href;
}));

const manifests = response_bodies.filter(har => {

## react-bias.md

      
              1 file
            
          
              0 forks
            
          
              5 comments
            
          
              14 stars
            
          
                malchata
                / react-bias.md
            
            
              Last active
              May 29, 2021 14:23
            
              
                React Bias
              
          
    React Bias

It may seem like a bold suggestion that we as web developers can choose the wrong tools for the job because we tend to be swayed by appeals to popularity or authority, but simple statistics imply just that. For example, React (https://reactjs.org/) is a JavaScript framework that emphasizes componentization and simplified state management. It enjoys strong advocacy from a vocal and dedicated userbase within the developer community.
Despite React’s apparent popularity, however, The HTTP Archive observed in 2020 that React only accounted for 4% of all libraries in use across the 7.56 million origins it analyzed (https://almanac.httparchive.org/en/2020/javascript#libraries).
For context, The State of JS 2020 Survey (https://2020.stateofjs.com/en-US/), which surveyed roughly 23,765 respondents, offers the following statistics:

70.8% of respondents identified as white.
91.1% identified as male, whereas 5.8% identified as female and 0.9% identified as non-binary/third gender.


## perf-diagnostics.css
:root {
 --violation-color: red; /* used for clear issues */
 --warning-color: orange; /* used for potential issues we should look into */
}

/* IMAGES */

/*
 * Lazy-Loaded Images Check
 * ====
	module.exports = {
	parser: "postcss-scss",
	plugins: [
	require("postcss-easy-import")({ // Enables globs in @import. See style.css.
	prefix: false,
	skipDuplicates: false,
	warnOnEmpty: false,
	}),
	require("postcss-advanced-variables"), // Sass-style @ vars, looping, and @import
	require("postcss-custom-media"), // Custom reusable media queries
	// from https://twitter.com/Steve8708/status/1504131981444980739
	// simplified to a function body of 8 tidy lines
	// no loop needed, no 2d array of 3-tuples needed
	// just 2 arrays, a findIndex call, and some indexing :)

	export function getRelativeTimeString(
	date: Date \| number,
	lang = "en"
	): string {
	const timeMs = typeof date === "number" ? date : date.getTime();
	<!doctype html><!-- This is a valid HTML5 document. -->
	<!-- Screen readers, SEO, extensions and so on. -->
	<html lang="en">
	<!-- Has to be within the first 1024 bytes, hence before the `title` element
	See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
	<meta charset="utf-8">
	<meta name="color-scheme" content="light dark">
	<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
	<!-- The viewport meta is quite crowded and we are responsible for that.
	See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
	html {
	--max-width: 1200px;
	--columns: 6;
	--gutter: 1.5rem;
	}
	* {
	--grid: minmax(var(--gutter), 1fr)
	repeat(
	var(--columns),
	minmax(
	[web-app-manifest]
	const response_bodies = $WPT_BODIES;

	const manifestURLs = new Set(Array.from(document.querySelectorAll('link[rel=manifest]')).map(link => {
	const base = new URL(location.href).origin;
	const href = link.getAttribute('href');
	return new URL(href, base).href;
	}));

	const manifests = response_bodies.filter(har => {
	:root {
	--violation-color: red; /* used for clear issues */
	--warning-color: orange; /* used for potential issues we should look into */
	}

	/* IMAGES */

	/*
	* Lazy-Loaded Images Check
	* ====