I read the no cache solution and this one on the web here: https://sebhastian.com/javascript-versioning/ where to fix this problem, you needed to add versioning to your util.js file request on the <script> tag. The easiest way would be by adding a query string parameter v as follows:
<script src="util.js?v=1"></script>
This is all gravy but we need to be able to automate the versioning similar to the solution they suggest with Webpack.
In the following webpack.config.js file, the name of the JS file generated by Webpack follows the [name].[contenthash].js pattern. The contenthash will be replaced by a unique hash based on the content of the file.
Anyone with idea how to achieve the same with PhpStorm?
Related
Im working on a project that uses i18next with react and typescript, where translationkeys are defined in .json files.
One drawback of switching to json for the translation files, is that we can no longer use the intellij idea "Go to declaration" or ctrl + left-click feature, to quickly navigate from a key usage in typescript, to its declaration in the json file.
Is there any way to enable this without requiring all developers to download some third-party intellij plugin?
I've googled for hours for any information about this.
I've made a d.ts file to enable strong typing for where translationkeys are used. What strikes me as odd is that intellij/typescript is able to know when a key doesent exist and warns about it, but at the same time doesent know "where" that key exists whenever i type a correct key.
I also set resolveJsonModule:true in tsconfig, but to my limited understanding it doesent seem relevant.
This is not technically possible because commands like Go To Declaration will look for a declaration in a source code file (think .ts or .js or .d.ts) whereas you want to go ...to its declaration in the json file.
The resolveJsonModule flag won't help you either because as per the docs:
Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. This includes generating a type for the import based on the static JSON shape.
One possible solution is to create a build script to take your .json file and output a .js or .ts file containing the same content, then IDE commands like Go To Declaration will jump to that file.
In summary: you will need some kind of plugin, or a custom build script.
DISCLAIMER: I don't use i18next or react, this answer is based on my understanding of both TypeScript and the JetBrains Rider IDE (which is like IntelliJ).
I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
I'm starting to experiment with Polymer 1.0, and I noticed that the some of files included via Bower are broken up into the following three:
polymer-micro.html
polymer-mini.html
polymer.html
And each file is imported via HTML Imports within the next one down the list. Then, the rest of the file is just JavaScript.
Perhaps, it's my lack of knowledge regarding HTML Imports, but is this a clever way to utilize dependency management for JavaScript without having to add a third-party library like Browserify for example?
I'm new to Joomla.
I'm having a small doubt coming to creating Joomla templates. In the file structure provided by joomla I can see only index.php file. My doubt is can we create a Joomla template using HTML also. so that in the file structure it reads index.html.
Thanks in Advance and Merry Christmas.
It is important here to distinguish between "can" and "should" here. I believe you "can" make a template in an html file without losing all of the Joomla functionality because Joomla places modules using tags like <jdoc:include type="modules" name="user4" /> which it will parse. I'm not positive, but fairly certain that the template does require a php to bootstrap it, but you could just have the php file include the html you want to use. The major drawback is that you will be losing all of the php helper methods that Joomla makes available for you, like JURI::base() for dealing with paths for your scripts/css, etc.
You definitely should take advantage of Joomla's capabilities with php, so use the php file. If you want to include some html files into that document, that's just fine.
I don't think you can do that. The index.php file you are referring to is the root index file, while each template has its own index.php file inside their folder inside templates folder. For example templates/beez3/index.php Joomla includes the index.php file of the chosen template during it's execution cycle. Failing to find such a file it will fall back to a preinstalled template throwing an error: The template for this display is not available. Also the frontend requests start by loading the root index.php file first and then proceed to other calls and <jdoc:include type="component" /> won't load anything as it won't have any framework loaded or any joomla functionality at all. Finally no extension will work since they all require the _JEXEC constant to be defined as it's being defined in the root index.php file:
/**
* Constant that is checked in included files to prevent direct access.
* define() is used in the installation folder rather than "const" to not error for PHP 5.2 and lower
*/
define('_JEXEC', 1);
It must be written in php and you can certainly keep your theme that you created within the template folder, as for keeping .html you can always use htaccess to serve whichever extension you want.
I'm looking to combine and minify my JavaScript files. I have a question; on my pages I basically have the same library JS files, and then one 'specific' JS file to run code for that page. I also have variables defined in that specific JS file which are then used elsewhere in the library JS files. For example, I defined var tablename which is then used in a library file to render out a table using what is set as 'tablename'.
My question is, if I combine all of my JavaScript files from all of my pages into one big JS file, and then include that combined/minified file on my pages, then as a result of combining all of the files then that big JS file will have multiple .ready() events and the same variable tablename will be defined multiple times. How is this overcome? Maybe it can't in my situation and I'll need to create a combined/minified file for each of my pages?
Thanks
I think I found the solution; YUI Compressor (that I'm using) doesn't munge global variables, and since my tablename variable will be global (not in a function) then it won't get munged.