Michael Fairchild fairchild

Problem

While building a JavaScript single page app that acts as a front-end to multiple backend servers, even if they are on the same host as the web app - but on different ports, you come across CORS issues.

Solution

Use a simple node.js + hapi.js server to:

Serve your static single page app
Act as proxy to the backend servers

React "Hello World" Examples

Below are a small collection of React examples to get anyone started using React. They progress from simpler to more complex/full featured.

They will hopefully get you over the initial learning curve of the hard parts of React (JSX, props vs. state, lifecycle events, etc).

Usage

You will want to create an index.html file and copy/paste the contents of 1-base.html and then create a scripts.js file and copy/paste the contents of one of the examples into it.

SOLID Principles with ruby examples

SRP - Single responsibility principle

A class should have only a single responsibility.

Every class should have a single responsibility, and that responsibility should be entirely encapsulated. All its services should be narrowly aligned with that responsibility, this embrace the high cohesion.

OCP - Open/closed principle

Software entities should be open for extension, but closed for modification.

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] {

	config:
	FunctionName: aws-lambda-aes-gist
	Handler: index.handler
	Runtime: nodejs
	Description: A Lambda function for AES encryption/decryption, from a Gist!
	install: npm install --production

	// Lefalet shortcuts for common tile providers - is it worth adding such 1.5kb to Leaflet core?

	L.TileLayer.Common = L.TileLayer.extend({
	initialize: function (options) {
	L.TileLayer.prototype.initialize.call(this, this.url, options);
	}
	});

	(function () {

	#
	# A:
	# pubsub = PgPubSub.new('channelname')
	# pubsub.subscribe do \|data\|
	# puts "data: #{data} is coming!"
	# end
	#
	# B:
	# pubsub = PgPubSub.new('channelname')
	# pubsub.publish("hello world")

	var child_process = require('child_process');

	exports.handler = function(event, context) {
	var proc = spawn('./test', [ JSON.stringify(event) ], { stdio: 'inherit' });

	proc.on('close', function(code){
	if(code !== 0) {
	return context.done(new Error("Process exited with non-zero status code"));
	}

	require('font-awesome/css/font-awesome.css');

	document.body.innerHTML = '<i class="fa fa-fw fa-question"></i>';