Vuejs Live Templates for Webstorm

IntelliJ IDEA (Webstorm) comes with many live templates but it has none for Vuejs 2.
I’ve created a few simple templates to use for my projects. All the templates assume you’re using a transplier for ECMAScript 2015. Vue components template is setup for usage with SASS but you can easily modify it and use Stylus instead.

You can find the templates at idea-vue-templates.
Continue reading Vuejs Live Templates for Webstorm

Angular CLI serve and base href

Several months have passed since Angular 2 was released. Then came Angular CLI promising easier scaffolding and better integration. It’s still in beta and as expected there are things to improve.

One thing that confused me was ng serve and the lack of <base href> support. It’s easy when using ng build with the -bh flag and same feature for serve would’ve been great. Unfortunately the CLI team doesn’t plan on adding base href support 🙁

The project I’m working on relies on multiple other applications and APIs served from other folders. Having base href different than root during development is a must. The only way I found to make the whole setup work was by proxying the needed folder to root.

  • In your index html add the needed <base href>.
    <base href="/project/">
    
  • Create a new file at root called proxy.conf.json and paste:
    [
        {
            "context": [
                "/project"
            ],
            "target": {
                "host": "localhost",
                "protocol": "http:",
                "port": 4200
            },
            "secure": false,
            "pathRewrite": {
                "^/project": "/"
            }
        }
    ]
    
  • Modify your serve command.
    $ ng serve --proxy-config proxy.conf.json --live-reload-base-url /project/ --open true
    

    I set this in package.json start script. After that I can use npm start instead of remembering ng serve and all the parameters.

How to Customize Bootstrap – Dos and Don’ts

Twitter Bootstrap 3 is great for creating responsive websites. It comes with many components and features that are easy to use and has a great documentation. That’s not always enough. Sometimes you need additional JavaScript functionality or custom CSS. You might even want to add additional jQuery plugins. Sooner or later you’ll hit an issue with some plugin or your code breaking stuff.
In this articles I’ll share the common issues I’ve seen in bootstrap based projects and ways to avoid them when customizing the framework.
Continue reading How to Customize Bootstrap – Dos and Don’ts

Using createjs WebAudio with Phonegap (Cordova)

One of the things I hate about Phonegap (Cordova) is the audio support. Every time I worked on a project that required heavy audio usage not a single plugin worked fine

Cordova Media plugin is good for recording audio but when you try to play multiple audio files it leaks into memory and the OS stops your app. It also tends to break after using the recording feature. I’ve also tried the Native Audio plugin and although it’s much better it has its issues with features not working.

The createjs team released a new soundjs plugin called CordovaAudioPlugin. It did work for some time but because it is using Cordova Media it had the same issues. With newer version of the Cordova Media plugin it just causes your app to crash (04.2016, soundjs version 0.6.2).

Honestly, with the WebAudio browser support, I don’t think we need plugins for playing audio. WebAudio does the job nicely for mobile and desktop.
Continue reading Using createjs WebAudio with Phonegap (Cordova)

JSON vs XML

Many of you have probably wondered which format is better or which should be used. You might have even participated in a full blown nerd rage war on the matter.

Both formats are good when you want to describe a hierarchical structure.

Differences

  • XML is a markup language and is good for documents description or text documents with formatting information.
  • JSON syntax is light. It’s much easier to parse from JavaScript and that’s why it’s preferred for browser-based and Phonegap mobile applications.

So when should you use each one of them?
Continue reading JSON vs XML

How to read an HTML page with UTF8 encoding using PowerShell

Yesterday I was working on a project that requires heavy HTML pages content scraping.

What I wrote were several PowerShell files which were scraping the content using Invoke-WebRequest and Invoke-RestMethod. And everything was great and smooth… until I got to an HTML page with some Greek letters inside. To my surprise both PowerShell built in functions failed miserably when I tried to retrieve those UTF8 encoded pages. In short, I was bombarded with ℠and ¢ here and there.

So, after I lost several hours trying to figure out what’s going on and experimenting with all kinds of options it turned out It’s impossible to read properly a UTF8 encoded page without BOM with Invoke-WebRequest.

Here is a simple function I wrote which uses .NET classes to tackle the problem.

Note that this is just a simple example and it lacks the extensible functionality you get with Invoke-WebRequest.

Reusing page jQuery in a Greasemonkey script

Many times I’ve used a RIA or a website and wanted it to behave differently or have an additional functionality that I need. Thanks to Greasemonkey this is possible.

We live in a jQueritifed world where most of the web pages use jQuery.

That’s why on of the things that I need to do most of the time when I write a userscript is to reuse the jQuery from the webpage without loading a new jQuery instance from the web. This will make my script much more responsive and who needs to load something that is already there.

Save your time by not reinventing the wheel and just use the boilerplate code I’m using for my Greasemonkey scripts.

Continue reading Reusing page jQuery in a Greasemonkey script

Eclipse Keybindings for Sublime Text 2

Ever wanted to use your Eclipse keybindings/shortcuts in Sublime Text 2?
Are you too lazy to learn new shortcuts? (as I am)

If the answer is yes then the following JSON is just for you:

Open Sublime Text, goto Preferences -> Key Bindings-User and paste the JSON there.

image

Enjoy the good old Eclipse shortcuts.

The GIST with the shortcuts is what I need and use. It might not be full or contain all the features you need. If you need more or other shortcuts  visit the Sublime Forum or see one of the following links.

If this is not enough then Google it or click the link – http://bit.ly/1f3wS0p (now we both know how lazy you are).

Applying CSS Styles Before Printing with AngularJS

In a world full of fancy shining jQuery plugins one can’t simply print.

Often you’ll be using a grid JavaScript plugin or another heavy visualization component. One of the pitfalls you might experience with those components is that they don’t look nice when you try to print them. Sometimes this can’t be solved by with the dark side of the force a.k.a pure CSS.

So, what are our options?

Continue reading Applying CSS Styles Before Printing with AngularJS