Nuxt js/Babel `SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.` - cross-browser

I have a web application that I create on Nuxt.js, But I have noticed that there are compiling bugs in some of the browsers (Like Safari, IE), I think this is the fault of the Babel configuration, then i run npm run build ES6 is not compiled, and I have errors in my console
for cross-browsing testing, I am using Browserstack
I have following errors in the console:
Unexpected token '...'. Expected a property name
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
How can i configure Babel to compile ES6?

Apparently, your code is not working on Safari v10 and below. Looking at some stats here:
https://gs.statcounter.com/browser-version-partially-combined-market-share#monthly-202007-202107
https://www.w3schools.com/browsers/browsers_safari.asp
https://caniuse.com/?search=flex
https://en.wikipedia.org/wiki/Safari_version_history#Safari_10_2
It looks like Safari is used with a minority of versions but those are mostly v13 and v14. Those are far more modern then then one you do not support.
Safari v10 is actually from 2007, so I can think that it's safe to say that you can ditch this version totally.
Even if Safari is not an evergreen browser (meaning updating-itself like Firefox or Chrome), people still using it are not on that old of a version.
You need to remember that if you want to support a version that old, you will heavily impact the overall performance of the whole website for every user. Okay, 0.5% of people will have a better experience (those stuck in 2007) but everybody else will need to carry the weight of that old babel-transpiled version.
You could make 2 bundles (one modern and for super old legacy browsers) and serve either one or the other depending if they do support ES modules. I cannot find the Google/HTTP 203 talking about this one.
But IMO, this is a lot of work (not that trivial) for a super tiny population, I'd rather pass on this and focus on more important things to handle.
Even a11y is reaching more people. Even tho, it's probably on a lower priority than Safari v10.
Here are my 2cts. If I find the video, I may update my answer.

Related

Using local installed lib in site page

Is it possible to use libraries (.dll, .ocx) in modern browsers that were written for the OS Windows and registered in system32 to transfer part of the logic of the site's work and calculations from the server to the power of the local machine? For example, if a web-application is being written as a private app for private user use and you need to transfer part of the system's working logic to a local user's machine to offload the application server's capacities - how can I solve that challange?
Previously, I managed to implement a similar scheme of work in IE when I used the tag with 'codebase' parameter, but now I need to switch to modern browsers, because IE is outdated, but so far it has not been possible to find a working way to duplicate the principle used. Maybe I can somehow use libs that worked in IE in modern browsers?
In IE we can use ActiveX controls. In modern browsers, Microsoft Edge supports IE mode and IE mode supports ActiveX controls, so we can still use the same way in Edge IE mode.
But in other modern browsers, they don't support ActiveX controls and there's no way to use libraries (.dll,.ocx). I think you can only develop a program for users to download and install. You can also refer to the similar threads: thread 1, thread 2. Except some out-of-date solutions, the conclusion is we can't do this in other modern browsers.

TCL/TK in browser

I've been trying to run a TCL/TK script in a browser so people with minimal computer knowledge can run it (my script) on all devices.
I've come across the TCL/TK plugin from 2006 but I can't get it to work. Even if I could, it doesn't contain the user friendliness I am looking for.
I also came across a website that runs TCL scripts in-browser but doesn't seem to recognise TK commands....
So far to distribute it to people I wrapped it into a .exe but people are requesting it to be used on mobile devices (with more mobility than a windows laptop).
Any one got some information to do this without rewriting all of my code?
Or an easy way to port a TCL/TK script to iPhone/iPad or Android (I don't think there will be any easy solution for this, that is why the browser concept made most sense to me)
Unfortunately, the browser plugin depends on the browser supporting the NPAPI specification, and that's now been largely removed from browsers (and was never supported on mobile devices). This has irritated quite a few other people too, and I don't think there's much you can do to fix it directly. So instead, let's look at some workarounds…
You might be able to use the NaCl support in Chrome on desktop systems, or you could package things up in a starpack (ActiveState's TDK is a commercial version of that, among other things) and for deployment to Android you can use Androwish (which I personally recommend). I'm nothing like as certain about solutions for iOS.
For plain Tcl try EmTcl, Tcl compiled with emscripten.

What are the functional differences between NW.js, Brackets-Shell and Electron?

Now that TideSDK is effectively dead, I've been looking into alternative 'wrappers' to run HTML/CSS/JS applications as stand-alone desktop applications. The three viable options I have run across so far, are NW.js (formerly node-webkit), brackets-shell, and Electron (formerly atom-shell).
The problem is that there does not appear to be a sufficiently complete comparison between the three in terms of feature set, compatibility, etc. I'm hoping to turn this into a more-or-less canonical thread on the (objective) differences between the three, in particular regarding:
Platform support; operating systems, dependencies, etc.
Language feature support, as far as HTML5, CSS3 and JavaScript are concerned. Think things like "does HTML5 video work, and if yes, what codecs are available?"
Non-standard extra features, such as tray icons, popup notifications, and OS-rendered menu bars.
Extensibility; eg. ability to 'plug in' native code, talk to Node.js, and so on.
Architecture; in particular the architectural differences that affect daily usage as a developer.
Debugging; included development tools, compatibility with commonly used tools like node-inspector, etc.
... and so on.
What are the objective, technical differences that matter when making a choice between them as an application developer?
I did similar research about two months ago, and in the end I went with node-webkit. The biggest upside on node-webkit is node.js and npm. The package management of npm is really nice, and node has well done filesystem access.
Brackets-shell looked interesting, but other than a nice IDE I didn't really get what made this one as good or better than the rest. They are very clear that "The brackets-shell is only maintained for use by the Brackets project ", that screams run away to me.
https://github.com/adobe/brackets-shell#overview
Atom-shell seems to be recently active, but it seems much like brackets in that they are really writing and editor/IDE that just happens to be attached to a webkit runtime. It also is built on top of node.js. This one has the downside of being difficult to search for stuff online without being reminded of your middle school chemistry.
I really don't want an new editor, and most programmers have their favorite already. For the actual application development, they pretty much work the same, and should, since they all use webkit. You basically write 90-95% of it like a website, and then deal with the native parts, and some config.
These things are true for all three of them
platforms - runs on Windows, Mac, and Linux
language support - HTML5, CSS3 and Javascript : since they run javascript you can download and run nearly any library/framework that you want.
The big caveat on webkit is codec support. Typically you will have problems with non-free video codecs, unless you rebuild the dll/so to support them. For example the shipped node-webkit won't play mp4 video.
I've been playing with Atom-Shell over the last few days, and I am loving it so far.
The best part about it is that it's backed by GitHub.. which should allow you to settle into the platform for the long term, especially if it gains a large following. It's also made possible by direct Node.js improvements courtesy of a contract with StrongLoop, who is a major Node.js contributor (they claim to employ more Node.js core developers than any other company, even Joyent).
I've also found it rather comfortable to get started. It took me about a day to learn the structure and get my first proof of concept running. Very cool.
Bullet Points:
Platform support: Windows, Linux, Mac OSX (More Info Here)
Language feature support: HTML5, CSS3, JS via Chromium - so far, zero issues, but I have not tested video specifically.
Native Features: Native App Menus, Task Tray Support, Global Hotkeys, Protocol Handler Support (that I've seen so far)
Extensibility: Excellent Node.js integration, both the client and server can "require" Node.js modules and natives. I've also successfully tested Bower libraries (incl jQuery) without issue.
Architecture: Covered in the other points, but in general its very smooth.
Update (11/25/14): I've not yet found use case for Atom-Shell in any official capacity, but I have used it to build a few small apps for my own use, the most complex being an app that pulls my time logs from my PM software and creates Paypal invoices.
My opinion of the platform remains positive. It's pretty awesome.
On my time invoicing app I successfully brought in Bootstrap 3's Dashboard Example Template and a few node modules (bluebird, Paypal SDK, Teamwork PM Client) to create a mildly complex app. It took me a few days and does its job well.
I really cannot think of anything negative to say about Atom-Shell, its solid, stable, fast, and easy to code for. I hope this helps someone.
Besides fully support Web standards, NW.js supports a list of non-standard features for native app development including:
Protect JS source code by compiling them into machine code: https://github.com/nwjs/nw.js/wiki/Protect-JavaScript-source-code-with-v8-snapshot
Jailed devtools: https://github.com/nwjs/nw.js/wiki/Devtools-jail-feature
Additional security model with which you can do more in DOM: https://github.com/nwjs/nw.js/wiki/Security https://github.com/nwjs/nw.js/wiki/Changes-to-DOM
enhanced file dialog: https://github.com/nwjs/nw.js/wiki/File-dialogs
kiosk mode: https://github.com/nwjs/nw.js/wiki/The-Kiosk-mode
supports for a growing list of chrome.* API, include chrome.webRequest so you can intercept HTTP requests from DOM: https://github.com/nwjs/nw.js/issues/518
support for rich notifications, print preview, many more chrome.* APIs, Chrome Apps and other Chromium features starting from 0.13.0-alpha0
There is much more to see in the wiki including Menu, Tray, etc.
I've been working with brackets-shell for some time now, here are some of my findings:
brackets-shell is primarily developed as a shell under the brackets IDE project, but the project can run any web application. You just need to point it to your own html page. Clint Berry wrote an excellent tutorial about doing just this: http://clintberry.com/2013/html5-desktop-apps-with-brackets-shell/
The project is backed by Adobe and has a lot of activity
Documentation could be better
platform support They support Windows, Mac and Linux. An installer package can also be created. I only tested it on Win and Mac, it works great.
feature support html5, css3, js. Html5 video does not work out of the box, but is very easy to enable (by default the ffmpegsumo.dll is not copied into the installer, if you change the script to copy it it will work).
native features menu bar, 'open file with', file system access. I am not using any of these, as all I need is the communication with the node process.
extensibility a nodejs is built in, and you can communicate with node from your web application. In this way, you can use node to access the filesystem etc.
architecture The project is well set up, keeping a nice separation between the shell project and your own web app running inside it. In your own application, a global appshell object is available which gives you access to the brackets functionality (filesystem access, communication with node process, ...).
One thing to note (if you care), is that the Electron officially does not support Windows Vista. Vista's market share is about halfway between OSX 10.9 and 10.10 (both of which are fully supported by Electron). Vista is also still supported by Microsoft until 2017.
NW.js works fine in Vista, as well as OSX 10.9+. NW.js works on Ubuntu, Debian, Zorin, Manjaro, Arch, and most other Debian based Linux OS's. Electron has refused PR's to fix Ubuntu specific bugs on their platform which is concerning.
NW.js works in XP too. Currently 18% of the market is still on XP. So if you're desktop application is more general purpose or wants to have access to the late adopters still on XP, you're probably better off with NW.js (0.14.7) as Electron only supports Win 7 and up.
If you use NW.js 0.12.3 you can also support OSX 10.6+ and very old versions of Debian based Linux OS's like Ubuntu, and Win XP+. It is recommended that you do special builds just for those legacy systems though and use the newer versions of NW.js for newer OS's.

Using Java/Python libraries in programming Firefox/Chrome Extensions

I have an idea of studying user behavior on the browser, for which I intend to make a Chrome/Firefox extension to study the behavior dynamically. I have some predefined libraries in Java and Python to analyze the results, which will be impossible to program in plain JavaScript.
Now for my question: is it possible to use third party libraries, especially those of Python or Java like plain function calls?
I have a vague idea about something like Java XPCOM or PyXPCOM for Firefox. However, for a beginner, it all looks so scary. I started making Add-On for Firefox, but got lost somewhere in the huge API.
I found Programming Chrome extensions easier than Firefox, but I couldn't come across something similar to XPCOM in Chrome.
How can I decide which one to go for?
Chrome - seems easy but I am not sure of its power.
Firefox - Seems powerful, but is it really possible to use any Java/Python Library?
Additionally, I came across this link that may be useful: How does someone use thirdparty libraries to be included in Firefox addons/extensions?
But seems like it mostly talks about C++ and XPCOM.
I have a vague idea about something like Java XPCOM or PyXPCOM for Firefox. But for a beginner, it all looks so scary.
I am not a beginner and JavaXPCOM/PyXPCOM are very scary (in addition to being barely maintained). As Firefox goes, it should be much easier to wrap your Java/Python library in an application and run it as an external process: https://developer.mozilla.org/en/XPCOM_Interface_Reference/nsIProcess. Note that you cannot get data back (other than an exit code) so the application should write it to a file that you can then read in your Firefox extension. Not very elegant but it has the advantage of being doable.
As to Chrome, its extensions run in a sandbox and using Java or Python isn't possible. Only option is adding an NPAPI plugin to your extension. It is binary code meaning that it could do anything.
When writing Chrome extensions, you're limited to JavaScript unless you choose to use an NPAPI plugin, which lets you do pretty much anything, but is not recommended.
The other approach you could take is to implement your Java or Python code on the server and make requests from the chrome extension's JavaScript.

Are there documented rendering differences between different versions of an operating system and same versions of browsers?

I'm involved in some browser-compatibility testing, and we're looking at tools and so forth. One thing we need to do is visual inspection of our site in a range of different browsers on different OSs and platforms.
My question is whether there are documented differences (or someone can post some HTML+CSS) where a page will render differently in IE6 on Windows 2000 than it will in IE6 on Windows XP (say). Or IE7/XP vs IE7/Vista. Or Safari4/MacOSX Leopard vs Safari4/MacOSX Snow Leopard.
We're hoping to be able to slim down the count of combinations.
I've seen this other SO question, and don't think it's quite the same thing. The answers direct me to quirksmode.org. We're not looking for a breakdown of which elements/CSS-rules are supported in which browsers; we've got an existing site that for better or worse uses what it uses, and we'd like to get it under test to be able to make changes more safely.
You can submit to http://browsershots.org/ multiple times, eventually a different OS version will get called for the same browser version. This is not the ideal solution.