I'm using webpack to bundle my project and I want to load the style in my web component template as an external link, so that I can make use of browser caching.
It works well when I'm loading the CSS inline, but I want to avoid doing that, as I feel it is not the best to repeat the large amount of CSS inside the same page.
I have tried the below steps
Keep the CSS name static - works, but not a feasible solution as it doesn't help with the cache bursting
Tried exposing the dynamically generated file name as global constant via webpack. it does not work :(
new webpack.DefinePlugin({PUBLIC_CSS_FILE: JSON.stringify('css/[name].[hash].css'))}
Link to the sample code -> https://github.com/nmakod/web-component
Any suggestions will be greatly helpful
Related
I am working on a website and I am completely done with the html pages but I need to use angular in order to complete the website.
I have only ever used angular while working on ionic apps and I’m aware that the CLI generates the html, ts and css pages but I was wondering if it’s possible to link the html pages I’ve already created to the ts file?
There is no "right" answer to this question, but there are two ways to go about this.
Break down the HTML into components
Honestly, this is the preferred way. Break down your page into reuseable components and compose them like you would do in an ionic app.
Enhance the existing HTML
You could put your HTML into your index.html, or better, your app.component.html, and only extract components where you need to make your html dynamic. This is not really the angular way though and will be difficult to maintain on the long run - but technically, this works.
Very new to the world of HTML and I will try to phrase this question as best as I can.
Currently, I am creating a website. For each page I am creating, I have 2/3 pages - 1 I save the HTML file in, the other I save the file .css/.js.I make sure to keep the name of the file the same and in turn, it edits my html page as I wish it to do. So I therefore have a folder with 2/3 files made up of HTML, CSS and Javascript. Is this the correct way, or should I have everything saved together in a .html file?
Reasons for separation:
Separate JS - Reuse it on other pages
Separate CSS - Able to give the site a new fresh look easily along with reuse
Separate HTML - Focus on content not look.
Also should be mentioned CSS/JS could be cached if used on multiple pages on your site
First and main rule :
A web developer should be able to change the markup in an HTML
template without worrying about accidentally breaking a CSS rule or
some JavaScript functionality.
So Yes, your html, css, js files should be separate.
I am new to web development and building a C# web MVC application in Visual Studios. I am using Jquery,AngularJS,Twitter Bootsrap CSS and a bunch of other 3rd party JavaScripts.
I have included reference to all these files on every page which looks very nasty. I am using a master layout page for all the other pages so I thought that referencing everything that is required would resolve my problem but that didnt work out.
How can I store all the required scripts and css in one place and have all web pages get everything from there?
Make sure you have a layout that is used very every page, and make sure that layout is calling a header. Then throw your script files in there.
Although I would suggest against loading ALL your javascript files for ALL of the pages, you might take a performance hit once you scale upward. You can put checks in your header to filter the ones you need.
I am new to Extjs, I have read that in Extjs 4 it make use of dynamic loading of classes and I didn't quite get the concept. What is actually meant by dynamic loading in extjs, does it mean that it will load javascript files on demand. Eg if I have 10 different components (In a card layout lets say) but only one has to be displayed on initial load, the javascript file of rest of 9 components will not be loaded until those components has to be displayed?
I tried Pandora application (Extjs 4 version) but I found that its loading all the JavaScript files to browser upfront on initial load (Even loaded javascript files for components which are not been displayed).
If this is the case then what purpose dynamic loading solve?
You got it right. If you read the guides carefully though it says that Dynamic Loading is not meant to be used in production. Meaning that loading one file at a time is not optimal, however it does help tremendously with debugging your code.
The other thing it does is eliminates the need to list out all of your files one by one in the html of the page you are going to run the app. You dont have to create script tags for each class you right - and believe me with MVC app you right a lot of classes, each one in it's own file.
So what to do?
The recommended approach is to use the Sencha SDK build tool to concatenate and minify all of your classes, turn off Loader and just include that one file.
Makes sense?
I have a panel in extjs-3.x. On a certain event(say click of a button), I am trying to unload the extjs-3.x js and css files. And replace them with extjs-4.x js and css files in my DOM. After this I need to render some components in extjs-4.x.
Basically, I want both extjs-3(panel in my case) and extjs-4 components to coexist together but I cannot use the sandbox due to some reasons.
The problem I am facing is that, even after unloading the extjs-3.x files, the firebug window shows the Ext version to be 3.x. And obviously I am not able to create extjs-4 components.
Am I missing out something here. Any pointers or any other way to achieve this would be of great aid. Thanks.
PS: I am using the snippet from here for unloading my js and css files.
http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml
Check this example http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/sandbox/sandbox.html in this Ext3 and 4 both files library files are using. This may helpful.
Apparently, unsetting the 'Ext' variable after unloading the extjs-3 files. And then loading the extjs-4 files using a callback function for creating extjs-4 components did the trick.
Thanks Lolo for the suggestion.