Pinboard (spaceninja)
https://pinboard.in/u:spaceninja/public/
recent bookmarks from spaceninjaHow to Make an Interactive Element Invisible but Accessible – Master.dev Blog2026-07-08T18:16:02+00:00
https://master.dev/blog/how-to-make-an-interactive-element-invisible-but-accessible/
spaceninjacss accessibility hidden untilfound contain-intrinsic-sizehttps://pinboard.in/https://pinboard.in/u:spaceninja/b:7650aa0471b3/Get Ready For the Powerful CSS border-shape Property! | CSS-Tricks2026-07-08T18:15:28+00:00
https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/
spaceninjacss shapes corner-shape border-shapehttps://pinboard.in/https://pinboard.in/u:spaceninja/b:79a7eabcd939/Getting Started with Anchor Positioning • Josh W. Comeau2026-07-07T16:53:44+00:00
https://www.joshwcomeau.com/css/anchor-positioning/
spaceninjacss anchor positionhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:017d0dd36def/The Goldilocks customizable select height - JakeArchibald.com2026-07-06T17:01:50+00:00
https://jakearchibald.com/2026/goldilocks-select-height/#putting-it-all-together
spaceninja, and as I was building demos I realised there's a sizing 'pattern' that's almost always the-one-you-want, but it took me a long time to figure out how to do it in CSS.
]]>select css popover anchor positionhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:959dbe76bcbf/Dark mode with web standards2026-07-06T17:00:26+00:00
https://olliewilliams.xyz/blog/dark-mode/
spaceninjacss darkmode light-dark color-schemehttps://pinboard.in/https://pinboard.in/u:spaceninja/b:b5ac2d3abeae/A Deep Dive into Contrast Themes | Digital Accessibility Services2026-07-03T20:45:15+00:00
https://accessibility.huit.harvard.edu/news/2026/05/deep-dive-contrast-themes
spaceninjacontrast highcontrastmode darkmode accessibility themeshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:973127149238/Massive 'Tycho' Space Station 10X Larger Than the ISS Wins Inaugural Aurelia Prize - The Debrief2026-07-03T20:43:42+00:00
https://thedebrief.org/massive-tycho-space-station-10x-larger-than-the-iss-wins-inaugural-aurelia-prize/
spaceninjainspiration writing space spacestations scifihttps://pinboard.in/https://pinboard.in/u:spaceninja/b:9cfcb001b09b/Fixing full-bleed CSS – David Bushell – Web Dev (UK)2026-07-03T17:16:21+00:00
https://dbushell.com/2026/07/03/fixing-full-bleed-css/
spaceninja element (or any 100% width child) into a container. Then replace the viewport units with container units.
]]>css fullbleed cqi inline-size containmenthttps://pinboard.in/https://pinboard.in/u:spaceninja/b:864d5635349e/An animated radial gradient mask over text in CSS2026-07-01T17:03:03+00:00
https://cassidoo.co/post/radial-mask-text-css/
spaceninjacss radial gradients maskshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:5e47588bf515/una.im | Modern CSS theming with light-dark(), contrast-color(), and style queries2026-06-24T17:29:00+00:00
https://una.im/modern-css-theming/
spaceninjacss themes darkmode light-dark constrast-color containerstylequerieshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:a294086a9e8a/Nobody clicks your share buttons – Derek Hanson2026-06-19T21:17:12+00:00
https://derekhanson.blog/nobody-clicks-your-share-buttons/
spaceninjaui ux share buttons socialhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:25672cc4fb5e/Storied Colors2026-06-17T20:26:09+00:00
https://storiedcolors.com/
spaceninjacolor design palettehttps://pinboard.in/https://pinboard.in/u:spaceninja/b:683914d690d5/CSS Can Now Animate Between Pages: View Transitions Without JavaScript — rotecodefraktion2026-06-10T17:55:08+00:00
https://www.rotecodefraktion.de/en/blog/css-view-transitions-zwischen-seiten/
spaceninja feel like an app transition.
]]>css animation viewtransitionshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:da20f2b6660b/CSS is filling the gaps with rules. A way to style gaps in grid and flex. | utilitybend2026-06-10T17:54:43+00:00
https://utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex
spaceninjacss cssgrid column-rul row-rule row-rule-width row-rule-style row-rule-color column-rule-width column-rule-style column-rule-color rule rule-break rule-inset rule-overlap rule-visibility-items gapdecorationshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:28267a9b4efb/The Field Guide to CSS Grid Lanes2026-06-10T17:48:28+00:00
https://gridlanes.webkit.org/
spaceninjacss cssgrid masonry grid-laneshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:24d676d21e5a/The Fundamentals and Dev Experience of CSS @function – Frontend Masters Blog2026-06-02T20:47:43+00:00
https://frontendmasters.com/blog/the-fundamentals-and-dev-experience-of-css-function/
spaceninjacss functionshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:52b483d86809/replacements.fyi - performant, safer npm package alternatives2026-06-02T20:45:26+00:00
https://replacements.fyi/
spaceninjapackages node npm performance javascripthttps://pinboard.in/https://pinboard.in/u:spaceninja/b:9702668d0022/You probably shouldn’t be annotating focus order – Eric Bailey2026-05-29T17:59:47+00:00
https://ericwbailey.design/published/you-probably-shouldnt-be-annotating-focus-order/
spaceninjaaccessibility focus focusorderhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:2f4051db59bd/Repeating Square Dots Backgrounds in CSS – Frontend Masters Blog2026-05-20T17:48:57+00:00
https://frontendmasters.com/blog/repeating-square-dots-backgrounds-in-css/
spaceninjabackground css gradients linear-gradient conic-gradienthttps://pinboard.in/https://pinboard.in/u:spaceninja/b:008fb1f1abf2/A few ways of specifying per-theme colours in only CSS — Chris Morgan2026-05-20T17:47:10+00:00
https://chrismorgan.info/css-themed-colours
spaceninjacss darkmode light-dark prefers-color-scheme color-mixhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:899ae2f1e2c3/600+ million people write right-to-left: 2 fixes your app needs—Martian Chronicles, Evil Martians’ team blog2026-05-20T17:45:52+00:00
https://evilmartians.com/chronicles/600-million-people-write-right-to-left-2-fixes-your-app-needs
spaceninjartl accessibility html dir lang localization logical-propertieshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:ac5e41576415/Cross-Document View Transitions: The Gotchas Nobody Mentions | CSS-Tricks2026-05-18T16:36:37+00:00
https://css-tricks.com/cross-document-view-transitions-part-1/
spaceninjacss viewtransitionshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:f320f7ed594a/Ink Documentation2026-05-18T03:40:32+00:00
https://github.com/spaceninja/ink-documentation
spaceninjaink documentation interactivefiction howto gameshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:5dd1f473b90a/Better fluid sizing with round()2026-05-17T18:22:20+00:00
https://ishadeed.com/article/css-round/
spaceninjacss clamp round typographyhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:f6b9da9a327f/A popover backdrop anti-pattern2026-05-17T17:39:46+00:00
https://remysharp.com/2026/05/08/popover-backdrop-anti-pattern
spaceninjacss html dialog popover backdrop focushttps://pinboard.in/https://pinboard.in/u:spaceninja/b:07676ecaa611/Color themes with Baseline CSS features | Articles | web.dev2026-05-14T17:04:29+00:00
https://web.dev/articles/baseline-in-action-color-theme
spaceninjacss darkmode palette oklch relative color-mix color-scheme light-dark propertyhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:eded7f73321d/Computing and Displaying Discounted Prices in CSS | CSS-Tricks2026-05-14T17:01:55+00:00
https://css-tricks.com/computing-and-displaying-discounted-prices-in-css/
spaceninjacss attr mod roundhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:5f7078166e91/When to use (and not use) CSS shorthand properties2026-05-14T17:00:17+00:00
https://thoughtbot.com/blog/when-to-use-and-not-use-css-shorthand-properties
spaceninjacss shorthandhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:83e0c73ab554/I keep tripping over "true, false, true" - Matt Smith2026-05-11T17:01:42+00:00
https://allthingssmitty.com/2026/05/11/i-keep-tripping-over-true-false-true/
spaceninjajavascript arguments functions objecthttps://pinboard.in/https://pinboard.in/u:spaceninja/b:f1d5823011ef/AI Doesn't Fix Accessible Systems. It Depends on Them. — Anna E. Cook2026-05-11T16:55:45+00:00
https://annaecook.com/writing/2026/ai-doesnt-fix-accessible-systems-it-depends-on-them
spaceninjaai accessibilityhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:55f8faad7593/Why Keyboard Users Can't Scroll Your Overflow Containers | CSS-Tricks2026-05-11T16:50:02+00:00
https://css-tricks.com/why-keyboard-users-cant-scroll-your-overflow-containers/
spaceninjaaccessibility css tables scroll keyboardhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:f8516f12c4e7/Using safe-area-inset to build mobile-safe layouts | Polypane2026-05-06T17:25:25+00:00
https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/
spaceninjacss safe-area-inset-top mobile layout envhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:34f28000e18b/CSS `n of` Selectors for Conditional Validation – Frontend Masters Blog2026-05-04T17:23:24+00:00
https://frontendmasters.com/blog/css-n-of-selectors-for-conditional-validation/
spaceninja syntax in the :nth-child selector can also be very useful for a preliminary validation. First, let’s see what it does.
]]>css nth-child of selectorshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:e582a87fc639/Media Queries Range Syntax2026-05-04T17:22:48+00:00
https://ishadeed.com/article/range-syntax/
spaceninjamediaqueries range syntax css responsivehttps://pinboard.in/https://pinboard.in/u:spaceninja/b:0d812268c7f0/Scroll-Driven Animations • Josh W. Comeau2026-04-28T16:57:10+00:00
https://www.joshwcomeau.com/animation/scroll-driven-animations/
spaceninjacss animation scroll-driven keyframes animation-timelinehttps://pinboard.in/https://pinboard.in/u:spaceninja/b:a47c4b213fbe/Masonry Layout Solved! Hello CSS Grid Lanes | That HTML Blog2026-04-28T16:49:18+00:00
https://thathtml.blog/2026/04/masonry-now-css-grid-lanes/
spaceninjacss cssgrid masonry grid-laneshttps://pinboard.in/u:spaceninja/b:56ee7dadc8b7/Quick Tip: Don’t Use <abbr> – Nat Tarnoff2026-04-27T16:57:19+00:00
https://tarnoff.info/2026/03/20/quick-tip-dont-use-abbr/
spaceninja is not an interactive element. You cannot tab to it. It will be read just like any other word in the sentence. If you mouse over the element, you see the title. But if you use keyboard there is no way to expose it.
]]>accessibility abbr html screenreadershttps://pinboard.in/u:spaceninja/b:c4236e768885/Design Token Naming Conventions | Always Twisted2026-04-25T22:12:41+00:00
https://www.alwaystwisted.com/articles/design-token-naming-conventions
spaceninjafridayfrontend cssbasics tokens naming howto bestpracticeshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:40c1339c880d/The Radio State Machine | CSS-Tricks2026-04-25T22:12:10+00:00
https://css-tricks.com/the-radio-state-machine/
spaceninjafridayfrontend cssbasics html css checkboxes radio switch statehttps://pinboard.in/https://pinboard.in/u:spaceninja/b:aad243e55692/An Interactive Cover Component | Kitty Giraudel2026-04-25T22:11:40+00:00
https://kittygiraudel.com/2026/04/09/an-interactive-cover-component/
spaceninjafridayfrontend cssbasics css headers cover componentshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:a7a6ff11fea6/Building a UI Without Breakpoints – Frontend Masters Blog2026-04-25T22:10:48+00:00
https://frontendmasters.com/blog/building-a-ui-without-breakpoints/
spaceninjafridayfrontend cssbasics css breakpoints mediaqueries cssgrid containerquerieshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:debb4fed013d/The End of Friday Front-End2026-04-25T21:59:25+00:00
https://spaceninja.com/blog/2026/the-end-of-friday-front-end/
spaceninjafridayfrontendhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:7d1ce63881fa/9 Accessibility Myths and Pushbacks (And How to Answer Them) - UX Researcher & Designer.2026-04-25T21:57:23+00:00
https://stephaniewalter.design/blog/9-accessibility-myths-and-pushbacks-and-how-to-answer-them/
spaceninjafridayfrontend accessibility howto mythshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:43eacdf93c73/Trimming our CSS with sibling-index() and sibling-count()2026-04-25T21:55:02+00:00
https://thoughtbot.com/blog/trimming-our-css-with-sibling-index-and-sibling-count
spaceninjafridayfrontend css sibling-index sibling-counthttps://pinboard.in/https://pinboard.in/u:spaceninja/b:84464b5b22e6/A Modern Quality Pipeline and Testing Strategy for Frontend Projects | alexop.dev2026-04-25T21:52:20+00:00
https://alexop.dev/posts/modern-frontend-quality-pipeline/
spaceninjafridayfrontend testing ai ci cd lint linters typescript vite vitesthttps://pinboard.in/https://pinboard.in/u:spaceninja/b:8d78022ba569/The end of responsive images - Piccalilli2026-04-25T21:47:55+00:00
https://piccalil.li/blog/the-end-of-responsive-images/
spaceninjafridayfrontend html responsive images srcset sizes auto lazyloadhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:0c9a7b2b9c05/Dos & Don’ts of Anchor Positioning - YouTube2026-04-25T21:43:04+00:00
https://www.youtube.com/watch?v=OEvVW4wQUII
spaceninjafridayfrontend video css anchor positionhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:7c0f11e7e665/The Bag of Tricks for View Transitions | @vtbag2026-04-25T21:35:53+00:00
https://vtbag.dev/
spaceninjaviewtransitions csshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:43d51ddf4d93/Modern CSS Feature Support For Shadow DOM2026-04-25T21:35:12+00:00
https://shadow-dom-css.adobe.com/
spaceninjashadowdom css caniuse support webcomponentshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:a6f5567593fc/CSS Grid for Beginners (mini course) - YouTube2026-04-19T19:20:01+00:00
https://www.youtube.com/watch?v=RKWvnCrKizI
spaceninjafridayfrontend css cssbasics video cssgrid layouthttps://pinboard.in/https://pinboard.in/u:spaceninja/b:c88260b3de98/box-shadow is no alternative to outline - Manuel Matuzovic2026-04-19T19:18:26+00:00
https://matuzo.at/blog/2026/box-shadow-no-alternative-to-outline
spaceninjafridayfrontend css accessibility box-shadow focus forced-colorshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:14f37f2dfe4a/WCAG3 Contrast as of April 2026 — Adrian Roselli2026-04-19T19:16:17+00:00
https://adrianroselli.com/2026/04/wcag3-contrast-as-of-april-2026.html
spaceninjafridayfrontend wcag apca color contrast accessibilityhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:7491d1822875/Warning: containment breach in cascade layer! – David Bushell – Web Dev (UK)2026-04-19T19:12:00+00:00
https://dbushell.com/2026/04/15/containment-breach-in-cascade-layer/
spaceninjafridayfrontend wordpress cascadelayers important csshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:9791f400eb80/Container Query Typography Systems | TEA Stack2026-04-19T19:08:58+00:00
https://mattwaler.com/blog/container-query-typography-systems/
spaceninjafridayfrontend css typography containerquerieshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:a1f85442c84c/Squash and Stretch • Josh W. Comeau2026-04-19T19:06:47+00:00
https://www.joshwcomeau.com/animation/squash-and-stretch/
spaceninjafridayfrontend css animation disney squash stretchhttps://pinboard.in/https://pinboard.in/u:spaceninja/b:675a49c186ae/State of the Browser (2026) It’s 10PM: Do You Know Where Your JavaScript Is?—zachleat.com2026-04-19T19:01:34+00:00
https://www.zachleat.com/web/its-10pm/
spaceninjafridayfrontend video javascript performancehttps://pinboard.in/https://pinboard.in/u:spaceninja/b:19b2d737105f/delphitools2026-04-19T18:58:20+00:00
https://tools.rmv.fyi/
spaceninjatools utility free qrcode palette generator backgroundshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:a7039a7a27aa/Unicode Variation Selectors - CSSence.com2026-04-19T18:55:59+00:00
https://cssence.com/2026/font-variant-emoji/
spaceninjacss font-variant-emoji emoji unicode iconshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:c5c55425dc1b/Testing OpenGraph on localhost from the CLI before you go public | Simon Hartcher2026-04-19T18:52:03+00:00
https://simonhartcher.com/posts/2026-04-15-testing-opengraph-on-localhost-from-the-cli/
spaceninjaopengraph social testing qahttps://pinboard.in/https://pinboard.in/u:spaceninja/b:2fed2a9f4a43/unmta/emailmd: Render markdown into email-safe HTML2026-04-16T22:29:37+00:00
https://github.com/unmta/emailmd
spaceninjaemail markdown templates htmlhttps://pinboard.in/u:spaceninja/b:df36fa2b875f/Small Plotting Trick for Choice-of Work – Emily Short's Interactive Storytelling2026-04-16T22:28:50+00:00
https://emshort.blog/2017/04/01/small-plotting-trick-for-choice-of-work/
spaceninjaink interactivefiction writing howto characters plottinghttps://pinboard.in/u:spaceninja/b:56a2e5276b6e/Overboard with Comments2026-04-16T02:24:15+00:00
https://gist.github.com/spaceninja/c2c086584be17bfc5bc93499ee4dcd93
spaceninjaink interactivefiction howto writinghttps://pinboard.in/u:spaceninja/b:796de0584f35/wildwinter/Ink-Storylet-Framework: Simple Unity storylet framework for Ink.2026-04-15T02:47:35+00:00
https://github.com/wildwinter/Ink-Storylet-Framework
spaceninjaink interactivefiction writing howto storyletshttps://pinboard.in/u:spaceninja/b:49b411f33b47/Storylet implementation2026-04-15T02:46:28+00:00
https://gist.github.com/joningold/0a45fadb69e697ff34294a2aa8f06ce6
spaceninjastorylets ink interactivefiction howto writinghttps://pinboard.in/u:spaceninja/b:c874442706cb/Storylets in Ink2026-04-15T02:45:58+00:00
https://pauljickling.github.io/2024/01/29/storylets-using-ink.html
spaceninjastorylets ink interactivefiction howto writinghttps://pinboard.in/u:spaceninja/b:3e70d2af5f0d/Storylets Play Together – Emily Short's Interactive Storytelling2026-04-15T02:23:23+00:00
https://emshort.blog/2019/12/03/storylets-play-together/
spaceninjainteractivefiction storylets ink howto writinghttps://pinboard.in/u:spaceninja/b:9bdc9496d0e0/Standard Patterns in Choice-Based Games | These Heterogenous Tasks2026-04-15T02:12:55+00:00
https://heterogenoustasks.wordpress.com/2015/01/26/standard-patterns-in-choice-based-games/
spaceninjainteractivefiction games chooseyourownadventure ink howto writinghttps://pinboard.in/u:spaceninja/b:86a20a9e3247/Your skip link targets may not need tabindex=-1 to work properly - Manuel Matuzovic2026-04-12T16:57:58+00:00
https://www.matuzo.at/blog/2026/skip-links-tabindex
spaceninjafridayfrontend accessibility skiplinks tabindex cssbasicshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:ba469cbedc5c/New CSS Multi-Column Layout Features in Chrome | CSS-Tricks2026-04-12T16:55:42+00:00
https://css-tricks.com/css-multi-column-layout-wrapping-features/
spaceninjafridayfrontend css cssbasics multicol column-height column-wraphttps://pinboard.in/https://pinboard.in/u:spaceninja/b:80dde9673224/Your options for preloading images with JavaScript | Alex MacArthur2026-04-12T16:54:25+00:00
https://macarthur.me/posts/preloading-images/
spaceninjafridayfrontend javascript preload cssbasicshttps://pinboard.in/https://pinboard.in/u:spaceninja/b:c6636b3ad221/