Apart from affecting the bundling in the global.asax is there any way to manually add script and css on razor pages? - asp.net-mvc-4

When mvc3 was created I placed one of these on my _layout.cshtml page...
#Html.RenderCss()
#Html.RenderScript()
Then in my inheriting razor pages I did this...
#Html.RegisterScript("~/Content/scripts/myscript.js")
Is there now an automatic way to do this with the optimisation dlls that. I dont really want to bundle everything in the folder all the time. Id also like it to minify the file too automatically. Not sure if im missing the point of this bundling feature but i just want to add files dynamically and then have them render out all at the same place on the page...
Thanks...

My understanding of the bundling feature, which is still pre-release and somewhat buggy is that it is designed to combine and then minify all of your CSS or JS files you might need in your project. It then uses a versioning mechanism so that clients get the full browser caching experience.
For example if I have 3 CSS files (Reset.css, Global.css, and Site.css) these all get downloaded on the first visit to my site, they are combined and minified so the file size is quite small. The url contains a special hash number/querystring. As long as I don't change the content the cached copy stays on the client until it expires or they clear their temp files. When I make a change the old version is discarded and a new hash is created. When the client visits again their file is now invalid and it redownloads the new file.
I personally have not tried to create specific bundles but with a search I found someone who has created a custom bundle, I think this may be along the lines of what you are trying to accomplish: http://www.codeproject.com/Tips/389545/ASP-NET-MVC4-Bundling-and-Minification

Related

Shopify Interact with product page HTML via app

We plan to create a Shopify app but we face some problems to find in documentations how to interact with pages.
I`m not sure we must ask every time users to add codes and etc, so I need to know if I miss something.
I need to interact with the product pages in Shopify from an app.
I search and read all the web for this and everything is how to start but not the actual examples.
I know for the ScriptTags and how to include them but that is.
If someone can give me a simple example of how for example to hide the Buy button and insert something on instead.
I know how to select it with the default theme with JQuery but what about all other themes?
There are two ways to interact with the front page:
1) Inject some code in the page ( the live one )
2) Use ScriptTag as you mentioned.
The code injection script will modify the product template for example and inject your code if you like to do this automatically or you can instruct the user to do so on their own, but if they are not code savvy there might be issues.
In addition this code will live only on the live theme in most cases. And if the user likes to delete your app at a specific time you must be sure to write the logic in such way that it won't affect the site if your app is no longer present ( since it will be really hard to clean up the files once you add the code automatically )
For this approach you will need to use the Asset API.
You will need to get the content of the file with a GET request to the file and make a put request in order to update it.
The better approach is to use ScriptTag API.
This will allow the use of a script file that will be attached on EVERY theme. This will not modify the theme files in any form or shape.
It seems that this is the approach that you are looking for.
Please have in mind that you will be the one hosting the file from your app so pretty much you can write what ever you like there. So if you like to use jQuery you must be sure that the themes have included jQuery or you will have to add the jQuery core code inside your script.
As for how to write a script tag, there is a pretty straightforward documentation here: https://help.shopify.com/en/api/reference/online-store/scripttag#create-2020-01

Hubspot: stage entire website including primary CSS file during website redesign

I am helping a client redesign their website through Hubspot. Their existing site is within Hubspot and their new website will also be within Hubspot. I am attempting to run the development through Hubspot's Content Staging as per this link: https://knowledge.hubspot.com/website-user-guide/how-to-redesign-and-relaunch-your-site-with-content-staging
The problem is that this appears to be on a per page basis rather than a per site basis. A problem with this is that I am unable to stage files such as the primary CSS file, or other CSS/JS files that I need to make changes to, but that the existing website will need to keep untouched throughout development.
Does anyone have any experience redesigning a Hubspot website who may have some advise for me? What am I missing?
Thanks!
When I'm redeveloping a HubSpot site within a client's portal, i'll do it on a template by template basis.
So for example, if you're making a new home page, just attach any stylesheets and scripts you need in the template file itself - found in the Edit > Edit Head menu. Here you can disable the Primary CSS file, and you can also disable domain specific stylesheets (the ones you add in Content > Content Settings) so that your template is only using the assets you want it to use.
Using this technique, you can work on individual templates, and then stage any pages that are using said templates independently of the rest of the website. Finally when you're ready to make your changes site wide, merely move your assets from the Edit head area within your template to the Content Settings area.

What's the difference between 'pelican ./content' and 'make html'?

I start studying Pelican today because I want to move my blog from wordpress to pelican.
However, after reading the docs, I still don't know the difference between pelican ./content and make html. They both seem to generate a static website. Besides, pelican ./content always returns a UnicodeDecodeError** for me, whilepelican ./content` does not.
What's the difference between them and why?
In the folder where you use $ pelican-quickstart, you will find a file named Makefile.
You will find a line like this html: clean $(OUTPUTDIR)/index.html, and $(OUTPUTDIR)/%.html:
$(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS).
This file show you what pelican have done when you type make ***, and you can config many other things in this file.
pelican ./content runs the generation of the website using defaults and trying to guess the location of your content, output and configuration files.
make html calls pelican, but explicitly gives it the input directory, the output directory, the configuration file and, optionally, some extra options.
Basically, make html (along with make regenerate) are convenience methods that make the job a bit easier for you. In any case, you should run make publish to generate the content that is to be uploaded to your web server, as it loads the publishconf.py files, which define a few extra options (the rss feeds) and allows you to change settings for the "proper" website.

Smart solution for expires headers

We want to set expires headers for used images, css and javascript to improve pagespeed, but we are aware of the cachingproblem when modifying a css or js script.
Is it possible to add a meta or other tag in the file which loads the xhtml which tells the browser to refresh every element, no matter what caching is set on existing images, css or js?
As far as I know, there's no such shortcut.
And even if it was - what would be the point? Sending such a header would defeat the purpose of the future expiration header in the first place.
When setting expiration headers, you need to add some sort of asset versioning to to your elements, such as <link rel="stylesheet" href="css/style.css?v=2">
Changing the path to the asset would achieve the same goal.
Yes this is a hassle. But cache invalidation is a hard problem, there's really no easy way around it.
What you probably want to do is version your static content. so say you have a main.css file then you can version this by renaming it to main_0.css (just an example) and then you would set the cache expire to a year. if you ever need to update main.css just increment the version number and update your references. Then all clients will get the latest version.
There are several solutions that can do this versioning for you, but this is the basic principle..
I have always found theese resources very usefull when having cache related questions:
http://code.google.com/intl/no/speed/page-speed/docs/caching.html
http://code.google.com/intl/no/speed/page-speed/docs/filters.html
Hope this helps.
EDIT
Here is a versioning solution (mod_pagespeed) that does what i explained above:
http://code.google.com/intl/no/speed/page-speed/docs/filter-cache-extend.html
Is it possible to add a meta or other tag in the file which loads the xhtml which tells the browser to refresh every element, no matter what caching is set on existing images, css or js?
Not as far as I'm aware.
We want to set expires headers for used images, css and javascript to improve pagespeed
This is a good thing in my opinion.
but we are aware of the cachingproblem when modifying a css or js script.
If you're making drastic changes to CSS or JS then you ought to be staging the changes anyway. Manage these changes by having the new CSS and JS on a different path and change the references in your HTML when making the change. This allows you to:
instantly roll out / back
make selective rollouts by dynamically generating those references
web logs now provide clear audit trail for following up bug reports
avoid any issues with short term caching of CSS and JS

How do I manage assets in Rails 3.1?

OK, so I'm starting a new project using Rails 3.1 and I'm new to CoffeeScript.
Anyway, I like the idea of having asset files representing controllers but what if I only want the JS to render when the controller is called?
For example, I have a controller called Game. In my games.js.coffee file, I put some code in there and it's called for every page request. Even pages that have nothing to do with Games.
In Rails 3.0.7, what I would do is put a yield(:js) in the application erb file and then call content_for(:js) in my Games#action view. That way, only the js that was needed for that controller was loaded.
Or, am I going about this the wrong way? Is it better to have ALL js code loaded and cached for every page request to improve performance?
Thanks for any suggestions.
Is it better to have ALL js code loaded and cached for every page request to improve performance?
Basically, the Rails team decided that the answer is usually "yes." Most sites work best with just a single (minified) JS file, which you get by default in Rails 3.1. That way, once the user has accessed a single page of your site, all other pages will load quickly, since all the JS has been cached.
If your site has a huge amount of JS (think Facebook), then I'd suggest architecting your site to load rarely-used JS code asynchronously, using a library like RequireJS. Otherwise, I wouldn't bother loading different code under different controllers; it's a lot of extra work for a marginal benefit.
Take a look at this plugin, I think it solves your problem: https://github.com/snitko/specific_assets