Why bootstrap has java script , jquery and ajax file as dependency when we import cdn links - bootstrap-modal

Bootstrap is ready-made styles with responsive controlls then why we need to import jquery and ajax files

Bootstrap supports default stylesheets not to jquery-min. When you download bootstrap package from its website, you can see it includes only css folder, js folder and font folder. In it's js folder you can see it doesn't include jquery-min.js. So. we need to include it manually.

Related

How to setup WebStorm to use PostCSS/Tailwind

I have the latest WebStorm 2020.3. It supports Tailwind CSS, I installed the PostCSS plugin and used NPM to install Tailwind CSS and all sorts of plugins.
What I have no clue about is how to setup WebStorm to actually use PostCSS with a file watcher to actually run and do anything useful. I asked JetBrains and they had no actual useful information.
All I need is some simple example of how to get WebStorm to use Tailwind.
Initial project setup doesn't depend on an IDE. For the quick start, documentation on the Tailwind CSS site should be helpful.
Tailwind CSS plugin in WebStorm 2020.3 adds convenient features like Tailwind CSS classes completion and CSS preview. It doesn't require any configuration, it will just work as soon as you have node_modules/tailwindcss/tailwind.css and node_modules/.bin/tailwind local files.
If you use tailwndcss version 2.x then make sure you also have dependencies on postcss and autoprefixer in your package.json, as written in https://tailwindcss.com/docs/upgrading-to-v2#install-tailwind-css-v2-0-and-post-css-8
Basic setup doesn't require to configure any File Watcher.
I was searching for a setting I had forgot and stumbled on this post.
If you want PHPStorm to understand PostCSS in your CSS file's all you need to do is go to Preferences -> Languages & Frameworks -> Stylesheets -> Dialects. There you will set your Project CSS Dialect to PostCSS .

I have deployed my Django App on Microsoft Azure and Static files are not displaying, only html

I've deployed a Django app on Azure and run it, everything was working fine css, images, js. After i run Gunicorn to automate the site then Only skeleton HTML displayed, css, images and js disappeared.
this is the Erro:
/home/honest/venv/lib/python3.6/site-packages/django/core/handlers/base.py:58: FutureWarning: TemplateForDeviceMiddleware is deprecated. Please remove it from your middleware settings.
mw_instance = mw_class()
/home/honest/venv/lib/python3.6/site-packages/django/core/handlers/base.py:58: FutureWarning: TemplateForHostMiddleware is deprecated. Please upgrade to the template loader.
Not Found: /static/images/sample/slider/img7.png/
May i know if i need to configure WhiteNoise for gunicorn on Azure?
Do i Need to edit my HTML templates to point to static folder in Azure?
I tried some of the solutions i saw here like setting DEBURG to True set path for static files in Settings.py but it couldn't help.
I will be glad receiving a step by step solution to this.
Thanks for the assistence.

how do i add vendor javascript to ember-cli 2.2

This might be a silly question stemming from unfamiliarity. I'm rewriting a project that was previously using Ember 1.7 in Ember 2.3, using Ember-cli v2.2
Now, in the old project, there were a couple of libraries being included manually on the index.html file, put in the scripts directory and then compiled. For example, let's say the JS asset I want to include is offline.js.
I understand that Ember-cli uses Bower and can be used to install bower components, like Bootstrap or moment.js and such. What about custom JS? I've put the file in offline.js, included it in index.html but that doesn't do anything.
I don't think I understand how to add/import vendor assets at all; how do add, say offline.js to the project and have it available throughout the application?
You should add the offline.js file to the vendor folder at the root of the project, and then in your ember-cli-build.js file add the following line:
app.import('vendor/offline.js');
This adds the offline.js file to the vendor.js which is built by default. You can see more documentation at the Ember CLI website.

including foundation with sass in a django project

I have a django project under a virtualenv.
I included the django-zurb-foundation 5.3.0 package to use foundation but this version only include static css files.
It's my first time using django and normally i use foundation with sass using bower and grunt.
How can i do to use the sass version of foundation?
What should be the files tree?
UPDATE
i installed django compressor and i got it work on local, it works perfectly, but i cannot get it to work on my production server:
on local env i have a CACHE folder with the css static files in it and the html page call correctly the file from there.
On the prod site instead, it doesnt create the CACHE folder and it doesnt render the path to it and it keeps the path to the scss file.
What am i doing wrong?
It seems like compressor isnt working on the prod server, i'm afraid i'm doing something wrong with django settings.py since i'm new to it.
any help?
I have heard of a few people using django-bower with foundation, personally I have not played with it but its worth looking into if you have not already.
I really can't find a reason to use a third party Django application to do that, using front-end frameworks like foundation or Bootstrap is as simple as compiling the less or sass source files to a css file and include it in your html (<link rel="stylesheet"...).
With Django you can use Bower and Grunt without any problem because they're independent and totally configurable to fill your needs. What I do with bower is to create a .bowerrc file at the same level of the bower.json file with the directory setting pointing to the main static folder, something like:
{
"directory": "my_django_app/static/bower_components"
}
Talking about the django-compressor app all that I can say is I don't recommend to use it in a production environment, it has some performance problems and personally I prefer the static files to be responsibility of the front-end dev instead of the back-end dev. For example you will need to have source maps for your javascript for debugging purposes and I don't remember if it's possible with this plugin.
Instead of using the django-compressor you can use a grunt plugin to to it, I've done one that may help you to do so: https://www.npmjs.org/package/grunt-django-compressor

HTTP Error 404 with jetty server

I have the following folder structure in my project.
> src/
>>main/
>>>webapp/
>>>>WEB_INF/
>>>>>pages/
>>>>>>js/
All my script files are located in js folder and my jsp page is located in pages folder.In order to include abc.js script in my jsp page I wrote the following line
<script type="text/javascript" src="/WEB-INF/pages/js/abc.js"></script>
But I got following error
"NetworkError: 404 Not Found - http://localhost:8080/WEB-INF/pages/js/abc.js"
I am using jetty server to deploy my project. For running it I am using
mvn jetty:run
If I am putting my script file directly in webapp folder and including script in following way then it is working perfectly fine.
<script type="text/javascript" src="abc.js"></script>
But I want to maintain folder structure of my project by putting all scripts in js folder.
Can somebody please tell me why jetty server is taking files located only in webapp folder?
I am using windows7
Your src is incorrect. Java Servlet specifications states explicitly that no document under WEB-INF directory will be available to the webserver. You need to place your JavaScript file outside of it.
Usually, you place jsp files inside of it, because they're not accessed directly. They're accessed through a Servlet or any other web development framework in Java.
If you want to maintain your folder structure, just put your js folder on the web archive root:
webapp/
js
WEB-INF/
classes/
lib/
pages/
web-xml
WEB-INF directory was designed exactly to prevent that users could access files they should not get access to, such as classes, lib directories, or web.xml deployment descriptor.