~wuz/wuz.sh

0cbd27c41768f7175f1091608eb0aa17ecbd937f — Conlin Durbin 4 months ago 23f1364
Update deno post
6 files changed, 206 insertions(+), 307 deletions(-)

M .eleventy.js
M index.html
M writing.html
M writing/deno.md
D writing/getting_started_with_deno.md
R writing/{introducting_runcli.md => introducing_runcli.md}
M .eleventy.js => .eleventy.js +122 -128
@@ 1,132 1,126 @@
const markdownIt = require("markdown-it");
const mdAttrs = require("markdown-it-attrs");
const mdContainer = require("markdown-it-container");
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const { format } = require("date-fns");
const pluginRss = require("@11ty/eleventy-plugin-rss");
let Nunjucks = require("nunjucks");
const markdownIt = require('markdown-it');
const mdAttrs = require('markdown-it-attrs');
const mdContainer = require('markdown-it-container');
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
const { format } = require('date-fns');
const pluginRss = require('@11ty/eleventy-plugin-rss');
let Nunjucks = require('nunjucks');

const { codepen } = require("./shortcode-templates");
const { codepen } = require('./shortcode-templates');

module.exports = (config) => {
  let env = process.env.ELEVENTY_ENV;

  let nunjucksEnvironment = new Nunjucks.Environment(
    new Nunjucks.FileSystemLoader("_includes")
  );

  config.setLibrary("njk", nunjucksEnvironment);

  config.addLayoutAlias("post", "layouts/post.njk");
  config.addPassthroughCopy("fonts");
  config.addPassthroughCopy("js");
  config.addPassthroughCopy("sw.js");
  config.addPassthroughCopy("assets");
  config.addPlugin(pluginRss);
  config.addPlugin(syntaxHighlight);
  config.addFilter("prettyDate", function (value) {
    const date = new Date(value);
    return format(date, "MMM do yyyy");
  });

  config.addFilter("log", function (value) {
    console.log(value);
  });

  config.addShortcode("github", function (repo) {
    return `[${repo.replace("https://github.com/", "")}](${repo})`;
  });

  config.addFilter("garden_stage", function (stage = 0) {
    const stages = [
      `This post is still in the early stages. Beware - here be mental dragons!`,
      `This post is growing. The basic thoughts are here, but they haven't been fully fleshed out.`,
      `This post is in bloom. It's fleshed out and unlikely to change.`,
      `This post is wilting. The ideas here don't represent my current thought process.`,
    ];
    return stages[Number(stage)];
  });

  config.addFilter("garden_stage_icon", function (stage = 0) {
    const stagesIcon = [`🌧`, `🌱`, `💐`, `🥀 `];
    return stagesIcon[Number(stage)];
  });

  config.addShortcode("codepen", function (pen, options, height) {
    const html = codepen(pen, options, height);
    console.log(html);
    return html;
  });

  config.addShortcode("twitter", function (id) {
    return `${id}`;
  });

  config.addShortcode("tweet", function (id) {
    return `${id}`;
  });

  config.addShortcode("medium", function (id) {
    return `https://medium.com/${id}`;
  });

  config.addShortcode("youtube", function (id) {
    return `https://medium.com/${id}`;
  });

  config.addShortcode("devto", function (link) {
    return `https://dev.to/${link}`;
  });

  config.addShortcode("devcomment", function (link) {
    return `https://dev.to/${link}`;
  });

  config.addShortcode("glitch", function (app, screen = "app") {
    return `https://glitch.com/embed/#!/${app}`;
  });

  const now = new Date();

  const livePosts = (post) => post.date <= now && !post.data.draft;
  config.addCollection("posts", (collection) => {
    return [
      ...collection.getFilteredByGlob("./writing/*.md").filter(livePosts),
    ].reverse();
  });

  config.addCollection("postFeed", (collection) => {
    return [...collection.getFilteredByGlob("./writing/*.md").filter(livePosts)]
      .reverse()
      .slice(0, 5);
  });

  let options = {
    html: true,
    breaks: true,
    linkify: true,
    typographer: true,
  };

  const md = markdownIt(options);

  // md.use(mdContainer, "aspect", {
  //   validate: function(params) {
  //     return params.trim().match(/^aspect\s+(.*)$/);
  //   },

  //   render: function(tokens, idx) {
  //     var m = tokens[idx].info.trim().match(/^aspect\s+(.*)$/);

  //     if (tokens[idx].nesting === 1) {
  //       // opening tag
  //       return `<figure style="--aspect-ratio:${md.utils.escapeHtml(m[1])}">`;
  //     } else {
  //       // closing tag
  //       return "</figure>\n";
  //     }
  //   }
  // });
  md.use(mdAttrs);
  config.setLibrary("md", md);
	let env = process.env.ELEVENTY_ENV;

	let nunjucksEnvironment = new Nunjucks.Environment(new Nunjucks.FileSystemLoader('_includes'));

	config.setLibrary('njk', nunjucksEnvironment);

	config.addLayoutAlias('post', 'layouts/post.njk');
	config.addPassthroughCopy('fonts');
	config.addPassthroughCopy('js');
	config.addPassthroughCopy('sw.js');
	config.addPassthroughCopy('assets');
	config.addPlugin(pluginRss);
	config.addPlugin(syntaxHighlight);
	config.addFilter('prettyDate', function (value) {
		const date = new Date(value);
		return format(date, 'MMM do yyyy');
	});

	config.addFilter('log', function (value) {
		console.log(value);
	});

	config.addShortcode('github', function (repo) {
		return `[${repo.replace('https://github.com/', '')}](${repo})`;
	});

	config.addFilter('garden_stage', function (stage = 0) {
		const stages = [
			`This post is still in the early stages. Beware - here be mental dragons!`,
			`This post is growing. The basic thoughts are here, but they haven't been fully fleshed out.`,
			`This post is in bloom. It's fleshed out and unlikely to change.`,
			`This post is wilting. The ideas here don't represent my current thought process.`,
		];
		return stages[Number(stage)];
	});

	config.addFilter('garden_stage_icon', function (stage = 0) {
		const stagesIcon = [`🌧`, `🌱`, `💐`, `🥀 `];
		return stagesIcon[Number(stage)];
	});

	config.addShortcode('codepen', function (pen, options, height) {
		const html = codepen(pen, options, height);
		console.log(html);
		return html;
	});

	config.addShortcode('twitter', function (id) {
		return `${id}`;
	});

	config.addShortcode('tweet', function (id) {
		return `${id}`;
	});

	config.addShortcode('medium', function (id) {
		return `https://medium.com/${id}`;
	});

	config.addShortcode('youtube', function (id) {
		return `https://medium.com/${id}`;
	});

	config.addShortcode('devto', function (link) {
		return `https://dev.to/${link}`;
	});

	config.addShortcode('devcomment', function (link) {
		return `https://dev.to/${link}`;
	});

	config.addShortcode('glitch', function (app, screen = 'app') {
		return `https://glitch.com/embed/#!/${app}`;
	});

	const now = new Date();

	const livePosts = (post) => post.date <= now && !post.data.draft;
	config.addCollection('posts', (collection) => {
		return [...collection.getFilteredByGlob('./writing/*.md').filter(livePosts)].reverse();
	});

	config.addCollection('postFeed', (collection) => {
		return [...collection.getFilteredByGlob('./writing/*.md').filter(livePosts)].reverse().slice(0, 5);
	});

	let options = {
		html: true,
		breaks: true,
		linkify: true,
		typographer: true,
	};

	const md = markdownIt(options);

	// md.use(mdContainer, "aspect", {
	//   validate: function(params) {
	//     return params.trim().match(/^aspect\s+(.*)$/);
	//   },

	//   render: function(tokens, idx) {
	//     var m = tokens[idx].info.trim().match(/^aspect\s+(.*)$/);

	//     if (tokens[idx].nesting === 1) {
	//       // opening tag
	//       return `<figure style="--aspect-ratio:${md.utils.escapeHtml(m[1])}">`;
	//     } else {
	//       // closing tag
	//       return "</figure>\n";
	//     }
	//   }
	// });
	md.use(mdAttrs);
	config.setLibrary('md', md);
};

M index.html => index.html +4 -5
@@ 7,9 7,7 @@ title: Howdy, I'm Wuz!
	<header class="pos:rel">
		<h1 class="typescale:17 wght:900 text-gradient:hacker">Howdy, I'm Wuz.</h1>
	</header>
	<h2 class="typescale:8 margin:1:bottom">
		Software engineer working to help other engineers learn and grow.
	</h2>
	<h2 class="typescale:8 margin:1:bottom">Software engineer working to help other engineers learn and grow.</h2>
	<div>
		<h3 class="typescale:6">Current Focuses</h3>
		<ul>


@@ 21,12 19,13 @@ title: Howdy, I'm Wuz!
	<div>
		<h3 class="typescale:6">Recent Writing</h3>
		<ul>
			{%- for post in collections.writing reversed -%} {% if post.data.stage >= 2 %}
			{%- for post in collections.writing reversed -%} {% if post.data.draft %} {% else %} {% if post.data.stage
			>= 2 %}
			<li>
				<a href="{{post.url}}">{{ post.data.title }}</a> |
				<time datetime="{{page.date}}"> {{ post.date | prettyDate }} </time>
			</li>
			{% endif %} {%- endfor -%}
			{% endif %} {% endif %} {%- endfor -%}
		</ul>
	</div>
	<div>

M writing.html => writing.html +3 -3
@@ 5,10 5,10 @@ layout: layouts/index

<h1 class="typescale:9 wght:800 margin:2:bottom">Wuz's Binary Botanicals</h1>
<p class="margin:2:bottom">
	This is a space for half-finished thoughts and notes to take the time they need to bloom into something fully
	formed.
	A lens into my brain existing in a liminal space somewhere between a blog and stream of conciousness. Here be
	half-finished thoughts, freshly baked posts, and underwatered notes. Change will happen, updates are inevitable.
</p>
<strong>Legend</strong>
<strong>How these posts work</strong>
<ul>
	<li>🌧 - This post is still in the early stages. Beware - here be mental dragons!</li>
	<li>🌱 - This post is growing. The basic thoughts are here, but they haven't been fully fleshed out.</li>

M writing/deno.md => writing/deno.md +76 -96
@@ 1,96 1,76 @@
---
date: 2019-04-12T23:10:14.789Z
title: Getting started with Deno
description: A new runtime for Javascript and Typescript from the founder of Node
stage: 2
---

> **Edit:** Deno has hit 1.0 and with it, there has been some major discussion around whether the project needs an explicit CoC. The original maintainer seems to think it doesn't and I can't recommend that you use Deno until they do.
> **A Code of Conduct is a necessary part of any open source project.**

![People in dino suits dancing](https://media.giphy.com/media/3rgXBvnbXtxwaWmhr2/giphy.gif) {style="--aspect-ratio:16/9"}

In case you missed it, the new Javascript and Typescript runtime from Ryan Dahl,
the creator of Node, [has been released](https://deno.land/)! It's got some
really cool features and is ready for public use! Let's look at a few of the
neat features and get started with a simple hello world!

## What is Deno?

Deno is a new runtime for Typescript (and Javascript) written mostly in Rust. It
has some [great goals](https://deno.land/manual.html#goals) and some very
interesting "Non-Goals", like not using `npm` and not having a package.json.

## Getting it installed

Installing deno is as easy as running this command:

`curl -fsSL https://deno.land/x/install/install.sh | sh`

Then copy the `export` line and add it to your `~/bashrc` or `~/bash_profile`.

Open a new terminal and run `deno`. You should get a `>` prompt. Type `exit` and
let's dig into some features!

## Cool features in Deno

### Typescript by default

Deno is integrated to run Typescript files by default. It basically makes types
in Javascript a first-class citizen. No more compiling through Babel to use
Typescript in server-side Javascript.

### Importing from a URL

Deno lets you import from the web, just like you can in the browser. Just add a
URL where you would usually name a module:

```ts
import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts";
```

### A Standard Library

Furthermore, Deno has a standard library that is easy to import and use. There
are modules that do a couple of different things, like HTTP handling, datetime
work, and file system work. You can check it out
[here](https://github.com/denoland/deno_std).

### Uses ES modules

Finally, Deno only supports ES module syntax, which means no more `require()`
statements, just good ole' `import x from "y"`.

## Hello World Example

Let's look at a quick Hello World that highlights a few of those features!

Copy this into a `hello-world.ts` file.

```ts
import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts";

const sayHello = (name: string = "world") => {
  console.log(bgBlue(red(bold(`Hello ${name}!`))));
};

sayHello();

sayHello("Conlin");
```

You can now run that with `deno hello-world.ts` and it should print out some
stuff.

Change one of the `sayHello` calls to `sayHello(15);` and rerun it. You should
see a type error since 15 isn't a string! That's pretty cool!

You'll also notice how to import from a URL - it's getting some console color
stuff from the standard library!

# Final thoughts

Deno isn't quite ready for the production use - there are a couple
[bugs](https://deno.land/benchmarks.html#req-per-sec), but development is moving
forward quickly! This is definitely a cool new open source project and one to
keep an eye on!
---
title: "Getting started with Deno"
date: 2019-04-18T13:21:04.000Z
cover_image: https://i.giphy.com/media/l6O086UCmNZcc/giphy.gif
---
> **Edit:** Deno has hit 1.0 and with it, there has been some major discussion around whether the project needs an explicit CoC. The original maintainer seems to think it doesn't and I can't recommend that you use Deno until they do. 
> **A Code of Conduct is a necessary part of any open source project.**

In case you missed it, the new Javascript and Typescript runtime from Ryan Dahl, the creator of Node, [has been released](https://deno.land/)! It's got some really cool features and is ready for public use! Let's look at a few of the neat features and get started with a simple hello world!

![People in dino suits dancing](https://media.giphy.com/media/3rgXBvnbXtxwaWmhr2/giphy.gif) {style="--aspect-ratio:16/9"}

## What is Deno?

Deno is a new runtime for Typescript (and Javascript) written mostly in Rust. It has some [great goals](https://deno.land/manual.html#goals) and some very interesting "Non-Goals", like not using `npm` and not having a package.json.

## Getting it installed

Installing deno is as easy as running this command:

`curl -fsSL https://deno.land/x/install/install.sh | sh`

Then copy the `export` line and add it to your `~/bashrc` or `~/bash_profile`.

Open a new terminal and run `deno`. You should get a `>` prompt. Type `exit` and let's dig into some features!

## Cool features in Deno

### Typescript by default

Deno is integrated to run Typescript files by default. It basically makes types in Javascript a first-class citizen. No more compiling through Babel to use Typescript in server-side Javascript.

### Importing from a URL

Deno lets you import from the web, just like you can in the browser. Just add a URL where you would usually name a module:

```ts
import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts";
```

### A Standard Library

Furthermore, Deno has a standard library that is easy to import and use. There are modules that do a couple of different things, like HTTP handling, datetime work, and file system work. You can check it out [here](https://github.com/denoland/deno_std).

### Uses ES modules

Finally, Deno only supports ES module syntax, which means no more `require()` statements, just good ole' `import x from "y"`.

## Hello World Example

Let's look at a quick Hello World that highlights a few of those features!

Copy this into a `hello-world.ts` file.

```js
import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts";

const sayHello = (name: string = "world") => {
  console.log(bgBlue(red(bold(`Hello ${name}!`))));
}


sayHello();

sayHello("Conlin");
```

You can now run that with `deno hello-world.ts` and it should print out some stuff.

Change one of the `sayHello` calls to `sayHello(15);` and rerun it. You should see a type error since 15 isn't a string! That's pretty cool!

You'll also notice how to import from a URL - it's getting some console color stuff from the standard library!

# Final thoughts

Deno isn't quite ready for the production use - there are a couple [bugs](https://deno.land/benchmarks.html#req-per-sec), but development is moving forward quickly! This is definitely a cool new open source project and one to keep an eye on!
\ No newline at end of file

D writing/getting_started_with_deno.md => writing/getting_started_with_deno.md +0 -74
@@ 1,74 0,0 @@
---
title: "Getting started with Deno"
date: 2019-04-18T13:21:04.000Z
cover_image: https://i.giphy.com/media/l6O086UCmNZcc/giphy.gif
---
> **Edit:** Deno has hit 1.0 and with it, there has been some major discussion around whether the project needs an explicit CoC. The original maintainer seems to think it doesn't and I can't recommend that you use Deno until they do. 
> **A Code of Conduct is a necessary part of any open source project.**

In case you missed it, the new Javascript and Typescript runtime from Ryan Dahl, the creator of Node, [has been released](https://deno.land/)! It's got some really cool features and is ready for public use! Let's look at a few of the neat features and get started with a simple hello world!

## What is Deno?

Deno is a new runtime for Typescript (and Javascript) written mostly in Rust. It has some [great goals](https://deno.land/manual.html#goals) and some very interesting "Non-Goals", like not using `npm` and not having a package.json.

## Getting it installed

Installing deno is as easy as running this command:

`curl -fsSL https://deno.land/x/install/install.sh | sh`

Then copy the `export` line and add it to your `~/bashrc` or `~/bash_profile`.

Open a new terminal and run `deno`. You should get a `>` prompt. Type `exit` and let's dig into some features!

## Cool features in Deno

### Typescript by default

Deno is integrated to run Typescript files by default. It basically makes types in Javascript a first-class citizen. No more compiling through Babel to use Typescript in server-side Javascript.

### Importing from a URL

Deno lets you import from the web, just like you can in the browser. Just add a URL where you would usually name a module:

```ts
import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts";
```

### A Standard Library

Furthermore, Deno has a standard library that is easy to import and use. There are modules that do a couple of different things, like HTTP handling, datetime work, and file system work. You can check it out [here](https://github.com/denoland/deno_std).

### Uses ES modules

Finally, Deno only supports ES module syntax, which means no more `require()` statements, just good ole' `import x from "y"`.

## Hello World Example

Let's look at a quick Hello World that highlights a few of those features!

Copy this into a `hello-world.ts` file.

```js
import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts";

const sayHello = (name: string = "world") => {
  console.log(bgBlue(red(bold(`Hello ${name}!`))));
}


sayHello();

sayHello("Conlin");
```

You can now run that with `deno hello-world.ts` and it should print out some stuff.

Change one of the `sayHello` calls to `sayHello(15);` and rerun it. You should see a type error since 15 isn't a string! That's pretty cool!

You'll also notice how to import from a URL - it's getting some console color stuff from the standard library!

# Final thoughts

Deno isn't quite ready for the production use - there are a couple [bugs](https://deno.land/benchmarks.html#req-per-sec), but development is moving forward quickly! This is definitely a cool new open source project and one to keep an eye on!
\ No newline at end of file

R writing/introducting_runcli.md => writing/introducing_runcli.md +1 -1
@@ 1,5 1,5 @@
---
title: "Introducting RunCLI"
title: "Introducing RunCLI"
date: 2019-08-21T14:17:16.785Z

---