What tool/editor do you recommend to (live) test your local CSS changes against an externally hosted site?
A site lives on a domain.test (no server access), and I need to write extensive CSS overrides to reskin the entire site. All changes will be in a single CSS file with no preprocessor.
The ideal setup is using the comfort of my regular code editor (Visual Studio Code) and having the site open in a browser and have the CSS auto-refresh as I save my CSS changes in a local directory.
It's a big site, so I'm open to setting up a complex setup rather than relying on testing edits using browser inspect mode or mounting CSS files using Firefox.
:: I can inject JS script/library to the site if it helps with my setup.
Bonus: If I can do that for Vanilla JS too.
I would do it as follows with ModHeader and ScriptAutoRunner (chrome extensions).
With ModHeader replace the site's CSS and JS to local files using the "Redirect URL" function. (If necessary use ScriptAutoRunner to inject JS).
In one of these JS files create a rule to download every 2 seconds via ajax (any other way) your local files and check if there is equality with the last request or not. If the file has changed then reload the page (to update).
I know there are some tools that show CSS changes in real time without you having to reload, but I don't use them and the way I mentioned you can also make them run when the JS is updated.
Related
This is a long shot, but I came to a wall and I don't have any idea what to do with it.
There is a site that has section with Google Maps map with custom pins. Location of the pins and configuration of the map are defined in wp-content/themes/mytheme/js/map.js file. I have to add some pins. According to the person who created the site a couple of years ago, new pins may be added by modifying map.js file.
The problem is - nothing changes when I modify this file. Even better - I can remove this file (and all other scripts in "js" folder) and nothing changes. This is the only instance of a script that I found.
There isn't any caching plugin enabled.
There isn't caching on server.
This is not browser cache.
Basically it seems like instead of loading this script, the site is taking it from different location, but I don't have a clue where it could be. Is there anything I can do to find source location of a script?
EDIT: I deleted all css and js folders entirely from FTP and it still shows in browsers. I entered Chrome web tools and used network tab to see initiator for the script and it shows as
xxxxxxxxxxx.xx/wp-content/themes/xxxxxxxxxx/js/map.js?ver=5.2.10
But this file DOES NOT EXIST. I deleted it via FTP. Same thing happens with CSS files. It isn't browser caching because it happens on different browsers, different computers...
I'm hosting an ASP.NET website on Local IIS (not IIS Express), and as soon as I save a change to a .css file in Visual Studio, the change immediately appears in browser windows that use that file (or after mousing over the window in Chrome), without clearing caches and refreshing.
Why do the changes appear immediately?
Opening the .css file itself (not a page using the file) in the browser shows a more expected result: saving the file in Visual Studio does not change what I see in the browser until I refresh the .css file.
As it turns out, I had Browser Link enabled in Visual Studio, and with it, CSS Auto-Sync. This opens up a port on the local machine and uses SignalR to communicate with the browser window about 400 times per second, including any CSS changes needed.
For more information, see these topics:
.net localhost website consistently making get arterySignalR/poll?transport=longPolling&connectionToken= calls
How can I disable __vwd/js/artery in VS.NET 2013?
This probably happens due to caching. when you open the css itself, it retrieves a new copy from the server, but when you open a page that uses the css file, the css file is being cached as the page's resource and the browser just shows the cached resources until you force it to reload them.
a trick i learned to fix the issue, is to link the css file to the aspx page and include a random query string to the linking, that way it tricks the browser to think that its a new resource and reload it from the server anyway.
like this:
<link href="../stylesheets/MyCSS.css?<%=DateTime.Now%>"
rel="stylesheet" type="text/css" />
we use the aspx preprocessor directive <%=DateTime.Now%> to append the current time as a query string, to ensure the link is always different.
Dont forget the question mark between the css filename and the preprocessor directive
I develop on a remotely hosted site that I push files to via SFTP. I would like to set up my site so that I can see any CSS and HTML changes reflected immediately without the need to manually refresh my browser. I've looked at using mixture and browser sync for this but they appear to only work on locally hosted sites. Any suggestions on how to go about setting this up on remotely hosted project?
You might want to try "Emmet LiveStyle", this is a plugin for Chrome and for Sublime Text editor that lets you live code CSS (not HTML) and changes are reflected immediately without the need to refresh the browser.
Then you can use "Sublime SFTP" package for Sublime Text to automatically upload CSS files on save.
I use this setup and it works perfectly.
Here is picture in chrome:
I just woder what does user stylesheet mean here. The case is that I am 100% sure that these classes does not exists in my stylesheets (it was before). I thought It comes from cache but it remains even after cache is cleared. Any ideas? Thanks.
First of all, read this definition of what a user style sheet is. It is an extra stylesheet to help you (the user) browse the web. Hence if you prefer certain CSS settings over what the web page designer intended, you can overrule those settings with your own.
This user stylesheet that you found, may therefore just be a local CSS file on your pc.
Therefore we need to know: where did you find that .CSS file?
If the same file is in this location:
PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css
MAC: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Then the answer is:
The file above is, as it sounds, a CSS file that you can modify and add your own custom styles to, to change the look and feel of your Google Chrome Web Inspector.
Which means that with that specific stylesheet you can change the look of your Google Chrome Web Inspector.
So it has nothing to do with the website you are inspecting, only with how your web inspector looks (it is built with HTML, CSS and JavaScript).
You can read about it here. (Google Chrome version 33 does not feature custom stylesheets)
It could also very well be the case that Google Chrome implements some other user stylesheet that is stored somewhere else on your pc (but I wouldn't know where exactly).
Note that the inspector also shows user agent stylesheets which is the default stylesheet that your browser implements. You can read about those in this question: What is user agent stylesheet
It is possible that the http server itself has cached the previous version of the file and is serving it.
Reload and check the headers in the Network tab, so you can get the full picture. Or if you are using development environment, you can restart the server - just to be sure.
What are some of the disadvantages of using an external JS file over including the JS as a part of the ASPX page?
I need to make an architectural decision and heard from coworkers that external JS does not play nice sometimes.
The only downside that I am aware of is the extra HTTP request needed. That downside goes away as soon as the Javascript is used by two pages or the page is reloaded by the same user.
One con is that the browser can't cache the JS if it's in the page. If you reference it externally the browser will cache that file and not re-download it every time you hit a page. With it embedded it'll just add to the file-size of every page.
Also maintainability is something to keep in mind. If it's common JS it'll be a bit more of a pain to make a change when you need to update X number of HTML files' script blocks instead of one JS file.
Personally I've never run into an issue with external files vs embedded. The only time I have JS in the HTML itself is when I have something to bind on document load specifically for that page.
Caching is both a pro and potentially a con, if you are not handling it properly.
The pro is obvious, as it will improve page loading on every page load past the first one.
The con is that when you release new code, it may still be cached by the user's browser, so they may not get the update. This can easily be solved by changing the name on your js file. We automatically version our js with the file's timestamp, and then make sure that points to the create file in the web request through configuration on our web server (mod_rewrite, Apache).
Ask them to define "play nice". Aside from better logical organization, external js files don't have to be transmitted when already cached.
We use YUI compressor to automatically minify and combine external scripts into one when doing production/staging builds.
The only disadvantage I know is that another request must be made to the server in order to retrieve the external JS file. As was said before me you can use tools like YUI compressor to minimize the effects of this.
The advantage however would be that you can keep all of your JS code in a separate more maintainable format.
Another huge advantage to external javascript is the ability to check your syntax with Jslint. That, added to the ability to minify, combine and cache external scripts, makes internal javascript seem like a poor choice.