Pens from Taylor Hunt https://codepen.io/tigt/ en nospam@codepen.io Copyright 2024 2024-03-25T15:59:08-07:00 “Fullscreen any page” bookmarklet https://codepen.io/tigt/pen/qBwjjwj https://codepen.io/tigt/pen/qBwjjwj Taylor Hunt

See the Code - See it Full Page - See Details

]]>
“Fullscreen any page” bookmarklet 2024-03-25T15:59:08-07:00
Stretchy interpanel margins https://codepen.io/tigt/pen/BaEpyWp https://codepen.io/tigt/pen/BaEpyWp Taylor Hunt

See the Code - See it Full Page - See Details

]]>
Stretchy interpanel margins 2024-03-19T06:31:41-07:00
Hazard tape effect https://codepen.io/tigt/pen/ZEVZPXY https://codepen.io/tigt/pen/ZEVZPXY Taylor Hunt

See the Code - See it Full Page - See Details

]]>
Hazard tape effect 2023-10-15T17:58:58-07:00
visual aid for desired behavior of CSS Grid speech balloons https://codepen.io/tigt/pen/rNqQbXj https://codepen.io/tigt/pen/rNqQbXj Taylor Hunt

See the Code - See it Full Page - See Details

]]>
visual aid for desired behavior of CSS Grid speech balloons 2023-05-21T15:17:34-07:00
GitLab color chip refactor https://codepen.io/tigt/pen/QWBEWpo https://codepen.io/tigt/pen/QWBEWpo Taylor Hunt

See the Code - See it Full Page - See Details

I couldn’t resist doing a refactor of the code I found when I was writing [Marking up colors, revisited with GitHub’s color swatches ](https://dev.to/tigt/marking-up-colors-revisited-with-githubs-color-swatches-42eo)

]]>
GitLab color chip refactor 2023-01-05T23:21:39-07:00
Shrinking Cramforce’s image placeholder https://codepen.io/tigt/pen/gOXMJJP https://codepen.io/tigt/pen/gOXMJJP Taylor Hunt

See the Code - See it Full Page - See Details

Originally from https://www.industrialempathy.com/posts/image-optimizations/#blurry-placeholder - Self-closing syntax for `<image/>` - Use viewBox dimensions to avoid `%25` - `x` and `y` on `<image>` default to 0 - No need for `;charset=utf-8` when all the bytes are ASCII - Pretty sure you don’t have to escape `:` in an SVG data URI - Roll everything into one `background` shorthand declaration - Lowercase %-escapes compress slightly better ## Changes that influence browser support -`<image style="filter(.5)">` instead of rolling a `<filter>` (this may change filter interpolation away from sRGB in some browsers) - SVG2 dropped XLink, so `xlink:href` and `xmlns:xlink` can be dropped in favor of `<image href=…>`

]]>
Shrinking Cramforce’s image placeholder 2022-02-03T20:27:12-07:00
SVG logo data: URI https://codepen.io/tigt/pen/XWeeqBW https://codepen.io/tigt/pen/XWeeqBW Taylor Hunt

See the Code - See it Full Page - See Details

I figured this post eventually deserved its own header image: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

]]>
SVG logo data: URI 2021-12-23T12:33:50-07:00
Optional decimal precision with number inputs https://codepen.io/tigt/pen/ExmKyxb https://codepen.io/tigt/pen/ExmKyxb Taylor Hunt

See the Code - See it Full Page - See Details

]]>
Optional decimal precision with number inputs 2021-07-06T23:58:55-07:00
Why did TimBL invent the underlined hyperlink? https://codepen.io/tigt/pen/VwPEMBR https://codepen.io/tigt/pen/VwPEMBR Taylor Hunt

See the Code - See it Full Page - See Details

]]>
Why did TimBL invent the underlined hyperlink? 2021-06-26T17:55:58-07:00
Microtweaking <title> separators https://codepen.io/tigt/pen/xxgpyBP https://codepen.io/tigt/pen/xxgpyBP Taylor Hunt

See the Code - See it Full Page - See Details

Sometimes you just want to make your own rabbit hole to go down.

]]>
Microtweaking <title> separators 2021-04-10T19:30:31-07:00