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.
Related
i'm trying to add <script> ... </script> to HTML element in Neos CMS, could you please tell me how to do it, because HTML element in Neos CMS doesn't accept js. Is there any alternative how to do it please. Thanks for any recommendations.
There is a package available with wich the editor can add source code like that. But be careful with this feature as with great power (of the editor) comes great responsibility!
Depending on what your use case is, it may be more secure to provide a custom NodeType for the editor which then adds this JS code via fusion.
One thing you may want to think about is loading things from external sources might be problematic for GDPR compliance.
None of the bind examples in the documentation work - https://fancyapps.com/docs/ui/fancybox/api
The standard constructor examples work great, but anything that requires binding does not work. There is no error, but the gallery lightbox doesn't work - clicking an image just opens the image as a link. Here is the exact example code with markup:
<div id="gallery">
<a href="https://lipsum.app/id/1/800x600">
<img src="https://lipsum.app/id/1/300x225" />
</a>
<a href="https://lipsum.app/id/2/800x600">
<img src="https://lipsum.app/id/2/300x225" />
</a>
</div>
<script>
Fancybox.bind("#gallery a", {
on : {
ready : (fancybox) => {
console.log(`fancybox #${fancybox.id} is ready!`);
}
}
});
</script>
That console log never fires.
I'm importing FancyBox like this:
import { Fancybox } from '#fancyapps/ui';
I've tried searching around, but very little info on FancyBox 4 other than official docs and it's frustrating as they don't work. I've tried some of the examples in showcase also, and the same deal. If it's binding, it won't work and no errors are shown. Anyone have any insight into this?
Thanks,
Tom
It works perfectly fine. Since you did not provide a live demo (or at least a full HTML code), then it just not possible to help you.
It is so frustrating to read comments like this, no demo, no useful info, nothing. Maybe you did not include JS file, I do not know ... I would love to help you and to improve documentation, but, sorry, your comment is not helpful at all.
Fancybox is designed to be as easy to use as possible, all you have to do is:
Include two files - CSS and JS file (to get Fancybox object).
Add data-fancybox attribute to your links (or to call Fancybox.bind("YOUR_SELECTOR");)
Thats it! It can not be any simpler.
Sorry, it should have been a much clearer question. I didn't include a demo because it's a big wordpress site in production. It was giving me no useful feedback or errors or anything like that. I build websites day in and day out, so assumed it wasn't just me making some incredibly stupid mistake like a typo or something. I genuinely spent a lot of time on this, it wasn't me being lazy and just posting on stack overflow straight away...
It was me being stupid though.
In the process of making a demo to show you, I found the problem and (as you already know!) it's my mistake. I was able to make fancybox work by instantiating it straight away in my js, but binding (and therefore galleries etc) was not working.
The reason was the javascript was included in the head of the html document before the markup instead of at the bottom of the html document before the closing body. There was nothing for the js to bind to when it was executed.
I wouldn't normally include javascript in the head either but it's a wordpress project and because of some plugin, it's required there. Fancybox 3 worked with js in the head, but I suspect it might be jquery being more forgiving than native js with it's binding to DOM elements?
So, yes, entirely my fault. I was following the steps of the installation and startup guide almost exactly, but that inclusion of the js file in a slightly unusual (or bad practice at least) place was what caused all the issues.
I need a plugin to replicate the functionality I've been enjoying using magicSuggest.
I have found many autocomplete plugins for Vue but none that come bundled with tags.
Try any of the examples on this page to see how your selection is saved as a tag in the input.
http://nicolasbize.com/magicsuggest/examples.html
I am after a plugin that will work with Vue js 2.0
I found this gem, looks like a keeper. http://monterail.github.io/vue-multiselect/
You can also check dropdown provided by semantic-ui here, This can be easily integrated with VueJS.
Also discovered this one, http://sagalbot.github.io/vue-select/
Looks very similar to vue-multiselect.
Try this vue-multiselect. Its supporting many options like tagging, search, multiple select, single select, asynchronous search, vuex and more.
https://github.com/shentao/vue-multiselect
npm install vue-multiselect --save
<script src="https://unpkg.com/vue-multiselect#2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.1.0/dist/vue-multiselect.min.css">
Is there a SWFObject type setup for embedding Unity content and having a fallback HTML content (with a link to install the plugin)?
The JS included with Unity only allows for a button they've created.
Here's the official guide
Basically, for non-IE browsers, you check that the plugin's installed using javascript, and for IE, you use VisualBasic scripting. Their code isn't terribly pretty (all those document.write calls - ugh!) but it's robust.
You can always take their code, clean it up and wrap it in a nicer package. I know I did (but for a client, so I can't give you the code - sorry)
If you use Woopra, you probably know that several months ago they released a web based analysis tool. I was surprised by how smooth and well designed it was. Taking a look at the source code, it seemed to be coded using GWT. However, its Mac look and feel reminds me of Sproutcore. I'm not aware of a look and feel like it for GWT.
I'm really interested on their widget kit, so I started to look for newcomers in this area, without success.
It's hard for me to believe that they custom coded it completely, as it uses many different widgets, charts and effects and it could be, by itself, a huge undertaking.
Do you know if they are using a custom widget kit / framework and, if so, its name?
Thanks in advance,
Juan
Hey guys, I'm not using any library beside jQuery. The Woopra web application has been built from scratch from the ground up.
I hope this answers your question.
Elie.
woopra.com
If you view the page source through your browser and find a reference to one of the follow files:
a long md5sum for the name and ends in .cache.js or .cache.html
some name that ends with nocache.js or nocache.html
If it has either, you know the site is written using GWT. For example, when looking at the Wave source it references:
<script type="text/javascript" src="/wave/static/1880D9859FBFB1895A16B35680031427.cache.js">
While the web version of Evernote pulls in:
<script type="text/javascript" src='/com.evernote.ENWeb/com.evernote.ENWeb.nocache.js?97654'></script>
Of course, it's possible to rename these files so just because they're missing, doesn't mean it's not written in GWT. Nevertheless, without these files it's a pretty good bet that they're not using GWT.