Image for post
Image for post
A code example of what you can do with this

Recently Deno released v1.7.0 which had support for 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/typescriptbut…


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

An example of file names when using hashes for cache busting
An example of file names when using hashes for cache busting

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 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…


Hi, it’s me, @shadowtime2000, one of the maintainers of Eta, a fast embeddable template engine. In this tutorial I will show to create an isomorphic (browser/node) JavaScript template engine.

The Design

The initial design of the template engine will be pretty simple. It will simply interpolate values from a dataobject. 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.

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…

shadowtime2000

If you are looking at this you are probably wondering who I am

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store