A no-reload HTML/CSS/JS playground with instant editor / output sync | Hacker News Reader

output sync

blog.pdf.ist

54 pointscetinsert24 comments

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 :)

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.

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

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

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.

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

Reduced to 1 instance because of the original comment.

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?

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.

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

After long and deep exploration, we are excited to announce that we have found a tiny, beautiful corner of the internet (which some call a domain name) where we are launching the next-generation HTML/CSS/JS playground: ) We are looking forward to seeing everyone there around Christmas 2021! (

syncHTML.io

What is the advantage of using this over iframes?

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

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/

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.

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.

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

Seems quite interesting, is the playground open source?

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

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

(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”.)

    /(?:[\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 -]/

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

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

I suppose nobody can ask about résumé anymore

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

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.

Reply on news.ycombinator.com