{"id":9584,"date":"2012-08-20T13:36:00","date_gmt":"2012-08-20T12:36:00","guid":{"rendered":"http:\/\/touk.pl\/blog\/?guid=7329f70f9c843a1f3019f1b362f96fe2"},"modified":"2022-07-27T08:54:45","modified_gmt":"2022-07-27T06:54:45","slug":"rapid-js-css-development","status":"publish","type":"post","link":"https:\/\/touk.pl\/blog\/2012\/08\/20\/rapid-js-css-development\/","title":{"rendered":"Rapid js + css development"},"content":{"rendered":"
\n

\n Background
\n <\/h3>\n

Last time I had some work to do in <\/p>\n

OSGi<\/i> web module written in Spring MVC<\/i>. If we have application splitted to well-designed modules, back-end development in this framework run in OSGi<\/i> environment is quite fast because after some modification we must update only one bundle (without dependencies).\u00a0But programming in front-end is much less dynamic than in in modern frameworks like Ruby<\/i> or Groovy<\/i>. There is no build-in support to update resources “on the fly” after their modification (or I can’t find it).\n<\/div>\n

\n There is many plugins to web browser which help you build front-end from scratch in wysiwyg mode. But I can’t find any which could modify resources of already ran application. Also it will be complicated to keep synchronized these modifications with our sources. Therefore I tried to use local links to my project in my application. I put code similar to this below in my page.\n<\/div>\n
\n After redeploy I found in my Chromium<\/i> console:\u00a0Error::Not allowed to load local resource:\u00a0file:\/\/\/path\/to\/my\/local\/resource.js. <\/span>After some googling I found solution: adding\u00a0–allow-file-access-from-files<\/span>\u00a0switch to application. Unfortunately it doesn’t work on my Chromium v.18<\/i>. I also checked other switches:\u00a0<\/span>–disable-web-security<\/span> and\u00a0–allow-file-access<\/span> but with no effect. I also tried \u00a0LocalLinks<\/i> plugin but with the same result.\n<\/div>\n

<\/a><\/p>\n

\n

\n Solution
\n <\/h3>\n

I found out that the simplest walkaround to this problem is to link my local resources directory in Apache2 <\/i>web root. So i did this:<\/span>\n<\/div>\n

\n After this inclusion of script looks like:<\/p>\n

As you can see, it is only difference in port in new location of script. So maybe there is a tool which helps in automatic replace this string?<\/span>\n<\/div>\n

\n

\n Tampermonkey script
\n <\/h3>\n

In <\/p>\n

Firefox<\/i> I’ve been using Greasemonkey<\/i> plugin which could do automatic code replacement like this on the fly. On Chrome there is Tampermonkey<\/i> which is a port of\u00a0Greasemonkey<\/i>. I wrote script which do this thing for me:\n<\/div>\n

\n

\n What the script do?
\n <\/h4>\n

It simply add on end of <\/p>\n

<\/span> script includes from location with replaced string from -> to<\/span>. It also modify CSS<\/i> link<\/i> hrefs<\/i> using the same approach. Both scripts and links are filtered using blacklist<\/i> – it is helpful if our application using external resources.\n<\/div>\n

\n

\n Result
\n <\/h4>\n

Now I can spend all of my time intended for development only writing a code. After any modification I only refresh a page in browser\u00a0(I’m using <\/p>\n

IntelliJ<\/i> Idea<\/i> so instant autosaving is working for me). And what solutions of this problem you are using?\n<\/div>\n","protected":false},"excerpt":{"rendered":"BackgroundLast time I had some work to do in OSGi web module written in Spring MVC. If we have application splitted to well-designed modules, back-end development in this framework run in OSGi environment is quite fast because after some modification w…\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[71,176],"class_list":{"0":"post-9584","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-development-design","7":"tag-frontend","8":"tag-javascript"},"_links":{"self":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/9584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/comments?post=9584"}],"version-history":[{"count":13,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/9584\/revisions"}],"predecessor-version":[{"id":14412,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/9584\/revisions\/14412"}],"wp:attachment":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/media?parent=9584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/categories?post=9584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/tags?post=9584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}