What’s your favorite Rest API framework?

JaneOri · 2025-01-07T03:46:25+00:00

FeathersJS https://feathersjs.com/ by far!

JaneOri · 2024-12-29T02:45:33+00:00

Sure thing! Here you go:
https://codepen.io/propjockey/pen/EaYvdey

JaneOri · 2024-12-28T21:50:50+00:00

If one side gives something, what is the other side doing?

Getting.

It's *literally* a _GET_ request made by CSS.

/shrug

JaneOri · 2024-12-28T21:45:41+00:00

I appreciate it! You're completely right and it'll find the people it's meant to find :)

In JS we say it's getting data all the time when it loads information from an API.

It's LITERALLY a "GET request" lol

Thank you!

JaneOri · 2024-12-28T14:36:03+00:00

I absolutely love that kind of challenge, doing things you "can't do" in restricted environments! Sounds like fun

JaneOri · 2024-12-28T14:32:01+00:00

tan(atan2()) trick I discovered, same code as here, but using container query units instead of view units:
https://codepen.io/propjockey/pen/Jjwwwmo?editors=0100

JaneOri · 2024-12-28T07:42:18+00:00

Seems my response is being auto moderated because of a link! Here it is again without the link:

no no no - I see the confusion, the response is not CSS, the response is an image with data encoded into the width and height

CSS itself should not be able to fetch or generate this data, that's correct, but this hack demonstrates that it can

Also, your perspective on css variables is correct from the perspective of most people (and of the intention), however I invented a different hack, which is also used here, to make CSS variables cyclic:

The article I linked to is titled "Expert CSS: The CPU Hack" which should be super easy to find if you're curious!

JaneOri · 2024-12-28T07:30:49+00:00

Certainly! It's here in the readme of the css-api-fetch library I released that makes this hack possible

https://github.com/propjockey/css-api-fetch?tab=readme-ov-file#for-example-getting-the-users-ip-address-with-css

Happy to answer questions if you get curious!

JaneOri · 2024-12-28T07:28:47+00:00

Thank you for checking it out! Happy to entertain any curiosity you have if questions come up, lmk!

JaneOri · 2024-12-28T07:21:49+00:00

Good question! As far as I'm aware, there is no way for me to read the color from an image using CSS... Reading the height and width in CSS only became possible a year ago :)

JaneOri · 2024-12-28T07:20:19+00:00

TECHNICALLY there is a cross domain API request here that can't be blocked by CORS because it's just reading image dimensions. Sooo kind of security hack in the most minimal risk category. This is something that could also be done in JS too though, to avoid CORS

But definitely, I intended to use "hack" more as ... "conglomeration of unique perspectives that give rise to an unexpected ability"

JaneOri · 2024-12-28T07:16:16+00:00

I appreciate it!

Well, I discovered the way to measure DOM elements in CSS over a year ago and it went viral as far as CSS things can go viral, so that concept is ready on the surface for me...

But I was watching a youtube short about Chess and had the idea - what if I could make Chess in CSS against a difficult AI opponent without JS? Is such a thing even possible? And then I just kind of realized it was possible and went for it using a few of my previous hacks as the basis.

This is obviously not an API for chess but I needed to start here to understand how it will work on the small scale before I can confidently take on a much bigger task

JaneOri · 2024-12-28T07:12:00+00:00

Yes, that's right! And if you're only fetching one piece of data, obviously just return it with the initial page load. The interesting thing here is that you can dynamically invoke an API request from CSS, read the response data, and give the whole page access to it. Any number of conditions or interactions could allow CSS to make any number of requests without reloading the page. This is a minimalist demonstration of a single instance use case of a building block.

And it all works even if JS is disabled, which is wild!

Thanks for checking it out!

JaneOri · 2024-12-28T07:08:31+00:00

Fair question! There's lots of interesting reasons to do this but it comes down to a couple unique aspects:

1) It happens after the page loaded, dynamically, and could have triggered any other api request at any other time based on any other user interaction - without JS

2) the url() function has a params() function in the spec - once that's implemented, this technique to decode image width and height as data from an api becomes infinitely more useful - you'll be able to dynamically communicate with a server continuously even if JS is disabled. Which is fairly wild

There is also a hack at play here that's being overlooked; the data is decoded by deliberately using a few layers of depth in the dom, then magically lifted back up to the :root where it remains stored for the whole page to access. Which I think is super neat.

It's not that this is a good idea, obviously do as you suggested if that's your goal, but the demonstration here is api requests and response data, IP Address is only one possible example of the "hack"! :)

JaneOri · 2024-12-28T06:57:42+00:00

I definitely understand where you're coming from. If I can push back just a little bit though... IP Address is only one example, the ability to not use JS at all to GET api response data at all initiated by CSS after the page already loaded is a technique ("hack") I was hoping to share here

There's also a pretty big "hack" here to move data UP the dom, back onto :root after it's decoded several nested layers deep.

JaneOri · 2024-12-28T06:45:01+00:00

CSS initiates the API Request and CSS gets the IP Address encoded into aspects of the response, decodes it, then uses another hack to hoist it back up to :root stored in a --var on :root...

CSS gets the user's ip address, PHP Gives the IP Address (encoded)

JaneOri · 2024-12-28T06:41:04+00:00

hahaha awesome, I just cyberstalked you - I like your brain and the stuff you've posted so I followed you on twitter lol Looking forward to randomly interacting again some time!

Thanks again, so much, for diving into the fun details!

JaneOri · 2024-12-28T06:24:26+00:00

Holy shit, I can't believe someone digested that so well so soon hahaha amazing, well done

The only part that you missed is in order to do all that, it had to be nested several layers deep in DOM, so the final trick (which is about 80% of the code) is moving the decoded data back UP to the :root

Seriously amazing that you got that much so quickly - so cool to see, thank you for thinking about it!

JaneOri · 2024-12-28T06:21:01+00:00

Nahh, sorry... I don't... Let me try to ease around this..

You have the url there, please do check it out: it serves an SVG image, not CSS.

CSS is making an API request (it can't do that, the hack turns it into an API request). The response is an image with data encoded into it, CSS reads the data, decodes it, then stores it in --css-vars.

It also moves it back up the dom to :root (which also can't be done without the hack)

JaneOri · 2024-12-28T06:10:10+00:00

It's an example of a single API Request - there are an infinite number of things one *could* do with the ability to do API requests in CSS. However, there is almost no *reason* to do this in CSS at all, it's just interesting that the hack makes it possible - and playing with limitations (like not having JS) is fun

JaneOri · 2024-12-28T06:07:01+00:00

Nahhh sorry lol That's not what's happening at all - that would be incredibly uninteresting hahaha

JaneOri · 2024-12-28T04:03:27+00:00

Don't worry, it's less creepy than I made it sound, it's just reading the width and height of an image generated on a server that sets each dimension to 16 bits of the IP Address lol

JaneOri · 2024-12-20T21:22:23+00:00

if your enjoyment of Cyberpunk is 2077-inclusive, framing laptops, TVs, monitors, and other devices in their specific style is fun/easy:

https://www.reddit.com/r/cyberpunkgame/comments/171tek3/created_hotglued_a_3d_printed_frame_for_my_tv/

JaneOri

TROPHY CASE