Make setup more easy

[mljrg]

The setup instructions are not clear or effective. I could change my css and press C-c C-k to update in the browser, but doing the same for my html did nothing. Sometimes an error

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Node': The provided selector is empty. skewer:190

appeared but I do not now how to resolve it. The demo video seems that skewer is promising, but I could not set it up. For example, impatient-mode is much simpler and straightfoward to set up, and it works like a breeze without having to press any special keys to see my updates reflected in the browser.

I recommend someone to review the setup instructions for skewer, and remember, specially given that many people are so versed in Emacs.

[humanitiesNerd]

I second that. I don't know about impatient, but I could only run "run-skewer" and I couldn't have skewer to work on my own html files.

I'd appreciate detailed instructions about how to do so

[skeeto]

@mljrg
skewer-html-mode is admittedly rough and flaky. It's the least useful part of Skewer and, as a result, has received the least attention. Least useful because it's mostly limited to static websites. It's also the place where the the various browsers are probably least consistent, particularly where it comes to replacing/modifying the head, body, and html tags. The roughness of this minor mode might be the primary source of the problem here.

Could you elaborate on how you get that specific error? The HTML minor mode has no C-c C-k (i.e. eval-buffer), so you must have been evaluating something more specific. At minimum Skewer could be giving a more useful response.

it works like a breeze without having to press any special keys to see my updates reflected in the browser.

This behavior is a core design principle for Skewer. The goal is to follow the conventions of Emacs' other interactive evaluation modes, like emacs-lisp-mode, cider, slime, octave-mode (sort of), etc. An expression from the current buffer is sent off to an attached interpreter to be evaluated and the result is echoed in the minibuffer. The interpreter doesn't care or know what file it came from, if any (e.g. *scratch*). It's even likely the interpreter state does not match the contents of the buffer, nor should it. The purpose of C-c C-k is usually an attempt to re-sync this.

This paradigm extends to the HTML minor mode, even though there's no evaluation result. That's why it's not automatically reflected. If you really wanted this, and impatient-mode wasn't good enough for you (it reloads the entire page on every change), you could still probably rig skewer-html-mode up to do so with a little bit of effort: stick skewer-html-eval-tag inside an specially-made after-change-functions hook.

@humanitiesNerd and @mljrg
Were you having trouble with any modes other than skewer-html-mode? If it's just the HTML minor mode then I could look into fixing that up a bit more.

[humanitiesNerd]

Wow, thank you for your careful words, I appreciate the feedback from you.

Actually I tested skewer-html-mode only as a test, to see if I was able to set the thing up.

What I'm really working on is a front end made with LESS and I wanted to use skewer to edit a LESS file and see changes applied immediately.

So my idea was to try to set it up with something simple and then move towards integrating the skewer-less-mode

So I get that the skewer-html-mode is NOT simple. Ok, I get it.

Can you suggest a different way to follow ?

Or maybe I could describe my setup and you could suggest corrections and integrations towards my goal ?

[humanitiesNerd]

One particular problem I had was to hook a browser tab showing my html file with skewer. Even without LESS, just javascript.

[skeeto]

@humanitiesNerd

One particular problem I had was to hook a browser tab showing my html file with skewer. Even without LESS, just javascript.

Try out the bookmarklet or the Greasemonkey script. They're both listed in the README.

Can you suggest a different way to follow ?

Carefully read the README. Also here's a series of articles about Skewer that may help spark understanding:

• Skewer -- Emacs Live Browser Interaction
• Live CSS Interaction with Skewer
• Load Libraries in Skewer with Bower
• Skewer Gets HTML Interaction

It helps if you understand the same-origin policy, how CORS affects it, and the overall browser evaluation model.

[humanitiesNerd]

Ok, I managed to see some edits to a css buffer applied on the fly in the browser.

I moved to css, given that the html mode is not so mature.

Thanks