Nina Kitsu ninetails

Examples for how to create your own info panel, warning box and other decent looking notification in GitHub markdown.

All the boxes are single/two cell tables or two row tables.

Warning box

❗ You have to read about this

I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.

But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.

Svelte is a language.

Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?

A few projects that have answered this question:

An exploration of the different render methods available in react-enzyme.

XT.js

Let's close the ultra-small library cycle with some awesome array-based templating. 323 bytes minified.

How to obtain

Just download the minified version here or include it into your code:

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.

	const bypass = [
	// function names to avoid logging
	];
	const collapsed = [
	// function names to groupCollapsed
	];

	module.exports = function(babel) {
	const { types: t } = babel;
	const wrapFunctionBody = babel.template(`{

	// per https://docs.npmjs.com/misc/scripts, npm exposes a bunch of variables to
	// the environment prefixed with npm_config_, npm_package_ and npm_lifecycle_*.
	// Here's a list of all variables exposed in my setup.

	npm_config_access=
	npm_config_allow_same_version=
	npm_config_also=
	npm_config_always_auth=
	npm_config_argv='{"remain":[],"cooked":["run","foo"],"original":["run","foo"]}'
	npm_config_auth_type=legacy

	import React from 'react';
	import {render} from 'react-dom';
	import memoize from 'memoization';

	const Foo = ({number}) => {
	console.log(`Rendering with number= ${number}`);
	return <div>{number}</div>
	};

	// `memoize` caches the return value of a function.

	var webpack = require('webpack');
	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var path = require('path');
	var folders = {
	APP: path.resolve(__dirname, '../app'),
	BUILD: path.resolve(__dirname, '../build'),
	BOWER: path.resolve(__dirname, '../bower_components'),
	NPM: path.resolve(__dirname, '../node_modules')
	};