dimfeld

/**
 * This is intended to be used with the svelte `use` syntax. It examines all
 * child elements of the element that match `selector`, and calls the callback
 * when the child element with the highest percentage overlap with the visible
 * part of the container changes.
* <div use:mostVisibleElement={{ cb: setActive }}><section><section></div>
 */
export default function mostVisibleElement(
  container: Element,
  { selector, cb }

nltesown

Useful lodash expressions

Object: group properties by a given key prefix

Problem: given an object where some properties have keys starting with an arbitrary prefix, we want to transform it so that the corresponding properties are grouped under a prefix-key, and the original keys are renamed to drop the prefix.

Use case: js2xmlparser transforms JSON to XML. Object properties under a @ key (by default) are output as XML attributes.

Source (data):

nltesown

{
  "Fenêtre sur les collections": [
    {
      "id": 11001,
      "title": "Fossiles et autres traces du passé",
      "dates": ["2018-12-21"]
    },
    {
      "id": 11002,
      "title": "Jacques Colombat, le cinéma des copains",

gka

<h1>lazyload example</h1>

{#each [0,1,2,3,4,5,6,7,8,9] as i}
<p>Scroll down to load the images. Quo et qui laboriosam rerum. Animi et quia consequuntur quas sit eaque molestias. Accusamus voluptate nulla eligendi. Dolores labore ea asperiores ut voluptas dolorem. Cupiditate in enim quibusdam. Quas quae aliquam sed repellat laboriosam inventore est.</p>
<img alt="random image" use:lazyload src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=" data-src="https://picsum.photos/500/300/?image={i}" />
{/each}

<script>
	import { lazyload } from './lazyload.js';
</script>

nltesown

Eager navbar jQuery plugin

The navbar that's eager to show up and be sticky when you need it (scroll up) but apart from that acts naturally. Maybe I should call it something like half-sticky or sticky-up? Eager ain't bad either.

The gist of it: I wanted a script to give my top navbar this behavior:

• When the navbar is visible (at the top of the document), as the document is scrolled down, the navbar follows until it finally gets out of view: in other words, no special behavior.
• But whenever the document is scrolled up, the navbar immediately starts getting back into view as if its bottom was positioned just above the top of the viewport. Noteworthy: it does so by following the scroll exactly, which means that it can remain partially visible if the amount of scrolling up is not sufficient to show it completely. (No fancy animation to bring the element into view!)

CSS-wise, it is assumed that the navbar element is at the top of the layout and that it either is not positioned or has `position: relative;

marianoviola

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import buble from 'rollup-plugin-buble';
import uglify from 'rollup-plugin-uglify';
import postcss from 'postcss';
import postcssImport from 'postcss-import';
import postcssCssnext from 'postcss-cssnext';

const production = !process.env.ROLLUP_WATCH;

NigelEarle

Migrations & Seeding

What are migrations??

Migrations are a way to make database changes or updates, like creating or dropping tables, as well as updating a table with new columns with constraints via generated scripts. We can build these scripts via the command line using knex command line tool.

To learn more about migrations, check out this article on the different types of database migrations!

Creating/Dropping Tables

wesbos

// 🔥 Node 7.6 has async/await! Here is a quick run down on how async/await works

const axios = require('axios'); // promised based requests - like fetch()

function getCoffee() {
  return new Promise(resolve => {
    setTimeout(() => resolve('☕'), 2000); // it takes 2 seconds to make coffee
  });
}

ohanhi

Learning FP the hard way: Experiences on the Elm language

by Ossi Hanhinen, @ohanhi

with the support of Futurice 💚.

Licensed under CC BY 4.0.

Editorial note

nkbt

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },

  "plugins": ["react"],

  "ecmaFeatures": {