I'm currently trying to a) add some non-standard fonts and b) the font-awsome icon library to my project. I've donwloaded the the newest version of FA 4.7.0 on their website.
My project structure is like this:
web
----resources
---- css
---- default.css
---- fonts
---- Raleway-Regular.ttf
---- Roboto-Regular.ttf
---- Questrial-Regular.ttf
---- Poppins-Regular.ttf
---- font-awesome-4.7.0
---- css
---- font-awesome.css
---- font-awesome.min.css
---- fonts
---- fontawesome-webfont.eot
---- fontawesome-webfont.woff
---- fontawesome-webfont.woff2
---- fontawesome-webfont.svg
---- fontawesome-webfont.ttf
---- js
---- default.js
Both fontawesome.css and my default.css file define fonts via #font-face.
Knowing that JSF cannot handle the fonts as a resource without the use of EL, I changed the code of the stylesheet:
font-awesome.css
#font-face {
font-family: 'FontAwesome';
src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&v=4.7.0");
src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&#iefix&v=4.7.0") format('embedded-opentype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff2']}&v=4.7.0") format('woff2'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff']}&v=4.7.0") format('woff'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.ttf']}&v=4.7.0") format('truetype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.svg']}&v=4.7.0#fontawesomeregular") format('svg');
font-weight: normal;
font-style: normal;
}
My css file is referencing the fonts as below:
#font-face {
font-family: Railway;
src: url("#{resource['fonts:Raleway-Regular.ttf']}") format("truetype");
}
#font-face {
font-family: Questrial;
src: url("#{resource['fonts/Questrial-Regular.ttf']}") format("truetype");
}
#font-face {
font-family: Poppins;
src: url("#{resource['fonts/Poppins-Regular.ttf']}") format("truetype");
}
#font-face {
font-family: "Roboto";
src: url("#{resource['fonts:Roboto-Regular.ttf']}") format("truetype");
}
The fact that I'm using both the ":" and "/" seperator is to test which one's working... apparently none :)
I also added all necessarry MIME type mappings in my web.xml.
In the home.xhtml file, I use these resources like that:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<h:outputStylesheet library="font-awesome-4.7.0" name="css/font-awesome.css" />
<h:outputStylesheet name="css/default.css" />
<h:outputScript name="js/default.js" />
</h:head>
Now after all these configurations, it seems as if the resource handler is not able to load the fonts (my costum and the FA ones) as well as the JavaScript file. The interesting part is that all other styles of the css file are imported correctly. Also it's strange that it worked the exact same way when I booted the server for the first time today - after adding a favicon to the page, it didn't work anymore.
I'm getting notified of the following errors in my browser:
Uncaught TypeError: Cannot read property 'children' of null(…)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Questrial-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Raleway-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff2?v=4.7.0 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Poppins-Regular.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Roboto-Regular.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff?v=4.7.0 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.ttf?v=4.7.0 Failed to load resource: the server responded with a status of 404 (Not Found)
I'd be grateful for any help
Server: Glassfish 4.1.1
Disappointing as this may sound, it was just my browser caching all resources.
After using Ctrl + F5, the browser reloaded the page and all according stylesheets
Generally it turned out to be beneficial to turn off the browser cache while doing web development :-).
Related
Up to this point in my studies, I have been able to serve files to my dynamic web pages using Node.js and Express as follows.
app.use(express.static('./public'));
and then linking to files in the public folder.
The Wavesurfer.js documentation stated that a file has to be loaded from a url
Load an audio file from a URL:
wavesurfer.load('example/media/demo.wav');
I'm not to sure I understand what this mean. or how to link a file to wavesurfer.js using node.js
Edit:
I found this from the link Cross origin requests are only supported for HTTP.” error when loading a local file
Node.js
Alternatively, if you demand a more responsive setup and already use nodejs...
Install http-server by typing npm install -g http-server
Change into your working directory, where your some.html lives
Start your http server by issuing http-server -c-1
This spins up a Node.js httpd which serves the files in your directory as static files accessible from http://localhost:8080
Can't I achieve the same using express?
My code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="waveform"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<script>
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
wavesurfer.load('/public/recordings/o.mp3');
</script>
</body>
</html>
The errors I'm getting:
The AudioContext was not allowed to start. It must be resumed (or
created) after a user gesture on the page.
Access to XMLHttpRequest at 'file:///C:/public/recordings/o.mp3' from
origin 'null' has been blocked by CORS policy: Cross origin requests
are only supported for protocol schemes: http, data, chrome,
chrome-extension, https.
Ok so I think your problem is because you open the .html page in your browser locally (as a file://). Instead, try to load it from your Express server, something like http://localhost:port/some file.html
I am an error getting that looks like this in my Google chrome(56.0.2924.87) console while trying to use bootstrap glyphicons
Even though i have my .woff files and .ttf files located in my "public/css/fonts" folder.
Addtional Information
I am using Wampserver with apache(2.4.23)
I installed bootstrap.css with "npm install bootstrap"
This is what my font-face looks like
#font-face {
font-family: 'Glyphicons Halflings';
font-style: italic;
src: url('/public/css/fonts/glyphicons-halflings-regular.eot');
src: url('/public/css/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/public/css/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/public/css/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/public/css/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/public/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I try to call the glyphicons like this:
<i class="glyphicon glyphicon-chevron-left"></i>
Does anyone have any idea where this problem might be located?
Double check #font-face location path and also the mime type.
I've been trying to use express-ejs-layouts module.
My when I try second route, browser finds my JS and CSS resource file under my second EJS files -that was written by me into second route function.
What should I do?
My Layout appears properly with my first route process like the following.
my first route;
app.get('/', function(req, res) {
res.render('home/index');
});
my layout.ejs file;
<!DOCTYPE html>
<html lang="tr">
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<% include navbar %>
<%- body %>
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
So far everything is good. My resource files (css and js) linked and I can see my home/index.ejs properly. And then I try my second route like the following;
my second route;
app.get('/user/:id', function(req, res) {
res.render('user/index');
});
My browser console gives the below errors;
Failed to load resource: the server responded with a status of 404
(Not Found) http://localhost:1337/user/bootstrap/css/bootstrap.css
Failed to load resource: the server responded with a status of 404
(Not Found) http://localhost:1337/user/css/styles.css
Failed to load resource: the server responded with a status of 404
(Not Found) http://localhost:1337/user/js/jquery.js
Failed to load resource: the server responded with a status of 404
(Not Found) http://localhost:1337/user/bootstrap/js/bootstrap.js
Express needs a 'public' named folder to check resources. So I've put my resources files into a ".../public/" folder, rewrote src link and I got succeed.
I've defined a new static path;
app.use(express.static(__dirname + '/public'));
An then I changed my new layout.ejs file like the below;
<!DOCTYPE html>
<html lang="tr">
<head>
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<% include navbar %>
<%- body %>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
</body>
</html>
I'm using meteor and I ran npm install request to get access to that library. Everything seems to install correctly but when I run the meteor server, I then get the following error. Is there any word on why this is or how to solve it? Thanks.
While building the application:
node_modules/request/node_modules/node-uuid/test/test.html:1: bad formatting in HTML template
node_modules/request/node_modules/form-data/node_modules/combined-stream/node_modules/delayed-stream/test/run.js:1:15: Unexpected token ILLEGAL
node_modules/request/node_modules/form-data/node_modules/combined-stream/test/run.js:1:15: Unexpected token ILLEGAL
For reference:
test.html
<html>
<head>
<style>
div {
font-family: monospace;
font-size: 8pt;
}
div.log {color: #444;}
div.warn {color: #550;}
div.error {color: #800; font-weight: bold;}
</style>
<script src="../uuid.js"></script>
</head>
<body>
<script src="./test.js"></script>
</body>
</html>
run.js (same)
#!/usr/bin/env node
var far = require('far').create();
far.add(__dirname);
far.include(/test-.*\.js$/);
far.execute();
Meteor constructs the entire DOM itself so it will typically reject any script tags included in the html (but it will include scripts in the head, thanks Andrew). It also only supports handlebars style templating (right now).
<html>
<head>
<title>Something</title>
</head>
<body>
{{>yourHandlebarsTemplate}}
</body>
</html>
My advice would be to have your js and css located as files inside the client folder under your projects root.
As for NPM request, you will not be able to:
install it normally like you do in most node projects, so node_module is out/npm install require is out
access the functions in it without a Npm.require
At this point you have two options: adding the package NPM from Atmosphere(unofficial package repository) and including request. Or try placing the lib into /packages/ and then using Npm.require('request').
Alternatively you can just use Meteor's built in HTTP package (meteor add http) which functions similar to request.
Remove from your template as it seems Meteor wants to create this tag for you when building the template. This should take care of the "bad formatting in HTML template" error in test.html.
I started today with LESS. It looks awesome to work with and I will need it on my internship soon.
My less code:
#color: #4D926F;
body {
background-color: #color;
}
Not anything special.
My html:
<!Doctype HTML>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/style.less")" type="stylesheet" rel="stylesheet/less" />
<script src="#Url.Content("~/Scripts/less-1.4.1.min.js")" type="text/javascript"></script>
</head>
<body>
#RenderBody()
</body>
</html>
The Less script file is downloaded from http://lesscss.org/
My file structure:
The result:
FileError: 'http://localhost:58123/Content/style.less' wasn't found (404)
in style.less
Index
When I install dotless via Package Manager everything works perfect.
My question is what do I need to runn it without Dotles? I dont have problems installing Dotless or using it. I just want to know whats the missing link why the LESS gives that error. Why do I get a 404 error when the file is there?
Dotless compiles the .less to .css. So you would need to add a reference to the resulting .css that Dotless compiles. Also you would want to remove this line from your code.
<link href="#Url.Content("~/Content/style.less")" type="stylesheet" rel="stylesheet/less" />