Saturday, June 11, 2016

Android app development quick start

I've been diving into native Android application development with Android Studio lately. It went quite well, thanks to lots of available tutorials and large community on Stackoverflow.
As a result of last 2 weeks I've created this gist with links and code snippets for Android development that will hopefully help you to bootstrap. 

Tuesday, May 17, 2016

Angular attack 2016 hackathon review



It was a first experience of an online hackathon for me. On the one hand with doing hackathon online you don't have that close interaction with other participants, looking at each other's screens, having fast-food-and-beer dinner together and don't feel this unity of people involved, gathered in one place to achieve something.
However, on the other hand that makes your team more flexible in time and work planning during a weekend time. It also helps to gather an order of magnitude more participants across the globe.

Please find my view on the passed Angular Attack 2016 below:

Thursday, May 12, 2016

Pipes in Angular2

Pipes are Angular 1.x filter being rethink. Pipes can be defined with special decorator @Pipe.
This entity can accept a value plus additional options parameters and return a transformed result.
By default you have available: DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe;


Monday, May 9, 2016

Google Chrome extension development tips

1) Get manifest.json properties of running chrome extension
chrome.runtime.getManifest() 

2) Integrate live google search in google chrome extension

Sample code below, supposingly using jQuery.UI widget with <input id="googleSearch">:

$("#googleSearch").autocomplete({
   source: function(request, response) { 
    $.ajax({ url: "https://suggestqueries.google.com/complete/search?client=chrome&q=",
  dataType: "jsonp",
  data: { q: request.term },
  success: function(data) { response(data[2].splice(0, 15)); } }); },
  minLength: 1,
  select: function(event, ui) { 
   var value = ui.item.label;
   if (ui.item.label.indexOf("http://") === -1 &&      ui.item.label.indexOf("https://") === -1)
  { 
   value = "http://google.com/search?q=" + value }
   document.location = value; 
 }
});

Catchups on Angular2 and TypeScript


How to define arrays in the interface and class properties in TypeScript
How-to's on using services, router and templates in Angular2

and many more coming...

Saturday, March 5, 2016

RSS reader with in NodeJS example

Readline module is used to read and write data in console. Full docs on Readline module in NodeJS
In this example the list of RSS channels from Yandex.news
To call the script you should use type: node --harmony cmd.js

Thursday, March 3, 2016

Displaying icons in angular material app


There are several ways to display icons in angular material application. It's described in the angular material documentation. However my team had problems with making work the svg-based mdIcon directive so we had to investigate what are the other solutions people use.

1) Use icon Font
The simplest way. You need to include link to the font css in <head> tag of your application:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2) Use custom directive
Used in this nice Codepen demo: http://codepen.io/kyleledbetter/pen/gbQOaV
File http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js injects a list of icons and a directive. As a result you get ngMdIcons directive and icons can be included with following syntax in your templates: <ng-md-icon icon="search"></ng-md-icon>
You can customise the amount of icons that you're loading by editing the list in the file.

3) Use template cache
File http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js injects map of named SVG paths and puts it into Angular $templateCache.
Usage in the template:
<md-icon md-svg-icon="alarm" style="color: #0F0;" aria-label="Alarm Icon"></md-icon>
You can customise the amount of icons that you're loading by editing the list in the file.