Dilip Kr. Shukla fusionstrings

How to create an HTTPS certificate for localhost domains

This focuses on generating the certificates for loading local virtual hosts hosted on your computer, for development only.

Do not use self-signed certificates in production ! For online certificates, use Let's Encrypt instead (tutorial).

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

	class Frame extends Component {
	componentDidMount() {
	this.iframeHead = this.node.contentDocument.head
	this.iframeRoot = this.node.contentDocument.body
	this.forceUpdate()
	}

	render() {
	const { children, head, ...rest } = this.props
	return (

	import React from 'react';
	import ReactDOMServer from 'react-dom/server';
	import express from 'express';

	import Html from './Html';
	import App from './App';

	const app = express();

	app.use('/static', express.static('public'));

	// https://github.com/alfonsomunozpomer/react-fetch-mock

	import React from 'react'
	import fetchMock from 'fetch-mock'
	import Enzyme from 'enzyme'
	import {shallow, mount, render} from 'enzyme'
	import Adapter from 'enzyme-adapter-react-16'

	Enzyme.configure({ adapter: new Adapter() })

	#!/bin/sh

	# Generate self signed root CA cert
	openssl req -nodes -x509 -newkey rsa:2048 -keyout ca.key -out ca.crt -subj "/C=AU/ST=NSW/L=Sydney/O=MongoDB/OU=root/CN=`hostname -f`/[email protected]"


	# Generate server cert to be signed
	openssl req -nodes -newkey rsa:2048 -keyout server.key -out server.csr -subj "/C=AU/ST=NSW/L=Sydney/O=MongoDB/OU=server/CN=`hostname -f`/[email protected]"

	# Sign the server cert

	// Gulp module imports
	import {src, dest, watch, parallel, series} from 'gulp';
	import del from 'del';
	import livereload from 'gulp-livereload';
	import sass from 'gulp-sass';
	import minifycss from 'gulp-minify-css';
	import jade from 'gulp-jade';
	import gulpif from 'gulp-if';
	import babel from 'gulp-babel';
	import yargs from 'yargs';

	/* HOC fundamentally is just a function that accepts a Component and returns a Component:
	(component) => {return componentOnSteroids; } or just component => componentOnSteroids;
	Let's assume we want to wrap our components in another component that is used for debugging purposes,
	it just wraps them in a DIV with "debug class on it".
	Below ComponentToDebug is a React component.
	*/

	//HOC using Class
	//it's a function that accepts ComponentToDebug and implicitly returns a Class
	let DebugComponent = ComponentToDebug => class extends Component {

	# npm publish with goodies
	# prerequisites:
	# `npm install -g trash conventional-recommended-bump conventional-changelog conventional-github-releaser conventional-commits-detector json`
	# `np` with optional argument `patch`/`minor`/`major`/`<version>`
	# defaults to conventional-recommended-bump
	# and optional argument preset `angular`/ `jquery` ...
	# defaults to conventional-commits-detector
	np() {
	travis status --no-interactive &&
	trash node_modules &>/dev/null;