Igor Volnyi igorvolnyi

This is solution for the infamous problem of absense of established DRY mechanism for defining data in models and migrations for Sequelize.js.

Migrations such as adding or altering a column still must be made manually, but I think it's solvable using this solution too.

Some references

https://stackoverflow.com/questions/27835801/how-to-auto-generate-migrations-with-sequelize-cli-from-sequelize-models/ https://stackoverflow.com/questions/21105748/sequelize-js-how-to-use-migrations-and-sync/

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

Keep pre-existing DOM alive in Vue

For my use cases, Vue has one critical pitfall: I frequently have/want to use Vue components with <slot>s as wrappers for content from a CMS which I don't have control over. That is, the content comes over the wire via HTML, and I have to activate Vue for some of it.

<interactive-element>
  <p>Slot content I don't have control over</p>
</interactive-element>
I need to activate the Vue component <interactive-element>.

This is about how to split a GitHub pull request, following a real in-the-wild example.

So it happened that I once wanted to fix a bug (#832) on the shelljs repository.

I forked the repository, cloned it and created a new branch called ln-directory-dest. I fixed the bug, created a pull request, and implemented initial review feedback.

At this point, I had added the commits A, B, C, D, E and [F](https://github.com/Loilo/shelljs/commit/946ab48bf5cf9c8aac03407

Make Vue events bubble

Vue events don't bubble the component tree themselves. However when writing wrapper components this can be the desired behaviour.

This code registers a global bubble directive which allows to re-emit all given events:

Let's say we want to bubble events start, accelerate and brake of our component Car.

Without any help, we'd roughly have to do this:

Rangeslider

This is a small Rangeslider library. It's probably not production ready yet (i.e. not been tested in a production project), therefore it's just a Gist and not a fully-blown GitHub repo.

Try it out in this CodePen!

I created this because no existing library met all my criteria:

no heavy-weight third-party dependencies (i.e. no jQuery)

	function magicMethods (clazz) {
	// A toggle switch for the __isset method
	// Needed to control "prop in instance" inside of getters
	let issetEnabled = true

	const classHandler = Object.create(null)

	// Trap for class instantiation
	classHandler.construct = (target, args) => {
	// Wrapped class instance

	// Arbitrarily nested object containing Promises goes in
	// Plain data structure comes out
	async function deepAsync (object) {
	// Walk arrays
	if (Array.isArray(object)) {
	return Promise.all(object.map(async item => await deepAsync(item)))

	// Walk objects
	} else if (object instanceof Object) {
	return Object

	function createProgrammer(name) {
	const programmer = { name };
	return {
	...programmer,
	...canCode(programmer)
	};
	}

	function canCode({ name }) {
	return {

	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<title>Drag-n-drop на чистом JS</title>
	</head>
	<body>