by Ossi Hanhinen, @ohanhi
with the support of Futurice 💚.
Licensed under CC BY 4.0.
// 🔥 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 | |
}); | |
} |
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!
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; |
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:
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;
<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> |
{ | |
"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", |
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):
/** | |
* 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 } |