Im using livereload and using Espresso as my editor, ive linked livereload to my html file, however when i edit my less file it wont load of the functions or styles, but the livereload itself works. When i also try to edit anything on a less file it wont be editable like a css file. everything is in plain text, so i know something is not right in that end.
<link rel="stylesheet/less" href="styles.less">
<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js"></script>
Everytime i put stylesheet/less the file just works with html, so its with no style.
You are linking to http://lesscss.googlecode.com/files/less-1.1.3.min.js
But perhaps you should check to which recourses you are linking before doing so ;)
It's a page that doesn't exist (and if it would exist, it would be very outdated.)
Instead; link to
http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js and get more info here http://lesscss.org
Have you tried changing stylesheet/less to stylesheet/css?
<link rel="stylesheet/css" href="styles.less">
<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js"></script>
Related
I just need some clarification about linking a css file. I am looking at a html widget that has been created by someone and they seem to have a html with a query string to get the required css..
<link href="https://cdnres.willyweather.com.au/widget/cssView.1-12-8.html?id=36723" rel="stylesheet">
And this works if you click on this link
http://cdnres.willyweather.com.au/widget/loadView.html?id=36723
But when i downloaded these files onto my own web server and tried it, it didn't work
http://www.mccdepot.com.au/Test1/loadView.html
but when I update the link styles to a css and updated the file name it worked.
http://www.mccdepot.com.au/Test2/loadView.html
For the query string html do I need to enable something on the server side?
Thanks in advance
i copied that link css add it to your code its coming same as given link i have added the screen shot check it.
try this->
<link rel="stylesheet" type="text/css" href="path of the css file"/>
This is how normally we include a css file in our html page. If still getting error, please check the file path properly.
your linked css file is minified, check it once. When you minify some
css files actually it replaces some variables. Try again to download
again and link it. And js files also not included properly, when it
check it in viewsource file was not found there
Good morning, good evening, good night,
A noob question here, i'm using Thymeleaf as a template engine, and linking Bootstrap CSS sheet doesn't seem to work, here is my strucuture
resources
-static
--css
---bootstrap.min.css
-templates
--view.html
and line of code
< link rel="stylsheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="#{../css/bootstrap.min.css}"/>
Edited: I do get the plaintext .css file when i open the link in the href,
And the .table-striped attribute i'm using in my table class does exist in the CSS file.
<table class="table table-striped">
Thank you for your feedback
Here's a fun way to check if your paths are right! I'll use Chrome as my example, but maybe your browser of choice does it slightly differently.
Open the developer tools
Find your link
Right click on the URL in the href and click "Open in new tab"
You'll either see a plaintext .css file, or you'll get a 404. If it's a 404, your path is wrong!
Don't forget to add scripts to the head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Got it finally .. it was the URLs, this is what worked for me,
/static is handled by default i guess so removed it from the url and its "twerkin".
Structure
-static
--css
---bootstrap.min.css
-templates
--view.html
CSS Link
th:href="#{/css/bootstrap.min.css}
What is the quickest/smartest way to include a JS file into code ?
I tried to drag and drop a JS file to source code, but it opens a new tab with the JS file.
(Same question for CSS link including)
This functionality is available since version 2016.2, it's just not working in your case as you work in a PHP file.
Open a HTML file and drag'n'drop a JS or CSS file to see it working.
PhpStorm will add in case of a JS file automatically:
<script src="main.js"></script>
In case of a CSS file:
<link rel="stylesheet" href="main.css">
For the case of an empty document it will just be inserted in the current line.
If you have an <html> tag it will be included within and before a <body> tag and if available even directly in the <head> tag - no matter where you leave your mouse button.
To your actual case: In order to make it work you could theoretically handle *.php files like *.html files. You can do that in Settings -> Editor -> File Types. But of course that's not useful as you will loose all the PHP features like auto-completion for the language etc. I guess you would need to write a feature request so that they maybe implement this for PHP files too.
BTW: drag'n'drop of images to a wished position in a <body> tag of a html document does also work.
EDIT: Here the link to the JetBrains blog where they explain this feature:
https://blog.jetbrains.com/webstorm/2016/07/webstorm-2016-2-drag-files-into-html-and-quotes-style/
Thanks to LazyOne for sharing!
I'm new to web front-end programming and am teaching myself AngularJS.
I have created a very simple webapp that just lets users login and logout. I am running it locally on my Mac OSX.
Below is my index.html file. Although it works, I'm not sure if I'm doing it right. I need to know how and where to import the angular.js files and the bootstrap.js files.
My questions are as follows. I haven't been able to figure this stuff out by googling. I need someone to explain this stuff to me please.
I'm currently importing the angular.js file from https://ajax.googleapis.com. Is that correct? Or should I download it and store that file in the same directory as index.html? Why? When should I use the non-minified file? What is the benefit of using non-minified?
I'm currently not importing any bootstrap file(s). Which file(s) should I import? Should I import it/them as a URL or as a file from the same directory as index.html
For both Bootstrap and AngularJS, please tell me which line numbers I should put the script src lines in my HTML.
Should I check the Angular and Bootstrap files into my Github repository?
index.html:
<html ng-app="app">
<head>
</head>
<body ng-controller="Main as main">
<input type="text" ng-model="main.username" placeholder="username">
<br>
<input type="password" ng-model="main.password" placeholder="password">
<br>
<br>
<button ng-click="main.login()" ng-hide="main.isAuthed()">Login</button>
<button ng-click="main.logout()" ng-show="main.isAuthed()">Logout</button>
<br/> {{main.message}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Normally, you add CSS stylesheets and JS scripts in the <head>(between lines 2 and 3) area of your html. You can either link files with URLs like the example below or just download the whole Angular.js or Bootstrap.css file (both of them aren't that big) and put them in the same folder as your index.html file.
URL/CDN example:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
Local folder example:
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="angular.min.js"></script>
</head>
Minified files (angular.js vs angular.min.js) will both run the same way. The only difference is the .min. file has the code all squished without any spaces, tabs, and new lines. This makes it load faster for computers, but if you're going to customize your angular or bootstrap in the future, you will find the squished format impossible to read.
You don't need to be too concerned with doing everything 'the perfect way' if you're just starting out. I used to include the angular.js and bootstrap.css files along with my index.html in my project when I pushed it to Github. After a while though you might find it cleaner to leave them out and just use the URL-format.
Some people will say you should put all your JS files and links at the bottom of your webpage (just before the </body> tag), but again this is just another optimization towards 'perfect' that you shouldn't worry too much about.
This is advise for beginners, if you are an expert this may not apply to you:
I would advice you to have the files locally while you are developing, then your website will work w/o internet, and it will respond faster if you disable cashing (which you should when you are developing)!
You should disable cashing in your browser when you are developing, otherwise when you change your css and js files it will take minus before the browser detects the files have changed
the minimized versions are smaller but unreadable, I would use the none minimized versions while developing so I can understand error messages, and then switch to the minimized version either a) never or b) when speed becomes important
see 1
as a beginner you should but it in the head tag ie between line 2 and 3. sometimes people put it after the body tag to first load the webpage and then the scripts, this is fine also, but as a beginner I think it is advantageous for your webpage to fully work as soon as you can see it.
good question, I would do it out of laziness, alternative you could have a script called get_dependencies.sh where you have lines as "wget stuff"
The usual convention is to put the CSS files in link tags inside your <head> tag (2-3), so that they are rendered before the html and the styles will apply when the content is loaded, so that the user will begin to see the page building up even before it is fully loaded, instead of seeing some not styled elements beforehand.
more on that:What's the difference if I put css file inside <head> or <body>?
now, the scripts should be loaded at the end of the body(where they are now), for the following reasons:
if they will be rendered before most the html, they will delay the page from rendering until the whole script is loaded, and that's a UX hit.
most scripts are supposed to run anyway when the document is fully loaded, sometimes developers will use something like DOMContentLoaded to ensure that, but sometimes they don't and then a script will run without the corresponding html loaded.
more on that :Where should I put <script> tags in HTML markup?
you asked about minification:
minification is supposed to make your files downloaded faster since they are compressed and have less weight. it is ideal for production, but bad for development since you can't debug them well. that's why you should enable minification only on production. (and because you use angular, also use $compileProvider.debugInfoEnabled(false), look for it.)
as for using files in your project (download them) or from cdn (https://ajax.googleapis.com):
a good convention for development is to use files on your project, so that you can develop without caring about your internet connection, and the distance the content need to go between their servers and your machine.
however, on production, a good convention would be using the cdn in your page,
since many other web pages may include the libraries you want to fetch(angular and bootstrap are quite common) so the file has a good chance to be already stored in your browser cache, and not need to be loaded again.
and yet, you should define a fallback in your page such that if the cdn's are some why unavailable, the user will get the files from your project server.
here's an example
for the last question: you can put them in some "Libraryscripts" directory, so that's it's clear they are just dependancies
I host a website, and I need to hide a script src. For example,
script src="main.js"
would need to be
script src="main.js"
but it would be unclickable. I realize this isn't the most well phrased question, but how can I keep the user from seeing the JavaScript?
You can't present JavaScript to the browser and then hide it from the user; it's just not possible. The best you can do is obfuscate it and make it difficult for the casual observer to decipher, however it won't stop a determined user from de-obfuscating it.
I found a node.js npm plugin that can hide any src="*" & href + content
https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js. You can watch youtube guides for installing and using node.js
If you create enviroment 1 time you can load cool stuff with npm
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.