Димон Дурак dimon-durak

Data Management

Baobab - JavaScript persistent and optionally immutable data tree with cursors

Mnemonist - Curated collection of data structures for the JavaScript language

TaffyDB - JavaScript library that provides powerful in-memory database capabilities to both browser and server applications

WatermelonDB - Next-gen database for powerful React and React Native apps that scales to 10,000s of records and remains fast

By default 11ty devmode uses browsersync to reload webbrowsers whenever it regenerates pages to _site. It does this automatically when template files change.

However, the .eleventy.js file is only loaded when 11ty starts so if you edit shortcodes (say) you need to stop and restart 11ty.

The solution is to use nodemon to restart 11ty automatically when the config file changes. But then you need to use browser F5 to refresh. The solution to that is to get browsersync to reload the browsers To achieve that, the 11ty browsersync config option allows you to define a callback when browsersync is ready and you can add a browser reload call there.

Here's example code from music-practice-tools

11ty - Parsing posts collection with tags

My code to parse posts or any other collection in 11ty.

Result

Order of the posts gets reversed, sorting by date.
Date format normalized (d.m.y).
Description shortened to 105 characters.
Undefined or empty tags are ignored.

A collapsible section containing markdown

Click to expand!

Heading

A numbered
list
- With some
- Sub bullets

	let parsingSplitter = '~';
	let strForParsing = 'Sherlock Holmes~221B Baker Street~London~UK';
	let parsingKeys = ['name', 'address', 'city', 'country'];

	const parse = (str, keys, splitter) => {
	const reStr = keys.reduce((s, k, i, a) => `${s}(?<${k}>.*)${ i + 1 < a.length ? splitter : ''}`,'');
	const RE = new RegExp(reStr);
	const { groups:parsedData } = RE.exec(str);
	return parsedData
	};

	- name: Setup Node.js
	uses: actions/setup-node@v2
	with:
	node-version: 16
	- name: Run zx script
	env:
	npm_config_yes: true
	run: npx zx script.js

	const fs = require("fs")

	const htmlmin = require("html-minifier")
	const pluginRss = require("@11ty/eleventy-plugin-rss")
	const markdown = require("@shawnsandy/ideas/lib/markdown")
	const image = require("@11ty/eleventy-img")
	const CleanCSS = require("clean-css")
	const eleventyNavigationPlugin = require("@11ty/eleventy-navigation")
	const take = ("lodash.take")

	// sass dependencies: `npm i -D sass`
	const util = require('util');
	const sass = require('sass');
	const renderSass = util.promisify(sass.render);

	// postcss dependencies: `npm i -D autoprefixer postcss precss`
	const autoprefixer = require('autoprefixer');
	const postcss = require('postcss');
	const precss = require('precss');
	const postcssProcessor = postcss([precss, autoprefixer]);

	import { promises as fs } from "fs";
	import * as path from "path";
	import * as jsyaml from "js-yaml";
	import { fileURLToPath } from "url";
	import MarkdownIt from "markdown-it";
	const mdit = new MarkdownIt({});

	const __dirname = path.dirname(fileURLToPath(import.meta.url));
	const srcdir = path.resolve(__dirname, "./src");
	const builddir = path.resolve(__dirname, "./build");

	*.img
	*.raw