guibot17 guibot17

What

An updated guide/collection of guides on how to access JSON data with JavaScript

Example 1

For reading the external Local JSON file (data.json) using java script

Hexadecimal color code for transparency

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

All hex value from 100% to 0% alpha:

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

#RxJS 5 Operators By Example

UPDATE: I have moved the contents of this gist plus more to https://github.com/btroncone/learn-rxjs and http://www.learnrxjs.io. For expanded examples, explanations, and resources, please check out this new location!

A complete list of RxJS 5 operators with easy to understand explanations and runnable examples.

Chinese Version by: @DrakeLeung

	var express = require('express');
	var fs = require('fs');
	var app = express();


	app.get('/logJson', function (req, res) {

	const logsFolder = '/folder/path/';
	fs.readdir(logsFolder, (err, files) => {
	if (err) {

	// Get all users
	var url = "http://localhost:8080/api/v1/users";
	var xhr = new XMLHttpRequest()
	xhr.open('GET', url, true)
	xhr.onload = function () {
	var users = JSON.parse(xhr.responseText);
	if (xhr.readyState == 4 && xhr.status == "200") {
	console.table(users);
	} else {
	console.error(users);

	{
	"countries": [
	{
	"country": "Afghanistan",
	"states": ["Badakhshan", "Badghis", "Baghlan", "Balkh", "Bamian", "Daykondi", "Farah", "Faryab", "Ghazni", "Ghowr", "Helmand", "Herat", "Jowzjan", "Kabul", "Kandahar", "Kapisa", "Khost", "Konar", "Kondoz", "Laghman", "Lowgar", "Nangarhar", "Nimruz", "Nurestan", "Oruzgan", "Paktia", "Paktika", "Panjshir", "Parvan", "Samangan", "Sar-e Pol", "Takhar", "Vardak", "Zabol"]
	},
	{
	"country": "Albania",
	"states": ["Berat", "Dibres", "Durres", "Elbasan", "Fier", "Gjirokastre", "Korce", "Kukes", "Lezhe", "Shkoder", "Tirane", "Vlore"]
	},

	<ng-template #followingpost let-author="author" let-age="age" let-text="text" let-badge="badge">
	<div class="container-fluid">
	<div class="card">
	<div class="header">
	<h4 class="title">{{ author }}</h4>
	<p class="category">il y a {{ age }} jours</p>
	</div>

	<div class="content" [innerHTML]="text">
	</div>

	// Available in jCanvas v20.1.0

	// The pixel multiple to snap to
	var snapToAmount = 40;
	// Round the given value to the nearest multiple of n
	function nearest(value, n) {
	return Math.round(value / n) * n;
	}
	$('canvas').drawArc({
	layer: true,

	/**
	* @class
	* @description
	* Wrapper for HTML5 audio.
	*/
	import {Injectable, NgZone} from 'angular2/core';
	import {Observer} from 'rxjs/Observer';
	import {Observable} from 'rxjs/Observable';

	declare var AudioContext:any;