I expect there just to be a single load, but it looks like it's loading DM Sans three times when it's only loading Catamaran once. I'm loading the fonts using next.js in the _document.tsx file.
Here's the code
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Catamaran:wght#100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
Here's the font logs
I'd expect to only see one load for DM+Sans, but see three?
Related
For my React-website, I need to document all the packages I am using.
For this, I want to use webpack-license-plugin (https://www.npmjs.com/package/webpack-license-plugin)
However, I recently switched to using "create-react-app" which means there is no config-file I can directly modify.
I tried to follow this answer (create react app Configuration file after build app) which tells me to create a config-file, use the plugin there and load it in my index.html-file.
I would have expected when running the build somehow the inside config-file by me specified output-file would appear inside the build-folder, BUT there is nothing.
I did not find any other guidance, other than this question (Customize webpack plugins using create-react-app). However, I would like to avoid making use of new tools, if possible.
Generally, I just wonder about the simplest way how to achieve what I set out to do. Thanks for any help!
Here is the content of the extra config-file I added to my public folder (beside the index.html):
const LicensePlugin = require("webpack-license-plugin")
module.exports = {
plugins: [
// there might be other plugins here
new LicensePlugin({ outputFilename: "thirdPartyNotice.json" })
]
}
And here is the content of my index.html:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cardo&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="%PUBLIC_URL%/config.js" type="text/javascript"></script>
<div id="root"></div>
</body>
</html>```
here's the link to my GH page
https://filipdimko11.github.io/crypto-tracker/
When running it locally, the project renders everything. After hosting it on GH pages, though, the website doesn't render anything (no errors in the console either).
I tried making an empty commit, saw it as another solution on StackOverflow, but that didn't fix it. Using ReactJS, thanks.
The problem is because in your index.html file you are referencing your assets like /static/js/main.2227a53b.js which makes sense when you are running locally.
But when you deploy to github pages, the directory structure is different. To make it work properly you'd need the routes to be prefixed with crypto-tracker/ For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<meta name="description" content="Your best crypto tracker!" />
<link rel="manifest" href="/manifest.json" />
<title>Crypto Tracker</title>
<script defer="defer" src="crypto-tracker/static/js/main.2227a53b.js"></script>
<link href="crypto-tracker/static/css/main.f53fb378.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Depending on what build tool you are using, this is probably configurable.
This is my index.html file. I have used angularjs , bower components etc. I have used angular ui view to store header, content, footer files as templates in another folder. When I try to open "index.html" is mozilla(using it for a long time) the website opens perfectly(with all the css and scripts loaded perfectly) , but in some other browser it just shows a blank screen. I have checked in Networks developers option , there is no error in mozilla but lots of 304 and 404 errors in other browsers.Are there some issues on loading the styles and scripts on other browsers or some cached data issues?
<!DOCTYPE html>
<html lang="en" ng-app="medicalApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>temp_App</title>
<!-- links to various stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-plain.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-default.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
</head>
<body>
<!-- I have used angular ui-view and store header, content, footer files as templates-->
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/ng-dialog/js/ngDialog.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
</body>
</html>
It is impossible to say since we can't directly interrogate your pages/scripts. Typically a white screen in an Angularjs application is indicative of a script error (unable to load a dependency or template usually). The Console should give you the answer. Firefox is pretty forgiving, which is why I prefer to use Chrome. In the failing browser look for angular errors for dependency loading.
It might be the order you are loading scripts. Other than that I can't see anything on the surface that would a problem.
I have a small problem there are few similar questions on SA already but I can't figure out how to fix this. I am using react-router-redux but for this example I don't think there are any differences to using react-router
I have a simple setup:
<Router history={browserHistory}>
<Route path="/">
<IndexRoute component={ItemList}/>
<Route path='item/:uuid' component={Item}/>
<Route>
<Router>
I am using:
webpack
webpack-dev-server
html-webpack-plugin
When i visit localhost:8080 the IndexRoute is rendered. I can then press one of the items which has onClick={() => this.props.dispatch(routeActions.push('/item/' + item.uuid))} set. The history at this stage works fine I can go back and select another item and so on. But...
When I am on a item page for example localhost:8080/item/1234 and when I hit refresh I get:
404 not found - localhost:8080/item/bundle.js
This as well happens when I make some changes to the item page and hot reloading is rerendering it.
After going through few questions I can confirm that I have historyApiFallback: true and when I start the server it is reporting that 404s will fallback to /index.html
Update:
So when I hit refresh after being on localhost:8080/item/1234 chrome inspect say that was 200 response from server which looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Damage Increased</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
And then it is 404 on http://localhost:8080/item/bundle.js
It looks like all the dev server stuff is working fine and the server indeed returns the index file but then the <script src="bundle.js"></script> is looking for a bundle.js file inside of the /item sub.
Instead of:
<script src="bundle.js"></script>
Do:
<script src="/bundle.js"></script>
Because when you access directly /item/1234, currently, you have a relative link to bundle.js so the browser will call /item/bundle.js.
If you're using html-webpack-plugin, you can add some rewrite rules to your dev-server (which you will have to add to your production one) - see more here
my problem was solved by adding historyApiFallback: true in webpack.config devServer section and <base href="/"> in the head
<!DOCTYPE html>
<html>
<head>
<base href="/">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link
rel="stylesheet"
type="text/css"
href="fonts/font-awesome/css/font-awesome.css"
/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" >
<div id="root"></div>
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
In this project, I used external resources such as bootstrap and some styles that were added in the head tag, as well as javascript files in the index.html file, but instead of this way it is better to add them in package.json and Imported in components.
I've downloaded the script for the latest version of lightbox2. I've added both .js files as well as the .css file to my head tag. I've used the new attributes in my code for the images, and I've made sure all the files are in the folder that they're supposed to be in. Still, I cannot get the functionality of when you click the thumbnail, the larger image pops out.
Please help. Here is my head:
<head>
<meta charset="UTF-8" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Amatic+SC' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" HREF="index.css" />
<link href="css/lighbox.css" rel="stylesheet" />
<title>
Welcome! | DaveAyotte.com
</title>
</head>
And here is the section where I'm showing the pictures:
<div class="photobox">
<img src="img/img1thumb.jpg" />
<img src="img/img2thumb.jpg" />
<img src="img/img3thumb.jpg" />
<img src="img/img4thumb.jpg" />
<img src="img/img5thumb.jpg" />
</div>
edit: I actually just noticed that instead of creating a popout as it's supposed to, it's opening the picture outside of the main div of my website (used to hold everything in a uniform size), creating a scroll-bar that needs to be scrolled down a long way to view the clicked image.
Please check the lightbox.css file to see if its linked properly or not and add type attribute as well in the link tag of lightbox.css
You need to add rel attribute under anchor tag like this
<a href="color lef.jpg" data-type="album" rel="lightbox" >
<img src="color lef.jpg" width="100" height="100" />
</a>
<link href="css/lighbox.css" rel="stylesheet" />
should be
<link href="css/lightbox.css" rel="stylesheet" />
There is a spelling error in 'light'. Your original code is missing the 't'.