How to add my code to GitHub to create gh-pages - javascript

I have a very newbie question.. I made a website using HTML CSS and JS in Atom and I want to know how to upload everything to GitHub so I can make it into a gh-pages site.
I did it once before with a different website, also using Atom, GitHub and GitHub Desktop, but it was with a lot of hand-holding by my teacher. All the tutorials/ step-by-step instructions I can find are super confusing (or maybe my brain is fried). Could anyone help with straight-forward instructions? Thank you so much!!

upload your code to a repository nameed "your username".github.io and then that should also be the url of the page too. it could take some to for it to start working tho.

Related

React Project Looking Different on Localhost and gh-pages enviornment

React beginner here trying to make a portfolio. I ran into an issue which I could not find any answers for hence posting here.
My project uses react-mdl and particularly the projects page, which uses a <Grid/> component. When I view my project in a mobile interface (tested on FireFox and Chrome dev tools as well as a mobile device (OnePlus 7 Pro)), I get my desired layout. However, when I pushed the same code to Github Pages, the layout was remarkably different and certainly not appealing to the eyes.
The following screenshots should explain it better
Localhost view
Github Pages View
I am not necessarily sure what exactly is causing the issue and have tried multiple "fixes" which have unfortunately not worked out thus far and would really appreciate a push in the right direction.
I also apologize for linking the code and not posting it directly, however, I did not wish to clutter the post with that much media since the files are relatively big.
Thank you in advance and please let me know if I can provide any more information, I would be very pleased to.
It looks like the public folder in your repository hasn't changed in the last month. If you aren't building your project before deploying it to gh-pages then your live website will be using an older version which likely has these formatting issues.
Use npm run build, and then npm run deploy. This will update your public folder with the latest changes you have made, and then deploy these newer changes.
You can read more about the public folder for your CRA here - https://create-react-app.dev/docs/using-the-public-folder/

Assistance with unsecure image on wp site (mixed content)

I have recently installed a SSL certificate and have installed and activated the plugin from my site called "Really Simple SSL".
This fixed most of my links on the site but I cannot fix this for the main background image.
I have gone through my theme files to try and find the PHP and CSS that points to the jquery javascipt file but do not understand where it is coming from.
I don't really understand the code in the javascript files to edit them and stop this.
I commented out some of the PHP that links to bodybg but it has not helped.
Can you help me?
It says the initiator is the js file.
I hope what i wrote makes sense. Hopefully this image will give a better understanding:

JS works until I bring it into a foundation Framework

I am working on a project where I want to make it look as if a shutter of a camera is opening and closing... I was able to get this to work in a regular html/css/js file structure however when I trie to bring/ incorporate it into Foundations Responsive Frameworks I was not able to get it to work. There are no errors in the console and checked to make sure everything is linked correctly. ... I have attached both folders in the link, the working folder that is not in a framework and the broken folder that I am trying to use foundations framework..
https://drive.google.com/folderview?id=0B4EHdofHefLHZjZpczBybE1xWGs&usp=sharing
Thank you in advance for any feedback/help.
-Jake
Unfortunately, I cannot fix it.
Fortunately, I did figure out the problem.
The jquery.shutter.css is not loading properly. Here is my attempt at your project in React.
When I take your working example and delete the jquery.shutter.css file, I get the exact same result as the React version which has no error message. I gave it a good try and cannot fix it without more time. I hope knowing the problem helps you.
Note: Unfortunately Google will not let me upload a JSON file so you will have to change package.txt to package.json and install using Node

How can I reverse engineer my JavaScript files with js/uml?

Goal
My goal is to get an UML model out of my JavaScript project (consisting of several .js files) and store it as XMI.
How far I've come
I searched the internet and found out js/uml is the first place to go.
I've managed it to get the js/uml plugin running with Eclipse 3.7.1 (Win32) and a local installation of my pre-downloaded additional plugins:
mdt-uml2tools-Update-incubation-I201103290512.zip (installs required org.eclipse.uml2.diagram.clazz 0.10.0)
jsuml-eclipse-0.8.4.zip (only works with Eclipse 3.7.1 (Indigo))
I loaded the provided example project jsuml-example-yui-0.8.4.zip into Eclipse and added all my .js files to this project also.
Problem
Now I'm stuck and do not get it how to call the reverse engineering of my .js files. I can call 'New'->'Other'->'UML 2.1 Diagrams'->'Class Diagram' from the project's context menu, but I don't get the following steps of that assistant dialog, nor do I get it if this is the right way at all. Please, could you help me with an easy understandable click tutorial? The js/uml homepage does not explain it well enough IMHO. Thanks for your help in advance.
Someone adapted UML for web artifact, its called the "WAE" extension of UML. This way you can see not only your javascript files but the html and css. If you work with node.js, i created a module that generate class diagram for javascript/node/html/css. Its called wavi. For javascript, function,variable are automatically recognized. You can use it for documenting your application.
https://www.npmjs.org/package/wavi
Well, I think I have come quite close.
There's a command-line tool called Code2Flow. which uses GaphViz to generate graphs for Python and JavaScript sources.
I tried it, it does generate the graphs but somehow i can't make to do right.
I hope this will help you or someone.

Where to get the o3djs javascript libraries

I want to start messing around with o3d but I can't find where to download o3djs javascript libraries. I downloaded the plugin from http://code.google.com/apis/o3d/ but I cannot find where to download the libraries from. Anyone know?
It looks like you can find them in the subversion repository. http://src.chromium.org/svn/trunk/src/o3d/samples/o3djs/
Serge Meunier also posted them on the intro screen to his o3d tutorial blog, they are packaged nicely in this download: http://www.sergemeunier.com/blog/o3d-tutorials/

Categories

Resources