Mastering web-storm

I am big fan of sublime text, and I use it extensively. Then I came across WebStorm, I like it and I want to learn more about it, because any craftsman should know how to use his tools effectively.
So I was looking for some tutorial and videos on mastering web storm and I came across this excellent video by John Lindquist. I highly recommend that you watch the video.

I have also tried to summarise what’s there in the video, but I recommend that you watch the whole thing, but for those who cannot spare the time to watch the whole thing, here is the excerpt:

Code Inspect:

Webstorm offers a nice code inspector, and to inspect code, right click on any directory inside Webstorm and click inspect Code.
It will give you a list of the issues and warnings and improvements which you can make, and is kind of really useful when your are doing code reviews and stuff like that.

Autocomplete Shortcut: Whenever a small bulb appears in Web storm, it indicated that Webstorm has some suggestions, and you can hit alt+Enter to bring the menu which shows the suggestions.

Go back in time: Webstorm has a nice auto-save feature, you don’t have to manually save things in Webstorm, and when you have changed something and want to revert your change you can go back in time by: Right-click-> local history

Getting things from CDN: When using CDN in script tags and stylesheets src, Webstorm will show a warning, you can hit alt+Enter->Download locally, by doing that it will download the linked file and show autocomplete off that.

Fine tune suggestions: In Webstorm you can fine tune the settings about auto-complete, suggestions, warning and errors.
Click on the lower right hand side corner->on hector the inspector and fine tune the inspection

Keyboard shortcuts:

To learn about keyboard shortcuts, go to
Shorcut Foo

Actions:

Cmd + Shift + A bring the action bar.
Select content, and press cmd+shit+a and select create live template.
And add variable by $name$ and $end$ to specify where the cursor ends.
Webstorm uses velocity template language.

Refactoring

Refactor this shortcut CMD+SHIFT+ALT+T
/+tab automatically generate the document
**Cmd+Alt+V
to pulling out variable.

Open up the file structure: can also be invoked by cmd+f12

To navigate project: cmd+shift+n, wildcard are also supported
s/a/*.js -> source/auto/ and all the javascript
cmd+alt+shift -> type the name of the method
and cmd+shift+i while doing this, will also show preview of the file, and cmd+shift+j while doing that will show documentation if available.

Version control:

Webstrom also has an integrated VCS manager, to bring the VCS Popup hit Ctrl+V.
Webstorm is also integrated with Github, you can easily import your github repos in Web-storm.

External tools:

To add external tools, go to Preference -> External tools and add details about the external tools you want to add, for e.g. Yeoman

File launchers:

If you create a coffee script file, it will ask you to add a watcher, and it will generate the corresponding js file, same if for sass etc.

Dead Simple Screen sharing (DSS) – Overview

Grab source on GitHub

Project site

Sometime ago a developed an open-source screen sharing application called as DeadSimpleScreenSharing which allows you to share your screen with anyone right from your browser.
It requires you to install an extension, when you click “Share your Screen” button on that extension, it will gives you a unique url which you can share with any number of people, and they can view your screen.
In this blog post I will give a brief overview on how this application works.

The Extension:

The DSS requires you to install an extension, a extension is required because there has to be some application running background which listens to tab changes and transmits this data to the server.
The extension uses the chrome extension api’s caputreVisibleTab() method get the visible tab and attaches mutationObservers and listen for DOM changes, when there is a change in the DOM, it transmits the data to the server via web sockets.

The Server:

The server is written in Javascript(node.js) and uses web sockets (socket.io), each session is namespace by unique id which is generate when the user presses the “Share your screen” button on the extension.
The server just receives the data and forwards it to all the connected clients in that namespace.

Get it working locally:

If you want to run DSS locally, you need to have:
1. Node.js installed
2. Install express using ‘npm install express’
3. Install socket.io run ‘npm install socket.io’
and follow along the video.

Share your entire screen using Chromecast

Google’s chrome cast allows you to bream content from your computer/phone to TV, and you can play youtube videos, music, etc. It allows also a really nice feature called as tab sharing, it allows you to share your Google chrome tab to the TV.
But it doesn’t allows you to share your whole screen, in the post I’ll explain how you can do that.

Things required

  1. Latest version of Google Chrome
  2. Chromecast
  3. Google Cast extension installed in google chrome

Procedure

  1. Visit https://html5-demos.appspot.com/static/getusermedia/screenshare.html
  2. Click on “Capture your screen button”
  3. Click on Chromecast extension and share the current tab
  4. Minimise Google chrome and enjoy.

Now can see your screen, but you can also a white border which is not nice, and you can’t get a full screen, to get past that you need to do a bit of extra work.

Download the zip package and extract it’s contents, and install Node.JS if you don’t have already.
Then open terminal in mac or Command Prompt in windows and type “cd “ and drag and drop the “server” folder into the terminal window.

Then run “sudo node app.js” and visit https://localhost (Note:It’s https not http), Google Chrome will give you a warning, and you can safely ignore it, because the certificates which I have created for https to work are not verified by any recognised issuing authority.

You’ll now see your screen, now share this tab with chrome cast and minimise the Google chrome.
Enjoy!

If you have any questions, ask them in comments below.

Executing tasks (functions) on specific dates in Node.js

Sometimes you want to execute task after certain interval, I am not talking about executing a task after every 5 minutes, but after certain days; say every Monday at 5pm more like corn jobs.

If you are looking for a library which allows you to execute arbitrary functions at specific dates, so you’re in luck because an awesome Node.js library called node-schedule allows you do just that.

Head over to Github repo, and read about it in detail and get started.

AngularJS + Underscore The ultimate web-development toolkit

Before starting my latest web-development project I was looking for some robust javascript frameworks that I could use. I was familiar with AngularJS and I loved it, but it doesn’t have a lot of utility methods and I was looking for some solution to solve that problem.

So, I thought about using underscoreJS, which is collection of utility methods with angularJS and I got myself a killer web development toolkit, in this blog post I have summed up underscoreJS methods which I find useful. visit underscorejs.org to view all the available methods.

Using Underscore with Angular:

Combining angular and underscore is pretty straightforward, want you can do it add import underscore in your index.html, then add it as a service.

And then we could inject it into our controllers:

Useful Underscore methods:

I have compiled a list of my favourite underscoreJS methods, you can always visit underscorejs.org to view all the methods that are available in underscore.

###_.isUndefined:
This method is used to determine weather the specified value is undefined or not, I know you could always do typeof value === “undefined” to check weather it is undefined or not, but I find this neater.

###_.defaults:
This is also a very useful method, it allows you define a default values for something if they are not present.

_.where:

This method comes handy when you want to search something in the array of objects using some attributes present in the object.
consider the example below.

_.uniq:

This method operates on arrays, and it removes duplicates in the array.
Consider the following example:

###_.pluck:
if you ever wanted to extract some values from an array of objects, well the pluck method let’s to do that.
Here is the example:

By merging these two awesome web development frameworks together we can get a pretty nice web development experience, as angular serves as an awesome MVC, and underscore provides a very useful collection of utility methods.

An app every programmer must use

As a programmer I want be constantly updated with technologies/programming languages I use, I want to read tutorials, tips, best practices and wanted to know about new tools and frameworks that are coming, and for that I was constantly asking people about best blogs / websites about Technology-X, and I was also very often bombarded with the questions like: What are the best Python blogs? or What are the best ruby on rails blogs? and What’s the best IDE for java development? etc.

But there is no solution available to get all this information in one place, so I thought of developing one: I call it Ken.

It is an Android app which keeps you updated with the latest programming news, you have to select your interests e.g: Node, Python, Javascript, Android etc. and it will show you all the latest news related to these technologies.

Ken is tool which I needed badly and I think a lot of other people can benefit from it, so if you are having the same problem which I had: Try Ken

Download from Google Play

Handling custom tags in Android using Html.TagHandler()

While working on my app Android app Ken, I needed to render HTML in Android, I was very much delighted when I found out that android’s TextView supports HTML rendering and it can be easily achived by converting html into Spannable using Html.fromHtml( method and sending it to TextView’s setText method.

But there is catch with Html.fromHtml method, it doesn’t support all tags; well that was a killjoy, but html.fromHtml method accpets a TagHandler which is class we can implement to handle custom html tags, but it is not well documented, after struggling for a while and reading the source code of HTML class method I was finally able to define my own tagHandler class which is able to handle ul, ol and code tags.

Handling Html

Here is my custom tagHandler:

The above Java file HtmlTagHandler handles, ul, ol, and code tags.
The handleTagList() method handles the list tags, and handling of code tag was pretty easy, I just need to find the start of the code tag, I do this by adding a flag on the start of the tag Spannable.SPAN_MARK_MARK and when the tag on end I just find the object where I marked Spannable.SPAN_MARK_MARK using getLast() and find its position, and store it in the variable name “where”; that’s the start of the code tag, and I get the end of the code tag using output.length() and set the font face of that text fragment to “monospace” using (new TypefaceSpan(“monospace”).

That’s it! If you want to use it in your project create a java class with content of this file and create a object of HtmlTagHandler and pass it to your fromHtml method.

Also try out my app Ken which is available on Google Play which a free magazine for programmers, you have to select your interest (e.g Javascript, Android, Ruby etc.) and it will show you all the latest news, articles, tutorials related to your interests.

P.S: For handling image I using a nice library called “URLImageParser” Github link

PeerJS How does it work?

I was very excited about the latest Web RTC API’s on Peer-To-Peer video calling and file transfer, and when I reading about these new API’s I came accorss a awesome javascirpt plugin PeerJS, which allows to use the p2p data transfer easily.

I decided to use it for my screensharing app deadsimplescreensharing, becuase I am hosting the server on heroku and I am facing huge latency issues and I thought using peer-2-peer would be perfect to solve my problem, but sadly it didn’t work!

The Problem:

I modified my screensharing app’s chrome extension to work with peerJS and also the client webpage.
Then I launched the localserver to test it, I got a connection with the extension I could see data being transmitted from the extension but not being recived at the client side.

I then tried to send small messages like “Hello”, “Hi” etc. and I was able to recive them at the client just fine, so I figure out the problem was peerJS was unable to send large files (around 700 KB), and that part totally sucks!

The Solution:

The possible soloution I could think about is converting the data:uri (screensharing fetch’s the current tab image using data:uri) into an array and then dividing the array into smaller chunks and send them.
At the client side, recieve the chunks, join and assemble them and then display the image.

Here is the code which I used:

The above code divides a large array into smaller arrays of size 1000 each which can be transmitter over the network.

Conclusion

There is still lot of work that needs to be done in p2p file transfer or there is some serious issue with peerJS, as it cannot send large files and if it could the file transfer speed is very slow.
Still the thought of p2p connection is exiciting and I am wating for this new technology to develope so that we all can build cool applications using it

Use your Android Phone as a display for Raspberrypi

I read this tutorial on how to use your Kindle as a display for your Raspberrypi link, and I thought why not use an Android phone as display and use usb ports on the Raspberry Pi for keyboard and mouse.

Things you’ll need:

  1. Android phone
  2. A Raspberry pi

What we’ll do:

  1. We will install VNC on Android, I am using pocketvnc
  2. Then, we will use USB tethering on Android and connect it to Raspberry pi using USB
  3. Then in the Raspberry pi we will install x11vnc (sudo apt-get install x11vnc) so that we can connect to an exisiting X-Window server and share it using vnc, so that we can use keyboard and mouse connected to raspberry pi.
  4. Change the ip address of raspbery pi sudo ifconfig usb0 192.168.42.10 (Because android assing IP in USB tether mode in the range 192.168.42.x)
  5. Start the X-Server (if you have not started it alerady) using the startx command.
  6. The share it using x11vnc, type the following command in the terminal: ***sudo x11vnc -display : 0
  7. Then connect to your raspberry pi to Android using the VNC software you have downloaded: port 5900 and IP 192.168.42.10

I know it is not very detialed tutorial and a bit crude, I will soon post a detialed one with images and video.
Also we could automate a lot stuff on startup using .bash_profile so that we don’t have to type in these commands everytime.
I’ll post all this in the next update.

I would love to hear about you suggestions in the comments.
Thanks

(Please excuse the typos, I am very excited about this and I want to post it online ASAP, so I am not profreading it.)