Is there a way to use the Outline tab in VS code to display a ToC of the current javascript document based on some tag used to indicate sections and subsections?
I am looking for something similar to Creating Table of Contents in VS code Jupyter Notebook or https://code.visualstudio.com/docs/languages/markdown (Outline view) but for javascript code.
Related
I'm building a Chrome Extension.
The extension injects some CSS and JavaScript when .html files on the users local drive are loaded in the browser (file:///).
My extension adds an extensive UI to the page that allows the user to modify and manipulate the original source code from their .html file.
The primary purpose of the extension is debugging and QAing HTML email newsletters. Here's just a few things that it does:
Checking links for the appropriate parameters.
Toggling images off and on to simulate popular email clients.
Displaying the source code side-by-side to show a desktop view and multiple mobile sized views.
A function that takes the original HTML and generates a plain text version.
A function that toggles <style> blocks off and on to simulate popular email clients ignoring them.
Email files are backed up via Dropbox and the Dropbox API is integrated to allow for quick sharing right from the email newsletter.
Until now I've been using javascript in my injected content script like this to create all of my menu items.
var debugOrb = document.createElement("div");
debugOrb.id = "borders-orb";
debugOrb.className = "borders-orb orb glyph";
debugOrb.addEventListener("click", toggleBorders, false);
orbsBottom.appendChild(debugOrb);
Here's an extended view of the code I've written to create all of these toggles/menu items: http://pastebin.com/LQTkNhpP
My problem is that now I'm going to be adding a LOT more clickable menu items like this. And it feels like if I do, it's going to get out of hand really quick. Especially since I'll be nesting a lot of divs to make the whole thing look organized and using JavaScript to create lots of text nodes too.
My first thought was what if I could just create my entire menu in regular HTML, then just inject that file into the page with the javascript in my content script. I'm barely intermediate level with JavaScript though. And as I understand it, if I did this, I'd lose my ability to use onclick handlers for all of these divs I'm creating.
Is there an efficient way to handle my goal that I'm not aware of?
Notes:
I'm not using any framework/plugins like React, Angular, or jQuery.
Once the html is added you can always get the element by id and then add an event listener to that element. You can have functions relate to the divs and then onload create the event listeners. element.addEventListener ('click', function);
Hi can one debug scripts so that I can see html(maybe css) behaviors at the same time. for example when I would want to change the class of the tag from javascript and I have to navigate from debugger tab to inspector(in Firefox) tab and to check html(sometimes it is really long) and see if change happened. Can I do so that I can debug javascript and see html changes synchronously as I step in the lines of code.
I created a new tool that allows you to visualize your HTML / CSS layout just by moving the mouse. You can easily view the layout of your elements after making these changes.
HTML Box Visualizer - GitHub
I'm trying to display a small picture when hovering over a specific bar of a bar-chart. This using plotly inside a IPython notebook.
Plot.ly have a nice example of this using javascript here.
I can easily embed this example inside the notebook using the approach shown here, but I really would like to use the plot from the notebook.
I think I am almost there:
iplot({'data':data, 'layout':layout})
is the python code to generate the plot; it embeds directly a svg in the cell.
In the javascript example, an iframe is generated:
<iframe id="plot" src="..." seamless></iframe>`
The javascript can then get the iframe by id:
Plot.iframe = document.getElementById("plot");
I've tried a few things without success; the iplot doesn't create any iframe. How can I link the javascript to the python code?
i.e. what 'id' can I use?
Thanks,
N
In the site I am working on there many Java functions that dynamically generate content when executed, the problem is this content is not visible in the source when viewing the source it show only the java function so that content is also not visible to search engines.
Is there is any way to make this content visible in source so it be visible to search engines?
The answer to your question is 'no'. Search engines do not attempt to parse and run JS (which is necessary to recreate the output the user sees).
SHORT: my python code generates a webpage with a table. i'm considering rewriting it to generate a js file instead, that holds the table contents in an array ... and then let the table be generated client-side. I am not sure of the pros and cons. Anyone care to offer their experience/insight? Are there other solutions?
LONG: the web page contains a single table and an embedded gmap. the table is a set of locations with several columns of location-stats and also two navigation columns. one nav column consists of onclicks that will recenter embedded gmap to the lat,lon of the location. the other nav column consists of hrefs that open a new window with a gmap centered on the lat,lon.
Until recently, my python code would do some number crunching on a list of files, and then generate the html file. also i wrote a js file that keeps the webpage liquid upon browser window resizing.
Recently, I modified my python code so that it:
placed the lat,lon info in a custom attribute of the tr elements
no longer produced the nav column tds
and then wrote a js function that
loops through the trs onLoad
reads the lat,lon from the custom attribute
inserts the nav tds
fwiw, this reduced the size of the html file by 70% while increasing the js by 10%.
ok, so now I am debating if I should go all the way and write my python code to generate 2 files
an essentially abstract html file
a js file containing a js array of the locations and their stats
If your API can output a JSON document with your data, you gain significant flexibility and future-proofing. This might even be something your users will want to access directly for their own external consumption. And of course your JS code can easily generate a table from this data.
However nobody here can tell you whether this is worth doing or not, as that depends entirely on the scope of your project and opportunity cost of time spent re-architecting.