I've tested my website with Pingdom and suggested to combine external javascripts, but I don't know how to do this with shopify website.
Adding external script files for Shopify theme is pretty simple.
You just need to upload your script file to the asset folder of your theme file. Or you can create a .js file to paste your code there. After that you just need to include that script file to the theme.liquid file.
Just need to add the following before end of tag in the theme.liquid file.
{{ 'your-script-file-name.js' | asset_url | script_tag }}
Related
I am trying to host static js and css files with NextJS.
What I have done so far is that I have created a react app using create-react-app, created an App component, then run the npm run build command, upon which a few static js and css files were created. I then hosted those files using firebase hosting, such that these static js and css files could be accessed from a plain index.html file. By doing this, I was able to embed react components into a plain .html file using a script tag, a link tag and a div. All i needed was for the link tag to source the static css file hosted by firebase and the script tag to source the static js file hosted by firebase.
What I want to do however, is to take these two static files that were "imported" via the script and link tags and host them in a different project, where I have all my other code. I want to add them to a next.js project and host them with the help of firebase. What I have tried is to add the static files I want to have hosted into the _next folder and then hosted the project.
I cannot find the static files however and I certainly cannot access them via script or link tags. Any ideas on how I should host these static js and css files?
Here is a method utilize a cloud delivery network and just use the html tags and include the src if you have just 1 or 2 static files
Here is the CDN i utilize its open source and free :D
https://cloudinary.com/
<img
alt="close-menu-icon"
src="https://res.cloudinary.com/dxgqvvg0z/image/upload/v1658891864/Personal%20Portfolio%202023/NavBar/cross_aefzpg.svg"/>
and for your case
https://nextjs.org/docs/api-reference/next/image
import Image from 'next/image';
<Image
alt="close-menu-icon"
src="https://res.cloudinary.com/dxgqvvg0z/image/upload/v1658891864/Personal%20Portfolio%202023/NavBar/cross_aefzpg.svg"/
/>
Or
import Image from 'next/image';
//Example for an Image inside a project dir
<Image src="./public" />
<Image src="./src/assets/images"/>
So I'm trying to make a website where I'm able to just drag and drop folders containing HTML, js, and CSS files into a "library" directory and have those files served on my flask app. There's one big problem I haven't been able to get over. The problem is that all of these HTML files link to their respective js files using relative paths. For example:
<script src="js/keyboard_input_manager.js"></script>
and these files are 2 folders deep into my (combined) templates/static folder. I could fix this by doing
<script src="library/2048/js/keyboard_input_manager.js"></script>
but that is very tedious, especially when working with so many files.
TLDR: If I were to run my flask app and load a template, it wouldn't load any js or CSS because of relative paths.
Is there any way to go about this without individually changing each path to relate to the templates folder?
Example of my current filesystem:
-FLASK PROJECT
|->library (templates/static folder)
| |->2048
| |->index.html, index.css, index.js
| |->Game2
| |->index.html, index.css, index.js
|->main.py
What I've Tried:
Using Blueprint but I can't create a whole blueprint for every file?
Messing with paths of template folder and static folder
Flask Noob - Please let me know if I'm leaving out any helpful information :) Thanks
I try to achieve a simple goal: add developped dojo classes in a symfony2 html page with Twig.
I had read a lot of documentation on assetic, and i found two types of method to include assets:
The first one with the asset() twig function. And the second one with the "javascripts" tag.
The assets function is used to include files which are stored in the web/ folder whereas javascripts tag load files which are stored in the resource folder of the current bundle.
My dojo classes files are stored in the resource folder of a bundle, so i tried to load them with a javascripts tag like this:
{% javascripts '#MyBundle/Resources/public/js/MyClass.js' output= 'js/myBundle/MyClass.js' %}
<script type='text/javascript' src='{{ asset_url }}'></script>
{% endjavascripts %}
And it work, my file is successfully included, unfortunately the name is not "MyClass.js" but "MyCmass_MyClass_1.js". I have executed the assetic:dump --env=prod command but my file name still "MyCmass_MyClass_1.js"
What can I do to correct this ?
(I tried to delete the cache, relaunch my server in prod/dev, launch the assetic command with the dev env, and no change).
Visit your site in production mode: yoursite.com/app.php instead of yoursite.com/app_dev.php, or point your webserver to correct file in web folder: web/app.php.
I'm searching for days now for a proper way to serve the static content for my Laravel 4 website in a most optimal speed performance way. What I tend to obtain is serving only the needed JS and CSS, already minified to each requested page.
Example:
page1.html
-> styles.css - for this page it includes bootstrap.css, jquery-ui, selectize.css, google-custom-maps.css
-> scripts.js - for this page it includes boostrap.js, jquery.js, selectize.ks, google-custom-maps.js
page2.html
-> styles.css - for this page it includes only bootstrap.css
-> scripts.js - for this page it includes boostrap.js
Currently I have all my plugins installed with bower and using gulp tasks I managed to minify all the less, css and js scripts at once, the only problem is I don't know If it is possible to serve only the needed files for a custom page.
In my opinion an optimal solution would be that in each view.blade.php file i provide all the needed assests using
{{ asset('front/css/bootstrap.css') }}
{{ asset('front/css/jquery.css') }}
{{ asset('front/css/selectize.css') }}
And at first run this is compiled and cached. Is there any package that can do that?
I have been always using template system where I include all the needed files in one place and other blade.php files extend this template.
I have a website I'm working on in Visual Studio 2013 and I'm mainly using AngularJS 1.2.6. In my index.html I have a src line for each .js file which for 3 page is 6 lines, 1 js file for each controller and 1 js page for each view.
Is there a way I could consolidate all of these lines into 1 .js file and call that .js file in my index.html?
Yes, you can use something like grunt.js to build a custom build script for your .js files. In your case, you may want to use grunt-contrib-concat with grunt-contrib-watch.
If you are not familiar with grunt, feel free to read the tutorial.