I have the following structure
/templates/base.html
templates/index.html --- here i have inherited base.html which has JS and CSS and both working fine when this pagge is accessed
/template/app/some.html ---- i use {%extends "base.html"%} only is getting inherted but not the CSS and JS
can any one tell what i am doing wrong
Thank You
Your issue happens because when you are in say: mysite.com/index.html, your files pointed to css/mysite.css try to load from mysite.com/css/mysite.css, but when you are in mysite.com/foo/bar.html it tries to load from mysite.com/foo/css/mysite.css
The best option is to point to your CSS/JS with an absolute path, so say your CSS always loads from /css/mysite.css and your JS loads from /js/mysite.js. Notice the prepended / as this is what instructs the browser to always look for this path relative to the base domain.
Related
Currently I'm developing a website using the following stack:
vue.js
#vue/server-renderer
vite
tailwind CSS
SSG was chosen as the rendering mode.
Tailwind, as described in the documentation, allows you to specify directories and file extensions (content property) , in which he will try to find the classes, in order to leave only those that are actually used in the project.
As a result, the 'main.css' file is formed, in which only those classes that are used remain.
Next, I just take this file and include it in every page that was rendered during the build phase of the project.
This results in:
index.html - main.css
about.html - main.css
blog.html - main.css
It turns out that main.css file may contain classes that are needed only for one of the pages and are not needed for others.
I would like to implement the following:
Take main.css which turned out
Render a page, for examle about.html
take only those styles that are needed for about.html page from the main.css file
create a new about.css file
link the resulting about.css styles to about.html
I’ve already tried to implement this using an awesome PurgeCSS tool as following:
render page content usind #vue/server-renderer's renderToString() method;
Pass an resulting css and html sources to PurgeCSS
here is an example
But there are too many corner cases around this solution, such as:
Dynamic classes which can be added to the html on the client side
Some components may be missing in rendered html and their content will be added later (for example, v-if directive was used on the component)
A few takeaways:
PurgeCSS is not needed anymore since Tailwind v2 (the latest being v3.x)
as far as I know, you cannot have code-splitting with Tailwind, not that it matters anyway since it will still perform okay with further optmizations
the classes that will be generated, will be only once for the whole app (hence no need to have a bg-red-500 for index or about page, both are referencing the same unique declaration)
if you want to have SSR/SSG, I recommend the usage of Nuxt (in it's v3 if you're using Vue3 or plan to have anything long-term)
dynamic classes are not possible with Tailwind, you can create things like bg-[#ccc] but it goes on the opposite side of what Tailwind is achieving and should be used exceptionally
for Tailwind's content, still the defaults on this page, section Configure your template paths, no need to do anything crazy or complicated
if you want to have some scoped/local style, style to using style scoped, you can still use Tailwind inside of those tags tho
if you want to write vanilla CSS into dedicated CSS files like index, about, blog etc, then Tailwind is probably not the best approach because this is not how it is supposed to work
stay simple, the performance will still be amazing. Only focus on not having too many screens, colors etc that you're not using
you could run some bundle size tests to see if the CSS is taking a huge chunk in terms of size. Will probably not, but if it still is: you can then start making complex configurations
JS will be far harder to reduce and be more impactful regarding the performance (because of how a browser works with it: parsing, executing is indeed blocking the main thread)
I've a problem with a Vue-js application (Vue 2.6.6).
I need to create a new page in this application that must not be affected by vuetify and other styles placed in the head of index.html file. I wanna now if it is possible to inject a view (navigating to it with routing) without applying styles or if it is possible to create another entry point for the app, making it as a multi-page application.
I've found a documentation for doing it, but the structure of files and folders they talk about is different from mine (I did not create the project) and I don't understand what I gotta do to set multiple pages.
https://cli.vuejs.org/config/#pages
I have a "main-priv.js" file inside src, not a "main.js", don't know if it is same.
I'm really bad with configurations and stuff like that, I've probabily taken the wrong life choice with this work, but nevermind, can you help me?
I have to download CSS file and apply style sheet to my app. I downloaded this file at the local folder and referenced it as
style.href = "ms-appdata:///local/css//custom.css";
and appended to head as
document.getElementsByTagName('head')[0].appendChild(style);
after document onready event.
Seems it has no effect (but I can see this element in the dom browser).
So is there any restriction for css source: app package, local folder? May be this impossible to reference downloaded CSS due to MS limitations? Or may be I'm doing something wrong? Any suggestions?
Do keep in mind, however, that you can access the document.styleSheets collection and list, add, or remove CSS rules dynamically from JavaScript. You can access the individual rules themselves through the DOM using statements like document.styleSheets[0].cssRules[0].style.color = "red" or you if you've fetched yourself some custom CSS text (dynamically from your other CSS file online) you can add its styles to one of your active style sheets using something like document.styleSheets[0].cssText = "{my CSS code}". Do be sure that you're manipulating the right style sheet by checking the document.styleSheets[0].href.
I think you're out of luck trying to head down that path.
Note that, for security reasons, you cannot navigate to
HTML you have downloaded to this location and you cannot
run any executable or potentially executable code, such
as script or CSS.
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh781215
Also, this blog post seems possibly helpful: http://palermo4.com/post/How-to-Use-IFrames-in-WinRT-Apps.aspx
Windows Phone 8 app, WebBrowser control. I load a chunk of HTML via NavigateToString (after setting IsScriptEnabled=true). Some time later (long after it's loaded), I'm invoking some JavaScript on the page with InvokeScript.
When I invoke a JavaScript function that's defined inline inside a <script> element, it works as expected. When I invoke one that's defined in an external JS file, it doesn't, and an exception from HRESULT 0x80020006 ("name not found") is thrown.
The external script file is loaded from my app package. In the HTML string, there's a <base> element which contains a file:// URL to the package's folder (retrieved via Package::Current->InstalledLocation), and the <script> element contains just the file name. There are also styles and images in that folder - they load fine.
The HTML has no DOCTYPE and no xmlns - I know those things can sometimes throw JavaScript off.
The external script file is valid - it came straight from Android where it worked on the respective WebView control. The function I'm trying to invoke is empty anyway, to be on the safe side, JavaScript syntax-wise.
This could in theory be some kind of a cross-domain scripting issue. Technically, the script comes from a file:// URL while the page itself comes from no URL at all. Some piece of system code that makes sure no fishy script is called could've gotten in the way.
Found one workaround: load the external script file into a string on startup, once the HTML is loaded (LoadCompleted fires), feed it to the document using JavaScript eval.
Here is example of how to inject some script dynamically
Browser.InvokeScript("eval", new string[] { FileUtils.ReadFileContent("app/www/js/console.js") });
Where ReadFileContent could be defined as following
https://github.com/sgrebnov/IeMobileDebugger/blob/master/Libraries/Support/FileUtils.cs
Full example
https://github.com/sgrebnov/IeMobileDebugger/blob/master/Libraries/IE.Debug.Core/WebPageDebugger.cs
PS. instead of reading script from file you can pass hardcoded string, etc
Are you sure that your script is being loaded? One thing you can do is tuck an alert in there to make sure it is being loaded. My suspicion is that it isn't being loaded.
Any time I have run into this before that has been the case although admittedly I haven't loaded a JS file from Isolated Storage before.
I'm trying to reduce the size of my CSS file. It is from a template which is very CSS & JS heavy. Even with CSSMin the CSS file size is 250kb.
Whilst I use alot of the CSS - I know I dont use it all. So I'm trying to work out which styles can be removed. I'm aware of Dust-Me selector - but that only takes a static look at the website. With HTML5 and CSS3 - websites are now very dynamic, and most of my CSS occurs from dynamic events, or 'responsive' events i.e. Bootstrap.
Question: Is there a tool which 'records' all my CSS use on a website for a perioid of time, so I can go and click/hover/move over each element and interact with my site. Then at the end let me know which styles were & were not used?
CSS Usage is a great extension for firefox. It tells which css are currently used in a page.
Link: https://addons.mozilla.org/en-us/firefox/addon/css-usage/
There are two tools that I think might help you out.
helium is a javascript tool that will discover any unused css rules.
csscss is a source code analyzer that will report any duplication. I'm biased because I wrote csscss precisely because I couldn't find anything that did this. But many people seem to find it useful.
250kb is really such a big figure for just CSS files.
The templates generally have all the CSS required for all the pages in a single file.
I would suggest:
Do not cut your CSS code, they might be needed some point of time.
Instead i would suggest, break your CSS file into number of small files for different page stylings,
such as a different CSS for login page, different CSS file for home page, etc.
Read your own CSS and HTML code vigorously to find out which significant part of CSS code is used in which HTML section.
Update:
You may try Removed Unused CSS - CSS optimizer.
I personally did not use it just hope it works for you.