I am aware tensor-flow.js is a web focused lib, but out of curiosity i tried it on react-native as well, it sort of works. It only works on debug-mode, and throws an error when debug-mood is turn off, the error says window.location.search is not an object. after some research i found that the window object is created in debug mode, but when out of debug mode it do not exist.
my understanding of this if somehow we can work around it, tfjs can also work on react-native, kind of like d3, the math part of the library works well with react but not the dom/svg manipulation part. for tfjs all we need is the math part for it to run on our mobile device, correct me if i am wrong.
https://github.com/tangtai/tensorflowJs-rn
here is the repo of the project i created, it predicts a linear model and predict with with hardcoded value.
img of the application runs
img of error
I think there will be lots of possibilities if tfjs can run on react-native
The tensorflow-js team released an offical package for react-native
https://www.npmjs.com/package/#tensorflow/tfjs-react-native
if you want to run tensorflow on rn you should check it out.
Is it possible to use tenserflow.js with react native?
The link above might be the answer for you.
I'm still curious on this subject anyway, because I also think this is possible technically.
Related
Recently, in a piece of software I'm working on, I have been receiving a spate of errors in Sentry from clients that I'm having a lot of trouble pinning down. The specific error is this:
Non-Error promise rejection captured with value: 'registerDomMutation' is not defined
The specific error seems to be generated by Sentry itself as it attempts to capture some other problem. What has really got me stuck is that I can't track down where registerDomMutation is being called, or which piece of software that should be defining it. It doesn't appear to be part of Sentry; I know that it's not in my code; and it doesn't appear to be in any of the packages I use. It sounds like it could be a browser method of some kind, but I can't find any information on it. This error only seems to be occurring in the new version of iOS Safari (14.3), but it's also not occurring consistently.
Is anyone familiar with this method? Can you point me in the right direction?
I believe they're coming from internal WebView of Klarna application. I cannot seem to find any source code for the app to prove this point. But recurring Klarna/<some version> pattern shared among all the errors' userAgent string makes me think so.
Android version of the app is affected too. I guess they are sharing the same JS code.
I have strict CSP rules regarding scripts allowed to run on my page and I guess some code the app is relying on just doesn't run due to them.
I've been creating react-native app to share text or images to social platforms.
I've used React-Native-Share library to serve the purpose of my application.
This library is working fine for iOS & Android but when I'm running it on Web.
I'm facing compiling failed error (Syntax Error). It seems like React-Native-Web cannot parse the syntax used by this library.
As far as I researched on it. I think I need to setup webpack.config.js for this to work, but as I've never did this before so not sure how it works and how to set it up.
Please see the attached screenshot
Syntax Error
Thank you in advance :)
Final Update
For most practical purposes, this question is obsolete as both firefox and chrome have native support for avif through the standard picture html tag with a source marked as type="image/avif". See https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/ . Fire fox still likes to hang and often forces a control F5 to bypass caches and requires sending the correct content type from the server. Hopefully will be fixed soon.
Here is the commit where I got avif support working: https://github.com/quackack/quackack-comics/commit/f1a98ed1f40b6a22584d61bc338bd91df3232fa5#diff-e25b0950ce48f4e928f98e0a6fbb694c . Note that it contains many unrelated changes and in fact avif is barely mentioned, only as a content type and a file extension.
Original Question
I am trying to change a website where I host web comics from using jpegs to the newer avif image format. It is much smaller and seems to be the new image format with the most widespread support. Unfortunately, web browsers don't properly support the new format yet. So I was planning to use this package: https://github.com/Kagami/avif.js to allow my comics to be rendered. Some basic tests showed that AVIF would give the same quality as jpeg for less than half the space.
Unfortunately, after more than 5 hours of time spent on this, I am unable to get this to work with my react framework. You can see my website at the time of writing at 'https://github.com/quackack/quackack-comics/tree/cda4c3893d8477192c4ff3aa78d00096b7621ff7'.
I tried using npm install to install avif.js and then added
require("avif.js").register("/avif-sw.js");
to index.js . But I get error
Failed to register/update a ServiceWorker for scope ‘http://localhost:3000/’: Bad Content-Type of ‘text/html’ received for script ‘http://localhost:3000/avif-sw.js’. Must be a JavaScript MIME type
And avif files are still not able to load. I think the requests are getting rerouted to index.html instead of the javascript package. It seems like the appropriate thing to do is something like
import * as avif from 'avif.js';
avif.register('avif.js/avif-sw.js');
But this fails too with the same error, as do many other similar variations.
At this point I am inclined to wait for proper browser support for avif, as I don't get enough traffic to worry about data costs anyway. If this could easily be fixed, then I would love to have the improvements from avif. I just want smaller file sizes and widespread browser support.
Update
Okay, I found that I could get this to work if I changed from the default react bundler (which I believe to be webpack) to Parcel. Then it does work exactly as you expect... until I try to deploy the project.
There is an issue where I cannot load the service worker when i try to deploy my single page webapp to AWS as a single page web app. There it makes a request to my url with avif-sw.js where there is not actually a js file. I believe the issue is closely related to https://github.com/parcel-bundler/parcel/issues/670
So the first key is to use Parcel to build your web app. But Parcel still does something wrong with deployment it seems. I will continue to investigate this in a few days.
Here is the almost working version using parcel: https://github.com/quackack/quackack-comics/tree/parcel
Update 2
My earlier update was incorrect. I only thought it was working because of a cached service worker. My final solution is in the answer below.
It doesn't seem to be a problem now. Simply convert your images to avif with tools like https://avif.io/ and use them as the image source or background source via typical CSS. As Chrome and Firefox now support it (even though users still have to enable it on Firefox), everything goes well. Even works on mobile now! :)
Okay, I finally got it working. Unfortunately, mobile devices don't seem to be able to handle the large file sizes so I had to keep using jpeg anyway. It worked on my laptop though.
Here is the commit that got everything to work: https://github.com/quackack/quackack-comics/commit/75e75307e688f0e515b4bbc9eb22eef290d2c209
What I had to do:
Switch to Parcel.
Copy the contents of the avif.js library into source before building. I used the command:
copyfiles -f node_modules/avif.js/*.js .
Put this specifically into reg.js:
require("avif.js").register("./avif-sw.js");
navigator.serviceWorker.register("./avif-sw.js", undefined);
What the last two steps do is trick parcel into actually keeping a copy of "avif-sw.js" around that can actually be loaded as a service worker. Probably with a bit more tinkering you can get this to work without using parcel at all, just by copying local and then registering. No requires required. But I stopped investigating after I found this solution can't work on mobile.
This was exceptionally hard to debug because service workers are cached by the browser and I had to clear broswer data after every edit. It was also hard to debug because the source files are cached to so I had to delete my projects cache and build frequently too.
You might also want to use npm module "http-server-spa", or similar, to test how your built SPA will act when deployed.
I'm using react-native facebook login through this library: react-native-fbsdk. Following the installation guide did not completely get it working, but I managed to get it working after modifications on the native side, as instructed in many github issues etc.
Anyways, it was working fine two weeks ago, but now, when I try to login with facebook, the application immediately crashes. It doesn't open any login page or do anything else.
What is weird is that if I open a browser in the emulator, leave it to background, and then try to login, the login goes further (I get to actually login, but when I'm directed back, the application crashes).
From the tombstone files I am able to get following warnings/messages:
Expected native library version number "",actual native library
version number ""
Tens like these:
Could not find generated setter for class
com.facebook.reactnative.androidsdk.FBLoginButtonManager
How could I solve this problem? And why it doesn't work anymore? I didn't change anything in the code. Only thing I can think of is that it loads something from the internet during compiling the application. How could it otherwise fail?
This is answer for how I solved the problem, not that much about why it was behaving like this.
In short:
I got it working again by updating the emulator and android API 6.0 through Android Studio.
<Rant state='begin'>
I have no idea why this worked, nor why did it broke in the first place. As it was working good with the old emulator and API 6.0 earlier.
It seems like the react-native fbsdk is far from stable. Or then it is completely react-native's fault, idk to be honest. But this just makes me want to develop fully native, instead of react-native, which seems unstable from my experience so far.
<Rant state='end'>
Sorry, maybe this belongs in programmers stack exchange, but I'm trying to get in to Node.js web development, and I really need to ability to step through my code in order to gain a deeper understanding of just what is happening in all the tutorials I'm using.
I've done some googling, but it looks like everything is written assuming you're in a *nix or OSX environment.
I've tried node-inspector, but I'm being greeted with errors whenever I try to run process._debugProcess() with the PID.
JetBrains WebStorm is relatively inexpensive IDE you can use with Node.js, which is quite feature rich considering the price.
Watch the demonstration video and you should get an idea to see if it's the kind of thing which could be helpful.
http://www.jetbrains.com/webstorm/
Alternatively you could use Eclipse and get this up and running.
https://github.com/joyent/node/wiki/Using-Eclipse-as-Node-Applications-Debugger