Due to licensing issue, I will not be able to share the codes.
I was adding on validation to existing ones, and realized that even changing the existing validation's return value (a simple text msg) does not reflect on the browser. A quick summary, I was able to change any .html or .php file, just not .js files.
This project uses react too, not sure if this info helps.
Note that I have already cleared the cache of the browser many times as suggested by others.
May I know is there a mechanism where the creator can lock us out from changing the source code of .js files or a read-only code that don't accept addons/modification? If not, no methods to work around other than pointless refreshing.
Please note that the license only restricts the program to have n amount of users.
FYI- source code name is from IceHRM
Ok I have found the issue behind why .js changes are not reflected. The project uses Gulp to bundle the js files, therefore any change to the code must use the command gulp to "compile it" just like how .java has javac
side note, it rarely has to do with client or server cache
Related
I'm sure thousands of other JS devs are feeling the pain I'm feeling. I love jumping to function definitions in .d.ts files while browsing code in VS Code.
However, sometimes instead of going to the .d.ts file, I'd like to jump to the raw JS code that is being hidden by the .d.ts file that sits in front of it.
Does anyone know how to optionally force a jump to the JS source code (if it exists) and not a TypeScript definition file.
Thanks!
EDIT: I am aware that this has been asked for to the VS Code team and will not be officially supported by them. I'm looking for some sort of hacky workaround (extension or otherwise) to get this to work.
Recently announced, VS Code Insiders (v1.67.2) supports a Go to Source Definition context menu option from right-clicking the symbol. This was committed 19-APR-2022.
This feature requires TypeScript 4.7:
Go To Source Definition
TypeScript 4.7 contains support for a new experimental editor command called Go To Source Definition. It’s similar to Go To Definition, but it never returns results inside declaration files. Instead, it tries to find corresponding implementation files (like .js or .ts files), and find definitions there — even if those files are normally shadowed by .d.ts files.
This comes in handy most often when you need to peek at the implementation of a function you’re importing from a library instead of its type declaration in a .d.ts file.
You can try this new command in the latest versions of Visual Studio Code. Note, though, that this functionality is still in preview, and there are some known limitations. In some cases TypeScript uses heuristics to guess which .js file corresponds to the given result of a definition, so these results might be inaccurate. Visual Studio Code also doesn’t yet indicate whether a result was a guess, but it’s something we’re collaborating on.
You can leave feedback about the feature, read about known limitations, or learn more at our dedicated feedback issue.
Delete the .d.ts file (temporarily)
This is obviously a super-crappy workaround, but it should work. By deleting the file you don't want to see, VSC will only have one place to take you: the file you do want to see.
When VSC takes you to the .d.ts file, right-click on the file tab and click "Copy Relative Path"
Open the VSC terminal and enter rm [PATH] (or del [PATH] for Windows)
leave the (now-deleted) .d.ts file tab open
Go back to the original file and try navigation again
if it doesn't work, you may need to reboot the TS server
Once you've seen the code you want to see, go back to the .d.ts file and save it
this will put the file back exactly as it was, which will probably be invisible to your source-control
if not, you may need to use your SCM to undo the deletion operation
Again, an awful hack. And I share your frustration that the VSC maintainers & community have no interest in this feature. Just bear in mind that their goal is to make their propriety technology displace all technology they don't own, so you will occasionally discover that they will refuse to help you as a web developer because they want you to be a Microsoft developer.
So I have the following situation:
There is an HTML file in some directory on my PC. If I open this HTML file in a browser, I want to click a button with which I can write or change a file in the same directory.
So there is no server whatsoever, just an HTML file opened in a browser.
Is this possible?
Calling a python script from a button would also work for me.
I just have to be able to detect a change in the directory when the button is clicked.
TL;DR
Yes it is. but there is additional system like git. and you need to implement using javascript.
Not a solution
I am sorry about I can not provide exact solution about your question. but I can give you keywords. I assume you do not know about git.
I recommend implement local git system for your local directory. because there is lot of changes your files. (like edit single character or add new files) and some of files you do not want detected (that's mentioned in .gitignore)
and there is suitable project for you isomorphic-git
. and If you heard about git first, also check github guide.
I'm trying to figure out how to set up a JavaScript development project that will allow me to factor my code into several files. I plan to run this eventually on a client web browser, but first I need to set up an efficient development environment.
I've used other programming languages before that let you keep a large number of files in a subdirectory and then let you compile everything into your final deployable (or have an interpreter do something similar). Javascript doesn't seem to allow this - I have to manually add a <script> tag for each js file to the head of my web page to get the browser to load it. This can get very hard to manage once you have more than about 10 files that you need to keep track of. It would be nice if I could write <script src="myscripts/**/*.js"> to suck in everything, at least during development time.
I've found Grunt 'uglify' which looks like it would be a handy tool for creating a final file for deployment, but during development I need to keep everything separate so I can debug properly. Is there any way to have my web page load every js file in my development directory?
As others have mentioned in comments, Webpack (or similar) is the way to go. It bundles up all of your relevant code, and can also process it for minification.
I want to address this comment though:
but during development I need to keep everything separate so I can debug properly
You don't need, or want, that. While developing, you want to be testing against the same sort of build process you'll use in a deployment later. So, how can you easily debug your compiled scripts? There's a .map file that gets built, which tells the browser what your original code looked like.
Chrome and other browsers will automatically load and parse this file when you open your developer tools. Then, you'll be able to see the original source code (and in the original language, for anything transpiled) and debug it as if it were not bundled in the first place.
Don't deploy this map file, unless you want external users to be able to see all your original source code.
The documentation for tinymce notes that one can compress all the javascript and components (which I assume includes plugins) into a single file. They do note reasons why one might not want to that as well.
Compressing into a static file
It's also possible to simply concatenate the necessary components and some boilerplate code into a single .js file. However you will always have to recreate this file if you want to use other TinyMCE plugins, or you upgrade TinyMCE. You will also probably want to configure your webserver to compress javascript files.
But assuming one actually did want to do it, how does one actually go about it? Build.xml does does not provide an appropriate task it seems. At least when I tried it the plugins did not seem to be included when I loaded tiny_mce.js.
There are some really excellent command line tools for this, but you can also do this easily with just a text editor. The simplest way is to just open each file, copy the contents, and paste the contents into a single JS file ("everything-all-together.js", say). You'll need to make sure you paste the files into the single file in the same order you would've put the script tags into the HTML doc. Once you have all the files all together, you can use tools like JSXMin, YUI Compressor, or Google Closure. There are also some tools online that do this, like http://www.minifyjavascript.com/. You can paste in the uncompressed JS and copy back out the compressed JS. This makes the build process really cumbersome, but if you just need to do this once, that will get you there.
The best way to do this is to do it as a build step for the site. That means when you make changes to the JS files, you rebuild the compressed JS file to include the changes as well. This can be a cumbersome step if you're iterating quickly and changing files over and over again. You don't want to have to rebuild the compressed file with each save. You can solve this by setting up development and production modes of the site. When being loaded in development mode, the JS files aren't grouped together. When all the necessary changes are made, you'd rerun the build step to generate the single compressed JS file. To do the minification from the command line, you'd probably want to use Google Closure: https://developers.google.com/closure/compiler/. If you download the compiler app, you can do the following:
java -jar compiler.jar some-file.js some-other-file.js > compiled.js
That will generate a file called compiled.js that includes the contents of some-file.js and some-other-file.js in a minified format. You can specify as many files to compile as you need to. Actually, I'm selling Closure a bit short to say it's just minified. It's also extremely optimized code. Pretty much every site should be doing this to all of there JS all the time unless they're already doing something better.
I hope I'm getting you (and the tinymce docs) right, but this sounds a lot like combining JavaScript files on the server side. This means taking the contents of all of your JS files, putting them into one file and returning that one to the client.
Why would you do that? Well, this should be obvious, but.. you reduce the number of HTTP requests to your server, which is always a good thing.
How do you do that? There are many solutions out there for all server-side languages and frameworks, I suggest doing a Google search for "[your language] javascript minifier" or something similar.
Hope this helps.
I've inherited an legacy project with tons of javascript files all over the place...
Is there a way to find which of those files are used inside pages?
Thanks in advance.
Use a debugging tool like YSlow!
http://developer.yahoo.com/yslow/
Such tools will usually point out redundant files and code.
You can inspect the website logs of past, say, one month, and locate all *.js files requested by browsers. The log might contain referrer page which makes things easier.
Something that I do very often for .asp files: find a good text editor that allows you to find text inside files/folders. Visual Studio .NET does an excellent job but I've tried and had success with Notepad++ too. Find all files that contain .js. If your text editor provides regular expressions support for searching (the aforementioned products do) this makes things even better. The regexp I use in VS is \.asp> (dot asp followed by a word boundary). The search results are often displayed in a window from where you can copy every thing and do some manual processing via more regex operations or copy the data to an excel file.
Macromedia Dreamweaver does an acceptable job if your website has some structure in it. There is a "Find broken links" command in Dreamweaver that generates a side report called "Orphaned files". The orphaned files report can tell you which js files are not referenced by any page. Then you can run the Dreamweaver's "Find" command (find in entire local website/find in folder) to double check each file one by one. I've tried that too. One thing to note is that Dreamweaver might not be able to detect cycles. E.g. if a file foo.js is used by bar.asp but bar.asp itself is not referenced by any other page, Dreamweaver will flag bar.asp as orphan but not foo.js. The recent version of Dreamweaver might do a better job.
You could create a script in a general purpose scripting language that runs through every html file in your project, checking their script tags. Or you could just do it manually, which may or may not save you some time depending on the size of your project.