I use WebStorm and it comes with awesome LiveEdit function, and it's totally much better than LiveReload, however it doesn't automatically register changes in all different types of files I'm using. It ignores changes in Stylus and Jade and I need to manually trigger reloading the page anyway.
I guess because LiveEdit doesn't reload entire page, but only relevant parts, and Webstorm of course can't possibly know what needs to be redrawn on the page, when dealing with Jade or Ejs templates
For that matter LiveReload feels to be a better solution.
But I was wondering if it's possible to trigger reloading the page by sending signals to "JetBrains IDE support extension" somehow?
So ideally grunt-task, or gulp-task (I'm using gulp) would watch files for changes and send signals (maybe to WebStorms built-in server) and extension would reload the page. Is that possible?
Can you control Jetbrains built-in server with node?
No. The extension doesn't have the API
However, LiveEdit does normally work for Jade (no hotswap, of course - just page reloading). When Jade is compiled using a file watcher, live reload is correctly triggered. It also works when Jade is compiled with Express. What does your workflow look like? How do you compile Jade, Stylus and other files that aren't natively executed by the browser?
Related
I have a PWA that saves data locally to indexedDb. Works fine. But I feel hampered by a lack of an editor like SSMS for SqlServer. To make a small change, I have to edit code.
I wondered if anyone had seen any tools (it looks like a chrome extension could do it) that might be useful? I'm working with Blazor (have a lot of Vue.js and Vanilla JS experience, but Blazor is just more productive).....so a component I could add to my application would be a major bonus!!
Prefer to avoid homebrew if someone has something already.
What do you mean by
so a component I could add to my application would be a major bonus
To inspect and make changes directly in the browser have a look at the Chrome DevTools.
I am working with a node.js backend, and often when I have multiple tabs open in my text editor it is difficult to tell which javascript files that I'm editing are on the server, and which are on the client.
Is it possible to change the extension of node.js files to something like ".node" so that it's easier to tell the difference?
I realize that you could achieve this if you use typescript for either the client or the server (.ts files), but I'd prefer to use standard javascript.
If this is impossible, is there another way to differentiate server and client javascript in a text editor like vscode?
You can restructurer your project as client/... server/... Then, you can hover on tab to view path and clarify it .
You should use :
Text Editor: VS Code
IDE : Web Storm
For example, we have a cool styled website, can we use developer options(f12) from browser to snatch this?
Ignoring any legal / copyright implications, you can grab the client-side code this way, yes. All HTML, CSS, JavaScript and imagery can be seen through the F12 Developer Tools.
However, there is no way to know what server-side code a website is using (outside of the server owner themselves configuring something incorrectly and thereby exposing that information).
The answer from Obsidian Age is a good one. I'm going to add some more information that may be useful to you.
I've used this technique myself of getting source code via the developer window. Usually I want to find out how they did some neat CSS or JS trick so that I can try it in my own apps.
The files that make up a website such as HTML, JavaScript, and CSS you can find in the Network tab and can easily copy these.
However you should know the JS, CSS, and even (sometimes to a degree) the HTML files have been minimized and are typically missing any comments from the original developers. Chrome has a nice feature that will un-compress JS files and you can even set break points and step through the JS code.
I just ran into a problem, While I was updating the js and css files for my website on a server, I do not see the immediate change. However, if I were to edit these files on a local computer or go on incognito mode on chrome, I see the change right away.
let's say I have:
div{width:100px}
after I change it to div{width:200px}, when I pop open the developer tool, it still reads div{width:100px}.
I feel like I need to clear something for the broswer, any explanation for this?
Check the caching headers you are using for static resources. The browser is likely using a cached version.
is there is any other way than AJAX/WebSockets to implement partial-page reloads, in node.js applications ?
I was told that template engines with a block/includes functionnality like Jade's do that, but when I open up Chrome DevTools on simple apps built with it, it seems it's still a whole page reload.
Thanks
Jade engine compile template file to minified HTML but included blocks still result to a full HTML page, no partial loading. If you want something more dynamic I guess ajax/ws is best way.