I found an useful code on Github https://github.com/ShizukuIchi/pdf-editor, but I have only written JS and HTML before. It contains a yarn.rock and some .svelte files, so I assume this might be a svelte project. I have tried to run the index.html in the browser directly but it doesn't work. What do I need to build this code?
Related
I have a `js` file that will use a third party library installed with `npm`. This file will be downloaded to the project when we go to a certain page.
Since the third-party library is used only on this page, I do not want to include it in the project, that is, I want to download it along with the js package. What I need to use for creating a js package which will contain all dependencies? I've been looking all day, but I can't find the solution.
I solved the situation like this: I copied the content of a third-party library and pasted it into a JS file before my code.
It can also be done using a webPacker by this guide
I had my react project working correctly in localhost. Then, I decided to deploy it to github pages and it worked perfectly on the server too. Now, I'm trying to work on it again on localhost but it is not showing correctly. For some reason, photos are not loading and some css is not working correctly and after compile it in PowerShell says this:
Compiled successfully!
You can now view myportfolio in the browser.
Local: http://localhost:3000/myportfolio
On Your Network: http://192.168.56.1:3000/myportfolio
Note that the development build is not optimized.
To create a production build, use npm run build.
So if I go to my GitHub pages it is loading correctly but not in localhost (running npm start).
Any suggestion? Thank you in advance and let me know if you need more clarification
I did clone your repositories and found these problems:
You have been directly imported many third-party js given their relative path in the index.html. That doesn't work. You should append %PUBLIC_URL% before them. For e.g.
<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> and similary for other script files.
But even this is not the best that you can do. You must not try to use jquery or third party js in a React App. Also, make it a part to install the related JS though npm and make them a part of the package.
You'll have to use <img src={require('/public/images/background.png')}... (Btw, the image name on your gh-pages is different. It's logo.png there)if you want the webpack to compile and make it a part of your project. Also, the path must reside within src and not public folder.
Other errors are are related to keys. Whenever you're mapping and iterating through a list in react you must specify a unique key.
I have a bought One ui theme that I'm trying to integrate into Meteor.
I have browsed stack overflow for the solution for hours and I'm stuck.
I have copied the complete assets folder into a newly made imports directory on the client side and tried to use import on the client main.js to import the modules I need. The problem with this is that when I run the server with meteor --port xxxx it hangs up on building web application and just freezes.
I have also tried putting it in a client/compatibility folder for the javascript and it doesn't seem to work.
Does anyone have any insight into this?
For the static html I just created a new template with the html and that worked.
Client/lib is where you put your JS libraries.
rootproject/public is where you put your static assets(images/fonts).
Look for packages on atmosphere.js and check if they are compatible with what you're trying to do. This is the most confusing step because the package names will not exactly be the same as the third party js libs. Trial and error.
Any third party js files you can't find on atmosphere.js you dump the js files in client/lib.
Recently I have seen files with the .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised a few questions in my head:
What is it for? Why do the guys at Angular care to deliver a .js.map file?
How can I (as a JavaScript developer) use the angular.min.js.map file?
Should I care about creating .js.map files for my JavaScript applications?
How does it get created? I took a look at angular.min.js.map and it was filled with strange-formatted strings, so I assume it's not created manually.
The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the source map will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the source map, then any error would seem cryptic at best.
Same for CSS files. Once you take a Sass or Less file and compile it to CSS, it looks nothing like its original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
So, to answer you questions in order:
What is it for? To de-reference uglified code
How can a developer use it? You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file? If you care about being able to debug production code easier, then yes, you should do it.
How does it get created? It is created at build time. There are build tools that can build your .map file for you as it does other files. Sourcemaps fail if the output file is not located in the project root directory #71
I hope this makes sense.
How can a developer use it?
Don't link your js.map file in your index.html file (no need for that)
Minification tools (good ones) add a comment to your .min.js file:
//# sourceMappingURL=yourFileName.min.js.map
which will connect your .map file.
When the min.js and js.map files are ready...
Chrome: Open dev-tools, navigate to Sources tab. You will see the sources folder, where un-minified applications files are kept.
I just wanted to focus on the last part of the question; How are source map files created? by listing the build tools I know that can create source maps.
Grunt: using plugin grunt-contrib-uglify
Gulp: using plugin gulp-uglify
Google closure: using parameter --create_source_map
The map file maps the unminified file to the minified file. If you make changes in the unminified file, the changes will be automatically reflected to the minified version of the file.
Just to add to how to use map files: I use Google Chrome for Ubuntu and if I go to sources and click on a file, if there is a map file a message comes up telling me that I can view the original file and how to do it.
For the Angular files that I worked with today I click Ctrl + P and a list of original files comes up in a small window.
I can then browse through the list to view the file that I would like to inspect and check where the issue might be.
i'm new to Mosync and i'm trying to create an HTML5/Javascript project. The IDE generates a main.cpp file and an index.html file.
The main.cpp file contains a reference for the index.html file; i've already tried creating a new html file inside the same folder where the generated index.html file is and changed the reference in the main.cpp file to call the file that i've just created but it gives me an error that says the file cannot be found.
I've even tried removing all the code in the generate index.html file and running it and the results still shows all the deleted code from the index.html file.
My question would be how do i add multiple html files when creating a MoSync project?
It should work to do what you are doing, this could be a bug. Can you provide some details about which version of MoSync you are using, and which platform?
You should be able to have any html file in the folder LocalFiles in a MoSync project, and then just pass the file name to showPage in main.cpp, just as you are doing.
Perhaps the project is not rebuild properly? Try to right-click on the project in Eclipse, then select Rebuild. Are you on iOS or Android? How do you transfer the app to the device?
As Mikael mentioned also, I think it is an IDE bug, I tried refreshing/rebuilding the project and it worked fine. Sometimes eclipse does not detect file changes that come from other editors so it ignores them.