💾 Archived View for dioskouroi.xyz › thread › 29441265 captured on 2021-12-05 at 23:47:19. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

A no-reload HTML/CSS/JS playground with instant editor / output sync

Author: cetinsert

Score: 53

Comments: 23

Date: 2021-12-04 15:07:38

Web Link

________________________________________________________________________________

jffry wrote at 2021-12-04 17:13:08:

I honestly tried to read this page, but I just cannot get past the schizophrenic formatting. It seems like every one of the brand names involved is a combination of bold, italic, and normal text. Some of the parenthetical comments are a light gray color that is hard to read while others are not. Acronyms like HTML/CSS/JS are outlined in light blue for some reason. The comparison after the first videos has randomly smaller font size. Every usage of the common verb "sync" is bold and accompanied a service-mark superscript ("sync℠")

edit: In the spirit of trying to not just complain: an HTML playground with bidirectional sync of code state <> dom state is pretty cool! I look forward to seeing the open-source core :)

cetinsert wrote at 2021-12-04 17:25:18:

Thank you for informing us of the annoyances you have encountered. We are simply not well-trained in public communication. In fact, I wrote this post as the main dev myself. Todo: refrain from using excessive formatting and strive for better consistency.

jffry wrote at 2021-12-04 17:36:06:

Thanks for taking my complaints in the spirit in which they were intended. The bidirectional sync is really cool and I can understand being excited to share. I'm looking forwards to seeing the open source core

cetinsert wrote at 2021-12-04 17:44:17:

You are most welcome! A huge step in the direction of releasing this as its own independent open service would be finding a good name/domain and we are 1000% open for suggestions.

whiddershins wrote at 2021-12-04 17:26:32:

A decent guideline is aim for a maximum of three font treatments per view, and see how far you can get with just that.

andybak wrote at 2021-12-05 11:48:00:

Can you just drop the whole "Sync℠" thing and use normal english letters for the name? I hate it.

cetinsert wrote at 2021-12-05 18:30:04:

Reduced to 1 instance because of the original comment.

slmjkdbtl wrote at 2021-12-04 17:45:28:

This is very impressive. I'm curious how generic it is, is it possible to extend this to work with other structures like Canvas drawings or a React app?

cetinsert wrote at 2021-12-04 18:06:56:

It is entirely generic and should work with all standards-compliant HTML (built-in and custom) elements. No code was written special-casing specific elements.

If you right-click in the playground (

https://try.webpdf.pro/

) and pick the "Foreign (Markdown)" context menu item, you will find an example that uses

https://zerodevx.github.io/zero-md/

for Markdown editing/formatting via web components.

The reason I force update-by-(re)load on other foreign elements is because there are lots of low-quality web component custom elements that do not deal with attribute or content changes as well as the standard HTML elements.

cetinsert wrote at 2021-12-04 18:29:15:

Here is a demo involving a canvas element:

https://try.webpdf.pro/canvas/

Draw

• draw in the gray box to update img src

• right-click/long-tap on canvas to clear

Play

• add text around canvas or img elements

• change canvas style attribute value

z3t4 wrote at 2021-12-04 15:48:04:

What is the advantage of using this over iframes?

<iframe src="form.pdf"></iframe>

cetinsert wrote at 2021-12-04 16:01:40:

This post is about the playground which is intended to work with all standards-compliant HTML (built-in and custom) elements.

iframe-ing a PDF document wholesale does not let us interact with the individual pages directly. We are trying to bring complete programmatic/stylistic control to the hands of web developers, basically making PDFs a more open file format.

The first demos of the WebPDF.pro as a product will re-implement splitting/merging PDFs in less than 10 lines of code (deferring to a select few other libraries where they shine, such as Sortable JS).

We aim to offer more and more custom elements as well as other solutions at just the right levels of abstraction to enable anyone to achieve more document-processing tasks with less code. (Solution levels: Directory → File → Page → Sub-page (forms, text, images, measurements, annotations, signatures, structured fragments))

As an example, we open-sourced

https://github.com/pdf-ist/paper

which lets anyone style any element with paper aspect-ratios to prevent layout shifts or serve as placeholders in mockups: created an example here:

https://try.webpdf.pro/paper/

Lerc wrote at 2021-12-04 19:24:06:

I tried my usual test of live environments

let x=0;
    while (x < 10) {
        b.textContent=x;
        x+=1;
    }

You can cut and paste it, but you can't type it in.

cetinsert wrote at 2021-12-04 19:42:20:

Thank you for posting this. I will ensure this is looked into/addressed when we launch an independent playground at its own website. This playground is geared towards event handler scripts. Its launch goal is to serve as a learning environment for our custom elements with a declarative HTML API.

js4ever wrote at 2021-12-04 15:37:21:

"Our playground reflects changes not only editor → output (4000× faster, preserving the DOM state) "

Seems quite interesting, is the playground open source?

cetinsert wrote at 2021-12-04 15:42:21:

Current State

editor → output: open-source library; needs minor improvements

editor ← output: custom implementation; needs battle-testing in the field

domain name: product-specific; need to find an independent name

crispyalmond wrote at 2021-12-04 15:38:09:

They say they plan to open source it and it's less than 200LOC.

saagarjha wrote at 2021-12-04 15:31:56:

(Someone’s going to mention it, so I might a well summarize the discussion beforehand: yes, Hacker News tries to strip emojis from submissions, and no, the process is not perfect. Solving this is actually a very difficult problem and actually depends on platform-specific quirks so there’s no one solution here. No, it’s not just “ban the Unicode variant selector”.)

dang wrote at 2021-12-04 17:13:59:

We've changed the title now. Submitted title was "A no-reload HTML/CSS/JS playground with instant editor ↔ output Sync℠"

Submitters: please don't use visual gimmicks like that. Those count as clickbait and therefore are against the site guidelines:

https://news.ycombinator.com/newsguidelines.html

z3t4 wrote at 2021-12-04 15:55:24:

  /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c\ude32-\ude3a]|[\ud83c\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/

But why not /[^a-zA-Z0-9 -]/

saagarjha wrote at 2021-12-05 00:04:21:

Your list blocks characters that people would want to use, such as arrows: →

lelandfe wrote at 2021-12-04 16:24:17:

> But why not /[^a-zA-Z0-9 -]/

Take a look at the punctuation used on the front page and you’ll see why

cunthorpe wrote at 2021-12-04 16:41:26:

I suppose nobody can ask about résumé anymore