Integrating plugins from github to html - javascript

Okay, I know this is a beginner question and may sound dumb because I hardly know anything about coding. So, forgive my ignorance.
I'm building this website with Bootstrap 3 framework and found quite a lot of cool plugins on github (e.g https://github.com/ixisio/bootstrap-touch-carousel). I know nothing about it, so I tried to research on what github is.
A lot of introductions out there only cover the 'Why github is useful' and 'Simple beginner's command line on github'. But what about the next step? A lot of documentation and Quickstart document on these plugins are very brief and seems to assume that you already know the basics.
It's quite intimidating to have to write cmd lines, and then bombarded with new terms like 'bower', 'grunt', 'npm' or 'json'. I'm just completely lost at what steps do I have to take to take those plugins and apply them to my html.
What I humbly ask from you guys is, please explain the steps from installing github up to having the plugins functions applied to my html site. And please explain it as if I'm 5 :)
I even have question like 'Why the heck would you go through the trouble of installing git shell and write those command lines when you can just hit that cute Download as Zip button' But then when I did that, of course none of it has worked for me so far... so I suspect there's a large step I was missing.

Best suggestion is look at the source code on the demo page. Note the css and scripts that are specific to that plugin.
Then download the source from github and add appropriate css and scripts based on paths you download them too.
Then follow other docs to initialize the plugin.
When you are ready to try your plugin make sure to check browser console for any errors that are thrown.
If you see things like $.myPlugin is not a function type error then your path to the plugin file is probably not right.

Related

how to create documentation from markdown inside docs folder on github? javascript

I have seen a lot of docs websites that have the same layout or same features.
so I am wondering if there is a library used by all these docs.
how do they do this?
./docs -> files.md -> ./docs/files.html
like you see there are a lot of files with .md (sometimes also .mdx)
and they have the same functionalities (see below)
so I am wondering if they use the same js library to generate it?
I tried to search in all the repo, what they are using to generate, but nothing says the name of a library?
is there an npm package or CDN link to that js library?
that can get the .md files inside .docs, and based on the folder structure, create a list on the left with all topics, 2 buttons with next and previous, a button with edit this page on GitHub, etc...
if isn't possible I will do it by scratch, but writing HTML for every doc is time-consuming.
I prefer some markdown fast, build consistent docs, and automatically added to the first-page list on the left.
also the routing thing for getting previous and next elements I need to do it manually and this can be time-consuming.
is there something that does that for me, some web API that gets files .md if I need to do it from scratch?
but still prefering npm package if there is.
Example:
previous and next docs.
react native
deno
lusift
and they have a button with the text EDIT THIS ON GITHUB
Mozilla docs MDN
when scrolling, it will change the color of the currently viewed section
sketch API
but I never find the name of the library.
other functionalities are...
multi-page
and much more...
(I tried to search on Github, but never find it)
it's there a good docs generator for a programming library that I create?
I also google it: https://www.google.com/search?q=javascript+library+documentation
but nothing. the libraries there are for API GET/POST swagger etc...
but I am wanting a library for functions like if you write this function this happen, maybe also code snippet functionality to see what result give you that function.
something similar to StackOverflow. text to HTML (but not need any server-side things comlicated... just keep it simple the files are inside .docs in GitHub, so just simple stuff.
maybe I am writing wrong the google keyterm
I found the solution to this, by using the #evolutionxbox comment.
how to find?
if you want to find what library is used in a GitHub repo,
go to the package.json, there you can find the list of libraries that is used on the project
the name?
in this case, the library used is DOCUSAURUS
link: https://docusaurus.io/
is very simple to config and solves the job!
and is used by
Facebook,
and other big companies like:
supabase
redux
etc...

Interactive Mouse Effects with Three.js

really appreciate some help for this one.
I'm new to three.js, I think I read and watched all the videos to understand, but still can't acheive this effect on a coded website that I'm making:
Interactive Mouse Effects with Three.js
Just after the "var animate" part I receive an error of "cube not defined"
So I was wordering if there is a missing part for this tutorial??
Also, I downloaded his entire project to see where I messed up, but his code was quite different from the tutorial. I'm not Using parcel, I'm using cdnjs for three.js, so I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
My last question for the most courageous ones is, when I finally acheive this (with your precious help) Is there important information due to this library use, that I need to know so I can upload it online?
Thank you thank you soooo very much!!
I'm afraid the "basic Three.js setup" code snippet from the article is incomplete since it does not contain how the cube is created. Hence, executing this code leads to a runtime errors in the animation loop. When you are new to three.js, use the code from the official guide Creating a scene.
I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
Yes, you need these files if you are want to use post-processing. There is another guide called How to use post-processing that explains how a basic usage looks like.
Is there important information due to this library use, that I need to know so I can upload it online?
I would say no^^. You can include the library files as global scripts or as ES6 modules (recommended). For more complex applications, it's actually better to use of a build-tool like rollup (or Parcel). For the former tool, there is actually a starter project which demonstrates a simple three.js build.

Showing a javascript app on a page on github.io

I made a simple Openprocessing sketch in javascript using PJ5.js, which can be found here: https://www.openprocessing.org/sketch/522642
However, I want to import some different libraries, which the free version of openProcessing doesn't allow. So my next step was to host the sketch using the free github.io pages.
However, after countless hours of searching, I can't really find a tutorial on how to do this. Anyone has a clue on how to host this javascript sketch on github.io instead of on Openprocessing? Is this even possible?
Thanks in advance! :)
You can host static pages on github and the setup is really simple. Just go to Github pages, scroll down and you will find all the info you need. However you will have to create an html page to run your script. You can't just paste your javascript and run it.

wp_dequeue_script VS Deleting the script from functions.php

firstly please pardon my complete ignorance in regards to Wordpress and Web Development in general if in being completely honest.
I have a theme on my website which came with a whole bunch of Javascript addons (like pretty photo) that i dont want. There are literally tons of them. Now, i want to remove the relevant files altogether, but that will result in 404 on those files (which wont help with my load times).
My question, i have been reading an aweful lot about wp_dequeue_script , and how it removes files.
Why not just delete the actual wp_enqueue_ files from function.php??
Does that cause problems? Any insight into the matter would be much appreciated.
Welcome to the world of Wordpress.
Why not just delete the actual wp_enqueue_ files from function.php??
The only answer and explanation to this question is, if you are not the author of a plugin or theme, never make any type of modification to that plugin or theme. This also goes for Wordpress core files. The simple reason being, if you ever upgrade your theme/plugin/core, all your changes will be lost and cannot be retrieved. This is a very costly mistake
The proper way
In your case, you should use functions like wp_deregister_script() and wp_dequeue_script() to remove scripts you don't need. See this post on how to correctly remove scripts.
This functions should go in either a custom plugin or a child theme. This should never go into the theme directly as this will be deleted when you update your theme.
I hope this helps

Eclipse Javascript code assist problem in using WTP

I'm new to WTP so excuse me if the solution to this is obvious. When i define and use a class from within the same file i get nice code assist help, i also get code assist for classes from the standard libraries. Unortunatly, when i try to use code and declarations from one file in another file i no longer get t he nice code assist features. I have searched the web and tried a couple of things, making shoure JS is enabled for the project, making sure the folder the scripts are in is added to the JS source folder list and even trying making a new folder with the decleration files in and adding it as a library. I would really like ot get this feature working so any help would be appreciated.
you can try spket IDE. after install, you need to config javascript profile to get code assist works for you.

Categories