I have a Shopify store running at https://www.2two.be/..
Especially on mobile, but also sometimes on desktop, there is a small time lag between seeing the page and my css being applied. For a split second you can see pure html.
I have on page css. Anyone has an idea how to solve this?
Thanks!
This is the head code from my theme.liquid file..
<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">
<meta name="theme-color" content="#000000">
<meta name="robots" content="index,follow">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="icon" href="https://cdn.shopify.com/s/files/1/0533/3064/1060/files/twologonew.jpg?v=1619600091" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<!-- Central CSS and JS Files -->
{{ content_for_header }}
{{ 'website.css' | asset_url | stylesheet_tag }}
{{ 'application.js' | asset_url | script_tag }}
<link rel="stylesheet" href="https://use.typekit.net/tuc2hbj.css">
<script>
(function(d) {
var config = {
kitId: 'imy7djc',
scriptTimeout: 3000,
async: false
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
</head>
Solution
Part of my markup (css) was inline. Particularly that of my index and blogpost articles pages. Inline css was loaded only after page html was loaded, which caused some problems. I have moved all my page-specific css to my external css file. This solved the problem..
Related
I'm pretty new to Vue/Vuetify, I've tried using the vuetify v-text-field tag with outline prop.
Why the label is like in the image?
Also the font seems not to be the Vuetify one.
My index.html:
<!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="icon" href="<%= BASE_URL %>favicon.ico">
<title>test</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Wrap your App.vue in <v-app>. Among other things, it wraps the app in the v-application class which a lot of styles use as part of their selector. From the docs:
The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify’s components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be rendered within your application ONCE.
While trying to use Twilio TaskRouter JS SDK on Vue JS, that you have load through CDN.
<!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="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://sdk.twilio.com/js/taskrouter/v1.21/taskrouter.min.js" integrity="sha384-5fq+0qjayReAreRyHy38VpD3Gr9R2OYIzonwIkoGI4M9dhfKW6RWeRnZjfwSrpN8" crossorigin="anonymous"></script>
</body>
</html>
I want to init my worker like this:
export const initWorker = (token) => {
return new Twilio.TaskRouter.Worker(token);
}
but it's giving me this error: 'Twilio' is not defined. but it's actually working and returning the Worker object. is there way to ignore or to say Vue js that I'm expecting Twilio?
Found a fix, you have to tell eslint that you'll have this as global, there are two ways to go:
add this before your variable call:
/* global Twilio */
or edit your eslint config:
'globals': {
'Twilio': 'readable'
},
I'm coding using Vue JS technology and I'm trying to load the favicon but it won't show up. I tried to look for other documentation about it but can't find one. I'm a beginner in this technology hope someone help. Thanks!
Here is my code in HTML:
<!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="icon" href="favicon.ico" />
<title>Hello World</title>
</head>
<body>
<noscript>
<strong>
We're sorry but codesandbox doesn't work properly without
JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
Please check the attached image there is the code as well.
In Vuejs, your favicon.ico should be in either public or assets folder.
To access images from assets folder in vue one would do :src="require('#/assets/images/favicon.ico')"
To access images from public folder in vue one would do :src="./static/images/favicon.ico"
I hope this helps!!
I want to modify the index html during the vue cli build process. (vue.config.js)
Is there any way to do this?
This is my index html looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<%= foo %>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>blabla</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui" />
</head>
<body>
<noscript>
<strong>We're sorry but tera.com-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
and I want vue/webpack to parse the value 1 to foo.
Vue will attach to the DIV with id app. So your {{foo}} will be out of range for Vue to change it.
You should look into Single File Components, that way you'll be able to wrap your whole HTML inside Vue.
I am using Phalcon for the 1st time and I would like to migrate the content of an index.php file from my website into the index.volt file (in app/views).
So I tried to use require 'header.php' that I normally use in my index.php in the index.volt, like so:
index.volt
<!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 -->
<title>Phalcon PHP Framework</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../../public/css/index.css">
</head>
<?php require 'layouts/header.php' ?>
<body onload="document.body.classList.add('loaded')" id="cool">
<div class="container-fluid" style="height: 400px;">
{{ content() }}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA-5rrW4FY43z63mHhwpv7BIZE3bv8Ws_A&libraries=places"></script>
<script type="text/javascript" src="../../public/js/index.js"></script>
</body>
</html>
But I get this error:
Warning: require(layouts/header.php): failed to open stream: No such
file or directory in
C:\xampp\htdocs\care\cache\c__xampp_htdocs_care_app_views_index.volt.php
on line 14
Fatal error: require(): Failed opening required 'layouts/header.php'
(include_path='C:\xampp\php\PEAR') in
C:\xampp\htdocs\care\cache\c__xampp_htdocs_care_app_views_index.volt.php
on line 14
So is there a particular way to include php file with phalcon ?
Thank you