Echo JS 0.11.0

It comes with a simple API and if a fully custom version is needed the source code for the Component exists in a single file so it can be easily copied and modified.

Here is the source:

https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/ImageGallery.js

Basically this is a Demo App that uses Vue Templating using a JavaScript SPA Framework I created that allows for Entry Forms to be defined in a low-code manner using only HTML and data attributes on the HTML Elements.

The Source of the main page is here:

https://github.com/dataformsjs/dataformsjs/blob/master/examples/entry-form-demo-vue.htm

The library downloads additional HTML files the first time they are used so here is an example of the demo entry form:

https://github.com/dataformsjs/dataformsjs/blob/master/examples/html/entry-form-vue.htm

Additionally a Handlebars Version of the same app exists here:

https://www.dataformsjs.com/examples/entry-form-demo-hbs.htm

I created this site to provide a playground for people to test and try a small JavaScript framework I wrote and standalone components however it also works great as a general playground site for JavaScript, HTML, CSS, Vue, React, Web Components, Handlebars and more.

For example you can quickly test any HTML, CSS, JavaScript ideas or features in your browser without having to save any file on your computer.

I agree. I haven't used <noscript> in a very long time. Seems like only bot traffic would browse the web without JS now days.

Here is a good article from 2018 when someone tried major sites with JS turned off.

https://www.smashingmagazine.com/2018/05/using-the-web-with-javascript-turned-off/

I have a few sites (including work sites that use CodeMirror for online code editing) and for those I lazy load since they are large but I to am finding that very few things need it (charts is a good example as I lazy loaded that on an app a few years ago).

For async/await I'm currently staying away except in node scripts or unless I build an app that fully requires modern JS (example web components). I even found issues with the `for ... of ...` with Babel previously so for now I avoid it with my React code that need to run in old browsers.

Here is an Example Web Component app I wrote that requires modern JS only.

https://www.dataformsjs.com/examples/places-demo-web.htm

Rather than worrying about polyfills it throws up a warning for old browsers. Then by only worry about new browsers I can really target the latest and greatest features, example, the source below uses 'element.querySelectorAll(selector + `:not(:defined)');` which to my knowledge will only work in modern browsers and can't be polyfilled.

https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/utils.js

export function componentsAreDefined(element, selector = '') {
    return new Promise(async (resolve) => {
        const undefinedComponents = element.querySelectorAll(selector + ':not(:defined)');
        if (undefinedComponents.length > 0) {
            const promises = [...undefinedComponents].map(
                c => window.customElements.whenDefined(c.getAttribute('is') || c.localName)
            );
            await Promise.all(promises);
        }
        resolve();
    });
}


https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/utils.js

Thanks!

That's a good solution you are doing as well. Interesting when I wrote this I had to test a wide range of browsers and learned that UC Browser (which is widely used in Asia) is using an old version of Chromium and has to be handled as well by a lot of sites.

Even hard than IE 11 is handling old versions of Safari on iOS. It’s not widely used anymore of course but if someone has a major site they still need to worry about it.

With you solution it’s great that you give a warning or alternative option for people with old browsers because it sucks for users if the site doesn’t work and gives no warning.

Hello World Demo:

https://www.dataformsjs.com/examples/hello-world/en/react.htm

Why?

It's a fast way to include React on any web page and build apps with using a build process or large dependencies. Simply use React with JSX in a page or site and include needed CDN or JavaScript links.

How?

It compiles JSX directly to JS for modern browsers and downloads Polyfills and Babel Standalone for IE and other old browsers.

Doesn’t Babel Standalone do this already?

Yes, however when Babel Standalone is used in a Browser it is intended for prototyping. This script is intended for production use. Originally I used Babel Standalone for all React demos on the site however it takes a lot of memory and causes a delay of many seconds when viewing pages from a mobile device. Once I created this script memory was reduced up to 5x and content renders almost instantly now.