Nathan Querido nfq

Vanilla JavaScript Tabs with visibility hidden/visible

###Reference Links (MDN - JS)

DOMContentLoaded

File and folder naming convention for React.js components

Directory Layout #1

/actions/...
/components/common/Link.js
/components/common/...
/components/forms/TextBox.js
/components/forms/TextBox.res/style.css

JavaScript Framework Collection

A collection of very nice JavaScript frameworks for developer.

Name	Description
algorithms.js [S]	Classic algorithms and data structures implemented in JavaScript, you know... FOR SCIENCE.
AngularJS [S]	HTML enhanced for web apps.
Backbone.js [S]	Backbone supplies structure to JavaScript-heavy applications by providing models key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
beeplay.js [S][H]	Write A Song On JavaScript.

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

http://www.fontsquirrel.com/tools/webfont-generator

	#!/bin/bash

	echo
	echo "Processing all *.md files in current directory..."
	echo

	# Loop through all .md files in directory and rename spaces to dashes
	for file in " "; do
	echo "Renaming $file"
	mv -- "$file" "${file// /-}"

	# force HTTPS and www.
	RewriteEngine On
	RewriteCond %{HTTP_HOST} (?!^www\.)^(.+)$ [OR]
	RewriteCond %{HTTPS} off
	RewriteRule ^ https://www.%1%{REQUEST_URI} [R=301,L]


	# alternative way
	RewriteCond %{HTTP_HOST} !^$
	RewriteCond %{HTTP_HOST} !^www\. [NC]

	var gulp = require('gulp');
	var shell = require('gulp-shell');
	var changed = require('gulp-changed');


	gulp.task('collectstatic', function () {
	return gulp.src('static/*/.*')
	.pipe(changed('YOURAPP/static/'))
	.pipe(shell([
	'python manage.py collectstatic --noinput'

	/**
	* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
	*
	* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
	* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
	* the height of element `.foo` —which is a full width and height cover image.
	*
	* iOS Resolution Quick Reference: http://www.iosres.com/
	*/

	var gulp = require('gulp');
	var rimraf = require('rimraf');
	var less = require('gulp-less');
	var concat = require('gulp-concat');
	var prefixer = require('gulp-autoprefixer');
	var cssmin = require('gulp-minify-css');
	var jsmin = require('gulp-uglify');
	var watch = require('gulp-watch');
	var util = require('gulp-util');
	var rename = require('gulp-rename');

	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);