Hacker News Reader

Comment by metayrnc | Hacker News Reader

Can someone give some example usecases? I am curious as to how this is used. Thank you.

I tried something similar like this to render thumbnail of websites (at a very small file-size). E.g. https://twitter.com/yvoschaap/status/1446397003316047872

That is super neat! Did you end up having any users/customers?

Isn't this something like archive.ph is doing? Snapshotting and screenshotting websites. I'm referring both to you and the op.

https://archive.ph/1NNZr

That looks like a Web Archive (WARC) and a PNG screen shot. I think you can make a screenshot with CasperJS. The WARC can be created by wget.

Yea you are right about PNG but wrong about WARC. Archive.ph doesn't use WARC.

What does it use, if you know?

Source?

Their FAQ says: https://archive.ph/faq#:~:text=Which%20parts%20of,of%201024x....

Wikipedia says: https://en.wikipedia.org/wiki/Archive.today#:~:text=Web%20pa....

So I assumed they don't use it but idk for sure.

Thanks.

How small are you getting them? I'm straight up screenshotting websites (e.g. https://search.marginalia.nu/screenshot/245804). Seem to come in at on average 17 Kb, based on a sample size of 550K screenshots.

That's pretty cool! How do you go about removing the details? Is it done in JavaScript before the screenshot is taken, or by post-processing the SVG?

IMO the use case is limited but interesting. The most obvious would be product screenshots for landing pages, although typically design tools handle that well enough.

I'm currently building a web-app for building web pages, and I'd love for the user to be able to view a thumbnail gallery of all the pages they've built. This tool would allow me to build a zooming feature pretty easily.

Outside of those two, I'd imagine the use cases are fairly limited.

The thing about having access to the Skia render graph is that all of a sudden you're no longer limited to product screenshots and screen recordings. Imagine a pipeline where you can export someone's interaction session with a site, pixel-perfect, into DaVinci Resolve or Blender or Unity as a fully annotated DOM-advised render node hierarchy, with consistent node identities over time, of every rendered element on the page as it changes across frames. That's way more powerful than just pixels.

Imagine flying through your site in 3D (or even VR) with full control over timing, being able to explode and un-explode your DOM elements as they transition into being - the type of thing that only Apple would do for their WWDC demos with dedicated visualization teams.

The start is to be able to see the rendering engine as a generator for not just raster data over time, but vector data over time. Of course, there's a lot of work to do from there, but this is the core leap.

Cynical take: it won't hold. It'll get neutered by vendors and eventually purposefully removed as a possibility by Google.

Here's the thing: this "core leap" you mention isn't new. It's been made long before, on input side: that's what HTML is. All those use cases you mention should be possible, but aren't. Why? Because the for-profit web doesn't want that.

Most websites on the Internet today exist not to be useful, but to use you. For that, it's most important that the website author has maximum control over what the users see. This allows them to effectively place ads, do A/B tests for maximum manipulation (er, "engagement"), force a specific experience on you, expose you to right upsells in the right places. If they could get away with serving you clickable JPEGs, they would absolutely do that. Alas, HTML + JS + CSS is the industry standard, the all things considered cheapest option - so most vendors instead just resort to going out of their way[0] to force their sites to render in specific ways, and supplement it with anti-adblock scripts/nags, randomizing DOM properties, pushing mobile apps, etc.

To be fair, they do have some point. Look at this very thread: currently, the top comments talk about using Chrome -> SVG pipe to access accidentally leaked commercial and government data, such as hidden layers in product CAD drawings, or improperly censored text[1]. Your own example, "export someone's interaction session with a site, pixel-perfect, into DaVinci Resolve or Blender or Unity" is going to be mostly used adversarially (e.g. by competitors). My own immediate application would be removal of ads, which presumably have distinct pattern in such rendering, as they get inserted at a different stage of the render pipeline than the content itself.

This is just the usual battle over control of the UX of a website. The vendor wants to wear me down with their obnoxious, bullshit UX[2], serve me ads, and use DRM to force me to play by their rules. I want my browser to be my user agent. We can't have it both ways[3], and unfortunately, Google is on the side of money.

[0] - Well, to be fair, a lot of this is done by default by frameworks, or encoded in webdev "best practices".

[1] - Obligatory reminder: the only fool-proof way of publishing partially censored documents or images is to censor them digitally, then print out, scan back, and distribute the scan. If you don't go through analog, you risk accidentally leaking censored information or relevant metadata.

[2] - Like e.g. every single e-commerce platform. The vendor hopes I'll get tired and make a suboptimal choice. I want to pull vendor's data into a database and run SQL queries on it, so I can make near-optimal purchase decisions in fraction of the time. This "core leap" you mention would be a big win for me, which is why it won't last.

[3] - At this point, accessibility is the only thing that's keeping websites somewhat sane. There's plenty of apologists for all the underhanded and malicious techniques that are core to webdev these days - but they can't usually dismiss the complaint that the website is not usable on a screen reader. For some sites, it would be illegal to do so.

I feel like we're talking at cross purposes. My point was primarily that OP's Chromium patch could be the start of an excellent tool for website creators to unlock their own sites' and web applications' rendering potential, and level the playing field between smaller startups and much larger technology companies.

I'm quite familiar with anti-scraping and anti-ad-blocking countermeasures, and the first thing any such tool would block is a non-standard rendering engine like this - so unless the website creator consents, this really doesn't hurt or help consumer-friendliness (which, I agree, is in a sorry state these days) in any meaningful way.

I could imagine this been used, once it's more mature, as a Weasy Print (html to PDF) replacement. (assuming it ends up supporting PDF's or adding a different svg2pdf convertor)

There are countless use cases where a system needs to generate something printable, such as a PDF report, ticket, gift certificate, etc. And generating something that looks great from a system that is good at generating html can be a challenge. Being able to convert a rendered html page to a vector graphic opens up a lot of options.

I already have an AWS Lambda function running Weasy Print for when I need simple PDF generated from a webapp. It'd be great to be able to switch to something like this that does a better job at rendering HTML, and therefore having the option to make more beautiful PDF's.

I have a "generator" site[1] where people are able create/share a "fairly" unique image (billions of potential combos) rendered in the dom. There's no point pre-rendering every possible version of a all-but unique social image, so instead I generate them on the fly as they are requested (i.e someone shares one).

In my case I actually render them on the client using dom-to-image[2] and then store/cache them using R2. This is basically to save on server costs (it's hosted on free CF pages with a worker). A more secure implementation (with a compute budget) might use a headless browser like this server side to render the image.

[1] perfectpollie.au

[2] npmjs.com/dom-to-image

I do something similar - but using the Print command and converting the PDF to SVG - to import websites into Blender for flashy animations. This allows me to neatly animate things in/out, and zoom into details without pixelation.

if it works how i think it does, this could be really nice to cook up some infographics in a css framework like tailwind. then make some svgs for a github readme

for example i made this one[1] with tailwind but i just ended up taking a png screenshot

[1] https://github.com/sentriz/socr/blob/master/.github/socr.png

Great for screenshots to render in a video.

if we can reduce the size of the basis footprint for a browser implementation, we can more easily produce new browsers (i.e by implementing a fully general Path, and font rendering)

That would be cool if actually converting HTML to SVG would save you bandwidth and all the rest that goes with web requests. Imagine a web browser that only supports SVG and converts all HTML to SVG then when browsing the web you would only look at screenshots of websites and webpages. This would be something like read-only browser. It is already possible[0] tho but it is not enabled by default on Chrome nor it is exclusive feature.

[0] https://frankgroeneveld.nl/2021/08/24/most-underused-browser...

Reply on news.ycombinator.com