Code with Hugo

JavaScript ES6 Array remove duplicates/get unique values in-depth with Set and spread/iterables

With ES6, more developers should be leveraging built-ins than are using lodash functions. Here is an ES6 implementation of lodash/underscore’s uniq: const dedupe = list => [...new Set(list)]; This post goes through the how and why this works. It explores Sets, iterabl ...

#meta #jamstack #hugo #javascript

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

Add diagrams to your JAMStack (Jekyll/Hugo/Gatsby) blog with Mermaid JS 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 gen ...

#javascript #node #meta

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

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 monor ...

#javascript #jest #node #es6 #testing

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

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 interc ...

#node #lunrjs #hugo #meta #javascript

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

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-lik ...

#javascript

JavaScript Data Type Check Cheatsheet

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

#jamstack #css #tailwind #deployment

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

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 firs ...

#javascript #jest #testing #node

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

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

#node #serverless #javascript #automation #deployment

Super-powered newsletter content with Pocket and Netlify Lambda

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 extensiv ...

#JavaScript #jest #Node #Testing #date

Mocking/stubbing the current Date in Jest tests

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 o ...