I am a newbie to p5.js.I was wondering how do I set it up in atom using the atom live server .I cant figure out a way around it .Most of the tutorials on YouTube uses the p5.dom.js file which unfortunately is not present in the complete p5.js package provided in their website .Please do help.
When you open the web editor behind the scenes there is actually an index.html file hidden. That file references p5.js (and in the older days of p5. it also linked to p5dom).
To replicate a live server with your sketch, make sure you have a project folder with your index.html file linking to p5.js as well as your sketch.js.
The Getting Started tutorial demonstrates an example of this in the Setting up p5.js with an editor on your own computer section.
The live server in Atom is primitive! To use it with a p5.js project, go to File > Add Project Folder and choose the folder holding your p5.js project. This should contain your index.html, sketch.js and p5.js library for example, at minimum. And make sure your index.html is structured like in the Getting Started tutorial above. Now that this is opened, you can go to Packages > Atom Live Server > Start Server. It should launch a browser window and let you preview.
Note that if you have several projects open, the one you want to see as a preview must be the topmost project in the file viewer on the left. If it's not, drag your project folder to the top.
Related
o I am brand new to Github, and frankly to programming in general. I created my own portfolio website (following a Youtube guide) and have been facing so many issues trying to understand terminals and then getting it up on Github, but I must learn Github so it's worth learning it even though there are other options to post your websites onto. But after getting everything on my repositories, everything looks normal when I look at the code but when I open my website hosted on GitHub called tyler-104.GitHub.io (my portfolio website), all my images that are local to my computer won't display.
My images that aren't local are displaying ( I have one for github and one for LinkedIn) and work as they should. I thought that I simply only had to upload my local images that are also inside my HTML code to my repositories would solve it, but it does not.
If you look at my site
(tyler-104.github.io)
none of the bigger images are being displayed even after uploading my local files to my repository (https://github.com/Tyler-104/tyler-104.github.io). More than that I have tried and created multiple repositories, uploaded, altered, and updated but nothing seems to work. My only guess is that since they are local they won't display.
Do you need to somehow use images that are already stored online to make it work? Basically, would I have to remove my locally stored images (that are on my Desktop for example) in my HTML and use internet links that I want to display on some sites like Unsplash? Or can I use local images stored images and they will still be displayed?
The console of the developer mode is full of 404 for URLs like:
GET https://tyler-104.github.io/img/3D/Grapes.webp: 404
^^^^^ ?
But your repository does not have a img folder. It directly has 3D/Grapes.webp.
So might need to create img, and git mv 3D img/ in it (the commit and push), to test if those images are displayed.
I'm trying to run the google editor demo on my local machine to see if I can use it in my project.
https://google.github.io/closure-library/source/closure/goog/demos/editor/editor.html
I've downloaded the latest stable source code:
https://github.com/google/closure-library/releases
Unzipped the source code on my local machine and went to folder closure\goog\demos\editor
And Opened editor.html without changing any source code.
I get an incomplete editor with no buttons and not working as per the demo on github, maybe I'm missing something.
This is a node.js project and not a single HTML page.
You should follow the official tutorial to use it.
I have these two files on my server:
/react/build/static/js/stats.js
and
/react/build/static/js/main.5c7483.js
In the stats.js file, it has this line at the bottom:
//# sourceMappingURL=main.8c33616f.js.map (I noticed the filename does not match)
The react app works fine, but I want to make some small changes. However, the developer has told me they completely lost the original source files due to a hard drive failure.
Is it possible to recover source files (or even anything that resembles source code?) I found this debundle package but couldn't get the configuration to work properly.
They told me the project was created using create-react-app.
In chrome dev tools, it says "Source Map Detected" - but using ctrl+p does not show any components. Just a few random js files like page.js, inject.js, common.js, etc
Well, this answer is late but just in case other people come here looking for answers (like me), here's how I solved it:
If you're lucky and the developers generated and uploaded the source maps then you shouldn't have any issue accessing the source codes.
I am not allowed to embed images yet so you may have to use the image links provided to see sample images.
Using Chrome(or any modern browser), browse to the website where the react app is hosted. Right-click anywhere on the page and select Inspect. Ctrl+Shift+I works too.
This will open up the dev tools window. Select the Sources tab.
Image showing the inspector tabs with the Sources option highlighted
Depending on the website's dependencies, you'll probably see several folders here. The first folder will be titled similar to the name of the website's URL. Open that up, that's where the sources for your website is located. Opening that folder will show yet another list of folders (assets, static, modules, react-components, src).
At this point, you may think your source codes are inside the src folder but that's not where yours are. To find yours, open up the static folder.
Selecting the static folder
This folder has three inner folders: css, js and node_modules. Your JS source files are inside the js folder so that's where to look for your source codes.
Image showing the expanded js folder
So that's it. I hope this helps. It definitely did help me when I needed it!
I'm trying to run an HTML file with JavaScript inside of it. In the JavaScript I'm trying to run is a program called wget. It downloads information from a website. I used it on CMD and in a batch file to get data from an xml that is hosted locally on my computer. Now I am trying to run wget so it runs from an HTML file. (the panel.html for the twitch panel extension), however I have been having a time just making the thing run.
I have been fiddling around, and the issue I now face is when I try to run the HTML in Chrome web browser the inspector says, Module name "wget" has not been loaded yet for context.
Screenshots:
HTML:
Error from Chrome:
(Click image to enlarge)
Installed wget from cmd:
I tried to read this for hours, and I don't understand it at all. In fact I don't think the issue in the link is the same issue as mine, but this is what every search keeps coming up with. I don't understand the whole dynamic thing or why they are even using the word "dynamic" for. It just seems like they can't use require because it doesn't work against paths, however I am not trying to define a path. I just want wget to work from this HTML file. I'm annoyed that I can't find anything on this exact problem. Every problem I have seen like this doesn't have a basic example of var wget = require('wget');
I just need what's in my JavaScript or HTML script tag to work.
I downloaded the require.js file and put it into the HTML as a script tag. From here it should just work. I already downloaded wget from cmd so it's on the computer somewhere. I also put the .exe in the same folder as the .html and the require.js.
Also I read somewhere that another reason this doesn't work is because wget is "loaded" or something like that. In that case can someone tell me how to "load" wget into the HTML or JavaScript first so that this error goes away? The basic wget example I found online is:
Here is the HTML file:
I'm not using a path, I just want wget to work from JavaScript. The wget example shows that it uses require. If I don't need require then please provide an example of how I can use wget in JavaScript without require or how to make this error go away.
I've been trying to figure out the best way to get the status information from my VLC player and put it into an HTML file so I can use that as a Twitch extension on my Twitch channel. VLC media player has a status.xml when you run it as a http server. I can only access the localhost:8080/requests/status.xml from a browser because it has basic authentication where I have to put in my user name, so I use wget to put in my password and download the status.xml back to my computer as another copy that isn't setup with authenitcation. Then I can use that download status.xml's information to post what music is playing on my VLC player. The problem is I need wget to pull the information from the localhost:8080/requests/status.xml file from the html file so that whenever its ran, the status.xml gets update with the new information and this the html will post the most current thing playing on my VLC player.
I'm currently doing an assignment that involves modifying a game called Perlenspiel using an IDE (in my case, I'm using Webstorms.) I managed to mod the game properly as my changes are reflected into the actual game when I open it on Google Chrome (my browser.) But the assignment also requires me to copy the entire directory (I guess it means "folder containing the relevant files"), which includes the .js file and .html file that allow me to modify and launch the game respectively, to the cloud (Dropbox, Google Docs.) But the hard part is to create a link to the .html file in the directory where my .js file is also located. How do you do that? The game doesn't seem to work when I merely try to open the .html file after uploading it on Dropbox alongside the other relevant files such as the .js file. Can someone please help me?