templating

You know those super cool backticks-for-strings in new JavaScript?

let emotion = `happy`;
let sentence = `Chris is feeling ${emotion}`;

Besides the variable interpolation in there being mighty handy, the do multi-line strings wonderfully, making them great for chunks of HTML:

const some_html = `
  <div class="module">
    <h2>${data.title}</h2>
    <p>${data.content}</p>
  </div>
`;

(more…)

Nunjucks calls itself "A rich and powerful templating language for JavaScript", which sounds about right. It's not intentionally super lightweight like Mustache or the slightly more robust (but still pretty light) Handlebars. It's a full-on language, packed with all kinds of stuff you might want when writing templates.

You can run it in the browser, but you probably shouldn't. This is meant to be run in Node.js and used to compile templates server side.

In other words: it's a real fancy HTML preprocessor. Let's look at some features that I think are particularly cool about Nunjucks.

(more…)

There isn't one single approach with CSS Modules to making the JavaScript templates, the CSS files, or the build steps to make them work. In this post, which is part of a series on CSS Modules, we'll look at one approach. The goal of this post is to get a CSS Modules project up and running.

In the projects I work on, there is a requirement that CSS should never rely on client-side JavaScript to work, so the build step needs to process everything into working HTML and CSS before it is deployed. We'll be using Webpack, a build system and module bundler. In the next post, we'll focus on making the code below suitable for a real-life project that renders static HTML to the browser.

Let’s begin!

(more…)