Alasdair McLeay penx

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <style>

:where(.rt-Inset) > * {
  --margin-top-override: initial;
}

.rt-Inset:where(.rt-r-side-all) {

## features.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                penx
                / features.md
            
            
              Last active
              October 9, 2023 15:47
            
              
                CSS preprocessors
              
          
Feature
Example
Standards-only approach


Nested selectors
Sass Style Rules
CSS Nesting Module Level 3


Importing 
 (Coupling, from JavaScript, dead code removal)
webpack css-loader
@import 
 Cascading Stylesheet Module scripts (2)


Bundling
webpack
Multiple stylesheets per file


Variables
Sass Variables
CSS custom properties (variables)


Calculations
Sass operators and functions
[CSS calc](https://developer.mozilla.org/


## App.js
import React, { useState, createContext, useContext } from "react";

const SetContext = createContext();
const ValueContext = createContext();

const SetProvider = React.memo(({ set, ...props }) => (
  <SetContext.Provider value={set} {...props} />
));

const Provider = props => {

## App.js
import React, { useState, createContext, useContext } from "react";

const SetContext = createContext();
const ValueContext = createContext();

const Provider = props => {
  const [value, set] = useState("initial");
  return (
    <ValueContext.Provider value={value}>
      <SetContext.Provider value={set} {...props} />

## App.js
import React, { useState, createContext, useContext } from "react";

const SetContext = createContext();
const ValueContext = createContext();

const Provider = props => {
  const [value, set] = useState("initial");
  return (
    <SetContext.Provider value={set}>
      <ValueContext.Provider value={value} {...props} />

## App.js
import React, { useState, createContext, useContext } from "react";

const MyContext = createContext();

const Provider = props => {
  const [value, set] = useState("initial");
  return <MyContext.Provider value={{ value, set }} {...props} />;
};

const Value = () => {

## react-router-4-universal-404-routes.js
/**

Example usage of React Router 4 to handle:

 - Known routes to render a specific component, e.g. /
 - An array of valid top level slugs, e.g. /:pageId
 - A dictionary of top level slugs that should redirect, e.g. /:redirectId
 - An array of valid slugs for a known subroute, e.g. /items/:itemId
 - 404 for anything that is not handled, including invalid slugs, with a correct http response
 - Server side example, but ReactApp is written so that routing would work universally
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>

	:where(.rt-Inset) > * {
	--margin-top-override: initial;
	}

	.rt-Inset:where(.rt-r-side-all) {
Feature	Example	Standards-only approach
Nested selectors	Sass Style Rules	CSS Nesting Module Level 3
Importing (Coupling, from JavaScript, dead code removal)	webpack css-loader	@import Cascading Stylesheet Module scripts (2)
Bundling	webpack	Multiple stylesheets per file
Variables	Sass Variables	CSS custom properties (variables)
Calculations	Sass operators and functions	[CSS calc](https://developer.mozilla.org/
	import React, { useState, createContext, useContext } from "react";

	const SetContext = createContext();
	const ValueContext = createContext();

	const SetProvider = React.memo(({ set, ...props }) => (
	<SetContext.Provider value={set} {...props} />
	));

	const Provider = props => {
	import React, { useState, createContext, useContext } from "react";

	const MyContext = createContext();

	const Provider = props => {
	const [value, set] = useState("initial");
	return <MyContext.Provider value={{ value, set }} {...props} />;
	};

	const Value = () => {
	/**

	Example usage of React Router 4 to handle:

	- Known routes to render a specific component, e.g. /
	- An array of valid top level slugs, e.g. /:pageId
	- A dictionary of top level slugs that should redirect, e.g. /:redirectId
	- An array of valid slugs for a known subroute, e.g. /items/:itemId
	- 404 for anything that is not handled, including invalid slugs, with a correct http response
	- Server side example, but ReactApp is written so that routing would work universally