hereiscasio

Vue: Pass Slots through from Parent to Child Components

The Situation

We've got some components A, B and C which provide different slots.

const A = {
  template: `<div><slot name="a">Default A Content</slot></div>`
}

const B = {

Moving from lodash/fp to ramda

How

Good news is we're only using lodash/fp, which makes it easier to match function signatures.

Find most-used lodash methods, we'll convert these first maybe?
Go through each lodash method, find the ramda equivalent where possible
Write a codemod to rewrite those usages
Who the fuck thought function aliases were a good idea

一路过来也部署过3、4个Rails App了，其中也使用过mina等远程部署项目，但每次去部署新的App还是会遇到一些大大小小问题。最近和几个朋友正在做一个应用，在部署的过程中又被自己坑了~所以今天准备总结一下，方便自己未来的部署之路，也方便Rails新手学习使用。

#####环境说明因为Linux的发型版太多，所以不能一一举例，经过自己的实践体验，发现Ubuntu可以更轻松的部署您的Rails App（个人看法，曾经在Centos下部署，遇到了好多坑）。所以该博文将基于以下的部署环境。

操作系统：Ubuntu14.04
Rails：4.2.0
Ruby：2.2.1
Mysql: 5.6.22
Nginx: 1.8.0
Puma: 2.11.0

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Greensock CSS properties Cheat Sheet

I wrote this as a reference for myself because some of the property names are non-obvious, and there are a number of relevant special properties, and there is no central concise listing of them all in GSAP Docs, other than (in longer form) on the CSSPlugin page.

Standard CSS properties

...are all supported, with hyphenated-names becoming camelCaseNames. Non-animatable properties are also supported but they will be set at the beginning of the tween.

Special mentions:

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.

	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.

	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)()

	function generateAlphabets() {
	var alphabets = [];
	var start = 'A'.charCodeAt(0);
	var last = 'Z'.charCodeAt(0);
	for (var i = start; i <= last; ++i) {
	alphabets.push(String.fromCharCode(i));
	}

	return alphabets.join('');
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<!-- we use 'preload_' instead of 'preload' to make it testable in chrome -->
	<link rel="preload_" onload="console.log(this, 'script');" href="http://code.jquery.com/jquery-1.12.1.js" as="script" />
	<link rel="preload_" onload="console.log(this, 'style');" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" as="style" />
	<link rel="preload_" onload="console.log(this, 'font');" href="LatoLatin-Regular.woff" as="font" type="font/woff" crossorigin="" />

-// Credit to @steobrien from https://gist.github.com/rmehner/b9a41d9f659c9b1c3340#gistcomment-2940034
-// for modern browsers, this works:
-const dbs = await window.indexedDB.databases()
-dbs.forEach(db => { window.indexedDB.deleteDatabase(db.name) })
-// for older browsers, have a look at previous revisions of this gist.