Hacker News new | past | comments | ask | show | jobs | submit login
Yes, I can connect to a DB in CSS (leemeichin.com)
536 points by skilled on Feb 3, 2022 | hide | past | favorite | 134 comments



Author here. While it's true that this depends on JS to work (because of the various new CSS Object Model APIs in the browser), I think there's enough doubt about my technique here that I can submit this for YC2023 and make bank in maybe a decade or so.

After all, I remember what everyone said about Dropbox...


I think that technically you met the objective: you did make a css statement to query a database. What you have to construct on the side so it works is a lesson to learn, but at the end there was a valid css line that will reach the db.

I think purist try to process the feeling by going on deflecting and denial, which is a personal reaction. A common one at that, but is not a popularity contest.

As for me, I am having a lot of fun seeing my coworkers cringe asking them the question. It is fun.


You need to put this in the context of some relatively recent twitter drama around 'I only know css and html, but am every bit as much programmer as anyone else'.


You can use SASS, but I agree with you.


If you want to impress Hacker News, you have to write a browser in CSS, too, because currently your work depends on C++.


If CSS property value is not limited in length, you could actually put the whole browser source code in it... :-)


> the whole browser source code in it

Starting, of course, with writing CSS in CSS.

(Recently saw a video with one of Thompson or Ritchie, IIRC. He described his mentor defining a language, defining that language in that language, then hand-translating that second definition into machine code. TMG -- transmogrifier.)


It's CSS all the way down!

What we REALLY need here is to be able to compile CSS into x86 so you can write a multi-threaded kernel for your CSS-coded browser to run on.


node.css - here we come.


Great! Now all we need is a pure CSS operating system, and we're ready to go.


Nah, we still need an FPGA that takes CSS as its bitstream format, and a "CSSDL" that lets you define the hardware layout in CSS...


Calm down, Satan.


Old school quality shit posting all the way down. I appreciate you man.


Where were you able to find a copy of K&R's Necronomicon?

I thought it was banned for this very reason.


I invoke an incantation of Undefined Behaviour from one of its blackened pages and chant three Alan Kays to manifest it in the physical realm


What is K&R's Necronomicon? Link?


https://en.wikipedia.org/wiki/Necronomicon but written by the authors of C


Thanks but still confused. I'm a little familiar with Lovecraft as an author, but what is "K&R" and "C"?


"K&R" generally refers to the classical book about the C programming language: https://en.wikipedia.org/wiki/The_C_Programming_Language


Brian Kernighan and Dennis Ritchie.

Their book, "The C Programming Language" was a must read bible decades ago.


"K" is also a HN reader from what I know.


Don't forget us little people on your way up


Do I get equity for submitting this?


I'll give you 5% off the bat and +1% for every 30 minutes the post stays at the top. Congrats on being sqlcss.xyz's new CMO.


This would be a perfect submission to the SIGBOVIK conference!


I second this idea - perfect candidate for SIGBOVIK http://sigbovik.org/


Just FYI the paint worklets are also available (at least) in WebKit nightly since around August 2021.

So I'd guess that your implementation could work with a few modifications on iOS, as the worklets aren't hidden behind a compile time feature flag.

Kudos to you, this is exactly why I removed the worklets from my retrokit fork :)


Sadly I don't have any iOS/MacOS devices... maybe I can re-host the source on GitHub and engage a community around the project.


Hacks are cool and awesome! But YC is looking for products and customers, not pure hacks.

(Yeah, everyone doubted Dropbox, but everyone doubted every other successful and unsuccesful company out there in its early stages. People doubting a company isn't much of a signal. Even in its early stages Dropbox had a clear monetization and growth strategy.)


Nice job. Time to release it as an NPM package I guess?


I just want to say that I appreciate you dropping the author card just for the sake of making a joke.


What did people say about Dropbox?


That basically it wouldn't gain traction because why wouldn't you just use rsync and a NAS? (Or something along those lines, I don't remember it exactly.)


While it's true that you can query "a DB" using (not only, but also) CSS, "the database" which the author of the tweet (or "the recruiters") mean is probably running on the server. Challenge accepted (of course without using a backend that provides access to the DB, that would be too easy)?


> I think there's enough doubt about my technique here that I can submit this for YC2023 and make bank in maybe a decade or so.

Dropbox was doubt. The response you're seeing isn't doubt or skepticism. The responses are proclaiming that your technical claim is factually incorrect. They're right - your premise is false. You know you can't connect using CSS, which is what the quoted text at the top regarding recruiters clearly states, and you changed the wording: "using CSS" vs "in CSS."


If it doesn't work without Javascript enabled, then it's not a CSS solution. I was quite excited by the title, but alas the project doesn't live up to the title.


A more old-school but no-JS solution would be point image/font URLs to endpoints that queries a DB on GET requests.

With enough contortions and breaking GET idempotency you could probably do a whole CRUD app with just that.


In which case you are connecting to a web server that connects to a database, you are not connecting to a database.


To be pedantic here, you're never connecting directly to a database, but rather to a DBMS, and it's nowhere set in stone that the DBMS must not offer a web interface.


I mostly use database instead of DBMS because nobody calls it a DBMS, at best a database or SQL server. And I actually wondered for a short moment whether there is any DBMS with a web server. But I would probably still argue that you are connecting to a web server that just happens to be integrated into the DMBS. But admittedly at some point this turns into a matter of point of view and personal preference how to slice the system and label the components.


And I actually wondered for a short moment whether there is any DBMS with a web server.

I don't know if it's still the case or not, but Oracle had the option to run a web-server as part of the database at one time. Back in the Oracle 8 or Oracle 9 era, as best as I can remember.

EDIT:

OK, here we go.

https://docs.oracle.com/en/database/oracle/oracle-database/1...

You can use an embedded version of the PL/SQL gateway that runs in the XML DB HTTP Listener in the database. It provides the core features of mod_plsql in the database but does not require the Oracle HTTP Server. You configure the embedded PL/SQL gateway with the DBMS_EPG package in the PL/SQL Web Toolkit.

Some advantages of using the embedded gateway instead of mod_plsql are:

You can invoke PL/SQL web applications like Application Express without installing Oracle HTTP Server, thereby simplifying installation, configuration, and administration of PL/SQL based web applications.


Did you see that post from last week https://blog.polyglot.network/backend.sql-+-frontend.js-love?

You can set arbitrary headers with postgrest so you can use it to serve pages. I don't know if this is exactly what you mean but it's as close to "dbms with its own web server" as I've seen.

It's also just cool lol. Though as much as I like plpgsql and it would be hilarious to use it as a templating engine I don't really have a use for this.


You never connect to a DBMS. Everything you're doing to interact with it, or a web server is mediated by your OS. You just open sockets and the connection is handled by TCP or IPC or whatever.


You never really open a socket, you really only push and pull some electrons around and then...


(╯°□°)╯︵ ┻━┻


CouchDB famously has an HTTP protocol.


That's not entirely true. You can absolutely load underlying data structures into your own application, and in fact this is how a lot of older database tech used to be. Stuff like dBase, Access, etc., used to be literally "load database into program memory" or "read database format from file" - similar to what SQLite does now.

I wonder if CSS could implement sqlite...


But even in that case you are - at least usually - still interacting with some kind of DBMS. I am not really familiar with the examples you named but with SQL Server Compact you are essentially just loading and running the DBMS in your process. But as I said in my other reply, at some point the distinctions become blurry.


I'd propose the litmus test for this is "can it initiate action on its own, or does it require your code to do so." In this vein, SQLite is not actually a DBMS while Postgres is. The actual Management System parts are things that handle backup, replication, auth, logging, etc.

The database parts are dealing with areas that must have some triggering action (calling a stored procedure, running a trigger, selecting a resultset, that kind of thing) for anything to happen.

The lines are blurring, yes. What's interesting is the 4GL systems which do the reverse (colocate your apps with your data for speed).


I think that definition is way to narrow, the management in DBMS refers to managing the data, keeping it consistent, laying it out on disk and in memory, reading, updating and deleting it. To address the things you named, DBMSs are not required to support backups or replication, authentication and logging happens during actions you initiate.


I've seen a few DBs accessible through a REST API.


Several are only accessible through a HTTP REST API, even.

E.g. I'm not aware of an, out of the box, elasticsearch interface that is not the HTTP API.


This is pure five-minutes-of-serching knowledge, but it seems that Elasticsearch is not a database but a search engine build on top of Lucene.


Exactly, was thinking along the same lines.

While I appreciate the "shipostedness" in fulfilling the task "connect to DB in CSS" by cramming whole SQL database into CSS custom property and working with it using paint worklet (this would probably not even remotely cross my mind ever), with more pragmatic approach I don't see requirement of having actual database in the CSS in the original tweet, so single boring URL endpoint reading the SQL query from parameter and responding with CSS à la `:root { --result: 'whatever'; }` should accomplish given task as well, without those Houdini's stunts:

    @import "sql.css?query=Robert')%3B%20DROP%20TABLE%20Students%3B--"
    body::before { content: var(--result); }
(I guess browsers do URI encoding anyway, so probably no need to encode it by hand).

Or perhaps even more simple with render to image (like `<!..><svg ...><text>whatever</text></svg>`.

    body::before { content: url(sql.svg?query=...); }
That paint worklet does something similar anyway, but instead of `background: paint(…);` this would be `… url(…)`.

If JS and/or strictly static server-side is a must, the sql.css / sql.svg could be handled by a service worker with that sql-asm.js at disposal.


im pretty sure that's just called an api


I saw an HN comment recently saying that CSS is Turing complete; this sort of example makes me wonder if there's a formal model of side-effects and ability to do things like interface with I/O including NICs in order to make web/db/etc. requests?

Or maybe it doesn't even need (a separate) one, because all a Turing machine needs is some other 'networking machine' to be looking at some designated area on tape (I'm describing DMA essentially, I suppose)? And maybe what else happens externally in response to what's on the designated tape area is uninteresting/completely arbitrary and doesn't need to/inherently can't be formally modelled?


One idea a bit in this direction I have heard about is if a language is "Pacman-Complete" that is it can be used to implement Pacman


I thought Doom was the standard game people try to get working on all manner of ridiculous devices. So Doom-complete.


The tape machine model is one way of looking at it. Another is the type of functions (expressions) that can be computed. A turing complete process can compute general recursive functions.

I think of this very informally as having not only for() loops with fixed bounds on the loop index, but also while() loops where you don't know beforehand how many loops it will take to compute something. Alternatively you can express the same thing in terms of recursion. One characteristic is that it's possible to describe computations that never finish. Another is that you cannot always tell from looking at a particular program if it will ever finish.

Exactly how or if the result of a computation becomes apparent to the outside world, I think is not part of the theoretical description.


The connection itself has nothing to do with CSS. This is not "connecting to database", it at best "writing SQL queries in CSS".


Eh, I think it counts. I mean, aren't most database extensions for programming languages not written in the language its targeting? When I use mysql_query in PHP, aren't I just "writing SQL queries in PHP" and the underlying C driver is the one doing it? But we still say PHP can connect to databases.

Its just a driver for CSS written in the host language (JS).


https://www.w3schools.com/php/php_mysql_connect.asp

There's nothing similar in this CSS example, unless I missed it. (I do believe it can be done, the idea is "there" - you need to invent a syntax to declare connection details, error handling, etc; and then you can indeed argue that the .js part is just the "driver")


Fantastic. The next step is to create a declarative query model using CSS, complete with the built in CSS selector model. (Eg. if a div of class .a is inside a div of class .b, all the query parameters of .b get applied to .a). Then someone can create a Tailwind-like utility library for that and we're back to SQL


Not really. It uses lots of JavaScript.


This is accurate. But it’s also not: any time anything is done in any language we can just point at the language below it.

But yeah, this is probably more charitably described as “A CSS interface for SQL written in Javascript.”


Okay, but why not call every database extension for a language just "A [language] interface for SQL written in [driver language]."

"ext/mysqli is just a PHP interface for SQL written in C"

What is the difference


The challenge isn't to only use CSS, it's to "connect to a DB in CSS", which this does with `--sql-query: SELECT name FROM test;`.

So, in the strictest sense, "yes really".


Even without Houdini, we could have always written a piece of JS to read all the CSS on a page, and if it contains an SQL query, execute it. This implementation has nothing to do with CSS, but is obfuscated behind a new fancy api.


Still clever, though.


An V8 is written in C++ so...


Technically you could do any web requests which contain SQL in query paramaters even before with images/backgrounds and return data to the page. The thing is that it cannot work just between CSS and DB.


I believe the purpose of the article is to expose the paint API, rather than trying to claim that has been done with CSS alone. Which in some part is true, as CSS is allowing this at all in the first place.


Maybe it's time for me to switch to a text-only browser.

When CSS becomes Turing-complete it seems that even NoScript won't help me from nefarious web pages.


It is Turing Complete.[0] And before anyone says otherwise, Turing Completeness does not preclude a “crank” used in that post.

[0]: https://stackoverflow.com/a/5239256/1350209


That’s definitely not Turing complete. Not because of the crank, but the fact the exact number of memory cells is hard coded. I can run an n-cell Rule 110 simulation on a DFA, which is obviously not Turing complete.


If we're going to be pedantic, then yes, no Turing Machines exist and everything is just a Finite Automaton. It's more helpful when talking about programming languages to assume an unbounded memory. For example, the desktop I'm at right now has only 16 billion memory cells (16 GiB), but I don't think of it as a Finite Automaton.

The linked StackOverflow answer does not preclude adding more memory cells. It was just capped at 900 for an arbitrary reason.


"Bounded Turing complete" or more accurately a "linear bounded automaton" is usually considered a practical enough form of Turing equivalency. No real-world computer is actually a universal Turing machine.


The exact number of memory cells in your computer is also bounded.


Yes, but things we actually care and prove to be Turing complete are not. There’s no up front memory limitation in the lambda calculus or Javascript or Prolog.


But you can increase the “hard-coded” amount of memory in this CSS demo too.


To a finite amount, as part of the program itself. If I write a JS program that loops infinitely, pushing a number to an array, that will consume infinite memory by the standards of the JS spec. There’s no hard, upfront bound on memory.

If we can hardcode memory limitations in our programs, then every ‘uncomputable’ problem just becomes a lookup table.


Isn’t it somewhat arbitrary to draw lines between “the JS spec” (which might not directly specify any bounds on memory usage) and the actual specifications of any given machine running JS? I’m pretty sure JS tends to run on a 64-bit architecture, for example.

In fact, I’m pretty sure it’s not even true that “the JS spec” has no such limits. I’m reading that an array can’t be longer than 2^32. And apparently string length cannot exceed 2^53 - 1.


Turing completeness means literally nothing. It’s all about the APIs.


But JS is still required to for this to work, the title is a bit misleading


CSS is already Turing-complete if you set up an execution environment of some checkboxes and require user interaction to ‘advance the tape’: https://stackoverflow.com/a/5239256/453783


What does Turing completeness have to do with anything? Physical computers aren't even Turing complete themselves.


Under what definition is a physical computer not Turing Complete? The lack of infinite memory? That requirement would preclude literally everything but theoretical computers. It’s a lot more logical to talk in terms of “if there was infinite tape, would this thing Turing Complete?”

Brainf** is famously Turing Complete and can be executed on any desktop you can think of. That alone is enough to prove that your desktop itself is Turing Complete.


I think that the parent comment is actually supporting your point. It does not need to be Turing Complete to be extremely useful. Conversely, a model of computation (CSS) could be Turing Complete (with infinite memory, etc.) and lack arbitrary access the host filesystem (e.g., it only allows to read specific read-only files), thus being useless.


Even if you let computers have infinite memory it still doesn't matter that much if a language is Turing complete. The person I replied to seemed to be more worried about CSS reading localstorage compared to being able to recognize a recursively enumerable language.


Turing completeness is a mathematical concept, why try and extend it to physical devices? Ever computer I can think of corresponds to a finite state machine.



It may really be time to re-examine the text-only proposition (gemini style). There is this fear of missing out on visual content but I suspect this too could be handled.


we have come full circle! you should now browse websites with the terminal just to be secure. but then you get blocked for not having the right headers....


I wonder if there are any vulnerabilities in terminals which could be exploited


Or at a minimum, don't use Chrome ...


Title is very misleading

It's just JavaScript that interacts with SQLite and uses CSS API's to render the results


when a recruiter asks you to connect to a db with css is it really wrong to mislead them in this way though?


When a recruiter asks you to connect to a db with css, you leave immediately to never return.


I think I'm going to ask this question in every technical interview from now on, as a way of seeing how people deal with dumb shit.

Would love to know ahead of time if someone's just going to flee when I say something stupid. :)


Or write a strong AI with regular expressions that solves the problem for you.


I feel like there's a variation of jwz's famous quote waiting to be coined:

"Sometimes, when a programmer confronts a problem, ze thinks 'I know, I'll use strong AI', now ze __________."

* has 2 problems?

* has 3 problems?

* has infinite problems?

* has a death wish?


but the quote was already wrapped in the parent posters idea, since they were writing Strong AI with regular expressions!

If you have two problems when using regular expressions and you have X problems with Strong AI how will the combination of your problems be calculated?


If you have two problems when using regular expressions and you have X problems with Strong AI how will the combination of your problems be calculated?

Well... using a Strong AI, of course!


Is this supposed to be an approximation of a foreign accent or something?


I assume you mean the "ze" part? If so, no, that's one of a series of new pronouns that were coined specifically to be gender neutral.

https://www.mypronouns.org/ze-hir


Ah yes, that was the part throwing me.

Seems unnecessary when the original quote was already gender neutral with the use of they, an actual pronoun already in common use?


I wasn't looking at the original quote when I wrote what I wrote above, FWIW. And I wanted to avoid the instinctive inclination to write "he", so I went with "ze" because using "they" for singular case always feels forced and awkward to me. But yes, that would have been fine as well. It was a choice I made at a moment in time, not something that I spent a lot of time analyzing and debating. :-)


The requirement is "connect to the database using CSS", which is incredibly vague and ambiguous. It does not bar the use of other dependencies, so, IMHO, he complied with the requirements. The client could only claim it does not comply by adding new requirements.


So we can write Javascript in CSS. Previously we could write CSS in Javascript.

If I write a React template that embeds the CSS that embeds this Javascript, whose job is it to untangle my mess when I leave the company?


You could write HTML inside your CSS and then use your PaintWorklet to render that HTML onto a canvas.

Start with HTML 1.0 so you don't have to support CSS inside that HTML.


I built something a tiny bit similar to this (but not nearly as clever) a while ago - my trick is to return the results of a SQL query as CSS variables so you can use CSS generated content to display them on a page: https://simonwillison.net/2021/Jan/7/css-apis-no-javascript/


"A new set of APIs affectionately known as Houdini" - love it :-) I suppose because they provide so many means for escaping the browser sandbox?


The first question that naturally comes out of it is when we should expect an exploit, because it does look like a rich source of vulnerabilities.


CommitStrip, a IT themed comic strip, predicted this in 2019: https://www.commitstrip.com/en/2019/03/15/css-css-everywhere...


As many have pointed out, it is still using Javascript.

> As the name might suggest, this is how you connect to a database using CSS. It only works in Chrome, unfortunately.

Now we know why Firefox isn't widely used for more advanced websites and why tons of Chrome-based browsers exist.


Sounds like another reason to avoid Chrome.


TIL CSS Paint worklet.

Someone could use that to hook in a utility css framework.


At some point we need to ask who's asking for these CSS features?

Unless it's coming from the NSA who just wants more attack surface, I don't see the point...


Worklets can be used to run animation code on a separate thread, unlike current JS animation libraries which stutter if there is other code blocking it.


Current css transitions stutter if JS is busy...


One of the many reasons why you should use SRI and other security measures even on CSS resources and not just <script>s.


Here's an actual CSS-only implementation of a chat app that I happened to stumble across yesterday while tinkering: https://github.com/kkuchta/css-only-chat


Reminds me The Expert and 7 perpendicular lines - https://www.youtube.com/watch?v=B7MIJP90biM


Love this just because I empathize with struggling with js worklets!


Ugh. Thanks I hate it.


Hilarious to the max


Is CSS turing complete? If it were you could cross-compile SQLite into it. You'll probably want to have it run Doom first though.


CSS is kinda Turing-complete, but you need an external tick. And running SQLite compiled to CSS would probably be unusably slow.


Need to justify your disk quota? Now your tables can expand to fit the available space. Who said table-based layout was passe.


And yet another example of feature creep in today's browsers. Now one can extend CSS with JavaScript.


But do mauve SQL databases have the most RAM?


The title reads like a zero-day attack vector


I'm not satisfied until I see a quine.


You’re hired




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: