Javascript, CSS, HTML and REST of web development: March 2016

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

	/*
	Readline module is used to read and write data in console.
	Full docs on Readline - https: //nodejs.org/api/readline.html
	In this example the list of RSS channes from Yandex.news - https: //news.yandex.ru/export.html
	To call the script you should use type: 'node --harmony cmd.js'
	*/

	// Adding needed modules:
	// readline - reads console ine
	// request - does http resquests
	// parser - parses the responses
	const readline = require('readline');
	const r = require('request');
	const parser = require('/usr/local/lib/node_modules/xml2json/');

	// Script variables:
	// currentState - flag showing what news type to show
	// items - list of news in the RSS
	// rsss - list of RSS litst
	var currentState = 'general';
	var items = [];
	const rsss = [{
	'title': 'Hardware',
	'url': 'https://news.yandex.ru/hardware.rss'
	}, {
	'title': 'Science',
	'url': 'https://news.yandex.ru/science.rss'
	}, {
	'title': 'Finances',
	'url': 'https://news.yandex.ru/finances.rss'
	}, {
	'title': 'Society',
	'url': 'https://news.yandex.ru/society.rss'
	}, {
	'title': 'Internet',
	'url': 'https://news.yandex.ru/internet.rss'
	}, {
	'title': 'Netherlands',
	'url': 'https://news.yandex.ru/Netherlands/index.rss'
	}, {
	'title': 'Football',
	'url': 'https://news.yandex.ru/football.rss'
	}, {
	'title': 'Law',
	'url': 'https://news.yandex.ru/law.rss'
	}];

	//init Readline interface
	const rl = readline.createInterface({
	input: process.stdin,
	output: process.stdout
	});


	//Below there are several handlers
	// - loadChannel, channelAnswers, generalAnswers, loadGeneral
	// their names should be pretty self-explanatory

	var loadChannel = function(e) {

	currentState = 'channel';

	var ch = JSON.parse(e).rss;
	items = ch.channel.item;

	console.log('\|\| ', ch.channel.title);
	items.forEach((x, i) => {
	console.log((i + 1) + ' - ' + x.title);
	});

	console.log('>> Select item to read (0 - for level up)');
	}

	var channelAnswers = function(answer) {
	if (!items[answer]) {
	console.log('Wrong item number');
	} else {
	console.log('\|\| ', items[(answer - 1)].title);
	console.log(items[(answer - 1)].description);
	console.log('>> Enter next command...');
	}
	}


	var generalAnswers = function(answer) {
	if (!rsss[answer]) {
	console.log('Wrong channel number');
	}

	r(rsss[(answer - 1)].url, function(error, response, body) {
	if (!error && response.statusCode == 200) {
	loadChannel(parser.toJson(body));
	}
	})
	}

	var loadGeneral = function() {
	console.log('Please select channel to read out of ' + rsss.length + '\n');
	rsss.forEach((x, i) => {
	console.log((i + 1) + ' - ' + x.title);
	});
	currentState = 'general';
	console.log('>> Enter id from 1 to ' + rsss.length + ':');
	}

	//Main Readline event handler
	rl.on('line', (answer) => {
	if (answer == 0) {
	loadGeneral();
	return;
	}
	//quit it user presses 'x' or 'q'
	if (answer == 'x' \|\| answer == 'q') {
	console.log('Bye!');
	process.exit(0);
	}

	(currentState == 'general') ? generalAnswers(answer): channelAnswers(answer);
	});
	/*
	This is relatively simple example.You can extend this one or use one of the advanced modules working with cli in NodeJS.
	For example this: https: //github.com/chriso/cli
	*/
	//JS module syntax - default function to call when module file in called
	module.exports.default = loadGeneral();

view raw cli-rss-reader.js hosted with ❤ by GitHub

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.