Hey,
I'm using a Firefox addon, Zemanta, that loads scrips/css after the whole html is loaded. I guess this makes it difficult for vogue to catch files being changed?

Is it even possible to do that? I set up the directory that is being served directly to the one that contains the css files I'm altering.

Let me know if you need more info.

When injecting the vogue client via the bookmarklet, the scriptBase is currently resolved by the last script element. That only works when its its statically added to the website.
So the bookmarklet should contain the scriptBase and provide it to the vogue-client.

Lots of us are using alternate styling languages like Stylus or SASS. It'd be neat to support watching these sorts of files and compiling them automatically when they are changed.

There are a few reasons:

• Vogue is currently useless without an internet connection due to google api dependency
• The usage of jQuery inside vogue is pretty trivial and could be removed with only a few lines of code
• The included jQuery version may conflict with other jQuery versions
• The included jQuery can conflict with Mootools or other libraries
• It's a lot of extra dependency/bloat basically for no reason

Hi there,

I just tried out vogue and it just does not work. So I looked at the code of the current project I'm working on saw that there is one main CSS file which includes all neccessary css files by @import-statement. But when I change something in one of these imported css files, no change were made by vogue.

If I change the main css file, everything works fine.

Try it out: create a main css file and import another css by placing @import "another.css" into the main css. Then change something in another.css and you will see, no change in the browser.

Martin

Hi,
First of all, I want to thank you, because the idea is quite nice(A month ago, I want to develop it by myself with ruby :)),

My OS is ArchLinux, and I've tried vogue in different browsers: Firefox 11, Chrome 17, Konqueror, Opera without any success :(,
here is the output of my terminal:

info - handshake authorized 1417461220118167102
debug - setting request GET /socket.io/1/jsonp-polling/1417461220118167102?t=1335201347348&i=1
debug - setting poll timeout
debug - client authorized for
debug - clearing poll timeout
debug - jsonppolling writing io.j1;
debug - set close timeout for client 1417461220118167102
debug - setting request GET /socket.io/1/jsonp-polling/1417461220118167102?t=1335201347356&i=1
debug - setting poll timeout
debug - discarding transport
debug - cleared close timeout for client 1417461220118167102
debug - clearing poll timeout
debug - jsonppolling writing io.j1;
debug - set close timeout for client 1417461220118167102
debug - jsonppolling closed due to exceeded duration
debug - setting request GET /socket.io/1/jsonp-polling/1417461220118167102?t=1335201367363&i=1
debug - setting poll timeout
debug - discarding transport
debug - cleared close timeout for client 1417461220118167102
debug - clearing poll timeout
info - transport end
debug - set close timeout for client 1417461220118167102
debug - cleared close timeout for client 1417461220118167102
debug - discarding transport

I'm seeing requests like

GET /style.css?_vogue_nocache=1468957215136?_vogue_nocache=1468957238055?_vogue_nocache=1468957243715 0.637 ms - 27758
GET /style.css?_vogue_nocache=1468957215136?_vogue_nocache=1468957238055?_vogue_nocache=1468957243715?_vogue_nocache=1468957245865 0.495 ms - 27760
GET /style.css?_vogue_nocache=1468957215136?_vogue_nocache=1468957238055?_vogue_nocache=1468957243715?_vogue_nocache=1468957245865?_vogue_nocache=1468957296296 0.453 ms - 27762
GET /style.css?_vogue_nocache=1468957215136?_vogue_nocache=1468957238055?_vogue_nocache=1468957243715?_vogue_nocache=1468957245865?_vogue_nocache=1468957296296?_vogue_nocache=1468957313872 0.519 ms - 27763

Clearly, it should just have one instance of _vogue_nocache. Instead of getting replaced, it gets appended.

I've got an express server running, vogue running, and the vogue script injected. Seems like a normal setup to me.

Is this a bug or am I doing something wrong?

The deprecation of the "sys" module is now an error in Node 0.8.0 and version 0.7.x of socket.io uses "sys". Upgrading to the newest version of socket.io would fix this.

Hi,

Please add a check in your vogue-client.js, because some scripts can be without src-attribute

Vogue doesn't seem to work correctly when there is a base tag in the page. My setup:

• Windows 7 64-bit
  
• Apache web root at c:\xampp\htdocs
  
• Running Vogue via Cygwin, with command line "vogue /cygdrive/c/xampp/htdocs/"
  
• Web site is at http://localhost/dan.cx/
  
• HTML contains <base href="http://localhost/dan.cx/" />
  
  
  
  Vogue picks up the changes correctly, but when it tries to reload the CSS files, it's making a request to http://localhost/dan.cx/dan.cx/.....

I am getting errors like this:
"NetworkError: 404 NOT FOUND - http://127.0.0.1:8000/products/undefinedsocket.io/socket.io.js"

The problem lies in getScriptInfo() in vogue-client.js

it assumes the Vogue script will be the last one in the array returned by document.getElementsByTagName("script") but because it appends itself to the ... and common practice is now to put all your scripts at the bottom of the (see html5 boilerplate etc)... so it is not selecting the Vogue script, it's grabbing my Google Analytics script block instead.

It really needs to look for vogue-client.js specifically.

Hi Andrew,
FIrstly, congrats for your nice project !!

I have a problem if I don't add a "/" at the beginning of my href. Vogue can't watch my files.

Example :
link href="styles/demo.css" type="text/css" rel="stylesheet" don't work but
link href="/styles/demo.css" type="text/css" rel="stylesheet" work

Thanks, and sorry for my bad english;

Starting vogue (the path is correct) resultst in the following error.

Watching file: D:\projekti\poc\node\public\stylesheets\skeleton.css

fs.js:734
    throw new Error('use fs.watch api instead');
          ^
Error: use fs.watch api instead
    at Object.watchFile (fs.js:734:11)
    at Watcher.startWatching (C:\Users\jernej\AppData\Roaming\npm\node_modules\vogue\Watcher.js:57:8)
    at VogueClient.<anonymous> (C:\Users\jernej\AppData\Roaming\npm\node_modules\vogue\VogueClient.js:32:18)

It's a known issue with node on windows as mentioned in issue #31 and jashkenas/coffeescript#1803. Fixed in my fork - jlogar/vogue@9494f5e.

You probably will not be doing a pull because of backwards compatibility?

$ vogue demo
-bash(20158) malloc: *** error for object 0x100104739: pointer being freed was not allocated
*** set a breakpoint in malloc_error_break to debug
Abort trap

and
npm -v
0.3.17
node -v
v0.4.3
[email protected]

macosx 10.6.7 64bit

Have you seen LiveReload? It's very similar to vogue. Unlike vogue, it also reloads HTML and images. There are extensions for Chrome, Safari, and Firefox. You can also include livereload via script tag in any web page (example).

Hi, I was using vogue a week ago (June 15th 2011 ish) fine, and now I cannot get it to work.

When running vogue with an express app all I get from the vogue-terminal-output is:

debug - served static /socket.io.js

When I edit my css files, nothing happens.

When I reload my browser, the above happens, again:

debug - served static /socket.io.js

Any help or suggestions? I was loving vogue but this is a show-stopper for me.. really frustrating.

After discovering vogue I've been using it non-stop. Theming is extremely pleasant when you can have Sublime text on the left and the browser on the right, and just watch the page correspond to what you write.

One thing that would make it even better would be the ability to track changes in html or even jade files. I'm pretty sure it's quite different from css, which I suppose is the reason no one has done it.

Is it possible to do? Are there any plans on achieving it?

Hello.

I am using Vogue on a project with 2 "main" css files, one for base css and another for more specific "inside" css.

Both are compiled using LESS, I have a Interior.less that imports many other "smaller" files with components like "cards" "forms" etc. When I save it will compile and take no longer than half a second compiling, but Vogue wont update my page until after 5 to 15 seconds (its not constant), its like it isnt pooling the changes fast enough.

PS:
If it matters (as in, oh its slower if inside symlinks), I have the "interior" part of the website inside a directory under the root of the main site, and inside of it the "styles" directory where the css files go is symlinked so that the main styles directory and inner styles directory is the exact same:

..
- styles (source of symlink)
-- base.css
-- interior.css
index.php
- interior 
-- styles (destination symlink)
-- interior.php

Is it possible to run this with java web apps?

If so could you point me in the right direction?

Hi,

I'm very new to node.js and vogue. I have an ubuntu box (192.168.1.44) setup with Node and Vogue and I do my primary web development from another machine (a built in web server). When I visit 192.168.1.44:8001, I get the vogue instructions. When I add <script src="http://192.168.1.44:8001/vogue-client.js" type="text/javascript"></script> to my site, vogue does not load properly. I used Fiddler to sniff the network and it looks like Vogue is making requests to http://localhost:8001 instead of http://192.168.1.44:8001.

Digging into the source of Vogue, it looks like my problem stems from the getScriptInfo method. It picks the document.location.host, rather than getting the location of the script. I tried to set the vogue object and that seems to get me a little further:

window.__vogue__ = {
  url: 'http://192.168.1.44:8001/',
  domain: '192.168.1.44',
  port: 8001
};

But now I get messages like "Could not read stats for /home/jim/node/Content/css/Site.min.css" on the server.

Am I doing things wrong or missing a configuration step somewhere? Or is Vogue meant more as a local development tool and not to be shared by many developers?

Well all the files has at least 774 rights and the $USER rights, what might be wrong ?
debug - xhr-polling received data packet 5:::{"name":"watch","args":[{"href":"/~risto/XHtml-template-with-lessCSS/css/reset.css"}]}
Could not read stats for /home/risto/public_html/XHtml-template-with-lessCSS/css/~risto/XHtml-template-with-lessCSS/css/reset.css

I'm getting the following when my css file is updated (by sass)

Could not read stats for

is this because I'm not editing the file directly?

I am not sure if this is your fault or not but this is what happened; I got this after I installed Vogue and try to run vogue:
-bash: vogue: command not found

Solution:
I had to make a new link
$ ln -s /Users/Jonathan/node_modules/vogue/vogues.js vogue

I am not sure if this is your fault or mine but it was annoying :)

Turns out that socket.io updated underneath you:
DEPENDENCY socket.io >=0.6.3

It is now at .7.x

The fix is to change the version to a specific one:
https://github.com/DTrejo/vogue/commit/f549d964e98b7fd152cf4d1aa9e4db7ca7b4050d

Cheers!
D

When I save a css file, I see no change in the browser and the terminal when I am running vogue gives me a long list of these for all my css files in use:

Could not read stats for /Users/joachim/Sites/[etc/etc/etc]/[myfile].css

My web pages are served from ~/Sites as I'm using MAMP on OS X. I've tried running vogue with sudo but I still get the same problem.

I'm also seeing the following debug messages:

debug - setting poll timeout
debug - discarding transport
debug - cleared close timeout for client 1551792960790888952
debug - clearing poll timeout
debug - xhr-polling writing 8::
debug - set close timeout for client 1551792960790888952
debug - xhr-polling closed due to exceeded duration
debug - setting request GET /socket.io/1/xhr-polling/1551792960790888952?t=1314885253500

It's great to see pull requests coming in for features and bug fixes! Keep up the great work guys.
However, we're really lacking tests. Please suggest some ways we can test Vogue.

i installed it on a server on the local lan 192.168.1.238. Then i mounted the drive with the css files on my workstation and edited the css via netbeans. Somehow the Page does not update. Should that work or would that not work by design?

Thx

marco

Hello,
I'd like to install vogue through cygwin.
I installed nodejs and npm correctly. I made a git clone, then I wanted to install it by typing "npm install vogue -g" as it described on your webpage.
After that it makes nothing, the only I can do is closing the cygwin.
Anything useful? Thanks!

Currently vogue searches for socket.io.js in http://localhost/..., it would be useful if it considered a domain name(http://example.com/...)