I am new to the concept of Localizing my react-application. After doing some research online, It seems as if jsLingui is the best library to use and implement translation on my React application. Following tutorials from https://lingui.js.org/tutorials/react.html , everything seems pretty straight forward. but when I run the command
$ lingui extract , I get the error :
module.js:557
throw err;
Error: Cannot find module 'babel-core'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25) .....
I have tried re-installing the babel-core , and it shows installed. Even when I check on my file system, I see the folder as node_modules/babel-core .
I also checked my package.json and I see "babel-core": "^6.26.3" as part of my devDependencies. Please any ideas around this will be helpful.
Beside, the pressing question, I also have a few other questions;
1) In the documentation, I am not sure on where to keep .babelrc file created. I hope it is suppose to be inside my babel-core folder.
2) When I was reading on the jslingui library, I discover that, they are still working on something that will help separate translations to be done page by page. I do not know whether this task is completed or still under development because, I am really interested in this one since my application really big and loading the whole translation at all times might become a real issue.
3) What if I have text in one part of my application which is exactly the same as in another part of my application, is it possible to write it in one section and call the id in another part to give me back the information?? or it is out of scope of the library .
4) I am building a social platform therefore I have information coming from the DB, which I do not know the content therefore such information can not be translated using jslingui just as it is. I will like to introduce some translation to this information( similar to what is happening on Facebook). I know this task needs some serious Artificial intelligence in the areas of natural language processing and machine learning. Please, Any good library that I can use to help my application translate only the portions of data provided to it( definitely information coming from DB)??. I have tried googling on this but I got nothing concrete( NB: I do not want Google Translate because, It will help to translate the whole page + names etc) which will mess-up the user experience of my application
jslingui
Thanks
I have tried re-installing the babel-core , and it shows installed. Even when I check on my file system, I see the folder as node_modules/babel-core . I also checked my package.json and I see "babel-core": "^6.26.3" as part of my devDependencies. Please any ideas around this will be helpful.
If you've installed #lingui/cli globally, please remove it and reinstall locally. If you use Babel 7 (your plugins/preset start with #babel/), then you need to install babel-core#^7.0.0-bridge.0 and #babel/core. Both locally as devDependencies. What also helped in some cases is good old turn it off and on again: rm -rf node_modules and reinstall everything...
1) In the documentation, I am not sure on where to keep .babelrc file created. I hope it is suppose to be inside my babel-core folder.
You should keep it in the root of your repository (next to package.json) unless you have specific needs.
2) When I was reading on the jslingui library, I discover that, they are still working on something that will help separate translations to be done page by page. I do not know whether this task is completed or still under development
It's still under development. However, it's a bit different - it helps you create separate message files, but not automatically. That's something we need to solve in further versinons.
3) What if I have text in one part of my application which is exactly the same as in another part of my application, is it possible to write it in one section and call the id in another part to give me back the information?
You have two options. Either you're using generated message IDs:
// App.js
<Trans>Hello World</Trans>
// Component.js uses the same message
<Trans>Hello World</Trans>
In this case, you only need to translate Hello World once, because messages are grouped when collected from source files.
Other option is that you're using custom IDs:
// App.js - define message
<Trans id="msg.hello">Hello World</Trans>
// Component.js - use message
<Trans id="msg.hello" />
4) I am building a social platform therefore I have information coming from the DB, which I do not know the content therefore such information can not be translated using jslingui just as it is. ...
I can't recommend any approach here, but it seems you need to use a machine translation. Either Google Translate or a better one, if you manage to find it. My guess it'll be either low-quality or expensive because as you said, this isn't a trivial task.
Related
When I run npm run build a build directory is created with js chunks. I have noticed that there is a [number].[hash].chunk.js file that is not listed as one of the entrypoints in the asset-manifest.json file.
Instead, this file appears to be referenced in the runtime-main.[hash].js file.
What is the purpose of this file? I have noticed that in it's map file it references web-vitals.js. Do I need to make sure that my application will be able to access this file? Is it critical to the application's performance?
This is a react app was created with typescript using npx create-react-app my-app --template typescript
At build time your bundler (webpack) will determine what code is necessary for the main entry bundle and which code can be loaded later (aka. lazy loading). It will also determine which files are shared by different entry points and will bundle them as a shared asset. This allows your application to load quicker on initial load - only loading the resources it needs when they're needed.
There are complex algorithms which determine how to split code in a way which is beneficial to both end users and your server/network. In general, don't try to analyze it. You can trust that the people writing the algorithms are smart and striving for the greater good, and it's always getting better.
NOTE: I used to work for a company that built a bundler and implemented code splitting long before webpack, rollup, and friends came along. The bundler was used for years for the likes of Sam's Club, Levi's, and some fruit company. It did not take long for webpack and rollup to surpass the one we had built, but I still have a pretty intimate understanding of how it all works, and the guys who built it were some of the smartest people I've ever met. You don't really need to understand the output files - I highly doubt there are any unnecessary files being generated.
I'm new to frontend development and thinking about what's a good way to find source code in our code base for a webpage. What I usually do is going to the element tab in chrome dev tool, finding a special class name, and searching that in code base to locate the file. I feel there should be better way for this task. I tried to use source tab in dev tool, but it shows tons of files and folders in navigation column. I also tried to use Components tab since we're using react, but component names are minified to single letters. So want to get suggestions from you folks. How do you usually do this? Thanks!
You have the right idea, the problem is that you are looking at the minified (presumably production) version of the website. In general, while developing a website, you run a development server, in which all of the code (mostly) appears as it is written in your IDE/editor. That way you can find component names and inspect the source code through the chrome dev tools.
You should talk to whoever is currently responsible for the code to help you get a development server running on your machine. Then, you find the component names and then do a "find in files" search through your IDE/editor to see what they are, and where they are used in the code base. There may be many results that you have to sift through. That's par for the course in large code bases until you become more familiar with what goes where. And even afterwards.
I will say; even things that appear simple can be fiendishly complex, so it would be useful for you if the owner of the code could give you a rough outline of how things are organised and why to make navigating the code base easier. But, it will always be a bit hard, and depending on how clean the code is, it might be nearly impenetrable. Good luck.
There are many ways to to find source code or debug Code
①You can use Chrome dev tool
②You can use debbuger in VS
③you can debug your code by puttin debugger in java script code
④browser has good functionality to find
code(For reference please check Image.)
I have had a developer create a website or app in React. This is already on a webserver and does what it should do. Now I want to develop the frontend myself, which would be no problem if I knew how to edit the code.
On the server I have an index.html, some stuff like favicon and a folder. This folder contains the folders "css", "js" & "media" and I don't understand their content. In the folder "css" are for example the files "main.12345.chunk.css" and "main.12345.chunk.css.map" Both look very cryptic.
Now I found out after some research that this is probably a compressed representation. Possibly compressed with Webpack?
But how can I edit these files in a meaningful way and understand what was coded there in the first place? Normally I would just download the file to be changed with Filezilla and edit it with an editor or Visual Studio code, but in this case I have no idea.
Those "cryptic" files are probably minified. Minification is a process where the original code is minified using several approaches, making it much smaller in size and also sometimes better performing. This is done by Webpack with a build process.
Those files are not meant to be develop with (or even read for that matter). Their sole purpose is to be optimized and be run in a production environment. It's very hard or even impossible to understand those, you would basically have to reverse-engineer them to understand what's going on. Many websites actually use minification for this additional bonus of protection of their application logic, because minimization basically obfuscates client side code. For example, the WhatsApp web client written in React is heavily obfuscated, in order to not allow anyone to write a WhatsApp client (there are efforts for this particular example, but it takes lots of time).
TL;DR: You have to get the original source files in order to edit them.
But how can I edit these files in a meaningful way and understand what was coded there in the first place?
They really are not designed for editing.
Edit the original source code to the application, then run its build script and deploy the output from it.
simple problem that I've seen asked in a few places and seems to have no structured answer. Because of this I though I would start a thread here and maybe get something going that will help everybody!
Diving right into it, I have build a react app using create-react-app, compiling this into a prod version using npm run build it does everything that it needs to and completes successfully.
After all of this we can observe the compiled app having multiple chunks.
All good and well until we enter the app and try to navigate to a different page, where we find it is not loading any other chunks besides the chunks responsible for the first page you access when entering the app.
This is the base problem, I realize I'm not giving any snippets or anything but again, this is because the problem seems very general, there are a lot of people with different applications and code looking for a solution to this and haven't found something practical and normal (having messaged some on forums and such).
If anybody needs any specific information to may case please ask and I will happily provide :)
As far as I can tell, this is webpack related or something like that, webpack from what I understand only includes one chunk and then loads the others as needed, is this correct?
If so and if the chunks are created but not loaded when switching to other pages, then it seems like a webpack issue, but what?
When you, then other developers, create a react app and it contains multiple chunks, do they load well?
Any and all information is appreciated, lets try to tackle this issue!
P.S. If you go into the compiled production build and manually add all the chunks, everything works perfectly. I will try to add any and all information to this thread as I find out more.
I just started using flow-typed definitions for my popular libraries in a React Native app such as React Navigation, but I find it quite hard to find the documentation on types and how to use them. I'm still getting errors in my IDE and I feel like Flow is more wasting my time than adding value to my developer experience because I've to lookup for the types all the time (and sometimes don't even find an answer). Any advice about that ?
A complex web application using many npm modules is very rarely going to be strongly typed throughout. The goal of strong typing in JS is largely to have as much typing as is feasible or even reasonable. Modules which do not have libdefs will come in as any and that's okay. Obviously it would be great if everything you pulled in had full types, but just given the way that progress is made this is practically impossible. Add to this the fact that the simple act of upgrading flow will often introduce more caught errors to your codebase, and you end up having to accept that typing is a progressive process, it shouldn't really be a blocking one.
Now that that's out of the way, you seem to have a number of different sub-questions:
I've to lookup for the types all the time
Not entirely sure what you mean by this, but you might saying it's hard to find types for the package you're using. Make sure you're familiar with how the flow-typed CLI tool works (npx flow-typed), it will help you with searching for and installing compatible libdefs. If you don't find anything for a module in flow-typed then poke around the source github repo and make sure flow types aren't shipped with the module itself. If you come across a package with a .d.ts (TypeScript) file, try converting it to a libdef with flowgen. If nothing proves fruitful, you should probably just forego types and carry on.
In this case, I would actually start my own libdef (npx flow-typed create-stub <package name>) and fill in some basic types as I went. You can start really simple, I have a libdef currently for react-select that only checks one prop of the component, the options prop (I don't remember why I have this, however :P). Again, progressive typing is the goal. Checking that one prop is actually really nice compared to checking none.
I find it quite hard to find the documentation on types and how to use them
There's generally not real documentation for libdefs in flow-typed unless it's written by the package author somewhere. I usually read the libdefs themselves, but if you find usage confusing I would recommend looking at the tests associated with the libdef. You can also dig through any relevant issues or PRs to find usage examples.
sometimes don't even find an answer
Add a $FlowFixMe and come back to it later if it slows you down too much. All of these things will become much more manageable as you become more accustomed to flow and strong typing in general, and both flow and libdefs are constantly improving.
I'm still getting errors in my IDE
If you can't fix them, add a $FlowFixMe and come back later. Flow actually has a tool included in its source code that has a utility for adding $FlowFixMe for every error, but as it's not currently shipped to npm you have to clone the source to use it.