This may be a very basic question. I am new to LESS and would like to understand
what the dumpLineNumbers property of the less JavaScript object does. I've added
it to the html file but cannot see any difference in the browser output or in
the browser debugging tools. How does it work?
Here are the source files I'm using:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Code</title>
<meta name="description" content="Example Code" />
<meta name="author" content="John Doe" />
<link rel="stylesheet/less" type="text/css" href="less/styles.less" />
<script type="text/javascript">less = { env: 'development', dumpLineNumbers: 'mediaQuery' };</script>
<script type="text/javascript" src="less-1.6.0.js"></script>
</head>
<body>
<h1>Less is Cool!</h1>
<p>Hello World!</p>
</body>
</html>
less/styles.css:
.mixin {
color: green;
}
p { .mixin; }
Even if I introduce an error in my CSS, for instance as follows where I removed a closing brace:
h1 {color:red; }
.mixin { color: green; // closing brace omitted on purpose to cause an error
p { .mixin; }
I still don't see any difference in the output when I remove the dumpLineNumbers property.
Thanks.
Firstly you will have to write mediaquery lowercase, than it will work in Less till at least version 1.7.5.
In the compiled CSS you will find lines such as:
#media -sass-debug-info{filename{font-family:file:///home/t.less}line{font-family:\0000315}
In your index.html you should use:
<script type="text/javascript">
less = {
env: "development",
dumpLineNumbers: 'mediaquery'
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js" type="text/javascript"></script>
Alternatively you append #!dumpLineNumbers:mediaquery to the URL.
Notice that you can do the same when compiling server side by running the following command:
lessc --line-numbers=mediaquery index.less
Secondly you should find a tool which can read these #media -sass-debug-info lines. For firefox there was fireless, which seems to be a dead end now. Fireless required a patched version of LESS which is not available / supported any more.
Also see:
Less/Sass debugging in Chrome Dev Tools/Firebug
Related
why is document.getElementById() not working in VS Code?? I keep getting this error: "Uncaught ReferenceError ReferenceError: document is not defined". I'm new to VS Code but I'm assuming the reason It's not working is that I need to install some extension to make it work. The same code is working on Replit but not VS code. I installed JS(ES6) Snippets, Open-in browser, Live Preview and Live Server. It's very simple 2-line code just to experiment but it's not working. It's driving me crazy!
let head = document.getElementById('change')
head.innerText = 'hello'
I bet that you are not running this in an index.html file in the browser, so this is not VS Code problem, you are probably running this in a node console or something, there is no html or document in what you are trying to test and that is why you are getting this error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h1>HELLO</h1>
<hr />
<h2 id="change"></h2>
<script>
let head = document.getElementById('change')
head.innerText = "why isn't this working?";
</script>
</body>
</html>
Definitely has nothing to do with VS Code.
Make sure your html file is referencing your javascript file.
<!DOCTYPE html>
<html>
<body>
<h1>This is my HTML file</h1>
<script src="script.js"></script>
</body>
</html>
The script element should be in your html with the name of your js file
<script src="script.js"></script>
This not the vscode issue please check you are running the right file
I have reached the final point with one error remaining to construct a sample dashboard with charts using dc.js. I have encountered an error.
Unexpected token < on line 1 for loadash.js.
loadash.js is valid but for somehow Chrome shows it in my root app directory next to index.html and has the exact copy of the source content as my index.html. In other words, my loadash, has html content in it. I am running this app inside AngularJS.
What is going on here, and how do I fix this?
Script Tags at bottom of index.html above closing body tag
<script src="/app/js/crossfilter/crossfilter.js"></script>
<script src="/app/js/dc.js-3.1.9/dc.js"></script>
<script src="/app/js/reductio/reductio.js"></script>
<script src="/app/js/requirejs/require.js"></script>
<script src="/app/js/universe/src/universe.js"></script>
<script src="/app/js/universe/src/lodash.js"></script>
<script src="/app/app.js"></script>
index.html Snippet
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
...
Actual correct loadash.js file
Non actual loadash.js file showing up in Chrome (contents are the html of my home page and AngularJS url is localhost/loadash#!/main, why is this loadash in my url???)
Replacing './lodash' with './app/js/universe/src/loadash' so that I use absolute paths instead of "relative" path since AngularJS thinks ./loadash is /loadash#! for some reason I don't know why.
Top of universe.js file
'use strict'
var module;
var _ = require(['./app/js/universe/src/lodash'], function(module){
});
and commenting out <script src="/app/js/universe/src/lodash.js"></script>
like so
at the bottom of index.html
<script src="/app/js/crossfilter/crossfilter.js"></script>
<script src="/app/js/dc.js-3.1.9/dc.js"></script>
<script src="/app/js/reductio/reductio.js"></script>
<!--script src="/app/js/universe/src/lodash.js"></script-->
<script src="/app/js/requirejs/require.js"></script>
<script src="/app/js/universe/src/universe.js"></script>
<script src="/app/app.js"></script>
Eliminated all errors present!
I'm fixing an old Android app, more exactly a Xibo player: you create a kind of presentation on the website and schedule it on your displays (in that case some Android devices).
I didn't got very good the mechanics yet (since some part of code are obfuscated), so I can't say who creates the files, but there are some html, javascript and raw files (pdf, jpeg, etc) and I know the app uses soap service.
Now the app is working pretty good, but if there is a pdf in the presentation (OK with jpg, bit I didn't try with other files) I see a string on the top of the view (WebView) and a string at the bottom, respectively "GetResourceRespond{resource=“ and "} ;".
I noticed those string at in the html file itself, but if I remove them, I can't see the file (I got a white view instead).
Those string are outside the <. html> tag, first one before <. doctype> and the second one after <. /html>, but I believe this is wrong.
Does somebody have an idea?
This is one html file:
GetResourceResponse{resource=<!doctype html>
<html lang="en">
<head>
<title>Xibo Open Source Digital Signage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Copyright 2006-2017 Spring Signage Ltd. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
<style type="text/css">
body {
margin: 0;
overflow: hidden;
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
}
h1, h2, h3, h4, p {
margin-top: 0;
}
#iframe {
border: 0;
}
.cycle-slide p, p.cycle-slide {
margin-bottom:0;
}
</style>
<link href="fonts.css" rel="stylesheet" media="screen" />
</head>
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->
<!--[if IE 9 ]><body class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->
<div id="content"></div>
</body>
<script type="text/javascript">var options = {"type":"text","fx":"none","duration":15,"durationIsPerItem":false,"numItems":1,"takeItemsFrom":"start","itemsPerPage":0,"speed":0,"originalWidth":"1920.0000","originalHeight":"1080.0000","previewWidth":0,"previewHeight":0,"scaleOverride":0,"marqueeInlineSelector":".item, .item p"}; var items = ["<p style=\"text-align: center;\"><span style=\"font-size:168px;\"><strong><span style=\"font-family:arial,helvetica,sans-serif;\"><span style=\"color:#FFFFFF;\">Welcome to Xibo<\/span><\/span><\/strong><\/span><\/p>\n\n<p style=\"text-align: center;\"><span style=\"font-size:80px;\"><span style=\"font-family:arial,helvetica,sans-serif;\"><span style=\"color:#FFFFFF;\">Open Source Digital Signage<\/span><\/span><\/span><\/p>\n\n<p style=\"text-align: center;\"><span style=\"font-size:48px;\"><span style=\"color:#D3D3D3;\"><span style=\"font-family:arial,helvetica,sans-serif;\">This is the default layout - please feel free to change it whenever you like.<\/span><\/span><\/span><\/p>\n"];</script> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="xibo-layout-scaler.js"></script> <script type="text/javascript" src="xibo-text-render.js"></script> <script type="text/javascript" src="xibo-image-render.js"></script> <script type="text/javascript">$(document).ready(function() { $("#content").xiboTextRender(options, items); $("body").xiboLayoutScaler(options); $("#content").find("img").xiboImageRender(options); }); </script> </html> ; }
Just a guess, "GetResourceRespond{resource=“ and "} ;" could result from JavaScript, which is allowed inside and after the <html></html>. If you don't see more of the JavaScript, it's likely obfuscated with the rest.
I have HTML file with external css file, like to inline the styles in external style sheet into one inline <style> tag at the top of the head . Thanks in advance for any help
Note: Do not want to use style attribute applied to each element, want to have one style tag at the top
Before Converting
p {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Template</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<p>Welcome to Template!!</p>
</body>
</html>
After Converting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Template</title>
<!-- START: Replaced inline tag from external css file mystyle.css as above-->
<style>
.p {
color: red
}
</style>
<!-- END: Replaced inline tag from external css file mystyle.css as above-->
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<p>Welcome to Template!!</p>
</body>
</html>
You can start by make your html file accessible from web browser
if you use php, you can make it accessible by run following command php -S 127.0.0.1:4000 , make sure you can access it by open localhost:4000 on your web browser, there are another way how to accessible from another languages, but it's out of the scope of this question
the second step is install inliner npm package npm install -g inliner
and execute inliner http://localhost:4000 > output.html
open output.html to see the result
execute inliner -i http://localhost:4000 > output.html if you don't want to convert the image to be base64 encoded
So I have an index.html file with the following text:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Wade Game Engine</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="wade_1.5.js"></script>
<script src="wade.ifx_1.0.js"></script>
<script src="wade.particles_1.0.1.js"></script>
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
</head>
<body>
<div id="container" style="border:0; width:800px; height:600px;">
<div id="wade_main_div" width="800" height="600" tabindex="1"></div>
</div>
<div id="chromeFix"></div>
<div id="chromeFix2"></div>
</body>
</html>
When I try to run this using a browser (tried with google chrome and internet explorer) it just pops a window saying:
unable to load main app script app.js
So I assume the problem is here:
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
But I can't understand what's the problem...
Could anyone help me with this? It's driving me insane!
It could be that there is an error in app.js (so it isn't a valid .js file), or it could be that your browser is not allowing you to load local scripts asynchronously.
With Chrome, you could add --allow-file-access-from-files as a command line argument. Note that you only need to do this if you're using local files - if the files are hosted on a web server, it should just work without all this.
Alternatively, you can include app.js with the other script tags that you have in your HTML file, and just call wade.init() without passing 'app.js' to it
Do you have an app.js file? I haven't used this game engine but looking at its documentation, it appears that the init() method takes a mandatory parameter appScript, containing the filename of the app. In your case this would be app.js.
Make sure that you have the file app.js included in the same directory as your index.html file.
Hope this helps.