PhpStorm code completion and non physical file path for CSS and JavaScript - autocomplete

Using minify, instead of including the individual CSS/JavaScript files directly, I have something like this in my HTML file:
<link rel="stylesheet" href="/min/g=css8" type="text/css"/>
Autocomplete for CSS or JavaScript doesn't work in this html.
I tried looking for ways to be able to specify the individual files to PhpStorm to use in autocomplete, but could not find any option. Suggestions?

Related

TYPO3 v9 admin panel without css styles and js

I have a problem with one of the TYPO3 installations on my server. The whole thing loads but without styles and js. Comparing the neighboring installation on the same server (which works properly), the difference appears in the file paths.
The correct path has a form:
<link rel="stylesheet" type="text/css" href="/typo3/sysext/backend/Resources/Public/Css/backend.css?1571297500" media="all">
In an installation where the whole installation does not work, the path has a form:
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/backend-0ec6c1600f439ab982e3d6ab38b2463c.css.1574420118.gzip" media="all">
There is no such file in the specified location - only
backend-0ec6c1600f439ab982e3d6ab38b2463c.css
backend-0ec6c1600f439ab982e3d6ab38b2463c.css.gzip
If I remove the fragment 1574420118.gzip from the code, part of the styles is loaded.
The strange thing is that both installations have the same .htaccess file and still generate different code.
Any idea where the reason for this is?
The setting you are looking for is an installation-wide setting called versionNumberInFilename.
It appears you have this enabled in the broken install, but not in the working one.
You can change the setting under 'Admin Tools -> Settings'. If you can't get there, you can change it in your typo3conf/LocalConfiguration.php or typo3conf/AdditionalConfiguration.php file.

Github... Background image doesn't display when I publish my site on github

I'm a beginner in web Dev.. I have a website that displays properly on localhost but when I publish and try to render it on Github, the background image doesn't show up.. What can I do to remedy this
Can you post a bit of code for us to look at?
My guess is that you have the background image referenced absolutely on the computer, and it needs to be a relative reference to render when hosted online, but I can't say for sure without having some code to look at.
A link to your github project would also help.
Edit: It looks like you perhaps renamed your startup.css to style.css and forgot to edit the html header link from startup.css, to style.css
I.e. change
<link rel="stylesheet" type="text/css" href="startup.css">
to
<link rel="stylesheet" type="text/css" href="style.css">
Previous suggestion (no longer likely):
As you mention Windows, one possibility is that you have mixed up Capital and small letters somewhere in the filename or path.
Simple web-servers on Windows are often forgiving (as is Windows filesystem) of these mistakes, while internet is not-

How to remove content between two tags on several files

i want to know how to delete all the content between two tags on several files.
Example:
I have 3 files that have the <head> and </head> tags, but they have different content on them, so i want to remove all the content between that two tags with some kind of tool, plugin, etc.
Is there any program, application or plugin that can do that?
Thank you.
In Notepad++
Use RegExp search and
search for
<head>[^<>]+</head>
replace all with
<head></head>
As #domdom mentioned, you can search through all opened documents.

Grunt Inline CSS and Javascript

Short Version:
Is there a way, using Grunt, to include minified CSS and JavaScript inline?
To use usemin's formatting as an example, I would like to see something like this:
<!-- build:css inline -->
<link rel="stylesheet" href="styles/foo.css">
<link rel="stylesheet" href="styles/bar.css">
...
<!-- endbuild -->
<!-- build:js inline -->
<script src="js/foo.js"></script>
<script src="js/bar.js"></script>
...
<!-- endbuild -->
Turned into this something like this:
<style>body { color: red; } /*css is here*/</style>
<script>var foo = 1; bar = 'some javascript code is here'; ...</script>
Long Version:
So, I'm working on a Tumblr theme. In order to use CSS or JS files in a theme, they have to be uploaded to Tumblr. The only way to upload is a crappy little web form that often crashes. I'm trying to avoid this interface until I'm ready to upload the final code because
there's no way to delete uploaded files, and
while I'm in the middle of development, these extra steps take too much time
To get this, I've been copying my CSS and JS into <style> and <script> tags in my file, then copying the whole thing into the Tumblr theme editor. It's faster, so I'm happy with that, but manually copying and pasting CSS and JS into a file seems to go against the spirit of Grunt and the automation it provides.
Ideally, I would be able to run grunt build and have it spit out an html file with the CSS and JS inline, then I can just copy that into the Tumblr interface (well, ideally, I would be able to copy that HTML file to Tumblr, but Tumblr doesn't provide FTP or SSH or any useful interface, so I'll settle for this).
It seemed like grunt-usemin could provide the functionality I'm looking for, but I haven't been able to get it working as I described. Maybe it's only made to put everything into a separate file.
I'm open to using any Grunt tool if anyone knows of one that could accomplish this.
I've used this one before: https://github.com/motherjones/grunt-html-smoosher. It's very straightforward, just provide an input file and output file; no extra configuration, it just finds the files automatically and inlines them.
grunt.initConfig({
smoosher: {
dist: {
files: {
'dest-index.html': 'source-index.html',
},
},
},
});
Hope this helps.
Just providing other references that might be useful:
This grant-inline task do inline css and javascripts but you can do it selective using the _inline parameter. There is also a similar task grunt-inline-assests that do same thing. Both are good to generate HTML e-mails.
Finally, the purpose of this one is a bit different; it inserts all your css and js as externals based on a tag in your HTML. This can be very useful when developing themes and front-ends where you want to have you js or css contained in many small files to easy maintenance. Sails-linker task can be used to inject all css and js while in development and one of the inliners above can be used to generate the final production HTML file with CSS and JS minified and inlined.

wrap code in notepad++

I love notepad++ but I dislike when someone sends me an .html or .xml file and the entire code is on one line. Is there a plugin or program that will take a one like code and indent it correctly on multiple lines?
Example:
<html><head><title></title></head><body><div></div></body><html>
<html>
<head>
<title></title>
</head>
<body>
<div>
</div>
</body>
<html>
There is an HTML tidy plugin available that correspond to your need. You can also install the TextFX plugin which adds a bunch of other enhancements.
There's a plugin named XML tool which does the pretty print for you.
Use Plugin Manager (Menu Plugins->Plugin Manager) to install it.