Code with Hugo

Clear Module Cache/Force Import in Node.js with CommonJS and with ES Modules (ESM)

Mon, 18 Aug 2025 00:00:00 +0000

Node.js supports two primary module systems: CommonJS and ES Modules (ESM). Both systems cache imported modules, ensuring that a module’s code runs only once, even if it’s imported multiple times.

When writing tests it can be useful to bypass caching for example if the code being tested is executed at the module scope (outside of exported functions).

While most test frameworks handle this for you eg. with jest.mock/vi.mock, when using a more barebones testing framework like node:test (built-in Node.js test runner) or in rare exceptions in application code.

Taming Timezones: Replacing moment.parseZone with @date-fns/tz and Vanilla JS Date

Mon, 11 Aug 2025 00:00:00 +0000

Taming Timezones: Replacing moment.parseZone with @date-fns/tz and Vanilla JS Date

How we preserved timezone-aware parsing when migrating from moment.js to date-fns and JS Date.

One of the last pieces of work I completed at my last workplace was to migrate a core system from moment to date-fns, vanilla Date manipulation & formatting.

TypeScript in the Trenches: Utility types and type manipulation patterns for application development

Mon, 28 Jul 2025 00:00:00 +0000

7 advanced types and patterns that I’ve used as part of TypeScript application development.

These patterns help unlock new levels of type safety and maintainability in TypeScript.

Configure Timezone for Jest/Node.js with the `TZ` env var

Sat, 17 Aug 2024 00:00:00 +0000

In order to test code that involves date and time manipulation and parsing. It can be useful to set the timezone under which the Jest tests run.

Thankfully Node.js supports the TZ environment variable: “The TZ environment variable is used to specify the timezone configuration.” (Node.js docs).

Nock on Node 18/20/22 Fails to Intercept isomorphic-unfetch/fetch Request

Sun, 11 Aug 2024 00:00:00 +0000

On Node versions 18, 20 and 22, users may encounter an issue where Nock fails to intercept requests made via isomorphic-unfetch.

What follows is a sample error you may see (timeout is reached because the request is not intercepted).

returns a valid response
thrown: "Exceeded timeout of 5000 ms for a test.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."
1 |
> 2 | it('returns a valid response', async () => {

`dotenv` not required: load `.env` and parse env vars natively in modern Node.js

Sun, 28 Jul 2024 00:00:00 +0000

dotenv is a 39 million download a week package allows Node.js apps to load environment variables from .env files and other utilities around environment variables. It’s very useful for building 12-factor apps for which a principle is to read configuration from environment variables instead of config or code files.

As of Node 20.6 (and all Node 22.x versions), env files can be loaded via the --env-file CLI argument.

As of Node.js 20.12 (and all Node 22.x versions), env files can be loaded programmatically via process.loadEnvFile() and env vars in a string can be parsed with util.parseEnv().

Note that the Node 20 release line is the Active LTS until October 2024, Node 22 is “current” until October 2024 when it becomes the Active LTS.

We’ll now detail how to use the native APIs to replace dotenv.

You can skip to the code on GitHub at: github.com/HugoDF/dotenv-not-required/, see the package.json and index.test.js.

Mocking/stubbing the current Date in Jest tests

Thu, 06 Jun 2024 00:00:00 +0000

There are situations where new Date() or Date.now is used in application code. That code needs to be tested, and it’s always a struggle to remember how to mock/stub or spy on Date.now/new Date with Jest.

This post goes through multiple approaches to mocking, stubbing and spying on the date constructor using Jest.

There’s a full examples repository at github.com/HugoDF/jest-handbook-examples.

Docsify Mermaid 10

Mon, 04 Mar 2024 00:00:00 +0000

Using Docsify and Mermaid 10 can be tricky since Mermaid 10 renders asynchronously (mermaid.render returns a Promise).

This post shows how to work around the mismatch between Docsify’s markdown.renderer.code and Mermaid’s render function on Mermaid v9 and v10.

Mocking/stubbing the Date and timers (setTimeout) in Node.js tests with built-in `node:test` MockTimers

Mon, 26 Feb 2024 00:00:00 +0000

MockTimers is an experimental class in the node:test module which concerns itself with allowing mocking of timers (setTimeout, setInterval, setImmediate) and the Date built-ins.

Direnv setup for multiple git/GitHub, npm and AWS accounts/credentials

Mon, 19 Feb 2024 00:00:00 +0000

In this post, we’ll look at how to configure direnv to manage multiple git, GitHub, npm and AWS accounts and credentials on a single machine.

Test Native `fetch` in Node.js with Undici interception and mock utils

Mon, 12 Feb 2024 00:00:00 +0000

Node.js 18+ has a built-in fetch available, where prior versions had to use libraries such a node-fetch, axios, got or other to get such functionality.

The “native fetch” was implemented in userland first as the undici package.

This post goes through how to use undici’s mock utilities (MockAgent, MockPool, setGlobalDispatcher) to intercept “native fetch” requests in Node.js 18+.

Node Test Runner: skip a test if an environment variable is missing/empty

Mon, 05 Feb 2024 00:00:00 +0000

The node:test module is a built-in test runner and orchestrator in Node.js. It’s available as experimental since Node 18 but has stabilised in Node 20 and some features are still experimental at the time of writing, in Node 21.

node:test supports test skipping throught multiple approaches but the two we’ll focus on here are the “programmatic skips”, where at runtime we can decide whether a test should be skipped or not.

This can be useful for integration or end to end testing scenarios being driven via the Node.js test runner (using node:test).

Lerna publish with no git commit, tag or push

Mon, 29 Jan 2024 00:00:00 +0000

To lerna publish without a git commit or attempting to git push, use --no-push --no-git-tag-version, like so:

lerna publish --no-push --no-git-tag-version

For official documentation on these options see the lerna version docs.

To understand the specifics of --no-push, --no-git-tag and why these options are documented in lerna version, read on.

What is Jest and why should I use it?

Mon, 22 Jan 2024 00:00:00 +0000

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

jestjs.io

Jest is a batteries-included framework. Due to its fully-featured nature and large surface area, we can compare it to test runners (Mocha), assertion libraries (Chai, ShouldJS, power-assert, expect.js), integrated test-runner + assertion libraries (QUnit, Protractor, Tape, AVA, Jasmine), stubbing libraries (Sinon), module interception libraries (Proxyquire), coverage tools (NYC, Istanbul).

Concurrent/Parallel HTTP Requests in Go

Mon, 15 Jan 2024 00:00:00 +0000

A common source of high latency in all types of applications (scripts, HTTP servers, CLI tools), is to run HTTP requests in sequence that could be run in parallel.

We’ll be looking at how to achieve this in Go. Examples for concurrency in the Go ecosystem tend to be more abstract or low-level than a close to real-world example of integrating a third party HTTP API.

Markdown escape backticks in inline code and fenced code blocks

Mon, 08 Jan 2024 00:00:00 +0000

When writing technical documentation, blog posts or conducting code reviews, it can be useful to render backticks in Markdown inline code, code blocks or fenced code blocks.

Since backticks are part of the Markdown syntax for inline code and code fences, this post looks at how to render them without clashing with the syntax.

git diff by word

Mon, 14 Nov 2022 00:00:00 +0000

The default diffing algorithm for git diff is by lines. There are scenarios where it’s more interesting to diff by word, for example: long lines. In that case it’s useful to use --word-diff=color.

git/GitHub CLI set editor to vim or VSCode

Wed, 09 Nov 2022 00:00:00 +0000

The GitHub CLI (gh binary), defaults to nano as its editor.

Developers may want to set it to vim or VSCode to keep it in line with the git CLI’s behaviour.

Node.js Native Test Runner

Mon, 23 May 2022 00:00:00 +0000

If anyone missed it, Node.js 18 includes a test runner/test definition module (node --test and node:test respectively).

node:test exports a test function and you can run the Node CLI with a --test flag which does some basic search/matching for test files.

Full Documentation: nodejs.org/api/test.html

Documentation for node:test
Documentation for node --test
Curated set of examples: github.com/HugoDF/node-test-runner-examples.

Tips for real-world Alpine.js

Wed, 09 Jun 2021 00:00:00 +0000

Alpine Day 2021 Talk: tackling Alpine FAQs, common issues & web patterns with Alpine.js

Why doesn't React.useEffect run on React server-side renders (SSR)?

Mon, 01 Mar 2021 00:00:00 +0000

Why doesn’t React.useEffect run during a server-side render (SSR) for example when using it inside a Next.js application?

The obvious spots in the docs for information like this are the React docs on useEffect and the React docs on string/static rendering neither of which mention any particular behaviour of useEffect during server-side rendering (SSR).

Cypress Scroll Position Assertions

Tue, 17 Nov 2020 00:00:00 +0000

This post goes through approaches to asserting on the scroll position.

First we’ll see how to assert that we’re at the top of the page.

Next we’ll look at 2 approaches to assert that we’ve scrolled to an element.

The examples for this post are available at github.com/HugoDF/cypress-scroll-position-assertions/.

What is the "?." JavaScript/TypeScript operator

Mon, 09 Nov 2020 00:00:00 +0000

In JavaScript and TypeScript, the “?.” operator is called optional chaining.

It works in a similar fashion to the . (chaining) operator, except that it short-circuits instead of causing an error when a value is null or undefined.

That means const obj = {}; console.log(obj.hello?.world); will log undefined (the value of obj.hello) instead of throwing a TypeError: obj.hello is undefined that console.log(obj.hello.world); would cause.

Convert images to data URLs at the command line (Mac OS)

Mon, 26 Oct 2020 00:00:00 +0000

Converting images to data URLs using the Mac OS command line is a fun demonstration of the command line’s capabilities.

To convert an image file to a data URL, we can use the following shell function:

function img-data() {
 TYPE=$(file --mime-type -b $1)
 ENC=$(base64 $1)
 echo "data:$TYPE;base64,$ENC"
}

What follows is a walkthrough of what data URLs are, why they’re useful and how to compose the file and base64 command line utilities to build the img-data shell function.

The Future of PHP: Is It a Dead Programming Language?

Thu, 20 Aug 2020 00:00:00 +0000

There’s an opinion that PHP is dead today, but is this true?

Should we believe in this or only people who don’t like PHP are sharing this news? Why do people hate PHP? Let’s take a closer look at PHP and try to predict its future.

Tips For Students Choosing Their First Programming Language

Tue, 18 Aug 2020 00:00:00 +0000

More and more colleges offer their students the opportunity to try their hand in coding.

With technologies continuing making massive inroads people’s our everyday lives, such professions as a computer programmer, web developer, software engineer, mobile app developer, and others ranks among the best paying and on-demand. No wonder, so many students, even those who initially chose completely different majors, strive to become conversant with popular programming languages. Being able to write code and program is not only promising, it’s prestigious. But slews of your learners find themselves plagued by some concerns and doubts we’ll try to dispel in today’s article. What’s more, we’ll help you answer the hardest questions most beginners ask themselves when tackling programming and choose the programming language you’ll be most comfortable with.

Disable a HTML link/anchor tag

Mon, 17 Aug 2020 00:00:00 +0000

Here are 2 ways to disable a HTML <a> link/anchor element using CSS or by using inline JavaScript.

An accessible Alpine.js menu toggle

Mon, 10 Aug 2020 00:00:00 +0000

The “Hello World” of JavaScript frameworks and libraries seems to have become the todo app. In the case of Alpine.js a todo app is almost too large to showcase Alpine’s core benefits and use case. Another issue with a lot of JavaScript examples is that they forego accessibility. Therefore we won’t be building a todo app but an accessible navigation menu. Our menu is as follows (read on for a breakdown of how it’s built).

Alpine.js in-depth: listen to JavaScript events using x-on

Mon, 03 Aug 2020 00:00:00 +0000

The core Alpine.js functionality beyond toggling visibility, displaying data in HTML textContent and binding HTML attributes to data is listening for events using Alpine.js. Listening to events with x-on is usually coupled with state updates, for example we can create the following “counter” using x-data, x-on and x-text.

<div x-data="{ count: 0 }">
 <button x-on:click="count--">Decrement</button>
 <code>count: </code><code x-text="count"></code>
 <button x-on:click="count++">Increment</button>
</div>

Alpine.js in-depth: reactive HTML attribute binding with x-bind

Mon, 27 Jul 2020 00:00:00 +0000

We’ve seen how to print out values using x-text and toggle visibility of elements based on them with x-show. We’ll now see how to set the value of HTML attributes using x-bind.

In this example we’ll display and image based on data that’s in our Alpine.js initial state (as defined in x-data), in this case caption, src and width. Which, respectively, represent the images’ caption, the URL from which it’s being served and its display width on the page.

Show/hide in Alpine.js with x-show

Mon, 20 Jul 2020 00:00:00 +0000

In Alpine.js the directive used to toggle visibility of an element is x-show. Per the Alpine.js README, “x-show toggles the display: none; style on the element depending if the expression resolves to true or false”.

Github Pull Request Review: reset viewed files

Mon, 13 Jul 2020 00:00:00 +0000

GitHub Pull Request Review workflow is great.

What I particularly like is the “file viewed” toggle, which mean that I’m not tempted to re-review the whole Pull Request when a single file has changed and I’ve already checked the rest of them.

However there are instances where I want to re-review the PR as a whole instead of just the changes since my last review. For example when there have been a lot of small changes that add up.

Alpine.js In-Depth: x-data "state" & x-text "echo"

Tue, 07 Jul 2020 00:00:00 +0000

The simplest Alpine.js application is the following HTML file. It loads Alpine.js version 2+ from the JSDelivr CDN using a script tag and has an Alpine.js component with x-data="{ msg: 'Hello Alpine.js' }" and a p element with x-text="msg".

Alpine.js `x-for` a number of iterations (n times)

Mon, 29 Jun 2020 00:00:00 +0000

Alpine.js falls back to JavaScript to allow you to iterate a set number of times.

For example if I want to create 4 lines on a page I can use the following.

<div x-data>
 <template x-for="_ in Array.from({ length: 4 })">
 <hr>
 </template>
</div>

You can see all the examples at Alpine.js Playground - x-for n times.

Alpine.js `x-for` with objects: 4 ways to iterate/loop through JavaScript objects

Mon, 22 Jun 2020 00:00:00 +0000

One of the missing features of Alpine.js is the ability to iterate through objects with x-for.

Alpine.js is heavily inspired by Vue.js but it’s designed to be lean and rugged instead of incrementally adoptable. Therefore x-for only supports arrays/iterables.

The reason there’s no first-class support for iterating through objects with Alpine.js’ x-for is that converting a JavaScript Object to an Array is reasonably easy in modern JavaScript (ES6+) environments using Object.keys, Object.values or even Object.entries. This is the purpose of this post.

You can find all the examples at Alpine.js Playground - x-for with object.

How to get type-checking and generate TypeScript Typing declaration (types.d.ts) from JSDoc annotations

Mon, 15 Jun 2020 00:00:00 +0000

How to achieve TypeScript-like behaviour in Vanilla JavaScript using JSDoc and @ts-check in VSCode: that’s the purpose of this post. TypeScript is a JavaScript superset with types. It solves one of the big problems with JavaScript, which is “what parameters does this function expect?” TypeScript is great for the JavaScript ecosystem, code written in TypeScript (or with a type declaration file) has better IDE tooling (autocomplete, intellisense) and static checks can be performed.

Sync Alpine.js x-data to localStorage/sessionStorage

Mon, 08 Jun 2020 00:00:00 +0000

Alpine.js is great for writing widgets. localStorage/sessionStorage are Web APIs that enable JavaScript application to store data beyond the life of the current JavaScript process.

This is useful for example if we wanted to persist our todos when the user closes the tab and comes back to it later.

If you want to skip to the examples, they’re in this CodePen collection or at the following:

How to Access Alpine.js Magic Properties from inline handlers and function/component methods

Mon, 01 Jun 2020 00:00:00 +0000

Alpine.js magic properties are crucial to leveraging its best features.

When using Alpine.js in a “mainly markup” configuration (no script tags), the magic properties tend to be accessible seamlessly.

Alpine.js magic properties are as follows:

$el: the element to which an Alpine.js component is bound (also called the root element)
$refs: references to DOM Nodes as defined in the markup for an Alpine.js component
$event: (only exists in templates) when adding an event handler, using $event will pass the full event into the handler.
$dispatch: dispatch a custom event see A guide to Alpine.js component communication
$nextTick: delay running of a function (callback) until after Alpine.js has updated/rendered
$watch: run a function (callback) on every change to a reactive property.

Access Alpine.js component data/state from outside its scope

Mon, 25 May 2020 00:00:00 +0000

Warning this uses Alpine.js v2 internals, there isn’t currently a public-facing API to do this.

As an active Alpine.js and Alpine.js Devtools contributor, I’ve had the pleasure of explaining how to access Alpine.js component data from outside the component and of using my suggestion as part of work I did on the community-maintained Alpine.js Devtools.

A guide to Alpine.js component communication

Mon, 18 May 2020 00:00:00 +0000

Learn how to share information between Alpine.js components with the $dispatch magic property and the window/document as an event bus.

This post will show how to trigger and listen to global/window/document events with Alpine.js in order to use it as an event bus to communicate between sibling components (which is the only type of component composition that Alpine.js supports)

Alpine.js is a great lightweight option for declarative view rendering. One of the first non-documented use-cases Alpine adopters come across is how to communicate between different Alpine.js components on the page.

For example a “flash” message (or “toast” in Material UI parlance) component but want to be able to trigger it from anywhere on the page (not just from inside its body). Other common occurences are triggering modals to open/close from outside of them or submitting a form from another part of the page (that’s a separate Alpine.js component).

Alpine.js, unlike React or Vue, doesn’t provide any parent-child communication patterns or primitives. “Alpine components” don’t receive any context from parent components, each component has its own individual and independent scope which means nesting doesn’t work as you would expect coming from Vue/React or even JavaScript (JavaScript has lexical scoping, Alpine does not).

That means that in Alpine.js there’s no parent-child component communication only “sibling” component communication. For sibling communication, the pattern often proposed in issues by Caleb (the creator of Alpine.js) and other contributors is to use the window or document as an event bus.

App Ideas: 17 Web Apps You Can Build To Level Up Your Coding Skills

Tue, 12 May 2020 00:00:00 +0000

Have you ever wanted to build something as a web developer? The answer is probably…yes. A common problem web developers have is that they don’t know WHAT to build and HOW to build them. Well, you’ve come to the right place.

This is a list of 17 web apps you can (and should) build to level up your coding skills and expand your coding knowledge.

This isn’t just a simple list of projects you can build. Each of these projects are described in detail with links to tutorials so you can develop them from the ground up. If you want to become a solid front-end web developer, then stay tuned.

Alpine.js + jQuery/JavaScript Plugin Integration: a Select2 example

Mon, 11 May 2020 00:00:00 +0000

One of the jQuery ecosystem’s greatest strength is the wealth of drop-in plugins available.

Alpine.js is a great way to phase out jQuery spaghetti code from current and future projects with its declarative nature and small bundle size.

What Alpine doesn’t have (yet), is a thriving plugin ecosystem. However, it’s all “just JavaScript” and it’s completely possible to leverage jQuery plugins in Alpine.js components.

There have been a slew of questions in the Alpine.js Issues about integrating 3rd party libraries and jQuery plugins. This post will go through the example of integrating Select2 - The jQuery replacement for select boxes although the principles and tools explained should work for other plugins and tools.

This post is “choose your own adventure”, if you’re interested in a CodePen or copy-pasting the code, head straight to Show me the code. If on the other hand you’re interested in the step by step breakdown of the integration, that follows the first code/demo section.

JavaScript remove duplicates, get unique/distinct values from Array with ES6+ Set and spread

Sat, 09 May 2020 00:00:00 +0000

With ES6+, more developers should be leveraging built-ins than are using lodash functions.

This post will go through how to remove duplicates ie. get distinct/unique values from an Array using ES6 Set. This gives you a one-line implementation of lodash/underscore’s uniq function:

const dedupe = list => [...new Set(list)];

This rest of the post goes through the how and why this works. It explores Sets, iterables and a bit of complexity theory with Big-O notation.

AVA: pass or fail a test if an environment variable is missing/empty

Mon, 04 May 2020 00:00:00 +0000

In a recent project I needed to fail/pass some AVA if a runtime environment variable was unset or empty. Here’s how I solved this issue.

AVA is a test runner for Node.js with a concise API, detailed error output, embrace of new language features and process isolation that let you write tests more effectively.

I’m a big fan of AVA’s explicit nature and it plays nicely with my favourite formatting tool: xo.

I recently used AVA to drive both unit and end to end tests for a JavaScript SDK/API wrapper for the Buttondown API. Buttondown is “a small, elegant tool for producing newsletters”.

You can see the SDK/Node.js API Wrapper at github.com/HugoDF/buttondown.

In the End to End suite, I needed a way to skip the tests, but only if the environment didn’t have an environment variable needed to run them.

Use microbundle for a TypeScript npm module

Sat, 02 May 2020 00:00:00 +0000

For those looking to write a package and publish it to npm, TypeScript + microbundle is a low-friction way to build a high-quality library.

I’ve created a GitHub repository template with microbundle, TypeScript, ava and xo. You can find it at github.com/HugoDF/microbundle-ts-pkg/

Add days to a Date in vanilla JavaScript

Fri, 01 May 2020 00:00:00 +0000

Despite the JavaScript Date warts, it’s straightforward to add day(s) to a date in JavaScript.

While it would be very easy to reach for moment.js or another date manipulation library (date-fns, luxon, dayjs) to do something as simple as adding days to a Date in JavaScript, writing a short helper function might just be easier.

Synchronize x-data and the URL in Alpine.js with the location/History APIs and $watch

Mon, 27 Apr 2020 00:00:00 +0000

Alpine.js doesn’t have a router as yet since it’s designed to deliver simple interactive experiences on top of server or statically rendered sites.

For single page applications that make heavy use of the History API or require a router, one would be better served heading over to Vue, React or Angular since they come with well-supported routers and routing solutions (eg. react-router, vue-router, reach-router, Next.js, Nuxt). If bundle size is a big concern (which it shouldn’t be for a Single Page Application), some lighter weight alternatives to the main SPA players are Preact + htm as described in No build tools route > Alternatives to JSX - Preact Docs or Riot.js with in-browser compilation.

Note that the majority of the content of this post is not Alpine.js-specific since we’ll be leveraging DOM/Web APIs heavily. What this post is, is a showcase of how to structure syncing operations between the browser URL and Alpine.js so that Alpine.js state is represented in the URL and the URL is reflected in Alpine.js state.

Integrating Alpine.js + Pre/Server-rendered content

Mon, 20 Apr 2020 00:00:00 +0000

Alpine.js is a great choice for adding some interactive feature to a server rendered, static or pre-rendered site.

In the Alpine.js GitHub Issues, we’ve seen a lot of questions around how to deal with content that’s pre-rendered or server-rendered in Alpine.js in order to use Alpine.js as a progressive enhancement.

From a poll I ran recently, 95.2% of Alpine.js users want to use it with a server-rendered page, static site generators or HTML pages.

I (want to) use @Alpine_JS in projects that are:

Server-rendered -> Rails/Laravel/Django/Express/WordPress/insert CMS
Static site (with generator) -> Hugo/Hexo/Jekyll/11ty
HTML pages -> hand-written HTML
SPAs (single page apps) -> in React/Angular/Ember/Vue, or with a router

Poll results (21 votes)

Server rendered: 71.4%

Static sites (with generator): 9.5%

HTML pages: 14.3%

SPAs: 4.8%

— Hugo (@hugo__df) March 27, 2020

This post details solutions to handling these cases. You can find all the examples at alpinejs.codewithhugo.com/pre-rendered-content/.

Integrating Alpine.js with Eleventy & YAML files to create Alpine Playground's Collections

Tue, 14 Apr 2020 00:00:00 +0000

Adding collections to Alpine.js Playground, essentially bringing it in line with projects such as awesome-alpine and alpinetoolbox.com.

It came from the fact that I’m curating quite a bit of content for each newsletter and it makes sense that content featured on the newsletter should be accessible in an easy to scan manner.

Here’s the rough mockup of what it should look like, ready for comparison with how it ended up looking on Alpine.js Playground Collections

While building this new feature, I came across a couple of interesting problems to which I’m documenting the solutions in the post.

There were 2 big parts to the implementation: Eleventy data capture + injection and then implementing with Alpine.js.

How to migrate a bunch of HTML pages (Alpine.js Playground) to Eleventy

Wed, 08 Apr 2020 00:00:00 +0000

Alpine.js Playground was recently migrated from custom build scripts & HTML pages to leverage Eleventy.

For context, Alpine.js Playground’s custom build scripts + HTML files had the following pros and cons.

Pros:

simple
very simple, everything is in the scripts folder.
no dependencies (except the scripts do have dependencies)

Cons:

hand-rolled, doesn’t leverage any tooling
no markdown/data file support
clunky editing the homepage HTML inside the JS file that generates it

Practical Alpine.js: x-data data access & data fetching/AJAX examples

Mon, 09 Mar 2020 00:00:00 +0000

Alpine.js “A rugged, minimal framework for composing JavaScript behavior in your markup.” is a great, lightweight replacement for interactive jQuery or Vanilla JS sprinkles due to its small size (~7kb min-gzipped) & the fact it can be included from a CDN with a script tag.

Caleb Porzio, Alpine.js’ creator, likens it to “Tailwind for JavaScript”. One of the great things about Tailwind is that the examples provided are very much copy-pasteable since the logic lives in the HTML/markup instead of in a CSS file off somewhere else.

A lot of Caleb’s Alpine.js examples in the README (no official documentation site at the time of writing), use pure HTML markup, functionality is declared inline of the attributes that use it.

This allows the Alpine.js examples to be very concise, but coming from a Vue.js/React background, I like to wrap my functionality in an x-data function that’s not declared inline, it’s in a script tag later on in the page. This also means that shared JavaScript/Alpine.js components can be extracted to a .js file and included using <script src="./path/to/fn.js"></script>.

This post is about how to access, fetch and set data in Alpine.js components using a setup where JavaScript is in script tags or a separate file, not inline in the markup.

Run Alpine.js inside of React

Mon, 02 Mar 2020 00:00:00 +0000

Alpine.js is well-suited for building widgets and easily creating client-side experiences for websites that are mainly server-side rendered or static.

Good news: it is possible (at the time of writing with Alpine.js 2.x) to integrate Alpine.js with React trivially.

Alpine.js is “A rugged, minimal framework for composing JavaScript behavior in your markup.”. It can be included simply with a script tag from a CDN and weights in under 5kb.

Caleb Porzio, Alpine.js’ creator, likens it to “Tailwind for JavaScript”.

Now one of the great things about Tailwind is that the examples provided are very much copy-pasteable.

If Alpine.js widgets ever pick up, integrating them in a React application might be useful.

In this post we’ll see how to run Alpine.js inside of a React application.

To see the full demo/code repo head to github.com/HugoDF/react-alpinejs.

Advantages and Disadvantages of Node.js

Fri, 24 Jan 2020 00:00:00 +0000

JavaScript is perhaps the most highly regarded of the different programming languages out there, and in terms of client-side programming languages, there are few tools that are peers to JavaScript. In terms of web development, it is clear that JavaScript has a very important role. That said, JavaScript is not just content to stay on one side. There are server-side programming languages as well, and JavaScript is now heading in this area. Thanks to Node.js, this shift has been facilitated with great ease and it is important to learn all about Node.js, how it works, and the advantages and disadvantages of it.

The first question needing to be answered is what exactly Node.js is. The simplistic answer is Node.js functions as a Javascript run-time environment that allows JavaScript coding to be executed in a server-side environment. This is an open source platform as well which increases flexibility to get things done. Whether you click here to find free Node.js hosting or keep reading to learn more, what you’ll find is that Node.js does have many fans and it has detractors as well. Understand that Node.js is not a type of framework, it also does not have a relationship with .NET, PHP, or JAVA. This makes Node.js a different way to work with server-side programming.

5 Reasons Why You Should Learn Programming

Fri, 24 Jan 2020 00:00:00 +0000

When it comes to expanding what you do and being more valuable to potential employers, programming is a great way to get yourself greater value on the job market. Programming is a valuable skill. There are a lot of people who do a lot of things with computers, but at the same time, there are not as many people who are learning programming. The biggest reason is programming is not done by more people is because there is a degree of complexity to it. That being said, just because something may not be easy is no reason to dismiss the undertaking. When you learn programming, you are literally learning a new language – and that is a very valuable language skill.

The reality is if you do anything on the computer, you are encountering programming and that makes it vitally important that you learn it because you will have a deeper understanding. In today’s world, there is a greater emphasis on the information technology aspect of careers, programming is vitally important. However, if you decide to ditch simple website builders and become a professional web developer then you should take up programming. This is a vital aspect of how you can make yourself more marketable in this field. There are plenty of excellent ways to learn how to program. The key is to find yourself a program that works for your learning style, and once you do so, you will create an additional area of marketability for yourself. Here are five reasons you should learn how to program.

Managing Your Videos With HTML and JavaScript

Wed, 22 Jan 2020 00:00:00 +0000

This article explains how to manage video content with HTML and JavaScript. Video content has become a significant part of Internet use, and it plays a large role in user experience. The ability to effectively include video content in your sites can help you improve user experience.

In this article, you’ll learn some basic HTML and JavaScript tools for working with video. You’ll also learn how to make some common customizations to your videos to give your users the best experience possible.

Catalina "Apple cannot check for malicious software" Command Line Fix

Mon, 20 Jan 2020 00:00:00 +0000

Fix “X can’t be opened because Apple cannot check for malicious software” and “Developer or app can’t be verified” using the command line.

Mac OS X Catalina has introduced a new host of permission issues. There are workarounds for applications that you’re installing to your “Applications” folder, namely right-click and use the “Open” -> “Open Anyway” trick.

For developers among you, you will want to use the command line to fix this situation rather than clicking around the UI.

For the non-developers among you, some applications will fail to open even if you give them the correct system & security settings.

This post details how to do that using the command line (Terminal) and xattr -d com.apple.quarantine <path-to-program>.

Fix "[Vue warn]: You are using the runtime-only build of Vue"

Mon, 25 Nov 2019 00:00:00 +0000

This post explains how to fix “[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.”.

This error happens when using the Vue CLI and attempting to use a component that has its template defined as a string.

Jest set, clear and reset mock/spy/stub implementation

Mon, 11 Nov 2019 00:00:00 +0000

Between test runs we need mocked/spied on imports and functions to be reset so that assertions don’t fail due to stale calls (from a previous test). This is a way to mitigate what little statefulness is in the system.

In unit tests of complex systems, it’s not always possible to keep business logic in pure functions, where the only input are the parameters and the only output is the return value. Systems are inherently side-effectful (things that are not parameters or output values). HTTP requests, database reads and writes are side-effects that are crucial to writing applications.

This is why we want to be able to set and modify the implementation and return value of functions in Jest.

This post goes through how to set, reset and clear mocks, stubs and spies in Jest using techniques such as the beforeEach hook and methods such as jest.clearAllMocks and jest.resetAllMocks. We’ll also see how to update a mock or spy’s implementation with jest.fn().mockImplementation(), as well as mockReturnValue and mockResolvedValue. This post is a reference to be able to discern when to use each of these.

Jest .fn() and .spyOn() spy/stub/mock assertion reference

Tue, 05 Nov 2019 00:00:00 +0000

Where other JavaScript testing libraries would lean on a specific stub/spy library like Sinon - Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework., Jest comes with stubs, mocks and spies out of the box.

This post looks at how to instantiate stubs, mocks and spies as well as which assertions can be done over them.

Jest Array/Object partial match with objectContaining and arrayContaining

Mon, 28 Oct 2019 00:00:00 +0000

It’s possible to do partial matches on Arrays and Objects in Jest using expect.objectContaining and expect.arrayContaining.

expect has some powerful matcher methods to do things like the above partial matches.

Using Jest at an advanced level means using tools like these to write tests that are better isolated and less brittle (this is what I’m tryin to achieve with the Jest Handbook).

This post starts with an explanation to give context to partial matches followed by sample use-cases in a recipe/cookbook format.

We finish off by mentioning further resources that cover this topic.

Jest explicitly or arbitrarily force fail() a test

Mon, 21 Oct 2019 00:00:00 +0000

When testing code with Jest, it can sometimes be useful to fail a test arbitrarily.

This post goes through a few scenarios where that might be useful and how to fail a Jest test explicitly/in a forced manner.

It also presents more idiomatic Jest patterns that could be used interchangeably.

How to integrate Python/Ruby/PHP/shell script with Node.js using child_process.spawn or child_process.exec

Wed, 16 Oct 2019 00:00:00 +0000

There are occasions when running a Python/Ruby/PHP shell script from Node.js is necessary. This post looks at best practices around leveraging child_process.spawn and child_process.exec to encapsulate this call in Node.js/JavaScript.

The goal here is to have an interoperability layer between Node.js and an outside shell. This is a quick workaround if some other part of your system isn’t developed in JavaScript.

spawn is used over exec because we’re talking about passing data, and potentially large amounts of it. To understand the difference between child_process.spawn and child_process.exec (see “Difference between spawn and exec of Node.js child_process”).

We’ll use exec to run arbitrary commands (eg. Pandoc generation), it’s ideal for small amounts of data (under 200k) using a Buffer interface and spawn for larger amounts using a stream interface.

spawn has a more verbose syntax for some of the use-cases we’ll look at, but it’s more serviceable for integrating with Ruby/Python/PHP since we might get more data than a couple of lines of text.

exec is brilliant to integrate with system binaries (where we don’t care about the output).

Full examples github.com/HugoDF/node-run-python.

Jest Full and Partial Mock/Spy of CommonJS and ES6 Module Imports

Tue, 15 Oct 2019 00:00:00 +0000

JavaScript import/require module testing do’s and don’ts with Jest

The example repository is available at github.com/HugoDF/mock-spy-module-import.

This post goes through how to achieve different types of module mocking scenarios with Jest.

From simple Import interception, to how to approach stubbing out an internal function call or Mocking only part of a module (by spying…).

These are methods that work in more specific cases than what the Jest official documentation shows.

This isn’t strictly a Jest testing guide, the same principles can be applied to any application/tests that need to mock CommonJS or ES Modules.

Importance of Blocking Web Crawlers and Bots From Your Website

Fri, 11 Oct 2019 00:00:00 +0000

The technical term, “crawling” means accessing websites automatically and obtaining data. Web crawlers, spiders, or search engine bots download and index web content from the Internet. Search engines, like Google, use bots or web crawlers and apply search algorithm to gather data so relevant links are provided in response to search queries. It helps in generating a list of web pages or search engine results.

But, why is it recommend to block bots and web crawlers? Find out more by reading below:

How to run, ignore or skip Jest tests, suites and files

Mon, 07 Oct 2019 00:00:00 +0000

When debugging or writing units tests with Jest it can be useful to specify a single file or test to run or to exclude a specific failing test for the Jest run.

This post goes how to skip and exclude a single test, a whole Jest test suite and a whole Jest test file using the CLI or Jest built-ins.

Auto-publish future posts with JAMstack on Netlify and IFTTT/CircleCI 2.0 scheduled jobs

Sun, 29 Sep 2019 00:00:00 +0000

Static site generators like Hugo, Jekyll, Hexo, Gatsby or other JAMstack alternative are a great option to run your blog on.

One of the earliest and possibly most painful issues you will come across is “How do I schedule content to publish for later?”.

In the traditional database-backed blog site, using WordPress or Ghost for instance. The posts are retrieved on access (at run-time in Computer Science-speak). To have a post that only starts appearing after a certain date is as simple as having a field with a “publishedAt” date, and some code that checks whether that field is before or after the current date.

Enter the JAMstack. It doesn’t run using a classic PHP/Node.js/Python/Rails server-side component backed by a relational or non-relational database.

JAMstack: Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

See jamstack.org and jamstack.wtf

Instead the JAMstack does the bulk of the processing work at build-time (as opposed to runtime). This tends to have a bunch of benefits like improved cache ability, higher leverage of a CDN (Content Delivery Network) which all contribute to a snappier experience.

The downside of this ahead-of-time computation of all the pages on the site is that there isn’t an obvious way to do “scheduled” posts. To make a post appear, you need to re-build the site after its “publishedAt” date so that it’s included in the build pages.

This post goes through how to achieve this using modern tools. Namely CircleCI 2.0 or IFTTT and Netlify (which is a hosting platform specialised in JAMstack sites).

codewithhugo.com used to run its daily builds using the CircleCI scheduled job approach but was updated to use IFTTT.

Detect ctrl/cmd/alt/shift + Click in Vanilla JavaScript, React and Vue.js

Mon, 16 Sep 2019 00:00:00 +0000

Detecting control-click, command-click, meta-click, alt-click and shift-click in JavaScript without listening to keydown events is straightforward.

The naive approach is to bind aggressively to key events (keydown, keypress, keyup) and to maintain state of what is currently pressed using JavaScript.

That’s not necessary since MouseEvents have some keypress specific properties: metaKey, ctrlKey, altKey and shiftKey (see the corresponding pages on MDN, metaKey, ctrlKey, altKey and shiftKey).

Record analytics events with a Zeit "micro" + SQLite3 Node.js application

Mon, 09 Sep 2019 00:00:00 +0000

micro-analytics-events - A Node.js microservice to record analytics events to SQLite3 with Zeit’s “micro”

In order to finally switch off Google Analytics, I need to replace my goal conversion tracking somehow.

I’ve got pageview data using Simple Analytics, which also has an events system.

In order to use events, you have to get cookie consent and those banners don’t look nice.

Instead I built micro-analytics-events. A Node.js microservice to record analytics events.

It uses micro because it’s lightweight and easy to get started with. It stores things with SQLite3 because I intend to host it for free on Glitch.

It’s a very simple application, if you send a POST request with an event_type it records it. If you send a GET request with optional start, end and event_type query params, it returns { "events": [] }, an object with an event key that’s an array of { event_type, date }.

How to run Jest tests sequentially

Mon, 02 Sep 2019 00:00:00 +0000

By default Jest runs tests in parallel with a “a worker pool of child processes that run tests” (Jest CLI docs).

As per the Jest documentation, running tests in sequence (serially), can be helpful for debugging purposes and for test run performance reasons.

Detect if the current file/module is the entrypoint or import/require-d in Node.js

Mon, 26 Aug 2019 00:00:00 +0000

How does one identify whether a JavaScript file is being run directly (node file.js) or it’s being import/require-d (require('./file') in another JS file).

In Python the pattern leverages the __main__ property in modules like so:

if __name__ == '__main__':
 # do something
 # or not
 pass

The equivalent code in Node.js/JavaScript would be:

if (require.main === module) {
 // do something
 // or nothing
}

Add Diagrams to your Jekyll/Hugo/Gatsby blog with Mermaid JS

Mon, 12 Aug 2019 00:00:00 +0000

Add diagrams to your JAMStack (Jekyll/Hugo/Gatsby) blog with Mermaid JS

Update 17th January 2024: Hugo now has native hooks for diagrams, so that code-fences using ```mermaid [content]``` can have a custom template, see the Content Management > Diagrams > Mermaid diagrams docs.

The following post will go through how to integrate Mermaid JS, a “simple markdown-like language for generating charts”.

It will initially go through the benefits of MermaidJS, followed by a generic (cross-technology) integration, finally it will tackle the Hugo-way of dealing with this issue.

Yarn Workspaces: monorepo management without Lerna for applications and coding examples

Mon, 05 Aug 2019 00:00:00 +0000

How to use Yarn Workspaces to manage applications/coding examples.

Lerna isn’t required when you don’t need the git diffing and versioning facilites.

What’s more Yarn Workspaces are a great lightweight tool to get up and running faster for simple Node.js monorepo actions.

Example monorepo at: github.com/HugoDF/yarn-workspaces-simple-monorepo

Add Search to a Hugo site with Lunr.js and Node.js

Mon, 01 Jul 2019 00:00:00 +0000

Hugo “The world’s fastest framework for building websites” is a great option for JAMStack (JavaScript, APIs, prebuild Markup) sites.

Lunr.js is “A bit like Solr, but much smaller and not as bright”, it’s a pure JavaScript implementation of a Solr-like search engine.

One of the only things it doesn’t provide out of the box is Search. It does give you a few options to integrate at “Search for your Hugo Website”.

None were plug and play so I wrote my own simple solution using Lunr.js, a small Node.js script and a few lines of client-side HTML/JavaScript code.

This is a great example of a benefit of Node.js: it’s a breeze to integrate a pure JavaScript library and pre-compute the search index.

You can see Search in action at codewithhugo.com/search/?q=lunrjs.

Find the full gist at gist.github.com/HugoDF

JavaScript Data Type Check Cheatsheet

Mon, 24 Jun 2019 00:00:00 +0000

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.

MDN Web Docs - javascript

Detailed in this post are common JavaScript data type checks, pitfalls and idiomatic workarounds.

Tailwind CSS 1.x impressions, development and production setup for static sites with Tailwind CLI and PurgeCSS CLI

Mon, 17 Jun 2019 00:00:00 +0000

How to set Tailwind CSS up with a static site hosted on Netlify

See the full starter repository at github.com/HugoDF/netlify-lambda-tailwind-static-starter

Tailwind CSS is “a utility-first CSS framework for rapidly building custom designs”. I’ll be walking through my first impressions of it as well as how to leverage its CLI (and the PurgeCSS CLI) to add it to any project without a build process (eg. Webpack, Gulp).

Jest ignore or exclude file/function/statement from test coverage

Mon, 10 Jun 2019 00:00:00 +0000

In computer science, test coverage is a measure used to describe the degree to which the source code of a program is executed when a particular test suite runs.

Code coverage - Wikipedia

Code coverage is usually used as a quality metric for software eg. “Our code has to have 80%+ test coverage”. Gathering test coverage with Jest is as simple as using the --coverage flag on invocation.

This post goes through how to ignore files, functions, lines and statements from coverage in Jest using configuration or istanbul pragmas. As well as reasons and limits to why/how you would do such a thing.

You can find a working examples repository at github.com/HugoDF/jest-ignore-coverage.

Super-powered newsletter content with Pocket and Netlify Lambda

Mon, 03 Jun 2019 00:00:00 +0000

An example Netlify Lambda to fetch all “newsletter” posts from Pocket.

Pocket is an application and web service for managing a reading list of articles from the Internet. It’s quite widely used and tightly integrated into the Firefox browser. I find that I use it extensively to save articles (usually about development).

For the Enterprise Node.js and JavaScript newsletter I have a “From the Web” section, which is populated from links from the web. Since most links that end up there are at one point or another stored on Pocket, I built a lambda that fetches posts tagged with “newsletter” from Pocket. I then consume that lambda from a Hugo newsletter file generator.

See the lambda code at src/lambda/newsletter.js in the repository github.com/HugoDF/pocket-newsletter-lambda.

Deploy your own on Netlify.

The application is styled using TailwindCSS, you can see a starter project for that at github.com/HugoDF/netlify-lambda-tailwind-static-starter.

Avoiding recursion pitfalls: MongoDB nested query clause addition and removal

Mon, 20 May 2019 00:00:00 +0000

A case-study on where recursion can be useful for enterprise Node.js applications and how to avoid its common pitfalls like RangeError: Maximum call stack size exceeded.

The full repository for this post is on GitHub: github.com/HugoDF/mongo-query-clause-modification

We’ll be implementing a solution to 2 real-world problems:

Read and parse POST/PATCH/PUT request JSON or form body with Express and no dependencies

Sat, 11 May 2019 00:00:00 +0000

When asked to handle data in a request body, developers who have used Express (the “Fast, unopinionated, minimalist web framework for Node.js”) before, reach for the body-parser library.

What they might not know is that body-parser is a dependency of Express and its main JSON parsing and url encoded body parsing functionality is exposed as express.json() and express.urlencoded()ie. middleware for parsing the most common request bodies is built into Express.

Note: express.json and express.urlencoded exist in Express 4.16+

The global express.json() middleware is not to be confused with the res.json() function which sends back a body as JSON (and sets the content format headers to JSON).

The code for json bodies is at https://codesandbox.io/s/olrn6x3n19?fontsize=14, you can view the app at https://olrn6x3n19.sse.codesandbox.io/.

The code for URL encoded form bodies is at https://codesandbox.io/s/6njqzmyw4k?fontsize=14, you can test it out at https://6njqzmyw4k.sse.codesandbox.io/.

Real(ish) world usage in projects, you can also find more Express posts on Code with Hugo

express.urlencoded: https://github.com/HugoDF/express-nunjucks-tailwind/blob/master/server.js
express.json: https://github.com/HugoDF/express-postgres-starter/blob/master/server.js

Using ES6 classes for Sequelize 4 or 5 models

Sat, 04 May 2019 00:00:00 +0000

The ES2015 or ES6 specification introduced class to JavaScript. Libraries like React went from React.createClass to class MyComponent extends React.Component, ie went from rolling their own constructor to leveraging a language built-in to convey the programmer’s intent.

For a Node.js web application’s persistence layer, a few databases come to mind like MongoDB (possibly paired with mongoose), or a key-value store like Redis.

To run a relational database with a Node application, Sequelize, “An easy-to-use multi SQL dialect ORM for Node.js” is a good option. It allows the application to run backed by a MySQL or PostgreSQL instance and provides an easy way to map from entities’ representation in the database to JavaScript and vice versa.

Sequelize’s v4 and lower API for model definitions looks like the following:

const MyModel = sequelize.define("MyModel", {
 // fields and methods
});

To add class and instance methods you would write the following:

// Class Method
MyModel.associate = function (models) {};
// Instance Method
MyModel.prototype.someMethod = function () {..}

This is necessary pre-ES6 since there was no concept of classical inheritance. Since we have class now, why not leverage them? For developers who are used to having classes, the following would likely look familiar:

class MyModel extends Sequelize.Model {
 static associate(models) {}
 someMethod() {}
}

Sequelize actually supports this, but the documentation is a bit lacking. One of the only place to find a reference to how to do this is in a GitHub issue: https://github.com/sequelize/sequelize/issues/6524.

Here’s a cheat sheet for things you would want to do and how to achieve it using ES6 classe + inheriting from Sequelize.Model:

Jest assert over single or specific argument/parameters with .toHaveBeenCalledWith and expect.anything()

Mon, 29 Apr 2019 00:00:00 +0000

With Jest it’s possible to assert of single or specific arguments/parameters of a mock function call with .toHaveBeenCalled/.toBeCalled and expect.anything().

The full example repository is at github.com/HugoDF/jest-specific-argument-assert, more specifically lines 17-66 in the src/pinger.test.js file.

You can use expect.anything() to ignore certain parameters that a mock Jest function is called with, see the following:

test('calls getPingConfigs with right accountId, searchRegex', async () => {
 await pinger(1);
 expect(mockPingConfig).toHaveBeenCalledWith(
 1,
 expect.anything(),
 expect.anything(),
 new RegExp('.*')
 );
});

Read on for more details of the code under test and why one would use such an approach.

The code under test follows module boundaries similar to what is described in An enterprise-style Node.js REST API setup with Docker Compose, Express and Postgres. Specifically a 3-tier (Presentation, Domain, Data) layering, where we’ve only implemented the domain and (fake) data layers.

An enterprise-style Node.js REST API setup with Docker Compose, Express and Postgres

Wed, 24 Apr 2019 00:00:00 +0000

The why and how of enterprise-style Node.js application. A setup that’s easy to test and extend using battle-hardened technologies like Express.js, Postgres and Docker Compose to run locally.

Dive into the code on GitHub directly: github.com/HugoDF/express-postgres-starter.

Enable CDN (Cloudflare) caching for your Netlify site

Mon, 01 Apr 2019 00:00:00 +0000

This post goes through how to reduce the amount of static assets served through Netlify by leveraging a CDN (Content Delivery Network) like Cloudflare. This will reduce your Netlify bandwidth usage for cacheable assets.

It will also mean that you’re following industry-accepted best practices around setting a time for which your assets should be cached by receiving browsers.

In principle, it won’t significantly improve the speed at which your site loads since Netlify’s built-in CDN does a good job of that anyways. It will mean that you’re leveraging your CDN’s capacity to deliver assets quickly as opposed to Netlify’s.

Docker Compose Local HTTPS with nginx or Caddy and mkcert

Mon, 25 Mar 2019 00:00:00 +0000

A solution to serve your Dockerized application on Docker Compose with TLS/SSL locally by leveraging a HTTPS reverse-proxy and mkcert.

Examples with Caddy and nginx are at: github.com/HugoDF/docker-compose-local-https

Table of contents:

Deployment options: Netlify + Dokku on DigitalOcean or Hetzner Cloud vs now.sh, GitHub Pages, Heroku and AWS

Wed, 20 Mar 2019 00:00:00 +0000

Settling on a Netlify + Dokku on DigitalOcean (for US) or Hetzner Cloud (for EU) deployment stack for JavaScript and Node.

Over the last few years I’ve never quite settled on a goto deployment strategy for my apps and projects. Technology-wise it has settled towards Vue or static site generators for the frontend with Node on the backend, whether that’s for API servers or handling rendering through handlebars.

What I’ve finally settled on is Netlify + Dokku on DigitalOcean. Netlify for anything static (and more with forms, CMS and lambda). Dokku, “The smallest PaaS implementation you’ve ever seen.“ for any backend apps and databases. This is what I’ve used to deploy my latest projects Post Frequency and Accountable Blogging, tools to quantify and improve your blogging output.

This is a long list of pros/cons for a bunch of services:

👍 → pro
👎 → con
🤔 → undecided
🚨 → deal-breaker for me
🤓 → nice-to-have

Table of contents:

JavaScript Object.defineProperty for a function: create mock object instances in Jest or AVA

Mon, 18 Mar 2019 00:00:00 +0000

This post goes through how to use Object.defineProperty to mock how constructors create methods, ie. non-enumerable properties that are functions.

The gist of Object.defineProperty use with a function value boils down to:

const obj = {}

Object.defineProperty(obj, 'yes', { value: () => Math.random() > .5 })

console.log(obj) // {}
console.log(obj.yes()) // false or true depending on the call :D

As you can see, the yes property is not enumerated, but it does exist. That’s great for setting functions as method mocks.

It’s useful to testing code that uses things like Mongo’s ObjectId. We don’t want actual ObjectIds strewn around our code. Although I did create an app that allows you generate ObjectId compatible values (see it here Mongo ObjectId Generator).

All the test and a quick explanation of what we’re doing and why we’re doing it, culminating in our glorious use of Object.defineProperty, is on GitHub github.com/HugoDF/mock-mongo-object-id. Leave it a star if you’re a fan 🙂 .

Fix git “tip of your current branch is behind its remote counterpart” - 4 real-world solutions

Mon, 11 Mar 2019 00:00:00 +0000

When working with git a selection of GitLab, GitHub, BitBucket and rebase-trigger-happy colleagues/collaborators, it’s a rite of passage to see a message like the following:

Pushing to git@github.com:some-project/some-repo.git
To git@github.com:some-project/some-repo.git
 ! [rejected] master -> master (non-fast-forward)
error: failed to push some refs to 'git@github.com:some-project/some-repo.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Merge the remote changes (e.g. 'git pull')
hint: before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

Pass cookies with axios or fetch requests

Mon, 04 Mar 2019 00:00:00 +0000

When sending requests from client-side JavaScript, by default cookies are not passed.

By default, fetch won’t send or receive any cookies from the server, resulting in unauthenticated requests https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Two JavaScript HTTP clients I use are axios, a “Promise based HTTP client for the browser and Node.js” and the fetch API (see Fetch API on MDN).

A testing guide for Express with request and response mocking/stubbing using Jest or sinon

Mon, 18 Feb 2019 00:00:00 +0000

To test an Express handler, it’s useful to know how to successfully mock/stub the request and response objects. The following examples will be written both using Jest and sinon (running in AVA).

The rationale for this is the following. Jest is a very popular “all-in-one” testing framework. Sinon is one of the most popular “Standalone test spies, stubs and mocks for JavaScript” which “works with any unit testing framework”.

The approach detailed in this post will be about how to test handlers independently of the Express app instance by calling them directly with mocked request (req) and response (res) objects. This is only 1 approach to testing Express handlers and middleware. The alternative is to fire up the Express server (ideally in-memory using SuperTest). I go into more detail on how to achieve that in “Testing an Express app with SuperTest, moxios and Jest”.

One of the big conceptual leaps to testing Express applications with mocked request/response is understanding how to mock a chained API eg. res.status(200).json({ foo: 'bar' }).

This is achieved by returning the res instance from each of its methods:

const mockResponse = () => {
 const res = {};
 // replace the following () => res
 // with your function stub/mock of choice
 // making sure they still return `res`
 res.status = () => res;
 res.json = () => res;
 return res;
};

See the repository with examples and the working application at github.com/HugoDF/mock-express-request-response.

Table of contents:

Node.js configuration management without config or dotenv

Wed, 13 Feb 2019 00:00:00 +0000

The config npm package is great (npmjs.com/package/config), but it encourages confusing and non-12-factor-app-compliant patterns.

We’ll look at some of the patterns it encourages and why they’ll bring you struggles down the road as well a simple, single-file, no-dependency way to define your configuration.

Bash Cheatsheet: check if environment variables are set or file/symlinks exists + more

Tue, 05 Feb 2019 00:00:00 +0000

A bash scripting cheat sheet for developers who just want to get by.

Writing setup, CI and deployment flows means a bit of the old bash scripting.

Despite my deep interest in the intricacies of Bash (/sarcasm), I’ve kept hitting up Google and StackOverflow for solutions to the same couple of situations.

To avoid having to do this again myself and for your reading pleasure, here they are.

To be dangerous in terms of setup, CI and depoyment flows we will encounter the following:

Async JavaScript: history, patterns and gotchas

Mon, 28 Jan 2019 00:00:00 +0000

A look at the history, patterns and gotchas of asynchronous operations in JavaScript.

We’ll go through the pros and cons of callbacks, Promises and async/await. Present some pitfalls to bear in mind as well as introducing how you would deal with certain situations.

Live-coding/workshop section touching on both Node and client-side JS situations at github.com/HugoDF/async-js-presentation/tree/master/workshop.

This given as a talk at Codebar London January Monthly 2019, see the slides:

Table of Contents 🐳:

Connect to MongoDB on Dokku with your local command line or Robo3T

Mon, 31 Dec 2018 00:00:00 +0000

The Dokku mongo plugin provides a mongo:connect command, which opens a tunnelled connection to you MongoDB instance on Dokku. This is how you can connect to your database using the tool of your choice, the examples will be using Robo3T.

Table of Contents:

Sequelize Data Types: a practical guide

Wed, 19 Dec 2018 00:00:00 +0000

DataTypes are core to the Sequelize 4 library. This is a practical and complete guide to make up for the sparse Sequelize official documentation on the subject.

First of all, DataTypes contains both the types and generators for default values: eg. NOW, UUIDV1 and UUIDV4 are special default values.

The places where you’re likely to encounter DataTypes are in the model field definition and in the migration definitions. Note that for a given model and field, the data type should be the same in the model and in the migration.

Table of contents:

Avoid null/undefined in JavaScript arrays

Thu, 13 Dec 2018 00:00:00 +0000

How to avoid TypeError: Cannot read property ___ of undefined using Array.filter(Boolean)

tl;dr: Array.filter(Boolean) filters out falsy values (null, undefined, 0, false, '') and avoids Cannot read property of undefined errors.

Table of contents:

JavaScript array type check - “is array” vs object in-depth

Mon, 10 Dec 2018 00:00:00 +0000

Detecting Array vs Object in JavaScript with examples

tl;dr To detect if something is an Array in JavaScript, use Array.isArray(somethingObjectToCheck).

This post is a quarter useful, quarter history lesson, half quirky JavaScript exploration.

Table of contents:

Technical content workflow for “Code with Hugo”: static site, Paper, Medium, DEV and Buttondown

Fri, 07 Dec 2018 00:00:00 +0000

tl;dr: here are the tools used to power, build and publish codewithhugo.com:

Dropbox Paper because it syncs desktop/mobile and outputs to markdown
Unsplash for cover images
Edited Markdown + images → Hugo static site generator
Casper 2 (https://ghost.org default theme) for Hugo
Schedule:
- Newsletter: Mondays 5pm UK every 2 weeks
- 1+ post a week
Cross-post to Medium (Stories → Import a Story)
Cross-post to dev.to using RSS feed
Social media/promotion < Organic traffic
Newsletter powered by https://buttondown.email
Analytics: Google Analytics + Simple Analytics

This post has about 7 month’s worth of learning in it, so see the following table of contents:

Post Frequency: from prototype to production with Vue + Node

Mon, 26 Nov 2018 00:00:00 +0000

If you want to ship, use the tools you know. — A lot of people

Let’s apply that principle: I’m building Post Frequency/Accountable Blogging, I’m familiar with Vue and Node-based backends. Netlify makes frontend deployments trivial and I’ve settled on Dokku for databases/backend applications hosting.

Table of contents:

Add a Vanilla JavaScript paywall to a Hugo site using checkoutpage.co

Thu, 22 Nov 2018 00:00:00 +0000

How I created the buying mechanism for the Sequelize ES6 Cheatsheet using checkoutpage.co and sprinkles of vanilla JavaScript.

This strictly isn’t a paywall, it’s all client-side and doesn’t check much.

In principle you can display the whole things using a bit of CSS magic. You could also read the source and reverse-engineer what query params work for this page.

You could also spoof as Google Bot (or another crawler) and skip the pay overlay. If someone shares the link containing the “paid” query param whoever they’re sharing with will see it without paying.

I don’t think it’s likely that people will go through the effort of doing the above reverse-engineering, so I’m going to walk anyone who will listen through how I’ve implemented it.

If you like getting the cheatsheet for free but also want to support my work you can Buy me a Coffee or just subscribe to my mailing list.

Table of contents:

A simple JavaScript/Node coding setup on Mac OS X

Mon, 19 Nov 2018 00:00:00 +0000

Here’s how I get productive for JavaScript/Node on Mac OS.

It includes iTerm2, zsh, Node, Visual Studio Code and some git commands.

Progress and roadblocks: a journey into open-source

Wed, 07 Nov 2018 00:00:00 +0000

Enhancing generators for ES6 in the Sequelize CLI

This is the story of my discovery of ES6-class style model definitions with Sequelize (see Using ES6 classes for Sequelize 4 models). The realisation that the current Sequelize CLI model generator didn’t support it (as is expected since it’s not the most common way of doing it). Finally, the impetus to just implement it myself.

In other words, I started using a style of Sequelize models that the Sequelize CLI didn’t support. I didn’t get an answer on a “feature request” issue, so I just forked it, implemented it and published it.

The Free Open Source Software movement has its ups and downs, its hype and abandoned projects. One of the great aspects of it is that you can always (depending on the license) just fork something and publish it 🙂.

Some links:

Live-tweet storms:

Table of contents:

A tiny case study about migrating to Netlify when disaster strikes at GitHub, featuring Cloudflare

Fri, 02 Nov 2018 00:00:00 +0000

Last Monday (22 October 2018) GitHub was going 💥, and scheduled content on Code with Hugo wasn’t going live.

For context, the blog’s setup is documented in “Switching the lights on: Hugo vs Hugo config files”.

tl;dr (as is relevant to this post)

Cloudflare DNS + CDN + proxying + HTTPS
GitHub Pages
Hugo as a static site generator
CircleCI to deploy the site daily + on push (🤷‍♀️wasn’t in the post but that’s how I do it)

Contents of this post:

Simple, but not too simple: how using Zeit’s `micro` improves your Node applications

Mon, 22 Oct 2018 00:00:00 +0000

Leave the Express comfort zone to expand how you think about Node application architecture.

tl;dr

using a function composition model for building HTTP servers is awesome
Functions as a Service are great but have some drawbacks
micro has a similar, simple API to FaaS but doesn’t have a compilation step
micro’s minimalism affects how you solve problems

An example comparing micro and express can be found at: github.com/HugoDF/micro-vs-express-example.

Table of contents:

6 months of Code with Hugo, in numbers

Sun, 21 Oct 2018 00:00:00 +0000

Going from 0 to small. A developer’s journey starting a technical blog from scratch.

Stats in this post as of 21st of October, follow me on Twitter for monthly updates.

Contents:

Use ES modules/ES6 import in Node without Babel/Webpack using `esm`

Thu, 11 Oct 2018 00:00:00 +0000

Node has been implementing more and more ES6+ (ESNext) features natively. One of the features that is taking the longest to implement is modules. The reason for this is that Node and npm run on what is called CommonJS, with which you use require('module-name') to import from other modules and use the module.exports object to expose entities from a module.

Node’s CommonJS was actually one of the first widely adopted module systems in JavaScript. The ease with which one can bundle CommonJS coupled with its widespread use in Node applications and tools means CommonJS quickly displaced RequireJS and SystemJS for frontend application dependency and module management

I’m working on a “history of JavaScript module, bundling + dependency management” article, subscribe to get it first).

CommonJS has some drawbacks, like being hard to statically analyse, which leads to for example bloated bundles. It’s also just not part of the ECMAScript specification, which ES modules are.

For anyone who is still wondering, ECMAScript (or ES) modules use a syntax with import thing from 'my-module'; or import { something } from 'my-module' to import things and export default or export something to expose entities from the module.

Bundlers like Webpack, Rollup and Parcel have support for ES modules. For a Node server I’ve still tended to write in CommonJS style because Node has great support for most ESNext features out of the box (eg. rest/spread, async/await, destructuring, class, shorthand object syntax) and I don’t like messing with bundlers and transpilers.

I’ve discovered the esm module, “Tomorrow’s ECMAScript modules today!” by John-David Dalton (of lodash 😄). It allows you to use ES modules in Node with no compilation step. It’s small, has a small footprint and comes with some extra goodies

What follows is some ways to use it that aren’t strictly documented. This covers use-cases like incremental adoption of ES modules (ie. convert some modules to ESM but not the whole app). Using this will help you share CommonJS and ESM modules.

Table of Contents:

ObservableHQ notebooks for JavaScript demos and prototypes

Mon, 08 Oct 2018 00:00:00 +0000

ObservableHQ is a platform being built by Mike Bostock (creator of the D3 visualisation library), Jeremy Ashkenas (“Made CoffeeScript, Backbone.js, Underscore and other ragbag” from his Twitter bio) and Tom MacWright (creator of the big presentation framework, simple-statistics and documentation.js as well as D3 contributor amongst other things).

Observable is not just another JavaScript sandbox. It introduces the notebook paradigm to JavaScript projects, those of you familiar with Jupyter notebooks, this is the equivalent with JavaScript instead of Python. It turns out JavaScript is very well-suited to this type of paradigm.

What’s more, JavaScript developers already have some sort of familiarity with reactivity since most frontend frameworks and view libraries build on it. It’s a different kind of reactivity, in that the library only re-renders or re-computes the section of the application that needs it (cf. Vue, Angular, React).

You can read original post from Bostock detailing what is now ObservableHQ (then called d3.express), “A better way to code” on Medium. In that post, the state of the art of why and how of data visualisation is explained. A “better way” is described, the “integrated discovery environment”, or more simply “notebook”-s.

That inception post is a 20 minute read, but here’s the tl;dr:

visualisations are usually one-offs - “The purpose of visualization is insight, not pictures.”
reactivity is great for building visualisations and discovering insights from data
visual outputs help massively especially in the exploration phase
a well-designed notebook system has the benefit of making chunks of code reusable without much effort (or re-packaging as a library)
web-based notebooks are accessible from anywhere by anyone (if that’s wanted behaviour)

I especially like points 4 and 5, since they’re not a selling point for notebooks in general but for ObservableHQ’s take on the problem. What you end up with is a well-designed web-based reactive notebook environment that’s suited to prototyping.

Table of contents:

Impress interviewers with recursion in JavaScript with ES6 features

Mon, 01 Oct 2018 00:00:00 +0000

There’s nothing as flashy and useful for JavaScript interviews than recursion.

If you just want to be impressive with recursion in JavaScript, here are some semi real-world (technical test type) examples.

The short definition of a recursive solution to a problem (in computer science) is: don’t use iteration. This usually means a function has to call itself with a smaller instance of the same problem until it hits a trivial case (usually defined in the problem).

Hence, recursion is composed of a couple of steps:

the base or terminating case, it’s the situation we want to end up in “A recursive function definition has one or more base cases, meaning input(s) for which the function produces a result trivially (without recurring)” - Wikipedia, Recursion (computer science)
recursive case, where the program recurs (again [Wikipedia, Recursion (computer science)](http://one or more recursive cases, meaning input(s) for which the program recurs (calls itself)))

In this post:

Writing multiple Vue components in a single file

Thu, 27 Sep 2018 00:00:00 +0000

Writing multiple components in one file is a pattern from React where some files contain multiple components.

Some of those components are “private” to the file/exported component since no other component needs to consume them.

Mocking/stubbing ES6 classes in tests with examples of Sequelize model unit tests

Mon, 24 Sep 2018 00:00:00 +0000

This post goes through some patterns that can be used to unit test ES6 classes.

The examples will use Jest module auto-mocking but should be portable to other module mocking libraries (eg. Proxyquire) with some modifications.

In “Using ES6 classes for Sequelize 4 models” we explored how to define Sequelize models using ES6 classes. One of the benefits of such an approach is that it allows easy unit testing, it allows you to instantiate the model without the baggage of all of Sequelize (and/or a database).

Why you should wrap your (JavaScript) dependencies

Mon, 17 Sep 2018 00:00:00 +0000

An email sending example.

A gentle introduction to GraphQL API integrations

Mon, 10 Sep 2018 00:00:00 +0000

GraphQL is a great alternative to REST (or other HTTP API designs). This is an quick introduction to the core concepts around consuming a GraphQL API.

To see some examples consuming a GraphQL API:

In Python, see Python GraphQL client requests example using gql
In JavaScript (browser and Node), see last week’s Code with Hugo newsletter

Table of contents:

JavaScript GraphQL client requests in Node and the browser using `graphql.js`

Wed, 05 Sep 2018 00:00:00 +0000

An example consuming a GraphQL API in JavaScript from Node and the browser using graphql.js

See the example live: https://example.codewithhugo.com/js-graphql-client-example/.

Full repo: https://github.com/HugoDF/js-graphql-client-example.

Build and deploy a Vue/React/Vanilla JS app with Parcel and GitHub pages

Tue, 04 Sep 2018 00:00:00 +0000

Parcel allows us to bundle frontend applications with no configuration and GitHub pages affords us a way to deploy them for free.

Here’s how to use these two tools together to deploy a JavaScript application.

Full example of a repo deployed like this: https://github.com/HugoDF/js-graphql-client-example, and see https://example.codewithhugo.com/js-graphql-client-example/.

Or the repo with the demos: https://github.com/HugoDF/parcel-gh-pages-deploy and see https://example.codewithhugo.com/parcel-gh-pages-deploy/.

Change the date of a git commit

Wed, 29 Aug 2018 00:00:00 +0000

One of the greatest and worst things with git is that you can rewrite the history. Here’s a sneaky way of abusing that, I can’t think of a legitimate reason to do this.

As with anything, thanks StackOverflow for all the options I can pick from 👍.

The step-by-step guide to create a domain redirect with Cloudflare

Tue, 28 Aug 2018 00:00:00 +0000

Redirecting a whole domain using Cloudflare can be useful but isn’t documented anywhere, here’s how to do it.

Python GraphQL client requests example using gql

Mon, 27 Aug 2018 00:00:00 +0000

An example consuming a GraphQL API from Python using gql.

Full code example at HugoDF/python-graphql-client-example.

Switching the lights on: Hugo vs Hugo config files

Fri, 17 Aug 2018 00:00:00 +0000

A simple Hugo blog setup

The story of getting codewithhugo.com up and running.

The tl;dr is the following:

I always rave about my blog setup, it’s simple, fast and just works
I used Hugo, “The world’s fastest framework for building websites”, a static site generator
I used a theme, casper-two, which is a Hugo port of the https://ghost.org/ default theme
I deployed to GitHub pages behind Cloudflare *.

There’s been an update in the deployment saga, read it here: “A tiny case study about migrating to Netlify when disaster strikes at GitHub, featuring Cloudflare”

When to use Jest snapshot tests: comprehensive use-cases and examples 📸

Fri, 10 Aug 2018 00:00:00 +0000

There’s some nice use-cases for snapshot tests outside of the well-travelled React/Vue UI component ones.

In other words, although React and Vue testing with snapshots is pretty well documented, that’s not the only place they’re useful.

As a rule of thumb, you could replace a lot of unit tests that assert on with specific data with snapshot tests.

We have the following pros for snapshot tests:

the match data is stored in a separate file so it’s harder to lose track of things, eg. being skimmed over during review
it’s a lot less effort to change than inline data matching, just run npx jest -u and all snapshots get updated.

The following cons also come to mind:

it’s a lost less effort to change than inline data matching, which means people need to pay attention to changes in snapshot files
despite community efforts, the only major test library that supports out of the box is Jest (which locks you into that ecosystem)

That makes it particularly well-suited for a couple of areas:

Deploy to multiple environments with git and CircleCI

Wed, 01 Aug 2018 00:00:00 +0000

Easily deploying to multiple environments in a simple manner using GitHub, CircleCI and Heroku.

Continuous Integration is awesome, but sometimes you need a buffer between auto-deploying things on merge and the production release. To do that with CircleCI requires some git branch-wrangling and a few lines of bash scripting. We’ll imagine a scenario where a deploy is trivial (ie. we’ll pretend we’re using Heroku). For more complicated build steps we should still be able to follow similar principles. This is not a CircleCI 2.0 workflows tutorial, it’s more of a git-flow/CircleCI hybrid to have 2 (or more) environments being released to and automatically deployed by CircleCI.

I would like to thanks Chris Fidao, and this tweet:

We’ll go through how to use GitHub + CircleCI for deployment automation and release management.

Install just redis-cli on Ubuntu, Debian, Jessie

Tue, 24 Jul 2018 00:00:00 +0000

As part of adding integration tests to an app on CircleCI I ran into the following issues:

redis-cli’s API has changed from Redis CLI versions 2 to 3 to 4
- ie. this works in v4 redis-cli -u ${REDIS_URL} but doesn’t in v2
the “only way” to install redis-cli is through a redis-tools or redis-server install and I only need the Redis CLI not the server or any other tools.

What follows is how not to install redis-cli and then how to install redis-cli latest, properly.

Bring Redux to your queue logic: an Express setup with ES6 and bull queue

Sat, 21 Jul 2018 00:00:00 +0000

There always comes a point in a web application’s life where an operation is best served in the background, this is where queues come in.

There are a few queuing solutions in Node. None of them are ridiculously dominant, eg. Kue, RSMQ, Bee Queue, bull. The issue with Kue, RSMQ and Bee Queue was its use of a done callback as the recommended API.

Bull https://github.com/OptimalBits/bull is a premium Queue package for handling jobs and messages in NodeJS. It’s backed by Redis and is pretty feature-rich. Most of all, it leverages a Promise-based processing API which means async/await.

We’ll walk through an application that sends webhooks with a given payload to a set of URLs.

You can find the full code content at https://github.com/HugoDF/express-bull-es6.

ES6 by example: a module/CLI to wait for Postgres in docker-compose

Wed, 11 Jul 2018 00:00:00 +0000

When using docker-compose, it’s good practice to make anything that relies on Postgres wait for it to be up before launching. This avoids connection issues inside the app.

This post walks through how to deliver this functionality both as a CLI and a module that works both as a CommonJS module (require) and ES modules, without transpilation.

“A fast, production ready, zero-dependency ES module loader for Node 6+!” is esm’s promise. From this sample project, it’s worked.

Better HTTP Polling in JavaScript with RxJS 5

Mon, 09 Jul 2018 00:00:00 +0000

Here is the implementation for a function that takes a Promise-based fetch function (eg. using axios) and a function that decides if a response has been successful (from a polling perspective) and polls the fetch function until the isSuccess function returns true:

Responsive, semantic images with CSS

Thu, 05 Jul 2018 00:00:00 +0000

CSS tip: object-fit your images.

To have an image that doesn’t try to stretch to its width/height the classic CSS is as follows:

Testing an Express app with SuperTest, moxios and Jest

Wed, 27 Jun 2018 00:00:00 +0000

Testing is a crucial part of the software development process. It helps to catch bugs, avoid regressions and to document the behaviour of a piece of software.

Express is one of the most widespread libraries for building backend applications in JavaScript. What follows is a summary of how to set up an efficient unit testing strategy for such an application as well as a couple of situations you may be faced with when attempting to test.

Full code example can be found at https://github.com/HugoDF/express-supertest-moxios.

How to make beautiful, simple CLI apps with Node

Wed, 20 Jun 2018 00:00:00 +0000

Channel your inner Sindre Sohrus and ship a beautifully simple CLI app using Node.

Command line apps are a neat way to package repetitive tasks. This will walk you through some tools that are useful to build CLI apps.

A Docker/docker-compose setup with Redis and Node/Express

Wed, 06 Jun 2018 00:00:00 +0000

Redis and Express are tools that provide a simple and clean approach to their problem domains. What follows is a Docker/Docker Compose v2 setup.

The repo is available at: https://github.com/HugoDF/express-redis-docker.

The docker-compose.yml is available at: github.com/HugoDF/express-redis-docker/docker-compose.yml

Redis is “an open source, in-memory data structure store, used as a database, cache and message broker”. It’s as simple and unopinionated as a database as it gets, it’s known for its performance and simplicity as a key-value store. It has great flexibility and can also be used as a message queue, circular buffer (and pretty much anything else a developer can come up with short of a relational database).

Express is a “fast, unopinionated, minimalist web framework for Node.js”. In other words, it’s a wrapper around Node’s server, that provides a way to write what’s called “middleware” to share and compose functionality across HTTP endpoints as well as define said endpoints.

Getting Redis and Express to work together is trivial. Getting Redis and Express to work together in a way that’s fool and future-proof, and reproducible across local and deployed environments, is slightly harder. That’s where Docker and Docker Compose come in.

Docker is a containerisation system, Docker Compose is a way to define how multiple Docker containers interact. In the context of Node web application development, Docker tends to be used to define a container that has the required system-level dependencies (eg. Node version, any extra database drivers). Docker Compose would be used to define dependencies outside of the Node application, for example databases.

From AngularJS to Vue.js, CommonJS and Jest

Wed, 30 May 2018 00:00:00 +0000

The trials and tribulations of kicking off an AngularJS -> Vue.js migration

AngularJS was pretty groundbreaking. It’s still impressive to this day, packed with a router, an HTTP client, a dependency injection system and a bunch of other things I haven’t necessarily had the pleasure of dealing with. It also wraps most browser APIs as injectable services, that’s pretty cool. The downside is that it’s complicated: services, filters, injectors, directives, controllers, apps, components.

With the tools we have today, AngularJS isn’t as strong a way to do things any more. The fact that it’s in maintenance mode says it all. For a new application or new features, ie. for a project that not in maintenance mode, it’s doesn’t have the same niceties as other frameworks and libraries like Angular 2+, React or Vue. There should be a way not to rewrite the whole AngularJS application at once, here’s how I went about doing it:

Split an existing git commit

Wed, 23 May 2018 00:00:00 +0000

One of git’s main differences when compared to other version control systems is that it lets the user rewrite the history. The main way to do this is to use git rebase, usually followed by a git push --``force to overwrite history the remote with the local history.

Here’s a look at how to split existing commits using rebase, reset and commit.

A simple, real-world Vue.js directive example

Tue, 15 May 2018 00:00:00 +0000

Vue.js is “The Progressive JavaScript Framework”. It takes inspiration from all prior art in the view library and frontend framework world, including AngularJS, React, Angular, Ember, Knockout and Polymer. In Vue (and Angular/AngularJS), a directive is a way to wrap functionality that usually applies to DOM elements. The example in Vue’s documentation is a focus directive.

When running Vue.js inside of AngularJS, an issue occured whereby the AngularJS router would try to resolve normal anchors’ href on click. The hrefs weren’t AngularJS URLs so it would fall back to the default page. One solution could have leveraged components to update window.location directly, but here’s a nifty directive to do the same:

<a v-href="'/my-url'">Go</a>

That’s a pretty cool API, and it’s probably more idiomatic Vue than:

<MyAnchor href="/my-url">
 Go
</MyAnchor>

There were a couple of gotchas:

Ditch syntax highlighting for better technical writing

Wed, 25 Apr 2018 00:00:00 +0000

Ditching syntax highlighting leads to more concise snippets, more thought to be put to find a minimal example and better overall flow in your writing.

React vs Angular vs Vue in 2019: How components won the “framework wars”

Sun, 22 Apr 2018 00:00:00 +0000

React, Vue or Angular: Why it doesn’t matter.

2018 marked the end of JavaScript fatigue and the React vs Vue vs Angular (“framework wars”) debate

A typical frontend/JavaScript developer career usually involves some jQuery and associated plugins before moving on to React, Angular or Vue.

Having experienced React, Vue and Angular, it seems they solve similar problems in a similar way. Where they differ is the setup experience and best-practices. In more ways than one, the mental model of these frameworks/libraries have converged to the component model.

This is a win for the developers since the mental model is the same for all the most widespread frameworks. Which means going from one to the other does not pose as big a challenge as it used to.

If you came here to read a more thorough review and have more background to the Vue, React and Angular ecosystems, I recommend the following from 2017:

Angular vs. React vs. Vue: A 2017 comparison

Table of contents:

Animations: CSS vs JavaScript

Sun, 21 Jan 2018 00:00:00 +0000

When should you use JavaScript when you can use CSS?

This post was sparked by a question I answered on Quora: Which is better to use, CSS or JS?

The web frontend is built with the triumvirate of HTML, CSS and JavaScript (see “Backend code, frontend code and how they interact” for more details): HTML says what things are, CSS how they look and JavaScript does all the things the other two can’t.

Seeing it from this light the answer to the question: “When should you use JavaScript when you can use CSS?” is never.

HTML, CSS and JavaScript do overlap especially since HTML5 and CSS3. Animations before CSS3 used to be the premise of the JavaScript and complex animation orchestration still is with libraries like GSAP, but nowadays we can also animate using the transition CSS rule.

This leads us to formulate some rules around using JavaScript in the browser:

if you can do something with CSS over JavaScript, do it
if you can do something with HTML over JavaScript, do it

Learn git even if you don’t code

Mon, 04 Dec 2017 00:00:00 +0000

The tools we wield define us, git is the one tool all developers use

In simple terms: code on the backend, frontend and how they interact

Fri, 31 Mar 2017 00:00:00 +0000

A look at the shifting boundaries of the web development stack

This was originally posted as an answer on Quora: How do frontend code and backend code interact with each other?

Let’s start with quick definitions followed by state of the art best practices.

AVA, low-config testing for JavaScript

Mon, 13 Mar 2017 00:00:00 +0000

A JavaScript testing library for 2017

AVA is a Futuristic JavaScript test runner.

Some of its best features are:

it works out of the box, no need to specify a blob for test files or add Babel hooks
it runs tests in parallel, this stops you from using global state and runs faster
the tests are async by default

I quite like AVA since I can just drop it in and reap benefits without too much hassle. I’ve never had to fight against AVA to get tests running, that means more focus on the code and tests and less on the setup.

First-class and Higher Order Functions: Effective Functional JavaScript

Mon, 23 Jan 2017 00:00:00 +0000

Functions: the killer JavaScript feature we never talk about.

JavaScript is a very in-demand language today. It runs in a lot of places from the browser to embedded systems and it brings a non-blocking I/O model that is faster than others for some types of applications. What really sets JavaScript apart from the rest of scripting languages is its highly functional nature.

JavaScript has more in common with functional languages like Lisp or Scheme than with C or Java. — Douglas Crockford in JavaScript: the World’s Most Misunderstood Language

It’s a widely publicised fact that Brendan Eich, when creating the first version of JavaScript, was actually told he would be able to build a Lisp, a list processing language like Scheme or common Lisp. It turns out that Sun Microsystems had other ideas and this programming language needed to wear a coat of procedural syntax inherited from a C or Java-like language. Despite all the semicolons, at its heart JavaScript remains a functional language with features such as first-class functions and closures.

This post will focus on first-class functions and higher order functions. To read more about closures and how to leverage them to wield JavaScript’s functional powers, I’ve written the following post: Ingredients of Effective Functional JavaScript: Closures, Partial Application and Currying *To use JavaScript to its full potential you have to embrace its strong functional programming base.*hackernoon.com

Closures, Partial Application and Currying: Effective Functional JavaScript

Thu, 12 Jan 2017 00:00:00 +0000

Spices and other ingredients of a great curry

To use JavaScript to its full potential you have to embrace its strong functional programming base. We’re going to explore some crucial and powerful functional constructs: closures, partial application and currying that make JavaScript terse yet understandable.

10 minute JavaScript: Library development in ES6 with Babel, Mocha and npm scripts

Mon, 24 Oct 2016 00:00:00 +0000

Warning: the ecosystem has moved on since this post was originally published, it’s now easier than ever to set up a library for development: see Writing an npm module with microbundle for an up to date view on how to develop a library

JavaScript has a thriving ecosystem of libraries delivered as packages on npm. Node has a high degree of compatibility with ES6 but it doesn’t have some features yet, namely import. This means that if we want to distribute useable packages over npm and we want to be writing ES6, we have to transpile back to ES5.

We’ll be setting up a project that allows us to write ES6, and distribute it in ES5 (with Babel) and to test it with Mocha, all through npm scripts. We’ll also discuss some workflows that we can use to speed up our development.

TL;DR Use this package.json, create a src folder, add an index.js and some .js and .test.js files inside it and off you go. You can also check out https://github.com/HugoDF/recursive-js, it’s a decent example project. :)

{
 "name": "library-js",
 "version": "1.0.0",
 "description": "Starter for library development with ES6, Babel, Mocha and npm scripts",
 "main": "./dist/index.js",
 "scripts": {
 "start": "npm run dev",
 "dev": "npm test -- -w",
 "init": "mkdir dist",
 "clean": "rm -rf dist",
 "prebuild": "npm run clean && npm run init",
 "build": "babel ./src -d ./dist --ignore test.js",
 "pretest": "npm run build",
 "test": "mocha --compilers js:babel-core/register ./src/**/*.test.js",
 "test:single": "mocha --compilers js:babel-core/register"
 },
 "author": "Hugo Di Francesco",
 "devDependencies": {
 "babel-cli": "^6.16.0",
 "babel-core": "^6.17.0",
 "babel-preset-es2015": "^6.16.0",
 "chai": "^3.5.0",
 "mocha": "^3.1.2"
 },
 "files": [
 "dist"
 ]
}

Recursion in JavaScript with ES6, destructuring and rest/spread

Mon, 10 Oct 2016 00:00:00 +0000

The latest ECMA standard for JavaScript (ECMAScript 6) makes JavaScript more readable by encouraging a more declarative style with functional constructs and new operators.

Why CSS is hard

Sat, 18 Jun 2016 00:00:00 +0000

Things we’re not used to tend to be harder

I’m a developer, and I CSS. I probably have written more CSS than I have written Java, Ruby, PHP, Python and JavaScript combined.

Being a front-end developer is a dying art. By front-end I don’t mean ES6, Babelifyied React SPAs. I mean meat and potatoes: “here’s a design, turn it into a website please”.

CSS doesn’t get the love it deserves in the developer crowd. I think I know why that is: it’s hard. Especially coming from the fairy land that is Java/JavaScript/Ruby/PHP/insert language.

Now I’m not saying all these languages are easy by any stretch but CSS always throws up issues that stump me… for a good while.