Simply put, embedded JS template engines are template engines that allow you to write JS within delimiters of the template engine to control the data that is rendered.

## Example

Take a look at this Eta template.

```ejs
<% if (it.displayName) { %>
    Name: <%= it.displayName %>
<% } %>
```

You can see how we are writing JS in the appropriate delimiters to control what data is rendered and how it is rendered.

That's really all an embedded JS template engine is, so see you next time!

Simply put, embedded JS template engines are template engines that allow you to write JS within delim...

What is an Embedded JS Template Engine?

shadowtime2000

---
title: Using Data URLs to Load Dependencies in Deno
published: true
date: 2021-01-31 17:43:27 UTC
tags: JavaScript,TypeScript,WebDevelopment
canonical_url: https://levelup.gitconnected.com/using-data-urls-to-load-dependencies-in-deno-18461713ec1e
cover_image: https://miro.medium.com/max/1050/1*tT9kikTTSAI04T95AiRWuw.png
---

Recently [Deno released 1.7.0](https://deno.land/posts/v1.7) which had [support for data URLs](https://deno.land/posts/v1.7#support-for-importing-data-urls). I think this is a pretty cool way to dynamically create modules on the fly when paired with `import()`. This could be used to dynamically load all the dependencies we want to use in our file at once.

## Data URLs

Data URLs are basically URLs but with data encoded in some form so that instead of a link to data, it holds the data inside itself. Data URLs first need to start with `data:`. We then need to append the MIME type of the file we are loading, in this case `application/typescript` but we could also do `application/javascript`. After we append the format for encoding the file, in this tutorial we will be using `base64` and you also append a `,` followed by the actual encoding of the file.

### An Example

Imagine we have this file:

```ts
export const add = (a: number, b: number) => a + b;
```
and we want to import it from a data URL. Then we would first get the boilerplate.
```ts
const { add } = await import("data:application/typescript;base64,");
```
Then we need to append the base64 encoding. For this it is
```
ZXhwb3J0IGNvbnN0IGFkZCA9IChhOiBudW1iZXIsIGI6IG51bWJlcikgPT4gYSArIGI7
```
So the final code is:
```ts
const { add } = await import("data:application/typescript;base64,ZXhwb3J0IGNvbnN0IGFkZCA9IChhOiBudW1iZXIsIGI6IG51bWJlcikgPT4gYSArIGI7");
```
and it will correctly export the `add` function.

## Loading Dependencies

Now that we know how to use them, let’s create a helper function to load dependencies. Let’s first create the type definition.
```ts
interface Dependency {
 url: string;
 name: string;
}
function loadDependencies(deps: Dependency[]) {
}
```
We want to create a variable for the data URL to import and a variable for the source code of the import. We also want to loop over the `deps` array.
```ts
function loadDependencies(deps: Dependency[]) {
 let code = "";
 let dataURL = "data:application/typescript;base64,";
 deps.forEach({ url, name} => {
  
 });
}
```
Now let’s append exports to `code for` each dependency.
```ts
function loadDependencies(deps: Dependency[]) {
 let code = "";
 let dataURL = "data:application/typescript;base64,";
 deps.forEach(({ url, name }) => {
  code += `export * as ${name} from "${url}"`;
 });
}
```
Now let’s encode that. We also have to add a dependency to the standard library.
```ts
import { encode } from "https://deno.land/std@0.84.0/encoding/base64.ts";
```
Now let’s do the finishing parts.
```
function loadDependencies(deps: Dependency[]) {
 let code = "";
 let dataURL = "data:application/typescript;base64,";
 deps.forEach(({ url, name }) => {
  code += `export * as ${name} from "${url}"`;
 });
 dataURL += encode(code);
 return import(dataURL);
}
```
And 🎉you can import dependencies with it!
```ts
const deps = await loadDependencies([{ name: "aleph", url: "https://deno.land/x/aleph/mod.ts" }]);
```
---
*If you liked this article I suggest you check out other articles of mine on [my blog](https://h.shadowtime2000.com).*

Recently Deno released 1.7.0 which had support for data URLs. I think this is a pretty cool way to dy...

Using Data URLs to Load Dependencies in Deno

---
title: What is Cache Busting?
published: true
date: 2021-01-30 19:07:08 UTC
tags: JavaScript,WebPerf,WebDevelopment
canonical_url: https://medium.com/javascript-in-plain-english/what-is-cache-busting-55366b3ac022
cover_image: https://miro.medium.com/max/1050/1*gEWzRXuH1KaPAgOVfegeug.png
---

Cache busting is a technique so that browsers can have long caches on files while having them reload files when they change. Before you can understand that, you have to understand how caching works with websites.

## Caching Your Website

When you want browsers to cache files so that users don’t have to reload them every time they visit your website, you use HTTP caching. [HTTP caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching) allows you to specify how long a cache should be held for a file name, so that loading the page is pretty fast. Now let’s look into the problem.

## The Problem with Caching

Imagine you have a website with 3 files, `index.html`, `index.js`, and `index.css` and you set the cache lifetime to 1 year so that the website loads pretty fast. Now you change the `index.css` to have a different color scheme across your app. Your old users wouldn’t notice because they would have to wait a year for the cache to refresh.

That becomes a problem, especially when deploying bug fixes and security patches. People typically use cache busting to solve this, where they use various ways to change the names of the files that are loading for every version so that browsers will load them and add them to their cache.

## Cache Busting

There are a couple different ways of changing the names of files so that they will load when they change. One way is to use version numbers and have them somewhere in the file name when loading. You could have a subdirectory for every version, `v1/index.js`, `v2/index.css`. You could also have the version in queries in the URLs, `index.js?v1` , `index.css?v2`.

Another way is to change the name of the file, `index.v1.js`, `index.v2.css`. These ways are not as manageable because this can become very hard once you have a ton of files that are being changed.

A more popular and manageable way is to keep hashes inside the file names. Hashes, if you don’t know, are fixed length character representations of any content and they are irreversible, meaning you can get the hash from the file but you can’t get the file from the hash. Hashes are perfect for this, because when a file changes its hash will change, so if we keep the hash inside the filename `index.[someHashHere].js` browsers will detect it and load it instead of an old file.

## Conclusion

In this post I talked about the problem with having long caches without cache busting and different ways to cache bust your app.

📚 Further reading:  
[HTTP Caching on MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching)  
[Hashing Files with Webpack](https://webpack.js.org/guides/caching/)

*If you liked this article I suggest you check out other articles of mine at [my blog](https://h.shadowtime2000.com).*
*Originally published on [JavaScript in Plain English](https://medium.com/javascript-in-plain-english/what-is-cache-busting-55366b3ac022)*.

Cache busting is a technique so that browsers can have long caches on files while having them reload...

What is Cache Busting?

---
title: Tagged Template Literals in a Nutshell
published: true
date: 2021-01-27 02:14:51 UTC
tags: JavaScript
canonical_url: https://h.shadowtime2000.com/tagged-template-literals-in-a-nutshell
cover_image: https://carbon.now.sh/?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=solarized+dark&wt=none&l=javascript&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=taggedTemplateLiteralFunction%2560%250A%2509my%2520%2524%257Btagged%257D%2520template%2520%2524%257Bliteral%2520%252B%2520%2522function%2522%257D%250A%2560%253B
---

Hi, in this post I will be writing about tagged template literals. Tagged template literals are like normal template literals but with more control given to functions you pass these as parameters to.

## Syntax

The syntax for tagged template literals is pretty simple. It uses backticks like normal template literals and allows you to have JavaScript expressions inside `${}` parts. Tagged template literals can only be used on functions though and when you are using them you omit the parentheses on the function call.
```js
taggedTemplateLiteralFunc`
	the stuff i put ${here}
`
```

## What They Do

So basically, instead of just calling the function as if it was a simple template literal being put as the first argument, it will take the string and compose it into a couple arguments which are called. It will follow the loop of taking all the string until it finds an interpolated expression, add that to one array, then take the value of that expression, and add that to another array. The JS engine will follow that loop until it reaches the end of the template literal. The first argument to the function is the first array, and then the second array is spread as if the `...` spread operator was used on it as all of the rest of the arguments of the function. 

This is an example of the same function being called with the same parameters just without the tagged template literals:
```js
myFunction`
1 + 2 = ${1 + 2}3 + 51 = ${3 + 51} = ${3 + 51}
`

myFunction(["1 + 2 = ", "3 + 51 = ", " = "], 3, 54, 54);
```

> 📚 Reading more:
> [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates)

## Other Articles You Might Like

1. [What is ES6 Tree Shaking](https://h.shadowtime2000.com/what-is-es6-tree-shaking)
2. [Everything You Don't Know About ES Modules](https://h.shadowtime2000.com/everything-you-dont-know-about-es-modules)

Hi, in this post I will be writing about tagged template literals. Tagged template literals are like...

Tagged Template Literals in a Nutshell

How do you tell if a project is maintained? Is it commit activity release activity the rate at which maintainers respond to issues and PRs or a combination of that?

How do you tell if a project is maintained? Is it commit activity release activity the rate at which...

discuss

How do You Tell if a Project is Maintained?

---
title: Simple Chakra UI Card
published: true
date: 2021-01-17 20:55:53 UTC
tags: React,JavaScript,CSS
canonical_url: https://h.shadowtime2000.com/simple-chakra-ui-card
---

## Simple Chakra UI Card

I am currently creating a blog with Chakra UI, so I need a card which can be created with it. This is just basically a small snippet.

### The Card

```jsx
function BlogPost() {
  return (
    <Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
        <Box m="5" as="a" href="/blog-post-thing">
          <Heading m="5" mb="0" as="h4" size="md">Blog Post</Heading>
          <Text m="5" mt="0">My cool blog post</Text>
        </Box>
    </Box>
  )
}
```

### Demo

{% codesandbox o8f34 %}

## Conclusion

Yeah, that's basically it. This is my first time using Chakra UI so if you have any suggestions please share them.

Simple Chakra UI Card   I am currently creating a blog with Chakra UI, so I need a card whic...

Simple Chakra UI Card

How good are you at CSS?

I am absolutely trash, I simply am just not that good at it.

What about you?

How good are you at CSS?  I am absolutely trash, I simply am just not that good at it.  What about yo...

How Good are You at CSS?

---
title: List of JS Bundlers 🚀
published: true
date: 2021-01-12 23:47:32 UTC
tags: JavaScript,Nodejs,WebDevelopment,WebPerf
canonical_url: https://h.shadowtime2000.com/list-of-js-bundlers
---

## List of JS Bundlers

In [my previous article about ES6 tree shaking](https://h.shadowtime2000.com/what-is-es6-tree-shaking) a [reader commented suggesting that I add a list of bundlers that support tree shaking to the bottom of the article](https://dev.to/aidenybai/comment/1a057). Instead I am going to create a list of JS bundlers.

1. [Webpack](https://webpack.js.org)

2. [Rollup](https://www.rollupjs.org/guide/en/)

3. [Parcel](https://parceljs.org/)

4. [esbuild](https://esbuild.github.io/)

5. [SWC](https://swc.rs)

6. [Pax](https://pax.js.org/)

7. [Bundl](https://bundljs.org/)

8. [Klap](https://www.npmjs.com/package/klap)

9. [Brunch](https://brunch.io/)

10. [Microbundle](https://www.npmjs.com/package/microbundle)

11. [Packem](https://packem.github.io/)

12. [Lasso](https://www.npmjs.com/package/lasso)

13. [Browserify](http://browserify.org/)

14. [FuseBox](https://fuse-box.org/)

15. [Metro](https://github.com/facebook/metro)

16. [Module Concat](https://github.com/bminer/module-concat)

17. [Bit Bundler](https://bundler.bitjs.io/)

18. [SystemJS Builder](https://www.npmjs.com/package/systemjs-builder)

19. [Steal](https://stealjs.com/)

20. [Blade Runner](http://bladerunnerjs.org/)

21. [Rome](https://rome.tools/)

### Other Articles You Might Like

1. [What is ES6 Tree Shaking?](https://h.shadowtime2000.com/what-is-es6-tree-shaking)

2. [Everything You Don't Know About ES Modules](https://h.shadowtime2000.com/everything-you-dont-know-about-es-modules)

Feel free to suggest any more bundlers that I can add to the list in the comments!

List of JS Bundlers   In my previous article about ES6 tree shaking a reader commented sugge...

List of JS Bundlers 🚀

---
title: 🚀14 JS Template Engines🚀
published: true
date: 2021-01-12 06:04:29 UTC
tags: JavaScript,Nodejs,Express,backend
canonical_url: https://h.shadowtime2000.com/14-js-template-engines
---

## 🚀14 JS Template Engines🚀

This is a list of 14 JS template engines.

### [EJS](https://ejs.co)

![EJS Logo](https://ejs.co/favicon.svg)

EJS is a pretty popular template engine, it stands for Embeddable JavaScript because it runs with just JavaScript inside it's tags.

### [Mustache](https://mustache.github.io/)

Mustache is actually a template engine specification with implementations of that spec in multiple different programming languages. It does have an implementation in JS. It uses "logic-less" templates where there are predefined ways to do stuff with data such as looping and displaying.

### [Handlebars](https://handlebarsjs.com/)

![Handlebars Logo](https://cdn.tutsplus.com/net/uploads/2013/07/handlebars-behind-scenes-retina-preview.jpg)

Handlebars is an extension of the Mustache template engine with some modifications to partials and [a couple more features](https://www.npmjs.com/package/handlebars#differences-between-handlebarsjs-and-mustache). 

### [Pug/Jade](https://pugjs.org/api/getting-started.html)

![Pug Logo](https://cdn.dribbble.com/users/1057/screenshots/5978248/pug_1x.jpg)

Pug is one of the template engines which is meant only for HTML rendering. It uses indented whitespace sensitive syntax to write tags and such. It's typically called Pug/Jade because [it's previous name was Jade before it was changed to Pug because of copyright issues](https://github.com/pugjs/pug#rename-from-jade). The templating part allows you to write JS inside of it to use data to render stuff.

### [Lodash](https://docs-lodash.com/v4/template/)

![Lodash Logo](https://logo.kenh.net/logo/lodash.svg.jpg)

You may be thinking, *Lodash is a JS utility library so why is it listed as a template engine?* Well, Lodash has [a utility known as `lodash.template`](https://docs-lodash.com/v4/template/) which is pretty much like EJS.

### [doT](https://olado.github.io/doT/)

![doT Logo](https://olado.github.io/doT/doT-js-100@2x.png)

doT is a template engine which uses a mixture of embeddable JS and some predefined syntax within tags.

### [Nunjucks](http://mozilla.github.io/nunjucks/)

![Nunjucks Logo](https://css-tricks.com/wp-content/uploads/2017/05/nunjucks.png)

You have probably heard of this template engine if you have used 11ty because it seems to be mainly used there. Nunjucks was created by Mozilla and is inspired by Jinja2, a Python template engine. It uses predefined syntax within tags.

### [Liquid](https://liquidjs.com/)

![Liquid Logo](https://i.ytimg.com/vi/848QV4H0IDE/maxresdefault.jpg)

Liquid is another cross language template engine with the original implementation being written in Ruby and various JS ports existing. It uses syntax kind of like Nunjucks.

### [Squirrelly](https://squirrelly.js.org/)

![Squirrelly Logo](https://avatars2.githubusercontent.com/u/48598909?s=200&v=4)

Squirrelly is a semi-embeddable template engine which emphasizes on low bundle size (4KB), pluggability, configurability, and fast performance.

### [Eta](https://eta.js.org)

![Eta Logo](https://avatars2.githubusercontent.com/u/62761422?s=400&u=9787a482342d01fe7e433f9cfe2e1470b5b0c0e3&v=4)

Eta is an embeddable template engine with almost completely compatible syntax of EJS and emphasizes on low bundle size (<3KB minzipped), pluggability, configurability, and fast performance. Interestingly Eta is created by the same person who made Squirrely, and intended Eta to be a lot smaller. Eta has a very similar codebase when compared with Squirrelly. 

(Diclaimer: I am a maintainer of Eta)

### [Hogan](https://twitter.github.io/hogan.js/)

Hogan is a JS implementation of the Mustache spec by Twitter. It has the same syntax and stuff, but the implementation with rendering and compilation is different.

### Swig

Swig is another JS template engine with syntax like Nunjucks.

### [ECT](http://ectjs.com/)

ECT is an embeddable template engine which uses CoffeeScript instead of JavaScript for embedded code.

### [Dust](http://www.dustjs.com/)

DustJS is another "logic-less" template engine but has support for advanced features such as async streaming. 

You might also like:

[How to Create a Template Engine in JS](https://hackernoon.com/how-to-create-new-template-engine-using-javascript-8f26313p)

🚀14 JS Template Engines🚀   This is a list of 14 JS template engines.           EJS     EJS i...

🚀14 JS Template Engines🚀

---
title: Adding Auto Caching to Our Template Engine
published: true
date: 2021-01-11 06:37:38 UTC
tags: JavaScript,Nodejs,WebDevelopment,Express
canonical_url: https://h.shadowtime2000.com/adding-auto-caching-to-our-template-engine
cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1610563182547/yhNZ3JME0.png?w=1600&amp;h=840&amp;fit=crop&amp;crop=entropy&amp
series: Creating a JS Template Engine
---

In one of my articles, I showed you how to [create a simple JS template engine](https://hackernoon.com/how-to-create-new-template-engine-using-javascript-8f26313p). In this article I will show you how to add simple caching to the compilation of our templates.

# How Caching Works with JS Template Engines

Caching with our template engine is pretty simple. We just keep a key value object and use template strings as keys and functions as values. This will make subsequent uses of a template faster. 

## Implementing it inside Compile

All our compile function is this:

```js
const compile = (template) => {
	return new Function("data", "return " + compileToString(template))
}
```
Let's rename this to `compileToFunction`.

```js
const compileToFunction = (template) => {
	return new Function("data", "return " + compileToString(template))
}
```

Now let's create a cache. We will use a `Map` for this.

```js
const cache = new Map();
```

Now let's add a `compile` function which uses this cache.

All we need to do is check if the `cache.has(template)`. If not, we need to create it and set it. If it does have it, we just need to return it.

```js
const compile = (template) => {
	if (cache.has(template)) {
		return cache.get(template);
	} else {
		const compiledFunction = compileToFunction(template);
		cache.set(template, compiledFunction);
		return compiledFunction;
	}
}
```

## Changing our Render Function

Currently our `render` function just uses some Regex to replace all the values. 

```js
var render = (template, data) => {
	return template.replace(/{{(.*?)}}/g, (match) => {
		return data[match.split(/{{|}}/).filter(Boolean)[0]]
	})
}
```

I think we should change it to use `compile` under the hood for faster automatic caching. It is pretty simple to implement, we just need to run `compile` and then run that function with `data`.

```js
const render = (template, data) => {
	return compile(template)(data);
}
```

# Conclusion

In this tutorial I showed how to extend the template engine we made in a previous post with caching for faster compilation and rendering.

# Other Articles You Might Like

1. [Creating a JS Template Engine](https://h.shadowtime2000.com/creating-a-js-template-engine)
2. [🚀14 JS Template Engines🚀](https://h.shadowtime2000.com/14-js-template-engines)

In one of my articles, I showed you how to create a simple JS template engine. In this article I will...

Adding Auto Caching to Our Template Engine

---
title: Everything You Don't Know About ES Modules
published: true
date: 2020-12-30 21:41:22 UTC
tags: JavaScript,WebDevelopment,Nodejs,deno
canonical_url: https://hackernoon.com/everything-you-dont-know-about-es-modules-0j2631ww
cover_image: https://hackernoon.com/images/mInGmayyxOMvm3o6l2iN7KhHCib2-kg1e34p8.png
---

Before I get into how you don't know ES modules, let's review what you know about ES modules. Let's get started with default exports and imports.

```js
// bar.js

export default () => "Bar!";
```

```js
// foo.js

import Bar from "./bar";

const Foo = `Foo${Bar()}`;
```

You are importing a default value which can be renamed to anything easily. Now let's move on to named exports and imports.

```js
// bar.js

export const Bar = () => "Bar!";
```

```js
// foo.js

import { Bar } from "./bar";

const Foo = `Foo${Bar()}`
```

So what's going on is we are assigning the named export Bar to that function, which is then being imported by the exact same name which allows static optimizations such as [ES6 tree shaking](https://h.shadowtime2000.com/what-is-es6-tree-shaking-1/).

Now let's quickly go over importing from packages.

```js
// foo.js

import { Bar } from "foo-bar";

const Foo = `Foo${Bar()}`;
```

You install a package from NPM and then import it by it's name. Now let me reset everything you know about ES modules and explain what they actually are.

## Actual ES modules

Actual ES modules have only two big changes from the ES modules you know:

1. You have to include extensions
2. You import 3rd-party libraries from URLs

Let's go over the first one. You have to include extensions in imports. Why? Because it is possible that you are using an extensions other than `.js` and then the browser would have to loop over every possible extension and then send a request for it to see if it exists. 

Now let's go over the second one. You import 3rd--party libraries from URLs and not from NPM package name. This is how it works because the web is meant to be decentralized, with a single package registry like NPM, if it was taken down the entire web could fall. Instead, modules are loading from URLs, so you could use something like `skypack.dev` to convert NPM packages to use actual ES modules syntax. But where did this fake ES modules syntax come from?


 ## Node Module Resolution Algorithm

Let's go back to when NodeJS was created in 2006. It was 10 years before ES modules where created in 2016, and they had to create a module format for NodeJS. 

They created what is now known as CommonJS. CommonJS has synchronous dynamic imports and exports. CommonJS also imports from NPM and the `node_modules` folder if it is not a relative path and CommonJS doesn't use extensions for importing. Older bundlers such as Webpack 1 used CommonJS for bundling. 

Then came ES6 and ES modules. At that time, native ES modules weren't that supported so sites started using bundlers which can create code that is compatible with browsers that don't support ES modules. These bundlers started using what is known as the Node Module Resolution Algorithm, where it follows all the rules of resolving imports w/o extensions and importing from the `node_modules` folder.

## Wrapping Up

Let me just say this. I am not trying to say that you should use native browser ES and you shouldn't use bundlers and stuff like that. I am just trying to point out that the ES modules that you probably use aren't the actual specification.

## Other Articles You Might Like

1. [What is ES6 Tree Shaking?](https://h.shadowtime2000.com/what-is-es6-tree-shaking-1)
2. [List of JS Bundlers 🚀](https://h.shadowtime2000.com/list-of-js-bundlers)

Before I get into how you don't know ES modules, let's review what you know about ES modules. Let's g...

Everything You Don't Know About ES Modules

---
title: Creating a JS Template Engine
published: true
date: 2020-12-21 19:02:30 UTC
tags: JavaScript,Nodejs,Express,typescript
canonical_url: https://hackernoon.com/how-to-create-new-template-engine-using-javascript-8f26313p
cover_image: https://hackernoon.com/images/mInGmayyxOMvm3o6l2iN7KhHCib2-263334by.png
series: Creating a JS Template Engine
---

# Creating a JS Template Engine

Hi, it's me [@shadowtime2000](https://github.com/shadowtime2000), one of the maintainers of [Eta](https://eta.js.org), a fast embeddable template engine. In this tutorial I will show you how to create an isomorphic (browser/node) template engine.

## The Design

The initial design of the template engine will be pretty simple. It will simply interpolate values from a `data` object. It will use `{{valueName}}` to interpolate values.

## Simple Rendering

First, lets create a simple rendering function which takes the template and the data and it will render the value.

```js
var render = (template, data) => {
	return template.replace(/{{(.*?)}}/g, (match) => {
		return data[match.split(/{{|}}/).filter(Boolean)[0]]
	})
}
```
Basically, all that does is search for anything that is surrounded by the brackets, and it replaces it with the name inside `data`. You can write your templates like this and it will take it from the data object.

```hbs
Hi my name is {{name}}!
```
```js
render("Hi, my name is {{name}}!", {
name: "shadowtime2000"
});
```
But there is a problem, you can't have spaces in the interpolations.
```js
render("Hi, my name is {{ name }}!", {
name: "shadowtime2000"
})
/*
Hi, my name is undefined!
*/
```
This requires you to have spaces inside the data object, which isn't that clean. We can make it allow spaces by trimming leading and ending whitespace of the data name before interpolating.
```js
var render = (template, data) => {
	return template.replace(/{{(.*?)}}/g, (match) => {
		return data[match.split(/{{|}}/).filter(Boolean)[0].trim()]
	})
}
```
This is pretty good, but for larger templates it wouldn't be that fast because it has to kind of parse it every time. That is why many template engines support compilation, where the template is compiled into a faster JS function which can take the data and interpolate it. Let's add compilation to our template engine, but before we do, we need to add a special parsing function. 

## Parsing

Since parsing can be a little boring, let's just reuse some code from another JS template engine. I would have used the Eta parsing engine, but that has been extremely optimized and can be pretty confusing to people. So, lets use another popular JS template engine parsing code, [mde/ejs](https://github.com/mde/ejs). Do remember to attribute them for the parsing engine.
```js
var parse = (template) => {
	let result = /{{(.*?)}}/g.exec(template);
	const arr = [];
	let firstPos;

	while (result) {
		firstPos = result.index;
		if (firstPos !== 0) {
			arr.push(template.substring(0, firstPos));
			template = template.slice(firstPos);
		}

		arr.push(result[0]);
		template = template.slice(result[0].length);
		result = /{{(.*?)}}/g.exec(template);
	}

	if (template) arr.push(template);
	return arr;
}
```
What this basically does is loop over executing the regex pattern on the template and adding the stuff to a data structure. Here is what that data structure would look like:
```js
["Hi my name is ", "{{ name }}", "!"]
```

## Compilation

Let's take a quick overview of what compilation would output. Imagine you enter this template:
```hbs
Hi my name is {{ name }}!
```
It would give you this function:
```js
function (data) {
	return "Hi my name is "+data.name+"!";
}
```
Let's first create a function to parse and then create a string that can be used. We first have to parse the template.
```js
const compileToString = (template) => {
	const ast = template;
}
```
We also have to create a string which will be used as the function.
```js
const compileToString = (template) => {
	const ast = template;
	let fnStr = `""`;
}
```
The reason we are using quotation marks at start is because when it is compiling the templates and such, they will all begin with a `+`. Now we have to iterate over the AST.
```js
const compileToString = (template) => {
	const ast = template;
	let fnStr = `""`;

	ast.map(t => {
		// checking to see if it is an interpolation
		if (t.startsWith("{{") && t.endsWith("}}")) {
			// append it to fnStr
			fnStr += `+data.${t.split(/{{|}}/).filter(Boolean)[0].trim()}`;
		} else {
			// append the string to the fnStr
			fnStr += `+"${t}"`;
		}
	});
}
```
The final part of this function is to return the function string.
```js
const compileToString = (template) => {
	const ast = template;
	let fnStr = `""`;

	ast.map(t => {
		// checking to see if it is an interpolation
		if (t.startsWith("{{") && t.endsWith("}}")) {
			// append it to fnStr
			fnStr += `+data.${t.split(/{{|}}/).filter(Boolean)[0].trim()}`;
		} else {
			// append the string to the fnStr
			fnStr += `+"${t}"`;
		}
	});

	return fnStr;
}
```
So if it takes this template:
```hbs
Hi my name is  {{ name }}!
```
It will return this:
```js
""+"Hello my name is "+data.name+"!"
```
Now this is done, creating a compile function is relatively simple.
```js
const compile = (template) => {
	return new Function("data", "return " + compileToString(template))
}
```
Now we have completed compilation for our template engine. 

## Wrapping Up

In this tutorial I showed how to:

1. Implement a simple rendering function
2. Understand a parsing engine adapted from EJS
3. Iterate over the AST to create fast compiled functions

Creating a JS Template Engine   Hi, it's me @shadowtime2000, one of the maintainers of Eta,...

Creating a JS Template Engine

---
title: What Travis CI New Billing Means for OSS
published: true
date: 2020-12-17 23:33:28 UTC
tags: OpenSource,GitHub,ci
canonical_url: https://h.shadowtime2000.com/what-travis-ci-new-billing-means-for-oss
---

# What Travis CI New Billing Means for OSS

Recently, when I was checking my Travis CI build statuses, I found out that they are transferring their services to `travis-ci.com` from `travis-ci.org`. I looked more into it, and it turns out there is a plan to change the billing system.

## What are they doing?

For OSS repositories, you are given a 10K credit allotment which is around 1k Linux build minutes. Once that is up, they are hoping that you will consider on of their payed plans. But, for OSS projects, you can also submit a request to get more credits for your project.

## But why?

They are doing this because they have seen increased abuse of the platform which increases the queue time for users that use it well.



What Travis CI New Billing Means for OSS   Recently, when I was checking my Travis CI build...

What Travis CI New Billing Means for OSS

---
title: Creating a Stylus Library
published: true
date: 2020-12-14 05:59:18 UTC
tags: CSS,Nodejs,JavaScript
canonical_url: https://h.shadowtime2000.com/creating-a-stylus-library
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Stylus-logo.svg/393px-Stylus-logo.svg.png
---

# Creating a Stylus Library

Hi, in this article I will be showing how to create a [Stylus](https://stylus-lang.com) library.

## Wait what is Stylus?

[Stylus](https://stylus-lang.com) is a CSS preprocessor which has features such as whitespace sensitivity but all that is optional. Kind of like a mixture of SASS and SCSS.

## So how will we do it?

Stylus has a [JavaScript API](https://stylus-lang.com/docs/js.html) which exposes a `.include` function. The `.include` function allows you to add another path which will be searched when importing.

## Let's Do It

We will be using the Plugin API of the JavaScript API so it can become a little more organized.

```js
const stylus = require("stylus");

const plugin = () => (style) => {
    style.include(__dirname)
}

stylus("@import 'my-lib/foo';")
    .use(plugin())
    .render((err, css) => {
        if (err) throw err;
        console.log(css)
    })
```

If you have a `my-lib` subfolder, it will use that and import `my-lib/foo.styl`.

## Getting an Import All Entry

But, what if a user wants to import everything? Like:

```css
@import "my-lib";
```

Then, we can create an `index.styl` within the `my-lib` subfolder, and change it to this:

```css
@import "foo";
```

So now, if you do this:

```css
@import "my-lib";
```

It will import everything from `my-lib/index.styl`, so make sure `index.styl` is importing every other file there is.

## Conclusion

So in this post I showed how to use the JavaScript API to create a Stylus library, allow submodules, and allow one main `index.styl` entry point.

Creating a Stylus Library   Hi, in this article I will be showing how to create a Stylus lib...

Creating a Stylus Library

---
title: Web Monetization in VuePress
published: true
date: 2020-12-03 05:15:58 UTC
tags: Vue,JavaScript,webdev
canonical_url: https://h.shadowtime2000.com/web-monetization-in-vuepress
---

## Web Monetization in VuePress

So, you have probably heard of web monetization right now. It allows you to monetize your website **without ads**. One important name in it is Coil. Coil is a browser extension which allows you to connect with that web monetization API and give money to the content creator. This article will show you how to use web monetization with VuePress.

### With Config

This is a relatively simple way to do it. You just need to add this to the config:

```js
module.exports = {
	...,
	head: [
		["meta", { name: "monetization", content: "$payoutprovider.com/myAccount" }]
	],
	...
}
```
You would of course replace the payout provider and your account.

### With Plugin

You can also use [vuepress-plugin-web-monetization](https://www.npmjs.com/package/vuepress-plugin-web-monetization). 

With this you can specify the payout provider and account in the plugin config:

```js
plugins: {
    "web-monetization": {
        "address": "$payoutProvider.com/myAccount"
    }
}
```

You can also then specify the payout provider in markdown files:

```md
---
monetization: "$payoutProvider.com/myAccount"
---

Put your content here.
```

The monetization address in the config will be used if it is not specified in the front matter.

## Conclusion

We went over two different ways you can monetize your content using web monetization in VuePress:

1. Simple `head` option in the config
2. Using the plugin for more flexibility.

Web Monetization in VuePress   So, you have probably heard of web monetization right now. It...

Web Monetization in VuePress

---
title: Different Ways of Styling With React
published: true
date: 2020-12-03 00:03:06 UTC
tags: React,JavaScript,webdev,CSS
canonical_url: https://h.shadowtime2000.com/different-ways-of-styling-with-react
---

## Different Ways of Styling With React

There a couple different ways you can style your React components.

We will go over:

1. `style` attribute
2. Just `import`ing `.css` files
3. CSS modules
4. CSS-in-JS

### `style` Attribute

React supplies a `style` attribute you can use on plain elements. An example:

```jsx
function MyComponent() {
	return (
		<>
			<div style={{ color: "red" }}>Red div!</div>
		</>
	)
}
```

This approach is not recommended because it is not as performant compared to the other options. You can [read more about it on the React docs](https://reactjs.org/docs/dom-elements.html#style).

### Just `import`ing `.css` files

**NOTE** This only works when you are using a module bundler which supports CSS.

Some module bundlers allow you to just `import` `.css` files and it will apply appropriate transformations so it is available in your app.

```jsx
import "./my-component.css";

function MyComponent() {
	return (
		<>
			<div className="my-component">This is my component</div>
		</>
	)
}
```

### CSS modules

**NOTE** CSS modules are built on PostCSS so you must make sure you bundler is configured for that.

CSS modules let you "import" your `className`s into your app and it will append a unique hash to each of them at build time to make sure they are unique.

```css
.mycomponent {
	color: red;
}
```

```jsx
import styles from "./my-component.module.css";

function MyComponent() {
	return (
		<>
			<div className={styles.mycomponent}>This is my component</div>
		</>
	)
}
```

### CSS-in-JS

CSS-in-JS is a pattern which allows you to write your CSS in JS and it will create unique hashes for those `className`s which get appended to the styles.

You can read more about CSS-in-JS [in an article I wrote](https://h.shadowtime2000.com/what-is-css-in-js).

## Conclusion

We have gone over 4 different ways to style React components:

1. `style` attribute
2. Just `import`ing `.css` files
3. CSS modules
4. CSS-in-JS

Different Ways of Styling With React   There a couple different ways you can style your Reac...

Different Ways of Styling With React

---
title: What is CSS-in-JS?
published: true
date: 2020-12-02 23:35:02 UTC
tags: react,javascript,typescript,webdev
canonical_url: https://h.shadowtime2000.com/what-is-css-in-js
---

## What is CSS-in-JS?

So you have all probably heard of CSS-in-JS frameworks and libraries such as `emotion`, `styled-components`, and `goober`.

### What is CSS-in-JS

CSS-in-JS libraries follow many different patterns. But usually, they end up allowing you to do one thing:

1. Allow you to create unique CSS classes from JavaScript

Basically, you would typically use it like this:

```javascript
const myButtonsClassName = cssInJsLibraryFunctionHere({
	color: "red",
	"text-align": "center"
});

// Or with tagged template literals

const myButtonsClassName = css`
	color: red;
	text-align: center;
`
```

Some libraries (like `styled-components`) let you create React components from those styles, and allow you to create dynamic values for styling.

```jsx
const Button = styled.button`
	color: ${({ dark }) => dark ? "dark" : "white"}
`;

<Button />
<Button dark />
```

### Conclusion

CSS-in-JS is a pattern that allows you to write CSS styles inside your JavaScript.

What is CSS-in-JS?   So you have all probably heard of CSS-in-JS frameworks and libraries su...

What is CSS-in-JS?

---
title: What are JS Generators?
published: true
date: 2020-12-02 17:55:53 UTC
tags: JavaScript,TypeScript,webdev,node
canonical_url: https://h.shadowtime2000.com/what-are-js-generators
---

# What are JS Generators?

Generators are a feature in Javascript which are basically functions that are kind of like iterators.

## Creating

You can create generators like this:

```js
function* myGenerator() {}
```

The `*` after `function` is required.

## Yielding

The core mechanic of generators is `yield`ing values.

```js
function* myGenerator() {
	yield 1;
	yield "foo";
	yield "bar";
	yield { thing: true };
}
```

## Taking Values

You have created your generator. Now, we need to use it. When you have a generator, you can call `.next()` on it, and it will run the generator until it reaches a `yield` statement. When it reaches it, it will return an object with two parameters, `value`, and `done`.

```js
const one = myGenerator.next().value; // 1
const foo = myGenerator.next().value; // "foo"
const bar = myGenerator.next().value; // "bar"
const thingTrue = myGenerator.next().value; // { thing: true }
```

## MDN Docs

You can look more into generators [on the MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator).

What are JS Generators?   Generators are a feature in Javascript which are basically functio...

What are JS Generators?

# Typescript Without Compilation

Hi, in this post I will show how to use Typescript with static typings without needing a build step. I have also [implemented this in my project SwordCSS](https://github.com/swordcss/swordcss).

## Installation

We still need to install and configure Typescript though.

```
$ npm install -D typescript
```

`tsconfig.json`:
```json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "CommonJS",
    "target": "ESNext",
    "sourceMap": false,
    "declaration": false,
    "checkJs": true,
    "allowJs": true
  }
}
```
You can change the options however you want, but make sure the last four `compilerOptions` are the same.

## JSDoc

Now, let me give you an introduction to JSDoc. JSDoc is a format for commenting on and annotating Javascript code. Here is how you would use it with Typescript:
```js
//@ts-check
/*
 * @function
 * @param {string} param1
 * @param {number} param2
*/
function doingSomething(param1, param2) {
	doSomething(param1, param2)
}
```
Or at least that is how you would use it with functions. There are some other things you can do, and you can look at what is supported with JSDoc + Typescript.

**IMPORTANT** You must have `//@ts-check` at the top of your file for it to be type checked.

Typescript Without Compilation   Hi, in this post I will show how to use Typescript with sta...

Typescript Without Compilation

# What is ES6 Tree Shaking

ES6 tree shaking is a way to optimize the bundle size of your bundle by removing everything that is guaranteed to not be used ever in the app. Let's give an example.

Let's say you have this util file:
```js
function adder(a, b) {
	return a + b;
}
function subber(a, b) {
	return a - b;
}
export { adder, subber };
```
But, you only imported `adder`:
```js
import { adder } from "./utils";

adder(1, 2);
```
Then it wouldn't make sense to include `subber` in the bundle too. So instead, through static analysis, it will kill subber because it is never used. Final bundle:
```js
function adder(a, b) {
	return a + b;
}
adder(1, 2);
```
But there are some problems. Let's say you have this:
```js
function adder(a, b) {
	return a + b;
}
function subber(a, b) {
	return a - b;
}
window.subadd = (a, b) => (b, c) => adder(a, b) + subber(b, c);
export { adder, subber };
```
This would be the final bundle:
```js
function adder(a, b) {
	return a + b;
}
function subber(a, b) {
	return a - b;
}
window.subadd = (a, b) => (b, c) => adder(a, b) + subber(b, c);
adder(1, 2);
```
Wow, that's including a lot of unnecessary code! The problem is, because of how Javascript works, you can dump side effects into a global namespace, and it will get included along with it's dependencies because it isn't **guaranteed** to never be used.

## Supporting Full Tree Shaking (For Library Authors)

Of course, there is a way to support full tree shaking, without any risk of side effects. You first, need to kill all side effects in your package. Then, in your `package.json`, you set `sideEffects: false`. That will signify to the bundler that there are no side effects meaning you can fully tree shake it.

What is ES6 Tree Shaking   ES6 tree shaking is a way to optimize the bundle size of your bun...

What is ES6 Tree Shaking

# Testing With Deno

In this multipart tutorial I will show how to test with Deno.

## The Built-in Deno Testing

Deno has it's own built in testing framework
```typescript
// some_file_test.ts
Deno.test({
	name: "my test",
	fn: (): void => {
		// Do some testing here
	}
});
```
And you can run these tests with
```
$ deno test
```

### But What Is Wrong With This?
Well, it is hard to have structure in your tests, like frameworks such as Jest and Mocha allow.

## Rhum - The Deno Testing Framework

[Rhum](https://github.com/drashland/rhum) is a Deno testing framework created by the [deno-drash](https://github.com/drashland/deno-drash) REST microframework team. Let's take a look at how you use it.
```typescript
import { Rhum } from "https://deno.land/x/rhum@v1.1.4/mod.ts";

Rhum.testPlan("some_file_test.ts", () => {
	Rhum.testSuite("MyFunction", () => {
		Rhum.testCase("does stuff", () => {
			// Assert some stuff
		});
	});
});
```

### Benefits

The Rhum testing framework allows you to have more complex organization of unit tests.

I will soon by posting a tutorial on assertion libraries.

Testing With Deno   In this multipart tutorial I will show how to test with Deno....

Testing With Deno - Framework

# Next.js 10 Has Been Released

Around 2 hours ago on [the Next.js blog](https://nextjs.org/blog) [Next.js 10 was announced](https://nextjs.org/blog/next-10#built-in-image-component-and-automatic-image-optimization).

## Features

* A `next/image` component for image optimization
* Internationalized routing
* Next.js Analytics
* Next.js Commerce (A starter kit for ecommerce sites)
* React 17 Support
* Importing CSS From Third Party Components
* Automatic `href` resolution (`next/link`)
* `@next/codemod` CLI improvements
* Blocking Fallback for `getStaticPaths`

### Image Optimization

```javascript

import Image from "next/image";

<Image src="myImage.png" height="400" width="300" />
// instead of <img src="myImage.png" height="400" width="300" />
```

This lazy loads the image and makes `width` and `height` work with responsive layouts.

### Next.js Analytics

Go to [nextjs.org/analytics](https://nextjs.org/analytics) to learn how to enable it.

### React 17 Support

The new JSX compiler is automatically used, you just have to run this command:
```
$ npm install next@latest react@latest react-dom@latest
```

### Importing CSS From Third Party Components
You no longer have to import the CSS for third party components like this:
```jsx
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
```
You can just import the component.

Next.js 10 Has Been Released   Around 2 hours ago on the Next.js blog Next.js 10 was announc...

Next 10 Released

# GridBlade

[GridBlade](https://github.com/swordcss/gridblade) is a CSS grid framework created with SCSS and [SwordCSS](https://github.com/swordcss/swordcss).

It gives a very simple way to create grids. GridBlade doesn't use Flexbox so you can decide the number of columns and rows instead of just the columns.

## Usage

Their are 578 CSS classes that you can use. But, of course, you only need 2 classes to create a working grid. You can create a grid with this:
```html
<div class="gb-container-<no. of columns>-<no. of rows>">



</div>
```
To insert an item you just add the class `gb-item` to your element.

{% github swordcss/gridblade %}

GridBlade   GridBlade is a CSS grid framework created with SCSS and SwordCSS.  It gives a ve...

A Simple CSS Grid Framework

# Wait What?
I think you should be familiar with CSS Variables, which can be used like this:
```css
:root {
	--color: red;
}

.component {
	color: var(--color);
}
```
These can be manipulated at runtime, though they seem a little hard to write. What if I told you there is an easier better way?
# SwordCSS
[SwordCSS](https://github.com/swordcss/swordcss) is a CSS preprocessor I have been working on in my free time. It allows you to write CSS Variables like this:
```css
@sw-variables {
	color: red;
}

.component {
	color: color;
}
```
and it gets converted into this:
```css
:root {
	--color: red;
}

.component {
	color: var(--color);
}
```
There are [some other features](https://swordcss.github.io/swordcss/) so have fun with it!

Wait What?   I think you should be familiar with CSS Variables, which can be used like this:...

An Easier Way To Write CSS Variables

# Overview
I think you all know the popular library for creating CLIs called [yargs](https://github.com/yargs/yargs). That is what we are going to be using. Our CLI should reverse a string.
```
$ reverse reverse --string string
gnirts
```
# Setup
Create a folder for your project. Then run these commands inside of it.
```
$ npm init -y
$ npm install -D typescript @types/yargs @types/node
$ npm install --save yargs
```
Make sure you set the `bin` attribute of your `package.json` to `dist/cli.js` and the `main` to `dist/index.js`. Make your `tsconfig.json` look like this:
```json
{
    "compilerOptions": {
      "esModuleInterop": true,
      "module": "CommonJS",
      "moduleResolution": "node",
      "outDir": "./dist",
      "target": "ESNext"
    },
    "exclude": ["node_modules", "**/*.spec.ts"],
    "include": ["src/**/*"]
  }
```

# Creating The CLI
Inside `src/cli.ts`, write this:
```typescript
#!/usr/bin/env node
import yargs from "yargs";

yargs
  .scriptName("reverse")
  .usage("$0 <cmd> [args]")
  .command(
    "reverse [string]",
    "reverse the string",
    (y) => {
      y.positional("string", {
        type: "string",
        default: "string",
        describe: "string to reverse",
      });
    },
    (argv) => {
      console.log(argv.string.split("").reverse().join(""));
    }
  )
  .help().argv;
```
and now you have a working CLI!

# Unit Testing API
First before we create actual tests, we need to change the structure of the project. Create a file called `src/index.ts` and put this inside of it:
```typescript
export function reverseString(str: string) {
    return str.split("").reverse().join("");
}
```
Inside of `src/cli.ts` add an import statement to the top to import `reverseString` from `index.ts` and change the callback to do this:
```typescript
console.log(reverseString((argv.string as string)));
```
So now our CLI has the structure to support unit testing!
So now run these commands:
```
$ npm install -D mocha chai
```
Also, set your `test` script to `tsc && mocha test/**/*.js`.
Now under `test/api/reverseString.spec.js` write this:
```javascript
const { expect } = require("chai");
const { reverseString } = require("../../dist/index");

describe(".reverseString", () => {
  it("should reverse properly", () => {
    expect(reverseString("foo")).to.equal("oof");
  });
});
```
But, this really isn't testing the actual CLI, just the API under it.
# Testing the CLI
Under `test/cli/reverse.spec.js` write this:
```javascript
const { expect } = require("chai");
const { execSync } = require("child_process");

const test = (args) => {
  return execSync(`node dist/cli.js reverse ${args}`).toString();
};

describe("CLI", () => {
  it("should use the positional argument", () => {
    expect(test("--string foo")).to.equal("oof\n");
  });
  it("should use the non positional argument", () => {
    expect(test("foo")).to.equal("oof\n");
  });
});
```
This is probably the worst way to test it, so if you have a better way, feel free to put it in the comments.

Overview   I think you all know the popular library for creating CLIs called yargs. That is...

Testing Command Line Tools

This is the start of a series I am creating with various useful Typescript decorators.

You can track the progress of the series [on Github](https://github.com/shadowtime2000/useful-decorators).

# The Decorator
I want this decorator to be used like this:
```typescript
class MyClass {

	@Deprecated()
	doSomething() {
		console.log("DO SOMETHING!")
	}
}
```

# Source
```typescript
function Deprecated(): MethodDecorator {
    return (target: Object, key: string | symbol, descriptor: PropertyDescriptor) => {
        const original = descriptor.value;
        descriptor.value = (...args: any) => {
            console.warn(`Warning: ${String(key)} is deprecated`);
            original(...args);
        }
        return descriptor;
    }
}
```

This is the start of a series I am creating with various useful Typescript decorators.  You can track...

Deprecated Decorator

# How To
Just put this in your webpage:
```html
<script src="https://cdn.jsdelivr.net/gh/shadowtime2000/easy-dom/src/index.js"></script>
```
and then instead of using `document` use `DOM` and it saves you 5 bytes.

## Improvements to original size of website
The more references you have to `document` the more bytes it can save. If you have more than 22 `document` references it starts decreasing your bundle instead of increasing.

### Largely Used Libraries If They Use this
 - `jquery` would decrease their size by over 1kb
 - `react` would decrease their size by over 1kb
 - `angular` would decrease their size by over 2kb

#### Finishing Thoughts
So that is how you can decrease your website bundle size. If you liked this post and [the library](https://github.com/shadowtime2000/easy-dom), star the library to support it.

How To   Just put this in your webpage:   &lt;script src="https://cdn.jsdelivr.net/gh/shadow...

Decreasing Your Website Bundle Size

In this post I will show you how to use a **Proxy**.

The concept of a proxy is pretty simple. You provide triggers that run when you are getting or setting something in an object.

```javascript
// private user object
const _user = {
	name: "User",
	age: 25,
	_address: "A place"
}

const traps = {
	get(target, prop) {
		if (prop[0] === "_") {
			return undefined;
		}
	}
}

const user = new Proxy(_user, traps);

console.log(user.name) // User
console.log(user.age) // 25
console.log(user._address) // undefined
```
As shown in the example above, Proxies can be used for stopping programs from accessing private variables.
They can also be used to stop programs from setting private variables.
```javascript
// private user object
const _user = {
	name: "User",
	age: 25,
	_address: "A place"
}

const traps = {
	get(target, prop) {
		if (prop[0] === "_") {
			return undefined;
		}
	},
	set(target, prop, value) {
		if (prop[0] === "_") {
			return;
		} else {
			target[prop] = value;
		}
	}
}

const user = new Proxy(_user, traps);

user.name = "Person";
user.age = 26;

user._address = "In the world"; // Doesn't set
```

You can read more about **Proxies** on the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).

In this post I will show you how to use a Proxy.  The concept of a proxy is pretty simple. You provid...

Using JavaScript Proxies

# Install Type Validator
`npm install --save discord-arg-validator`

## Look at structure
How you implement this package really depends on the structure of your bot and what framework you use. Typically, you would want to add the validation to the `execute` function of your command.

```javascript
const { validate, String, Number, YesNo } = require("discord-arg-validator");

module.exports = {
	name: 'foo',
	description: 'bar',
	execute(message, args) {
		validate(args, [String, Number, YesNo]).then(() => /* Command logic here */).catch(() => message.channel.send("Make sure you use the command correctly!")))
	}
}
```
You could also use `await` so you don't have to put your command login in a `.then()` chain.

Install Type Validator   npm install --save discord-arg-validator           Look at structur...

Types To Your Discord Bot Command Arguments

# Crypto Prices in Discord - Bot
Sorry for the long delay, but this is the second and last part of my series of bringing cryptocurrency prices into Discord. This tutorial will use a Discord bot.

## Setting up
To create our bot template, we are going to use a cool project called [create-discord-bot](https://github.com/peterthehan/create-discord-bot).

Run `npx peterthehan/create-discord-bot` in the bash if you are on a Unix based system and in the Git bash if you are on Windows. Fill out the questions that it prompts you and you have a Discord bot ready to be used.

We will also be using the CoinGecko API to get prices for cryptocurrency, so run `npm install --save coingecko-api`.

## How the current bot works
Our bot currently runs on a widget based framework. Any folder located under the folder `widgets` is considered a widget and every widget must contain a folder `handlers` with `.js` files with names of `discord.js` events. There is one widget `command` which comes with it, and has it's own system of commands. You can insert any command into it's `commands` folder and use a `CommandBuilder` class to create commands.

## Programming the bot
First, you should run `npm run dev` to start `nodemon` so you don't need to keep on restarting the bot.

Create a new file in the `command/commands` folder called `coinPrice.js`. Put this inside of it:
```javascript
const CommandBuilder = require("../classes/CommandBuilder");

const CoinGecko = require("coingecko-api");

const CoinGeckoClient = new CoinGecko();

module.exports = new CommandBuilder()
  .setName("coinprice")
  .setAliases(["coin", "price"])
  .setOwnersOnly(false)
  .setGuildOnly(false)
  .setRequireArgs(true)
  .setDeletable(false)
  .setCooldown(10)
  .setDisabled(false)
  // eslint-disable-next-line
  .setExecute(async (message, user, args) => {
    let data = await CoinGeckoClient.simple.price({
      ids: [args[0]],
      vs_currencies: [args[1]],
    });
    await message.channel.send(
      `${args[2] || 1} ${args[0]} -> ${
        data.data[args[0]][args[1]] * (args[2] || 1)
      } ${args[1]}`
    );
  });

```
This basically allows you to run the command `coin` with this format: `.coin <coinToCheck> <currencyToCompareAgainst> [optionalAmountForCoinToCheck]`

## Finishing Thoughts
Try adding more commands such as comparison of margin and other things you could do.

**WARNING** The [create-discord-bot project](https://github.com/peterthehan/create-discord-bot) is currently going through some major changes migrating the codebase to Typescript in a way that you still won't have to change your project. You may still need to change your project for that though.

[Source code on Github](https://github.com/shadowtime2000/cryptobot)


Crypto Prices in Discord - Bot   Sorry for the long delay, but this is the second and last p...

Crypto Prices in Discord - Bot

If you are looking at this you probably wonder who I am; teenage open source maintainer

shadowtime2000's DEV Blog