Watching Disclosure Day was an amazing experience for me. I cannot wait. I've mentioned it a few times on Dev that I'm a lifelong contactee and it's really cool to see some external validation about the related spiritually guided motions and the sort of synchronistic "move in this direction" energy.

Does anyone else I know have a vision board? Mine is in storage since I've been traveling the world for almost 1.5 years but I am grateful to have a photo of it with me. 😊💚

No multi-pane view here, since mouse position is not synced. But between Layout debugging and the 3d view, @polypane.app gives you a (super janky) noclip debug mode 🤯

With all the 3D CSS projects going around, Doom, Quake, etc it makes me want to revisit my 2019 100% CSS renders (based on artwork by Romain Trystram) github.com/propjockey/D...

This is the article my heart wanted to write, a slice of the excitement I have about Custom CSS Functions! master.dev/blog/the-sco... My previous article for wanderers needing to cross the Caveat Sand Storm: master.dev/blog/the-fun... I hope it sparks the spirit of imagination in you too 💚

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connect... Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀 Drag the elements and see the magic 🪄

CSS functions, the alpha() function, Grid Lanes, some things about <dialog> that you might not know, CSS Wordle, and more. Featuring @janeori.propjockey.io, @nerdy.dev, @una.im, @sunkanmifafowora.bsky.social, #CSSDay As always, thanks to @dxnny.fun for the lowdown! css-tricks.com/whats-import...

Awesome, I love this idea. I also love the pft prefix like it's no big deal that it's giving superpower awareness to CSS. CSS: can I have pointer position? JS: pft! Sure. Hahah prop-for-that.netlify.app/docsite/ 👏

Bangkok -> Manila -> Seattle -> Houston Errands all day, switch driver's license from Hawaii to Texas, Escapees mail scanning ready, sleep all night in a hotel Manila Philippines looked awesome on landing and take off so today: Houston -> Seattle -> Manila And that's where I'll live for 30 days.

Thank goodness! 🙏

I loved Spider-Noir. What's even more rewarding is seeing Nicolas Cage looking so happy in interviews about it. Grateful to witness such a perfect fit, to see a person so unique bring their full self somewhere unexpected and absolutely nail it. 🤗

flex-wrap: balance! nerdy.dev/flex-wrap-ba...

CSS functions. CSS... functions? CSS functions! frontendmasters.com/blog/the-fun... by @janeori.propjockey.io

Every time a CSS feature needs fixed, an @ supports loses its wings. Which is why we need browser() engine() and min-version() at supports queries instead of direct feature detection. @ supports feature detection is almost never correct across the board, rendering it nearly useless (and dangerous)

Tons of CSS fixes 🎉

In CSS, var(--registered-prop, fallbacks are unfortunately unreachable) so I made custom setter functions: propjockey.github.io/doubledash.c... available in v0.3.3

In CSS, var(--registered-prop, fallbacks are unfortunately unreachable) so I made custom setter functions: propjockey.github.io/doubledash.c... available in v0.3.3

Came back to one of my favorite cities in the world a couple weeks ago. This is the reason the double dash website is green propjockey.github.io/doubledash.c... It's so delicious 🤤

Do you want an overview of CSS in 2030? Check the below 👇 The future of programming with CSS (oops, I said programming 🤫)

Like Lodash but for CSS propjockey.github.io/doubledash.c...

My take on `box-sizing: border-box` www.reddit.com/r/css/commen... TL;DR unlearn adding it to the reset, as well as setting dimensions (width/ height) explicitly. 👋 to @kevinpowell.co for giving me a video to link to 😀 👋 to @miriam.codes for the cool article on `body` margin to reference 😎 #CSS

Custom shorthand properties in CSS? Pretty close! dev.to/janeori/css-...

There is more potential locked behind the CSS custom fn spread operator than any other planned feature in all of CSS. Aside from being a severe DX inconsistency that var(csv) args don't auto spread as planned (and nearly shipped), that decision (temporarily) nerfed @ fn potential 1000 times over.

Fork of Ana Tudor's beautiful animated SCSS for-loop particle artwork implemented in 100% CSS: codepen.io/propjockey/p...

FOR LOOPS IN 100% CSS codepen.io/propjockey/p... 🫳 🎤

How the 100% CSS --repeat() function works, some demos, and a really easy way for you to begin using it now! dev.to/janeori/100-...

Anyone who works with numbers in CSS is going to love this one. Trivially show numbers with decimal precision in content: codepen.io/propjockey/p... Bonus content: do the same thing with <length> codepen.io/propjockey/p... 100% CSS

How the 100% CSS --repeat() function works, some demos, and a really easy way for you to begin using it now! dev.to/janeori/100-...

@ function is an absolutely incredible raw gemstone. It just needs some serious polish and tumbling- nothing newly added to the CSS spec these days should be allowed to add this many unexpected caveats to the language. Args need to spread by default like standard. Registration needs consistency. Etc

100% CSS repeat() function codepen.io/propjockey/p... Repeat anything, strings, sets of animation properties to help manage parallel array properties, calc() partials, polygon partials, shape partials, text-shadows, anything!

breakpoint-system SPACE TOGGLE EXPANSION Matches the full library reach, use it anywhere (as far back as May 2023 on Safari 16.5)! The docs for them are a good read for anyone, especially if you're interested in authoring CSS libraries yourself! propjockey.breakpoint-system.com#docs-space-t...

CSS tip: If you code your library's class name like so: [class*="breakpoint-system"] Your users can extend the functionality like so: .my-element--breakpoint-system { /* override default settings */ } Author Experience improvement: SEEING the dependency of their class name.

I am not overstating how impactful this will be for both designers and developers. It removes a litany of considerations and burdens on both sides, in the hand-off, AND delivers to your audience the best, most accessible, UX that any responsive solution has ever achieved. dev.to/janeori/css-...

Another brand new way to do responsive design. New accessibility solutions to long standing problems solved in the background. Customizable breakpoints. Customizable query aliases. Design with pixels, build with equiv breakpoint units, 1:1 fluid delivery. propjockey.breakpoint-system.com 100% CSS

css-peeps.com I still love this.

CSS wishlist item: Animation tainting on --vars exists to prevent cycles between animations. If I'm inheriting the value of a tainted var, there's no reason (as far as I can tell) to also inherit the tainting state. Taint shouldn't spread. codepen.io/propjockey/p...

This city is built with CSS. No SVG. No images. No HTML. Just gradients... and a bit of patience. codepen.io/alvaromontor... I haven't touched this in a while, but it still holds up. I'd love to expand it into a full city someday. #css #cssart #webdev

I still can’t believe this is all CSS and a couple of divs in the browser. And that it runs so smooth on my phone. I just love the top view - including that transition. And the way those fireballs just come hurdling towards you.

You can get the OS scrollbar gutter width as an integer in a --CSS-var on :root codepen.io/propjockey/p... (to have a gutter at all you'll have to, on mac, turn on scrollbars to "always", etc, and refresh to ever see it non-zero) But it's bugged in Safari: bugs.webkit.org/show_bug.cgi...

I had fun doing something that normally feels like a grind because every little idea I had was fulfilled quickly by AI and a bit of tweaking to learn and make it juuuust right It's not CSS but it's got style 🤙💚 dev.to/janeori/cust...

CSS vars holding arrays should've expanded into multiple parameters for --function calls. Especially because there's a syntax to prevent it. What a bummer! jsfiddle.net/wdmnockj/1/ github.com/w3c/csswg-dr... issues.chromium.org/issues/39020... drafts.csswg.org/css-values-5....

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS lyra.horse/x86css/

Responsive CSS shapes are coming drafts.csswg.org/css-shapes-2... Implemented in Chrome Canary & Safari Technology Preview Blog post etc. soon

Data Exfiltration is my 2nd best CTF category so I really enjoyed scripting this within the limits of CSS. Check it out while you're getting your work week started: dev.to/janeori/100-...

Living up to the PropJockey slogan here! :) "the value of properties, orchestrated" Watch this new advanced CSS exfiltration hack execute live (in Chrome) in the embedded CodePen demo @ the bottom of the article! 16 times more data from a single SVG fetch than the prev hack! dev.to/janeori/100-...

5 minutes with this text-box syntax and feature explorer is all you need to ramp up! nerdy.dev/notebook/tex...

:checked { --👽: ; } :not(:checked) { --👽: initial; }

Forgot to document one of the properties from the library I released at 1 am so I've updated the article - including an additional CodePen demo! 👽💚 dev.to/janeori/100-...

Released a new 100% CSS utility library: github.com/propjockey/f... Read all about it here! dev.to/janeori/100-... I might do a followup article on *how* it works if there's curiosity 💚👽

Want to know exactly how the CSS GETting your IP Address thing works? I wrote an explainer, lots of narrative exposition but easy enough to skip to each of the CodePen examples to learn exactly *HOW* it works. Plus... it ends with a teaser of what comes next! 👽💚 dev.to/janeori/gett...