Rapid js + css development

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…

Background

Last 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 we must update only one bundle (without dependencies). But programming in front-end is much less dynamic than in in modern frameworks like Ruby or Groovy. There is no build-in support to update resources “on the fly” after their modification (or I can’t find it).

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.
After redeploy I found in my Chromium console: Error::Not allowed to load local resource: file:///path/to/my/local/resource.js. After some googling I found solution: adding –allow-file-access-from-files switch to application. Unfortunately it doesn’t work on my Chromium v.18. I also checked other switches: –disable-web-security and –allow-file-access but with no effect. I also tried  LocalLinks plugin but with the same result.

Solution

I found out that the simplest walkaround to this problem is to link my local resources directory in Apache2 web root. So i did this:

After this inclusion of script looks like:

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?

Tampermonkey script

In

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

What the script do?

It simply add on end of

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

Result

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 (I’m using

IntelliJ Idea so instant autosaving is working for me). And what solutions of this problem you are using?

You May Also Like

Phonegap / Cordova and cross domain ssl request problem on android.

In one app I have participated, there was a use case:
  • User fill up a form.
  • User submit the form.
  • System send data via https to server and show a response.
During development there wasn’t any problem, but when we were going to release production version then some unsuspected situation occurred. I prepare the production version accordingly with standard flow for Android environment:
  • ant release
  • align
  • signing
During conduct tests on that version, every time I try to submit the form, a connection error appear. In that situation, at the first you should check whitelist in cordova settings. Every URL you want to connect to, must be explicit type in:
res/xml/cordova.xml
If whitelist looks fine, the error is most likely caused by inner implementation of Android System. The Android WebView does not allow by default self-signed SSL certs. When app is debug-signed the SSL error is ignored, but if app is release-signed connection to untrusted services is blocked.



Workaround


You have to remember that secure connection to service with self-signed certificate is risky and unrecommended. But if you know what you are doing there is some workaround of the security problem. Behavior of method
CordovaWebViewClient.onReceivedSslError
must be changed.


Thus add new class extended CordovaWebViewClient and override ‘onReceivedSslError’. I strongly suggest to implement custom onReceiveSslError as secure as possible. I know that the problem occours when app try connect to example.domain.com and in spite of self signed certificate the domain is trusted, so only for that case the SslError is ignored.

public class MyWebViewClient extends CordovaWebViewClient {

   private static final String TAG = MyWebViewClient.class.getName();
   private static final String AVAILABLE_SLL_CN
= "example.domain.com";

   public MyWebViewClient(DroidGap ctx) {
       super(ctx);
   }

   @Override
   public void onReceivedSslError(WebView view,
SslErrorHandler handler,
android.net.http.SslError error) {

String errorSourceCName = error.getCertificate().
getIssuedTo().getCName();

       if( AVAILABLE_SLL_CN.equals(errorSourceCName) ) {
           Log.i(TAG, "Detect ssl connection error: " +
error.toString() +
„ so the error is ignored”);

           handler.proceed();
           return;
       }

       super.onReceivedSslError(view, handler, error);
   }
}
Next step is forcing yours app to  use custom implementation of WebViewClient.

public class Start extends DroidGap
{
   private static final String TAG = Start.class.getName();

   @Override
   public void onCreate(Bundle savedInstanceState)
   {
       super.onCreate(savedInstanceState);
       super.setIntegerProperty("splashscreen", R.drawable.splash);
       super.init();

       MyWebViewClient myWebViewClient = new MyWebViewClient(this);
       myWebViewClient.setWebView(this.appView);

       this.appView.setWebViewClient(myWebViewClient);
       
// yours code

   }
}
That is all ypu have to do if minSdk of yours app is greater or equals 8. In older version of Android there is no class
android.net.http.SslError
So in class MyCordovaWebViewClient class there are errors because compliator doesn’t see SslError class. Fortunately Android is(was) open source, so it is easy to find source of the class. There is no inpediments to ‘upgrade’ app and just add the file to project. I suggest to keep original packages. Thus after all operations the source tree looks like:

Class SslError placed in source tree. 
 Now the app created in release mode can connect via https to services with self-signed SSl certificates.