1

Situation

First, I hope you will not mind my poor English. When you're working with websites/webapplications, there is a good chance that you will work with HTML/CSS files. When editing such files in buffers, I save it every time and reload the browser to view my changes (I have a multimonitor setup), which can be quite cumbersome.

It would be awesome when the changes in the buffer you're editing are sent to your web browser as you type. Instantly see the results of editing your HTML without even bothering to save. For that, you have Impatient mode. And there is a demo of it. I appreciate the work that's done, but it's not a perfect solution.

For example, I'm editing webpages within a sort of intranet environment. That's makes it complicated. I will illustrate it with some examples.

Example 1

The HTML-page foo.html is nested inside another HTML page called bar.html. The bar.html contains CSS and layout-rules, which will be also applied on the nested html-pages inside bar.html.

When I I'm editing the page foo.html, the HTTP server from impatient-mode will serve live foo.html inside browser. But I see only a bleak HTML-page without any markup/styling and the structure is not quite right. The styling and definitons of structure are defined in the file bar.html.

Example 2

On our intranet, we have a template engine, like Mustache solution. For example, we have some PHP-code:

  $foo = "bar";

Then in your HTML-page the template engine is parsing the values from the backend to the frontend.

 <b>{{foo}}</b>

With that, you will usually see in your browser:

bar

But with the impatient-mode, you see in your interactive HTML-page:

{{foo}}

Instead of bar.

This is because impatient-modeand http-server will be hosting their own page, and doesn't have any notion about the backend/template engine or anything. It's mainly useful for hosting stand-alone pages.

I would love to have real interactive editing that works like a charm. So I guess I need to develop a package for it.

Possible structure for new package

We run a Emacs HTTP server which will run locally on the port 8080 of the localhost.

enter image description here

So in the HTML page, you need to include a little javascript snippet.

Pseudocode:

<script>
    Hey Javscript engine inside browser, do polling to output of http://localhost:8080/
</script>

<html>
    <div> 
        Your regular HTML page. 
    </div>
</html>

Ok, imagine a situation. You're editing some text on line 24 inside a buffer. Then we need a hook that indicates that the user leaves a row. If so, pass the edited row from Emacs buffer to the Emacs HTTP server.

enter image description here

But that's brings us to a new problem. What if the user creates a new line inside buffer, or creates a new line in the middle of of a line? Then Javscript will replace the wrong line.

It could be also a problem when the HTML page is nested into another HTML-page, as illustrated in example 1 Then you're editing a 30 lines HTML page in the Emacs buffer. But in the browser, the whole source code counts more than 100 lines.

Another solution is to replace all the content of HTML-page with the new values of the buffer. But this is not desirable, because in large HTML-files, there is enormous load for Emacs/ Emacs HTTP server to pass the whole buffer every second, and for the Browser javascript engine to replace all the lines in the current tab. The interactive environment would not be so responsive, and very lagged. So this is not a good basis to develop a package.

I'm thinking about another ways to have a good workflow. But I'm still struggling with connecting the dots, but that's what we programmers are supposed to do, right?

Any another suggestion for connecting the dots would be greatly appreciated.

  • I don't think you'll have a solution, unless you develop a in-house system. For me, i stick with efficient keys and scripts. For example, one single key, such as F7, switch to emacs, another switch to browser. one single key F5 to refresh. In emacs, one single key F5 to switch the browser that loads the current buffer. If you need some script to run, server update, etc, put that in a elisp function. So, this way, all the methods used are basic and reliable, and at max semi-automatic level, and is the most flexible possible. What you don't get is instantaneous browser update. – Xah Lee Aug 18 '15 at 23:34
  • @Xah Lee, thanks for your comment. But I have already a autohotkey script for that. It will activate the current browser, refresh the content, and then switch back to Emacs. It's bounded to a hotkey, but I prefer an instant update in browser from editing. And lawlist, thanks for the tip about the hook. Very useful! Now I need to figure out which commands/values needs to be passed from Emacs to server and browser. – ReneFroger Aug 18 '15 at 23:43
  • 1
    My recommendation is to use all the source code related to impatient-mode [since you like some of that], and dig-in waste-deep to try and add/fix whatever is not quite right. If, after wading in waste-deep into the source code, you reach a stumbling block, then post a question on one limited issue. A fully functional library that meets your every expectation will not fall from heaven -- you will need to make it a reality yourself through hard work, and bits of help from the Emacs community over time -- one question at a time. It will not be quick, and it will not be painless. :) – lawlist Aug 19 '15 at 4:51
  • @lawlist I don't agree with you. The structure of impatient-mode is entirely different from my goals. Impatient-mode is focused on self-hosting for buffers, so you can view them with the browser. My focus is very different. I want to communicate every detail of change inside buffer to the browser, then browser will change the content of the webpage. – ReneFroger Aug 19 '15 at 13:45
  • 1
    Could you just use LiveReload? – Radon Rosborough Jul 6 '17 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.