Marek Pełka mpelka

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).

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

	import React from 'react';

	const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

	const Header = ({shouldLinkToHome}) => (
	<div>
	<ConditionalWrap
	condition={shouldLinkToHome}
	wrap={children => <a href="/">{children}</a>}
	>

	import { h, cloneElement, Component } from 'preact';


	/** Example <Fetch url="/foo.json" /> compositional component.
	* Just to demonstrate a compositional component that requires input massaging.
	*/
	class Fetch extends Component {
	state = { loading: true };
	componentDidMount() {
	this.update();

	The MIT License (MIT)

	Copyright (c) 2014 Tomas Kafka

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	var $ = require('jquery')

	// This helper allows you to translate events that DO bubble
	// to directly bound events for event typess that DO NOT
	// (like scroll) using either syntax below:

	// var translateEventTo = require('translateEventTo')

	// ...then in the view class definition...

	var parser = document.createElement('a');
	parser.href = "http://example.com:3000/pathname/?search=test#hash";

	parser.protocol; // => "http:"
	parser.hostname; // => "example.com"
	parser.port; // => "3000"
	parser.pathname; // => "/pathname/"
	parser.search; // => "?search=test"
	parser.hash; // => "#hash"
	parser.host; // => "example.com:3000"