Skip to content

Instantly share code, notes, and snippets.

😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
Block or report user

Report or block tomhodgins

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@tomhodgins
tomhodgins / clamped-number-bikeshed.js
Created Jul 18, 2019
What are the 200 simplest combinations of the following pieces of syntax we could use to describe a clamped number, a number that has a lower bound, a scalable middle value, and an upper bound: ` `, `0`, `1`, `2`, `min`, `mid`, `max`, `(`, `)`, `[`, `]`, `{`, `}`, `,`, `:`, `"`, `<`, `=`, `>`
View clamped-number-bikeshed.js
0 1 2
(0 1 2) // S-expression
[0 1 2]
{0 1 2}
0, 1, 2
(0, 1, 2)
[0, 1, 2] // JSON array
{0, 1, 2}
@tomhodgins
tomhodgins / clamped-number-formatting-bikeshed.md
Last active Jul 17, 2019
Clamped Number Formatting Bikeshed
View clamped-number-formatting-bikeshed.md

Let's say I have a concept of a set of three numbers:

  • a minimum number the computed value can't drop below
  • a middle number that's a scaling factor we'll use to compute a value
  • a maximum number the computed value can't exceed

There are a few ways a set of numbers like this can be expressed:

  • as a space-separated list:
View colon-separated.html
<!doctype html>
<h1 style='--clamped-font-size: 30:5:50;'>Clamped Font Size</h1>
<style>
h1 {
font-size: var(--clamped-font-size);
}
</style>
<script type=module>
View css-custom-property-values.css
/*
Custom Property Values
*/
/* Native CSS stuff */
example {
--empty: ;
View parse-named-breakpoints.js
/*
<breakpoint-list> := <condition> <breakpoint-func> [ ',' <condition> <breakpoint-func> ]*
*/
function parseABreakpointList(string) {
return string.split(/,\s+/).reduce(
(acc, part) => {
const [full, condition, breakpoints] = part.trim().match(
/^([a-zA-Z-]+)\s*(--breakpoints\(.*\))$/
View named-breakpoints-media-queries-preprocessnig.css
/*
Here's one way you might be able to use the concept of having a defined set
of named breakpoints in CSS for the purpose of preprocessing media queries.
Imagine you have a global configuration where your breakpoints are listed,
along with the associated names, then you are able to write other CSS targeting
those named breakpoints:
*/
View named-breakpoints-function.css
/*
<breakpoints-list> := <custom-ident> <breakpoints-func> [ ',' <custom-ident> <breakpoints-func> ]*
<breakpoints-func> := '--breakpoints(' <breakpoint>* <custom-ident> [ <breakpoint> <custom-ident>]* ')'
<breakpoint> := <number> | 'portrait' | 'square' | 'landscape' …etc
*/
View named-breakpoints.css
/*
Suppose there's a general concept of "named breakpoints" as a property value, something like:
<named-breakpoints> := <breakpoint>* <custom-ident> [ <breakpoint> <custom-ident> ]*
<breakpoint> := <number> | 'portrait' | 'square' | 'landscape' (etc…)
So that things like this are possible:
View css-observable-properties.css
/* Shorthand sets all properties by name */
/* observe: [<condition> <list-of-breakpoints>]* */
one {
observe: width 200 500;
}
two {
observe:
width 200 500
height 100 200 300
View searching-for-discount-code-in-window.js
Promise.all([
import('https://unpkg.com/espath'),
import('https://unpkg.com/flatted@2.0.1/esm/index.js')
]).then(([espath, {stringify}]) => {
console.log(
espath.default(
JSON.parse(stringify(window)),
'//*[contains(text(), "25")]'
)
)
You can’t perform that action at this time.