html document opens without CSS (Tailwind-CSS) - javascript

I recently started working with Tailwind-CSS as my framework, and I finished my first practice project using it. However, when I try to open the .html file (index.html for example) in my browser, it loads the HTML file without loading the CSS. Why does that happen?
How can I deliver a project in Tailwind-CSS to a client if the CSS does not load?
Here is the index.html file:
<!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 href="/dist/output.css" rel="stylesheet" type=".text/css"/>
<title>Manage Landing Page</title>
</head>
<body>
It may be worth noting that I have 3 projects done with Tailwind-CSS using VS Code. None of my three projects load any CSS when opened in browser, despite two being done by following tutorials on Tailwind-CSS on YT. They only load CSS when I open them through the Live Server extension for VS Code.

Related

How to make SEO dynamic with react JS hook

My question is this:
I have a website made in react JS.
The site is currently in production and I want to develop dynamic SEO.
Each page generates an SEO.
Currently I have this code there:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"
/>
<meta name="theme-color" content="#000000" />
<title>MyWebSite</title>
<meta name="description" lang="fr" content="MyWebsite" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I wish to have in the root div all my HTML code to promote my SEO. Moreover, thanks to react-helmet, I wish to promote a dynamic SEO.
Finally, my site is finished in terms of development.
I do not wish to redevelop everything.
I use: Redux-saga, React-Helmet, React Hook, Styled-Components.
What do you advise me?
Regards.

Facebook post embed renders but isn't showing up

I'm trying to get the Facebook Post embed working on my own site using their JS SDK but it doesn't seem to show up.
Some inline styles on the embedded iframe and the span it encapsulates it, controls the display of the widget.
I found some hacks but they aren't perfect. I used facebook's JS playground on the same code and it works.
There aren't any stylesheet interfering with this file and no extension as well as I checked in firefox and the result was the same.
edit: posting the code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12" async></script>
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
</body>
</html>
Kindly see the photo attachment.
Thanks
P.S. Facebook code is directly copied from their docs, HERE
I assume you tried this by just opening the HTML file in your browser. You have to open it using a local or remote server. If i start it with a local server with the exact same code, it works perfectly fine.
For example: https://www.npmjs.com/package/http-server

Hide base path before # in url in Angular

I'm building a wordpress theme with angular as described here.
This is my index.html that is loaded by wordpress' index.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<base href="/wp-content/themes/TITLE/dist/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The url result is:
http://HOST/wp-content/themes/TITLE/dist/#/ , but should be http://HOST/#/
I need to set the tag in my index.html to enable angular to find its resources. Is there a way to hide the /wp-content/themes/TITLE/dist part before the /#/ from angulars HashLocationStrategy?
I would prefer to hide it from the angular settings, but if a wordpress configuration in the admin view is necessary this would be fine, too.

WebStorm built-in web server gets 404 for every css and js file included in index.html

Here is my index.html for posterity's sake:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<base href="/" />
<title>Cart</title>
<link href="content/external/bootstrap.css" rel="stylesheet" />
<link href="content/external/bootstrap-theme.css" rel="stylesheet" />
<link href="content/external/font-awesome.css" rel="stylesheet" />
<link href="content/external/angular-toastr.css" rel="stylesheet" />
</head>
<body ng-app>
{{3+4}}
drfg
<script src="scripts/external/jquery-1.9.1.js"></script>
<script src="scripts/external/bootstrap.js"></script>
<script src="scripts/external/angular.js"></script>
<script src="scripts/external/angular-ui-router.js"></script>
<script src="scripts/external/angular-resource.js"></script>
<script src="scripts/external/angular-mocks.js"></script>
<script src="scripts/external/angular-toastr.tpls.js"></script>
<script src="scripts/external/angular-animate.js"></script>
</body>
</html>
Whenever I hit run in webstorm to open in chrome, I get a 404 for every single javascript and css file. However, if I scope to the project directory and run node's http-server, my site loads just fine. I can't seem to find anything in settings related to this. Any ideas?
the problem is caused by tag in index.html:
<base href="/"/>
that tells the browser to resolve all URLs in the page relative to the web server root (localhost:63342 when using built-in webserver). Obviously no resources can be found there, as the built-in webserver serves files from http://localhost:63342/<project root>
So, you need to comment out '<base href="/"/>' to get your code working. Or, modify your hosts file to make webserver serve files from http://<some name>:63342 - see http://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559

Loading stylesheets and JavaScript taking too long

What should I do to decrease load time?
<head>
<title>NCI SwitchGears</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menu/styles.css">
<script src="bootstrap-3.3.4-dist/js/jquery-latest.min.js" type="text/javascript"></script>
<script src="menu/script.js"></script>
</head>
You're loading jQuery twice. Once locally, and once remotely.
Consider using Require.JS to load your JS on demand
Combine Style sheets to one request. Make sure you are using modular styles and again, load on demand.
JS move to footer where appropriate
Google provides a nice tool to help you speed up the loading times of your pages
https://developers.google.com/speed/pagespeed/insights/
Here's another nice online tool.
As a general rule:
load 1 js files and 1 CSS file - compressed
have your js at the bottom of the page, not in header
load social tools/scripts via ajax, after page has load
optimize the images/graphics you use on your template
set proper expiration headers and caching options
More specific instructions for your pages you can find in the above tools.

Categories