I have an index.html file in directory XXX and other html files in various subdirs.
In XXX, I have also the usual dirs js, images, and css that contain the corresponding files.
Is there an IDE that would allow me to somewhat automatically refactor id and class names throughout the whole project, and also check whether files contained in the dirs js and css, and images in the images dir, and so on, are being used?
Related
I wanted to access the list of JS chunk files from within entry point Javascript file. Is their a way I can inject it to JS as an array?
Description:
For example, I have following JS files:
node_modules
moment.js
jquery.js
public
index.html
menu.html
src
shared.js
utils.js
main.js (dependent on shared.js & uses moment)
index.js (dependent on shared.js & uses moment + jquery)
menu.js (dependent on utils.js & uses moment + jquery)
Now in webpack config I have 3 entry points say main, index, menu. For index & menu, I have related html files and I use HtmlWebPack plugin to inject the chunk files which works well.
But "main" entry point doesn't have any html files and it would be used for some other reason. Here for this entrypoint also it creates multiple dependent chunks say for example (0.js, main.chunk.js, runtime-main.chunk.js).
So for me, from "index.js" file, I wanted to get the list of all the chunks related to "main" entrypoint as array so that I can use those chunks dynamically when the code is getting executed in the browser.
Sample "index.js":
// Currently I am hardcoding this list, which makes me manually update this list whenever I add some more additional dependent files to it.
// I wanted this file list to be populated automatically while the bundling happens so that I need not maintain this list manually.
const filesList = ['/runtime-main.chunk.js','/0.js','main.chunk.js'];
filesList.forEach(file =>{
// I will do something with this file path
});
Mine is a very specific usecase where I definetely need the list of file names dynamically instead of somehow statically loading it. I know I can make use of "webpack-manifest-plugin" which generates the required mapping information as json file which I can use dynamically. But I am looking for a solution where it can somehow injected the list as array itself while bundling the code. I am definetely sure this is possible as I could achieve something similar elsewhere.
Question 2:
For the same usecase above, is their a way I can bundle all the dependency of "main" entrypoint alone as a single file which basically would be "main.chunk.js" so that i can just use that file without need for an array of files.
In advance, thank you for all your answers!!
In a few words, we have this active theme called themename located in this folder :
/public_html/wp-content/ .. /themename-wp
At this point, I am interested to install and use the same theme (the default settings version) but not updating, over the existing folder which contain some modifications in so many different places inside the files.
Reading different resources about this procedure, I am not so sure if renaming the new copied theme file (being inactive in this phase) from themename-wp in newthemename-wp will maintain the new installed theme 100% functional;
I have this concern because, If we need to replace the theme folder name into the theme files too, we have a situation:
-I've searched for themename-wp name with Agent Ransack all the theme files and I've found only 2 .json files containing this text.
On the other hand,
-Searching for themename without -wp, which is the displayed name of the theme, there are about 60 files (.css, .js and mostly .php's) that contain this text.
The question is:
-Should I find and replace the theme name only where appears as themename-wp OR I need to make these changes in other files as well replacing themename with newthemename OR will be enough to rename the new copied theme file in newthemename and that's all?
Thank you,
Suppose we start pure HTML5/JS/JSON application. So UI in browser, user interaction handled by JS, data fetching/storing in AJAX.
By pure I understand that you don't preprocess any .html, .js, .css files (except a few configs) with any view template engine, scriplets, etc. Just pass as static resources.
To be maintainable project resources structured in hierarchy with several levels by / in URLs (and directories in file storage).
We don't want to inline any specific URLs in our code.
How to define URLs in HTML/JS so project can be moved without changes in .html, .js files (except a few config files)?
I see problems in following HTML code:
<script src=".../js/...">
<style src=".../css/...">
<image src=".../img/...">
and in following JS code:
ajax('GET', 'http://.../ajax/...');
When you preprocess files you can use:
<script src="${base}/js/...">
<style src="${base}/css/...">
<image src="${base}/img/...">
ajax('GET', '${base}/ajax/...');
Note that relative paths (like ../../ajax/data.json to get data from /html/data/list.html) may not work in included JS code (as you don't know at which level of HTML this inclusion happen, so don't know how much strip /).
Or pure HTML 5 project is myth?
One time preprocessor pass for inserting concrete IP/DN and context URL part resolve issue, but deploy in that case deploy far complicate then just copy files and set static content hosting...
I am using the html5 boilerplate layout which has a css, img, and js directory at the same level. I am having all kinds of issues accessing images from my .css files and .js files. I have been warned that using ../ may cause problems, but without some kind of url generator (like I have with my template files), how can I best access images from my .js and .css files?
One robust way to access static resources in CSS is to always give the full path:
body {
background-image: url("/path/to/image.png");
}
Notice the preceding / character. It tells the browser to look for the file at the root of the server. For example, if you currently are on http://example.com/pictures/album/5 then the above CSS will find the background at http://example.com/path/to/image.png.
Using the full path also encourages you to keep your resources well organized.
This is not to say that using relative paths is a bad thing, though. If you are working on a CSS project and put it in a sub-folder, say /static/myproject/project.css, then you can refer to images in that folder using relative paths.
If we say that your project is at /static/myproject, and the folder structure looks like this:
/static/myproject/project.css
/static/myproject/back-button.gif
/static/myproject/forward-button.gif
Then, in your CSS file, you can call the images relative to the CSS file:
.back {
background-image: url("back-button.gif");
}
.forward {
background-image: url("forward-button.gif");
}
The problem with doing it like this is that resources tend to be stored all over the place. That makes it more difficult to reuse resources.
when i download some new plugins eg. jquery plugins i put them in js folder. and the same for css and img.
so all my different applications share them. but where do i put my js/img and css for specific application/website? every website?
and where should i put my ajaxcall-files.php?
EDIT: some guides that could give me a clean and neat file structure?
I normally keep a file structure for javascripts as follows:
- js
- jQuery
- flot
- chilli
- processing
- closure
- typical_library
- js
- css
- img
By keeping separate folders for each library/plugin (including the relevant css and images if it need be), the pain of maintenance during upgrades is less. There is one more advantage, predictable folder structures can help with autodiscovery of JavaScript base directories.
For ajaxcall files (since I mostly use an MVC pattern), I keep them in the controller files. (I mostly use CodeIgniter). Some people would keep them in views, however if the ajaxcall.php involve any business logic is best to stick them in the controller files.
In general minimize anything outside of folders.
It's entirely up to you. But what I do is put common resource files that get used by lots of pages in central locations, e.g. /js is where the javascript libraries go. My arrows go in /arrows.
But if a given resource is specific to only one page, e.g. foo_pic.png is only ever used by foo.php, then I keep the files together and name them so they list together alphabetically.
So, as you see, I don't prefer structuring only according to file type. But that's just me.
Outside of the DocumentRoot, I put my php include files under one directory and they are all suffixed .inc.php. HTML templates are organized under another dir.