I just started a new Typo3 4.6 site and I found this weird line right off the bat in the
<link type="text/css" rel="stylesheet" href="data:text/css,">
Where does it come from? And how can I get rid of it?
This is the link to the css stylesheet which creates the styles for the pages in your Typo3 CMS. You probably need this line and might want to keep it.
It must have been added from some extension. I used the introductory package. Ive done a new site with the blank package and its not there anymore. Thanks!
Related
So I've got flutter web up and running (pretty amazing work tbh) and I went about bench marking the Button Press Count app that it gives by default on PageSpeed Insights. The results were impressive but there's one suggestion that would seem to increase the score. Is there any way to include <link rel='preload'> for the assets they mentioned?
And would there be anyway to do code splitting as well the way webpack does it for main.dart.js
See the website here: https://flutterdemoapp.netlify.app
You can try to add this code to your index.html file which is under the web folder,
<html>
<head>
<link rel='preload'>
<script defer type="application/javascript" src="main.dart.js"></script>
</head>
</html>
If you already tried that or this doesn't work so you can use this library. It makes this automatically.
Please help me I have created new custom theme in magento 2 but I am facing problem to add new css file into theme.
For your information I have deploy code using composer to pub folder. Css files are copying there but not including those to frontend.
Suggest you start here.
Add your CSS as part of a layout as discussed in this topic.
If you have other questions, please let us know.
Recently In magento2 I have included css file in catalog_product_view.xml as
<head>
<css src="mage/gallery/styles-view.css"/>
</head>
First and foremost I apologize if this question is not programmer per-se but I've been trying to get some details as to why I'm having this particular problem.
When you view this page on your phone http://www.wilsontireandservice.com/mobile.aspx I would like it when you bookmark a site to your menu it shows up as an icon. On droid phones this was fairly easy to do by just adding this link in the markup:
<link rel="icon" type="image/png" href="/Portals/71/Icon.png" />
Which is placed inside the skin.ascx file.
However, when trying to do this on an iPhone, I can't seem to get the thing to work. the Icon file is 57x57. I've tried changing the name (Icon.png, apple_touch_icon.png, apple-touch-icon.png), I tried moving the image changing the path to the root folder instead. I placed it inside an HTML module set to repeat on all pages in the header (under settings) with no luck.
We are currently running DNN 5 if it matters, what I'm wondering is there some kind of restriction on doing this within DNN or my version too out of date (we're moving to DNN 6 over the summer), or maybe this has nothing to do with DNN at all.
Thank you for any help you can provide.
This shouldn't be DNN specific. Follow this. You can try it on a blank html page to make sure DNN isn't affecting it.
I've been wanting to get into learning build-automation within web development having only real experience with ANT in building Android applications.
I want to build websites that utilize LESS but I can't see how to achieve this as It sounds like a it's good practice to use the embedded JS approach in development and compile LESS into CSS when deploying but I don't understand a good approach that would match up the LESS links and JS include for jess.js within a build script. e.g.
Replacing:
... html ...
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
... html ...
With:
<link rel="stylesheet/css" type="text/css" href="styles.min.css" />
I hope what I've mentioned makes sense.
Useful
HTML5 Boilerplate Build Script
Phing
If anyone could give me any pointers/advise on this matter I would greatly appreciate it.
I'm on the core team for Less.js. Don't use the browser version of LESS if you can avoid it (for instance, you might be enabling users to edit "themes" in real-time in the browser... but unless you're doing something like that, avoid the browser version).
Try using this build tool for compiling Less to CSS: https://github.com/assemble/assemble-styles. The recommended practice is to pre-compile LESS to CSS, and assemble-styles makes it easy to create "bundles" or multiple versions of your LESS/CSS files, and you can add a watch task so that as you are working on the LESS files they automatically compile to CSS.
With LESS being compiled to CSS as part of the development process, you can then just focus your energy on how you want to handle your CSS in production (without having to even think about LESS). Make sense? If you have any questions I'm happy to help.
If you are familiar with npm, then this is simple to use. Just do npm install assemble-styles
Then follow the instructions on the README.
No build script will be able to merge a css file with a js file as in your example. They are two completely different languages serving two completely different needs, and they need to be kept apart from each other. As Less is, in the end, just CSS it makes no sense to merge a Less file into a js file.
Moreover best practices suggest to put css links in the head of your document (as Steve Souders suggests here) and javascript code at the end of the document, just before the closing body tag (again Steve Souders, here).
If you follow these rules (which is strongly recommended for performance) you'll end up placing css links far away from your js scripts in the html, like so:
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.css" />
</head>
<body>
....here goes the content of the page
<script type="text/css" src="scripts.js"></script>
</body>
</html>
Now, let's imagine a very basic workflow.
You have your bare-bones HTML structure and you need to adjust its layout.
You add a css reset (reset.css) and start styling your document in a Less file called style.less. If you add
<link rel="stylesheet/less" type="text/css" href="styles.less" />
in the head of your document you won't be able to see any change as browsers do NOT understand .less files. These files need to be pre-processed and "translated" in css, so browsers can parse them and apply the given styles to the HTML page. So you'll run your (.less) file into a preprocessor which in turn will spit out a css file. So your <head> will be:
<head>
<link type="text/css" href="css/reset.css" />
<link type="text/css" href="css/styles.css" />
</head>
Notice that the styles.less file will NOT be referenced in the HTML, but only its CSS counterpart styles.css. When you'll be satisfied with your layout it'll be time to move on.
Here's now a good place for a build script to really shine.
A build script will (among other things) concatenate external files of the same kind.
In this case it will be able to merge these two files in a single one. Your new <head> will be:
<head>
<link type="text/css" href="css/main.css" />
</head>
The same thing will happen with js files at the bottom. From:
<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>
to:
<script src="scripts.js" type="text/javascript"></script>
As I said this is a very basic, rough example of a workflow using Less (or Sass/Scss, or Stylus) and a build script. I would say that Paul Irish gave the simplest and clearest representation of a build script in action in this video, which I highly recommend, especially because it features the HTML5 Boilerplate, as referenced in your question.
Hope this helped you better understanding, let me know if you have any doubts.
I am trying to figure out if there is a way to use LESS or SCSS without having to save the document or refresh the browser. At the moment I use CSS Edit which is great for live previews but I cant find a way to get the live previewing to work with LESS or SCSS. My ideal situation would be to get a truely live (or as close to) setup working with Textmate and my broswer. I have looked at a few options, WebPutty is great but it's in Beta and web based so I'd love a solution that could fit into my existing workflow.
Many thanks
This might be what you're looking for: livereload.com
I only just found this myself while Googling for the same problem, Haa!
It's currently only for 64-bit Macs. Its also in beta..
Windows version under dev.
Can't seem to find a link to the v1 that is mentioned on the site?
If you're using static files you can use this code taken from http://f.cl.ly/items/0y2G351r3O3T3j1b401u/Live-LESS-previewing-in-Espresso.html
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->
However, if you are using localhost, I've not figured out how to get this to work yet.
Check out EDGE. http://getedge.io - it let's you live edit Sass and LESS files from Sublime Text or Textmate. No need to save the file - it updates as you type. You can sign up for the private beta right now.
There is no complete solution for what you are looking.
Chrome dev tools (with sass source maps enabled) is your best bet but I don't think you can do mixins
http://livestyle.emmet.io/ is another option you might want to try
Brackets works well with live changes but applies only for chrome
Here's what I do and it serves the purpose and works like a charm in mac/pc and linux
Have one terminal open that does sass --watch
Have another terminal/app that lets you run live-reload
Your sass will compile and as soon as your stylesheet changes all your browsers get refreshed
But you can't do style injection with this, meaning the page WILL refresh (if you want to theme dialogs, you will have to open them again) But there are other tools available for style injection as well
Hope this helps!
live.js is your solution :)
It doesn't not only work with html, js, css but also less.
You have to trick it with filetype of css:
<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css">
Tried the bookmark version on rails local server. Works a breeze!
CssRefresh
My co-worker and I whipped up http://less2css.org the other day. Allows you to choose the version and see your less converted in realtime.
Hope it helps someone.
I think there is no such add-on right now, but I'm also a fan of Live CSS Editor (if that's what you meant by CSS Edit).
I think it would be useful to have something similar with SASS or LESS support, so I made a quick prototype for such Chrome add-on (analogue to Live CSS Editor). It includes syntax highlighting and LESS support with use of client-side LESS library. It's not user-friendly yet so not a candidate to the Chrome Store, but here is it's Google Code Project where it can be downloaded and loaded into Chrome as unpacked extension. I'll try to improve it over time, but anyone else can try too ;)
Screenshots and a bit more are in this blog post.