I'm trying to use this theme with Jekyll. However, my generated JavaScript has illegal characters appended to it, causing errors when the page is rendered.
In particular js/init.js seems to have two characters added to the end of it once rendered into _site. In Sublime Text they show as NUL, and in vi they show as ^#.
I'm running Jekyll from a Trusty Vagrant VM, and the source repo is a mapped volume to my Windows host. I've not edited any of the files at this point, so I can't see it being anything to do with line endings.
Any ideas?
(Following up to a super-old question, I know.)
TL;DR: Solution: apply frontmatter to the Javascript file.
I kept running into this issue, over the course of a few months, and turned up no solutions in search. Finally today, I think I've resolved my own case of it...
It turns out Jekyll is trying to process that file (at least it appears in my case) as a page document, so it looks for the frontmatter, and for some reason fails to render the file when it's missing.
After adding some frontmatter to my script, even though it breaks Javascript compatibility for the file on its own, Jekyll seems to play nice with it, and I'm no longer seeing the trailing ^# characters (etc).
Sample script with frontmatter
This tactic has a few ancillary features too...
---
some_variable: "yourvalue"
---
// access the value from the frontmatter within your script.
document.body.getElementById("mydiv").innerHTML = "{{some_variable}}";
Before adding front-matter (which fixed it for me, but breaks compatibility as noted by Samuel), try this first.
My JS file started out like this:
"use strict";
var filterView = {
Change it to this:
//A comment here helps Jekyll not get confused about file rendering
"use strict";
var filterView = {
In my case, I was only having problems with one of my JS files which was getting null characters added to it by Jekyll, and starting with "use strict" with nothing before it was the difference. I don't know if this will fix all causes of this problem but worth a shot.
Related
I am working on a project built with Javascrpt, jQuery, and Vite.js. My colleague built a data visualization using D3 - a US states map - that I need to implement in the project on a specific page. They built the component using test data, my job is basically to load the component onto a page passing it actual returned data from an API call.
Everything in the test project works perfectly, but when I tried to implement this code into a script file in the project - literally copying and pasting from the working version - I got an error saying certain properties could not be read. After failing to debug for sometime, I randomly tried removing type="module" from the script tag link in HTML, and boom, everything worked. Does anyone have an idea of why this would be? I cannot get this code to run when the script type is set to module, except I need the script type to be set to module since I'm importing lots of components for other aspects of the page.
With the way the CodePen is set up, I couldn't replicate the issue since the HTML and JS files are automatically linked. But if you copy this code into your editor, and then in the html, set the the JS file to a module ` You'll see the issue.
Thanks. I'm at a total loss for what to do here. I could put all the D3 code in it's own script file, but then I have no way pass it variables from other files if it's not a module.
Per the comments, the following lines in my original code were not working in strict mode:
this.uStates = uStates;
this.uStatePaths = uStatePaths;
The fix was simple, I just needed to write the following instead:
window.uStates = uStates;
window.uStatePaths = uStatePaths;
I'm using jsdoc3 for my project and everything compiles nicely.
But this I've been fiddling with for the last 2 days and I give up :(
When using the most basic call from MacOsX Terminal to run jsdoc I ALWAYS get the full path of my source file within the generated documentation.
Example:
./jsdoc ../projectname/js/jsfile.js
In the generated index file I can see a h1 with "index" and below it a h2 with the full path to the js file:
/Users/username/projects/path/projectname/js/jsfile.js
I don't like that it shows my complete local path...
After reading up I thought it would be relative to where I run jsdoc from.
But all this has the same exact result:
cd /Users/username/projects/path/projectname
../jsdoc-master/jsdoc js/jsfile.js
as well as
cd /Users/username/projects/path/projectname/js
../../jsdoc-master/jsdoc jsfile.js
The problem is, that this path is also used with the line number references and on the sourcecode page. And it's really not nice that my internal path is displayed...
The output I would want is projectname/js/jsfile.js or at least just jsfile.js, but I can not for the life of me get this to work.
I hope someone can tell me what I'm doing wrong.
regards,
Jan
#Louis helped me figure out it was a problem with the alpha version.
3.2.2 did not export the full path to the docs.
Unfortunately it had other problems, like the lacking of support for unordered lists.
So I decided to stick with 3.3.0 and make a shell script correcting the wrong output of jsdoc afterwards.
Contents of the shell file:
./jsdoc-master/jsdoc ./projectname/js/jsfile.js
ABSPATH=$(cd "$(dirname "$0")"; pwd)
perl -pi -e "s?$ABSPATH/projectname/js/??g" ./out/*.html
So this basically deletes the full path from the generated html files.
It's a bit dirty, but it works...
regards,
Jan
All of a sudden, my breakpoints in Chrome stopped working entirely. The weird thing is if I hit an error in the code and break that way, or if I add debugger; anywhere in my code, it does stop, but it opens a different file with a prefix like VM[number].
The file that shows naturally in the development console that breakpoints don't work in is entitled main.js, but when I encounter an error or stop through the debugger command, it opens a new file called "VM113 main.js". The even weirder thing is if I follow the code into a different file, like jquery.js, it also doesn't go into the jquery.js file but into a file called "VM97 jquery.js" or "VM98 jquery-ui.js".
What's going on and how do I get Chrome to look at the actual files rather than VM files?
In my personal research, this is caused by having an accented character in the file path of the file in which I'm attempting to place a breakpoint.
Suppose you have two files, HäagenDazs/main.js and HaagenDazs/main.js (named for the sake of example) and they both contain (roughly) the same thing:
var x = function () {}; and var y = function () {};
If you place a breakpoint in HäagenDazs/main.js, Chrome will delete it and set it in VM-### main.js at the same location. If you place a breakpoint in HaagenDazs/main.js, Chrome keeps it there in the original file.
It seems to be the combination of an accented character anywhere in the path and having the keyword function present in that file. I tested this in OS X 10.10 using Chrome Version 38.0.2125.122.
I completely uninstalled Chrome and reinstalled it and that seemed to fix the issue. I do not know what caused it to start this behavior, but a reinstall solved it.
I've just experienced the same issue and got a solution, so I'll leave it here just for the record.
In my case, it was because that particular website used service workers, and they provided an additional level of JS caching 'ahead' of the local overrides where I had placed my breakpoints.
So the execution always stopped in a [VM] tab that did not contain any of the changes that I had in those overrides.
The solution was to go into the Application menu. There, in the Service Workers section, I checked the 'Offline' and 'Bypass for network' options, then clicked on 'Unregister' on the far right side.
ive tried everything i cud to figure this out, but i cannot track a piece of javascript in a webpage
so, just to give you some context even though my problem is not related to just this scenario. it depends on a much bigger spectrum.
Anyway, im developing on sugarCRM and im trying to edit the default onclick behavior of a slot in calendar module (you dont need to understand this to help me, so please keep reading). when i click on a slot, a modal dialog window opens that lets me log a meeting or a call.
So i tracked down the javascript behind this. ive used firebug and chrome, and they both give a list of all the JS files that are being used on a given webpage
for example i search for "SUGAR.collection" and firebug tells me its located in a file named "sugar_field_grp.js?v=FVh1Z-v5nA6bYov7-aFFqQ" i can see this piece of code resides in sugar_field_grp.js,
but the code im trying to change resides in "index.php?module=Calendar&action=index&parentTab=Activities", firebug actually tells me this is the file that has the javascript i want to change.
I can also right click view page source and i can see that piece of code inside the script tag. so considering this piece of code doesnt reside in a JS file, i cannot change it, its generated at runtime (i think) but there must be some source, there must be a file thats telling sugarCRM to generate this code
tl;dr how to track down a piece of javascript code that resides on pagesource and theres no JS file specified by firebug or chrome save for index.php (this file doesnt have that javascript either)
i know its been a long post
thanks for reading
Learn how to search for strings in files on disk on your machine.
On Linux, MacOS and most unixen the go-to tool for this is grep. This applies to any programming language you work with. For your case simply cd into the directory of your source code and do:
grep -r SUGAR.collection .
If you're using git as your source control tool then git grep is much faster.
On Windows there are various GUI tools you can use to search for text in files. Just google: grep for windows.
If you're using an IDE then just your IDE's find-in-files functionality.
To track down specific code using Chrome / Webkit go through the following two steps:
Client:
1. Search all static text sources
Open the Dev Panel using CTRL + SHIFT + I
Hit CTRL + SHIFT + F for a global search dialog to pop up
Right next to it you can set pretty printing of the JS code to on: button { }
Enter your search term or terms using regular expressions
Optional: Decide if you need a case insensitive search which has a greater searchspace and takes longer
Example:
2. Search the dynamic user-DOM contents
Go to the Tab 'Elements' hit CTRL + F.
Enter your search term (This will also search iframes, svg's etc... within the parent DOM)
3. Recommended:
Cross-reference the results of step 1. and step 2.
If a given string is present in both the DOM and the static sources, then you can assume that the content is not programmatically created on the client-side.
Server:
Many projects perform a media bundling step prior to content-delivery. They pack web-resources into the main file (e.g. index.php) to save HTTP roundtrips.
Use sourcemaps / and or search the entire codebase for a salient static string or a salient keyword near the static string to locate the original source files.
Searching files:
Locally, I generally use the rapid index, and heuristic search of JetBrain's IDE's (IDEA, PHPStorm,...) and Sublime. The grep-command tool can definitely not compete here in terms of performance. On Windows I additionally use Totalcommander and its archive/regex finding abilities.
When quickly looking up code on the server you may use something like:
grep -r -C10 --color=always 'keyword1|keyword2' htdocs/ | less -R
which will also provide you with line-context. two caveats: you may want to filter out binaries first and symlinks outside the scope will be ignored.
I am trying to use TypeScript in a Windows 8 app (html5/JS)
I have looked at the sample app
The app uses a typing definition file for WinJS (WinJS.d.ts).
I need to edit this file as it is not complete. However the file has an interface extension for the Type Element adding a property for winControl(typed to any).
This line gets and error of "Duplicate identifier 'winControl'" I am unable to locate and other place this is.
Also, there are locations in my code that i get errors as there is no property named winControl
To solve this problem you must
remove lib.d.ts from anywhere in your project path (or the path to your winrt.d.ts) folder. It is conflicting with the definitions in your local typescript install folder
make sure that you do not have any of your ts (and JS files) identified as content as they will be copied to your deployment directory and will cause the same duplicate issue (there will be two definitions of everything).
I would suggest opening the output window before you do a build. It will let you see what is causing issues since tcs is being run as a command line behind the scenes for you
Sounds like the same issue that I've experienced when trying to augment the Window interface, a bug that is currently being working on:
http://typescript.codeplex.com/workitem/176
However he only mentions lib.d.ts, you may want to add your problems to the issue to either make sure that it's also being fixed, or to rule out that this is what causes your problem.