7 ms·

output sync

54 points by cetinsert 5y ago

saagarjha 5y ago
(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”.)
- z3t4 5y ago
  /(?:[\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 -]/
  - lelandfe 5y ago
    > But why not /[^a-zA-Z0-9 -]/ Take a look at the punctuation used on the front page and you’ll see why
  - cunthorpe 5y ago
    I suppose nobody can ask about résumé anymore
  - saagarjha 5y ago
    Your list blocks characters that people would want to use, such as arrows: →
- dang 5y ago
  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 https://news.ycombinator.com/newsguidelines.html.
js4ever 5y ago
"Our playground reflects changes not only editor → output (4000× faster, preserving the DOM state) " Seems quite interesting, is the playground open source?
- crispyalmond 5y ago
  They say they plan to open source it and it's less than 200LOC.
- cetinsert 5y ago
  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
z3t4 5y ago
What is the advantage of using this over iframes? <iframe src="form.pdf"></iframe>
- cetinsert 5y ago
  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 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/ https://try.webpdf.pro/paper/
jffry 5y ago
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 5y ago
  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.
  - whiddershins 5y ago
    A decent guideline is aim for a maximum of three font treatments per view, and see how far you can get with just that.
  - jffry 5y ago
    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 5y ago
      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.
  - andybak 5y ago
slmjkdbtl 5y ago
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 5y ago
  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/ 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/ 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 5y ago
  Here is a demo involving a canvas element: https://try.webpdf.pro/canvas/ 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
Lerc 5y ago
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 5y ago
  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.
cetinsert 5y ago
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

54 points by cetinsert 5y ago

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

z3t4 5y ago
/(?:[\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 -]/
- lelandfe 5y ago
  > But why not /[^a-zA-Z0-9 -]/ Take a look at the punctuation used on the front page and you’ll see why
- cunthorpe 5y ago
  I suppose nobody can ask about résumé anymore
- saagarjha 5y ago
  Your list blocks characters that people would want to use, such as arrows: →
dang 5y ago
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 https://news.ycombinator.com/newsguidelines.html.

js4ever 5y ago

"Our playground reflects changes not only editor → output (4000× faster, preserving the DOM state) " Seems quite interesting, is the playground open source?

crispyalmond 5y ago
They say they plan to open source it and it's less than 200LOC.
cetinsert 5y ago
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

z3t4 5y ago

What is the advantage of using this over iframes? <iframe src="form.pdf"></iframe>

cetinsert 5y ago
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 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/ https://try.webpdf.pro/paper/

jffry 5y ago

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 5y ago
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.
- whiddershins 5y ago
  A decent guideline is aim for a maximum of three font treatments per view, and see how far you can get with just that.
- jffry 5y ago
  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 5y ago
    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.
- andybak 5y ago

slmjkdbtl 5y ago

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 5y ago
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/ 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/ 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 5y ago
Here is a demo involving a canvas element: https://try.webpdf.pro/canvas/ 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

Lerc 5y ago

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 5y ago
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.

cetinsert 5y ago

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